feat: integrate scratchpad sidebar into tree navigation page

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

frontend/src/pages/TreeNavigationPage.tsx

@@ -7,7 +7,7 @@ import type { CustomStepDraft } from '@/components/step-library/CustomStepModal'
 import { cn } from '@/lib/utils'
 import { MarkdownContent } from '@/components/ui/MarkdownContent'
 import { CustomStepModal } from '@/components/step-library/CustomStepModal'
-import { PostStepActionModal, ContinuationModal, ForkTreeModal, type DescendantNode } from '@/components/session'
+import { PostStepActionModal, ContinuationModal, ForkTreeModal, ScratchpadSidebar, type DescendantNode } from '@/components/session'
 import { Plus, CheckCircle, ArrowRight } from 'lucide-react'
 
 interface LocationState {
@@ -56,6 +56,12 @@ export function TreeNavigationPage() {
   // Fork flow
   const [showForkModal, setShowForkModal] = useState(false)
 
+  // Scratchpad save handler
+  const handleScratchpadSave = async (content: string) => {
+    if (!session) return
+    await sessionsApi.updateScratchpad(session.id, content)
+  }
+
   useEffect(() => {
     if (treeId) {
       loadTreeAndSession()
@@ -630,7 +636,10 @@ export function TreeNavigationPage() {
   }
 
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div className="flex h-[calc(100vh-4rem)]">
+      {/* Main Content */}
+      <div className="flex-1 min-w-0 overflow-y-auto px-4 py-8">
+      <div className="mx-auto max-w-4xl">
       {/* Header */}
       <div className="mb-6 flex items-center justify-between">
         <div>
@@ -1006,6 +1015,17 @@ export function TreeNavigationPage() {
         onFork={handleForkTree}
         onSkip={handleSkipFork}
       />
+      </div>
+      </div>
+
+      {/* Scratchpad Sidebar */}
+      {session && (
+        <ScratchpadSidebar
+          sessionId={session.id}
+          initialContent={session.scratchpad ?? ''}
+          onSave={handleScratchpadSave}
+        />
+      )}
     </div>
   )
 }