@kabmo-labs/kabmo 0.7.0 → 0.9.0

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

@@ -0,0 +1,111 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * One file's matches inside a `grep`/`glob` card.
+ *
+ * Two costs live here, and both were paid on every expand of the card:
+ *
+ * 1. **The tokenizer.** Every file's lines were tokenized in the parent's render,
+ *    in one synchronous pass — the profile of a `grep` expand put 40% of its
+ *    long task inside Shiki's regex engine. The highlight is deferred per FILE
+ *    (`useDeferredHighlightLines`), so the card paints the matches first and the
+ *    colour follows on an idle slice.
+ * 2. **The row count.** `MAX_OUTPUT_LINES` caps the whole output, not one file,
+ *    so a single 900-line file group mounted 900 rows inside a `max-h-80`
+ *    scroller that shows ~14. The window is per file now, opened on the first
+ *    lines (a match group is read from its top) with the rest one click away.
+ */
+
+import { useMemo, useState } from 'preact/hooks';
+import { ChevronRight, FileText } from 'lucide-preact';
+import { getLanguageFromPath } from '@/shared/lib/code/language';
+import { useDeferredHighlightLines } from '@/client/hooks/code/deferred-highlight';
+
+/** Rows mounted for one file before the reader asks for the rest. */
+export const MAX_MATCH_LINES_PER_FILE = 60;
+
+interface MatchRow {
+  lineNum: number;
+  text: string;
+  isMatch: boolean;
+}
+
+export interface FileMatchesProps {
+  path: string;
+  lines: MatchRow[];
+  matchCount: number;
+  isGlobList: boolean;
+}
+
+export function FileMatches({ path, lines, matchCount, isGlobList }: FileMatchesProps) {
+  const [showAll, setShowAll] = useState(false);
+  const visible = useMemo(
+    () => (showAll ? lines : lines.slice(0, MAX_MATCH_LINES_PER_FILE)),
+    [lines, showAll],
+  );
+  const hidden = lines.length - visible.length;
+
+  const lang = getLanguageFromPath(path);
+  const highlighted = useDeferredHighlightLines(
+    useMemo(() => visible.map((line) => line.text).join('\n'), [visible]),
+    lang,
+  );
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-ink/8 bg-paper">
+      {/* File Header */}
+      <div className="flex items-center justify-between border-b border-ink/6 bg-canvas/40 px-2.5 py-1.5">
+        <div className="flex min-w-0 items-center gap-1.5">
+          <FileText size={12} className="shrink-0 text-ink/40" />
+          <span className="truncate font-mono text-[11px] font-medium text-ink/85">{path}</span>
+        </div>
+        {matchCount > 0 && !isGlobList && (
+          <span className="ml-2 shrink-0 rounded bg-ink/5 px-1.5 py-0.2 font-mono text-[9.5px] text-ink/50">
+            {matchCount} {matchCount === 1 ? 'hit' : 'hits'}
+          </span>
+        )}
+      </div>
+
+      {/* Code Lines inside file — satu scroll horizontal per file, semua row selebar konten terlebar */}
+      {visible.length > 0 && (
+        <div className="overflow-x-auto overscroll-x-contain">
+          <div className="w-max min-w-full divide-y divide-ink/[0.04] font-mono text-[11px] leading-relaxed select-text">
+            {visible.map((line, lineIdx) => (
+              <div
+                key={lineIdx}
+                className={`flex items-start gap-2.5 px-2.5 py-1 transition-colors ${
+                  line.isMatch ? 'bg-warning/[0.08] text-ink' : 'bg-paper text-ink/60 hover:bg-ink/[0.02]'
+                }`}
+              >
+                <span
+                  className={`sticky left-0 z-10 flex w-9 shrink-0 select-none items-center justify-end bg-inherit font-mono text-[10px] ${
+                    line.isMatch ? 'font-semibold text-warning-dark dark:text-warning' : 'text-ink/30'
+                  }`}
+                >
+                  {line.isMatch && <ChevronRight size={10} className="mr-0.5 text-warning" />}
+                  {line.lineNum}
+                </span>
+                <pre
+                  className="shiki whitespace-pre font-mono"
+                  dangerouslySetInnerHTML={{ __html: highlighted[lineIdx] || '&nbsp;' }}
+                />
+              </div>
+            ))}
+          </div>
+          {hidden > 0 && (
+            <button
+              type="button"
+              onClick={() => setShowAll(true)}
+              className="w-full border-t border-ink/6 bg-canvas/40 px-2.5 py-1 text-left font-mono text-[10px] text-ink/55 transition-colors hover:bg-ink/5 hover:text-ink"
+            >
+              … {hidden} more {hidden === 1 ? 'line' : 'lines'} — show all {lines.length}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,8 +1,7 @@
 import { useEffect, useMemo, useState } from 'preact/hooks';
 import { FileCode, FileImage, FileText, Folder, FolderOpen, Info, Loader2 } from 'lucide-preact';
 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 { parseDirListing, parseNumberedCode } from '@/shared/lib/code/parser';
 import { getImageMimeType } from '@/shared/lib/fs/file-kind';
 import { buildFsRawUrl, isVirtualPath, stripReadSelector } from '@/shared/lib/fs/paths';
@@ -192,11 +191,12 @@ export function Read({ tool, targetFilePath, output }: ReadPanelProps) {
   const truncatedCode = useMemo(() => truncateTailLines(parsedCode.cleanCode, MAX_OUTPUT_LINES), [parsedCode.cleanCode]);
   const visibleLines = truncatedCode.skipped > 0 ? parsedCode.lines.slice(truncatedCode.skipped) : parsedCode.lines;
 
-  const syntaxReady = useSyntaxReady();
-  const highlightedCode = useMemo(() => {
-    if (!truncatedCode.text) return '';
-    return highlightCode(truncatedCode.text, lang);
-  }, [truncatedCode, lang, syntaxReady]);
+  // The tokenizer runs off the render that a tap scheduled (see
+  // `deferred-highlight`): a 1000-line read measured a 220–300 ms long task on
+  // a throttled phone, all of it before the card could paint. The plain-text
+  // frame it draws first carries the same characters, and a block already in
+  // the memo renders highlighted on that first paint.
+  const highlightedCode = useDeferredHighlight(truncatedCode.text, lang);
 
   return (
     <div className="space-y-2">

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

@@ -1,10 +1,8 @@
 import { useMemo, useState } from 'preact/hooks';
-import { ChevronRight, FileSearch, FileText, FolderSearch } from 'lucide-preact';
+import { FileSearch, FolderSearch } from 'lucide-preact';
 import type { ToolCallData } from '@/shared/types';
 import { CopyButton } from '@/client/components/common/CopyButton';
-import { getLanguageFromPath } from '@/shared/lib/code/language';
-import { highlightLines } from '@/shared/lib/code/syntax-highlight';
-import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { FileMatches } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/FileMatches';
 import { MAX_OUTPUT_LINES, truncateTailLines } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/truncate';
 
 interface MatchLine {
@@ -189,18 +187,6 @@ export function SearchTool({ tool }: { tool: ToolCallData }) {
       .filter((f): f is ParsedFileMatches => f !== null);
   }, [files, filterText]);
 
-  const syntaxReady = useSyntaxReady();
-
-  const highlightedByFile = useMemo(() => {
-    return filteredFiles.map((file) => {
-      const lang = getLanguageFromPath(file.path);
-      return highlightLines(
-        file.lines.map((line) => line.text).join('\n'),
-        lang
-      );
-    });
-  }, [filteredFiles, syntaxReady]);
-
   if (!output && files.length === 0) {
     return (
       <div className="flex items-center gap-2 rounded-lg border border-dashed border-ink/15 px-3 py-2.5 text-[11.5px] text-ink/45">
@@ -262,49 +248,13 @@ export function SearchTool({ tool }: { tool: ToolCallData }) {
       )}
       <div className="max-h-80 space-y-2 overflow-y-auto overscroll-contain pr-0.5">
         {filteredFiles.map((file, fileIdx) => (
-          <div key={fileIdx} className="overflow-hidden rounded-lg border border-ink/8 bg-paper">
-            {/* File Header */}
-            <div className="flex items-center justify-between border-b border-ink/6 bg-canvas/40 px-2.5 py-1.5">
-              <div className="flex min-w-0 items-center gap-1.5">
-                <FileText size={12} className="shrink-0 text-ink/40" />
-                <span className="truncate font-mono text-[11px] font-medium text-ink/85">{file.path}</span>
-              </div>
-              {file.matchCount > 0 && !isGlobList && (
-                <span className="ml-2 shrink-0 rounded bg-ink/5 px-1.5 py-0.2 font-mono text-[9.5px] text-ink/50">
-                  {file.matchCount} {file.matchCount === 1 ? 'hit' : 'hits'}
-                </span>
-              )}
-            </div>
-
-            {/* Code Lines inside file — satu scroll horizontal per file, semua row selebar konten terlebar */}
-            {file.lines.length > 0 && (
-              <div className="overflow-x-auto overscroll-x-contain">
-                <div className="w-max min-w-full divide-y divide-ink/[0.04] font-mono text-[11px] leading-relaxed select-text">
-                  {file.lines.map((line, lineIdx) => (
-                    <div
-                      key={lineIdx}
-                      className={`flex items-start gap-2.5 px-2.5 py-1 transition-colors ${
-                        line.isMatch ? 'bg-warning/[0.08] text-ink' : 'bg-paper text-ink/60 hover:bg-ink/[0.02]'
-                      }`}
-                    >
-                      <span
-                        className={`sticky left-0 z-10 flex w-9 shrink-0 select-none items-center justify-end bg-inherit font-mono text-[10px] ${
-                          line.isMatch ? 'font-semibold text-warning-dark dark:text-warning' : 'text-ink/30'
-                        }`}
-                      >
-                        {line.isMatch && <ChevronRight size={10} className="mr-0.5 text-warning" />}
-                        {line.lineNum}
-                      </span>
-                      <pre
-                        className="shiki whitespace-pre font-mono"
-                        dangerouslySetInnerHTML={{ __html: highlightedByFile[fileIdx]?.[lineIdx] || '&nbsp;' }}
-                      />
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
+          <FileMatches
+            key={fileIdx}
+            path={file.path}
+            lines={file.lines}
+            matchCount={file.matchCount}
+            isGlobList={isGlobList}
+          />
         ))}
 
         {filteredFiles.length === 0 && (

package/src/client/components/workspace/chat-timeline/tool-renderers/shared/ArtifactBody.tsx

@@ -37,8 +37,7 @@ import { MAX_OUTPUT_LINES, truncateTailLines } from '@/client/components/workspa
 import { artifactViewKind } from '@/shared/lib/chat/tool/artifact-view';
 import { getLanguageFromPath } from '@/shared/lib/code/language';
 import { parseNumberedCode } from '@/shared/lib/code/parser';
-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 ArtifactBodyProps {
   /** The whole artifact, verbatim. */
@@ -103,13 +102,9 @@ export function ArtifactBody({ text, path = '' }: ArtifactBodyProps) {
  * and `121|code`) and a blank line keeps its place in the count.
  */
 function ArtifactCode({ lines, path }: { lines: string[]; path: string }) {
-  const syntaxReady = useSyntaxReady();
   const parsed = useMemo(() => parseNumberedCode(lines.join('\n')), [lines]);
   const lang = getLanguageFromPath(path);
-  const html = useMemo(
-    () => highlightLines(parsed.cleanCode, lang),
-    [parsed.cleanCode, lang, syntaxReady],
-  );
+  const html = useDeferredHighlightLines(parsed.cleanCode, lang);
 
   return (
     <div className="flex items-start font-mono text-[11px] leading-[20px] select-text">

package/src/client/components/workspace/chat-timeline/tool-renderers/shared/DiffView.test.ts

@@ -4,19 +4,20 @@
  */
 
 /**
- * A long diff must SCROLL inside its height ceiling.
+ * A diff card's own chrome: the height ceiling and the counts.
  *
- * The bug: the wrapper carried only `max-h-72 overflow-hidden`, and the panel
- * views resolve `h-full` against their parent. `height: 100%` against a box
- * whose height is `auto` resolves to `auto`, so the view grew to its full
- * content — measured 1521px inside a 288px parent — and `overflow-hidden`
- * clipped the rest. `scrollHeight === clientHeight`, so nothing could scroll
- * and the reader simply could not reach the bottom of the diff.
+ * The bug the ceiling pins: the wrapper carried only `max-h-72 overflow-hidden`
+ * and the view inside resolved `h-full` against its parent. `height: 100%`
+ * against a box whose height is `auto` resolves to `auto`, so the view grew to
+ * its full content — measured 1521px inside a 288px parent — and `overflow-hidden`
+ * clipped the rest. `scrollHeight === clientHeight`, so nothing could scroll.
+ * `min-h-0` on the flex column is what gives the child a definite height.
  *
- * Asserted on the classes the fix depends on, because the failure mode is a
- * LAYOUT resolution that happy-dom does not compute: `min-h-0` on a flex column
- * is what gives the child a definite height, and `overflow-hidden` on the
- * wrapper is what stops a second scroller from appearing.
+ * The ROWS are not asserted here any more. The card renders through
+ * CodeMirror's merge view, which draws only its viewport — and happy-dom
+ * computes no layout, so a viewport is empty. Row rendering is covered where it
+ * can be observed: `git-panel.e2e.ts` against the real panel, and
+ * `patch-sides.test.ts` for the pair the card hands over.
  */
 
 import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
@@ -49,11 +50,11 @@ afterAll(() => {
 /** omp's excerpt diff, long enough to overflow any ceiling. */
 const EXCERPT = Array.from({ length: 120 }, (_, i) => `${i + 1}|line ${i + 1}`).join('\n');
 
-async function mount() {
+async function mount(text = EXCERPT) {
   container = document.createElement('div');
   document.body.appendChild(container);
   await act(async () => {
-    render(h(DiffView, { text: EXCERPT, path: 'src/x.ts' }), container);
+    render(h(DiffView, { text, path: 'src/x.ts' }), container);
   });
   return container;
 }
@@ -75,25 +76,23 @@ describe('DiffView height ceiling', () => {
     expect(wrap.className).toContain('flex');
     expect(wrap.className).toContain('flex-col');
     // Without `min-h-0` a flex item refuses to shrink below its content, the
-    // view's `h-full` resolves to `auto`, and nothing scrolls.
+    // view's height resolves to `auto`, and nothing scrolls.
     expect(wrap.className).toContain('min-h-0');
   });
 
-  test('the view inside is the element that scrolls', async () => {
-    const el = await mount();
-    const wrap = el.querySelector('div[class*="max-h-72"]') as HTMLElement;
-    const view = wrap.firstElementChild as HTMLElement;
-    expect(view.className).toContain('overflow-auto');
-    expect(view.className).toContain('h-full');
+  test('the header counts come from the patch, not from git', async () => {
+    // ` 1|a / -2|b / +2|c` is an excerpt diff: one deletion, one addition.
+    const el = await mount(' 1|a\n-2|b\n+2|c');
+    const text = el.textContent ?? '';
+    expect(text).toContain('+1');
+    expect(text).toContain('\u22121');
   });
 
-  test('a short diff still renders its rows', async () => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-    await act(async () => {
-      render(h(DiffView, { text: ' 1|a\n-2|b\n+2|c', path: 'src/x.ts' }), container);
-    });
-    expect(container.textContent).toContain('c');
-    expect(container.textContent).not.toContain('2|b');
+  test('a header-only patch falls back to the raw text', async () => {
+    const el = await mount('--- a/x\n+++ b/x\n');
+    // Nothing to compare means nothing to draw: the reader still sees the bytes
+    // the tool returned rather than an empty box.
+    expect(el.textContent).toContain('--- a/x');
+    expect(el.querySelector('.cm-editor')).toBeNull();
   });
 });

package/src/client/components/workspace/chat-timeline/tool-renderers/shared/DiffView.tsx

@@ -17,20 +17,23 @@
  * first, so ONE parser serves both — and because the conversion recovers the
  * gutter numbers, the rows get real line numbers instead of `...`.
  *
- * The rendering itself is the diff panel's own `UnifiedView`/`SplitView`, so a
- * diff in the chat and a diff of the working tree are the same surface rather
- * than two implementations that drift.
+ * The rendering is the diff panel's own merge view, so a diff in the chat and a
+ * diff of the working tree are the same surface rather than two implementations
+ * that drift. A card has only the PATCH, not the two documents, so the two sides
+ * are reconstructed from the parsed rows — a context row appears on both, a `-`
+ * only on the original, a `+` only on the new one.
  */
 
 import { useMemo, useState } from 'preact/hooks';
 import type { ReactNode } from 'preact/compat';
 import { Columns2, Rows3, WrapText } from 'lucide-preact';
-import { parseUnifiedDiff } from '@/shared/lib/fs/diff-parser';
+import { patchSides } from '@/shared/lib/fs/patch-sides';
 import { excerptDiffToUnified, isExcerptDiff } from '@/shared/lib/fs/excerpt-diff';
 import { getLanguageFromPath } from '@/shared/lib/code/language';
 import { CopyButton } from '@/client/components/common/CopyButton';
-import { UnifiedView } from '@/client/components/workspace/diff-panel/UnifiedView';
-import { SplitView } from '@/client/components/workspace/diff-panel/SplitView';
+import { MergeDiffView } from '@/client/components/workspace/diff-panel/MergeDiffView';
+import { useEditorFontStack } from '@/client/hooks/editor/font';
+import { EDITOR_DEFAULT_FONT_SIZE } from '@/shared/lib/code/editor/typography';
 
 /** A small icon-only toolbar button, `aria-pressed` for its own state. */
 function ToggleButton({
@@ -80,21 +83,19 @@ export function DiffView({ text, path = '', maxHeightClass = 'max-h-72' }: DiffV
   // omp's excerpt is converted first; a git unified diff passes through.
   const unified = useMemo(() => (isExcerptDiff(text) ? excerptDiffToUnified(text) : text), [text]);
 
-  // Only the view on screen is built: a full-context diff would otherwise
-  // allocate both the flat line list and the paired split rows to draw one.
-  const parsed = useMemo(
-    () => parseUnifiedDiff(unified, { views: split ? 'split' : 'unified' }),
-    [unified, split],
-  );
+  // A card has a PATCH and no documents, so the two sides are rebuilt from it:
+  // context on both, `-` on the original, `+` on the new one. That is the same
+  // alignment the merge view would compute from two files, restricted to the
+  // hunks the patch carries.
+  const sides = useMemo(() => patchSides(unified), [unified]);
+  const editorFontFamily = useEditorFontStack();
 
   // The excerpt's header carries no filename, so the caller's path is the only
-  // name the block can show; the unified header is preferred when it exists.
-  const fileLabel = parsed.lines.find((line) => line.type === 'meta')?.text
-    ? ''
-    : path.split('/').pop() ?? '';
-  const language = getLanguageFromPath(path || parsed.splitRows[0]?.right?.text || '');
+  // name the block can show — unless the patch names itself.
+  const fileLabel = sides.hasHunk ? '' : (path.split('/').pop() ?? '');
+  const language = getLanguageFromPath(path || sides.next.split('\n')[0] || '');
 
-  if (parsed.lines.length === 0 && parsed.splitRows.length === 0) {
+  if (sides.rows === 0) {
     return (
       <pre className="max-h-48 overflow-auto rounded-lg border border-ink/8 bg-paper p-3 font-mono text-[11px] leading-relaxed whitespace-pre-wrap break-all text-ink/80 select-text">
         {text}
@@ -109,8 +110,8 @@ export function DiffView({ text, path = '', maxHeightClass = 'max-h-72' }: DiffV
           <span className="truncate font-mono text-[10.5px] text-ink/60">{fileLabel}</span>
         )}
         <span className="flex items-center gap-1.5 font-mono text-[10px]">
-          <span className="text-success">+{parsed.additions}</span>
-          <span className="text-error">{'\u2212'}{parsed.deletions}</span>
+          <span className="text-success">+{sides.additions}</span>
+          <span className="text-error">{'\u2212'}{sides.deletions}</span>
         </span>
         <span className="ml-auto flex items-center gap-1">
           <ToggleButton
@@ -150,12 +151,24 @@ export function DiffView({ text, path = '', maxHeightClass = 'max-h-72' }: DiffV
           own content and this wrapper only bounds it. */}
       <div className={`flex ${maxHeightClass} min-h-0 flex-col overflow-hidden`}>
         {/* No tab key: this diff lives inside a chat card, and the timeline —
-            not the card — is what the reader scrolls. */}
-        {split ? (
-          <SplitView rows={parsed.splitRows} language={language} wordWrap={wordWrap} tabKey={null} />
-        ) : (
-          <UnifiedView lines={parsed.lines} language={language} wordWrap={wordWrap} tabKey={null} />
-        )}
+            not the card — is what the reader scrolls. No counts either: the
+            header above already prints them from the patch. */}
+        <MergeDiffView
+          original={sides.original}
+          next={sides.next}
+          language={language}
+          viewMode={split ? 'split' : 'unified'}
+          // Collapsed gaps: the reconstructed sides carry blank padding up to
+          // each hunk's real line, so showing every row would draw thousands of
+          // empty lines between two changes.
+          contentMode="diff"
+          wordWrap={wordWrap}
+          ignoreWhitespace={false}
+          tabKey={null}
+          empty={false}
+          fontFamily={editorFontFamily}
+          fontSize={EDITOR_DEFAULT_FONT_SIZE}
+        />
       </div>
     </div>
   );

package/src/client/components/workspace/chat-timeline/tool-renderers/shared/ExcerptCode.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'preact/hooks';
 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';
 import { CopyButton } from '@/client/components/common/CopyButton';
 import { MAX_OUTPUT_LINES, truncateTailLines } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/truncate';
 
@@ -45,16 +44,17 @@ interface ExcerptCodeProps {
 export function ExcerptCode({ lines, path = '', tag }: ExcerptCodeProps) {
   const rows = useMemo(() => splitExcerptRows(lines), [lines]);
   const lang = getLanguageFromPath(path);
-  const syntaxReady = useSyntaxReady();
 
-  const { html, hidden } = useMemo(() => {
-    // Only the tail is rendered, so only the tail is highlighted — tokenizing
-    // the dropped head would be work whose output is thrown away.
+  // Only the tail is rendered, so only the tail is highlighted — tokenizing the
+  // dropped head would be work whose output is thrown away. The tokenizer itself
+  // runs off the expand that asked for it (see `deferred-highlight`).
+  const { code: visibleCode, hidden } = useMemo(() => {
     const code = rows.map((row) => row.code);
     const truncated = truncateTailLines(code.join('\n'), MAX_OUTPUT_LINES);
     const visible = truncated.skipped > 0 ? code.slice(truncated.skipped) : code;
-    return { html: highlightLines(visible.join('\n'), lang), hidden: truncated.skipped };
-  }, [rows, lang, syntaxReady]);
+    return { code: visible.join('\n'), hidden: truncated.skipped };
+  }, [rows]);
+  const html = useDeferredHighlightLines(visibleCode, lang);
 
   const visibleRows = hidden > 0 ? rows.slice(hidden) : rows;
 

package/src/client/components/workspace/chat-timeline/tool-renderers/shared/HighlightedCode.tsx

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * A `<pre>` whose contents are tokenized off the render that asked for them.
+ *
+ * A hook cannot be called inside a `render` callback (Bash's `OutputWindow` and
+ * SearchTool's per-file rows both draw code from one), so the deferred highlight
+ * lives in this component instead: a caller hands over the code and the
+ * language, and the markup arrives one idle slice later.
+ *
+ * The `shiki` class is on the `<pre>` from the first paint, so the plain-text
+ * frame and the tokenized one are the same element — the swap changes colour
+ * and nothing else.
+ */
+
+import { useDeferredHighlightLines } from '@/client/hooks/code/deferred-highlight';
+
+interface HighlightedCodeProps {
+  code: string;
+  language: string;
+  className?: string;
+}
+
+export function HighlightedCode({ code, language, className = '' }: HighlightedCodeProps) {
+  const lines = useDeferredHighlightLines(code, language);
+  return (
+    <pre
+      className={`shiki ${className}`}
+      dangerouslySetInnerHTML={{ __html: lines.join('\n') }}
+    />
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/shared/JsonCodeBlock.tsx

@@ -2,8 +2,7 @@ import type { ReactNode } from 'preact/compat';
 import { useMemo } from 'preact/hooks';
 import { Braces } from 'lucide-preact';
 import { CopyButton } from '@/client/components/common/CopyButton';
-import { highlightJson } from '@/shared/lib/code/syntax-highlight';
-import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { useDeferredHighlight } from '@/client/hooks/code/deferred-highlight';
 
 interface JsonCodeBlockProps {
   /** Formatted JSON string to render */
@@ -33,8 +32,9 @@ export function JsonCodeBlock({
 }: JsonCodeBlockProps) {
   const effectiveMaxHeight = maxHeightClass || (compact ? 'max-h-40' : 'max-h-56');
   const lines = useMemo(() => jsonString.split('\n'), [jsonString]);
-  const syntaxReady = useSyntaxReady();
-  const highlighted = useMemo(() => highlightJson(jsonString), [jsonString, syntaxReady]);
+  // `json` is an eager grammar, so the memo usually answers on the first paint;
+  // a cold card still draws the text immediately and colours it a beat later.
+  const highlighted = useDeferredHighlight(jsonString, 'json');
 
   return (
     <div className={`overflow-hidden ${compact ? 'rounded-md' : 'rounded-lg'} border border-ink/8 bg-paper ${className}`}>