ompchamber 0.6.0 → 0.8.0

package/src/client/components/common/diagram-viewer/index.tsx

@@ -0,0 +1,258 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Full-screen viewer for a hydrated mermaid diagram.
+ *
+ * Opened by clicking a rendered diagram in the chat timeline (see
+ * `MarkdownRenderer`), which hands over the SVG snapshot it read from the
+ * inline block — the viewer never re-runs mermaid, so it shows exactly the
+ * pixels the message shows. Opens fitted to the viewport and never upscales
+ * past 100%: a small chart stays readable at its natural size.
+ *
+ * Interaction: wheel zooms around the cursor, drag pans, double-click toggles
+ * fit/100%, the footer bar is the pointer-free equivalent, and Esc closes.
+ */
+
+import type { ComponentChildren, CSSProperties, TargetedPointerEvent, TargetedWheelEvent } from 'preact';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { createPortal } from 'preact/compat';
+import { Maximize2, Minus, Plus, X } from 'lucide-preact';
+import type { DiagramSnapshot } from '@/client/components/common/diagram-viewer/read-block';
+
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 8;
+/** Viewport pixels kept clear around a fitted diagram (chrome + breathing room). */
+const FIT_MARGIN = 112;
+/** One button press / keyboard notch. */
+const ZOOM_STEP = 1.4;
+/** Wheel `deltaY` → scale exponent, so zooming feels the same on every device. */
+const WHEEL_SENSITIVITY = 0.0015;
+
+interface View {
+  scale: number;
+  /** Translation of the canvas centre from the stage centre, in stage px. */
+  x: number;
+  y: number;
+}
+
+interface Drag {
+  pointerId: number;
+  x: number;
+  y: number;
+}
+
+const clampScale = (scale: number) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale));
+
+/** Zoom `view` to `scale` keeping the screen point (`anchorX`,`anchorY`) under
+ *  the cursor, which is what makes wheel-zoom feel anchored rather than
+ *  centre-locked. The canvas grows from its centre, so the anchor is converted
+ *  to a centre-relative point before solving. */
+function zoomTo(view: View, scale: number, anchorX: number, anchorY: number, stage: DOMRect | undefined): View {
+  const next = clampScale(scale);
+  if (next === view.scale) return view;
+  const px = stage ? anchorX - (stage.left + stage.width / 2) : 0;
+  const py = stage ? anchorY - (stage.top + stage.height / 2) : 0;
+  const k = next / view.scale;
+  return { scale: next, x: px - (px - view.x) * k, y: py - (py - view.y) * k };
+}
+
+export interface DiagramViewerProps extends DiagramSnapshot {
+  onClose: () => void;
+}
+
+export function DiagramViewer({ svg, width, height, onClose }: DiagramViewerProps) {
+  const stageRef = useRef<HTMLDivElement>(null);
+  const dragRef = useRef<Drag | null>(null);
+  const [view, setView] = useState<View>({ scale: 1, x: 0, y: 0 });
+  const [fitScale, setFitScale] = useState(1);
+  const [dragging, setDragging] = useState(false);
+
+  /** Scale that fits the whole diagram in the stage without upscaling it. */
+  const measureFit = useCallback(() => {
+    const stage = stageRef.current?.getBoundingClientRect();
+    if (!stage) return 1;
+    return clampScale(
+      Math.min(1, (stage.width - FIT_MARGIN) / width, (stage.height - FIT_MARGIN) / height),
+    );
+  }, [width, height]);
+
+  const fitToView = useCallback(() => {
+    const scale = measureFit();
+    setFitScale(scale);
+    setView({ scale, x: 0, y: 0 });
+  }, [measureFit]);
+
+  // Fit once per diagram size: re-measuring on every render would fight an
+  // in-progress zoom, and only a size change (a re-render under a new theme
+  // that produced a differently sized SVG) invalidates the current fit.
+  useLayoutEffect(() => {
+    fitToView();
+  }, [fitToView]);
+
+  // Modal focus: the stage owns the keyboard so the shortcuts below (and Esc)
+  // never land in the composer still focused behind the overlay, and closing
+  // hands focus back to whoever had it.
+  useEffect(() => {
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+    stageRef.current?.focus();
+    return () => previouslyFocused?.focus();
+  }, []);
+
+  const zoomBy = useCallback((factor: number, anchorX?: number, anchorY?: number) => {
+    setView((current) => {
+      const stage = stageRef.current?.getBoundingClientRect();
+      const x = anchorX ?? (stage ? stage.left + stage.width / 2 : 0);
+      const y = anchorY ?? (stage ? stage.top + stage.height / 2 : 0);
+      return zoomTo(current, current.scale * factor, x, y, stage);
+    });
+  }, []);
+
+  const handleWheel = useCallback(
+    (event: TargetedWheelEvent<HTMLDivElement>) => {
+      // Without this the timeline behind the overlay scrolls while zooming.
+      event.preventDefault();
+      zoomBy(Math.exp(-event.deltaY * WHEEL_SENSITIVITY), event.clientX, event.clientY);
+    },
+    [zoomBy],
+  );
+
+  const handlePointerDown = useCallback((event: TargetedPointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0) return;
+    dragRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+  }, []);
+
+  const handlePointerMove = useCallback((event: TargetedPointerEvent<HTMLDivElement>) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const dx = event.clientX - drag.x;
+    const dy = event.clientY - drag.y;
+    drag.x = event.clientX;
+    drag.y = event.clientY;
+    setView((current) => ({ ...current, x: current.x + dx, y: current.y + dy }));
+  }, []);
+
+  const endDrag = useCallback((event: TargetedPointerEvent<HTMLDivElement>) => {
+    if (dragRef.current?.pointerId !== event.pointerId) return;
+    dragRef.current = null;
+    setDragging(false);
+  }, []);
+
+  const handleDoubleClick = useCallback(() => {
+    setView((current) => (Math.abs(current.scale - 1) < 0.01 ? { scale: fitScale, x: 0, y: 0 } : { scale: 1, x: 0, y: 0 }));
+  }, [fitScale]);
+
+  useEffect(() => {
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        onClose();
+        return;
+      }
+      if (event.key === '+' || event.key === '=') {
+        event.preventDefault();
+        zoomBy(ZOOM_STEP);
+        return;
+      }
+      if (event.key === '-' || event.key === '_') {
+        event.preventDefault();
+        zoomBy(1 / ZOOM_STEP);
+        return;
+      }
+      if (event.key === '0') {
+        event.preventDefault();
+        fitToView();
+      }
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onClose, zoomBy, fitToView]);
+
+  // The overlay is the only scroller-free surface on screen; leaving `body`
+  // scrollable lets a wheel outside the stage scroll the timeline behind it.
+  useEffect(() => {
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, []);
+
+  const canvasStyle: CSSProperties = {
+    width: `${width}px`,
+    height: `${height}px`,
+    transform: `translate3d(${view.x}px, ${view.y}px, 0) scale(${view.scale})`,
+  };
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[200] bg-ink/85 backdrop-blur-sm"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Diagram viewer"
+      onWheel={handleWheel}
+    >
+      <div
+        ref={stageRef}
+        tabIndex={-1}
+        className={`diagram-viewer-stage absolute inset-0 overflow-hidden outline-none ${dragging ? 'cursor-grabbing' : 'cursor-grab'}`}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={endDrag}
+        onPointerCancel={endDrag}
+        onDblClick={handleDoubleClick}
+      >
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="diagram-viewer-canvas" style={canvasStyle} dangerouslySetInnerHTML={{ __html: svg }} />
+        </div>
+      </div>
+
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 flex justify-center pb-4">
+        <div className="pointer-events-auto flex items-center gap-0.5 rounded-full border border-canvas/15 bg-paper/10 px-1.5 py-1 text-canvas backdrop-blur-sm">
+          <ViewerButton label="Zoom out (-)" onClick={() => zoomBy(1 / ZOOM_STEP)}>
+            <Minus size={14} />
+          </ViewerButton>
+          <span className="w-12 text-center font-mono text-[11px] tabular-nums text-canvas/80">
+            {Math.round(view.scale * 100)}%
+          </span>
+          <ViewerButton label="Zoom in (+)" onClick={() => zoomBy(ZOOM_STEP)}>
+            <Plus size={14} />
+          </ViewerButton>
+          <ViewerButton label="Fit to view (0)" onClick={fitToView}>
+            <Maximize2 size={14} />
+          </ViewerButton>
+          <ViewerButton label="Close (Esc)" onClick={onClose}>
+            <X size={14} />
+          </ViewerButton>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+function ViewerButton({
+  label,
+  onClick,
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  children: ComponentChildren;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={label}
+      aria-label={label}
+      className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-full text-canvas/80 transition-colors hover:bg-canvas/10 hover:text-canvas"
+    >
+      {children}
+    </button>
+  );
+}

package/src/client/components/common/diagram-viewer/read-block.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Read a hydrated `.mermaid-block` (see `@/shared/lib/markdown/mermaid`) back
+ * out as a self-contained snapshot: the sanitized SVG markup plus the natural
+ * pixel size mermaid gave it. Markup + size is all the viewer needs, so it
+ * renders its own copy of the diagram instead of moving the timeline node — the
+ * inline block keeps its theme, its copy button, and its place in the layout.
+ */
+
+export interface DiagramSnapshot {
+  /** Sanitized `<svg …>` markup, exactly as the inline block renders it. */
+  svg: string;
+  /** Natural diagram width in px (the transform's 100% reference). */
+  width: number;
+  /** Natural diagram height in px. */
+  height: number;
+}
+
+/** `null` while the block is pending/rendering/failed — it has no direct SVG
+ *  child until `mermaid.ts` has swapped one in. */
+export function readDiagramBlock(block: HTMLElement): DiagramSnapshot | null {
+  const svg = block.querySelector<SVGSVGElement>(':scope > svg');
+  if (!svg) return null;
+  return { svg: svg.outerHTML, ...measure(svg) };
+}
+
+/**
+ * Mermaid writes numeric px `width`/`height` attributes (the app configures
+ * `useMaxWidth: false`), but a `viewBox`-only diagram is valid SVG too, and a
+ * detached SVG reports a 0×0 border box — hence the fallback chain.
+ */
+function measure(svg: SVGSVGElement): { width: number; height: number } {
+  const box = svg.viewBox?.baseVal;
+  const rendered = svg.getBoundingClientRect();
+  return {
+    width: positive(svg.getAttribute('width'), box?.width, rendered.width),
+    height: positive(svg.getAttribute('height'), box?.height, rendered.height),
+  };
+}
+
+/** First candidate that resolves to a usable positive number; 1 otherwise, so
+ *  callers can never divide by a zero-sized diagram. */
+function positive(...candidates: (string | number | null | undefined)[]): number {
+  for (const candidate of candidates) {
+    const value = typeof candidate === 'number' ? candidate : Number.parseFloat(candidate ?? '');
+    if (Number.isFinite(value) && value > 0) return value;
+  }
+  return 1;
+}

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

@@ -224,6 +224,7 @@ export function Category({
                   isActive={isActive && !isViewingSubagent}
                   isArchived={session.is_archived === 1}
                   status={sessionStatus[sessionKey]}
+                  awaitingInput={Boolean(session.awaitingInput)}
                   onClick={() => onSelectSession(session.id)}
                   onArchive={() => handleArchive(session)}
                   onRename={String(session.id).startsWith('new-') ? undefined : (name) => void handleRename(session, name)}

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

@@ -1,5 +1,5 @@
 import type { TargetedMouseEvent } from 'preact';
-import { Archive, ArchiveRestore, Check, ChevronDown, ChevronRight, Loader2, Pencil } from 'lucide-preact';
+import { Archive, ArchiveRestore, Check, ChevronDown, ChevronRight, CircleQuestionMark, Loader2, Pencil } from 'lucide-preact';
 import { useInlineRename } from '@/client/hooks/ui/inline-rename';
 
 export interface SessionItemProps {
@@ -7,6 +7,8 @@ export interface SessionItemProps {
   isActive?: boolean;
   isArchived?: boolean;
   status?: 'stream' | 'finish' | 'abort' | 'error';
+  /** The session's agent is blocked on a question until the user answers it. */
+  awaitingInput?: boolean;
   onClick?: () => void;
   onArchive?: () => void;
   onRename?: (name: string) => void;
@@ -21,6 +23,7 @@ export function SessionItem({
   isActive = false,
   isArchived = false,
   status,
+  awaitingInput = false,
   onClick,
   onArchive,
   onRename,
@@ -73,13 +76,17 @@ export function SessionItem({
             {isExpanded ? <ChevronDown size={13} className="text-ink/70" /> : <ChevronRight size={13} />}
           </button>
         )}
-        {status && !(showChevron && isExpanded) && (
+        {(awaitingInput || status) && !(showChevron && isExpanded) && (
           <span
             className={`absolute inset-0 flex items-center justify-center text-ink/60 transition-opacity ${
               showChevron ? 'group-hover/item:opacity-0 peer-focus-visible:opacity-0' : ''
             }`}
           >
-            {status === 'stream' ? (
+            {/* Waiting on an answer outranks the run spinner: the spinner says
+                work is happening, the question mark says it is YOUR turn. */}
+            {awaitingInput ? (
+              <CircleQuestionMark size={12} className="animate-pulse text-ink/80" />
+            ) : status === 'stream' ? (
               <Loader2 size={12} className="animate-spin" />
             ) : (
               <Check size={12} />

package/src/client/components/settings/LazyModal.tsx

@@ -24,7 +24,7 @@
  * the stale bootstrap payload.
  *
  * `fallback={null}` matches the other lazy dialog boundary
- * (`tool-renderers/ask-dialog/Lazy.tsx`): the modal is a full-screen overlay
+ * (`tool-renderers/extension-dialog/Lazy.tsx`): the modal is a full-screen overlay
  * that appears on user intent, so a brief absence reads as the click landing
  * rather than as a broken surface.
  */

package/src/client/components/settings/Modal.tsx

@@ -3,6 +3,7 @@ import { Check, ChevronLeft, X } from 'lucide-preact';
 import type { SettingsCategoryId, SettingsState } from '@/shared/types';
 import { mergeChamberSettings } from '@/shared/lib/settings/client';
 import { useChamberSettingsWriter } from '@/client/hooks/settings/use-chamber-setting';
+import { applyDocumentTheme } from '@/client/hooks/ui/theme';
 import { useChamberEvent } from '@/client/hooks/ui/window-event';
 import { SETTINGS_CATEGORIES, SettingsSidebar } from '@/client/components/settings/Sidebar';
 import { AppearanceSettings } from '@/client/components/settings/categories/AppearanceSettings';
@@ -100,7 +101,7 @@ export function SettingsModal({
     setSettings(prev => {
       const next = typeof updater === 'function' ? updater(prev) : { ...prev, ...updater };
       if (typeof document !== 'undefined' && next.theme) {
-        document.documentElement.dataset.theme = next.theme;
+        applyDocumentTheme(next.theme);
       }
       writeChamberSettings(next);
       return next;

package/src/client/components/workspace/chat-timeline/ToolCallCard.tsx

@@ -13,6 +13,7 @@ import { FallbackOutput } from '@/client/components/workspace/chat-timeline/tool
 import { tryParseJson } from '@/shared/lib/code/syntax-highlight';
 import { JsonCodeBlock } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/JsonCodeBlock';
 import { getTodoSummary } from '@/shared/lib/chat/todo-parser';
+import { parseAskQuestions } from '@/shared/lib/chat/ask-questions';
 
 interface ToolCallCardProps {
   tool: ToolCallData;
@@ -199,6 +200,12 @@ export const ToolCallCard = memo(function ToolCallCard({ tool, isOpen, onToggle,
         .join(' · ');
       displaySubtitle = cleaned || sub;
     }
+  } else if (toolKey === 'ask') {
+    // The question itself is the card's body; the header says how many were
+    // asked, matching the summary the same card shows once they are answered.
+    displayTitle = 'Question';
+    const asked = parseAskQuestions(tool).length;
+    if (asked > 0) displaySubtitle = `Asked ${asked} question${asked === 1 ? '' : 's'}`;
   } else if (mcpToolNameOf(tool)) {
     // MCP call: `write xd://mcp__<tool>` (or a direct `mcp__<tool>` name) —
     // the MCP tool names the action, never the transport `write`.
@@ -258,7 +265,7 @@ export const ToolCallCard = memo(function ToolCallCard({ tool, isOpen, onToggle,
       isOpen={isOpen}
       onToggle={onToggle ? handleToggle : undefined}
       defaultExpanded={defaultExpanded}
-      alwaysExpanded={toolKey === 'yield' && hasPanel}
+      alwaysExpanded={hasPanel && (toolKey === 'yield' || toolKey === 'ask')}
     >
       <ToolDetailsPanel tool={tool} />
 

package/src/client/components/workspace/chat-timeline/chat-input/index.tsx

@@ -7,6 +7,7 @@ import { ComposerTextarea } from '@/client/components/common/ComposerTextarea';
 import { AttachmentToolbar } from '@/client/components/workspace/chat-timeline/chat-input/AttachmentToolbar';
 import { selectableThinkingLevels } from '@/shared/lib/models/thinking-levels';
 import { fetchModelsData, subscribeModelsUpdated } from '@/shared/lib/models/client';
+import { resolveThinkingLevel, selectionFor } from '@/client/components/workspace/chat-timeline/chat-input/selection';
 
 export function ChatInput({ 
   value, 
@@ -96,21 +97,11 @@ export function ChatInput({
   const sessionModelRef = useRef<{ provider: string; modelId: string } | null>(sessionModel ?? null);
   sessionModelRef.current = sessionModel ?? null;
 
-  // Preserve the session's last-used thinking level when applying a model
-  // picked from the catalog: the session level is authoritative and an async
-  // fetch resolving later must not reset it to the ladder default.
-  const resolveSessionLevel = (ladder: readonly string[] | undefined, fallback: string): string => {
-    const sessionLevel = sessionThinkingLevelRef.current;
-    if (!sessionLevel) return fallback;
-    const selectable = selectableThinkingLevels(ladder ?? []);
-    return selectable.length === 0 || selectable.includes(sessionLevel) ? sessionLevel : fallback;
-  };
-
   // Adopt the active session's last-used model as the selected model. The
-  // thinking level must fall back to the CURRENT one, never the ladder
-  // default: this effect re-runs right after a spawn (sessionModel changes
-  // while the session's own thinking_level_change entry is not written yet),
-  // and an `off` fallback here is the "thinking resets to off on send" bug.
+  // thinking level must fall back to the CURRENT one, never the ladder default:
+  // this effect re-runs right after a spawn (sessionModel changes while the
+  // session's own thinking_level_change entry is not readable yet), and any
+  // concrete fallback here claims a level the run never used.
   useEffect(() => {
     if (!sessionModel?.provider || !sessionModel.modelId) return;
     let active = true;
@@ -121,14 +112,7 @@ export function ChatInput({
           (m) => m.id === sessionModel.modelId && m.provider === sessionModel.provider
         );
         if (match) {
-          setSelectedModel(prev => ({
-            id: match.id,
-            name: match.name,
-            provider: match.provider,
-            contextWindow: match.contextWindow,
-            thinkingLevels: match.thinkingLevels,
-            thinkingLevel: resolveSessionLevel(match.thinkingLevels, prev?.thinkingLevel ?? match.thinkingLevels?.[0] ?? 'off'),
-          }));
+          setSelectedModel(prev => selectionFor(match, sessionThinkingLevelRef.current, prev));
         }
       })
       .catch(() => {});
@@ -143,14 +127,7 @@ export function ChatInput({
     if (!sessionThinkingLevel) return;
     setSelectedModel(prev => {
       if (!prev) return prev;
-      const selectable = selectableThinkingLevels(prev.thinkingLevels ?? []);
-      // The session level is authoritative (omp recorded it for this model).
-      // Only reject it when the ladder is KNOWN and explicitly excludes it;
-      // an empty ladder (catalog not resolved / model exposes none) must not
-      // fall back to 'off' and erase the session's actual level.
-      const level = selectable.length === 0 || selectable.includes(sessionThinkingLevel)
-        ? sessionThinkingLevel
-        : prev.thinkingLevel;
+      const level = resolveThinkingLevel(prev.thinkingLevels, sessionThinkingLevel, prev.thinkingLevel);
       return level === prev.thinkingLevel ? prev : { ...prev, thinkingLevel: level };
     });
   }, [sessionThinkingLevel]);
@@ -169,13 +146,7 @@ export function ChatInput({
           if (sm?.provider && sm.modelId) {
             const match = data.modelList.find((m: ModelEntry) => m.id === sm.modelId && m.provider === sm.provider);
             if (match) {
-              setSelectedModel(prev => ({
-                id: match.id,
-                name: match.name,
-                provider: match.provider,
-                thinkingLevels: match.thinkingLevels,
-                thinkingLevel: resolveSessionLevel(match.thinkingLevels, prev?.thinkingLevel ?? match.thinkingLevels?.[0] ?? 'off'),
-              }));
+              setSelectedModel(prev => selectionFor(match, sessionThinkingLevelRef.current, prev));
             }
             return;
           }
@@ -184,13 +155,7 @@ export function ChatInput({
           if (persisted?.provider && persisted.id) {
             const match = data.modelList.find((m: ModelEntry) => m.id === persisted.id && m.provider === persisted.provider);
             if (match) {
-              setSelectedModel(prev => ({
-                id: match.id,
-                name: match.name,
-                provider: match.provider,
-                thinkingLevels: match.thinkingLevels,
-                thinkingLevel: resolveSessionLevel(match.thinkingLevels, prev?.thinkingLevel ?? match.thinkingLevels?.[0] ?? 'off'),
-              }));
+              setSelectedModel(prev => selectionFor(match, sessionThinkingLevelRef.current, prev));
               return;
             }
           }
@@ -199,20 +164,14 @@ export function ChatInput({
           if (defaultModel) {
             const match = data.modelList.find((m: ModelEntry) => m.id === defaultModel.modelId && m.provider === defaultModel.provider);
             if (match) {
-              setSelectedModel(prev => ({
-                id: match.id,
-                name: match.name,
-                provider: match.provider,
-                thinkingLevels: match.thinkingLevels,
-                thinkingLevel: resolveSessionLevel(match.thinkingLevels, prev?.thinkingLevel ?? match.thinkingLevels?.[0] ?? 'off'),
-              }));
+              setSelectedModel(prev => selectionFor(match, sessionThinkingLevelRef.current, prev));
             }
           }
         } else if (data.selectedModel) {
           const selected = data.selectedModel;
           setSelectedModel(prev => ({
             ...selected,
-            thinkingLevel: resolveSessionLevel(selected.thinkingLevels, prev?.thinkingLevel ?? selected.thinkingLevel ?? 'off'),
+            thinkingLevel: resolveThinkingLevel(selected.thinkingLevels, sessionThinkingLevelRef.current, prev?.thinkingLevel ?? selected.thinkingLevel),
           }));
         }
       } catch {}

package/src/client/components/workspace/chat-timeline/chat-input/selection.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Catalog → composer mapping for the model/thinking pickers: one definition of
+ * how a catalog entry becomes the selected model, and of which thinking level
+ * that selection is allowed to claim. Shared by every resolution site in
+ * ChatInput so the level rule cannot drift between them.
+ */
+
+import type { AIModelOption, ModelEntry } from '@/shared/types';
+import { selectableThinkingLevels } from '@/shared/lib/models/thinking-levels';
+
+/**
+ * Level reported while none is known. A catalog ladder's first entry is NOT a
+ * fact about the session — every model's ladder starts at `off` — and the send
+ * path pushes any non-`auto` value onto the live session (queue replay), so an
+ * unresolved level must stay indistinguishable from "leave omp alone".
+ */
+export const UNKNOWN_THINKING_LEVEL = 'auto';
+
+/**
+ * Level the composer may select for a model. The session's last-used level is
+ * authoritative whenever the model offers it — an async fetch resolving later
+ * must not reset it to a ladder default. Only a ladder that is KNOWN and
+ * excludes the session level rejects it; an empty ladder (catalog not resolved
+ * / model exposes none) must not erase the session's actual level. With no
+ * session level to go on, the current selection is kept, and a composer that
+ * has none yet reports {@link UNKNOWN_THINKING_LEVEL}.
+ */
+export function resolveThinkingLevel(
+  ladder: readonly string[] | null | undefined,
+  sessionLevel: string | null | undefined,
+  currentLevel: string | null | undefined,
+): string {
+  const selectable = selectableThinkingLevels(ladder ?? []);
+  if (sessionLevel && (selectable.length === 0 || selectable.includes(sessionLevel))) return sessionLevel;
+  return currentLevel ?? UNKNOWN_THINKING_LEVEL;
+}
+
+/** The composer's selection for a catalog model, carrying its thinking level. */
+export function selectionFor(
+  match: ModelEntry,
+  sessionLevel: string | null | undefined,
+  current: AIModelOption | null,
+): AIModelOption {
+  return {
+    id: match.id,
+    name: match.name,
+    provider: match.provider,
+    contextWindow: match.contextWindow,
+    thinkingLevels: match.thinkingLevels,
+    thinkingLevel: resolveThinkingLevel(match.thinkingLevels, sessionLevel, current?.thinkingLevel),
+  };
+}