git-reviewer 2.7.0 → 2.8.1

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-281-brightgreen.svg)](test/)
+[![Tests](https://img.shields.io/badge/tests-285-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
@@ -294,7 +294,7 @@ rather than a public issue.
 
 ```bash
 npm install           # 3 dependencies, no build step, ~6MB
-npm test              # 281 tests
+npm test              # 285 tests
 npm run test:watch
 npm run test:coverage
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-reviewer",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "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

@@ -222,6 +222,17 @@ async function loadRepo() {
 }
 
 // Display list of changed files
+function fileStatusClass(status) {
+  switch (status) {
+    case 'A': return 'file-status-added';
+    case 'D': return 'file-status-deleted';
+    case 'R': return 'file-status-renamed';
+    case 'B': return 'file-status-binary';
+    case 'M':
+    default: return 'file-status-modified';
+  }
+}
+
 function displayFiles(files) {
   const sidebar = document.getElementById('sidebar');
   const filesList = document.getElementById('filesList');
@@ -244,7 +255,7 @@ function displayFiles(files) {
     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 statusClass = fileStatusClass(status);
     const statusBadge = `<span class="file-status ${statusClass}">${status}</span>`;
 
     // The row used to carry the file name itself, inside a string literal
@@ -426,7 +437,7 @@ function displayCode(filePath, diffLines, binary) {
     const newLineClick = diffLine.type !== 'delete' ? `onclick="toggleCommentInput(${Number(diffLineIndex)})"` : '';
 
     html += `
-      <div class="${lineClass}" data-diff-index="${diffLineIndex}">
+      <div class="${lineClass}" tabindex="0" data-diff-index="${diffLineIndex}">
         ${hasComment ? '<span class="comment-indicator"></span>' : ''}
         <div class="line-numbers">
           <span class="old-line-number" ${oldLineClick}>${diffLine.oldLine || ''}</span>
@@ -506,7 +517,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">
+        <div class="unmatched-comment-item collapsed" tabindex="0">
           <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>
@@ -1357,7 +1368,7 @@ function displayFullContext(filePath, lines) {
     const dataDiffIndexAttr = diffLineIndex !== undefined ? `data-diff-index="${diffLineIndex}"` : '';
 
     html += `
-      <div class="${lineClass}" ${dataDiffIndexAttr}>
+      <div class="${lineClass}" tabindex="0" ${dataDiffIndexAttr}>
         ${hasComment ? '<span class="comment-indicator"></span>' : ''}
         <div class="line-numbers">
           <span class="old-line-number">${diffLine.oldLine || ''}</span>
@@ -1636,6 +1647,76 @@ function navigateFiles(direction) {
   }
 }
 
+// Navigate to comments in current file
+function navigateComments(direction) {
+  const commentElements = Array.from(document.querySelectorAll('.line.commented, .unmatched-comment-item'));
+  if (commentElements.length === 0) return;
+
+  const active = document.activeElement;
+  const currentIndex = commentElements.findIndex(el => el === active || el.contains(active));
+
+  let newIndex = currentIndex;
+  if (currentIndex === -1) {
+    newIndex = direction === 'next' ? 0 : commentElements.length - 1;
+  } else {
+    // stop at boundaries, matching existing file navigation style
+    if (direction === 'next') {
+      newIndex = Math.min(currentIndex + 1, commentElements.length - 1);
+    } else {
+      newIndex = Math.max(currentIndex - 1, 0);
+    }
+  }
+
+  if (newIndex !== currentIndex && commentElements[newIndex]) {
+    const target = commentElements[newIndex];
+    target.focus();
+    target.scrollIntoView({ block: 'nearest' });
+  }
+}
+
+function handleCommentShortcut() {
+  const active = document.activeElement;
+  if (!active) return;
+  const line = active.closest('.line');
+  if (!line) return;
+  const diffIndex = parseInt(line.dataset.diffIndex, 10);
+  if (!isNaN(diffIndex)) {
+    toggleCommentInput(diffIndex);
+  }
+}
+
+/**
+ * Pure function mapping keyboard events to application actions.
+ * @param {string} key
+ * @param {string} targetTagName
+ * @param {{ctrl?: boolean, meta?: boolean, alt?: boolean}} [modifiers]
+ * @returns {string|null} Action to take, or null if ignored.
+ */
+function getKeyboardShortcut(key, targetTagName, modifiers = {}) {
+  if (modifiers.ctrl || modifiers.meta || modifiers.alt) return null;
+
+  // Escape means "never mind" everywhere — including inside inputs — so it
+  // must be checked before the typing guard.
+  if (key === 'Escape') return 'escape';
+
+  if (targetTagName === 'INPUT' || targetTagName === 'TEXTAREA') {
+    return null;
+  }
+
+  const map = {
+    'ArrowUp': 'prevFile',
+    'k': 'prevFile',
+    'ArrowDown': 'nextFile',
+    'j': 'nextFile',
+    'n': 'nextComment',
+    'p': 'prevComment',
+    'c': 'commentFocus',
+    '?': 'help'
+  };
+
+  return map[key] || null;
+}
+
 // Allow Enter key to load repo
 document.addEventListener('DOMContentLoaded', () => {
   document.getElementById('repoPath').addEventListener('keypress', (e) => {
@@ -1647,22 +1728,31 @@ document.addEventListener('DOMContentLoaded', () => {
   // Initialize resize handle
   initResizeHandle();
 
-  // Add keyboard navigation for files
+  // Add keyboard navigation
   document.addEventListener('keydown', (e) => {
-    // Only handle arrow keys when not in an input/textarea
-    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
-      return;
-    }
+    const action = getKeyboardShortcut(e.key, e.target.tagName, { ctrl: e.ctrlKey, meta: e.metaKey, alt: e.altKey });
+    if (!action || action === 'escape') return; // escape is handled separately
 
-    if (e.key === 'ArrowUp') {
+    if (action === 'prevFile') {
       e.preventDefault();
       navigateFiles('up');
-    } else if (e.key === 'ArrowDown') {
+    } else if (action === 'nextFile') {
       e.preventDefault();
       navigateFiles('down');
+    } else if (action === 'nextComment') {
+      e.preventDefault();
+      navigateComments('next');
+    } else if (action === 'prevComment') {
+      e.preventDefault();
+      navigateComments('prev');
+    } else if (action === 'commentFocus') {
+      e.preventDefault();
+      handleCommentShortcut();
+    } else if (action === 'help') {
+      e.preventDefault();
+      document.getElementById('helpButton').click();
     }
   });
-
   for (const id of ['recentList', 'browseList']) {
     const list = document.getElementById(id);
     list.addEventListener('click', onPickerActivate);
@@ -1672,13 +1762,22 @@ document.addEventListener('DOMContentLoaded', () => {
   // 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') return;
+    if (getKeyboardShortcut(event.key, event.target.tagName, { ctrl: event.ctrlKey, meta: event.metaKey, alt: event.altKey }) !== 'escape') {
+      return;
+    }
 
     // Topmost first: the help sits over the picker, which sits over a review.
     if (!document.getElementById('helpModal').classList.contains('hidden')) {
       closeHelp();
       return;
     }
+
+    const reviewModal = document.querySelector('.review-modal');
+    if (reviewModal) {
+      reviewModal.remove();
+      return;
+    }
+
     closePicker();
   });
 
@@ -1817,8 +1916,8 @@ async function loadRecent() {
     .map(project => {
       const meta = project.exists
         ? [project.comments > 0 ? `${project.comments} comment${project.comments === 1 ? '' : 's'}` : '', timeAgo(project.openedAt)]
-            .filter(Boolean)
-            .join(' · ')
+          .filter(Boolean)
+          .join(' · ')
         : 'no longer there';
 
       return `
@@ -1972,3 +2071,9 @@ function offerHelpOnce() {
   if (helpWasSeen()) return;
   openHelp();
 }
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    getKeyboardShortcut
+  };
+}

package/public/index.html

@@ -149,7 +149,8 @@
         <div class="help-foot">
           <span class="help-keys">
             <kbd>⌘</kbd><kbd>Enter</kbd> save · <kbd>Esc</kbd> cancel ·
-            <kbd>↑</kbd><kbd>↓</kbd> move between files
+            <kbd>↑</kbd><kbd>↓</kbd><kbd>j</kbd><kbd>k</kbd> files ·
+            <kbd>n</kbd><kbd>p</kbd> comments · <kbd>c</kbd> new comment · <kbd>?</kbd> help
           </span>
           <button class="help-done" onclick="closeHelp()">Got it</button>
         </div>

package/public/style.css

@@ -221,6 +221,21 @@ button:disabled {
   color: white;
 }
 
+.file-status-deleted {
+  background: #d73a49;
+  color: white;
+}
+
+.file-status-renamed {
+  background: #6f42c1;
+  color: white;
+}
+
+.file-status-binary {
+  background: #6a737d;
+  color: white;
+}
+
 .file-item:hover {
   background: #f3f4f6;
   border-left-color: #0366d6;
@@ -441,6 +456,11 @@ button:disabled {
   background: rgba(0, 0, 0, 0.03);
 }
 
+.line:focus, .unmatched-comment-item:focus {
+  outline: 2px solid #0366d6;
+  outline-offset: -2px;
+}
+
 /* Diff-specific styling */
 .diff-add {
   background: #e6ffed;