Problem

When adding a node to the canvas, users cannot easily locate the newly added node, especially when:

• The canvas is zoomed out
• The canvas is panned to a different area
• Multiple nodes already exist on the canvas

Current Behavior

1. User clicks a node type in NodePalette
2. ❌ Node is added at a calculated position, but canvas doesn't move
3. ❌ User must manually search for the new node

Expected Behavior

1. User clicks a node type in NodePalette
2. ✅ Node is added and canvas automatically pans to show the new node
3. ✅ Node is selected and property panel opens

Solution

Implement auto-focus functionality using React Flow's setCenter() method with smooth animation.

Changes

New File: src/webview/src/hooks/useAutoFocusNode.ts

• Custom hook that watches lastAddedNodeId state
• Uses React Flow's setCenter() with 300ms animation
• Preserves current zoom level

File: src/webview/src/main.tsx

• Wrap App with ReactFlowProvider to enable useReactFlow() hook

File: src/webview/src/stores/workflow-store.ts

• Add lastAddedNodeId state tracking
• Modify addNode() to set lastAddedNodeId, auto-select node, and open property panel
• Add clearLastAddedNodeId() action

File: src/webview/src/components/WorkflowEditor.tsx

• Use useAutoFocusNode hook

File: src/webview/src/components/dialogs/SubAgentFlowDialog.tsx

• Use useAutoFocusNode hook for SubAgentFlow editing

Impact

• Improved UX: Users can immediately see newly added nodes
• No breaking changes
• Works for all node addition methods (NodePalette, MCP dialog, Skill dialog)

Testing

• Manual E2E testing completed
  • Add node from NodePalette → canvas pans to node
  • Add node in SubAgentFlow dialog → canvas pans to node
  • Zoom level preserved after pan
  • Rapid node additions → focuses on last node
• Code quality checks passed (npm run format && npm run lint && npm run check)
• Build succeeded (npm run build)

🤖 Generated with Claude Code