@young1lin/dsh-ui-gitworkbench 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@young1lin/dsh-ui-gitworkbench",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "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/CodeEditor.tsx

@@ -9,10 +9,11 @@
  * anyone who has used an editor, and the pane was asking people to edit.
  *
  * CodeMirror is here for the EDITING only. Highlighting still comes from
- * shiki, through {@link tokenRanges}: the diff columns beside this editor are
+ * shiki, through {@link PaintFn}: the diff columns beside this editor are
  * painted by shiki, and a second grammar engine would cost another megabyte of
- * bundle to render the same file in slightly different colours. So the tokens
- * the pane already computed are handed over as decorations.
+ * bundle to render the same file in slightly different colours. The pane hands
+ * over a function rather than a file of tokens, and this view calls it for the
+ * lines it is about to show - see {@link PaintLayer}.
  *
  * The document is CONTROLLED by the pane, not owned here: `value` is the
  * pane's buffer, and every change is reported back through `onChange`. The
@@ -24,8 +25,8 @@
  */
 
 import { useEffect, useRef, type ReactNode } from 'react'
-import { EditorState, StateEffect, StateField, type Extension } from '@codemirror/state'
-import { EditorView, keymap, lineNumbers, highlightActiveLine, Decoration, type DecorationSet } from '@codemirror/view'
+import { Compartment, EditorState, Facet, StateEffect, StateField, type Extension } from '@codemirror/state'
+import { EditorView, ViewPlugin, keymap, lineNumbers, highlightActiveLine, Decoration, type DecorationSet, type PluginValue, type ViewUpdate } from '@codemirror/view'
 import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands'
 import { indentUnit } from '@codemirror/language'
 import { search, searchKeymap } from '@codemirror/search'
@@ -33,28 +34,46 @@ import { search, searchKeymap } from '@codemirror/search'
 import css from './GitWorkbenchPanel.module.css'
 import { blameCompartment, blameField, blameGutter, setBlame } from './blame-gutter.ts'
 import { bufferDiff } from './cm-diff.ts'
-import { tokenRanges } from './cm-tokens.ts'
+import { lineTokenRanges } from './cm-tokens.ts'
 import type { HighlightRun } from './highlight.ts'
 import type { BlameLine } from './GitWorkbenchPanel.tsx'
 
-/** Carries a fresh set of shiki-derived decorations into the view. */
-const setPaint = StateEffect.define<DecorationSet>()
-
 /**
- * The decoration layer. It maps through document changes so the colours stay
- * on their text between repaints — without that, a keystroke would smear every
- * token after the caret until the next highlight pass landed.
+ * Tokens for the lines in a range of the buffer.
+ *
+ * The editor asks for what it is about to show, never for the file. Painting a
+ * whole buffer cost 1,637ms on 1,837 lines of real TypeScript — a freeze on
+ * every click, and the reason files past 2,000 lines used to be shown with no
+ * colour at all rather than made to wait for it.
+ *
+ * @param lines - the buffer's lines, complete and in order.
+ * @param from - first line wanted, 0-based.
+ * @param to - one past the last line wanted.
+ * @returns runs indexed by line, filled inside the range; undefined for "no
+ *          grammar", which renders as plain text.
  */
-const paintField = StateField.define<DecorationSet>({
-  create: () => Decoration.none,
-  update(paint, tr) {
-    for (const effect of tr.effects) {
-      if (effect.is(setPaint)) return effect.value
-    }
-    return tr.docChanged ? paint.map(tr.changes) : paint
-  },
-  provide: field => EditorView.decorations.from(field),
+export type PaintFn = (
+  lines: readonly string[],
+  from: number,
+  to: number,
+) => readonly (readonly HighlightRun[] | undefined)[] | undefined
+
+/** Where the view reads its painter from. Reconfigured — through
+ *  {@link paintCompartment} — when the file, the language or the theme moves. */
+const paintFacet = Facet.define<PaintFn | null, PaintFn | null>({
+  combine: values => values.length > 0 ? values[0]! : null,
 })
+const paintCompartment = new Compartment()
+
+/**
+ * How long after the last keystroke the editor recomputes what it paints.
+ *
+ * Both layers below are proportional to what they are asked for, and typing
+ * asks again on every character. The decorations map through the change in the
+ * meantime, so the colours and the tint ride along with the text and only the
+ * recomputation waits.
+ */
+const REPAINT_IDLE_MS = 180
 
 /** One span's inline style, from the shiki run that produced it. */
 function styleFor(color: string | undefined, italic: boolean | undefined): string {
@@ -62,17 +81,110 @@ function styleFor(color: string | undefined, italic: boolean | undefined): strin
   return italic === true ? paint + 'font-style:italic;' : paint
 }
 
-/** Build the decoration set for one buffer's worth of shiki runs. */
-function paintFor(text: string, syntax: readonly (readonly HighlightRun[])[] | undefined): DecorationSet {
-  const ranges = tokenRanges(text.split('\n'), syntax)
-  return Decoration.set(
-    ranges.map(range => Decoration
-      .mark({ attributes: { style: styleFor(range.color, range.italic) } })
-      .range(range.from, range.to)),
-    true,
-  )
+/**
+ * A decoration layer that is recomputed when the view moves and DEFERRED when
+ * the reader types.
+ *
+ * The two layers below — syntax colour and the live diff tint — differ only in
+ * what they build. Both must be bounded by the viewport, both must survive a
+ * keystroke without being rebuilt, and both must not leave a timer behind when
+ * the view goes away.
+ */
+abstract class IdleLayer implements PluginValue {
+  decorations: DecorationSet = Decoration.none
+  private timer: ReturnType<typeof setTimeout> | undefined
+
+  constructor(protected readonly view: EditorView) {
+    this.decorations = this.build(view)
+  }
+
+  update(update: ViewUpdate): void {
+    // Carry what is already painted across the edit, whatever happens next:
+    // without the map, every token after the caret would smear until the
+    // rebuild landed.
+    if (update.docChanged) this.decorations = this.decorations.map(update.changes)
+    const why = this.reason(update)
+    if (why === 'now') this.decorations = this.build(update.view)
+    else if (why === 'later') this.defer()
+  }
+
+  /** Clears the pending rebuild. A view is destroyed on every file switch, and
+   *  a timer that outlives its view is a leak that also paints a dead editor. */
+  destroy(): void {
+    if (this.timer !== undefined) clearTimeout(this.timer)
+    this.timer = undefined
+  }
+
+  private defer(): void {
+    if (this.timer !== undefined) clearTimeout(this.timer)
+    this.timer = setTimeout(() => {
+      this.timer = undefined
+      this.decorations = this.build(this.view)
+      // An empty transaction is how a plugin that computed something outside
+      // an update cycle asks the view to read it.
+      this.view.dispatch({})
+    }, REPAINT_IDLE_MS)
+  }
+
+  /**
+   * Whether this update calls for a rebuild, and how soon.
+   *
+   * `now` is for a change the reader would see as missing paint — scrolling
+   * into lines nothing has coloured yet. `later` is for anything that will
+   * settle: a keystroke, or a file switch, which reaches the view as two
+   * transactions and is INCONSISTENT between them. Rebuilding on the first of
+   * that pair is what made opening a second file cost nine seconds.
+   */
+  protected abstract reason(update: ViewUpdate): 'now' | 'later' | 'no'
+
+  protected abstract build(view: EditorView): DecorationSet
+}
+
+/** The lines the view is about to show, 0-based and half-open. */
+function viewportLines(view: EditorView): { from: number; to: number } {
+  const doc = view.state.doc
+  return {
+    from: doc.lineAt(view.viewport.from).number - 1,
+    to: doc.lineAt(view.viewport.to).number,
+  }
+}
+
+/** Syntax colour for the viewport, from whatever painter the pane configured. */
+class PaintLayer extends IdleLayer {
+  protected build(view: EditorView): DecorationSet {
+    const paint = view.state.facet(paintFacet)
+    if (paint === null) return Decoration.none
+    const doc = view.state.doc
+    const lines = doc.toString().split('\n')
+    const { from, to } = viewportLines(view)
+    const runs = paint(lines, from, to)
+    if (runs === undefined) return Decoration.none
+    const marks: Array<ReturnType<typeof Decoration.mark>> = []
+    const at: number[] = []
+    for (let line = from; line < to && line < lines.length; line += 1) {
+      // `doc.line` is 1-based, and its `from` is the absolute offset the
+      // decorations need.
+      const start = doc.line(line + 1).from
+      for (const range of lineTokenRanges(lines[line] ?? '', start, runs[line])) {
+        marks.push(Decoration.mark({ attributes: { style: styleFor(range.color, range.italic) } }))
+        at.push(range.from, range.to)
+      }
+    }
+    return Decoration.set(marks.map((mark, i) => mark.range(at[i * 2]!, at[i * 2 + 1]!)), true)
+  }
+
+  protected reason(update: ViewUpdate): 'now' | 'later' | 'no' {
+    // Scrolling must paint at once: the lines are already on screen.
+    if (update.viewportChanged) return 'now'
+    // A new painter — another file, another theme, a grammar that finished
+    // loading. The buffer it describes may not have arrived yet, so it waits.
+    if (update.state.facet(paintFacet) !== update.startState.facet(paintFacet)) return 'later'
+    return update.docChanged ? 'later' : 'no'
+  }
 }
 
+const painter = ViewPlugin.fromClass(PaintLayer, { decorations: layer => layer.decorations })
+
 /** The other side's text, kept in state so the diff layer can recompute from
  *  a transaction alone rather than from a closure over some past render. */
 const setOriginal = StateEffect.define<string>()
@@ -87,24 +199,35 @@ const originalText = StateField.define<string>({
 })
 
 /**
- * The add/delete tint, recomputed on every keystroke.
+ * The add/delete tint, recomputed once the typing stops.
  *
  * Arming the editor used to take the diff colours away, because the pane's
  * tints come from git's diff and git has not seen a keystroke. Watching the
  * change take shape is the reason to edit inside a diff view at all, so the
  * tint is recomputed here from the text on both sides instead.
  *
+ * It is a whole-document diff, and it used to run on every transaction: 55ms
+ * per keystroke at 800 lines, 709ms at 4,000. So it inherits {@link IdleLayer}
+ * — the tint maps through the edit and catches up when the reader pauses.
+ *
  * This diff is a READING AID. No git operation uses it: the block actions
  * still send line indices against the host's own `diffSha`-stamped patch.
  */
-const diffField = StateField.define<DecorationSet>({
-  create: state => diffDecorations(state),
-  update(deco, tr) {
-    const reset = tr.effects.some(effect => effect.is(setOriginal))
-    return tr.docChanged || reset ? diffDecorations(tr.state) : deco
-  },
-  provide: field => EditorView.decorations.from(field),
-})
+class TintLayer extends IdleLayer {
+  protected build(view: EditorView): DecorationSet {
+    return diffDecorations(view.state)
+  }
+
+  protected reason(update: ViewUpdate): 'now' | 'later' | 'no' {
+    // The tint is line decorations over the whole document, so scrolling needs
+    // nothing from it. What it must never do is run between the two
+    // transactions a file switch arrives in.
+    const sideMoved = update.transactions.some(tr => tr.effects.some(effect => effect.is(setOriginal)))
+    return update.docChanged || sideMoved ? 'later' : 'no'
+  }
+}
+
+const tinter = ViewPlugin.fromClass(TintLayer, { decorations: layer => layer.decorations })
 
 function diffDecorations(state: EditorState): DecorationSet {
   const original = state.field(originalText, false) ?? ''
@@ -174,15 +297,16 @@ const paneTheme = EditorView.theme({
   },
 })
 
-export function CodeEditor({ value, original, onChange, syntax, indent, ariaLabel, onSave, blame, notCommitted, readOnly, onBlameClick }: {
+export function CodeEditor({ value, original, onChange, paint, indent, ariaLabel, onSave, blame, notCommitted, readOnly, onBlameClick }: {
   /** The pane's buffer. The view is written to only when this really differs. */
   value: string
   /** The other side's whole text — the index side, for the unstaged layer this
    *  editor lives on. What the live tint is computed against. */
   original: string
   onChange: (next: string) => void
-  /** `highlightFile`'s runs for this buffer; undefined while a grammar loads. */
-  syntax: readonly (readonly HighlightRun[])[] | undefined
+  /** Tokens for a range of the buffer; see {@link PaintFn}. Null paints
+   *  nothing, which is what a file with no grammar gets. */
+  paint: PaintFn | null
   /** One indent level, from `detectIndent` — what Tab inserts. */
   indent: string
   ariaLabel: string
@@ -235,12 +359,13 @@ export function CodeEditor({ value, original, onChange, syntax, indent, ariaLabe
       history(),
       search({ top: true }),
       highlightActiveLine(),
-      paintField,
+      paintCompartment.of(paintFacet.of(paint)),
+      painter,
       blameField,
       blameCompartment.of([]),
       EditorState.readOnly.of(!editable),
       originalText.init(() => original),
-      diffField,
+      tinter,
       paneTheme,
       keymap.of([
         { key: 'Mod-s', preventDefault: true, run: () => { latest.current.onSave(); return true } },
@@ -305,13 +430,14 @@ export function CodeEditor({ value, original, onChange, syntax, indent, ariaLabe
     current.dispatch({ changes: { from: 0, to: held.length, insert: value } })
   }, [value])
 
-  // Repaint. Depends on `value` as well as `syntax` so it runs after the write
-  // above, against the text the view now actually holds.
+  // A new painter — another file, another theme, a grammar that finished
+  // loading. The plugin repaints itself from the viewport; all this has to do
+  // is put the new function where it reads it from.
   useEffect(() => {
     const current = view.current
     if (current === null) return
-    current.dispatch({ effects: setPaint.of(paintFor(current.state.doc.toString(), syntax)) })
-  }, [syntax, value])
+    current.dispatch({ effects: paintCompartment.reconfigure(paintFacet.of(paint)) })
+  }, [paint])
 
   return <div ref={host} className={css.cmHost} data-editable={editable ? '' : undefined} />
 }

package/src/client/FileBrowser.tsx

@@ -37,8 +37,8 @@ import { decodeBase64, formatBytes, looksLikeImagePath, shouldAskForImage } from
 import { IMAGE_BYTE_CAP, sniffImage } from '../image-sniff.ts'
 import { blameWhen, shortHash } from './blame-view.ts'
 import { emptyQueryFilter, serializeLogQuery } from './log-filter-query.ts'
-import { highlightWholeFile, shikiLangOf, shikiThemeOf, subscribeGrammarLoaded } from './highlight.ts'
-import { HIGHLIGHT_IDLE_MS, HIGHLIGHT_LINE_CAP, useIdleValue } from './idle-value.ts'
+import { highlightRange, shikiLangOf, shikiThemeOf, subscribeGrammarLoaded } from './highlight.ts'
+import type { PaintFn } from './CodeEditor.tsx'
 import { detectIndent } from './indent.ts'
 import {
   DISARMED, applySaveOk, applySides, armEdit, armRefusal, isDirty, markConflict,
@@ -46,14 +46,6 @@ import {
 } from './side-edit.ts'
 import type { BlameAnswer, BlameLine, FileImage, FileSides, SideLayer, Translate } from './GitWorkbenchPanel.tsx'
 
-/** Count lines without allocating the split — the buffer can be megabytes and
- *  this runs on a timer while somebody is typing. */
-function countLines(text: string): number {
-  let n = 1
-  for (let i = text.indexOf(String.fromCharCode(10)); i !== -1; i = text.indexOf(String.fromCharCode(10), i + 1)) n += 1
-  return n
-}
-
 /** Most search hits rendered at once — a one-letter query must not paint a
  *  whole repository into the DOM. */
 const SEARCH_CAP = 300
@@ -152,7 +144,7 @@ export function FileBrowser({
   const shownRef = useRef<Set<string>>(new Set())
   // A grammar loads asynchronously the first time a language is seen; this
   // counter re-renders the highlight once it lands.
-  const [, setGrammarTick] = useState(0)
+  const [grammarTick, setGrammarTick] = useState(0)
 
   const dirty = isDirty(edit)
 
@@ -339,18 +331,29 @@ export function FileBrowser({
   const showBlame = blameOn && !dirty && !showingImage
   const buffer = edit.buffer
 
-  // Highlighting lags the buffer: a repaint is a Shiki pass over the whole
-  // file, and paying that per keystroke is what makes a large file unusable.
-  // CodeMirror maps the decorations it already has through each change, so
-  // the colours ride along with the text until this catches up.
-  const painted = useIdleValue(buffer, HIGHLIGHT_IDLE_MS)
-  const tooBigToPaint = useMemo(() => countLines(painted) > HIGHLIGHT_LINE_CAP, [painted])
-  const syntax = useMemo(
-    () => tooBigToPaint
-      ? undefined
-      : highlightWholeFile(painted.split('\n'), shikiLangOf(open ?? ''), shikiThemeOf(palette)),
-    [tooBigToPaint, painted, open, palette],
-  )
+  /**
+   * What the editor paints, asked for a range at a time.
+   *
+   * It used to be a Shiki pass over the WHOLE buffer, debounced so the reader
+   * only felt it when they paused — 1,637ms on 1,837 lines of real TypeScript,
+   * and files past 2,000 lines were given no colour at all rather than made to
+   * wait for it. The editor now asks for the lines it is about to show, and
+   * `token-cache.ts` remembers them, so length stopped being the question and
+   * the cap could go.
+   *
+   * Keyed on the path: an edit inside the file invalidates the chunks it
+   * actually moved, which is what the chunk stamps are for.
+   */
+  const paint = useMemo<PaintFn | null>(() => {
+    const lang = shikiLangOf(open ?? '')
+    if (lang === undefined) return null
+    const theme = shikiThemeOf(palette)
+    const key = 'files:' + (open ?? '')
+    return (lines, from, to) => highlightRange(key, lines, lang, theme, from, to)
+    // `grammarTick` moves when a lazy grammar finishes loading. It changes
+    // nothing this function computes; a NEW identity is the point, because that
+    // is what tells the editor to repaint lines it had to render plain.
+  }, [open, palette, grammarTick])
   const indent = useMemo(() => detectIndent(edit.baseText), [edit.baseText])
 
   /** Open a file, revealing it in the tree — and asking first if the buffer
@@ -565,7 +568,6 @@ export function FileBrowser({
               <div className={css.sideNotice}>{t(refusal === 'encoding' ? 'fileReadOnlyEncoding' : 'fileReadOnlyCrlf')}</div>
             ) : null}
             {saveFailed !== null ? <div className={css.sideNotice}>{saveFailed}</div> : null}
-            {tooBigToPaint ? <div className={css.sideNotice}>{t('paintTooLarge')}</div> : null}
             {blameOn && dirty ? <div className={css.sideNotice}>{t('blameWhileEditing')}</div> : null}
             {showBlame && (blameFailed || (blame !== null && blame.error !== undefined))
               ? <div className={css.sideNotice}>{t('blameFailed')}</div> : null}
@@ -638,7 +640,7 @@ export function FileBrowser({
                     value={edit.buffer}
                     original={edit.baseText}
                     onChange={next => { setEdit(prev => ({ ...prev, buffer: next })) }}
-                    syntax={syntax}
+                    paint={paint}
                     indent={indent}
                     ariaLabel={open}
                     onSave={() => { void save() }}

package/src/client/GitWorkbenchPanel.module.css

@@ -1810,6 +1810,9 @@
    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

@@ -70,10 +70,10 @@ import {
 } from './side-edit.ts'
 import { FileBrowser } from './FileBrowser.tsx'
 import { decodePlaces, encodePlaces, placeAt, withPlace, type FilesPlace, type FilesPlaces } from './files-place.ts'
-import { HIGHLIGHT_IDLE_MS, HIGHLIGHT_LINE_CAP, useIdleValue } from './idle-value.ts'
+import { useIdleValue } from './idle-value.ts'
 import { PathDirGlyph, PathFileGlyph } from './glyphs.tsx'
 import { detectIndent } from './indent.ts'
-import { CodeEditor } from './CodeEditor.tsx'
+import { CodeEditor, type PaintFn } from './CodeEditor.tsx'
 import { layoutGraph, type GraphRow } from './commit-graph.ts'
 import { formatCommitDate } from './commit-filter.ts'
 import { chipsFromFilter, emptyQueryFilter, parseLogQuery, removeChip, serializeLogQuery } from './log-filter-query.ts'
@@ -89,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, highlightWindow, shikiLangOf, shikiThemeOf, subscribeGrammarLoaded, type HighlightRun } from './highlight.ts'
+import { grammarLoadCount, highlightForRowsWindow, highlightRange, 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'
@@ -5059,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)
@@ -5112,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}
@@ -5121,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>
@@ -5377,16 +5393,18 @@ function SideBySideView({ t, path, palette, statsPath, fetchSides, writeChecked,
     const left = rows.filter(row => row.left !== null).map(row => row.left!.text)
     return left.length === 0 ? '' : left.join('\n') + '\n'
   }, [rows])
-  // The editor's buffer is a whole file, so it takes the whole-file pass —
-  // and it lags the typing, for the same reason the browser's does: a Shiki
-  // pass per keystroke is what makes a large file unusable to edit.
-  const paintedLines = useIdleValue(bufferLines, HIGHLIGHT_IDLE_MS)
-  const editSyntax = useMemo(
-    () => edit.armed && paintedLines.length <= HIGHLIGHT_LINE_CAP
-      ? highlightWholeFile(paintedLines, lang, shikiTheme)
-      : [],
-    [edit.armed, paintedLines, lang, shikiTheme, grammarGen],
-  )
+  // The editor's buffer is a whole file, so it takes the file pass rather than
+  // the diff's per-line re-lex — but only over the lines it is showing. The
+  // editor asks for a range as it scrolls, and `token-cache.ts` remembers what
+  // came back; a pass over the whole buffer was 1,637ms at 1,837 lines, paid
+  // again every time the reader stopped typing.
+  const editPaint = useMemo<PaintFn | null>(() => {
+    if (lang === undefined) return null
+    const key = 'buffer:' + statsPath + ':' + path
+    return (lines, from, to) => highlightRange(key, lines, lang, shikiTheme, from, to)
+    // `grammarGen` changes nothing computed here; the new identity is what
+    // makes the editor repaint once a lazy grammar has landed.
+  }, [lang, shikiTheme, statsPath, path, grammarGen])
   // The left column while editing renders dense — one row per INDEX line, no
   // holes — because the right column is now the dense buffer; a hole-aligned
   // left beside a dense right is the alignment the diff view owes, not the
@@ -5819,7 +5837,7 @@ function SideBySideView({ t, path, palette, statsPath, fetchSides, writeChecked,
               value={edit.buffer}
               original={indexText}
               onChange={next => { setEdit(prev => ({ ...prev, buffer: next })) }}
-              syntax={editSyntax}
+              paint={editPaint}
               indent={indentOfBuffer}
               ariaLabel={path}
               onSave={() => { if (dirty && !saving) void runSave(edit.baseSha) }}

package/src/client/cm-diff.ts

@@ -17,7 +17,18 @@
  *
  * The diff itself is CodeMirror's (`presentableDiff`, already aligned to line
  * boundaries); this module is the arithmetic from its character offsets to
- * line numbers.
+ * line numbers - and the BOUND on it.
+ *
+ * Unbounded, that diff is quadratic on inputs that are not versions of each
+ * other, and the editor can be handed such a pair for one render: opening
+ * another file replaces the buffer and the side it is compared against in two
+ * separate transactions, so for an instant the new file's text sits opposite
+ * the old file's. Profiled on a real switch between two source files, that one
+ * instant cost NINE SECONDS inside `findDiff`, and it is the whole of the
+ * reported "clicking a big file after a small one nearly freezes". The editor
+ * no longer diffs an inconsistent pair (see `CodeEditor.tsx`), and this is the
+ * second half of the answer: no input, consistent or not, may cost more than a
+ * moment.
  *
  * Pure: no React, no DOM, no git. `tests/cm-diff.test.ts` loads it directly.
  *
@@ -37,6 +48,17 @@ export interface BufferDiff {
   readonly deletedBefore: readonly number[]
 }
 
+/**
+ * What the tint is allowed to spend.
+ *
+ * `scanLimit` is CodeMirror's own guard against quadratic behaviour - its merge
+ * view sets 500 - and the timeout is the ceiling in wall time. Past either, the
+ * algorithm falls back to a coarser answer, which is the right trade for a
+ * reading aid: an approximate tint that appears is worth more than an exact one
+ * that arrives after the reader has given up. No git operation reads this.
+ */
+const DIFF_BOUND = { scanLimit: 500, timeout: 100 }
+
 /** Offsets at which each line of `text` starts. */
 function lineStarts(text: string): number[] {
   const starts = [0]
@@ -75,7 +97,7 @@ export function bufferDiff(original: string, doc: string): BufferDiff {
   const changed = new Set<number>()
   const deletedBefore = new Set<number>()
 
-  for (const change of presentableDiff(original, doc)) {
+  for (const change of presentableDiff(original, doc, DIFF_BOUND)) {
     if (change.fromB === change.toB) {
       // Nothing was INSERTED — but that does not mean a line disappeared. A
       // line the reader shortened (`example.com/taskqueue` to `example.com`)

package/src/client/cm-tokens.ts

@@ -52,28 +52,48 @@ function paints(run: HighlightRun): boolean {
  */
 export function tokenRanges(
   lines: readonly string[],
-  runs: readonly (readonly HighlightRun[])[] | undefined,
+  runs: readonly (readonly HighlightRun[] | undefined)[] | undefined,
 ): TokenRange[] {
   if (runs === undefined) return []
   const out: TokenRange[] = []
   let lineStart = 0
   lines.forEach((line, index) => {
-    const lineRuns = runs[index]
-    if (lineRuns !== undefined) {
-      let at = 0
-      for (const run of lineRuns) {
-        const from = lineStart + at
-        at += run.text.length
-        const to = Math.min(lineStart + at, lineStart + line.length)
-        if (to > from && paints(run)) {
-          out.push({ from, to, color: run.color, italic: run.italic })
-        }
-        if (at >= line.length) break
-      }
-    }
+    for (const range of lineTokenRanges(line, lineStart, runs[index])) out.push(range)
     // +1 for the LF that `split('\n')` removed. The last line has none, but
     // nothing reads past it either.
     lineStart += line.length + 1
   })
   return out
 }
+
+/**
+ * One line's painted ranges, in absolute offsets.
+ *
+ * The unit the viewport painter works in: it knows each visible line's own
+ * offset from CodeMirror and never wants the arithmetic for the lines above it.
+ * {@link tokenRanges} is this function walked down a whole document.
+ *
+ * @param text - the line, as the document holds it.
+ * @param start - the line's absolute offset in the document.
+ * @param runs - that line's highlight runs, or undefined for "not painted",
+ *               which yields no ranges rather than throwing.
+ */
+export function lineTokenRanges(
+  text: string,
+  start: number,
+  runs: readonly HighlightRun[] | undefined,
+): TokenRange[] {
+  if (runs === undefined) return []
+  const out: TokenRange[] = []
+  let at = 0
+  for (const run of runs) {
+    const from = start + at
+    at += run.text.length
+    const to = Math.min(start + at, start + text.length)
+    if (to > from && paints(run)) {
+      out.push({ from, to, color: run.color, italic: run.italic })
+    }
+    if (at >= text.length) break
+  }
+  return out
+}