git-reviewer 2.10.0 → 2.12.0

package/README.md

@@ -3,7 +3,7 @@
 [![CI](https://github.com/dheerajjha/reviewer/actions/workflows/ci.yml/badge.svg)](https://github.com/dheerajjha/reviewer/actions/workflows/ci.yml)
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 [![Node](https://img.shields.io/badge/node-%3E%3D18-brightgreen.svg)](package.json)
-[![Tests](https://img.shields.io/badge/tests-310-brightgreen.svg)](test/)
+[![Tests](https://img.shields.io/badge/tests-335-brightgreen.svg)](test/)
 [![Dependencies](https://img.shields.io/badge/dependencies-3-brightgreen.svg)](package.json)
 
 When an agent writes the code, reading it becomes the bottleneck — and the tool
@@ -141,6 +141,47 @@ is nothing to configure:
 | Working directory clean | The last commit against its parent |
 | No commits yet | Every tracked and untracked file, as wholly new |
 
+### Comparing branches
+
+Those defaults cover the common case with nothing to set up, but a branch you
+have worked on for a day is several commits deep, and the default scope only
+ever shows the most recent one.
+
+**Compare branches** in the header opens the comparison your pull request would
+show. If the repository has an obvious base — `origin/main`, then `main`, then
+`master` or `develop` — it compares your current branch against it straight
+away; otherwise it asks. Remote branches come first because a local `main` that
+has not been pulled in a week is a quietly wrong base.
+
+Both ends are pickers: **Base** and **Compare**, the same two words a pull
+request uses. Each lists branches, remote branches, tags and recent commits, so
+you do not have to go and find a SHA. **Other…** at the bottom of either takes
+anything else git understands — `HEAD~5`, a tag, a SHA from somewhere else. The
+⇄ button swaps them, which answers the other question: what has `main` got that
+my branch has not?
+
+**It shows what the branch changes, not everything that differs.** If `main`
+has moved on since your branch was cut, a plain two-ended diff would include
+`main`'s newer work *reversed*, as though your branch had undone it. The
+comparison starts from where the two diverged instead, exactly as a pull
+request does, and says what it left out:
+
+```
+main → feature/auth    3 commits · 2 files changed
+
+main has 1 newer commit that is not on feature/auth. It is left out: this shows
+only what feature/auth changes since the two diverged, as a pull request would.
+```
+
+An empty comparison explains itself rather than showing a blank list. Two
+commits that add a file and then delete it produce no diff between the ends —
+correctly — and that reads as *"2 commits undo each other"*, not as *"nothing
+to review"*.
+
+Comments are kept when you switch between comparisons. One on a file that is
+not in the current view stays in the comments list, marked **Not in this
+view**, and is back in place whenever you open a view that includes the file.
+
 Modified, added, deleted, renamed, and binary files are all listed, each marked
 with its git status letter. Deleted lines are commentable too — the most useful
 review note is often about the code someone removed. A file deleted outright is
@@ -264,7 +305,10 @@ The UI is a client of this; nothing is hidden from you.
 | Endpoint | Purpose |
 |---|---|
 | `GET /api/health` | Liveness, plus the number of open sessions |
-| `POST /api/load-repo` | Open a repository; returns a `repoId` and the changed files |
+| `POST /api/load-repo` | Open a repository; returns a `repoId` and the changed files. Pass `base` (and optionally `head`) to compare two refs from their merge base |
+| `GET /api/refs/:repoId` | Branches, remote branches, tags and recent commits, for choosing what to compare |
+| `GET /api/commits/:repoId` | Recent commits only; kept for callers of 2.11 |
+| `GET /api/alive` | Held open by the page; when the last one closes, a terminal run stops |
 | `GET /api/file/:repoId/:path` | The file's diff, as structured lines |
 | `GET /api/file-full/:repoId/:path` | Every line of the file, for context |
 | `POST /api/save-comments` | Persist the current comments |
@@ -294,7 +338,7 @@ rather than a public issue.
 
 ```bash
 npm install           # 3 dependencies, no build step, ~6MB
-npm test              # 310 tests
+npm test              # 335 tests
 npm run test:watch
 npm run test:coverage
 ```

package/lib/agent.js

@@ -210,8 +210,28 @@ function describeScope({ repository, mode, range }) {
     // distinguishes "one commit of work" from "nine" once the diff has been
     // flattened -- and an agent reading a flattened diff of nine commits
     // should know that is what it is holding.
-    const commits = `${range.commits} commit${range.commits === 1 ? '' : 's'}`;
-    return `Reviewed: everything between ${range.base} and ${range.head} (${commits}), as a single combined diff.`;
+    const plural = (n, word) => `${n} ${word}${n === 1 ? '' : 's'}`;
+    const commits = plural(range.commits, 'commit');
+
+    // Ranges saved before 2.12 carry neither names nor a merge base. Say what
+    // they can support and no more.
+    if (!range.from || !range.baseName || !range.headName) {
+      return `Reviewed: everything between ${range.base} and ${range.head} (${commits}), as a single combined diff.`;
+    }
+
+    const ends = `${range.baseName} \u2192 ${range.headName}`;
+    if (range.from === range.base) {
+      return `Reviewed: ${ends} (${range.base}..${range.head}), ${commits} as a single combined diff.`;
+    }
+
+    // Diverged. The agent needs the left-out half as much as the reviewed
+    // half: code on the base that differs from the head is not something the
+    // reviewer asked anyone to change, and an agent that "fixes" it has
+    // reverted someone else's work.
+    const behind = range.behind > 0
+      ? ` ${range.baseName} has ${plural(range.behind, 'newer commit')} that ${range.behind === 1 ? 'is' : 'are'} deliberately not part of this review; leave that code alone.`
+      : '';
+    return `Reviewed: what ${range.headName} changes since it diverged from ${range.baseName} (merge base ${range.from}, head ${range.head}), ${commits} as a single combined diff.${behind}`;
   }
 
   if (mode === 'lastCommit') {

package/lib/changes.js

@@ -191,12 +191,80 @@ function classifyCommitFile(file) {
  * @param {import('simple-git').DiffResult} diffSummary
  * @returns {ChangedFile[]}
  */
-function collectCommitChanges(diffSummary) {
+/**
+ * Read `git diff --name-status -z` into what git itself says happened to
+ * each path.
+ *
+ * This exists because `classifyCommitFile` above has to guess from line
+ * counts, and the guess is wrong for a large share of ordinary edits: a
+ * change that only adds lines to an existing file reads as `A`, and one that
+ * only removes lines reads as `D` -- a reviewer shown "deleted" on a file
+ * that lost one line has been told something false by the badge meant to
+ * orient them. Git knows the answer; ask it.
+ *
+ * `-z` rather than the default output because the default quotes and
+ * octal-escapes non-ASCII paths the same way `--stat` does, and those were
+ * #20's bug the first time. With `-z` every field is NUL-terminated and the
+ * path is raw bytes, so there is nothing to unquote.
+ *
+ * Renames and copies (`R100`, `C75`) carry two paths; the second is the one
+ * the file now lives at, which is the one the rest of the app keys on.
+ *
+ * @param {string} raw output of `git diff --name-status -z -M <from> <to>`
+ * @returns {Map<string, 'A'|'M'|'D'|'R'>} path -> status
+ */
+function parseNameStatus(raw) {
+  const statuses = new Map();
+  const fields = String(raw ?? '').split('\0');
+
+  for (let i = 0; i < fields.length; ) {
+    const code = fields[i];
+    if (!code) { i += 1; continue; }
+
+    const letter = code[0];
+    if (letter === 'R' || letter === 'C') {
+      const to = fields[i + 2];
+      // A copy is a new file that happens to resemble an old one; from the
+      // reviewer's side it is an addition.
+      if (to) statuses.set(to, letter === 'R' ? 'R' : 'A');
+      i += 3;
+      continue;
+    }
+
+    const path = fields[i + 1];
+    if (path) {
+      // T is a type change (a file became a symlink, or the reverse). The
+      // path still exists on both sides, so for review purposes it is a
+      // modification.
+      statuses.set(path, letter === 'A' || letter === 'D' ? letter : 'M');
+    }
+    i += 2;
+  }
+
+  return statuses;
+}
+
+/**
+ * The flat file list for a commit or range review.
+ *
+ * Paths still come from `diffSummary`, whose rename and quoting handling was
+ * earned the hard way (#20, #25, #64). Only the status letter comes from
+ * `statuses` when it is given -- which every caller in the server does. The
+ * count-based guess remains as the fallback for a caller that has nothing
+ * better, not as the answer.
+ *
+ * @param {import('simple-git').DiffResult} diffSummary
+ * @param {Map<string, string>} [statuses] from `parseNameStatus`
+ */
+function collectCommitChanges(diffSummary, statuses) {
   const files = diffSummary?.files ?? [];
   return files.map(file => {
     const { path, isRename } = parseCommitFilePath(file?.file);
-    const status = isRename ? 'R' : classifyCommitFile(file);
-    return { path, status };
+    if (isRename) return { path, status: 'R' };
+    if (file?.binary) return { path, status: 'B' };
+
+    const known = statuses?.get(path);
+    return { path, status: known ?? classifyCommitFile(file) };
   });
 }
 
@@ -205,5 +273,6 @@ module.exports = {
   collectCommitChanges,
   classifyCommitFile,
   unquoteGitPath,
-  parseCommitFilePath
+  parseCommitFilePath,
+  parseNameStatus
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-reviewer",
-  "version": "2.10.0",
+  "version": "2.12.0",
   "description": "Review your coding agent's changes like a pull request — locally, with inline comments and threaded follow-ups, then hand the marked-up review back to the agent",
   "author": "Dheeraj Jha",
   "license": "MIT",

package/public/app.js

@@ -137,63 +137,307 @@ function shortSha(sha) {
   return typeof sha === 'string' ? sha.slice(0, 8) : '';
 }
 
+/** A full sha is shortened for display; a branch or tag name is left alone. */
+function displayRef(ref) {
+  return /^[0-9a-f]{40}$/i.test(ref ?? '') ? shortSha(ref) : (ref ?? '');
+}
+
+/** `n thing` or `n things`, instead of the `thing(s)` that reads like a form. */
+function plural(n, word) {
+  return `${n} ${word}${n === 1 ? '' : 's'}`;
+}
+
+// What the compare pickers can offer, from /api/refs. Refetched on every
+// load, because a comparison opens a new session and branches move.
+let currentRefs = null;
+
+// The "type something else" choice at the foot of either picker.
+const OTHER_REF = '__other__';
+
+const PICKERS = {
+  base: { select: 'compareBaseSelect', other: 'compareBaseOther' },
+  head: { select: 'compareHeadSelect', other: 'compareHeadOther' }
+};
+
 /**
- * Say what the review is of, above the files.
+ * Fetch the branches, tags and commits the pickers offer, and fill both.
  *
- * The empty-range case is the reason this exists. `git diff x3 x5` over work
- * that was added and then removed is correctly empty, and a file list showing
- * nothing is indistinguishable from a repository with nothing to review. The
- * commit count stays on screen so that an empty list reads as "9 commits, no
- * net change" rather than as "nothing happened".
+ * A failure leaves both pickers with only "Other…" in them, which still
+ * works; a repository whose refs will not list is not a reason to refuse to
+ * compare it.
+ */
+async function loadRefs(repoId) {
+  try {
+    const response = await fetch(`${API_BASE}/refs/${repoId}`);
+    currentRefs = response.ok ? await response.json() : null;
+  } catch {
+    currentRefs = null;
+  }
+  fillPicker('base');
+  fillPicker('head');
+}
+
+/**
+ * Fill one picker, grouped the way people look for things.
  *
- * @param {{mode: string, range: ?{base: string, head: string, commits: number}}} data
+ * Branches first, because "my branch against main" is the comparison people
+ * reach for. Every label goes in through `new Option`, which sets text, not
+ * markup: branch names and commit subjects come from whatever repository is
+ * open, and a ref name may legally contain `<` and `>`.
  */
-function renderScope(data) {
-  const bar = document.getElementById('scopeBar');
-  const label = document.getElementById('scopeLabel');
-  const reset = document.getElementById('scopeResetBtn');
+function fillPicker(end) {
+  const select = document.getElementById(PICKERS[end].select);
+  const refs = currentRefs;
+  select.innerHTML = '';
+
+  const placeholder = new Option(end === 'base' ? 'Choose a base…' : 'Choose what to compare…', '');
+  placeholder.disabled = true;
+  select.appendChild(placeholder);
+
+  const group = (label, options) => {
+    if (options.length === 0) return;
+    const optgroup = document.createElement('optgroup');
+    optgroup.label = label;
+    options.forEach(option => optgroup.appendChild(option));
+    select.appendChild(optgroup);
+  };
 
-  bar.classList.remove('hidden');
-  reset.classList.toggle('hidden', data.mode !== 'range');
+  if (refs) {
+    group('Branches', refs.branches.map(branch => new Option(
+      `${branch.name}${branch.name === refs.current ? ' (current)' : ''}  ·  ${branch.when}`,
+      branch.name
+    )));
+    group('Remote branches', refs.remotes.map(branch => new Option(`${branch.name}  ·  ${branch.when}`, branch.name)));
+    group('Tags', refs.tags.map(tag => new Option(`${tag.name}  ·  ${tag.when}`, tag.name)));
+    group(
+      refs.current ? `Recent commits on ${refs.current}` : 'Recent commits',
+      refs.commits.map(commit => new Option(`${commit.short}  ·  ${commit.subject}  ·  ${commit.when}`, commit.sha))
+    );
+  }
 
-  if (data.mode === 'range' && data.range) {
-    const { base, head, commits } = data.range;
-    label.textContent =
-      `Comparing ${shortSha(base)} \u2192 ${shortSha(head)} \u2014 ` +
-      `${commits} commit${commits === 1 ? '' : 's'}, shown as one combined diff`;
-    document.getElementById('compareBase').value = shortSha(base);
+  select.appendChild(new Option('Other: a tag, HEAD~5, a sha…', OTHER_REF));
+  select.value = '';
+}
+
+/**
+ * Point a picker at a ref, by name if it is offered, by sha if the name is
+ * not but the commit is, and otherwise through "Other…" with the text shown.
+ *
+ * A range opened by typing `HEAD~2` resolves to a commit that may well be in
+ * the list; showing it selected there is more useful than a picker stuck on
+ * "Other" around a value that is also sitting three rows down.
+ */
+function selectRef(end, name, sha) {
+  const select = document.getElementById(PICKERS[end].select);
+  const other = document.getElementById(PICKERS[end].other);
+  const offered = value => [...select.options].some(option => option.value === value);
+
+  if (name && offered(name)) {
+    select.value = name;
+  } else if (sha && offered(sha)) {
+    select.value = sha;
+  } else if (name || sha) {
+    select.value = OTHER_REF;
+    other.value = name || displayRef(sha);
+    other.classList.remove('hidden');
     return;
+  } else {
+    select.value = '';
+  }
+  other.classList.add('hidden');
+  other.value = '';
+}
+
+/** The ref one end of the comparison currently names, or '' if none yet. */
+function pickedRef(end) {
+  const select = document.getElementById(PICKERS[end].select);
+  return select.value === OTHER_REF
+    ? document.getElementById(PICKERS[end].other).value.trim()
+    : select.value;
+}
+
+/** Either picker changed: compare as soon as both ends are known. */
+function onPickerChange(end) {
+  const select = document.getElementById(PICKERS[end].select);
+  const other = document.getElementById(PICKERS[end].other);
+
+  if (select.value === OTHER_REF) {
+    other.classList.remove('hidden');
+    other.focus();
+    return; // Enter in the box compares; see the listeners in DOMContentLoaded.
   }
 
-  label.textContent = data.mode === 'lastCommit'
-    ? 'Reviewing the last commit'
-    : 'Reviewing uncommitted changes';
-  document.getElementById('compareBase').value = '';
+  other.classList.add('hidden');
+  compareNow();
 }
 
-/** Reload the repository as a range starting at whatever was typed. */
-function compareFrom() {
-  const base = document.getElementById('compareBase').value.trim();
+function compareNow() {
+  const base = pickedRef('base');
+  const head = pickedRef('head');
+  if (base && head) loadRepo({ base, head });
+}
+
+/** Reverse the comparison: "what does main have that my branch does not". */
+function swapCompare() {
+  const base = pickedRef('base');
+  const head = pickedRef('head');
+  if (base && head) loadRepo({ base: head, head: base });
+}
+
+/**
+ * The base most people mean, if the repository makes it obvious.
+ *
+ * The remote comes first: a local `main` that has not been pulled in a week
+ * is a quietly wrong base, and `origin/main` is what the pull request will be
+ * measured against. Never the branch you are on -- comparing a branch with
+ * itself is always empty, and offering it as a default would make the first
+ * click of the feature look broken.
+ */
+function defaultBase() {
+  const refs = currentRefs;
+  if (!refs) return null;
+
+  const known = new Set([...refs.branches, ...refs.remotes].map(ref => ref.name));
+  const candidates = ['origin/main', 'main', 'origin/master', 'master', 'origin/develop', 'develop'];
+  return candidates.find(name => known.has(name) && name !== refs.current) ?? null;
+}
+
+/**
+ * Open the compare row. With an obvious base, compare straight away: one
+ * click to the view a pull request would give you. Without one, show the
+ * pickers and wait -- a guessed comparison nobody asked for is worse than
+ * asking.
+ */
+function openCompare() {
+  document.getElementById('compareRow').classList.remove('hidden');
+  const head = currentRefs?.current ?? 'HEAD';
+  const base = defaultBase();
 
-  if (!base) {
-    showStatus('Enter a commit, tag or branch to compare from', 'error');
+  if (base) {
+    loadRepo({ base, head });
     return;
   }
 
-  loadRepo({ base });
+  selectRef('base', null, null);
+  selectRef('head', head, null);
+  document.getElementById('compareToggle').classList.add('hidden');
+  document.getElementById('scopeResetBtn').classList.remove('hidden');
+  document.getElementById(PICKERS.base.select).focus();
 }
 
 /** Back to the default scope: uncommitted changes, or the last commit. */
 function resetScope() {
-  document.getElementById('compareBase').value = '';
+  document.getElementById('compareRow').classList.add('hidden');
   loadRepo();
 }
 
+/**
+ * Say what the review is of, in the names the reviewer used.
+ *
+ * Built from DOM nodes rather than markup: branch names are chosen by
+ * whoever made the repository, and one may legally contain `<`.
+ *
+ * @param {{mode: string, range: ?object, files: object[]}} data
+ */
+function renderScope(data) {
+  const bar = document.getElementById('scopeBar');
+  const label = document.getElementById('scopeLabel');
+  const meta = document.getElementById('scopeMeta');
+  const note = document.getElementById('scopeNote');
+  const row = document.getElementById('compareRow');
+  const toggle = document.getElementById('compareToggle');
+  const reset = document.getElementById('scopeResetBtn');
+
+  const strong = text => {
+    const el = document.createElement('strong');
+    el.textContent = text;
+    return el;
+  };
+  const setNote = text => {
+    note.textContent = text ?? '';
+    note.classList.toggle('hidden', !text);
+  };
+
+  bar.classList.remove('hidden');
+  label.replaceChildren();
+  const branch = currentRefs?.current;
+
+  if (data.mode === 'range' && data.range) {
+    const range = data.range;
+    const base = displayRef(range.baseName ?? range.base);
+    const head = displayRef(range.headName ?? range.head);
+    const files = data.files.length;
+
+    label.append(strong(base), ' → ', strong(head));
+    meta.textContent = files > 0
+      ? `${plural(range.commits, 'commit')} · ${plural(files, 'file')} changed`
+      : `${plural(range.commits, 'commit')} · no files differ`;
+
+    // The empty cases first: they are the ones that need explaining, and an
+    // empty file list with no explanation reads as the tool having failed.
+    if (files === 0 && range.commits === 0) {
+      setNote(range.behind > 0
+        ? `${head} has nothing that ${base} does not already have. Try swapping them to see what ${base} adds.`
+        : `${base} and ${head} are the same commit, so there is nothing between them.`);
+    } else if (files === 0) {
+      setNote(`Those ${plural(range.commits, 'commit')} undo each other: every change in them was reverted again before ${head}, so there is no difference left to review.`);
+    } else if (range.behind > 0) {
+      // The merge-base diff leaves these out on purpose, the way a pull
+      // request does. Say so, or someone goes looking for main's change and
+      // concludes the tool lost it.
+      setNote(`${base} has ${plural(range.behind, 'newer commit')} that ${range.behind === 1 ? 'is' : 'are'} not on ${head}. ${range.behind === 1 ? 'It is' : 'They are'} left out: this shows only what ${head} changes since the two diverged, as a pull request would.`);
+    } else {
+      setNote(null);
+    }
+
+    row.classList.remove('hidden');
+    selectRef('base', range.baseName, range.base);
+    selectRef('head', range.headName, range.head);
+    toggle.classList.add('hidden');
+    reset.classList.remove('hidden');
+    return;
+  }
+
+  if (data.mode === 'lastCommit') {
+    label.append('Last commit');
+    if (branch) label.append(' on ', strong(branch));
+    const tip = currentRefs?.commits?.[0];
+    meta.textContent = tip ? `${tip.subject} · ${tip.short}` : '';
+  } else {
+    label.append('Uncommitted changes');
+    if (branch) label.append(' on ', strong(branch));
+    meta.textContent = plural(data.files.length, 'file') + ' changed';
+  }
+
+  setNote(null);
+  row.classList.add('hidden');
+  toggle.classList.remove('hidden');
+  reset.classList.add('hidden');
+}
+
+/** Empty the diff pane, so a finished comparison cannot leave the last one's file on screen. */
+function clearCodePane() {
+  currentFile = null;
+  currentDiffLines = [];
+  document.getElementById('codeSection').classList.add('hidden');
+  document.getElementById('currentFile').textContent = '';
+}
+
+/** What the file list says when a comparison has no files in it. */
+function showEmptyFileList(message) {
+  const filesList = document.getElementById('filesList');
+  const empty = document.createElement('div');
+  empty.className = 'files-empty';
+  empty.textContent = message;
+  filesList.replaceChildren(empty);
+}
+
 /**
  * Load a repository, optionally as a range between two commits.
  *
- * @param {{base?: string}} [scope] omit for the default: uncommitted changes,
- *   falling back to the last commit on a clean tree.
+ * @param {{base?: string, head?: string}} [scope] omit for the default:
+ *   uncommitted changes, falling back to the last commit on a clean tree.
+ *   `head` defaults to HEAD on the server.
  */
 async function loadRepo(scope = {}) {
   const repoPath = document.getElementById('repoPath').value.trim();
@@ -210,7 +454,9 @@ async function loadRepo(scope = {}) {
     const response = await fetch(`${API_BASE}/load-repo`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(scope.base ? { repoPath, base: scope.base } : { repoPath })
+      body: JSON.stringify(scope.base
+        ? { repoPath, base: scope.base, ...(scope.head ? { head: scope.head } : {}) }
+        : { repoPath })
     });
 
     const data = await response.json();
@@ -230,6 +476,9 @@ async function loadRepo(scope = {}) {
       setRepoButton(data.repoPath);
     }
 
+    // Before renderScope, which needs the options present to select the
+    // current ends among them, and the current branch to name it.
+    await loadRefs(data.repoId);
     renderScope(data);
 
     if (data.files.length === 0) {
@@ -239,9 +488,16 @@ async function loadRepo(scope = {}) {
       // that covers -- so this is information, not an error, and it must not
       // be dressed as one.
       if (data.mode === 'range') {
-        showStatus(data.message, 'success');
+        // The scope bar is already explaining this; a status line repeating
+        // it underneath is two bars saying one thing.
+        clearStatus();
         hidePicker();
         displayFiles([]);
+        showEmptyFileList('No files differ between these two.');
+        updateCommentsSidebar();
+        // Or the previous comparison's file stays on screen under a bar that
+        // says there are no files, and reads as part of this one.
+        clearCodePane();
         document.getElementById('loadBtn').disabled = false;
         return;
       }
@@ -251,9 +507,15 @@ async function loadRepo(scope = {}) {
       return;
     }
 
-    showStatus(data.message, 'success');
+    // The scope bar above says what was loaded, in more useful terms than
+    // this line did ("Found 3 changed file(s)"), so there is nothing left
+    // for the status line to add on success.
+    clearStatus();
     hidePicker();
     displayFiles(data.files);
+    // Which comments are in view depends on which files are, so the sidebar
+    // is redrawn for every new scope, not only when saved comments arrive.
+    updateCommentsSidebar();
 
     // Load saved comments
     const savedComments = await loadCommentsFromBackend();
@@ -273,7 +535,7 @@ async function loadRepo(scope = {}) {
       // Show comments sidebar immediately
       updateCommentsSidebar();
 
-      showStatus(`${data.message} - Loaded ${savedComments.length} saved comment(s)`, 'success');
+      showStatus(`Picked up ${plural(savedComments.length, 'saved comment')} from last time.`, 'success');
     }
 
     // Open something. A loaded repository used to sit behind an empty pane
@@ -300,6 +562,15 @@ async function loadRepo(scope = {}) {
 }
 
 // Display list of changed files
+/** What each status letter means, for the badge's tooltip and screen readers. */
+const FILE_STATUS_NAMES = {
+  A: 'Added',
+  M: 'Modified',
+  D: 'Deleted',
+  R: 'Renamed',
+  B: 'Binary'
+};
+
 function fileStatusClass(status) {
   switch (status) {
     case 'A': return 'file-status-added';
@@ -334,7 +605,12 @@ function displayFiles(files) {
       ? `${escapeHtml(path)}/<span class="filename">${escapeHtml(filename)}</span>`
       : `<span class="filename">${escapeHtml(filename)}</span>`;
     const statusClass = fileStatusClass(status);
-    const statusBadge = `<span class="file-status ${statusClass}">${status}</span>`;
+    // One letter is git's vocabulary, not everyone's. The name rides along as
+    // a tooltip and as the accessible label, so "D" is never the only thing
+    // saying that a file is gone. `status` is one of five letters the server
+    // produces, and escaped anyway: it is data that ends up in markup.
+    const statusName = FILE_STATUS_NAMES[status] ?? 'Changed';
+    const statusBadge = `<span class="file-status ${statusClass}" title="${statusName}" aria-label="${statusName}">${escapeHtml(status)}</span>`;
 
     // The row used to carry the file name itself, inside a string literal
     // inside the attribute the browser evaluates as JavaScript. A name with a
@@ -1325,10 +1601,19 @@ function resetApp() {
 // Show status message
 function showStatus(message, type) {
   const statusEl = document.getElementById('status');
-  statusEl.textContent = 'Status: ' + message;
+  // No "Status:" prefix. The element is role="status", which is what tells a
+  // screen reader what it is; sighted readers could already see that.
+  statusEl.textContent = message;
   statusEl.className = `status ${type}`;
 }
 
+/** Hide the status line, when something else on screen is already saying it. */
+function clearStatus() {
+  const statusEl = document.getElementById('status');
+  statusEl.textContent = '';
+  statusEl.className = 'status hidden';
+}
+
 // Track if we're in full context mode
 let isFullContextMode = false;
 let storedFullFileLines = null;
@@ -1639,14 +1924,24 @@ function updateCommentsSidebar() {
         // anyway. A comment's identity here is its position in `comments`,
         // and that is a number. See #46.
         const commentIndex = comments.indexOf(comment);
+        // A comment is kept across comparisons -- switch from main -> feature
+        // back to the last commit and a note on a file only the branch
+        // touched is still yours. It just is not on screen, and a sidebar
+        // entry that looks attached but does nothing when clicked reads as
+        // lost. So it says where it stands.
+        const elsewhere = !currentFiles.some(f => f.path === file);
+        const elsewhereHtml = elsewhere
+          ? '<div class="comment-item-elsewhere-note">Not in this view</div>'
+          : '';
         html += `
-          <div class="comment-item">
+          <div class="comment-item${elsewhere ? ' comment-item-elsewhere' : ''}">
             <button class="comment-item-delete" onclick="event.stopPropagation(); deleteCommentFromSidebar(${Number(commentIndex)})" title="Delete comment">×</button>
             <div class="comment-item-content" onclick="jumpToComment(${Number(commentIndex)})">
               <div class="comment-item-file">${escapeHtml(file)}</div>
               <div class="comment-item-line">Line ${comment.line}</div>
               <div class="comment-item-text">${escapeHtml(comment.text)}</div>
               ${selectedHtml}
+              ${elsewhereHtml}
             </div>
           </div>
         `;
@@ -1686,7 +1981,17 @@ function jumpToComment(commentIndex) {
 
   // Find the file index
   const fileIndex = currentFiles.findIndex(f => f.path === file);
-  if (fileIndex === -1) return;
+  if (fileIndex === -1) {
+    // This used to return without a word, so clicking a comment did nothing
+    // and looked broken. The comment is safe; the file is just not part of
+    // what is being compared right now.
+    showStatus(
+      `${file} is not in the files you are looking at now, so this comment cannot be shown in place. ` +
+      'It is kept, and will be back in place in any view that includes that file.',
+      'loading'
+    );
+    return;
+  }
 
   // Load the file
   loadFile(file, fileIndex).then(() => {
@@ -1827,11 +2132,13 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
-  document.getElementById('compareBase').addEventListener('keypress', (e) => {
-    if (e.key === 'Enter') {
-      compareFrom();
-    }
-  });
+  for (const end of ['base', 'head']) {
+    document.getElementById(PICKERS[end].other).addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        compareNow();
+      }
+    });
+  }
 
   // Initialize resize handle
   initResizeHandle();

package/public/index.html

@@ -53,22 +53,42 @@
         </button>
       </div>
     </div>
-    <div id="status" class="status"></div>
-
-    <div id="scopeBar" class="scope-bar hidden">
-      <span id="scopeLabel" class="scope-label"></span>
-      <div class="scope-compare">
-        <label for="compareBase">Compare from</label>
-        <input
-          type="text"
-          id="compareBase"
-          placeholder="commit, tag or branch"
-          spellcheck="false"
-          autocomplete="off"
-          value="">
-        <button id="compareBtn" onclick="compareFrom()">Compare</button>
-        <button id="scopeResetBtn" class="scope-reset hidden" onclick="resetScope()">Back to latest</button>
+    <div id="status" class="status hidden" role="status" aria-live="polite"></div>
+
+    <div id="scopeBar" class="scope-bar hidden" role="region" aria-label="What is being reviewed">
+      <div class="scope-summary">
+        <div class="scope-text">
+          <span id="scopeLabel" class="scope-label"></span>
+          <span id="scopeMeta" class="scope-meta"></span>
+        </div>
+        <div class="scope-actions">
+          <button id="compareToggle" class="scope-action" onclick="openCompare()">Compare branches</button>
+          <button id="scopeResetBtn" class="scope-action hidden" onclick="resetScope()">Stop comparing</button>
+        </div>
+      </div>
+
+      <!-- GitHub's vocabulary, deliberately: "base" and "compare" are what
+           the people using this already call the two ends of a pull request. -->
+      <div id="compareRow" class="compare-row hidden">
+        <div class="compare-end">
+          <label for="compareBaseSelect">Base</label>
+          <select id="compareBaseSelect" onchange="onPickerChange('base')"></select>
+          <input id="compareBaseOther" class="compare-other hidden" type="text"
+            placeholder="tag, HEAD~5 or sha" spellcheck="false" autocomplete="off"
+            aria-label="Base ref">
+        </div>
+        <button id="compareSwap" class="compare-swap" onclick="swapCompare()"
+          title="Swap base and compare" aria-label="Swap base and compare">&#8644;</button>
+        <div class="compare-end">
+          <label for="compareHeadSelect">Compare</label>
+          <select id="compareHeadSelect" onchange="onPickerChange('head')"></select>
+          <input id="compareHeadOther" class="compare-other hidden" type="text"
+            placeholder="tag, HEAD~5 or sha" spellcheck="false" autocomplete="off"
+            aria-label="Compare ref">
+        </div>
       </div>
+
+      <p id="scopeNote" class="scope-note hidden"></p>
     </div>
   </header>
 

package/public/style.css

@@ -1878,60 +1878,197 @@ button:disabled {
   text-align: center;
 }
 
-/* What the review is of, and how to change it.
+/* ---------------------------------------------------------------------------
+ * What the review is of, and how to change it.
  *
- * Its own row under the status line rather than beside the repository
- * controls: choosing a repository and choosing which of its commits to look
- * at are two different decisions, and crowding them made the header read as
- * one long form. */
+ * Its own block under the status line rather than beside the repository
+ * controls: choosing a repository and choosing which two points of it to look
+ * between are different decisions, and crowding them into one row made the
+ * header read as one long form.
+ * ------------------------------------------------------------------------ */
+
 .scope-bar {
+  margin-top: 8px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  background: #f6f8fa;
+  border: 1px solid #e1e4e8;
+  font-size: 13px;
+  color: #24292e;
+}
+
+.scope-summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 8px 16px;
-  margin-top: 8px;
-  padding: 8px 12px;
-  border-radius: 6px;
-  background: #f3f4f6;
-  border-left: 3px solid #6a737d;
-  font-size: 13px;
 }
 
-/* The scope reads as a sentence rather than a field label, because the case
- * that matters most is "9 commits, and no net change" — which has to be
- * legible as an explanation, not as a value. */
-.scope-label {
-  color: #24292e;
+/* The scope reads as a sentence -- "main → feature/auth" -- rather than as a
+ * labelled field, because the names are the information. */
+.scope-text {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px 12px;
   min-width: 0;
 }
 
-.scope-compare {
+.scope-label {
+  font-size: 14px;
+  overflow-wrap: anywhere;
+}
+
+.scope-label strong {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: #fff;
+  border: 1px solid #d1d5da;
+}
+
+.scope-meta {
+  color: #586069;
+}
+
+.scope-actions {
   display: flex;
-  align-items: center;
   gap: 8px;
   flex-shrink: 0;
 }
 
-.scope-compare label {
-  color: #6a737d;
-  white-space: nowrap;
+/* Secondary buttons. The :hover rule is not optional: `button:hover` sets the
+ * primary blue and outranks a single class on specificity, so a secondary
+ * button without its own hover rule turns into dark text on dark blue the
+ * moment the pointer reaches it. That shipped once, on "Back to latest". */
+.scope-action,
+.compare-swap {
+  background: #fff;
+  color: #24292e;
+  border: 1px solid #d1d5da;
+  padding: 5px 12px;
+  font-size: 13px;
 }
 
-.scope-compare input {
-  width: 190px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 12px;
+.scope-action:hover,
+.compare-swap:hover {
+  background: #f3f4f6;
+  border-color: #b8bec6;
 }
 
-.scope-reset {
-  background: transparent;
+.scope-action:focus-visible,
+.compare-swap:focus-visible,
+.compare-end select:focus-visible,
+.compare-other:focus-visible {
+  outline: 2px solid #0366d6;
+  outline-offset: 1px;
+}
+
+.compare-row {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: 8px 10px;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid #e1e4e8;
+}
+
+.compare-end {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1 1 240px;
+  min-width: 0;
+}
+
+.compare-end label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #586069;
+}
+
+.compare-end select,
+.compare-other {
+  width: 100%;
+  min-width: 0;
+  font-size: 13px;
+  padding: 6px 8px;
   border: 1px solid #d1d5da;
+  border-radius: 6px;
+  background: #fff;
   color: #24292e;
 }
 
+.compare-other {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+}
+
+.compare-swap {
+  flex: 0 0 auto;
+  font-size: 16px;
+  line-height: 1;
+  padding: 7px 10px;
+}
+
+/* Why the file list looks the way it does. Its own line, in the same quiet
+ * voice as the meta text: this is explanation, not a warning. An empty
+ * comparison is a real answer, and it must not be dressed as an error. */
+.scope-note {
+  margin: 10px 0 0;
+  color: #586069;
+  line-height: 1.45;
+}
+
+.files-empty {
+  padding: 16px 12px;
+  color: #586069;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+/* Narrow screens: the two ends stack, and the swap button sits between them
+ * rather than overflowing the bar -- which the single-row version did, at
+ * 760px, with the Compare button hanging off the right edge. */
 @media (max-width: 720px) {
-  .scope-compare input {
-    width: 120px;
+  .compare-row {
+    flex-direction: column;
+    align-items: stretch;
   }
+
+  .compare-end {
+    flex: 1 1 auto;
+  }
+
+  .compare-swap {
+    align-self: center;
+    transform: rotate(90deg);
+  }
+
+  .scope-actions {
+    width: 100%;
+  }
+}
+
+/* A comment on a file that is not in the current comparison. Kept, not
+ * lost -- dimmed so it reads as "elsewhere", with a line saying so, because a
+ * sidebar entry that looks attached but goes nowhere when clicked reads as a
+ * bug. */
+.comment-item-elsewhere {
+  opacity: 0.72;
+}
+
+.comment-item-elsewhere-note {
+  margin-top: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #6a737d;
 }

package/server.js

@@ -12,7 +12,7 @@ const {
   resolveRepoFile,
   PathEscapeError
 } = require('./lib/paths');
-const { collectWorkingChanges, collectCommitChanges } = require('./lib/changes');
+const { collectWorkingChanges, collectCommitChanges, parseNameStatus } = require('./lib/changes');
 const { SessionStore } = require('./lib/sessions');
 const { normalizeComments } = require('./lib/comments');
 const { formatReview, reviewFilename, commentsFilename } = require('./lib/review');
@@ -62,6 +62,17 @@ class FileNotFoundError extends Error {
  *   leaves before deciding it is not coming back.
  * @returns {import('express').Express}
  */
+// How far back the range picker offers to go. Long enough to cover the work
+// someone is plausibly still reviewing, short enough that the list is a list
+// rather than the whole history -- anything older is still reachable by
+// typing a ref, which is what the text box is for.
+const COMMIT_LIST_LIMIT = 30;
+
+// Branches and tags offered per group. A repository with two hundred stale
+// branches should still produce a list someone can scan; the ones past the
+// cut are the least recently touched and are still reachable by typing.
+const REF_LIST_LIMIT = 40;
+
 function createApp(options = {}) {
   const {
     reviewsDir = resolveReviewsDir(),
@@ -122,10 +133,18 @@ function createApp(options = {}) {
     const absolutePath = resolveRepoFile(session.repoPath, filePath);
 
     if (session.range) {
+      // A range is two commits, and the working tree is neither of them. It
+      // used to be the fallback here, which was merely odd while the head of
+      // every range was HEAD and is wrong now that it can be another branch:
+      // Full Context on feature/billing, opened from a checkout of
+      // feature/auth, would show auth's copy of the file under billing's name.
+      //
+      // A path missing at the head was deleted inside the range, and the text
+      // worth showing is the text that was deleted.
       try {
         return await git.show([`${session.range.head}:${filePath}`]);
       } catch {
-        return await fs.readFile(absolutePath, 'utf-8').catch(() => '');
+        return git.show([`${session.range.from}:${filePath}`]).catch(() => '');
       }
     }
 
@@ -199,7 +218,7 @@ function createApp(options = {}) {
 
   async function diffForFile(git, session, filePath) {
     if (session.range) {
-      return git.diff([session.range.base, session.range.head, '--', filePath]);
+      return git.diff([session.range.from, session.range.head, '--', filePath]);
     }
     if (!(await hasCommits(git))) {
       return '';
@@ -245,7 +264,7 @@ function createApp(options = {}) {
       }
     }
 
-    const resolve = async (label, ref) => {
+    const resolve = async ref => {
       try {
         return (await git.revparse([`${ref}^{commit}`])).trim();
       } catch {
@@ -253,19 +272,67 @@ function createApp(options = {}) {
       }
     };
 
-    const baseSha = await resolve('base', base);
-    const headSha = await resolve('head', head);
-
-    // `base..head` counts what head has and base does not, which is the
-    // number a reviewer means by "how many commits am I looking at". It is
-    // not symmetric, and it is not the same as the file count -- a range
-    // whose changes cancel out has commits and no files, which is the whole
-    // reason this number is reported.
-    const commits = Number(
-      (await git.raw(['rev-list', '--count', `${baseSha}..${headSha}`])).trim()
+    const baseSha = await resolve(base);
+    const headSha = await resolve(head);
+
+    // The diff starts at the merge base, not at `base` itself -- what a pull
+    // request shows, and for the same reason. Compare feature/auth against a
+    // main that has moved on since the branch was cut, and a plain
+    // `git diff main feature/auth` includes main's newer commits *reversed*:
+    // the review then shows the feature author "undoing" a change they never
+    // touched, and a reviewer comments on it. On straight-line history the
+    // merge base of an ancestor and its descendant is the ancestor, so this
+    // changes nothing for x1..x5.
+    //
+    // Unrelated histories have no merge base; the plain two-ended diff is the
+    // only answer there, and it is the one given.
+    const from = await git.raw(['merge-base', baseSha, headSha])
+      .then(out => out.trim() || baseSha)
+      .catch(() => baseSha);
+
+    // `base..head` is what head has and base does not -- exactly the commits
+    // whose changes are in the diff. `head..base` is the other direction: what
+    // base has moved on by, which the merge-base diff deliberately leaves out
+    // and which the page has to say it left out, or someone will go looking
+    // for main's change and conclude the tool lost it.
+    const count = async range => Number(
+      (await git.raw(['rev-list', '--count', range])).trim()
     );
+    const commits = await count(`${baseSha}..${headSha}`);
+    const behind = await count(`${headSha}..${baseSha}`);
+
+    // What the person asked for, kept alongside the SHAs. Nobody chose
+    // `3eb57959`; they chose `main`, and a scope bar that answers in SHAs has
+    // translated their question into one they did not ask.
+    const nameOf = async ref => {
+      if (ref !== 'HEAD') return ref;
+      const branch = await git.revparse(['--abbrev-ref', 'HEAD']).then(b => b.trim()).catch(() => 'HEAD');
+      return branch === 'HEAD' ? headSha.slice(0, 8) : branch;
+    };
+
+    return {
+      base: baseSha,
+      head: headSha,
+      from,
+      commits: Number.isFinite(commits) ? commits : 0,
+      behind: Number.isFinite(behind) ? behind : 0,
+      baseName: await nameOf(base),
+      headName: await nameOf(head)
+    };
+  }
 
-    return { base: baseSha, head: headSha, commits: Number.isFinite(commits) ? commits : 0 };
+  /**
+   * The changed files of a range, with the status git gives each one.
+   *
+   * @param {import('simple-git').SimpleGit} git
+   * @param {{from: string, head: string}} range
+   */
+  async function collectRangeChanges(git, range) {
+    const [summary, nameStatus] = await Promise.all([
+      git.diffSummary([range.from, range.head]),
+      git.raw(['diff', '--name-status', '-z', '-M', range.from, range.head])
+    ]);
+    return collectCommitChanges(summary, parseNameStatus(nameStatus));
   }
 
   /**
@@ -282,17 +349,134 @@ function createApp(options = {}) {
    * @returns {string}
    */
   function describeRange(range, fileCount) {
-    const commits = `${range.commits} commit${range.commits === 1 ? '' : 's'}`;
+    const plural = (n, word) => `${n} ${word}${n === 1 ? '' : 's'}`;
+    const ends = `${range.baseName ?? range.base.slice(0, 8)} \u2192 ${range.headName ?? range.head.slice(0, 8)}`;
+
+    if (fileCount > 0) {
+      return `${ends}: ${plural(range.commits, 'commit')}, ${plural(fileCount, 'changed file')}`;
+    }
 
-    if (fileCount === 0) {
-      return range.commits === 0
-        ? 'Those two commits are the same, so there is nothing between them.'
-        : `${commits}, and no net change between the two ends — every change in them was undone again inside the range.`;
+    if (range.commits === 0) {
+      return range.behind === 0
+        ? `${ends}: both point at the same commit, so there is nothing between them.`
+        : `${ends}: ${range.headName ?? 'the head'} has no commits that ${range.baseName ?? 'the base'} does not already have.`;
     }
 
-    return `${commits}, ${fileCount} changed file${fileCount === 1 ? '' : 's'} between the two ends`;
+    return `${ends}: ${plural(range.commits, 'commit')}, and no net change \u2014 every change in them was undone again inside the range.`;
+  }
+
+  /**
+   * Recent commits, so a range can be picked instead of typed.
+   *
+   * Nobody knows the SHA of the commit they want to review back to, and
+   * asking for one is asking the reviewer to go and run `git log` in another
+   * window to use a tool whose whole point is not having to.
+   *
+   * Each entry is what a person recognises a commit by -- the subject line
+   * and when it landed -- with the SHA carried alongside rather than being
+   * the thing they have to read.
+   *
+   * `%x00` separates the fields because a commit subject can contain
+   * anything a person can type, including whatever delimiter looked safe.
+   *
+   * @param {import('simple-git').SimpleGit} git
+   * @param {number} limit
+   */
+  async function recentCommits(git, limit) {
+    const raw = await git.raw([
+      'log', `--max-count=${limit}`, '--format=%H%x00%h%x00%s%x00%cr'
+    ]);
+
+    return raw
+      .split('\n')
+      .filter(line => line.trim() !== '')
+      .map(line => {
+        const [sha, short, subject, when] = line.split('\u0000');
+        return { sha, short, subject, when };
+      });
   }
 
+  /**
+   * The commits of an open repository, newest first.
+   *
+   * Behind a session id like the file endpoints rather than taking a path:
+   * this reads history out of a repository, and the session is what says
+   * which repository the caller has already been granted.
+   */
+  /**
+   * Everything the compare pickers offer: branches, tags and recent commits.
+   *
+   * Branches come first in the page because comparing branches is what people
+   * reach for -- "what does my branch change against main" -- and a picker
+   * that only lists commits of the current branch makes that the one
+   * comparison you cannot pick. Remote-tracking branches are included because
+   * `origin/main` is the base most reviews actually want, and a local `main`
+   * that has not been pulled in a week is a quietly wrong one.
+   *
+   * Sorted by most recent activity, so the branch you are working on and the
+   * one you branched from are near the top rather than alphabetised into the
+   * middle of forty others.
+   */
+  app.get('/api/refs/:repoId', async (req, res) => {
+    const session = requireSession(res, req.params.repoId);
+    if (!session) return;
+
+    const git = gitFactory(session.repoPath);
+    const refList = async (pattern, limit) => {
+      try {
+        const raw = await git.raw([
+          'for-each-ref', `--count=${limit}`, '--sort=-committerdate',
+          '--format=%(refname:short)%00%(objectname)%00%(committerdate:relative)%00%(subject)%00%(symref)',
+          pattern
+        ]);
+        return raw.split('\n').filter(Boolean).map(line => {
+          const [name, sha, when, subject, symref] = line.split('\u0000');
+          return { name, sha, when, subject, symref };
+        })
+          // A symbolic ref points at another ref rather than being one --
+          // `origin/HEAD` in every clone. It cannot be filtered by name:
+          // `refname:short` abbreviates it to plain `origin`, which is how it
+          // first slipped into the list as a "branch".
+          .filter(ref => !ref.symref)
+          .map(({ symref, ...ref }) => ref);
+      } catch {
+        return [];
+      }
+    };
+
+    const current = await git.revparse(['--abbrev-ref', 'HEAD']).then(b => b.trim()).catch(() => null);
+    const [branches, remotes, tags, commits] = await Promise.all([
+      refList('refs/heads', REF_LIST_LIMIT),
+      refList('refs/remotes', REF_LIST_LIMIT),
+      refList('refs/tags', REF_LIST_LIMIT),
+      recentCommits(git, COMMIT_LIST_LIMIT).catch(() => [])
+    ]);
+
+    res.json({
+      // `HEAD` from --abbrev-ref means detached; say so rather than pretend
+      // there is a branch called HEAD.
+      current: current === 'HEAD' ? null : current,
+      branches,
+      remotes,
+      tags,
+      commits
+    });
+  });
+
+  app.get('/api/commits/:repoId', async (req, res) => {
+    try {
+      const session = requireSession(res, req.params.repoId);
+      if (!session) return;
+
+      const commits = await recentCommits(gitFactory(session.repoPath), COMMIT_LIST_LIMIT);
+      res.json({ commits });
+    } catch (error) {
+      // A repository with no commits is not an error, it is an empty list.
+      console.error('Commit list error:', error.message);
+      res.json({ commits: [] });
+    }
+  });
+
   /** Liveness probe, and a count of how many repositories are open. */
   app.get('/api/health', (req, res) => {
     res.json({ status: 'ok', sessions: sessions.size });
@@ -447,7 +631,7 @@ function createApp(options = {}) {
           return res.status(400).json({ error: error.message });
         }
 
-        files = collectCommitChanges(await git.diffSummary([range.base, range.head]));
+        files = await collectRangeChanges(git, range);
         mode = 'range';
         message = describeRange(range, files.length);
       } else {
@@ -459,9 +643,7 @@ function createApp(options = {}) {
         if (files.length === 0) {
           try {
             const lastCommit = await resolveRange(git, 'HEAD~1', 'HEAD');
-            const commitFiles = collectCommitChanges(
-              await git.diffSummary([lastCommit.base, lastCommit.head])
-            );
+            const commitFiles = await collectRangeChanges(git, lastCommit);
             if (commitFiles.length > 0) {
               files = commitFiles;
               mode = 'lastCommit';