git-reviewer 2.1.0 → 2.3.0

package/public/app.js

@@ -159,6 +159,14 @@ async function loadRepo() {
     currentRepoId = data.repoId;
     currentFiles = data.files;
 
+    // The server answers with the root of the working tree, which is not
+    // always what was asked for: open a subdirectory and the repository above
+    // it is what gets reviewed. Show the path that is actually loaded.
+    if (data.repoPath) {
+      document.getElementById('repoPath').value = data.repoPath;
+      setRepoButton(data.repoPath);
+    }
+
     if (data.files.length === 0) {
       showStatus('No uncommitted changes found in the repository', 'error');
       document.getElementById('loadBtn').disabled = false;
@@ -166,6 +174,7 @@ async function loadRepo() {
     }
 
     showStatus(data.message, 'success');
+    hidePicker();
     displayFiles(data.files);
 
     // Load saved comments
@@ -187,8 +196,23 @@ async function loadRepo() {
       showStatus(`${data.message} - Loaded ${savedComments.length} saved comment(s)`, 'success');
     }
 
+    // Open something. A loaded repository used to sit behind an empty pane
+    // until a file was clicked, which reads as a failure rather than as a
+    // result (#47). Done here rather than in `displayFiles` because the saved
+    // comments have to be in hand first, or the diff renders without them.
+    //
+    // The file already open wins if it is still in the list, so reloading a
+    // repository does not move you off what you were reading.
+    if (currentFiles.length > 0) {
+      const previous = currentFiles.findIndex(file => file.path === currentFile);
+      const opening = previous === -1 ? 0 : previous;
+
+      loadFile(currentFiles[opening].path, opening);
+    }
+
   } catch (error) {
     showStatus(`Error: ${error.message}`, 'error');
+    showPicker();
   } finally {
     document.getElementById('loadBtn').disabled = false;
   }
@@ -209,12 +233,25 @@ function displayFiles(files) {
     const filename = parts[parts.length - 1];
     const path = parts.slice(0, -1).join('/');
 
-    // Because of RTL, we need to reverse the order in HTML
-    const displayText = path ? `${path}/<span class="filename">${filename}</span>` : `<span class="filename">${filename}</span>`;
+    // Because of RTL, we need to reverse the order in HTML. The label is
+    // markup -- the name is split so the last segment can be emphasised -- so
+    // both halves are escaped going in. They were not, and a name is chosen by
+    // whatever repository is open: markup in one was drawn as markup, without
+    // anyone clicking anything.
+    const displayText = path
+      ? `${escapeHtml(path)}/<span class="filename">${escapeHtml(filename)}</span>`
+      : `<span class="filename">${escapeHtml(filename)}</span>`;
     const statusClass = status === 'A' ? 'file-status-added' : 'file-status-modified';
     const statusBadge = `<span class="file-status ${statusClass}">${status}</span>`;
 
-    return `<div class="file-item" onclick="loadFile('${file}', ${index})" title="${escapeHtml(file)}">
+    // 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
+    // quote in it ended that literal and the rest of the name ran on click
+    // (#46). Escaping cannot close it: entities in an attribute are decoded
+    // before the handler is parsed, so an escaped quote is a quote again by
+    // the time it matters. The row carries its position instead, and the name
+    // is read back out of `currentFiles`, where it stays data.
+    return `<div class="file-item" onclick="openFileAt(${Number(index)})" title="${escapeHtml(file)}">
       ${statusBadge}<span class="file-path-text">${displayText}</span>
     </div>`;
   }).join('');
@@ -228,6 +265,22 @@ function displayFiles(files) {
   updateCommentsSidebar();
 }
 
+/**
+ * Open the file at a position in the list. The handler the file rows carry.
+ *
+ * `loadFile` still takes a path, because every other caller already has one in
+ * hand and none of them travels through an attribute. This one does, so it
+ * takes the index and looks the path up here. See the note in `displayFiles`.
+ *
+ * @param {number} index position in `currentFiles`
+ */
+function openFileAt(index) {
+  const file = currentFiles[Number(index)];
+  if (!file) return;
+
+  loadFile(file.path, Number(index));
+}
+
 // Load file content
 async function loadFile(filePath, index) {
   if (!currentRepoId) return Promise.resolve();
@@ -296,7 +349,7 @@ async function loadFile(filePath, index) {
       updateCommentsSidebar();
     }
 
-    displayCode(data.filePath, data.diffLines);
+    displayCode(data.filePath, data.diffLines, data.binary);
     updateFullContextButton();
     return Promise.resolve();
 
@@ -307,7 +360,7 @@ async function loadFile(filePath, index) {
 }
 
 // Display code with diff highlighting
-function displayCode(filePath, diffLines) {
+function displayCode(filePath, diffLines, binary) {
   const codeSection = document.getElementById('codeSection');
   const currentFileEl = document.getElementById('currentFile');
   const codeViewer = document.getElementById('codeViewer');
@@ -315,6 +368,19 @@ function displayCode(filePath, diffLines) {
   currentFileEl.textContent = filePath;
   currentDiffLines = diffLines; // Store for reference when adding comments
 
+  // A binary file has no lines to show and none to comment on. Saying so is
+  // the whole feature: it used to be decoded as UTF-8 and rendered as
+  // mojibake, and a comment left on one of those lines exported an anchor
+  // that could never match the file again.
+  if (binary) {
+    codeSection.style.display = 'block';
+    codeViewer.innerHTML =
+      '<div class="binary-notice">Binary file &mdash; not shown.' +
+      '<span>git reports this file as binary, so there are no lines to ' +
+      'review. Comments need a line to anchor to.</span></div>';
+    return;
+  }
+
   const fileComments = comments.filter(c => c.file === filePath);
 
   let html = '';
@@ -329,8 +395,13 @@ function displayCode(filePath, diffLines) {
     const clickableLineNum = diffLine.newLine || diffLine.oldLine;
 
     // Make both old and new line numbers clickable
-    const oldLineClick = diffLine.type === 'delete' ? `onclick="toggleCommentInput(${diffLineIndex})"` : '';
-    const newLineClick = diffLine.type !== 'delete' ? `onclick="toggleCommentInput(${diffLineIndex})"` : '';
+    // `Number(...)` at every interpolation into a handler, here and below. The
+    // rule the page now keeps is that nothing but a number goes into an
+    // attribute the browser evaluates as code, and coercing it where it is
+    // written makes that true of the markup rather than true of whatever the
+    // caller happened to pass. See `displayFiles` and #46.
+    const oldLineClick = diffLine.type === 'delete' ? `onclick="toggleCommentInput(${Number(diffLineIndex)})"` : '';
+    const newLineClick = diffLine.type !== 'delete' ? `onclick="toggleCommentInput(${Number(diffLineIndex)})"` : '';
 
     html += `
       <div class="${lineClass}" data-diff-index="${diffLineIndex}">
@@ -344,7 +415,6 @@ function displayCode(filePath, diffLines) {
     `;
 
     if (hasComment) {
-      const selectedTextAttr = hasComment.selectedText ? `'${escapeHtml(hasComment.selectedText).replace(/'/g, "\\'")}'` : 'null';
       const matchTypeClass = hasComment.matchType === 'fuzzy' ? 'comment-box-fuzzy' : '';
       const fuzzyWarning = hasComment.matchType === 'fuzzy' ? `
         <div class="comment-fuzzy-warning">
@@ -375,9 +445,9 @@ function displayCode(filePath, diffLines) {
           <span class="comment-text">${escapeHtml(hasComment.text)}</span>
           ${followUpsHtml}
           <div class="comment-actions">
-            <button class="comment-reply" onclick="addFollowUp(${diffLineIndex})">Reply</button>
-            <button class="comment-edit" onclick="editComment(${diffLineIndex}, ${selectedTextAttr})">Edit</button>
-            <button class="comment-delete" onclick="deleteComment(${diffLineIndex})">Delete</button>
+            <button class="comment-reply" onclick="addFollowUp(${Number(diffLineIndex)})">Reply</button>
+            <button class="comment-edit" onclick="editComment(${Number(diffLineIndex)})">Edit</button>
+            <button class="comment-delete" onclick="deleteComment(${Number(diffLineIndex)})">Delete</button>
           </div>
         </div>
       `;
@@ -386,11 +456,10 @@ function displayCode(filePath, diffLines) {
 
   // Show unmatched comments at the end
   const unmatchedComments = fileComments.filter(c => c.matchType === 'unmatched');
+  unmatchedShown = unmatchedComments;
   if (unmatchedComments.length > 0) {
     html += '<div class="unmatched-comments-section">';
-    unmatchedComments.forEach(comment => {
-      const commentId = `unmatched-${Math.random().toString(36).substr(2, 9)}`;
-
+    unmatchedComments.forEach((comment, unmatchedIndex) => {
       // Generate follow-ups for unmatched comments
       let unmatchedFollowUpsHtml = '';
       if (comment.followUps && comment.followUps.length > 0) {
@@ -407,9 +476,16 @@ function displayCode(filePath, diffLines) {
         unmatchedFollowUpsHtml += '</div>';
       }
 
+      // Every control in here used to carry the comment's file name and text,
+      // quoted into an attribute that is evaluated as JavaScript -- with `'`
+      // replaced by `\'` and nothing else, which a name ending in a backslash
+      // walks straight out of. They carry the row's position instead, and the
+      // three fields are read back from `unmatchedShown`, the array this was
+      // rendered from. The row's random id went with it: the position is the
+      // identifier now.
       html += `
-        <div class="unmatched-comment-item collapsed" id="${commentId}">
-          <div class="unmatched-comment-header" onclick="toggleUnmatchedComment('${commentId}')">
+        <div class="unmatched-comment-item collapsed">
+          <div class="unmatched-comment-header" onclick="toggleUnmatchedComment(${Number(unmatchedIndex)})">
             <span class="unmatched-comment-icon">⚠️</span>
             <span class="unmatched-comment-title">Comment not found (Line ${comment.line} changed)</span>
             <span class="unmatched-comment-toggle">▶</span>
@@ -423,8 +499,8 @@ function displayCode(filePath, diffLines) {
             ${comment.selectedText ? `<div class="comment-item-selected">${escapeHtml(comment.selectedText)}</div>` : ''}
             ${unmatchedFollowUpsHtml}
             <div class="comment-actions">
-              <button class="comment-reply" onclick="addFollowUpToUnmatched('${comment.file.replace(/'/g, "\\'")}', ${comment.line}, '${comment.text.replace(/'/g, "\\'")}')">Reply</button>
-              <button class="comment-delete" onclick="deleteUnmatchedComment('${comment.file.replace(/'/g, "\\'")}', ${comment.line}, '${comment.text.replace(/'/g, "\\'")}')">Delete</button>
+              <button class="comment-reply" onclick="addFollowUpToUnmatched(${Number(unmatchedIndex)})">Reply</button>
+              <button class="comment-delete" onclick="deleteUnmatchedComment(${Number(unmatchedIndex)})">Delete</button>
             </div>
           </div>
         </div>
@@ -443,9 +519,29 @@ function displayCode(filePath, diffLines) {
   codeViewer.addEventListener('mouseup', handleTextSelection);
 }
 
+/**
+ * The unmatched comments the code pane is showing, in the order they were
+ * drawn. The rows below are identified by their position in here, because the
+ * fields that used to identify them -- a file name and the comment's own text
+ * -- cannot be written into a handler attribute safely. See #46.
+ *
+ * @type {object[]}
+ */
+let unmatchedShown = [];
+
+/**
+ * The row an unmatched comment was drawn into.
+ *
+ * @param {number} index position in `unmatchedShown`
+ * @returns {Element|null}
+ */
+function unmatchedRow(index) {
+  return document.querySelectorAll('.unmatched-comment-item')[Number(index)] ?? null;
+}
+
 // Toggle unmatched comment expansion
-function toggleUnmatchedComment(commentId) {
-  const element = document.getElementById(commentId);
+function toggleUnmatchedComment(index) {
+  const element = unmatchedRow(index);
   if (!element) return;
 
   element.classList.toggle('collapsed');
@@ -456,7 +552,11 @@ function toggleUnmatchedComment(commentId) {
 }
 
 // Delete unmatched comment
-function deleteUnmatchedComment(file, line, text) {
+function deleteUnmatchedComment(index) {
+  const target = unmatchedShown[Number(index)];
+  if (!target) return;
+
+  const { file, line, text } = target;
   comments = comments.filter(c => !(c.file === file && c.line === line && c.text === text));
 
   // Auto-save to backend
@@ -493,7 +593,7 @@ function addFollowUp(diffLineIndex) {
   inputBox.innerHTML = `
     <textarea placeholder="Enter your follow-up (Cmd/Ctrl+Enter to save)..." id="followupInput"></textarea>
     <div class="actions">
-      <button onclick="saveFollowUp(${diffLineIndex})">Add Follow-up</button>
+      <button onclick="saveFollowUp(${Number(diffLineIndex)})">Add Follow-up</button>
       <button class="cancel-btn" onclick="this.closest('.followup-input-box').remove()">Cancel</button>
     </div>
   `;
@@ -564,25 +664,17 @@ function saveFollowUp(diffLineIndex) {
 }
 
 // Add follow-up to an unmatched comment
-function addFollowUpToUnmatched(file, line, text) {
+function addFollowUpToUnmatched(index) {
   // Remove any existing follow-up input
   const existingInput = document.querySelector('.followup-input-box');
   if (existingInput) {
     existingInput.remove();
   }
 
-  // Find the unmatched comment element
-  const unmatchedItems = document.querySelectorAll('.unmatched-comment-item');
-  let targetItem = null;
-
-  unmatchedItems.forEach(item => {
-    const itemText = item.querySelector('.comment-text')?.textContent;
-    const itemLine = item.querySelector('.unmatched-comment-title')?.textContent;
-    if (itemText === text && itemLine?.includes(`Line ${line}`)) {
-      targetItem = item;
-    }
-  });
-
+  // The row this belongs to, by position. It used to be found by comparing the
+  // rendered text against the comment's own text, which picked the wrong row
+  // when two unmatched comments on a file said the same thing on the same line.
+  const targetItem = unmatchedRow(index);
   if (!targetItem) return;
 
   const commentBody = targetItem.querySelector('.unmatched-comment-body');
@@ -592,13 +684,15 @@ function addFollowUpToUnmatched(file, line, text) {
   const inputBox = document.createElement('div');
   inputBox.className = 'followup-input-box';
 
-  // Generate unique ID for this specific input
-  const inputId = `followupInput-${Math.random().toString(36).substr(2, 9)}`;
+  // The input is named after the row, which is one number, so the button that
+  // saves it needs to carry nothing but that number. It used to carry the file
+  // name, the comment text and a random id, all quoted into the handler.
+  const inputId = `followupInput-${Number(index)}`;
 
   inputBox.innerHTML = `
     <textarea placeholder="Enter your follow-up (Cmd/Ctrl+Enter to save)..." id="${inputId}"></textarea>
     <div class="actions">
-      <button onclick="saveFollowUpToUnmatched('${file.replace(/'/g, "\\'")}', ${line}, '${text.replace(/'/g, "\\'")}', '${inputId}')">Add Follow-up</button>
+      <button onclick="saveFollowUpToUnmatched(${Number(index)})">Add Follow-up</button>
       <button class="cancel-btn" onclick="this.closest('.followup-input-box').remove()">Cancel</button>
     </div>
   `;
@@ -625,7 +719,7 @@ function addFollowUpToUnmatched(file, line, text) {
   textarea.addEventListener('keydown', (e) => {
     if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
       e.preventDefault();
-      saveFollowUpToUnmatched(file, line, text, inputId);
+      saveFollowUpToUnmatched(index);
     }
     if (e.key === 'Escape') {
       e.preventDefault();
@@ -635,8 +729,8 @@ function addFollowUpToUnmatched(file, line, text) {
 }
 
 // Save follow-up to an unmatched comment
-function saveFollowUpToUnmatched(file, line, text, inputId) {
-  const input = document.getElementById(inputId);
+function saveFollowUpToUnmatched(index) {
+  const input = document.getElementById(`followupInput-${Number(index)}`);
   const followUpText = input?.value.trim();
 
   if (!followUpText) {
@@ -644,7 +738,10 @@ function saveFollowUpToUnmatched(file, line, text, inputId) {
     return;
   }
 
-  const comment = comments.find(c => c.file === file && c.line === line && c.text === text);
+  // The row's position, not the three fields that used to be quoted into the
+  // button. `unmatchedShown` holds the same objects `comments` does, so the
+  // follow-up is pushed onto the comment itself rather than onto a copy.
+  const comment = unmatchedShown[Number(index)];
   if (!comment) return;
 
   // Initialize followUps if it doesn't exist
@@ -664,9 +761,9 @@ function saveFollowUpToUnmatched(file, line, text, inputId) {
   updateCommentsSidebar();
 
   // Reload the current file to show the follow-up
-  if (currentFile === file) {
-    const fileIndex = currentFiles.findIndex(f => f.path === file);
-    loadFile(file, fileIndex);
+  if (currentFile === comment.file) {
+    const fileIndex = currentFiles.findIndex(f => f.path === comment.file);
+    loadFile(comment.file, fileIndex);
   }
 }
 
@@ -750,6 +847,25 @@ function handleTextSelection(e) {
   toggleCommentInputWithSelection(diffLineIndex, selectedText);
 }
 
+/**
+ * The selected code, as an attribute on the button that saves it.
+ *
+ * The save button used to carry the selection inside a template literal inside
+ * its handler, which is a JavaScript context: a `${` in the selected code
+ * opened an interpolation and ran whatever followed it, and the file being
+ * reviewed is where that code comes from. The selection is not an index into
+ * anything -- it is a fragment of a live selection -- so it travels as data on
+ * the element and the handler reads it back at click time. A `data-` attribute
+ * is an attribute and nothing more; `escapeHtml` is enough for it, and the
+ * browser hands the original string back through `dataset`.
+ *
+ * @param {string|null} selectedText
+ * @returns {string} an attribute to splice into the tag, or nothing
+ */
+function selectedTextData(selectedText) {
+  return selectedText ? ` data-selected-text="${escapeHtml(selectedText)}"` : '';
+}
+
 // Toggle comment input
 function toggleCommentInput(diffLineIndex) {
   toggleCommentInputWithSelection(diffLineIndex, null);
@@ -783,7 +899,7 @@ function toggleCommentInputWithSelection(diffLineIndex, selectedText = null) {
     ${selectedTextHtml}
     <textarea placeholder="Enter your comment (Cmd/Ctrl+Enter to save)..." id="commentInput"></textarea>
     <div class="actions">
-      <button onclick="saveComment(${diffLineIndex}, ${selectedText ? `\`${escapeHtml(selectedText).replace(/`/g, '\\`')}\`` : 'null'})">Save Comment</button>
+      <button${selectedTextData(selectedText)} onclick="saveComment(${Number(diffLineIndex)}, this.dataset.selectedText ?? null)">Save Comment</button>
       <button class="cancel-btn" onclick="this.closest('.comment-input-box').remove()">Cancel</button>
     </div>
   `;
@@ -856,10 +972,17 @@ function saveComment(diffLineIndex, selectedText = null) {
 }
 
 // Edit comment
-function editComment(diffLineIndex, selectedText = null) {
+function editComment(diffLineIndex) {
   const comment = comments.find(c => c.file === currentFile && c.diffLineIndex === diffLineIndex);
   if (!comment) return;
 
+  // The Edit button used to hand the selected code back in as an argument,
+  // quoted into its own handler -- and after `escapeHtml` learned to escape
+  // quotes, the hand-rolled backslash escaping beside it stopped matching
+  // anything at all, so a quote in the selected code ended the literal and the
+  // rest ran. The comment is looked up here anyway; the selection comes off it.
+  const selectedText = comment.selectedText ?? null;
+
   // Remove the comment from the list temporarily
   comments = comments.filter(c => !(c.file === currentFile && c.diffLineIndex === diffLineIndex));
 
@@ -884,7 +1007,7 @@ function editComment(diffLineIndex, selectedText = null) {
       ${selectedTextHtml}
       <textarea placeholder="Enter your comment (Cmd/Ctrl+Enter to save)..." id="commentInput">${escapeHtml(comment.text)}</textarea>
       <div class="actions">
-        <button onclick="saveComment(${diffLineIndex}, ${selectedText ? `\`${escapeHtml(selectedText).replace(/`/g, '\\`')}\`` : 'null'})">Save Comment</button>
+        <button${selectedTextData(selectedText)} onclick="saveComment(${Number(diffLineIndex)}, this.dataset.selectedText ?? null)">Save Comment</button>
         <button class="cancel-btn" onclick="this.closest('.comment-input-box').remove()">Cancel</button>
       </div>
     `;
@@ -985,8 +1108,8 @@ function showReviewModal(reviewContent, filename) {
         <pre class="review-text">${escapeHtml(reviewContent)}</pre>
       </div>
       <div class="review-modal-footer">
-        <button onclick="downloadReview('${filename}', this.closest('.review-modal').querySelector('.review-text').textContent)">
-          Download ${filename}
+        <button data-filename="${escapeHtml(filename)}" onclick="downloadReview(this.dataset.filename, this.closest('.review-modal').querySelector('.review-text').textContent)">
+          Download ${escapeHtml(filename)}
         </button>
         <button onclick="copyReviewToClipboard(this.closest('.review-modal').querySelector('.review-text').textContent)">
           Copy to Clipboard
@@ -1046,6 +1169,7 @@ function resetApp() {
   comments = [];
 
   document.getElementById('repoPath').value = '';
+  setRepoButton(null);
   document.getElementById('sidebar').classList.add('hidden');
   document.getElementById('resizeHandle').classList.add('hidden');
   document.getElementById('codeSection').classList.add('hidden');
@@ -1053,6 +1177,8 @@ function resetApp() {
   document.getElementById('submitReviewBtn').classList.add('hidden');
   document.getElementById('status').textContent = '';
   document.getElementById('status').className = 'status';
+
+  showPicker();
 }
 
 // Show status message
@@ -1183,20 +1309,19 @@ function displayFullContext(filePath, lines) {
         ${hasComment ? '<span class="comment-indicator"></span>' : ''}
         <div class="line-numbers">
           <span class="old-line-number">${diffLine.oldLine || ''}</span>
-          <span class="new-line-number" ${diffLineIndex !== undefined ? `onclick="toggleCommentInput(${diffLineIndex})"` : ''}>${diffLine.newLine || ''}</span>
+          <span class="new-line-number" ${diffLineIndex !== undefined ? `onclick="toggleCommentInput(${Number(diffLineIndex)})"` : ''}>${diffLine.newLine || ''}</span>
         </div>
         <div class="line-content">${escapeHtml(diffLine.content) || ' '}</div>
       </div>
     `;
 
     if (hasComment) {
-      const selectedTextAttr = hasComment.selectedText ? `'${escapeHtml(hasComment.selectedText).replace(/'/g, "\\'")}'` : 'null';
       html += `
         <div class="comment-box">
           <span class="comment-text">${escapeHtml(hasComment.text)}</span>
           <div class="comment-actions">
-            <button class="comment-edit" onclick="editComment(${diffLineIndex}, ${selectedTextAttr})">Edit</button>
-            <button class="comment-delete" onclick="deleteComment(${diffLineIndex})">Delete</button>
+            <button class="comment-edit" onclick="editComment(${Number(diffLineIndex)})">Edit</button>
+            <button class="comment-delete" onclick="deleteComment(${Number(diffLineIndex)})">Delete</button>
           </div>
         </div>
       `;
@@ -1216,9 +1341,18 @@ function displayFullContext(filePath, lines) {
 
 // Escape HTML
 function escapeHtml(text) {
-  const div = document.createElement('div');
-  div.textContent = text;
-  return div.innerHTML;
+  // The DOM does this for &, < and > and leaves both quote characters alone,
+  // which is right for a text node and wrong for an attribute -- and most of
+  // the callers here are attributes. A file or folder whose name contained a
+  // double quote closed the attribute early, and everything after it in the
+  // name was read as markup. Escaped here rather than at each call site,
+  // because the safe version has to be the one that is easy to reach for.
+  return String(text ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
 }
 
 // Sidebar resize functionality
@@ -1324,11 +1458,16 @@ function updateCommentsSidebar() {
           ? `<div class="comment-item-selected">${escapeHtml(comment.selectedText)}</div>`
           : '';
 
-        const fileEscaped = file.replace(/'/g, "\\'");
+        // Both controls used to carry the file name, quoted into a handler
+        // with `'` replaced by `\'` and nothing else -- so a name with a
+        // backslash before the quote escaped the escape and ended the string
+        // anyway. A comment's identity here is its position in `comments`,
+        // and that is a number. See #46.
+        const commentIndex = comments.indexOf(comment);
         html += `
           <div class="comment-item">
-            <button class="comment-item-delete" onclick="event.stopPropagation(); deleteCommentFromSidebar('${fileEscaped}', ${comment.diffLineIndex})" title="Delete comment">×</button>
-            <div class="comment-item-content" onclick="jumpToComment('${fileEscaped}', ${comment.diffLineIndex})">
+            <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>
@@ -1343,7 +1482,11 @@ function updateCommentsSidebar() {
 }
 
 // Delete comment from sidebar
-function deleteCommentFromSidebar(file, diffLineIndex) {
+function deleteCommentFromSidebar(commentIndex) {
+  const target = comments[Number(commentIndex)];
+  if (!target) return;
+
+  const { file, diffLineIndex } = target;
   comments = comments.filter(c => !(c.file === file && c.diffLineIndex === diffLineIndex));
 
   // Auto-save to backend
@@ -1360,7 +1503,12 @@ function deleteCommentFromSidebar(file, diffLineIndex) {
 }
 
 // Jump to a specific comment
-function jumpToComment(file, diffLineIndex) {
+function jumpToComment(commentIndex) {
+  const target = comments[Number(commentIndex)];
+  if (!target) return;
+
+  const { file, diffLineIndex } = target;
+
   // Find the file index
   const fileIndex = currentFiles.findIndex(f => f.path === file);
   if (fileIndex === -1) return;
@@ -1429,11 +1577,259 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
+  for (const id of ['recentList', 'browseList']) {
+    const list = document.getElementById(id);
+    list.addEventListener('click', onPickerActivate);
+    list.addEventListener('keydown', onPickerActivate);
+  }
+
+  // Escape, and a click on the dimmed area around it, both mean "never mind"
+  // -- but only when there is a review behind the picker to go back to.
+  document.addEventListener('keydown', event => {
+    if (event.key === 'Escape') closePicker();
+  });
+
+  document.getElementById('picker').addEventListener('click', event => {
+    if (event.target.id === 'picker') closePicker();
+  });
+
   // `reviewer /path/to/repo` opens the page with the repository in the query
   // string, so the review is on screen without anyone typing a path.
   const requestedRepo = new URLSearchParams(window.location.search).get('repo');
   if (requestedRepo) {
     document.getElementById('repoPath').value = requestedRepo;
+    // Hidden before the request goes out, so the picker does not flash up for
+    // the fraction of a second it takes to load a repository that was named.
+    hidePicker();
     loadRepo();
+  } else {
+    showPicker();
   }
 });
+
+
+/* Repository picker
+ * ---------------------------------------------------------------------------
+ * What the page shows before a repository is open. It used to show nothing but
+ * an empty path box in the header, which asked you to already know the path you
+ * were looking for -- and to type it exactly.
+ */
+
+/** Where the browse list is pointed. Null until the first listing arrives. */
+let browseAt = null;
+let browseParent = null;
+let browseIsRepository = false;
+
+/**
+ * Show the picker.
+ *
+ * With nothing open it is the page. With a review open it is a layer over the
+ * review, because being asked which repository you want should not cost you
+ * the one you are reading.
+ */
+function showPicker() {
+  const reviewing = currentRepoId !== null;
+
+  document.getElementById('picker').classList.remove('hidden');
+  document.getElementById('picker').classList.toggle('as-overlay', reviewing);
+  document.getElementById('pickerClose').classList.toggle('hidden', !reviewing);
+
+  loadRecent();
+  loadBrowse(browseAt);
+}
+
+function hidePicker() {
+  document.getElementById('picker').classList.add('hidden');
+}
+
+/** Dismiss the picker, which only means anything when there is something behind it. */
+function closePicker() {
+  if (currentRepoId !== null) hidePicker();
+}
+
+/**
+ * Reveal the path box, for pasting a path or typing one you already know.
+ *
+ * Kept out of the way rather than removed: a navigator is the slow way round
+ * when the path is already on your clipboard.
+ */
+function togglePathEntry() {
+  const entry = document.getElementById('pathEntry');
+  const toggle = document.getElementById('pathToggle');
+  const showing = entry.classList.toggle('hidden') === false;
+
+  toggle.setAttribute('aria-expanded', String(showing));
+
+  if (showing) {
+    const input = document.getElementById('repoPath');
+    input.focus();
+    input.select();
+  }
+}
+
+/**
+ * Name the repository on the button that opens the picker.
+ *
+ * @param {string|null} repoPath
+ */
+function setRepoButton(repoPath) {
+  const name = repoPath ? repoPath.split(/[\\/]/).filter(Boolean).pop() : null;
+
+  document.getElementById('repoButtonLabel').textContent = name ?? 'Open a repository';
+  document.getElementById('repoButton').title = repoPath ?? 'Choose a repository';
+}
+
+/**
+ * How long ago, in the least fussy words that are still true.
+ *
+ * @param {string} iso
+ * @returns {string}
+ */
+function timeAgo(iso) {
+  const seconds = Math.round((Date.now() - new Date(iso).getTime()) / 1000);
+
+  if (!Number.isFinite(seconds) || seconds < 60) return 'just now';
+
+  for (const [unit, size] of [['minute', 60], ['hour', 3600], ['day', 86400]]) {
+    if (seconds < size * 60 || unit === 'day') {
+      const count = Math.floor(seconds / size);
+      if (unit === 'day' && count > 30) return new Date(iso).toLocaleDateString();
+      return `${count} ${unit}${count === 1 ? '' : 's'} ago`;
+    }
+  }
+}
+
+/** Repositories opened before, newest first. */
+async function loadRecent() {
+  const section = document.getElementById('recentSection');
+  const list = document.getElementById('recentList');
+
+  let projects;
+  try {
+    projects = (await (await fetch(`${API_BASE}/recent`)).json()).projects ?? [];
+  } catch {
+    // Not being able to remember is not worth an error message on a page whose
+    // other half works. The browser below still opens anything.
+    section.classList.add('hidden');
+    return;
+  }
+
+  if (projects.length === 0) {
+    section.classList.add('hidden');
+    return;
+  }
+
+  section.classList.remove('hidden');
+  list.innerHTML = projects
+    .map(project => {
+      const meta = project.exists
+        ? [project.comments > 0 ? `${project.comments} comment${project.comments === 1 ? '' : 's'}` : '', timeAgo(project.openedAt)]
+            .filter(Boolean)
+            .join(' · ')
+        : 'no longer there';
+
+      return `
+        <div class="picker-row${project.exists ? '' : ' missing'}"
+             ${project.exists ? `role="button" tabindex="0" data-open="${escapeHtml(project.path)}"` : ''}
+             title="${escapeHtml(project.path)}">
+          <span class="picker-row-icon">${project.exists ? '▸' : '×'}</span>
+          <span class="picker-row-name">${escapeHtml(project.name)}</span>
+          <span class="picker-row-path">${escapeHtml(project.location ?? '')}</span>
+          <span class="picker-row-meta">${escapeHtml(meta)}</span>
+        </div>`;
+    })
+    .join('');
+}
+
+/**
+ * List one directory.
+ *
+ * @param {string|null} path directory to list; the home directory when null
+ */
+async function loadBrowse(path) {
+  const list = document.getElementById('browseList');
+
+  let listing;
+  try {
+    const response = await fetch(`${API_BASE}/browse?path=${encodeURIComponent(path ?? '')}`);
+    listing = await response.json();
+    if (!response.ok) throw new Error(listing.error || 'Could not list that directory');
+  } catch (error) {
+    list.innerHTML = `<div class="picker-empty">${escapeHtml(error.message)}</div>`;
+    return;
+  }
+
+  browseAt = listing.path;
+  browseParent = listing.parent;
+  browseIsRepository = listing.isRepository;
+
+  document.getElementById('browsePath').textContent = listing.display ?? listing.path;
+  document.getElementById('browseUpBtn').disabled = listing.parent === null;
+  document
+    .getElementById('browseOpenBtn')
+    .classList.toggle('hidden', !listing.isRepository);
+
+  if (listing.entries.length === 0) {
+    list.innerHTML = '<div class="picker-empty">No folders in here.</div>';
+    return;
+  }
+
+  // A repository row goes both ways: the row walks into it, the button opens
+  // it. Walking in matters for the repository that has another one inside it,
+  // and one click has to be enough for the ordinary case.
+  list.innerHTML = listing.entries
+    .map(
+      entry => `
+        <div class="picker-row" role="button" tabindex="0" data-into="${escapeHtml(entry.path)}"
+             title="${escapeHtml(entry.path)}">
+          <span class="picker-row-icon">${entry.isRepository ? '◉' : '▸'}</span>
+          <span class="picker-row-name">${escapeHtml(entry.name)}</span>
+          ${entry.isRepository ? '<span class="picker-badge">git</span>' : ''}
+          <span class="picker-row-path"></span>
+          ${entry.isRepository ? `<button class="picker-open" data-open="${escapeHtml(entry.path)}">Open</button>` : ''}
+        </div>`
+    )
+    .join('');
+}
+
+function browseUp() {
+  if (browseParent) loadBrowse(browseParent);
+}
+
+function openBrowsed() {
+  if (browseIsRepository) openProject(browseAt);
+}
+
+/**
+ * Load a repository the way typing its path and pressing the button would.
+ *
+ * @param {string} path
+ */
+function openProject(path) {
+  document.getElementById('repoPath').value = path;
+  loadRepo();
+}
+
+/**
+ * One handler for both lists: open what carries `data-open`, walk into what
+ * carries `data-into`. Delegation rather than an `onclick` per row, because a
+ * path is not safe to interpolate into an attribute that is then evaluated.
+ *
+ * @param {Event} event
+ */
+function onPickerActivate(event) {
+  if (event.type === 'keydown') {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+  }
+
+  const open = event.target.closest('[data-open]');
+  if (open) {
+    event.stopPropagation();
+    openProject(open.dataset.open);
+    return;
+  }
+
+  const into = event.target.closest('[data-into]');
+  if (into) loadBrowse(into.dataset.into);
+}