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

package/public/js/components/ChatPanel.js

@@ -1,4 +1,4 @@
-// SPDX-License-Identifier: GPL-3.0-or-later
+// Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0
 /**
  * ChatPanel - AI chat sidebar component
  * Provides a sliding chat panel for conversing with AI about the current review.
@@ -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

@@ -1,4 +1,4 @@
-// SPDX-License-Identifier: GPL-3.0-or-later
+// Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0
 /**
  * Generic Confirmation Dialog Component
  * Displays a confirmation dialog with customizable message and actions
@@ -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) {

package/public/js/components/CouncilProgressModal.js

@@ -1,4 +1,4 @@
-// SPDX-License-Identifier: GPL-3.0-or-later
+// Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0
 /**
  * Council AI Analysis Progress Modal Component
  *
@@ -806,6 +806,11 @@ class CouncilProgressModal {
       window.prManager.setButtonComplete();
     }
 
+    // Flash tab title
+    if (window.tabTitle) {
+      window.tabTitle.flashComplete();
+    }
+
     // Reload suggestions
     const manager = window.prManager || window.localManager;
     if (manager && typeof manager.loadAISuggestions === 'function') {
@@ -884,6 +889,11 @@ class CouncilProgressModal {
     if (window.prManager) {
       window.prManager.resetButton();
     }
+
+    // Flash tab title
+    if (window.tabTitle) {
+      window.tabTitle.flashFailed();
+    }
   }
 
   _handleCancellation(_status) {
@@ -924,6 +934,9 @@ class CouncilProgressModal {
     if (window.prManager) {
       window.prManager.resetButton();
     }
+
+    // No tab-title flash for cancellation — the user initiated it, so no notification needed.
+
     if (window.aiPanel?.setAnalysisState) {
       window.aiPanel.setAnalysisState('unknown');
     }