From 4a0193f9aff649339b6eb8f6e97b05a19617dda6 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Wed, 4 Feb 2026 02:51:52 -0500
Subject: [PATCH] feat: integrate scratchpad sidebar into tree navigation page

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/pages/TreeNavigationPage.tsx | 24 +++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/TreeNavigationPage.tsx b/frontend/src/pages/TreeNavigationPage.tsx
index aacd3820..c6e3199a 100644
--- a/frontend/src/pages/TreeNavigationPage.tsx
+++ b/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>
   )
 }