@in-the-loop-labs/pair-review 2.6.3 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@in-the-loop-labs/pair-review",
-  "version": "2.6.3",
+  "version": "2.7.0",
   "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.6.3",
+  "version": "2.7.0",
   "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.6.3",
+  "version": "2.7.0",
   "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

@@ -2696,6 +2696,36 @@ tr.newly-expanded .d2h-code-line-ctn {
   justify-content: center;
 }
 
+/* When a secondary button is visible (3 buttons), widen and stack vertically.
+   column-reverse puts Confirm (primary) on top, Cancel on bottom. */
+.confirm-dialog-container.has-secondary {
+  min-width: 440px;
+}
+
+.confirm-dialog-container.has-secondary .modal-footer {
+  flex-direction: column-reverse;
+  align-items: stretch;
+}
+
+.confirm-dialog-container.has-secondary .modal-footer .btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* Button description subtitles */
+.modal-footer .btn .btn-label {
+  display: block;
+}
+
+.modal-footer .btn .btn-desc {
+  display: block;
+  font-size: 12px;
+  font-weight: normal;
+  opacity: 0.7;
+  margin-top: 2px;
+}
+
 /* Dialogs spawned from within other modals need higher z-index */
 #text-input-dialog,
 #confirm-dialog {
@@ -7244,6 +7274,7 @@ body.resizing * {
 .diff-options-popover {
   position: fixed;
   z-index: 1100;
+  min-width: 320px;
   background: var(--color-bg-primary);
   border: 1px solid var(--color-border-primary);
   border-radius: 8px;
@@ -7315,6 +7346,150 @@ body.resizing * {
   background: rgba(88, 166, 255, 0.15);
 }
 
+/* --------------------------------------------------------------------------
+   Comment Minimize Mode
+   -------------------------------------------------------------------------- */
+
+/* When minimize mode is active, hide all inline comment and suggestion rows */
+.comments-minimized .user-comment-row,
+.comments-minimized .ai-suggestion-row {
+  display: none;
+}
+
+/* Per-line expansion override — clicking an indicator reveals that line's rows */
+.comments-minimized .user-comment-row.comment-expanded,
+.comments-minimized .ai-suggestion-row.comment-expanded {
+  display: table-row;
+}
+
+/* Indicator button on the right edge of diff code cells */
+.comment-indicator {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 6px;
+  border: 1px solid var(--color-border-primary);
+  border-radius: 12px;
+  background: var(--color-bg-secondary);
+  cursor: pointer;
+  font-size: 11px;
+  line-height: 1;
+  color: var(--color-text-secondary);
+  opacity: 1;
+  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+  z-index: 2; /* must be below sticky file headers (z-index: 4) */
+}
+
+.comment-indicator:hover {
+  background: var(--color-bg-tertiary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.comment-indicator.expanded {
+  border-width: 2px;
+  padding: 1px 5px; /* compensate for thicker border */
+}
+
+.comment-indicator .indicator-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.comment-indicator .indicator-icon svg {
+  display: block;
+}
+
+.comment-indicator .indicator-user {
+  color: var(--comment-primary, #8250df);
+}
+
+.comment-indicator .indicator-adopted {
+  color: var(--comment-primary, #8250df);
+}
+
+.comment-indicator:has(.indicator-user),
+.comment-indicator:has(.indicator-adopted) {
+  border-color: var(--comment-primary, #8250df);
+  background: rgba(130, 80, 223, 0.06);
+}
+
+.comment-indicator:has(.indicator-user):hover,
+.comment-indicator:has(.indicator-adopted):hover {
+  background: rgba(130, 80, 223, 0.12);
+  box-shadow: 0 1px 3px rgba(130, 80, 223, 0.15);
+}
+
+.comment-indicator .indicator-ai {
+  color: var(--ai-accent, #d97706);
+}
+
+.comment-indicator:has(.indicator-ai) {
+  border-color: var(--ai-accent, #d97706);
+  background: rgba(217, 119, 6, 0.06);
+}
+
+.comment-indicator:has(.indicator-ai):hover {
+  background: rgba(217, 119, 6, 0.12);
+  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.15);
+}
+
+.comment-indicator .indicator-count {
+  font-weight: 600;
+  font-size: 10px;
+  min-width: 14px;
+  text-align: center;
+}
+
+/* Dark theme overrides */
+[data-theme="dark"] .comment-indicator {
+  background: var(--color-bg-tertiary);
+  border-color: var(--color-border-secondary);
+}
+
+[data-theme="dark"] .comment-indicator:hover {
+  background: var(--color-bg-primary);
+}
+
+[data-theme="dark"] .comment-indicator:has(.indicator-user),
+[data-theme="dark"] .comment-indicator:has(.indicator-adopted) {
+  border-color: var(--comment-primary, #a371f7);
+  background: rgba(163, 113, 247, 0.1);
+}
+
+[data-theme="dark"] .comment-indicator .indicator-user,
+[data-theme="dark"] .comment-indicator .indicator-adopted {
+  color: var(--comment-primary, #a371f7);
+}
+
+[data-theme="dark"] .comment-indicator:has(.indicator-user):hover,
+[data-theme="dark"] .comment-indicator:has(.indicator-adopted):hover {
+  background: rgba(163, 113, 247, 0.18);
+  box-shadow: 0 1px 3px rgba(163, 113, 247, 0.25);
+}
+
+[data-theme="dark"] .comment-indicator:has(.indicator-ai) {
+  border-color: var(--color-accent-ai, #fbbf24);
+  background: rgba(251, 191, 36, 0.1);
+}
+
+[data-theme="dark"] .comment-indicator .indicator-ai {
+  color: var(--color-accent-ai, #fbbf24);
+}
+
+[data-theme="dark"] .comment-indicator:has(.indicator-ai):hover {
+  background: rgba(251, 191, 36, 0.18);
+  box-shadow: 0 1px 3px rgba(251, 191, 36, 0.25);
+}
+
+[data-theme="dark"] .comment-indicator.expanded {
+  border-width: 2px;
+  padding: 1px 5px;
+}
+
 .ai-panel-header {
   display: flex;
   align-items: center;
@@ -11832,6 +12007,25 @@ body.resizing * {
   30% { opacity: 1; transform: scale(1); }
 }
 
+/* Loop logo spinner (easter egg: chat_spinner = "loop") */
+.chat-panel__loop-spinner {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 0;
+}
+
+.chat-panel__loop-spinner svg {
+  width: 20px;
+  height: 20px;
+  color: var(--color-accent-ai, #8b5cf6);
+  animation: loop-spin 1.4s linear infinite;
+}
+
+@keyframes loop-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 /* Blinking cursor during streaming */
 .chat-panel__cursor {
   display: inline-block;

package/public/index.html

@@ -61,6 +61,7 @@
 
             --color-accent-primary: #0969da;
             --color-accent-hover: #0860ca;
+            --color-accent-subtle: rgba(9, 105, 218, 0.04);
             --color-accent-emphasis: #238636;
             --color-accent-emphasis-hover: #2ea043;
 
@@ -94,6 +95,7 @@
 
             --color-accent-primary: #58a6ff;
             --color-accent-hover: #1f6feb;
+            --color-accent-subtle: rgba(56, 139, 253, 0.06);
             --color-accent-emphasis: #238636;
             --color-accent-emphasis-hover: #2ea043;
 
@@ -687,7 +689,7 @@
             margin-right: 4px;
         }
 
-        .btn-delete-worktree,
+        .btn-delete-review,
         .btn-repo-settings {
             display: inline-flex;
             align-items: center;
@@ -703,13 +705,13 @@
             transition: all var(--transition-fast);
         }
 
-        .btn-delete-worktree:hover {
+        .btn-delete-review:hover {
             background-color: rgba(208, 36, 47, 0.08);
             border-color: rgba(208, 36, 47, 0.3);
             color: var(--color-danger);
         }
 
-        [data-theme="dark"] .btn-delete-worktree:hover {
+        [data-theme="dark"] .btn-delete-review:hover {
             background-color: rgba(248, 81, 73, 0.1);
             border-color: rgba(248, 81, 73, 0.3);
         }
@@ -1053,6 +1055,168 @@
             color: var(--color-text-primary);
         }
 
+        /* ─── Selection Mode ─────────────────────────────────────── */
+
+        /* Select toggle button — matches .btn-refresh sizing */
+        .btn-select-toggle {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 4px 12px;
+            font-family: var(--font-sans);
+            font-size: 12px;
+            font-weight: 500;
+            color: var(--color-text-secondary);
+            background: transparent;
+            border: 1px solid var(--color-border-primary);
+            border-radius: var(--radius-md);
+            cursor: pointer;
+            transition: all var(--transition-fast);
+        }
+
+        .btn-select-toggle:hover {
+            background: var(--color-bg-secondary);
+            color: var(--color-text-primary);
+        }
+
+        .btn-select-toggle.active {
+            background: var(--color-accent-subtle);
+            border-color: var(--color-accent-primary);
+            color: var(--color-accent-primary);
+        }
+
+        /* Checkbox column */
+        .col-select {
+            width: 32px;
+            text-align: center;
+            padding: 6px 8px !important;
+        }
+
+        .col-select input[type="checkbox"] {
+            width: 15px;
+            height: 15px;
+            cursor: pointer;
+            accent-color: var(--color-accent-primary);
+            vertical-align: middle;
+        }
+
+        /* Selected row highlight */
+        .recent-reviews-table tbody tr.bulk-selected td {
+            background-color: var(--color-accent-subtle);
+        }
+
+        /* Hide per-row delete buttons in selection mode */
+        .selection-mode .btn-delete-review,
+        .selection-mode .btn-delete-session {
+            display: none;
+        }
+
+        /* Inline bulk action controls — appear next to Select button */
+        .bulk-inline-actions {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .bulk-action-count {
+            font-size: 12px;
+            font-weight: 500;
+            color: var(--color-text-secondary);
+        }
+
+        .bulk-action-buttons {
+            display: inline-flex;
+            gap: 6px;
+        }
+
+        .btn-bulk-delete {
+            padding: 4px 12px;
+            font-size: 12px;
+            font-weight: 500;
+            background: var(--color-danger);
+            color: #ffffff;
+            border: none;
+            border-radius: var(--radius-sm);
+            cursor: pointer;
+        }
+
+        .btn-bulk-delete:hover:not(:disabled) {
+            background: var(--color-danger-hover);
+        }
+
+        .btn-bulk-delete:disabled {
+            opacity: 0.4;
+            cursor: default;
+        }
+
+        .btn-bulk-open,
+        .btn-bulk-analyze {
+            padding: 4px 12px;
+            font-size: 12px;
+            font-weight: 500;
+            background: var(--color-accent-primary);
+            color: #ffffff;
+            border: none;
+            border-radius: var(--radius-sm);
+            cursor: pointer;
+        }
+
+        .btn-bulk-open:hover:not(:disabled),
+        .btn-bulk-analyze:hover:not(:disabled) {
+            opacity: 0.9;
+        }
+
+        .btn-bulk-open:disabled,
+        .btn-bulk-analyze:disabled {
+            opacity: 0.4;
+            cursor: default;
+        }
+
+        .btn-bulk-cancel {
+            padding: 4px 12px;
+            font-size: 12px;
+            font-weight: 500;
+            background: transparent;
+            color: var(--color-text-secondary);
+            border: 1px solid var(--color-border-primary);
+            border-radius: var(--radius-sm);
+            cursor: pointer;
+        }
+
+        .btn-bulk-cancel:hover {
+            background: var(--color-bg-secondary);
+            color: var(--color-text-primary);
+        }
+
+        /* Confirmation state — hide normal action buttons, show confirm buttons */
+        .bulk-inline-actions .bulk-confirm-buttons {
+            display: none;
+            gap: 6px;
+        }
+
+        .bulk-inline-actions.confirming .bulk-action-buttons {
+            display: none;
+        }
+
+        .bulk-inline-actions.confirming .bulk-confirm-buttons {
+            display: inline-flex;
+        }
+
+        .bulk-inline-actions.confirming > .btn-bulk-cancel {
+            display: none;
+        }
+
+        /* Select mode header row (between form and table, for PR/Local tabs) */
+        .select-mode-header {
+            display: none;
+            justify-content: flex-end;
+            padding: 0 0 8px 0;
+        }
+
+        .select-mode-header.visible {
+            display: flex;
+        }
+
         /* Start review section spacing inside unified tabs */
         .tab-pane .start-review-section {
             max-width: 100%;
@@ -1266,6 +1430,7 @@
         </div>
     </div>
 
+    <script src="/js/components/Toast.js"></script>
     <script src="/js/index.js"></script>
 </body>
 </html>

package/public/js/components/AIPanel.js

@@ -1000,7 +1000,14 @@ class AIPanel {
             }
 
             if (targetSuggestion) {
-                targetSuggestion.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                const minimizer = window.prManager?.commentMinimizer;
+                if (minimizer?.active) {
+                    // Comments are minimized — scroll to the parent diff line instead
+                    const diffRow = minimizer.findDiffRowFor(targetSuggestion);
+                    (diffRow || targetSuggestion).scrollIntoView({ behavior: 'smooth', block: 'center' });
+                } else {
+                    targetSuggestion.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
                 targetSuggestion.classList.add('current-suggestion');
                 setTimeout(() => targetSuggestion.classList.remove('current-suggestion'), 2000);
             }
@@ -1061,7 +1068,14 @@ class AIPanel {
             }
 
             if (targetElement) {
-                targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                const minimizer = window.prManager?.commentMinimizer;
+                if (minimizer?.active && !isFileLevel) {
+                    // Comments are minimized — scroll to the parent diff line instead
+                    const diffRow = minimizer.findDiffRowFor(targetElement);
+                    (diffRow || targetElement).scrollIntoView({ behavior: 'smooth', block: 'center' });
+                } else {
+                    targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
                 // Add highlight effect
                 const commentDiv = isFileLevel ? targetElement : targetElement.querySelector('.user-comment');
                 if (commentDiv) {

package/public/js/components/ChatPanel.js

@@ -10,6 +10,13 @@ const DISMISS_ICON = `<svg viewBox="0 0 16 16" fill="currentColor" width="12" he
 /** Pixel threshold for considering the user "near the bottom" of the messages container. */
 const NEAR_BOTTOM_THRESHOLD = 80;
 
+const LOOP_SPINNER_HTML = `<span class="chat-panel__loop-spinner"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="20" height="20"><path transform="rotate(-50 12 12)" d="M18.178 8c5.096 0 5.096 8 0 8-5.095 0-7.133-8-12.356-8-5.096 0-5.096 8 0 8 5.223 0 7.26-8 12.356-8z"/></svg></span>`;
+const DOTS_SPINNER_HTML = '<span class="chat-panel__typing-indicator"><span></span><span></span><span></span></span>';
+
+function getChatSpinnerHTML() {
+  return window.__pairReview?.chatSpinner === 'loop' ? LOOP_SPINNER_HTML : DOTS_SPINNER_HTML;
+}
+
 class ChatPanel {
   constructor(containerId) {
     this.containerId = containerId;
@@ -24,6 +31,7 @@ class ChatPanel {
     this._streamingContent = '';
     this._pendingContext = [];
     this._pendingContextData = [];
+    this._pendingDiffStateNotifications = [];
     this._contextSource = null;   // 'suggestion' or 'user' — set when opened with context
     this._contextItemId = null;   // suggestion ID or comment ID from context
     this._contextLineMeta = null;  // { file, line_start, line_end } — set when opened with line context
@@ -641,6 +649,7 @@ class ChatPanel {
     this._streamingContent = '';
     this._pendingContext = [];
     this._pendingContextData = [];
+    this._pendingDiffStateNotifications = [];
     this._contextSource = null;
     this._contextItemId = null;
     this._contextLineMeta = null;
@@ -1003,6 +1012,7 @@ class ChatPanel {
     this._streamingContent = '';
     this._pendingContext = [];
     this._pendingContextData = [];
+    this._pendingDiffStateNotifications = [];
     this._contextSource = null;
     this._contextItemId = null;
     this._contextLineMeta = null;
@@ -1233,10 +1243,22 @@ class ChatPanel {
 
     // Build the API payload — may include pending context from "Ask about this"
     const payload = { content };
+
+    // Snapshot diff-state queue for error recovery (invisible to user, no UI cards)
+    const savedDiffState = this._pendingDiffStateNotifications.slice();
+    let diffStatePrefix = '';
+    if (this._pendingDiffStateNotifications.length > 0) {
+      diffStatePrefix = '[Diff State Update]\n' + this._pendingDiffStateNotifications.join('\n');
+      this._pendingDiffStateNotifications = [];
+    }
+
     const savedContext = this._pendingContext;
     const savedContextData = this._pendingContextData;
     if (this._pendingContext.length > 0) {
-      payload.context = this._pendingContext.join('\n\n');
+      const userContext = this._pendingContext.join('\n\n');
+      payload.context = diffStatePrefix
+        ? diffStatePrefix + '\n\n' + userContext
+        : userContext;
       payload.contextData = this._pendingContextData;
       this._pendingContext = [];
       this._pendingContextData = [];
@@ -1248,6 +1270,8 @@ class ChatPanel {
         if (btn) btn.remove();
         delete card.dataset.contextIndex;
       });
+    } else if (diffStatePrefix) {
+      payload.context = diffStatePrefix;
     }
 
     // Lock analysis context card (not indexed, handled separately from pending context)
@@ -1311,6 +1335,7 @@ class ChatPanel {
       // Restore pending context so it's not lost
       this._pendingContext = savedContext;
       this._pendingContextData = savedContextData;
+      this._pendingDiffStateNotifications = [...savedDiffState, ...this._pendingDiffStateNotifications];
       // Restore removability on context cards that were locked before the failed send
       this._restoreRemovableCards();
       console.error('[ChatPanel] Error sending message:', error);
@@ -1319,6 +1344,16 @@ class ChatPanel {
     }
   }
 
+  /**
+   * Queue an invisible diff-state notification for the chat agent.
+   * Unlike _pendingContext, these do NOT render UI cards and survive panel close.
+   * Drained into the context parameter on the next sendMessage() call.
+   * @param {string} message - Description of the diff state change
+   */
+  queueDiffStateNotification(message) {
+    this._pendingDiffStateNotifications.push(message);
+  }
+
   /**
    * Store pending context and render a compact context card in the UI.
    * Called when the user clicks "Ask about this" on a suggestion.
@@ -2409,7 +2444,7 @@ class ChatPanel {
 
     const bubble = document.createElement('div');
     bubble.className = 'chat-panel__bubble';
-    bubble.innerHTML = '<span class="chat-panel__typing-indicator"><span></span><span></span><span></span></span>';
+    bubble.innerHTML = getChatSpinnerHTML();
 
     msgEl.appendChild(bubble);
     this.messagesEl.appendChild(msgEl);
@@ -2641,10 +2676,10 @@ class ChatPanel {
     // Don't add duplicate
     if (streamingMsg.querySelector('.chat-panel__thinking')) return;
 
-    // Don't add if the bubble still has its initial typing indicator (no content yet).
-    // The bubble's own dots are sufficient — adding a second set would show two pulsing indicators.
+    // Don't add if the bubble still has its initial spinner (no content yet).
+    // The bubble's own indicator is sufficient — adding a second would show two.
     const bubble = streamingMsg.querySelector('.chat-panel__bubble');
-    if (bubble && bubble.querySelector('.chat-panel__typing-indicator')) return;
+    if (bubble && (bubble.querySelector('.chat-panel__typing-indicator') || bubble.querySelector('.chat-panel__loop-spinner'))) return;
 
     // Remove the cursor — the thinking indicator replaces it as the "working" signal.
     // When new text arrives, updateStreamingMessage() will re-add the cursor naturally.
@@ -2653,7 +2688,7 @@ class ChatPanel {
 
     const indicator = document.createElement('div');
     indicator.className = 'chat-panel__thinking';
-    indicator.innerHTML = '<span class="chat-panel__typing-indicator"><span></span><span></span><span></span></span>';
+    indicator.innerHTML = getChatSpinnerHTML();
     streamingMsg.appendChild(indicator);
     this.scrollToBottom();
   }

package/public/js/components/ConfirmDialog.js

@@ -133,10 +133,20 @@ class ConfirmDialog {
         messageElement.textContent = options.message || 'Are you sure?';
       }
 
+      // Helper: set button label + optional description subtitle
+      const setBtnContent = (btn, label, description) => {
+        if (!btn) return;
+        if (description) {
+          btn.innerHTML = `<span class="btn-label">${label}</span><span class="btn-desc">${description}</span>`;
+        } else {
+          btn.textContent = label;
+        }
+      };
+
       // Set confirm button text and style
       const confirmBtn = this.modal.querySelector('#confirm-dialog-btn');
       if (confirmBtn) {
-        confirmBtn.textContent = options.confirmText || 'Confirm';
+        setBtnContent(confirmBtn, options.confirmText || 'Confirm', options.confirmDesc);
         // Remove previous style classes and add new one
         confirmBtn.classList.remove('btn-primary', 'btn-secondary', 'btn-danger', 'btn-warning');
         const confirmClass = options.confirmClass || 'btn-danger';
@@ -145,19 +155,28 @@ class ConfirmDialog {
 
       // Set secondary button (optional 3rd button)
       const secondaryBtn = this.modal.querySelector('#confirm-dialog-secondary-btn');
+      const container = this.modal.querySelector('.confirm-dialog-container');
       if (secondaryBtn) {
         if (options.secondaryText) {
-          secondaryBtn.textContent = options.secondaryText;
+          setBtnContent(secondaryBtn, options.secondaryText, options.secondaryDesc);
           secondaryBtn.style.display = '';
           // Remove previous style classes and add new one
           secondaryBtn.classList.remove('btn-primary', 'btn-secondary', 'btn-danger', 'btn-warning');
           const secondaryClass = options.secondaryClass || 'btn-secondary';
           secondaryBtn.classList.add(secondaryClass);
+          if (container) container.classList.add('has-secondary');
         } else {
           secondaryBtn.style.display = 'none';
+          if (container) container.classList.remove('has-secondary');
         }
       }
 
+      // Set cancel button text (optional)
+      const cancelBtn = this.modal.querySelector('.modal-footer [data-action="cancel"]');
+      if (cancelBtn) {
+        setBtnContent(cancelBtn, options.cancelText || 'Cancel', options.cancelDesc);
+      }
+
       // Store callbacks with promise resolution
       this.onConfirm = () => {
         if (options.onConfirm) {