feat: refactor scratchpad to floating overlay with global thin scrollbars

Refactor scratchpad from a flex-layout sidebar that pushes content left
to a floating overlay panel (position: fixed) that doesn't affect layout.
Panel slides in from the right with Ctrl+/ toggle. Main content adjusts
padding responsively when panel is open.

Also apply thin scrollbar styling globally across all scrollable elements
for a consistent, minimal look.

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

docs/plans/2026-02-04-scratchpad-overlay-design.md

@@ -0,0 +1,63 @@
+# Scratchpad Floating Overlay Design
+
+> **Date:** 2026-02-04
+> **Status:** Approved
+
+---
+
+## Problem
+
+The scratchpad is a full-height sidebar that pushes main content left when open, reducing the available width for tree navigation. On smaller screens this is particularly disruptive. It should be a floating overlay that doesn't affect layout.
+
+## Design
+
+### Component: ScratchpadSidebar.tsx
+
+Single component with two visual states, both using `position: fixed`.
+
+**Closed — floating button:**
+- Fixed to viewport right edge, vertically centered
+- `right: 0; top: 50%; transform: translateY(-50%); z-index: 40`
+- Rounded left corners, flat right edge (`rounded-l-md`)
+- StickyNote icon
+- Amber dot (absolute positioned) when unsaved changes exist
+
+**Open — overlay panel:**
+- Fixed to viewport right edge, vertically centered
+- `right: 0; top: 50%; transform: translateY(-50%); z-index: 40`
+- Width: 420px, height: 55vh
+- Rounded left corners, flat right edge (`rounded-l-lg`)
+- Shadow (`shadow-xl`) and left border for depth
+- Slide-in animation: `translateX(100%)` → `translateX(0)`, 200ms ease-out
+- No backdrop — clicking outside does NOT close it
+
+**Panel contents (unchanged):**
+- Header: title, preview toggle (Eye/Pencil), close button (X)
+- Body: textarea or markdown preview, scrollable
+- Footer: save status indicator
+
+### Keyboard Shortcut
+
+`Ctrl+/` toggles open/closed. Handled via `useEffect` keydown listener inside the component.
+
+### TreeNavigationPage.tsx
+
+- Outer wrapper no longer uses `flex` for sidebar layout
+- Main content takes full width
+- ScratchpadSidebar renders in same DOM position (fixed positioning makes it layout-independent)
+
+### Preserved Behavior
+
+- Auto-save with 1000ms debounce
+- Markdown preview toggle
+- Save status indicators (Saving.../Saved/Unsaved changes)
+- localStorage persistence for open/closed state (key: `scratchpad-collapsed`)
+- beforeunload warning for unsaved changes
+- Session ID reset on navigation
+
+## Files Changed
+
+| File | Change |
+|------|--------|
+| `frontend/src/components/session/ScratchpadSidebar.tsx` | Refactor to fixed-position floating overlay |
+| `frontend/src/pages/TreeNavigationPage.tsx` | Remove flex sidebar layout |

frontend/src/components/session/ScratchpadSidebar.tsx

@@ -1,19 +1,20 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { cn } from '@/lib/utils'
 import { MarkdownContent } from '@/components/ui/MarkdownContent'
-import { StickyNote, ChevronRight, Eye, Pencil, Loader2 } from 'lucide-react'
+import { StickyNote, X, Eye, Pencil, Loader2 } from 'lucide-react'
 
 interface ScratchpadSidebarProps {
   sessionId: string
   initialContent: string
   onSave: (content: string) => Promise<void>
+  onOpenChange?: (isOpen: boolean) => void
 }
 
-export function ScratchpadSidebar({ sessionId, initialContent, onSave }: ScratchpadSidebarProps) {
+export function ScratchpadSidebar({ sessionId, initialContent, onSave, onOpenChange }: ScratchpadSidebarProps) {
   const [content, setContent] = useState(initialContent)
   const [lastSaved, setLastSaved] = useState(initialContent)
   const [isCollapsed, setIsCollapsed] = useState(() => {
-    return localStorage.getItem('scratchpad-collapsed') === 'true'
+    return localStorage.getItem('scratchpad-collapsed') !== 'false'
   })
   const [isSaving, setIsSaving] = useState(false)
   const [showPreview, setShowPreview] = useState(false)
@@ -40,10 +41,23 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave }: Scratch
     }
   }, [isSaving, hasUnsavedChanges])
 
-  // Persist collapse state
+  // Persist collapse state and notify parent
   useEffect(() => {
     localStorage.setItem('scratchpad-collapsed', String(isCollapsed))
-  }, [isCollapsed])
+    onOpenChange?.(!isCollapsed)
+  }, [isCollapsed, onOpenChange])
+
+  // Keyboard shortcut: Ctrl+/ to toggle
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === '/') {
+        e.preventDefault()
+        setIsCollapsed(prev => !prev)
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [])
 
   // beforeunload warning
   useEffect(() => {
@@ -103,97 +117,110 @@ export function ScratchpadSidebar({ sessionId, initialContent, onSave }: Scratch
     }
   }, [])
 
-  if (isCollapsed) {
-    return (
-      <div className="flex w-12 flex-shrink-0 flex-col items-center border-l border-border bg-card pt-4">
-        <button
-          onClick={() => setIsCollapsed(false)}
-          className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
-          title="Open scratchpad"
-        >
-          <StickyNote className="h-5 w-5" />
-        </button>
-        {hasUnsavedChanges && (
-          <div className="mt-2 h-2 w-2 rounded-full bg-amber-500" title="Unsaved changes" />
-        )}
-      </div>
-    )
-  }
-
   return (
-    <div className="flex w-[300px] flex-shrink-0 flex-col border-l border-border bg-card">
+    <>
-      {/* Header */}
+      {/* Floating button (visible when collapsed) */}
-      <div className="flex items-center justify-between border-b border-border px-3 py-2">
+      <button
-        <div className="flex items-center gap-2">
+        onClick={() => setIsCollapsed(false)}
-          <StickyNote className="h-4 w-4 text-muted-foreground" />
+        className={cn(
-          <span className="text-sm font-medium text-foreground">Scratchpad</span>
+          'fixed right-2 top-1/2 z-40 -translate-y-1/2 rounded-md p-2.5',
-        </div>
+          'bg-card border border-border shadow-md',
-        <div className="flex items-center gap-1">
+          'text-muted-foreground hover:bg-accent hover:text-foreground',
-          <button
+          'transition-opacity duration-200',
-            onClick={() => setShowPreview(!showPreview)}
+          isCollapsed ? 'opacity-100' : 'pointer-events-none opacity-0'
-            className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+        )}
-            title={showPreview ? 'Edit' : 'Preview'}
+        title="Open scratchpad (Ctrl+/)"
-          >
+      >
-            {showPreview ? <Pencil className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+        <StickyNote className="h-5 w-5" />
-          </button>
+        {hasUnsavedChanges && (
-          <button
+          <div className="absolute -left-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-amber-500" />
-            onClick={() => setIsCollapsed(true)}
+        )}
-            className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+      </button>
-            title="Collapse scratchpad"
-          >
-            <ChevronRight className="h-4 w-4" />
-          </button>
-        </div>
-      </div>
 
-      {/* Content */}
+      {/* Panel overlay */}
-      <div className="flex-1 overflow-y-auto p-3">
+      <div
-        {showPreview ? (
+        className={cn(
-          <div className="min-h-[100px]">
+          'fixed right-2 top-1/2 z-40 -translate-y-1/2',
-            {content.trim() ? (
+          'flex h-[55vh] w-[420px] flex-col',
-              <MarkdownContent content={content} className="text-sm" />
+          'rounded-lg border border-border bg-card shadow-xl',
-            ) : (
+          'transition-transform duration-200 ease-out',
-              <p className="text-sm italic text-muted-foreground">Nothing to preview</p>
+          isCollapsed ? 'translate-x-full' : 'translate-x-0'
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-border px-3 py-2">
+          <div className="flex items-center gap-2">
+            <StickyNote className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium text-foreground">Scratchpad</span>
+            <span className="text-xs text-muted-foreground/60">Ctrl+/</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <button
+              onClick={() => setShowPreview(!showPreview)}
+              className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+              title={showPreview ? 'Edit' : 'Preview'}
+            >
+              {showPreview ? <Pencil className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
+            </button>
+            <button
+              onClick={() => setIsCollapsed(true)}
+              className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+              title="Close scratchpad"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-3">
+          {showPreview ? (
+            <div className="min-h-[100px]">
+              {content.trim() ? (
+                <MarkdownContent content={content} className="text-sm" />
+              ) : (
+                <p className="text-sm italic text-muted-foreground">Nothing to preview</p>
+              )}
+            </div>
+          ) : (
+            <textarea
+              value={content}
+              onChange={(e) => handleChange(e.target.value)}
+              onBlur={handleBlur}
+              placeholder={"Capture IPs, error codes, server names, user info...\n\nSupports markdown formatting."}
+              className={cn(
+                'h-full min-h-[200px] w-full resize-none rounded-md border-0 bg-transparent p-0 text-sm',
+                'text-foreground placeholder:text-muted-foreground',
+                'focus:outline-none focus:ring-0'
+              )}
+            />
+          )}
+        </div>
+
+        {/* Save Indicator */}
+        <div className="border-t border-border px-3 py-1.5">
+          <div className="flex items-center gap-1.5 text-xs">
+            {saveStatus === 'unsaved' && (
+              <span className="text-muted-foreground">Unsaved changes</span>
+            )}
+            {saveStatus === 'saving' && (
+              <>
+                <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
+                <span className="text-muted-foreground">Saving...</span>
+              </>
+            )}
+            {saveStatus === 'saved' && (
+              <span className="text-green-600 dark:text-green-400">Saved</span>
+            )}
+            {saveStatus === 'error' && (
+              <span className="text-destructive">Save failed</span>
+            )}
+            {saveStatus === 'idle' && (
+              <span className="text-muted-foreground/50">Markdown supported</span>
             )}
           </div>
-        ) : (
-          <textarea
-            value={content}
-            onChange={(e) => handleChange(e.target.value)}
-            onBlur={handleBlur}
-            placeholder={"Capture IPs, error codes, server names, user info...\n\nSupports markdown formatting."}
-            className={cn(
-              'h-full min-h-[200px] w-full resize-none rounded-md border-0 bg-transparent p-0 text-sm',
-              'text-foreground placeholder:text-muted-foreground',
-              'focus:outline-none focus:ring-0'
-            )}
-          />
-        )}
-      </div>
-
-      {/* Save Indicator */}
-      <div className="border-t border-border px-3 py-1.5">
-        <div className="flex items-center gap-1.5 text-xs">
-          {saveStatus === 'unsaved' && (
-            <span className="text-muted-foreground">Unsaved changes</span>
-          )}
-          {saveStatus === 'saving' && (
-            <>
-              <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
-              <span className="text-muted-foreground">Saving...</span>
-            </>
-          )}
-          {saveStatus === 'saved' && (
-            <span className="text-green-600 dark:text-green-400">Saved</span>
-          )}
-          {saveStatus === 'error' && (
-            <span className="text-destructive">Save failed</span>
-          )}
-          {saveStatus === 'idle' && (
-            <span className="text-muted-foreground/50">Markdown supported</span>
-          )}
         </div>
       </div>
-    </div>
+    </>
   )
 }

frontend/src/index.css

@@ -54,6 +54,22 @@
 @layer base {
   * {
     @apply border-border;
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--border)) transparent;
+  }
+  *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--border));
+    border-radius: 9999px;
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--muted-foreground));
   }
 
   body {

frontend/src/pages/TreeNavigationPage.tsx

@@ -56,6 +56,11 @@ export function TreeNavigationPage() {
   // Fork flow
   const [showForkModal, setShowForkModal] = useState(false)
 
+  // Scratchpad state
+  const [scratchpadOpen, setScratchpadOpen] = useState(() => {
+    return localStorage.getItem('scratchpad-collapsed') === 'false'
+  })
+
   // Scratchpad save handler
   const handleScratchpadSave = async (content: string) => {
     if (!session) return
@@ -636,9 +641,9 @@ export function TreeNavigationPage() {
   }
 
   return (
-    <div className="flex h-[calc(100vh-4rem)]">
+    <div className="h-[calc(100vh-4rem)]">
       {/* Main Content */}
-      <div className="flex-1 min-w-0 overflow-y-auto px-4 py-8">
+      <div className={cn('h-full overflow-y-auto px-4 py-8 transition-[padding] duration-200', scratchpadOpen && 'pr-[440px]')}>
       <div className="mx-auto max-w-4xl">
       {/* Header */}
       <div className="mb-6 flex items-center justify-between">
@@ -1024,6 +1029,7 @@ export function TreeNavigationPage() {
           sessionId={session.id}
           initialContent={session.scratchpad ?? ''}
           onSave={handleScratchpadSave}
+          onOpenChange={setScratchpadOpen}
         />
       )}
     </div>