llm-switcher 1.6.0 → 1.6.3

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; }
@@ -905,6 +906,10 @@
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 12h16M12 4v16"/><circle cx="12" cy="12" r="8"/></svg>
         Routes & Profiles<span class="ct" id="ct-routes"></span>
       </a>
+      <a class="nav-link" href="#/compact" data-nav="compact">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 14h6m0 0v6m0-6L3 21"/><path d="M20 10h-6m0 0V4m0 6l7-7"/><circle cx="12" cy="12" r="2"/></svg>
+        Idle Compaction<span class="ct" id="ct-compact"></span>
+      </a>
       <a class="nav-link" href="#/models" data-nav="models">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/></svg>
         Model Catalog<span class="ct" id="ct-models"></span>
@@ -952,57 +957,6 @@
       <!-- VIEW 1: Routes & Profiles -->
       <div id="view-routes" class="view-panel" style="display:none;">
         <div class="sec">
-          <!-- Idle compaction -->
-          <div class="card">
-            <div class="cardh">
-              <h2 style="font-size:1.02rem; font-weight:600;">Idle compaction</h2>
-              <span class="badge outline" id="badge-idle-compact">OFF</span>
-            </div>
-            <p style="margin:.2rem 0 .7rem; color:var(--muted); font-size:.86rem;">
-              A Claude Code conversation that comes back after a pause has lost the provider's prompt
-              cache, so its history is paid for at full price. Shorten it then, and write the
-              compaction into the session file so the next resume starts short.
-            </p>
-            <div class="row">
-              <label class="cb" style="display:flex; align-items:center; gap:.5rem;">
-                <input type="checkbox" id="idle-compact-enabled" onchange="saveIdleCompact()">
-                <span>Shorten a conversation that was idle too long</span>
-              </label>
-            </div>
-            <div class="row">
-              <div class="who">
-                <div class="l">Pause that counts as losing the cache</div>
-                <div class="meta">minutes · Anthropic 5m default, OpenAI 30m</div>
-              </div>
-              <div style="min-width:9rem;">
-                <input type="number" id="idle-compact-minutes" min="1" max="1440" class="inp"
-                       style="width:100%;" onchange="saveIdleCompact()">
-              </div>
-            </div>
-            <div class="row">
-              <div class="who">
-                <div class="l">Context it must be larger than</div>
-                <div class="meta">KB · below this nothing is touched</div>
-              </div>
-              <div style="min-width:9rem;">
-                <input type="number" id="idle-compact-kb" min="8" max="4096" class="inp"
-                       style="width:100%;" onchange="saveIdleCompact()">
-              </div>
-            </div>
-            <div class="row">
-              <div class="who">
-                <div class="l">Model that writes the summary</div>
-                <div class="meta">a cheaper model writes a cheaper and worse summary</div>
-              </div>
-              <div style="min-width:16rem; flex:1;">
-                <input type="text" id="idle-compact-model" class="inp" style="width:100%;"
-                       placeholder="empty = the model of the conversation itself"
-                       onchange="saveIdleCompact()">
-              </div>
-            </div>
-            <span id="idle-compact-status" class="meta" aria-live="polite"></span>
-          </div>
-
           <!-- Active Coding CLI Targets -->
           <div class="card">
             <div class="cardh">
@@ -1067,6 +1021,195 @@
         </div>
       </div>
 
+      <!-- VIEW: Idle Prefix Cache & Compaction -->
+      <div id="view-compact" class="view-panel" style="display:none;">
+        <div class="sec">
+          <!-- Overview Stats -->
+          <div class="stats">
+            <div class="stat">
+              <div class="k">Compaction Engine</div>
+              <div class="v" id="stat-compact-status" style="color:var(--muted); font-size:1.4rem;">Disabled</div>
+              <div class="status" id="stat-compact-indicator" style="margin-top:0.3rem;">Prefix caching inactive</div>
+            </div>
+
+            <div class="stat">
+              <div class="k">Inactivity Pause</div>
+              <div class="v" id="stat-compact-pause" style="color:var(--accent); font-size:1.4rem;">15 min</div>
+              <div class="hint" style="margin-top:0.3rem;">Trigger pause threshold</div>
+            </div>
+
+            <div class="stat">
+              <div class="k">Min Size Threshold</div>
+              <div class="v" id="stat-compact-size" style="color:var(--mint); font-size:1.4rem;">64 KB</div>
+              <div class="hint" style="margin-top:0.3rem;">Smaller payloads bypassed</div>
+            </div>
+
+            <div class="stat">
+              <div class="k">Cache Lookback</div>
+              <div class="v" id="stat-compact-lookback" style="color:var(--code); font-size:1.4rem;">72 hrs</div>
+              <div class="hint" style="margin-top:0.3rem;">Storage retention window</div>
+            </div>
+          </div>
+
+          <!-- Hero Master Card -->
+          <div class="card pad">
+            <div class="sech">
+              <div>
+                <div style="display:flex; align-items:center; gap:0.6rem;">
+                  <h2 style="font-size:1.05rem; font-weight:600;">Idle Prefix Cache &amp; Compaction</h2>
+                  <span class="badge outline" id="badge-idle-compact">OFF</span>
+                </div>
+                <p class="hint" style="margin-top:0.35rem; max-width:54rem; line-height:1.45;">
+                  Shortens long conversation histories when an agent session remains inactive past a configured pause.
+                  The edge gateway maintains a canonical shortened prefix for resumed turns, cutting context tokens while keeping client transcripts 100% untouched.
+                </p>
+              </div>
+              <div style="display:flex; align-items:center; gap:0.8rem;">
+                <label class="switch" title="Toggle Idle Compaction">
+                  <input type="checkbox" id="idle-compact-enabled" onchange="saveIdleCompact()">
+                  <span></span>
+                </label>
+              </div>
+            </div>
+            <div id="idle-compact-status" style="margin-top:0.75rem; font-size:0.82rem; min-height:1.2rem;" aria-live="polite"></div>
+          </div>
+
+          <!-- Configuration Section (Hidden when inactive) -->
+          <div id="idle-compact-config-section" style="display:none; flex-direction:column; gap:1.25rem;">
+            <!-- Card 1: Core Policy & Trigger Thresholds -->
+            <div class="card">
+              <div class="cardh">
+                <h3 style="font-size:0.95rem; font-weight:600;">Compaction Policy &amp; Triggers</h3>
+                <span class="badge ok">Gateway Invariant</span>
+              </div>
+
+              <div class="row">
+                <div class="who">
+                  <div class="l">Inactivity Pause Threshold</div>
+                  <div class="meta">Elapsed idle minutes after which the conversation prefix is compacted</div>
+                </div>
+                <div style="display:flex; align-items:center; gap:0.45rem; margin-left:auto;">
+                  <input type="number" id="idle-compact-minutes" min="1" max="1440" step="any" onchange="saveIdleCompact()" style="width:7.5rem; text-align:right;" title="Inactivity pause threshold in minutes (1 – 1440 min)" placeholder="15">
+                  <span style="font-size:0.8rem; color:var(--muted); min-width:2.2rem; user-select:none;">min</span>
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="who">
+                  <div class="l">Minimum Context Payload</div>
+                  <div class="meta">Context threshold; conversations smaller than this are kept untouched</div>
+                </div>
+                <div style="display:flex; align-items:center; gap:0.45rem; margin-left:auto;">
+                  <input type="number" id="idle-compact-kb" min="8" max="4096" step="any" onchange="saveIdleCompact()" style="width:7.5rem; text-align:right;" title="Minimum context payload size in kilobytes (8 – 4096 KB)" placeholder="64">
+                  <span style="font-size:0.8rem; color:var(--muted); min-width:2.2rem; user-select:none;">KB</span>
+                </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">Select from discovered/profile models or enter custom ID (empty = deterministic truncation)</div>
+                </div>
+                <div style="min-width:18rem; flex:1; max-width:28rem; margin-left:auto; display:flex; flex-direction:column; gap:0.4rem;">
+                  <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 id="compact-model-presets" style="display:flex; flex-wrap:wrap; align-items:center; gap:0.35rem;">
+                    <!-- Quick Presets rendered dynamically -->
+                  </div>
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="who">
+                  <div class="l">Shorten Codex CLI Sessions</div>
+                  <div class="meta">Off by default; Codex retains native turn history in local SQLite storage</div>
+                </div>
+                <label class="switch" title="Toggle Codex compaction" style="margin-left:auto;">
+                  <input type="checkbox" id="idle-compact-codex" onchange="saveIdleCompact()">
+                  <span></span>
+                </label>
+              </div>
+            </div>
+
+            <!-- Card 2: Context Retention & Budget Controls -->
+            <div class="card">
+              <div class="cardh">
+                <h3 style="font-size:0.95rem; font-weight:600;">Context Retention &amp; Cache Budgets</h3>
+                <span class="badge accent">Turn Budgets</span>
+              </div>
+
+              <div class="row">
+                <div class="who">
+                  <div class="l">Verbatim Recent Turns</div>
+                  <div class="meta">Number of most recent turns always preserved byte-for-byte</div>
+                </div>
+                <div style="display:flex; align-items:center; gap:0.45rem; margin-left:auto;">
+                  <input type="number" id="idle-compact-keep" min="1" max="100" onchange="saveIdleCompact()" style="width:7.5rem; text-align:right;" title="Number of most recent turns to retain verbatim (1 – 100 turns)" placeholder="6">
+                  <span style="font-size:0.8rem; color:var(--muted); min-width:2.4rem; user-select:none;">turns</span>
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="who">
+                  <div class="l">Character Budget Per Earlier Turn</div>
+                  <div class="meta">Maximum character budget preserved per earlier conversation turn</div>
+                </div>
+                <div style="display:flex; align-items:center; gap:0.45rem; margin-left:auto;">
+                  <input type="number" id="idle-compact-user-chars" min="128" max="24000" onchange="saveIdleCompact()" style="width:7.5rem; text-align:right;" title="Character budget limit per earlier text turn (128 – 24000 chars)" placeholder="3000">
+                  <span style="font-size:0.8rem; color:var(--muted); min-width:2.4rem; user-select:none;">chars</span>
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="who">
+                  <div class="l">Maximum Summary Length</div>
+                  <div class="meta">Upper character limit allocated for generated turn summary blocks</div>
+                </div>
+                <div style="display:flex; align-items:center; gap:0.45rem; margin-left:auto;">
+                  <input type="number" id="idle-compact-summary-chars" min="256" max="128000" onchange="saveIdleCompact()" style="width:7.5rem; text-align:right;" title="Upper character limit allocated for generated summary (256 – 128000 chars)" placeholder="24000">
+                  <span style="font-size:0.8rem; color:var(--muted); min-width:2.4rem; user-select:none;">chars</span>
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="who">
+                  <div class="l">Cache Prefix Retention Window</div>
+                  <div class="meta">Duration in hours before idle cached prefixes are pruned from state disk</div>
+                </div>
+                <div style="display:flex; align-items:center; gap:0.45rem; margin-left:auto;">
+                  <input type="number" id="idle-compact-lookback" min="1" max="168" step="any" onchange="saveIdleCompact()" style="width:7.5rem; text-align:right;" title="Duration in hours before idle cached prefixes are pruned (1 – 168 hours)" placeholder="72">
+                  <span style="font-size:0.8rem; color:var(--muted); min-width:2.4rem; user-select:none;">hours</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Card 3: Architecture & Safety Invariants -->
+            <div class="card pad">
+              <h3 style="font-size:0.95rem; font-weight:600; margin-bottom:0.75rem;">Edge Gateway Invariants &amp; Storage Safety</h3>
+              <div class="sec">
+                <div class="copyline">
+                  <code>Zero Client Mutation: Transcripts on client disk (Claude Code / Codex) are never modified.</code>
+                </div>
+                <div class="copyline">
+                  <code>Atomic CAS Cache: Compare-and-swap generation counters prevent stale compaction races.</code>
+                </div>
+                <div class="copyline">
+                  <code>Private State Storage: Cached prefixes saved under ~/.llm-switcher/state/idle-compact/ (0600 permissions).</code>
+                </div>
+                <div class="copyline">
+                  <code>Deterministic Safety: If no summary model is configured, gateway uses pure heuristic truncation without external calls.</code>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <!-- VIEW 2: Discovered Models Catalog -->
       <div id="view-models" class="view-panel" style="display:none;">
         <div class="sec">
@@ -1242,13 +1385,6 @@
             </div>
 
             <div style="display:grid; grid-template-columns:1fr 1fr; gap:0.9rem;">
-              <label class="f">Thinking Mode
-                <select id="p-thinking-mode">
-                  <option value="auto">AUTO (restores reasoning, strips tags safely)</option>
-                  <option value="native">NATIVE (strict reasoning_effort)</option>
-                  <option value="off">OFF (never send thinking)</option>
-                </select>
-              </label>
               <label class="f">Routing Mode
                 <select id="p-mode">
                   <option value="convert">CONVERT (Bi-directional translation)</option>
@@ -1262,11 +1398,46 @@
           <!-- TAB 3: Models -->
           <div id="tab-models" class="tab-content" style="display:none; gap:0.9rem; flex-direction:column;">
             <div style="display:flex; justify-content:space-between; align-items:center; gap:0.75rem;">
-              <h3 id="model-slot-heading" style="font-size:0.92rem; font-weight:600;">Model Slots Mapping</h3>
+              <div>
+                <h3 id="model-slot-heading" style="font-size:0.92rem; font-weight:600; margin:0;">Model Slots Mapping</h3>
+                <span class="hint" style="font-size:0.75rem;">Configure target model and individual thinking effort for each slot</span>
+              </div>
               <div id="models-status" class="models-status" aria-live="polite"></div>
             </div>
 
             <div id="slot-fields" style="display:grid; gap:0.75rem;"></div>
+
+            <!-- Global Reasoning Policy -->
+            <div style="border-top:1px solid var(--line); padding-top:0.85rem; margin-top:0.35rem; display:grid; gap:0.85rem;">
+              <div style="display:flex; justify-content:space-between; align-items:center;">
+                <h4 style="font-size:0.88rem; font-weight:600; margin:0;">Reasoning Mode &amp; Policy</h4>
+                <span class="hint">Controls reasoning behavior across all model slots</span>
+              </div>
+
+              <div style="display:grid; grid-template-columns:1fr 1fr; gap:0.9rem;">
+                <label class="f">Thinking Mode
+                  <select id="p-thinking-mode">
+                    <option value="auto">AUTO (restores reasoning, strips tags safely)</option>
+                    <option value="native">NATIVE (strict reasoning_effort)</option>
+                    <option value="off">OFF (never send thinking to any model)</option>
+                  </select>
+                </label>
+                <label class="f" id="f-thinking-effort" style="display:none;">Global Fallback Effort
+                  <select id="p-thinking-effort">
+                    <option value="auto">Auto (inherit from client tool)</option>
+                    <option value="low">Low (fast, light reasoning)</option>
+                    <option value="medium">Medium (balanced reasoning)</option>
+                    <option value="high">High (deep reasoning)</option>
+                    <option value="xhigh">Extra High (complex problem solving)</option>
+                    <option value="max">Max (maximum reasoning depth)</option>
+                  </select>
+                </label>
+              </div>
+
+              <div id="bifrost-hint" style="display:none; padding:0.6rem 0.85rem; border-radius:6px; background:rgba(59,130,246,0.08); border:1px solid rgba(59,130,246,0.25); font-size:0.82rem; color:#60a5fa; line-height:1.4;">
+                ⚡ <strong>Bifrost Passthrough:</strong> Byte-for-byte routing to intact without format conversion. Thinking effort is controlled natively by your client tool.
+              </div>
+            </div>
           </div>
 
           <!-- Test Connection Box -->
@@ -1474,7 +1645,7 @@
     function handleRoute() {
       const hash = window.location.hash || '#/routes';
       const route = hash.replace(/^#\/?/, '').split('/')[0] || 'routes';
-      const validRoutes = ['routes', 'models', 'logs', 'doctor'];
+      const validRoutes = ['routes', 'compact', 'models', 'logs', 'doctor'];
       const activeRoute = validRoutes.includes(route) ? route : 'routes';
 
       // Update active nav link
@@ -1495,6 +1666,7 @@
       updateHeader(activeRoute);
 
       // Lazy load view content
+      if (activeRoute === 'compact') loadIdleCompact();
       if (activeRoute === 'models') renderCatalogView();
       if (activeRoute === 'logs') loadInspectorLogs();
     }
@@ -1512,7 +1684,6 @@
       const activeTargets = Object.entries(activeMap).filter(([_, v]) => Boolean(v));
 
       if (route === 'routes') {
-        loadIdleCompact();
         titleEl.textContent = 'Routes & Profiles';
         if (activeTargets.length > 0) {
           const parts = [];
@@ -1528,6 +1699,14 @@
           <button class="btn btn-outline" id="btn-toggle-routes" onclick="toggleProxy()">${activeTargets.length > 0 ? 'Use official endpoints' : 'Activate compatible routes'}</button>
           <button class="btn btn-outline" onclick="loadStatus()">Refresh</button>
         `;
+      } else if (route === 'compact') {
+        loadIdleCompact();
+        titleEl.textContent = 'Idle Compaction';
+        subEl.textContent = 'Edge gateway prefix compaction and cache pruning for long sessions.';
+        actionsEl.innerHTML = `
+          <button class="btn btn-outline" onclick="loadIdleCompact()">Refresh</button>
+          <button class="btn btn-primary" onclick="saveIdleCompact()">Save Configuration</button>
+        `;
       } else if (route === 'models') {
         titleEl.textContent = 'Dynamic Model Catalog';
         subEl.textContent = 'Auto-polled models from upstream providers to guarantee zero 404/drift errors.';
@@ -1675,6 +1854,11 @@
       return defaultModels[slotId] || '';
     }
 
+    function effortForSlot(modelEfforts, slotId) {
+      if (!modelEfforts) return 'auto';
+      return modelEfforts[slotId] || 'auto';
+    }
+
     function renderModelSlots(slotFmt, p) {
       const container = document.getElementById('slot-fields');
       const heading = document.getElementById('model-slot-heading');
@@ -1687,11 +1871,27 @@
 
       for (const s of cfg.slots) {
         const val = currentProfileBuffer ? valueForSlot(currentProfileBuffer.defaultModels, s.id) : valueForSlot(p?.defaultModels, s.id);
+        const effVal = currentProfileBuffer ? effortForSlot(currentProfileBuffer.modelEfforts, s.id) : effortForSlot(p?.modelEfforts, s.id);
 
         const slotRow = document.createElement('div');
-        slotRow.style.cssText = 'display:flex; flex-direction:column; gap:0.25rem;';
+        slotRow.className = 'slot-row-card';
+        slotRow.style.cssText = 'display:flex; flex-direction:column; gap:0.35rem; padding:0.6rem 0.75rem; border-radius:6px; background:var(--card-bg, rgba(255,255,255,0.02)); border:1px solid var(--line);';
         slotRow.innerHTML = `
-          <label for="p-${s.id}" style="font-size:0.82rem; font-weight:500;">${escapeHtml(s.name)}</label>
+          <div style="display:flex; justify-content:space-between; align-items:center; gap:0.5rem;">
+            <label for="p-${s.id}" style="font-size:0.82rem; font-weight:600; margin:0;">${escapeHtml(s.name)}</label>
+            <div style="display:flex; align-items:center; gap:0.35rem;">
+              <label for="p-effort-${s.id}" style="font-size:0.75rem; color:var(--muted); margin:0;">Target Effort:</label>
+              <select id="p-effort-${s.id}" class="slot-effort inp" onchange="formDirty = true" style="height:26px; padding:0 0.4rem; font-size:0.78rem; border-radius:4px; min-width:6.8rem;">
+                <option value="auto">Auto (Default)</option>
+                <option value="none">None (0)</option>
+                <option value="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="high">High</option>
+                <option value="xhigh">Extra High</option>
+                <option value="max">Max</option>
+              </select>
+            </div>
+          </div>
           <div class="combo">
             <input type="text" id="p-${s.id}" oninput="updateWindowNotes()" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="p-${s.id}-list" autocomplete="off" spellcheck="false" placeholder="${escapeHtml(s.placeholder)}" value="${escapeHtml(val)}">
             <button type="button" class="combo-toggle" tabindex="-1" aria-label="Show models for ${escapeHtml(s.name)}">
@@ -1699,10 +1899,15 @@
             </button>
             <ul class="combo-list" id="p-${s.id}-list" role="listbox" aria-label="${escapeHtml(s.name)} models" hidden></ul>
           </div>
-          <div class="slot-note" id="p-${s.id}-note" role="status" aria-live="polite"></div>
+          <div style="display:flex; justify-content:space-between; align-items:center; gap:0.5rem; min-height:1rem;">
+            <div class="slot-note" id="p-${s.id}-note" role="status" aria-live="polite"></div>
+            <div class="slot-bifrost-hint" id="p-bifrost-${s.id}" style="display:none; font-size:0.74rem; color:#60a5fa;">⚡ Bifrost Passthrough (native effort)</div>
+          </div>
         `;
         container.appendChild(slotRow);
         wireCombo(slotRow.querySelector('.combo'));
+        const effSelect = slotRow.querySelector('#p-effort-' + s.id);
+        if (effSelect) effSelect.value = effVal || 'auto';
       }
       updateWindowNotes();
     }
@@ -1716,6 +1921,7 @@
       const cfg = getActiveSlotConfig(renderedSlotFormat);
       if (!currentProfileBuffer) currentProfileBuffer = {};
       const defaultModels = { ...(currentProfileBuffer.defaultModels || {}) };
+      const modelEfforts = { ...(currentProfileBuffer.modelEfforts || {}) };
       for (const s of cfg.slots) {
         const inp = document.getElementById('p-' + s.id);
         if (inp) {
@@ -1723,13 +1929,19 @@
           if (val) defaultModels[s.id] = val;
           else delete defaultModels[s.id];
         }
+        const effSelect = document.getElementById('p-effort-' + s.id);
+        if (effSelect) {
+          const effVal = effSelect.value;
+          if (effVal && effVal !== 'auto') modelEfforts[s.id] = effVal;
+          else delete modelEfforts[s.id];
+        }
       }
       currentProfileBuffer.defaultModels = defaultModels;
+      currentProfileBuffer.modelEfforts = modelEfforts;
       // An old config can still carry the retired 1M flags. They are dropped on the next save
       // instead of being written back: the window is the model's own now.
       delete currentProfileBuffer.model1M;
-      return { defaultModels };
-
+      return { defaultModels, modelEfforts };
     }
 
     // 128000 reads as 128K and 262144 as 256K: a round decimal count keeps base 1000.
@@ -1756,6 +1968,64 @@
         const model = document.getElementById('p-' + s.id)?.value.trim() || '';
         note.textContent = model ? windowLine(model) : '';
       }
+      syncEffortOptions();
+    }
+
+    function syncEffortOptions() {
+      const mode = document.getElementById('p-thinking-mode')?.value;
+      const url = (document.getElementById('p-url')?.value || '').toLowerCase();
+      const tool = document.getElementById('p-tool')?.value || 'auto';
+      const isIntact = url.includes('intact') || url.includes(':20130') || url.includes(':8080') ||
+                       url.includes(':20142') || url.includes(':20150') || url.includes(':20152');
+      const isThinkingOff = mode === 'off';
+
+      const cfg = getActiveSlotConfig(renderedSlotFormat);
+      let anyBifrost = false;
+
+      for (const s of cfg.slots) {
+        const inp = document.getElementById('p-' + s.id);
+        const effSelect = document.getElementById('p-effort-' + s.id);
+        const bifrostHint = document.getElementById('p-bifrost-' + s.id);
+        if (!effSelect) continue;
+
+        const modelVal = (inp?.value || '').trim().toLowerCase();
+        let slotIsBifrost = false;
+        if (isIntact && modelVal) {
+          if (tool === 'claude') slotIsBifrost = modelVal.startsWith('claude/') || modelVal.startsWith('anthropic/');
+          else if (tool === 'codex') slotIsBifrost = modelVal.startsWith('codex/');
+          else if (tool === 'agy') slotIsBifrost = modelVal.startsWith('antigravity/');
+          else if (tool === 'auto') slotIsBifrost = modelVal.startsWith('claude/') || modelVal.startsWith('anthropic/') || modelVal.startsWith('codex/') || modelVal.startsWith('antigravity/');
+        }
+
+        if (slotIsBifrost) {
+          anyBifrost = true;
+          if (bifrostHint) bifrostHint.style.display = 'block';
+          effSelect.disabled = true;
+          effSelect.style.opacity = '0.6';
+          effSelect.title = 'Bifrost passthrough active: effort controlled natively by client tool';
+        } else {
+          if (bifrostHint) bifrostHint.style.display = 'none';
+          if (isThinkingOff) {
+            effSelect.disabled = true;
+            effSelect.style.opacity = '0.5';
+            effSelect.title = 'Thinking mode is OFF globally';
+          } else {
+            effSelect.disabled = false;
+            effSelect.style.opacity = '1';
+            effSelect.title = 'Target thinking effort for this model';
+          }
+        }
+      }
+
+      const effortEl = document.getElementById('p-thinking-effort');
+      const globalBifrostHint = document.getElementById('bifrost-hint');
+      if (effortEl) {
+        effortEl.disabled = isThinkingOff;
+        effortEl.style.opacity = isThinkingOff ? '0.5' : '1';
+      }
+      if (globalBifrostHint) {
+        globalBifrostHint.style.display = anyBifrost ? 'block' : 'none';
+      }
     }
 
     // Prefetch Counts for Nav Badges
@@ -1783,6 +2053,8 @@
           if (ctLogs && lastLogsCount > 0) ctLogs.textContent = lastLogsCount;
         }
       } catch {}
+
+      loadIdleCompact();
     }
 
     // Load Status
@@ -1790,16 +2062,125 @@
     // dashboard and the terminal cannot show two different settings.
     function showIdleCompact(c) {
       c = c || {};
-      document.getElementById('idle-compact-enabled').checked = !!c.enabled;
-      document.getElementById('idle-compact-minutes').value = c.idleMinutes ?? 15;
-      document.getElementById('idle-compact-kb').value = Math.round((c.minBytes ?? 65536) / 1024);
-      document.getElementById('idle-compact-model').value = c.model || '';
+      const enabled = !!c.enabled;
+      const elEnabled = document.getElementById('idle-compact-enabled');
+      if (elEnabled) elEnabled.checked = enabled;
+      const configSec = document.getElementById('idle-compact-config-section');
+      if (configSec) configSec.style.display = enabled ? 'flex' : 'none';
+      const elMinutes = document.getElementById('idle-compact-minutes');
+      if (elMinutes) elMinutes.value = c.idleMinutes ?? 15;
+      const elKb = document.getElementById('idle-compact-kb');
+      if (elKb) elKb.value = (c.minBytes ?? 65536) / 1024;
+      const elModel = document.getElementById('idle-compact-model');
+      if (elModel) {
+        elModel.value = c.model || '';
+        updateCompactModelPresets(c.model || '');
+      }
+      const elCodex = document.getElementById('idle-compact-codex');
+      if (elCodex) elCodex.checked = !!c.codex;
+      const elKeep = document.getElementById('idle-compact-keep');
+      if (elKeep) elKeep.value = c.keepRecent ?? 6;
+      const elUserChars = document.getElementById('idle-compact-user-chars');
+      if (elUserChars) elUserChars.value = c.userChars ?? 3000;
+      const elSummaryChars = document.getElementById('idle-compact-summary-chars');
+      if (elSummaryChars) elSummaryChars.value = c.summaryMaxChars ?? 24000;
+      const elLookback = document.getElementById('idle-compact-lookback');
+      if (elLookback) elLookback.value = c.sessionLookbackHours ?? 72;
+
+      // Badge on hero card
       const badge = document.getElementById('badge-idle-compact');
-      badge.textContent = c.enabled ? 'ON' : 'OFF';
-      badge.className = 'badge ' + (c.enabled ? 'ok' : 'outline');
+      if (badge) {
+        badge.textContent = enabled ? 'ACTIVE' : 'OFF';
+        badge.className = 'badge ' + (enabled ? 'ok' : 'outline');
+      }
+
+      // Nav link count
+      const ctCompact = document.getElementById('ct-compact');
+      if (ctCompact) {
+        ctCompact.textContent = enabled ? 'ON' : '';
+      }
+
+      // Stats cards
+      const statStatus = document.getElementById('stat-compact-status');
+      if (statStatus) {
+        statStatus.textContent = enabled ? 'Active' : 'Disabled';
+        statStatus.style.color = enabled ? 'var(--ok)' : 'var(--muted)';
+      }
+      const statInd = document.getElementById('stat-compact-indicator');
+      if (statInd) {
+        statInd.textContent = enabled ? 'Prefix caching active' : 'Prefix caching inactive';
+        statInd.className = 'status ' + (enabled ? 'on' : '');
+      }
+      const statPause = document.getElementById('stat-compact-pause');
+      if (statPause) {
+        statPause.textContent = (c.idleMinutes ?? 15) + ' min';
+      }
+      const statSize = document.getElementById('stat-compact-size');
+      if (statSize) {
+        statSize.textContent = ((c.minBytes ?? 65536) / 1024) + ' KB';
+      }
+      const statLookback = document.getElementById('stat-compact-lookback');
+      if (statLookback) {
+        statLookback.textContent = (c.sessionLookbackHours ?? 72) + ' hrs';
+      }
+    }
+
+    async function ensureCatalogLoaded() {
+      if (cachedCatalog) return cachedCatalog;
+      try {
+        const res = await api('/api/catalog');
+        if (res.ok) cachedCatalog = await res.json();
+      } catch {}
+      return cachedCatalog;
+    }
+
+    function setCompactModel(model) {
+      const inp = document.getElementById('idle-compact-model');
+      if (inp) {
+        inp.value = model;
+        saveIdleCompact();
+        updateCompactModelPresets(model);
+      }
+    }
+
+    function updateCompactModelPresets(currentModel) {
+      const container = document.getElementById('compact-model-presets');
+      if (!container) return;
+      if (currentModel === undefined) {
+        currentModel = document.getElementById('idle-compact-model')?.value.trim() || '';
+      }
+
+      const presets = [
+        { id: '', label: 'Deterministic (none)' },
+        { id: 'haiku', label: 'haiku' },
+        { id: 'subagent', label: 'subagent' }
+      ];
+
+      const profiles = state.config?.profiles || {};
+      let added = 0;
+      for (const p of Object.values(profiles)) {
+        if (p.defaultModels) {
+          for (const [slot, m] of Object.entries(p.defaultModels)) {
+            if (m && added < 2 && !presets.some(x => x.id === m)) {
+              presets.push({ id: m, label: m.includes('/') ? m.split('/')[1] : m });
+              added++;
+            }
+          }
+        }
+      }
+
+      container.innerHTML = `<span class="hint" style="font-size:0.75rem; align-self:center; margin-right:0.2rem;">Quick Presets:</span>` +
+        presets.map(p => {
+          const active = (p.id === currentModel);
+          const style = active
+            ? 'padding:0.18rem 0.5rem; font-size:0.75rem; border-color:var(--accent); color:var(--accent); background:var(--accent-soft); font-weight:600;'
+            : 'padding:0.18rem 0.5rem; font-size:0.75rem;';
+          return `<button type="button" class="btn btn-outline btn-sm" style="${style}" onclick="setCompactModel('${escapeHtml(p.id)}')">${escapeHtml(p.label)}</button>`;
+        }).join('');
     }
 
     async function loadIdleCompact() {
+      ensureCatalogLoaded();
       try {
         const r = await api('/api/idle-compact');
         if (r.ok) showIdleCompact((await r.json()).idleCompact);
@@ -1807,14 +2188,35 @@
     }
 
     async function saveIdleCompact() {
+      const isEnabled = document.getElementById('idle-compact-enabled').checked;
+      const configSec = document.getElementById('idle-compact-config-section');
+      if (configSec) configSec.style.display = isEnabled ? 'flex' : 'none';
       const status = document.getElementById('idle-compact-status');
+      for (const input of document.querySelectorAll('[id^="idle-compact-"][type="number"]')) {
+        if (!input.value || !input.checkValidity()) {
+          input.reportValidity();
+          if (status) {
+            status.textContent = 'Not saved: enter a value within the displayed bounds.';
+            status.style.color = 'var(--err)';
+          }
+          return;
+        }
+      }
       const patch = {
+        codex: document.getElementById('idle-compact-codex').checked,
+        keepRecent: Number(document.getElementById('idle-compact-keep').value),
+        userChars: Number(document.getElementById('idle-compact-user-chars').value),
+        summaryMaxChars: Number(document.getElementById('idle-compact-summary-chars').value),
+        sessionLookbackHours: Number(document.getElementById('idle-compact-lookback').value),
         enabled: document.getElementById('idle-compact-enabled').checked,
-        idleMinutes: Number(document.getElementById('idle-compact-minutes').value) || 15,
-        minBytes: (Number(document.getElementById('idle-compact-kb').value) || 64) * 1024,
+        idleMinutes: Number(document.getElementById('idle-compact-minutes').value),
+        minBytes: Math.round(Number(document.getElementById('idle-compact-kb').value) * 1024),
         model: document.getElementById('idle-compact-model').value.trim()
       };
-      status.textContent = 'Saving...';
+      if (status) {
+        status.textContent = 'Saving...';
+        status.style.color = 'var(--muted)';
+      }
       try {
         const r = await api('/api/idle-compact', {
           method: 'POST',
@@ -1823,9 +2225,18 @@
         });
         if (!r.ok) throw new Error((await r.json()).error || r.status);
         showIdleCompact((await r.json()).idleCompact);
-        status.textContent = 'Saved. It applies to the next conversation that comes back after a pause.';
+        if (status) {
+          status.textContent = 'Saved. Applies to subsequent conversations that resume after a pause.';
+          status.style.color = 'var(--ok)';
+          setTimeout(() => { if (status) status.textContent = ''; }, 4500);
+        }
+        showToast('Idle compaction configuration saved');
       } catch (e) {
-        status.textContent = 'Not saved: ' + e.message;
+        if (status) {
+          status.textContent = 'Not saved: ' + e.message;
+          status.style.color = 'var(--err)';
+        }
+        showToast('Failed to save: ' + e.message, true);
       }
     }
 
@@ -2036,6 +2447,7 @@
       formLoadedKey = key;
       formDirty = false;
       currentProfileBuffer = JSON.parse(JSON.stringify(p));
+      if (!currentProfileBuffer.modelEfforts) currentProfileBuffer.modelEfforts = {};
 
       document.getElementById('form-title').textContent = 'Edit Profile: ' + p.name;
       document.getElementById('p-key').value = key;
@@ -2048,6 +2460,11 @@
       document.getElementById('p-outformat').value = p.outFormat || '';
       document.getElementById('p-mode').value = p.mode || 'convert';
       document.getElementById('p-thinking-mode').value = p.thinkingMode || 'auto';
+      if (document.getElementById('p-thinking-effort')) {
+        document.getElementById('p-thinking-effort').value = p.thinkingEffort || 'auto';
+      }
+      renderModelSlots(toolVal, p);
+      syncEffortOptions();
       document.getElementById('btn-delete').style.display = 'inline-flex';
 
       const activeMap = state.activeProfiles || (state.config?.activeProfiles || {});
@@ -2056,8 +2473,6 @@
       if (activeTag) {
         activeTag.textContent = activeTargets.length ? '● Active: ' + activeTargets.join(', ') : '';
       }
-
-      renderModelSlots(toolVal, p);
     }
 
     function initNewProfile() {
@@ -2072,7 +2487,8 @@
         outFormat: 'openai-chat',
         mode: 'convert',
         thinkingMode: 'auto',
-        defaultModels: {}
+        defaultModels: {},
+        modelEfforts: {}
       };
 
       document.getElementById('form-title').textContent = 'Add New Provider Profile';
@@ -2085,10 +2501,14 @@
       document.getElementById('p-outformat').value = 'openai-chat';
       document.getElementById('p-mode').value = 'convert';
       document.getElementById('p-thinking-mode').value = 'auto';
+      if (document.getElementById('p-thinking-effort')) {
+        document.getElementById('p-thinking-effort').value = 'auto';
+      }
+      renderModelSlots('auto', currentProfileBuffer);
+      syncEffortOptions();
       document.getElementById('btn-delete').style.display = 'none';
       document.getElementById('active-tag').textContent = '';
 
-      renderModelSlots('auto', currentProfileBuffer);
       switchTab('tab-general');
     }
 
@@ -2163,6 +2583,8 @@
       document.getElementById('p-outformat').value = t.outFormat;
       document.getElementById('p-mode').value = t.mode;
       document.getElementById('p-thinking-mode').value = t.thinkingMode;
+      document.getElementById('p-thinking-effort').value = t.thinkingEffort || 'auto';
+      syncEffortOptions();
       currentProfileBuffer = { ...currentProfileBuffer, ...t };
       formDirty = true;
       renderModelSlots(t.tool || 'auto', t);
@@ -2218,6 +2640,13 @@
       // already had the key.
       const thinkingMode = document.getElementById('p-thinking-mode').value;
       if (thinkingMode !== 'auto' || existing.thinkingMode) profilePayload.thinkingMode = thinkingMode;
+      const thinkingEffort = document.getElementById('p-thinking-effort')?.value;
+      if (thinkingEffort && (thinkingEffort !== 'auto' || existing.thinkingEffort)) {
+        profilePayload.thinkingEffort = thinkingEffort;
+      }
+      if (currentProfileBuffer?.modelEfforts && Object.keys(currentProfileBuffer.modelEfforts).length > 0) {
+        profilePayload.modelEfforts = { ...currentProfileBuffer.modelEfforts };
+      }
 
       if (keyVal === MASKED_KEY) {
         profilePayload.apiKey = existing.apiKey || '';
@@ -2428,7 +2857,14 @@
     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);
+        if (input.id === 'idle-compact-model') {
+          updateCompactModelPresets(input.value.trim());
+        }
+      });
       input.addEventListener('keydown', onComboKeydown);
       input.addEventListener('blur', () => closeCombo(combo));
       // Keep the focus in the field while the list or the arrow is used.
@@ -2492,6 +2928,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) {
@@ -2515,6 +2957,119 @@
       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. Profile role/slot aliases (recommended for routing)
+      add('haiku', 'haiku (Claude Haiku Slot)', 'Auto-resolves to active profile Claude Haiku model', 'Slot Aliases');
+      add('subagent', 'subagent (Codex Subagent Slot)', 'Auto-resolves to active profile Codex Subagent model', 'Slot Aliases');
+      add('sonnet', 'sonnet (Claude Sonnet Slot)', 'Auto-resolves to active profile Claude Sonnet model', 'Slot Aliases');
+      add('main', 'main (Codex Main Slot)', 'Auto-resolves to active profile Codex Main model', 'Slot Aliases');
+
+      // 3. Models configured in current profiles
+      const profiles = state.config?.profiles || {};
+      for (const [profKey, p] of Object.entries(profiles)) {
+        const profName = p.name || profKey;
+        if (p.defaultModels) {
+          for (const [slot, m] of Object.entries(p.defaultModels)) {
+            if (m) add(m, m, `${profName} · ${slot} slot`, 'Profile Models');
+          }
+        }
+        if (Array.isArray(p.publicModels)) {
+          for (const m of p.publicModels) {
+            if (m) add(m, m, `${profName}`, 'Profile Models');
+          }
+        }
+      }
+
+      // 4. Discovered Catalog models
+      if (cachedCatalog) {
+        if (Array.isArray(cachedCatalog.claude?.models)) {
+          for (const m of cachedCatalog.claude.models) {
+            if (m.id) add(m.id, m.id, `Claude Catalog · ${m.tier || ''}`, 'Catalog');
+          }
+        }
+        if (Array.isArray(cachedCatalog.codex?.models)) {
+          for (const m of cachedCatalog.codex.models) {
+            if (m.id) add(m.id, m.id, `Codex Catalog · ${m.role || ''}`, 'Catalog');
+          }
+        }
+      }
+
+      // 5. Popular lightweight models
+      const popular = [
+        { id: 'zencore/muse-spark-1.3-contributor-free', desc: 'ZenCore contributor fast model' },
+        { id: 'zencore/exo-free', desc: 'ZenCore free pool fast model' },
+        { id: 'claude-3-5-haiku-20241022', desc: 'Anthropic lightweight summarizer' },
+        { id: 'gpt-4o-mini', desc: 'OpenAI low-cost summarizer' },
+        { id: 'gemini-2.5-flash', desc: 'Google Gemini fast summarizer' }
+      ];
+      for (const p of popular) {
+        add(p.id, p.id, p.desc, 'Recommended');
+      }
+
+      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) || item.desc.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 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 === 'Slot Aliases') badgeClass = 'badge accent';
+        else if (item.category === 'Profile Models') 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;
@@ -2533,12 +3088,18 @@
 
     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();
+        updateCompactModelPresets(model);
+      }
     }
 
     function onComboKeydown(e) {
@@ -2873,6 +3434,17 @@
       // Setup log auto-refresh
       toggleLogAutoRefresh();
 
+      // Setup profile modal effort & bifrost change triggers
+      document.getElementById('p-thinking-mode')?.addEventListener('change', syncEffortOptions);
+      document.getElementById('p-mode')?.addEventListener('change', syncEffortOptions);
+      document.getElementById('p-outformat')?.addEventListener('change', syncEffortOptions);
+      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();