Implement Tree Editor with visual preview and documentation updates

Tree Editor Features:
- Zustand store with immer middleware and zundo for undo/redo
- Form-based node editing (Decision, Action, Solution types)
- Visual tree preview with solution connection indicators
- NodePicker with type-grouped dropdown (Decisions/Actions/Solutions)
- SharedLinksMap for detecting nodes with multiple sources
- Modal component with scrollable body, fixed header/footer

New Components:
- TreeEditorLayout, TreeMetadataForm, NodeList, NodeEditorModal
- NodeFormDecision, NodeFormAction, NodeFormResolution
- DynamicArrayField, NodePicker
- TreePreviewPanel, TreePreviewNode

Documentation:
- Updated README.md status to Phase 2
- Added Tree Editor details to CURRENT-STATE.md
- Added modal/Zustand lessons to LESSONS-LEARNED.md
- Updated file structure in CLAUDE-SETUP.md
- Added Tree Editor progress to PROGRESS.md

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

frontend/src/components/tree-preview/TreePreviewPanel.tsx

@@ -0,0 +1,114 @@
+import { useState, useMemo } from 'react'
+import { useTreeEditorStore } from '@/store/treeEditorStore'
+import { TreePreviewNode } from './TreePreviewNode'
+import type { TreeStructure } from '@/types'
+
+/** Map of targetNodeId -> array of {sourceNodeId, sourceNodeLabel} that link to it */
+export type SharedLinksMap = Map<string, Array<{ id: string; label: string }>>
+
+/**
+ * Build a map of which nodes link to which targets
+ * This helps identify shared nodes (multiple sources linking to same target)
+ */
+function buildSharedLinksMap(
+  node: TreeStructure,
+  map: SharedLinksMap = new Map()
+): SharedLinksMap {
+  const nodeLabel = node.type === 'decision' ? node.question : node.title
+
+  // Check decision options
+  if (node.type === 'decision' && node.options) {
+    for (const opt of node.options) {
+      if (opt.next_node_id) {
+        const existing = map.get(opt.next_node_id) || []
+        existing.push({ id: node.id, label: nodeLabel || 'Untitled' })
+        map.set(opt.next_node_id, existing)
+      }
+    }
+  }
+
+  // Check action next_node_id
+  if (node.type === 'action' && node.next_node_id) {
+    const existing = map.get(node.next_node_id) || []
+    existing.push({ id: node.id, label: nodeLabel || 'Untitled' })
+    map.set(node.next_node_id, existing)
+  }
+
+  // Recurse into children
+  if (node.children) {
+    for (const child of node.children) {
+      buildSharedLinksMap(child, map)
+    }
+  }
+
+  return map
+}
+
+export function TreePreviewPanel() {
+  const { treeStructure, name, selectedNodeId, selectNode, findNode } = useTreeEditorStore()
+  const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null)
+
+  // Build map of shared links (which nodes link to which targets)
+  const sharedLinksMap = useMemo(() => {
+    if (!treeStructure) return new Map()
+    return buildSharedLinksMap(treeStructure)
+  }, [treeStructure])
+
+  if (!treeStructure) {
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
+        No tree structure to preview
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="border-b border-border bg-background px-4 py-2">
+        <h3 className="text-sm font-semibold text-foreground">
+          Preview: {name || 'Untitled Tree'}
+        </h3>
+        <p className="text-xs text-muted-foreground">
+          Click a node to select • Hover options to highlight targets
+        </p>
+      </div>
+
+      {/* Tree Visualization */}
+      <div className="flex-1 overflow-auto p-4">
+        <div className="inline-block min-w-full">
+          <TreePreviewNode
+            node={treeStructure}
+            selectedNodeId={selectedNodeId}
+            onSelect={selectNode}
+            depth={0}
+            onHoverNodeId={setHoveredNodeId}
+            hoveredNodeId={hoveredNodeId}
+            findNode={findNode}
+            sharedLinksMap={sharedLinksMap}
+          />
+        </div>
+      </div>
+
+      {/* Legend */}
+      <div className="border-t border-border bg-background px-4 py-2">
+        <div className="flex flex-wrap gap-4 text-xs text-muted-foreground">
+          <div className="flex items-center gap-1">
+            <div className="h-3 w-3 rounded bg-blue-500/50" />
+            <span>Decision</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <div className="h-3 w-3 rounded bg-yellow-500/50" />
+            <span>Action</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <div className="h-3 w-3 rounded bg-green-500/50" />
+            <span>Solution</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TreePreviewPanel