git-reviewer 2.6.0 → 2.8.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-272-brightgreen.svg)](test/)
+[![Tests](https://img.shields.io/badge/tests-284-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              # 272 tests
+npm test              # 284 tests
 npm run test:watch
 npm run test:coverage
 ```

package/lib/changes.js

@@ -14,6 +14,119 @@
  * @property {'A'|'M'|'D'|'R'|'B'} status
  */
 
+/**
+ * Unquotes git's octal-escaped, C-quoted filename strings (e.g. "\"caf\\303\\251.txt\"" -> "café.txt").
+ *
+ * When core.quotePath is enabled (default in git), paths containing non-ASCII
+ * or control characters are enclosed in double quotes and byte-escaped with octal
+ * sequences.
+ *
+ * @param {string} str
+ * @returns {string}
+ */
+function unquoteGitPath(str) {
+  if (typeof str !== 'string') return str;
+  if (str.length >= 2 && str.startsWith('"') && str.endsWith('"')) {
+    const inner = str.slice(1, -1);
+    const bytes = [];
+    for (let i = 0; i < inner.length; i++) {
+      if (inner[i] === '\\' && i + 1 < inner.length) {
+        i++;
+        const next = inner[i];
+        if (next >= '0' && next <= '7') {
+          let octal = next;
+          if (i + 1 < inner.length && inner[i + 1] >= '0' && inner[i + 1] <= '7') {
+            i++;
+            octal += inner[i];
+            if (i + 1 < inner.length && inner[i + 1] >= '0' && inner[i + 1] <= '7') {
+              i++;
+              octal += inner[i];
+            }
+          }
+          bytes.push(parseInt(octal, 8));
+        } else if (next === 'a') {
+          bytes.push(0x07);
+        } else if (next === 'b') {
+          bytes.push(0x08);
+        } else if (next === 't') {
+          bytes.push(0x09);
+        } else if (next === 'n') {
+          bytes.push(0x0a);
+        } else if (next === 'v') {
+          bytes.push(0x0b);
+        } else if (next === 'f') {
+          bytes.push(0x0c);
+        } else if (next === 'r') {
+          bytes.push(0x0d);
+        } else if (next === '"') {
+          bytes.push(0x22);
+        } else if (next === '\\') {
+          bytes.push(0x5c);
+        } else {
+          const code = next.charCodeAt(0);
+          if (code >= 0xd800 && code <= 0xdbff && i + 1 < inner.length) {
+            const nextCode = inner.charCodeAt(i + 1);
+            if (nextCode >= 0xdc00 && nextCode <= 0xdfff) {
+              const pair = inner.slice(i, i + 2);
+              i++;
+              const buf = Buffer.from(pair, 'utf8');
+              for (const b of buf) bytes.push(b);
+              continue;
+            }
+          }
+          const buf = Buffer.from(next, 'utf8');
+          for (const b of buf) bytes.push(b);
+        }
+      } else {
+        const code = inner.charCodeAt(i);
+        if (code >= 0xd800 && code <= 0xdbff && i + 1 < inner.length) {
+          const nextCode = inner.charCodeAt(i + 1);
+          if (nextCode >= 0xdc00 && nextCode <= 0xdfff) {
+            const pair = inner.slice(i, i + 2);
+            i++;
+            const buf = Buffer.from(pair, 'utf8');
+            for (const b of buf) bytes.push(b);
+            continue;
+          }
+        }
+        const buf = Buffer.from(inner[i], 'utf8');
+        for (const b of buf) bytes.push(b);
+      }
+    }
+    return Buffer.from(bytes).toString('utf8');
+  }
+  return str;
+}
+
+/**
+ * Extracts the target path and whether the file entry represents a rename
+ * from git diff --stat display format (e.g. "old => new", "prefix/{old => new}.ext").
+ *
+ * @param {string} raw
+ * @returns {{ isRename: boolean, path: string }}
+ */
+function parseCommitFilePath(raw) {
+  if (typeof raw !== 'string') return { isRename: false, path: raw ?? '' };
+
+  // 1. Brace rename: prefix{old => new}suffix or {old => new}
+  const braceMatch = raw.match(/^(.*?)\{(?:.*?) => (.*?)\}(.*)$/);
+  if (braceMatch) {
+    const rawTo = braceMatch[1] + braceMatch[2] + braceMatch[3];
+    const normalized = unquoteGitPath(rawTo).replace(/\/{2,}/g, '/').replace(/^\/+/, '');
+    return { isRename: true, path: normalized };
+  }
+
+  // 2. Arrow rename: old => new (or "old" => "new")
+  const arrowMatch = raw.match(/^(?:.*?) => (.*)$/);
+  if (arrowMatch) {
+    const rawTo = arrowMatch[1].trim();
+    const normalized = unquoteGitPath(rawTo).replace(/\/{2,}/g, '/').replace(/^\/+/, '');
+    return { isRename: true, path: normalized };
+  }
+
+  return { isRename: false, path: unquoteGitPath(raw).replace(/^\/+/, '') };
+}
+
 /**
  * Collect working-directory changes from a `simple-git` status result.
  *
@@ -39,7 +152,8 @@ function collectWorkingChanges(status) {
   for (const [files, letter] of buckets) {
     for (const entry of files) {
       // `renamed` holds `{ from, to }`; every other bucket holds plain strings.
-      const filePath = typeof entry === 'string' ? entry : entry?.to;
+      const rawPath = typeof entry === 'string' ? entry : entry?.to;
+      const filePath = unquoteGitPath(rawPath);
       if (!filePath || seen.has(filePath)) continue;
       seen.set(filePath, { path: filePath, status: letter });
     }
@@ -56,9 +170,10 @@ function collectWorkingChanges(status) {
  * it deletes none.
  *
  * @param {object} file entry from `git.diffSummary()`
- * @returns {'A'|'M'|'D'|'B'}
+ * @returns {'A'|'M'|'D'|'R'|'B'}
  */
 function classifyCommitFile(file) {
+  if (file?.file && parseCommitFilePath(file.file).isRename) return 'R';
   if (file?.binary) return 'B';
 
   const insertions = file?.insertions ?? 0;
@@ -78,7 +193,17 @@ function classifyCommitFile(file) {
  */
 function collectCommitChanges(diffSummary) {
   const files = diffSummary?.files ?? [];
-  return files.map(file => ({ path: file.file, status: classifyCommitFile(file) }));
+  return files.map(file => {
+    const { path, isRename } = parseCommitFilePath(file?.file);
+    const status = isRename ? 'R' : classifyCommitFile(file);
+    return { path, status };
+  });
 }
 
-module.exports = { collectWorkingChanges, collectCommitChanges, classifyCommitFile };
+module.exports = {
+  collectWorkingChanges,
+  collectCommitChanges,
+  classifyCommitFile,
+  unquoteGitPath,
+  parseCommitFilePath
+};

package/package.json

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

@@ -426,7 +426,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 +506,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 +1357,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 +1636,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 +1717,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 +1751,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 +1905,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 +2060,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

@@ -441,6 +441,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;