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

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]');

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 };
+}

package/public/js/components/StackAnalysisDialog.js

@@ -0,0 +1,313 @@
+// Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0
+/**
+ * Stack Analysis Dialog Component
+ * Modal showing stack PRs with checkboxes for selection before analysis.
+ * Returns a Promise resolving to { selectedPRNumbers } or null if cancelled.
+ */
+class StackAnalysisDialog {
+  constructor(container) {
+    this.container = container || document.body;
+    this.overlay = null;
+    this._resolve = null;
+    this._stackData = null;
+    this._currentPRNumber = null;
+
+    // Bind methods
+    this.handleKeydown = this.handleKeydown.bind(this);
+  }
+
+  /**
+   * Open the dialog, fetch stack info, and let the user select PRs.
+   * @param {string} owner - Repository owner
+   * @param {string} repo - Repository name
+   * @param {number} number - Current PR number
+   * @returns {Promise<{selectedPRNumbers: number[]}|null>} Selected PR numbers or null if cancelled
+   */
+  open(owner, repo, number) {
+    this._currentPRNumber = number;
+
+    return new Promise((resolve) => {
+      this._resolve = resolve;
+      this._createOverlay();
+      this._showLoading();
+      this._attachListeners();
+      this._fetchStackInfo(owner, repo, number);
+    });
+  }
+
+  // ---------------------------------------------------------------------------
+  // DOM creation
+  // ---------------------------------------------------------------------------
+
+  _createOverlay() {
+    // Remove any existing overlay
+    this._removeOverlay();
+
+    const overlay = document.createElement('div');
+    overlay.className = 'stack-dialog-overlay';
+
+    overlay.innerHTML = `
+      <div class="stack-dialog-backdrop" data-action="cancel"></div>
+      <div class="stack-dialog">
+        <div class="stack-dialog-header">
+          <h3>Analyze Stack</h3>
+          <button class="modal-close-btn" data-action="cancel" title="Close">
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="stack-dialog-body">
+          <!-- Populated dynamically -->
+        </div>
+        <div class="stack-dialog-footer">
+          <button class="btn btn-secondary" data-action="cancel">Cancel</button>
+          <button class="btn btn-primary stack-dialog-submit" data-action="submit" disabled>Configure &amp; Analyze</button>
+        </div>
+      </div>
+    `;
+
+    this.container.appendChild(overlay);
+    this.overlay = overlay;
+
+    // Event delegation for clicks
+    overlay.addEventListener('click', (e) => {
+      const action = e.target.closest('[data-action]')?.dataset.action;
+      if (action === 'cancel') {
+        this._cancel();
+        return;
+      }
+      if (action === 'submit') {
+        this._submit();
+        return;
+      }
+      if (action === 'select-all') {
+        this._setAllChecked(true);
+        return;
+      }
+      if (action === 'select-none') {
+        this._setAllChecked(false);
+        return;
+      }
+
+      // Checkbox change via clicking the row
+      const checkbox = e.target.closest('.stack-dialog-pr-checkbox');
+      if (checkbox) {
+        // Let the native checkbox toggle, then update button state
+        setTimeout(() => this._updateSubmitButton(), 0);
+      }
+    });
+
+    // Handle checkbox changes (covers keyboard toggle too)
+    overlay.addEventListener('change', () => {
+      this._updateSubmitButton();
+    });
+  }
+
+  _showLoading() {
+    const body = this.overlay?.querySelector('.stack-dialog-body');
+    if (!body) return;
+
+    body.innerHTML = `
+      <div class="stack-dialog-loading">
+        <span class="council-spinner"></span>
+        <span>Loading stack info...</span>
+      </div>
+    `;
+  }
+
+  _showError(message) {
+    const body = this.overlay?.querySelector('.stack-dialog-body');
+    if (!body) return;
+
+    body.innerHTML = `
+      <div class="stack-dialog-error">
+        <p>${this._escapeHtml(message)}</p>
+      </div>
+    `;
+  }
+
+  _renderPRList(stack) {
+    const body = this.overlay?.querySelector('.stack-dialog-body');
+    if (!body) return;
+
+    // Filter to non-trunk entries with PR numbers
+    const prs = stack.filter(entry => !entry.isTrunk && entry.prNumber);
+    if (prs.length === 0) {
+      this._showError('No PRs found in this stack.');
+      return;
+    }
+
+    this._stackData = prs;
+
+    // Display PRs in reverse order: tip of stack (top) first, base (bottom) last
+    const displayPRs = [...prs].reverse();
+
+    let html = `
+      <div class="stack-dialog-controls">
+        <button class="btn btn-sm btn-secondary" data-action="select-all">Select All</button>
+        <button class="btn btn-sm btn-secondary" data-action="select-none">Select None</button>
+      </div>
+      <div class="stack-dialog-pr-list">
+    `;
+
+    for (const pr of displayPRs) {
+      const isCurrent = pr.prNumber === this._currentPRNumber;
+      const currentClass = isCurrent ? ' stack-dialog-pr-current' : '';
+      const currentBadge = isCurrent ? ' <span class="stack-dialog-current-badge">\u2605</span>' : '';
+      const analysisBadge = pr.hasAnalysis
+        ? ' <span class="stack-dialog-analyzed-badge" title="Has existing analysis">\u2022 analyzed</span>'
+        : '';
+
+      html += `
+        <label class="stack-dialog-pr-item${currentClass}">
+          <input type="checkbox" class="stack-dialog-pr-checkbox" data-pr-number="${pr.prNumber}" checked />
+          <span class="stack-dialog-pr-number">#${pr.prNumber}</span>
+          <div class="stack-dialog-pr-info">
+            <span class="stack-dialog-pr-title-row">
+              ${currentBadge}
+              <span class="stack-dialog-pr-title">${this._escapeHtml(pr.title || pr.branch || '')}</span>
+              ${analysisBadge}
+            </span>
+            <span class="stack-dialog-pr-branch"><svg class="stack-dialog-branch-icon" width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Z"/></svg><span class="stack-dialog-branch-name">${this._escapeHtml(pr.branch || '')}</span></span>
+          </div>
+        </label>
+      `;
+    }
+
+    html += `
+      </div>
+      <div class="stack-dialog-note">
+        <span class="stack-dialog-note-info" title="Each PR gets its own worktree (created automatically if needed). All selected PRs are analyzed in parallel.">
+          <svg class="stack-dialog-info-icon" width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
+          </svg>
+          Each PR gets its own worktree (created automatically if needed). All selected PRs are analyzed in parallel.
+        </span>
+      </div>
+    `;
+
+    body.innerHTML = html;
+
+    // Enable submit button
+    this._updateSubmitButton();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Fetch
+  // ---------------------------------------------------------------------------
+
+  async _fetchStackInfo(owner, repo, number) {
+    try {
+      const response = await fetch(`/api/pr/${owner}/${repo}/${number}/stack-info`);
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}));
+        throw new Error(data.error || `Failed to fetch stack info (${response.status})`);
+      }
+
+      const data = await response.json();
+      this._renderPRList(data.stack || []);
+    } catch (error) {
+      console.error('Error fetching stack info:', error);
+      this._showError(error.message || 'Failed to load stack information.');
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Actions
+  // ---------------------------------------------------------------------------
+
+  _getSelectedPRNumbers() {
+    if (!this.overlay) return [];
+    const checkboxes = this.overlay.querySelectorAll('.stack-dialog-pr-checkbox:checked');
+    return Array.from(checkboxes).map(cb => Number(cb.dataset.prNumber));
+  }
+
+  _setAllChecked(checked) {
+    if (!this.overlay) return;
+    const checkboxes = this.overlay.querySelectorAll('.stack-dialog-pr-checkbox');
+    checkboxes.forEach(cb => { cb.checked = checked; });
+    this._updateSubmitButton();
+  }
+
+  _updateSubmitButton() {
+    const submitBtn = this.overlay?.querySelector('.stack-dialog-submit');
+    if (!submitBtn) return;
+    const selected = this._getSelectedPRNumbers();
+    submitBtn.disabled = selected.length === 0;
+  }
+
+  _submit() {
+    const selectedPRNumbers = this._getSelectedPRNumbers();
+    if (selectedPRNumbers.length === 0) return;
+
+    // Build prList with titles for the progress modal
+    const selectedSet = new Set(selectedPRNumbers);
+    const prList = (this._stackData || [])
+      .filter(pr => selectedSet.has(pr.prNumber))
+      .map(pr => ({ prNumber: pr.prNumber, title: pr.title || pr.branch || '' }));
+
+    this._cleanup();
+    if (this._resolve) {
+      this._resolve({ selectedPRNumbers, prList });
+      this._resolve = null;
+    }
+  }
+
+  _cancel() {
+    this._cleanup();
+    if (this._resolve) {
+      this._resolve(null);
+      this._resolve = null;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Listeners & cleanup
+  // ---------------------------------------------------------------------------
+
+  _attachListeners() {
+    document.addEventListener('keydown', this.handleKeydown);
+  }
+
+  handleKeydown(e) {
+    if (e.key === 'Escape') {
+      this._cancel();
+    }
+  }
+
+  _cleanup() {
+    document.removeEventListener('keydown', this.handleKeydown);
+    this._removeOverlay();
+    this._stackData = null;
+    this._currentPRNumber = null;
+  }
+
+  _removeOverlay() {
+    if (this.overlay) {
+      this.overlay.remove();
+      this.overlay = null;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Utilities
+  // ---------------------------------------------------------------------------
+
+  _escapeHtml(str) {
+    if (!str) return '';
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+}
+
+// Export for use in other modules
+if (typeof window !== 'undefined') {
+  window.StackAnalysisDialog = StackAnalysisDialog;
+}
+
+// Export for Node.js/test environments
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { StackAnalysisDialog };
+}