Problem

When the AI Refinement panel is open and users modify the canvas (add/remove/edit nodes), the AI receives stale workflow information from when the panel was opened.

Current Behavior

1. User opens AI Refinement panel
2. User modifies canvas (e.g., adds a node)
3. User asks AI to refine workflow
4. ❌ AI sees the old workflow state, not the current canvas

Expected Behavior

1. User opens AI Refinement panel
2. User modifies canvas (e.g., adds a node)
3. User asks AI to refine workflow
4. ✅ AI sees the current canvas state

Root Cause

nodes/edges and activeWorkflow are two independent state sources. Canvas modifications update nodes/edges, but activeWorkflow remains stale. The AI refinement feature reads from activeWorkflow, not directly from nodes/edges.

Solution

Add a useEffect in App.tsx that synchronizes activeWorkflow whenever nodes or edges change. This follows the same pattern as #384 (conversation history sync).

Key Implementation Details

• Uses useRef to track previous nodes/edges references to prevent unnecessary updates
• Uses updateActiveWorkflowMetadata instead of setActiveWorkflow to avoid infinite loops (the latter also updates nodes/edges, which would trigger the effect again)
• Preserves the original workflow ID during serialization

Changes

File: src/webview/src/App.tsx

• Added serializeWorkflow import
• Added nodes, edges, workflowName, workflowDescription, subAgentFlows to store destructuring
• Added useEffect hook to sync canvas changes to activeWorkflow

// Issue #388: Sync activeWorkflow when canvas (nodes/edges) changes
const prevNodesRef = useRef(nodes);
const prevEdgesRef = useRef(edges);
useEffect(() => {
  if (nodes === prevNodesRef.current && edges === prevEdgesRef.current) {
    return;
  }
  prevNodesRef.current = nodes;
  prevEdgesRef.current = edges;

  if (activeWorkflow && nodes.length > 0) {
    const workflow = serializeWorkflow(
      nodes, edges, workflowName || 'Untitled',
      workflowDescription, activeWorkflow.conversationHistory, subAgentFlows
    );
    workflow.id = activeWorkflow.id;
    updateActiveWorkflowMetadata(workflow);
  }
}, [nodes, edges, workflowName, workflowDescription, subAgentFlows, activeWorkflow, updateActiveWorkflowMetadata]);

Impact

• UX: AI refinement now always sees the current canvas state
• Breaking changes: None
• Performance: Minimal - uses reference comparison to skip unnecessary serialization

Testing

• Manual E2E testing completed
  • Open refinement panel → modify canvas → ask AI → AI sees current state ✅
  • No infinite loops ✅
• Code quality checks passed (npm run format && npm run lint && npm run check)
• Build passed (npm run build)

Related

• Fixes AI Refinement: Canvas changes while panel is open are not reflected in AI context #388
• Follow-up to AI Refinement: Conversation history disappears when collapsing panel #384 (conversation history sync)
• Enhancement issue created: Refactor: Remove activeWorkflow and use single source of truth (nodes/edges) #389 (future refactoring to eliminate dual state)

🤖 Generated with Claude Code