feat: add panel state management for node editor in TreeEditorPage

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

frontend/src/pages/TreeEditorPage.tsx

@@ -45,6 +45,7 @@ export function TreeEditorPage() {
     setLoading,
     setSaving,
     selectNode,
+    updateNode,
     setEditorMode,
   } = useTreeEditorStore()
 
@@ -55,6 +56,7 @@ export function TreeEditorPage() {
   const [treeStatus, setTreeStatus] = useState<TreeStatus>('draft')
   const [showAnalytics, setShowAnalytics] = useState(false)
   const [isMetadataOpen, setIsMetadataOpen] = useState(false)
+  const [editingNodeId, setEditingNodeId] = useState<string | null>(null)
 
   // Mobile detection
   const [isMobile, setIsMobile] = useState(false)
@@ -211,6 +213,21 @@ export function TreeEditorPage() {
     selectNode(nodeId)
   }
 
+  const handleNodeSelect = useCallback((nodeId: string | null) => {
+    if (nodeId) {
+      setIsMetadataOpen(false) // close metadata when opening node editor
+    }
+    setEditingNodeId(nodeId)
+    selectNode(nodeId)
+  }, [selectNode])
+
+  const handleSelectAnswerType = useCallback((nodeId: string, type: 'decision' | 'action' | 'solution') => {
+    updateNode(nodeId, { type })
+    // Keep the panel open on the same node — it will now show the form for the new type
+    setEditingNodeId(nodeId)
+    selectNode(nodeId)
+  }, [updateNode, selectNode])
+
   const handleSaveDraft = useCallback(async () => {
     setSaving(true)
     try {
@@ -507,6 +524,7 @@ export function TreeEditorPage() {
               onClick={() => {
                 setEditorMode('code')
                 setIsMetadataOpen(false)  // Auto-close metadata panel on Code mode
+                setEditingNodeId(null)    // Close node editor on Code mode
               }}
               title="Code Mode — markdown editing (Ctrl+Shift+M)"
               className={cn(
@@ -562,7 +580,12 @@ export function TreeEditorPage() {
           {editorMode === 'form' && (
             <button
               type="button"
-              onClick={() => setIsMetadataOpen(!isMetadataOpen)}
+              onClick={() => {
+                if (!isMetadataOpen) {
+                  setEditingNodeId(null) // close node editor when opening metadata
+                }
+                setIsMetadataOpen(!isMetadataOpen)
+              }}
               title="Edit flow metadata (name, description, category, tags)"
               className={cn(
                 'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
@@ -652,6 +675,9 @@ export function TreeEditorPage() {
         isMobile={isMobile}
         isMetadataOpen={isMetadataOpen}
         onCloseMetadata={() => setIsMetadataOpen(false)}
+        editingNodeId={editingNodeId}
+        onNodeSelect={handleNodeSelect}
+        onSelectAnswerType={handleSelectAnswerType}
       />
 
       {/* Flow Analytics Panel (collapsible) */}