@young1lin/dsh-ui-gitworkbench 0.1.7 → 0.1.9

package/lib/index.js

@@ -100,8 +100,6 @@ import { bindingsPath, findRegisteredWorktree, isRefName, loadBindings, parseWor
 const DIFF_CHAR_CAP = 400_000;
 /** Untracked files larger than this are listed + counted but never diffed. */
 const UNTRACKED_FILE_BYTE_CAP = 1_000_000;
-/** At most this many bytes of synthesized untracked diff ride along in `stats`. */
-const UNTRACKED_TOTAL_CHAR_CAP = 160_000;
 /** Files with a NUL byte in the first 8k are treated as binary. */
 const BINARY_SNIFF_BYTES = 8_000;
 /** Context radius that makes `git diff` emit ONE hunk covering the whole file —
@@ -391,13 +389,21 @@ let GitWorkbenchService = (() => {
         /** Working-tree change stats for a worktree (plain-identifier params; signal last — SRC requirements). */
         async stats(worktreePath, signal) {
             const cwd = typeof worktreePath === 'string' && worktreePath.length > 0 ? worktreePath : process.cwd();
-            // Four independent reads of the same worktree. Running them together is
+            // Three independent reads of the same worktree. Running them together is
             // safe: git takes .git/index.lock only to write back a refreshed index and
             // skips that write when it cannot get the lock, so the reports stay correct.
-            const [statusInfo, numstat, diff, revInfo] = await Promise.all([
+            //
+            // `git diff HEAD` is NOT among them any more. This call is polled — every
+            // 3 seconds while an agent is running — and the full patch is the most
+            // expensive thing in it by a wide margin: measured on a worktree with
+            // 90,000 changed lines it took 595ms and produced 7.43MB, of which the
+            // 400,000-character clip below then discarded 94.6% before it ever reached
+            // the browser. The tree and the counters need only `status` and
+            // `--numstat`, both of which stay around 110-140ms at that size, and the
+            // pane already fetches the file it is actually showing through `fileDiff`.
+            const [statusInfo, numstat, revInfo] = await Promise.all([
                 this.git(cwd, ['status', '--porcelain=v1', '--branch', '--untracked-files=all'], signal),
                 this.git(cwd, ['diff', 'HEAD', '--numstat'], signal),
-                this.git(cwd, ['diff', 'HEAD'], signal),
                 this.git(cwd, ['rev-parse', '--abbrev-ref', 'HEAD'], signal),
             ]);
             if (statusInfo.exitCode !== 0) {
@@ -406,26 +412,17 @@ let GitWorkbenchService = (() => {
             }
             const counts = parseNumstat(numstat.stdout);
             const files = parseStatus(statusInfo.stdout, counts);
-            // Untracked files in two passes, because the two halves cost wildly
-            // different amounts. EVERY untracked file needs a line count and a binary
-            // flag, which come off the raw buffer with no utf8 decode; only the handful
-            // that fit the payload budget pay for a decode and a synthesized segment.
+            // Every untracked file needs a line count and a binary flag for the tree,
+            // and both come off the raw buffer with no utf8 decode. The second pass
+            // that used to follow — decoding some of them and synthesizing new-file
+            // segments into the payload — is gone with the payload itself; `fileDiff`
+            // synthesizes the one segment the reader has actually opened.
             const untracked = files.filter(file => file.status === 'untracked');
             const measured = await mapPooled(untracked, UNTRACKED_READ_CONCURRENCY, file => measureUntracked(cwd, file.path));
-            let budget = UNTRACKED_TOTAL_CHAR_CAP;
-            let untrackedDiff = '';
             for (const [index, file] of untracked.entries()) {
                 const measure = measured[index];
                 file.addedLines = measure.lineCount;
                 file.binary = measure.binary;
-                if (budget <= 0 || !measure.diffable)
-                    continue;
-                const segment = await untrackedSegment(cwd, file.path);
-                if (segment === null)
-                    continue;
-                const text = clipDiff(segment, budget, '…[untracked diff truncated]');
-                untrackedDiff += `${text}\n`;
-                budget -= text.length;
             }
             let addedLines = 0;
             let deletedLines = 0;
@@ -459,28 +456,51 @@ let GitWorkbenchService = (() => {
                 }
             }
             const { ahead, behind } = parseBranch(statusInfo.stdout);
-            let combined = diff.stdout;
-            if (untrackedDiff.length > 0)
-                combined += `\n${untrackedDiff}`;
-            combined = clipDiff(combined, DIFF_CHAR_CAP, '…[diff truncated]');
             return {
                 worktreePath: cwd, branch, ahead, behind, detached,
                 addedLines, deletedLines, addedFiles, deletedFiles, modifiedFiles,
-                files, diff: combined,
+                // No bundled patch: every per-file diff is fetched on demand. See the
+                // reads above for what that saves and why it is affordable.
+                files, diff: '',
                 // No log here: this call is polled every 15s, and the history list follows
                 // a ref this one knows nothing about. `commits` serves it instead.
                 commits: [],
             };
         }
         /**
-         * One file's diff on demand. With `commit` the diff is that commit's change to
-         * the file; without it, the working tree against HEAD (plain-identifier params;
-         * signal last).
+         * One file's diff on demand, for whichever view is asking.
+         *
+         * Three questions, because the drawer's three tabs are asking three different
+         * things about the same path and only the caller knows which:
+         *
+         *   - with `commit`, that commit's change to the file;
+         *   - with `base` and `head`, what differs between two refs — the Compare
+         *     tab, which until now had no way to ask at all and showed a file with no
+         *     detail whenever the bundled payload did not carry it;
+         *   - with neither, the working tree against HEAD.
+         *
+         * The range answer is deliberately NOT cached, for the same reason
+         * `compareRefs` is not: a ref name is a moving pointer, unlike a commit hash.
+         *
+         * Plain-identifier params, signal last.
          */
-        async fileDiff(worktreePath, path, commit, signal) {
+        async fileDiff(worktreePath, path, commit, base, head, signal) {
             const cwd = typeof worktreePath === 'string' && worktreePath.length > 0 ? worktreePath : process.cwd();
             if (typeof path !== 'string' || path.length === 0)
                 return { diff: '' };
+            if (typeof base === 'string' && base.length > 0 && typeof head === 'string' && head.length > 0) {
+                if (!isRefName(base) || !isRefName(head))
+                    return { diff: '' };
+                const ranged = await this.git(cwd, ['diff', '--no-renames', `${base}...${head}`, '--', path], signal);
+                if (ranged.exitCode === 0)
+                    return { diff: ranged.stdout };
+                // Unrelated histories have no merge base for `A...B` to diff from; the
+                // two-tip diff still answers what differs, exactly as `compareRefs` does.
+                if (!isNoMergeBaseError(ranged.stderr))
+                    return { diff: '' };
+                const tips = await this.git(cwd, ['diff', '--no-renames', base, head, '--', path], signal);
+                return { diff: tips.exitCode === 0 ? tips.stdout : '' };
+            }
             if (typeof commit === 'string' && commit.length > 0) {
                 if (!COMMIT_HASH.test(commit))
                     return { diff: '' };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@young1lin/dsh-ui-gitworkbench",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Out-of-tree dsh web UI plugin: a session-header git workbench chip opening a drawer with the file tree, per-file diff, history, compare, staging, commit, and sync (fetch/pull/push).",
   "type": "module",
   "main": "lib/index.js",

package/src/client/GitWorkbenchPanel.module.css

@@ -1806,6 +1806,13 @@
 .sideNumAdd { background: var(--gs-add-num, var(--gs-add-line)); }
 .sideNumDel { background: var(--gs-del-num, var(--gs-del-line)); }
 .sideCode { white-space: pre; padding: 0 16px 0 10px; min-height: 20px; }
+/* Stands in for the rows outside the window, so the scrollbar is the length of
+   the FILE rather than of whatever is currently rendered. Spans every column,
+   including the blame gutter's. */
+.sideSpacer { grid-column: 1 / -1; }
+/* The same, for the unified view's flex column. `flex: none` so it is exactly
+   the height it claims rather than one stretched by its siblings. */
+.diffSpacer { flex: none; }
 .sideCodeSame { color: var(--gs-fg-muted); }
 .sideCodeAdd { background: var(--gs-add-line); }
 .sideCodeDel { background: var(--gs-del-line); }

package/src/client/GitWorkbenchPanel.tsx

@@ -58,8 +58,9 @@ import {
 import { attachWordRanges, gutterSides, overlayRanges, parseRows, type Row, type RowWithRanges } from './diff-model.ts'
 import { parsePatch } from '../patch-model.ts'
 import { alignRows, blockCount, blockIsWholeFile, blockLines, blockTally, sideBodyState, type SideCell, type SideRow } from './side-rows.ts'
-import { countBlocks, unifiedBlocks } from './diff-nav.ts'
+import { blockTopsFromRows, countBlocks, unifiedBlocks } from './diff-nav.ts'
 import { clampPane, neighbourWidth } from './pane-size.ts'
+import { DIFF_GRID_PAD_TOP, DIFF_ROW_H, rowWindow, type RowWindow } from './row-window.ts'
 import { COMMIT_ROW_H, DEFAULT_HISTORY_LAYOUT, isHistoryLayout, type HistoryLayout } from './history-layout.ts'
 import { useChangeNav } from './use-change-nav.ts'
 import {
@@ -88,7 +89,7 @@ import {
   fileCheckState, nextAction, nextBatch, pathsFor, rollUp, settledTicks, withPendingTicks,
   type CheckState, type Tick, type TickAction,
 } from './stage-tree.ts'
-import { grammarLoadCount, highlightFile, highlightForRows, highlightWholeFile, shikiLangOf, shikiThemeOf, subscribeGrammarLoaded, type HighlightRun } from './highlight.ts'
+import { grammarLoadCount, highlightFile, highlightForRowsWindow, highlightWholeFile, highlightWindow, shikiLangOf, shikiThemeOf, subscribeGrammarLoaded, type HighlightRun } from './highlight.ts'
 import { badgeRepeatsBranch, bindingChanged, branchOfWorktree, pathKey, probesClosedBinding, samePath, showsPending, splitPath, turnSettled, viewedPath } from './worktree-view.ts'
 import { BUSY_DELAY_MS, BUSY_HOLD_MS, holdRemaining, quietlyDisabled } from './op-feedback.ts'
 import type { WorkbenchKey } from './locales.ts'
@@ -348,7 +349,7 @@ export type Translate = (key: string, params?: Record<string, string | number>)
 type Props = PropsRuntime<'conversation.session.header.actions'> & {
   readonly t: Translate
   readonly fetchStats: (worktreePath: string | undefined, signal: AbortSignal) => Promise<WorkbenchStats | null>
-  readonly fetchFileDiff: (worktreePath: string | undefined, path: string, commit: string | undefined, signal: AbortSignal) => Promise<string>
+  readonly fetchFileDiff: (worktreePath: string | undefined, path: string, commit: string | undefined, range: { base: string; head: string } | undefined, signal: AbortSignal) => Promise<string>
   /** One layer of one file for the side-by-side diff pane. */
   readonly fetchFileSides: (worktreePath: string | undefined, path: string, layer: SideLayer, signal: AbortSignal) => Promise<FileSides | null>
   /** Save the editor buffer, checked against the sha it opened with. */
@@ -1189,14 +1190,15 @@ export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetch
    *  drawer's on-demand effect stops re-running on every render. */
   const fetchDiffForView = useCallback(
     (path: string, signal: AbortSignal): Promise<string> => {
-      // A comparison's per-file diff would need the ref range, which `fileDiff`
-      // does not take. Answering with the working tree's diff for that path
-      // would be plainly wrong, so a file past the payload cap simply has no
-      // detail on this tab.
-      if (tab === 'compare') return Promise.resolve('')
-      return fetchFileDiff(statsPath, path, tab === 'history' ? commitHash ?? undefined : undefined, signal)
+      // Each tab asks its own question about the path. Compare used to ask
+      // nothing at all — `fileDiff` had no way to take a ref range, so a file
+      // the bundled payload did not carry simply had no detail, which is what
+      // an added XML file past the payload cap looked like.
+      const range = tab === 'compare' ? { base: baseRef, head: headRef } : undefined
+      const commit = tab === 'history' ? commitHash ?? undefined : undefined
+      return fetchFileDiff(statsPath, path, commit, range, signal)
     },
-    [fetchFileDiff, statsPath, tab, commitHash],
+    [fetchFileDiff, statsPath, tab, commitHash, baseRef, headRef],
   )
 
   // First stats fetch still in flight: render nothing. The cheap binding RPC
@@ -5057,14 +5059,25 @@ function DiffView({ segment, path, palette, t }: {
   const grammarGen = useSyncExternalStore(subscribeGrammarLoaded, grammarLoadCount)
   const rowsWithWords = useMemo(() => attachWordRanges(parseRows(segment)), [segment])
   const sides = useMemo(() => gutterSides(rowsWithWords), [rowsWithWords])
+  const scrollRef = useRef<HTMLDivElement>(null)
+  // Windowed for the same reason the side-by-side pane is: a unified diff of a
+  // long file put every row in the DOM and re-lexed every one of them, so
+  // opening one froze the pane in exactly the same way.
+  const win = useRowWindow(scrollRef, rowsWithWords.length)
   const syntax = useMemo(
-    () => highlightForRows(rowsWithWords, lang, shikiTheme),
-    [rowsWithWords, lang, shikiTheme, grammarGen],
+    () => highlightForRowsWindow(rowsWithWords, lang, shikiTheme, win.start, win.end),
+    [rowsWithWords, lang, shikiTheme, win.start, win.end, grammarGen],
   )
   const blocks = useMemo(() => unifiedBlocks(rowsWithWords.map(row => row.kind)), [rowsWithWords])
   const changes = useMemo(() => countBlocks(blocks), [blocks])
-  const scrollRef = useRef<HTMLDivElement>(null)
-  const { goToChange } = useChangeNav(scrollRef)
+  // Derived rather than measured, because a windowed pane has no element for
+  // the block being walked to.
+  const blocksForNav = useRef<readonly number[]>(blocks)
+  blocksForNav.current = blocks
+  const { goToChange } = useChangeNav(
+    scrollRef,
+    useCallback(() => blockTopsFromRows(blocksForNav.current, DIFF_ROW_H, DIFF_GRID_PAD_TOP), []),
+  )
   // Read by the key listener below, which is attached once. `goToChange` only
   // ever touches refs, but pinning it here says so rather than relying on it.
   const walk = useRef(goToChange)
@@ -5110,7 +5123,10 @@ function DiffView({ segment, path, palette, t }: {
       ) : null}
       <div ref={scrollRef} className={css.diffScroll} tabIndex={-1}>
     <pre className={css.diffPre}>
-      {rowsWithWords.map((row, i) => (
+      {win.padTop > 0 ? <div className={css.diffSpacer} style={{ height: `${win.padTop}px` }} aria-hidden="true" /> : null}
+      {rowsWithWords.slice(win.start, win.end).map((row, k) => {
+        const i = win.start + k
+        return (
         <div key={i} className={`${css.line} ${rowClass(row.kind)}`} data-block={blocks[i]! >= 0 ? blocks[i] : undefined}>
           {sides.old ? <span className={css.lnOld}>{row.kind === 'add' || row.kind === 'hunk' ? '' : row.oldL}</span> : null}
           {sides.new ? <span className={css.lnNew}>{row.kind === 'del' || row.kind === 'hunk' ? '' : row.newL}</span> : null}
@@ -5119,7 +5135,9 @@ function DiffView({ segment, path, palette, t }: {
           </span>
           <span className={css.code}>{renderCode(row, syntax[i] ?? [])}</span>
         </div>
-      ))}
+        )
+      })}
+      {win.padBottom > 0 ? <div className={css.diffSpacer} style={{ height: `${win.padBottom}px` }} aria-hidden="true" /> : null}
     </pre>
       </div>
     </div>
@@ -5212,7 +5230,16 @@ function SideBySideView({ t, path, palette, statsPath, fetchSides, writeChecked,
   const colsRef = useRef<HTMLDivElement>(null)
   /** The pane's one vertical scroller — what "next change" moves. */
   const scrollRef = useRef<HTMLDivElement>(null)
-  const { goToChange } = useChangeNav(scrollRef)
+  /** Where the rows are, filled in below once they exist. A ref, because the
+   *  walk is set up here and the rows are decided further down; reading it
+   *  only when a key is pressed is what lets the two live apart. */
+  const rowsForNav = useRef<readonly number[]>([])
+  const { goToChange } = useChangeNav(
+    scrollRef,
+    // Derived, not measured: the pane renders only the rows near the viewport
+    // now, so the block being walked to usually has no element at all.
+    useCallback(() => blockTopsFromRows(rowsForNav.current, DIFF_ROW_H, DIFF_GRID_PAD_TOP), []),
+  )
 
   const [sides, setSides] = useState<FileSides | null>(null)
   // Set when the RPC itself failed — most plausibly a host half older than
@@ -5306,13 +5333,25 @@ function SideBySideView({ t, path, palette, statsPath, fetchSides, writeChecked,
   // `undefined` and renders the plain text for it; what crashes is indexing
   // the array itself, and `strict` is off in tsconfig, so the compiler will
   // not say so.
+  // Only the rows the reader can see reach the DOM, and only they are re-lexed
+  // line by line. Declared here because both the render and the highlighting
+  // below are bounded by it.
+  const win = useRowWindow(scrollRef, rows.length)
+  //
+  // Two passes with two lifetimes. The whole-file pass runs once per file and
+  // is what knows about block comments and template literals; the per-line
+  // re-lex — one Shiki call each, and the reason a 4,000-line file froze the
+  // pane for 2.8 seconds — runs only over the rows in the window, and so again
+  // whenever the reader scrolls.
+  const leftLines = useMemo(() => rows.map(row => row.left === null ? '' : row.left.text), [rows])
+  const rightLines = useMemo(() => rows.map(row => row.right === null ? '' : row.right.text), [rows])
   const leftSyntax = useMemo(
-    () => highlightFile(rows.map(row => row.left === null ? '' : row.left.text), lang, shikiTheme),
-    [rows, lang, shikiTheme, grammarGen],
+    () => highlightWindow(leftLines, lang, shikiTheme, win.start, win.end),
+    [leftLines, lang, shikiTheme, win.start, win.end, grammarGen],
   )
   const rightSyntax = useMemo(
-    () => highlightFile(rows.map(row => row.right === null ? '' : row.right.text), lang, shikiTheme),
-    [rows, lang, shikiTheme, grammarGen],
+    () => highlightWindow(rightLines, lang, shikiTheme, win.start, win.end),
+    [rightLines, lang, shikiTheme, win.start, win.end, grammarGen],
   )
 
   /** The editor half of the pane, present only on the unstaged layer. */
@@ -5370,6 +5409,14 @@ function SideBySideView({ t, path, palette, statsPath, fetchSides, writeChecked,
   // editor. Each entry keeps its index into `rows` for its syntax tokens.
   const leftRows = useMemo(() => rows.map((row, i) => ({ row, i })).filter(entry => entry.row.left !== null), [rows])
 
+  // Only the rows the reader can see reach the DOM. Two windows because the
+  // two columns render two different row lists while the editor is armed: the
+  // right side is a buffer, and the left side is then the index side DENSE,
+  // one row per index line rather than one per aligned row.
+  const leftWin = useRowWindow(scrollRef, leftRows.length)
+  // Kept current for the change walk set up at the top of this component.
+  rowsForNav.current = useMemo(() => rows.map(row => row.block), [rows])
+
   // Arming drops the caret straight into the buffer: the click that armed the
   // editor said "I want to type here", and a second click to focus is a tax.
 
@@ -5736,7 +5783,10 @@ function SideBySideView({ t, path, palette, statsPath, fetchSides, writeChecked,
                  one row per index line, no diff holes — because the right
                  column is a buffer whose line count diverges from the diff
                  the moment a keystroke lands. */
-              leftRows.map((entry, k) => {
+              <>
+              <RowSpacer height={leftWin.padTop} />
+              {leftRows.slice(leftWin.start, leftWin.end).map((entry, kk) => {
+                const k = leftWin.start + kk
                 const { row, i } = entry
                 const hot = hotBlock !== null && row.block === hotBlock
                 const hotClass = hot ? ` ${css.sideBlockHot}` : ''
@@ -5749,9 +5799,14 @@ function SideBySideView({ t, path, palette, statsPath, fetchSides, writeChecked,
                     </span>
                   </Fragment>
                 )
-              })
+              })}
+              <RowSpacer height={leftWin.padBottom} />
+              </>
             ) : (
-              rows.map((row, i) => {
+              <>
+              <RowSpacer height={win.padTop} />
+              {rows.slice(win.start, win.end).map((row, k) => {
+                const i = win.start + k
                 const hot = hotBlock !== null && row.block === hotBlock
                 const hotClass = hot ? ` ${css.sideBlockHot}` : ''
                 // The block's action bar rides in this column only for a row
@@ -5767,7 +5822,9 @@ function SideBySideView({ t, path, palette, statsPath, fetchSides, writeChecked,
                     </span>
                   </Fragment>
                 )
-              })
+              })}
+              <RowSpacer height={win.padBottom} />
+              </>
             )}
           </div>
         </div>
@@ -5785,7 +5842,9 @@ function SideBySideView({ t, path, palette, statsPath, fetchSides, writeChecked,
             />
           ) : (
             <div className={css.sideColGrid}>
-              {rows.map((row, i) => {
+              <RowSpacer height={win.padTop} />
+              {rows.slice(win.start, win.end).map((row, k) => {
+                const i = win.start + k
                 const hot = hotBlock !== null && row.block === hotBlock
                 const hotClass = hot ? ` ${css.sideBlockHot}` : ''
                 const bar = hot && i === hotFirst && row.right !== null ? blockBar(row.block) : null
@@ -5803,6 +5862,7 @@ function SideBySideView({ t, path, palette, statsPath, fetchSides, writeChecked,
                   </Fragment>
                 )
               })}
+              <RowSpacer height={win.padBottom} />
             </div>
           )}
         </div>
@@ -5896,6 +5956,58 @@ function renderSideCode(cell: SideCell | null, tokens: readonly HighlightRun[] |
 
 /* ---------- shared helpers ---------- */
 
+/**
+ * The rows a diff actually has to put in the DOM, tracked against its scroller.
+ *
+ * Rendering a whole file cost the pane 3.9 seconds of main thread and a
+ * 3.6-second frozen frame at 4,000 lines — for a one-line change, because the
+ * side-by-side view draws every line of the file whether it changed or not.
+ * This is the fix that removes the length from the cost rather than capping it.
+ *
+ * The window is held in state rather than the raw scroll offset so a scroll
+ * that does not move it renders nothing: `start` only changes once a whole row
+ * has passed under the viewport's edge.
+ *
+ * @param scrollRef - the element that scrolls the rows.
+ * @param rowCount - how many rows the diff has.
+ * @returns the rows to render and the spacer heights standing in for the rest.
+ */
+function useRowWindow(scrollRef: { current: HTMLElement | null }, rowCount: number): RowWindow {
+  const [win, setWin] = useState<RowWindow>(() => rowWindow(0, 0, rowCount))
+  useEffect(() => {
+    const el = scrollRef.current
+    if (el === null) return
+    const read = (): void => {
+      const next = rowWindow(el.scrollTop, el.clientHeight, rowCount)
+      setWin(prev => prev.start === next.start && prev.end === next.end ? prev : next)
+    }
+    read()
+    // Passive: this listener never calls preventDefault, and saying so keeps
+    // it off the scroll's critical path.
+    el.addEventListener('scroll', read, { passive: true })
+    // The drawer resizes without the page doing so — a dragged edge, the
+    // maximize button — and a taller pane needs more rows.
+    const observer = new ResizeObserver(read)
+    observer.observe(el)
+    return () => {
+      el.removeEventListener('scroll', read)
+      observer.disconnect()
+    }
+  }, [scrollRef, rowCount])
+  return win
+}
+
+/**
+ * The spacer standing in for the rows above or below the window.
+ *
+ * It spans every column of the grid, so a blame gutter does not change it.
+ * @param height - px of rows it stands in for; nothing is rendered for 0.
+ */
+function RowSpacer({ height }: { height: number }): ReactNode {
+  if (height <= 0) return null
+  return <span className={css.sideSpacer} style={{ height: `${height}px` }} aria-hidden="true" />
+}
+
 /** Split a combined `git diff` into path -> its segment text. */
 function splitDiff(diff: string): Map<string, string> {
   const out = new Map<string, string>()

package/src/client/diff-nav.ts

@@ -196,3 +196,31 @@ export function countBlocks(ids: readonly number[]): number {
   for (const id of ids) if (id > top) top = id
   return top + 1
 }
+
+/**
+ * Where each change block sits, derived from the rows rather than measured.
+ *
+ * A windowed pane cannot measure: the block being walked to usually has no
+ * element, because the whole point is that it is not on screen. The rows are a
+ * fixed height there by construction, so the position is arithmetic.
+ *
+ * @param blocks - each row's block id, `-1` for a row that is not part of one.
+ * @param rowH - row height in px.
+ * @param offset - px above the first row, e.g. the grid's top padding.
+ * @returns the first row of each block, in the order the blocks appear.
+ */
+export function blockTopsFromRows(
+  blocks: readonly number[],
+  rowH: number,
+  offset = 0,
+): readonly BlockTop[] {
+  const tops: BlockTop[] = []
+  const seen = new Set<number>()
+  for (let i = 0; i < blocks.length; i += 1) {
+    const block = blocks[i]!
+    if (!Number.isInteger(block) || block < 0 || seen.has(block)) continue
+    seen.add(block)
+    tops.push({ block, top: offset + i * rowH })
+  }
+  return tops
+}

package/src/client/highlight.ts

@@ -223,6 +223,62 @@ export function highlightWholeFile(
   return tokenizeLines(lines, lang, theme)
 }
 
+/**
+ * How many lines above the window are tokenized for context.
+ *
+ * Shiki lexes a string from its start, so a slice beginning inside a block
+ * comment or a template literal would colour as if it were code. Reading a
+ * lead-in restores that state for everything but a construct longer than this,
+ * at a fraction of the cost of the file: at 4,000 lines the whole-file pass was
+ * the entire remaining freeze once the DOM was bounded.
+ */
+export const HIGHLIGHT_LEAD_IN = 240
+
+/**
+ * Runs for the rows in a window, and nothing outside it.
+ *
+ * This is the pane's whole highlighting cost now, and it is proportional to the
+ * viewport rather than to the file. Measured on a 4,000-line file with a
+ * one-line change: whole-file passes plus per-line re-lexing froze the pane for
+ * 1.4 seconds; the same file behind an extension no grammar claims cost 22ms of
+ * script, which is what proved the entire remainder was Shiki.
+ *
+ * Both passes happen inside the window: the slice pass, which knows about
+ * multi-line constructs within its reach, and the per-line re-lex that makes a
+ * diff reconstruction colour as top-level code.
+ *
+ * @param lines - source lines, no leading +/-.
+ * @param lang - from {@link shikiLangOf}.
+ * @param theme - from {@link shikiThemeOf}.
+ * @param from - first row in the window.
+ * @param to - one past the last row in the window.
+ * @returns an array indexed by ROW, filled only inside the window; undefined
+ *   when no grammar applies, which the caller already renders as plain text.
+ */
+export function highlightWindow(
+  lines: readonly string[],
+  lang: string | undefined,
+  theme: string,
+  from: number,
+  to: number,
+): (HighlightRun[] | undefined)[] | undefined {
+  const first = Math.max(0, Math.trunc(from))
+  const last = Math.min(lines.length, Math.trunc(to))
+  if (last <= first) return undefined
+  const lead = Math.max(0, first - HIGHLIGHT_LEAD_IN)
+  const sliceTok = tokenizeLines(lines.slice(lead, last), lang, theme)
+  if (sliceTok === undefined) return undefined
+  const out: (HighlightRun[] | undefined)[] = new Array<HighlightRun[] | undefined>(lines.length)
+  for (let i = first; i < last; i += 1) {
+    const line = lines[i]!
+    const together = sliceTok[i - lead] ?? [{ text: line, color: undefined }]
+    if (looksLikeCommentLine(line)) { out[i] = together; continue }
+    const solo = tokenizeLines([line], lang, theme)?.[0]
+    out[i] = solo !== undefined && solo.length > 0 ? solo : together
+  }
+  return out
+}
+
 function looksLikeCommentLine(text: string): boolean {
   const t = text.trimStart()
   return t.startsWith('//') || t.startsWith('/*') || t.startsWith('*') || t.startsWith('#')
@@ -261,6 +317,39 @@ export function highlightForRows(
   lang: string | undefined,
   theme = 'github-dark-default',
 ): HighlightRun[][] {
+  // One implementation, asked for the whole range. The panes all window now;
+  // this shape is what a caller wants when it really does need every row.
+  return highlightForRowsWindow(rows, lang, theme, 0, rows.length)
+    .map((runs, i) => runs ?? [{ text: rows[i]!.text, color: undefined }])
+}
+
+/**
+ * {@link highlightForRows} for the rows in a window, and nothing outside it.
+ *
+ * Same reason as {@link highlightWindow}, in the view History and Compare use:
+ * a unified diff of a long file re-lexed every one of its rows, so opening one
+ * froze the pane exactly as the side-by-side view did.
+ *
+ * The mapping from rows to the two sides' line arrays is built over ALL rows —
+ * it is array bookkeeping with no Shiki in it, and a row's position on its side
+ * depends on every row before it. Only the tokenizing is windowed, and because
+ * a window of rows is contiguous, so is the span of lines it needs from each
+ * side.
+ *
+ * @param rows - parsed unified-diff rows.
+ * @param lang - from {@link shikiLangOf}.
+ * @param theme - from {@link shikiThemeOf}.
+ * @param from - first row in the window.
+ * @param to - one past the last row in the window.
+ * @returns an array indexed by ROW, filled only inside the window.
+ */
+export function highlightForRowsWindow(
+  rows: readonly Row[],
+  lang: string | undefined,
+  theme: string,
+  from: number,
+  to: number,
+): (HighlightRun[] | undefined)[] {
   const oldLines: string[] = []
   const newLines: string[] = []
   const oldAt: number[] = []
@@ -284,11 +373,29 @@ export function highlightForRows(
       newAt.push(-1)
     }
   }
-  const oldTok = highlightFile(oldLines, lang, theme)
-  const newTok = highlightFile(newLines, lang, theme)
-  return rows.map((row, i) => {
-    if (row.kind === 'del') return oldTok?.[oldAt[i]!] ?? [{ text: row.text, color: undefined }]
-    if (row.kind === 'add' || row.kind === 'context') return newTok?.[newAt[i]!] ?? [{ text: row.text, color: undefined }]
-    return [{ text: row.text, color: undefined }]
-  })
+  const first = Math.max(0, Math.trunc(from))
+  const last = Math.min(rows.length, Math.trunc(to))
+  const span = (at: readonly number[]): { from: number; to: number } => {
+    let lo = -1
+    let hi = -1
+    for (let i = first; i < last; i += 1) {
+      const j = at[i]!
+      if (j < 0) continue
+      if (lo < 0) lo = j
+      hi = j
+    }
+    return lo < 0 ? { from: 0, to: 0 } : { from: lo, to: hi + 1 }
+  }
+  const oldSpan = span(oldAt)
+  const newSpan = span(newAt)
+  const oldTok = highlightWindow(oldLines, lang, theme, oldSpan.from, oldSpan.to)
+  const newTok = highlightWindow(newLines, lang, theme, newSpan.from, newSpan.to)
+  const out: (HighlightRun[] | undefined)[] = new Array<HighlightRun[] | undefined>(rows.length)
+  for (let i = first; i < last; i += 1) {
+    const row = rows[i]!
+    if (row.kind === 'del') out[i] = oldTok?.[oldAt[i]!] ?? [{ text: row.text, color: undefined }]
+    else if (row.kind === 'add' || row.kind === 'context') out[i] = newTok?.[newAt[i]!] ?? [{ text: row.text, color: undefined }]
+    else out[i] = [{ text: row.text, color: undefined }]
+  }
+  return out
 }

package/src/client/index.ts

@@ -73,11 +73,19 @@ export function apply(ctx: ClientContext): void {
         },
         // On-demand single-file diff. With `commit` it is that commit's change to the
         // file; without it, the working tree (tracked: git diff HEAD --; untracked: synthesized).
-        fetchFileDiff: async (worktreePath: string | undefined, path: string, commit: string | undefined, signal: AbortSignal): Promise<string> => {
+        fetchFileDiff: async (worktreePath: string | undefined, path: string, commit: string | undefined, range: { base: string; head: string } | undefined, signal: AbortSignal): Promise<string> => {
           const result = await connection.rpc.call(
             '/api',
             'gitWorkbench/fileDiff',
-            { args: { worktreePath: worktreePath ?? '', path, ...commit === undefined ? {} : { commit } } },
+            {
+              args: {
+                worktreePath: worktreePath ?? '', path,
+                // Omitted rather than sent as undefined: a JSON payload with an
+                // undefined value is not what the gateway reads back.
+                ...commit === undefined ? {} : { commit },
+                ...range === undefined ? {} : { base: range.base, head: range.head },
+              },
+            },
             signal,
           ) as { ok: true; value: { diff: string } } | { ok: false; error: { message?: string } }
           return result.ok ? result.value.diff : ''