@fraziym/axoniz 0.1.0

package/dist/web/static/js/compare/selector.js

@@ -0,0 +1,1335 @@
+// compare/selector.js — model selection modal
+import state from './state.js';
+import Storage from '../storage.js';
+import { fetchModels, _persistSelections, getExcludedModels } from './models.js';
+import { showScoreboard } from './scoreboard.js';
+import { EYE_OPEN, EYE_CLOSED, ICON_DICE, ICON_PARALLEL, ICON_SEQUENTIAL, SAVE_ICON, WAVE_FRAMES, CHAT_ICON } from './icons.js';
+import { _clearProbeWaves } from './probe.js';
+import uiModule from '../ui.js';
+import spinnerModule from '../spinner.js';
+import themeModule from '../theme.js';
+
+const escapeHtml = uiModule.esc;
+
+// Match the Deep Research "Start" button (play icon + "Start", styled by
+// .research-start-btn) so the two primary actions look identical.
+const _CMP_PLAY_ICON = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21"/></svg>';
+const _CMP_START_LABEL = _CMP_PLAY_ICON + ' Start';
+
+/** Slot label: letters (A, B) in parallel, numbers (1, 2) in sequential */
+function _slotChar(i) { return state._parallel ? String.fromCharCode(65 + i) : String(i + 1); }
+
+/** Sync the Compare toolbar indicator button state. */
+function _syncToolbarIndicator(active) {
+  // The old red-accent "Compare active — click to deactivate" chip is no longer
+  // shown — Compare is exited from its own header bar, so the input-bar tool
+  // indicator was redundant. Keep it hidden regardless of state.
+  const indicator = document.getElementById('compare-indicator-btn');
+  if (indicator) {
+    indicator.style.display = 'none';
+    indicator.classList.remove('active');
+  }
+  // Notify app.js to update the plus-dot indicator
+  document.dispatchEvent(new CustomEvent('overflow-state-change'));
+}
+
+/** Disable tool toggles (web, bash, RAG, research) for clean comparison. */
+function disableToolToggles() {
+  const ids = ['web-toggle', 'bash-toggle', 'rag-toggle', 'research-toggle'];
+  state._savedToggles = {};
+  ids.forEach(id => {
+    const chk = document.getElementById(id);
+    if (chk) {
+      state._savedToggles[id] = chk.checked;
+      if (chk.checked) { chk.checked = false; chk.dispatchEvent(new Event('change')); }
+    }
+  });
+}
+
+/** Restore tool toggles to pre-compare state. */
+function restoreToolToggles() {
+  if (!state._savedToggles) return;
+  Object.entries(state._savedToggles).forEach(([id, wasChecked]) => {
+    const chk = document.getElementById(id);
+    if (chk && wasChecked && !chk.checked) { chk.checked = true; chk.dispatchEvent(new Event('change')); }
+  });
+  state._savedToggles = null;
+}
+
+/** Show model selection modal with dynamic model list + toggles. */
+async function showModelSelector() {
+  return new Promise((resolve) => {
+    let models = [];
+    let _modelsLoaded = false;
+
+    const overlay = document.createElement('div');
+    overlay.id = 'compare-model-overlay';
+    overlay.className = 'modal';
+
+    const content = document.createElement('div');
+    content.className = 'modal-content';
+    content.style.width = 'min(520px, 92vw)';
+
+    // ── Header (draggable) ──
+    const header = document.createElement('div');
+    header.className = 'modal-header';
+
+    const title = document.createElement('h4');
+    title.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px;margin-right:6px"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M13 6h3a2 2 0 0 1 2 2v7"/><path d="M11 18H8a2 2 0 0 1-2-2V9"/></svg>Model Comparison';
+    // Absorb the free space so the injected minimize (_) and close (✕) cluster
+    // together on the right instead of being spread apart by space-between.
+    title.style.marginRight = 'auto';
+    header.appendChild(title);
+
+    // Minimize (_) + Close (✕) grouped in one wrapper so they're always
+    // adjacent on the right (the auto-injected minimize otherwise drifted
+    // away from the close). The minimize carries .minimize-btn so the modal
+    // manager wires it instead of injecting a second one.
+    const headerCtrls = document.createElement('div');
+    headerCtrls.style.cssText = 'display:flex;align-items:center;gap:6px;flex-shrink:0;';
+
+    const headerMinBtn = document.createElement('button');
+    headerMinBtn.type = 'button';
+    headerMinBtn.className = 'modal-minimize-btn minimize-btn';
+    headerMinBtn.title = 'Minimize';
+    headerMinBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="5" y1="18" x2="19" y2="18"/></svg>';
+    headerMinBtn.style.margin = '0';
+
+    const headerCloseBtn = document.createElement('button');
+    headerCloseBtn.className = 'close-btn';
+    headerCloseBtn.innerHTML = '&#x2716;';
+    headerCloseBtn.style.cssText = 'flex-shrink:0;margin:0;';
+    headerCloseBtn.addEventListener('click', () => cleanup(false));
+
+    headerCtrls.appendChild(headerMinBtn);
+    headerCtrls.appendChild(headerCloseBtn);
+
+    // Toggle icons container
+    const toggleRow = document.createElement('div');
+    toggleRow.style.cssText = 'display:flex;gap:4px;align-items:flex-start;margin-left:auto;margin-right:8px;';
+
+    function _toggleLabel(text) {
+      return '<span class="compare-toggle-label">' + text + '</span>';
+    }
+
+    state._blindMode = true;
+    const blindBtn = document.createElement('button');
+    blindBtn.type = 'button';
+    blindBtn.className = 'compare-blind-toggle active';
+    blindBtn.title = 'Blind Mode — hide model names until you vote';
+    blindBtn.innerHTML = EYE_CLOSED + _toggleLabel('Blind');
+    blindBtn.addEventListener('click', () => {
+      state._blindMode = !state._blindMode;
+      blindBtn.classList.toggle('active', state._blindMode);
+      blindBtn.innerHTML = (state._blindMode ? EYE_CLOSED : EYE_OPEN) + _toggleLabel('Blind');
+      // Turning off blind mode reveals shuffled models
+      if (!state._blindMode && _shuffled) {
+        _shuffled = false;
+        diceBtn.classList.remove('active');
+      }
+      renderModelRows();
+      // Mobile hides the button labels — surface the new state as a toast.
+      uiModule.showToast('Mode: Blind ' + (state._blindMode ? 'on' : 'off'));
+      _updateModeLabel();
+      _setModeHint(state._blindMode
+        ? '<span style="color:var(--color-blind-orange)">Blind mode</span>: model names stay hidden until you vote.'
+        : '<span style="color:var(--color-blind-orange)">Blind mode off</span>: model names are shown.');
+    });
+    toggleRow.appendChild(blindBtn);
+
+    // Parallel / Sequential toggle — right after blind
+    state._parallel = true;
+    const parallelBtn = document.createElement('button');
+    parallelBtn.type = 'button';
+    parallelBtn.className = 'compare-parallel-toggle active';
+    parallelBtn.title = 'Parallel — run all models at once vs one at a time';
+    parallelBtn.innerHTML = ICON_PARALLEL + _toggleLabel('Parallel');
+    parallelBtn.addEventListener('click', () => {
+      state._parallel = !state._parallel;
+      parallelBtn.classList.toggle('active', state._parallel);
+      parallelBtn.innerHTML = (state._parallel ? ICON_PARALLEL : ICON_SEQUENTIAL) + _toggleLabel(state._parallel ? 'Parallel' : 'Sequential');
+      parallelBtn.title = state._parallel ? 'Switch to one at a time' : 'Run side by side';
+      renderModelRows();
+      uiModule.showToast('Mode: ' + (state._parallel ? 'Parallel' : 'Sequential'));
+      _updateModeLabel();
+      _setModeHint(state._parallel
+        ? '<span style="color:#5b8def">Parallel</span>: all models answer at once, side by side.'
+        : '<span style="color:#e0a050">Sequential</span>: models answer one at a time.');
+    });
+    toggleRow.appendChild(parallelBtn);
+
+    // Dice / shuffle button — next to blind toggle
+    const diceBtn = document.createElement('button');
+    diceBtn.type = 'button';
+    diceBtn.className = 'compare-dice-toggle';
+    diceBtn.title = 'Shuffle — randomly pick models for each slot';
+    diceBtn.innerHTML = ICON_DICE + _toggleLabel('Shuffle');
+    diceBtn.addEventListener('click', () => {
+      if (!_modelsLoaded) return;
+      // Toggle off if already shuffled
+      if (_shuffled) {
+        _shuffled = false;
+        diceBtn.classList.remove('active');
+        renderModelRows();
+        uiModule.showToast('Mode: Shuffle off');
+        _updateModeLabel();
+        _setModeHint('<span style="color:var(--red)">Shuffle off</span>: choose the models yourself.');
+        return;
+      }
+      // Randomly pick models from filtered list for each slot
+      const excluded = getExcludedModels();
+      const pool = filteredModels().filter(m => !excluded.includes(m.id)).slice();
+      if (pool.length === 0) return;
+      for (let i = pool.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [pool[i], pool[j]] = [pool[j], pool[i]];
+      }
+      for (let i = 0; i < selections.length; i++) {
+        const m = pool[i % pool.length];
+        selections[i] = { model: m.id, endpoint: m.url, endpointId: m.endpointId, name: m.name, endpointName: m.endpointName || '' };
+      }
+      _shuffled = true;
+      // Auto-enable blind mode so picks stay hidden
+      if (!state._blindMode) {
+        state._blindMode = true;
+        blindBtn.classList.add('active');
+        blindBtn.innerHTML = EYE_CLOSED + _toggleLabel('Blind');
+      }
+      renderModelRows();
+      uiModule.showToast(state._blindMode ? 'Mode: Shuffle on · Blind on' : 'Mode: Shuffle on');
+      _updateModeLabel();
+      _setModeHint('<span style="color:var(--red)">Shuffle</span>: random models picked for each slot (auto-hidden).');
+      // Show active state + spin only the dice icon
+      diceBtn.classList.add('active');
+      const diceSvg = diceBtn.querySelector('svg');
+      if (diceSvg) {
+        diceSvg.style.transition = 'transform 0.3s ease';
+        diceSvg.style.transform = 'rotate(360deg)';
+        setTimeout(() => { diceSvg.style.transition = ''; diceSvg.style.transform = ''; }, 300);
+      }
+    });
+    toggleRow.appendChild(diceBtn);
+
+    // (Pre-round "Shuffle models?" reminder removed at the user's request — the
+    // running-state panes still show their own shuffle nudge.)
+    function _remindShuffle() { /* no-op in the selector */ }
+
+    state._continueChat = false;
+
+    state._saveOnClose = false;
+    const saveBtn = document.createElement('button');
+    saveBtn.type = 'button';
+    saveBtn.className = 'compare-save-toggle';
+    saveBtn.title = 'Save — keep sessions after closing compare';
+    saveBtn.innerHTML = SAVE_ICON + _toggleLabel('Save');
+    saveBtn.addEventListener('click', () => {
+      state._saveOnClose = !state._saveOnClose;
+      saveBtn.classList.toggle('active', state._saveOnClose);
+      uiModule.showToast('Mode: Save ' + (state._saveOnClose ? 'on' : 'off'));
+      _updateModeLabel();
+      _setModeHint(state._saveOnClose
+        ? '<span style="color:var(--color-save-green)">Save</span>: keep these sessions after you close Compare.'
+        : '<span style="color:var(--color-save-green)">Save off</span>: sessions are discarded when you close Compare.');
+    });
+    toggleRow.appendChild(saveBtn);
+
+    // Reset button
+    const resetBtn = document.createElement('button');
+    resetBtn.type = 'button';
+    resetBtn.className = 'compare-reset-toggle';
+    resetBtn.title = 'Reset — restore all defaults';
+    resetBtn.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>' + _toggleLabel('Reset');
+    resetBtn.addEventListener('click', () => {
+      state._blindMode = true;
+      blindBtn.classList.add('active');
+      blindBtn.innerHTML = EYE_CLOSED + _toggleLabel('Blind');
+      _shuffled = false;
+      diceBtn.classList.remove('active');
+      state._continueChat = false;
+      state._saveOnClose = false;
+      saveBtn.classList.remove('active');
+      state._parallel = true;
+      parallelBtn.classList.add('active');
+      parallelBtn.innerHTML = ICON_PARALLEL + _toggleLabel('Parallel');
+      selections = [null, null];
+      renderModelRows();
+    });
+    toggleRow.appendChild(resetBtn);
+
+    header.appendChild(headerCtrls);
+
+    content.appendChild(header);
+
+    // ── Body ──
+    const body = document.createElement('div');
+    body.className = 'modal-body';
+    body.style.padding = '12px 16px';
+
+    const desc = document.createElement('p');
+    desc.style.cssText = 'color:color-mix(in srgb, var(--fg) 55%, transparent);font-size:0.85em;margin:0 0 12px;';
+    desc.textContent = 'Select models to compare side-by-side. Send the same prompt to all.';
+    body.appendChild(desc);
+
+    // Options row
+    toggleRow.style.cssText = 'display:flex;gap:4px;align-items:flex-start;flex-wrap:wrap;';
+    const modeWrap = document.createElement('div');
+    modeWrap.className = 'compare-section';
+    const modeLabel = document.createElement('div');
+    modeLabel.className = 'compare-section-label';
+    // The active modes (+colors) are appended in a span shown only on mobile,
+    // where the toggle text labels are hidden so the icons alone are ambiguous.
+    modeLabel.innerHTML = 'Mode: <span class="compare-mode-current"></span>';
+    modeWrap.appendChild(modeLabel);
+    modeWrap.appendChild(toggleRow);
+    // Contextual one-liner describing the mode you just toggled.
+    const modeHint = document.createElement('div');
+    modeHint.className = 'compare-mode-hint';
+    modeWrap.appendChild(modeHint);
+    function _setModeHint(html) { modeHint.innerHTML = html || ''; }
+    body.appendChild(modeWrap);
+
+    // Reflect the active modes in the "Mode:" label, each in its icon's color.
+    function _updateModeLabel() {
+      const cur = modeLabel.querySelector('.compare-mode-current');
+      if (!cur) return;
+      const parts = [];
+      if (state._blindMode) parts.push('<span style="color:var(--color-blind-orange)">Blind</span>');
+      parts.push(state._parallel
+        ? '<span style="color:#5b8def">Parallel</span>'
+        : '<span style="color:#e0a050">Sequential</span>');
+      if (_shuffled) parts.push('<span style="color:var(--red)">Shuffle</span>');
+      if (state._saveOnClose) parts.push('<span style="color:var(--color-save-green)">Save</span>');
+      cur.innerHTML = parts.join(', ');
+    }
+
+    // ── Type tabs (Chat / Agent / Search / Research) ──
+    state._compareMode = 'chat';
+    const typeWrap = document.createElement('div');
+    typeWrap.className = 'compare-section';
+    const typeLabel = document.createElement('div');
+    typeLabel.className = 'compare-section-label';
+    // The active type name (+icon) is appended in a span shown only on mobile,
+    // where the tab text labels are hidden so the icons alone are ambiguous.
+    typeLabel.innerHTML = 'Type: <span class="compare-type-current"></span>';
+    typeWrap.appendChild(typeLabel);
+    const tabBar = document.createElement('div');
+    tabBar.className = 'compare-mode-tabs compare-type-tabs';
+    // Agent — shell prompt `>_` (matches the bash-toggle-btn icon in the composer)
+    const _ICON_AGENT = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>';
+    const _ICON_SEARCH = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>';
+    // Research — magnifying glass with `+` (matches the sidebar Deep Research icon)
+    const _ICON_RESEARCH = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>';
+    const _modes = [
+      { id: 'chat', label: 'Chat', icon: CHAT_ICON },
+      { id: 'agent', label: 'Agent', icon: _ICON_AGENT },
+      { id: 'search', label: 'Search', icon: _ICON_SEARCH },
+      { id: 'research', label: 'Research', icon: _ICON_RESEARCH },
+    ];
+    _modes.forEach(m => {
+      const tab = document.createElement('button');
+      tab.type = 'button';
+      tab.className = 'compare-mode-tab' + (m.id === 'chat' ? ' active' : '');
+      tab.innerHTML = m.icon + '<span class="compare-toggle-label">' + m.label + '</span>';
+      tab.dataset.mode = m.id;
+      tab.addEventListener('click', () => setModeTab(m.id));
+      tabBar.appendChild(tab);
+    });
+    // Reflect the active type in the "Type:" label (icon + name) for mobile.
+    function _updateTypeLabel(mode) {
+      const cur = typeLabel.querySelector('.compare-type-current');
+      const m = _modes.find(x => x.id === mode);
+      if (cur && m) cur.innerHTML = m.icon + '<span>' + m.label + '</span>';
+    }
+    _updateTypeLabel('chat');
+    typeWrap.appendChild(tabBar);
+    body.appendChild(typeWrap);
+
+    // Per-tab selection memory
+    const _tabSelections = { chat: null, agent: null, search: null, research: null };
+
+    function setModeTab(mode) {
+      if (!_modelsLoaded) return;
+      // Save current tab's selections before switching
+      _tabSelections[state._compareMode] = selections.map(s => s ? { ...s } : null);
+      state._compareMode = mode;
+      tabBar.querySelectorAll('.compare-mode-tab').forEach(t => t.classList.remove('active'));
+      const activeTab = tabBar.querySelector(`[data-mode="${mode}"]`);
+      if (activeTab) activeTab.classList.add('active');
+      _updateTypeLabel(mode);
+      _shuffled = false;
+      diceBtn.classList.remove('active');
+      // Search and Research default to sequential; others default to parallel
+      if (mode === 'search' || mode === 'research') {
+        state._parallel = false;
+        parallelBtn.classList.remove('active');
+        parallelBtn.innerHTML = ICON_SEQUENTIAL + _toggleLabel('Sequential');
+      } else {
+        state._parallel = true;
+        parallelBtn.classList.add('active');
+        parallelBtn.innerHTML = ICON_PARALLEL + _toggleLabel('Parallel');
+      }
+      // Restore saved selections for this tab, or default
+      selections = _tabSelections[mode] ? _tabSelections[mode].slice() : [null, null];
+      _updateModeLabel();
+      _setModeHint('');
+      renderModelRows();
+    }
+    // Tab click listeners are set in the loop above
+
+    // ── Model list ──
+    const listContainer = document.createElement('div');
+    body.appendChild(listContainer);
+
+    // Show loading state immediately with spinner
+    const _loadingDiv = document.createElement('div');
+    _loadingDiv.style.cssText = 'color:color-mix(in srgb, var(--fg) 40%, transparent);font-size:0.85em;padding:12px 0;text-align:left;';
+    if (spinnerModule) {
+      const _loadSpinner = spinnerModule.create('Loading models', 'right');
+      _loadingDiv.appendChild(_loadSpinner.createElement());
+      _loadSpinner.start();
+    } else {
+      _loadingDiv.textContent = 'Loading models\u2026';
+    }
+    listContainer.appendChild(_loadingDiv);
+
+    // Restore last used selections from storage (per-mode)
+    const _selKey = 'zero-compare-selections-' + (state._compareMode || 'chat');
+    let selections = Storage.getJSON(_selKey) || Storage.getJSON('zero-compare-selections') || [];
+    // Restore synthesis models for search/research
+    if (state._compareMode === 'search' || state._compareMode === 'research') {
+      const savedSynth = Storage.getJSON('zero-compare-synth-' + state._compareMode);
+      if (savedSynth) state._searchSynthModels = savedSynth;
+    }
+    // Validate saved selections against available models (done after models load)
+    let _needsValidation = selections.length > 0;
+    let addBtn = null;
+    let _shuffled = false;
+    _updateModeLabel(); // initial readout (Blind + Parallel on by default)
+
+    function filteredModels() {
+      // Agent and Research modes use chat models
+      const effectiveType = (state._compareMode === 'agent' || state._compareMode === 'research') ? 'chat' : state._compareMode;
+      return models.filter(m => m.type === effectiveType);
+    }
+
+    function buildOption(m) {
+      return {
+        val: JSON.stringify({ model: m.id, endpoint: m.url, endpointId: m.endpointId, name: m.name, endpointName: m.endpointName || '' }),
+        label: m.endpointName ? `${m.name} (${m.endpointName})` : m.name,
+      };
+    }
+
+    /** Build a searchable model picker (used when >5 models) */
+    function _buildSearchablePicker(modelList, currentSel, slotIdx, onSelect) {
+      const wrap = document.createElement('div');
+      wrap.style.cssText = 'flex:1;position:relative;';
+
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.placeholder = 'Search models\u2026';
+      input.className = 'cmp-form-control';
+      input.style.cssText = 'width:100%;box-sizing:border-box;';
+      // Mobile: suppress the on-screen keyboard so tapping the picker
+      // opens the dropdown but doesn't shove a keyboard up over the list.
+      // (Matches the +Model dropdown's mobile behavior.)
+      if (window.innerWidth <= 768) {
+        input.setAttribute('inputmode', 'none');
+        input.setAttribute('readonly', 'readonly');
+      }
+      if (currentSel) {
+        const m = modelList.find(m => m.id === currentSel.model && m.url === currentSel.endpoint)
+          || modelList.find(m => m.id === currentSel.model);
+        if (m) input.value = buildOption(m).label;
+      } else {
+        const fallback = modelList[Math.min(slotIdx, modelList.length - 1)];
+        if (fallback) input.value = buildOption(fallback).label;
+      }
+      wrap.appendChild(input);
+
+      const dropdown = document.createElement('div');
+      dropdown.className = 'cmp-picker-dropdown';
+      // Appended to document.body (NOT wrap) and position:fixed so it escapes
+      // both the modal's overflow clipping AND any transform on the modal-content
+      // (a transformed ancestor makes position:fixed clip to it — which was why
+      // the dropdown kept cropping under the next row). Coords set in _placeDropdown.
+      dropdown.style.cssText = 'display:none;position:fixed;max-height:200px;overflow-y:auto;background:var(--panel);border:1px solid var(--border);border-radius:6px;z-index:100000;box-shadow:0 4px 12px rgba(0,0,0,0.2);';
+      document.body.appendChild(dropdown);
+
+      function renderItems(query) {
+        dropdown.innerHTML = '';
+        const q = (query || '').toLowerCase();
+        const matches = modelList.filter(m => {
+          const label = buildOption(m).label.toLowerCase();
+          return !q || label.includes(q);
+        });
+        if (matches.length === 0) {
+          const empty = document.createElement('div');
+          empty.style.cssText = 'padding:8px 12px;color:color-mix(in srgb, var(--fg) 40%, transparent);font-size:0.82em;font-style:italic;';
+          empty.textContent = 'No matches';
+          dropdown.appendChild(empty);
+          return;
+        }
+        matches.forEach(m => {
+          const opt = buildOption(m);
+          const item = document.createElement('div');
+          item.style.cssText = 'padding:6px 12px;cursor:pointer;font-size:0.85em;transition:background 0.08s;';
+          item.textContent = opt.label;
+          const isSelected = currentSel && currentSel.model === m.id && (currentSel.endpoint === m.url || !modelList.some(o => o.id === m.id && o !== m));
+          if (isSelected) item.style.background = 'color-mix(in srgb, var(--fg) 8%, transparent)';
+          item.addEventListener('mouseenter', () => { item.style.background = 'color-mix(in srgb, var(--fg) 10%, transparent)'; });
+          item.addEventListener('mouseleave', () => { item.style.background = isSelected ? 'color-mix(in srgb, var(--fg) 8%, transparent)' : ''; });
+          item.addEventListener('click', () => {
+            const chosen = { model: m.id, endpoint: m.url, endpointId: m.endpointId, name: m.name, endpointName: m.endpointName || '' };
+            input.value = opt.label;
+            currentSel = chosen;
+            onSelect(chosen);
+            dropdown.style.display = 'none';
+            input.blur();
+          });
+          dropdown.appendChild(item);
+        });
+      }
+
+      // Position the dropdown either below or above the input depending
+      // on which side has more room — otherwise on a mobile bottom-sheet
+      // a picker near the bottom of the screen would open downward and
+      // either clip past the modal or extend off the viewport.
+      const _placeDropdown = () => {
+        const inRect = input.getBoundingClientRect();
+        const vh = window.innerHeight;
+        const vw = window.innerWidth;
+        const below = vh - inRect.bottom;
+        const above = inRect.top;
+        const flipUp = below < 220 && above > below;
+        // Horizontal: align to the input but clamp inside the viewport so it
+        // never runs off the screen edge on mobile.
+        const width = Math.min(inRect.width, vw - 16);
+        let left = inRect.left;
+        if (left + width > vw - 8) left = vw - 8 - width;
+        if (left < 8) left = 8;
+        dropdown.style.left = left + 'px';
+        dropdown.style.width = width + 'px';
+        // Vertical: flip above/below based on available room (fixed coords).
+        if (flipUp) {
+          dropdown.style.top = 'auto';
+          dropdown.style.bottom = (vh - inRect.top + 2) + 'px';
+          dropdown.style.maxHeight = Math.max(120, Math.min(280, above - 16)) + 'px';
+        } else {
+          dropdown.style.bottom = 'auto';
+          dropdown.style.top = (inRect.bottom + 2) + 'px';
+          dropdown.style.maxHeight = Math.max(120, Math.min(280, below - 16)) + 'px';
+        }
+      };
+      input.addEventListener('focus', () => {
+        input.value = '';
+        renderItems('');
+        dropdown.style.display = '';
+        _placeDropdown();
+      });
+      input.addEventListener('input', () => {
+        renderItems(input.value);
+        dropdown.style.display = '';
+        _placeDropdown();
+      });
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          const first = dropdown.querySelector('div[style*="cursor:pointer"]');
+          if (first) first.click();
+        }
+      });
+      // Close on outside click. The dropdown lives in document.body, so check
+      // both wrap and dropdown; and tear the dropdown down when the picker row
+      // is removed from the DOM (rebuild) so it doesn't orphan in the body.
+      function _closeHandler(e) {
+        if (!wrap.contains(e.target) && !dropdown.contains(e.target)) {
+          dropdown.style.display = 'none';
+          if (currentSel) {
+            const m = modelList.find(m => m.id === currentSel.model && m.url === currentSel.endpoint);
+            if (m) input.value = buildOption(m).label;
+          }
+          if (!wrap.isConnected) {
+            dropdown.remove();
+            document.removeEventListener('click', _closeHandler, true);
+          }
+        }
+      }
+      setTimeout(() => document.addEventListener('click', _closeHandler, true), 0);
+
+      return wrap;
+    }
+
+    function renderModelRows() {
+      if (!_modelsLoaded) return;
+      // The picker dropdowns live in document.body (to escape modal clipping);
+      // clear any leftovers before rebuilding the rows so they don't orphan.
+      document.querySelectorAll('.cmp-picker-dropdown').forEach(d => d.remove());
+
+      // ── Search mode: show provider dropdowns ──
+      if (state._compareMode === 'search') {
+        listContainer.innerHTML = '';
+        if (!state._cachedProviders) {
+          listContainer.innerHTML = '<div style="color:color-mix(in srgb, var(--fg) 40%, transparent);font-size:0.85em;padding:12px 0;text-align:left;">Loading search providers\u2026</div>';
+          fetch(`${state.API_BASE}/api/search/providers`).then(r => r.json()).then(providers => {
+            state._cachedProviders = providers;
+            renderModelRows();
+          }).catch(() => {
+            listContainer.innerHTML = '<div style="color:var(--color-error);font-size:0.85em;padding:12px 0;">Failed to load search providers</div>';
+          });
+          return;
+        }
+        const available = state._cachedProviders.filter(p => p.available);
+        if (available.length === 0) {
+          listContainer.innerHTML = '<div style="color:color-mix(in srgb, var(--fg) 40%, transparent);font-size:0.85em;padding:12px 0;text-align:center;font-style:italic;">No search providers configured</div>';
+          if (addBtn) addBtn.style.display = 'none';
+          return;
+        }
+        // Ensure per-pane synth model array matches selections length
+        if (!state._searchSynthModels) state._searchSynthModels = [];
+        while (state._searchSynthModels.length < selections.length) state._searchSynthModels.push(null);
+
+        const chatModels = state._cachedModels.filter(m => m.type === 'chat');
+        const _seqStepS = !state._parallel ? Math.min(20, Math.floor(80 / Math.max(selections.length, 1))) : 0;
+
+        selections.forEach((sel, idx) => {
+          const row = document.createElement('div');
+          row.className = 'cmp-model-row';
+          if (_seqStepS) row.style.marginLeft = (idx * _seqStepS) + 'px';
+
+          // Left label: number/letter or blind eye icon
+          const lbl = document.createElement('span');
+          lbl.className = 'cmp-row-label';
+          if (state._blindMode) {
+            lbl.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><line x1="8" y1="16" x2="16" y2="8"/><line x1="8" y1="8" x2="16" y2="16"/></svg>';
+          } else {
+            lbl.textContent = _slotChar(idx);
+          }
+          row.appendChild(lbl);
+
+          // Model picker (synthesis LLM) — searchable for large lists
+          if (!state._searchSynthModels[idx] && chatModels.length > 0) {
+            const fb = chatModels[Math.min(idx, chatModels.length - 1)];
+            state._searchSynthModels[idx] = { model: fb.id, endpoint: fb.url, endpointId: fb.endpointId, name: fb.name };
+          }
+          if (chatModels.length >= 5) {
+            const picker = _buildSearchablePicker(chatModels, state._searchSynthModels[idx], idx, (chosen) => {
+              state._searchSynthModels[idx] = chosen;
+            });
+            row.appendChild(picker);
+          } else {
+            const modelSelect = document.createElement('select');
+            modelSelect.className = 'cmp-form-control';
+            modelSelect.style.flex = '1';
+            chatModels.forEach(m => {
+              const opt = document.createElement('option');
+              opt.value = JSON.stringify({ model: m.id, endpoint: m.url, endpointId: m.endpointId, name: m.name, endpointName: m.endpointName || '' });
+              opt.textContent = m.endpointName ? `${m.name} (${m.endpointName})` : m.name;
+              if (state._searchSynthModels[idx] && state._searchSynthModels[idx].model === m.id) opt.selected = true;
+              modelSelect.appendChild(opt);
+            });
+            modelSelect.addEventListener('change', () => {
+              try { state._searchSynthModels[idx] = JSON.parse(modelSelect.value); } catch (e) {}
+            });
+            try { if (!state._searchSynthModels[idx]) state._searchSynthModels[idx] = JSON.parse(modelSelect.value); } catch (e) {}
+            row.appendChild(modelSelect);
+          }
+
+          // Search provider picker (smaller)
+          const provSelect = document.createElement('select');
+          provSelect.className = 'cmp-form-control cmp-prov-select';
+          available.forEach((p, pi) => {
+            const optEl = document.createElement('option');
+            optEl.value = JSON.stringify({ model: p.id, endpoint: '', endpointId: null, name: p.label, searchProvider: p.id });
+            optEl.textContent = p.label;
+            if (sel && sel.model === p.id) optEl.selected = true;
+            else if (!sel && pi === Math.min(idx, available.length - 1)) optEl.selected = true;
+            provSelect.appendChild(optEl);
+          });
+          provSelect.addEventListener('change', () => {
+            try { selections[idx] = JSON.parse(provSelect.value); } catch (e) {}
+          });
+          try { if (!selections[idx]) selections[idx] = JSON.parse(provSelect.value); } catch (e) {}
+          row.appendChild(provSelect);
+
+          // X remove button when >2 slots
+          if (selections.length > 2) {
+            const rmBtn = document.createElement('button');
+            rmBtn.type = 'button';
+            rmBtn.textContent = '\u00d7';
+            rmBtn.className = 'cmp-rm-btn';
+            rmBtn.addEventListener('mouseenter', () => { rmBtn.style.opacity = '1'; rmBtn.style.color = 'var(--color-error)'; });
+            rmBtn.addEventListener('mouseleave', () => { rmBtn.style.opacity = '0.3'; rmBtn.style.color = 'var(--fg)'; });
+            rmBtn.addEventListener('click', () => { selections.splice(idx, 1); state._searchSynthModels.splice(idx, 1); renderModelRows(); });
+            row.appendChild(rmBtn);
+          }
+
+          listContainer.appendChild(row);
+        });
+        if (addBtn) addBtn.style.display = selections.length >= 8 ? 'none' : '';
+        return;
+      }
+
+      // ── Chat / Image / Agent / Research mode: show model dropdowns ──
+      const filtered = filteredModels();
+      listContainer.innerHTML = '';
+
+      // Research mode needs search providers too — fetch if not cached
+      const needsProviders = state._compareMode === 'research';
+      if (needsProviders && !state._cachedProviders) {
+        listContainer.innerHTML = '<div style="color:color-mix(in srgb, var(--fg) 40%, transparent);font-size:0.85em;padding:12px 0;">Loading search providers\u2026</div>';
+        fetch(`${state.API_BASE}/api/search/providers`).then(r => r.json()).then(providers => {
+          state._cachedProviders = providers;
+          renderModelRows();
+        }).catch(() => {
+          state._cachedProviders = [];
+          renderModelRows();
+        });
+        return;
+      }
+
+      if (filtered.length === 0) {
+        const empty = document.createElement('div');
+        empty.style.cssText = 'color:color-mix(in srgb, var(--fg) 40%, transparent);font-size:0.85em;padding:12px 0;text-align:center;font-style:italic;';
+        empty.textContent = 'No ' + state._compareMode + ' models available';
+        listContainer.appendChild(empty);
+        if (addBtn) addBtn.style.display = 'none';
+        return;
+      }
+
+      // Research: ensure per-pane provider array
+      const researchProviders = needsProviders && state._cachedProviders ? state._cachedProviders.filter(p => p.available) : [];
+      if (!state._searchSynthModels) state._searchSynthModels = [];
+      while (state._searchSynthModels.length < selections.length) state._searchSynthModels.push(null);
+
+      const _seqStep = !state._parallel ? Math.min(20, Math.floor(80 / Math.max(selections.length, 1))) : 0;
+      selections.forEach((sel, idx) => {
+        const row = document.createElement('div');
+        row.className = 'cmp-model-row';
+        if (_seqStep) row.style.marginLeft = (idx * _seqStep) + 'px';
+
+        // Left label: number/letter or blind eye icon
+        const lbl = document.createElement('span');
+        lbl.className = 'cmp-row-label';
+        if (state._blindMode) {
+          lbl.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><line x1="8" y1="16" x2="16" y2="8"/><line x1="8" y1="8" x2="16" y2="16"/></svg>';
+        } else {
+          lbl.textContent = _slotChar(idx);
+        }
+        row.appendChild(lbl);
+
+        if (_shuffled) {
+          const mask = document.createElement('div');
+          mask.className = 'cmp-form-control';
+          mask.style.cssText = 'flex:1;opacity:0.4;font-style:italic;';
+          mask.textContent = 'Hidden';
+          row.appendChild(mask);
+        } else if (filtered.length >= 5) {
+          const picker = _buildSearchablePicker(filtered, sel, idx, (chosen) => {
+            selections[idx] = chosen;
+            _remindShuffle();
+          });
+          if (!selections[idx]) {
+            const fallback = filtered[Math.min(idx, filtered.length - 1)];
+            selections[idx] = { model: fallback.id, endpoint: fallback.url, endpointId: fallback.endpointId, name: fallback.name };
+          }
+          row.appendChild(picker);
+        } else {
+          const select = document.createElement('select');
+          select.className = 'cmp-form-control';
+          select.style.flex = '1';
+          filtered.forEach((m, mi) => {
+            const opt = buildOption(m);
+            const optEl = document.createElement('option');
+            optEl.value = opt.val;
+            optEl.textContent = opt.label;
+            if (sel && sel.model === m.id && (sel.endpoint === m.url || !filtered.some(o => o.id === m.id && o !== m))) optEl.selected = true;
+            else if (!sel && mi === Math.min(idx, filtered.length - 1)) optEl.selected = true;
+            select.appendChild(optEl);
+          });
+          select.addEventListener('change', () => {
+            try { selections[idx] = JSON.parse(select.value); } catch (e) { console.warn('Compare model select parse failed:', e); }
+            _remindShuffle();
+          });
+          try { if (!selections[idx]) selections[idx] = JSON.parse(select.value); } catch (e) { console.warn('Compare model init parse failed:', e); }
+          row.appendChild(select);
+        }
+
+        // Research mode: search provider picker next to model
+        if (needsProviders && researchProviders.length > 0 && !_shuffled) {
+          const provSelect = document.createElement('select');
+          provSelect.className = 'cmp-form-control cmp-prov-select';
+          provSelect.title = 'Search provider';
+          researchProviders.forEach((p, pi) => {
+            const optEl = document.createElement('option');
+            optEl.value = p.id;
+            optEl.textContent = p.label;
+            if (state._searchSynthModels[idx] && state._searchSynthModels[idx] === p.id) optEl.selected = true;
+            else if (!state._searchSynthModels[idx] && pi === 0) optEl.selected = true;
+            provSelect.appendChild(optEl);
+          });
+          provSelect.addEventListener('change', () => { state._searchSynthModels[idx] = provSelect.value; });
+          if (!state._searchSynthModels[idx]) state._searchSynthModels[idx] = provSelect.value;
+          row.appendChild(provSelect);
+        }
+
+        // X remove button when >2 slots
+        if (selections.length > 2) {
+          const rmBtn = document.createElement('button');
+          rmBtn.type = 'button';
+          rmBtn.textContent = '\u00d7';
+          rmBtn.className = 'cmp-rm-btn';
+          rmBtn.addEventListener('mouseenter', () => { rmBtn.style.opacity = '1'; rmBtn.style.color = 'var(--color-error)'; });
+          rmBtn.addEventListener('mouseleave', () => { rmBtn.style.opacity = '0.3'; rmBtn.style.color = 'var(--fg)'; });
+          rmBtn.addEventListener('click', () => { selections.splice(idx, 1); if (state._searchSynthModels.length > idx) state._searchSynthModels.splice(idx, 1); renderModelRows(); });
+          row.appendChild(rmBtn);
+        }
+
+        listContainer.appendChild(row);
+      });
+      if (addBtn) addBtn.style.display = (selections.length >= 8) ? 'none' : '';
+    }
+
+    // Default to 2 empty slots if no saved selections
+    if (!selections.length || !selections.some(s => s !== null)) selections = [null, null];
+
+    addBtn = document.createElement('button');
+    addBtn.type = 'button';
+    addBtn.style.cssText = 'display:none;align-items:center;gap:6px;background:none;border:1px dashed var(--border);color:var(--fg);border-radius:6px;cursor:pointer;padding:6px 12px;font-size:0.82em;opacity:0.6;transition:all 0.15s;margin-bottom:16px;width:100%;justify-content:center;';
+    addBtn.textContent = '+ Add Model';
+    addBtn.addEventListener('mouseenter', () => { addBtn.style.opacity = '1'; });
+    addBtn.addEventListener('mouseleave', () => { addBtn.style.opacity = '0.6'; });
+    addBtn.addEventListener('click', () => {
+      if (selections.length >= 8) return;
+      if (_shuffled) {
+        // In shuffle mode every slot is a hidden, randomly-picked model — so a
+        // new slot must get a random pool model too, not an empty picker.
+        const excluded = getExcludedModels();
+        const used = new Set(selections.filter(Boolean).map(s => s.model + '|' + s.endpoint));
+        const pool = filteredModels().filter(m => !excluded.includes(m.id));
+        const fresh = pool.filter(m => !used.has(m.id + '|' + m.url));
+        const src = fresh.length ? fresh : pool;
+        const pick = src.length ? src[Math.floor(Math.random() * src.length)] : null;
+        selections.push(pick ? { model: pick.id, endpoint: pick.url, endpointId: pick.endpointId, name: pick.name, endpointName: pick.endpointName || '' } : null);
+      } else {
+        selections.push(null);
+      }
+      renderModelRows();
+      _remindShuffle();
+    });
+    body.appendChild(addBtn);
+
+    // ── Timeout input ──
+    const timeoutRow = document.createElement('div');
+    timeoutRow.style.cssText = 'display:flex;align-items:center;gap:8px;margin-bottom:8px;';
+    const timeoutLabel = document.createElement('span');
+    timeoutLabel.style.cssText = 'color:color-mix(in srgb, var(--fg) 55%, transparent);font-size:0.82em;';
+    timeoutLabel.textContent = 'Timeout:';
+    const timeoutInput = document.createElement('input');
+    timeoutInput.type = 'number';
+    timeoutInput.min = '5';
+    timeoutInput.max = '300';
+    timeoutInput.value = String(state._timeout);
+    timeoutInput.style.cssText = 'width:60px;padding:4px 8px;background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:4px;font-size:0.82em;text-align:center;-moz-appearance:textfield;';
+    const timeoutSuffix = document.createElement('span');
+    timeoutSuffix.style.cssText = 'color:color-mix(in srgb, var(--fg) 55%, transparent);font-size:0.82em;';
+    timeoutSuffix.textContent = 'seconds';
+    timeoutRow.appendChild(timeoutLabel);
+    timeoutRow.appendChild(timeoutInput);
+    timeoutRow.appendChild(timeoutSuffix);
+
+    // Scoreboard button
+    const scoreBtn = document.createElement('button');
+    scoreBtn.type = 'button';
+    scoreBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:4px;"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>Scoreboard';
+    scoreBtn.style.cssText = 'margin-left:auto;padding:4px 10px;background:transparent;color:var(--fg);border:1px solid var(--border);border-radius:4px;cursor:pointer;font-size:0.82em;opacity:0.7;position:relative;top:-5px;';
+    scoreBtn.addEventListener('mouseenter', () => { scoreBtn.style.opacity = '1'; });
+    scoreBtn.addEventListener('mouseleave', () => { scoreBtn.style.opacity = '0.7'; });
+    scoreBtn.addEventListener('click', () => showScoreboard());
+    timeoutRow.appendChild(scoreBtn);
+
+    body.appendChild(timeoutRow);
+
+    content.appendChild(body);
+
+    // ── Footer with action buttons ──
+    const footer = document.createElement('div');
+    footer.className = 'modal-footer';
+    footer.style.cssText = 'display:flex;gap:8px;justify-content:flex-end;padding:14px 16px 10px;border-top:1px solid var(--border);';
+    // Cancel button removed — the overlay's X / outside-click / Esc all
+    // dismiss the popup, so the footer Cancel was redundant.
+    const startBtn = document.createElement('button');
+    startBtn.innerHTML = _CMP_START_LABEL;
+    startBtn.className = 'research-start-btn';
+    startBtn.disabled = true;
+    // Pin to the same 30px box as Cancel so both buttons sit on the same line.
+    startBtn.style.cssText = 'opacity:0.4;height:30px;box-sizing:border-box;align-items:center;';
+    footer.appendChild(startBtn);
+    content.appendChild(footer);
+
+    overlay.appendChild(content);
+    document.body.appendChild(overlay);
+
+    // Make draggable via header
+    if (themeModule && themeModule.makeDraggable) {
+      themeModule.makeDraggable(content, header);
+    }
+
+    function cleanup(result) {
+      overlay.remove();
+      // Remove any body-appended picker dropdowns so they don't orphan.
+      document.querySelectorAll('.cmp-picker-dropdown').forEach(d => d.remove());
+      if (result) {
+        state._selectedModels = selections.filter(Boolean);
+        state._timeout = Math.max(5, parseInt(timeoutInput.value) || 30);
+        // Persist selections for next time (save filtered, non-null entries)
+        _persistSelections();
+      }
+      resolve(result);
+    }
+    // (cancelBtn removed — overlay X / outside-click / Esc still call cleanup)
+    startBtn.addEventListener('click', async () => {
+      if (!_modelsLoaded) return;
+      let selected = selections.filter(Boolean);
+      // Auto-populate any null selections from available models
+      if (selected.length < selections.length) {
+        const avail = state._compareMode === 'search' ? [] : filteredModels();
+        selections.forEach((s, i) => {
+          if (!s && avail.length > 0) {
+            const fb = avail[Math.min(i, avail.length - 1)];
+            selections[i] = { model: fb.id, endpoint: fb.url, endpointId: fb.endpointId, name: fb.name };
+          }
+        });
+        selected = selections.filter(Boolean);
+      }
+      if (selected.length < 1) return;
+
+      // For search mode, probe the synthesis LLM models instead of providers
+      const modelsToProbe = (state._compareMode === 'search')
+        ? (state._searchSynthModels || []).filter(Boolean)
+        : selected;
+      if (modelsToProbe.length < 1) { cleanup(true); return; }
+
+      // ── Skip probe if all models already probed, go straight to start ──
+      const allAlreadyProbed = modelsToProbe.every(m => state._probed.has(m.model));
+      if (allAlreadyProbed) { cleanup(true); return; }
+
+      // ── Check selected models before starting ──
+      startBtn.disabled = true;
+      startBtn.style.opacity = '0.6';
+
+      const isBlind = state._blindMode || _shuffled;
+
+      // Show probe overlay as a fixed modal
+      const probeOverlay = document.createElement('div');
+      probeOverlay.className = 'compare-probe-overlay';
+      const probeCard = document.createElement('div');
+      probeCard.className = 'compare-probe-card';
+      probeCard.innerHTML = '<div class="compare-probe-title">Checking models...</div>';
+      let _probeSkipped = false;
+      const probeList = document.createElement('div');
+      probeList.className = 'compare-probe-list';
+      modelsToProbe.forEach((m, i) => {
+        const row = document.createElement('div');
+        row.className = 'compare-probe-row';
+        row.dataset.model = m.model;
+        row.dataset.idx = i;
+        // In blind mode, hide name until failure — only show slot letter
+        const name = m.name || m.model.split('/').pop();
+        const displayName = isBlind ? `Model ${_slotChar(i)}` : escapeHtml(name);
+        row._realName = name;
+        row.innerHTML = `<span class="compare-probe-spinner">▁▂▃</span><span class="compare-probe-name">${displayName}</span><span class="compare-probe-status"></span>`;
+        const waveEl = row.querySelector('.compare-probe-spinner');
+        const waveFrames = WAVE_FRAMES;
+        let waveIdx = 0;
+        row._waveInterval = setInterval(() => {
+          waveIdx = (waveIdx + 1) % waveFrames.length;
+          if (waveEl && !waveEl.classList.contains('ok') && !waveEl.classList.contains('fail')) {
+            waveEl.textContent = waveFrames[waveIdx];
+          }
+        }, 100);
+        probeList.appendChild(row);
+      });
+      probeCard.appendChild(probeList);
+      const skipBtn = document.createElement('button');
+      skipBtn.textContent = 'Skip';
+      skipBtn.className = 'cmp-btn-secondary';
+      skipBtn.style.cssText = 'padding:4px 14px;font-size:11px;opacity:0.5;transition:opacity 0.15s;margin-top:8px;';
+      skipBtn.addEventListener('mouseenter', () => { skipBtn.style.opacity = '1'; });
+      skipBtn.addEventListener('mouseleave', () => { skipBtn.style.opacity = '0.5'; });
+      skipBtn.addEventListener('click', () => {
+        _probeSkipped = true;
+        _clearProbeWaves();
+        probeOverlay.remove();
+        cleanup(true);
+      });
+      probeCard.appendChild(skipBtn);
+      probeOverlay.appendChild(probeCard);
+      // The CSS z-index for .compare-probe-overlay is 300, but modalManager
+      // bumps each opened tool modal above that on every focus (_modalTopZ
+      // starts at 300 and increments). So the compare modal often ends up
+      // ABOVE the probe overlay, hiding it. Recompute from the compare
+      // modal's current effective z-index so probe always sits one above.
+      const _cmpModal = document.getElementById('compare-model-overlay');
+      if (_cmpModal) {
+        const _cmpZ = parseInt(getComputedStyle(_cmpModal).zIndex, 10) || 0;
+        probeOverlay.style.setProperty('z-index', String(_cmpZ + 1), 'important');
+      }
+      document.body.appendChild(probeOverlay);
+
+      // ESC to close probe overlay (stopPropagation prevents closing model selector too)
+      const _probeEsc = (e) => {
+        if (e.key === 'Escape') {
+          e.stopPropagation();
+          e.preventDefault();
+          _probeSkipped = true;
+          _clearProbeWaves();
+          probeOverlay.remove();
+          document.removeEventListener('keydown', _probeEsc, false);
+          startBtn.disabled = false;
+          startBtn.innerHTML = _CMP_START_LABEL;
+          startBtn.style.opacity = '1';
+        }
+      };
+      document.addEventListener('keydown', _probeEsc, false);
+
+      // Helper: probe a single model (skip image models — they use a different API)
+      const _imageModelPrefixes = ['dall-e', 'gpt-image', 'chatgpt-image', 'stable-diffusion', 'sdxl', 'flux', 'midjourney'];
+      function _isImageModel(modelId) {
+        const lower = (modelId || '').toLowerCase();
+        return _imageModelPrefixes.some(p => lower.includes(p));
+      }
+      async function _probeOne(m) {
+        if (_isImageModel(m.model)) {
+          return { status: 'ok', model: m.model, skipped: true, skipReason: 'Image' };
+        }
+        // Search mode — probe the LLM model normally (don't skip)
+        if (state._compareMode === 'search' && !m.model) {
+          return { status: 'ok', model: m.model, skipped: true, skipReason: 'No model' };
+        }
+        const res = await fetch(`${state.API_BASE}/api/probe-selected`, {
+          method: 'POST', credentials: 'same-origin',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ models: [{ endpoint_id: m.endpointId || '', model: m.model, endpoint: m.endpoint || '', with_tools: state._compareMode === 'agent' }] }),
+        });
+        const data = await res.json();
+        return (data.results || [])[0] || { status: 'fail', error: 'No response' };
+      }
+
+      // Helper: update a probe row's visual state
+      function _updateRow(idx, result) {
+        const row = probeList.querySelector(`[data-idx="${idx}"]`);
+        if (!row) return;
+        // Stop wave animation
+        if (row._waveInterval) { clearInterval(row._waveInterval); row._waveInterval = null; }
+        const spinner = row.querySelector('.compare-probe-spinner');
+        const status = row.querySelector('.compare-probe-status');
+        if (result.status === 'ok') {
+          spinner.textContent = '\u2713';
+          spinner.classList.remove('fail');
+          spinner.classList.add('ok');
+          status.textContent = result.skipped ? (result.skipReason || 'Skipped') : (result.latency_ms ? `${result.latency_ms}ms` : 'OK');
+          status.classList.remove('fail');
+          status.classList.add('ok');
+          row.classList.remove('fail');
+          // Track as probed
+          if (result.model) state._probed.add(result.model);
+        } else {
+          spinner.textContent = '\u2717';
+          spinner.classList.remove('ok');
+          spinner.classList.add('fail');
+          status.textContent = '';
+          status.classList.remove('ok');
+          row.classList.add('fail');
+          // Reveal real model name on failure (even in blind mode)
+          if (isBlind && row._realName) {
+            const nameEl = row.querySelector('.compare-probe-name');
+            if (nameEl) nameEl.textContent = row._realName;
+          }
+          // Remove old detail/actions if retrying
+          const oldDetail = row.nextElementSibling;
+          if (oldDetail && oldDetail.classList.contains('compare-probe-detail')) oldDetail.remove();
+          // Error + actions below the row
+          const detail = document.createElement('div');
+          detail.className = 'compare-probe-detail';
+          detail.style.cssText = 'grid-column:1/-1;display:flex;align-items:flex-start;gap:6px;padding:4px 10px 6px;font-size:10px;opacity:0.6;background:color-mix(in srgb, var(--color-error, #f44) 5%, transparent);border-radius:4px;margin-top:-2px;';
+          const errSpan = document.createElement('span');
+          // Truncate long error messages
+          const errText = (result.error || 'Failed');
+          errSpan.textContent = errText.length > 80 ? errText.slice(0, 80) + '...' : errText;
+          errSpan.title = errText;
+          errSpan.style.cssText = 'flex:1;line-height:1.4;';
+          detail.appendChild(errSpan);
+          // Track timeout for retry doubling
+          if (!row._probeTimeout) row._probeTimeout = 15000;
+          if (result.error === 'Timeout') row._probeTimeout = Math.min(row._probeTimeout * 2, 120000);
+          const retryBtn = document.createElement('button');
+          retryBtn.className = 'compare-probe-action-btn';
+          const retryLabel = result.error === 'Timeout' ? `Retry ${Math.round(row._probeTimeout / 1000)}s` : 'Retry';
+          retryBtn.textContent = retryLabel;
+          retryBtn.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            detail.remove();
+            if (isBlind) {
+              const nameEl = row.querySelector('.compare-probe-name');
+              if (nameEl) nameEl.textContent = `Model ${_slotChar(idx)}`;
+            }
+            const waveFrames2 = WAVE_FRAMES;
+            let w2 = 0;
+            spinner.classList.remove('ok', 'fail');
+            spinner.style.color = '';
+            row._waveInterval = setInterval(() => { w2 = (w2 + 1) % waveFrames2.length; spinner.textContent = waveFrames2[w2]; }, 100);
+            row.classList.remove('fail');
+            const r2 = await Promise.race([_probeOne(modelsToProbe[idx]), new Promise(r => setTimeout(() => r({ status: 'fail', error: 'Timeout' }), row._probeTimeout))]);
+            _updateRow(idx, r2);
+          });
+          const swapBtn = document.createElement('button');
+          swapBtn.className = 'compare-probe-action-btn';
+          swapBtn.textContent = 'Swap';
+          swapBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            _clearProbeWaves();
+            probeOverlay.remove();
+            _probeSkipped = true;
+            startBtn.disabled = false;
+            startBtn.innerHTML = _CMP_START_LABEL;
+            startBtn.style.opacity = '1';
+          });
+          detail.appendChild(retryBtn);
+          detail.appendChild(swapBtn);
+          row.after(detail);
+        }
+      }
+
+      try {
+        // Probe all in parallel (with 15s timeout per model)
+        const results = await Promise.all(modelsToProbe.map(m =>
+          Promise.race([
+            _probeOne(m),
+            new Promise(r => setTimeout(() => r({ status: 'fail', error: 'Timeout' }), 15000))
+          ])
+        ));
+        if (_probeSkipped) return;
+        let allOk = true;
+        let failCount = 0;
+
+        for (let i = 0; i < results.length; i++) {
+          _updateRow(i, results[i]);
+          if (results[i].status !== 'ok') {
+            allOk = false;
+            failCount++;
+          }
+        }
+
+        // In shuffle/blind mode: auto-swap failed models silently (not for search/research)
+        if (!allOk && _shuffled && state._compareMode !== 'search' && state._compareMode !== 'research') {
+          const excluded = getExcludedModels();
+          const usedModels = new Set(selections.filter(Boolean).map(m => m.model));
+          const pool = filteredModels().filter(m => !excluded.includes(m.id) && !usedModels.has(m.id));
+          let poolIdx = 0;
+
+          for (let i = 0; i < results.length; i++) {
+            if (results[i].status !== 'ok') {
+              const row = probeList.querySelector(`[data-idx="${i}"]`);
+              // Restart wave in red to show swapping
+              if (row) {
+                const spinner = row.querySelector('.compare-probe-spinner');
+                const status = row.querySelector('.compare-probe-status');
+                if (spinner) {
+                  spinner.classList.remove('ok', 'fail');
+                  spinner.style.color = 'var(--color-error, #f44)';
+                  const waveFrames = WAVE_FRAMES;
+                  let wIdx = 0;
+                  row._waveInterval = setInterval(() => { wIdx = (wIdx + 1) % waveFrames.length; spinner.textContent = waveFrames[wIdx]; }, 100);
+                }
+                if (status) status.textContent = 'Swapping...';
+              }
+
+              // Try up to 3 replacements with 10s timeout each
+              let swapped = false;
+              for (let attempt = 0; attempt < 3 && poolIdx < pool.length; attempt++) {
+                const replacement = pool[poolIdx++];
+                const probePromise = _probeOne({ model: replacement.id, endpoint: replacement.url, endpointId: replacement.endpointId });
+                const timeoutPromise = new Promise(r => setTimeout(() => r({ status: 'timeout', error: 'Swap timed out' }), 10000));
+                const probeResult = await Promise.race([probePromise, timeoutPromise]);
+                if (probeResult.status === 'ok') {
+                  selections[i] = { model: replacement.id, endpoint: replacement.url, endpointId: replacement.endpointId, name: replacement.name };
+                  usedModels.add(replacement.id);
+                  if (row && row._waveInterval) { clearInterval(row._waveInterval); row._waveInterval = null; }
+                  _updateRow(i, probeResult);
+                  swapped = true;
+                  break;
+                }
+              }
+              if (!swapped) {
+                if (row && row._waveInterval) { clearInterval(row._waveInterval); row._waveInterval = null; }
+                if (row) {
+                  const spinner = row.querySelector('.compare-probe-spinner');
+                  const status = row.querySelector('.compare-probe-status');
+                  if (spinner) { spinner.textContent = '\u2717'; spinner.classList.add('fail'); spinner.style.color = ''; }
+                  if (status) { status.textContent = 'No replacement'; }
+                }
+              }
+            }
+          }
+
+          // Re-check if all are ok now
+          const finalToProbe = (state._compareMode === 'search') ? (state._searchSynthModels || []).filter(Boolean) : selections.filter(Boolean);
+          const finalResults = await Promise.all(finalToProbe.map(m => _probeOne(m)));
+          allOk = finalResults.every(r => r.status === 'ok');
+          failCount = finalResults.filter(r => r.status !== 'ok').length;
+        }
+
+        // ── Phase 2: For search/research, also check search providers ──
+        if (allOk && (state._compareMode === 'search' || state._compareMode === 'research')) {
+          const providers = state._compareMode === 'search'
+            ? selected.map(s => ({ id: s.model, label: s.name }))
+            : (state._searchSynthModels || []).map(p => typeof p === 'string' ? { id: p, label: p } : null).filter(Boolean);
+
+          if (providers.length > 0) {
+            const titleEl = probeOverlay.querySelector('.compare-probe-title');
+            titleEl.textContent = 'Checking search providers...';
+
+            // Add provider rows
+            const providerRows = [];
+            providers.forEach((p, i) => {
+              const row = document.createElement('div');
+              row.className = 'compare-probe-row';
+              row.dataset.idx = 'p' + i;
+              row.innerHTML = `<span class="compare-probe-spinner">▁▂▃</span><span class="compare-probe-name">${p.label || p.id}</span><span class="compare-probe-status"></span>`;
+              const waveEl = row.querySelector('.compare-probe-spinner');
+              const waveFrames = WAVE_FRAMES;
+              let wIdx = 0;
+              row._waveInterval = setInterval(() => {
+                wIdx = (wIdx + 1) % waveFrames.length;
+                if (waveEl && !waveEl.classList.contains('ok') && !waveEl.classList.contains('fail')) waveEl.textContent = waveFrames[wIdx];
+              }, 100);
+              probeList.appendChild(row);
+              providerRows.push(row);
+            });
+
+            // Probe each provider with a test query
+            const provResults = await Promise.all(providers.map(async (p) => {
+              try {
+                const fd = new FormData();
+                fd.append('query', 'test');
+                fd.append('provider', p.id);
+                fd.append('count', '1');
+                const r = await fetch(`${state.API_BASE}/api/search/query`, { method: 'POST', body: fd, credentials: 'same-origin' });
+                const d = await r.json();
+                return { status: d.error ? 'fail' : 'ok', error: d.error };
+              } catch (e) {
+                return { status: 'fail', error: e.message };
+              }
+            }));
+
+            let searchAllOk = true;
+            provResults.forEach((result, i) => {
+              const row = providerRows[i];
+              if (row._waveInterval) { clearInterval(row._waveInterval); row._waveInterval = null; }
+              const spinner = row.querySelector('.compare-probe-spinner');
+              const status = row.querySelector('.compare-probe-status');
+              if (result.status === 'ok') {
+                spinner.textContent = '\u2713'; spinner.classList.add('ok');
+                status.textContent = 'OK'; status.classList.add('ok');
+              } else {
+                spinner.textContent = '\u2717'; spinner.classList.add('fail');
+                status.textContent = result.error || 'Failed'; status.classList.add('fail');
+                row.classList.add('fail');
+                searchAllOk = false;
+              }
+            });
+
+            if (!searchAllOk) {
+              allOk = false;
+              failCount += provResults.filter(r => r.status !== 'ok').length;
+            }
+          }
+        }
+
+        if (allOk) {
+          // Don't hide the Skip button here — collapsing its space made the
+          // card shrink and the title + rows jump ("quick cut"). On success the
+          // whole overlay fades out a moment later, so just leave it in place.
+          probeOverlay.querySelector('.compare-probe-title').textContent = 'All ready!';
+          setTimeout(() => {
+            probeOverlay.style.transition = 'opacity 0.3s ease';
+            probeOverlay.style.opacity = '0';
+            setTimeout(() => { _clearProbeWaves(); probeOverlay.remove(); cleanup(true); if (window._updateCheckBtnState) window._updateCheckBtnState(); }, 300);
+          }, 400);
+        } else {
+          // Failed — the Skip button is replaced by the Go Back / Start Anyway row.
+          skipBtn.style.display = 'none';
+          // Some failed — show which ones
+          const failedNames = [];
+          probeList.querySelectorAll('.compare-probe-row.fail').forEach(row => {
+            failedNames.push(row.querySelector('.compare-probe-name').textContent);
+          });
+          const titleEl = probeOverlay.querySelector('.compare-probe-title');
+          titleEl.textContent = failedNames.length <= 2
+            ? failedNames.join(' & ') + ' failed'
+            : `${failCount} models failed`;
+          const btnRow = document.createElement('div');
+          btnRow.style.cssText = 'display:flex;gap:8px;justify-content:center;margin-top:12px;';
+          const goBackBtn = document.createElement('button');
+          goBackBtn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-1px;margin-right:3px;"><polyline points="15 18 9 12 15 6"/></svg>Go Back';
+          goBackBtn.className = 'cmp-btn-secondary';
+          goBackBtn.style.cssText = 'padding:5px 12px;font-size:12px;display:inline-flex;align-items:center;';
+          goBackBtn.addEventListener('click', () => { _clearProbeWaves(); probeOverlay.remove(); startBtn.disabled = false; startBtn.innerHTML = _CMP_START_LABEL; startBtn.style.opacity = '1'; });
+          const startAnywayBtn = document.createElement('button');
+          startAnywayBtn.textContent = 'Start Anyway';
+          startAnywayBtn.className = 'cmp-btn-primary';
+          startAnywayBtn.style.cssText = 'padding:5px 12px;font-size:12px;';
+          startAnywayBtn.addEventListener('click', () => { _clearProbeWaves(); probeOverlay.remove(); cleanup(true); });
+          btnRow.appendChild(goBackBtn);
+          btnRow.appendChild(startAnywayBtn);
+          probeCard.appendChild(btnRow);
+        }
+      } catch (e) {
+        // Probe failed entirely — let user start anyway
+        console.error('Compare probe error:', e);
+        _clearProbeWaves();
+        probeOverlay.remove();
+        startBtn.disabled = false;
+        startBtn.innerHTML = _CMP_START_LABEL;
+        startBtn.style.opacity = '1';
+        cleanup(true);
+      }
+    });
+
+    // ── Fetch models in background ──
+    fetchModels().then(fetched => {
+      models = fetched;
+      state._cachedModels = fetched;
+      _modelsLoaded = true;
+      if (models.length < 1) {
+        listContainer.innerHTML = '<div style="color:var(--color-error);font-size:0.85em;padding:12px 0;text-align:center;">No models available</div>';
+        return;
+      }
+      // Validate saved selections against available models
+      if (_needsValidation && selections.length > 0) {
+        selections = selections.map(sel => {
+          if (!sel) return null;
+          // Prefer exact match (model + endpoint), fall back to model ID only
+          const exact = models.find(m => m.id === sel.model && m.url === sel.endpoint);
+          if (exact) return { ...sel, endpoint: exact.url, endpointId: exact.endpointId, endpointName: exact.endpointName || sel.endpointName || '' };
+          const byId = models.find(m => m.id === sel.model);
+          if (byId) return { model: byId.id, endpoint: byId.url, endpointId: byId.endpointId, name: byId.name, endpointName: byId.endpointName || '' };
+          return null;
+        });
+        // Keep nulls in place so slot positions are preserved
+        if (!selections.some(s => s !== null)) selections = [null, null];
+        _needsValidation = false;
+      }
+      if (!selections.length) selections = [null, null];
+      startBtn.disabled = false;
+      startBtn.style.opacity = '1';
+      addBtn.style.display = 'flex';
+      renderModelRows();
+    }).catch(e => {
+      console.error('Failed to fetch models for compare:', e);
+      listContainer.innerHTML = '<div style="color:var(--color-error);font-size:0.85em;padding:12px 0;text-align:center;">Failed to load models</div>';
+    });
+  });
+}
+
+export { showModelSelector, disableToolToggles, restoreToolToggles, _syncToolbarIndicator };