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

package/public/js/pr.js

@@ -178,6 +178,15 @@ class PRManager {
       set: (v) => { this.lineTracker.potentialDragStart = v; }
     });
 
+    // Stack analysis components
+    this.stackAnalysisDialog = window.StackAnalysisDialog ? new window.StackAnalysisDialog() : null;
+    this.stackProgressModal = window.StackProgressModal ? new window.StackProgressModal() : null;
+    // Track open state of split button and stack nav dropdowns
+    this._analyzeDropdownOpen = false;
+    this._stackNavOpen = false;
+    this._closeAnalyzeDropdown = null;
+    this._closeStackNav = null;
+
     // Initialize event handlers and UI
     this.setupEventHandlers();
     this.initTheme();
@@ -198,6 +207,13 @@ class PRManager {
       });
     }
 
+    // Initialize notification sounds dropdown (bell icon)
+    const notifBtn = document.getElementById('notification-toggle');
+    if (notifBtn && window.NotificationDropdown) {
+      const notifEvents = window.PAIR_REVIEW_LOCAL_MODE ? ['analysis'] : ['analysis', 'setup'];
+      this.notificationDropdown = new window.NotificationDropdown(notifBtn, { events: notifEvents });
+    }
+
     // In local mode, LocalManager handles init instead
     if (!window.PAIR_REVIEW_LOCAL_MODE) {
       this.init();
@@ -885,11 +901,12 @@ class PRManager {
     if (breadcrumbRepo) breadcrumbRepo.textContent = pr.repo;
     if (breadcrumbPr) breadcrumbPr.textContent = `#${pr.number}`;
 
-    // Update title
+    // Update title — wrap in stack nav dropdown when stack data is available
     const titleElement = document.getElementById('pr-title-text');
     if (titleElement) {
       titleElement.textContent = pr.title;
     }
+    this._renderStackNavDropdown(pr);
 
     // Show/hide PR description info button
     const descToggle = document.getElementById('pr-description-toggle');
@@ -1012,6 +1029,395 @@ class PRManager {
 
     // Update pending draft indicator in toolbar
     this.updatePendingDraftIndicator(pr.pendingDraft);
+
+    // Render analyze split button when stack data is available
+    this._renderAnalyzeSplitButton(pr);
+  }
+
+  /**
+   * Render the analyze split button when stack data is available.
+   * Wraps the existing #analyze-btn with a dropdown toggle for "Analyze Stack".
+   * @param {Object} pr - PR data with optional stack_data
+   */
+  _renderAnalyzeSplitButton(pr) {
+    const analyzeBtn = document.getElementById('analyze-btn');
+    if (!analyzeBtn) return;
+
+    // Remove existing split container if present (re-render safe)
+    const existingContainer = document.getElementById('analyze-split-container');
+    if (existingContainer) {
+      // Move analyze button back out of the container before removing
+      existingContainer.parentNode.insertBefore(analyzeBtn, existingContainer);
+      existingContainer.remove();
+    }
+    // Clean up previous outside-click handler
+    if (this._closeAnalyzeDropdown) {
+      document.removeEventListener('click', this._closeAnalyzeDropdown);
+      this._closeAnalyzeDropdown = null;
+    }
+
+    // Determine stack PRs (non-trunk entries with PR numbers)
+    const stackPRs = this._getStackPRs(pr);
+    if (stackPRs.length < 2) return; // No meaningful stack
+
+    // Create split button container
+    const container = document.createElement('div');
+    container.className = 'analyze-split-container';
+    container.id = 'analyze-split-container';
+
+    // Insert container where analyze button is, then move button inside
+    analyzeBtn.parentNode.insertBefore(container, analyzeBtn);
+    container.appendChild(analyzeBtn);
+
+    // Dropdown toggle (chevron)
+    const toggle = document.createElement('button');
+    toggle.className = 'analyze-dropdown-toggle';
+    toggle.id = 'analyze-stack-toggle';
+    toggle.type = 'button';
+    toggle.setAttribute('aria-label', 'Stack analysis options');
+    toggle.setAttribute('aria-haspopup', 'true');
+    toggle.setAttribute('aria-expanded', 'false');
+    toggle.innerHTML = `
+      <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"/>
+      </svg>
+    `;
+    container.appendChild(toggle);
+
+    // Dropdown menu
+    const menu = document.createElement('div');
+    menu.className = 'analyze-dropdown-menu';
+    menu.id = 'analyze-dropdown-menu';
+    const itemBtn = document.createElement('button');
+    itemBtn.className = 'analyze-dropdown-item';
+    itemBtn.id = 'analyze-stack-btn';
+    itemBtn.type = 'button';
+    itemBtn.textContent = `Analyze Stack (${stackPRs.length} PRs)`;
+    menu.appendChild(itemBtn);
+    container.appendChild(menu);
+
+    // Event: toggle dropdown
+    toggle.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const isOpen = container.classList.toggle('open');
+      toggle.setAttribute('aria-expanded', String(isOpen));
+    });
+
+    // Event: click stack analysis item
+    itemBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      container.classList.remove('open');
+      toggle.setAttribute('aria-expanded', 'false');
+      this.triggerStackAnalysis();
+    });
+
+    // Close dropdown on outside click
+    this._closeAnalyzeDropdown = (e) => {
+      if (!container.contains(e.target)) {
+        container.classList.remove('open');
+        toggle.setAttribute('aria-expanded', 'false');
+      }
+    };
+    document.addEventListener('click', this._closeAnalyzeDropdown);
+  }
+
+  /**
+   * Render the stack navigation dropdown around the PR title.
+   * Replaces static title with a clickable dropdown when stack data has multiple PRs.
+   * @param {Object} pr - PR data with optional stack_data
+   */
+  _renderStackNavDropdown(pr) {
+    const titleWrapper = document.querySelector('.pr-title-wrapper');
+    if (!titleWrapper) return;
+
+    // Remove existing stack nav if present (re-render safe)
+    const existingNav = titleWrapper.querySelector('.stack-nav-dropdown');
+    if (existingNav) {
+      // Restore the title element outside the nav wrapper
+      const titleEl = existingNav.querySelector('#pr-title-text');
+      if (titleEl) {
+        titleWrapper.insertBefore(titleEl, existingNav);
+      }
+      existingNav.remove();
+    }
+    // Clean up previous outside-click handler
+    if (this._closeStackNav) {
+      document.removeEventListener('click', this._closeStackNav);
+      this._closeStackNav = null;
+    }
+
+    const stackPRs = this._getStackPRs(pr);
+    if (stackPRs.length < 2) return; // No meaningful stack
+
+    const titleElement = document.getElementById('pr-title-text');
+    if (!titleElement) return;
+
+    // Create dropdown wrapper
+    const dropdown = document.createElement('div');
+    dropdown.className = 'stack-nav-dropdown';
+
+    // Create trigger button wrapping the title
+    const trigger = document.createElement('button');
+    trigger.className = 'stack-nav-trigger';
+    trigger.type = 'button';
+    trigger.setAttribute('aria-haspopup', 'true');
+    trigger.setAttribute('aria-expanded', 'false');
+
+    // Move title into trigger
+    titleWrapper.insertBefore(dropdown, titleElement);
+    dropdown.appendChild(trigger);
+    trigger.appendChild(titleElement);
+
+    // Add chevron
+    const chevron = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    chevron.classList.add('stack-nav-chevron');
+    chevron.setAttribute('viewBox', '0 0 16 16');
+    chevron.setAttribute('width', '14');
+    chevron.setAttribute('height', '14');
+    chevron.innerHTML = '<path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"/>';
+    trigger.appendChild(chevron);
+
+    // Create menu
+    const menu = document.createElement('div');
+    menu.className = 'stack-nav-menu';
+    dropdown.appendChild(menu);
+
+    // Populate menu items (reversed: stack base at bottom)
+    const displayPRs = [...stackPRs].reverse();
+    for (const stackPR of displayPRs) {
+      const isCurrent = stackPR.prNumber === pr.number;
+      const item = document.createElement('div');
+      item.className = 'stack-nav-item';
+      if (isCurrent) {
+        item.classList.add('current');
+      }
+      item.dataset.pr = stackPR.prNumber;
+
+      // Text content column
+      const textCol = document.createElement('div');
+      textCol.className = 'stack-nav-text';
+
+      // Primary row: PR number + title inline
+      const primaryRow = document.createElement('div');
+      primaryRow.className = 'stack-nav-primary';
+
+      const numberSpan = document.createElement('span');
+      numberSpan.className = 'stack-nav-number';
+      numberSpan.textContent = `#${stackPR.prNumber}`;
+      primaryRow.appendChild(numberSpan);
+
+      if (stackPR.title) {
+        const titleSpan = document.createElement('span');
+        titleSpan.className = 'stack-nav-title';
+        titleSpan.textContent = stackPR.title;
+        primaryRow.appendChild(titleSpan);
+      }
+
+      textCol.appendChild(primaryRow);
+
+      // Secondary row: branch name
+      const branchRow = document.createElement('div');
+      branchRow.className = 'stack-nav-branch';
+      // SVG branch icon
+      branchRow.innerHTML = '<svg class="stack-nav-branch-icon" width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"></path></svg>';
+      const branchName = document.createElement('span');
+      branchName.textContent = stackPR.branch || '';
+      branchRow.appendChild(branchName);
+      textCol.appendChild(branchRow);
+
+      item.appendChild(textCol);
+
+      // Navigate on click
+      item.addEventListener('click', () => {
+        if (stackPR.prNumber !== pr.number) {
+          window.location.href = `/pr/${encodeURIComponent(pr.owner)}/${encodeURIComponent(pr.repo)}/${stackPR.prNumber}`;
+        }
+        dropdown.classList.remove('open');
+        trigger.setAttribute('aria-expanded', 'false');
+      });
+
+      menu.appendChild(item);
+    }
+
+    // Toggle dropdown
+    trigger.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const isOpen = dropdown.classList.toggle('open');
+      trigger.setAttribute('aria-expanded', String(isOpen));
+    });
+
+    // Close on outside click
+    this._closeStackNav = (e) => {
+      if (!dropdown.contains(e.target)) {
+        dropdown.classList.remove('open');
+        trigger.setAttribute('aria-expanded', 'false');
+      }
+    };
+    document.addEventListener('click', this._closeStackNav);
+  }
+
+  /**
+   * Extract non-trunk stack PRs from PR data.
+   * @param {Object} pr - PR data with optional stack_data
+   * @returns {Array<Object>} Stack PR entries with prNumber, title, branch, hasAnalysis
+   */
+  _getStackPRs(pr) {
+    if (!pr.stack_data || !Array.isArray(pr.stack_data)) return [];
+    return pr.stack_data.filter(entry => !entry.isTrunk && entry.prNumber);
+  }
+
+  /**
+   * Trigger stack analysis flow:
+   * 1. Open StackAnalysisDialog to select PRs
+   * 2. Open AnalysisConfigModal for analysis config
+   * 3. Call startStackAnalysis()
+   */
+  async triggerStackAnalysis() {
+    // If a stack analysis is active (running but hidden), reopen its progress modal
+    if (this.stackProgressModal?.isActive) {
+      this.stackProgressModal.reopenFromBackground();
+      return;
+    }
+
+    if (!this.currentPR) {
+      this.showError('No PR loaded');
+      return;
+    }
+
+    const { owner, repo, number } = this.currentPR;
+
+    try {
+      // Open stack selection dialog
+      if (!this.stackAnalysisDialog) {
+        console.warn('StackAnalysisDialog not initialized');
+        return;
+      }
+
+      const dialogResult = await this.stackAnalysisDialog.open(owner, repo, number);
+      if (!dialogResult) return; // User cancelled
+      const { selectedPRNumbers, prList } = dialogResult;
+      if (!selectedPRNumbers || selectedPRNumbers.length === 0) return;
+
+      // Open analysis config modal
+      if (!this.analysisConfigModal) {
+        console.warn('AnalysisConfigModal not initialized, proceeding with defaults');
+        await this.startStackAnalysis(owner, repo, number, selectedPRNumbers, {}, prList);
+        return;
+      }
+
+      // Fetch settings in parallel
+      const [repoSettings, reviewSettings] = await Promise.all([
+        this.fetchRepoSettings().catch(() => null),
+        this.fetchLastReviewSettings().catch(() => ({ custom_instructions: '', last_council_id: null }))
+      ]);
+
+      const currentModel = repoSettings?.default_model || 'opus';
+      const currentProvider = repoSettings?.default_provider || 'claude';
+      const tabStorageKey = PRManager.getRepoStorageKey('pair-review-tab', owner, repo);
+      const rememberedTab = localStorage.getItem(tabStorageKey);
+      const defaultTab = rememberedTab || repoSettings?.default_tab || 'single';
+      const instructionsStorageKey = PRManager.getRepoStorageKey('pair-review-instructions', owner, repo);
+      const lastInstructions = reviewSettings.custom_instructions
+        ?? localStorage.getItem(instructionsStorageKey)
+        ?? '';
+      const lastCouncilId = reviewSettings.last_council_id;
+
+      this.analysisConfigModal.onTabChange = (tabId) => {
+        localStorage.setItem(tabStorageKey, tabId);
+      };
+
+      const config = await this.analysisConfigModal.show({
+        currentModel,
+        currentProvider,
+        defaultTab,
+        repoInstructions: repoSettings?.default_instructions || '',
+        lastInstructions,
+        lastCouncilId,
+        defaultCouncilId: repoSettings?.default_council_id || null
+      });
+
+      if (!config) return; // User cancelled
+
+      // Persist custom instructions
+      const submittedInstructions = config.customInstructions || '';
+      if (submittedInstructions) {
+        localStorage.setItem(instructionsStorageKey, submittedInstructions);
+      } else {
+        localStorage.removeItem(instructionsStorageKey);
+      }
+
+      await this.startStackAnalysis(owner, repo, number, selectedPRNumbers, config, prList);
+
+    } catch (error) {
+      console.error('Error triggering stack analysis:', error);
+      this.showError(`Failed to start stack analysis: ${error.message}`);
+    }
+  }
+
+  /**
+   * Start stack analysis by posting to the backend and opening the progress modal.
+   * @param {string} owner - Repository owner
+   * @param {string} repo - Repository name
+   * @param {number} number - Current PR number
+   * @param {Array<number>} selectedPRNumbers - PRs to analyze
+   * @param {Object} analysisConfig - Analysis configuration from the config modal
+   * @param {Array<Object>} [prList] - PR metadata with titles from the selection dialog
+   */
+  async startStackAnalysis(owner, repo, number, selectedPRNumbers, analysisConfig, prList) {
+    try {
+      const response = await fetch(`/api/pr/${owner}/${repo}/${number}/analyses/stack`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          prNumbers: selectedPRNumbers,
+          analysisConfig
+        })
+      });
+
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({}));
+        throw new Error(error.error || 'Failed to start stack analysis');
+      }
+
+      const result = await response.json();
+
+      // Merge titles from dialog into backend response
+      const prAnalysesWithTitles = (result.prAnalyses || []).map(pr => {
+        const info = (prList || []).find(p => p.prNumber === pr.prNumber);
+        return { ...pr, title: info?.title || pr.title };
+      });
+
+      // Set button to analyzing state so clicking it reopens the modal
+      this.setButtonAnalyzing(result.stackAnalysisId);
+
+      // Update dropdown item to show "Analyzing Stack..."
+      const stackBtn = document.getElementById('analyze-stack-btn');
+      if (stackBtn) {
+        stackBtn.textContent = 'Analyzing Stack...';
+      }
+
+      // Open stack progress modal
+      if (this.stackProgressModal) {
+        this.stackProgressModal.open(result.stackAnalysisId, prAnalysesWithTitles, {
+          owner, repo,
+          onComplete: () => {
+            this.resetButton();
+            // Reset dropdown item text
+            const btn = document.getElementById('analyze-stack-btn');
+            if (btn) {
+              const stackPRs = this._getStackPRs(this.currentPR);
+              btn.textContent = `Analyze Stack (${stackPRs.length} PRs)`;
+            }
+          }
+        });
+      }
+
+    } catch (error) {
+      console.error('Error starting stack analysis:', error);
+      if (window.toast) {
+        window.toast.showError(`Stack analysis failed: ${error.message}`);
+      }
+    }
   }
 
   /**
@@ -3973,6 +4379,10 @@ class PRManager {
     btn.classList.add('btn-analyzing');
     btn.disabled = false; // Keep clickable to reopen modal
 
+    // Also highlight the split dropdown toggle if present
+    const toggle = document.getElementById('analyze-stack-toggle');
+    if (toggle) toggle.classList.add('btn-analyzing');
+
     const btnText = btn.querySelector('.btn-text');
     if (btnText) {
       btnText.textContent = 'Analyzing...';
@@ -3994,6 +4404,10 @@ class PRManager {
     btn.classList.remove('btn-analyzing');
     btn.classList.add('btn-complete');
 
+    // Also clear the split dropdown toggle
+    const toggleComplete = document.getElementById('analyze-stack-toggle');
+    if (toggleComplete) toggleComplete.classList.remove('btn-analyzing');
+
     const btnText = btn.querySelector('.btn-text');
     if (btnText) {
       btnText.textContent = 'Complete';
@@ -4022,6 +4436,10 @@ class PRManager {
     btn.classList.remove('btn-analyzing', 'btn-complete');
     btn.disabled = false;
 
+    // Also clear the split dropdown toggle
+    const toggleReset = document.getElementById('analyze-stack-toggle');
+    if (toggleReset) toggleReset.classList.remove('btn-analyzing');
+
     const btnText = btn.querySelector('.btn-text');
     if (btnText) {
       btnText.textContent = 'Analyze';
@@ -4194,7 +4612,7 @@ class PRManager {
   reopenModal() {
     if (!this.currentAnalysisId) return;
 
-    // Reopen the progress modal if it was tracking this analysis
+    // Reopen the per-PR progress modal (council/single analysis)
     if (window.councilProgressModal && window.councilProgressModal.currentAnalysisId === this.currentAnalysisId) {
       window.councilProgressModal.reopenFromBackground();
     }

package/public/js/utils/notification-sounds.js

@@ -0,0 +1,62 @@
+// Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Notification sound preferences backed by localStorage.
+ * Sound playback is delegated to the server (POST /api/play-sound) so that it
+ * works reliably even when the browser was opened programmatically without a
+ * user gesture (which would block Web Audio API).
+ */
+class NotificationSounds {
+  /**
+   * Returns the localStorage key for a given event type.
+   * @param {string} eventType - 'analysis' or 'setup'
+   * @returns {string}
+   */
+  _storageKey(eventType) {
+    return 'pair-review-notify-' + eventType;
+  }
+
+  /**
+   * Check whether notifications are enabled for the given event type.
+   * Returns false if the key is missing (default off).
+   * @param {string} eventType - 'analysis' or 'setup'
+   * @returns {boolean}
+   */
+  isEnabled(eventType) {
+    const val = localStorage.getItem(this._storageKey(eventType));
+    return val === 'true';
+  }
+
+  /**
+   * Set whether notifications are enabled for the given event type.
+   * @param {string} eventType - 'analysis' or 'setup'
+   * @param {boolean} enabled
+   */
+  setEnabled(eventType, enabled) {
+    localStorage.setItem(this._storageKey(eventType), enabled ? 'true' : 'false');
+  }
+
+  /**
+   * Play a chime if notifications are enabled for the given event type.
+   * @param {string} eventType - 'analysis' or 'setup'
+   */
+  playIfEnabled(eventType) {
+    if (this.isEnabled(eventType)) {
+      this.playChime();
+    }
+  }
+
+  /**
+   * Ask the server to play a system notification sound.
+   * Fire-and-forget — errors are silently ignored.
+   */
+  playChime() {
+    fetch('/api/play-sound', { method: 'POST' }).catch(() => {});
+  }
+}
+
+window.notificationSounds = new NotificationSounds();
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { NotificationSounds };
+}

package/public/local.html

@@ -341,6 +341,14 @@
                             <path d="M9.598 1.591a.749.749 0 0 1 .785-.175 7.001 7.001 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786Z"/>
                         </svg>
                     </button>
+                    <button class="btn btn-icon" id="notification-toggle" title="Notification sounds">
+                        <svg class="bell-icon-on" viewBox="0 0 16 16" fill="currentColor" width="16" height="16">
+                            <path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"/>
+                        </svg>
+                        <svg class="bell-icon-off" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" style="display: none;">
+                            <path d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"/>
+                        </svg>
+                    </button>
                     <a class="btn btn-icon settings-link" id="settings-link" href="#" title="Repository settings" style="display: none;">
                         <svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16">
                             <path d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"/>
@@ -590,6 +598,8 @@
     <script src="/js/components/VoiceCentricConfigTab.js"></script>
     <script src="/js/components/AdvancedConfigTab.js"></script>
     <script src="/js/components/CouncilProgressModal.js"></script>
+    <script src="/js/utils/notification-sounds.js"></script>
+    <script src="/js/components/NotificationDropdown.js"></script>
     <script src="/js/components/StatusIndicator.js"></script>
     <script src="/js/components/SuggestionNavigator.js"></script>
     <script src="/js/components/ReviewModal.js"></script>

package/public/pr.html

@@ -134,6 +134,14 @@
                             <path d="M9.598 1.591a.749.749 0 0 1 .785-.175 7.001 7.001 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786Z"/>
                         </svg>
                     </button>
+                    <button class="btn btn-icon" id="notification-toggle" title="Notification sounds">
+                        <svg class="bell-icon-on" viewBox="0 0 16 16" fill="currentColor" width="16" height="16">
+                            <path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"/>
+                        </svg>
+                        <svg class="bell-icon-off" viewBox="0 0 16 16" fill="currentColor" width="16" height="16" style="display: none;">
+                            <path d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"/>
+                        </svg>
+                    </button>
                     <a class="btn btn-icon settings-link" id="settings-link" href="#" title="Repository settings">
                         <svg viewBox="0 0 16 16" fill="currentColor" width="16" height="16">
                             <path d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"/>
@@ -386,6 +394,8 @@
     <script src="/js/components/VoiceCentricConfigTab.js"></script>
     <script src="/js/components/AdvancedConfigTab.js"></script>
     <script src="/js/components/CouncilProgressModal.js"></script>
+    <script src="/js/utils/notification-sounds.js"></script>
+    <script src="/js/components/NotificationDropdown.js"></script>
     <script src="/js/components/StatusIndicator.js"></script>
     <script src="/js/components/SuggestionNavigator.js"></script>
     <script src="/js/components/ReviewModal.js"></script>
@@ -396,6 +406,8 @@
     <script src="/js/components/EmojiPicker.js"></script>
     <script src="/js/components/KeyboardShortcuts.js"></script>
     <script src="/js/components/DiffOptionsDropdown.js"></script>
+    <script src="/js/components/StackAnalysisDialog.js"></script>
+    <script src="/js/components/StackProgressModal.js"></script>
 
     <!-- PR Modules (must load before pr.js) -->
     <script src="/js/modules/storage-cleanup.js"></script>

package/public/setup.html

@@ -528,6 +528,7 @@
 
     <!-- WebSocket client -->
     <script src="/js/ws-client.js"></script>
+    <script src="/js/utils/notification-sounds.js"></script>
 
     <script>
         // Copyright 2026 Tim Perkins (tjwp) | SPDX-License-Identifier: Apache-2.0
@@ -818,6 +819,9 @@
                             updateProgressBar();
                             showRedirect();
 
+                            // Play notification sound for PR setup completion
+                            if (window.notificationSounds && mode !== 'local') window.notificationSounds.playIfEnabled('setup');
+
                             // Small delay so the user sees the completed state
                             setTimeout(function() {
                                 if (msg.reviewUrl) {