llm-switcher 1.6.2 → 1.6.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog — LLM Switcher
 
+## Release 1.6.4 — 2026-10-08
+
+- **Dynamic Model Provider Source for Idle Compaction:** Query live model listings directly from the selected profile's `baseURL` via `/models` instead of hardcoding provider URLs or static model lists.
+- **Clean Model Combobox without Slot Aliases:** Eliminate hardcoded quick preset buttons, popular model arrays, and slot aliases from the summarization model combobox. Models are loaded dynamically from the upstream provider, sorted alphabetically with context limits, with support for instant search filtering and deterministic heuristic truncation (`""`).
+
+## Release 1.6.3 — 2026-10-08
+
+- **Interactive Summarization Model Selection & Presets:** Replace raw text input for Idle Compaction's summarization model with a fully searchable combobox dropdown and quick 1-click preset chips. Users can pick directly from deterministic heuristic mode (`""`), slot aliases (`haiku`, `subagent`, `sonnet`, `main`), configured profile models (`zencore/*`, `codex/*`), and discovered catalog models, or type to filter in real-time. Selection automatically saves and updates active highlights across both light and dark themes.
+
 ## Release 1.6.2 — 2026-10-08
 
 - **Per-Model Slot Target Thinking Effort:** Support granular reasoning effort configuration per model slot (`profile.modelEfforts`). Individual slot selectors in the dashboard allow setting target effort levels (`auto`, `none`, `low`, `medium`, `high`, `xhigh`, `max`) independently for each model tier (e.g. Sonnet, Opus, Haiku, Codex roles) with automatic fallback to profile-level defaults.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "llm-switcher",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "Zero-dependency multi-protocol edge gateway & provider switcher for Claude Code and Codex, with OpenAI-compatible, Anthropic and Vertex upstreams",
   "keywords": [
     "llm",

package/ui.html

@@ -551,6 +551,7 @@
 
     /* Model slot combobox: one listbox per slot, provider prefix dimmed, match in the accent. */
     .combo { position: relative; }
+    .combo[data-open] { z-index: 50; }
     .slot-note { font-size: 0.72rem; color: var(--faint); }    /* Kept in the page when empty: a live region added later is often not read. */
     .slot-note:empty { margin-top: -0.25rem; }
     .combo > input { padding-right: 2.25rem; font-family: var(--font-mono); font-size: 0.8rem; }
@@ -1106,11 +1107,28 @@
 
               <div class="row">
                 <div class="who">
+                  <div class="l">Model Provider Source</div>
+                  <div class="meta" id="idle-compact-source-meta">Profile Base URL queried via /models to list upstream models</div>
+                </div>
+                <div style="display:flex; align-items:center; gap:0.5rem; margin-left:auto; min-width:18rem; max-width:26rem;">
+                  <select id="idle-compact-source-profile" onchange="onCompactSourceProfileChange()" style="flex:1; font-size:0.8rem;"></select>
+                  <button type="button" class="btn btn-outline btn-sm" id="btn-reload-compact-models" onclick="reloadCompactModels(true)" title="Fetch live models from provider Base URL">Reload</button>
+                </div>
+              </div>
+
+              <div class="row" style="align-items:flex-start;">
+                <div class="who" style="padding-top:0.25rem;">
                   <div class="l">Summarization Model</div>
-                  <div class="meta">Upstream model ID to generate turn summaries (empty = deterministic truncation)</div>
+                  <div class="meta" id="idle-compact-models-status">Select model from provider URL or enter custom ID (empty = deterministic truncation)</div>
                 </div>
-                <div style="min-width:16rem; flex:1; max-width:26rem; margin-left:auto;">
-                  <input type="text" id="idle-compact-model" placeholder="empty = no model call (deterministic)" maxlength="512" onchange="saveIdleCompact()" style="font-family:var(--font-mono); font-size:0.8rem;" title="Upstream model used to generate turn summary text">
+                <div style="min-width:18rem; flex:1; max-width:26rem; margin-left:auto;">
+                  <div class="combo" id="combo-compact-model">
+                    <input type="text" id="idle-compact-model" placeholder="empty = deterministic truncation" maxlength="512" onchange="saveIdleCompact()" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="idle-compact-model-list" autocomplete="off" spellcheck="false" style="font-family:var(--font-mono); font-size:0.8rem;" title="Upstream model used to generate turn summary text">
+                    <button type="button" class="combo-toggle" tabindex="-1" aria-label="Show available summary models">
+                      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg>
+                    </button>
+                    <ul class="combo-list" id="idle-compact-model-list" role="listbox" aria-label="Available summarization models" hidden></ul>
+                  </div>
                 </div>
               </div>
 
@@ -2112,11 +2130,107 @@
       }
     }
 
+    let compactLoadedModels = [];
+    let compactLoadedLimits = {};
+    let compactSourceProfileKey = '';
+
+    function populateCompactSourceProfiles() {
+      const sel = document.getElementById('idle-compact-source-profile');
+      if (!sel) return;
+      const profiles = state.config?.profiles || {};
+      const activeClaude = state.config?.activeProfiles?.claude;
+      const activeCodex = state.config?.activeProfiles?.codex;
+      const keys = Object.keys(profiles);
+
+      if (!compactSourceProfileKey || !profiles[compactSourceProfileKey]) {
+        compactSourceProfileKey = activeClaude || activeCodex || keys[0] || '';
+      }
+
+      if (!keys.length) {
+        sel.innerHTML = '<option value="">(No profiles configured)</option>';
+        return;
+      }
+
+      sel.innerHTML = keys.map(k => {
+        const p = profiles[k];
+        const isActive = (k === activeClaude || k === activeCodex);
+        const prefix = isActive ? '★ ' : '';
+        const selected = (k === compactSourceProfileKey) ? 'selected' : '';
+        return `<option value="${escapeHtml(k)}" ${selected}>${escapeHtml(prefix + (p.name || k))} (${escapeHtml(p.baseURL || 'no URL')})</option>`;
+      }).join('');
+
+      updateCompactSourceMeta();
+    }
+
+    function updateCompactSourceMeta() {
+      const meta = document.getElementById('idle-compact-source-meta');
+      const p = state.config?.profiles?.[compactSourceProfileKey];
+      if (meta && p) {
+        meta.textContent = `${p.baseURL || 'No Base URL configured'} · ${p.outFormat || p.mode || 'convert'}`;
+      }
+    }
+
+    async function onCompactSourceProfileChange() {
+      const sel = document.getElementById('idle-compact-source-profile');
+      if (sel) {
+        compactSourceProfileKey = sel.value;
+        updateCompactSourceMeta();
+        await reloadCompactModels(true);
+      }
+    }
+
+    async function reloadCompactModels(force = false) {
+      const p = state.config?.profiles?.[compactSourceProfileKey];
+      const statusEl = document.getElementById('idle-compact-models-status');
+      const reloadBtn = document.getElementById('btn-reload-compact-models');
+      if (!p || !p.baseURL) {
+        compactLoadedModels = [];
+        compactLoadedLimits = {};
+        if (statusEl) statusEl.textContent = 'Configure a Base URL on the profile to load live models';
+        return;
+      }
+
+      if (statusEl) statusEl.textContent = `Loading models from ${p.baseURL}...`;
+      if (reloadBtn) reloadBtn.disabled = true;
+
+      try {
+        const res = await api('/api/fetch-models', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ baseURL: p.baseURL, apiKey: MASKED_KEY, key: compactSourceProfileKey })
+        });
+        const data = await res.json();
+        if (data.ok && Array.isArray(data.models)) {
+          compactLoadedModels = data.models;
+          compactLoadedLimits = data.limits || {};
+          if (statusEl) {
+            statusEl.textContent = `${compactLoadedModels.length} models loaded from ${p.baseURL}. Select from list or enter model ID.`;
+          }
+        } else {
+          compactLoadedModels = [];
+          compactLoadedLimits = {};
+          if (statusEl) {
+            statusEl.textContent = `Models not loaded: ${modelsError(data.error)}`;
+          }
+        }
+      } catch (err) {
+        compactLoadedModels = [];
+        compactLoadedLimits = {};
+        if (statusEl) statusEl.textContent = `Failed to load models: ${err.message}`;
+      } finally {
+        if (reloadBtn) reloadBtn.disabled = false;
+        const combo = document.getElementById('combo-compact-model');
+        if (combo && combo.hasAttribute('data-open')) renderComboOptions(combo);
+      }
+    }
+
     async function loadIdleCompact() {
+      populateCompactSourceProfiles();
       try {
         const r = await api('/api/idle-compact');
         if (r.ok) showIdleCompact((await r.json()).idleCompact);
       } catch { /* the card stays at its defaults; nothing here is required to route */ }
+      await reloadCompactModels();
     }
 
     async function saveIdleCompact() {
@@ -2789,7 +2903,11 @@
     function wireCombo(combo) {
       const input = combo.querySelector('input');
       combo.activeIndex = -1;
-      input.addEventListener('input', () => { combo.dataset.filter = '1'; combo.activeIndex = -1; openCombo(combo); });
+      input.addEventListener('input', () => {
+        combo.dataset.filter = '1';
+        combo.activeIndex = -1;
+        openCombo(combo);
+      });
       input.addEventListener('keydown', onComboKeydown);
       input.addEventListener('blur', () => closeCombo(combo));
       // Keep the focus in the field while the list or the arrow is used.
@@ -2853,6 +2971,12 @@
       const list = combo.querySelector('.combo-list');
       const q = combo.dataset.filter ? input.value.trim().toLowerCase() : '';
       const current = input.value.trim();
+
+      if (input.id === 'idle-compact-model') {
+        renderCompactModelOptions(combo, q, current);
+        return;
+      }
+
       const matches = loadedModels.filter(m => !q || m.toLowerCase().includes(q)).slice(0, 200);
       combo.matches = matches;
       if (!loadedModels.length) {
@@ -2876,6 +3000,80 @@
       setComboActive(combo, combo.activeIndex);
     }
 
+    function getAvailableCompactModels() {
+      const items = [];
+      const seen = new Set();
+
+      const add = (id, label, desc, category) => {
+        if (!seen.has(id)) {
+          seen.add(id);
+          items.push({ id, label: label || id, desc: desc || '', category });
+        }
+      };
+
+      // 1. Deterministic option (empty string)
+      add('', 'Deterministic Truncation (no external call)', 'Pure heuristic context truncation · Zero latency & zero tokens', 'Deterministic');
+
+      // 2. Models fetched live from the provider Base URL
+      const prof = state.config?.profiles?.[compactSourceProfileKey];
+      if (Array.isArray(compactLoadedModels) && compactLoadedModels.length) {
+        for (const m of compactLoadedModels) {
+          const l = compactLoadedLimits[m];
+          const info = l?.context ? `${Math.round(l.context / 1000)}k context` : (prof?.name || 'Upstream');
+          add(m, m, info, 'Upstream Model');
+        }
+      }
+
+      return items;
+    }
+
+    function renderCompactModelOptions(combo, q, current) {
+      const input = combo.querySelector('input');
+      const list = combo.querySelector('.combo-list');
+      const allItems = getAvailableCompactModels();
+
+      const filtered = allItems.filter(item => {
+        if (!q) return true;
+        if (item.id === '' && ('deterministic'.includes(q) || 'none'.includes(q) || 'empty'.includes(q) || 'heuristic'.includes(q))) return true;
+        return item.id.toLowerCase().includes(q) || item.label.toLowerCase().includes(q);
+      }).slice(0, 150);
+
+      combo.matches = filtered.map(item => item.id);
+
+      if (!filtered.length) {
+        list.innerHTML = '<li class="combo-empty">No matching model found. The typed model ID will be used directly.</li>';
+        return;
+      }
+
+      if (!(combo.activeIndex >= 0 && combo.activeIndex < filtered.length)) {
+        combo.activeIndex = filtered.findIndex(item => item.id === current);
+      }
+
+      list.innerHTML = filtered.map((item, i) => {
+        const isSelected = item.id === current;
+        let badgeClass = 'badge outline';
+        if (item.category === 'Deterministic') badgeClass = 'badge ok';
+        else if (item.category === 'Upstream Model') badgeClass = 'badge';
+
+        const cut = item.id.lastIndexOf('/') + 1;
+        const prefix = cut ? `<span class="pfx">${markMatch(item.id.slice(0, cut), q)}</span>` : '';
+        const mainText = item.id ? `${prefix}${markMatch(item.id.slice(cut), q)}` : markMatch(item.label, q);
+
+        return `<li class="combo-opt" role="option" id="${input.id}-opt-${i}" data-i="${i}" aria-selected="${i === combo.activeIndex}" style="display:flex; flex-direction:column; gap:0.18rem; padding:0.45rem 0.6rem; border-bottom:1px solid rgba(255,255,255,0.04);" onmousedown="event.preventDefault(); chooseComboOption(this)">`
+          + `<div style="display:flex; align-items:center; justify-content:space-between; gap:0.5rem; width:100%;">`
+          +   `<span class="id" style="font-weight:600;">${mainText}</span>`
+          +   `<div style="display:flex; align-items:center; gap:0.4rem; flex:none;">`
+          +     `<span class="${badgeClass}" style="font-size:0.68rem; padding:0.1rem 0.35rem;">${escapeHtml(item.category)}</span>`
+          +     (isSelected ? '<span class="cur" style="font-weight:600;">active</span>' : '')
+          +   `</div>`
+          + `</div>`
+          + (item.desc && item.id ? `<div style="font-size:0.72rem; color:var(--muted); font-family:var(--font-sans);">${escapeHtml(item.desc)}</div>` : '')
+          + `</li>`;
+      }).join('');
+
+      setComboActive(combo, combo.activeIndex);
+    }
+
     function setComboActive(combo, i) {
       const input = combo.querySelector('input');
       combo.activeIndex = i;
@@ -2894,12 +3092,17 @@
 
     function chooseComboOption(li) {
       const combo = li.closest('.combo');
-      const model = combo?.matches?.[Number(li.dataset.i)];
-      if (!model) return;
-      combo.querySelector('input').value = model;
+      const idx = Number(li.dataset.i);
+      const model = combo?.matches?.[idx];
+      if (model === undefined) return;
+      const input = combo.querySelector('input');
+      input.value = model;
       formDirty = true;
       closeCombo(combo);
       updateWindowNotes();
+      if (input.id === 'idle-compact-model') {
+        saveIdleCompact();
+      }
     }
 
     function onComboKeydown(e) {
@@ -3241,6 +3444,10 @@
       document.getElementById('p-url')?.addEventListener('input', syncEffortOptions);
       document.getElementById('p-tool')?.addEventListener('change', syncEffortOptions);
 
+      // Wire Idle Compaction summarization model combobox
+      const compactCombo = document.getElementById('combo-compact-model');
+      if (compactCombo) wireCombo(compactCombo);
+
       // Trigger initial route
       handleRoute();