git-reviewer 2.11.0 → 2.12.0

package/public/style.css

@@ -1878,89 +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;
-  border: 1px solid #d1d5da;
-  color: #24292e;
+.scope-action:focus-visible,
+.compare-swap:focus-visible,
+.compare-end select:focus-visible,
+.compare-other:focus-visible {
+  outline: 2px solid #0366d6;
+  outline-offset: 1px;
 }
 
-@media (max-width: 720px) {
-  .scope-compare input {
-    width: 120px;
-  }
+.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;
 }
 
-/* The picker carries the common case; the text box beside it carries
- * everything else — a branch, a tag, `HEAD~5`, a sha from somewhere else.
- * Both stay visible rather than one hiding behind a mode, because a control
- * you cannot see is a feature people believe is missing. */
-.scope-compare select {
-  max-width: 320px;
-  font-size: 12px;
-  padding: 4px 6px;
+.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;
 }
 
-.scope-compare select:disabled {
-  color: #6a737d;
-  background: #f3f4f6;
+.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 {
-    flex-wrap: wrap;
+  .compare-row {
+    flex-direction: column;
+    align-items: stretch;
   }
 
-  .scope-compare select {
-    max-width: 100%;
+  .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');
@@ -68,6 +68,11 @@ class FileNotFoundError extends Error {
 // 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(),
@@ -128,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(() => '');
       }
     }
 
@@ -205,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 '';
@@ -251,7 +264,7 @@ function createApp(options = {}) {
       }
     }
 
-    const resolve = async (label, ref) => {
+    const resolve = async ref => {
       try {
         return (await git.revparse([`${ref}^{commit}`])).trim();
       } catch {
@@ -259,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, commits: Number.isFinite(commits) ? commits : 0 };
+    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)
+    };
+  }
+
+  /**
+   * 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));
   }
 
   /**
@@ -288,15 +349,20 @@ 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 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 (fileCount > 0) {
+      return `${ends}: ${plural(range.commits, 'commit')}, ${plural(fileCount, 'changed file')}`;
     }
 
-    return `${commits}, ${fileCount} changed file${fileCount === 1 ? '' : 's'} between the two ends`;
+    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 `${ends}: ${plural(range.commits, 'commit')}, and no net change \u2014 every change in them was undone again inside the range.`;
   }
 
   /**
@@ -337,6 +403,66 @@ function createApp(options = {}) {
    * 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);
@@ -505,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 {
@@ -517,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';