feat: Wire toolbar metadata toggle and integrate canvas layout

- Add isMetadataOpen state in TreeEditorPage
- Add Metadata toolbar button (visible in Flow mode only)
- Auto-close metadata panel when switching to Code mode
- Pass isMetadataOpen/onCloseMetadata props through TreeEditorLayout
- Update Flow mode toggle tooltip to reflect new canvas editing

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

frontend/src/pages/TreeEditorPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useCallback } from 'react'
 import { useParams, useNavigate, useBlocker } from 'react-router-dom'
 import { useStore } from 'zustand'
-import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList, BarChart3 } from 'lucide-react'
+import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList, BarChart3, Settings } from 'lucide-react'
 import { getMonacoEditor } from '@/components/tree-editor/code-mode'
 import { treesApi } from '@/api/trees'
 import { treeMarkdownApi } from '@/api/treeMarkdown'
@@ -48,6 +48,7 @@ export function TreeEditorPage() {
   const [showDraftPrompt, setShowDraftPrompt] = useState(false)
   const [treeStatus, setTreeStatus] = useState<TreeStatus>('draft')
   const [showAnalytics, setShowAnalytics] = useState(false)
+  const [isMetadataOpen, setIsMetadataOpen] = useState(false)
 
   // Mobile detection
   const [isMobile, setIsMobile] = useState(false)
@@ -475,7 +476,7 @@ export function TreeEditorPage() {
             <button
               type="button"
               onClick={() => setEditorMode('form')}
-              title="Flow Mode — form-based editing"
+              title="Flow Mode — visual canvas editing"
               className={cn(
                 'flex items-center gap-1.5 rounded-l-md px-3 py-1.5 text-xs font-medium transition-colors',
                 editorMode === 'form'
@@ -489,7 +490,10 @@ export function TreeEditorPage() {
             <div className="h-5 w-px bg-border" />
             <button
               type="button"
-              onClick={() => setEditorMode('code')}
+              onClick={() => {
+                setEditorMode('code')
+                setIsMetadataOpen(false)  // Auto-close metadata panel on Code mode
+              }}
               title="Code Mode — markdown editing (Ctrl+Shift+M)"
               className={cn(
                 'flex items-center gap-1.5 rounded-r-md px-3 py-1.5 text-xs font-medium transition-colors',
@@ -540,6 +544,24 @@ export function TreeEditorPage() {
 
           <div className="mx-2 h-6 w-px bg-border" />
 
+          {/* Metadata panel toggle — Flow mode only */}
+          {editorMode === 'form' && (
+            <button
+              type="button"
+              onClick={() => 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',
+                isMetadataOpen
+                  ? 'bg-accent text-foreground'
+                  : 'bg-card text-muted-foreground hover:bg-accent hover:text-foreground'
+              )}
+            >
+              <Settings className="h-4 w-4" />
+              Metadata
+            </button>
+          )}
+
           {/* Analytics toggle (only for existing trees) */}
           {isEditMode && (
             <button
@@ -612,7 +634,11 @@ export function TreeEditorPage() {
       )}
 
       {/* Main Editor */}
-      <TreeEditorLayout isMobile={isMobile} />
+      <TreeEditorLayout
+        isMobile={isMobile}
+        isMetadataOpen={isMetadataOpen}
+        onCloseMetadata={() => setIsMetadataOpen(false)}
+      />
 
       {/* Flow Analytics Panel (collapsible) */}
       {showAnalytics && id && (