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/common/Modal.tsx

@@ -0,0 +1,101 @@
+import { useEffect, useCallback, type ReactNode } from 'react'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface ModalProps {
+  isOpen: boolean
+  onClose: () => void
+  title: string
+  children: ReactNode
+  /** Optional footer content that stays fixed at bottom (doesn't scroll) */
+  footer?: ReactNode
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+}
+
+export function Modal({ isOpen, onClose, title, children, footer, size = 'md' }: ModalProps) {
+  // Close on Escape key
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    },
+    [onClose]
+  )
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown)
+      document.body.style.overflow = 'hidden'
+    }
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.body.style.overflow = ''
+    }
+  }, [isOpen, handleKeyDown])
+
+  if (!isOpen) return null
+
+  const sizeClasses = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-4xl',
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-title"
+    >
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-background/80 backdrop-blur-sm"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Modal Content */}
+      <div
+        className={cn(
+          'relative flex max-h-[85vh] w-full flex-col rounded-lg border border-border bg-card shadow-lg',
+          sizeClasses[size]
+        )}
+      >
+        {/* Header - Fixed at top */}
+        <div className="flex flex-shrink-0 items-center justify-between border-b border-border px-6 py-4">
+          <h2 id="modal-title" className="text-lg font-semibold text-card-foreground">
+            {title}
+          </h2>
+          <button
+            onClick={onClose}
+            className={cn(
+              'rounded-md p-1 text-muted-foreground transition-colors',
+              'hover:bg-accent hover:text-accent-foreground',
+              'focus:outline-none focus:ring-2 focus:ring-ring'
+            )}
+            aria-label="Close modal"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Body - Scrollable */}
+        <div className="flex-1 overflow-y-auto px-6 py-4">
+          {children}
+        </div>
+
+        {/* Footer - Fixed at bottom */}
+        {footer && (
+          <div className="flex-shrink-0 border-t border-border px-6 py-4">
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Modal

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

@@ -0,0 +1,112 @@
+import type { ReactNode } from 'react'
+import { Plus, Trash2, ChevronUp, ChevronDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface DynamicArrayFieldProps<T> {
+  items: T[]
+  onAdd: () => void
+  onRemove: (index: number) => void
+  onReorder?: (fromIndex: number, toIndex: number) => void
+  renderItem: (item: T, index: number) => ReactNode
+  addLabel?: string
+  maxItems?: number
+  minItems?: number
+  className?: string
+}
+
+export function DynamicArrayField<T>({
+  items,
+  onAdd,
+  onRemove,
+  onReorder,
+  renderItem,
+  addLabel = 'Add Item',
+  maxItems,
+  minItems = 0,
+  className
+}: DynamicArrayFieldProps<T>) {
+  const canAdd = maxItems === undefined || items.length < maxItems
+  const canRemove = items.length > minItems
+
+  const handleMoveUp = (index: number) => {
+    if (onReorder && index > 0) {
+      onReorder(index, index - 1)
+    }
+  }
+
+  const handleMoveDown = (index: number) => {
+    if (onReorder && index < items.length - 1) {
+      onReorder(index, index + 1)
+    }
+  }
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {items.map((item, index) => (
+        <div key={index} className="group flex items-start gap-2">
+          {/* Reorder buttons */}
+          {onReorder && items.length > 1 && (
+            <div className="flex flex-col gap-0.5 opacity-0 group-hover:opacity-100">
+              <button
+                type="button"
+                onClick={() => handleMoveUp(index)}
+                disabled={index === 0}
+                className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-30"
+                title="Move up"
+              >
+                <ChevronUp className="h-3 w-3" />
+              </button>
+              <button
+                type="button"
+                onClick={() => handleMoveDown(index)}
+                disabled={index === items.length - 1}
+                className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-30"
+                title="Move down"
+              >
+                <ChevronDown className="h-3 w-3" />
+              </button>
+            </div>
+          )}
+
+          {/* Item content */}
+          <div className="flex-1">{renderItem(item, index)}</div>
+
+          {/* Remove button */}
+          {canRemove && (
+            <button
+              type="button"
+              onClick={() => onRemove(index)}
+              className="mt-1 rounded p-1 text-muted-foreground hover:bg-destructive/20 hover:text-destructive"
+              title="Remove"
+            >
+              <Trash2 className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      ))}
+
+      {/* Add button */}
+      {canAdd && (
+        <button
+          type="button"
+          onClick={onAdd}
+          className={cn(
+            'flex w-full items-center justify-center gap-1 rounded-md border border-dashed border-input',
+            'px-3 py-2 text-sm text-muted-foreground',
+            'hover:border-primary hover:text-primary'
+          )}
+        >
+          <Plus className="h-4 w-4" />
+          {addLabel}
+        </button>
+      )}
+
+      {/* Empty state */}
+      {items.length === 0 && !canAdd && (
+        <p className="text-center text-sm text-muted-foreground">No items</p>
+      )}
+    </div>
+  )
+}
+
+export default DynamicArrayField

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

@@ -0,0 +1,85 @@
+import { Modal } from '@/components/common/Modal'
+import { useTreeEditorStore } from '@/store/treeEditorStore'
+import { NodeFormDecision } from './NodeFormDecision'
+import { NodeFormAction } from './NodeFormAction'
+import { NodeFormResolution } from './NodeFormResolution'
+import type { TreeStructure } from '@/types'
+
+interface NodeEditorModalProps {
+  node: TreeStructure
+  onClose: () => void
+}
+
+export function NodeEditorModal({ node, onClose }: NodeEditorModalProps) {
+  const { updateNode, validationErrors } = useTreeEditorStore()
+  const nodeErrors = validationErrors.filter(e => e.nodeId === node.id)
+
+  const handleUpdate = (updates: Partial<TreeStructure>) => {
+    updateNode(node.id, updates)
+  }
+
+  const getTitle = () => {
+    switch (node.type) {
+      case 'decision':
+        return 'Edit Decision Node'
+      case 'action':
+        return 'Edit Action Node'
+      case 'solution':
+        return 'Edit Solution Node'
+      default:
+        return 'Edit Node'
+    }
+  }
+
+  const footerContent = (
+    <div className="flex justify-end">
+      <button
+        type="button"
+        onClick={onClose}
+        className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+      >
+        Done
+      </button>
+    </div>
+  )
+
+  return (
+    <Modal isOpen={true} onClose={onClose} title={getTitle()} size="lg" footer={footerContent}>
+      {/* Node ID display */}
+      <div className="mb-4 text-xs text-muted-foreground">
+        Node ID: <code className="rounded bg-muted px-1 py-0.5">{node.id}</code>
+      </div>
+
+      {/* Validation errors */}
+      {nodeErrors.length > 0 && (
+        <div className="mb-4 space-y-1">
+          {nodeErrors.map((error, i) => (
+            <div
+              key={i}
+              className={`rounded-md px-3 py-2 text-sm ${
+                error.severity === 'error'
+                  ? 'bg-destructive/10 text-destructive'
+                  : 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400'
+              }`}
+            >
+              {error.message}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Type-specific form */}
+      {node.type === 'decision' && (
+        <NodeFormDecision node={node} onUpdate={handleUpdate} />
+      )}
+      {node.type === 'action' && (
+        <NodeFormAction node={node} onUpdate={handleUpdate} />
+      )}
+      {node.type === 'solution' && (
+        <NodeFormResolution node={node} onUpdate={handleUpdate} />
+      )}
+    </Modal>
+  )
+}
+
+export default NodeEditorModal

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

@@ -0,0 +1,152 @@
+import { DynamicArrayField } from './DynamicArrayField'
+import { NodePicker } from './NodePicker'
+import { useTreeEditorStore } from '@/store/treeEditorStore'
+import type { TreeStructure } from '@/types'
+import { cn } from '@/lib/utils'
+
+interface NodeFormActionProps {
+  node: TreeStructure
+  onUpdate: (updates: Partial<TreeStructure>) => void
+}
+
+export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
+  const { validationErrors } = useTreeEditorStore()
+
+  const titleError = validationErrors.find(
+    e => e.nodeId === node.id && e.field === 'title'
+  )
+
+  const nextNodeError = validationErrors.find(
+    e => e.nodeId === node.id && e.field === 'next_node_id'
+  )
+
+  const handleAddCommand = () => {
+    onUpdate({
+      commands: [...(node.commands || []), '']
+    })
+  }
+
+  const handleRemoveCommand = (index: number) => {
+    const newCommands = [...(node.commands || [])]
+    newCommands.splice(index, 1)
+    onUpdate({ commands: newCommands })
+  }
+
+  const handleUpdateCommand = (index: number, value: string) => {
+    const newCommands = [...(node.commands || [])]
+    newCommands[index] = value
+    onUpdate({ commands: newCommands })
+  }
+
+  const handleReorderCommands = (fromIndex: number, toIndex: number) => {
+    const newCommands = [...(node.commands || [])]
+    const [moved] = newCommands.splice(fromIndex, 1)
+    newCommands.splice(toIndex, 0, moved)
+    onUpdate({ commands: newCommands })
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Title */}
+      <div>
+        <label className="block text-sm font-medium text-foreground">
+          Title <span className="text-destructive">*</span>
+        </label>
+        <input
+          type="text"
+          value={node.title || ''}
+          onChange={(e) => onUpdate({ title: e.target.value })}
+          placeholder="e.g., Restart the Service"
+          className={cn(
+            'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
+            'bg-background text-foreground placeholder:text-muted-foreground',
+            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
+            titleError ? 'border-destructive' : 'border-input'
+          )}
+        />
+        {titleError && (
+          <p className="mt-1 text-xs text-destructive">{titleError.message}</p>
+        )}
+      </div>
+
+      {/* Description */}
+      <div>
+        <label className="block text-sm font-medium text-foreground">
+          Description
+        </label>
+        <textarea
+          value={node.description || ''}
+          onChange={(e) => onUpdate({ description: e.target.value })}
+          placeholder="Detailed instructions for this action..."
+          rows={3}
+          className={cn(
+            'mt-1 block w-full rounded-md border border-input px-3 py-2 text-sm',
+            'bg-background text-foreground placeholder:text-muted-foreground',
+            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+          )}
+        />
+      </div>
+
+      {/* Commands */}
+      <div>
+        <label className="block text-sm font-medium text-foreground">
+          Commands
+        </label>
+        <p className="mb-2 text-xs text-muted-foreground">
+          PowerShell or CLI commands to execute
+        </p>
+        <DynamicArrayField
+          items={node.commands || []}
+          onAdd={handleAddCommand}
+          onRemove={handleRemoveCommand}
+          onReorder={handleReorderCommands}
+          addLabel="Add Command"
+          renderItem={(command, index) => (
+            <input
+              type="text"
+              value={command}
+              onChange={(e) => handleUpdateCommand(index, e.target.value)}
+              placeholder="e.g., Get-Service BrokerAgent"
+              className={cn(
+                'block w-full rounded-md border border-input px-3 py-2 font-mono text-sm',
+                'bg-background text-foreground placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+              )}
+            />
+          )}
+        />
+      </div>
+
+      {/* Expected Outcome */}
+      <div>
+        <label className="block text-sm font-medium text-foreground">
+          Expected Outcome
+        </label>
+        <input
+          type="text"
+          value={node.expected_outcome || ''}
+          onChange={(e) => onUpdate({ expected_outcome: e.target.value })}
+          placeholder="e.g., Service should show as Running"
+          className={cn(
+            'mt-1 block w-full rounded-md border border-input px-3 py-2 text-sm',
+            'bg-background text-foreground placeholder:text-muted-foreground',
+            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+          )}
+        />
+      </div>
+
+      {/* Next Node */}
+      <NodePicker
+        value={node.next_node_id || ''}
+        onChange={(nodeId) => onUpdate({ next_node_id: nodeId })}
+        parentNodeId={node.id}
+        excludeNodeId={node.id}
+        label="Next Node (after action)"
+        placeholder="Select or create next node..."
+        error={nextNodeError?.message}
+      />
+    </div>
+  )
+}
+
+export default NodeFormAction

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

@@ -0,0 +1,220 @@
+import { Play } from 'lucide-react'
+import { DynamicArrayField } from './DynamicArrayField'
+import { NodePicker } from './NodePicker'
+import { useTreeEditorStore } from '@/store/treeEditorStore'
+import type { TreeStructure, TreeOption } from '@/types'
+import { cn } from '@/lib/utils'
+
+interface NodeFormDecisionProps {
+  node: TreeStructure
+  onUpdate: (updates: Partial<TreeStructure>) => void
+}
+
+// Convert index to letter (0=A, 1=B, 2=C, etc.)
+const indexToLetter = (index: number): string => {
+  return String.fromCharCode(65 + index) // 65 is ASCII for 'A'
+}
+
+export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
+  const { reorderOptions, validationErrors } = useTreeEditorStore()
+  const isRootNode = node.id === 'root'
+
+  const questionError = validationErrors.find(
+    e => e.nodeId === node.id && e.field === 'question'
+  )
+
+  const optionsError = validationErrors.find(
+    e => e.nodeId === node.id && e.field === 'options'
+  )
+
+  const handleAddOption = () => {
+    const newOption: TreeOption = {
+      id: crypto.randomUUID(),
+      label: '',
+      next_node_id: ''
+    }
+    onUpdate({
+      options: [...(node.options || []), newOption]
+    })
+  }
+
+  const handleRemoveOption = (index: number) => {
+    const newOptions = [...(node.options || [])]
+    newOptions.splice(index, 1)
+    onUpdate({ options: newOptions })
+  }
+
+  const handleUpdateOption = (index: number, updates: Partial<TreeOption>) => {
+    const newOptions = [...(node.options || [])]
+    newOptions[index] = { ...newOptions[index], ...updates }
+    onUpdate({ options: newOptions })
+  }
+
+  const handleReorderOptions = (fromIndex: number, toIndex: number) => {
+    reorderOptions(node.id, fromIndex, toIndex)
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Root node banner */}
+      {isRootNode && (
+        <div className="rounded-lg border-2 border-blue-500/30 bg-blue-500/10 p-4">
+          <div className="flex items-start gap-3">
+            <div className="rounded-full bg-blue-500/20 p-2">
+              <Play className="h-5 w-5 text-blue-500" />
+            </div>
+            <div>
+              <h3 className="font-semibold text-blue-600 dark:text-blue-400">
+                Starting Question
+              </h3>
+              <p className="mt-1 text-sm text-muted-foreground">
+                This is the first question users will see when they start this troubleshooting tree.
+                Each option below creates a different troubleshooting path.
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Question */}
+      <div>
+        <label className="block text-sm font-medium text-foreground">
+          {isRootNode ? 'Starting Question' : 'Question'} <span className="text-destructive">*</span>
+        </label>
+        {isRootNode && (
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            What's the main question to diagnose the issue?
+          </p>
+        )}
+        <input
+          type="text"
+          value={node.question || ''}
+          onChange={(e) => onUpdate({ question: e.target.value })}
+          placeholder={isRootNode
+            ? "e.g., What type of issue are you experiencing?"
+            : "e.g., Can you ping the server?"}
+          className={cn(
+            'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
+            'bg-background text-foreground placeholder:text-muted-foreground',
+            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
+            questionError ? 'border-destructive' : 'border-input'
+          )}
+        />
+        {questionError && (
+          <p className="mt-1 text-xs text-destructive">{questionError.message}</p>
+        )}
+      </div>
+
+      {/* Help Text */}
+      <div>
+        <label className="block text-sm font-medium text-foreground">
+          Help Text
+        </label>
+        <textarea
+          value={node.help_text || ''}
+          onChange={(e) => onUpdate({ help_text: e.target.value })}
+          placeholder="Additional context or instructions for this decision..."
+          rows={2}
+          className={cn(
+            'mt-1 block w-full rounded-md border border-input px-3 py-2 text-sm',
+            'bg-background text-foreground placeholder:text-muted-foreground',
+            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+          )}
+        />
+      </div>
+
+      {/* Options */}
+      <div>
+        <label className="block text-sm font-medium text-foreground">
+          {isRootNode ? 'Answer Options (Branches)' : 'Options'} <span className="text-destructive">*</span>
+        </label>
+        {isRootNode ? (
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            Add as many options as needed (A, B, C, D...). Each option leads to a completely different troubleshooting path.
+          </p>
+        ) : (
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            Each option can branch to a different next step.
+          </p>
+        )}
+        {optionsError && (
+          <p className="mt-1 text-xs text-destructive">{optionsError.message}</p>
+        )}
+        <div className="mt-2">
+          <DynamicArrayField
+            items={node.options || []}
+            onAdd={handleAddOption}
+            onRemove={handleRemoveOption}
+            onReorder={handleReorderOptions}
+            addLabel={isRootNode ? "Add Another Branch" : "Add Option"}
+            minItems={1}
+            renderItem={(option, index) => {
+              const optionLabelError = validationErrors.find(
+                e => e.nodeId === node.id && e.field === `options[${index}].label`
+              )
+              const optionNextError = validationErrors.find(
+                e => e.nodeId === node.id && e.field === `options[${index}].next_node_id`
+              )
+              const letter = indexToLetter(index)
+
+              return (
+                <div className="rounded-md border border-input bg-muted/30 p-3">
+                  <div className="mb-2 flex items-center gap-2">
+                    {/* Letter badge */}
+                    <span className={cn(
+                      'flex h-6 w-6 items-center justify-center rounded-full text-xs font-bold',
+                      isRootNode
+                        ? 'bg-blue-500/20 text-blue-600 dark:text-blue-400'
+                        : 'bg-muted text-muted-foreground'
+                    )}>
+                      {letter}
+                    </span>
+                    <input
+                      type="text"
+                      value={option.label}
+                      onChange={(e) => handleUpdateOption(index, { label: e.target.value })}
+                      placeholder={isRootNode
+                        ? `Branch ${letter}: e.g., "Network Issues", "Application Errors"...`
+                        : `Option ${letter} label`}
+                      className={cn(
+                        'block flex-1 rounded-md border px-3 py-2 text-sm',
+                        'bg-background text-foreground placeholder:text-muted-foreground',
+                        'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
+                        optionLabelError ? 'border-destructive' : 'border-input'
+                      )}
+                    />
+                  </div>
+                  {optionLabelError && (
+                    <p className="mb-2 text-xs text-destructive">{optionLabelError.message}</p>
+                  )}
+                  <div className="pl-8">
+                    <NodePicker
+                      value={option.next_node_id}
+                      onChange={(nodeId) => handleUpdateOption(index, { next_node_id: nodeId })}
+                      parentNodeId={node.id}
+                      excludeNodeId={node.id}
+                      placeholder={isRootNode
+                        ? `What happens when user selects "${option.label || `Branch ${letter}`}"?`
+                        : "Select or create next node..."}
+                      error={optionNextError?.message}
+                    />
+                  </div>
+                </div>
+              )
+            }}
+          />
+        </div>
+
+        {/* Example hint for root node */}
+        {isRootNode && (node.options?.length || 0) < 2 && (
+          <div className="mt-3 rounded-md border border-dashed border-muted-foreground/30 bg-muted/20 p-3 text-xs text-muted-foreground">
+            <strong>Tip:</strong> Most troubleshooting trees start with 2-5 main branches.
+            For example: "Connection Issues", "Performance Problems", "Error Messages", "Other".
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default NodeFormDecision

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

@@ -0,0 +1,129 @@
+import { DynamicArrayField } from './DynamicArrayField'
+import { useTreeEditorStore } from '@/store/treeEditorStore'
+import type { TreeStructure } from '@/types'
+import { cn } from '@/lib/utils'
+
+interface NodeFormResolutionProps {
+  node: TreeStructure
+  onUpdate: (updates: Partial<TreeStructure>) => void
+}
+
+export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps) {
+  const { validationErrors } = useTreeEditorStore()
+
+  const titleError = validationErrors.find(
+    e => e.nodeId === node.id && e.field === 'title'
+  )
+
+  const handleAddStep = () => {
+    onUpdate({
+      resolution_steps: [...(node.resolution_steps || []), '']
+    })
+  }
+
+  const handleRemoveStep = (index: number) => {
+    const newSteps = [...(node.resolution_steps || [])]
+    newSteps.splice(index, 1)
+    onUpdate({ resolution_steps: newSteps })
+  }
+
+  const handleUpdateStep = (index: number, value: string) => {
+    const newSteps = [...(node.resolution_steps || [])]
+    newSteps[index] = value
+    onUpdate({ resolution_steps: newSteps })
+  }
+
+  const handleReorderSteps = (fromIndex: number, toIndex: number) => {
+    const newSteps = [...(node.resolution_steps || [])]
+    const [moved] = newSteps.splice(fromIndex, 1)
+    newSteps.splice(toIndex, 0, moved)
+    onUpdate({ resolution_steps: newSteps })
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Title */}
+      <div>
+        <label className="block text-sm font-medium text-foreground">
+          Title <span className="text-destructive">*</span>
+        </label>
+        <input
+          type="text"
+          value={node.title || ''}
+          onChange={(e) => onUpdate({ title: e.target.value })}
+          placeholder="e.g., VDA Successfully Registered"
+          className={cn(
+            'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
+            'bg-background text-foreground placeholder:text-muted-foreground',
+            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
+            titleError ? 'border-destructive' : 'border-input'
+          )}
+        />
+        {titleError && (
+          <p className="mt-1 text-xs text-destructive">{titleError.message}</p>
+        )}
+      </div>
+
+      {/* Description */}
+      <div>
+        <label className="block text-sm font-medium text-foreground">
+          Description
+        </label>
+        <textarea
+          value={node.description || ''}
+          onChange={(e) => onUpdate({ description: e.target.value })}
+          placeholder="Summary of the resolution and any follow-up recommendations..."
+          rows={3}
+          className={cn(
+            'mt-1 block w-full rounded-md border border-input px-3 py-2 text-sm',
+            'bg-background text-foreground placeholder:text-muted-foreground',
+            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+          )}
+        />
+      </div>
+
+      {/* Resolution Steps */}
+      <div>
+        <label className="block text-sm font-medium text-foreground">
+          Resolution Steps
+        </label>
+        <p className="mb-2 text-xs text-muted-foreground">
+          Step-by-step instructions for resolving the issue
+        </p>
+        <DynamicArrayField
+          items={node.resolution_steps || []}
+          onAdd={handleAddStep}
+          onRemove={handleRemoveStep}
+          onReorder={handleReorderSteps}
+          addLabel="Add Step"
+          renderItem={(step, index) => (
+            <div className="flex items-start gap-2">
+              <span className="mt-2 flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary">
+                {index + 1}
+              </span>
+              <input
+                type="text"
+                value={step}
+                onChange={(e) => handleUpdateStep(index, e.target.value)}
+                placeholder={`Step ${index + 1}`}
+                className={cn(
+                  'block w-full rounded-md border border-input px-3 py-2 text-sm',
+                  'bg-background text-foreground placeholder:text-muted-foreground',
+                  'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+                )}
+              />
+            </div>
+          )}
+        />
+      </div>
+
+      {/* Note about terminal node */}
+      <div className="rounded-md bg-green-500/10 p-3 text-sm text-green-600 dark:text-green-400">
+        <strong>Note:</strong> Solution nodes are terminal - they end the troubleshooting flow.
+        The session will be marked complete when the user reaches this node.
+      </div>
+    </div>
+  )
+}
+
+export default NodeFormResolution

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

@@ -0,0 +1,499 @@
+import { useState } from 'react'
+import {
+  Plus,
+  Pencil,
+  Trash2,
+  Copy,
+  GripVertical,
+  HelpCircle,
+  Zap,
+  CheckCircle,
+  ChevronDown,
+  ChevronRight,
+  Play
+} from 'lucide-react'
+import { useTreeEditorStore } from '@/store/treeEditorStore'
+import { NodeEditorModal } from './NodeEditorModal'
+import type { TreeStructure, NodeType } from '@/types'
+import { cn } from '@/lib/utils'
+
+interface NodeListItemProps {
+  node: TreeStructure
+  depth: number
+  parentId: string | null
+  index: number
+  isLast: boolean
+  /** Which option label led to this node (from parent decision) */
+  fromOption?: string
+  onEdit: (node: TreeStructure) => void
+  onDelete: (nodeId: string) => void
+  onDuplicate: (nodeId: string) => void
+  onAddChild: (parentId: string) => void
+  onDragStart: (e: React.DragEvent, nodeId: string, parentId: string | null, index: number) => void
+  onDragOver: (e: React.DragEvent, parentId: string | null, index: number) => void
+  onDrop: (e: React.DragEvent, parentId: string | null, index: number) => void
+  dragOverTarget: { parentId: string | null; index: number } | null
+  /** Array of booleans indicating which ancestor levels should show continuing lines */
+  ancestorLines?: boolean[]
+}
+
+function NodeListItem({
+  node,
+  depth,
+  parentId,
+  index,
+  isLast,
+  fromOption,
+  onEdit,
+  onDelete,
+  onDuplicate,
+  onAddChild,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  dragOverTarget,
+  ancestorLines = []
+}: NodeListItemProps) {
+  const { selectedNodeId, selectNode, validationErrors } = useTreeEditorStore()
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const isSelected = selectedNodeId === node.id
+  const isRootNode = node.id === 'root'
+  const hasError = validationErrors.some(e => e.nodeId === node.id && e.severity === 'error')
+  const hasWarning = validationErrors.some(e => e.nodeId === node.id && e.severity === 'warning')
+  const hasChildren = node.children && node.children.length > 0
+
+  const isDragTarget =
+    dragOverTarget?.parentId === parentId && dragOverTarget?.index === index
+
+  const nodeTypeIcons: Record<NodeType, React.ReactNode> = {
+    decision: <HelpCircle className="h-4 w-4" />,
+    action: <Zap className="h-4 w-4" />,
+    solution: <CheckCircle className="h-4 w-4" />
+  }
+
+  const nodeTypeColors: Record<NodeType, string> = {
+    decision: 'bg-blue-500/20 text-blue-600 dark:text-blue-400',
+    action: 'bg-yellow-500/20 text-yellow-600 dark:text-yellow-400',
+    solution: 'bg-green-500/20 text-green-600 dark:text-green-400'
+  }
+
+  const getNodeLabel = () => {
+    if (node.type === 'decision') return node.question || 'Untitled Question'
+    return node.title || `Untitled ${node.type}`
+  }
+
+  // Find which option label leads to each child node
+  const getOptionLabelForChild = (childId: string): string | undefined => {
+    if (node.type === 'decision' && node.options) {
+      const option = node.options.find(opt => opt.next_node_id === childId)
+      return option?.label
+    }
+    return undefined
+  }
+
+  const toggleCollapse = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setIsCollapsed(!isCollapsed)
+  }
+
+  // Build tree line prefix for proper hierarchy visualization
+  const renderTreeLines = () => {
+    if (depth === 0) return null
+
+    return (
+      <div className="flex items-center">
+        {/* Render continuing lines from ancestors */}
+        {ancestorLines.map((showLine, i) => (
+          <span
+            key={i}
+            className={cn(
+              'inline-block w-5 text-center text-muted-foreground/50',
+              showLine ? 'border-l border-muted-foreground/30' : ''
+            )}
+          >
+            &nbsp;
+          </span>
+        ))}
+        {/* Render current level connector */}
+        <span className="inline-block w-5 text-center text-muted-foreground/50 font-mono text-xs">
+          {isLast ? '└' : '├'}
+        </span>
+        <span className="inline-block w-3 text-muted-foreground/50 font-mono text-xs">──</span>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {/* Drop indicator above */}
+      {isDragTarget && (
+        <div className="h-1 bg-primary rounded-full mx-2" style={{ marginLeft: `${depth * 20 + 8}px` }} />
+      )}
+
+      <div
+        draggable={node.id !== 'root'}
+        onDragStart={(e) => onDragStart(e, node.id, parentId, index)}
+        onDragOver={(e) => onDragOver(e, parentId, index)}
+        onDrop={(e) => onDrop(e, parentId, index)}
+        onClick={() => selectNode(node.id)}
+        className={cn(
+          'group flex items-center gap-1 rounded-md px-2 py-1.5 text-sm transition-colors cursor-pointer',
+          isRootNode
+            ? isSelected
+              ? 'bg-blue-500/20 ring-2 ring-blue-500 shadow-sm'
+              : 'bg-blue-500/10 border border-blue-500/30 hover:bg-blue-500/15'
+            : isSelected
+            ? 'bg-primary/10 ring-1 ring-primary'
+            : 'hover:bg-accent',
+          hasError && 'ring-1 ring-destructive',
+          hasWarning && !hasError && 'ring-1 ring-yellow-500'
+        )}
+      >
+        {/* Tree lines */}
+        {renderTreeLines()}
+
+        {/* Collapse toggle for nodes with children */}
+        {hasChildren ? (
+          <button
+            type="button"
+            onClick={toggleCollapse}
+            className="rounded p-0.5 hover:bg-muted"
+          >
+            {isCollapsed ? (
+              <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+            )}
+          </button>
+        ) : (
+          <div className="w-4" />
+        )}
+
+        {/* Drag handle */}
+        {node.id !== 'root' && (
+          <GripVertical className="h-4 w-4 cursor-grab text-muted-foreground opacity-0 group-hover:opacity-100" />
+        )}
+        {node.id === 'root' && <div className="w-4" />}
+
+        {/* Node type icon - special treatment for root */}
+        {isRootNode ? (
+          <span className="flex items-center gap-1 rounded px-1.5 py-0.5 text-xs bg-blue-500/30 text-blue-600 dark:text-blue-400 font-semibold">
+            <Play className="h-4 w-4" />
+            <span className="hidden sm:inline">START</span>
+          </span>
+        ) : (
+          <span className={cn('flex items-center gap-1 rounded px-1.5 py-0.5 text-xs', nodeTypeColors[node.type])}>
+            {nodeTypeIcons[node.type]}
+            <span className="hidden sm:inline">{node.type}</span>
+          </span>
+        )}
+
+        {/* From option label */}
+        {fromOption && (
+          <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
+            {fromOption}
+          </span>
+        )}
+
+        {/* Node label */}
+        <span className="flex-1 truncate text-foreground">
+          {getNodeLabel()}
+        </span>
+
+        {/* Node ID */}
+        <span
+          className="hidden text-xs text-muted-foreground sm:inline cursor-help"
+          title={`Full ID: ${node.id}`}
+        >
+          {node.id === 'root' ? 'root' : node.id.slice(0, 8) + '...'}
+        </span>
+
+        {/* Actions */}
+        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100">
+          {node.type === 'decision' && (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation()
+                onAddChild(node.id)
+              }}
+              title="Add child node"
+              className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+            >
+              <Plus className="h-3 w-3" />
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation()
+              onEdit(node)
+            }}
+            title="Edit node"
+            className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+          >
+            <Pencil className="h-3 w-3" />
+          </button>
+          {node.id !== 'root' && (
+            <>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onDuplicate(node.id)
+                }}
+                title="Duplicate node"
+                className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+              >
+                <Copy className="h-3 w-3" />
+              </button>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onDelete(node.id)
+                }}
+                title="Delete node"
+                className="rounded p-1 text-muted-foreground hover:bg-destructive/20 hover:text-destructive"
+              >
+                <Trash2 className="h-3 w-3" />
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Collapsed indicator */}
+      {hasChildren && isCollapsed && (
+        <div
+          className="text-xs text-muted-foreground py-1"
+          style={{ marginLeft: `${(depth + 1) * 20 + 32}px` }}
+        >
+          <span className="rounded bg-muted px-2 py-0.5">
+            {node.children!.length} hidden
+          </span>
+        </div>
+      )}
+
+      {/* Render children */}
+      {!isCollapsed && node.children?.map((child, childIndex) => {
+        const optionLabel = getOptionLabelForChild(child.id)
+        const isLastChild = childIndex === node.children!.length - 1
+        // Build ancestor lines array for children
+        const childAncestorLines = depth > 0 ? [...ancestorLines, !isLast] : []
+
+        return (
+          <NodeListItem
+            key={child.id}
+            node={child}
+            depth={depth + 1}
+            parentId={node.id}
+            index={childIndex}
+            isLast={isLastChild}
+            fromOption={optionLabel}
+            onEdit={onEdit}
+            onDelete={onDelete}
+            onDuplicate={onDuplicate}
+            onAddChild={onAddChild}
+            onDragStart={onDragStart}
+            onDragOver={onDragOver}
+            onDrop={onDrop}
+            dragOverTarget={dragOverTarget}
+            ancestorLines={childAncestorLines}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+export function NodeList() {
+  const { treeStructure, addNode, deleteNode, duplicateNode, reorderNodes, findNode } = useTreeEditorStore()
+  const [editingNodeId, setEditingNodeId] = useState<string | null>(null)
+  const [addingToParent, setAddingToParent] = useState<string | null>(null)
+
+  // Get the current node from store (will update when store changes)
+  const editingNode = editingNodeId ? findNode(editingNodeId) : null
+  const [dragState, setDragState] = useState<{
+    nodeId: string
+    parentId: string | null
+    index: number
+  } | null>(null)
+  const [dragOverTarget, setDragOverTarget] = useState<{
+    parentId: string | null
+    index: number
+  } | null>(null)
+
+  const handleAddNode = (type: NodeType) => {
+    const newId = addNode(addingToParent, type)
+    setAddingToParent(null)
+    // Open editor for the new node
+    setEditingNodeId(newId)
+  }
+
+  const handleDragStart = (
+    e: React.DragEvent,
+    nodeId: string,
+    parentId: string | null,
+    index: number
+  ) => {
+    e.dataTransfer.effectAllowed = 'move'
+    setDragState({ nodeId, parentId, index })
+  }
+
+  const handleDragOver = (
+    e: React.DragEvent,
+    parentId: string | null,
+    index: number
+  ) => {
+    e.preventDefault()
+    if (!dragState) return
+
+    // Don't allow dropping on itself or its descendants
+    if (dragState.nodeId === parentId) return
+
+    setDragOverTarget({ parentId, index })
+  }
+
+  const handleDrop = (
+    e: React.DragEvent,
+    targetParentId: string | null,
+    targetIndex: number
+  ) => {
+    e.preventDefault()
+    if (!dragState) return
+
+    const { parentId: sourceParentId, index: sourceIndex } = dragState
+
+    // Only handle reordering within same parent for now
+    if (sourceParentId === targetParentId && sourceParentId) {
+      const adjustedIndex = sourceIndex < targetIndex ? targetIndex - 1 : targetIndex
+      if (sourceIndex !== adjustedIndex) {
+        reorderNodes(sourceParentId, sourceIndex, adjustedIndex)
+      }
+    }
+
+    setDragState(null)
+    setDragOverTarget(null)
+  }
+
+  const handleDragEnd = () => {
+    setDragState(null)
+    setDragOverTarget(null)
+  }
+
+  if (!treeStructure) {
+    return (
+      <div className="rounded-lg border border-border bg-card p-4 text-center text-sm text-muted-foreground">
+        No tree structure. Add a root node to get started.
+      </div>
+    )
+  }
+
+  return (
+    <div className="rounded-lg border border-border bg-card" onDragEnd={handleDragEnd}>
+      <div className="flex items-center justify-between border-b border-border p-3">
+        <h2 className="text-sm font-semibold text-card-foreground">Nodes</h2>
+        <button
+          type="button"
+          onClick={() => setAddingToParent(treeStructure.id)}
+          className={cn(
+            'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium',
+            'bg-primary text-primary-foreground hover:bg-primary/90'
+          )}
+        >
+          <Plus className="h-3 w-3" />
+          Add Node
+        </button>
+      </div>
+
+      <div className="max-h-[500px] space-y-0.5 overflow-y-auto p-2">
+        <NodeListItem
+          node={treeStructure}
+          depth={0}
+          parentId={null}
+          index={0}
+          isLast={true}
+          onEdit={(node) => setEditingNodeId(node.id)}
+          onDelete={deleteNode}
+          onDuplicate={duplicateNode}
+          onAddChild={setAddingToParent}
+          onDragStart={handleDragStart}
+          onDragOver={handleDragOver}
+          onDrop={handleDrop}
+          dragOverTarget={dragOverTarget}
+        />
+      </div>
+
+      {/* Add Node Type Selector */}
+      {addingToParent && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+          <div className="w-full max-w-xs rounded-lg border border-border bg-card p-4 shadow-lg">
+            <h3 className="mb-3 text-sm font-semibold">Select Node Type</h3>
+            <div className="space-y-2">
+              <button
+                type="button"
+                onClick={() => handleAddNode('decision')}
+                className={cn(
+                  'flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm',
+                  'border border-blue-500/30 bg-blue-500/10 hover:bg-blue-500/20'
+                )}
+              >
+                <HelpCircle className="h-4 w-4 text-blue-500" />
+                <div>
+                  <div className="font-medium">Decision</div>
+                  <div className="text-xs text-muted-foreground">Question with options</div>
+                </div>
+              </button>
+              <button
+                type="button"
+                onClick={() => handleAddNode('action')}
+                className={cn(
+                  'flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm',
+                  'border border-yellow-500/30 bg-yellow-500/10 hover:bg-yellow-500/20'
+                )}
+              >
+                <Zap className="h-4 w-4 text-yellow-500" />
+                <div>
+                  <div className="font-medium">Action</div>
+                  <div className="text-xs text-muted-foreground">Task to perform</div>
+                </div>
+              </button>
+              <button
+                type="button"
+                onClick={() => handleAddNode('solution')}
+                className={cn(
+                  'flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm',
+                  'border border-green-500/30 bg-green-500/10 hover:bg-green-500/20'
+                )}
+              >
+                <CheckCircle className="h-4 w-4 text-green-500" />
+                <div>
+                  <div className="font-medium">Solution</div>
+                  <div className="text-xs text-muted-foreground">Resolution endpoint</div>
+                </div>
+              </button>
+            </div>
+            <button
+              type="button"
+              onClick={() => setAddingToParent(null)}
+              className="mt-3 w-full rounded-md border border-input px-3 py-2 text-sm hover:bg-accent"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Node Editor Modal */}
+      {editingNode && (
+        <NodeEditorModal
+          node={editingNode}
+          onClose={() => setEditingNodeId(null)}
+        />
+      )}
+    </div>
+  )
+}
+
+export default NodeList

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

@@ -0,0 +1,156 @@
+import { useMemo } from 'react'
+import { useTreeEditorStore } from '@/store/treeEditorStore'
+import type { NodeType } from '@/types'
+import { cn } from '@/lib/utils'
+
+// Special values for creating new nodes
+const CREATE_PREFIX = '__create_'
+const CREATE_DECISION = `${CREATE_PREFIX}decision__`
+const CREATE_ACTION = `${CREATE_PREFIX}action__`
+const CREATE_SOLUTION = `${CREATE_PREFIX}solution__`
+
+// Unicode symbols for node types (works in select options)
+const NODE_TYPE_SYMBOLS: Record<NodeType, string> = {
+  decision: 'ⓘ',  // Information/question symbol
+  action: '⚡',    // Lightning bolt for action
+  solution: '✓'   // Checkmark for solution
+}
+
+interface NodePickerProps {
+  value: string
+  onChange: (nodeId: string) => void
+  /** The parent node ID - new nodes will be added as children of this node */
+  parentNodeId: string
+  excludeNodeId?: string
+  placeholder?: string
+  className?: string
+  label?: string
+  error?: string
+  /** Callback when a new node is created (receives the new node ID) */
+  onNodeCreated?: (nodeId: string) => void
+}
+
+export function NodePicker({
+  value,
+  onChange,
+  parentNodeId,
+  excludeNodeId,
+  placeholder = 'Select a node...',
+  className,
+  label,
+  error,
+  onNodeCreated
+}: NodePickerProps) {
+  const { getAvailableTargetNodes, addNode } = useTreeEditorStore()
+  const availableNodes = getAvailableTargetNodes(excludeNodeId)
+
+  // Group nodes by type
+  const groupedNodes = useMemo(() => {
+    const decisions = availableNodes.filter(n => n.type === 'decision')
+    const actions = availableNodes.filter(n => n.type === 'action')
+    const solutions = availableNodes.filter(n => n.type === 'solution')
+    return { decisions, actions, solutions }
+  }, [availableNodes])
+
+  const handleChange = (selectedValue: string) => {
+    // Check if it's a "create new" option
+    if (selectedValue.startsWith(CREATE_PREFIX)) {
+      let nodeType: NodeType
+      if (selectedValue === CREATE_DECISION) {
+        nodeType = 'decision'
+      } else if (selectedValue === CREATE_ACTION) {
+        nodeType = 'action'
+      } else if (selectedValue === CREATE_SOLUTION) {
+        nodeType = 'solution'
+      } else {
+        return
+      }
+
+      // Create the new node as a child of the parent
+      const newNodeId = addNode(parentNodeId, nodeType)
+
+      // Set this new node as the selected value
+      onChange(newNodeId)
+
+      // Notify parent if callback provided
+      onNodeCreated?.(newNodeId)
+    } else {
+      // Normal selection
+      onChange(selectedValue)
+    }
+  }
+
+  // Find the label for the currently selected node
+  const selectedNode = availableNodes.find(n => n.id === value)
+
+  return (
+    <div className={className}>
+      {label && (
+        <label className="mb-1 block text-sm font-medium text-foreground">
+          {label}
+        </label>
+      )}
+      <select
+        value={value || ''}
+        onChange={(e) => handleChange(e.target.value)}
+        className={cn(
+          'block w-full rounded-md border px-3 py-2 text-sm',
+          'bg-background text-foreground',
+          'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
+          error ? 'border-destructive' : 'border-input'
+        )}
+      >
+        <option value="">{placeholder}</option>
+
+        {/* Create new options */}
+        <optgroup label="Create New Node">
+          <option value={CREATE_DECISION}>+ New Decision (question)</option>
+          <option value={CREATE_ACTION}>+ New Action (task)</option>
+          <option value={CREATE_SOLUTION}>+ New Solution (endpoint)</option>
+        </optgroup>
+
+        {/* Existing nodes grouped by type */}
+        {groupedNodes.decisions.length > 0 && (
+          <optgroup label="── Decisions ──">
+            {groupedNodes.decisions.map((node) => (
+              <option key={node.id} value={node.id}>
+                {NODE_TYPE_SYMBOLS.decision} {node.label}
+              </option>
+            ))}
+          </optgroup>
+        )}
+
+        {groupedNodes.actions.length > 0 && (
+          <optgroup label="── Actions ──">
+            {groupedNodes.actions.map((node) => (
+              <option key={node.id} value={node.id}>
+                {NODE_TYPE_SYMBOLS.action} {node.label}
+              </option>
+            ))}
+          </optgroup>
+        )}
+
+        {groupedNodes.solutions.length > 0 && (
+          <optgroup label="── Solutions ──">
+            {groupedNodes.solutions.map((node) => (
+              <option key={node.id} value={node.id}>
+                {NODE_TYPE_SYMBOLS.solution} {node.label}
+              </option>
+            ))}
+          </optgroup>
+        )}
+      </select>
+
+      {/* Show what's selected */}
+      {value && selectedNode && (
+        <p className="mt-1 text-xs text-muted-foreground">
+          → {selectedNode.label}
+        </p>
+      )}
+
+      {error && <p className="mt-1 text-xs text-destructive">{error}</p>}
+    </div>
+  )
+}
+
+export default NodePicker

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

@@ -0,0 +1,44 @@
+import { TreeMetadataForm } from './TreeMetadataForm'
+import { NodeList } from './NodeList'
+import { TreePreviewPanel } from '@/components/tree-preview/TreePreviewPanel'
+import { cn } from '@/lib/utils'
+
+interface TreeEditorLayoutProps {
+  isMobile?: boolean
+}
+
+export function TreeEditorLayout({ isMobile = false }: TreeEditorLayoutProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-1 overflow-hidden',
+        isMobile ? 'flex-col' : 'flex-row'
+      )}
+    >
+      {/* Left Panel - Form Editor */}
+      <div
+        className={cn(
+          'flex flex-col overflow-y-auto border-border bg-background',
+          isMobile ? 'h-full w-full border-b' : 'w-3/5 border-r'
+        )}
+      >
+        <div className="space-y-4 p-4">
+          <TreeMetadataForm />
+          <NodeList />
+        </div>
+      </div>
+
+      {/* Right Panel - Preview */}
+      <div
+        className={cn(
+          'flex-1 overflow-hidden bg-muted/30',
+          isMobile ? 'hidden' : 'block'
+        )}
+      >
+        <TreePreviewPanel />
+      </div>
+    </div>
+  )
+}
+
+export default TreeEditorLayout

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

@@ -0,0 +1,132 @@
+import { useEffect, useState } from 'react'
+import { treesApi } from '@/api'
+import { useTreeEditorStore } from '@/store/treeEditorStore'
+import { cn } from '@/lib/utils'
+
+export function TreeMetadataForm() {
+  const { name, description, category, setName, setDescription, setCategory, validationErrors } =
+    useTreeEditorStore()
+
+  const [categories, setCategories] = useState<string[]>([])
+  const [customCategory, setCustomCategory] = useState(false)
+
+  // Load existing categories
+  useEffect(() => {
+    treesApi.categories().then(setCategories).catch(console.error)
+  }, [])
+
+  const handleCategoryChange = (value: string) => {
+    if (value === '__custom__') {
+      setCustomCategory(true)
+      setCategory('')
+    } else {
+      setCustomCategory(false)
+      setCategory(value)
+    }
+  }
+
+  const nameError = validationErrors.find(
+    (e) => !e.nodeId && e.message.toLowerCase().includes('name')
+  )
+
+  return (
+    <div className="space-y-4 rounded-lg border border-border bg-card p-4">
+      <h2 className="text-sm font-semibold text-card-foreground">Tree Details</h2>
+
+      {/* Name */}
+      <div>
+        <label htmlFor="tree-name" className="block text-sm font-medium text-foreground">
+          Name <span className="text-destructive">*</span>
+        </label>
+        <input
+          id="tree-name"
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="e.g., VDA Registration Troubleshooting"
+          className={cn(
+            'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
+            'bg-background text-foreground placeholder:text-muted-foreground',
+            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
+            nameError ? 'border-destructive' : 'border-input'
+          )}
+        />
+        {nameError && (
+          <p className="mt-1 text-xs text-destructive">{nameError.message}</p>
+        )}
+      </div>
+
+      {/* Description */}
+      <div>
+        <label htmlFor="tree-description" className="block text-sm font-medium text-foreground">
+          Description
+        </label>
+        <textarea
+          id="tree-description"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="Brief description of what this tree troubleshoots..."
+          rows={2}
+          className={cn(
+            'mt-1 block w-full rounded-md border border-input px-3 py-2 text-sm',
+            'bg-background text-foreground placeholder:text-muted-foreground',
+            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+          )}
+        />
+      </div>
+
+      {/* Category */}
+      <div>
+        <label htmlFor="tree-category" className="block text-sm font-medium text-foreground">
+          Category
+        </label>
+        {!customCategory ? (
+          <select
+            id="tree-category"
+            value={category || ''}
+            onChange={(e) => handleCategoryChange(e.target.value)}
+            className={cn(
+              'mt-1 block w-full rounded-md border border-input px-3 py-2 text-sm',
+              'bg-background text-foreground',
+              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+            )}
+          >
+            <option value="">No category</option>
+            {categories.map((cat) => (
+              <option key={cat} value={cat}>
+                {cat}
+              </option>
+            ))}
+            <option value="__custom__">+ Add custom category</option>
+          </select>
+        ) : (
+          <div className="mt-1 flex gap-2">
+            <input
+              type="text"
+              value={category}
+              onChange={(e) => setCategory(e.target.value)}
+              placeholder="Enter new category"
+              className={cn(
+                'block flex-1 rounded-md border border-input px-3 py-2 text-sm',
+                'bg-background text-foreground placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
+              )}
+              autoFocus
+            />
+            <button
+              onClick={() => {
+                setCustomCategory(false)
+                setCategory('')
+              }}
+              className="rounded-md border border-input px-3 py-2 text-sm hover:bg-accent"
+            >
+              Cancel
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default TreeMetadataForm

frontend/src/components/tree-editor/index.ts

@@ -0,0 +1,9 @@
+export { TreeEditorLayout } from './TreeEditorLayout'
+export { TreeMetadataForm } from './TreeMetadataForm'
+export { NodeList } from './NodeList'
+export { NodeEditorModal } from './NodeEditorModal'
+export { NodeFormDecision } from './NodeFormDecision'
+export { NodeFormAction } from './NodeFormAction'
+export { NodeFormResolution } from './NodeFormResolution'
+export { DynamicArrayField } from './DynamicArrayField'
+export { NodePicker } from './NodePicker'

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

@@ -0,0 +1,390 @@
+import { useState, useMemo } from 'react'
+import { HelpCircle, Zap, CheckCircle, ChevronDown, ChevronRight, Copy, Check, Play, Users } from 'lucide-react'
+import type { TreeStructure, NodeType } from '@/types'
+import { cn } from '@/lib/utils'
+import type { SharedLinksMap } from './TreePreviewPanel'
+
+type FindNodeFn = (nodeId: string) => TreeStructure | null
+
+/**
+ * Recursively check if a node's subtree contains any solution nodes
+ * Also follows next_node_id references using the findNode function
+ * @param visited - Set to track visited nodes and prevent infinite loops
+ */
+function hasSolutionInSubtree(
+  node: TreeStructure,
+  findNode: FindNodeFn,
+  visited: Set<string> = new Set()
+): boolean {
+  // Prevent infinite loops from circular references
+  if (visited.has(node.id)) return false
+  visited.add(node.id)
+
+  // This node is a solution
+  if (node.type === 'solution') {
+    return true
+  }
+
+  // Check children array
+  if (node.children && node.children.length > 0) {
+    if (node.children.some(child => hasSolutionInSubtree(child, findNode, visited))) {
+      return true
+    }
+  }
+
+  // Check next_node_id reference (for action nodes)
+  if (node.next_node_id) {
+    const nextNode = findNode(node.next_node_id)
+    if (nextNode && hasSolutionInSubtree(nextNode, findNode, visited)) {
+      return true
+    }
+  }
+
+  return false
+}
+
+interface TreePreviewNodeProps {
+  node: TreeStructure
+  selectedNodeId: string | null
+  onSelect: (nodeId: string) => void
+  depth: number
+  /** Optional label showing which option led to this node */
+  fromOption?: string
+  /** Callback when hovering over a node reference */
+  onHoverNodeId?: (nodeId: string | null) => void
+  /** Currently hovered node ID */
+  hoveredNodeId?: string | null
+  /** Function to look up any node by ID (for following next_node_id references) */
+  findNode: FindNodeFn
+  /** Map of targetNodeId -> sources that link to it (for showing shared connections) */
+  sharedLinksMap: SharedLinksMap
+}
+
+export function TreePreviewNode({
+  node,
+  selectedNodeId,
+  onSelect,
+  depth,
+  fromOption,
+  onHoverNodeId,
+  hoveredNodeId,
+  findNode,
+  sharedLinksMap
+}: TreePreviewNodeProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const [copiedId, setCopiedId] = useState(false)
+  const isSelected = selectedNodeId === node.id
+  const isHovered = hoveredNodeId === node.id
+  const isRootNode = node.id === 'root'
+
+  // Check if this node (or its children/next_node_id) leads to a solution
+  const leadsTosolution = useMemo(() => {
+    // Don't show indicator on solution nodes themselves
+    if (node.type === 'solution') return false
+    return hasSolutionInSubtree(node, findNode)
+  }, [node, findNode])
+
+  const nodeTypeColors: Record<NodeType, string> = {
+    decision: 'border-blue-500/50 bg-blue-500/10',
+    action: 'border-yellow-500/50 bg-yellow-500/10',
+    solution: 'border-green-500/50 bg-green-500/10'
+  }
+
+  const nodeTypeSelectedColors: Record<NodeType, string> = {
+    decision: 'border-blue-500 bg-blue-500/20 ring-2 ring-blue-500/50 shadow-lg shadow-blue-500/20',
+    action: 'border-yellow-500 bg-yellow-500/20 ring-2 ring-yellow-500/50 shadow-lg shadow-yellow-500/20',
+    solution: 'border-green-500 bg-green-500/20 ring-2 ring-green-500/50 shadow-lg shadow-green-500/20'
+  }
+
+  const nodeTypeHoveredColors: Record<NodeType, string> = {
+    decision: 'border-blue-400 bg-blue-500/15 ring-1 ring-blue-400/50',
+    action: 'border-yellow-400 bg-yellow-500/15 ring-1 ring-yellow-400/50',
+    solution: 'border-green-400 bg-green-500/15 ring-1 ring-green-400/50'
+  }
+
+  const nodeTypeIcons: Record<NodeType, React.ReactNode> = {
+    decision: <HelpCircle className="h-4 w-4 text-blue-500" />,
+    action: <Zap className="h-4 w-4 text-yellow-500" />,
+    solution: <CheckCircle className="h-4 w-4 text-green-500" />
+  }
+
+  const getNodeLabel = () => {
+    if (node.type === 'decision') return node.question || 'Untitled Question'
+    return node.title || `Untitled ${node.type}`
+  }
+
+  const hasChildren = node.children && node.children.length > 0
+
+  const handleCopyId = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    navigator.clipboard.writeText(node.id)
+    setCopiedId(true)
+    setTimeout(() => setCopiedId(false), 2000)
+  }
+
+  const toggleCollapse = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setIsCollapsed(!isCollapsed)
+  }
+
+  // Find which option label leads to each child node
+  const getOptionLabelForChild = (childId: string): string | undefined => {
+    if (node.type === 'decision' && node.options) {
+      const option = node.options.find(opt => opt.next_node_id === childId)
+      return option?.label
+    }
+    return undefined
+  }
+
+  // Check if a specific option/next_node_id leads to a solution
+  const nodeLeadsToSolution = (nextNodeId: string | undefined): boolean => {
+    if (!nextNodeId) return false
+    // First try to find in children
+    const childNode = node.children?.find(child => child.id === nextNodeId)
+    if (childNode) {
+      return hasSolutionInSubtree(childNode, findNode)
+    }
+    // Otherwise look up using findNode (for shared/external node references)
+    const targetNode = findNode(nextNodeId)
+    if (!targetNode) return false
+    return hasSolutionInSubtree(targetNode, findNode)
+  }
+
+  return (
+    <div className="relative">
+      {/* From option label */}
+      {fromOption && (
+        <div className="mb-1 text-xs font-medium text-muted-foreground">
+          <span className="rounded bg-muted px-1.5 py-0.5">{fromOption}</span>
+        </div>
+      )}
+
+      {/* Node card */}
+      <div
+        onClick={() => onSelect(node.id)}
+        className={cn(
+          'relative cursor-pointer rounded-lg border-2 p-3 transition-all',
+          isRootNode
+            ? isSelected
+              ? 'border-blue-500 bg-blue-500/20 ring-2 ring-blue-500/50 shadow-lg shadow-blue-500/20'
+              : isHovered
+              ? 'border-blue-400 bg-blue-500/15 ring-1 ring-blue-400/50'
+              : 'border-blue-500/50 bg-blue-500/10'
+            : isSelected
+            ? nodeTypeSelectedColors[node.type]
+            : isHovered
+            ? nodeTypeHoveredColors[node.type]
+            : nodeTypeColors[node.type],
+          'hover:shadow-md',
+          isRootNode ? 'min-w-[260px] max-w-[360px]' : 'min-w-[220px] max-w-[320px]'
+        )}
+      >
+        {/* Solution path indicator - shows when this branch leads to a solution */}
+        {leadsTosolution && (
+          <div
+            className="absolute -top-1.5 -right-1.5 flex items-center justify-center rounded-full bg-green-500/90 p-0.5 shadow-sm"
+            title="This branch leads to a solution"
+          >
+            <CheckCircle className="h-3 w-3 text-white" />
+          </div>
+        )}
+        {/* Root node START header */}
+        {isRootNode && (
+          <div className="flex items-center gap-2 mb-2 pb-2 border-b border-blue-500/30">
+            <div className="rounded-full bg-blue-500/30 p-1.5">
+              <Play className="h-4 w-4 text-blue-500" />
+            </div>
+            <span className="text-xs font-bold uppercase tracking-wide text-blue-600 dark:text-blue-400">
+              Starting Question
+            </span>
+          </div>
+        )}
+
+        <div className="flex items-start gap-2">
+          {/* Collapse toggle for nodes with children */}
+          {hasChildren ? (
+            <button
+              type="button"
+              onClick={toggleCollapse}
+              className="mt-0.5 rounded p-0.5 hover:bg-muted"
+            >
+              {isCollapsed ? (
+                <ChevronRight className="h-4 w-4 text-muted-foreground" />
+              ) : (
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
+              )}
+            </button>
+          ) : (
+            <div className="w-5" /> // Spacer for alignment
+          )}
+
+          {!isRootNode && nodeTypeIcons[node.type]}
+          {isRootNode && <HelpCircle className="h-4 w-4 text-blue-500" />}
+
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium text-foreground leading-tight">
+              {getNodeLabel()}
+            </p>
+
+            {/* Node ID with copy button */}
+            <div className="flex items-center gap-1 mt-1">
+              <span
+                className="text-xs text-muted-foreground cursor-help"
+                title={`Full ID: ${node.id}`}
+              >
+                {node.id === 'root' ? 'root' : node.id.slice(0, 8) + '...'}
+              </span>
+              <button
+                type="button"
+                onClick={handleCopyId}
+                className="rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+                title="Copy full ID"
+              >
+                {copiedId ? (
+                  <Check className="h-3 w-3 text-green-500" />
+                ) : (
+                  <Copy className="h-3 w-3" />
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Show options for decision nodes */}
+        {node.type === 'decision' && node.options && node.options.length > 0 && (
+          <div className="mt-2 space-y-1 border-t border-border/50 pt-2">
+            <p className="text-[10px] uppercase tracking-wide text-muted-foreground">Options:</p>
+            {node.options.map((opt, i) => {
+              const leadsToSolution = nodeLeadsToSolution(opt.next_node_id)
+              return (
+                <div
+                  key={opt.id}
+                  className={cn(
+                    'flex items-center gap-1 text-xs rounded px-1 py-0.5 -mx-1',
+                    opt.next_node_id && 'hover:bg-muted cursor-pointer'
+                  )}
+                  onMouseEnter={() => opt.next_node_id && onHoverNodeId?.(opt.next_node_id)}
+                  onMouseLeave={() => onHoverNodeId?.(null)}
+                >
+                  <span className="inline-flex h-4 w-4 items-center justify-center rounded bg-muted text-[10px] font-medium">
+                    {i + 1}
+                  </span>
+                  <span className="truncate text-foreground">{opt.label || 'Untitled'}</span>
+                  <span className="ml-auto flex items-center gap-1">
+                    {leadsToSolution && (
+                      <span title="Leads to solution">
+                        <CheckCircle className="h-3 w-3 text-green-500" />
+                      </span>
+                    )}
+                    {opt.next_node_id ? (
+                      <span className="text-blue-500">→</span>
+                    ) : (
+                      <span className="text-muted-foreground/50 text-[10px]">(no link)</span>
+                    )}
+                  </span>
+                </div>
+              )
+            })}
+          </div>
+        )}
+
+        {/* Show next_node_id for action nodes */}
+        {node.type === 'action' && node.next_node_id && (() => {
+          const nextNode = findNode(node.next_node_id!)
+          const nextNodeLeadsToSolution = nodeLeadsToSolution(node.next_node_id)
+          const nextNodeLabel = nextNode
+            ? (nextNode.type === 'decision' ? nextNode.question : nextNode.title) || 'Untitled'
+            : node.next_node_id!.slice(0, 8) + '...'
+
+          // Check if this target is shared by multiple sources
+          const sourcesLinkingToTarget = sharedLinksMap.get(node.next_node_id!) || []
+          const otherSources = sourcesLinkingToTarget.filter(s => s.id !== node.id)
+          const isSharedTarget = otherSources.length > 0
+
+          // Build tooltip for shared connection
+          const sharedTooltip = isSharedTarget
+            ? `Shared endpoint - also connected from: ${otherSources.map(s => s.label).join(', ')}`
+            : undefined
+
+          return (
+            <div
+              className="mt-2 text-xs border-t border-border/50 pt-2 hover:bg-muted/50 cursor-pointer rounded px-1 -mx-1"
+              onMouseEnter={() => onHoverNodeId?.(node.next_node_id!)}
+              onMouseLeave={() => onHoverNodeId?.(null)}
+            >
+              <div className="flex items-center gap-1.5">
+                <span className="text-muted-foreground">Next:</span>
+                {isSharedTarget && (
+                  <span title={sharedTooltip} className="flex items-center">
+                    <Users className="h-3 w-3 text-purple-500" />
+                  </span>
+                )}
+                <span className={cn(
+                  'truncate',
+                  nextNode?.type === 'solution' ? 'text-green-500 font-medium' : 'text-foreground'
+                )}>
+                  {nextNodeLabel.slice(0, 30)}{nextNodeLabel.length > 30 ? '...' : ''}
+                </span>
+                <span className="ml-auto flex items-center gap-1">
+                  {(nextNodeLeadsToSolution || nextNode?.type === 'solution') && (
+                    <span title={nextNode?.type === 'solution' ? 'Solution' : 'Leads to solution'}>
+                      <CheckCircle className="h-3 w-3 text-green-500" />
+                    </span>
+                  )}
+                  <span className="text-yellow-500">→</span>
+                </span>
+              </div>
+              {/* Show shared sources count */}
+              {isSharedTarget && (
+                <div className="mt-1 text-[10px] text-purple-500/80 pl-4">
+                  Shared by {sourcesLinkingToTarget.length} nodes
+                </div>
+              )}
+            </div>
+          )
+        })()}
+      </div>
+
+      {/* Children - show as branches */}
+      {hasChildren && !isCollapsed && (
+        <div className="relative mt-3 ml-6 pl-6 border-l-2 border-border">
+          <div className="space-y-4">
+            {node.children!.map((child) => {
+              const optionLabel = getOptionLabelForChild(child.id)
+
+              return (
+                <div key={child.id} className="relative">
+                  {/* Horizontal connector line */}
+                  <div className="absolute -left-6 top-6 h-0.5 w-6 bg-border" />
+
+                  <TreePreviewNode
+                    node={child}
+                    selectedNodeId={selectedNodeId}
+                    onSelect={onSelect}
+                    depth={depth + 1}
+                    fromOption={optionLabel}
+                    onHoverNodeId={onHoverNodeId}
+                    hoveredNodeId={hoveredNodeId}
+                    findNode={findNode}
+                    sharedLinksMap={sharedLinksMap}
+                  />
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Show collapsed indicator */}
+      {hasChildren && isCollapsed && (
+        <div className="mt-2 ml-6 text-xs text-muted-foreground">
+          <span className="rounded bg-muted px-2 py-1">
+            {node.children!.length} child node{node.children!.length !== 1 ? 's' : ''} hidden
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default TreePreviewNode

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

frontend/src/components/tree-preview/index.ts

@@ -0,0 +1,2 @@
+export { TreePreviewPanel } from './TreePreviewPanel'
+export { TreePreviewNode } from './TreePreviewNode'