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>

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 */}
-      <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>
-        </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="Collapse scratchpad"
-          >
-            <ChevronRight className="h-4 w-4" />
-          </button>
-        </div>
-      </div>
+    <>
+      {/* Floating button (visible when collapsed) */}
+      <button
+        onClick={() => setIsCollapsed(false)}
+        className={cn(
+          'fixed right-2 top-1/2 z-40 -translate-y-1/2 rounded-md p-2.5',
+          'bg-card border border-border shadow-md',
+          'text-muted-foreground hover:bg-accent hover:text-foreground',
+          'transition-opacity duration-200',
+          isCollapsed ? 'opacity-100' : 'pointer-events-none opacity-0'
+        )}
+        title="Open scratchpad (Ctrl+/)"
+      >
+        <StickyNote className="h-5 w-5" />
+        {hasUnsavedChanges && (
+          <div className="absolute -left-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-amber-500" />
+        )}
+      </button>
 
-      {/* 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>
+      {/* Panel overlay */}
+      <div
+        className={cn(
+          'fixed right-2 top-1/2 z-40 -translate-y-1/2',
+          'flex h-[55vh] w-[420px] flex-col',
+          'rounded-lg border border-border bg-card shadow-xl',
+          'transition-transform duration-200 ease-out',
+          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>
+    </>
   )
 }