frontend/src/components/tree-editor/TreeEditorLayout.tsx

@@ -1,6 +1,7 @@
 import { lazy, Suspense } from 'react'
 import { TreePreviewPanel } from '@/components/tree-preview/TreePreviewPanel'
-import { TreeCanvas } from './TreeCanvas'
+import { FlowCanvas } from './FlowCanvas'
+import { NodeEditorPanel } from './NodeEditorPanel'
 import { MetadataSidePanel } from './MetadataSidePanel'
 import { useTreeEditorStore } from '@/store/treeEditorStore'
 import { cn } from '@/lib/utils'
@@ -14,12 +15,18 @@ interface TreeEditorLayoutProps {
   isMobile?: boolean
   isMetadataOpen?: boolean
   onCloseMetadata?: () => void
+  editingNodeId: string | null
+  onNodeSelect: (nodeId: string | null) => void
+  onSelectAnswerType: (nodeId: string, type: 'decision' | 'action' | 'solution') => void
 }
 
 export function TreeEditorLayout({
   isMobile = false,
   isMetadataOpen = false,
   onCloseMetadata = () => {},
+  editingNodeId,
+  onNodeSelect,
+  onSelectAnswerType,
 }: TreeEditorLayoutProps) {
   const editorMode = useTreeEditorStore(s => s.editorMode)
 
@@ -56,16 +63,31 @@ export function TreeEditorLayout({
         </>
       ) : (
         <>
-          {/* Flow Mode: Full-width visual canvas */}
+          {/* Flow Mode: React Flow canvas + side panels */}
           <div className="flex-1 overflow-hidden">
-            <TreeCanvas />
+            <FlowCanvas
+              selectedNodeId={editingNodeId}
+              onNodeSelect={onNodeSelect}
+              onSelectAnswerType={onSelectAnswerType}
+            />
           </div>
 
-          {/* Metadata side panel — overlays the canvas from the right */}
-          <MetadataSidePanel
-            isOpen={isMetadataOpen}
-            onClose={onCloseMetadata}
-          />
+          {/* Node editor panel — takes real layout space */}
+          {editingNodeId && (
+            <NodeEditorPanel
+              nodeId={editingNodeId}
+              onClose={() => onNodeSelect(null)}
+              onSelectType={onSelectAnswerType}
+            />
+          )}
+
+          {/* Metadata side panel — only show when node editor is closed */}
+          {!editingNodeId && (
+            <MetadataSidePanel
+              isOpen={isMetadataOpen}
+              onClose={onCloseMetadata}
+            />
+          )}
         </>
       )}
     </div>