@kabmo-labs/kabmo 0.8.0 → 0.9.0

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}`}>

package/src/client/components/workspace/diff-panel/MergeDiffView.tsx

@@ -0,0 +1,179 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The diff body: CodeMirror's merge view, mounted once and reconfigured.
+ *
+ * The panel above this owns the toolbar, the git actions and the persisted view
+ * choices; this owns the two editors. Keeping them apart is what lets a stage /
+ * unstage / discard re-read the documents without re-mounting the editor (which
+ * would drop the reader's scroll position, and does so on every action).
+ *
+ * `Diff Only` ↔ `Full Code` is a compartment reconfigure, not a re-fetch: the
+ * documents are already both sides of the file, and the server's `-U<n>` probe
+ * existed only because the old table renderer could not collapse anything.
+ */
+
+import { useEffect, useRef, useState } from 'preact/hooks';
+
+import { useScrollRestore } from '@/client/hooks/editor/use-scroll-restore';
+import { EDITOR_LINE_HEIGHT } from '@/shared/lib/code/editor/typography';
+import {
+  countChanges,
+  foldWhitespaceOnly,
+  mountSplitDiff,
+  mountUnifiedDiff,
+  type DiffViewHandle,
+} from '@/client/components/workspace/diff-panel/merge';
+import type { DiffContentMode, DiffViewMode } from '@/client/components/workspace/diff-panel/Toolbar';
+
+interface MergeDiffViewProps {
+  /** The document before the change. */
+  original: string;
+  /** The document after it. */
+  next: string;
+  language: string;
+  viewMode: DiffViewMode;
+  contentMode: DiffContentMode;
+  wordWrap: boolean;
+  ignoreWhitespace: boolean;
+  /** The tab this diff belongs to, so its offset is remembered per shape. */
+  tabKey: string | null;
+  /**
+   * Additions and deletions of the pair actually on screen. Omitted by a host
+   * that draws its own badge from the patch (the chat's tool card).
+   */
+  onCounts?: (counts: { additions: number; deletions: number }) => void;
+  /** Nothing to compare (both sides empty). */
+  empty: boolean;
+  fontFamily: string;
+  fontSize: number;
+  /** The editor theme's CSS variables (`editorThemeVars`); absent means `auto`. */
+  themeVars?: Record<string, string>;
+  /** The two Shiki theme names to tokenize with. */
+  themes?: { light: string; dark: string };
+}
+
+export function MergeDiffView({
+  original,
+  next,
+  language,
+  viewMode,
+  contentMode,
+  wordWrap,
+  ignoreWhitespace,
+  tabKey,
+  onCounts,
+  empty,
+  fontFamily,
+  fontSize,
+  themeVars,
+  themes,
+}: MergeDiffViewProps) {
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const handleRef = useRef<DiffViewHandle | null>(null);
+  const [scroller, setScroller] = useState<HTMLElement | null>(null);
+  /** The pair the live view holds, so a change is a re-state rather than a re-mount. */
+  const pairRef = useRef<{ original: string; next: string }>({ original, next });
+
+  const left = ignoreWhitespace ? foldWhitespaceOnly(original, next) : original;
+
+  // The scroll offset is per SHAPE: unified and split rows are different
+  // heights, so one view's position says nothing about the other's. The hook
+  // wires the element's own `scroll` listener when it is handed one, so there is
+  // no binding to spread here.
+  useScrollRestore({
+    tabKey,
+    surface: viewMode === 'split' ? 'split' : 'unified',
+    element: scroller,
+  });
+
+  // Mount, and re-mount only when the SHAPE changes — the two shapes are
+  // different objects (an `EditorView` and a `MergeView`), so there is nothing
+  // to reconfigure between them.
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host || empty) return;
+    const options = {
+      original: left,
+      next,
+      language,
+      wordWrap,
+      collapse: contentMode,
+      themes,
+      scrollTestId: 'diff-scroller',
+      onScroller: setScroller,
+    } as const;
+    const handle =
+      viewMode === 'split' ? mountSplitDiff(host, { ...options }) : mountUnifiedDiff(host, { ...options });
+    handleRef.current = handle;
+    pairRef.current = { original: left, next };
+
+    return () => {
+      handle.destroy();
+      handleRef.current = null;
+    };
+    // Re-mounted on the shape, the language, the emptiness and the THEME only:
+    // every other input is a reconfigure below. A theme is baked into the
+    // tokenizer plugin (Shiki is handed theme NAMES at tokenize time), so a
+    // colour change rebuilds it — the documents are re-stated by the effect
+    // below, and a diff has no history to lose.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [viewMode, language, empty, themes?.light, themes?.dark]);
+
+  // Documents changed (a refresh, a stage, a discard, the whitespace toggle).
+  useEffect(() => {
+    const handle = handleRef.current;
+    if (!handle) return;
+    if (pairRef.current.original === left && pairRef.current.next === next) return;
+    pairRef.current = { original: left, next };
+    handle.setDocuments(left, next);
+  }, [left, next]);
+
+  useEffect(() => {
+    handleRef.current?.setCollapse(contentMode);
+  }, [contentMode]);
+
+  useEffect(() => {
+    handleRef.current?.setWordWrap(wordWrap);
+  }, [wordWrap]);
+
+  // Counts describe the pair ON SCREEN, so the badge cannot disagree with the
+  // rows under it (git's own `+n/-n` still counts a hidden whitespace change).
+  useEffect(() => {
+    if (!onCounts) return;
+    onCounts(empty ? { additions: 0, deletions: 0 } : countChanges(left, next));
+  }, [left, next, empty, onCounts]);
+
+  if (empty) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-ink/40 font-mono text-xs p-8">
+        No differences between working file and target.
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={hostRef}
+      className="flex-1 min-h-0 overflow-hidden bg-paper text-ink"
+      style={{
+        ...themeVars,
+        fontFamily,
+        fontSize: `${fontSize}px`,
+        lineHeight: EDITOR_LINE_HEIGHT,
+        // A short diff would otherwise leave the merge view's own height at the
+        // panel's, which is what its `.cm-mergeView` rule expects.
+        ['--surface-pad' as string]: '8px',
+      }}
+      // A read-only CodeMirror swallows `drop` too (its handler answers `true`
+      // for a read-only state, which cancels the event), so a file dropped on a
+      // diff would reach neither the panel's handler nor anything else. Marking
+      // the host is what lets the enclosing drop target claim the gesture in the
+      // CAPTURE phase and open the file — the same rule the code surface states.
+      data-code-surface=""
+    />
+  );
+}

package/src/client/components/workspace/diff-panel/ThemedMergeDiffView.tsx

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * `MergeDiffView` with the editor theme applied.
+ *
+ * A wrapper rather than a prop at the call site because the diff panel and the
+ * chat's diff card are the same surface: both must wear the editor theme the
+ * user picked, and the panel's own file is at the size ceiling. Keeping the
+ * subscription here means the theme reaches every diff with no second
+ * `useEditorTheme` call to keep in step.
+ */
+
+import { MergeDiffView } from '@/client/components/workspace/diff-panel/MergeDiffView';
+import { useEditorTheme } from '@/client/hooks/editor/theme';
+
+type MergeDiffViewProps = Parameters<typeof MergeDiffView>[0];
+
+export function ThemedMergeDiffView(props: MergeDiffViewProps) {
+  const editorTheme = useEditorTheme();
+  return <MergeDiffView {...props} themeVars={editorTheme.vars} themes={editorTheme.themes} />;
+}