@in-the-loop-labs/pair-review 3.0.6 → 3.1.1

package/public/css/pr.css

@@ -501,16 +501,19 @@
 }
 
 /* Refresh button spinner animation */
-#refresh-pr .spinner-icon {
+#refresh-pr .spinner-icon,
+#local-refresh-btn .spinner-icon {
   display: none;
   animation: spin 1s linear infinite;
 }
 
-#refresh-pr.refreshing .refresh-icon {
+#refresh-pr.refreshing .refresh-icon,
+#local-refresh-btn.refreshing .refresh-icon {
   display: none !important;
 }
 
-#refresh-pr.refreshing .spinner-icon {
+#refresh-pr.refreshing .spinner-icon,
+#local-refresh-btn.refreshing .spinner-icon {
   display: inline-block !important;
 }
 
@@ -1871,6 +1874,8 @@ tr.newly-expanded .d2h-code-line-ctn {
   display: flex;
   align-items: center;
   gap: 8px;
+  min-width: 0;
+  overflow: hidden;
 }
 
 /* Category label badge for AI suggestions - HIDDEN in favor of unified AI Suggestion badge (issue pair_review-pqb) */
@@ -1889,11 +1894,16 @@ tr.newly-expanded .d2h-code-line-ctn {
   font-weight: 600;
   background: var(--ai-subtle, rgba(245, 158, 11, 0.1));
   color: var(--ai-primary, #f59e0b);
+  white-space: nowrap;
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .ai-suggestion-badge svg {
   width: 14px;
   height: 14px;
+  flex-shrink: 0;
   opacity: 0.8;
 }
 
@@ -1924,6 +1934,7 @@ tr.newly-expanded .d2h-code-line-ctn {
   background: var(--ai-subtle, rgba(245, 158, 11, 0.1));
   border-radius: var(--radius-sm, 4px);
   flex-shrink: 0;
+  white-space: nowrap;
 }
 
 /* Type-specific colors - using CSS variables for theme support */
@@ -2074,6 +2085,10 @@ tr.newly-expanded .d2h-code-line-ctn {
 .ai-title {
   font-weight: 600;
   color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
 }
 
 /* Confidence display removed to match cleaner prototype design (issue pair_review-7g5) */
@@ -6466,6 +6481,96 @@ body:not([data-theme="dark"]) .theme-icon-light {
   text-overflow: ellipsis;
 }
 
+/* Accessible visually-hidden utility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Base branch selector */
+.toolbar-base-branch-wrap {
+  display: none;
+  align-items: center;
+}
+
+.toolbar-base-branch-wrap:not([hidden]) {
+  display: inline-flex;
+}
+
+.base-branch-selector-wrap {
+  display: none;
+  align-items: center;
+}
+
+.base-branch-selector-wrap:not([hidden]) {
+  display: inline-flex;
+}
+
+.base-branch-vs {
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  margin: 0 6px;
+}
+
+.toolbar-base-branch-static[hidden] {
+  display: none;
+}
+
+.toolbar-base-branch-static {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  background-color: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 260px;
+}
+
+.toolbar-base-branch-static svg {
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+}
+
+.toolbar-base-branch-static span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.base-branch-select {
+  font-size: 11px;
+  padding: 2px 8px;
+  background: var(--color-bg-tertiary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 6px;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  max-width: 260px;
+  font-family: var(--font-mono);
+}
+
+.base-branch-select:hover {
+  background: var(--color-bg-secondary);
+}
+
+.base-branch-select:focus {
+  outline: 2px solid var(--color-accent-primary);
+  outline-offset: -2px;
+}
+
 /* Shared copy button styles for toolbar (branch + commit) */
 .toolbar-copy-btn {
   display: inline-flex;
@@ -8943,12 +9048,24 @@ body.resizing * {
 }
 
 /* Category label for AI findings */
+.finding-meta {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
 .finding-category {
   font-size: 0.6875rem;
   color: var(--color-text-tertiary);
   text-transform: capitalize;
 }
 
+.finding-meta .severity-badge {
+  margin-left: 0;
+  font-size: 0.6rem;
+  padding: 0 4px;
+}
+
 /* Star icon for praise findings */
 .finding-star {
   display: flex;
@@ -9659,7 +9776,7 @@ body.resizing * {
 .instructions-container {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
 }
 
 .repo-instructions-banner {
@@ -10186,6 +10303,18 @@ body.resizing * {
   min-width: 90px;
 }
 
+.executable-note {
+  font-size: 11px;
+  color: var(--fg-muted, #656d76);
+  font-style: italic;
+  white-space: nowrap;
+}
+
+.vc-levels-disabled-note {
+  margin-top: 12px;
+  margin-bottom: 0;
+}
+
 .btn-icon {
   box-sizing: border-box;
   width: 28px;
@@ -12758,3 +12887,61 @@ body.resizing * {
   opacity: 0.4;
   cursor: not-allowed;
 }
+
+/* Severity badges for executable provider suggestions */
+.severity-badge {
+  display: inline-flex;
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-weight: 500;
+  margin-left: 4px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  width: fit-content;
+}
+
+.severity-critical {
+  background: #fde8e8;
+  color: #d32f2f;
+}
+
+.severity-medium {
+  background: #fff3e0;
+  color: #ef6c00;
+}
+
+.severity-minor {
+  background: #fff8e1;
+  color: #f9a825;
+}
+
+[data-theme="dark"] .severity-critical {
+  background: #3d1c1c;
+  color: #ef9a9a;
+}
+
+[data-theme="dark"] .severity-medium {
+  background: #3d2e1c;
+  color: #ffcc80;
+}
+
+[data-theme="dark"] .severity-minor {
+  background: #3d3a1c;
+  color: #fff176;
+}
+
+/* Note shown when executable provider is selected (no level toggles) */
+.executable-provider-note {
+  padding: 8px 12px;
+  background: var(--bg-tertiary, #f6f8fa);
+  border-radius: 6px;
+  font-size: 13px;
+  color: var(--fg-muted, #656d76);
+  margin-top: 8px;
+}
+
+[data-theme="dark"] .executable-provider-note {
+  background: rgba(56, 139, 253, 0.1);
+  color: var(--color-text-secondary, #8b949e);
+}

package/public/index.html

@@ -685,6 +685,25 @@
             text-align: right;
         }
 
+        /* Analysis-in-progress spinner for index page rows */
+        .index-analysis-spinner {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border: 2px solid var(--ai-primary);
+            border-top-color: transparent;
+            border-radius: 50%;
+            animation: index-spin 0.8s linear infinite;
+            margin-right: 6px;
+            vertical-align: middle;
+            flex-shrink: 0;
+        }
+
+        @keyframes index-spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
         .local-table .btn-repo-settings {
             margin-right: 4px;
         }
@@ -1430,6 +1449,7 @@
         </div>
     </div>
 
+    <script src="/js/ws-client.js"></script>
     <script src="/js/components/Toast.js"></script>
     <script src="/js/index.js"></script>
 </body>

package/public/js/components/AIPanel.js

@@ -1219,7 +1219,7 @@ class AIPanel {
                     ${indicator}
                     <div class="finding-content">
                         <span class="finding-title">${this.escapeHtml(title)}</span>
-                        ${category ? `<span class="finding-category">${this.escapeHtml(category)}</span>` : ''}
+                        ${category || finding.severity ? `<span class="finding-meta">${category ? `<span class="finding-category">${this.escapeHtml(category)}</span>` : ''}${finding.severity ? `<span class="severity-badge severity-${finding.severity}">${this.escapeHtml(finding.severity.toUpperCase())}</span>` : ''}</span>` : ''}
                         ${fileName ? `<span class="finding-location">${this.escapeHtml(fileName)}</span>` : ''}
                     </div>
                 </button>

package/public/js/components/AdvancedConfigTab.js

@@ -289,7 +289,7 @@ class AdvancedConfigTab {
         '2': { enabled: true, voices: [] },
         '3': { enabled: true, voices: [] }
       },
-      consolidation: { provider: this._defaultProvider || 'claude', model: this._defaultModel || 'sonnet', tier: 'balanced', timeout: AdvancedConfigTab.DEFAULT_TIMEOUT }
+      consolidation: { provider: this._defaultProvider || 'claude', model: this._defaultModel || 'sonnet', tier: 'balanced', timeout: this._getProviderDefaultTimeout(this._defaultProvider || 'claude') }
     };
   }
 
@@ -605,10 +605,11 @@ class AdvancedConfigTab {
       }
     });
 
-    // Provider change -> update model dropdowns
+    // Provider change -> update model dropdowns + timeout default
     panel.addEventListener('change', (e) => {
       if (e.target.classList.contains('voice-provider')) {
         this._updateModelDropdown(e.target);
+        this._applyProviderDefaultTimeout(e.target);
       }
       // Model change -> update tier to match model's recommended tier
       if (e.target.classList.contains('voice-model')) {
@@ -704,10 +705,13 @@ class AdvancedConfigTab {
 
   _populateProviderDropdown(select) {
     const currentValue = select.value;
+    const isConsolidation = select.dataset.target === 'orchestration';
     select.innerHTML = '';
     const providerIds = Object.keys(this.providers).filter(id => {
       const p = this.providers[id];
-      return !p.availability || p.availability.available;
+      if (p.availability && !p.availability.available) return false;
+      if (isConsolidation && p.capabilities?.consolidation === false) return false;
+      return true;
     }).sort((a, b) => (this.providers[a].name || a).localeCompare(this.providers[b].name || b));
 
     for (const id of providerIds) {
@@ -805,6 +809,7 @@ class AdvancedConfigTab {
     const newProviderSelect = voiceList.querySelector(`.voice-provider[data-level="${level}"][data-index="${index}"]`);
     if (newProviderSelect) {
       this._populateProviderDropdown(newProviderSelect);
+      this._applyProviderDefaultTimeout(newProviderSelect);
     }
 
     // Update remove button visibility for this level
@@ -894,6 +899,16 @@ class AdvancedConfigTab {
     iconBtn.classList.toggle('has-instructions', hasContent);
   }
 
+  /**
+   * Get the default timeout for a provider, falling back to the static DEFAULT_TIMEOUT.
+   * @param {string} providerId - Provider ID (e.g., 'pi', 'claude')
+   * @returns {number} Default timeout in ms
+   */
+  _getProviderDefaultTimeout(providerId) {
+    const provider = this.providers[providerId];
+    return provider?.defaultTimeout ?? AdvancedConfigTab.DEFAULT_TIMEOUT;
+  }
+
   /**
    * Update the clock/timeout icon styling to indicate non-default timeout.
    * @param {Element} panel - The council panel element
@@ -906,7 +921,9 @@ class AdvancedConfigTab {
     const iconBtn = wrapper?.querySelector(`.toggle-timeout-icon[data-level="${level}"][data-index="${index}"]`);
     if (!iconBtn) return;
 
-    const isNonDefault = parseInt(value, 10) !== AdvancedConfigTab.DEFAULT_TIMEOUT;
+    const providerId = wrapper?.querySelector('.voice-provider')?.value;
+    const defaultTimeout = this._getProviderDefaultTimeout(providerId);
+    const isNonDefault = parseInt(value, 10) !== defaultTimeout;
     iconBtn.classList.toggle('has-custom-timeout', isNonDefault);
   }
 
@@ -914,7 +931,10 @@ class AdvancedConfigTab {
     const iconBtn = panel.querySelector('#adv-orchestration-timeout-toggle');
     if (!iconBtn) return;
 
-    const isNonDefault = parseInt(value, 10) !== AdvancedConfigTab.DEFAULT_TIMEOUT;
+    const orchRow = panel.querySelector('#orchestration-voice');
+    const providerId = orchRow?.querySelector('.voice-provider')?.value;
+    const defaultTimeout = this._getProviderDefaultTimeout(providerId);
+    const isNonDefault = parseInt(value, 10) !== defaultTimeout;
     iconBtn.classList.toggle('has-custom-timeout', isNonDefault);
   }
 
@@ -929,6 +949,48 @@ class AdvancedConfigTab {
     iconBtn.classList.toggle('has-instructions', hasContent);
   }
 
+  /**
+   * When a voice's provider changes, update its timeout to the new provider's default,
+   * preserving explicit user overrides via Math.max when the user had customized the value.
+   * @param {HTMLSelectElement} providerSelect - The provider dropdown that changed
+   */
+  _applyProviderDefaultTimeout(providerSelect) {
+    const panel = this.modal.querySelector('#tab-panel-advanced');
+    if (!panel) return;
+
+    const providerId = providerSelect.value;
+    const newDefault = this._getProviderDefaultTimeout(providerId);
+    const oldProviderId = providerSelect.dataset.previousProvider;
+    const oldDefault = oldProviderId ? this._getProviderDefaultTimeout(oldProviderId) : null;
+
+    const isOrchestration = providerSelect.dataset.target === 'orchestration';
+    if (isOrchestration) {
+      const timeoutEl = panel.querySelector('#adv-orchestration-timeout');
+      if (timeoutEl) {
+        const currentValue = parseInt(timeoutEl.value, 10);
+        const resolvedTimeout = (oldDefault !== null && currentValue !== oldDefault)
+          ? Math.max(currentValue, newDefault)
+          : newDefault;
+        timeoutEl.value = String(resolvedTimeout);
+        this._updateOrchestrationTimeoutIcon(panel, String(resolvedTimeout));
+      }
+    } else {
+      const { level, index } = providerSelect.dataset;
+      const wrapper = providerSelect.closest('.participant-wrapper');
+      const timeoutEl = wrapper?.querySelector('.adv-timeout');
+      if (timeoutEl) {
+        const currentValue = parseInt(timeoutEl.value, 10);
+        const resolvedTimeout = (oldDefault !== null && currentValue !== oldDefault)
+          ? Math.max(currentValue, newDefault)
+          : newDefault;
+        timeoutEl.value = String(resolvedTimeout);
+        this._updateTimeoutIcon(panel, level, index, String(resolvedTimeout));
+      }
+    }
+
+    providerSelect.dataset.previousProvider = providerId;
+  }
+
   // --- Dirty state tracking ---
 
   _markDirty() {
@@ -1108,6 +1170,7 @@ class AdvancedConfigTab {
           if (providerSelect) {
             this._populateProviderDropdown(providerSelect);
             providerSelect.value = voice.provider;
+            providerSelect.dataset.previousProvider = voice.provider;
             this._updateModelDropdown(providerSelect);
             const modelSelect = row.querySelector('.voice-model');
             if (modelSelect) modelSelect.value = voice.model;
@@ -1121,13 +1184,17 @@ class AdvancedConfigTab {
             TimeoutSelect.mount(mount, { className: 'adv-timeout', title: 'Per-reviewer timeout' });
           }
           const timeoutEl = row?.querySelector('.adv-timeout');
+          const providerDefaultTimeout = this._getProviderDefaultTimeout(voice.provider);
           if (timeoutEl && voice.timeout) {
             timeoutEl.value = String(voice.timeout);
-            // Show the dropdown if non-default
-            if (voice.timeout !== AdvancedConfigTab.DEFAULT_TIMEOUT) {
+            // Show the dropdown if non-default for this provider
+            if (voice.timeout !== providerDefaultTimeout) {
               timeoutEl.style.display = '';
             }
             this._updateTimeoutIcon(panel, String(level), String(i), String(voice.timeout));
+          } else if (timeoutEl) {
+            // No saved timeout — apply the provider's default
+            timeoutEl.value = String(providerDefaultTimeout);
           }
 
           if (voice.customInstructions) {
@@ -1156,6 +1223,7 @@ class AdvancedConfigTab {
         if (providerSelect) {
           this._populateProviderDropdown(providerSelect);
           providerSelect.value = consolSection.provider;
+          providerSelect.dataset.previousProvider = consolSection.provider;
           this._updateModelDropdown(providerSelect);
           const modelSelect = orchRow.querySelector('.voice-model');
           if (modelSelect) modelSelect.value = consolSection.model;
@@ -1166,13 +1234,18 @@ class AdvancedConfigTab {
 
       // Restore consolidation timeout
       const orchTimeoutSelect = panel.querySelector('#adv-orchestration-timeout');
+      const orchProviderDefaultTimeout = this._getProviderDefaultTimeout(consolSection.provider);
       if (orchTimeoutSelect && consolSection.timeout) {
         orchTimeoutSelect.value = String(consolSection.timeout);
-        // Show the dropdown if non-default
-        if (consolSection.timeout !== AdvancedConfigTab.DEFAULT_TIMEOUT) {
+        // Show the dropdown if non-default for this provider
+        if (consolSection.timeout !== orchProviderDefaultTimeout) {
           orchTimeoutSelect.style.display = '';
         }
         this._updateOrchestrationTimeoutIcon(panel, String(consolSection.timeout));
+      } else if (orchTimeoutSelect) {
+        // No saved timeout — apply the provider's default
+        orchTimeoutSelect.value = String(orchProviderDefaultTimeout);
+        this._updateOrchestrationTimeoutIcon(panel, String(orchProviderDefaultTimeout));
       }
 
       // Restore consolidation custom instructions
@@ -1266,6 +1339,11 @@ class AdvancedConfigTab {
     }
     this._markClean();
     await this.loadCouncils();
+    const selector = this.modal.querySelector('#council-selector');
+    if (selector) {
+      selector.value = this.selectedCouncilId;
+      selector.classList.remove('new-council-selected');
+    }
   }
 
   /**