@in-the-loop-labs/pair-review 2.0.0 → 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.0",
+  "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.0",
+  "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.0",
+  "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;
@@ -11198,14 +11294,78 @@ body.resizing * {
   opacity: 0.6;
 }
 
-/* Highlight flash when navigating to a line from a chat file link */
-.chat-file-link--highlight {
-  animation: chat-file-link-flash 2s ease-out;
+/* Unified line highlight for navigating to lines from chat/context links.
+   Applied to <tr> elements; styles target <td> children since box-shadow
+   and background-color animations don't render on <tr> in most browsers. */
+.chat-line-highlight td {
+  animation: chat-line-highlight-bg 3.5s ease-out forwards !important;
+}
+
+.chat-line-highlight > td:first-child {
+  animation: chat-line-highlight-border 3.5s ease-out forwards !important;
+}
+
+@keyframes chat-line-highlight-bg {
+  0% {
+    background-color: rgba(227, 179, 65, 0.20);
+  }
+  57% {
+    background-color: rgba(227, 179, 65, 0.08);
+  }
+  100% {
+    background-color: transparent;
+  }
 }
 
-@keyframes chat-file-link-flash {
-  0% { background-color: rgba(227, 179, 65, 0.25); }
-  100% { background-color: transparent; }
+@keyframes chat-line-highlight-border {
+  0% {
+    box-shadow: inset 5px 0 0 #e3b341;
+    background-color: rgba(227, 179, 65, 0.20);
+  }
+  57% {
+    /* ~2s: border still solid, background fading */
+    box-shadow: inset 5px 0 0 #e3b341;
+    background-color: rgba(227, 179, 65, 0.08);
+  }
+  100% {
+    box-shadow: inset 5px 0 0 transparent;
+    background-color: transparent;
+  }
+}
+
+[data-theme="dark"] .chat-line-highlight td {
+  animation: chat-line-highlight-bg-dark 3.5s ease-out forwards !important;
+}
+
+[data-theme="dark"] .chat-line-highlight > td:first-child {
+  animation: chat-line-highlight-border-dark 3.5s ease-out forwards !important;
+}
+
+@keyframes chat-line-highlight-bg-dark {
+  0% {
+    background-color: rgba(227, 179, 65, 0.15);
+  }
+  57% {
+    background-color: rgba(227, 179, 65, 0.06);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+@keyframes chat-line-highlight-border-dark {
+  0% {
+    box-shadow: inset 5px 0 0 #e3b341;
+    background-color: rgba(227, 179, 65, 0.15);
+  }
+  57% {
+    box-shadow: inset 5px 0 0 #e3b341;
+    background-color: rgba(227, 179, 65, 0.06);
+  }
+  100% {
+    box-shadow: inset 5px 0 0 transparent;
+    background-color: transparent;
+  }
 }
 
 .chat-file-link--loading {
@@ -11227,28 +11387,6 @@ body.resizing * {
   to { transform: rotate(360deg); }
 }
 
-/* Gutter arrow for "already here" micro-feedback */
-.chat-gutter-arrow {
-  position: absolute;
-  left: -2px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #e3b341;
-  font-size: 20px;
-  font-weight: bold;
-  pointer-events: none;
-  transition: opacity 0.3s ease;
-  z-index: 2;
-}
-
-.chat-gutter-arrow--fade {
-  opacity: 0;
-}
-
-[data-theme="dark"] .chat-gutter-arrow {
-  color: #e3b341;
-}
-
 /* Error bubble */
 .chat-panel__error-bubble {
   display: flex;
@@ -11362,6 +11500,7 @@ body.resizing * {
 
 /* Chat Panel Context Card */
 .chat-panel__context-card {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 6px;
@@ -11391,6 +11530,7 @@ body.resizing * {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  min-width: 0;
   color: var(--color-text-secondary);
 }
 
@@ -11405,9 +11545,12 @@ body.resizing * {
   display: none;
   align-items: center;
   justify-content: center;
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
   width: 16px;
   height: 16px;
-  margin-left: auto;
   padding: 0;
   border: none;
   border-radius: 50%;
@@ -11416,7 +11559,6 @@ body.resizing * {
   font-size: 12px;
   line-height: 1;
   cursor: pointer;
-  flex-shrink: 0;
   transition: background 0.15s ease, color 0.15s ease;
 }
 
@@ -11938,20 +12080,6 @@ body.resizing * {
   color: var(--color-text-secondary);
 }
 
-/* Highlight flash animation for scroll-to-line targeting */
-.highlight-flash {
-  animation: highlightFlash 1.5s ease-out;
-}
-
-@keyframes highlightFlash {
-  0% {
-    background-color: var(--color-selection, #fff8c5);
-  }
-  100% {
-    background-color: transparent;
-  }
-}
-
 /* Dark theme overrides for context files */
 [data-theme="dark"] .d2h-file-wrapper.context-file {
   border-left-color: var(--color-accent-primary, #58a6ff);

package/public/js/components/ChatPanel.js

@@ -2135,6 +2135,7 @@ class ChatPanel {
     const bubble = streamingMsg.querySelector('.chat-panel__bubble');
     if (bubble) {
       bubble.innerHTML = this.renderMarkdown(text) + '<span class="chat-panel__cursor"></span>';
+      this._linkifyFileReferences(bubble);
     }
     this.scrollToBottom();
   }
@@ -2530,6 +2531,7 @@ class ChatPanel {
       if (contextEl) {
         // Context file — find the right chunk by line number or use first chunk
         let contextFileId = contextEl.dataset?.contextId; // legacy: on wrapper itself
+        let lineFoundInChunk = !!contextFileId; // legacy mode assumes line is present
         if (!contextFileId && lineStart) {
           // Merged wrapper: find chunk tbody containing this line
           const chunks = [...contextEl.querySelectorAll('tbody.context-chunk[data-context-id]')];
@@ -2537,27 +2539,32 @@ class ChatPanel {
             const row = chunk.querySelector(`tr[data-line-number="${lineStart}"]`);
             if (row) {
               contextFileId = chunk.dataset.contextId;
+              lineFoundInChunk = true;
               break;
             }
           }
         }
-        if (!contextFileId) {
-          // Fallback: use first chunk's context ID
-          const firstChunk = contextEl.querySelector('tbody.context-chunk[data-context-id]');
-          if (firstChunk) contextFileId = firstChunk.dataset.contextId;
-        }
-        if (window.prManager?.scrollToContextFile) {
-          window.prManager.scrollToContextFile(file, lineStart, contextFileId);
+
+        if (lineFoundInChunk || !lineStart) {
+          if (!contextFileId) {
+            const firstChunk = contextEl.querySelector('tbody.context-chunk[data-context-id]');
+            if (firstChunk) contextFileId = firstChunk.dataset.contextId;
+          }
+          if (window.prManager?.scrollToContextFile) {
+            window.prManager.scrollToContextFile(file, lineStart, contextFileId);
+          }
+          return;
         }
+        // Line not found in any existing chunk — fall through to add new range
       } else {
         // Diff file
         if (lineStart) {
-          this._scrollToLine(file, lineStart);
+          await this._scrollToLine(file, lineStart, lineEnd);
         } else if (window.prManager?.scrollToFile) {
           window.prManager.scrollToFile(file);
         }
+        return;
       }
-      return;
     }
 
     // File not in DOM — try to add as context file
@@ -2574,7 +2581,7 @@ class ChatPanel {
 
       if (result.type === 'diff') {
         if (lineStart) {
-          this._scrollToLine(file, lineStart);
+          await this._scrollToLine(file, lineStart, lineEnd);
         } else if (window.prManager?.scrollToFile) {
           window.prManager.scrollToFile(file);
         }
@@ -2594,13 +2601,17 @@ class ChatPanel {
   }
 
   /**
-   * Scroll to a specific line within a file wrapper, with micro-feedback
-   * when the target is already visible.
+   * Scroll to a specific line within a file wrapper, applying a bold
+   * left-border + background highlight that fades over ~3.5s.
+   * Supports line ranges: if lineEnd is provided, all rows from
+   * lineStart to lineEnd are highlighted. If the line is in a collapsed
+   * diff chunk, expands the chunk first via ensureLinesVisible().
    * @param {string} file - File path
-   * @param {number} lineStart - Target line number
+   * @param {number} lineStart - Target line number (start of range)
+   * @param {number|null} [lineEnd] - End of target line range (used for expansion)
    * @param {HTMLElement} [fileWrapper] - Pre-resolved file wrapper element
    */
-  _scrollToLine(file, lineStart, fileWrapper) {
+  async _scrollToLine(file, lineStart, lineEnd, fileWrapper) {
     if (!fileWrapper) {
       const escaped = CSS.escape(file);
       fileWrapper = document.querySelector(`[data-file-name="${escaped}"]`) ||
@@ -2608,68 +2619,60 @@ class ChatPanel {
     }
     if (!fileWrapper) return;
 
-    // Find the target row by line number
-    const lineNums = fileWrapper.querySelectorAll('.line-num2');
-    let targetRow = null;
-    for (const ln of lineNums) {
-      if (ln.textContent.trim() === String(lineStart)) {
-        targetRow = ln.closest('tr');
-        break;
-      }
+    // Collect all target rows (single line or range)
+    const end = lineEnd || lineStart;
+    let targetRows = this._findLineRows(fileWrapper, lineStart, end);
+
+    // If not found, try expanding the collapsed diff context
+    if (targetRows.length === 0 && window.prManager?.ensureLinesVisible) {
+      await window.prManager.ensureLinesVisible([
+        { file, line_start: lineStart, line_end: end, side: 'RIGHT' }
+      ]);
+      targetRows = this._findLineRows(fileWrapper, lineStart, end);
     }
-    if (!targetRow) return;
+    if (targetRows.length === 0) return;
+
+    const primaryRow = targetRows[0];
 
-    // Check if the target row is already visible in the viewport
-    const rect = targetRow.getBoundingClientRect();
+    // Check if the primary target row is already visible in the viewport
+    const rect = primaryRow.getBoundingClientRect();
     const isVisible = rect.top >= 0 && rect.bottom <= window.innerHeight;
 
-    if (isVisible) {
-      // Already visible — provide micro-feedback instead of scrolling
-      this._showLineFeedback(targetRow, lineStart);
-    } else {
-      // Scroll to the row, then apply highlight
-      targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      targetRow.classList.add('chat-file-link--highlight');
-      setTimeout(() => targetRow.classList.remove('chat-file-link--highlight'), 2000);
-    }
-  }
-
-  /**
-   * Show micro-feedback when a target line is already visible:
-   * 1. A brief hop animation (scroll nudge)
-   * 2. A temporary gutter arrow indicator
-   * @param {HTMLElement} row - The target table row
-   * @param {number} lineNum - The line number
-   */
-  _showLineFeedback(row, lineNum) {
-    // Highlight the row
-    row.classList.add('chat-file-link--highlight');
-    setTimeout(() => row.classList.remove('chat-file-link--highlight'), 2000);
-
-    // Inject a temporary gutter arrow
-    const lineNumCell = row.querySelector('.d2h-code-linenumber');
-    if (lineNumCell) {
-      const arrow = document.createElement('span');
-      arrow.className = 'chat-gutter-arrow';
-      arrow.textContent = '\u2192'; // →
-      lineNumCell.appendChild(arrow);
-      // Fade out and remove after 1.5s
-      setTimeout(() => {
-        arrow.classList.add('chat-gutter-arrow--fade');
-        arrow.addEventListener('transitionend', () => arrow.remove(), { once: true });
-        // Safety cleanup in case transitionend doesn't fire
-        setTimeout(() => arrow.remove(), 500);
-      }, 1500);
-    }
-
-    // Hop animation — small vertical nudge
-    const scrollContainer = document.getElementById('diff-container') ||
-      row.closest('.d2h-wrapper') || document.documentElement;
-    const currentScroll = scrollContainer.scrollTop;
-    scrollContainer.scrollTo({ top: currentScroll - 30, behavior: 'smooth' });
-    setTimeout(() => {
-      scrollContainer.scrollTo({ top: currentScroll, behavior: 'smooth' });
-    }, 150);
+    if (!isVisible) {
+      primaryRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+
+    // Apply the highlight to all target rows
+    for (const row of targetRows) {
+      // Remove any existing highlight first (in case of rapid re-clicks)
+      row.classList.remove('chat-line-highlight');
+      // Force reflow so re-adding the class restarts the animation
+      void row.offsetWidth;
+      row.classList.add('chat-line-highlight');
+      row.addEventListener('animationend', () => {
+        row.classList.remove('chat-line-highlight');
+      }, { once: true });
+    }
+  }
+
+  /**
+   * Find all table rows matching a line range within a file wrapper.
+   * @param {HTMLElement} fileWrapper - The file wrapper element
+   * @param {number} lineStart - Start line number
+   * @param {number} lineEnd - End line number (inclusive)
+   * @returns {HTMLElement[]} Matching rows
+   */
+  _findLineRows(fileWrapper, lineStart, lineEnd) {
+    const rows = [];
+    const lineNums = fileWrapper.querySelectorAll('.line-num2');
+    for (const ln of lineNums) {
+      const num = parseInt(ln.textContent.trim(), 10);
+      if (!isNaN(num) && num >= lineStart && num <= lineEnd) {
+        const row = ln.closest('tr');
+        if (row) rows.push(row);
+      }
+    }
+    return rows;
   }
 
   /**