ompchamber 0.7.0 → 0.8.0

package/src/client/components/common/code-surface/index.tsx

@@ -1,13 +1,30 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
 import type { CSSProperties } from 'preact';
+
 import { CodeEditor } from '@/client/components/common/code-editor';
-import { measureWrappedLines, type WrappedLines } from '@/client/components/common/code-surface/measure';
-import { highlightCode } from '@/shared/lib/code/syntax-highlight';
+import { measureRowHeight, measureWrappedLines, type WrappedLines } from '@/client/components/common/code-surface/measure';
+import { useCodeWindow } from '@/client/hooks/editor/use-code-window';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import {
+  measuredGeometry,
+  shouldWindow,
+  uniformGeometry,
+  type LineGeometry,
+  type LineWindow,
+} from '@/shared/lib/code/lazy-window';
+import { highlightCode } from '@/shared/lib/code/syntax-highlight';
+import { highlightCodeWindow } from '@/shared/lib/code/windowed-highlight';
 
 const WRAP_ON = '!whitespace-pre-wrap !break-words';
 const WRAP_OFF = '!whitespace-pre !break-normal';
 
+/** Line count without materializing every line — a 20 000-line value per render is a megabyte of strings. */
+function countLines(text: string): number {
+  let count = 1;
+  for (let index = text.indexOf('\n'); index !== -1; index = text.indexOf('\n', index + 1)) count++;
+  return count;
+}
+
 interface CodeSurfaceProps {
   value: string;
   onValueChange: (value: string) => void;
@@ -47,6 +64,12 @@ function sameWrappedLines(previous: WrappedLines | null, next: WrappedLines | nu
  * The gutter spaces its numbers from the editor's measured wrap layout: with
  * word wrap on, a long line covers several rows and every number below it has
  * to move down by the same amount.
+ *
+ * A long document is drawn lazily: only the lines inside the scroll container's
+ * viewport are highlighted and numbered, and the space of everything else is
+ * reserved from the same geometry the caret is aligned to. That keeps opening a
+ * 20 000-line file from spending minutes in the tokenizer, and a keystroke in it
+ * from re-tokenizing the file at all.
  */
 export function CodeSurface({
   value,
@@ -64,16 +87,29 @@ export function CodeSurface({
 }: CodeSurfaceProps) {
   const wrapClass = wordWrap ? WRAP_ON : WRAP_OFF;
   const preRef = useRef<HTMLPreElement | null>(null);
+  const rootRef = useRef<HTMLDivElement | null>(null);
   const [wrapped, setWrapped] = useState<WrappedLines | null>(null);
+  const [rowHeight, setRowHeight] = useState<number | null>(null);
+  /** Lines the last measurement pass described; -1 before the first one runs. */
+  const [measuredLines, setMeasuredLines] = useState(-1);
   useSyntaxReady();
 
+  const lineCount = useMemo(() => countLines(value), [value]);
+
   // Re-measured on the inputs that move a wrap point: the text, the wrap
   // preference, and the editor's font size / padding.
   const measure = useCallback(() => {
     const pre = preRef.current;
-    const next = wordWrap && pre ? measureWrappedLines(pre, value) : null;
+    if (!pre) return;
+    // Wrapped heights are only needed with word wrap on; without it every line
+    // is one row and the row height alone describes the document.
+    const next = wordWrap ? measureWrappedLines(pre, value) : null;
     setWrapped((previous) => (sameWrappedLines(previous, next) ? previous : next));
-  }, [value, wordWrap, editorPadding, editorStyle?.fontSize]);
+    const height = next?.rowHeight ?? measureRowHeight(pre);
+    setRowHeight((previous) => (previous === height ? previous : height));
+    setMeasuredLines(lineCount);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, lineCount, wordWrap, editorPadding, editorStyle?.fontSize]);
 
   useLayoutEffect(() => {
     measure();
@@ -92,16 +128,52 @@ export function CodeSurface({
     return () => observer.disconnect();
   }, []);
 
+  const geometry = useMemo<LineGeometry | null>(() => {
+    if (rowHeight === null) return null;
+    return wrapped
+      ? measuredGeometry(wrapped.heights, wrapped.rowHeight, lineCount)
+      : uniformGeometry(rowHeight, lineCount);
+  }, [rowHeight, wrapped, lineCount]);
+
+  // Windowing costs a scroll listener and a spacer; a document short enough to
+  // draw in one pass keeps the plain surface.
+  const lazy = shouldWindow(lineCount, value.length);
+  const virtual = useCodeWindow({
+    rootRef,
+    lineCount,
+    geometry,
+    // A document whose geometry could not be measured still falls back to the
+    // plain surface — but one whose measurement has not run *yet* must not:
+    // that path would draw the whole file, which is what windowing exists to
+    // avoid. `measuredLines` is why switching files (which leaves a geometry
+    // for the previous document behind) does not take it either.
+    enabled: lazy && (measuredLines !== lineCount || geometry !== null),
+  });
+
+  const highlight = useCallback(
+    (code: string, range: LineWindow | null) =>
+      range ? highlightCodeWindow(code, language, range) : highlightCode(code, language),
+    [language],
+  );
+
+  const firstLine = virtual ? virtual.start : 0;
+  const lastLine = virtual ? Math.min(virtual.end, lineCount) : lineCount;
+  const rows: number[] = [];
+  for (let i = firstLine; i < lastLine; i++) rows.push(i);
+  // Row heights are only usable for the document they were measured against.
+  const lineHeights = wrapped && wrapped.heights.length === lineCount ? wrapped.heights : null;
+
   return (
-    <div className={rootClassName}>
+    <div className={rootClassName} ref={rootRef}>
       <div className={gutterClassName} style={gutterStyle}>
-        {value.split('\n').map((_, i) => (
+        {virtual && virtual.top > 0 ? <div style={{ height: virtual.top, flexShrink: 0 }} aria-hidden="true" /> : null}
+        {rows.map((index) => (
           <div
-            key={i + 1}
+            key={index + 1}
             className={gutterLineClassName}
-            style={wrapped ? { height: wrapped.heights[i], flexShrink: 0 } : undefined}
+            style={lineHeights ? { height: lineHeights[index], flexShrink: 0 } : undefined}
           >
-            {i + 1}
+            {index + 1}
           </div>
         ))}
       </div>
@@ -109,13 +181,14 @@ export function CodeSurface({
         <CodeEditor
           value={value}
           onValueChange={onValueChange}
-          highlight={(code) => highlightCode(code, language)}
+          highlight={highlight}
           padding={editorPadding}
           preRef={preRef}
           textareaClassName={`focus:outline-none ${wrapClass}`}
           preClassName={wrapClass}
           style={editorStyle}
           className={editorClassName}
+          virtual={virtual}
         />
       </div>
     </div>

package/src/client/components/common/code-surface/measure.ts

@@ -8,6 +8,11 @@
  * width the editor actually got — so it is measured rather than estimated: the
  * same lines are laid out once in a hidden mirror that copies the editor's
  * typography, and each line's height is read back.
+ *
+ * Measuring every line on every keystroke is linear in the document, which no
+ * long file can afford, so heights are cached per line *text*: an edit re-reads
+ * the one line it touched, and a document whose lines all fit on one row is
+ * never mirrored at all.
  */
 
 /**
@@ -34,6 +39,13 @@ const MIRRORED_PROPERTIES = [
   'wordSpacing',
 ] as const;
 
+/**
+ * Newest-first ceiling on the height cache. A long editing session mints one
+ * entry per keystroke, so the oldest entries are dropped once it is reached;
+ * whatever leaves the cache is simply measured again on the next pass.
+ */
+const HEIGHT_CACHE_LIMIT = 100_000;
+
 export interface WrappedLines {
   /** Height in px of a single visual row. */
   rowHeight: number;
@@ -43,6 +55,11 @@ export interface WrappedLines {
 
 let mirrorHost: HTMLDivElement | null = null;
 let mirrorLines: HTMLDivElement[] = [];
+/** The column the cached heights were measured in; a new one re-wraps every line. */
+let mirrorSignature = '';
+const heightByLine = new Map<string, number>();
+/** Line indexes awaiting a mirror read this pass; reused to keep the pass allocation-free. */
+const pendingLines: number[] = [];
 
 /** Off-screen mirror, reused across measurements (one per page). */
 function getMirrorHost(): HTMLDivElement {
@@ -57,16 +74,22 @@ function getMirrorHost(): HTMLDivElement {
   return mirrorHost;
 }
 
+/** Height in px of `source`'s line box, or null while it cannot be measured (SSR, `line-height: normal`). */
+export function measureRowHeight(source: HTMLPreElement): number | null {
+  if (typeof document === 'undefined' || !source.isConnected) return null;
+  const rowHeight = Number.parseFloat(getComputedStyle(source).lineHeight);
+  return Number.isFinite(rowHeight) && rowHeight > 0 ? rowHeight : null;
+}
+
 /**
  * Height each line of `value` occupies in `source`'s wrap layout, or null when
  * the layout is not measurable yet (SSR, zero width, unresolved line-height) —
  * callers then fall back to one row per line.
  */
 export function measureWrappedLines(source: HTMLPreElement, value: string): WrappedLines | null {
-  if (typeof document === 'undefined' || !source.isConnected) return null;
+  const rowHeight = measureRowHeight(source);
+  if (rowHeight === null) return null;
   const computed = getComputedStyle(source);
-  const rowHeight = Number.parseFloat(computed.lineHeight);
-  if (!Number.isFinite(rowHeight) || rowHeight <= 0) return null;
   // The editor's text column: its padding is the gutter's offset, not text area.
   const width =
     source.clientWidth -
@@ -79,21 +102,47 @@ export function measureWrappedLines(source: HTMLPreElement, value: string): Wrap
   host.style.lineHeight = `${rowHeight}px`;
   host.style.width = `${width}px`;
 
+  const signature = `${width}|${rowHeight}|${MIRRORED_PROPERTIES.map((property) => computed[property]).join('|')}`;
+  if (signature !== mirrorSignature) {
+    mirrorSignature = signature;
+    heightByLine.clear();
+  }
+
   const lines = value.split('\n');
-  while (mirrorLines.length > lines.length) mirrorLines.pop()?.remove();
-  while (mirrorLines.length < lines.length) {
-    const line = document.createElement('div');
-    host.appendChild(line);
-    mirrorLines.push(line);
+  const heights = new Array<number>(lines.length);
+  let pending = 0;
+  for (let i = 0; i < lines.length; i++) {
+    const cached = heightByLine.get(lines[i]);
+    if (cached === undefined) pendingLines[pending++] = i;
+    else heights[i] = cached;
   }
-  // Write the whole text first, then read the whole layout: interleaving the
-  // two would force a re-layout per line.
-  for (let i = 0; i < lines.length; i++) mirrorLines[i].textContent = lines[i];
-  const heights = mirrorLines.map((line) => {
-    const height = line.getBoundingClientRect().height;
-    // An empty line has no line box at all, and sub-pixel wrapping would
-    // otherwise leave the gutter fractions of a row out of step.
-    return height > rowHeight ? Math.round(height / rowHeight) * rowHeight : rowHeight;
-  });
+
+  if (pending > 0) {
+    while (mirrorLines.length < pending) {
+      const line = document.createElement('div');
+      host.appendChild(line);
+      mirrorLines.push(line);
+    }
+    // Write the whole batch first, then read the whole layout: interleaving the
+    // two would force a re-layout per line.
+    for (let k = 0; k < pending; k++) mirrorLines[k].textContent = lines[pendingLines[k]];
+    for (let k = 0; k < pending; k++) {
+      const index = pendingLines[k];
+      const height = mirrorLines[k].getBoundingClientRect().height;
+      // An empty line has no line box at all, and sub-pixel wrapping would
+      // otherwise leave the gutter fractions of a row out of step.
+      const rows = height > rowHeight ? Math.round(height / rowHeight) * rowHeight : rowHeight;
+      heights[index] = rows;
+      heightByLine.set(lines[index], rows);
+    }
+    if (heightByLine.size > HEIGHT_CACHE_LIMIT) {
+      let drop = heightByLine.size - HEIGHT_CACHE_LIMIT / 2;
+      for (const key of heightByLine.keys()) {
+        if (drop-- <= 0) break;
+        heightByLine.delete(key);
+      }
+    }
+  }
+
   return { rowHeight, heights };
 }

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;