ompchamber 0.7.0 → 0.8.0

package/src/shared/lib/code/lazy-window.ts

@@ -0,0 +1,156 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Line geometry and windowing policy for the lazy editor surface.
+ *
+ * Shiki tokenization is linear in document size (≈0.14 ms per line), so a
+ * whole-file highlight costs ~0.8 s at 7 000 lines — and the editor pays it on
+ * every keystroke, on top of one gutter node and one wrapped-row measurement
+ * per line. A long document therefore renders only the lines the reader can
+ * actually see, and this module is the DOM-free half of that: px offsets per
+ * line, the viewport → line-range mapping, and the blank space the unrendered
+ * lines take up so the caret never leaves its row.
+ *
+ * The browser measurements this needs (row height, per-line wrapped heights)
+ * stay in the surface, which feeds them in as a `LineGeometry`.
+ */
+
+/** Documents at or below this size render whole — windowing them saves less than it costs. */
+export const WHOLE_DOCUMENT_MAX_LINES = 300;
+export const WHOLE_DOCUMENT_MAX_CHARS = 20_000;
+
+/** Lines kept beyond the viewport so a fast scroll cannot outrun the window. */
+export const WINDOW_OVERSCAN = 24;
+
+/** Lines rendered before the first measurement lands; the surface corrects this in a layout effect. */
+export const INITIAL_WINDOW_LINES = 200;
+
+/** Half-open line range `[start, end)`. */
+export interface LineWindow {
+  start: number;
+  end: number;
+}
+
+/** Blank space (px) the unrendered lines occupy above and below a window. */
+export interface WindowSpace {
+  top: number;
+  bottom: number;
+  /** The window reaches the document's last line, so it keeps the editor's trailing line break. */
+  breakAtEnd: boolean;
+}
+
+/** A windowed render request: the lines to draw plus the space the rest of the document takes. */
+export interface CodeWindow extends LineWindow, WindowSpace {}
+
+/** Per-line vertical layout of a document, in px. */
+export interface LineGeometry {
+  readonly lineCount: number;
+  /** Height (px) of a single visual row. */
+  readonly rowHeight: number;
+  /** Height (px) of every line together. */
+  readonly totalHeight: number;
+  /** Y offset (px) of the top edge of line `index`; `lineCount` is the document's end. */
+  offsetOf(index: number): number;
+  /** Index of the line covering `y`, clamped to the document. */
+  lineAt(y: number): number;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return value < min ? min : value > max ? max : value;
+}
+
+/** Whether a document is long enough that rendering all of it would be felt. */
+export function shouldWindow(lineCount: number, charCount: number): boolean {
+  return lineCount > WHOLE_DOCUMENT_MAX_LINES || charCount > WHOLE_DOCUMENT_MAX_CHARS;
+}
+
+/** Word wrap off: every line is exactly one row, so no measurement is involved. */
+export function uniformGeometry(rowHeight: number, lineCount: number): LineGeometry {
+  return {
+    lineCount,
+    rowHeight,
+    totalHeight: rowHeight * lineCount,
+    offsetOf: (index) => rowHeight * clamp(index, 0, lineCount),
+    lineAt: (y) => clamp(Math.floor(y / rowHeight), 0, Math.max(lineCount - 1, 0)),
+  };
+}
+
+/**
+ * Word wrap on: heights are the measured wrapped heights, one entry per line.
+ * Returns `null` when they do not describe every line, which leaves the caller
+ * on the whole-document path rather than spacing lines with a wrong geometry.
+ */
+export function measuredGeometry(heights: number[], rowHeight: number, lineCount: number): LineGeometry | null {
+  if (lineCount === 0 || heights.length !== lineCount) return null;
+  const offsets = new Float64Array(lineCount + 1);
+  for (let i = 0; i < lineCount; i++) offsets[i + 1] = offsets[i] + heights[i];
+  const total = offsets[lineCount];
+  return {
+    lineCount,
+    rowHeight,
+    totalHeight: total,
+    offsetOf: (index) => offsets[clamp(index, 0, lineCount)],
+    lineAt: (y) => {
+      if (y < 0) return 0;
+      if (total <= 0 || y >= total) return lineCount - 1;
+      // Last line whose top edge sits at or above `y`.
+      let low = 0;
+      let high = lineCount - 1;
+      while (low < high) {
+        const mid = (low + high + 1) >> 1;
+        if (offsets[mid] <= y) low = mid;
+        else high = mid - 1;
+      }
+      return low;
+    },
+  };
+}
+
+/** The lines a viewport band (`top`, `height`) covers, plus overscan on both sides. */
+export function resolveWindow(
+  geometry: LineGeometry,
+  top: number,
+  height: number,
+  overscan: number = WINDOW_OVERSCAN,
+): LineWindow {
+  const first = geometry.lineAt(top);
+  const last = geometry.lineAt(top + Math.max(height, 0));
+  return {
+    start: Math.max(0, first - overscan),
+    end: Math.min(geometry.lineCount, Math.max(last + 1, first + 1) + overscan),
+  };
+}
+
+/** What a freshly opened document renders before its viewport has been read. */
+export function firstWindow(lineCount: number): LineWindow {
+  return { start: 0, end: clamp(INITIAL_WINDOW_LINES, 1, Math.max(lineCount, 1)) };
+}
+
+/** Keep a window inside the document it belongs to (the state may predate a file switch). */
+export function clampWindow(window: LineWindow, lineCount: number): LineWindow {
+  const start = clamp(window.start, 0, Math.max(lineCount - 1, 0));
+  return { start, end: clamp(window.end, start + 1, Math.max(lineCount, 1)) };
+}
+
+export function sameWindow(a: LineWindow | null, b: LineWindow | null): boolean {
+  return a === b || (a !== null && b !== null && a.start === b.start && a.end === b.end);
+}
+
+/** Space the unrendered lines take around `window`, and whether it ends the document. */
+export function windowSpace(geometry: LineGeometry, window: LineWindow): WindowSpace {
+  const top = geometry.offsetOf(window.start);
+  return {
+    top,
+    bottom: Math.max(0, geometry.totalHeight - geometry.offsetOf(window.end)),
+    breakAtEnd: window.end >= geometry.lineCount,
+  };
+}
+
+/** Clamp a window to its document and resolve the space it leaves around itself. */
+export function codeWindow(geometry: LineGeometry, window: LineWindow): CodeWindow {
+  const clamped = clampWindow(window, geometry.lineCount);
+  return { ...clamped, ...windowSpace(geometry, clamped) };
+}

package/src/shared/lib/code/syntax-highlight.test.ts

@@ -6,7 +6,8 @@
 import { beforeAll, describe, expect, test } from 'bun:test';
 
 import { bootSyntax, onLanguageReady, requestLanguage } from '@/shared/lib/code/highlighter';
-import { getLanguageFromPath, highlightCode } from '@/shared/lib/code/syntax-highlight';
+import { getLanguageFromPath, highlightCode, highlightLines } from '@/shared/lib/code/syntax-highlight';
+import { highlightCodeWindow } from '@/shared/lib/code/windowed-highlight';
 
 /** Shiki emits `<span class="shiki">…` with dual-theme CSS variables per token. */
 const SHIKI_RE = /<span class="shiki">/;
@@ -112,6 +113,54 @@ describe('highlightCode', () => {
   });
 });
 
+describe('highlightCodeWindow', () => {
+  const source = Array.from({ length: 120 }, (_, index) =>
+    index === 0 ? 'export const first = 1;' : `export const value${index} = ${index}; // line ${index}`,
+  ).join('\n');
+
+  /** The wrapper the app's `.shiki span` colour rule depends on. */
+  const unwrap = (html: string) => html.replace(/^<span class="shiki">/, '').replace(/<\/span>$/, '');
+
+  test('wraps the window in the class the token colours are scoped to', () => {
+    const window = highlightCodeWindow(source, 'typescript', { start: 0, end: 3 });
+
+    // Without this class no `.shiki span` rule matches, so the tokens would
+    // render in the plain ink colour.
+    expect(window).toMatch(SHIKI_RE);
+    expect(window.endsWith('</span>')).toBe(true);
+  });
+
+  test('returns only the requested lines, joined as the editor renders them', () => {
+    const window = highlightCodeWindow(source, 'typescript', { start: 10, end: 13 });
+    const rows = highlightLines(source, 'typescript');
+
+    expect(unwrap(window).split('\n')).toEqual(rows.slice(10, 13));
+  });
+
+  test('keeps multi-line grammar state from the lines above the window', () => {
+    const commented = ['/*', ' * a block comment', ' * spanning several lines', ' */', 'const after = 1;'].join('\n');
+    const rows = highlightLines(commented, 'typescript');
+    // Line 2 sits inside the comment, whose opening line is outside the window.
+    const window = highlightCodeWindow(commented, 'typescript', { start: 2, end: 4 });
+
+    expect(unwrap(window).split('\n')).toEqual(rows.slice(2, 4));
+  });
+
+  test('renders an over-long line as plain text instead of tokenizing it', () => {
+    const minified = `const bundled = "${'x'.repeat(200)}";\nconst next = 1;`;
+    const window = highlightCodeWindow(minified, 'javascript', { start: 0, end: 2 }, { maxLineLength: 50 });
+
+    expect(window).toContain('const bundled');
+    expect(unwrap(window).split('\n')[0]).not.toContain('--shiki-light:');
+    expect(unwrap(window).split('\n')[1]).toContain('--shiki-light:');
+  });
+
+  test('returns nothing for a window outside the document', () => {
+    expect(highlightCodeWindow('const a = 1;', 'typescript', { start: 5, end: 9 })).toBe('');
+    expect(highlightCodeWindow('const a = 1;', 'typescript', { start: 0, end: 0 })).toBe('');
+  });
+});
+
 describe('getLanguageFromPath', () => {
   test.each([
     ['a.ts', 'typescript'],

package/src/shared/lib/code/syntax-highlight.ts

@@ -268,12 +268,24 @@ export function highlightJson(code: string): string {
   return highlightCode(code, 'json');
 }
 
+export interface HighlightLinesOptions {
+  /**
+   * Lines at or above this length are emitted as plain text instead of being
+   * tokenized — the guard a minified bundle (one line of hundreds of KB) needs.
+   */
+  maxLineLength?: number;
+}
+
 /**
  * Highlight code and return one HTML fragment per line, aligned 1:1 with
  * `code.split('\n')`. Tokenizes the whole input at once so multi-line grammar
  * state (block comments, template literals) survives, unlike per-line calls.
  */
-export function highlightLines(code: string, language = 'javascript'): string[] {
+export function highlightLines(
+  code: string,
+  language = 'javascript',
+  options: HighlightLinesOptions = {},
+): string[] {
   const rawLines = code.split('\n');
   if (!code) return rawLines;
   const hl = getHighlighterSync();
@@ -284,6 +296,7 @@ export function highlightLines(code: string, language = 'javascript'): string[]
       lang,
       themes: SHIKI_THEMES,
       defaultColor: false,
+      tokenizeMaxLineLength: options.maxLineLength ?? 0,
     });
     if (tokens.length !== rawLines.length) return rawLines.map(escapeCode);
     return tokens.map((lineTokens) =>

package/src/shared/lib/code/windowed-highlight.ts

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type { LineWindow } from '@/shared/lib/code/lazy-window';
+import { highlightLines } from '@/shared/lib/code/syntax-highlight';
+
+/**
+ * Lines tokenized *above* the window and dropped from the result. They only
+ * seed the grammar state, so a window that starts inside a block comment or a
+ * template literal still tokenizes as a comment / template literal. Tokenizing
+ * them costs a fraction of the window itself; carrying the whole document as
+ * context would defeat the point of windowing at all.
+ */
+const CONTEXT_LINES = 40;
+
+/**
+ * Lines at or above this length render as plain text. A minified bundle is one
+ * line of hundreds of KB, which the tokenizer would chew through on every
+ * scroll; the cap keeps that bounded, exactly like Shiki's own
+ * `tokenizeMaxLineLength` bail-out.
+ */
+const MAX_LINE_CHARS = 12_000;
+
+export interface HighlightCodeWindowOptions {
+  /** Lines of grammar context above the window. */
+  contextLines?: number;
+  /** Length at which a line falls back to plain text. */
+  maxLineLength?: number;
+}
+
+/**
+ * Shiki markup for lines `[window.start, window.end)` of `code`, joined with
+ * newlines so it can be dropped straight into the editor's `<pre>`. The caller
+ * reserves the space of the lines it is not given (`lazy-window`'s
+ * `windowSpace`), which is what keeps the caret over its own row.
+ *
+ * The rows are wrapped in `.shiki` — the app colours tokens through the
+ * `.shiki span { color: var(--shiki-light) }` rule (`tailwind.css`), so markup
+ * that skipped the wrapper would render in the plain ink colour. Every other
+ * consumer of `highlightLines` carries the same class.
+ *
+ * Editing is unaffected: the `<textarea>` above the highlight layer always
+ * holds the full document — only the markup is windowed.
+ */
+export function highlightCodeWindow(
+  code: string,
+  language: string,
+  window: LineWindow,
+  options: HighlightCodeWindowOptions = {},
+): string {
+  const { contextLines = CONTEXT_LINES, maxLineLength = MAX_LINE_CHARS } = options;
+  const lines = code.split('\n');
+  const start = Math.min(Math.max(window.start, 0), lines.length);
+  const end = Math.min(Math.max(window.end, start), lines.length);
+  if (start === end) return '';
+
+  const contextStart = Math.max(0, start - contextLines);
+  const rows = highlightLines(lines.slice(contextStart, end).join('\n'), language, { maxLineLength });
+  const offset = start - contextStart;
+  return `<span class="shiki">${rows.slice(offset, offset + (end - start)).join('\n')}</span>`;
+}

package/src/shared/lib/markdown/mermaid.ts

@@ -94,7 +94,7 @@ function applySvg(block: HTMLElement, svg: string, themeKey: ThemeKey): void {
   const source = block.dataset.mermaid ?? '';
   const copyAttr = source.replace(/"/g, '"');
   block.innerHTML =
-    `<button type="button" class="code-copy-float" data-copy="${copyAttr}" aria-label="Copy diagram source">` +
+    `<button type="button" class="code-copy-float" data-copy="${copyAttr}" aria-label="Copy diagram source" title="Copy diagram source">` +
     '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>' +
     '</button>' +
     svg;
@@ -142,11 +142,13 @@ async function renderBlock(block: HTMLElement, cachedOnly: boolean): Promise<boo
 }
 
 /**
- * Render every pending `.mermaid-block` under `root`. Theme changes re-run
- * this via `force: true`. Idempotent — blocks already rendered with the
- * current theme are skipped unless forced. With `cachedOnly`, only blocks
- * whose SVG is already cached are restored (synchronous, no rendering) — the
- * fast path that keeps remounted blocks from flashing the placeholder.
+ * Render every pending `.mermaid-block` under `root`. A block whose SVG was
+ * rendered for a different theme key is re-rendered here, which is how a theme
+ * switch repaints diagrams; `force` re-renders even matching blocks.
+ * Idempotent — blocks already rendered with the current theme are skipped
+ * unless forced, and blocks mid-render are left alone. With `cachedOnly`, only
+ * blocks whose SVG is already cached are restored (synchronous, no rendering) —
+ * the fast path that keeps remounted blocks from flashing the placeholder.
  */
 export async function hydrateMermaidBlocks(
   root: ParentNode,

package/src/shared/types/omp/agent.ts

@@ -5,8 +5,8 @@
 
 /**
  * omp agent event surface types shared by useOmpAgent, the chamber timeline
- * and the AskDialog renderer. Kept separate so the hook file stays under the
- * repo's per-file size ceiling.
+ * and the extension-dialog renderer. Kept separate so the hook file stays under
+ * the repo's per-file size ceiling.
  */
 
 import type { ChatMessageData } from '@/shared/types/chat';

package/src/shared/types/workspace.ts

@@ -17,6 +17,10 @@ export interface SessionItemData {
   /** Server-tracked stream state: `stream` while a run is in flight, then a
    *  one-shot `finish`/`abort`/`error` badge cleared when the session opens. */
   streamStatus?: 'stream' | 'finish' | 'abort' | 'error';
+  /** Live-only: the session's omp process is BLOCKED on an ask/approval dialog
+   *  waiting for a user answer. Derived from the running process registry, never
+   *  persisted — the process it describes is the same thing that owns the flag. */
+  awaitingInput?: boolean;
 }
 
 /**