chore: mark US-029 as complete and update progress log

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

prd.json

@@ -499,7 +499,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 28,
-      "passes": false,
+      "passes": true,
       "notes": ""
     },
     {
@@ -514,7 +514,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 29,
-      "passes": false,
+      "passes": true,
       "notes": ""
     },
     {

progress.txt

@@ -409,3 +409,27 @@
   - Apply consistent edge styling in both onConnect (new edges) and toReactFlowEdges (loaded edges)
   - Generate unique edge IDs with nanoid in onConnect callback
 ---
+
+## 2026-01-21 - US-028
+- What was implemented: Select and delete nodes functionality
+- Files changed:
+  - src/app/editor/[projectId]/FlowchartEditor.tsx - added deleteKeyCode prop to enable Delete/Backspace key deletion
+- **Learnings for future iterations:**
+  - React Flow has built-in node selection via clicking - no extra configuration needed
+  - Use `deleteKeyCode={['Delete', 'Backspace']}` prop to enable keyboard deletion
+  - React Flow automatically removes connected edges when a node is deleted (no manual cleanup needed)
+  - The useNodesState/useEdgesState hooks with onNodesChange/onEdgesChange handle all deletion state updates
+  - No explicit onNodesDelete callback is needed - the onNodesChange handler covers deletion events
+---
+
+## 2026-01-21 - US-029
+- What was implemented: Select and delete edges functionality
+- Files changed:
+  - src/app/editor/[projectId]/FlowchartEditor.tsx - added onEdgesDelete callback
+- **Learnings for future iterations:**
+  - React Flow 11 edges are clickable and selectable by default (interactionWidth renders invisible interaction area)
+  - The `deleteKeyCode` prop works for both nodes and edges - same configuration covers both
+  - onEdgesDelete is optional if you just need state management (onEdgesChange handles removal events)
+  - onEdgesDelete is useful for additional logic like logging, dirty state tracking, or undo/redo
+  - Edge selection shows visual highlight via React Flow's built-in styling
+---

src/app/editor/[projectId]/FlowchartEditor.tsx

@@ -161,6 +161,13 @@ function FlowchartEditorInner({ initialData }: FlowchartEditorProps) {
     // TODO: Implement in US-036
   }, [])
 
+  // Handle edge deletion via keyboard (Delete/Backspace)
+  const onEdgesDelete = useCallback((deletedEdges: Edge[]) => {
+    // Edges are already removed from state by onEdgesChange
+    // This callback can be used for additional logic like logging or dirty state
+    console.log('Deleted edges:', deletedEdges.map((e) => e.id))
+  }, [])
+
   return (
     <div className="flex h-full w-full flex-col">
       <Toolbar
@@ -178,7 +185,9 @@ function FlowchartEditorInner({ initialData }: FlowchartEditorProps) {
           nodeTypes={nodeTypes}
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
+          onEdgesDelete={onEdgesDelete}
           onConnect={onConnect}
+          deleteKeyCode={['Delete', 'Backspace']}
           fitView
         >
           <Background variant={BackgroundVariant.Dots} gap={16} size={1} />