@in-the-loop-labs/pair-review 3.6.0 → 3.7.1

package/public/index.html

@@ -25,6 +25,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/analysis-config.css">
 
     <style>
         :root {
@@ -1577,8 +1578,18 @@
     </div>
 
     <script src="/js/ws-client.js"></script>
+    <script src="/js/utils/markdown.js"></script>
+    <script src="/js/utils/tier-icons.js"></script>
+    <script src="/js/utils/storage-keys.js"></script>
+    <script src="/js/utils/provider-model.js"></script>
     <script src="/js/components/Toast.js"></script>
     <script src="/js/components/UpdateBanner.js"></script>
+    <script src="/js/components/ConfirmDialog.js"></script>
+    <script src="/js/components/TextInputDialog.js"></script>
+    <script src="/js/components/TimeoutSelect.js"></script>
+    <script src="/js/components/AnalysisConfigModal.js"></script>
+    <script src="/js/components/VoiceCentricConfigTab.js"></script>
+    <script src="/js/components/AdvancedConfigTab.js"></script>
     <script src="/js/index.js"></script>
 </body>
 </html>

package/public/js/components/AIPanel.js

@@ -44,6 +44,10 @@ class AIPanel {
         // Track selected item by stable identifier for restoration
         this.selectedItemKey = null; // Format: "file:lineNumber:itemType:identity"
 
+        // Monotonic token so a fast move between items that supersedes an
+        // in-flight scrollTo* can tell the older call to bail after its await.
+        this._navGen = 0;
+
         // Canonical file order for consistent sorting across components
         this.fileOrder = new Map(); // Map of file path -> index
 
@@ -1130,9 +1134,19 @@ class AIPanel {
     }
 
     /**
-     * Expand a file if it is collapsed
+     * Expand a file if it is collapsed.
+     *
+     * Return contract (callers must handle both):
+     *   - `false` when nothing was expanded (no file, no wrapper, or already
+     *     expanded), OR a truthy non-thenable for the DOM-only fallback.
+     *   - a Promise when it routed through `prManager.toggleFileCollapse`,
+     *     which is async (it renders the lazy file body before revealing it).
+     * Scroll callers await the Promise so the row lookup runs against a
+     * rendered, visible body; the synchronous fast path is preserved when no
+     * expansion is needed.
+     *
      * @param {string} file - The file path
-     * @returns {boolean} True if the file was expanded
+     * @returns {boolean|Promise<*>} See contract above.
      */
     expandFileIfCollapsed(file) {
         if (!file) return false;
@@ -1145,17 +1159,19 @@ class AIPanel {
 
         // Check if collapsed
         if (fileWrapper.classList.contains('collapsed')) {
-            // Use prManager's toggle method if available (keeps state in sync)
+            // Use prManager's toggle method if available (keeps state in sync).
             const filePath = fileWrapper.dataset.fileName;
             if (window.prManager?.toggleFileCollapse) {
-                window.prManager.toggleFileCollapse(filePath);
-            } else {
-                // Fallback: directly manipulate the DOM
-                fileWrapper.classList.remove('collapsed');
-                const header = fileWrapper.querySelector('.d2h-file-header');
-                if (header && window.DiffRenderer) {
-                    window.DiffRenderer.updateFileHeaderState(header, true);
-                }
+                // Async: renders the lazy body + removes `collapsed`. Hand the
+                // Promise back so the caller can await render completion rather
+                // than guessing with a fixed timeout.
+                return window.prManager.toggleFileCollapse(filePath);
+            }
+            // Fallback: directly manipulate the DOM (no lazy render path).
+            fileWrapper.classList.remove('collapsed');
+            const header = fileWrapper.querySelector('.d2h-file-header');
+            if (header && window.DiffRenderer) {
+                window.DiffRenderer.updateFileHeaderState(header, true);
             }
             return true;
         }
@@ -1166,11 +1182,19 @@ class AIPanel {
     /**
      * Scroll to an AI finding/suggestion in the diff view
      */
-    scrollToFinding(findingId, file, line) {
+    async scrollToFinding(findingId, file, line) {
+        const myGen = ++this._navGen;
         // Expand the file first if it's collapsed
-        const wasExpanded = this.expandFileIfCollapsed(file);
+        const expansion = this.expandFileIfCollapsed(file);
+        if (expansion && typeof expansion.then === 'function') await expansion;
+        // Always render the target's lazy body — an expanded-but-offscreen
+        // body has no suggestion rows until rendered, so the lookup below
+        // would miss on the first attempt (expansion only covers the
+        // collapsed case).
+        if (file && window.prManager?.ensureFileBodyRendered) {
+            try { await window.prManager.ensureFileBodyRendered(file); } catch { /* best effort */ }
+        }
 
-        // Small delay if we expanded to allow DOM to update
         const doScroll = () => {
             let targetSuggestion = null;
 
@@ -1205,34 +1229,54 @@ class AIPanel {
 
             if (targetSuggestion) {
                 const minimizer = window.prManager?.commentMinimizer;
+                let scrollTarget = targetSuggestion;
                 if (minimizer?.active) {
                     // Expand file-level comments so the target becomes visible
                     minimizer.expandForElement(targetSuggestion);
                     // Comments are minimized — scroll to the parent diff line instead
-                    const diffRow = minimizer.findDiffRowFor(targetSuggestion);
-                    (diffRow || targetSuggestion).scrollIntoView({ behavior: 'smooth', block: 'center' });
-                } else {
-                    targetSuggestion.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    scrollTarget = minimizer.findDiffRowFor(targetSuggestion) || targetSuggestion;
                 }
+                this._scrollDiffTarget(scrollTarget);
                 targetSuggestion.classList.add('current-suggestion');
                 setTimeout(() => targetSuggestion.classList.remove('current-suggestion'), 2000);
             }
         };
 
-        if (wasExpanded) {
-            // Give the DOM a moment to update after expanding
-            setTimeout(doScroll, 50);
+        // A newer navigation took over while we awaited — let it win.
+        if (myGen !== this._navGen) return;
+        doScroll();
+    }
+
+    /**
+     * Scroll a diff-panel element into view, preferring the stable helper
+     * (re-corrects after lazy file bodies render mid-scroll and shift
+     * layout). Fire-and-forget.
+     * @param {Element} target
+     */
+    _scrollDiffTarget(target) {
+        // Land the target at the top of the diff panel (scroll-margin-top in
+        // pr.css offsets it below the sticky toolbar + file header).
+        const options = { behavior: 'smooth', block: 'start' };
+        if (window.ScrollUtils?.scrollIntoViewStable) {
+            window.ScrollUtils.scrollIntoViewStable(target, options);
         } else {
-            doScroll();
+            target.scrollIntoView(options);
         }
     }
 
     /**
      * Scroll to a user comment in the diff view
      */
-    scrollToComment(commentId, file, line) {
+    async scrollToComment(commentId, file, line) {
+        const myGen = ++this._navGen;
         // Expand the file first if it's collapsed
-        const wasExpanded = this.expandFileIfCollapsed(file);
+        const expansion = this.expandFileIfCollapsed(file);
+        if (expansion && typeof expansion.then === 'function') await expansion;
+        // Always render the target's lazy body — comment rows don't exist
+        // inside an unrendered body, so the lookup below would miss.
+        if (file && window.prManager?.ensureFileBodyRendered) {
+            try { await window.prManager.ensureFileBodyRendered(file); } catch { /* best effort */ }
+        }
 
         const doScroll = () => {
             let targetElement = null;
@@ -1275,13 +1319,13 @@ class AIPanel {
 
             if (targetElement) {
                 const minimizer = window.prManager?.commentMinimizer;
+                let scrollTarget = targetElement;
                 if (minimizer?.active) {
                     minimizer.expandForElement(targetElement);
                     const diffRow = isFileLevel ? null : minimizer.findDiffRowFor(targetElement);
-                    (diffRow || targetElement).scrollIntoView({ behavior: 'smooth', block: 'center' });
-                } else {
-                    targetElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    scrollTarget = diffRow || targetElement;
                 }
+                this._scrollDiffTarget(scrollTarget);
                 // Add highlight effect
                 const commentDiv = isFileLevel ? targetElement : targetElement.querySelector('.user-comment');
                 if (commentDiv) {
@@ -1291,12 +1335,9 @@ class AIPanel {
             }
         };
 
-        if (wasExpanded) {
-            // Give the DOM a moment to update after expanding
-            setTimeout(doScroll, 50);
-        } else {
-            doScroll();
-        }
+        // A newer navigation took over while we awaited — let it win.
+        if (myGen !== this._navGen) return;
+        doScroll();
     }
 
     /**
@@ -1311,9 +1352,16 @@ class AIPanel {
      * @param {string} file - File path for collapse-expand fallback
      * @param {string|number} line - Anchor line; used for file/line fallback
      */
-    scrollToExternalThread(threadId, source, file, line) {
+    async scrollToExternalThread(threadId, source, file, line) {
+        const myGen = ++this._navGen;
         // Expand the file first if it's collapsed
-        const wasExpanded = this.expandFileIfCollapsed(file);
+        const expansion = this.expandFileIfCollapsed(file);
+        if (expansion && typeof expansion.then === 'function') await expansion;
+        // Always render the target's lazy body — external thread rows don't
+        // exist inside an unrendered body, so the lookup below would miss.
+        if (file && window.prManager?.ensureFileBodyRendered) {
+            try { await window.prManager.ensureFileBodyRendered(file); } catch { /* best effort */ }
+        }
 
         const doScroll = () => {
             let target = null;
@@ -1354,13 +1402,12 @@ class AIPanel {
 
             if (target) {
                 const minimizer = window.prManager?.commentMinimizer;
+                let scrollTarget = target;
                 if (minimizer?.active) {
                     minimizer.expandForElement(target);
-                    const diffRow = minimizer.findDiffRowFor(target);
-                    (diffRow || target).scrollIntoView({ behavior: 'smooth', block: 'center' });
-                } else {
-                    target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    scrollTarget = minimizer.findDiffRowFor(target) || target;
                 }
+                this._scrollDiffTarget(scrollTarget);
 
                 // Transient focus flash. The class is removed after 2s — if
                 // the row is rebuilt before then, the class is lost with it,
@@ -1370,11 +1417,9 @@ class AIPanel {
             }
         };
 
-        if (wasExpanded) {
-            setTimeout(doScroll, 50);
-        } else {
-            doScroll();
-        }
+        // A newer navigation took over while we awaited — let it win.
+        if (myGen !== this._navGen) return;
+        doScroll();
     }
 
     // ========================================

package/public/js/components/AdvancedConfigTab.js

@@ -53,6 +53,12 @@ class AdvancedConfigTab {
     this._injected = false;
     this._councilsLoaded = false;
 
+    // Default orchestration provider/model for new councils, updated via
+    // setDefaultOrchestration(). Seeded here so _defaultConfig() is coherent
+    // even if reset() runs before setDefaultOrchestration().
+    this._defaultProvider = 'claude';
+    this._defaultModel = 'sonnet';
+
     // Dirty state tracking
     this._isDirty = false;
 
@@ -179,6 +185,37 @@ class AdvancedConfigTab {
    */
   setDefaultCouncilId(councilId) {
     this._pendingDefaultCouncilId = councilId;
+    // On a cached reopen the councils are already loaded, so loadCouncils() —
+    // and the _renderCouncilSelector() call that applies the pending default —
+    // will not run again (the modal instance is reused; see AnalysisConfigModal
+    // caching on window.analysisConfigModal). Apply it now so the saved/default
+    // council is restored instead of being silently dropped onto a blank
+    // "+ New Council" selection.
+    if (this._councilsLoaded && this._injected) {
+      this._renderCouncilSelector();
+    }
+  }
+
+  /**
+   * Reset selection and editor state for a fresh modal open.
+   *
+   * The AnalysisConfigModal (and therefore this tab) is reused across runs — and
+   * in the index/bulk flow, across different repositories. Without this reset a
+   * council selected in a previous run (or its pending default / dirty edits)
+   * would carry over and could be displayed or submitted for the next batch.
+   */
+  reset() {
+    this.selectedCouncilId = null;
+    this._pendingDefaultCouncilId = null;
+    this._isDirty = false;
+    if (!this._injected) return;
+    const selector = this.modal.querySelector('#council-selector');
+    if (selector) {
+      selector.value = '';
+      selector.classList.add('new-council-selected');
+    }
+    this._applyConfigToUI(this._defaultConfig());
+    this._markClean();
   }
 
   /**
@@ -283,13 +320,23 @@ class AdvancedConfigTab {
   }
 
   _defaultConfig() {
+    const provider = this._defaultProvider || 'claude';
+    const model = this._defaultModel || 'sonnet';
+    const timeout = this._getProviderDefaultTimeout(provider);
+    // Seed one reviewer voice per enabled level. The server validator rejects an
+    // enabled level with an empty voices array (councils.js: "voices must be a
+    // non-empty array when enabled"), and _applyConfigToUI() wipes a level's row
+    // list when voices is empty — so an empty default would leave every level
+    // enabled with zero reviewer rows and fail at analysis kickoff. A fresh voice
+    // object per level avoids shared-reference aliasing.
+    const seedVoice = () => ({ provider, model, tier: 'balanced', timeout });
     return {
       levels: {
-        '1': { enabled: true, voices: [] },
-        '2': { enabled: true, voices: [] },
-        '3': { enabled: true, voices: [] }
+        '1': { enabled: true, voices: [seedVoice()] },
+        '2': { enabled: true, voices: [seedVoice()] },
+        '3': { enabled: true, voices: [seedVoice()] }
       },
-      consolidation: { provider: this._defaultProvider || 'claude', model: this._defaultModel || 'sonnet', tier: 'balanced', timeout: this._getProviderDefaultTimeout(this._defaultProvider || 'claude') }
+      consolidation: { provider, model, tier: 'balanced', timeout }
     };
   }
 
@@ -1432,3 +1479,8 @@ class AdvancedConfigTab {
 if (typeof window !== 'undefined') {
   window.AdvancedConfigTab = AdvancedConfigTab;
 }
+
+// Export for unit testing (Node/CommonJS environment)
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { AdvancedConfigTab };
+}

package/public/js/components/AnalysisConfigModal.js

@@ -625,6 +625,15 @@ class AnalysisConfigModal {
    * Select a model
    */
   selectModel(modelId) {
+    // Guard: never store a model that doesn't belong to the current provider.
+    // Callers can pass a model resolved from a different scope (e.g. 'opus'
+    // while the provider is 'gemini'); fall back to the provider's default so
+    // the UI always shows a selected card and submissions carry a valid pair.
+    if (modelId && this.models.length && !this.models.some(m => m.id === modelId)) {
+      const fallback = this.models.find(m => m.default) || this.models[0];
+      modelId = fallback ? fallback.id : modelId;
+    }
+
     this.selectedModel = modelId;
 
     // Update UI
@@ -897,42 +906,41 @@ class AnalysisConfigModal {
     // Build three-tab layout
     this._injectTabLayout(options);
 
-    // Initialize voice-centric council tab
+    // Re-baseline council-tab state every open. The modal is reused across runs
+    // (and across repositories in the bulk flow), so always reset selection and
+    // pass normalized values — including empties — so a previous run's repo
+    // instructions, council selection, or dirty edits cannot bleed into the next.
+    const councilDefault = options.lastCouncilId || options.defaultCouncilId || null;
+
+    // Initialize voice-centric council tab.
+    //
+    // Order matters: setProviders() and setDefaultOrchestration() must run BEFORE
+    // reset(), because reset() repaints the UI from _defaultConfig(), which reads
+    // _defaultProvider/_defaultModel and the provider dropdown data. Calling reset()
+    // first would paint stale (previous-open) provider/model values on the reused
+    // modal. setDefaultCouncilId() runs last so any saved/default council is applied
+    // on top of the freshly reset defaults — including on cached reopens.
     if (this.councilTab) {
       const councilPanel = this.modal.querySelector('#tab-panel-council');
       this.councilTab.inject(councilPanel);
       this.councilTab.setProviders(this.providers);
-
-      if (options.repoInstructions) {
-        this.councilTab.setRepoInstructions(options.repoInstructions);
-      }
-      if (options.lastInstructions) {
-        this.councilTab.setLastInstructions(options.lastInstructions);
-      }
       this.councilTab.setDefaultOrchestration(options.currentProvider, options.currentModel);
-      const councilDefault = options.lastCouncilId || options.defaultCouncilId || null;
-      if (councilDefault) {
-        this.councilTab.setDefaultCouncilId(councilDefault);
-      }
+      this.councilTab.reset();
+      this.councilTab.setRepoInstructions(options.repoInstructions || '');
+      this.councilTab.setLastInstructions(options.lastInstructions || '');
+      this.councilTab.setDefaultCouncilId(councilDefault);
     }
 
-    // Initialize advanced (level-centric) tab
+    // Initialize advanced (level-centric) tab — same ordering rationale as above.
     if (this.advancedTab) {
       const advancedPanel = this.modal.querySelector('#tab-panel-advanced');
       this.advancedTab.inject(advancedPanel);
       this.advancedTab.setProviders(this.providers);
-
-      if (options.repoInstructions) {
-        this.advancedTab.setRepoInstructions(options.repoInstructions);
-      }
-      if (options.lastInstructions) {
-        this.advancedTab.setLastInstructions(options.lastInstructions);
-      }
       this.advancedTab.setDefaultOrchestration(options.currentProvider, options.currentModel);
-      const councilDefault = options.lastCouncilId || options.defaultCouncilId || null;
-      if (councilDefault) {
-        this.advancedTab.setDefaultCouncilId(councilDefault);
-      }
+      this.advancedTab.reset();
+      this.advancedTab.setRepoInstructions(options.repoInstructions || '');
+      this.advancedTab.setLastInstructions(options.lastInstructions || '');
+      this.advancedTab.setDefaultCouncilId(councilDefault);
     }
 
     // Set initial provider and model
@@ -942,7 +950,11 @@ class AnalysisConfigModal {
       // Default to first available provider
       this.selectProvider(Object.keys(this.providers)[0]);
     }
-    if (options.currentModel) {
+    // Only honour currentModel when it belongs to the selected provider.
+    // selectProvider() has already chosen a valid model for the provider (via
+    // tier matching); applying a foreign model here (e.g. 'opus' under 'gemini')
+    // would leave no model card selected and submit an invalid pair.
+    if (options.currentModel && this.models.some(m => m.id === options.currentModel)) {
       this.selectModel(options.currentModel);
     }
 
@@ -1434,3 +1446,7 @@ class AnalysisConfigModal {
 if (typeof window !== 'undefined') {
   window.AnalysisConfigModal = AnalysisConfigModal;
 }
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { AnalysisConfigModal };
+}

package/public/js/components/ChatPanel.js

@@ -4613,7 +4613,17 @@ class ChatPanel {
     const isVisible = rect.top >= 0 && rect.bottom <= window.innerHeight;
 
     if (!isVisible) {
-      primaryRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      // Stable variant re-corrects after lazy file bodies render mid-scroll
+      // and shift the layout (plain scrollIntoView lands off target the
+      // first time on large diffs). Fire-and-forget.
+      // Land the target at the top of the diff panel (scroll-margin-top in
+      // pr.css offsets it below the sticky toolbar + file header).
+      const scrollOptions = { behavior: 'smooth', block: 'start' };
+      if (window.ScrollUtils?.scrollIntoViewStable) {
+        window.ScrollUtils.scrollIntoViewStable(primaryRow, scrollOptions);
+      } else {
+        primaryRow.scrollIntoView(scrollOptions);
+      }
     }
 
     // Apply the highlight to all target rows