ompchamber 0.5.0 → 0.7.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/chat/omp/index.ts

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import type { ChatMessageData, OmpAgentCallbacks, OmpAgentHandle, OmpAgentState, StreamTransport } from '@/shared/types';
 import type { ExtensionUiDialogRequest } from '@/shared/types/omp/agent';
-import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
 import { type ToolResultRecord, useOmpAgentStream } from '@/client/hooks/chat/omp/stream';
+import { useOmpPromptSender } from '@/client/hooks/chat/omp/prompt-send';
 import { stopAgentSession } from '@/shared/lib/chat/omp/abort';
 
 /**
@@ -98,114 +98,9 @@ export function useOmpAgent(sessionId: string | null, callbacks: OmpAgentCallbac
     };
   }, [sessionId, disconnect, connect]);
 
-  /** Send a prompt to the omp session via the RPC bridge. */
-  const sendPrompt = useCallback(async (
-    message: string,
-    images?: { data: string; mimeType: string }[],
-    options?: { accessMode?: ApprovalMode },
-  ) => {
-    const sid = sessionIdRef.current;
-    if (!sid) return false;
-    setState((prev) => ({ ...prev, isGenerating: true, error: null }));
-    try {
-      // Mirror omp-web handleSend: warm the session process up with get_state
-      // (spawns it on first use), then attach the event stream before sending
-      // the prompt so no agent events are missed.
-      const warmup = await fetch(`/api/agent/${encodeURIComponent(sid)}`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        // The mode rides the warmup too: this is the request that lazily spawns
-        // an idle session, and omp only accepts --approval-mode at spawn time.
-        body: JSON.stringify({
-          type: 'get_state',
-          ...(options?.accessMode ? { accessMode: options.accessMode } : {}),
-        }),
-      });
-      if (warmup.ok) connect(sid);
-
-      const res = await fetch(`/api/agent/${encodeURIComponent(sid)}`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          type: 'prompt',
-          message,
-          ...(images?.length ? { images } : {}),
-          ...(options?.accessMode ? { accessMode: options.accessMode } : {}),
-        }),
-      });
-      const body = (await res.json().catch(() => ({}))) as { success?: boolean; error?: string };
-      if (!res.ok || body.error) {
-        // `session_busy`: the ack timed out behind a still-running turn, so the
-        // prompt may already be accepted — never resend it automatically.
-        setState((prev) => ({ ...prev, isGenerating: false, error: body.error ?? `HTTP ${res.status}` }));
-        return false;
-      }
-      return true;
-    } catch (e) {
-      setState((prev) => ({ ...prev, isGenerating: false, error: e instanceof Error ? e.message : String(e) }));
-      return false;
-    }
-  }, [connect]);
-
-  /** Spawn a brand-new omp session and send the first prompt: ensure_session
-   *  first (returns omp's real session id), attach the event stream, then send
-   *  the prompt through the existing session route so no agent events are
-   *  missed. Model/thinking picks ride the ensure_session body so omp applies
-   *  them BEFORE the first prompt (and their JSONL change entries are written
-   *  up front, not after the run starts). Returns the new session id on
-   *  success, or null on failure — the caller adopts the id as the active
-   *  session. */
-  const sendNewPrompt = useCallback(async (
-    message: string,
-    cwd: string,
-    images?: { data: string; mimeType: string }[],
-    composerOptions?: { model?: { provider: string; modelId: string } | null; thinkingLevel?: string | null; accessMode?: ApprovalMode },
-  ): Promise<{ sessionId: string; model: { provider: string; modelId: string } | null } | null> => {
-    setState((prev) => ({ ...prev, isGenerating: true, error: null }));
-    try {
-      const created = await fetch('/api/agent/new', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          type: 'ensure_session',
-          cwd,
-          ...(composerOptions?.model ? composerOptions.model : {}),
-          ...(composerOptions?.thinkingLevel ? { thinkingLevel: composerOptions.thinkingLevel } : {}),
-          ...(composerOptions?.accessMode ? { accessMode: composerOptions.accessMode } : {}),
-        }),
-      });
-      const createdBody = (await created.json().catch(() => ({}))) as {
-        success?: boolean;
-        sessionId?: string;
-        model?: { provider: string; modelId: string } | null;
-        error?: string;
-      };
-      if (!created.ok || !createdBody.sessionId) {
-        setState((prev) => ({ ...prev, isGenerating: false, error: createdBody.error ?? `HTTP ${created.status}` }));
-        return null;
-      }
-      const sid = createdBody.sessionId;
-      connect(sid);
-      const res = await fetch(`/api/agent/${encodeURIComponent(sid)}`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          type: 'prompt',
-          message,
-          ...(images?.length ? { images } : {}),
-        }),
-      });
-      const body = (await res.json().catch(() => ({}))) as { success?: boolean; error?: string };
-      if (!res.ok || body.error) {
-        setState((prev) => ({ ...prev, isGenerating: false, error: body.error ?? `HTTP ${res.status}` }));
-        return null;
-      }
-      return { sessionId: sid, model: createdBody.model ?? null };
-    } catch (e) {
-      setState((prev) => ({ ...prev, isGenerating: false, error: e instanceof Error ? e.message : String(e) }));
-      return null;
-    }
-  }, [connect]);
+  // Prompt delivery (warm-up + stream attach + the dispatch-time sidebar
+  // signal) lives in its own module so this hook stays under the size ceiling.
+  const { sendPrompt, sendNewPrompt } = useOmpPromptSender({ sessionIdRef, connect, setState });
 
   /** Abort the running agent turn. */
   const abort = useCallback(async () => {