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

package/public/js/components/VoiceCentricConfigTab.js

@@ -525,10 +525,13 @@ class VoiceCentricConfigTab {
       }
     });
 
-    // Provider change -> update model dropdowns
+    // Provider change -> update model dropdowns + executable state + timeout default
     panel.addEventListener('change', (e) => {
       if (e.target.classList.contains('voice-provider')) {
         this._updateModelDropdown(e.target);
+        this._updateExecutableState(e.target);
+        this._updateLevelToggleState();
+        this._applyProviderDefaultTimeout(e.target);
       }
       // Model change -> update tier to match model's recommended tier
       if (e.target.classList.contains('voice-model')) {
@@ -597,13 +600,16 @@ class VoiceCentricConfigTab {
       TimeoutSelect.mount(mount, { className: 'vc-timeout', title: 'Per-reviewer timeout' });
     }
 
-    // Populate provider dropdown
+    // Populate provider dropdown and update executable state
     const newProviderSelect = list.querySelector(`.voice-provider[data-index="${index}"]`);
     if (newProviderSelect) {
       this._populateProviderDropdown(newProviderSelect);
+      this._applyProviderDefaultTimeout(newProviderSelect);
+      this._updateExecutableState(newProviderSelect);
     }
 
     this._updateRemoveButtonVisibility();
+    this._updateLevelToggleState();
     this._markDirty();
   }
 
@@ -619,6 +625,7 @@ class VoiceCentricConfigTab {
 
     this._reindexReviewers();
     this._updateRemoveButtonVisibility();
+    this._updateLevelToggleState();
     this._markDirty();
   }
 
@@ -669,6 +676,16 @@ class VoiceCentricConfigTab {
     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 ?? VoiceCentricConfigTab.DEFAULT_TIMEOUT;
+  }
+
   /**
    * Update the clock/timeout icon styling to indicate non-default timeout.
    * @param {Element} panel - The council panel element
@@ -680,7 +697,9 @@ class VoiceCentricConfigTab {
     const iconBtn = wrapper?.querySelector(`.toggle-timeout-icon[data-index="${index}"]`);
     if (!iconBtn) return;
 
-    const isNonDefault = parseInt(value, 10) !== VoiceCentricConfigTab.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);
   }
 
@@ -688,10 +707,56 @@ class VoiceCentricConfigTab {
     const iconBtn = panel.querySelector('#vc-orchestration-timeout-toggle');
     if (!iconBtn) return;
 
-    const isNonDefault = parseInt(value, 10) !== VoiceCentricConfigTab.DEFAULT_TIMEOUT;
+    const orchRow = panel.querySelector('#vc-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);
   }
 
+  /**
+   * 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-council');
+    if (!panel) return;
+
+    const providerId = providerSelect.value;
+    const newDefault = this._getProviderDefaultTimeout(providerId);
+    const oldProviderId = providerSelect.dataset.previousProvider;
+    const oldDefault = oldProviderId ? this._getProviderDefaultTimeout(oldProviderId) : null;
+
+    // Determine which timeout element to update
+    const isOrchestration = providerSelect.dataset.target === 'orchestration';
+    if (isOrchestration) {
+      const timeoutEl = panel.querySelector('#vc-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 idx = providerSelect.dataset.index;
+      const wrapper = providerSelect.closest('.vc-reviewer');
+      const timeoutEl = wrapper?.querySelector('.vc-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, idx, String(resolvedTimeout));
+      }
+    }
+
+    providerSelect.dataset.previousProvider = providerId;
+  }
+
   // --- Dropdown / model management ---
 
   _updateAllVoiceDropdowns() {
@@ -779,6 +844,87 @@ class VoiceCentricConfigTab {
     }
   }
 
+  /**
+   * Update UI state for a reviewer row based on whether its provider is executable.
+   * Hides the tier dropdown and shows a note for executable providers.
+   * @param {HTMLSelectElement} providerSelect - The provider dropdown that changed
+   */
+  _updateExecutableState(providerSelect) {
+    const providerId = providerSelect.value;
+    const provider = this.providers[providerId];
+    const isExecutable = provider?.isExecutable || false;
+    const noCustomInstructions = provider?.capabilities?.custom_instructions === false;
+    const container = providerSelect.closest('.voice-row');
+    if (!container) return;
+
+    const tierSelect = container.querySelector('.voice-tier');
+    if (tierSelect) {
+      tierSelect.style.display = isExecutable ? 'none' : '';
+    }
+
+    // Hide per-reviewer instructions toggle and area when provider doesn't support them
+    const idx = providerSelect.dataset?.index;
+    const instrToggle = container.querySelector(`.toggle-instructions-icon[data-index="${idx}"]`);
+    if (instrToggle) {
+      instrToggle.style.display = noCustomInstructions ? 'none' : '';
+    }
+    const instrArea = container.querySelector(`.voice-instructions-area[data-index="${idx}"]`);
+    if (instrArea && noCustomInstructions) {
+      instrArea.style.display = 'none';
+    }
+
+    // Add or remove the executable note
+    let note = container.querySelector('.executable-note');
+    if (isExecutable && !note) {
+      note = document.createElement('span');
+      note.className = 'executable-note';
+      note.textContent = 'External tool';
+      note.title = 'External tool \u2014 runs its own analysis pipeline';
+      container.appendChild(note);
+    } else if (!isExecutable && note) {
+      note.remove();
+    }
+  }
+
+  /**
+   * Update level toggle state based on whether all voices are executable.
+   * If all voices are executable, disable level checkboxes and show a note.
+   * If any native voice is present, re-enable.
+   */
+  _updateLevelToggleState() {
+    const panel = this.modal.querySelector('#tab-panel-council');
+    if (!panel) return;
+
+    const reviewers = panel.querySelectorAll('.vc-reviewer');
+    let allExecutable = reviewers.length > 0;
+    reviewers.forEach(wrapper => {
+      const providerSelect = wrapper.querySelector('.voice-provider');
+      const providerId = providerSelect?.value;
+      const provider = this.providers[providerId];
+      if (!provider?.isExecutable) {
+        allExecutable = false;
+      }
+    });
+
+    const checkboxes = panel.querySelectorAll('.vc-level-checkbox');
+    checkboxes.forEach(cb => {
+      cb.disabled = allExecutable;
+    });
+
+    // Add or remove the all-executable note
+    const togglesContainer = panel.querySelector('.vc-level-toggles');
+    if (!togglesContainer) return;
+    let note = togglesContainer.querySelector('.vc-levels-disabled-note');
+    if (allExecutable && !note) {
+      note = document.createElement('p');
+      note.className = 'vc-levels-disabled-note section-hint-text';
+      note.textContent = 'Level selection does not apply when all reviewers are external tools';
+      togglesContainer.appendChild(note);
+    } else if (!allExecutable && note) {
+      note.remove();
+    }
+  }
+
   /**
    * Mount all TimeoutSelect instances on the panel.
    * Called after HTML is injected into the DOM.
@@ -808,10 +954,11 @@ class VoiceCentricConfigTab {
   // --- Config read/write ---
 
   _defaultConfig() {
+    const defaultTimeout = this._getProviderDefaultTimeout(this._defaultProvider);
     return {
-      voices: [{ provider: this._defaultProvider, model: this._defaultModel, tier: 'balanced', timeout: VoiceCentricConfigTab.DEFAULT_TIMEOUT }],
+      voices: [{ provider: this._defaultProvider, model: this._defaultModel, tier: 'balanced', timeout: defaultTimeout }],
       enabledLevels: [1, 2, 3],
-      orchestration: { provider: this._defaultProvider, model: this._defaultModel, tier: 'balanced', timeout: VoiceCentricConfigTab.DEFAULT_TIMEOUT }
+      orchestration: { provider: this._defaultProvider, model: this._defaultModel, tier: 'balanced', timeout: defaultTimeout }
     };
   }
 
@@ -836,7 +983,9 @@ class VoiceCentricConfigTab {
       const timeout = timeoutSelect ? parseInt(timeoutSelect.value, 10) : VoiceCentricConfigTab.DEFAULT_TIMEOUT;
       const idx = wrapper.dataset.index;
       const instrInput = wrapper.querySelector(`.voice-instructions-input[data-index="${idx}"]`);
-      const customInstructions = instrInput?.value?.trim() || undefined;
+      const providerInfo = this.providers[provider];
+      const supportsCustomInstructions = providerInfo?.capabilities?.custom_instructions !== false;
+      const customInstructions = supportsCustomInstructions ? (instrInput?.value?.trim() || undefined) : undefined;
 
       if (provider && model) {
         const voice = { provider, model, tier, timeout };
@@ -939,7 +1088,7 @@ class VoiceCentricConfigTab {
       list.innerHTML = '';
       const voices = vcConfig.voices || [];
       if (voices.length === 0) {
-        voices.push({ provider: this._defaultProvider, model: this._defaultModel, tier: 'balanced', timeout: VoiceCentricConfigTab.DEFAULT_TIMEOUT });
+        voices.push({ provider: this._defaultProvider, model: this._defaultModel, tier: 'balanced', timeout: this._getProviderDefaultTimeout(this._defaultProvider) });
       }
       voices.forEach((voice, i) => {
         const wrapper = document.createElement('div');
@@ -954,7 +1103,9 @@ class VoiceCentricConfigTab {
         if (providerSelect) {
           this._populateProviderDropdown(providerSelect);
           providerSelect.value = voice.provider;
+          providerSelect.dataset.previousProvider = voice.provider;
           this._updateModelDropdown(providerSelect);
+          this._updateExecutableState(providerSelect);
           const modelSelect = row.querySelector('.voice-model');
           if (modelSelect) modelSelect.value = voice.model;
           const tierSelect = row.querySelector('.voice-tier');
@@ -965,13 +1116,17 @@ class VoiceCentricConfigTab {
             TimeoutSelect.mount(mount, { className: 'vc-timeout', title: 'Per-reviewer timeout' });
           }
           const timeoutEl = row.querySelector('.vc-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 !== VoiceCentricConfigTab.DEFAULT_TIMEOUT) {
+            // Show the dropdown if non-default for this provider
+            if (voice.timeout !== providerDefaultTimeout) {
               timeoutEl.style.display = '';
             }
             this._updateTimeoutIcon(panel, String(i), String(voice.timeout));
+          } else if (timeoutEl) {
+            // No saved timeout — apply the provider's default
+            timeoutEl.value = String(providerDefaultTimeout);
           }
         }
 
@@ -985,6 +1140,7 @@ class VoiceCentricConfigTab {
       });
 
       this._updateRemoveButtonVisibility();
+      this._updateLevelToggleState();
     }
 
     // Apply level toggles
@@ -1002,6 +1158,7 @@ class VoiceCentricConfigTab {
         if (providerSelect) {
           this._populateProviderDropdown(providerSelect);
           providerSelect.value = vcConfig.orchestration.provider;
+          providerSelect.dataset.previousProvider = vcConfig.orchestration.provider;
           this._updateModelDropdown(providerSelect);
           const modelSelect = orchRow.querySelector('.voice-model');
           if (modelSelect) modelSelect.value = vcConfig.orchestration.model;
@@ -1012,13 +1169,18 @@ class VoiceCentricConfigTab {
 
       // Restore orchestration timeout
       const orchTimeoutSelect = panel.querySelector('#vc-orchestration-timeout');
+      const orchProviderDefaultTimeout = this._getProviderDefaultTimeout(vcConfig.orchestration.provider);
       if (orchTimeoutSelect && vcConfig.orchestration.timeout) {
         orchTimeoutSelect.value = String(vcConfig.orchestration.timeout);
-        // Show the dropdown if non-default
-        if (vcConfig.orchestration.timeout !== VoiceCentricConfigTab.DEFAULT_TIMEOUT) {
+        // Show the dropdown if non-default for this provider
+        if (vcConfig.orchestration.timeout !== orchProviderDefaultTimeout) {
           orchTimeoutSelect.style.display = '';
         }
         this._updateOrchestrationTimeoutIcon(panel, String(vcConfig.orchestration.timeout));
+      } else if (orchTimeoutSelect) {
+        // No saved timeout — apply the provider's default
+        orchTimeoutSelect.value = String(orchProviderDefaultTimeout);
+        this._updateOrchestrationTimeoutIcon(panel, String(orchProviderDefaultTimeout));
       }
 
       // Restore orchestration custom instructions
@@ -1245,6 +1407,11 @@ class VoiceCentricConfigTab {
     }
     this._markClean();
     await this.loadCouncils();
+    const selector = this.modal.querySelector('#vc-council-selector');
+    if (selector) {
+      selector.value = this.selectedCouncilId;
+      selector.classList.remove('new-council-selected');
+    }
   }
 
   async _postCouncil(name, config) {

package/public/js/index.js

@@ -553,6 +553,9 @@
       container.classList.remove('recent-reviews-loading');
       localReviewsPagination.loaded = true;
 
+      // Apply analysis-in-progress spinners to any rows with active analyses
+      fetchAndApplyActiveAnalyses();
+
     } catch (error) {
       console.error('Error loading local reviews:', error);
       container.innerHTML =
@@ -593,6 +596,9 @@
       tbody.insertAdjacentHTML('beforeend', data.sessions.map(renderLocalReviewRow).join(''));
       if (localSelection.active) localSelection.onRowsAdded();
 
+      // Apply analysis spinners to newly added rows
+      fetchAndApplyActiveAnalyses();
+
       localReviewsPagination.lastTimestamp = data.sessions[data.sessions.length - 1].updated_at;
       localReviewsPagination.hasMore = !!data.hasMore;
 
@@ -764,8 +770,10 @@
       ? '<a href="https://github.com/' + encodeURIComponent(review.author) + '" target="_blank" rel="noopener">' + escapeHtml(review.author) + '</a>'
       : '';
 
+    var reviewIdAttr = review.review_id ? ' data-analysis-review-id="' + review.review_id + '"' : '';
+
     return '' +
-      '<tr data-review-id="' + review.id + '">' +
+      '<tr data-review-id="' + review.id + '"' + reviewIdAttr + '>' +
         '<td class="col-repo">' + escapeHtml(review.repository) + '</td>' +
         '<td class="col-pr"><a href="' + link + '">#' + review.pr_number + '</a></td>' +
         '<td class="col-title" title="' + escapeHtml(review.pr_title) + '">' + escapeHtml(review.pr_title) + '</td>' +
@@ -927,6 +935,9 @@
       container.innerHTML = html;
       container.classList.remove('recent-reviews-loading');
 
+      // Apply analysis-in-progress spinners to any rows with active analyses
+      fetchAndApplyActiveAnalyses();
+
     } catch (error) {
       console.error('Error loading recent reviews:', error);
       container.innerHTML =
@@ -992,6 +1003,9 @@
       tbody.insertAdjacentHTML('beforeend', data.reviews.map(renderRecentReviewRow).join(''));
       if (prSelection.active) prSelection.onRowsAdded();
 
+      // Apply analysis spinners to newly added rows
+      fetchAndApplyActiveAnalyses();
+
       // Update pagination state - advance the cursor
       recentReviewsPagination.lastTimestamp = data.reviews[data.reviews.length - 1].last_accessed_at;
       recentReviewsPagination.hasMore = !!data.hasMore;
@@ -1138,6 +1152,7 @@
         window.__pairReview.chatProviders = chatProviders;
         window.__pairReview.enableGraphite = config.enable_graphite === true;
         window.__pairReview.chatSpinner = config.chat_spinner || 'dots';
+        window.__pairReview.chatEnterToSend = config.chat_enter_to_send !== false;
 
         // Set chat feature state based on config and provider availability
         let chatState = 'disabled';
@@ -1924,4 +1939,107 @@
     }
   });
 
+  // ─── Analysis-in-progress Spinners ──────────────────────────────────────────
+
+  /** Set of reviewIds (integers) that currently have a spinner on the page */
+  var activeSpinnerReviewIds = new Set();
+
+  /**
+   * Find a table row matching the given reviewId.
+   * Checks both PR rows (data-analysis-review-id) and local rows (data-session-id).
+   * @param {number} reviewId - The reviews.id to find
+   * @returns {HTMLElement|null}
+   */
+  function findRowByReviewId(reviewId) {
+    return document.querySelector(
+      'tr[data-analysis-review-id="' + reviewId + '"], tr[data-session-id="' + reviewId + '"]'
+    );
+  }
+
+  /**
+   * Add a spinner to the title/name cell of a row.
+   * @param {HTMLElement} row - The <tr> element
+   * @param {number} reviewId - The reviewId to track
+   */
+  function addSpinnerToRow(row, reviewId) {
+    if (row.querySelector('.index-analysis-spinner')) return;
+
+    var spinner = document.createElement('span');
+    spinner.className = 'index-analysis-spinner';
+    spinner.title = 'Analysis in progress';
+
+    // PR rows: prepend in .col-title; local rows: prepend in .col-local-name
+    var cell = row.querySelector('.col-title') || row.querySelector('.col-local-name');
+    if (cell) {
+      cell.insertBefore(spinner, cell.firstChild);
+    }
+    activeSpinnerReviewIds.add(reviewId);
+  }
+
+  /**
+   * Remove a spinner from a row.
+   * @param {HTMLElement} row - The <tr> element
+   * @param {number} reviewId - The reviewId to untrack
+   */
+  function removeSpinnerFromRow(row, reviewId) {
+    var spinner = row.querySelector('.index-analysis-spinner');
+    if (spinner) spinner.remove();
+    activeSpinnerReviewIds.delete(reviewId);
+  }
+
+  /**
+   * Fetch active analyses and apply/remove spinners to matching rows.
+   */
+  function fetchAndApplyActiveAnalyses() {
+    fetch('/api/analyses/active')
+      .then(function (res) { return res.json(); })
+      .then(function (data) {
+        if (!data.active) return;
+
+        var activeReviewIds = new Set();
+        data.active.forEach(function (entry) {
+          var rid = entry.reviewId;
+          if (rid == null) return;
+          activeReviewIds.add(rid);
+          var row = findRowByReviewId(rid);
+          if (row) addSpinnerToRow(row, rid);
+        });
+
+        // Remove spinners for analyses that are no longer active
+        activeSpinnerReviewIds.forEach(function (rid) {
+          if (!activeReviewIds.has(rid)) {
+            var row = findRowByReviewId(rid);
+            if (row) removeSpinnerFromRow(row, rid);
+            else activeSpinnerReviewIds.delete(rid);
+          }
+        });
+      })
+      .catch(function () { /* ignore — spinners are best-effort */ });
+  }
+
+  // Subscribe to real-time analysis events via WebSocket
+  if (window.wsClient) {
+    window.wsClient.connect();
+    window.wsClient.subscribe('index:analyses', function (msg) {
+      var reviewId = msg.reviewId;
+      if (reviewId == null) return;
+
+      if (msg.type === 'analysis_started') {
+        var row = findRowByReviewId(reviewId);
+        if (row) addSpinnerToRow(row, reviewId);
+      } else if (msg.type === 'analysis_ended') {
+        var endRow = findRowByReviewId(reviewId);
+        if (endRow) removeSpinnerFromRow(endRow, reviewId);
+        else activeSpinnerReviewIds.delete(reviewId);
+      }
+    });
+
+    // On reconnect, re-fetch active analyses to catch anything missed
+    window.addEventListener('wsReconnected', fetchAndApplyActiveAnalyses);
+  }
+
+  // Expose for use after data loads (loadRecentReviews / loadLocalReviews)
+  window.__pairReview = window.__pairReview || {};
+  window.__pairReview.refreshAnalysisSpinners = fetchAndApplyActiveAnalyses;
+
 })();