@young1lin/dsh-ui-gitworkbench 0.1.15 → 0.1.17

package/src/client/index.ts

@@ -181,16 +181,35 @@ export function apply(ctx: ClientContext): void {
           ) as { ok: true; value: { authors: AuthorEntry[]; truncated: boolean } } | { ok: false; error: { message?: string } }
           return result.ok ? result.value : null
         },
-        // Every path on HEAD — the path picker's raw material.
-        fetchRepoTree: async (worktreePath: string | undefined, signal: AbortSignal): Promise<{ paths: string[]; truncated: boolean } | null> => {
+        // Every path on HEAD — the path picker's raw material — plus the
+        // ignored entries the Files tab browses. The ignored fields are
+        // optional because a host half older than this client does not send
+        // them: the browser then simply has no ignored rows to show.
+        fetchRepoTree: async (worktreePath: string | undefined, signal: AbortSignal): Promise<{ paths: string[]; truncated: boolean; ignored?: string[]; ignoredTruncated?: boolean; ignoredError?: string } | null> => {
           const result = await connection.rpc.call(
             '/api',
             'gitWorkbench/repoTree',
             { args: { worktreePath: worktreePath ?? '' } },
             signal,
-          ) as { ok: true; value: { paths: string[]; truncated: boolean } } | { ok: false; error: { message?: string } }
+          ) as { ok: true; value: { paths: string[]; truncated: boolean; ignored?: string[]; ignoredTruncated?: boolean; ignoredError?: string } } | { ok: false; error: { message?: string } }
           return result.ok ? result.value : null
         },
+        // One level of one ignored directory, read from the filesystem: git
+        // collapses ignored directories by design, so the only way into
+        // `node_modules/` is to ask the disk directly (see the host method).
+        fetchIgnoredDir: async (worktreePath: string | undefined, dir: string, signal: AbortSignal): Promise<{ entries: { name: string; dir: boolean }[]; truncated: boolean } | null> => {
+          try {
+            const result = await connection.rpc.call(
+              '/api',
+              'gitWorkbench/ignoredDir',
+              { args: { worktreePath: worktreePath ?? '', dir } },
+              signal,
+            ) as { ok: true; value: { entries: { name: string; dir: boolean }[]; truncated: boolean } } | { ok: false; error: { message?: string } }
+            return result.ok ? result.value : null
+          } catch {
+            return null
+          }
+        },
         // Two refs compared as `base...head`, in the same shape as every other
         // view, so the drawer's tree and diff panes render it unchanged.
         fetchCompare: async (worktreePath: string | undefined, base: string, head: string, signal: AbortSignal): Promise<WorkbenchStats | null> => {

package/src/client/locales.ts

@@ -21,10 +21,10 @@
 export type WorkbenchKey =
   | 'aheadTitle' | 'behindTitle' | 'files'
   | 'filterFiles' | 'filterFilesPlaceholder' | 'filterFilesClear' | 'filesFiltered' | 'filterNoMatch'
-  | 'drawerLabel' | 'totalsDim' | 'refresh' | 'close'
+  | 'drawerLabel' | 'totalsDim' | 'refresh' | 'close' | 'wrapLines' | 'wrapLinesOff'
   | 'tabsLabel' | 'tabChanges' | 'tabHistory' | 'tabCompare' | 'tabFiles'
   // the Files tab: browse the repository, read a file, blame it, edit it
-  | 'fileSearchPlaceholder' | 'filesTruncated' | 'filesEmpty' | 'filesNoMatch' | 'filesPick'
+  | 'fileSearchPlaceholder' | 'filesTruncated' | 'filesEmpty' | 'filesNoMatch' | 'filesPick' | 'filesIgnored' | 'filesIgnoredCut' | 'filesIgnoredFailed'
   | 'filesUnsavedAsk' | 'filesDiscardOpen' | 'filesMore' | 'filesVanished' | 'fileReadOnlyCrlf' | 'fileReadOnlyEncoding'
   | 'blameWhileEditing' | 'blameLine' | 'blamePick' | 'blameInHistory'
   | 'imageBroken' | 'imageFit' | 'imageActual' | 'imageTooLarge' | 'imageSource' | 'imagePreview'
@@ -39,7 +39,7 @@ export type WorkbenchKey =
   | 'filterDate' | 'filterToday' | 'filterLast7' | 'filterLast30' | 'filterAfter' | 'filterBefore'
   | 'filterPaths' | 'filterPathsMore' | 'allBranches' | 'filterPathSearch'
   | 'filterCalendarSets' | 'filterSelected' | 'filterLocale'
-  | 'compareBase' | 'compareHead' | 'comparePick' | 'compareCommits' | 'loadingCompare' | 'noBranches'
+  | 'compareBase' | 'compareHead' | 'comparePick' | 'compareCommits' | 'compareEmptyHint' | 'loadingCompare' | 'noBranches'
   | 'refSearch' | 'refNone' | 'refCount' | 'refTruncated' | 'refWorktrees' | 'refBranches' | 'historyRefLabel'
   | 'settings' | 'themeMode' | 'themePalette' | 'themeScope' | 'themeBackground' | 'themeCss'
   | 'modeSystem' | 'modeLight' | 'modeDark'
@@ -66,7 +66,7 @@ export type WorkbenchKey =
   // side-by-side editing: arm the editor, save, revert, the stale/conflict
   // banner, the CRLF refusal notice, and the unsaved-changes prompt that
   // guards every gesture dropping the buffer (tab, file, close)
-  | 'editFile' | 'fileSave' | 'fileRevert' | 'editingNotice' | 'crlfNotice' | 'encodingNotice'
+  | 'editFile' | 'fileSave' | 'fileRevert' | 'editingNotice' | 'crlfNotice' | 'encodingNotice' | 'phantomNotice'
   // blame gutter on the working-tree column
   | 'blameToggle' | 'blameHint' | 'blameUncommitted' | 'blameFailed' | 'blameTruncated'
   | 'saveFailed' | 'saveUnavailable' | 'saveRetry'
@@ -90,6 +90,11 @@ export const zh: Record<WorkbenchKey, string> = {
   tabFiles: '文件',
   fileSearchPlaceholder: '搜索文件…',
   filesTruncated: '文件太多，列表已截断；用搜索找剩下的。',
+  filesIgnored: '已被 gitignore',
+  wrapLines: '自动换行',
+  wrapLinesOff: '取消自动换行',
+  filesIgnoredCut: '这个目录条目太多，已截断；搜索找不到没列出的部分。',
+  filesIgnoredFailed: '无法列出被忽略的文件。',
   filesEmpty: '这个仓库还没有文件',
   filesNoMatch: '没有匹配的文件',
   filesMore: '还有 {count} 个，用上面的搜索找',
@@ -113,6 +118,7 @@ export const zh: Record<WorkbenchKey, string> = {
   compareHead: '对比',
   comparePick: '选择两个不同的分支进行对比',
   compareCommits: '{count} 个提交（自共同祖先起）',
+  compareEmptyHint: '{base}...{head} 比较的是自分叉点到 {head} 的变化，没有找到差异；想看另一方向的变化请交换两端。',
   loadingCompare: '加载对比…',
   noBranches: '没有可对比的分支',
   refSearch: '筛选分支…',
@@ -294,6 +300,7 @@ export const zh: Record<WorkbenchKey, string> = {
   blameTruncated: '文件过长，追溯信息只显示了前面一部分。',
   crlfNotice: '这个文件的行尾是 CRLF，暂不支持在线编辑（编辑框会把行尾统一成 LF，保存时整份文件都会被改写）；建议把行尾统一成 LF。差异里的回车已用 ␍ 标出；查看和按块暂存/撤回不受影响。',
   encodingNotice: '这个文件不是 UTF-8 编码（可能是 GBK、Shift JIS 之类），暂不支持在线编辑：页面上看到的文字是一次有损解码，保存回去会把文件里每一个非 ASCII 字节都改写掉，包括你没动过的行。查看和按块暂存/撤回不受影响。',
+  phantomNotice: 'git 把这个文件列为已修改，但行尾归一化（CRLF / autocrlf / eol 属性）之后没有内容差异——这是 Windows 检出常见的「永远已修改」幻影，不是显示故障。统一行尾（建议把行尾统一成 LF）或让 git 重新比对后，这一条目就会消失。',
   saveFailed: '保存失败',
   saveUnavailable: '当前宿主还不支持保存（需要重启 dsh web 加载新版宿主端）。',
   saveRetry: '重试保存',
@@ -332,6 +339,11 @@ export const en: Record<WorkbenchKey, string> = {
   tabFiles: 'Files',
   fileSearchPlaceholder: 'Search files…',
   filesTruncated: 'Too many files to list; use the search for the rest.',
+  filesIgnored: 'Ignored (gitignore)',
+  wrapLines: 'Wrap long lines',
+  wrapLinesOff: 'Stop wrapping lines',
+  filesIgnoredCut: 'This directory has too many entries; the list is cut, and the search cannot reach the rest.',
+  filesIgnoredFailed: 'Could not list the ignored files.',
   filesEmpty: 'This repository has no files yet',
   filesNoMatch: 'No matching files',
   filesMore: 'and {count} more — use the search above',
@@ -353,6 +365,7 @@ export const en: Record<WorkbenchKey, string> = {
   compareHead: 'Compare',
   comparePick: 'Pick two different branches to compare',
   compareCommits: '{count} commits since they diverged',
+  compareEmptyHint: '{base}...{head} compares from the fork point up to {head} and found no differences; to see what changed on the other side, swap the two ends.',
   loadingCompare: 'Loading comparison…',
   noBranches: 'No branches to compare',
   refSearch: 'Filter branches…',
@@ -519,6 +532,7 @@ export const en: Record<WorkbenchKey, string> = {
   blameTruncated: 'The file is long, so blame is shown for the first part only.',
   crlfNotice: 'This file has CRLF line endings, which the editor does not support yet (the edit box would turn every ending into LF, so a save rewrites the whole file); normalising the endings to LF is recommended. Carriage returns are marked ␍ in the diff; viewing and block staging/rolling back still work.',
   encodingNotice: 'This file is not UTF-8 (GBK, Shift JIS or similar), so the editor is unavailable: the text shown is a lossy decode of it, and saving that back would rewrite every non-ASCII byte in the file, including lines you never touched. Viewing and block staging/rolling back still work.',
+  phantomNotice: 'git lists this file as modified, but after line-ending normalisation (CRLF / autocrlf / eol attributes) there is no content difference — the classic "modified forever" phantom of a Windows checkout, not a broken view. Once the endings agree (normalising the endings to LF is recommended) the entry disappears.',
   saveFailed: 'Save failed',
   saveUnavailable: 'This host does not support saving yet — restart dsh web to load the new host half.',
   saveRetry: 'Retry save',

package/src/client/row-heights.ts

@@ -0,0 +1,225 @@
+/**
+ * Row offsets when the rows are NOT all the same height — what soft wrap makes
+ * of a diff pane.
+ *
+ * `row-window.ts` places row `i` at `i * 20px` with no measuring at all, and
+ * says so: the panes guarantee it by writing `white-space: pre`, so nothing
+ * ever wraps. Turn wrapping on and that guarantee is gone — one row can be
+ * five lines tall — and every number the window computes from it (which rows
+ * are visible, how tall the spacers are, where a change sits) is wrong.
+ *
+ * The replacement keeps the same shape and the same rule: work proportional to
+ * the VIEWPORT. Heights are MEASURED, but only for rows that are actually in
+ * the DOM, which is the window plus its overscan; every other row carries an
+ * estimate computed from its text. So a 20,000-row file costs one array and
+ * some arithmetic, not 20,000 measurements.
+ *
+ * The prefix sums are a Fenwick tree rather than a running array, because both
+ * things this is asked for happen on the scroll path and must not be linear:
+ * "where does row i start" is a prefix query, "which row is at y" is a search
+ * for a prefix, and a measurement that lands changes one row's height. All
+ * three are O(log n) here; as a plain array of running totals, the third would
+ * rewrite every entry after the row that moved.
+ *
+ * Pure: no React, no DOM. `tests/row-heights.test.ts` loads it directly.
+ *
+ * @module @young1lin/dsh-ui-gitworkbench/client/row-heights
+ */
+
+import { WINDOW_OVERSCAN, WINDOW_WHOLE_BELOW, type RowWindow } from './row-window.ts'
+
+/** A viewport height to assume before the scroller has been measured, matching
+ *  `row-window.ts`: rendering nothing until the height is known flashes an
+ *  empty pane, and a screenful is both safe and close. */
+const ASSUMED_VIEWPORT_PX = 1200
+
+/**
+ * How many display columns a line occupies.
+ *
+ * Only for the ESTIMATE of rows nobody has measured, so it does not have to
+ * agree with the browser to the character — it has to be close enough that
+ * the scrollbar is the right length and a jump to the middle of the file lands
+ * near where it should. Tabs advance to the next stop (`tab-size: 4` in the
+ * panes' grid) and full-width characters take two columns, which are the two
+ * ways a naive `text.length` is badly wrong rather than slightly wrong.
+ *
+ * @param text - one row's text.
+ * @param tabSize - columns a tab advances to the next multiple of.
+ */
+export function displayColumns(text: string, tabSize = 4): number {
+  let columns = 0
+  for (const char of text) {
+    if (char === '\t') {
+      columns += tabSize - (columns % tabSize)
+      continue
+    }
+    columns += isWide(char) ? 2 : 1
+  }
+  return columns
+}
+
+/**
+ * Whether a character takes two columns in a monospace font: CJK, Hangul,
+ * kana, the full-width forms, and the emoji blocks. The ranges rather than a
+ * table because this runs over a file's worth of text and the answer only
+ * feeds an estimate.
+ */
+function isWide(char: string): boolean {
+  const code = char.codePointAt(0) ?? 0
+  return (code >= 0x1100 && code <= 0x115f)
+    || (code >= 0x2e80 && code <= 0xa4cf)
+    || (code >= 0xac00 && code <= 0xd7a3)
+    || (code >= 0xf900 && code <= 0xfaff)
+    || (code >= 0xfe30 && code <= 0xfe6f)
+    || (code >= 0xff00 && code <= 0xff60)
+    || (code >= 0xffe0 && code <= 0xffe6)
+    || (code >= 0x1f300 && code <= 0x1f9ff)
+}
+
+/**
+ * The height a row is guessed to have before it has been measured.
+ *
+ * @param text - the row's text.
+ * @param columns - how many columns fit across the pane; 0 or less means the
+ *                  pane has not been measured yet, and one line is assumed.
+ * @param rowH - one line's height in px.
+ */
+export function estimateRowHeight(text: string, columns: number, rowH: number): number {
+  if (!Number.isFinite(columns) || columns <= 0) return rowH
+  return Math.max(1, Math.ceil(displayColumns(text) / columns)) * rowH
+}
+
+/**
+ * Per-row heights with O(log n) offsets, backed by a Fenwick tree.
+ *
+ * Bounded by construction: two arrays of `rowCount`, which the panes already
+ * cap. {@link measured} reports how much of it is real rather than guessed, so
+ * a test can prove the measuring stays viewport-sized instead of trusting it.
+ */
+export class RowHeights {
+  /** Each row's height. */
+  private readonly heights: Float64Array
+  /** Fenwick sums, 1-based; `tree[i]` covers a block ending at row `i - 1`. */
+  private readonly tree: Float64Array
+  /** Rows whose height came from the DOM rather than from an estimate. */
+  private readonly real: Uint8Array
+  private realCount = 0
+
+  /**
+   * @param initial - each row's starting height, normally an estimate.
+   */
+  constructor(initial: readonly number[]) {
+    const n = initial.length
+    this.heights = new Float64Array(n)
+    this.tree = new Float64Array(n + 1)
+    this.real = new Uint8Array(n)
+    for (let i = 0; i < n; i += 1) this.heights[i] = sane(initial[i]!)
+    // Build in O(n): each node adds its own total into its parent.
+    for (let i = 1; i <= n; i += 1) {
+      this.tree[i]! += this.heights[i - 1]!
+      const parent = i + (i & -i)
+      if (parent <= n) this.tree[parent]! += this.tree[i]!
+    }
+  }
+
+  /** How many rows there are. */
+  get count(): number { return this.heights.length }
+
+  /** How many rows carry a measured height rather than an estimate. */
+  measured(): number { return this.realCount }
+
+  /**
+   * Record one row's real height.
+   * @returns whether anything moved, so a caller can avoid a re-render.
+   */
+  set(index: number, px: number): boolean {
+    if (!Number.isInteger(index) || index < 0 || index >= this.count) return false
+    const next = sane(px)
+    if (this.real[index] === 0) {
+      this.real[index] = 1
+      this.realCount += 1
+    }
+    const delta = next - this.heights[index]!
+    if (delta === 0) return false
+    this.heights[index] = next
+    for (let i = index + 1; i <= this.count; i += i & -i) this.tree[i]! += delta
+    return true
+  }
+
+  /** One row's height. */
+  heightAt(index: number): number {
+    if (index < 0 || index >= this.count) return 0
+    return this.heights[index]!
+  }
+
+  /** Where a row starts, measured from the top of the scrolled content. */
+  topAt(index: number): number {
+    let sum = 0
+    for (let i = Math.max(0, Math.min(index, this.count)); i > 0; i -= i & -i) sum += this.tree[i]!
+    return sum
+  }
+
+  /** Every row's height together. */
+  total(): number { return this.topAt(this.count) }
+
+  /**
+   * The row that contains `y`, by binary lifting over the tree — the same
+   * search a running-totals array would do, without the array.
+   */
+  rowAt(y: number): number {
+    if (this.count === 0) return 0
+    let remaining = Number.isFinite(y) && y > 0 ? y : 0
+    let index = 0
+    let step = 1
+    while (step * 2 <= this.count) step *= 2
+    for (; step > 0; step = Math.floor(step / 2)) {
+      const probe = index + step
+      if (probe <= this.count && this.tree[probe]! <= remaining) {
+        remaining -= this.tree[probe]!
+        index = probe
+      }
+    }
+    return Math.min(index, this.count - 1)
+  }
+}
+
+/** @param value - a number from the DOM, which can be NaN or negative. */
+function sane(value: number): number {
+  return Number.isFinite(value) && value > 0 ? value : 0
+}
+
+/**
+ * The window of rows to render when the rows are not all one height.
+ *
+ * Same answer shape as {@link rowWindow}, and the same short-circuit below
+ * {@link WINDOW_WHOLE_BELOW}: windowing has costs of its own, and a file that
+ * was never slow should render exactly as it did before.
+ *
+ * @param scrollTop - the scroller's current offset in px.
+ * @param viewportH - the scroller's visible height in px; 0 before measuring.
+ * @param heights - the rows' heights.
+ * @param overscan - rows to keep beyond each edge.
+ */
+export function variableRowWindow(
+  scrollTop: number,
+  viewportH: number,
+  heights: RowHeights,
+  overscan: number = WINDOW_OVERSCAN,
+): RowWindow {
+  const rows = heights.count
+  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 = Number.isFinite(viewportH) && viewportH > 0 ? viewportH : ASSUMED_VIEWPORT_PX
+  const pad = Math.max(0, Math.trunc(overscan))
+
+  const start = Math.max(0, heights.rowAt(top) - pad)
+  const end = Math.min(rows, heights.rowAt(top + view) + 1 + pad)
+  const safeEnd = Math.max(start, end)
+  return {
+    start,
+    end: safeEnd,
+    padTop: heights.topAt(start),
+    padBottom: Math.max(0, heights.total() - heights.topAt(safeEnd)),
+  }
+}

package/src/client/styles/changes.css

@@ -261,6 +261,15 @@
   user-select: none;
 }
 .code { flex: 1 0 auto; white-space: pre; padding: 0 16px 0 10px; }
+/* Soft wrap, unified view. Three things have to move together: the stack stops
+   being wider than the pane (`width: max-content` is exactly what makes a
+   200-column line scroll sideways), the code cell wraps instead of overflowing,
+   and the number columns hold the TOP of a row that is now several lines tall
+   rather than centring in it. `anywhere` rather than `break-word` because a
+   minified line or a base64 blob is one "word" and would not break at all. */
+.diffPreWrap { width: 100%; min-width: 0; }
+.diffPreWrap .line { align-items: flex-start; }
+.diffPreWrap .code { flex: 1 1 0; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
 
 .lineAdd { background: var(--gs-add-line); }
 .lineDel { background: var(--gs-del-line); }
@@ -306,8 +315,17 @@
 .sideScroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
 .sideCols { display: flex; align-items: stretch; min-height: 100%; }
 /* `min-width: 0` is what lets a flex column be narrower than its content —
-   without it the column refuses to shrink and the divider stops moving. */
-.sideCol { flex: 0 0 auto; min-width: 0; overflow-x: auto; }
+   without it the column refuses to shrink and the divider stops moving. The
+   column still scrolls sideways — a trackpad swipe or a shift-wheel over the
+   code lands here — but draws no scrollbar of its own: it is as tall as the
+   file, so that scrollbar lands at the bottom of the diff. rails.css puts a
+   real one at the bottom of the PANE and says why. Both spellings, because
+   Firefox reads the property and Chromium the pseudo-element. */
+.sideCol {
+  flex: 0 0 auto; min-width: 0; overflow-x: auto;
+  scrollbar-width: none;
+}
+.sideCol::-webkit-scrollbar { display: none; }
 .sideColRight { flex: 1 1 0; }
 .sideColGrid {
   display: grid;
@@ -379,6 +397,19 @@
 .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; }
+/* Soft wrap, side-by-side. The column stops scrolling sideways (there is
+   nothing left to scroll to) and the grid stops sizing itself to the widest
+   line, which is what let a 200-column line push the pane wider than the pane.
+   `anywhere` rather than `break-word`: a minified line is one "word" and would
+   not break at all. The two columns are still two grids, so a row's height is
+   imposed on both cells from whichever side wrapped further — see
+   `use-variable-row-window.ts`; `.sideFlow` is the inner box that is MEASURED,
+   and it must not inherit that imposed height or the row could never shrink
+   back when the pane is widened. */
+.sideColWrap { overflow-x: hidden; }
+.sideColGridWrap { width: 100%; min-width: 0; }
+.sideColGridWrap .sideCode { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
+.sideFlow { display: block; height: auto; }
 /* 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. */

package/src/client/styles/controls.css

@@ -107,6 +107,11 @@
    come from the vocabulary — only the box changes shape. */
 .btnIcon { width: var(--gs-h-control); padding: 0; }
 .btnIcon svg { display: block; }
+/* An icon button that is a STATE, not an action - wrap is either on or off,
+   and the row has to say which without a second glyph. Qualified like
+   `.layoutButtonOn` and `.treeIconOn`: the shared button vocabulary sets
+   `color` at the same specificity a few rules above. */
+.btnIcon.btnIconOn { color: var(--gs-accent); border-color: var(--gs-accent); }
 /* Close is the one destructive control in the row, and every window on the
    machine says so with red on hover. Quiet until then: a permanently red X in
    a header would read as an error state. */

package/src/client/styles/files.css

@@ -45,6 +45,11 @@
   text-overflow: ellipsis;
 }
 .fbRow:hover { background: var(--gs-raise); }
+/* Ignored territory, dimmed so "why does this never show in Changes" has a
+   visible answer. Qualified like .fbRowActive (which it must not fight: the
+   component never applies both, and the active rule in controls.css is
+   imported before this file anyway). */
+.fbRow.fbRowIgnored { opacity: 0.55; }
 /* .fbRowActive: see the shared selected-state rule in controls.css. It is
    written there qualified, because this file is imported after that one and a
    bare modifier declared above its base loses the cascade. */

package/src/client/styles/rails.css

@@ -0,0 +1,72 @@
+/**
+ * Where the side-by-side pane's horizontal scrollbars live.
+ *
+ * The pane scrolls vertically and each column scrolls horizontally on its own,
+ * which is what lets the divider mean something: one grid across both sides is
+ * sized by the widest line in the file, so dragging it moves nothing. The cost
+ * is where the browser then draws a column's scrollbar — at the bottom of the
+ * COLUMN, and a column is as tall as the file. On a two-thousand-line diff the
+ * only way to reach the control that scrolls sideways was to scroll all the
+ * way down first, and then scroll back up to see what it did.
+ *
+ * So the column's scrollbar is hidden and a rail is stuck to the bottom of the
+ * pane in its place. See `h-rail.ts` and `SideRails.tsx`.
+ */
+/* The horizontal scrollbars, one per column, stuck to the bottom of the PANE.
+   `position: sticky` inside the pane's vertical scroller is what floats them:
+   they ride at the bottom edge of the viewport wherever the reader is in the
+   file, the way an editor's scrollbar does.
+
+   The strip is ALWAYS rendered and collapses to `height: 0` instead of being
+   conditionally mounted, so the rails keep their elements and the scroll-sync
+   effects keep stable dependencies (SideRails.tsx).
+
+   The negative margin is why the strip costs no layout height: without it the
+   pane would scroll 12px further than the file is long, forever. What it
+   overlays is the grid's own 16px bottom padding, not a line of code. */
+.sideRails {
+  position: sticky; bottom: 0; z-index: 6;
+  display: flex; align-items: stretch;
+  height: 0; overflow: hidden;
+}
+/* Opaque, because it OVERLAYS the last rows rather than reserving space below
+   them: without a background the code underneath reads straight through the
+   strip. */
+.sideRailsOn {
+  height: 12px; margin-top: -12px; overflow: visible;
+  background: var(--gs-surface);
+}
+/* Each rail is a REAL scroller whose content is exactly as wide as its
+   column's, so the two scroll positions map one to one with no arithmetic and
+   the thumb is the size the reader expects. */
+.sideRail {
+  flex: 0 0 auto; min-width: 0;
+  overflow-x: auto; overflow-y: hidden;
+}
+/* Firefox only. Chromium IGNORES its `::-webkit-scrollbar` rules for any
+   element that also sets `scrollbar-width`, and what it falls back to on
+   Windows is an overlay bar: no layout height, and nothing painted at rest.
+   For a strip whose whole job is to be seen and dragged, that is a control
+   that is not there — so the standard property is scoped to the engine that
+   needs it. */
+@supports (-moz-appearance: none) {
+  .sideRail { scrollbar-width: thin; scrollbar-color: var(--gs-fg-fainter) transparent; }
+}
+/* The thumb, drawn explicitly: styling these pseudo-elements is what opts
+   Chromium out of overlay scrollbars and back into a classic one that occupies
+   its own layout height — which is what the probe measures to prove the bar is
+   painted at all. */
+.sideRail::-webkit-scrollbar { height: 10px; }
+.sideRail::-webkit-scrollbar-track { background: transparent; }
+.sideRail::-webkit-scrollbar-thumb {
+  background: var(--gs-fg-fainter);
+  border: 3px solid transparent;
+  background-clip: padding-box;
+  border-radius: var(--gs-r-pill);
+}
+.sideRail:hover::-webkit-scrollbar-thumb { background: var(--gs-fg-faint); background-clip: padding-box; }
+.sideRailRight { flex: 1 1 0; }
+/* Mirrors `.paneDivider`'s width in shell.css, so each rail sits under the
+   column it scrolls — `tests/css-modules.test.ts` holds the two together. */
+.sideRailGap { flex: none; width: 7px; }
+.sideRailSpan { height: 1px; }

package/src/client/use-row-window.ts

@@ -18,9 +18,13 @@ import { rowWindow, rowWindowForMount, sameRowWindow, type HeldRowWindow, type R
  *
  * @param scrollRef - the element that scrolls the rows.
  * @param rowCount - how many rows the diff has.
+ * @param enabled - false while soft wrap is on, when the rows are no longer a
+ *                  fixed height and `use-variable-row-window.ts` answers
+ *                  instead. Attaching both panes' listeners at once would put
+ *                  two readers on the same scroll.
  * @returns the rows to render and the spacer heights standing in for the rest.
  */
-export function useRowWindow(scrollRef: { current: HTMLElement | null }, rowCount: number, mountKey: string): RowWindow {
+export function useRowWindow(scrollRef: { current: HTMLElement | null }, rowCount: number, mountKey: string, enabled = true): RowWindow {
   const count = Number.isFinite(rowCount) ? Math.max(0, Math.trunc(rowCount)) : 0
   const [held, setHeld] = useState<HeldRowWindow>(() => ({
     mountKey, rowCount: count, win: rowWindow(0, 0, count),
@@ -31,7 +35,7 @@ export function useRowWindow(scrollRef: { current: HTMLElement | null }, rowCoun
   const visible = rowWindowForMount(held, count, mountKey)
   useEffect(() => {
     const el = scrollRef.current
-    if (el === null) return
+    if (el === null || !enabled) return
     const read = (): void => {
       const next = rowWindow(el.scrollTop, el.clientHeight, count)
       setHeld(prev => prev.mountKey === mountKey && prev.rowCount === count && sameRowWindow(prev.win, next)
@@ -50,6 +54,6 @@ export function useRowWindow(scrollRef: { current: HTMLElement | null }, rowCoun
       el.removeEventListener('scroll', read)
       observer.disconnect()
     }
-  }, [scrollRef, count, mountKey])
+  }, [scrollRef, count, mountKey, enabled])
   return visible
 }