ompchamber 0.5.0 → 0.6.0

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

@@ -6,8 +6,8 @@ import { ChatTimeline } from '@/client/components/workspace/chat-timeline/index'
 import { getDesktopPanelView } from '@/client/components/common/lazy-panels';
 import { RightActivityBar } from '@/client/components/layout/RightActivityBar';
 import { ResizeHandle } from '@/client/components/layout/desktop-layout/ResizeHandle';
-import { DEFAULT_RIGHT_PANEL_WIDTHS, MAX_RIGHT_PANEL_WIDTH, MIN_RIGHT_PANEL_WIDTHS, type RightPanelType } from '@/shared/lib/workspace/right-panels';
-import { DEFAULT_PANEL_WIDTHS, type EditorWidthMode, type PanelWidths } from '@/shared/lib/workspace/panel-widths';
+import { DEFAULT_RIGHT_PANEL_WIDTHS, MAX_RIGHT_PANEL_WIDTH, MIN_RIGHT_PANEL_WIDTHS, RIGHT_PANEL_TYPES, type RightPanelType } from '@/shared/lib/workspace/right-panels';
+import { DEFAULT_PANEL_WIDTHS, MAX_EDITOR_PANEL_WIDTH, MIN_CHAT_PANEL_WIDTH, MIN_EDITOR_PANEL_WIDTH, type EditorWidthMode, type PanelWidths } from '@/shared/lib/workspace/panel-widths';
 
 const Editor = lazy(() => import('@/client/components/workspace/editor/index').then((m) => ({ default: m.Editor })));
 
@@ -82,8 +82,7 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
   // and no panel re-fetches its data just because the user looked away.
   const viewScope = useMemo(() => ({}), []);
   const rightViews = useMemo(
-    () => (['files', 'search', 'git', 'terminal', 'context', 'user-browser', 'browser', 'usage'] as const)
-      .map((view) => ({ view, Comp: getDesktopPanelView(viewScope, view) })),
+    () => RIGHT_PANEL_TYPES.map((view) => ({ view, Comp: getDesktopPanelView(viewScope, view) })),
     [viewScope],
   );
 
@@ -114,14 +113,14 @@ export function WorkspacePanels(props: WorkspacePanelsProps) {
           onPanelWidths(readPanelWidths());
         }}
       >
-        <Panel id="center-panel" filler minSize="540px">
+        <Panel id="center-panel" filler minSize={MIN_CHAT_PANEL_WIDTH}>
           <ChatTimeline className="w-full h-full" appSettings={appSettings} onSessionTitle={onSessionTitle} />
         </Panel>
 
         {showEditor && (
           <>
             <ResizeHandle />
-            <Panel panelRef={editorPanelRef} id="editor-panel" defaultSize={panelWidths[editorWidthMode] ?? DEFAULT_PANEL_WIDTHS[editorWidthMode]} minSize={300}>
+            <Panel panelRef={editorPanelRef} id="editor-panel" defaultSize={panelWidths[editorWidthMode] ?? DEFAULT_PANEL_WIDTHS[editorWidthMode]} minSize={MIN_EDITOR_PANEL_WIDTH} maxSize={MAX_EDITOR_PANEL_WIDTH}>
               <PanelSuspense>
                 <Editor
                   className="w-full h-full"

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

@@ -3,7 +3,7 @@ import { useCallback, useEffect, 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 { type RightPanelType } from '@/shared/lib/workspace/right-panels';
+import { DEFAULT_RIGHT_PANEL_WIDTHS, 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';
@@ -15,7 +15,7 @@ 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, type EditorWidthMode } from '@/shared/lib/workspace/panel-widths';
+import { DEFAULT_PANEL_WIDTHS, 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';
@@ -99,21 +99,23 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
   }, [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. The
-  // width the incoming view remembers must be pushed on imperatively; a
-  // toggle-on remount already derives from defaultSize, making this a no-op.
+  // 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]);
+      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 is re-applied here.
+  // 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]);
+      applyWidth(editorPanelRef, widthsRef.current?.[editorWidthMode] ?? DEFAULT_PANEL_WIDTHS[editorWidthMode]);
     });
     return () => cancelAnimationFrame(frame);
   }, [showEditor, editorWidthMode, widthsRef]);
@@ -215,7 +217,7 @@ export function DesktopLayout({ sessionId, onSwitchToMobile, appSettings = {} }:
         >
           {showLeftPanel && (
             <>
-              <Panel panelRef={leftPanelRef} id="left-panel" defaultSize={panelWidths.left ?? DEFAULT_PANEL_WIDTHS.left} minSize={200} maxSize={600} collapsible>
+              <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 />

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

@@ -2,18 +2,25 @@ import { createContext, useContext, useEffect, useMemo, useRef, useState } from
 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';
 
 /**
  * Hand-rolled resizable panel group (the Preact-native replacement for
  * react-resizable-panels in this app's two horizontal layouts).
  *
- * Model: every Panel is a flex child sized by `flex: 0 0 auto` plus a px
+ * Model: every Panel is a flex child sized by `flex: 0 1 auto` plus a px
  * width/height held in state; exactly one panel per group is the FILLER
  * (`filler` prop) and takes `flex: 1 1 0`, absorbing the remaining space. A
  * Separator drag transfers pixels between the two panels adjacent to it,
  * clamped by both neighbors' min/max constraints, and commits once per drag
  * through `onLayoutChanged(_, { isUserInteraction: true })`.
  *
+ * 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
+ * space). Once every panel sits at its floor the row is narrower than its
+ * container and the surplus is clipped — the layout has no panel to give up.
+ *
  * The imperative API mirrors what this app used from the old library:
  * `panelRef.resize(px)`, `panelRef.getSize() -> { inPixels }`, and the
  * group's `setLayout` as a batch px resize.
@@ -59,31 +66,6 @@ interface GroupContextValue {
 
 const GroupContext = createContext<GroupContextValue | null>(null);
 
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}
-
-function toPx(value: number | string | undefined, fallback: number): number {
-  if (typeof value === 'number') return value;
-  if (typeof value === 'string') return parseFloat(value) || fallback;
-  return fallback;
-}
-
-/**
- * Pixels transferred between the dragged pair. Positive delta moves the
- * separator right/down: A grows, B shrinks. The applied delta is clamped so
- * neither panel crosses its own min/max.
- */
-function transfer(
-  a: { size: number; min: number; max: number },
-  b: { size: number; min: number; max: number },
-  delta: number,
-): number {
-  const lower = Math.max(a.min - a.size, b.min - b.size);
-  const upper = Math.min(a.max - a.size, b.size - b.min);
-  return clamp(delta, lower, upper);
-}
-
 export function Group(props: {
   orientation: GroupOrientation;
   id?: string;
@@ -219,7 +201,15 @@ export function Panel(props: {
   }, [panelRef, minPx, maxPx]);
 
   const baseStyle: CSSProperties = filler
-    ? { flex: '1 1 0%', minWidth: 0, minHeight: 0, overflow: 'hidden', position: 'relative' }
+    ? {
+        flex: '1 1 0%',
+        // The filler keeps its floor on the group's axis (and none across it,
+        // where it is sized by the container): see the group model note above.
+        minWidth: orientation === 'horizontal' ? minPx : 0,
+        minHeight: orientation === 'horizontal' ? 0 : minPx,
+        overflow: 'hidden',
+        position: 'relative',
+      }
     : {
         flex: '0 1 auto',
         width: orientation === 'horizontal' ? sizePx ?? undefined : undefined,
@@ -280,8 +270,11 @@ export function Separator(props: { className?: string; style?: CSSProperties; ch
     const startPos = orientation === 'horizontal' ? e.clientX : e.clientY;
     const measure = (el: HTMLElement) =>
       orientation === 'horizontal' ? el.getBoundingClientRect().width : el.getBoundingClientRect().height;
-    const aStart = a.getSize() ?? measure(previous);
-    const bStart = b.getSize() ?? measure(next);
+    // 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;

package/src/client/components/layout/desktop-layout/resizer/utils.test.ts

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import { transfer } from '@/client/components/layout/desktop-layout/resizer/utils';
+
+describe('transfer', () => {
+  test('growing the leading panel stops at its own ceiling', () => {
+    expect(transfer({ size: 600, min: 300, max: 1200 }, { size: 1200, min: 320, max: 1200 }, 900)).toBe(600);
+  });
+
+  test('growing the leading panel stops at the trailing floor', () => {
+    expect(transfer({ size: 600, min: 300, max: 1200 }, { size: 268, min: 200, max: 1200 }, 900)).toBe(68);
+  });
+
+  test('shrinking the leading panel stops at its own floor', () => {
+    expect(transfer({ size: 420, min: 420, max: Number.MAX_SAFE_INTEGER }, { size: 300, min: 300, max: 1200 }, -500)).toBe(0);
+  });
+
+  test('a trailing panel parked on its floor still lets the leading one shrink', () => {
+    // The editor sat at its 300px floor, which used to clamp every negative
+    // delta to 0: the separator went dead and the layout could not be dragged
+    // back out of that state.
+    expect(transfer({ size: 1520, min: 420, max: Number.MAX_SAFE_INTEGER }, { size: 300, min: 300, max: 1200 }, -1600)).toBe(-900);
+  });
+
+  test('a delta inside both panels has room passes through', () => {
+    expect(transfer({ size: 600, min: 300, max: 1200 }, { size: 640, min: 320, max: 1200 }, -100)).toBe(-100);
+  });
+});

package/src/client/components/layout/desktop-layout/resizer/utils.ts

@@ -0,0 +1,34 @@
+/**
+ * Pure geometry for the resizable panel group: the clamping, the px parsing
+ * and the pixel transfer between a dragged pair. Kept out of `index.tsx` so
+ * the components stay inside the repo's file-size ceiling.
+ */
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function toPx(value: number | string | undefined, fallback: number): number {
+  if (typeof value === 'number') return value;
+  if (typeof value === 'string') return parseFloat(value) || fallback;
+  return fallback;
+}
+
+/**
+ * Pixels transferred between the dragged pair. Positive delta moves the
+ * separator right/down: A grows, B shrinks. The applied delta is clamped so
+ * neither panel crosses its own min/max.
+ *
+ * A shrinking is bounded by A's floor and B's *ceiling* — B is the panel that
+ * grows on that side. Bounding it by B's floor instead is what made a
+ * separator dead as soon as its neighbour sat at its minimum.
+ */
+export function transfer(
+  a: { size: number; min: number; max: number },
+  b: { size: number; min: number; max: number },
+  delta: number,
+): number {
+  const lower = Math.max(a.min - a.size, b.size - b.max);
+  const upper = Math.min(a.max - a.size, b.size - b.min);
+  return clamp(delta, lower, upper);
+}

package/src/client/components/mobile/RightSidebar.tsx

@@ -1,9 +1,11 @@
 import { useState } from 'preact/hooks';
 import { Suspense } from 'preact/compat';
+import type { ReactNode } from 'preact/compat';
 import { BarChart3, Bot, Files, GitBranch, Globe, Layers, Search, Terminal, X } from 'lucide-preact';
 import { LazyBrowserPanel, LazyContextPanel, LazyFileExplorer, LazyGitPanel, LazySearchPanel, LazyTerminalPanel, LazyUsagePanel, LazyUserBrowserPanel } from '@/client/components/common/lazy-panels';
 import { useGitStatus } from '@/client/hooks/workspace/git-status';
 import { GIT_STATUS_POLL_MS } from '@/shared/lib/workspace/refresh-cadence';
+import { RIGHT_PANEL_TYPES, type RightPanelType } from '@/shared/lib/workspace/right-panels';
 
 interface MobileRightSidebarProps {
   enabled?: boolean;
@@ -15,7 +17,21 @@ interface MobileRightSidebarProps {
   onClose: () => void;
 }
 
-type MobileTab = 'git' | 'files' | 'search' | 'context' | 'terminal' | 'user-browser' | 'browser' | 'usage';
+/**
+ * Wording per view: the title is the desktop activity bar's, the label is the
+ * short chip the phone shows beside the icon. The *order* is not restated here
+ * — it comes from RIGHT_PANEL_TYPES, so both layouts list the views the same way.
+ */
+const PANEL_META: Record<RightPanelType, { title: string; label: string; icon: ReactNode }> = {
+  context: { title: 'Context & Telemetry', label: 'Context', icon: <Layers size={14} className="flex-shrink-0" /> },
+  files: { title: 'Files Explorer', label: 'Files', icon: <Files size={14} className="flex-shrink-0" /> },
+  search: { title: 'Search Workspace', label: 'Search', icon: <Search size={14} className="flex-shrink-0" /> },
+  git: { title: 'GIT', label: 'GIT', icon: <GitBranch size={14} className="flex-shrink-0" /> },
+  terminal: { title: 'Bun Terminal', label: 'Terminal', icon: <Terminal size={14} className="flex-shrink-0" /> },
+  'user-browser': { title: 'Browser (Anda)', label: 'Browser', icon: <Globe size={14} className="flex-shrink-0" /> },
+  browser: { title: 'Browser Agent', label: 'Agent', icon: <Bot size={14} className="flex-shrink-0" /> },
+  usage: { title: 'Usage', label: 'Usage', icon: <BarChart3 size={14} className="flex-shrink-0" /> },
+};
 
 export function MobileRightSidebar({
   enabled = true,
@@ -25,7 +41,7 @@ export function MobileRightSidebar({
   onOpenFile,
   onClose
 }: MobileRightSidebarProps) {
-  const [activeTab, setActiveTab] = useState<MobileTab>('files');
+  const [activeTab, setActiveTab] = useState<RightPanelType>('files');
   // Same source the desktop activity bar uses, so the "uncommitted changes"
   // dot means the same thing on both layouts. Polls only while this drawer is
   // the mounted screen — the poll itself is visibility-gated by the hook.
@@ -47,123 +63,30 @@ export function MobileRightSidebar({
       >
 
         <div className="flex items-center space-x-1.5 overflow-x-auto no-scrollbar py-1">
-          <button
-            type="button"
-            onClick={() => setActiveTab('files')}
-            className={`flex items-center transition-all cursor-pointer ${
-              activeTab === 'files'
-                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
-                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
-            }`}
-            title="Files Explorer"
-          >
-            <Files size={14} className="flex-shrink-0" />
-            {activeTab === 'files' && <span>Files</span>}
-          </button>
-
-          <button
-            type="button"
-            onClick={() => setActiveTab('search')}
-            className={`flex items-center transition-all cursor-pointer ${
-              activeTab === 'search'
-                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
-                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
-            }`}
-            title="Search Workspace"
-          >
-            <Search size={14} className="flex-shrink-0" />
-            {activeTab === 'search' && <span>Search</span>}
-          </button>
-
-          <button
-            type="button"
-            onClick={() => setActiveTab('git')}
-            className={`relative flex items-center transition-all cursor-pointer ${
-              activeTab === 'git'
-                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
-                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
-            }`}
-            title="GIT"
-          >
-            <GitBranch size={14} className="flex-shrink-0" />
-            {activeTab === 'git' && <span className="tracking-wide">GIT</span>}
-            {hasGitChanges && (
-              <span
-                className="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-info"
-                title="Uncommitted changes"
-              />
-            )}
-          </button>
-
-          <button
-            type="button"
-            onClick={() => setActiveTab('context')}
-            className={`flex items-center transition-all cursor-pointer ${
-              activeTab === 'context'
-                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
-                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
-            }`}
-            title="Context & Telemetry"
-          >
-            <Layers size={14} className="flex-shrink-0" />
-            {activeTab === 'context' && <span>Context</span>}
-          </button>
-
-          <button
-            type="button"
-            onClick={() => setActiveTab('terminal')}
-            className={`flex items-center transition-all cursor-pointer ${
-              activeTab === 'terminal'
-                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
-                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
-            }`}
-            title="Bun Terminal"
-          >
-            <Terminal size={14} className="flex-shrink-0" />
-            {activeTab === 'terminal' && <span>Terminal</span>}
-          </button>
-
-          <button
-            type="button"
-            onClick={() => setActiveTab('user-browser')}
-            className={`flex items-center transition-all cursor-pointer ${
-              activeTab === 'user-browser'
-                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
-                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
-            }`}
-            title="Browser (Anda)"
-          >
-            <Globe size={14} className="flex-shrink-0" />
-            {activeTab === 'user-browser' && <span>Browser</span>}
-          </button>
-
-          <button
-            type="button"
-            onClick={() => setActiveTab('browser')}
-            className={`flex items-center transition-all cursor-pointer ${
-              activeTab === 'browser'
-                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
-                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
-            }`}
-            title="Browser Agent"
-          >
-            <Bot size={14} className="flex-shrink-0" />
-            {activeTab === 'browser' && <span>Agent</span>}
-          </button>
-
-          <button
-            type="button"
-            onClick={() => setActiveTab('usage')}
-            className={`flex items-center transition-all cursor-pointer ${
-              activeTab === 'usage'
-                ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
-                : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
-            }`}
-            title="Usage"
-          >
-            <BarChart3 size={14} className="flex-shrink-0" />
-            {activeTab === 'usage' && <span>Usage</span>}
-          </button>
+          {RIGHT_PANEL_TYPES.map((panel) => (
+            <button
+              key={panel}
+              type="button"
+              onClick={() => setActiveTab(panel)}
+              className={`relative flex items-center transition-all cursor-pointer ${
+                activeTab === panel
+                  ? 'space-x-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold bg-ink text-canvas shadow-sm'
+                  : 'p-2 rounded-lg text-ink/70 hover:bg-ink/5'
+              }`}
+              title={PANEL_META[panel].title}
+            >
+              {PANEL_META[panel].icon}
+              {activeTab === panel && (
+                <span className={panel === 'git' ? 'tracking-wide' : undefined}>{PANEL_META[panel].label}</span>
+              )}
+              {panel === 'git' && hasGitChanges && (
+                <span
+                  className="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-info"
+                  title="Uncommitted changes"
+                />
+              )}
+            </button>
+          ))}
         </div>
 
         <button

package/src/client/components/mobile/mobile-main-view/Header.tsx

@@ -152,8 +152,24 @@ export function MobileHeader({
             <ChevronDown size={13} className="text-ink/50 flex-shrink-0" />
           </button>
 
+          {/* Pinned to the viewport, not to the trigger: the trigger sits
+              ~155px from the left edge, so a 288px panel anchored at its
+              `left-0` ran off the right edge of a phone screen. Fixed with
+              both insets keeps it inside the safe area at any width. */}
           {showSessionPicker && (
-            <div className="absolute top-full left-0 mt-1.5 w-72 max-w-[calc(100vw-1.5rem)] bg-paper border border-ink/15 rounded-xl shadow-lg z-50 p-2 text-xs">
+            <div
+              className="fixed z-50 bg-paper border border-ink/15 rounded-xl shadow-lg p-2 text-xs"
+              style={{
+                top: 'calc(3.5rem + env(safe-area-inset-top, 0px) + 0.375rem)',
+                left: 'max(0.75rem, env(safe-area-inset-left, 0px))',
+                right: 'max(0.75rem, env(safe-area-inset-right, 0px))',
+                maxWidth: '18rem',
+                // A landscape phone is only ~390px tall; without this the list
+                // ran past the bottom edge the same way it ran past the right.
+                maxHeight: 'calc(100dvh - 3.5rem - env(safe-area-inset-top, 0px) - 1.125rem)',
+                overflowY: 'auto',
+              }}
+            >
               <button
                 type="button"
                 onClick={() => { onNewSession(); setShowSessionPicker(false); }}

package/src/client/components/workspace/editor/index.tsx

@@ -165,7 +165,10 @@ export function Editor({
                     fontFamily: '"Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace',
                   }}
                   gutterLineClassName="min-w-[1.5rem]"
-                  editorWrapperClassName="flex-1 min-w-max code-surface"
+                  // `min-w-max` keeps a long line intact and lets the panel
+                  // scroll sideways; while wrapping it would instead widen the
+                  // column past the panel, so the toggle had no effect at all.
+                  editorWrapperClassName={`flex-1 code-surface ${wordWrap ? 'min-w-0' : 'min-w-max'}`}
                   editorPadding={16}
                   editorClassName="font-mono focus:outline-none"
                   editorStyle={{

package/src/client/hooks/editor/use-file-editor.test.ts

@@ -0,0 +1,158 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * `useFileEditor` revalidation contract.
+ *
+ * A landed write bumps the workspace refreshKey, which calls `reset()`. Reset
+ * used to drop every cached buffer, so the very next render painted an empty
+ * editor — and because the read effect only re-runs on a key/identity change,
+ * the file never came back without a full page reload. The same window let a
+ * read response that was already in flight land on top of keystrokes typed
+ * after it was requested.
+ *
+ * These run against a real DOM (happy-dom) because the hook is a Preact hook
+ * driving fetches and effects: the modules below are imported inside
+ * `beforeAll`, after those globals exist, because Preact and the highlighter
+ * bind their environment at evaluation time.
+ */
+
+import { afterAll, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import type { h as PreactH, render as PreactRender } from 'preact';
+import type { act as PreactAct } from 'preact/test-utils';
+import type { UseFileEditorResult, useFileEditor as UseFileEditorHook } from '@/client/hooks/editor/use-file-editor';
+
+const DISK = 'const a = 1;\nconst b = 2;\n';
+/** Stable identity: the read effect re-runs when its target object changes. */
+const TARGET = { id: 1, name: 'a.js', path: 'a.js' };
+
+let useFileEditor: typeof UseFileEditorHook;
+let h: typeof PreactH;
+let render: typeof PreactRender;
+let act: typeof PreactAct;
+
+/** Latest render's result — re-read after every settle, never held across one. */
+let mounted: UseFileEditorResult | null = null;
+let container: HTMLElement;
+
+interface FsState {
+  reads: number;
+  writes: number;
+  body: string;
+}
+
+/** Serves `state.body` for reads and counts writes, without touching the network. */
+function stubFetch(state: FsState) {
+  globalThis.fetch = (async (input: string | URL | Request, init?: RequestInit) => {
+    if (String(input).startsWith('/api/fs/read')) {
+      state.reads += 1;
+      return { ok: true, json: async () => ({ content: state.body }) };
+    }
+    state.writes += 1;
+    state.body = String((init?.body as FormData).get('content'));
+    return { ok: true, json: async () => ({ success: true }) };
+  }) as unknown as typeof fetch;
+}
+
+/**
+ * Lets the stub's promise chain run and the render it queues land. The chain
+ * needs no timers (nothing I/O bound), and Preact's `act` only flushes queued
+ * renders on its boundary, so both get a pass.
+ */
+async function settleEditor() {
+  for (let i = 0; i < 20; i++) await Promise.resolve();
+  await act(async () => {
+    for (let i = 0; i < 20; i++) await Promise.resolve();
+  });
+}
+
+async function mountEditor() {
+  const Probe = () => {
+    mounted = useFileEditor(TARGET);
+    return null;
+  };
+  await act(async () => {
+    render(h(Probe, {}), container);
+  });
+  await settleEditor();
+}
+
+/** The DOM surface this file installs for the hook and Preact to render into. */
+function domGlobals(win: Window): Record<string, unknown> {
+  return {
+    window: win,
+    document: win.document,
+    navigator: win.navigator,
+    Node: win.Node,
+    Element: win.Element,
+    HTMLElement: win.HTMLElement,
+  };
+}
+
+const installed: Record<string, unknown> = {};
+const displaced: Record<string, unknown> = {};
+
+beforeAll(async () => {
+  const win = new Window({ url: 'http://localhost' });
+  for (const [key, value] of Object.entries(domGlobals(win))) {
+    displaced[key] = (globalThis as Record<string, unknown>)[key];
+    installed[key] = value;
+    (globalThis as Record<string, unknown>)[key] = value;
+  }
+  ({ useFileEditor } = await import('@/client/hooks/editor/use-file-editor'));
+  ({ h, render } = await import('preact'));
+  ({ act } = await import('preact/test-utils'));
+});
+
+// Every test file shares one process, so the globals go back the way they were:
+// code that branches on `typeof window` (the agent-event fold, for one) would
+// otherwise take its browser path for the rest of the run.
+afterAll(() => {
+  for (const key of Object.keys(installed)) {
+    if (displaced[key] === undefined) delete (globalThis as Record<string, unknown>)[key];
+    else (globalThis as Record<string, unknown>)[key] = displaced[key];
+  }
+});
+
+beforeEach(() => {
+  mounted = null;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+describe('useFileEditor revalidation', () => {
+  test('reset re-reads from disk without blanking the open file', async () => {
+    const state: FsState = { reads: 0, writes: 0, body: DISK };
+    stubFetch(state);
+    await mountEditor();
+    expect(mounted?.content).toBe(DISK);
+
+    // The refresh a landed write triggers, with newer bytes now on disk.
+    state.body = `${DISK}const c = 3;\n`;
+    await act(async () => {
+      mounted?.reset();
+    });
+    await settleEditor();
+
+    expect(state.reads).toBe(2);
+    expect(mounted?.content).toBe(state.body);
+  });
+
+  test('a read that lands mid-typing does not replace the buffer', async () => {
+    const state: FsState = { reads: 0, writes: 0, body: DISK };
+    stubFetch(state);
+    await mountEditor();
+
+    await act(async () => {
+      mounted?.onChange('edited by hand');
+      mounted?.reset();
+    });
+    await settleEditor();
+
+    expect(state.reads).toBe(2);
+    expect(mounted?.content).toBe('edited by hand');
+  });
+});