@in-the-loop-labs/pair-review 3.1.3 → 3.2.0

package/public/js/components/AIPanel.js

@@ -807,8 +807,9 @@ class AIPanel {
                     const finding = this.findings.find(f => f.id === findingId);
                     if (finding) {
                         suggestionContext = {
+                            suggestionId: findingId ? String(findingId) : null,
                             title: finding.title || title,
-                            body: finding.body || '',
+                            body: finding.formattedBody || finding.body || '',
                             type: finding.type || '',
                             file: finding.file || file,
                             line_start: finding.line_start || null,
@@ -1002,6 +1003,8 @@ class AIPanel {
             if (targetSuggestion) {
                 const minimizer = window.prManager?.commentMinimizer;
                 if (minimizer?.active) {
+                    // Expand file-level comments so the target becomes visible
+                    minimizer.expandForElement(targetSuggestion);
                     // Comments are minimized — scroll to the parent diff line instead
                     const diffRow = minimizer.findDiffRowFor(targetSuggestion);
                     (diffRow || targetSuggestion).scrollIntoView({ behavior: 'smooth', block: 'center' });
@@ -1069,9 +1072,9 @@ class AIPanel {
 
             if (targetElement) {
                 const minimizer = window.prManager?.commentMinimizer;
-                if (minimizer?.active && !isFileLevel) {
-                    // Comments are minimized — scroll to the parent diff line instead
-                    const diffRow = minimizer.findDiffRowFor(targetElement);
+                if (minimizer?.active) {
+                    minimizer.expandForElement(targetElement);
+                    const diffRow = isFileLevel ? null : minimizer.findDiffRowFor(targetElement);
                     (diffRow || targetElement).scrollIntoView({ behavior: 'smooth', block: 'center' });
                 } else {
                     targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });

package/public/js/components/ChatPanel.js

@@ -32,6 +32,7 @@ class ChatPanel {
     this._pendingContext = [];
     this._pendingContextData = [];
     this._pendingDiffStateNotifications = [];
+    this._pendingUserActionHints = [];
     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
@@ -667,6 +668,7 @@ class ChatPanel {
     this._pendingContext = [];
     this._pendingContextData = [];
     this._pendingDiffStateNotifications = [];
+    this._pendingUserActionHints = [];
     this._contextSource = null;
     this._contextItemId = null;
     this._contextLineMeta = null;
@@ -1030,6 +1032,7 @@ class ChatPanel {
     this._pendingContext = [];
     this._pendingContextData = [];
     this._pendingDiffStateNotifications = [];
+    this._pendingUserActionHints = [];
     this._contextSource = null;
     this._contextItemId = null;
     this._contextLineMeta = null;
@@ -1269,12 +1272,28 @@ class ChatPanel {
       this._pendingDiffStateNotifications = [];
     }
 
+    // Snapshot user-action-hints queue for error recovery (invisible to user, no UI cards)
+    const savedUserActionHints = this._pendingUserActionHints.slice();
+    let userActionPrefix = '';
+    if (this._pendingUserActionHints.length > 0) {
+      userActionPrefix = '[User Action Hints]\n' + this._pendingUserActionHints.join('\n');
+      this._pendingUserActionHints = [];
+    }
+
+    // Combine invisible prefixes (diff state + user action hints)
+    let invisiblePrefix = '';
+    if (diffStatePrefix && userActionPrefix) {
+      invisiblePrefix = diffStatePrefix + '\n\n' + userActionPrefix;
+    } else {
+      invisiblePrefix = diffStatePrefix || userActionPrefix;
+    }
+
     const savedContext = this._pendingContext;
     const savedContextData = this._pendingContextData;
     if (this._pendingContext.length > 0) {
       const userContext = this._pendingContext.join('\n\n');
-      payload.context = diffStatePrefix
-        ? diffStatePrefix + '\n\n' + userContext
+      payload.context = invisiblePrefix
+        ? invisiblePrefix + '\n\n' + userContext
         : userContext;
       payload.contextData = this._pendingContextData;
       this._pendingContext = [];
@@ -1287,8 +1306,8 @@ class ChatPanel {
         if (btn) btn.remove();
         delete card.dataset.contextIndex;
       });
-    } else if (diffStatePrefix) {
-      payload.context = diffStatePrefix;
+    } else if (invisiblePrefix) {
+      payload.context = invisiblePrefix;
     }
 
     // Lock analysis context card (not indexed, handled separately from pending context)
@@ -1353,6 +1372,7 @@ class ChatPanel {
       this._pendingContext = savedContext;
       this._pendingContextData = savedContextData;
       this._pendingDiffStateNotifications = [...savedDiffState, ...this._pendingDiffStateNotifications];
+      this._pendingUserActionHints = [...savedUserActionHints, ...this._pendingUserActionHints];
       // Restore removability on context cards that were locked before the failed send
       this._restoreRemovableCards();
       console.error('[ChatPanel] Error sending message:', error);
@@ -1371,6 +1391,16 @@ class ChatPanel {
     this._pendingDiffStateNotifications.push(message);
   }
 
+  /**
+   * Queue an invisible user-action hint for the chat agent.
+   * Like diff-state notifications, 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 user action (e.g., "[User Action: adopted suggestion 42]")
+   */
+  queueUserActionHint(message) {
+    this._pendingUserActionHints.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.

package/public/js/components/CouncilProgressModal.js

@@ -55,6 +55,7 @@ class CouncilProgressModal {
     this.councilConfig = councilConfig;
     this.isVisible = true;
     this._voiceStates = {};
+    this._completionHandled = false;
 
     // Detect rendering mode
     const configType = options.configType || (councilConfig ? 'advanced' : 'single');
@@ -903,6 +904,13 @@ class CouncilProgressModal {
   // ---------------------------------------------------------------------------
 
   _handleCompletion(status) {
+    // Guard against duplicate invocations (e.g. WebSocket retry + reconnect fetch race)
+    if (this._completionHandled) return;
+    this._completionHandled = true;
+
+    // Play notification sound before any async work so it fires promptly
+    if (window.notificationSounds) window.notificationSounds.playIfEnabled('analysis');
+
     if (this._renderMode === 'council') {
       // Voice-centric: mark all voice-level children as complete
       const vcEls = this.modal.querySelectorAll('[data-vc-voice][data-vc-level]');
@@ -1312,6 +1320,9 @@ class CouncilProgressModal {
               <span class="council-voice-icon pending">\u25CB</span>
               <span class="council-voice-label">Consolidation</span>
               <span class="council-voice-status pending">Pending</span>
+              <div class="council-voice-detail">
+                <div class="council-voice-snippet" style="display: none;"></div>
+              </div>
             </div>
         `;
       }

package/public/js/components/NotificationDropdown.js

@@ -0,0 +1,257 @@
+// Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0
+/**
+ * NotificationDropdown - Bell-icon popover for notification sound preferences.
+ *
+ * Anchors a small dropdown below the bell button with checkbox toggles that
+ * control which events trigger a notification chime.  Supports configurable
+ * event types (e.g. 'analysis', 'setup') and a "Test sound" link.
+ *
+ * Follows the same popover pattern as DiffOptionsDropdown (fixed positioning
+ * via getBoundingClientRect, click-outside and Escape to dismiss,
+ * opacity+transform animation).
+ *
+ * Usage:
+ *   const dropdown = new NotificationDropdown(
+ *     document.getElementById('notification-btn'),
+ *     { events: ['analysis', 'setup'] }
+ *   );
+ */
+
+const EVENT_LABELS = {
+  'analysis': 'Analysis complete',
+  'setup': 'Setup complete'
+};
+
+class NotificationDropdown {
+  /**
+   * @param {HTMLElement} buttonElement - The bell icon button already in the DOM
+   * @param {Object}      options
+   * @param {string[]}    options.events - Event type strings to show toggles for
+   */
+  constructor(buttonElement, { events }) {
+    this._btn = buttonElement;
+    this._events = events || [];
+
+    this._popoverEl = null;
+    this._checkboxes = {};
+    this._visible = false;
+    this._outsideClickHandler = null;
+    this._escapeHandler = null;
+
+    this._renderPopover();
+    this._syncButtonActive();
+
+    // Toggle popover on button click
+    this._btnClickHandler = (e) => {
+      e.stopPropagation();
+      if (this._visible) {
+        this._hide();
+      } else {
+        this._show();
+      }
+    };
+    this._btn.addEventListener('click', this._btnClickHandler);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+
+  /** Remove all DOM elements and event listeners. Safe to call multiple times. */
+  destroy() {
+    this._hide();
+    if (this._popoverEl) {
+      this._popoverEl.remove();
+      this._popoverEl = null;
+    }
+    if (this._btn && this._btnClickHandler) {
+      this._btn.removeEventListener('click', this._btnClickHandler);
+      this._btnClickHandler = null;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // DOM construction
+  // ---------------------------------------------------------------------------
+
+  _renderPopover() {
+    const popover = document.createElement('div');
+    popover.className = 'notification-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';
+
+    // --- Event checkboxes ---
+    this._events.forEach((eventType) => {
+      const labelText = EVENT_LABELS[eventType] || eventType;
+      const enabled = window.notificationSounds
+        ? window.notificationSounds.isEnabled(eventType)
+        : false;
+
+      const label = this._createCheckboxLabel(labelText, enabled);
+      const checkbox = label.querySelector('input');
+      popover.appendChild(label);
+
+      this._checkboxes[eventType] = checkbox;
+
+      checkbox.addEventListener('change', () => {
+        if (window.notificationSounds) {
+          window.notificationSounds.setEnabled(eventType, checkbox.checked);
+        }
+        this._syncButtonActive();
+      });
+    });
+
+    // --- Divider ---
+    const divider = document.createElement('div');
+    divider.style.height = '1px';
+    divider.style.background = 'var(--color-border-primary, #d0d7de)';
+    divider.style.margin = '0';
+    popover.appendChild(divider);
+
+    // --- Test sound link ---
+    const testLink = document.createElement('div');
+    testLink.textContent = 'Test sound';
+    testLink.style.padding = '8px 12px';
+    testLink.style.fontSize = '0.8125rem';
+    testLink.style.color = 'var(--color-accent-primary)';
+    testLink.style.cursor = 'pointer';
+    testLink.style.textDecoration = 'none';
+    testLink.style.userSelect = 'none';
+
+    testLink.addEventListener('mouseenter', () => {
+      testLink.style.textDecoration = 'underline';
+    });
+    testLink.addEventListener('mouseleave', () => {
+      testLink.style.textDecoration = 'none';
+    });
+    testLink.addEventListener('click', (e) => {
+      e.stopPropagation();
+      if (window.notificationSounds) {
+        window.notificationSounds.playChime();
+      }
+    });
+
+    popover.appendChild(testLink);
+
+    document.body.appendChild(popover);
+    this._popoverEl = popover;
+  }
+
+  /**
+   * Create a label element wrapping a checkbox.
+   * @param {string} text - Label text
+   * @param {boolean} checked - Initial checked state
+   * @returns {HTMLLabelElement}
+   */
+  _createCheckboxLabel(text, checked) {
+    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.color = 'var(--color-text-primary, #24292f)';
+    label.style.userSelect = 'none';
+
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.checked = checked;
+    checkbox.style.margin = '0';
+    checkbox.style.cursor = 'pointer';
+
+    label.appendChild(checkbox);
+    label.appendChild(document.createTextNode(text));
+    return label;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Show / Hide (mirrors DiffOptionsDropdown 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
+  // ---------------------------------------------------------------------------
+
+  /** Swap bell icon visibility when any notification is enabled. */
+  _syncButtonActive() {
+    if (!this._btn) return;
+    const anyEnabled = this._events.some((eventType) => {
+      return window.notificationSounds
+        ? window.notificationSounds.isEnabled(eventType)
+        : false;
+    });
+    const onIcon = this._btn.querySelector('.bell-icon-on');
+    const offIcon = this._btn.querySelector('.bell-icon-off');
+    if (onIcon) onIcon.style.display = anyEnabled ? '' : 'none';
+    if (offIcon) offIcon.style.display = anyEnabled ? 'none' : '';
+  }
+}
+
+window.NotificationDropdown = NotificationDropdown;
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { NotificationDropdown };
+}