@in-the-loop-labs/pair-review 3.5.2 → 3.7.0

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

@@ -1130,9 +1130,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 +1155,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;
         }
@@ -1168,9 +1180,8 @@ class AIPanel {
      */
     scrollToFinding(findingId, file, line) {
         // Expand the file first if it's collapsed
-        const wasExpanded = this.expandFileIfCollapsed(file);
+        const expansion = this.expandFileIfCollapsed(file);
 
-        // Small delay if we expanded to allow DOM to update
         const doScroll = () => {
             let targetSuggestion = null;
 
@@ -1219,9 +1230,11 @@ class AIPanel {
             }
         };
 
-        if (wasExpanded) {
-            // Give the DOM a moment to update after expanding
-            setTimeout(doScroll, 50);
+        // When expansion routed through the async lazy-body render, wait for it
+        // to settle so the row lookup runs against a rendered, visible body.
+        // Otherwise scroll synchronously (fast path: file already expanded).
+        if (expansion && typeof expansion.then === 'function') {
+            expansion.then(doScroll);
         } else {
             doScroll();
         }
@@ -1232,7 +1245,7 @@ class AIPanel {
      */
     scrollToComment(commentId, file, line) {
         // Expand the file first if it's collapsed
-        const wasExpanded = this.expandFileIfCollapsed(file);
+        const expansion = this.expandFileIfCollapsed(file);
 
         const doScroll = () => {
             let targetElement = null;
@@ -1291,9 +1304,10 @@ class AIPanel {
             }
         };
 
-        if (wasExpanded) {
-            // Give the DOM a moment to update after expanding
-            setTimeout(doScroll, 50);
+        // Await the async lazy-body render when expansion triggered one;
+        // scroll synchronously otherwise.
+        if (expansion && typeof expansion.then === 'function') {
+            expansion.then(doScroll);
         } else {
             doScroll();
         }
@@ -1313,7 +1327,7 @@ class AIPanel {
      */
     scrollToExternalThread(threadId, source, file, line) {
         // Expand the file first if it's collapsed
-        const wasExpanded = this.expandFileIfCollapsed(file);
+        const expansion = this.expandFileIfCollapsed(file);
 
         const doScroll = () => {
             let target = null;
@@ -1370,8 +1384,10 @@ class AIPanel {
             }
         };
 
-        if (wasExpanded) {
-            setTimeout(doScroll, 50);
+        // Await the async lazy-body render when expansion triggered one;
+        // scroll synchronously otherwise.
+        if (expansion && typeof expansion.then === 'function') {
+            expansion.then(doScroll);
         } else {
             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

@@ -1275,13 +1275,15 @@ class ChatPanel {
     // attached as tabs are created/restored.
     this._ensureSubscriptions();
 
-    // Recognise thread context (external systems) alongside suggestion / user
-    // comment / file when deciding whether to open with explicit context.
+    // Recognise thread context (external systems) and tour context alongside
+    // suggestion / user comment / file when deciding whether to open with
+    // explicit context.
     const hasExplicitContext = !!(
       options.suggestionContext ||
       options.commentContext ||
       options.threadContext ||
-      options.fileContext
+      options.fileContext ||
+      options.tourContext
     );
 
     // First-time open behaviour:
@@ -1355,6 +1357,15 @@ class ChatPanel {
       this._sendFileContextMessage(options.fileContext);
       this._contextSource = 'file';
       this._contextItemId = null;
+    } else if (options.tourContext) {
+      // If opening with tour-stop context, inject it as a context card.
+      // Awaited because tour stops on context files (outside the PR diff)
+      // need an async file-content fetch to populate the snippet.
+      await this._sendTourContextMessage(options.tourContext);
+      this._contextSource = 'tour';
+      this._contextItemId = options.tourContext.stopIndex != null
+        ? String(options.tourContext.stopIndex)
+        : null;
     }
 
     // Gate input when reviewId is not yet available (PanelGroup auto-restore race)
@@ -2789,6 +2800,155 @@ class ChatPanel {
     this._addFileContextCard(contextData, { removable: true });
   }
 
+  /**
+   * Store pending context and render a compact context card for a tour stop.
+   * Called when the user clicks "Chat about" on a tour-stop annotation.
+   * The context is NOT sent to the agent immediately — it is prepended to
+   * the next user message so the agent receives question + context together.
+   *
+   * Async because tour stops on context files (files NOT in the PR diff) need
+   * to fetch a code snippet via the file-content API so the agent receives a
+   * meaningful snippet — same shape as the diff-hunk enrichment used for stops
+   * inside the diff.
+   *
+   * @param {Object} ctx - Tour stop context
+   *   {stopIndex, totalStops, title, description, file, line_start, line_end, side}
+   * @returns {Promise<void>}
+   */
+  async _sendTourContextMessage(ctx) {
+    const tab = this._getActiveTab();
+    if (!tab) return;
+
+    // Remove empty state if present
+    const emptyState = this.messagesEl.querySelector('.chat-panel__empty');
+    if (emptyState) emptyState.remove();
+
+    const stopLabel = (typeof ctx.stopIndex === 'number' && typeof ctx.totalStops === 'number')
+      ? `Stop ${ctx.stopIndex + 1} of ${ctx.totalStops}`
+      : 'Tour stop';
+
+    // Store structured context data for DB persistence (session resumption).
+    const contextData = {
+      type: 'tour stop',
+      title: ctx.title || stopLabel,
+      file: ctx.file || null,
+      line_start: ctx.line_start || null,
+      line_end: ctx.line_end || null,
+      side: ctx.side || null,
+      body: ctx.description || null,
+      stopIndex: typeof ctx.stopIndex === 'number' ? ctx.stopIndex : null,
+      totalStops: typeof ctx.totalStops === 'number' ? ctx.totalStops : null
+    };
+    tab.pendingContextData.push(contextData);
+
+    // Build the plain-text context for the agent.
+    const lines = [`The user wants to discuss this tour stop (${stopLabel}):`];
+    if (contextData.title) {
+      lines.push(`- Title: ${contextData.title}`);
+    }
+    if (contextData.file) {
+      let fileLine = `- File: ${contextData.file}`;
+      if (contextData.line_start) {
+        fileLine += ` (line ${contextData.line_start}${contextData.line_end && contextData.line_end !== contextData.line_start ? '-' + contextData.line_end : ''})`;
+      }
+      lines.push(fileLine);
+    }
+    if (contextData.body) {
+      lines.push(`- Description: ${contextData.body}`);
+    }
+
+    // Enrich with code snippet.
+    //
+    // Primary path: pull from the in-memory PR diff via DiffContext. This is
+    // synchronous and matches the shape used by suggestion/comment context.
+    //
+    // Fallback path: tour-renderer.prepareStop auto-adds context files (files
+    // outside the PR diff) via prManager.ensureContextFile. Those files have
+    // no entry in filePatches, so the lookup misses — but the agent benefits
+    // most from a snippet in exactly that case (file isn't visible in the
+    // diff). Fetch the file content and slice [line_start-5, line_end+5].
+    //
+    // Both paths render as a fenced code block so the agent sees a consistent
+    // shape. A failed fetch logs a warning and falls through to no snippet.
+    const patch = window.prManager?.filePatches?.get(contextData.file);
+    let snippet = null;
+    if (patch && window.DiffContext && contextData.line_start) {
+      const hunk = window.DiffContext.extractHunkForLines(
+        patch,
+        contextData.line_start,
+        contextData.line_end || contextData.line_start,
+        contextData.side
+      );
+      if (hunk) {
+        snippet = `- Diff hunk:\n\`\`\`\n${hunk}\n\`\`\``;
+      }
+    } else if (!patch && contextData.file && contextData.line_start) {
+      const sliced = await this._fetchContextFileSnippet(
+        contextData.file,
+        contextData.line_start,
+        contextData.line_end || contextData.line_start
+      );
+      if (sliced) {
+        snippet = `- File snippet:\n\`\`\`\n${sliced}\n\`\`\``;
+      }
+    }
+    if (snippet) {
+      lines.push(snippet);
+    }
+
+    tab.pendingContext.push(lines.join('\n'));
+
+    // Render the compact context card in the UI (reuses suggestion card shape).
+    this._addContextCard(contextData, { removable: true });
+  }
+
+  /**
+   * Fetch a small slice of file content for tour stops on context files
+   * (files outside the PR diff). Returns the slice with line numbers prefixed
+   * so the agent can correlate with the stop's line range, or null on failure.
+   *
+   * @param {string} file - File path (will be URI-encoded)
+   * @param {number} lineStart - 1-based first line of the stop range
+   * @param {number} lineEnd   - 1-based last line of the stop range (inclusive)
+   * @param {number} [padding=5] - Extra lines to include on each side
+   * @returns {Promise<string|null>}
+   */
+  async _fetchContextFileSnippet(file, lineStart, lineEnd, padding = 5) {
+    const reviewId = this.reviewId || window.prManager?.currentPR?.id;
+    if (!reviewId || !file || !lineStart) return null;
+
+    try {
+      const resp = await fetch(
+        `/api/reviews/${reviewId}/file-content/${encodeURIComponent(file)}`
+      );
+      if (!resp || !resp.ok) {
+        console.warn(
+          '[ChatPanel] context-file snippet fetch failed',
+          { file, status: resp && resp.status }
+        );
+        return null;
+      }
+      const data = await resp.json();
+      const allLines = Array.isArray(data?.lines) ? data.lines : null;
+      if (!allLines || allLines.length === 0) return null;
+
+      // Clamp to file bounds; convert to 0-based slice indices.
+      const startIdx = Math.max(0, lineStart - 1 - padding);
+      const endIdx = Math.min(allLines.length, lineEnd + padding);
+      if (endIdx <= startIdx) return null;
+
+      const out = [];
+      const pad = String(endIdx).length;
+      for (let i = startIdx; i < endIdx; i++) {
+        out.push(`${String(i + 1).padStart(pad, ' ')}: ${allLines[i]}`);
+      }
+      return out.join('\n');
+    } catch (err) {
+      console.warn('[ChatPanel] context-file snippet fetch threw', { file, err });
+      return null;
+    }
+  }
+
   /**
    * Add an analysis run as context for the chat conversation.
    * Fetches run metadata from the backend and creates a removable context card

package/public/js/components/KeyboardShortcuts.js

@@ -299,45 +299,29 @@ class KeyboardShortcuts {
   }
 
   /**
-   * Check if a modal is currently open (excluding our help overlay)
+   * Check if a modal is currently open (excluding our help overlay).
+   * Delegates to the shared ModalDetection utility so the selector list
+   * and visibility check stay in sync with PRManager's tour handler.
    * @returns {boolean} True if a modal is open
    */
   isModalOpen() {
-    // Check for common modal patterns in the codebase
-    const modalSelectors = [
-      '.modal-overlay:not(#keyboard-shortcuts-help)',
-      '.review-modal-overlay',
-      '.preview-modal-overlay',
-      '.confirm-dialog-overlay',
-      '.analysis-config-overlay',
-      '.ai-summary-modal-overlay',
-      '[role="dialog"]:not(#keyboard-shortcuts-help)'
-    ];
-
-    for (const selector of modalSelectors) {
-      const modal = document.querySelector(selector);
-      if (modal && this.isElementVisible(modal)) {
-        return true;
-      }
+    if (window.ModalDetection && typeof window.ModalDetection.isModalOpen === 'function') {
+      return window.ModalDetection.isModalOpen();
     }
-
     return false;
   }
 
   /**
-   * Check if an element is visible
+   * Check if an element is visible. Delegates to the shared
+   * ModalDetection utility.
    * @param {HTMLElement} element - The element to check
    * @returns {boolean} True if element is visible
    */
   isElementVisible(element) {
-    if (!element) return false;
-
-    const style = window.getComputedStyle(element);
-    if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
-      return false;
+    if (window.ModalDetection && typeof window.ModalDetection.isElementVisible === 'function') {
+      return window.ModalDetection.isElementVisible(element);
     }
-
-    return true;
+    return Boolean(element);
   }
 
   /**