@young1lin/dsh-ui-gitworkbench 0.1.12 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@young1lin/dsh-ui-gitworkbench",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "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

@@ -29,13 +29,15 @@ import { Compartment, EditorState, Facet, StateEffect, StateField, type Extensio
 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'
+import { getSearchQuery, search, searchKeymap, searchPanelOpen, type SearchQuery } 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 { SEARCH_PANEL_THEME } from './cm-search-theme.ts'
 import { lineTokenRanges } from './cm-tokens.ts'
 import type { HighlightRun } from './highlight.ts'
+import { EMPTY_INDEX, formatCount, indexMatches, ordinalAt, type MatchIndex } from './search-count.ts'
 import type { BlameLine } from './GitWorkbenchPanel.tsx'
 
 /**
@@ -140,6 +142,111 @@ abstract class IdleLayer implements PluginValue {
   protected abstract build(view: EditorView): DecorationSet
 }
 
+/**
+ * `3/128` beside the find field.
+ *
+ * `@codemirror/search` ships no count, which leaves the reader unable to tell
+ * a query that found nothing from one whose matches are all below the fold.
+ * The library exports no panel class to subclass either, so the label is put
+ * INTO the panel it already builds — one span, mounted after the search field
+ * and removed with the plugin.
+ *
+ * Counting walks the document, so it never happens on the keystroke path: the
+ * walk is deferred by the same idle the paint layers use, and it stops at
+ * `MATCH_CAP`. Moving between matches touches no document at all — the offsets
+ * are kept, and the ordinal is a binary search over them.
+ *
+ * While a new count is pending the previous number stays up rather than
+ * blanking. A query grows a character at a time, so the number it replaces is
+ * a near neighbour of the one arriving; blanking instead would collapse the
+ * span and shuffle the buttons beside it on every keystroke.
+ */
+class SearchCount implements PluginValue {
+  private index: MatchIndex = EMPTY_INDEX
+  private spec: string | undefined
+  private timer: ReturnType<typeof setTimeout> | undefined
+  private readonly label = document.createElement('span')
+
+  constructor(private readonly view: EditorView) {
+    this.label.className = 'cm-gwSearchCount'
+    // The count changes without the reader moving focus, which is exactly what
+    // a live region is for.
+    this.label.setAttribute('aria-live', 'polite')
+    this.sync(view, true)
+  }
+
+  update(update: ViewUpdate): void {
+    if (!searchPanelOpen(update.state)) {
+      // Closed, or never opened. Forget the query so reopening recounts rather
+      // than showing a number for a document that has since been edited.
+      this.spec = undefined
+      this.index = EMPTY_INDEX
+      this.label.remove()
+      return
+    }
+    this.sync(update.view, update.docChanged)
+  }
+
+  /** A view is destroyed on every file switch; a timer that outlives one is a
+   *  leak that also writes into a panel nobody is looking at. */
+  destroy(): void {
+    if (this.timer !== undefined) clearTimeout(this.timer)
+    this.timer = undefined
+    this.label.remove()
+  }
+
+  private sync(view: EditorView, docChanged: boolean): void {
+    this.mount(view)
+    const spec = specOf(getSearchQuery(view.state))
+    if (docChanged || spec !== this.spec) {
+      this.spec = spec
+      this.defer()
+    }
+    this.paint(view)
+  }
+
+  private mount(view: EditorView): void {
+    const panel = view.dom.querySelector('.cm-panel.cm-search')
+    if (panel === null || this.label.parentElement === panel) return
+    // Beside the field it is about, rather than at the end of a row whose
+    // width the checkboxes decide.
+    const field = panel.querySelector('input[name="search"]')
+    if (field === null) panel.append(this.label)
+    else field.after(this.label)
+  }
+
+  private defer(): void {
+    if (this.timer !== undefined) clearTimeout(this.timer)
+    this.timer = setTimeout(() => {
+      this.timer = undefined
+      const query = getSearchQuery(this.view.state)
+      this.index = query.valid
+        ? indexMatches(query.getCursor(this.view.state.doc))
+        : EMPTY_INDEX
+      this.paint(this.view)
+    }, REPAINT_IDLE_MS)
+  }
+
+  private paint(view: EditorView): void {
+    // An empty or unparseable query has nothing to report, and `0/0` under a
+    // field the reader has not typed in yet is noise.
+    if (!getSearchQuery(view.state).valid) {
+      this.label.textContent = ''
+      return
+    }
+    const at = view.state.selection.main.from
+    this.label.textContent = formatCount(this.index, ordinalAt(this.index, at))
+  }
+}
+
+/** What decides the match set. `replace` is part of the query and changes none
+ *  of it, so a recount on every keystroke in the replace field is waste. */
+function specOf(query: SearchQuery): string {
+  return [query.search, query.caseSensitive, query.regexp, query.wholeWord, query.literal].join('\u0000')
+}
+
+const searchCount = ViewPlugin.fromClass(SearchCount)
+
 /** 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
@@ -265,13 +372,28 @@ const paneTheme = EditorView.theme({
     fontVariantLigatures: 'none',
   },
   '.cm-content': { padding: '0', caretColor: 'var(--gs-accent)' },
+  // Opaque, and it has to be. The gutter plugin writes `position: sticky`
+  // as an INLINE style, so the numbers hold the pane's left edge while the
+  // code scrolls sideways underneath them — with a transparent fill that is
+  // not a gutter, it is a smear of code behind the line numbers. The library
+  // ships `#f5f5f5` here for the same reason; this is that fill, restated in
+  // the pane's own ground so every palette clothes it. Both hosts sit on
+  // `--gs-surface` (`.fbMain` in Files, `.diffPane` in Changes), and the cells
+  // painted a colour of their own — the active line, a changed line — paint
+  // over it exactly as they did over the transparency.
   '.cm-gutters': {
-    backgroundColor: 'transparent',
+    backgroundColor: 'var(--gs-surface)',
     color: 'var(--gs-fg-faint)',
     border: 'none',
     paddingRight: '8px',
+    // The fill has to reach further left than the gutter does. `left: 0` sticks
+    // it to the scrollport's CONTENT box, while the pane clips at its PADDING
+    // box — so the code keeps travelling through the pane's own left padding
+    // and surfaces beside the numbers. The bleed covers that strip; it is the
+    // ground colour, and the pane clips it, so over-reaching costs nothing.
+    boxShadow: '-16px 0 0 0 var(--gs-surface)',
   },
-  '.cm-activeLine': { backgroundColor: 'var(--gs-hover)' },
+  '.cm-activeLine': { backgroundColor: 'var(--gs-raise)' },
   // Same tints the diff columns use, so a line the reader just typed reads as
   // the same kind of thing as a line git already knows about.
   '.cm-gwChanged': { backgroundColor: 'var(--gs-add-line)' },
@@ -295,6 +417,9 @@ const paneTheme = EditorView.theme({
     whiteSpace: 'nowrap',
     cursor: 'pointer',
   },
+  // Ctrl/Cmd+F. Spread rather than written here so a test can read the spec
+  // without loading React and a CSS Module; see `cm-search-theme.ts`.
+  ...SEARCH_PANEL_THEME,
 })
 
 export function CodeEditor({ value, original, onChange, paint, indent, ariaLabel, onSave, blame, notCommitted, readOnly, onBlameClick }: {
@@ -358,6 +483,7 @@ export function CodeEditor({ value, original, onChange, paint, indent, ariaLabel
       lineNumbers(),
       history(),
       search({ top: true }),
+      searchCount,
       highlightActiveLine(),
       paintCompartment.of(paintFacet.of(paint)),
       painter,

package/src/client/cm-search-theme.ts

@@ -0,0 +1,250 @@
+/**
+ * The Ctrl/Cmd+F panel, restated in the drawer's own controls.
+ *
+ * `@codemirror/search` ships the panel with the library's stock chrome, and
+ * none of it follows a palette: the strip is `#f5f5f5` with black text (or
+ * `#333338` with white), the buttons carry a grey `linear-gradient` and a 1px
+ * radius, the fields are `1px solid silver`, the ticks are whatever the
+ * platform draws, and a match is `#ffff0054`. Worse, form controls do not
+ * inherit a font, and the library asks for `font-size: 70%` without naming a
+ * family — so the panel renders in the browser's default face at a size no
+ * other control in the drawer uses. Over a Nord or a cyberpunk drawer the
+ * strip stays light grey with black text on it.
+ *
+ * So the panel is dressed here, and ONLY through `--gs-*` tokens: every
+ * palette then clothes it for free, exactly as it clothes the pane around it.
+ * None of the shapes are invented for this panel — each is the one already on
+ * screen beside it:
+ *
+ * - the strip follows `.blockBar`, the drawer's other float over code, where
+ *   `--gs-surface-2` plus a soft shadow are what keep it readable.
+ * - the buttons follow the shared compact control (`.treeIcon`,
+ *   `.funnelPreset`, `.layoutButton`): `--gs-h-compact`, `--gs-pad-compact`,
+ *   `--gs-r-control`, `--gs-t-dense`, and the same hover.
+ * - the fields follow the tree's own filter box, `.fbSearch`.
+ * - the ticks follow `.funnelRow input[type=checkbox]`: `appearance: none`
+ *   and a rotated border for the mark, so nothing ships as an asset and every
+ *   state recolors with the theme.
+ *
+ * Layout is the other half, and it stays in INLINE FLOW on purpose. The
+ * obvious answer — make the panel a wrapping flex row with one gap — costs
+ * the find/replace break: the library separates the two halves with a `<br>`,
+ * and Blink gives a `<br>` no box of its own inside a flex container. Neither
+ * `flex-basis: 100%`, `width: 100%` nor `min-width: 100%` on it makes the
+ * replace field start a line (measured on the running app; all four left it
+ * beside `by word`). So the controls stay inline-level atoms instead, and
+ * carry the rhythm the library asked for with `.2em .6em .2em 0` in a single
+ * margin. Wrapping still works when the pane is narrow: an atomic inline is a
+ * line-break opportunity, which is what lets the strip reflow in the 190px
+ * the Changes column drags down to.
+ *
+ * Kept out of `CodeEditor.tsx` so a test can read it: that file pulls React
+ * and a CSS Module, and neither loads under vitest.
+ *
+ * @module @young1lin/dsh-ui-gitworkbench/client/cm-search-theme
+ */
+
+/** A CodeMirror theme spec, narrowed to what this module writes: one flat
+ *  declaration block per selector, no nesting and no at-rules. */
+export type ThemeSpec = Readonly<Record<string, Readonly<Record<string, string>>>>
+
+/** Selector prefix for everything inside the panel. Spelled out per rule
+ *  rather than nested, because CodeMirror's style builder only nests under a
+ *  `&`, and a flat key is what a test can read back. */
+const PANEL = '.cm-panel.cm-search'
+
+/** Between two controls on a row, and between the find row and the replace
+ *  row. The row gap is carried as a bottom margin per control, because inline
+ *  flow has no `gap`; the panel's bottom padding is short by exactly this. */
+const GAP = '6px'
+const ROW_GAP = '6px'
+
+export const SEARCH_PANEL_THEME: ThemeSpec = {
+  /* The strip. `.cm-panels` is the element the library paints, so the
+     override belongs there rather than on the panel inside it. The shadow is
+     `.blockBar`'s: this is a sticky bar with code scrolling under it, and a
+     border alone leaves the two planes touching. */
+  '.cm-panels': {
+    backgroundColor: 'var(--gs-surface-2)',
+    color: 'var(--gs-fg)',
+    boxShadow: '0 4px 14px var(--gs-shadow)',
+  },
+  '.cm-panels-top': { borderBottom: '1px solid var(--gs-border)' },
+  '.cm-panels-bottom': { borderTop: '1px solid var(--gs-border)' },
+
+  [PANEL]: {
+    position: 'relative',
+    /* The right gutter is the close button's: it is positioned over it, so
+       nothing may wrap underneath. The bottom is short by ROW_GAP, which every
+       control carries below itself; the two add back up to the top. */
+    padding: '8px 32px 2px 10px',
+    lineHeight: '1',
+  },
+  /* One rhythm for the whole strip, replacing the library's `.2em .6em .2em 0`.
+     `vertical-align: top` with one height is what makes a row of controls a
+     row rather than four boxes on a shared baseline. */
+  [`${PANEL} input, ${PANEL} button, ${PANEL} label`]: {
+    boxSizing: 'border-box',
+    verticalAlign: 'top',
+    margin: `0 ${GAP} ${ROW_GAP} 0`,
+  },
+
+  [`${PANEL} .cm-textfield`]: {
+    /* A column rather than a share of the row: find and replace are read as a
+       pair, and a pair that does not start and end at the same x is noise. */
+    width: '220px',
+    maxWidth: '100%',
+    boxSizing: 'border-box',
+    height: 'var(--gs-h-compact)',
+    padding: '0 8px',
+    font: 'inherit',
+    fontSize: 'var(--gs-t-dense)',
+    color: 'var(--gs-fg)',
+    backgroundColor: 'var(--gs-surface)',
+    border: '1px solid var(--gs-border)',
+    borderRadius: 'var(--gs-r-control)',
+  },
+  [`${PANEL} .cm-textfield::placeholder`]: { color: 'var(--gs-fg-faint)' },
+  [`${PANEL} .cm-textfield:focus`]: { outline: 'none', borderColor: 'var(--gs-accent)' },
+
+  /* `3/128`. A span rather than a control, so it takes none of the shared
+     rule above and states its own box; the meta size and the faint ink keep it
+     a readout beside the field rather than a fourth thing to click. */
+  [`${PANEL} .cm-gwSearchCount`]: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    height: 'var(--gs-h-compact)',
+    margin: `0 ${GAP} ${ROW_GAP} 0`,
+    verticalAlign: 'top',
+    font: 'inherit',
+    fontSize: 'var(--gs-t-meta)',
+    lineHeight: '1',
+    whiteSpace: 'nowrap',
+    fontVariantNumeric: 'tabular-nums',
+    color: 'var(--gs-fg-faint)',
+  },
+
+  [`${PANEL} .cm-button`]: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    height: 'var(--gs-h-compact)',
+    padding: 'var(--gs-pad-compact)',
+    font: 'inherit',
+    fontSize: 'var(--gs-t-dense)',
+    lineHeight: '1',
+    whiteSpace: 'nowrap',
+    color: 'var(--gs-fg-dim)',
+    /* The gradient is the library's, and it is on `background-image`: a
+       background COLOUR alone would leave it painted on top. */
+    backgroundColor: 'transparent',
+    backgroundImage: 'none',
+    border: '1px solid var(--gs-border)',
+    borderRadius: 'var(--gs-r-control)',
+    cursor: 'pointer',
+    transition: 'background 120ms ease, color 120ms ease, border-color 120ms ease',
+  },
+  [`${PANEL} .cm-button:hover`]: {
+    color: 'var(--gs-fg)',
+    backgroundColor: 'var(--gs-raise)',
+    backgroundImage: 'none',
+    borderColor: 'var(--gs-fg-fainter)',
+  },
+  /* The library keeps a second gradient for the pressed state. */
+  [`${PANEL} .cm-button:active`]: {
+    backgroundColor: 'var(--gs-raise)',
+    backgroundImage: 'none',
+  },
+  [`${PANEL} .cm-button:focus-visible`]: { outline: '2px solid var(--gs-accent)', outlineOffset: '1px' },
+
+  [`${PANEL} label`]: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    height: 'var(--gs-h-compact)',
+    gap: '5px',
+    font: 'inherit',
+    fontSize: 'var(--gs-t-meta)',
+    lineHeight: '1',
+    whiteSpace: 'nowrap',
+    color: 'var(--gs-fg-dim)',
+    cursor: 'pointer',
+    WebkitUserSelect: 'none',
+    userSelect: 'none',
+  },
+
+  [`${PANEL} input[type=checkbox]`]: {
+    WebkitAppearance: 'none',
+    appearance: 'none',
+    position: 'relative',
+    boxSizing: 'border-box',
+    width: '14px',
+    height: '14px',
+    margin: '0',
+    backgroundColor: 'transparent',
+    border: '1px solid var(--gs-fg-fainter)',
+    borderRadius: '3px',
+    cursor: 'pointer',
+    transition: 'background 120ms ease, border-color 120ms ease',
+  },
+  [`${PANEL} input[type=checkbox]:hover`]: { borderColor: 'var(--gs-fg-dim)' },
+  [`${PANEL} input[type=checkbox]:checked`]: {
+    backgroundColor: 'var(--gs-accent)',
+    borderColor: 'var(--gs-accent)',
+  },
+  [`${PANEL} input[type=checkbox]:focus-visible`]: { outline: '2px solid var(--gs-accent)', outlineOffset: '1px' },
+  [`${PANEL} input[type=checkbox]:checked::after`]: {
+    content: '""',
+    position: 'absolute',
+    left: '4px',
+    top: '1px',
+    width: '3px',
+    height: '7px',
+    border: 'solid var(--gs-on-accent)',
+    borderWidth: '0 1.5px 1.5px 0',
+    transform: 'rotate(42deg)',
+  },
+
+  /* Close. Square and quiet — it dismisses a panel, so it is not the drawer's
+     red header close. `background-color` is restated because the library sets
+     it to `inherit`, which would take the strip's fill. */
+  [`${PANEL} [name=close]`]: {
+    position: 'absolute',
+    top: '8px',
+    right: '8px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '20px',
+    height: '20px',
+    padding: '0',
+    margin: '0',
+    font: 'inherit',
+    fontSize: 'var(--gs-t-ui)',
+    lineHeight: '1',
+    color: 'var(--gs-fg-faint)',
+    backgroundColor: 'transparent',
+    border: '1px solid transparent',
+    borderRadius: 'var(--gs-r-control)',
+    cursor: 'pointer',
+  },
+  [`${PANEL} [name=close]:hover`]: { color: 'var(--gs-fg)', backgroundColor: 'var(--gs-raise)' },
+  [`${PANEL} [name=close]:focus-visible`]: { outline: '2px solid var(--gs-accent)', outlineOffset: '1px' },
+
+  /* A hit, and the hit the caret is on. Amber is what an editor uses to say
+     "found", and `--gs-warn` is the only warm token every palette defines;
+     the current one takes the drawer's single selected idiom —
+     `--gs-accent-bg` inside `--gs-accent-border` — rather than a second
+     highlighter colour. Declared after the plain match: both classes sit on
+     the same span at the same specificity, so source order decides. */
+  '.cm-searchMatch': {
+    backgroundColor: 'color-mix(in srgb, var(--gs-warn) 30%, transparent)',
+    borderRadius: '2px',
+  },
+  '.cm-searchMatch-selected': {
+    backgroundColor: 'color-mix(in srgb, var(--gs-accent) 34%, transparent)',
+    boxShadow: 'inset 0 0 0 1px var(--gs-accent)',
+  },
+}

package/src/client/search-count.ts

@@ -0,0 +1,125 @@
+/**
+ * How many matches the find panel found, and which one you are on.
+ *
+ * The panel ships without a count, which leaves the one question a reader
+ * actually has unanswered: a query that highlights nothing on screen might
+ * have no matches at all, or two hundred of them below the fold, and the panel
+ * looks identical either way.
+ *
+ * Counting is proportional to the DOCUMENT, and this drawer does not put work
+ * proportional to the document on the keystroke path. Two things keep that
+ * true, and both live here rather than in the wiring:
+ *
+ * - the walk stops at {@link MATCH_CAP}. A cap that turns a feature off would
+ *   be no fix, so this one bounds the WORK and keeps the feature: past the cap
+ *   the total reads `5000+`, which answers "is my query too broad" as well as
+ *   an exact number would. It bounds memory the same way — a single-letter
+ *   search over 20,000 lines of real TypeScript finds 71,515 matches, and an
+ *   array of those is half a megabyte kept alive for a number nobody reads.
+ * - the offsets are KEPT, so moving between matches is a binary search rather
+ *   than a second walk. Measured on this repo's own client sources: a full
+ *   count costs 3-5ms at 300 lines, 9-11ms at 2,000, 12ms at 4,000, and 60ms
+ *   at 20,000 (`SIDE_LINE_CAP`, the ceiling the pane will load). Recounting on
+ *   every Enter would put that 60ms on the navigation path; recounting when
+ *   the typing stops puts it nowhere the reader can feel it.
+ *
+ * The index belongs to one query over one document, and the caller throws it
+ * away when either changes — see `SearchCount` in `CodeEditor.tsx`.
+ *
+ * @module @young1lin/dsh-ui-gitworkbench/client/search-count
+ */
+
+/**
+ * How many match positions are kept.
+ *
+ * 5,000 is past any count a reader distinguishes from "lots" and well inside
+ * what the pane can hold: at 8 bytes an offset it is 40KB, against the half a
+ * megabyte an uncapped single-letter search over the ceiling would take.
+ */
+export const MATCH_CAP = 5000
+
+/** Where every match starts, and whether the walk stopped early. */
+export interface MatchIndex {
+  /** Ascending start offsets, at most {@link MATCH_CAP} of them. */
+  readonly offsets: readonly number[]
+  /** There were more matches than were kept; the total reads `N+`. */
+  readonly capped: boolean
+}
+
+/** No query, or a query with nothing to find. */
+export const EMPTY_INDEX: MatchIndex = { offsets: [], capped: false }
+
+/** One match start, however it is handed over. */
+interface Match { readonly from: number }
+
+/**
+ * Anything that yields matches in order.
+ *
+ * Both halves of the union are here for a reason: `SearchQuery.getCursor` is
+ * DECLARED as an iterator and is also iterable at runtime, while a test wants
+ * to hand over a plain array. Accepting either keeps the rule readable without
+ * a document, a view or a DOM behind it.
+ */
+export type MatchWalk = Iterable<Match> | Iterator<Match>
+
+/**
+ * Walk matches into an index, stopping at `cap`.
+ *
+ * The walk is driven by hand rather than with `for…of`, because the union
+ * above may arrive already unwrapped. A cursor reuses ONE object across
+ * iterations, which is safe here only because nothing but the number is kept.
+ */
+export function indexMatches(matches: MatchWalk, cap: number = MATCH_CAP): MatchIndex {
+  const step: Iterator<Match> = Symbol.iterator in matches
+    ? matches[Symbol.iterator]()
+    : matches
+  const offsets: number[] = []
+  for (;;) {
+    if (offsets.length >= cap) {
+      // Ask once more: `capped` has to mean "there are more", not "there might
+      // have been", or a total that lands exactly on the cap reads as `5000+`.
+      return { offsets, capped: step.next().done !== true }
+    }
+    const next = step.next()
+    if (next.done === true) return { offsets, capped: false }
+    offsets.push(next.value.from)
+  }
+}
+
+/**
+ * Which match the position `from` is on or before, 1-based; 0 when there are
+ * none.
+ *
+ * The first match at or after the caret, because that is the one the panel
+ * will land on — which makes the answer right in both of the states the reader
+ * sees it in. Straight after typing the caret has not moved and the count
+ * should already read `1/128`, not `0/128`; after Enter the selection sits
+ * exactly on a match and the lower bound IS that match. Past the last one the
+ * panel wraps, so the answer wraps with it.
+ */
+export function ordinalAt(index: MatchIndex, from: number): number {
+  const { offsets } = index
+  if (offsets.length === 0) return 0
+  let low = 0
+  let high = offsets.length
+  while (low < high) {
+    const mid = (low + high) >> 1
+    if (offsets[mid]! < from) low = mid + 1
+    else high = mid
+  }
+  return low === offsets.length ? 1 : low + 1
+}
+
+/**
+ * The label: `3/128`, `3/5000+` when the walk stopped early, `0/0` for a query
+ * that finds nothing.
+ *
+ * No words, in a panel whose own labels are the library's English and are not
+ * translated either — a pair of numbers says it in every language the drawer
+ * ships (see `locales.ts` for the strings that do need both).
+ */
+export function formatCount(index: MatchIndex, ordinal: number): string {
+  const total = index.offsets.length
+  if (total === 0) return '0/0'
+  return `${ordinal}/${total}${index.capped ? '+' : ''}`
+}

package/src/client/styles/changes.css

@@ -107,6 +107,7 @@
   box-sizing: border-box; width: 100%;
   padding: 4px 12px 4px 8px;
   border: 0;
+  border-radius: var(--gs-r-control);
   background: transparent;
   color: var(--gs-fg-dim);
   font-family: inherit;
@@ -114,7 +115,7 @@
   text-align: left;
   cursor: pointer;
 }
-.treeDir:hover { background: var(--gs-panel); color: var(--gs-fg-muted); }
+.treeDir:hover { background: var(--gs-raise); color: var(--gs-fg-muted); }
 .treeDirActive { color: var(--gs-fg-muted); }
 .chevron {
   flex: none;
@@ -132,7 +133,7 @@
 .treeDirCount {
   flex: none;
   padding: 0 6px;
-  border-radius: 999px;
+  border-radius: var(--gs-r-pill);
   background: var(--gs-neutral-bg);
   color: var(--gs-fg-dim);
   font-size: var(--gs-t-meta); font-weight: 600; line-height: 16px;
@@ -144,6 +145,7 @@
   padding: 5px 14px;
   border: 0;
   border-left: 2px solid transparent;
+  border-radius: var(--gs-r-control);
   background: transparent;
   color: var(--gs-fg-muted);
   font-family: inherit;
@@ -151,18 +153,14 @@
   text-align: left;
   cursor: pointer;
 }
-.file:hover { background: var(--gs-panel); }
-.fileActive {
-  background: var(--gs-panel);
-  border-left-color: var(--gs-accent);
-  color: var(--gs-fg);
-}
+.file:hover { background: var(--gs-raise); }
+/* .fileActive: see the shared selected-state rule in controls.css. */
 
 .fileStatus {
   flex: none;
   display: inline-flex; align-items: center; justify-content: center;
   width: 18px; height: 18px;
-  border-radius: 5px;
+  border-radius: var(--gs-r-control);
   font-weight: 700; font-size: var(--gs-t-meta); line-height: 1;
 }
 .stAdded, .stUntracked { color: var(--gs-add); background: var(--gs-add-bg); }
@@ -174,7 +172,7 @@
 .fileBinary {
   flex: none;
   padding: 0 5px;
-  border-radius: 4px;
+  border-radius: var(--gs-r-control);
   background: var(--gs-neutral-bg);
   color: var(--gs-fg-dim);
   font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
@@ -459,6 +457,9 @@
   opacity: 0.32;
   transition: opacity 140ms ease;
   pointer-events: none;
+  /* Above the gutter, which CodeMirror stacks at 200. The bar overlays its
+     first two pixels, so at the default z-index an opaque gutter buries it. */
+  z-index: 201;
 }
 .cmHost[data-editable]:focus-within::before { opacity: 1; }
 /* The change nav takes the free space, so it and `.sideActions` after it sit