@young1lin/dsh-ui-gitworkbench 0.1.7 → 0.1.8

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.8",
   "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,10 @@
 .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; }
 .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, highlightForRows, 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
@@ -5212,7 +5214,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 +5317,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 +5393,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 +5767,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 +5783,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 +5806,9 @@ function SideBySideView({ t, path, palette, statsPath, fetchSides, writeChecked,
                     </span>
                   </Fragment>
                 )
-              })
+              })}
+              <RowSpacer height={win.padBottom} />
+              </>
             )}
           </div>
         </div>
@@ -5785,7 +5826,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 +5846,7 @@ function SideBySideView({ t, path, palette, statsPath, fetchSides, writeChecked,
                   </Fragment>
                 )
               })}
+              <RowSpacer height={win.padBottom} />
             </div>
           )}
         </div>
@@ -5896,6 +5940,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('#')

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 : ''

package/src/client/row-window.ts

@@ -0,0 +1,132 @@
+/**
+ * Which rows a long diff actually has to put in the DOM.
+ *
+ * The side-by-side pane renders the WHOLE file in two columns, so its cost is
+ * linear in the file's length rather than in the size of the change. Measured
+ * on two files with one changed line each: 22 lines cost 349ms of main thread
+ * and 44 cells; 4,000 lines cost 3,868ms, 8,000 cells and 112,000 token spans,
+ * with a single 3.6-second frame during which nothing on the page moved. The
+ * guard lets a file through at 20,000 lines, which is five times that again.
+ *
+ * Windowing is exact here rather than approximate, because the pane's rows are
+ * a fixed height by construction: `.sideCode` is `white-space: pre` so no line
+ * ever wraps, and `.sideColGrid` sets `line-height` and `align-content: start`,
+ * which puts row `i` at `i * rowH` with no measuring at all.
+ *
+ * Pure: no React, no DOM. `tests/row-window.test.ts` loads it directly.
+ *
+ * @module @young1lin/dsh-ui-gitworkbench/client/row-window
+ */
+
+/** The pane's row height, matching `.sideColGrid`'s `line-height`. */
+export const DIFF_ROW_H = 20
+
+/**
+ * The grid's own top padding, from `.sideColGrid`.
+ *
+ * Only the change walk uses it, and only to place a block within the scrolled
+ * content. Being a few pixels out there is invisible — the walk deliberately
+ * leaves three rows of context above whatever it lands on, so this is well
+ * inside the margin it already keeps — which is why it is stated once here
+ * rather than published into the stylesheet as a custom property.
+ */
+export const DIFF_GRID_PAD_TOP = 8
+
+/**
+ * Files at or below this many rows are rendered whole.
+ *
+ * Windowing has its own costs — a scroll listener, two spacers, and rows that
+ * enter and leave the DOM — and none of them buys anything on a file that was
+ * never slow. Below the threshold the pane produces exactly the DOM it
+ * produced before, so the ordinary case is untouched by this change.
+ */
+export const WINDOW_WHOLE_BELOW = 400
+
+/**
+ * Rows kept beyond each edge of the viewport.
+ *
+ * Enough that a flick of the wheel lands on rows that are already there:
+ * dropping this to zero makes a fast scroll show blank bands, and raising it
+ * far just renders the file again.
+ */
+export const WINDOW_OVERSCAN = 40
+
+/**
+ * A viewport height to assume before the scroller has been measured.
+ *
+ * The first paint happens before any layout effect runs. Rendering nothing
+ * until the height is known would flash an empty pane; a screenful is both
+ * safe and close.
+ */
+const ASSUMED_VIEWPORT_PX = 1200
+
+/** The rows to render, and the empty space standing in for the rest. */
+export interface RowWindow {
+  /** First row to render. */
+  readonly start: number
+  /** One past the last row to render. */
+  readonly end: number
+  /** Height of the spacer above, in px. */
+  readonly padTop: number
+  /** Height of the spacer below, in px. */
+  readonly padBottom: number
+}
+
+/**
+ * @param value - a number from the DOM, which can be NaN or negative.
+ * @param fallback - used when it is neither finite nor usable.
+ * @returns a finite, non-negative number.
+ */
+function sane(value: number, fallback: number): number {
+  return Number.isFinite(value) && value > 0 ? value : fallback
+}
+
+/**
+ * The window of rows to render for a given scroll position.
+ *
+ * @param scrollTop - the scroller's current offset in px.
+ * @param viewportH - the scroller's visible height in px; 0 before it is measured.
+ * @param rowCount - how many rows the file has.
+ * @param rowH - row height in px.
+ * @param overscan - rows to keep beyond each edge.
+ * @returns the rows to render and the spacer heights standing in for the rest.
+ */
+export function rowWindow(
+  scrollTop: number,
+  viewportH: number,
+  rowCount: number,
+  rowH: number = DIFF_ROW_H,
+  overscan: number = WINDOW_OVERSCAN,
+): RowWindow {
+  const rows = Math.max(0, Math.trunc(rowCount))
+  const height = sane(rowH, DIFF_ROW_H)
+  if (rows <= WINDOW_WHOLE_BELOW) return { start: 0, end: rows, padTop: 0, padBottom: 0 }
+
+  const top = Number.isFinite(scrollTop) && scrollTop > 0 ? scrollTop : 0
+  const view = sane(viewportH, ASSUMED_VIEWPORT_PX)
+  const pad = Math.max(0, Math.trunc(overscan))
+
+  const first = Math.max(0, Math.floor(top / height) - pad)
+  const last = Math.min(rows, Math.ceil((top + view) / height) + pad)
+  // Scrolled past the end (a file that shrank under a live poll), `last` can
+  // land below `first`; an empty window is still a valid answer, and the
+  // spacers must add up to the full height either way.
+  const start = Math.min(first, rows)
+  const end = Math.max(start, last)
+  return { start, end, padTop: start * height, padBottom: (rows - end) * height }
+}
+
+/**
+ * Where a row sits inside the scroller, without touching the DOM.
+ *
+ * The change walk used to measure this off `getBoundingClientRect`, which
+ * stops working the moment a row it wants is outside the window — and a
+ * windowed pane's next change is very often exactly that.
+ *
+ * @param index - the row's index.
+ * @param rowH - row height in px.
+ * @returns the row's offset from the top of the scrolled content.
+ */
+export function rowTop(index: number, rowH: number = DIFF_ROW_H): number {
+  return Math.max(0, Math.trunc(index)) * sane(rowH, DIFF_ROW_H)
+}