ompchamber 0.4.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/components/workspace/file-explorer/TreeItem.tsx

@@ -5,12 +5,16 @@ import { useFetcher } from '@/client/lib/router/fetcher';
 import { FileIcon } from '@/client/components/common/file-icon';
 import { FileContextMenu, FileDeleteModal, FileHistoryModal, FileRenameModal } from '@/client/components/workspace/file-explorer/Modals';
 import { getGitStatusInfo, type FolderGitStatusInfo } from '@/shared/lib/fs/git-status';
+import { toAbsolutePath } from '@/shared/lib/fs/paths';
+import { copyToClipboard } from '@/client/hooks/ui/clipboard';
 import type { GitChange } from '@/shared/types/git';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
 
 interface FileTreeItemProps {
   file: any;
   rootPath?: string;
+  /** Absolute base dir of the listing (server-reported `root`), anchors Copy Path. */
+  basePath?: string;
   repo?: string;
   onLoadChildren?: (path: string) => Promise<void>;
   onOpenFile?: (file: any) => void;
@@ -24,6 +28,7 @@ interface FileTreeItemProps {
 export function FileTreeItem({
   file,
   rootPath,
+  basePath,
   repo,
   onLoadChildren,
   onOpenFile,
@@ -151,9 +156,9 @@ export function FileTreeItem({
       fd.append('path', file.path);
       submitAction(fd);
     } else if (actionType === 'copy_path') {
-      navigator.clipboard.writeText('/app/applet/examples/' + file.path);
+      void copyToClipboard(toAbsolutePath(basePath, file.path));
     } else if (actionType === 'copy_relative') {
-      navigator.clipboard.writeText(file.path);
+      void copyToClipboard(file.path);
     } else if (actionType === 'history') {
       setShowHistoryModal(true);
       const fd = new FormData();
@@ -236,6 +241,7 @@ export function FileTreeItem({
               key={child.id}
               file={child}
               rootPath={rootPath}
+              basePath={basePath}
               repo={repo}
               onLoadChildren={onLoadChildren}
               onOpenFile={onOpenFile}

package/src/client/components/workspace/file-explorer/index.tsx

@@ -10,6 +10,10 @@ import { usePanelRefresh, useFileMutationRefresh } from '@/client/hooks/workspac
 
 export function FileExplorer({ className = '', enabled = true, rootPath, onOpenFile, refreshKey = 0, onRefresh }: { className?: string, enabled?: boolean, rootPath?: string, onOpenFile?: (file: any) => void, refreshKey?: number, onRefresh?: () => void }) {
   const [tree, setTree] = useState<any[]>([]);
+  // Absolute base dir reported by `/api/fs/dir` for the current listing — the
+  // workspace root, or the selected nested repo. Copy Path anchors on it
+  // because the client's `rootPath` may be rejected/unset.
+  const [listingRoot, setListingRoot] = useState('');
   const [searchQuery, setSearchQuery] = useSessionState<string>('files.searchQuery', '');
   const [isLoading, setIsLoading] = useState(false);
   const [storedExpandedPaths, setStoredExpandedPaths, expandedPathsReady] = useSessionState<string[]>('files.expandedPaths', []);
@@ -43,6 +47,7 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
     fetch(listUrl())
       .then(r => r.json())
       .then(data => {
+        if (typeof data.root === 'string') setListingRoot(data.root);
         if (Array.isArray(data.files)) {
           setTree(rehydrateTree(data.files, childrenCacheRef.current, expandedPaths));
         }
@@ -176,6 +181,7 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
               key={file.id}
               file={file}
               rootPath={rootPath}
+              basePath={listingRoot}
               repo={activeRepo}
               onLoadChildren={loadChildren}
               onOpenFile={onOpenFile}

package/src/client/data/models/catalog.ts

@@ -1,5 +1,13 @@
 import type { AIModelOption } from '@/shared/types';
 
+/**
+ * MOCK-only demo catalog: the model rows a `MOCK=true` chamber shows before the
+ * operator adds any of their own.
+ *
+ * Real mode never reads this — `/api/models` there is fed by the live omp model
+ * registry, and its mutations start from an empty list — so a demo model can
+ * never leak into a real installation (see `routes/models/root.ts`).
+ */
 export const INITIAL_MODELS_CATALOG: AIModelOption[] = [
   // FAVORITES (As seen in image.png)
   {

package/src/client/data/samples/dialogue-session.ts

@@ -277,7 +277,7 @@ export function getSampleDialogueSession(): {
         id: '65e71033',
         role: 'ai',
         content:
-          'Repo summary from `RepoSummarizer`:\n\n**OMPChamber** — developer web-view console and diagnostic chamber for AI **Oh-My-Pi** autonomous agent.\n\n**Stack:** Remix v2 + React 19 + Vite, Tailwind CSS v4, TypeScript (strict, ES2022). Runs under npm or Bun.\n\n**Structure:**\n- `app/routes/` — Remix flat-routes, large REST-style `api/` domain tree\n- `app/components/` — common, layout, workspace, mobile, settings\n- `app/hooks/` — chat, terminal, git-tree, agent streaming\n- `app/lib/omp/` — bridges to oh-my-pi runtime (RPC managers, session readers)\n- `app/types/`, `app/data/` (mock presets)\n\n**Config:** `MOCK` mode toggles seeded demo data vs real data. SQLite persistence (`app/db.server.ts`).\n\n**Deployment-relevant:** PWA support, `@google/genai` assistant, xterm/KaTeX/Shiki rendering.',
+          'Repo summary from `RepoSummarizer`:\n\n**OMPChamber** — developer web-view console and diagnostic chamber for AI **Oh-My-Pi** autonomous agent.\n\n**Stack:** Remix v2 + React 19 + Vite, Tailwind CSS v4, TypeScript (strict, ES2022). Runs under npm or Bun.\n\n**Structure:**\n- `app/routes/` — Remix flat-routes, large REST-style `api/` domain tree\n- `app/components/` — common, layout, workspace, mobile, settings\n- `app/hooks/` — chat, terminal, git-tree, agent streaming\n- `app/lib/omp/` — bridges to oh-my-pi runtime (RPC managers, session readers)\n- `app/types/`, `app/data/` (mock presets)\n\n**Config:** `MOCK` mode toggles seeded demo data vs real data. SQLite persistence (`app/db.server.ts`).\n\n**Deployment-relevant:** PWA support, xterm/KaTeX/Shiki rendering.',
         date: 'Sep 9, 04:44 AM',
       },
     ],

package/src/client/data/samples/sample-tools/other.ts

@@ -88,7 +88,7 @@ export const otherTools: ToolCallData[] = [
     target: 'app/mock.server.ts',
     output: `1: export function isMockMode(): boolean {
 2:   const envVal = (Bun.env.MOCK || "").trim().toLowerCase();
-3:   return envVal !== "false" && envVal !== "0";
+3:   return envVal === "true" || envVal === "1" || envVal === "on" || envVal === "yes";
 4: }`,
     status: 'success',
     duration: '14ms',

package/src/client/hooks/chat/timeline/send.ts

@@ -311,7 +311,7 @@ export function useChatTimelineSend(deps: ChatTimelineSendDeps): ChatTimelineSen
       }
     }
 
-    // Mock / chamber-created session: existing Gemini/simulated SSE path.
+    // Mock / chamber-created session: existing simulated SSE path.
     // Cancel any previous stream
     optimisticUserIdRef.current = null;
     if (abortControllerRef.current) {