@kabmo-labs/kabmo 0.7.0 → 0.9.0

package/src/client/components/workspace/chat-timeline/tool-renderers/hashline-patch/index.tsx

@@ -13,8 +13,7 @@
 import { useMemo } from 'preact/hooks';
 import type { HashlineSection, HashlineVerb } from '@/shared/lib/omp/session/hashline-patch';
 import { getLanguageFromPath } from '@/shared/lib/code/language';
-import { highlightLines } from '@/shared/lib/code/syntax-highlight';
-import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { useDeferredHighlightLines } from '@/client/hooks/code/deferred-highlight';
 
 /** A hashline `CUT` removes lines the model already saw, so it reads as the
  *  destructive half of the patch; `PUT` carries the replacement body. */
@@ -22,16 +21,38 @@ function opTone(verb: HashlineVerb): string {
   return verb === 'CUT' ? 'bg-error/10 text-error' : 'bg-success/10 text-success';
 }
 
-export function HashlinePatch({ sections }: { sections: HashlineSection[] }) {
-  const syntaxReady = useSyntaxReady();
-
-  const htmlByOp = useMemo(() => {
-    return sections.map((section) => {
-      const lang = getLanguageFromPath(section.path);
-      return section.ops.map((op) => highlightLines(op.body.join('\n'), lang));
-    });
-  }, [sections, syntaxReady]);
+/**
+ * One op's added lines. A component rather than a call in the parent's map: the
+ * deferred highlight is a hook, and a hook cannot run inside a callback — the
+ * parent used to tokenize EVERY op of EVERY file in one synchronous pass, which
+ * is the whole cost this card was paying on expand.
+ */
+function OpBody({ body, lang }: { body: string[]; lang: string }) {
+  const html = useDeferredHighlightLines(useMemo(() => body.join('\n'), [body]), lang);
+  return (
+    <>
+      {body.map((row, rowIndex) => {
+        const markup = html[rowIndex] || '';
+        return markup ? (
+          <div
+            key={rowIndex}
+            className="shiki whitespace-pre bg-success/[0.05] px-2.5 font-mono text-[11px] leading-relaxed"
+            dangerouslySetInnerHTML={{ __html: markup }}
+          />
+        ) : (
+          <div
+            key={rowIndex}
+            className="whitespace-pre bg-success/[0.05] px-2.5 font-mono text-[11px] leading-relaxed text-success/90"
+          >
+            {row}
+          </div>
+        );
+      })}
+    </>
+  );
+}
 
+export function HashlinePatch({ sections }: { sections: HashlineSection[] }) {
   return (
     <div className="space-y-1.5">
       <div className="flex items-center justify-between text-[9.5px] font-semibold uppercase tracking-[0.14em] text-ink/40">
@@ -43,7 +64,7 @@ export function HashlinePatch({ sections }: { sections: HashlineSection[] }) {
         )}
       </div>
       <div className="overflow-hidden rounded-lg border border-ink/8">
-        {sections.map((section, secIdx) => (
+        {sections.map((section) => (
           <div key={section.path} className="border-b border-ink/6 last:border-b-0">
             <div className="flex min-w-0 items-center gap-2 bg-canvas/40 px-2.5 py-1.5">
               <span className="truncate font-mono text-[10.5px] font-medium text-ink">{section.path}</span>
@@ -65,23 +86,7 @@ export function HashlinePatch({ sections }: { sections: HashlineSection[] }) {
                     </span>
                     {op.spec && <span className="font-mono text-[10.5px] text-ink/70">{op.spec}</span>}
                   </div>
-                  {op.body.map((row, rowIndex) => {
-                    const html = htmlByOp[secIdx]?.[index]?.[rowIndex] || '';
-                    return html ? (
-                      <div
-                        key={rowIndex}
-                        className="shiki whitespace-pre bg-success/[0.05] px-2.5 font-mono text-[11px] leading-relaxed"
-                        dangerouslySetInnerHTML={{ __html: html }}
-                      />
-                    ) : (
-                      <div
-                        key={rowIndex}
-                        className="whitespace-pre bg-success/[0.05] px-2.5 font-mono text-[11px] leading-relaxed text-success/90"
-                      >
-                        {row}
-                      </div>
-                    );
-                  })}
+                  <OpBody body={op.body} lang={getLanguageFromPath(section.path)} />
                 </div>
               ))}
             </div>

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/AstEdit.tsx

@@ -2,8 +2,7 @@ import { useMemo } from 'preact/hooks';
 import { ArrowRight, CheckCircle2, Clock, Wand2 } from 'lucide-preact';
 import type { ToolCallData } from '@/shared/types';
 import { getLanguageFromPath } from '@/shared/lib/code/language';
-import { highlightLines } from '@/shared/lib/code/syntax-highlight';
-import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { useDeferredHighlightLines } from '@/client/hooks/code/deferred-highlight';
 
 interface AstEditItem {
   file?: unknown;
@@ -51,14 +50,17 @@ export function AstEdit({ tool }: { tool: ToolCallData }) {
     ? details.changes
     : parseAstChanges(output);
 
-  const syntaxReady = useSyntaxReady();
   const diffLang = getLanguageFromPath(paths[0]);
-  const diffHtml = useMemo(() => {
-    const contents = diffLines.map((line: string) =>
-      line.startsWith('+') || line.startsWith('-') || line.startsWith(' ') ? line.slice(1) : line
-    );
-    return highlightLines(contents.join('\n'), diffLang);
-  }, [diffLines, diffLang, syntaxReady]);
+  const diffCode = useMemo(
+    () =>
+      diffLines
+        .map((line: string) =>
+          line.startsWith('+') || line.startsWith('-') || line.startsWith(' ') ? line.slice(1) : line
+        )
+        .join('\n'),
+    [diffLines],
+  );
+  const diffHtml = useDeferredHighlightLines(diffCode, diffLang);
 
   // If Staged Proposal Mode (oh-my-pi xd://ast_edit)
   if (isStaged || ops.length > 0 || diffLines.length > 0) {

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/Bash.tsx

@@ -5,8 +5,9 @@ import { bashServiceOf, daemonTone, procUptime } from '@/shared/lib/omp/session/
 import { CopyButton } from '@/client/components/common/CopyButton';
 import { stripAnsiCodes } from '@/shared/lib/code/ansi';
 import { isCodeLike } from '@/shared/lib/code/language';
-import { highlightCode, highlightLines, tryParseJson } from '@/shared/lib/code/syntax-highlight';
-import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { tryParseJson } from '@/shared/lib/code/syntax-highlight';
+import { useDeferredHighlight } from '@/client/hooks/code/deferred-highlight';
+import { HighlightedCode } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/HighlightedCode';
 import { JsonCodeBlock } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/JsonCodeBlock';
 import { OutputWindow } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/OutputWindow';
 import { MAX_OUTPUT_LINES, truncateTailLines } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/truncate';
@@ -75,8 +76,9 @@ export function Bash({ tool }: { tool: ToolCallData }) {
     () => (jsonResult.isValid && jsonResult.pretty ? truncateTailLines(jsonResult.pretty, MAX_OUTPUT_LINES) : null),
     [jsonResult]
   );
-  const syntaxReady = useSyntaxReady();
-  const highlightedCommand = useMemo(() => (command ? highlightCode(command, 'bash') : ''), [command, syntaxReady]);
+  // Deferred: a command line is short, but the grammar's first compile is not,
+  // and this card opens while a run streams.
+  const highlightedCommand = useDeferredHighlight(command, 'bash');
 
   const service = bashServiceOf(tool);
   const serviceTone = daemonTone(service?.state);
@@ -181,7 +183,7 @@ export function Bash({ tool }: { tool: ToolCallData }) {
           <div className="flex items-start gap-2.5 px-3 py-2 font-mono text-[11.5px] leading-relaxed">
             <span className="select-none font-bold text-ink/40">$</span>
             <pre
-              className="min-w-0 flex-1 overflow-x-auto whitespace-pre-wrap break-all text-ink/90 select-text"
+              className="shiki min-w-0 flex-1 overflow-x-auto whitespace-pre-wrap break-all text-ink/90 select-text"
               dangerouslySetInnerHTML={{ __html: highlightedCommand }}
             />
           </div>
@@ -242,9 +244,10 @@ export function Bash({ tool }: { tool: ToolCallData }) {
             className="max-h-72 overflow-y-auto overscroll-contain p-3 font-mono text-[11px] leading-relaxed select-text"
             render={(visible) =>
               outputIsCode ? (
-                <pre
+                <HighlightedCode
+                  code={visible.join('\n')}
+                  language={outputLang}
                   className="overflow-x-auto whitespace-pre text-ink/85 leading-relaxed"
-                  dangerouslySetInnerHTML={{ __html: highlightLines(visible.join('\n'), outputLang).join('\n') }}
                 />
               ) : (
                 visible.map((line, idx) => {

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/Edit.tsx

@@ -9,8 +9,7 @@ import { ExcerptCode } from '@/client/components/workspace/chat-timeline/tool-re
 import { ToolPanelHeader } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/ToolPanelHeader';
 import { parseEditOutput } from '@/shared/lib/chat/excerpt';
 import { getLanguageFromPath } from '@/shared/lib/code/language';
-import { highlightCode } from '@/shared/lib/code/syntax-highlight';
-import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { useDeferredHighlight } from '@/client/hooks/code/deferred-highlight';
 import { MAX_OUTPUT_LINES, truncateTailLines } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/truncate';
 import { outputMarkdown, readToolOutput } from '@/shared/lib/chat/tool-output';
 import { hashlinePatchFromArgs } from '@/shared/lib/omp/session/hashline-patch';
@@ -146,13 +145,31 @@ export function Edit({ tool }: { tool: ToolCallData }) {
 
   const truncatedOld = useMemo(() => (oldString ? truncateTailLines(oldString, MAX_OUTPUT_LINES) : null), [oldString]);
   const truncatedNew = useMemo(() => (newString ? truncateTailLines(newString, MAX_OUTPUT_LINES) : null), [newString]);
-  const syntaxReady = useSyntaxReady();
-  const highlightedOld = useMemo(() => (truncatedOld ? highlightCode(truncatedOld.text, lang) : ''), [truncatedOld, lang, syntaxReady]);
-  const highlightedNew = useMemo(() => (truncatedNew ? highlightCode(truncatedNew.text, lang) : ''), [truncatedNew, lang, syntaxReady]);
   const previewLineCount = useMemo(() => (newContent ? newContent.split('\n').length : 0), [newContent]);
-  const highlightedPreview = useMemo(
-    () => (newContent ? highlightCode(newContent.split('\n').slice(0, 80).join('\n'), lang) : ''),
-    [newContent, lang, syntaxReady]
+
+  /**
+   * Which of the three blocks this card actually DRAWS.
+   *
+   * They are mutually exclusive in the markup below — a card with a diff shows
+   * neither the replacement pair nor the write preview — and the highlights
+   * used to run for all three on every render regardless: three tokenizer passes
+   * to paint one block, measured as the largest single contributor to an `edit`
+   * card's expand. Gating the input on the branch that renders it makes the two
+   * unused passes `''`, which the hook treats as nothing to compute.
+   */
+  const showsReplacement = !diffText && Boolean(oldString || newString);
+  const showsPreview = !diffText && !oldString && !newString && Boolean(newContent);
+  const highlightedOld = useDeferredHighlight(
+    showsReplacement && truncatedOld ? truncatedOld.text : '',
+    lang,
+  );
+  const highlightedNew = useDeferredHighlight(
+    showsReplacement && truncatedNew ? truncatedNew.text : '',
+    lang,
+  );
+  const highlightedPreview = useDeferredHighlight(
+    showsPreview && newContent ? newContent.split('\n').slice(0, 80).join('\n') : '',
+    lang,
   );
 
   // omp answers an edit with the excerpt it touched, not with prose: numbered

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/Eval.test.tsx

@@ -0,0 +1,146 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The `eval` card body.
+ *
+ * The alignment defect is pinned here, and it was reported from a live
+ * transcript rather than found by reading the code: **the gutter numbers
+ * drifted off the code.** The gutter row was `text-[10px]` while the code was
+ * `text-[11px]`, and both inherited `leading-relaxed` — a ratio, so the row box
+ * was 16.25px against the code's 17.875px and every number sat higher than its
+ * line by a growing amount (measured after a reload: line 12's number was a
+ * full line above its code). The two sides now share one explicit line box,
+ * which is what the alignment case asserts — by comparing the two elements' own
+ * leading class, so a future edit that changes one side is caught instead of
+ * copied.
+ *
+ * The result cases cover the OTHER half of the same report ("output does not
+ * render while streaming"): the panel does read `tool.output` as it arrives, so
+ * what made a live eval look empty was the card being folded — pinned in
+ * `hooks/chat/timeline/tool-open.test.ts`, where a running eval opens itself.
+ *
+ * Rendered with `h()` against happy-dom, following `panels/Read.test.ts`.
+ */
+
+import { afterAll, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { Eval } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Eval';
+import type { ToolCallData } from '@/shared/types';
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+
+let container: HTMLElement;
+
+beforeAll(() => {
+  const win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    nativeGlobals[key] = target[key];
+    target[key] = (win as unknown as Record<string, unknown>)[key];
+  }
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (nativeGlobals[key] === undefined) delete target[key];
+    else target[key] = nativeGlobals[key];
+  }
+});
+
+beforeEach(() => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+function mount(tool: ToolCallData): HTMLElement {
+  act(() => {
+    render(h(Eval, { tool }), container);
+  });
+  return container;
+}
+
+const CODE = ['const a = 1;', 'const b = 2;', 'console.log(a + b);'].join('\n');
+
+function evalTool(overrides: Partial<ToolCallData> = {}): ToolCallData {
+  return {
+    id: 'call_1',
+    type: 'eval',
+    name: 'eval',
+    title: 'Sum two numbers',
+    input: { language: 'js', code: CODE },
+    status: 'running',
+    ...overrides,
+  } as ToolCallData;
+}
+
+/** The `leading-[…]` token a node carries, or null. */
+function leadingOf(el: Element): string | null {
+  return /(?:^|\s)(leading-\[\d+px\])/.exec(el.className)?.[1] ?? null;
+}
+
+/** The code card: the gutter/pre pair whose pre holds the SCRIPT. */
+function codeCard(root: HTMLElement): { gutter: Element; pre: Element } {
+  const gutter = root.querySelectorAll('.sticky')[0];
+  const pre = gutter?.parentElement?.querySelector('pre');
+  if (!gutter || !pre) throw new Error('code card not rendered');
+  return { gutter, pre };
+}
+
+describe('Eval — result rendering', () => {
+  test('a running call renders the output it has so far', () => {
+    // omp's `tool_execution_update` carries the cell's output SO FAR, and the
+    // panel reads it from `tool.output` — which is what the fold writes from
+    // the frame's `content`. Verified against a real omp run: `content` and
+    // `details.cells[].output` are byte-identical on every update frame.
+    const root = mount(evalTool({ output: 'live 1\nlive 2' }));
+    const text = root.textContent ?? '';
+    expect(text).toContain('live 1');
+    expect(text).toContain('live 2');
+  });
+
+  test('renders only the script while a running call has produced nothing yet', () => {
+    const root = mount(evalTool({ output: '' }));
+    expect(root.querySelectorAll('pre')).toHaveLength(1);
+    expect(root.textContent).toContain('Script Evaluation');
+  });
+});
+
+describe('Eval — gutter aligns with the code', () => {
+  test('the gutter and the code share one line box', () => {
+    const { gutter, pre } = codeCard(mount(evalTool()));
+    const gutterLeading = leadingOf(gutter);
+    expect(gutterLeading).not.toBeNull();
+    // The bug: an inherited RATIO (`leading-relaxed`) resolved against two
+    // different font sizes, so the boxes differed by 1.625px per line.
+    expect(leadingOf(pre)).toBe(gutterLeading);
+  });
+
+  test('one gutter row per code line', () => {
+    const { gutter } = codeCard(mount(evalTool()));
+    expect(gutter.children).toHaveLength(CODE.split('\n').length);
+  });
+
+  test('the JSON result block aligns the same way', () => {
+    // The pretty-printed result draws its own gutter, and it had the same
+    // mismatch (plus a `py-2` against the code's `p-2.5`).
+    const root = mount(evalTool({ output: '{"a": 1, "b": [2, 3]}', status: 'success' }));
+    const gutters = root.querySelectorAll('.sticky');
+    const jsonGutter = gutters[1];
+    expect(jsonGutter).toBeDefined();
+    const pre = jsonGutter.parentElement?.querySelector('pre');
+    expect(pre).not.toBeNull();
+    // Explicit on BOTH, not merely equal: `null === null` would pass while both
+    // sides inherit a ratio against different font sizes, which is the bug.
+    expect(leadingOf(jsonGutter)).not.toBeNull();
+    expect(leadingOf(pre as Element)).toBe(leadingOf(jsonGutter));
+    // `{"a": 1, "b": [2, 3]}` pretty-prints to 7 lines.
+    expect(jsonGutter.children).toHaveLength(7);
+  });
+});

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/Eval.tsx

@@ -2,9 +2,27 @@ import { useMemo } from 'preact/hooks';
 import { AlertCircle, Ban, Clock, Code2, Play } from 'lucide-preact';
 import type { ToolCallData } from '@/shared/types';
 import { CopyButton } from '@/client/components/common/CopyButton';
-import { highlightCode, highlightJson, tryParseJson } from '@/shared/lib/code/syntax-highlight';
+import { tryParseJson } from '@/shared/lib/code/syntax-highlight';
 import { MAX_OUTPUT_LINES, truncateTailLines } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/truncate';
-import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { useDeferredHighlight } from '@/client/hooks/code/deferred-highlight';
+
+/**
+ * The line box both sides of a code card share — gutter row and code line.
+ *
+ * A gutter row and the code line beside it are separate elements, so they agree
+ * only when their line boxes do. They did not: the gutter was `text-[10px]`
+ * while the code was `text-[11px]`, and both inherited `leading-relaxed` — a
+ * RATIO, so 10 × 1.625 = 16.25px against 11 × 1.625 = 17.875px. Each number
+ * then sat 1.6px higher than its line, and by the tenth line the number was a
+ * whole line above the code it labels (measured in the browser after a reload:
+ * `gutterRowH 16.25`, `preLineHeight 17.875`, `firstRowOffset 10`).
+ *
+ * The box is stated ONCE and applied to both containers, because a `<div>`
+ * holding one line takes its height from `line-height` — no per-row `h-[…]`
+ * that could drift from the constant. This is the same shape `Read.tsx` and
+ * `ExcerptCode` use.
+ */
+const LINE_BOX = 'leading-[18px]';
 
 /** Panel khusus untuk tool `eval` — eksekusi kode script, browser eval, dsb. */
 export function Eval({ tool }: { tool: ToolCallData }) {
@@ -25,23 +43,20 @@ export function Eval({ tool }: { tool: ToolCallData }) {
   const isError = tool.status === 'error' || output.includes('ToolError:') || output.includes('Command exited with code');
   const isAborted = output.includes('Command aborted') || tool.status === 'aborted';
 
-  const syntaxReady = useSyntaxReady();
-
   const jsonResult = useMemo(
     () => (!isError && !isAborted ? tryParseJson(output) : { isValid: false }),
     [output, isError, isAborted]
   );
 
   const truncatedCode = useMemo(() => truncateTailLines(code, MAX_OUTPUT_LINES), [code]);
-  const highlightedCode = useMemo(
-    () => highlightCode(truncatedCode.text, 'javascript'),
-    [truncatedCode, syntaxReady]
-  );
+  // A cell's script is short but the grammar compile is not, and an eval card
+  // opens while its own output streams.
+  const highlightedCode = useDeferredHighlight(truncatedCode.text, 'javascript');
   // The result is shown whole: an eval's output IS the answer, so hiding its
   // head behind a "… earlier lines hidden" line misreports what the cell returned.
-  const highlightedJson = useMemo(
-    () => (jsonResult.isValid && jsonResult.pretty ? highlightJson(jsonResult.pretty) : ''),
-    [jsonResult, syntaxReady]
+  const highlightedJson = useDeferredHighlight(
+    jsonResult.isValid && jsonResult.pretty ? jsonResult.pretty : '',
+    'json',
   );
 
   return (
@@ -78,14 +93,14 @@ export function Eval({ tool }: { tool: ToolCallData }) {
               … {truncatedCode.skipped} earlier lines hidden
             </div>
           )}
-          <div className="flex max-h-56 items-start overflow-x-auto font-mono text-[11px] leading-relaxed select-text">
-            <div className="sticky left-0 flex-shrink-0 select-none border-r border-ink/6 bg-canvas/50 py-2.5 pl-2.5 pr-2 text-right text-[10px] text-ink/25">
+          <div className={`flex max-h-56 items-start overflow-x-auto font-mono text-[11px] ${LINE_BOX} select-text`}>
+            <div className={`sticky left-0 flex-shrink-0 select-none border-r border-ink/6 bg-canvas/50 py-2.5 pl-2.5 pr-2 text-right text-[10px] ${LINE_BOX} tabular-nums text-ink/25`}>
               {truncatedCode.text.split('\n').map((_, idx) => (
                 <div key={idx}>{idx + 1}</div>
               ))}
             </div>
             <pre
-              className="flex-1 overflow-x-auto p-2.5 whitespace-pre text-ink/85 font-mono"
+              className={`flex-1 overflow-x-auto p-2.5 whitespace-pre ${LINE_BOX} text-ink/85 font-mono`}
               dangerouslySetInnerHTML={{ __html: highlightedCode }}
             />
           </div>
@@ -157,14 +172,14 @@ export function Eval({ tool }: { tool: ToolCallData }) {
           </div>
 
           {jsonResult.isValid && jsonResult.pretty ? (
-            <div className="flex max-h-56 items-start overflow-x-auto font-mono text-[11px] leading-relaxed select-text">
-              <div className="sticky left-0 flex-shrink-0 select-none border-r border-ink/6 bg-canvas/50 py-2 pl-2.5 pr-2 text-right text-[10px] text-ink/25">
+            <div className={`flex max-h-56 items-start overflow-x-auto font-mono text-[11px] ${LINE_BOX} select-text`}>
+              <div className={`sticky left-0 flex-shrink-0 select-none border-r border-ink/6 bg-canvas/50 py-2.5 pl-2.5 pr-2 text-right text-[10px] ${LINE_BOX} tabular-nums text-ink/25`}>
                 {jsonResult.pretty.split('\n').map((_, idx) => (
                   <div key={idx}>{idx + 1}</div>
                 ))}
               </div>
               <pre
-                className="flex-1 overflow-x-auto p-2.5 whitespace-pre text-ink/85 font-mono"
+                className={`flex-1 overflow-x-auto p-2.5 whitespace-pre ${LINE_BOX} text-ink/85 font-mono`}
                 dangerouslySetInnerHTML={{ __html: highlightedJson }}
               />
             </div>

package/src/client/components/workspace/chat-timeline/tool-renderers/panels/FileMatches.test.ts

@@ -0,0 +1,114 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * One file's matches inside a `grep` card.
+ *
+ * The card used to mount every line of every file group inside a `max-h-80`
+ * scroller, and tokenize them all in one pass. Two properties are pinned here,
+ * because both were the measured cost of expanding the card:
+ *
+ * 1. **A file group mounts a bounded number of rows**, with the rest one click
+ *    away — `MAX_OUTPUT_LINES` caps the whole output, so a single 900-line group
+ *    used to draw 900 rows to show ~14.
+ * 2. **The rows that ARE mounted carry their line numbers and text from the
+ *    first paint**, before the deferred highlight lands.
+ */
+
+import { afterAll, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+
+import { FileMatches, MAX_MATCH_LINES_PER_FILE } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/FileMatches';
+import { clearHighlightMemo } from '@/shared/lib/code/highlight-memo';
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'Event', 'MouseEvent'] as const;
+const nativeGlobals: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+let container: HTMLElement;
+
+beforeAll(() => {
+  const win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    nativeGlobals[key] = target[key];
+    target[key] = (win as unknown as Record<string, unknown>)[key];
+  }
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (nativeGlobals[key] === undefined) delete target[key];
+    else target[key] = nativeGlobals[key];
+  }
+});
+
+beforeEach(() => {
+  clearHighlightMemo();
+  // A fresh root per test: `render` keeps its vnode tree on the element it was
+  // given, so clearing the markup in place would leave preact diffing against a
+  // tree that is no longer there and skip the render entirely.
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+/** Rows the card drew, counted by the gutter numbers it printed. */
+function rowCount(el: HTMLElement): number {
+  return el.querySelectorAll('pre.shiki').length;
+}
+
+function matches(total: number) {
+  return Array.from({ length: total }, (_, index) => ({
+    lineNum: index + 1,
+    text: `const value${index} = ${index};`,
+    isMatch: index % 5 === 0,
+  }));
+}
+
+describe('FileMatches', () => {
+  test('mounts a bounded number of rows for a long file group', async () => {
+    await act(async () => {
+      render(h(FileMatches, { path: 'src/a.ts', lines: matches(300), matchCount: 60, isGlobList: false }), container);
+    });
+
+    expect(rowCount(container)).toBe(MAX_MATCH_LINES_PER_FILE);
+    expect(container.textContent).toContain('const value0 = 0;');
+    expect(container.textContent).not.toContain('const value299 = 299;');
+  });
+
+  test('offers the hidden rows, and reveals every one of them', async () => {
+    await act(async () => {
+      render(h(FileMatches, { path: 'src/a.ts', lines: matches(300), matchCount: 60, isGlobList: false }), container);
+    });
+    const reveal = Array.from(container.querySelectorAll('button')).find((b) => (b.textContent ?? '').includes('show all'));
+    expect(reveal).toBeDefined();
+    expect(reveal?.textContent).toContain('240');
+
+    await act(async () => {
+      reveal?.click();
+    });
+    expect(rowCount(container)).toBe(300);
+  });
+
+  test('a short group draws no reveal control at all', async () => {
+    await act(async () => {
+      render(h(FileMatches, { path: 'src/a.ts', lines: matches(4), matchCount: 1, isGlobList: false }), container);
+    });
+    expect(rowCount(container)).toBe(4);
+    expect(container.textContent).not.toContain('show all');
+  });
+
+  test('the first paint carries the text, before any highlight is computed', async () => {
+    await act(async () => {
+      render(h(FileMatches, { path: 'src/a.ts', lines: matches(3), matchCount: 1, isGlobList: false }), container);
+    });
+    // Nothing tokenized yet, and the rows still read correctly.
+    expect(container.textContent).toContain('const value2 = 2;');
+    expect(container.querySelectorAll('pre.shiki')).toHaveLength(3);
+  });
+});