@in-the-loop-labs/pair-review 2.0.1 → 2.0.2

package/bin/pair-review.js

@@ -26,7 +26,7 @@ async function main() {
       : 'inherit';
 
     // Spawn the main process with arguments
-    const app = spawn('node', [mainPath, ...args], {
+    const app = spawn(process.execPath, [mainPath, ...args], {
       stdio: stdioOption
     });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@in-the-loop-labs/pair-review",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Your AI-powered code review partner - Close the feedback loop with AI coding agents",
   "main": "src/server.js",
   "bin": {

package/plugin/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "pair-review",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "pair-review app integration — Open PRs and local changes in the pair-review web UI, run server-side AI analysis, and address review feedback. Requires the pair-review MCP server.",
   "author": {
     "name": "in-the-loop-labs",

package/plugin-code-critic/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "code-critic",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "AI-powered code review analysis — Run three-level AI analysis and implement-review-fix loops directly in your coding agent. Works standalone, no server required.",
   "author": {
     "name": "in-the-loop-labs",

package/public/css/pr.css

@@ -6362,12 +6362,29 @@ body:not([data-theme="dark"]) .theme-icon-light {
 }
 
 /* Small icon buttons in toolbar have reduced dimensions */
-.toolbar-actions .btn-sm.btn-icon {
+.toolbar-actions .btn-sm.btn-icon,
+.toolbar-meta .btn-sm.btn-icon {
   padding: 6px;
   width: 32px;
   height: 32px;
 }
 
+/* Icon buttons inside toolbar-meta need the same visual treatment as toolbar-actions */
+.toolbar-meta .btn-icon {
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-primary);
+  color: var(--color-text-secondary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.toolbar-meta .btn-icon:hover {
+  background: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+  border-color: var(--color-border-secondary);
+}
+
 /* ============================================
    Analysis Progress Dots
    ============================================ */
@@ -6962,17 +6979,96 @@ body.resizing * {
 }
 
 /* Dark theme toolbar button overrides */
-[data-theme="dark"] .toolbar-actions .btn-icon {
+[data-theme="dark"] .toolbar-actions .btn-icon,
+[data-theme="dark"] .toolbar-meta .btn-icon {
   background: var(--color-bg-tertiary);
   border-color: var(--color-border-secondary);
   color: var(--color-text-secondary);
 }
 
-[data-theme="dark"] .toolbar-actions .btn-icon:hover {
+[data-theme="dark"] .toolbar-actions .btn-icon:hover,
+[data-theme="dark"] .toolbar-meta .btn-icon:hover {
   background: var(--color-bg-elevated);
   color: var(--color-text-primary);
 }
 
+/* --------------------------------------------------------------------------
+   Diff Options Popover (gear icon dropdown for whitespace toggle, etc.)
+   -------------------------------------------------------------------------- */
+.diff-options-popover {
+  position: fixed;
+  z-index: 1100;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12);
+  padding: 4px 0;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  pointer-events: none;
+}
+
+.diff-options-popover.visible {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.diff-options-popover label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 0.8125rem;
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  user-select: none;
+  transition: background-color 0.1s ease;
+}
+
+.diff-options-popover label:hover {
+  background: var(--color-bg-tertiary);
+}
+
+.diff-options-popover input[type="checkbox"] {
+  margin: 0;
+  cursor: pointer;
+}
+
+/* Active state for the diff-options gear button when a filter is applied */
+#diff-options-btn.active {
+  color: var(--color-accent-primary);
+  border-color: var(--color-accent-primary);
+  background: var(--color-accent-light);
+}
+
+#diff-options-btn.active:hover {
+  background: var(--color-accent-lighter);
+}
+
+/* Dark theme */
+[data-theme="dark"] .diff-options-popover {
+  background: var(--color-bg-secondary);
+  border-color: var(--color-border-secondary);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme="dark"] .diff-options-popover label:hover {
+  background: var(--color-bg-tertiary);
+}
+
+[data-theme="dark"] #diff-options-btn.active {
+  color: #58a6ff;
+  border-color: #58a6ff;
+  background: rgba(88, 166, 255, 0.1);
+}
+
+[data-theme="dark"] #diff-options-btn.active:hover {
+  background: rgba(88, 166, 255, 0.15);
+}
+
 .ai-panel-header {
   display: flex;
   align-items: center;

package/public/js/components/DiffOptionsDropdown.js

@@ -0,0 +1,207 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+/**
+ * DiffOptionsDropdown - Gear-icon popover for diff display options.
+ *
+ * Anchors a small dropdown below the gear button (#diff-options-btn) with
+ * checkbox toggles that control diff rendering.  Currently supports a single
+ * option: "Hide whitespace changes".
+ *
+ * Follows the same popover pattern used by PanelGroup._showPopover() /
+ * _hidePopover() (fixed positioning via getBoundingClientRect, click-outside
+ * and Escape to dismiss, opacity+transform animation).
+ *
+ * Usage:
+ *   const dropdown = new DiffOptionsDropdown(
+ *     document.getElementById('diff-options-btn'),
+ *     { onToggleWhitespace: (hidden) => { … } }
+ *   );
+ */
+
+const STORAGE_KEY = 'pair-review-hide-whitespace';
+
+class DiffOptionsDropdown {
+  /**
+   * @param {HTMLElement} buttonElement - The gear icon button already in the DOM
+   * @param {Object}      callbacks
+   * @param {function(boolean):void} callbacks.onToggleWhitespace
+   */
+  constructor(buttonElement, { onToggleWhitespace }) {
+    this._btn = buttonElement;
+    this._onToggleWhitespace = onToggleWhitespace;
+
+    this._popoverEl = null;
+    this._checkbox = null;
+    this._visible = false;
+    this._outsideClickHandler = null;
+    this._escapeHandler = null;
+
+    // Read persisted state
+    this._hideWhitespace = localStorage.getItem(STORAGE_KEY) === 'true';
+
+    this._renderPopover();
+    this._syncButtonActive();
+
+    // Toggle popover on button click
+    this._btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (this._visible) {
+        this._hide();
+      } else {
+        this._show();
+      }
+    });
+
+    // Fire initial callback so the consumer can apply the persisted state
+    if (this._hideWhitespace) {
+      this._onToggleWhitespace(true);
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+
+  /** @returns {boolean} Whether whitespace changes are currently hidden */
+  get hideWhitespace() {
+    return this._hideWhitespace;
+  }
+
+  /** Programmatically set the whitespace toggle (updates UI + storage). */
+  set hideWhitespace(value) {
+    const bool = Boolean(value);
+    if (bool === this._hideWhitespace) return;
+    this._hideWhitespace = bool;
+    if (this._checkbox) this._checkbox.checked = bool;
+    this._persist();
+    this._syncButtonActive();
+    this._onToggleWhitespace(bool);
+  }
+
+  // ---------------------------------------------------------------------------
+  // DOM construction
+  // ---------------------------------------------------------------------------
+
+  _renderPopover() {
+    const popover = document.createElement('div');
+    popover.className = 'diff-options-popover';
+    // Start hidden (opacity 0, shifted up)
+    popover.style.opacity = '0';
+    popover.style.transform = 'translateY(-4px)';
+    popover.style.pointerEvents = 'none';
+    popover.style.position = 'fixed';
+    popover.style.zIndex = '1100';
+    popover.style.transition = 'opacity 0.15s ease, transform 0.15s ease';
+
+    // Label wrapping checkbox for a nice click target
+    const label = document.createElement('label');
+    label.style.display = 'flex';
+    label.style.alignItems = 'center';
+    label.style.gap = '8px';
+    label.style.cursor = 'pointer';
+    label.style.fontSize = '0.8125rem';
+    label.style.whiteSpace = 'nowrap';
+    label.style.padding = '8px 12px';
+    label.style.userSelect = 'none';
+
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.checked = this._hideWhitespace;
+    checkbox.style.margin = '0';
+    checkbox.style.cursor = 'pointer';
+
+    const text = document.createTextNode('Hide whitespace changes');
+
+    label.appendChild(checkbox);
+    label.appendChild(text);
+    popover.appendChild(label);
+
+    document.body.appendChild(popover);
+
+    this._popoverEl = popover;
+    this._checkbox = checkbox;
+
+    // Respond to checkbox changes
+    checkbox.addEventListener('change', () => {
+      this._hideWhitespace = checkbox.checked;
+      this._persist();
+      this._syncButtonActive();
+      this._onToggleWhitespace(this._hideWhitespace);
+    });
+  }
+
+  // ---------------------------------------------------------------------------
+  // Show / Hide (mirrors PanelGroup pattern)
+  // ---------------------------------------------------------------------------
+
+  _show() {
+    if (!this._popoverEl || !this._btn) return;
+
+    // Position below the button
+    const rect = this._btn.getBoundingClientRect();
+    this._popoverEl.style.top = `${rect.bottom + 4}px`;
+    this._popoverEl.style.left = `${rect.left + rect.width / 2}px`;
+    this._popoverEl.style.transform = 'translateX(-50%) translateY(-4px)';
+
+    // Make visible
+    this._popoverEl.style.opacity = '1';
+    this._popoverEl.style.pointerEvents = 'auto';
+    this._visible = true;
+
+    // Animate into final position
+    requestAnimationFrame(() => {
+      if (this._popoverEl) {
+        this._popoverEl.style.transform = 'translateX(-50%) translateY(0)';
+      }
+    });
+
+    // Click-outside-to-close
+    this._outsideClickHandler = (e) => {
+      if (!this._popoverEl.contains(e.target) && !this._btn.contains(e.target)) {
+        this._hide();
+      }
+    };
+    document.addEventListener('click', this._outsideClickHandler, true);
+
+    // Escape to dismiss
+    this._escapeHandler = (e) => {
+      if (e.key === 'Escape') {
+        this._hide();
+      }
+    };
+    document.addEventListener('keydown', this._escapeHandler, true);
+  }
+
+  _hide() {
+    if (!this._popoverEl) return;
+
+    this._popoverEl.style.opacity = '0';
+    this._popoverEl.style.transform = 'translateX(-50%) translateY(-4px)';
+    this._popoverEl.style.pointerEvents = 'none';
+    this._visible = false;
+
+    if (this._outsideClickHandler) {
+      document.removeEventListener('click', this._outsideClickHandler, true);
+      this._outsideClickHandler = null;
+    }
+    if (this._escapeHandler) {
+      document.removeEventListener('keydown', this._escapeHandler, true);
+      this._escapeHandler = null;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Helpers
+  // ---------------------------------------------------------------------------
+
+  _persist() {
+    localStorage.setItem(STORAGE_KEY, String(this._hideWhitespace));
+  }
+
+  /** Add/remove `.active` on the gear button as a visual cue that filtering is on. */
+  _syncButtonActive() {
+    if (!this._btn) return;
+    this._btn.classList.toggle('active', this._hideWhitespace);
+  }
+}
+
+window.DiffOptionsDropdown = DiffOptionsDropdown;

package/public/js/components/ReviewModal.js

@@ -132,7 +132,7 @@ class ReviewModal {
         
         <div class="modal-footer review-modal-footer">
           <button class="btn btn-secondary" onclick="reviewModal.handleCloseClick()" id="cancel-review-btn">Cancel</button>
-          <button class="btn btn-primary" id="submit-review-btn-modal" onclick="reviewModal.submitReview()">
+          <button class="btn btn-primary" id="submit-review-btn-modal" onclick="reviewModal.submitReview()" title="Submit review (Cmd/Ctrl+Enter)">
             Submit review
           </button>
         </div>
@@ -157,11 +157,16 @@ class ReviewModal {
     }
     ReviewModal._listenersRegistered = true;
 
-    // Handle escape key - uses window.reviewModal to get the current instance
+    // Handle keyboard shortcuts - uses window.reviewModal to get the current instance
     document.addEventListener('keydown', (e) => {
       const instance = window.reviewModal;
-      if (e.key === 'Escape' && instance?.isVisible && !instance?.isSubmitting) {
+      if (!instance?.isVisible) return;
+
+      if (e.key === 'Escape' && !instance.isSubmitting) {
         instance.hide();
+      } else if ((e.metaKey || e.ctrlKey) && e.key === 'Enter' && !instance.isSubmitting) {
+        e.preventDefault();
+        instance.submitReview();
       }
     });
 

package/public/js/local.js

@@ -463,6 +463,32 @@ class LocalManager {
       }
     };
 
+    // Override handleWhitespaceToggle for local mode.
+    // The base PRManager implementation calls loadAndDisplayFiles() which
+    // uses the PR diff endpoint. In local mode we need to call loadLocalDiff()
+    // instead, which uses the local diff endpoint.
+    manager.handleWhitespaceToggle = async function(hide) {
+      manager.hideWhitespace = hide;
+
+      // Nothing to reload if we haven't loaded a review yet
+      if (!manager.currentPR) return;
+
+      const scrollY = window.scrollY;
+
+      // Re-fetch and re-render the diff (loadLocalDiff reads hideWhitespace)
+      await self.loadLocalDiff();
+
+      // Re-anchor comments and suggestions on the fresh DOM
+      const includeDismissed = window.aiPanel?.showDismissedComments || false;
+      await manager.loadUserComments(includeDismissed);
+      await manager.loadAISuggestions(null, manager.selectedRunId);
+
+      // Restore scroll position after the DOM settles
+      requestAnimationFrame(() => {
+        window.scrollTo(0, scrollY);
+      });
+    };
+
     console.log('PRManager patched for local mode');
   }
 
@@ -1050,7 +1076,11 @@ class LocalManager {
     const manager = window.prManager;
 
     try {
-      const response = await fetch(`/api/local/${this.reviewId}/diff`);
+      let diffUrl = `/api/local/${this.reviewId}/diff`;
+      if (manager.hideWhitespace) {
+        diffUrl += '?w=1';
+      }
+      const response = await fetch(diffUrl);
 
       if (!response.ok) {
         throw new Error('Failed to load local diff');

package/public/js/pr.js

@@ -130,6 +130,12 @@ class PRManager {
     this.selectedRunId = null;
     // Keyboard shortcuts manager
     this.keyboardShortcuts = null;
+    // Hide whitespace toggle state — must be set before DiffOptionsDropdown
+    // is constructed because it fires the callback synchronously on init
+    // when localStorage has a persisted `true` value.
+    this.hideWhitespace = false;
+    // Diff options dropdown (gear icon popover)
+    this.diffOptionsDropdown = null;
     // Unique client ID for self-echo suppression on SSE review events.
     // Sent as X-Client-Id header on mutation requests; the server echoes
     // it back in the SSE broadcast so this tab can skip its own events.
@@ -174,6 +180,16 @@ class PRManager {
     this.initAnalysisConfigModal();
     this.initKeyboardShortcuts();
 
+    // Initialize diff options dropdown (gear icon for whitespace toggle).
+    // Must happen before init() so the persisted hideWhitespace state is
+    // applied before the first loadAndDisplayFiles() call.
+    const diffOptionsBtn = document.getElementById('diff-options-btn');
+    if (diffOptionsBtn && window.DiffOptionsDropdown) {
+      this.diffOptionsDropdown = new window.DiffOptionsDropdown(diffOptionsBtn, {
+        onToggleWhitespace: (hide) => this.handleWhitespaceToggle(hide),
+      });
+    }
+
     // In local mode, LocalManager handles init instead
     if (!window.PAIR_REVIEW_LOCAL_MODE) {
       this.init();
@@ -576,7 +592,11 @@ class PRManager {
    */
   async loadAndDisplayFiles(owner, repo, number) {
     try {
-      const response = await fetch(`/api/pr/${owner}/${repo}/${number}/diff`);
+      let diffUrl = `/api/pr/${owner}/${repo}/${number}/diff`;
+      if (this.hideWhitespace) {
+        diffUrl += '?w=1';
+      }
+      const response = await fetch(diffUrl);
 
       if (response.ok) {
         const data = await response.json();
@@ -642,6 +662,35 @@ class PRManager {
     }
   }
 
+  /**
+   * Handle the whitespace visibility toggle from DiffOptionsDropdown.
+   * Re-fetches the diff (with or without ?w=1), re-renders it, and
+   * re-anchors user comments and AI suggestions on the fresh DOM.
+   * @param {boolean} hide - Whether to hide whitespace-only changes
+   */
+  async handleWhitespaceToggle(hide) {
+    this.hideWhitespace = hide;
+
+    // Nothing to reload if we haven't loaded a PR yet
+    if (!this.currentPR) return;
+
+    const { owner, repo, number } = this.currentPR;
+    const scrollY = window.scrollY;
+
+    // Re-fetch and re-render the diff
+    await this.loadAndDisplayFiles(owner, repo, number);
+
+    // Re-anchor comments and suggestions on the fresh DOM
+    const includeDismissed = window.aiPanel?.showDismissedComments || false;
+    await this.loadUserComments(includeDismissed);
+    await this.loadAISuggestions(null, this.selectedRunId);
+
+    // Restore scroll position after the DOM settles
+    requestAnimationFrame(() => {
+      window.scrollTo(0, scrollY);
+    });
+  }
+
   /**
    * Parse unified diff to extract per-file patches
    * @param {string} diff - Full unified diff
@@ -2214,8 +2263,17 @@ class PRManager {
       // If a parent suggestion existed, the suggestion card is still collapsed/dismissed in the diff view.
       // Update AIPanel to show the suggestion as 'dismissed' (matching its visual state).
       // User can click "Show" to restore it to active state if they want to re-adopt.
-      if (apiResult.dismissedSuggestionId && window.aiPanel?.updateFindingStatus) {
-        window.aiPanel.updateFindingStatus(apiResult.dismissedSuggestionId, 'dismissed');
+      if (apiResult.dismissedSuggestionId) {
+        if (window.aiPanel?.updateFindingStatus) {
+          window.aiPanel.updateFindingStatus(apiResult.dismissedSuggestionId, 'dismissed');
+        }
+        // Clear hiddenForAdoption so that restoring the suggestion takes the API code path
+        // instead of the toggle-only shortcut. Without this, restoring a previously-adopted
+        // suggestion would only toggle visibility without updating its status.
+        const suggestionDiv = document.querySelector(`[data-suggestion-id="${apiResult.dismissedSuggestionId}"]`);
+        if (suggestionDiv) {
+          delete suggestionDiv.dataset.hiddenForAdoption;
+        }
       }
 
       // Show success toast

package/public/local.html

@@ -338,6 +338,11 @@
                         <span class="toolbar-stat toolbar-stat-additions" id="pr-additions">+0</span>
                         <span class="toolbar-stat toolbar-stat-deletions" id="pr-deletions">-0</span>
                         <span class="toolbar-files" id="pr-files-count">0 files</span>
+                        <button class="btn btn-sm btn-icon" id="diff-options-btn" title="Diff options">
+                            <svg viewBox="0 0 16 16" fill="currentColor" width="14" height="14">
+                                <path d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"/>
+                            </svg>
+                        </button>
                         <span class="toolbar-separator"></span>
                         <span class="toolbar-commit" id="pr-commit" title="Commit SHA">
                             <svg viewBox="0 0 16 16" fill="currentColor" width="12" height="12">
@@ -529,6 +534,7 @@
     <script src="/js/components/AIPanel.js"></script>
     <script src="/js/components/EmojiPicker.js"></script>
     <script src="/js/components/KeyboardShortcuts.js"></script>
+    <script src="/js/components/DiffOptionsDropdown.js"></script>
 
     <!-- PR Modules (must load before pr.js) -->
     <script src="/js/modules/storage-cleanup.js"></script>

package/public/pr.html

@@ -168,6 +168,11 @@
                         <span class="toolbar-stat toolbar-stat-additions" id="pr-additions">+0</span>
                         <span class="toolbar-stat toolbar-stat-deletions" id="pr-deletions">-0</span>
                         <span class="toolbar-files" id="pr-files-count">0 files</span>
+                        <button class="btn btn-sm btn-icon" id="diff-options-btn" title="Diff options">
+                            <svg viewBox="0 0 16 16" fill="currentColor" width="14" height="14">
+                                <path d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"/>
+                            </svg>
+                        </button>
                         <span class="toolbar-separator"></span>
                         <span class="toolbar-commit" id="pr-commit" title="Commit SHA">
                             <svg viewBox="0 0 16 16" fill="currentColor" width="12" height="12">
@@ -352,6 +357,7 @@
     <script src="/js/components/AIPanel.js"></script>
     <script src="/js/components/EmojiPicker.js"></script>
     <script src="/js/components/KeyboardShortcuts.js"></script>
+    <script src="/js/components/DiffOptionsDropdown.js"></script>
 
     <!-- PR Modules (must load before pr.js) -->
     <script src="/js/modules/storage-cleanup.js"></script>

package/src/database.js

@@ -1921,6 +1921,7 @@ class CommentRepository {
       throw new Error('This suggestion has already been processed');
     }
 
+
     // Create user comment preserving metadata from the suggestion
     const result = await run(this.db, `
       INSERT INTO comments (
@@ -3394,14 +3395,15 @@ class ContextFileRepository {
   /**
    * Update the line range of an existing context file record
    * @param {number} id - Context file record ID
+   * @param {number} reviewId - Review ID (ensures update is scoped to the correct review)
    * @param {number} lineStart - New start line number
    * @param {number} lineEnd - New end line number
    * @returns {Promise<boolean>} True if record was updated
    */
-  async updateRange(id, lineStart, lineEnd) {
+  async updateRange(id, reviewId, lineStart, lineEnd) {
     const result = await run(this.db, `
-      UPDATE context_files SET line_start = ?, line_end = ? WHERE id = ?
-    `, [lineStart, lineEnd, id]);
+      UPDATE context_files SET line_start = ?, line_end = ? WHERE id = ? AND review_id = ?
+    `, [lineStart, lineEnd, id, reviewId]);
 
     return result.changes > 0;
   }

package/src/github/client.js

@@ -19,6 +19,45 @@ class GitHubApiError extends Error {
   }
 }
 
+/**
+ * Detect whether a GraphQL error is a complexity/cost limit error from GitHub.
+ * These errors mean the mutation was too large and can be retried with fewer items.
+ *
+ * @param {Error} error - The error thrown by octokit.graphql
+ * @returns {boolean} True if the error is a complexity/cost limit error
+ */
+function isComplexityError(error) {
+  const patterns = [
+    /complexity/i,
+    /MAX_NODE_LIMIT/,
+    /cost exceeds/i,
+    /too large/i,
+    /query size exceeds/i,
+  ];
+
+  // Check the top-level error message
+  if (error.message) {
+    for (const pattern of patterns) {
+      if (pattern.test(error.message)) return true;
+    }
+  }
+
+  // Check individual GraphQL error messages in the errors array
+  if (error.errors && Array.isArray(error.errors)) {
+    for (const err of error.errors) {
+      if (err.message) {
+        for (const pattern of patterns) {
+          if (pattern.test(err.message)) return true;
+        }
+      }
+    }
+  }
+
+  return false;
+}
+
+const MIN_BATCH_SIZE = 1;
+
 /**
  * GitHub API client wrapper with error handling and rate limiting
  */
@@ -347,42 +386,38 @@ class GitHubClient {
    * Add comments to a pending review in batches
    * This helper splits comments into batches to avoid GitHub API limits
    * on large mutations. Each batch is executed sequentially with retry logic.
+   * If a batch fails due to GitHub GraphQL complexity/cost limits, the batch
+   * size is automatically halved and the failed batch is retried.
    *
    * @param {string} prNodeId - GraphQL node ID for the PR (e.g., "PR_kwDOM...")
    * @param {string} reviewId - GraphQL node ID for the pending review
    * @param {Array} comments - Array of comments with path, line (optional), side, body, isFileLevel
-   * @param {number} batchSize - Number of comments per batch (default: 25)
+   * @param {number} batchSize - Number of comments per batch (default: 10)
    * @returns {Promise<Object>} Result with successCount, failed flag, and failedDetails array of error strings
    */
-  // Batch size of 25 is empirically chosen to stay well under GitHub's GraphQL
-  // mutation size limits while still being efficient for large reviews.
-  async addCommentsInBatches(prNodeId, reviewId, comments, batchSize = 25) {
+  async addCommentsInBatches(prNodeId, reviewId, comments, batchSize = 10) {
     if (comments.length === 0) {
       return { successCount: 0, failed: false, failedDetails: [] };
     }
 
-    // Split comments into batches
-    const batches = [];
-    for (let i = 0; i < comments.length; i += batchSize) {
-      batches.push(comments.slice(i, i + batchSize));
-    }
-
-    console.log(`Adding ${comments.length} comments in ${batches.length} batch(es) of up to ${batchSize} comments each`);
-
+    let currentBatchSize = batchSize;
+    let remaining = comments.slice();
     let totalSuccessful = 0;
     const failedDetails = [];
+    let batchNumber = 0;
 
-    for (let batchIndex = 0; batchIndex < batches.length; batchIndex++) {
-      const batch = batches[batchIndex];
-      const batchNumber = batchIndex + 1;
-      console.log(`Adding comments batch ${batchNumber}/${batches.length} (${batch.length} comments)...`);
+    console.log(`Adding ${comments.length} comments in batches of up to ${currentBatchSize}`);
+
+    while (remaining.length > 0) {
+      batchNumber++;
+      const batch = remaining.slice(0, currentBatchSize);
+      console.log(`Adding comments batch ${batchNumber} (${batch.length} comments, ${remaining.length} remaining)...`);
 
       // Build mutation for this batch
       const commentMutations = batch.map((comment, index) => {
         const isFileLevel = comment.isFileLevel || !comment.line;
 
         if (isFileLevel) {
-          // File-level comment (for expanded context lines)
           return `
             comment${index}: addPullRequestReviewThread(input: {
               pullRequestId: $prId
@@ -395,7 +430,6 @@ class GitHubClient {
             }
           `;
         } else {
-          // Line-level comment
           const side = comment.side || 'RIGHT';
           const startLineField = comment.start_line ? `startLine: ${comment.start_line}\n                ` : '';
           return `
@@ -424,6 +458,7 @@ class GitHubClient {
       let batchError = null;
       let retryAttempt = 0;
       const maxRetries = 1;
+      let reducedBatchSize = false;
 
       while (retryAttempt <= maxRetries) {
         try {
@@ -435,6 +470,22 @@ class GitHubClient {
           break; // Success, exit retry loop
         } catch (error) {
           batchError = error;
+
+          // Check for complexity/cost limit errors — reduce batch size instead of retrying
+          if (isComplexityError(error)) {
+            const newSize = Math.max(MIN_BATCH_SIZE, Math.floor(currentBatchSize / 2));
+            if (newSize < currentBatchSize) {
+              console.warn(
+                `Batch ${batchNumber} hit complexity limit (size ${currentBatchSize}), ` +
+                `reducing batch size to ${newSize}`
+              );
+              currentBatchSize = newSize;
+              reducedBatchSize = true;
+              break; // Exit retry loop — will re-attempt with smaller batch
+            }
+            // Already at minimum batch size — fall through to normal retry logic
+          }
+
           if (retryAttempt < maxRetries) {
             console.warn(`Batch ${batchNumber} failed, retrying... (${error.message})`);
             retryAttempt++;
@@ -450,6 +501,12 @@ class GitHubClient {
         }
       }
 
+      // If we reduced batch size due to complexity, retry from top of loop
+      // with the same remaining comments but a smaller batch
+      if (reducedBatchSize) {
+        continue;
+      }
+
       // Check if batch succeeded
       if (batchError) {
         // Build a map of per-comment errors from the GraphQL errors array.
@@ -522,9 +579,12 @@ class GitHubClient {
         totalSuccessful += batchSuccessful;
         console.log(`Batch ${batchNumber} complete: ${batchSuccessful} comments added`);
       }
+
+      // Advance past the successfully processed batch
+      remaining = remaining.slice(batch.length);
     }
 
-    console.log(`All ${batches.length} batches complete: ${totalSuccessful} total comments added`);
+    console.log(`All batches complete: ${totalSuccessful} total comments added`);
     return { successCount: totalSuccessful, failed: false, failedDetails };
   }
 
@@ -1124,4 +1184,4 @@ class GitHubClient {
   }
 }
 
-module.exports = { GitHubClient, GitHubApiError };
+module.exports = { GitHubClient, GitHubApiError, isComplexityError };

package/src/local-review.js

@@ -366,8 +366,9 @@ async function getUntrackedFiles(repoPath) {
  * @param {string} repoPath - Path to the git repository
  * @returns {Promise<{diff: string, untrackedFiles: Array, stats: Object}>}
  */
-async function generateLocalDiff(repoPath) {
+async function generateLocalDiff(repoPath, options = {}) {
   let diff = '';
+  const wFlag = options.hideWhitespace ? ' -w' : '';
   const stats = {
     trackedChanges: 0,
     untrackedFiles: 0,
@@ -378,7 +379,7 @@ async function generateLocalDiff(repoPath) {
   try {
     // Count staged changes for stats (but don't include in diff)
     // This is informational only - staged files are excluded from review
-    const stagedDiff = execSync('git diff --cached --no-color --no-ext-diff --unified=25', {
+    const stagedDiff = execSync(`git diff --cached --no-color --no-ext-diff --unified=25${wFlag}`, {
       cwd: repoPath,
       encoding: 'utf8',
       stdio: ['pipe', 'pipe', 'pipe'],
@@ -390,7 +391,7 @@ async function generateLocalDiff(repoPath) {
     }
 
     // Get unstaged changes to tracked files (this is what we show in the review)
-    const unstagedDiff = execSync('git diff --no-color --no-ext-diff --unified=25', {
+    const unstagedDiff = execSync(`git diff --no-color --no-ext-diff --unified=25${wFlag}`, {
       cwd: repoPath,
       encoding: 'utf8',
       stdio: ['pipe', 'pipe', 'pipe'],
@@ -427,7 +428,7 @@ async function generateLocalDiff(repoPath) {
         // git diff --no-index exits with code 1 when files differ, code 0 when identical
         let fileDiff;
         try {
-          fileDiff = execSync(`git diff --no-index --no-color --no-ext-diff -- /dev/null "${filePath}"`, {
+          fileDiff = execSync(`git diff --no-index --no-color --no-ext-diff${wFlag} -- /dev/null "${filePath}"`, {
             cwd: repoPath,
             encoding: 'utf8',
             stdio: ['pipe', 'pipe', 'pipe'],

package/src/routes/context-files.js

@@ -209,7 +209,7 @@ router.patch('/api/reviews/:reviewId/context-files/:id', validateReviewId, async
     const db = req.app.get('db');
     const contextFileRepo = new ContextFileRepository(db);
 
-    const updated = await contextFileRepo.updateRange(id, lineStart, lineEnd);
+    const updated = await contextFileRepo.updateRange(id, req.reviewId, lineStart, lineEnd);
 
     if (!updated) {
       return res.status(404).json({ error: 'Context file not found' });

package/src/routes/local.js

@@ -465,8 +465,24 @@ router.get('/api/local/:reviewId/diff', async (req, res) => {
       });
     }
 
+    // When ?w=1, regenerate the diff with whitespace changes hidden (transient view, not cached)
+    const hideWhitespace = req.query.w === '1';
+    let diffData;
+
+    if (hideWhitespace && review.local_path) {
+      try {
+        const wsResult = await generateLocalDiff(review.local_path, { hideWhitespace: true });
+        diffData = { diff: wsResult.diff, stats: wsResult.stats };
+      } catch (wsError) {
+        logger.warn(`Could not generate whitespace-filtered diff for review #${reviewId}: ${wsError.message}`);
+        // Fall through to cached diff below
+      }
+    }
+
     // Get diff from module-level storage, falling back to database
-    let diffData = getLocalReviewDiff(reviewId);
+    if (!diffData) {
+      diffData = getLocalReviewDiff(reviewId);
+    }
 
     if (!diffData) {
       // Try loading from database

package/src/routes/pr.js

@@ -18,7 +18,7 @@ const { query, queryOne, run, withTransaction, WorktreeRepository, ReviewReposit
 const { GitWorktreeManager } = require('../git/worktree');
 const { GitHubClient } = require('../github/client');
 const { getGeneratedFilePatterns } = require('../git/gitattributes');
-const { normalizeRepository } = require('../utils/paths');
+const { normalizeRepository, resolveRenamedFile, resolveRenamedFileOld } = require('../utils/paths');
 const { mergeInstructions } = require('../utils/instructions');
 const Analyzer = require('../ai/analyzer');
 const { v4: uuidv4 } = require('uuid');
@@ -652,15 +652,54 @@ router.get('/api/pr/:owner/:repo/:number/diff', async (req, res) => {
       });
     }
 
-    // Add generated flag to changed files based on .gitattributes
-    let changedFiles = prData.changed_files || [];
-
-    // Look up worktree path to read .gitattributes
+    // Look up worktree path (needed for .gitattributes and whitespace-filtered diffs)
     const db = req.app.get('db');
     const worktreeRepo = new WorktreeRepository(db);
     const worktreeRecord = await worktreeRepo.findByPR(prNumber, repository);
 
-    if (worktreeRecord && worktreeRecord.path) {
+    // When ?w=1, regenerate the diff from the worktree with whitespace changes hidden
+    const hideWhitespace = req.query.w === '1';
+    let diffContent = prData.diff || '';
+    let changedFiles = prData.changed_files || [];
+
+    if (hideWhitespace && worktreeRecord && worktreeRecord.path) {
+      try {
+        const worktreePath = worktreeRecord.path;
+        await fs.access(worktreePath);
+        const git = simpleGit(worktreePath);
+        const baseSha = prData.base_sha;
+        const headSha = prData.head_sha;
+
+        if (baseSha && headSha) {
+          // Regenerate diff with -w flag to ignore whitespace changes
+          diffContent = await git.diff([`${baseSha}...${headSha}`, '--unified=3', '-w']);
+
+          // Regenerate changed files stats with -w flag
+          const diffSummary = await git.diffSummary([`${baseSha}...${headSha}`, '-w']);
+          const gitattributes = await getGeneratedFilePatterns(worktreePath);
+          changedFiles = diffSummary.files.map(file => {
+            const resolvedFile = resolveRenamedFile(file.file);
+            const isRenamed = resolvedFile !== file.file;
+            const result = {
+              file: resolvedFile,
+              insertions: file.insertions,
+              deletions: file.deletions,
+              changes: file.changes,
+              generated: gitattributes.isGenerated(resolvedFile)
+            };
+            if (isRenamed) {
+              result.renamed = true;
+              result.renamedFrom = resolveRenamedFileOld(file.file);
+            }
+            return result;
+          });
+        }
+      } catch (wsError) {
+        logger.warn(`Could not generate whitespace-filtered diff for PR #${prNumber}: ${wsError.message}`);
+        // Fall back to cached diff (diffContent and changedFiles already set from prData)
+      }
+    } else if (worktreeRecord && worktreeRecord.path) {
+      // Add generated flag to changed files based on .gitattributes
       try {
         const gitattributes = await getGeneratedFilePatterns(worktreeRecord.path);
         changedFiles = changedFiles.map(file => ({
@@ -668,23 +707,33 @@ router.get('/api/pr/:owner/:repo/:number/diff', async (req, res) => {
           generated: gitattributes.isGenerated(file.file)
         }));
       } catch (error) {
-        console.warn('Could not load .gitattributes:', error.message);
+        logger.warn(`Could not load .gitattributes: ${error.message}`);
         // Continue without generated flags
       }
     }
 
+    // When hideWhitespace is active and diff was regenerated, compute
+    // aggregate stats from the regenerated changedFiles instead of using
+    // stale cached values from prData.
+    const additions = hideWhitespace
+      ? changedFiles.reduce((sum, f) => sum + (f.insertions || 0), 0)
+      : (prData.additions || 0);
+    const deletions = hideWhitespace
+      ? changedFiles.reduce((sum, f) => sum + (f.deletions || 0), 0)
+      : (prData.deletions || 0);
+
     res.json({
-      diff: prData.diff || '',
+      diff: diffContent,
       changed_files: changedFiles,
       stats: {
-        additions: prData.additions || 0,
-        deletions: prData.deletions || 0,
+        additions,
+        deletions,
         changed_files: changedFiles.length
       }
     });
 
   } catch (error) {
-    console.error('Error fetching PR diff:', error);
+    logger.error('Error fetching PR diff:', error);
     res.status(500).json({
       error: 'Internal server error while fetching diff data'
     });

package/src/utils/auto-context.js

@@ -67,7 +67,7 @@ async function ensureContextFileForComment(db, review, { file, line_start, line_
           newEnd = newStart + MAX_RANGE - 1;
         }
 
-        await contextFileRepo.updateRange(overlapping.id, newStart, newEnd);
+        await contextFileRepo.updateRange(overlapping.id, review.id, newStart, newEnd);
         return { created: false, expanded: true, contextFileId: overlapping.id };
       }