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

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

prd.json

@@ -371,7 +371,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 21,
-      "passes": false,
+      "passes": true,
       "notes": ""
     },
     {

progress.txt

@@ -22,6 +22,8 @@
 - Use toReactFlowNodes/toReactFlowEdges helpers to convert app types to React Flow types
 - Custom node components go in `src/components/editor/nodes/` with NodeProps<T> typing and useReactFlow() for updates
 - Register custom node types in nodeTypes object (memoized with useMemo) and pass to ReactFlow component
+- FlowchartEditor uses ReactFlowProvider wrapper + inner component pattern for useReactFlow() hook access
+- Use nanoid for generating unique node IDs (import from 'nanoid')
 
 ---
 
@@ -322,3 +324,17 @@
   - Memoize nodeTypes with useMemo to prevent unnecessary re-renders
   - Custom node components go in src/components/editor/nodes/ directory
 ---
+
+## 2026-01-21 - US-021
+- What was implemented: Add dialogue node from toolbar functionality
+- Files changed:
+  - package.json - added nanoid dependency for unique ID generation
+  - src/app/editor/[projectId]/FlowchartEditor.tsx - implemented handleAddDialogue to create new dialogue nodes at viewport center
+- **Learnings for future iterations:**
+  - useReactFlow() hook requires ReactFlowProvider wrapper, so split component into inner component and outer wrapper
+  - getViewport() returns { x, y, zoom } representing the current pan/zoom state
+  - Calculate viewport center: centerX = (-viewport.x + halfWidth) / viewport.zoom
+  - nanoid v5+ generates unique IDs synchronously with no dependencies
+  - Node creation pattern: create Node object with { id, type, position, data }, then add to state via setNodes
+  - React Flow nodes are draggable by default, no extra configuration needed
+---