ompchamber 0.7.0 → 1.0.0

package/src/shared/lib/chat/omp/agent-events.ts

@@ -165,6 +165,11 @@ export function foldAgentEvent(data: OmpAgentEvent, deps: OmpAgentFoldDeps): voi
       callbacks?.onAgentStart?.();
       break;
 
+    case 'turn_start':
+      setActivity(PHASE_VERBS.thinking, deps);
+      callbacks?.onTurnStart?.();
+      break;
+
     case 'message_start':
     case 'message_update': {
       const msg = data.message as Record<string, unknown> | undefined;
@@ -177,6 +182,10 @@ export function foldAgentEvent(data: OmpAgentEvent, deps: OmpAgentFoldDeps): voi
       // Assistant phases (thinking / prose / tool-call assembly) name the
       // action directly — a tool that never starts still shows its phrase.
       setActivity(describeAssistantPhase(data.assistantMessageEvent), deps);
+      // The first message frame of a turn is another proof the run is live —
+      // re-signal so the sidebar can restore a lost `stream` status row.
+      // message_update frames arrive per delta and must stay silent here.
+      if (data.type === 'message_start') callbacks?.onTurnStart?.();
       // Steering (abort_and_prompt) and follow-up deliveries create no
       // optimistic bubble — the user turn only exists on the stream. Convert
       // it here so the bubble renders live instead of after a JSONL reload.
@@ -298,6 +307,27 @@ export function foldAgentEvent(data: OmpAgentEvent, deps: OmpAgentFoldDeps): voi
       break;
     }
 
+    // omp's prompt ack ran a built-in slash command instead of an agent turn
+    // (`agentInvoked:false`, mirrored server-side as this frame): there will be
+    // no agent_start/agent_end pair. Clear the optimistic generating state —
+    // the callbacks drop the AI placeholder and keep the user's message row.
+    case 'prompt_result': {
+      if (data.agentInvoked === false) {
+        deps.setState((prev) => ({ ...prev, isGenerating: false }));
+        deps.activityRef.current = '';
+        callbacks?.onPromptSettled?.();
+      }
+      break;
+    }
+
+    // Built-in slash command output (/usage, /compact result, …). Rendered as
+    // a notice row — see the callback type note: this frame is the ONLY copy.
+    case 'command_output': {
+      const text = typeof data.text === 'string' ? data.text.trim() : '';
+      if (text) callbacks?.onCommandOutput?.(text);
+      break;
+    }
+
     case 'notice': {
       callbacks?.onNotice?.(
         typeof data.level === 'string' ? data.level : 'info',

package/src/shared/lib/chat/timeline/omp-callbacks.test.ts

@@ -63,7 +63,6 @@ describe('createOmpAgentCallbacks first-assistant sidebar signal', () => {
 
   function makeCallbacks(): OmpAgentCallbacks {
     const deps: OmpAgentCallbacksDeps = {
-      removeDeliveredFromQueue: () => {},
       setGenerating: () => {},
       setGeneratingVerb: () => {},
       scrollToBottom: () => {},
@@ -133,6 +132,15 @@ describe('createOmpAgentCallbacks first-assistant sidebar signal', () => {
     expect(signals).toHaveLength(2);
   });
 
+  test('onTurnStart signals the sidebar on every turn of the run', () => {
+    const callbacks = makeCallbacks();
+
+    callbacks.onTurnStart?.();
+    callbacks.onTurnStart?.();
+    expect(signals).toHaveLength(2);
+    expect(signals.every(s => s.name === 'omp:session-updated' && s.sessionId === 'sess-1')).toBe(true);
+  });
+
   test('never signals from user turns or notice rows alone', () => {
     const callbacks = makeCallbacks();
 

package/src/shared/lib/chat/timeline/omp-callbacks.ts

@@ -47,7 +47,6 @@ export function cancelStreamingCoalescer(): void {
 }
 
 export interface OmpAgentCallbacksDeps {
-  removeDeliveredFromQueue: (text: string) => void;
   setGenerating: (v: boolean) => void;
   setGeneratingVerb: (v: string) => void;
   scrollToBottom: (behavior?: ScrollBehavior) => void;
@@ -73,7 +72,6 @@ export interface OmpAgentCallbacksDeps {
 
 export function createOmpAgentCallbacks(deps: OmpAgentCallbacksDeps): OmpAgentCallbacks {
   const {
-    removeDeliveredFromQueue,
     setGenerating,
     setGeneratingVerb,
     scrollToBottom,
@@ -97,12 +95,6 @@ export function createOmpAgentCallbacks(deps: OmpAgentCallbacksDeps): OmpAgentCa
   scrollAfterFlush = () => scrollToBottom('smooth');
 
   return {
-    // A queued steer/follow-up text was picked up by the agent (user turn
-    // arrived) — drop it from whichever queue mirrors it so the panel stays
-    // truthful without a chat bubble for every delivery.
-    onQueuedMessageDelivered: (text) => {
-      removeDeliveredFromQueue(text);
-    },
     onAgentStart: () => {
       setGenerating(true);
       setGeneratingVerb(PHASE_VERBS.thinking);
@@ -122,6 +114,15 @@ export function createOmpAgentCallbacks(deps: OmpAgentCallbacksDeps): OmpAgentCa
         }
       }
     },
+    onTurnStart: () => {
+      // Every turn inside the run re-signals the sidebar: the throttle makes
+      // this cheap, and it recovers the `stream` status row if a previous
+      // dispatch raced with the status write (or the row was healed away).
+      const sid = adoptedSessionIdRef.current ?? sessionIdRef.current;
+      if (sid && typeof window !== 'undefined') {
+        window.dispatchEvent(new CustomEvent('omp:session-updated', { detail: { sessionId: sid } }));
+      }
+    },
     // Reload recovery: the omp process kept running server-side, so the event
     // stream is reattached and the generating UI must resume (the timeline
     // fetch already loaded the committed messages; live updates continue).
@@ -308,6 +309,42 @@ export function createOmpAgentCallbacks(deps: OmpAgentCallbacksDeps): OmpAgentCa
       abortControllerRef.current = null;
       console.error('OMP prompt error:', errorMessage);
     },
+    // The prompt ran a built-in slash command (omp answered on the command
+    // path, no agent run): drop the optimistic AI placeholder and settle the
+    // optimistic user row — it stays as the record of what the user invoked.
+    onPromptSettled: () => {
+      disposeStreamingCoalescer();
+      setGenerating(false);
+      abortControllerRef.current = null;
+      optimisticUserIdRef.current = null;
+      const placeholderId = aiPlaceholderIdRef.current;
+      aiPlaceholderIdRef.current = null;
+      if (placeholderId) {
+        setLocalMessages(prev => {
+          if (!prev.some(m => m.id === placeholderId)) return prev;
+          return prev.filter(m => m.id !== placeholderId);
+        });
+      }
+    },
+    // Built-in slash command output only rides the live stream — append it as
+    // a notice row before any active placeholder, exactly like omp notices.
+    onCommandOutput: (text) => {
+      const row: ChatMessageData = {
+        id: `cmdout-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+        role: 'ai',
+        content: '',
+        notice: text,
+      };
+      setLocalMessages(prev => {
+        const placeholderId = aiPlaceholderIdRef.current;
+        if (placeholderId) {
+          const pIdx = prev.findIndex(m => m.id === placeholderId);
+          if (pIdx !== -1) return [...prev.slice(0, pIdx), row, ...prev.slice(pIdx)];
+        }
+        if (prev.some(m => m.notice === text)) return prev;
+        return [...prev, row];
+      });
+    },
     onNotice: (_level, message) => {
       console.info('OMP notice:', message);
     },

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

@@ -0,0 +1,161 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  codeWindow,
+  clampWindow,
+  firstWindow,
+  measuredGeometry,
+  resolveWindow,
+  shouldWindow,
+  uniformGeometry,
+  windowSpace,
+  WHOLE_DOCUMENT_MAX_CHARS,
+  WHOLE_DOCUMENT_MAX_LINES,
+  WINDOW_OVERSCAN,
+  type LineGeometry,
+} from '@/shared/lib/code/lazy-window';
+
+const ROW = 18;
+
+/** `measuredGeometry` returns null for heights that do not fit the document. */
+function measured(heights: number[]): LineGeometry {
+  const geometry = measuredGeometry(heights, ROW, heights.length);
+  if (!geometry) throw new Error('heights should describe every line');
+  return geometry;
+}
+
+describe('shouldWindow', () => {
+  test('leaves a short document on the plain surface', () => {
+    expect(shouldWindow(120, 4_000)).toBe(false);
+  });
+
+  test('windows a document that is long in lines or in characters', () => {
+    expect(shouldWindow(WHOLE_DOCUMENT_MAX_LINES + 1, 10)).toBe(true);
+    expect(shouldWindow(10, WHOLE_DOCUMENT_MAX_CHARS + 1)).toBe(true);
+  });
+});
+
+describe('uniformGeometry', () => {
+  const geometry = uniformGeometry(ROW, 500);
+
+  test('spaces lines one row apart and totals the document', () => {
+    expect(geometry.offsetOf(0)).toBe(0);
+    expect(geometry.offsetOf(10)).toBe(10 * ROW);
+    expect(geometry.totalHeight).toBe(500 * ROW);
+  });
+
+  test('maps an offset back to the line covering it', () => {
+    expect(geometry.lineAt(0)).toBe(0);
+    expect(geometry.lineAt(ROW - 1)).toBe(0);
+    expect(geometry.lineAt(ROW)).toBe(1);
+    expect(geometry.lineAt(499 * ROW + 3)).toBe(499);
+  });
+
+  test('clamps an offset outside the document', () => {
+    expect(geometry.lineAt(-50)).toBe(0);
+    expect(geometry.lineAt(999_999)).toBe(499);
+    expect(geometry.offsetOf(500)).toBe(geometry.totalHeight);
+    expect(geometry.offsetOf(999)).toBe(geometry.totalHeight);
+  });
+});
+
+describe('measuredGeometry', () => {
+  // Every third line wraps over three rows; the rest are single rows.
+  const heights = Array.from({ length: 9 }, (_, index) => (index % 3 === 2 ? ROW * 3 : ROW));
+  const geometry = measured(heights);
+
+  test('builds offsets from the wrapped heights', () => {
+    expect(geometry.offsetOf(0)).toBe(0);
+    expect(geometry.offsetOf(1)).toBe(ROW);
+    expect(geometry.offsetOf(2)).toBe(2 * ROW);
+    // Line 2 spans three rows, so line 3 starts after all three.
+    expect(geometry.offsetOf(3)).toBe(5 * ROW);
+    expect(geometry.totalHeight).toBe(heights.reduce((sum, height) => sum + height, 0));
+  });
+
+  test('maps an offset inside a wrapped line to that line', () => {
+    expect(geometry.lineAt(2 * ROW)).toBe(2);
+    expect(geometry.lineAt(4 * ROW + 5)).toBe(2);
+    expect(geometry.lineAt(5 * ROW)).toBe(3);
+  });
+
+  test('refuses heights that do not describe every line', () => {
+    expect(measuredGeometry([ROW, ROW], ROW, 5)).toBeNull();
+    expect(measuredGeometry([], ROW, 0)).toBeNull();
+  });
+});
+
+describe('resolveWindow', () => {
+  const geometry = uniformGeometry(ROW, 1_000);
+
+  test('covers the viewport plus overscan on both sides', () => {
+    // Viewport rows 100..128 (the last row is half covered, so it is included).
+    const window = resolveWindow(geometry, 100 * ROW, 28 * ROW);
+    expect(window).toEqual({ start: 100 - WINDOW_OVERSCAN, end: 129 + WINDOW_OVERSCAN });
+  });
+
+  test('never runs past either end of the document', () => {
+    expect(resolveWindow(geometry, 0, ROW)).toEqual({ start: 0, end: 2 + WINDOW_OVERSCAN });
+    expect(resolveWindow(geometry, 999 * ROW, 40 * ROW).end).toBe(1_000);
+  });
+
+  test('keeps a zero-height band to at least the line under it', () => {
+    const window = resolveWindow(geometry, 400 * ROW, 0);
+    expect(window.start).toBeLessThanOrEqual(400);
+    expect(window.end).toBeGreaterThan(400);
+  });
+});
+
+describe('firstWindow', () => {
+  test('bounds the opening render of a long document', () => {
+    expect(firstWindow(20_000).start).toBe(0);
+    expect(firstWindow(20_000).end).toBeLessThan(20_000);
+  });
+
+  test('keeps a short document whole', () => {
+    expect(firstWindow(3)).toEqual({ start: 0, end: 3 });
+  });
+});
+
+describe('clampWindow', () => {
+  test('pulls a window left over from another document back inside it', () => {
+    expect(clampWindow({ start: 9_000, end: 9_500 }, 40)).toEqual({ start: 39, end: 40 });
+    expect(clampWindow({ start: -5, end: 10 }, 40)).toEqual({ start: 0, end: 10 });
+  });
+
+  test('never returns an empty range', () => {
+    expect(clampWindow({ start: 5, end: 5 }, 40).end).toBeGreaterThan(5);
+  });
+});
+
+describe('windowSpace', () => {
+  test('reserves exactly the height of the lines outside the window', () => {
+    const geometry = uniformGeometry(ROW, 100);
+    const space = windowSpace(geometry, { start: 10, end: 30 });
+    expect(space).toEqual({ top: 10 * ROW, bottom: 70 * ROW, breakAtEnd: false });
+    expect(space.top + space.bottom + (30 - 10) * ROW).toBe(geometry.totalHeight);
+  });
+
+  test('flags a window that reaches the last line', () => {
+    const geometry = uniformGeometry(ROW, 100);
+    expect(windowSpace(geometry, { start: 90, end: 100 }).breakAtEnd).toBe(true);
+  });
+});
+
+describe('codeWindow', () => {
+  test('clamps the range and spaces it in one step', () => {
+    const geometry = uniformGeometry(ROW, 50);
+    expect(codeWindow(geometry, { start: 0, end: 5_000 })).toEqual({
+      start: 0,
+      end: 50,
+      top: 0,
+      bottom: 0,
+      breakAtEnd: true,
+    });
+  });
+});

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,