@kabmo-labs/kabmo 0.8.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.tsx

@@ -2,9 +2,9 @@ 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.
@@ -43,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 (

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);
+  });
+});

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">