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/pages/TreeLibraryPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, Link } from 'react-router-dom'
+import { Plus, Pencil } from 'lucide-react'
 import { treesApi } from '@/api'
 import type { TreeListItem } from '@/types'
 import { cn } from '@/lib/utils'
@@ -59,11 +60,23 @@ export function TreeLibraryPage() {
 
   return (
     <div className="container mx-auto px-4 py-8">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-foreground">Decision Trees</h1>
-        <p className="mt-2 text-muted-foreground">
-          Select a troubleshooting tree to start a new session
-        </p>
+      <div className="mb-8 flex items-start justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-foreground">Decision Trees</h1>
+          <p className="mt-2 text-muted-foreground">
+            Select a troubleshooting tree to start a new session
+          </p>
+        </div>
+        <Link
+          to="/trees/new"
+          className={cn(
+            'flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
+            'hover:bg-primary/90'
+          )}
+        >
+          <Plus className="h-4 w-4" />
+          Create Tree
+        </Link>
       </div>
 
       {/* Search and Filter */}
@@ -148,15 +161,28 @@ export function TreeLibraryPage() {
                 <span className="text-xs text-muted-foreground">
                   v{tree.version} · {tree.usage_count} uses
                 </span>
-                <button
-                  onClick={() => handleStartSession(tree.id)}
-                  className={cn(
-                    'rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground',
-                    'hover:bg-primary/90'
-                  )}
-                >
-                  Start Session
-                </button>
+                <div className="flex items-center gap-2">
+                  <Link
+                    to={`/trees/${tree.id}/edit`}
+                    className={cn(
+                      'rounded-md border border-input p-1.5 text-muted-foreground',
+                      'hover:bg-accent hover:text-accent-foreground'
+                    )}
+                    title="Edit tree"
+                  >
+                    <Pencil className="h-4 w-4" />
+                  </Link>
+                  <button
+                    type="button"
+                    onClick={() => handleStartSession(tree.id)}
+                    className={cn(
+                      'rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground',
+                      'hover:bg-primary/90'
+                    )}
+                  >
+                    Start Session
+                  </button>
+                </div>
               </div>
             </div>
           ))}