git-reviewer 2.15.0 → 2.16.0

package/public/app.js

@@ -10,25 +10,308 @@ let currentFiles = [];
 let currentFile = null;
 let currentDiffLines = [];
 let comments = [];
+// The `lastUpdated` stamp `comments` was loaded (or last saved) at, and the
+// persisted snapshot that state is based on. Together they are what let a
+// save notice that another tab -- or a writer outside the page -- got there
+// first, and merge instead of overwriting (#107).
+let commentsLastUpdated = null;
+let commentsBase = [];
+
+/**
+ * A comment's identity for merging: its key. Every comment has one -- minted
+ * here when it is written, or given by the server to one saved before keys
+ * existed -- so where it sits and what it says is only a fallback.
+ */
+function commentKey(comment) {
+  return comment.key ?? JSON.stringify([comment.file, comment.line, comment.text]);
+}
+
+/**
+ * A new key for a comment or a follow-up: eight characters, the same shape
+ * the server mints. Minted here rather than on save so that a comment has its
+ * identity from the moment it exists -- an agent may answer it before this
+ * tab has saved anything else.
+ */
+function mintKey() {
+  const bytes = new Uint8Array(6);
+  crypto.getRandomValues(bytes);
+  return btoa(String.fromCharCode(...bytes)).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+/** The identity a follow-up is merged by. Mirrors `followUpIdentity` in lib/threads.js. */
+function followUpIdentity(followUp) {
+  return followUp.key ?? JSON.stringify([followUp.timestamp ?? null, followUp.text, followUp.by ?? null]);
+}
+
+/**
+ * Every follow-up in either list, once. Mirrors `unionFollowUps` in
+ * lib/threads.js: follow-ups are only ever added, so one present on either
+ * side is one somebody wrote, and a union is the merge that cannot lose an
+ * answer. `ours` keeps its order; the rest are placed by timestamp.
+ */
+function unionFollowUps(ours = [], theirs = []) {
+  const merged = [...ours];
+  const seen = new Set(ours.map(followUpIdentity));
+  for (const followUp of theirs) {
+    const identity = followUpIdentity(followUp);
+    if (seen.has(identity)) continue;
+    seen.add(identity);
+    const at = followUp.timestamp ?? '';
+    let index = merged.length;
+    if (at) {
+      while (index > 0 && (merged[index - 1].timestamp ?? '') > at) index--;
+    }
+    merged.splice(index, 0, followUp);
+  }
+  return merged;
+}
+
+/**
+ * Add the reviewer's reply to a thread.
+ *
+ * A new array, never a push. The thread's array can be the very one
+ * `commentsBase` holds -- loading and merging both copy comments shallowly --
+ * and pushing onto it changed the base along with the comment, so the merge
+ * after a refused save saw no change here and took the server's copy of the
+ * thread: the reply was gone from the page and from disk.
+ */
+function appendFollowUp(comment, text) {
+  comment.followUps = [...(comment.followUps ?? []), {
+    key: mintKey(),
+    text,
+    timestamp: new Date().toISOString()
+  }];
+}
+
+/**
+ * A copy of comments as persisted, sharing nothing with what it was taken
+ * from: what `commentsBase` holds must not change when the live comments do.
+ */
+function snapshotComments(list) {
+  return JSON.parse(JSON.stringify(list.map(toPersistedComment)));
+}
+
+/** Reduce a live comment to the shape that gets persisted, for `commentsBase`. */
+function toPersistedComment(comment) {
+  const persisted = {
+    ...(comment.key ? { key: comment.key } : {}),
+    file: comment.file,
+    line: comment.line,
+    lineContent: comment.lineContent,
+    text: comment.text
+  };
+  if (comment.selectedText) persisted.selectedText = comment.selectedText;
+  if (Array.isArray(comment.followUps) && comment.followUps.length > 0) {
+    persisted.followUps = comment.followUps;
+  }
+  return persisted;
+}
+
+/**
+ * Merge this tab's comments with comments that arrived from elsewhere.
+ *
+ * `baseComments` is what both sides started from, so it is what tells an
+ * arrival from a local edit apart: a comment in the remote list but not in
+ * the base arrived; a base comment missing on either side was deleted on
+ * that side and stays deleted, unless the other side changed it (a new
+ * follow-up is a change, and losing it would be the bug again); a local
+ * comment missing from the base is new and is kept.
+ *
+ * Where both sides hold a comment, one this tab has not touched since the
+ * base is taken as it now stands -- that is how an agent's answer, or an edit
+ * made in another tab, arrives. One changed here as well keeps this tab's
+ * text, and the follow-ups of both sides, so neither a follow-up added here
+ * nor an answer added there is undone.
+ */
+function mergeCommentsForRetry(localComments, baseComments, remoteComments) {
+  const localByKey = new Map(localComments.map(comment => [commentKey(comment), comment]));
+  const baseByKey = new Map(baseComments.map(comment => [commentKey(comment), comment]));
+  const remoteKeys = new Set(remoteComments.map(commentKey));
+  const removedLocally = new Set(
+    baseComments.filter(comment => !localByKey.has(commentKey(comment))).map(commentKey)
+  );
+  const changedLocally = key =>
+    !baseByKey.has(key) ||
+    JSON.stringify(toPersistedComment(localByKey.get(key))) !==
+    JSON.stringify(toPersistedComment(baseByKey.get(key)));
+
+  const merged = [];
+  const seen = new Set();
+  for (const remote of remoteComments) {
+    const key = commentKey(remote);
+    if (removedLocally.has(key) || seen.has(key)) continue;
+    const local = localByKey.get(key);
+    if (!local) {
+      merged.push({ ...remote, diffLineIndex: null, matchType: remote.matchType || 'exact' });
+    } else if (changedLocally(key)) {
+      merged.push({ ...local, followUps: unionFollowUps(local.followUps, remote.followUps) });
+    } else {
+      // Where this tab drew it stays; what it says comes from the remote.
+      merged.push({
+        ...remote,
+        diffLineIndex: local.diffLineIndex,
+        matchType: local.matchType,
+        newLineContent: local.newLineContent
+      });
+    }
+    seen.add(key);
+  }
+  for (const local of localComments) {
+    const key = commentKey(local);
+    if (seen.has(key)) continue;
+    // In the base but not in the remote: deleted elsewhere. Keep it only
+    // when this tab changed it in the meantime.
+    if (baseByKey.has(key) && !remoteKeys.has(key) && !changedLocally(key)) continue;
+    merged.push(local);
+    seen.add(key);
+  }
+  return merged;
+}
 
 // Auto-save comments to backend
 async function saveCommentsToBackend() {
   if (!currentRepoId) return;
 
+  // On a 409 the file has moved on since this tab loaded: take the current
+  // comments from the refusal, merge them with this tab's, and retry with
+  // the fresh stamp. A bounded number of retries, so two tabs racing in a
+  // loop cannot spin forever; if they are exhausted the next edit saves
+  // again, now based on the merged state.
+  for (let attempt = 0; attempt < 3; attempt++) {
+    try {
+      const sent = snapshotComments(comments);
+      const response = await fetch(`${API_BASE}/save-comments`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          repoId: currentRepoId,
+          comments: sent, // Send empty array if no comments
+          lastUpdated: commentsLastUpdated
+        })
+      });
+
+      if (response.status === 409) {
+        const data = await response.json().catch(() => ({}));
+        adoptRemoteComments(Array.isArray(data.comments) ? data.comments : [], data.lastUpdated ?? null);
+        continue;
+      }
+
+      if (!response.ok) {
+        console.error('Failed to save comments:', response.status);
+        return;
+      }
+
+      const data = await response.json().catch(() => ({}));
+      if (Array.isArray(data.comments)) {
+        // What was written, which can hold more than what was sent: the
+        // server keeps every follow-up already on disk, and an agent may have
+        // answered in a thread this tab had not heard about yet.
+        adoptRemoteComments(data.comments, data.lastUpdated ?? commentsLastUpdated, sent);
+      } else {
+        if (data.lastUpdated) commentsLastUpdated = data.lastUpdated;
+        commentsBase = snapshotComments(sent);
+      }
+      return;
+    } catch (error) {
+      console.error('Failed to save comments:', error);
+      return;
+    }
+  }
+
+  console.error('Failed to save comments: still changing elsewhere after retries');
+}
+
+/**
+ * Pick up comments written somewhere else while this tab was out of sight.
+ *
+ * A tab only learned about another tab's comments when it saved something
+ * itself, so a tab you were only reading kept showing a stale review (#107).
+ * Coming back into view is the moment someone looks again, so that is when
+ * it asks. Every edit is saved as it is made, so there is nothing unsaved to
+ * protect -- except text being typed into an open box, which redrawing the
+ * code pane would throw away. While one is open only the sidebar is brought
+ * up to date, and the pane catches up the next time a file is drawn.
+ */
+// Set when comments from elsewhere were merged in but the code pane could not
+// be redrawn because someone was typing; cleared whenever the pane is drawn.
+let commentsPaneStale = false;
+
+async function refreshCommentsFromElsewhere() {
+  if (!currentRepoId || document.visibilityState !== 'visible') return;
+  const repoId = currentRepoId;
+
+  let data;
   try {
-    await fetch(`${API_BASE}/save-comments`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        repoId: currentRepoId,
-        comments: comments // Send empty array if no comments
-      })
-    });
-  } catch (error) {
-    console.error('Failed to save comments:', error);
+    const response = await fetch(`${API_BASE}/load-comments/${repoId}`);
+    if (!response.ok) return;
+    data = await response.json();
+  } catch {
+    return;
+  }
+  if (currentRepoId !== repoId) return;
+
+  const lastUpdated = data.lastUpdated ?? null;
+  if (lastUpdated !== commentsLastUpdated) {
+    adoptRemoteComments(Array.isArray(data.comments) ? data.comments : [], lastUpdated);
+  } else {
+    redrawCommentsPane();
   }
 }
 
+/**
+ * Bring this tab up to date with comments as they stand on the server.
+ *
+ * Shared by a refused save, a save's reply, the live feed and a tab coming
+ * back into view: each is a list from the server and the base it should be
+ * merged against. The sidebar is redrawn at once; the code pane as soon as
+ * nobody is typing in it.
+ *
+ * @param {object[]} remoteComments
+ * @param {string|null} lastUpdated
+ * @param {object[]} [base] what this tab last knew the server to hold
+ */
+function adoptRemoteComments(remoteComments, lastUpdated, base = commentsBase) {
+  const before = JSON.stringify(comments.map(toPersistedComment));
+  comments = mergeCommentsForRetry(comments, base, remoteComments);
+  commentsBase = snapshotComments(remoteComments);
+  commentsLastUpdated = lastUpdated;
+  for (const comment of comments) {
+    // An answer has landed; the words that were streaming in are now in the thread.
+    if (agentState.partials[comment.key] && lastAuthorOf(comment)) delete agentState.partials[comment.key];
+  }
+  if (JSON.stringify(comments.map(toPersistedComment)) !== before) {
+    updateCommentsSidebar();
+    commentsPaneStale = true;
+  }
+  redrawCommentsPane();
+}
+
+/**
+ * Redraw the open file's comments from `comments`, if they have changed and
+ * nobody is typing into a box the redraw would throw away. Uses the diff
+ * already on screen rather than fetching it again, and keeps the scroll
+ * position, so an answer arriving does not move what is being read.
+ */
+function redrawCommentsPane() {
+  const typing = document.querySelector('.comment-input-box, .followup-input-box');
+  if (!commentsPaneStale || !currentFile || typing) return;
+  // Nor while code is selected in the pane: that is the first half of
+  // quoting it in a comment, and a redraw would drop the selection.
+  const selection = window.getSelection?.();
+  if (selection && !selection.isCollapsed && document.getElementById('codeViewer').contains(selection.anchorNode)) return;
+  if (isFullContextMode && storedFullFileLines) {
+    displayFullContext(currentFile, storedFullFileLines);
+    commentsPaneStale = false;
+    return;
+  }
+  if (!currentDiffLines.length) return;
+  const viewer = document.getElementById('codeViewer');
+  const scrollTop = viewer.scrollTop;
+  matchCommentsToFile(currentFile, currentDiffLines);
+  displayCode(currentFile, currentDiffLines, false);
+  viewer.scrollTop = scrollTop;
+}
+
 // Load comments from backend
 async function loadCommentsFromBackend() {
   if (!currentRepoId) return [];
@@ -36,6 +319,8 @@ async function loadCommentsFromBackend() {
   try {
     const response = await fetch(`${API_BASE}/load-comments/${currentRepoId}`);
     const data = await response.json();
+    commentsLastUpdated = data.lastUpdated ?? null;
+    commentsBase = snapshotComments(data.comments || []);
     return data.comments || [];
   } catch (error) {
     console.error('Failed to load comments:', error);
@@ -881,6 +1166,10 @@ async function loadRepo(scope = {}) {
       showStatus(`Picked up ${plural(savedComments.length, 'saved comment')} from last time.`, 'success');
     }
 
+    // From here on, comments written anywhere else -- another tab, an agent
+    // answering in a thread -- arrive as they are written.
+    openReviewEvents(currentRepoId);
+
     // 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
@@ -1065,45 +1354,7 @@ async function loadFile(filePath, index) {
     //
     // `comments` is what exists. A comment that is not in it does not exist.
     if (comments.length > 0) {
-      const matchedComments = matchCommentsToDiff(comments, filePath, data.diffLines);
-
-      // Update existing comments in the array with matched diff indices
-      matchedComments.forEach(mc => {
-        const existing = comments.find(c =>
-          c.file === mc.file &&
-          c.line === mc.line &&
-          c.text === mc.text
-        );
-
-        if (existing) {
-          // Update existing comment with new diff line index and match type
-          existing.diffLineIndex = mc.diffLineIndex;
-          existing.matchType = mc.matchType;
-          existing.newLineContent = mc.newLineContent;
-          // Preserve followUps from saved data
-          if (mc.followUps) {
-            existing.followUps = mc.followUps;
-          }
-        } else {
-          // Unreachable now that the matcher is fed the live list: everything
-          // it returns came from there. Kept as a guard rather than removed,
-          // because silently dropping a comment is the worse failure of the
-          // two, and this is the line that would do it.
-          // Add new comment if it doesn't exist
-          comments.push({
-            file: mc.file,
-            diffLineIndex: mc.diffLineIndex,
-            line: mc.line,
-            lineContent: mc.lineContent,
-            selectedText: mc.selectedText,
-            text: mc.text,
-            matchType: mc.matchType,
-            newLineContent: mc.newLineContent,
-            followUps: mc.followUps || []
-          });
-        }
-      });
-
+      matchCommentsToFile(filePath, data.diffLines);
       // Update comments sidebar after matching comments
       updateCommentsSidebar();
     }
@@ -1119,6 +1370,35 @@ async function loadFile(filePath, index) {
   }
 }
 
+/**
+ * Give this file's comments their position in the diff on screen.
+ *
+ * Comments are found by key, not by file, line and text: two identical
+ * comments on one line are two comments, and an edited one is still itself.
+ *
+ * @param {string} filePath
+ * @param {object[]} diffLines
+ */
+function matchCommentsToFile(filePath, diffLines) {
+  const matchedComments = matchCommentsToDiff(comments, filePath, diffLines);
+
+  matchedComments.forEach(mc => {
+    const existing = comments.find(c => commentKey(c) === commentKey(mc));
+
+    if (existing) {
+      existing.diffLineIndex = mc.diffLineIndex;
+      existing.matchType = mc.matchType;
+      existing.newLineContent = mc.newLineContent;
+    } else {
+      // Unreachable now that the matcher is fed the live list: everything
+      // it returns came from there. Kept as a guard rather than removed,
+      // because silently dropping a comment is the worse failure of the
+      // two, and this is the line that would do it.
+      comments.push({ ...mc, followUps: mc.followUps || [] });
+    }
+  });
+}
+
 // Display code with diff highlighting
 function displayCode(filePath, diffLines, binary) {
   const codeSection = document.getElementById('codeSection');
@@ -1127,6 +1407,7 @@ function displayCode(filePath, diffLines, binary) {
 
   currentFileEl.textContent = filePath;
   currentDiffLines = diffLines; // Store for reference when adding comments
+  commentsPaneStale = false; // drawn from `comments` as they stand now
 
   // 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
@@ -1183,24 +1464,10 @@ function displayCode(filePath, diffLines, binary) {
         </div>
       ` : '';
 
-      // Generate follow-ups HTML
-      let followUpsHtml = '';
-      if (hasComment.followUps && hasComment.followUps.length > 0) {
-        followUpsHtml = '<div class="comment-followups">';
-        hasComment.followUps.forEach((followUp, idx) => {
-          const timestamp = followUp.timestamp ? new Date(followUp.timestamp).toLocaleString() : '';
-          followUpsHtml += `
-            <div class="comment-followup-item">
-              <span class="followup-text">${escapeHtml(followUp.text)}</span>
-              ${timestamp ? `<span class="followup-timestamp">${timestamp}</span>` : ''}
-            </div>
-          `;
-        });
-        followUpsHtml += '</div>';
-      }
+      const followUpsHtml = threadHtml(hasComment);
 
       html += `
-        <div class="comment-box ${matchTypeClass}">
+        <div class="comment-box ${matchTypeClass}" data-key="${escapeHtml(commentKey(hasComment))}">
           ${fuzzyWarning}
           <span class="comment-text">${escapeHtml(hasComment.text)}</span>
           ${followUpsHtml}
@@ -1220,21 +1487,7 @@ function displayCode(filePath, diffLines, binary) {
   if (unmatchedComments.length > 0) {
     html += '<div class="unmatched-comments-section">';
     unmatchedComments.forEach((comment, unmatchedIndex) => {
-      // Generate follow-ups for unmatched comments
-      let unmatchedFollowUpsHtml = '';
-      if (comment.followUps && comment.followUps.length > 0) {
-        unmatchedFollowUpsHtml = '<div class="comment-followups">';
-        comment.followUps.forEach((followUp, idx) => {
-          const timestamp = followUp.timestamp ? new Date(followUp.timestamp).toLocaleString() : '';
-          unmatchedFollowUpsHtml += `
-            <div class="comment-followup-item">
-              <span class="followup-text">${escapeHtml(followUp.text)}</span>
-              ${timestamp ? `<span class="followup-timestamp">${timestamp}</span>` : ''}
-            </div>
-          `;
-        });
-        unmatchedFollowUpsHtml += '</div>';
-      }
+      const unmatchedFollowUpsHtml = threadHtml(comment);
 
       // Every control in here used to carry the comment's file name and text,
       // quoted into an attribute that is evaluated as JavaScript -- with `'`
@@ -1244,7 +1497,7 @@ function displayCode(filePath, diffLines, binary) {
       // rendered from. The row's random id went with it: the position is the
       // identifier now.
       html += `
-        <div class="unmatched-comment-item collapsed" tabindex="0">
+        <div class="unmatched-comment-item collapsed" tabindex="0" data-key="${escapeHtml(commentKey(comment))}">
           <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>
@@ -1402,15 +1655,7 @@ function saveFollowUp(diffLineIndex) {
   const comment = comments.find(c => c.file === currentFile && c.diffLineIndex === diffLineIndex);
   if (!comment) return;
 
-  // Initialize followUps if it doesn't exist
-  if (!comment.followUps) {
-    comment.followUps = [];
-  }
-
-  comment.followUps.push({
-    text: text,
-    timestamp: new Date().toISOString()
-  });
+  appendFollowUp(comment, text);
 
   // Auto-save to backend
   saveCommentsToBackend();
@@ -1504,15 +1749,7 @@ function saveFollowUpToUnmatched(index) {
   const comment = unmatchedShown[Number(index)];
   if (!comment) return;
 
-  // Initialize followUps if it doesn't exist
-  if (!comment.followUps) {
-    comment.followUps = [];
-  }
-
-  comment.followUps.push({
-    text: followUpText,
-    timestamp: new Date().toISOString()
-  });
+  appendFollowUp(comment, followUpText);
 
   // Auto-save to backend
   saveCommentsToBackend();
@@ -1692,6 +1929,17 @@ function toggleCommentInputWithSelection(diffLineIndex, selectedText = null) {
   });
 }
 
+/**
+ * The comment being edited, while its box is open.
+ *
+ * Editing takes a comment out of the list and saving puts a new one back.
+ * The new one used to start with an empty thread, so editing a comment that
+ * had replies deleted every one of them -- and now that replies include an
+ * agent's answers, that is the answers gone. Holding on to the original is
+ * how the edited comment keeps its key and its thread.
+ */
+let commentBeingEdited = null;
+
 // Save comment
 function saveComment(diffLineIndex, selectedText = null) {
   const input = document.getElementById('commentInput');
@@ -1709,7 +1957,11 @@ function saveComment(diffLineIndex, selectedText = null) {
   const lineContent = diffLine.content || '';
   const lineNum = diffLine.newLine || diffLine.oldLine;
 
+  const edited = commentBeingEdited?.file === currentFile ? commentBeingEdited : null;
+  commentBeingEdited = null;
+
   comments.push({
+    key: edited?.key ?? mintKey(),
     file: currentFile,
     diffLineIndex: diffLineIndex,
     line: lineNum,
@@ -1717,7 +1969,7 @@ function saveComment(diffLineIndex, selectedText = null) {
     selectedText: selectedText,
     text: text,
     matchType: 'exact', // New comments are exact matches
-    followUps: [] // Initialize empty follow-ups array
+    followUps: edited?.followUps ?? []
   });
 
   // Auto-save to backend
@@ -1745,6 +1997,7 @@ function editComment(diffLineIndex) {
 
   // Remove the comment from the list temporarily
   comments = comments.filter(c => !(c.file === currentFile && c.diffLineIndex === diffLineIndex));
+  commentBeingEdited = comment;
 
   // Reload file and show edit input
   const fileIndex = currentFiles.findIndex(f => f.path === currentFile);
@@ -1768,7 +2021,7 @@ function editComment(diffLineIndex) {
       <textarea placeholder="Enter your comment (Cmd/Ctrl+Enter to save)..." id="commentInput">${escapeHtml(comment.text)}</textarea>
       <div class="actions">
         <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>
+        <button class="cancel-btn" onclick="cancelEdit()">Cancel</button>
       </div>
     `;
 
@@ -1794,16 +2047,29 @@ function editComment(diffLineIndex) {
       }
       if (e.key === 'Escape') {
         e.preventDefault();
-        inputBox.remove();
-        // Restore the comment if canceled
-        comments.push(comment);
-        const fileIndex = currentFiles.findIndex(f => f.path === currentFile);
-        loadFile(currentFile, fileIndex);
+        cancelEdit();
       }
     });
   });
 }
 
+/**
+ * Put back the comment whose edit was abandoned.
+ *
+ * Escape always did this; the Cancel button only closed the box, which left
+ * the comment out of the list -- and the next save, from any edit at all,
+ * deleted it from the review.
+ */
+function cancelEdit() {
+  document.querySelector('.comment-input-box')?.remove();
+  if (commentBeingEdited) {
+    comments.push(commentBeingEdited);
+    commentBeingEdited = null;
+  }
+  const fileIndex = currentFiles.findIndex(f => f.path === currentFile);
+  loadFile(currentFile, fileIndex);
+}
+
 // Delete comment
 function deleteComment(diffLineIndex) {
   comments = comments.filter(c => !(c.file === currentFile && c.diffLineIndex === diffLineIndex));
@@ -1952,11 +2218,14 @@ async function cleanupRepo() {
 
 // Reset application
 function resetApp() {
+  closeReviewEvents();
   currentRepoId = null;
   currentFiles = [];
   currentFile = null;
   currentFileIndex = -1;
   comments = [];
+  commentsLastUpdated = null;
+  commentsBase = [];
 
   document.getElementById('repoPath').value = '';
   setRepoButton(null);
@@ -2311,6 +2580,14 @@ function updateCommentsSidebar() {
         const elsewhereHtml = elsewhere
           ? '<div class="comment-item-elsewhere-note">Not in this view</div>'
           : '';
+        const replies = (comment.followUps ?? []).length;
+        const answering = threadsBeingAnswered().has(commentKey(comment)) || agentState.partials[commentKey(comment)];
+        const answeredBy = lastAuthorOf(comment);
+        const threadNote = answering
+          ? '<div class="comment-item-thread comment-item-answering">Claude is answering…</div>'
+          : replies > 0
+            ? `<div class="comment-item-thread">${replies} ${replies === 1 ? 'reply' : 'replies'}${answeredBy ? ` · answered by ${escapeHtml(authorName(answeredBy))}` : ''}</div>`
+            : '';
         html += `
           <div class="comment-item${elsewhere ? ' comment-item-elsewhere' : ''}">
             <button class="comment-item-delete" onclick="event.stopPropagation(); deleteCommentFromSidebar(${Number(commentIndex)})" title="Delete comment">×</button>
@@ -2319,6 +2596,7 @@ function updateCommentsSidebar() {
               <div class="comment-item-line">Line ${comment.line}</div>
               <div class="comment-item-text">${escapeHtml(comment.text)}</div>
               ${selectedHtml}
+              ${threadNote}
               ${elsewhereHtml}
             </div>
           </div>
@@ -2484,6 +2762,343 @@ function getKeyboardShortcut(key, targetTagName, modifiers = {}) {
   return map[key] || null;
 }
 
+/*
+ * Agents answering in the review's threads.
+ *
+ * A Claude Code session can be connected to the review -- in the background,
+ * from the dialog below, or live from a terminal with `reviewer connect` --
+ * and answers every comment and reply the reviewer writes, in the thread.
+ * The answers arrive through the same comments file everything else does;
+ * what the page adds is showing who is connected, which threads are being
+ * answered, and an answer's words as they are written.
+ */
+
+/**
+ * @type {{agents: object[], answerer: object|null, partials: Object<string, string>, events: EventSource|null, sessions: object[]|null}}
+ *   `agents` are the presences the server reports (live, background or
+ *   watching); `answerer` is a background session this server runs;
+ *   `partials` holds answers still being written, by comment key.
+ */
+const agentState = { agents: [], answerer: null, partials: {}, events: null, sessions: null };
+
+/** The display name for whoever wrote a follow-up. */
+function authorName(by) {
+  return by === 'claude' ? 'Claude' : by;
+}
+
+/** Who wrote the last word in a thread: null for the reviewer. Mirrors lib/threads.js. */
+function lastAuthorOf(comment) {
+  const followUps = comment.followUps ?? [];
+  return followUps.length === 0 ? null : (followUps[followUps.length - 1].by ?? null);
+}
+
+/** Keys of the threads some agent is answering right now. */
+function threadsBeingAnswered() {
+  const keys = new Set();
+  for (const agent of agentState.agents) (agent.working ?? []).forEach(key => keys.add(key));
+  if (agentState.answerer?.working) keys.add(agentState.answerer.working);
+  return keys;
+}
+
+/** Whether anything is connected to answer at all. */
+function agentConnected() {
+  return agentState.agents.length > 0 || Boolean(agentState.answerer);
+}
+
+/**
+ * A little Markdown, for answers: fenced code, inline code and bold. The text
+ * is escaped first and only these three patterns are turned back into
+ * markup, so nothing in an answer can become anything else on the page.
+ */
+function renderMarkdown(text) {
+  const blocks = String(text ?? '').split(/^```[^\n]*\n?/m);
+  return blocks.map((block, index) => {
+    if (index % 2 === 1) return `<pre class="followup-code"><code>${escapeHtml(block.replace(/\n$/, ''))}</code></pre>`;
+    return escapeHtml(block)
+      .replace(/`([^`\n]+)`/g, '<code>$1</code>')
+      .replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>');
+  }).join('');
+}
+
+/** One follow-up in a thread. */
+function followUpHtml(followUp) {
+  const timestamp = followUp.timestamp ? new Date(followUp.timestamp).toLocaleString() : '';
+  if (followUp.by) {
+    return `
+      <div class="comment-followup-item followup-agent">
+        <span class="followup-author">${escapeHtml(authorName(followUp.by))}</span>
+        <div class="followup-text followup-markdown">${renderMarkdown(followUp.text)}</div>
+        ${timestamp ? `<span class="followup-timestamp">${timestamp}</span>` : ''}
+      </div>
+    `;
+  }
+  return `
+    <div class="comment-followup-item">
+      <span class="followup-text">${escapeHtml(followUp.text)}</span>
+      ${timestamp ? `<span class="followup-timestamp">${timestamp}</span>` : ''}
+    </div>
+  `;
+}
+
+/** The answer being written in a thread, or a note that one is coming. */
+function pendingAnswerHtml(comment) {
+  const key = commentKey(comment);
+  const partial = agentState.partials[key];
+  if (threadsBeingAnswered().has(key) || partial) {
+    return `
+      <div class="comment-followup-item followup-agent followup-pending" data-pending-key="${escapeHtml(key)}">
+        <span class="followup-author">Claude</span>
+        <div class="followup-text followup-markdown">${partial ? renderMarkdown(partial) : '<span class="agent-typing">answering…</span>'}</div>
+      </div>
+    `;
+  }
+  if (agentConnected() && lastAuthorOf(comment) === null) {
+    return '<div class="followup-queued">Waiting for Claude to answer</div>';
+  }
+  return '';
+}
+
+/** A comment's follow-ups, and whatever answer is on its way. */
+function threadHtml(comment) {
+  const items = (comment.followUps ?? []).map(followUpHtml).join('');
+  const pending = pendingAnswerHtml(comment);
+  if (!items && !pending) return '';
+  return `<div class="comment-followups">${items}${pending}</div>`;
+}
+
+/**
+ * Put an answer's latest words on screen without redrawing the pane: the
+ * pane may hold a box someone is typing in, and a partial arrives many times
+ * a second.
+ */
+function showPartialAnswer(key) {
+  const box = document.querySelector(`.comment-box[data-key="${CSS.escape(key)}"], .unmatched-comment-item[data-key="${CSS.escape(key)}"]`);
+  if (!box) return;
+  const comment = comments.find(c => commentKey(c) === key);
+  if (!comment) return;
+  const pending = box.querySelector('.followup-pending .followup-text');
+  if (pending) {
+    pending.innerHTML = renderMarkdown(agentState.partials[key]);
+    return;
+  }
+  const thread = box.querySelector('.comment-followups');
+  const html = threadHtml(comment);
+  if (thread) thread.outerHTML = html;
+  else box.querySelector('.comment-text')?.insertAdjacentHTML('afterend', html);
+}
+
+/** Redraw every thread's pending state after who-is-answering-what changed. */
+function refreshPendingAnswers() {
+  renderAgentButton();
+  updateCommentsSidebar();
+  commentsPaneStale = true;
+  redrawCommentsPane();
+}
+
+/** The header button: whether anything is answering, and what it is doing. */
+function renderAgentButton() {
+  const button = document.getElementById('agentButton');
+  const label = document.getElementById('agentButtonLabel');
+  if (!button || !label) return;
+  button.classList.toggle('hidden', !currentRepoId);
+
+  const working = threadsBeingAnswered().size;
+  const live = agentState.agents.find(agent => agent.kind === 'channel');
+  const connected = agentConnected();
+  button.classList.toggle('connected', connected);
+  button.classList.toggle('working', working > 0);
+  if (!connected) {
+    label.textContent = 'Ask Claude Code';
+    button.title = 'Have the Claude Code session that wrote this code answer your comments';
+  } else {
+    label.textContent = working > 0 ? 'Claude is answering…' : 'Claude Code connected';
+    const title = live?.title ?? agentState.answerer?.title ?? agentState.agents[0]?.title;
+    const how = live ? 'Live, from your terminal'
+      : agentState.answerer ? 'In the background'
+        : 'Following the review from an agent session';
+    button.title = `${how}${title ? `: ${title}` : ''}`;
+  }
+}
+
+/** Follow the open review's live feed. One per tab, replaced with the repository. */
+function openReviewEvents(repoId) {
+  closeReviewEvents();
+  if (typeof EventSource === 'undefined') return;
+  const events = new EventSource(`${API_BASE}/events/${repoId}`);
+  agentState.events = events;
+  // The feed counts as this tab watching once it is open; the separate
+  // signal is closed only then, so there is no moment with neither.
+  events.addEventListener('open', stopWatchingFromThisTab, { once: true });
+
+  const parse = event => {
+    try {
+      return JSON.parse(event.data);
+    } catch {
+      return null;
+    }
+  };
+
+  events.addEventListener('comments', event => {
+    const data = parse(event);
+    if (!data || currentRepoId !== repoId) return;
+    if ((data.lastUpdated ?? null) === commentsLastUpdated) return;
+    adoptRemoteComments(Array.isArray(data.comments) ? data.comments : [], data.lastUpdated ?? null);
+  });
+  events.addEventListener('agents', event => {
+    const data = parse(event);
+    if (!data || currentRepoId !== repoId) return;
+    agentState.agents = Array.isArray(data.agents) ? data.agents : [];
+    refreshPendingAnswers();
+  });
+  events.addEventListener('answerer', event => {
+    if (currentRepoId !== repoId) return;
+    agentState.answerer = parse(event);
+    refreshPendingAnswers();
+  });
+  events.addEventListener('partial', event => {
+    const data = parse(event);
+    if (!data || currentRepoId !== repoId || !data.key) return;
+    agentState.partials[data.key] = data.text;
+    showPartialAnswer(data.key);
+  });
+  events.addEventListener('agent-error', event => {
+    const data = parse(event);
+    if (!data || currentRepoId !== repoId) return;
+    if (data.key) delete agentState.partials[data.key];
+    showStatus(`Claude Code: ${data.message}`, 'error');
+    refreshPendingAnswers();
+  });
+}
+
+function closeReviewEvents() {
+  if (agentState.events) watchFromThisTab();
+  agentState.events?.close();
+  agentState.events = null;
+  agentState.agents = [];
+  agentState.answerer = null;
+  agentState.partials = {};
+  renderAgentButton();
+}
+
+/** How long ago, briefly. */
+function sinceText(iso) {
+  return timeAgo(iso) || new Date(iso).toLocaleString();
+}
+
+async function openAgentDialog() {
+  if (!currentRepoId) return;
+  document.getElementById('agentModal').classList.remove('hidden');
+  const list = document.getElementById('agentSessions');
+  list.innerHTML = '<p class="agent-empty">Looking for Claude Code sessions…</p>';
+  renderAgentConnection();
+
+  try {
+    const response = await fetch(`${API_BASE}/agent/sessions/${currentRepoId}`);
+    const data = await response.json();
+    if (!response.ok) throw new Error(data.error || 'Could not list sessions');
+    agentState.sessions = data.sessions;
+    renderAgentSessions();
+  } catch (error) {
+    list.innerHTML = `<p class="agent-empty">${escapeHtml(error.message)}</p>`;
+  }
+}
+
+function closeAgentDialog() {
+  document.getElementById('agentModal').classList.add('hidden');
+}
+
+/** What is connected now, with a way to stop the background session. */
+function renderAgentConnection() {
+  const box = document.getElementById('agentConnected');
+  const parts = [];
+  for (const agent of agentState.agents.filter(a => a.kind !== 'background')) {
+    parts.push(`<div class="agent-connection"><span class="agent-dot"></span>
+      <div><strong>${agent.kind === 'channel' ? 'Live in your terminal' : 'Watching from an agent'}</strong>
+      <div class="agent-connection-title">${escapeHtml(agent.title ?? (agent.session ? `session ${agent.session.slice(0, 8)}` : 'Claude Code'))}</div></div></div>`);
+  }
+  if (agentState.answerer) {
+    const a = agentState.answerer;
+    parts.push(`<div class="agent-connection"><span class="agent-dot"></span>
+      <div><strong>Answering in the background</strong>
+      <div class="agent-connection-title">${escapeHtml(a.title ?? a.session)}</div>
+      <div class="agent-connection-meta">${a.forked ? `In a copy of ${escapeHtml(a.session.slice(0, 8))}${a.answeringIn && a.answeringIn !== a.session ? ` (${escapeHtml(a.answeringIn.slice(0, 8))})` : ''}; the original is untouched.` : `In session ${escapeHtml(a.session.slice(0, 8))} itself.`}</div></div>
+      <button class="agent-disconnect" onclick="disconnectAgent()">Stop</button></div>`);
+  }
+  box.innerHTML = parts.join('');
+  box.classList.toggle('hidden', parts.length === 0);
+}
+
+function renderAgentSessions() {
+  const list = document.getElementById('agentSessions');
+  const sessions = agentState.sessions ?? [];
+  if (sessions.length === 0) {
+    list.innerHTML = '<p class="agent-empty">No Claude Code session has worked in this repository yet. ' +
+      'Sessions are found under <code>~/.claude/projects</code> by the directory they ran in.</p>';
+    return;
+  }
+  list.innerHTML = sessions.map((session, index) => {
+    const label = session.title ?? session.firstPrompt ?? '(no prompt)';
+    const copy = session.title?.startsWith('Review answers:');
+    return `
+      <div class="agent-session${copy ? ' agent-session-copy' : ''}">
+        <div class="agent-session-text">
+          <div class="agent-session-title">${escapeHtml(label)}</div>
+          <div class="agent-session-meta">${escapeHtml(session.id.slice(0, 8))}${session.branch ? ` · ${escapeHtml(session.branch)}` : ''} · ${escapeHtml(sinceText(session.updatedAt))}</div>
+        </div>
+        <div class="agent-session-actions">
+          <button class="agent-connect" onclick="connectAgent(${Number(index)})">Answer my comments</button>
+          <button class="agent-copy" onclick="copyConnectCommand(${Number(index)})" title="Copy a command that opens this session live in a terminal">Copy live command</button>
+        </div>
+      </div>
+    `;
+  }).join('');
+}
+
+async function connectAgent(index) {
+  const session = agentState.sessions?.[Number(index)];
+  if (!session || !currentRepoId) return;
+  const fork = document.getElementById('agentFork').checked;
+  try {
+    const response = await fetch(`${API_BASE}/agent/connect`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ repoId: currentRepoId, sessionId: session.id, fork })
+    });
+    const data = await response.json();
+    if (!response.ok) throw new Error(data.error || 'Could not connect');
+    agentState.answerer = data.answerer;
+    closeAgentDialog();
+    refreshPendingAnswers();
+    showStatus('Claude Code will answer your comments in their threads.', 'success');
+  } catch (error) {
+    showStatus(`Could not connect Claude Code: ${error.message}`, 'error');
+  }
+}
+
+async function disconnectAgent() {
+  if (!currentRepoId) return;
+  await fetch(`${API_BASE}/agent/disconnect`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ repoId: currentRepoId })
+  }).catch(() => {});
+  agentState.answerer = null;
+  renderAgentConnection();
+  refreshPendingAnswers();
+}
+
+async function copyConnectCommand(index) {
+  const session = agentState.sessions?.[Number(index)];
+  if (!session) return;
+  const command = `reviewer connect --session ${session.id}`;
+  try {
+    await navigator.clipboard.writeText(command);
+    showStatus(`Copied: ${command}`, 'success');
+  } catch {
+    showStatus(`Run this in a terminal: ${command}`, 'success');
+  }
+}
+
 // Allow Enter key to load repo
 /**
  * Tell the server this tab exists, by holding a connection open for as long
@@ -2498,18 +3113,35 @@ function getKeyboardShortcut(key, targetTagName, modifiers = {}) {
  * server's grace period work -- a flaky connection comes back inside it and
  * nothing is stopped.
  */
+let aliveStream = null;
+
 function watchFromThisTab() {
+  if (aliveStream) return;
   try {
-    new EventSource(`${API_BASE}/alive`);
+    aliveStream = new EventSource(`${API_BASE}/alive`);
   } catch {
     // Older browsers, or a page opened from a file:// URL. Losing this costs
     // an automatic exit, not a review, so there is nothing to report.
   }
 }
 
+/**
+ * Hand the "this tab is open" signal over to the review's live feed, which
+ * the server counts the same way. One long-lived connection per tab rather
+ * than two: browsers allow six to a host, and every save needs one.
+ */
+function stopWatchingFromThisTab() {
+  aliveStream?.close();
+  aliveStream = null;
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   watchFromThisTab();
 
+  // A tab you were only reading catches up on other tabs' comments when it
+  // comes back into view. See refreshCommentsFromElsewhere.
+  document.addEventListener('visibilitychange', refreshCommentsFromElsewhere);
+
   document.getElementById('repoPath').addEventListener('keypress', (e) => {
     if (e.key === 'Enter') {
       loadRepo();