superlocalmemory 4.1.13 → 4.1.14

package/src/superlocalmemory/ui/js/od-optimize.js

@@ -1,828 +0,0 @@
-// SuperLocalMemory — od-optimize.js  v2.0
-// OD-styled Optimize pane. Self-contained, CSP-safe.
-// Renders into the "optimize-pane" tab container via the shell's triggerTabLoad.
-// Exposes window.odRenderOptimize(container).
-//
-// HTML structure mirrors approved design (optimize.html <main class="content">).
-// Design-system CSS classes used throughout; .ctl is injected once (not in design-system.css).
-//
-// Endpoints (no auth header required — open loopback):
-//   GET    /api/optimize/status  → {healthy, enabled, features:{proxy,cache,compression,
-//                                    semantic_cache}, compress_mode, config_version}
-//   GET    /api/optimize/savings → {tokens_saved_input, tokens_saved_output,
-//                                    tokens_saved_compress, compress_ratio,
-//                                    cost_saved:{usd,inr}, hit_rate, cache_bytes,
-//                                    entries, hits, misses, is_stale, pricing_date}
-//   GET    /api/optimize/config  → {enabled, proxy_enabled, cache_enabled,
-//                                    semantic_enabled, compress_enabled,
-//                                    compress_mode, compress_prose, config_version, ...}
-//   GET    /api/optimize/stats   → {hits, misses, compress_runs, compress_bytes_original,
-//                                    compress_bytes_after, cache_size_bytes,
-//                                    cache_entry_count, ...}
-//   PUT    /api/optimize/config  → body:{enabled?, proxy_enabled?, ...} → {status:"ok"}
-//   DELETE /api/optimize/cache/clear → {success, deleted}
-//
-// TODO: /api/optimize/savings has no per-provider breakdown; provider table shows
-//       known pricing (factual public data) with aggregate totals from the API.
-//
-// CRIT fixes baked in:
-//   C1 — proxy + master toggles show restart-required hint (daemon must restart to bind)
-//   C2 — savings 404/500 handled with exponential-backoff retry + manual Retry button;
-//        never a permanent broken state
-//   C3 — all API strings through escapeHtml() before innerHTML assignment
-//   C4 — putConfig re-reads config after every PUT (success: confirm; failure: revert)
-//   C5 — compress_mode only offers 'safe'|'aggressive' (only two valid API values)
-//
-// Copyright (c) 2026 Varun Pratap Bhardwaj / Qualixar — AGPL-3.0
-
-(function () {
-  'use strict';
-
-  var POLL_MS         = 10000;
-  var MAX_AUTO_RETRY  = 3;
-  var RETRY_DELAYS_MS = [2000, 5000, 15000];
-
-  // Known provider pricing (factual public data; not seed/fake numbers).
-  // TODO: replace with /api/optimize/savings per-provider breakdown when available.
-  var PROVIDERS = [
-    { name: 'Anthropic', price: '$3.00 / $15.00', color: 'var(--violet)' },
-    { name: 'OpenAI',    price: '$2.50 / $10.00', color: 'var(--cyan)' },
-    { name: 'Gemini',    price: '$1.25 / $10.00', color: 'var(--ok)' }
-  ];
-
-  // ── Module state ──────────────────────────────────────────────────────────
-  var _cfg         = null;
-  var _pollTimer   = null;
-  var _container   = null;
-  var _observer    = null;
-  var _retry       = { config: 0, savings: 0 };
-  var _ctlInjected = false;
-
-  // ── Helpers ───────────────────────────────────────────────────────────────
-  // CRIT C3: every API-derived string must pass through this.
-  function escapeHtml(s) {
-    return String(s == null ? '' : s)
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#39;');
-  }
-
-  function fmtNum(n) { return (n || 0).toLocaleString(); }
-
-  // Format token counts with M/K suffix for KPI display (returns HTML).
-  function fmtTokensHtml(n) {
-    var v = n || 0;
-    if (v >= 1e9) return (v / 1e9).toFixed(1) + '<small>B</small>';
-    if (v >= 1e6) return (v / 1e6).toFixed(1) + '<small>M</small>';
-    if (v >= 1e3) return (v / 1e3).toFixed(1) + '<small>K</small>';
-    return String(v);
-  }
-
-  function fmtHitRateHtml(rate) {
-    return Math.round((rate || 0) * 100) + '<small>%</small>';
-  }
-
-  function fmtRatioHtml(r) {
-    return r != null ? r.toFixed(2) + '<small>&times;</small>' : '—';
-  }
-
-  function fmtUSD(n) {
-    var v = n || 0;
-    return v >= 1 ? '$' + Math.round(v).toLocaleString() : '$' + v.toFixed(4);
-  }
-
-  function fmtINR(n) {
-    var v = n || 0;
-    return v >= 1 ? '₹' + Math.round(v).toLocaleString() : '₹' + v.toFixed(2);
-  }
-
-  // ── Toast notifications ───────────────────────────────────────────────────
-  // type: 'ok' (auto-dismisses 1.8s) | 'error' (auto-dismisses 4s)
-  function showToast(msg, type) {
-    var el = document.getElementById('od-opt-toast');
-    if (!el) return;
-    el.textContent  = msg;
-    el.className    = type === 'error' ? 'err' : 'ok';
-    el.style.display = 'block';
-    clearTimeout(el._tid);
-    el._tid = setTimeout(function () { el.style.display = 'none'; },
-      type === 'error' ? 4000 : 1800);
-  }
-
-  function setText(id, val) {
-    var el = document.getElementById(id);
-    if (el) el.textContent = val;
-  }
-
-  function setHtml(id, val) {
-    var el = document.getElementById(id);
-    if (el) el.innerHTML = val;
-  }
-
-  // ── .ctl style injection ──────────────────────────────────────────────────
-  // .ctl is defined in the design's inline <style> block, not in design-system.css.
-  // Inject once into <head> so the class works correctly.
-  function injectCtlStyle() {
-    if (_ctlInjected || document.getElementById('od-opt-ctl-style')) return;
-    var s = document.createElement('style');
-    s.id = 'od-opt-ctl-style';
-    s.textContent =
-      '.ctl{display:flex;align-items:center;justify-content:space-between;gap:16px;' +
-        'padding:12px 0;border-bottom:1px solid var(--border)}' +
-      '.ctl:last-of-type{border-bottom:0}' +
-      '#od-opt-toast{position:fixed;bottom:24px;right:24px;padding:10px 18px;' +
-        'border-radius:var(--r-md);font-size:13px;font-weight:600;line-height:1.4;' +
-        'z-index:1000;box-shadow:0 4px 16px rgba(0,0,0,.18);pointer-events:none;' +
-        'display:none;max-width:320px}' +
-      '#od-opt-toast.ok{background:var(--ok);color:#fff}' +
-      '#od-opt-toast.err{background:var(--danger);color:#fff}';
-    document.head.appendChild(s);
-    _ctlInjected = true;
-  }
-
-  // ── HTML fragment helpers ─────────────────────────────────────────────────
-  function buildCtl(switchId, label, sub) {
-    return (
-      '<div class="ctl">' +
-        '<div>' +
-          '<b style="font-size:13.5px">' + escapeHtml(label) + '</b>' +
-          (sub
-            ? '<div class="dim" style="font-size:12.5px;margin-top:2px">' + escapeHtml(sub) + '</div>'
-            : '') +
-        '</div>' +
-        '<button class="switch" data-switch-id="' + escapeHtml(switchId) + '"' +
-          ' id="' + escapeHtml(switchId) + '"' +
-          ' role="switch" aria-checked="false" aria-label="' + escapeHtml(label) + '">' +
-        '</button>' +
-      '</div>'
-    );
-  }
-
-  // ── Build layout HTML ─────────────────────────────────────────────────────
-  // Mirrors <main class="content"> from approved design (optimize.html).
-  function buildHTML() {
-    return (
-      '<div id="od-opt-root">' +
-
-        // Global toast — success / error notifications (position:fixed, bottom-right)
-        '<div id="od-opt-toast"></div>' +
-
-        // Page head
-        '<div class="page-head">' +
-          '<h2>Optimize</h2>' +
-          '<p>SLM saves tokens three ways: a <b>KV Cache</b> (reuses repeated reads/' +
-            'searches — no proxy needed), <b>Compression</b> (reversible shrink of large' +
-            ' tool output), and an optional <b>Proxy</b> (auto-intercepts every LLM call' +
-            ' — requires restart). Cache is AES-256 encrypted at rest in' +
-            ' <span style="font-family:var(--font-mono)">llmcache.db</span>.</p>' +
-        '</div>' +
-
-        // CRIT C2: savings error banner (hidden by default)
-        '<div id="od-opt-sav-err"' +
-          ' style="display:none;background:var(--warn-soft);border:1px solid var(--warn);' +
-                  'border-radius:var(--r-md);padding:12px 16px;margin-bottom:16px;' +
-                  'align-items:center;justify-content:space-between;gap:12px">' +
-          '<span style="color:var(--warn);font-size:13.5px" id="od-opt-sav-err-msg">' +
-            'Service unavailable' +
-          '</span>' +
-          '<button id="od-opt-sav-retry"' +
-            ' style="padding:5px 12px;font-size:12.5px;border-radius:var(--r-md);' +
-                    'border:1px solid var(--warn);background:transparent;' +
-                    'color:var(--warn);cursor:pointer;font-weight:600">' +
-            'Retry' +
-          '</button>' +
-        '</div>' +
-
-        // Shown only while every counter is zero — see renderSavings(). Without
-        // it, "enabled" toggles above four zeros reads as a broken feature
-        // rather than an unused one.
-        '<div id="od-opt-unused-note" style="display:none;margin-bottom:14px;' +
-          'padding:12px 14px;border:1px dashed var(--border);border-radius:var(--r-md);' +
-          'font-size:13px;color:var(--fg-2);line-height:1.6">' +
-          '<strong style="color:var(--fg)">Enabled, but nothing has used it yet.</strong> ' +
-          'Caching and compression are opt-in: your AI assistant has to ask for ' +
-          'them. Turning them on here does not make savings happen by itself — ' +
-          'the numbers below stay at zero until an assistant calls them.' +
-        '</div>' +
-
-        // KPI strip — 4 cards using .kpi-strip + .card.kpi classes
-        '<section class="kpi-strip" style="margin-bottom:16px">' +
-
-          // Tokens saved
-          '<div class="card kpi">' +
-            '<div class="label">' +
-              '<span data-ic="bolt"></span> Tokens saved' +
-            '</div>' +
-            '<div class="value num" id="od-opt-tokens-saved">—</div>' +
-            // Was a hardcoded "▲ this month" delta — an upward trend indicator
-            // that no code ever set from data, on a counter that is cumulative
-            // since install and not monthly at all. Both halves of that label
-            // were wrong. State what the number actually is.
-            '<div class="delta" id="od-opt-tokens-delta">since install</div>' +
-          '</div>' +
-
-          // Cache hit rate + sparkline
-          '<div class="card kpi">' +
-            '<div class="label">' +
-              '<span data-ic="optimize"></span> Cache hit rate' +
-            '</div>' +
-            '<div class="value num" id="od-opt-hit-rate">—</div>' +
-            '<div class="spark" id="od-opt-hit-rate-spark"></div>' +
-          '</div>' +
-
-          // Compression ratio
-          '<div class="card kpi">' +
-            '<div class="label">' +
-              '<span data-ic="memories"></span> Compression ratio' +
-            '</div>' +
-            '<div class="value num" id="od-opt-compress-ratio">—</div>' +
-          '</div>' +
-
-          // Cost saved
-          '<div class="card kpi">' +
-            '<div class="label">' +
-              '<span data-ic="shield"></span> Est. saved' +
-            '</div>' +
-            '<div class="value num" id="od-opt-usd-saved">—</div>' +
-            '<div class="dim" style="font-size:12px;margin-top:4px" id="od-opt-inr-saved">—</div>' +
-          '</div>' +
-
-        '</section>' +
-
-        // Two-column body: surfaces (left) + provider savings (right)
-        '<div class="grid" style="grid-template-columns:1fr 1fr;align-items:start">' +
-
-          // LEFT — optimization surfaces + controls
-          '<div class="card">' +
-            '<div class="card-head">' +
-              '<h3>Optimization surfaces</h3>' +
-            '</div>' +
-
-            // Config error band
-            '<div id="od-opt-cfg-err"' +
-              ' style="display:none;padding:10px 20px;border-bottom:1px solid var(--border)">' +
-              '<span style="color:var(--danger);font-size:13px" id="od-opt-cfg-err-msg">' +
-                'Could not load config' +
-              '</span>' +
-              '<button id="od-opt-cfg-retry"' +
-                ' style="margin-left:12px;padding:3px 10px;font-size:12px;' +
-                        'border-radius:5px;border:1px solid var(--danger);' +
-                        'background:transparent;color:var(--danger);cursor:pointer">' +
-                'Retry' +
-              '</button>' +
-            '</div>' +
-
-            // Switch controls — 6 surfaces reflecting TRUE config state.
-            // CRIT C1: master + proxy require daemon restart; all others hot-reload.
-            '<div class="card-pad" id="od-opt-ctl-wrap">' +
-
-              // Master — hot-reload is fast but proxy binding still needs restart
-              buildCtl('od-opt-sw-master', 'Master enable',
-                'Global on/off — disabling stops all token optimization') +
-
-              // CRIT C1: restart hint for master + proxy (shared, shown on either toggle)
-              '<div id="od-opt-restart-hint"' +
-                ' style="display:none;padding:8px 12px;background:var(--warn-soft);' +
-                        'border-radius:var(--r-sm);font-size:12.5px;color:var(--warn);margin:6px 0">' +
-                'Restart required — run <code>slm restart</code> to apply this change.' +
-              '</div>' +
-
-              // Proxy — TCP listener bound at startup; needs restart to activate
-              buildCtl('od-opt-sw-proxy', 'Proxy',
-                'Intercepts every LLM call automatically — no code changes needed; restart required') +
-
-              // KV Cache — reuses exact-match repeated tool results
-              buildCtl('od-opt-sw-cache', 'KV Cache',
-                'Reuses repeated reads/searches to save tokens — no proxy needed') +
-
-              // Compression — reversible structural compression of large tool output
-              buildCtl('od-opt-sw-compress', 'Compression',
-                'Reversibly shrinks large tool output; expands back before delivery') +
-
-              // Semantic cache — fuzzy match on similar queries
-              buildCtl('od-opt-sw-semantic', 'Semantic cache',
-                'Groups similar queries into cache hits even when phrasing differs') +
-
-              // Compress prose — extend compression to narrative/free-text output
-              buildCtl('od-opt-sw-prose', 'Compress prose',
-                'Also compress free-text and narrative output (use with care)') +
-
-              // Compression mode — safe | aggressive (only two valid API values)
-              '<div class="ctl">' +
-                '<div>' +
-                  '<b style="font-size:13.5px">Compression mode</b>' +
-                  '<div class="dim" style="font-size:12.5px;margin-top:2px">' +
-                    'safe = lossless structural; aggressive may reduce output fidelity' +
-                  '</div>' +
-                '</div>' +
-                '<div class="seg" id="od-opt-mode-seg">' +
-                  '<button data-mode="safe">safe</button>' +
-                  '<button data-mode="aggressive">aggressive</button>' +
-                '</div>' +
-              '</div>' +
-
-            '</div>' +
-
-            // Clear cache button
-            '<div style="padding:16px 20px 20px;border-top:1px solid var(--border)">' +
-              '<button id="od-opt-clear-cache" class="btn ghost"' +
-                ' style="color:var(--danger);border-color:var(--danger)">' +
-                'Clear cache (llmcache.db)' +
-              '</button>' +
-              '<span id="od-opt-clear-msg"' +
-                ' style="display:none;margin-left:12px;font-size:12.5px;color:var(--ok)">' +
-                'Cleared.' +
-              '</span>' +
-            '</div>' +
-          '</div>' +
-
-          // RIGHT — savings by provider
-          // TODO: /api/optimize/savings has no per-provider breakdown.
-          // Provider names and pricing are factual public data.
-          // Per-provider saved tokens show aggregate total from API.
-          '<div class="card">' +
-            '<div class="card-head">' +
-              '<h3>Savings by provider</h3>' +
-              '<span class="sub">input / output per 1M tokens</span>' +
-            '</div>' +
-            '<div class="card-pad">' +
-              '<table class="tbl" id="od-opt-prov">' +
-                '<thead>' +
-                  '<tr>' +
-                    '<th>Provider</th><th>Price / 1M</th><th>Saved (M tok)</th>' +
-                  '</tr>' +
-                '</thead>' +
-                '<tbody id="od-opt-prov-body">' +
-                  buildProvRows() +
-                '</tbody>' +
-              '</table>' +
-            '</div>' +
-          '</div>' +
-
-        '</div>' + // end two-column
-
-        // Activity chart
-        '<div class="card" style="margin-top:16px">' +
-          '<div class="card-head">' +
-            '<h3>Cache &amp; compression activity</h3>' +
-            '<span class="sub">hits vs misses · last 24h</span>' +
-          '</div>' +
-          '<div class="card-pad">' +
-            '<div class="bars" id="od-opt-bars" style="height:110px"></div>' +
-            '<div style="display:flex;gap:20px;margin-top:12px;font-size:12.5px">' +
-              '<span><b class="num" id="od-opt-stat-hits">—</b>' +
-                ' <span class="dim">hits</span></span>' +
-              '<span><b class="num" id="od-opt-stat-misses">—</b>' +
-                ' <span class="dim">misses</span></span>' +
-              '<span><b class="num" id="od-opt-stat-runs">—</b>' +
-                ' <span class="dim">CCR objects stored</span></span>' +
-            '</div>' +
-          '</div>' +
-        '</div>' +
-
-      '</div>' // od-opt-root
-    );
-  }
-
-  // ── Build static provider table rows ─────────────────────────────────────
-  function buildProvRows() {
-    return PROVIDERS.map(function (p) {
-      return (
-        '<tr>' +
-          '<td><b>' + escapeHtml(p.name) + '</b></td>' +
-          '<td class="mono dim">' + escapeHtml(p.price) + '</td>' +
-          '<td>' +
-            '<span style="display:inline-block;vertical-align:middle;width:70px;height:6px;' +
-              'border-radius:99px;background:var(--card-2);overflow:hidden;margin-right:8px">' +
-              '<span class="od-prov-bar" data-color="' + escapeHtml(p.name) + '"' +
-                ' style="display:block;height:100%;width:0%;background:' + p.color + '"></span>' +
-            '</span>' +
-            '<b class="num od-prov-tok" data-prov="' + escapeHtml(p.name) + '">—</b>' +
-          '</td>' +
-        '</tr>'
-      );
-    }).join('');
-  }
-
-  // ── Render: status badge ──────────────────────────────────────────────────
-  function renderStatus(data) {
-    var badge = document.getElementById('od-opt-status-badge');
-    if (!badge) return;
-    if (!data || data.healthy === false) {
-      badge.className = 'badge danger';
-      badge.innerHTML = '<span class="dot"></span> error';
-      return;
-    }
-    if (data.enabled) {
-      badge.className = 'badge ok';
-      badge.innerHTML = '<span class="dot"></span> enabled';
-    } else {
-      badge.className = 'badge neutral';
-      badge.innerHTML = '<span class="dot"></span> disabled';
-    }
-  }
-
-  // ── Render: KPI strip from /api/optimize/savings ──────────────────────────
-  function renderSavings(data) {
-    hideSavErr();
-    var tok = (data.tokens_saved_input || 0) +
-              (data.tokens_saved_output || 0) +
-              (data.tokens_saved_compress || 0);
-    setHtml('od-opt-tokens-saved', fmtTokensHtml(tok));
-    setHtml('od-opt-hit-rate',     fmtHitRateHtml(data.hit_rate));
-    setHtml('od-opt-compress-ratio', fmtRatioHtml(data.compress_ratio));
-    setText('od-opt-usd-saved',   fmtUSD(data.cost_saved && data.cost_saved.usd));
-    setText('od-opt-inr-saved',   fmtINR(data.cost_saved && data.cost_saved.inr));
-
-    // The hit-rate sparkline used to be drawn from
-    //   [rate*0.7, rate*0.78, rate*0.83, rate*0.88, rate*0.93, rate]
-    // — six points invented by scaling the CURRENT value, rendering a tidy
-    // upward trend that no measurement supports. There is no history to plot:
-    // llmcache_metrics is a single cumulative row (id=1) and nothing anywhere
-    // stores a time series. A chart that fabricates its own past is worse than
-    // no chart, especially in a product that asks users to trust its numbers.
-    //
-    // Removed rather than replaced. When a real series exists, plot that.
-    var sparkEl = document.getElementById('od-opt-hit-rate-spark');
-    if (sparkEl) sparkEl.innerHTML = '';
-
-    // Everything reads zero while the toggles read ON, which looks broken. It
-    // is not: caching and compression are opt-in tools an agent has to call.
-    // Say so, rather than leaving the user to guess.
-    var noteEl = document.getElementById('od-opt-unused-note');
-    if (noteEl) {
-      var used = (data.hit_rate || 0) > 0 || tok > 0 ||
-                 (data.compress_ratio || 0) > 0;
-      noteEl.style.display = used ? 'none' : '';
-    }
-
-    // Provider table footnote removed in v2.1 (od-opt-prov-total element no longer exists).
-  }
-
-  // ── Render: config toggles from /api/optimize/config ─────────────────────
-  // All 6 surfaces reflect TRUE server state. Called on load and after every
-  // successful PUT to confirm persistence (revert happens on error).
-  function renderConfig(cfg) {
-    _cfg = cfg;
-    hideErrEl('od-opt-cfg-err');
-    applySwitch('od-opt-sw-master',   cfg.enabled);
-    applySwitch('od-opt-sw-proxy',    cfg.proxy_enabled);
-    applySwitch('od-opt-sw-cache',    cfg.cache_enabled);
-    applySwitch('od-opt-sw-compress', cfg.compress_enabled);
-    applySwitch('od-opt-sw-semantic', cfg.semantic_enabled);
-    applySwitch('od-opt-sw-prose',    cfg.compress_prose);
-
-    // Compression mode segmented control
-    var seg = document.getElementById('od-opt-mode-seg');
-    if (seg) {
-      var target = cfg.compress_mode || 'safe';
-      seg.querySelectorAll('button[data-mode]').forEach(function (btn) {
-        var active = btn.getAttribute('data-mode') === target;
-        btn.classList.toggle('active', active);
-      });
-    }
-  }
-
-  // ── Render: activity bars from /api/optimize/stats ────────────────────────
-  function renderStats(data) {
-    setText('od-opt-stat-hits',   fmtNum(data.hits || 0));
-    setText('od-opt-stat-misses', fmtNum(data.misses || 0));
-    setText('od-opt-stat-runs',   fmtNum(data.cache_entry_count || 0));
-    var barsEl = document.getElementById('od-opt-bars');
-    if (!barsEl) return;
-    var total = (data.hits || 0) + (data.misses || 0);
-    if (typeof window.slmBars === 'function' && total > 0) {
-      // Distribute total across 24 synthetic hourly buckets for the bar chart.
-      // Real hourly bucketing requires a time-series endpoint not yet available.
-      // TODO: replace with hourly breakdown when /api/optimize/stats provides it.
-      var buckets = [];
-      for (var i = 0; i < 24; i++) {
-        buckets.push(Math.max(0, Math.floor(total / 24)));
-      }
-      window.slmBars(barsEl, buckets);
-    } else if (total === 0) {
-      barsEl.innerHTML =
-        '<span style="color:var(--fg-3);font-size:12.5px;margin:auto">' +
-          'No activity recorded yet' +
-        '</span>';
-      barsEl.style.alignItems = 'center';
-    }
-  }
-
-  // ── Error state helpers ───────────────────────────────────────────────────
-  // CRIT C2: savings errors are transient with retry, not a permanent broken state.
-  function showSavErr(msg) {
-    var band  = document.getElementById('od-opt-sav-err');
-    var msgEl = document.getElementById('od-opt-sav-err-msg');
-    if (band)  band.style.display = 'flex';
-    if (msgEl) msgEl.textContent  = msg || 'Service unavailable';
-    ['od-opt-tokens-saved', 'od-opt-hit-rate', 'od-opt-compress-ratio',
-     'od-opt-usd-saved', 'od-opt-inr-saved'].forEach(function (id) { setText(id, '—'); });
-  }
-
-  function hideSavErr() {
-    var band = document.getElementById('od-opt-sav-err');
-    if (band) band.style.display = 'none';
-  }
-
-  function showErrEl(id, msg) {
-    var el    = document.getElementById(id);
-    var msgEl = document.getElementById(id + '-msg');
-    if (el)   el.style.display   = '';
-    if (msgEl) msgEl.textContent = msg || 'Error loading';
-  }
-
-  function hideErrEl(id) {
-    var el = document.getElementById(id);
-    if (el) el.style.display = 'none';
-  }
-
-  // ── DOM helper ────────────────────────────────────────────────────────────
-  function applySwitch(id, val) {
-    var el = document.getElementById(id);
-    if (!el) return;
-    el.classList.toggle('on', !!val);
-    el.setAttribute('aria-checked', String(!!val));
-  }
-
-  // ── Data loaders ──────────────────────────────────────────────────────────
-  function loadSavings() {
-    fetch('/api/optimize/savings')
-      .then(function (r) {
-        if (!r.ok) throw new Error('HTTP ' + r.status);
-        return r.json();
-      })
-      .then(function (data) {
-        _retry.savings = 0;
-        renderSavings(data);
-      })
-      .catch(function (err) {
-        var attempt = _retry.savings;
-        _retry.savings++;
-        var base = err && err.message ? ' (' + err.message + ')' : '';
-        if (attempt < MAX_AUTO_RETRY) {
-          var delay = RETRY_DELAYS_MS[attempt] || 15000;
-          showSavErr('Service unavailable' + base + ' — retrying in ' + (delay / 1000) + 's…');
-          setTimeout(loadSavings, delay);
-        } else {
-          showSavErr('Service unavailable' + base + ' — click Retry to reload');
-        }
-      });
-  }
-
-  function loadConfig() {
-    fetch('/api/optimize/config')
-      .then(function (r) {
-        if (!r.ok) throw new Error('HTTP ' + r.status);
-        return r.json();
-      })
-      .then(function (cfg) {
-        _retry.config = 0;
-        renderConfig(cfg);
-      })
-      .catch(function (err) {
-        var attempt = _retry.config;
-        _retry.config++;
-        var msg = 'Could not load config (' + (err && err.message ? err.message : 'error') + ')';
-        if (attempt < MAX_AUTO_RETRY) {
-          setTimeout(loadConfig, RETRY_DELAYS_MS[attempt] || 15000);
-        } else {
-          showErrEl('od-opt-cfg-err', msg);
-        }
-      });
-  }
-
-  function loadStatus() {
-    fetch('/api/optimize/status')
-      .then(function (r) { return r.json(); })
-      .then(renderStatus)
-      .catch(function () { renderStatus(null); });
-  }
-
-  function loadStats() {
-    fetch('/api/optimize/stats')
-      .then(function (r) { return r.ok ? r.json() : null; })
-      .then(function (d) { if (d) renderStats(d); })
-      .catch(function () {});
-  }
-
-  function loadAll() {
-    loadStatus();   // healthy badge + per-feature feature flags
-    loadConfig();   // toggle state (source of truth for all 6 surfaces)
-    loadSavings();  // KPI strip
-    loadStats();    // activity bars
-  }
-
-  // ── Config PUT ────────────────────────────────────────────────────────────
-  // On success: shows "Saved" toast + re-reads config to confirm persistence.
-  // On failure: reverts toggles to server state + shows error toast.
-  function putConfig(body) {
-    fetch('/api/optimize/config', {
-      method:  'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body:    JSON.stringify(body)
-    })
-    .then(function (r) {
-      if (!r.ok) {
-        loadConfig(); // revert toggles to server state on failure
-        showToast('Could not save — settings reverted', 'error');
-      } else {
-        showToast('Saved', 'ok');
-        loadConfig(); // re-read to confirm persistence
-      }
-    })
-    .catch(function () {
-      loadConfig();
-      showToast('Could not reach server', 'error');
-    });
-  }
-
-  // ── Event wiring (CSP-safe, delegated — no onXxx= attributes) ────────────
-  function wireEvents(container) {
-    // Toggle switches
-    var ctlWrap = container.querySelector('#od-opt-ctl-wrap');
-    if (ctlWrap) {
-      ctlWrap.addEventListener('click', function (e) {
-        var sw = e.target.closest('button[data-switch-id]');
-        if (!sw) return;
-        var swId  = sw.getAttribute('data-switch-id');
-        var nowOn = !sw.classList.contains('on');
-        sw.classList.toggle('on', nowOn);
-        sw.setAttribute('aria-checked', String(nowOn));
-
-        // All 6 surfaces map directly to config API fields.
-        var fieldMap = {
-          'od-opt-sw-master':   'enabled',
-          'od-opt-sw-proxy':    'proxy_enabled',
-          'od-opt-sw-cache':    'cache_enabled',
-          'od-opt-sw-compress': 'compress_enabled',
-          'od-opt-sw-semantic': 'semantic_enabled',
-          'od-opt-sw-prose':    'compress_prose'
-        };
-        var field = fieldMap[swId];
-        if (!field) return;
-        var body = {};
-        body[field] = nowOn;
-        putConfig(body);
-
-        // CRIT C1: master + proxy require daemon restart to take full effect
-        if (swId === 'od-opt-sw-proxy' || swId === 'od-opt-sw-master') {
-          var hint = document.getElementById('od-opt-restart-hint');
-          if (hint) hint.style.display = '';
-        }
-      });
-    }
-
-    // Compression mode segmented control
-    var seg = container.querySelector('#od-opt-mode-seg');
-    if (seg) {
-      seg.addEventListener('click', function (e) {
-        var btn = e.target.closest('button[data-mode]');
-        if (!btn) return;
-        var mode = btn.getAttribute('data-mode');
-        if (mode === 'aggressive') {
-          window.confirmDestructive({
-            title: 'Enable aggressive compression',
-            target: 'Compression mode',
-            consequence: 'May reduce output fidelity. Not safe for code, legal text, or math tasks.',
-            confirmLabel: 'Enable',
-          }).then(function(confirmed) {
-            if (!confirmed) return;
-            seg.querySelectorAll('button[data-mode]').forEach(function (b) {
-              b.classList.toggle('active', b === btn);
-            });
-            putConfig({ compress_mode: 'aggressive' });
-          });
-          return;
-        }
-        seg.querySelectorAll('button[data-mode]').forEach(function (b) {
-          b.classList.toggle('active', b === btn);
-        });
-        putConfig({ compress_mode: mode });
-      });
-    }
-
-    // Clear cache button
-    var clearBtn = container.querySelector('#od-opt-clear-cache');
-    if (clearBtn) {
-      clearBtn.addEventListener('click', function () {
-        window.confirmDestructive({
-          title: 'Clear LLM cache',
-          target: 'All entries in llmcache.db',
-          consequence: 'All cached responses will be cleared.',
-          confirmLabel: 'Clear',
-        }).then(function(confirmed) {
-          if (!confirmed) return;
-          fetch('/api/optimize/cache/clear', { method: 'DELETE' })
-            .then(function (r) { return r.json(); })
-            .then(function (d) {
-              var msgEl = document.getElementById('od-opt-clear-msg');
-              if (msgEl) {
-                msgEl.textContent = 'Cleared ' + fmtNum(d.deleted || 0) + ' entries.';
-                msgEl.style.display = '';
-                setTimeout(function () {
-                  msgEl.style.display = 'none';
-                  loadSavings();
-                }, 3000);
-              }
-            })
-            .catch(function () {});
-        });
-      });
-    }
-
-    // Savings Retry button
-    var savRetry = container.querySelector('#od-opt-sav-retry');
-    if (savRetry) {
-      savRetry.addEventListener('click', function () {
-        _retry.savings = 0;
-        hideSavErr();
-        loadSavings();
-      });
-    }
-
-    // Config Retry button
-    var cfgRetry = container.querySelector('#od-opt-cfg-retry');
-    if (cfgRetry) {
-      cfgRetry.addEventListener('click', function () {
-        _retry.config = 0;
-        hideErrEl('od-opt-cfg-err');
-        loadConfig();
-      });
-    }
-  }
-
-  // ── Refresh management: MutationObserver re-activates polling on tab show ─
-  function startRefreshObserver() {
-    var pane = document.getElementById('optimize-pane');
-    if (!pane || _observer) return;
-    _observer = new MutationObserver(function (mutations) {
-      mutations.forEach(function (m) {
-        if (m.type !== 'attributes' || m.attributeName !== 'class') return;
-        var t = m.target;
-        if (t.classList.contains('active') && t.classList.contains('show')) {
-          loadAll();
-          if (_pollTimer) clearInterval(_pollTimer);
-          _pollTimer = setInterval(function () {
-            if (t.classList.contains('active')) {
-              loadSavings();
-            } else {
-              clearInterval(_pollTimer);
-              _pollTimer = null;
-            }
-          }, POLL_MS);
-        }
-      });
-    });
-    _observer.observe(pane, { attributes: true });
-  }
-
-  // ── Public API ─────────────────────────────────────────────────────────────
-  window.odRenderOptimize = function (container) {
-    if (!container) return;
-    _container = container;
-
-    // Inject .ctl style once
-    injectCtlStyle();
-
-    // Idempotent: reload data if already rendered
-    if (container.querySelector('#od-opt-root')) {
-      loadAll();
-      return;
-    }
-
-    container.innerHTML = buildHTML();
-
-    // Fill data-ic SVG placeholders (shell may not have processed dynamically injected HTML)
-    if (typeof window.slmIcon === 'function') {
-      container.querySelectorAll('[data-ic]').forEach(function (el) {
-        el.innerHTML = window.slmIcon(el.getAttribute('data-ic'));
-      });
-    }
-
-    wireEvents(container);
-    loadAll();
-    startRefreshObserver();
-
-    // Savings polling timer (self-stops when pane goes inactive)
-    if (_pollTimer) clearInterval(_pollTimer);
-    _pollTimer = setInterval(function () {
-      var pane = document.getElementById('optimize-pane');
-      if (pane && pane.classList.contains('active')) {
-        loadSavings();
-      } else {
-        clearInterval(_pollTimer);
-        _pollTimer = null;
-      }
-    }, POLL_MS);
-  };
-
-  // Auto-run at DOMContentLoaded if the pane already exists in DOM
-  document.addEventListener('DOMContentLoaded', function () {
-    var pane = document.getElementById('optimize-pane');
-    if (pane) window.odRenderOptimize(pane);
-  });
-
-}());