feat: add dual-mode tree editor with Code Mode, variables, and markdown sync

Implements the full dual-mode tree editor (Plan Phases 1-5):

Backend:
- JSONB↔Markdown bidirectional serializer/parser with mistune
- Markdown validator with line/column error reporting
- 3 API endpoints: export-markdown, import-markdown, validate-markdown
- Variable extraction/resolution service ([USER_INPUT], [VAR], [SAVE_AS])
- Session variables JSONB column (migration 028)
- 39 tree markdown tests + variable service tests (403 total passing)

Frontend:
- Monaco-based Code Mode with custom Monarch tokenizer and dark theme
- Autocomplete for @node_id refs, type values, variable names
- Debounced validation (800ms) with inline Monaco error markers
- Syntax help panel (absolute overlay, toggleable)
- Starter template for new trees with valid cross-references
- Bidirectional metadata sync (name/description/category/tags frontmatter)
- Synchronous tree→markdown serializer (fixes async race condition)
- Pre-save validation blocks save on broken refs or missing tree name
- Mode-aware undo/redo: Monaco native in Code Mode, throttled zundo in Flow Mode
- Variable prompt modal and frontend resolver for session navigation

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

frontend/src/lib/treeMarkdownSync.ts

@@ -0,0 +1,90 @@
+import type { TreeStructure } from '@/types'
+
+export interface TreeMetadata {
+  name?: string
+  description?: string
+  category?: string
+  tags?: string[]
+}
+
+/**
+ * Lightweight frontend serializer for instant preview when switching Form→Code.
+ * The backend remains authoritative for actual saves.
+ */
+export function treeStructureToMarkdownPreview(
+  structure: TreeStructure,
+  metadata?: TreeMetadata,
+): string {
+  const blocks: string[] = []
+
+  if (metadata) {
+    const fm = ['---']
+    if (metadata.name) fm.push(`name: ${metadata.name}`)
+    if (metadata.description) fm.push(`description: ${metadata.description}`)
+    if (metadata.category) fm.push(`category: ${metadata.category}`)
+    if (metadata.tags?.length) fm.push(`tags: [${metadata.tags.join(', ')}]`)
+    fm.push('---')
+    blocks.push(fm.join('\n'))
+  }
+
+  serializeNode(structure, null, blocks)
+  return blocks.join('\n\n') + '\n'
+}
+
+function serializeNode(
+  node: TreeStructure,
+  parentId: string | null,
+  blocks: string[],
+): void {
+  const fm = ['---', `id: ${node.id}`, `type: ${node.type}`]
+  if (parentId !== null) fm.push(`parent: ${parentId}`)
+  fm.push('---')
+
+  const body: string[] = []
+
+  if (node.type === 'decision') {
+    if (node.question) {
+      body.push(`# ${node.question}`, '')
+    }
+    if (node.help_text) {
+      for (const line of node.help_text.split('\n')) {
+        body.push(`> ${line}`)
+      }
+      body.push('')
+    }
+    if (node.options) {
+      node.options.forEach((opt, i) => {
+        const letter = String.fromCharCode(65 + i)
+        if (opt.next_node_id) {
+          body.push(`- [${letter}] ${opt.label} → @${opt.next_node_id}`)
+        } else {
+          body.push(`- [${letter}] ${opt.label}`)
+        }
+      })
+    }
+  } else if (node.type === 'action') {
+    if (node.title) body.push(`## ${node.title}`, '')
+    if (node.description) body.push(node.description, '')
+    if (node.commands?.length) {
+      body.push('```commands')
+      node.commands.forEach(cmd => body.push(cmd))
+      body.push('```', '')
+    }
+    if (node.expected_outcome) body.push(`**Expected:** ${node.expected_outcome}`, '')
+    if (node.next_node_id) body.push(`→ @${node.next_node_id}`)
+  } else if (node.type === 'solution') {
+    if (node.title) body.push(`## ${node.title}`, '')
+    if (node.description) body.push(node.description, '')
+    if (node.resolution_steps?.length) {
+      node.resolution_steps.forEach((step, i) => body.push(`${i + 1}. ${step}`))
+    }
+  }
+
+  blocks.push(fm.join('\n') + '\n' + body.join('\n'))
+
+  if (node.children) {
+    for (const child of node.children) {
+      serializeNode(child, node.id, blocks)
+    }
+  }
+}

frontend/src/lib/variableResolver.ts

@@ -0,0 +1,49 @@
+/**
+ * Frontend-side variable substitution for display during navigation.
+ *
+ * - [VAR:name] → replaced with variables[name]
+ * - [USER_INPUT:prompt] → replaced with variables[prompt]
+ * - [SAVE_AS:name] → removed from display
+ */
+export function resolveVariables(text: string, variables: Record<string, string>): string {
+  // Replace [VAR:name]
+  let result = text.replace(/\[VAR:([^\]]+)\]/g, (_, name) => {
+    const key = name.trim()
+    return variables[key] ?? `[VAR:${key}]`
+  })
+
+  // Replace [USER_INPUT:prompt]
+  result = result.replace(/\[USER_INPUT:([^\]]+)\]/g, (_, prompt) => {
+    const key = prompt.trim()
+    return variables[key] ?? `[USER_INPUT:${key}]`
+  })
+
+  // Remove [SAVE_AS:name]
+  result = result.replace(/\[SAVE_AS:[^\]]+\]/g, '')
+
+  return result
+}
+
+/**
+ * Extract all [USER_INPUT:prompt] tokens from text.
+ * Returns array of prompt strings.
+ */
+export function extractUserInputPrompts(text: string): string[] {
+  const prompts: string[] = []
+  const re = /\[USER_INPUT:([^\]]+)\]/g
+  let match
+  while ((match = re.exec(text)) !== null) {
+    const prompt = match[1].trim()
+    if (!prompts.includes(prompt)) {
+      prompts.push(prompt)
+    }
+  }
+  return prompts
+}
+
+/**
+ * Check if text contains any variable tokens.
+ */
+export function hasVariableTokens(text: string): boolean {
+  return /\[(USER_INPUT|VAR|SAVE_AS):[^\]]+\]/.test(text)
+}