ompchamber 1.0.0 → 1.2.0

package/src/client/components/layout/desktop-layout/index.tsx

@@ -1,11 +1,9 @@
-import type { RefObject } from 'preact/compat';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { useCallback, useMemo, useRef, useState } from 'preact/hooks';
 import { useSearchParams } from '@/client/lib/router/search-params';
 import { Group, Panel, type PanelImperativeHandle } from '@/client/components/layout/desktop-layout/resizer';
 import { SessionSidebar } from '@/client/components/layout/session-sidebar/index';
-import { DEFAULT_RIGHT_PANEL_WIDTHS, type RightPanelType } from '@/shared/lib/workspace/right-panels';
+import type { RightPanelType } from '@/shared/lib/workspace/right-panels';
 import { SettingsModal } from '@/client/components/settings/LazyModal';
-import { PanelLeft } from 'lucide-preact';
 import type { SettingsCategoryId } from '@/shared/types';
 import { activeProjectForSession } from '@/shared/lib/workspace/active-project';
 import { useFileTabs } from '@/client/hooks/workspace/file-tabs';
@@ -15,9 +13,8 @@ import { WorkspacePanels } from '@/client/components/layout/desktop-layout/Works
 import { useAgentStreamStatus } from '@/client/hooks/chat/omp/status';
 import { usePanelWidths } from '@/client/hooks/workspace/panel-widths';
 import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
-import { DEFAULT_PANEL_WIDTHS, MAX_LEFT_PANEL_WIDTH, MIN_LEFT_PANEL_WIDTH, type EditorWidthMode } from '@/shared/lib/workspace/panel-widths';
+import { DEFAULT_LEFT_PANEL_WIDTH, MAX_LEFT_PANEL_WIDTH, MIN_LEFT_PANEL_WIDTH, type EditorWidthMode } from '@/shared/lib/workspace/panel-widths';
 import { ResizeHandle } from '@/client/components/layout/desktop-layout/ResizeHandle';
-import { writeSetting } from '@/shared/lib/settings/client';
 import { useChamberEvent, useWindowEvent } from '@/client/hooks/ui/window-event';
 
 interface DesktopLayoutProps {
@@ -26,29 +23,17 @@ interface DesktopLayoutProps {
   appSettings?: Record<string, any>;
 }
 
-/**
- * Push a remembered width onto a mounted panel. Panels report nothing while
- * unmounted, so a missing width (never resized) or a missing handle (panel
- * closed) simply leaves the panel at whatever its `defaultSize` derived.
- */
-function applyWidth(
-  ref: RefObject<PanelImperativeHandle | null>,
-  px: number | undefined,
-) {
-  if (px != null) ref.current?.resize(px);
-}
-
 export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }: DesktopLayoutProps) {
   const { folders } = useSidebarData();
   const [showRightPanel, setShowRightPanel] = useSessionState<boolean>('layout.showRightPanel', appSettings.showRightPanel ?? true);
   const [activeRightPanel, setActiveRightPanel] = useSessionState<RightPanelType>('layout.activeRightPanel', (appSettings.activeRightPanel as RightPanelType) ?? 'files');
-  const [showLeftPanel, setShowLeftPanel] = useState(appSettings.showLeftPanel ?? true);
-  const { widths: panelWidths, widthsRef, commitWidths } = usePanelWidths(appSettings, activeRightPanel);
+  const [showLeftPanel, setShowLeftPanel] = useSessionState<boolean>('layout.showLeftPanel', appSettings.showLeftPanel ?? true);
+  const { widths: panelWidths, commitWidths } = usePanelWidths(appSettings, activeRightPanel);
 
   const editorPanelRef = useRef<PanelImperativeHandle | null>(null);
   const rightPanelRef = useRef<PanelImperativeHandle | null>(null);
   const leftPanelRef = useRef<PanelImperativeHandle | null>(null);
-  const [userToggledEditor, setUserToggledEditor] = useState<boolean | null>(appSettings.userToggledEditor ?? null);
+  const [userToggledEditor, setUserToggledEditor] = useSessionState<boolean | null>('layout.userToggledEditor', appSettings.userToggledEditor ?? null);
 
   const [searchParams] = useSearchParams();
   const folderIdParam = searchParams.get('folderId');
@@ -63,8 +48,7 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
 
   const handleOpenTab = useCallback(() => {
     setUserToggledEditor(true);
-    saveSetting('userToggledEditor', true);
-  }, []);
+  }, [setUserToggledEditor]);
 
   const {
     openedFiles,
@@ -83,42 +67,13 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
     [openedFiles, activeFileId],
   );
 
-  const saveSetting = (key: string, value: any) => {
-    writeSetting(key, value);
-  };
-
-  // The sidebar shares a group with the workspace stack, so the stack absorbs
-  // its width and only the toggle can lose it: reapplying it after the panel
-  // remounts is what keeps the sidebar where the user left it.
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      const widths = widthsRef.current;
-      if (widths) applyWidth(leftPanelRef, widths.left);
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [showLeftPanel, widthsRef]);
-
-  // The right panel survives activity-bar view switches (only CSS hides the
-  // outgoing view), so a mounted panel never re-reads its defaultSize. A view
-  // that has been resized gets that width pushed here; one that never has gets
-  // the width it is supposed to open at, which the element would otherwise
-  // have taken from the view it was mounted under.
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      applyWidth(rightPanelRef, widthsRef.current?.right?.[activeRightPanel] ?? DEFAULT_RIGHT_PANEL_WIDTHS[activeRightPanel]);
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [showRightPanel, activeRightPanel, widthsRef]);
-
-  // Same story for the editor across a source↔diff tab switch: the panel
-  // stays mounted, so the width its tab kind remembers — or opens at, for a
-  // diff, which is wider than a source view — is re-applied here.
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      applyWidth(editorPanelRef, widthsRef.current?.[editorWidthMode] ?? DEFAULT_PANEL_WIDTHS[editorWidthMode]);
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [showEditor, editorWidthMode, widthsRef]);
+  // Width restoration is declarative: every panel's `defaultSize` is derived
+  // from the remembered width for its current slot, and `Panel` adopts a
+  // changed `defaultSize` itself. That covers the two cases that used to need
+  // an imperative push — a right-panel view switch and an editor source↔diff
+  // switch, both of which keep the panel mounted while only its width slot
+  // changes — and it cannot go stale, because there is no cached layout to
+  // disagree with the props.
 
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settingsCategory, setSettingsCategory] = useState<SettingsCategoryId>('appearance');
@@ -153,41 +108,30 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
   const handleChangeRightPanel = (panel: RightPanelType) => {
     let nextShow = showRightPanel;
     let nextActive = activeRightPanel;
-    
+
     if (activeRightPanel === panel && showRightPanel) {
       nextShow = false;
     } else {
       nextActive = panel;
       nextShow = true;
     }
-    
+
     setShowRightPanel(nextShow);
     setActiveRightPanel(nextActive);
-
-    // The width is not set here: the restore effect re-applies whichever width
-    // this view remembers, and a view that opens for the first time derives it
-    // from its own defaultSize. Reopening the same view keeps its width.
-    writeSetting('showRightPanel', nextShow);
-    writeSetting('activeRightPanel', nextActive);
   };
 
   const handleToggleLeftPanel = (show: boolean) => {
     setShowLeftPanel(show);
-    saveSetting('showLeftPanel', show);
   };
 
   const handleToggleRightPanel = () => {
-    const nextShow = !showRightPanel;
-    setShowRightPanel(nextShow);
-    saveSetting('showRightPanel', nextShow);
+    setShowRightPanel(!showRightPanel);
   };
 
   const handleToggleEditor = () => {
-    const nextShow = !showEditor;
-    setUserToggledEditor(nextShow);
-    saveSetting('userToggledEditor', nextShow);
-    // Reopening the editor re-applies the width its tab kind remembers (see the
-    // restore effect), so a dragged width survives the toggle.
+    setUserToggledEditor(!showEditor);
+    // The editor panel keeps its own remembered width per tab kind, so a
+    // dragged width survives the toggle without being re-applied here.
   };
 
   return (
@@ -195,18 +139,6 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
 
       {/* Main Workspace: full-height left sidebar (resizable) + right stack */}
       <div className="flex flex-1 overflow-hidden">
-        {!showLeftPanel && (
-          <div 
-            className="w-12 h-full bg-paper border-r border-ink/10 flex flex-col items-center py-3 flex-shrink-0 cursor-pointer hover:bg-ink/5 transition-colors titlebar-no-drag" 
-            style={{ paddingTop: 'max(0.75rem, env(titlebar-area-height, 0px))' }}
-            onClick={() => handleToggleLeftPanel(true)} 
-            title="Expand Sidebar"
-          >
-            <PanelLeft size={16} className="text-ink/60" />
-            <div className="w-[1px] flex-1 bg-ink/10 my-4" />
-          </div>
-        )}
-
         <Group
           orientation="horizontal"
           id="ompchamber-main"
@@ -215,14 +147,10 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
             if (left != null && left > 0) commitWidths({ left: Math.round(left) });
           }}
         >
-          {showLeftPanel && (
-            <>
-              <Panel panelRef={leftPanelRef} id="left-panel" defaultSize={panelWidths.left ?? DEFAULT_PANEL_WIDTHS.left} minSize={MIN_LEFT_PANEL_WIDTH} maxSize={MAX_LEFT_PANEL_WIDTH} collapsible>
-                <SessionSidebar className="w-full h-full" onClose={() => handleToggleLeftPanel(false)} appSettings={appSettings} />
-              </Panel>
-              <ResizeHandle />
-            </>
-          )}
+          <Panel panelRef={leftPanelRef} id="left-panel" defaultSize={panelWidths.left ?? DEFAULT_LEFT_PANEL_WIDTH} minSize={MIN_LEFT_PANEL_WIDTH} maxSize={MAX_LEFT_PANEL_WIDTH} collapsed={!showLeftPanel}>
+            <SessionSidebar className="w-full h-full" onClose={() => handleToggleLeftPanel(false)} appSettings={appSettings} />
+          </Panel>
+          {showLeftPanel && <ResizeHandle />}
 
           {/* Right stack: top navbar + resizable workspace (the group's filler) */}
           <Panel id="main-right-stack" filler minSize={0}>
@@ -236,6 +164,7 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
                 onSwitchToMobile={onSwitchToMobile}
                 onToggleEditor={handleToggleEditor}
                 onToggleRightPanel={handleToggleRightPanel}
+                onToggleLeftPanel={() => handleToggleLeftPanel(!showLeftPanel)}
               />
 
               <WorkspacePanels

package/src/client/components/layout/desktop-layout/resizer/index.tsx

@@ -1,8 +1,9 @@
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'preact/compat';
 import { useRef as useRefBase } from 'preact/hooks';
 import type { ComponentChildren, RefObject } from 'preact';
-import type { CSSProperties, TargetedPointerEvent } from 'preact';
-import { clamp, toPx, transfer } from '@/client/components/layout/desktop-layout/resizer/utils';
+import type { CSSProperties } from 'preact';
+import { clamp, toPx } from '@/client/components/layout/desktop-layout/resizer/utils';
+import { useSeparatorDrag } from '@/client/components/layout/desktop-layout/resizer/separator-drag';
 
 /**
  * Hand-rolled resizable panel group (the Preact-native replacement for
@@ -15,6 +16,10 @@ import { clamp, toPx, transfer } from '@/client/components/layout/desktop-layout
  * clamped by both neighbors' min/max constraints, and commits once per drag
  * through `onLayoutChanged(_, { isUserInteraction: true })`.
  *
+ * Sizes are pixels here. A caller that stores a width as a share of the group's
+ * area (see `panel-widths.ts`) resolves it to px before passing it in — the
+ * resizer has no percentage path and should not grow one.
+ *
  * The filler's `minSize` is a real CSS floor, which is what makes a shrinking
  * window push the resizable panels toward their own floors instead of
  * collapsing the filler to nothing (a zero flex basis absorbs no negative free
@@ -39,14 +44,9 @@ export interface PanelImperativeHandle {
   getSize: () => { inPixels: number } | null;
 }
 
-export interface GroupImperativeHandle {
-  /** Batch resize of the named panels, in pixels. */
-  setLayout: (layout: Record<string, number>) => void;
-}
-
 export type LayoutChangedHandler = (layout: Record<string, number>, meta: LayoutMeta) => void;
 
-interface PanelState {
+export interface PanelState {
   id: string;
   isFiller: boolean;
   minSize: number;
@@ -69,7 +69,8 @@ const GroupContext = createContext<GroupContextValue | null>(null);
 export function Group(props: {
   orientation: GroupOrientation;
   id?: string;
-  groupRef?: RefObject<GroupImperativeHandle | null>;
+  /** The group's own element, for measuring the area its panels share. */
+  groupRef?: RefObject<HTMLDivElement>;
   onLayoutChanged?: LayoutChangedHandler;
   className?: string;
   children: ComponentChildren;
@@ -86,35 +87,10 @@ export function Group(props: {
     [orientation],
   );
 
-  const snapshot = () => {
-    const layout: Record<string, number> = {};
-    for (const [pid, state] of panelsRef.current) {
-      const px = state.getSize();
-      if (px != null) layout[pid] = px;
-    }
-    return layout;
-  };
-
-  useEffect(() => {
-    if (!groupRef) return;
-    groupRef.current = {
-      setLayout: (layout) => {
-        for (const [pid, px] of Object.entries(layout)) {
-          const state = panelsRef.current.get(pid);
-          if (!state || state.isFiller || typeof px !== 'number') continue;
-          state.setSize(clamp(px, state.minSize, state.maxSize));
-        }
-        changedRef.current?.(snapshot(), { isUserInteraction: false });
-      },
-    };
-    return () => {
-      groupRef.current = null;
-    };
-  }, [groupRef]);
-
   return (
     <GroupContext.Provider value={ctx}>
       <div
+        ref={groupRef}
         data-panel-group=""
         data-panel-group-id={id}
         className={className}
@@ -133,14 +109,19 @@ export function Panel(props: {
   defaultSize?: number | string;
   minSize?: number | string;
   maxSize?: number | string;
-  collapsible?: boolean;
+  /**
+   * Render at zero width without unmounting. The panel keeps its size state, so
+   * reopening restores the remembered width and the width transition animates
+   * the movement instead of the content popping in.
+   */
+  collapsed?: boolean;
   /** This panel absorbs the remaining space instead of holding its own px. */
   filler?: boolean;
   className?: string;
   style?: CSSProperties;
   children: ComponentChildren;
 }) {
-  const { id, panelRef, defaultSize, minSize = 0, maxSize, filler = false, className, style, children } = props;
+  const { id, panelRef, defaultSize, minSize = 0, maxSize, collapsed = false, filler = false, className, style, children } = props;
   const group = useContext(GroupContext);
   if (!group) {
     throw new Error(`<Panel id="${id}"> must be rendered inside a <Group>`);
@@ -184,6 +165,21 @@ export function Panel(props: {
     }
   });
 
+  // Adopt a changed `defaultSize`. This is what restores a panel after its
+  // owner swaps it — a right-panel view switch, an editor source↔diff switch —
+  // and after a resize recomputes it, without an imperative push from the
+  // owner. A drag does not fight it: the owner only produces a new
+  // `defaultSize` once the drag commits, and that value is the size the drag
+  // already applied.
+  const lastDefaultPxRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (filler || defaultSize == null) return;
+    const nextPx = toPx(defaultSize, minPx);
+    if (lastDefaultPxRef.current === nextPx) return;
+    lastDefaultPxRef.current = nextPx;
+    setSizePx(clamp(nextPx, minPx, maxPx));
+  }, [defaultSize, filler, minPx, maxPx]);
+
   useEffect(() => {
     if (!panelRef) return;
     panelRef.current = {
@@ -212,17 +208,29 @@ export function Panel(props: {
       }
     : {
         flex: '0 1 auto',
-        width: orientation === 'horizontal' ? sizePx ?? undefined : undefined,
-        height: orientation === 'horizontal' ? undefined : sizePx ?? undefined,
-        minWidth: orientation === 'horizontal' ? minPx : undefined,
-        minHeight: orientation === 'horizontal' ? undefined : minPx,
+        width: orientation === 'horizontal' ? (collapsed ? 0 : sizePx ?? undefined) : undefined,
+        height: orientation === 'horizontal' ? undefined : collapsed ? 0 : sizePx ?? undefined,
+        minWidth: orientation === 'horizontal' ? (collapsed ? 0 : minPx) : undefined,
+        minHeight: orientation === 'horizontal' ? undefined : collapsed ? 0 : minPx,
         maxWidth: maxSize != null ? maxPx : undefined,
+        // A drag re-applies the real width at most every RESIZE_FOLLOW_INTERVAL_MS
+        // (see useSeparatorDrag), and this transition is what makes those steps
+        // read as one movement. It also carries a panel to its remembered width
+        // on a view switch, and to zero on collapse, instead of snapping.
+        transition: `${orientation === 'horizontal' ? 'width' : 'height'} 200ms cubic-bezier(0.22, 1, 0.36, 1)`,
         overflow: 'hidden',
         position: 'relative',
       };
 
   return (
-    <div ref={elementRef} data-panel="" data-panel-id={id} className={className} style={{ ...baseStyle, ...style }}>
+    <div
+      ref={elementRef}
+      data-panel=""
+      data-panel-id={id}
+      data-panel-collapsed={collapsed ? '' : undefined}
+      className={className}
+      style={{ ...baseStyle, ...style }}
+    >
       {children}
     </div>
   );
@@ -240,88 +248,26 @@ export function Panel(props: {
 export function Separator(props: { className?: string; style?: CSSProperties; children?: ComponentChildren }) {
   const { className, style, children } = props;
   const group = useContext(GroupContext);
-  const [dragging, setDragging] = useState(false);
   const hostRef = useRef<HTMLDivElement | null>(null);
-  const dragCleanupRef = useRef<(() => void) | null>(null);
-
-  // A drag owns two window listeners; if the separator unmounts mid-drag (a
-  // layout switch) nothing else would ever remove them.
-  useEffect(() => () => dragCleanupRef.current?.(), []);
 
   if (!group) {
     throw new Error('<Separator> must be rendered inside a <Group>');
   }
   const { orientation, panels, onLayoutChanged } = group;
-
-  const handlePointerDown = (e: TargetedPointerEvent<HTMLDivElement>) => {
-    const host = hostRef.current;
-    if (!host || e.button !== 0) return;
-    const previous = host.previousElementSibling as HTMLElement | null;
-    const next = host.nextElementSibling as HTMLElement | null;
-    const aId = previous?.getAttribute('data-panel-id');
-    const bId = next?.getAttribute('data-panel-id');
-    const a = aId ? panels.current.get(aId) : undefined;
-    const b = bId ? panels.current.get(bId) : undefined;
-    if (!a || !b || !previous || !next) return;
-
-    e.preventDefault();
-    setDragging(true);
-
-    const startPos = orientation === 'horizontal' ? e.clientX : e.clientY;
-    const measure = (el: HTMLElement) =>
-      orientation === 'horizontal' ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
-    // Measure, never ask the panel: a window narrow enough for flexbox to
-    // shrink a panel below its specified width would otherwise start the drag
-    // from a size the panel does not have on screen.
-    const aStart = measure(previous);
-    const bStart = measure(next);
-
-    const onMove = (ev: PointerEvent) => {
-      const pos = orientation === 'horizontal' ? ev.clientX : ev.clientY;
-      const delta = transfer(
-        { size: aStart, min: a.minSize, max: a.maxSize },
-        { size: bStart, min: b.minSize, max: b.maxSize },
-        pos - startPos,
-      );
-      a.setSize(clamp(aStart + delta, a.minSize, a.maxSize));
-      if (!b.isFiller) b.setSize(clamp(bStart - delta, b.minSize, b.maxSize));
-    };
-
-    const cleanup = () => {
-      window.removeEventListener('pointermove', onMove);
-      window.removeEventListener('pointerup', onUp);
-      window.removeEventListener('pointercancel', onUp);
-      dragCleanupRef.current = null;
-      setDragging(false);
-      const layout: Record<string, number> = {};
-      for (const [pid, state] of panels.current) {
-        const px = state.getSize();
-        if (px != null) layout[pid] = px;
-      }
-      onLayoutChanged.current?.(layout, { isUserInteraction: true });
-    };
-    const onUp = () => cleanup();
-
-    window.addEventListener('pointermove', onMove);
-    window.addEventListener('pointerup', onUp);
-    window.addEventListener('pointercancel', onUp);
-    dragCleanupRef.current = cleanup;
-  };
+  const { dragging, guidePx, onPointerDown } = useSeparatorDrag(hostRef, orientation, panels, onLayoutChanged);
 
   return (
-    <>
-      <div
-        ref={hostRef}
-        data-separator=""
-        role="separator"
-        aria-orientation={orientation === 'horizontal' ? 'vertical' : 'horizontal'}
-        className={className}
-        style={style}
-        onPointerDown={handlePointerDown}
-        onDragStart={(e: DragEvent) => e.preventDefault()}
-      >
-        {children}
-      </div>
+    <div
+      ref={hostRef}
+      data-separator=""
+      role="separator"
+      aria-orientation={orientation === 'horizontal' ? 'vertical' : 'horizontal'}
+      className={className}
+      style={style}
+      onPointerDown={onPointerDown}
+      onDragStart={(e: DragEvent) => e.preventDefault()}
+    >
+      {children}
       {dragging && (
         <div
           style={{
@@ -332,6 +278,21 @@ export function Separator(props: { className?: string; style?: CSSProperties; ch
           } as CSSProperties}
         />
       )}
-    </>
+      {guidePx !== null && (
+        <div
+          aria-hidden="true"
+          style={{
+            position: 'fixed',
+            ...(orientation === 'horizontal'
+              ? { left: `${guidePx}px`, top: 0, bottom: 0, width: '1px' }
+              : { top: `${guidePx}px`, left: 0, right: 0, height: '1px' }),
+            zIndex: 9998,
+            pointerEvents: 'none',
+            background: 'var(--theme-ink)',
+            opacity: 0.35,
+          } as CSSProperties}
+        />
+      )}
+    </div>
   );
-}
+}

package/src/client/components/layout/desktop-layout/resizer/separator-drag.ts

@@ -0,0 +1,140 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import type { RefObject } from 'preact';
+import type { TargetedPointerEvent } from 'preact';
+import { clamp, transfer } from '@/client/components/layout/desktop-layout/resizer/utils';
+import { RESIZE_FOLLOW_INTERVAL_MS } from '@/shared/lib/workspace/panel-widths';
+import type { GroupOrientation, LayoutChangedHandler, PanelState } from '@/client/components/layout/desktop-layout/resizer';
+
+export interface SeparatorDrag {
+  /** A drag is in flight; the caller renders the pointer-capture blocker. */
+  dragging: boolean;
+  /** Pointer position of the guide line, or null when not dragging. */
+  guidePx: number | null;
+  onPointerDown: (event: TargetedPointerEvent<HTMLDivElement>) => void;
+}
+
+/**
+ * The deferred drag behind a separator.
+ *
+ * A ghost guide line follows the pointer, and the real width is re-applied at
+ * most every `RESIZE_FOLLOW_INTERVAL_MS`. Applying it on every pointermove
+ * re-renders both panels per frame and reflows whatever they contain — an xterm
+ * buffer, a CodeMirror document, a browser iframe — for a width the user is
+ * still choosing. The panel's own width transition smooths the steps that land.
+ *
+ * Kept out of `index.tsx` so the components stay inside the repo's file-size
+ * ceiling.
+ */
+export function useSeparatorDrag(
+  hostRef: RefObject<HTMLDivElement | null>,
+  orientation: GroupOrientation,
+  panels: { current: Map<string, PanelState> },
+  onLayoutChanged: { current: LayoutChangedHandler | null },
+): SeparatorDrag {
+  const [dragging, setDragging] = useState(false);
+  // State, not a ref: the guide line has to move with the pointer even though
+  // the panels deliberately do not.
+  const [guidePx, setGuidePx] = useState<number | null>(null);
+  const cleanupRef = useRef<(() => void) | null>(null);
+
+  // A drag owns two window listeners; if the separator unmounts mid-drag (a
+  // layout switch) nothing else would ever remove them.
+  useEffect(() => () => cleanupRef.current?.(), []);
+
+  const onPointerDown = (e: TargetedPointerEvent<HTMLDivElement>) => {
+    const host = hostRef.current;
+    if (!host || e.button !== 0) return;
+    // Walk past separators and collapsed panels to the real neighbours. A
+    // collapsed panel keeps its DOM node (so its state survives and the width
+    // transition has something to animate), but it is zero-width and its own
+    // floor still reads as 320 in the registry — pairing a drag against it
+    // would clamp every delta to zero and kill the separator.
+    const neighbour = (start: Element | null, step: 'previous' | 'next') => {
+      let node = start;
+      while (node) {
+        if (node.hasAttribute('data-separator') || node.hasAttribute('data-panel-collapsed')) {
+          node = step === 'previous' ? node.previousElementSibling : node.nextElementSibling;
+          continue;
+        }
+        return node instanceof HTMLElement && node.hasAttribute('data-panel') ? node : null;
+      }
+      return null;
+    };
+
+    const previous = neighbour(host.previousElementSibling, 'previous');
+    const next = neighbour(host.nextElementSibling, 'next');
+    const a = previous ? panels.current.get(previous.getAttribute('data-panel-id') ?? '') : undefined;
+    const b = next ? panels.current.get(next.getAttribute('data-panel-id') ?? '') : undefined;
+    if (!a || !b || !previous || !next) return;
+
+    e.preventDefault();
+    setDragging(true);
+
+    const horizontal = orientation === 'horizontal';
+    const startPos = horizontal ? e.clientX : e.clientY;
+    const measure = (el: HTMLElement) =>
+      horizontal ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
+    // Measure, never ask the panel: a window narrow enough for flexbox to
+    // shrink a panel below its specified width would otherwise start the drag
+    // from a size the panel does not have on screen.
+    const aStart = measure(previous);
+    const bStart = measure(next);
+
+    // The size the throttle last committed, kept apart from the guide line so
+    // every step that lands is a legal clamped size.
+    let pending: { a: number; b: number } | null = null;
+    let followTimer: ReturnType<typeof setTimeout> | undefined;
+
+    const apply = (sizes: { a: number; b: number }) => {
+      a.setSize(sizes.a);
+      if (!b.isFiller) b.setSize(sizes.b);
+    };
+
+    const onMove = (ev: PointerEvent) => {
+      const pos = horizontal ? ev.clientX : ev.clientY;
+      const delta = transfer(
+        { size: aStart, min: a.minSize, max: a.maxSize },
+        { size: bStart, min: b.minSize, max: b.maxSize },
+        pos - startPos,
+      );
+      pending = {
+        a: clamp(aStart + delta, a.minSize, a.maxSize),
+        b: clamp(bStart - delta, b.minSize, b.maxSize),
+      };
+      setGuidePx(pos);
+      if (followTimer === undefined) {
+        followTimer = setTimeout(() => {
+          followTimer = undefined;
+          if (pending) apply(pending);
+        }, RESIZE_FOLLOW_INTERVAL_MS);
+      }
+    };
+
+    const onUp = () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+      clearTimeout(followTimer);
+      cleanupRef.current = null;
+      setDragging(false);
+      setGuidePx(null);
+      // Land the exact final size once, so the release position is the one the
+      // guide line showed rather than the last throttled step.
+      if (pending) apply(pending);
+
+      const layout: Record<string, number> = {};
+      for (const [pid, state] of panels.current) {
+        const px = state.getSize();
+        if (px != null) layout[pid] = px;
+      }
+      onLayoutChanged.current?.(layout, { isUserInteraction: true });
+    };
+
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+    cleanupRef.current = onUp;
+  };
+
+  return { dragging, guidePx, onPointerDown };
+}

package/src/client/components/layout/session-sidebar/Header.tsx

@@ -5,7 +5,7 @@ export function SessionSidebarHeader({ onNewSession }: { onNewSession: () => voi
     <>
       {/* App Title */}
       <div 
-        className="h-12 flex-shrink-0 flex items-center px-4 border-b border-ink/10 titlebar-drag-region select-none"
+        className="h-14 flex-shrink-0 flex items-center px-4 border-b border-ink/10 titlebar-drag-region select-none"
         style={{ paddingLeft: 'max(1rem, env(titlebar-area-x, 0px))' }}
       >
         <span className="font-bold text-sm tracking-tight flex items-center">