@in-the-loop-labs/pair-review 1.4.3 → 1.5.0

package/public/js/local.js

@@ -7,6 +7,8 @@
  * - Hiding GitHub-specific UI elements
  * - Adapting the UI for local uncommitted changes review
  */
+// STALE_TIMEOUT is declared in pr.js (shared global scope via script tags)
+
 class LocalManager {
   /**
    * Create LocalManager instance.
@@ -67,6 +69,18 @@ class LocalManager {
     // Load local review data
     await this.loadLocalReview();
 
+    // Auto-trigger analysis if ?analyze=true is present
+    const autoAnalyze = new URLSearchParams(window.location.search).get('analyze');
+    if (autoAnalyze === 'true' && !window.prManager.isAnalyzing) {
+      try {
+        await this.startLocalAnalysis(null, {});
+      } finally {
+        const cleanUrl = new URL(window.location);
+        cleanUrl.searchParams.delete('analyze');
+        history.replaceState(null, '', cleanUrl);
+      }
+    }
+
     this.isInitialized = true;
   }
 
@@ -289,6 +303,10 @@ class LocalManager {
 
     // Override triggerAIAnalysis for local mode
     manager.triggerAIAnalysis = async function() {
+      // Timeout (ms) for stale check — git commands can hang on locked repos.
+      // Defined locally to avoid relying on cross-script const from pr.js.
+      const STALE_TIMEOUT = 2000;
+
       if (manager.isAnalyzing) {
         manager.reopenProgressModal();
         return;
@@ -304,61 +322,41 @@ class LocalManager {
         return;
       }
 
-      // Run stale check and settings fetch in parallel to minimize dialog delay.
-      // Use AbortController so the fetch is truly cancelled on timeout,
-      // freeing the HTTP connection for subsequent requests.
-      const STALE_TIMEOUT = 2000;
-      const staleAbort = new AbortController();
-      const staleTimer = setTimeout(() => {
-        console.debug(`[Analyze] stale-check timed out after ${STALE_TIMEOUT}ms, aborting`);
-        staleAbort.abort();
-      }, STALE_TIMEOUT);
-      const staleCheckPromise = fetch(`/api/local/${reviewId}/check-stale`, { signal: staleAbort.signal })
-        .then(r => {
-          clearTimeout(staleTimer);
-          if (!r.ok) {
-            console.warn(`Stale check failed with status ${r.status}`);
-            return { _fetchError: true, status: r.status };
-          }
-          return r.json();
-        })
-        .catch(err => {
-          clearTimeout(staleTimer);
-          if (err.name === 'AbortError') {
-            console.debug('[Analyze] stale-check aborted (timeout)');
-          } else {
-            console.warn('[Analyze] stale-check fetch error:', err);
-          }
-          return null;
-        });
-
       try {
         // Show analysis config modal
         if (!manager.analysisConfigModal) {
-          clearTimeout(staleTimer);
           console.warn('AnalysisConfigModal not initialized, proceeding without config');
           await self.startLocalAnalysis(btn, {});
           return;
         }
 
-        // Fetch stale check, repo settings, and last instructions in parallel
-        const [staleResult, repoSettings, lastInstructions] = await Promise.all([
-          staleCheckPromise,
+        // Run stale check and settings fetch in parallel to minimize dialog delay
+        // Use AbortController so the fetch is truly cancelled on timeout,
+        // freeing the HTTP connection for subsequent requests.
+        const _tParallel0 = performance.now();
+        const staleAbort = new AbortController();
+        const staleTimer = setTimeout(() => {
+          console.debug(`[Analyze] stale-check timed out after ${STALE_TIMEOUT}ms, aborting`);
+          staleAbort.abort();
+        }, STALE_TIMEOUT);
+        const staleCheckWithTimeout = fetch(`/api/local/${reviewId}/check-stale`, { signal: staleAbort.signal })
+          .then(r => r.ok ? r.json() : null)
+          .then(result => { clearTimeout(staleTimer); return result; })
+          .catch(() => { clearTimeout(staleTimer); return null; });
+        const [staleResult, repoSettings, reviewSettings] = await Promise.all([
+          staleCheckWithTimeout,
           manager.fetchRepoSettings().catch(() => null),
-          manager.fetchLastCustomInstructions().catch(() => '')
+          manager.fetchLastReviewSettings().catch(() => ({ custom_instructions: '', last_council_id: null }))
         ]);
+        console.debug(`[Analyze] parallel-fetch (stale+settings): ${Math.round(performance.now() - _tParallel0)}ms`);
 
-        // Process stale check result
-        try {
-          if (staleResult === null) {
-            // Timed out or network error — fail open
+        // Handle staleness result — check for expected properties to distinguish
+        // a valid response from a failed/timed-out fetch (which resolves to null)
+        if (staleResult && 'isStale' in staleResult) {
+          if (staleResult.isStale === null && staleResult.error) {
             if (window.toast) {
               window.toast.showWarning('Could not verify working directory is current.');
             }
-          } else if (staleResult._fetchError) {
-            if (window.toast) {
-              window.toast.showWarning(`Could not verify working directory is current (${staleResult.status}).`);
-            }
           } else if (staleResult.isStale === true) {
             if (window.confirmDialog) {
               const choice = await window.confirmDialog.show({
@@ -376,46 +374,57 @@ class LocalManager {
                 return;
               }
             }
-          } else if (staleResult.isStale === null && staleResult.error) {
-            if (window.toast) {
-              window.toast.showWarning('Could not verify working directory is current.');
-            }
           }
-        } catch (staleError) {
-          console.warn('[Local] Error processing staleness:', staleError);
+        } else {
+          // Network error, HTTP error, or timeout — fail open with warning
           if (window.toast) {
             window.toast.showWarning('Could not verify working directory is current.');
           }
         }
 
-        // Determine model and provider
-        const modelStorageKey = `pair-review-model:local-${reviewId}`;
-        const providerStorageKey = `pair-review-provider:local-${reviewId}`;
-        const rememberedModel = localStorage.getItem(modelStorageKey);
-        const rememberedProvider = localStorage.getItem(providerStorageKey);
-        const currentModel = rememberedModel || repoSettings?.default_model || 'opus';
-        const currentProvider = rememberedProvider || repoSettings?.default_provider || 'claude';
+        const lastCouncilId = reviewSettings.last_council_id;
+
+        // Determine model and provider (priority: repo default > defaults)
+        const currentModel = repoSettings?.default_model || 'opus';
+        const currentProvider = repoSettings?.default_provider || 'claude';
+
+        // Determine default tab (priority: localStorage > repo settings > 'single')
+        const tabStorageKey = `pair-review-tab:local-${reviewId}`;
+        const rememberedTab = localStorage.getItem(tabStorageKey);
+        const defaultTab = rememberedTab || repoSettings?.default_tab || 'single';
+
+        // Restore custom instructions (priority: database > localStorage)
+        const instructionsStorageKey = `pair-review-instructions:local-${reviewId}`;
+        const lastInstructions = reviewSettings.custom_instructions
+          ?? localStorage.getItem(instructionsStorageKey)
+          ?? '';
+
+        // Save tab selection to localStorage when user switches tabs
+        manager.analysisConfigModal.onTabChange = (tabId) => {
+          localStorage.setItem(tabStorageKey, tabId);
+        };
 
         // Show config modal
         const config = await manager.analysisConfigModal.show({
           currentModel,
           currentProvider,
+          defaultTab,
           repoInstructions: repoSettings?.default_instructions || '',
           lastInstructions: lastInstructions,
-          rememberModel: !!(rememberedModel || rememberedProvider)
+          lastCouncilId,
+          defaultCouncilId: repoSettings?.default_council_id || null
         });
 
         if (!config) {
           return;
         }
 
-        // Save preferences if requested
-        if (config.rememberModel) {
-          localStorage.setItem(modelStorageKey, config.model);
-          localStorage.setItem(providerStorageKey, config.provider);
+        // Persist custom instructions to localStorage for immediate recall on next dialog open
+        const submittedInstructions = config.customInstructions || '';
+        if (submittedInstructions) {
+          localStorage.setItem(instructionsStorageKey, submittedInstructions);
         } else {
-          localStorage.removeItem(modelStorageKey);
-          localStorage.removeItem(providerStorageKey);
+          localStorage.removeItem(instructionsStorageKey);
         }
 
         // Start analysis
@@ -440,8 +449,16 @@ class LocalManager {
           manager.isAnalyzing = true;
           manager.setButtonAnalyzing(data.analysisId);
 
-          // Optionally reopen progress modal
-          if (window.progressModal) {
+          // Show the appropriate progress modal
+          if (data.status?.isCouncil && window.councilProgressModal && data.status?.councilConfig) {
+            window.councilProgressModal.setLocalMode(reviewId);
+            window.councilProgressModal.show(
+              data.analysisId,
+              data.status.councilConfig,
+              null,
+              { configType: data.status.configType || 'advanced' }
+            );
+          } else if (window.progressModal) {
             // Update the SSE endpoint for progress modal
             self.patchProgressModalForLocal();
             window.progressModal.show(data.analysisId);
@@ -471,6 +488,14 @@ class LocalManager {
           return;
         }
 
+        // Prevent duplicate saves from rapid clicks or Cmd+Enter
+        const saveBtn = formRow?.querySelector('.save-comment-btn');
+        if (saveBtn?.dataset.saving === 'true') {
+          return;
+        }
+        if (saveBtn) saveBtn.dataset.saving = 'true';
+        if (saveBtn) saveBtn.disabled = true;
+
         try {
           const response = await fetch(`/api/local/${reviewId}/user-comments`, {
             method: 'POST',
@@ -532,6 +557,11 @@ class LocalManager {
         } catch (error) {
           console.error('Error saving user comment:', error);
           alert('Failed to save comment: ' + error.message);
+          // Re-enable save button on failure so the user can retry
+          if (saveBtn) {
+            saveBtn.dataset.saving = 'false';
+            saveBtn.disabled = false;
+          }
         }
       };
     }
@@ -699,6 +729,15 @@ class LocalManager {
     const originalSaveEditedUserComment = manager.saveEditedUserComment?.bind(manager);
     if (originalSaveEditedUserComment) {
       manager.saveEditedUserComment = async function(commentId) {
+        // Prevent duplicate saves from rapid clicks or Cmd+Enter
+        const editFormEl = document.querySelector(`#edit-comment-${commentId}`)?.closest('.user-comment-edit-form');
+        const saveBtnEl = editFormEl?.querySelector('.save-edit-btn');
+        if (saveBtnEl?.dataset.saving === 'true') {
+          return;
+        }
+        if (saveBtnEl) saveBtnEl.dataset.saving = 'true';
+        if (saveBtnEl) saveBtnEl.disabled = true;
+
         try {
           const textarea = document.getElementById(`edit-comment-${commentId}`);
           const editedText = textarea.value.trim();
@@ -706,6 +745,10 @@ class LocalManager {
           if (!editedText) {
             alert('Comment cannot be empty');
             textarea.focus();
+            if (saveBtnEl) {
+              saveBtnEl.dataset.saving = 'false';
+              saveBtnEl.disabled = false;
+            }
             return;
           }
 
@@ -750,6 +793,11 @@ class LocalManager {
         } catch (error) {
           console.error('Error saving comment:', error);
           alert('Failed to save comment');
+          // Re-enable save button on failure so the user can retry
+          if (saveBtnEl) {
+            saveBtnEl.dataset.saving = 'false';
+            saveBtnEl.disabled = false;
+          }
         }
       };
     }
@@ -915,21 +963,24 @@ class LocalManager {
       }
     };
 
-    // Patch fetchLastCustomInstructions to use local API endpoint
+    // Patch fetchLastReviewSettings to use local API endpoint
     // Local mode uses a different endpoint pattern than PR mode because local reviews
     // don't have PR metadata (owner/repo/number). Instead, instructions are stored
     // directly on the review record and accessed via the review ID.
-    manager.fetchLastCustomInstructions = async function() {
+    manager.fetchLastReviewSettings = async function() {
       try {
         const response = await fetch(`/api/local/${reviewId}/review-settings`);
         if (!response.ok) {
-          return '';
+          return { custom_instructions: '', last_council_id: null };
         }
         const data = await response.json();
-        return data.custom_instructions || '';
+        return {
+          custom_instructions: data.custom_instructions || '',
+          last_council_id: data.last_council_id || null
+        };
       } catch (error) {
         console.warn('Error fetching last custom instructions:', error);
-        return '';
+        return { custom_instructions: '', last_council_id: null };
       }
     };
 
@@ -1049,23 +1100,39 @@ class LocalManager {
 
       // Staleness is now checked in triggerAIAnalysis before showing config modal
 
-      // Start AI analysis
-      const response = await fetch(`/api/local/${this.reviewId}/analyze`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
+      // Determine endpoint and body based on whether this is a council analysis
+      let analyzeUrl, analyzeBody;
+      if (config.isCouncil) {
+        analyzeUrl = `/api/local/${this.reviewId}/analyze/council`;
+        analyzeBody = {
+          councilId: config.councilId || undefined,
+          councilConfig: config.councilConfig || undefined,
+          configType: config.configType || 'advanced',
+          customInstructions: config.customInstructions || null
+        };
+      } else {
+        analyzeUrl = `/api/local/${this.reviewId}/analyze`;
+        analyzeBody = {
           provider: config.provider || 'claude',
           model: config.model || 'opus',
           tier: config.tier || 'balanced',
           customInstructions: config.customInstructions || null,
+          enabledLevels: config.enabledLevels || [1, 2, 3],
           skipLevel3: config.skipLevel3 || false
-        })
+        };
+      }
+
+      // Start AI analysis
+      const response = await fetch(analyzeUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(analyzeBody)
       });
 
       if (!response.ok) {
-        const error = await response.json();
+        const error = await response.json().catch(() => ({}));
         throw new Error(error.error || 'Failed to start AI analysis');
       }
 
@@ -1079,12 +1146,24 @@ class LocalManager {
       // Set analyzing state
       manager.setButtonAnalyzing(result.analysisId);
 
-      // Patch progress modal for local mode
-      this.patchProgressModalForLocal();
-
-      // Show progress modal
-      if (window.progressModal) {
-        window.progressModal.show(result.analysisId);
+      // Always use the unified progress modal
+      if (window.councilProgressModal) {
+        window.councilProgressModal.setLocalMode(this.reviewId);
+        window.councilProgressModal.show(
+          result.analysisId,
+          config.isCouncil ? config.councilConfig : null,
+          config.isCouncil ? config.councilName : null,
+          {
+            configType: config.isCouncil ? (config.configType || 'advanced') : 'single',
+            enabledLevels: config.enabledLevels || [1, 2, 3]
+          }
+        );
+      } else {
+        // Fallback to old progress modal if unified modal not available
+        this.patchProgressModalForLocal();
+        if (window.progressModal) {
+          window.progressModal.show(result.analysisId);
+        }
       }
 
     } catch (error) {

package/public/js/modules/analysis-history.js

@@ -33,6 +33,8 @@ class AnalysisHistoryManager {
     this.isDropdownOpen = false;
     this.previewingRunId = null; // Track which run ID is currently being previewed to prevent flicker
     this.newRunId = null; // Track a new run that user hasn't viewed yet
+    this.councilNameCache = {}; // Cache council name lookups by council UUID
+    this._renderVersion = 0; // Monotonic counter to prevent stale async DOM updates in renderDropdown
 
     // DOM elements (cached after init)
     this.container = null;
@@ -157,6 +159,48 @@ class AnalysisHistoryManager {
     }
   }
 
+  /**
+   * Resolve a council name from its UUID, with caching.
+   * Fetches from /api/councils/:id and caches the result.
+   * @param {string} councilId - The council UUID
+   * @returns {Promise<string>} The council name, or 'Unknown Council' on failure
+   */
+  async resolveCouncilName(councilId) {
+    if (!councilId) return 'Unknown Council';
+
+    if (this.councilNameCache[councilId] !== undefined) {
+      return this.councilNameCache[councilId];
+    }
+
+    try {
+      const response = await fetch(`/api/councils/${councilId}`);
+      if (!response.ok) {
+        this.councilNameCache[councilId] = 'Unknown Council';
+        return 'Unknown Council';
+      }
+      const data = await response.json();
+      const name = data.council?.name || 'Unknown Council';
+      this.councilNameCache[councilId] = name;
+      return name;
+    } catch {
+      this.councilNameCache[councilId] = 'Unknown Council';
+      return 'Unknown Council';
+    }
+  }
+
+  /**
+   * Resolve a council name and patch a DOM element with the result.
+   * @param {HTMLElement} element - Element to update
+   * @param {string} councilId - Council ID to resolve
+   * @param {function} formatter - Takes the resolved name, returns the text to set on the element
+   */
+  async _patchCouncilName(element, councilId, formatter) {
+    const name = await this.resolveCouncilName(councilId);
+    if (element && element.isConnected) {
+      element.textContent = formatter(name);
+    }
+  }
+
   /**
    * Load analysis runs from the API (initial load only)
    *
@@ -202,23 +246,24 @@ class AnalysisHistoryManager {
   renderDropdown(runs) {
     if (!this.listElement) return;
 
+    const renderVersion = ++this._renderVersion;
+
     this.listElement.innerHTML = runs.map((run) => {
       const isSelected = String(run.id) === String(this.selectedRunId);
-      const isNewRun = String(run.id) === String(this.newRunId);
       const timeAgo = this.formatRelativeTime(run.completed_at || run.started_at);
 
-      const modelName = this.escapeHtml(run.model || 'Unknown');
+      const isCouncil = run.provider === 'council';
+      const modelName = isCouncil ? 'council' : this.escapeHtml(run.model || 'Unknown');
       const providerName = this.escapeHtml(this.formatProviderName(run.provider));
-      const fullTitle = `${this.formatProviderName(run.provider)} - ${run.model || 'Unknown'}`;
-
-      const newBadge = isNewRun ? '<span class="analysis-history-new-badge">LATEST</span>' : '';
+      const fullTitle = isCouncil
+        ? 'council'
+        : `${this.formatProviderName(run.provider)} - ${run.model || 'Unknown'}`;
 
       return `
-        <button class="analysis-history-item ${isSelected ? 'selected' : ''} ${isNewRun ? 'is-new' : ''}" data-run-id="${run.id}">
+        <button class="analysis-history-item ${isSelected ? 'selected' : ''}" data-run-id="${run.id}">
           <div class="analysis-history-item-main" title="${this.escapeHtml(fullTitle)}">
             <span class="analysis-history-item-provider">${providerName}</span>
-            <span class="analysis-history-item-model">&middot; ${modelName}</span>
-            ${newBadge}
+            <span class="analysis-history-item-model" ${isCouncil ? `data-council-id="${this.escapeHtml(run.model)}"` : ''}>&middot; ${modelName}</span>
           </div>
           <div class="analysis-history-item-meta">
             <span>${timeAgo}</span>
@@ -227,6 +272,24 @@ class AnalysisHistoryManager {
       `;
     }).join('');
 
+    // Async-resolve council names and patch dropdown items
+    const councilRuns = runs.filter(r => r.provider === 'council' && r.model);
+    if (councilRuns.length > 0) {
+      Promise.all(councilRuns.map(async (run) => {
+        const modelSpan = this.listElement.querySelector(
+          `.analysis-history-item[data-run-id="${run.id}"] .analysis-history-item-model[data-council-id]`
+        );
+        await this._patchCouncilName(modelSpan, run.model, n => `\u00B7 ${n}`);
+        // Skip title update if a newer render has occurred since we started
+        if (this._renderVersion !== renderVersion) return;
+        // Update the parent title too (name is now cached from _patchCouncilName)
+        const mainDiv = modelSpan?.closest('.analysis-history-item-main');
+        if (mainDiv && mainDiv.isConnected) {
+          mainDiv.title = `council \u00B7 ${this.councilNameCache[run.model] || 'Unknown Council'}`;
+        }
+      }));
+    }
+
     // Add click and hover handlers to items
     this.listElement.querySelectorAll('.analysis-history-item').forEach(item => {
       // Click to select
@@ -303,9 +366,15 @@ class AnalysisHistoryManager {
     const run = this.selectedRun;
     const timeAgo = this.formatRelativeTime(run.completed_at || run.started_at);
     const provider = this.formatProviderName(run.provider);
-    const model = run.model || 'Unknown';
 
-    this.historyLabel.textContent = `${timeAgo} \u00B7 ${provider} \u00B7 ${model}`;
+    if (run.provider === 'council' && run.model) {
+      // Show placeholder immediately, then resolve council name async
+      this.historyLabel.textContent = `${timeAgo} \u00B7 council`;
+      this._patchCouncilName(this.historyLabel, run.model, name => `${timeAgo} \u00B7 council \u00B7 ${name}`);
+    } else {
+      const model = run.model || 'Unknown';
+      this.historyLabel.textContent = `${timeAgo} \u00B7 ${provider} \u00B7 ${model}`;
+    }
   }
 
   /**
@@ -346,8 +415,21 @@ class AnalysisHistoryManager {
 
     // Format model in lowercase
     const modelDisplay = run.model ? run.model.toLowerCase() : 'unknown';
+    const isCouncil = run.provider === 'council';
+
+    let html = '';
 
-    let html = `
+    if (isCouncil) {
+      // For council runs, show a single "Council" row with name (resolved async)
+      const cachedName = run.model ? this.councilNameCache[run.model] : null;
+      const councilDisplay = cachedName || 'Loading\u2026';
+      html += `
+      <div class="analysis-preview-row">
+        <span class="analysis-preview-label">Council</span>
+        <span class="analysis-preview-value analysis-preview-council-name" data-council-id="${this.escapeHtml(run.model || '')}">${this.escapeHtml(councilDisplay)}</span>
+      </div>`;
+    } else {
+      html += `
       <div class="analysis-preview-row">
         <span class="analysis-preview-label">Provider</span>
         <span class="analysis-preview-value">${this.escapeHtml(this.formatProviderName(run.provider))}</span>
@@ -359,6 +441,23 @@ class AnalysisHistoryManager {
       <div class="analysis-preview-row">
         <span class="analysis-preview-label">Tier</span>
         <span class="analysis-preview-value">${this.escapeHtml(tier || 'unknown')}</span>
+      </div>`;
+    }
+
+    // Config type row
+    const configLabel = this.getConfigTypeLabel(run);
+    const configDisplayMap = {
+      'single': 'Single Model',
+      'council': 'Council',
+      'council-voice': 'Council Reviewer',
+      'advanced': 'Advanced'
+    };
+    const configDisplay = configDisplayMap[configLabel] || configLabel;
+
+    html += `
+      <div class="analysis-preview-row">
+        <span class="analysis-preview-label">Config</span>
+        <span class="analysis-preview-value">${this.escapeHtml(configDisplay)}</span>
       </div>
       <div class="analysis-preview-row">
         <span class="analysis-preview-label">Status</span>
@@ -384,6 +483,16 @@ class AnalysisHistoryManager {
       ` : ''}
     `;
 
+    // Level indicators in preview
+    if (run.levels_config) {
+      html += `
+      <div class="analysis-preview-row">
+        <span class="analysis-preview-label">Levels</span>
+        <span class="analysis-preview-value">${this.renderLevelIndicators(run)}</span>
+      </div>
+      `;
+    }
+
     // Add collapsible summary section if present
     const hasSummary = run.summary && run.summary.trim();
     if (hasSummary) {
@@ -488,6 +597,12 @@ class AnalysisHistoryManager {
     }
 
     this.previewPanel.innerHTML = html;
+
+    // Async-resolve council name and patch the preview panel element
+    if (isCouncil && run.model && !this.councilNameCache[run.model]) {
+      const el = this.previewPanel.querySelector(`.analysis-preview-council-name[data-council-id="${run.model}"]`);
+      this._patchCouncilName(el, run.model, name => name);
+    }
   }
 
   /**
@@ -778,6 +893,65 @@ class AnalysisHistoryManager {
     return tier.charAt(0).toUpperCase() + tier.slice(1).toLowerCase();
   }
 
+  /**
+   * Determine the display config type for a run.
+   * @param {Object} run - Analysis run object
+   * @returns {string} One of 'single', 'council', 'council-voice', 'advanced'
+   */
+  getConfigTypeLabel(run) {
+    const configType = run.config_type || 'single';
+    if (configType === 'council' && run.parent_run_id) {
+      return 'council-voice';
+    }
+    return configType;
+  }
+
+  /**
+   * Render a config type badge for a run.
+   * @param {Object} run - Analysis run object
+   * @returns {string} HTML string for the badge
+   */
+  renderConfigTypeBadge(run) {
+    const label = this.getConfigTypeLabel(run);
+    const displayMap = {
+      'single': 'Single',
+      'council': 'Council',
+      'council-voice': 'Reviewer',
+      'advanced': 'Advanced'
+    };
+    const display = displayMap[label] || label;
+    if (label === 'single') return '';
+    return `<span class="analysis-history-config-badge analysis-history-config-${this.escapeHtml(label)}">${this.escapeHtml(display)}</span>`;
+  }
+
+  /**
+   * Render level indicators (L1/L2/L3) based on levels_config.
+   * @param {Object} run - Analysis run object with optional levels_config
+   * @returns {string} HTML string for level indicators
+   */
+  renderLevelIndicators(run) {
+    const levelsConfig = run.levels_config;
+    if (!levelsConfig) return '';
+
+    // levels_config can be:
+    // - An array like [1, 2] (voice-centric: enabled levels)
+    // - An object like { level1: true, level2: true, level3: false } (advanced)
+    const levels = [1, 2, 3];
+    const indicators = levels.map(level => {
+      let enabled;
+      if (Array.isArray(levelsConfig)) {
+        enabled = levelsConfig.includes(level);
+      } else {
+        const key = `level${level}`;
+        enabled = levelsConfig[key] !== false;
+      }
+      const cls = enabled ? 'level-on' : 'level-off';
+      const icon = enabled ? '\u2713' : '\u2717';
+      return `<span class="analysis-history-level ${cls}">L${level}${icon}</span>`;
+    });
+    return `<span class="analysis-history-levels">${indicators.join('')}</span>`;
+  }
+
   /**
    * Escape HTML special characters
    * @param {string} text - Text to escape