@in-the-loop-labs/pair-review 3.6.0 → 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/ReviewModal.js

@@ -64,9 +64,9 @@ class ReviewModal {
               </div>
               <div class="pending-draft-notice-content">
                 <span class="pending-draft-notice-text">
-                  You have a pending draft review on GitHub with <strong id="pending-draft-count">0</strong> comments.
+                  You have a pending draft review on <span class="rm-host-name">GitHub</span> with <strong id="pending-draft-count">0</strong> comments.
                   Submitting here will add to or complete this review.
-                  <a href="#" id="pending-draft-link" target="_blank" rel="noopener noreferrer">Manage on GitHub</a>.
+                  <a href="#" id="pending-draft-link" target="_blank" rel="noopener noreferrer">Manage on <span class="rm-host-name">GitHub</span></a>.
                 </span>
               </div>
             </div>
@@ -120,7 +120,7 @@ class ReviewModal {
                   <input type="radio" name="review-event" value="DRAFT">
                   <div class="review-type-content">
                     <span class="review-type-label">Save as Draft</span>
-                    <span class="review-type-desc">Save your review as a draft on GitHub to finish later.</span>
+                    <span class="review-type-desc">Save your review as a draft on <span class="rm-host-name">GitHub</span> to finish later.</span>
                   </div>
                 </label>
               </div>
@@ -284,6 +284,11 @@ class ReviewModal {
     // Update AI summary link visibility
     this.updateAISummaryLink();
 
+    // Apply the configured remote-host display name + icon (resolves
+    // asynchronously after the modal HTML was built).
+    this.applyHostName();
+    this.applySubmitButtonIcon();
+
     // Update pending draft notice
     this.updatePendingDraftNotice();
   }
@@ -311,11 +316,17 @@ class ReviewModal {
         countElement.textContent = String(pendingDraft.comments_count || 0);
       }
 
-      // Update the link - hide if no github_url
+      // Update the link. Prefer the URL built from the repo's configured
+      // url_template (host-correct) over the server-reported github_url,
+      // which some alt-hosts return as a wrong-host github.com/issues URL.
       const linkElement = notice.querySelector('#pending-draft-link');
       if (linkElement) {
-        if (pendingDraft.github_url) {
-          linkElement.href = pendingDraft.github_url;
+        const templatedUrl = (typeof window !== 'undefined' && window.RepoLinks
+          && typeof window.RepoLinks.externalUrl === 'function')
+          ? window.RepoLinks.externalUrl() : null;
+        const manageUrl = templatedUrl || pendingDraft.github_url;
+        if (manageUrl) {
+          linkElement.href = manageUrl;
           linkElement.style.display = 'inline';
         } else {
           linkElement.style.display = 'none';
@@ -452,6 +463,8 @@ class ReviewModal {
       submitBtn.disabled = false;
       cancelBtn.style.display = 'inline-block';
       closeBtn.style.display = 'inline-block';
+      // innerHTML reset drops any host icon — re-apply it.
+      this.applySubmitButtonIcon();
     }
   }
 
@@ -531,7 +544,7 @@ class ReviewModal {
         const reviewUrl = result.reviewUrl || result.github_url;
         if (isDraft) {
           window.toast.showSuccess(
-            'Draft review submitted to GitHub successfully!',
+            `Draft review submitted to ${ReviewModal.escapeHtml(ReviewModal.hostName())} successfully!`,
             {
               duration: 5000
             }
@@ -541,7 +554,7 @@ class ReviewModal {
             'Review submitted successfully!',
             {
               link: reviewUrl,
-              linkText: 'View on GitHub',
+              linkText: `View on ${ReviewModal.escapeHtml(ReviewModal.hostName())}`,
               duration: 5000
             }
           );
@@ -586,11 +599,16 @@ class ReviewModal {
       }
 
       if (isDraft) {
-        // After 2 seconds, open GitHub PR page for drafts
-        setTimeout(() => {
-          const githubUrl = result.github_url || `https://github.com/${pr.owner}/${pr.repo}/pull/${pr.number}`;
-          window.open(githubUrl, '_blank');
-        }, 2000);
+        // After 2 seconds, open the PR page for drafts. Use the PR's canonical
+        // html_url (correct host + `/pull/`) rather than the review's html_url,
+        // which some alt-hosts return as a github.com `/issues/<n>` URL. Never
+        // assume github.com — see resolveDraftPrUrl.
+        const prUrl = ReviewModal.resolveDraftPrUrl(pr, result);
+        if (prUrl) {
+          setTimeout(() => {
+            window.open(prUrl, '_blank');
+          }, 2000);
+        }
       }
       
     } catch (error) {
@@ -676,6 +694,110 @@ class ReviewModal {
     localStorage.setItem(ASSISTED_BY_STORAGE_KEY, String(checkbox.checked));
   }
 
+  /**
+   * Display name of the remote code host, for user-facing text in place of
+   * the literal "GitHub". Reads the configured `links.external.name` via
+   * `window.RepoLinks.hostName()`, falling back to "GitHub".
+   *
+   * @returns {string}
+   */
+  static hostName() {
+    if (typeof window !== 'undefined' && window.RepoLinks
+        && typeof window.RepoLinks.hostName === 'function') {
+      return window.RepoLinks.hostName();
+    }
+    return 'GitHub';
+  }
+
+  /**
+   * Escape a string for safe interpolation into HTML. Used for the host
+   * name (user-supplied config) before it goes into the success toast,
+   * which renders its message/linkText via innerHTML.
+   *
+   * @param {string} text
+   * @returns {string}
+   */
+  static escapeHtml(text) {
+    return String(text == null ? '' : text)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  /**
+   * Resolve the URL to open in a new tab after a draft submit.
+   *
+   * Precedence:
+   *   1. The URL built from the repo's configured `links.external.url_template`
+   *      (`window.RepoLinks.externalUrl()`) — authoritative and host-correct.
+   *   2. The PR's canonical `html_url` (the host's own PR page).
+   *   3. The server-reported `github_url` as a last resort.
+   *
+   * Some alt-hosts return the pending-review `html_url` as a
+   * `github.com/.../issues/<n>` URL, which lands on the wrong host and page.
+   * We must never assume github.com, so there is no hardcoded fallback host:
+   * if none of the above yields a URL we open nothing.
+   *
+   * @param {{html_url?: string}|null|undefined} pr - current PR (from prManager)
+   * @param {{github_url?: string}|null|undefined} result - submit-review response
+   * @returns {string|null} URL to open, or null if none is available
+   */
+  static resolveDraftPrUrl(pr, result) {
+    if (typeof window !== 'undefined' && window.RepoLinks
+        && typeof window.RepoLinks.externalUrl === 'function') {
+      const templated = window.RepoLinks.externalUrl();
+      if (templated) return templated;
+    }
+    if (pr && pr.html_url) return pr.html_url;
+    if (result && result.github_url) return result.github_url;
+    return null;
+  }
+
+  /**
+   * Update host-name-dependent static text in the modal (the pending-draft
+   * notice and the "Save as Draft" description) to the configured host name.
+   * Called from `show()` because the name resolves asynchronously after the
+   * modal HTML is built. No-op when the modal isn't present.
+   */
+  applyHostName() {
+    if (!this.modal) return;
+    const name = ReviewModal.hostName();
+    const spans = this.modal.querySelectorAll('.rm-host-name');
+    spans.forEach((el) => { el.textContent = name; });
+  }
+
+  /**
+   * Prepend the configured external-host icon to the submit button, when an
+   * icon is configured for the repo. The icon is parsed via
+   * `window.RepoLinks.parseSvgIcon` (DOMParser + attribute stripping) and
+   * inserted as a DOM node — never via innerHTML. Idempotent: any previously
+   * inserted icon is removed first. No-op for plain github.com repos.
+   */
+  applySubmitButtonIcon() {
+    const submitBtn = this.modal?.querySelector('#submit-review-btn-modal');
+    if (!submitBtn) return;
+
+    const existing = submitBtn.querySelector?.('.submit-host-icon');
+    if (existing) existing.remove();
+
+    if (typeof window === 'undefined' || !window.RepoLinks
+        || typeof window.RepoLinks.externalIcon !== 'function'
+        || typeof window.RepoLinks.parseSvgIcon !== 'function') {
+      return;
+    }
+    const iconStr = window.RepoLinks.externalIcon();
+    if (!iconStr) return;
+    const svg = window.RepoLinks.parseSvgIcon(iconStr);
+    if (!svg) return;
+
+    svg.classList.add('submit-host-icon');
+    if (!svg.getAttribute('width')) svg.setAttribute('width', '16');
+    if (!svg.getAttribute('height')) svg.setAttribute('height', '16');
+    submitBtn.insertBefore(svg, submitBtn.firstChild);
+  }
+
 }
 
 // Initialize when DOM is ready if not already initialized

package/public/js/components/VoiceCentricConfigTab.js

@@ -235,6 +235,37 @@ class VoiceCentricConfigTab {
    */
   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('#vc-council-selector');
+    if (selector) {
+      selector.value = '';
+      selector.classList.add('new-council-selected');
+    }
+    this._applyConfigToUI(this._defaultConfig());
+    this._markClean();
   }
 
   /**
@@ -1494,3 +1525,8 @@ class VoiceCentricConfigTab {
 if (typeof window !== 'undefined') {
   window.VoiceCentricConfigTab = VoiceCentricConfigTab;
 }
+
+// Export for unit testing (Node/CommonJS environment)
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { VoiceCentricConfigTab };
+}