git-reviewer 2.1.0 → 2.3.0

package/public/index.html

@@ -12,12 +12,35 @@
     <div class="header-content">
       <h1>Code Reviewer</h1>
       <div class="header-actions">
-        <input
-          type="text"
-          id="repoPath"
-          placeholder="Enter local repository path..."
-          value="">
-        <button id="loadBtn" onclick="loadRepo()">Load Repository</button>
+        <button id="repoButton" class="repo-button" onclick="showPicker()">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <path d="M1.75 1.5a.25.25 0 00-.25.25v11.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-8.5a.25.25 0 00-.25-.25H7.5a.75.75 0 01-.6-.3L5.55 2.4a.25.25 0 00-.2-.1H1.75z"></path>
+          </svg>
+          <span id="repoButtonLabel">Open a repository</span>
+        </button>
+
+        <button
+          id="pathToggle"
+          class="icon-button"
+          onclick="togglePathEntry()"
+          title="Type or paste a path instead"
+          aria-label="Type or paste a path instead"
+          aria-expanded="false">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <path d="M1.75 3h12.5c.966 0 1.75.784 1.75 1.75v6.5A1.75 1.75 0 0114.25 13H1.75A1.75 1.75 0 010 11.25v-6.5C0 3.784.784 3 1.75 3zm0 1.5a.25.25 0 00-.25.25v6.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-6.5a.25.25 0 00-.25-.25H1.75zM3 6h1.5v1.5H3V6zm2.75 0h1.5v1.5h-1.5V6zM8.5 6H10v1.5H8.5V6zm2.75 0h1.5v1.5h-1.5V6zM3 8.75h1.5v1.5H3v-1.5zm2.75 0h4.5v1.5h-4.5v-1.5zm5.75 0H13v1.5h-1.5v-1.5z"></path>
+          </svg>
+        </button>
+
+        <div id="pathEntry" class="path-entry hidden">
+          <input
+            type="text"
+            id="repoPath"
+            placeholder="/path/to/repository"
+            spellcheck="false"
+            autocomplete="off"
+            value="">
+          <button id="loadBtn" onclick="loadRepo()">Load</button>
+        </div>
         <button id="submitReviewBtn" onclick="submitReview()" class="submit-btn hidden">
           Submit Review
         </button>
@@ -27,6 +50,37 @@
   </header>
 
   <div class="main-container">
+    <section id="picker" class="picker">
+      <div class="picker-card">
+        <div class="picker-heading">
+          <h2>Open a repository</h2>
+          <button id="pickerClose" class="icon-button hidden" onclick="closePicker()"
+                  title="Keep the review open" aria-label="Keep the review open">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+              <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path>
+            </svg>
+          </button>
+        </div>
+
+        <section id="recentSection" class="picker-section hidden">
+          <h3>Recent</h3>
+          <div id="recentList" class="picker-list"></div>
+        </section>
+
+        <section class="picker-section picker-browse">
+          <h3>Browse</h3>
+          <div class="picker-toolbar">
+            <button id="browseUpBtn" class="picker-up" onclick="browseUp()">Up</button>
+            <span id="browsePath" class="picker-current"></span>
+            <button id="browseOpenBtn" class="picker-open hidden" onclick="openBrowsed()">
+              Open this repository
+            </button>
+          </div>
+          <div id="browseList" class="picker-list picker-list-scroll"></div>
+        </section>
+      </div>
+    </section>
+
     <aside id="sidebar" class="sidebar hidden">
       <div class="sidebar-header">
         <h2>Changed Files</h2>

package/public/style.css

@@ -44,9 +44,9 @@ body {
 .header-actions {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   flex: 1;
-  max-width: 800px;
+  min-width: 0;
 }
 
 #repoPath {
@@ -988,3 +988,334 @@ button:disabled {
   color: #24292e;
   border: 1px solid #e1e4e8;
 }
+
+/* A binary file has no lines to render; say so rather than showing a
+   lossy UTF-8 decode of its bytes. See #23. */
+.binary-notice {
+  padding: 28px 24px;
+  color: #57606a;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.binary-notice span {
+  display: block;
+  margin-top: 6px;
+  font-size: 13px;
+  opacity: 0.8;
+}
+
+/* Repository picker
+ *
+ * What the page shows before a repository is open. It used to show nothing at
+ * all but an empty path box in the header, which asked you to already know the
+ * path you were looking for.
+ */
+.picker {
+  flex: 1;
+  overflow-y: auto;
+  padding: 32px 24px;
+  display: flex;
+  justify-content: center;
+}
+
+.picker-card {
+  width: 100%;
+  max-width: 720px;
+}
+
+.picker-card h2 {
+  font-size: 18px;
+  font-weight: 600;
+  color: #24292e;
+  margin-bottom: 20px;
+}
+
+.picker-section {
+  margin-bottom: 28px;
+}
+
+.picker-section h3 {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: #6a737d;
+  margin-bottom: 10px;
+}
+
+.picker-list {
+  background: white;
+  border: 1px solid #e1e4e8;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.picker-list-scroll {
+  max-height: 340px;
+  overflow-y: auto;
+}
+
+.picker-empty {
+  padding: 16px;
+  font-size: 13px;
+  color: #6a737d;
+}
+
+.picker-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 14px;
+  border: none;
+  border-bottom: 1px solid #f0f2f4;
+  background: white;
+  font: inherit;
+  font-size: 13px;
+  color: #24292e;
+  text-align: left;
+  cursor: pointer;
+}
+
+.picker-row:last-child {
+  border-bottom: none;
+}
+
+.picker-row:hover {
+  background: #f6f8fa;
+}
+
+.picker-row-icon {
+  flex: none;
+  width: 16px;
+  color: #6a737d;
+}
+
+.picker-row-name {
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.picker-row-path {
+  flex: 1;
+  min-width: 0;
+  color: #6a737d;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* Truncate the front of a long path, not the end -- the last few segments
+   * are the ones that identify it. `direction: rtl` is what puts the ellipsis
+   * on the left; `unicode-bidi: plaintext` is what stops it also relocating
+   * the leading slash to the far end, which spells the path wrong. */
+  direction: rtl;
+  unicode-bidi: plaintext;
+  text-align: left;
+}
+
+.picker-row-meta {
+  flex: none;
+  color: #6a737d;
+  font-size: 12px;
+}
+
+.picker-badge {
+  flex: none;
+  padding: 1px 6px;
+  border-radius: 20px;
+  background: #ddf4e4;
+  color: #1a7f37;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+/* A repository that has been moved or deleted is still shown, because seeing
+ * the path you remember is a better answer than a list that quietly shrinks. */
+.picker-row.missing {
+  cursor: not-allowed;
+}
+
+.picker-row.missing .picker-row-name,
+.picker-row.missing .picker-row-path {
+  color: #a0a6ad;
+}
+
+.picker-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.picker-up {
+  flex: none;
+  padding: 5px 12px;
+  border: 1px solid #d1d5da;
+  border-radius: 6px;
+  background: white;
+  font: inherit;
+  font-size: 12px;
+  color: #24292e;
+  cursor: pointer;
+}
+
+.picker-up:hover:not(:disabled) {
+  background: #f6f8fa;
+}
+
+.picker-up:disabled {
+  color: #a0a6ad;
+  cursor: default;
+}
+
+.picker-current {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  color: #6a737d;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl;
+  unicode-bidi: plaintext;
+  text-align: left;
+}
+
+.picker-open {
+  flex: none;
+  padding: 5px 12px;
+  border: none;
+  border-radius: 6px;
+  background: #0366d6;
+  color: white;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.picker-open:hover {
+  background: #0256b9;
+}
+
+/* The repository control
+ *
+ * The header used to be a text box saying "Enter local repository path...",
+ * which asked the one thing a person opening this tool is least able to
+ * supply: the exact path, typed correctly, from memory. It is a button now.
+ * Typing a path is still there, behind the icon beside it, because pasting one
+ * is a real thing to want and a navigator is slow when you already know.
+ */
+.repo-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 380px;
+  padding: 7px 12px;
+  border: 1px solid #d1d5da;
+  border-radius: 6px;
+  background: white;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  color: #24292e;
+  cursor: pointer;
+}
+
+.repo-button:hover {
+  background: #f6f8fa;
+  border-color: #c6cbd1;
+}
+
+.repo-button svg {
+  flex: none;
+  color: #6a737d;
+}
+
+.repo-button span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: #6a737d;
+  cursor: pointer;
+}
+
+.icon-button:hover {
+  background: #f0f2f4;
+  color: #24292e;
+}
+
+.icon-button[aria-expanded='true'] {
+  background: #eaeef2;
+  border-color: #d1d5da;
+  color: #24292e;
+}
+
+.path-entry {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.path-entry input {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Pushed to the far end, so the review controls are not mixed in with the
+ * controls for choosing what you are reviewing. */
+.submit-btn {
+  margin-left: auto;
+}
+
+.picker-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.picker-heading h2 {
+  margin-bottom: 0;
+}
+
+/* Over the review rather than instead of it: switching repositories with a
+ * review open should not throw the review off the screen to ask. */
+.picker.as-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.45);
+  padding: 56px 24px;
+  align-items: flex-start;
+}
+
+.picker.as-overlay .picker-card {
+  max-width: 640px;
+  padding: 24px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  max-height: calc(100vh - 112px);
+  overflow-y: auto;
+}

package/server.js

@@ -18,6 +18,10 @@ const { normalizeComments } = require('./lib/comments');
 const { formatReview, reviewFilename, commentsFilename } = require('./lib/review');
 const { buildReviewDocument } = require('./lib/agent');
 const { readSavedComments, ReviewOwnershipError } = require('./lib/store');
+const { repoRoot } = require('./lib/repo');
+const { browse } = require('./lib/browse');
+const { recordRecent, describeRecents } = require('./lib/recents');
+const { listReviews } = require('./lib/export');
 
 const DEFAULT_PORT = 4500;
 const DEFAULT_HOST = '127.0.0.1';
@@ -149,6 +153,29 @@ function createApp(options = {}) {
    * @param {string} filePath
    * @returns {Promise<string>}
    */
+  /**
+   * Whether git considers this file binary.
+   *
+   * Asking git rather than sniffing the bytes ourselves, because git's
+   * answer is the one that produced the diff we are about to render, and a
+   * second opinion that disagreed would be worse than no opinion. It says
+   * so in the diff itself: `Binary files a/x and b/x differ` for the
+   * default format, `GIT binary patch` when binary patches are enabled.
+   *
+   * This matters beyond the mojibake. `lib/changes.js` already classifies
+   * these as `B` and the sidebar renders that letter, but the file endpoint
+   * never consulted it -- so a 2 KB PNG came back as ten `add` lines that
+   * were ~45% U+FFFD, and a comment left on one of them exported an
+   * `anchor` that can never match the file. docs/agent-format.md tells a
+   * consumer to locate comments by that anchor.
+   *
+   * @param {string} diffText
+   * @returns {boolean}
+   */
+  function isBinaryDiff(diffText) {
+    return /^Binary files .* differ$/m.test(diffText) || /^GIT binary patch$/m.test(diffText);
+  }
+
   async function diffForFile(git, session, filePath) {
     if (session.mode === 'lastCommit') {
       return git.diff(['HEAD~1', 'HEAD', '--', filePath]);
@@ -164,6 +191,61 @@ function createApp(options = {}) {
     res.json({ status: 'ok', sessions: sessions.size });
   });
 
+  /**
+   * Refuse a request a browser has marked as coming from somewhere else.
+   *
+   * `cors()` above is open, deliberately, and that is a settled decision this
+   * does not reopen. It is a rule for the two endpoints below, which differ
+   * from every other one in kind: they enumerate directories and name
+   * projects, rather than answering about a repository whose path the caller
+   * already had. A browser sends `Origin` on exactly the requests where that
+   * distinction matters and omits it on same-origin GETs, so the page keeps
+   * working and a page on another site does not. Anything that is not a
+   * browser can read these directories without asking this server anyway.
+   */
+  function sameOriginOnly(req, res, next) {
+    const origin = req.get('origin');
+
+    if (origin && origin !== `http://${req.headers.host}`) {
+      return res.status(403).json({ error: 'Not available to another origin' });
+    }
+
+    next();
+  }
+
+  /** List the directories inside one, so a repository can be found by looking. */
+  app.get('/api/browse', sameOriginOnly, async (req, res) => {
+    try {
+      res.json(await browse(req.query.path));
+    } catch (error) {
+      if (error.code === 'ENOENT' || error.code === 'ENOTDIR') {
+        return res.status(400).json({ error: 'No such directory' });
+      }
+      if (error.code === 'EACCES' || error.code === 'EPERM') {
+        return res.status(403).json({ error: 'Not allowed to read that directory' });
+      }
+
+      console.error('Browse error:', error);
+      res.status(500).json({ error: error.message });
+    }
+  });
+
+  /** Repositories opened before now, newest first. */
+  app.get('/api/recent', sameOriginOnly, async (req, res) => {
+    try {
+      // Annotated with what is saved against each, because "3 comments" is
+      // what tells you which of two checkouts you were in the middle of.
+      const counts = new Map(
+        (await listReviews(reviewsDir)).map(review => [review.repoPath, review.comments])
+      );
+
+      res.json({ projects: await describeRecents(reviewsDir, counts) });
+    } catch (error) {
+      console.error('Recent projects error:', error);
+      res.status(500).json({ error: error.message });
+    }
+  });
+
   /** Open a repository and list what changed. */
   app.post('/api/load-repo', async (req, res) => {
     try {
@@ -179,11 +261,16 @@ function createApp(options = {}) {
         return res.status(400).json({ error: 'Path does not exist' });
       }
 
-      const git = gitFactory(repoPath);
-      if (!(await git.checkIsRepo())) {
+      // Resolve to the root of the working tree before anything is keyed on
+      // this path. A subdirectory passes `checkIsRepo()` quite happily and
+      // then produces a file list whose diffs are all empty; see lib/repo.js.
+      const root = await repoRoot(repoPath, gitFactory);
+      if (!root) {
         return res.status(400).json({ error: 'Not a valid git repository' });
       }
 
+      const git = gitFactory(root);
+
       let files = collectWorkingChanges(await git.status());
       let mode = 'working';
       let message = `Found ${files.length} changed file(s)`;
@@ -204,10 +291,19 @@ function createApp(options = {}) {
         }
       }
 
-      const repoId = sessions.create(repoPath, mode);
-      console.log(`Loaded repository: ${repoPath} (mode: ${mode})`);
+      const repoId = sessions.create(root, mode);
+      console.log(`Loaded repository: ${root} (mode: ${mode})`);
 
-      res.json({ repoId, files, repoPath, mode, message });
+      try {
+        await recordRecent(reviewsDir, root);
+      } catch (error) {
+        // Being unable to remember this must not stop you opening it.
+        console.error('Could not record recent project:', error.message);
+      }
+
+      // `repoPath` in the response is the resolved root, not what was asked
+      // for, so the page can show which repository it actually opened.
+      res.json({ repoId, files, repoPath: root, mode, message });
     } catch (error) {
       console.error('Load repo error:', error);
       res.status(500).json({ error: error.message });
@@ -221,11 +317,26 @@ function createApp(options = {}) {
       const session = requireSession(res, repoId);
       if (!session) return;
 
+      // Confine the path first, explicitly. It used to be confined as a
+      // side effect of `readFileForMode` calling `resolveRepoFile`, so
+      // moving the read below the binary check silently turned a 400 into a
+      // 500 and let the traversal reach git. A containment check that only
+      // works because of statement order is not a containment check.
+      resolveRepoFile(session.repoPath, filePath);
+
       const git = gitFactory(session.repoPath);
-      const content = await readFileForMode(session, filePath);
       const diffText = await diffForFile(git, session, filePath);
 
-      res.json({ filePath, diffLines: parseDiff(diffText, content) });
+      // Answered before the file is read: decoding a PNG as UTF-8 to then
+      // throw the result away is how the mojibake got served in the first
+      // place.
+      if (isBinaryDiff(diffText)) {
+        return res.json({ filePath, binary: true, diffLines: [] });
+      }
+
+      const content = await readFileForMode(session, filePath);
+
+      res.json({ filePath, binary: false, diffLines: parseDiff(diffText, content) });
     } catch (error) {
       if (error instanceof PathEscapeError) {
         return res.status(400).json({ error: error.message });