git-reviewer 2.5.0 → 2.6.0

package/README.md

@@ -3,7 +3,7 @@
 [![CI](https://github.com/dheerajjha/reviewer/actions/workflows/ci.yml/badge.svg)](https://github.com/dheerajjha/reviewer/actions/workflows/ci.yml)
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 [![Node](https://img.shields.io/badge/node-%3E%3D18-brightgreen.svg)](package.json)
-[![Tests](https://img.shields.io/badge/tests-271-brightgreen.svg)](test/)
+[![Tests](https://img.shields.io/badge/tests-272-brightgreen.svg)](test/)
 [![Dependencies](https://img.shields.io/badge/dependencies-3-brightgreen.svg)](package.json)
 
 When an agent writes the code, reading it becomes the bottleneck — and the tool
@@ -32,16 +32,18 @@ review was saved and keeps serving, because you may have more to read.
 Everything it says to you goes to stderr either way, so only the review is
 ever on stdout.
 
-![A terminal installing git-reviewer and running it inside a project; the browser opens on the diff with the first changed file already showing; two review comments are written inline, one with a threaded follow-up; then reviewer export prints those same comments back for a coding agent to act on](docs/demo.gif)
+![A terminal installing git-reviewer and running it inside a project; the browser opens on the diff; two review comments are written inline, one with a threaded follow-up; submitting hands the review back to the terminal, where Claude reads it, explains both fixes and names a tradeoff in its own approach, and git diff shows the three files it changed](docs/demo.gif)
 
-*The whole loop, unedited and in real time — [full resolution](docs/demo.mp4).*
+*One command, start to finish, unedited — [full resolution](docs/demo.mp4). Every
+frame is the real tool: the terminal output is captured from the run you are
+watching, and the code at the end is what the agent actually wrote.*
 
 Nothing is installed into the project, there is nothing to sign in to, and
 nothing leaves your machine. If you would rather not install it,
 `npx git-reviewer` works the same way.
 
-The recording above shows the two-step form, which still works and is the one
-to reach for when the review and the hand-off happen at different times:
+When the review and the hand-off happen at different times, the two-step form
+still works and is the one to reach for:
 
 ```bash
 reviewer                                            # read the diff, comment on it
@@ -292,7 +294,7 @@ rather than a public issue.
 
 ```bash
 npm install           # 3 dependencies, no build step, ~6MB
-npm test              # 271 tests
+npm test              # 272 tests
 npm run test:watch
 npm run test:coverage
 ```

package/package.json

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

package/public/app.js

@@ -254,8 +254,12 @@ function displayFiles(files) {
     // 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.
+    // The count is filled in by `updateFileCommentCounts`, not here. Rendering
+    // it now would mean re-rendering this list on every comment to keep it
+    // true, and re-rendering the list is what loses the selected row.
     return `<div class="file-item" onclick="openFileAt(${Number(index)})" title="${escapeHtml(file)}">
       ${statusBadge}<span class="file-path-text">${displayText}</span>
+      <span class="file-comment-count" data-file-index="${Number(index)}" hidden></span>
     </div>`;
   }).join('');
 
@@ -1470,12 +1474,46 @@ function initResizeHandle() {
 let currentFileIndex = -1;
 
 // Update comments sidebar
+/**
+ * How many comments sit on each file, on the file rows themselves.
+ *
+ * In a review of any size the question you keep asking is which files you have
+ * already covered, and the only answer on screen was a total in the sidebar
+ * header — so you found out by clicking through every file (#48).
+ *
+ * Updated in place rather than by re-rendering the list. Re-rendering would be
+ * one line, and it would drop the selected row and the scroll position of the
+ * file list every time anyone typed a comment.
+ */
+function updateFileCommentCounts() {
+  const badges = document.querySelectorAll('.file-comment-count');
+  if (badges.length === 0) return;
+
+  const perFile = new Map();
+  for (const comment of comments) {
+    perFile.set(comment.file, (perFile.get(comment.file) ?? 0) + 1);
+  }
+
+  for (const badge of badges) {
+    const file = currentFiles[Number(badge.dataset.fileIndex)];
+    const count = file ? perFile.get(file.path) ?? 0 : 0;
+
+    badge.textContent = count;
+    badge.title = `${count} comment${count === 1 ? '' : 's'} on this file`;
+    badge.hidden = count === 0;
+  }
+}
+
 function updateCommentsSidebar() {
   const sidebar = document.getElementById('commentsSidebar');
   const commentsList = document.getElementById('commentsList');
   const commentsCount = document.getElementById('commentsCount');
   const commentsResizeHandle = document.getElementById('commentsResizeHandle');
 
+  // Every path that changes a comment already calls this, so the per-file
+  // counts ride along rather than needing ten more call sites of their own.
+  updateFileCommentCounts();
+
   commentsCount.textContent = comments.length;
 
   if (comments.length === 0) {

package/public/style.css

@@ -1836,3 +1836,24 @@ button:disabled {
 @media (max-width: 640px) {
   .help-steps { grid-template-columns: 1fr; }
 }
+
+/* Comments per file
+ *
+ * In a review of any size the question you keep asking is which files you have
+ * already covered. The only answer on screen was a total in the sidebar
+ * header, so you found out by clicking through every file.
+ */
+.file-comment-count {
+  flex: none;
+  min-width: 18px;
+  margin-left: auto;
+  padding: 1px 6px;
+  border-radius: 20px;
+  background: #fff3cd;
+  border: 1px solid #f0e0a0;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.5;
+  color: #7a5d00;
+  text-align: center;
+}