@krtclcdy/tersio 2.20.1 → 2.22.0

package/dashboard/{app.js → charts.js}

@@ -1,193 +1,9 @@
 (function() {
-  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  var hasGsap = !reduce && typeof window.gsap !== 'undefined';
-  var hasST = hasGsap && typeof window.ScrollTrigger !== 'undefined';
-  if (hasST) gsap.registerPlugin(ScrollTrigger);
-
-  function fmt(n) { return Number(n).toLocaleString('en-US'); }
-  function fmtShort(n) {
-    if (n >= 1e12) return (n / 1e12).toFixed(1) + 'T';
-    if (n >= 1e9) return (n / 1e9).toFixed(1) + 'B';
-    if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
-    if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K';
-    return String(Math.round(n));
-  }
-
-  var CURS = {
-    USD: { s: '$', d: 2 }, PHP: { s: '₱', d: 2 }, EUR: { s: '€', d: 2 }, GBP: { s: '£', d: 2 },
-    JPY: { s: '¥', d: 0 }, KRW: { s: '₩', d: 0 }, SGD: { s: 'S$', d: 2 }, AUD: { s: 'A$', d: 2 },
-    CAD: { s: 'C$', d: 2 }, INR: { s: '₹', d: 2 }
-  };
-  var FLAGS = { USD: '🇺🇸', PHP: '🇵🇭', EUR: '🇪🇺', GBP: '🇬🇧', JPY: '🇯🇵', KRW: '🇰🇷', SGD: '🇸🇬', AUD: '🇦🇺', CAD: '🇨🇦', INR: '🇮🇳' };
-  // ponytail: static snapshot; live rates from frankfurter replace it when reachable
-  var fx = { cur: 'USD', rates: { USD: 1, PHP: 58.7, EUR: 0.92, GBP: 0.79, JPY: 149.8, KRW: 1385, SGD: 1.34, AUD: 1.52, CAD: 1.37, INR: 88.2 }, live: false };
-  try {
-    var savedCur = localStorage.getItem('tersio-fx-cur');
-    if (savedCur && CURS[savedCur]) fx.cur = savedCur;
-    var savedFx = JSON.parse(localStorage.getItem('tersio-fx') || 'null');
-    if (savedFx && savedFx.rates && savedFx.rates.USD === 1) fx.rates = savedFx.rates;
-  } catch (e) { }
-  // Magnitude-aware decimals. Model prices keep falling, so a flat 2dp rounds
-  // real spend down to "$0.00"; small amounts keep enough digits to stay
-  // readable (0.000187, not 0). Larger amounts use the currency's own scale.
-  function moneyDecimals(v, base) {
-    var a = Math.abs(v);
-    if (a >= 0.1 || a === 0) return base;
-    if (a >= 0.001) return Math.max(base, 4);
-    if (a >= 0.00001) return Math.max(base, 6);
-    return Math.max(base, 8);
-  }
-  function fxMoney(v) {
-    var c = CURS[fx.cur] || CURS.USD, r = fx.rates[fx.cur] || 1, amt = v * r;
-    var d = moneyDecimals(amt, c.d);
-    return c.s + amt.toLocaleString('en-US', { minimumFractionDigits: d, maximumFractionDigits: d });
-  }
-  // Tooltips build innerHTML, and error notes come from providers, so they are
-  // never interpolated raw.
-  function esc(s) {
-    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-  }
-
-  function countUp(el, target, money) {
-    function text(v) { return money ? fxMoney(v) : fmt(Math.round(v)); }
-    if (!hasGsap || target <= 0) { el.textContent = text(target); return; }
-    var o = { v: 0 };
-    gsap.to(o, { v: target, duration: 1.1, ease: 'power3.out', onUpdate: function() { el.textContent = text(o.v); } });
-  }
-
-  function tick() {
-    var c = document.getElementById('clock');
-    if (c) c.textContent = new Date().toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
-  }
-  tick(); setInterval(tick, 1000);
-  function currentTheme() {
-    try { return localStorage.getItem('tersio-theme') || 'system'; } catch (e) { return 'system'; }
-  }
-  function paintThemeTabs() {
-    var v = currentTheme();
-    Array.prototype.forEach.call(document.querySelectorAll('[data-theme-val]'), function(b) {
-      b.classList.toggle('on', b.getAttribute('data-theme-val') === v);
-    });
-  }
-  function applyTheme(v) {
-    if (v === 'system') document.documentElement.removeAttribute('data-theme');
-    else document.documentElement.setAttribute('data-theme', v);
-    try { localStorage.setItem('tersio-theme', v); } catch (e) { }
-    paintThemeTabs();
-  }
-  applyTheme(currentTheme());
-  (function initRail() {
-    var rail = document.getElementById('rail');
-    if (!rail || initRail.done) return;
-    initRail.done = true;
-    var N = 24, ticks = [];
-    for (var i = 0; i < N; i++) {
-      (function(i) {
-        var b = document.createElement('button');
-        b.type = 'button'; b.tabIndex = -1; b.setAttribute('aria-hidden', 'true');
-        b.addEventListener('click', function() {
-          var max = document.documentElement.scrollHeight - window.innerHeight;
-          window.scrollTo({ top: max * (i / (N - 1)), behavior: 'smooth' });
-        });
-        rail.appendChild(b); ticks.push(b);
-      })(i);
-    }
-    var queued = false;
-    function paint() {
-      queued = false;
-      var max = document.documentElement.scrollHeight - window.innerHeight;
-      var f = max > 0 ? window.scrollY / max : 0;
-      ticks.forEach(function(b, j) { b.classList.toggle('lit', j / (N - 1) <= f); });
-    }
-    window.addEventListener('scroll', function() {
-      if (!queued) { queued = true; requestAnimationFrame(paint); }
-    }, { passive: true });
-    paint();
-  })();
-  (function initFx() {
-    var btn = document.getElementById('fxBtn'), panel = document.getElementById('fxPanel'), cur = document.getElementById('fxCur');
-    var keys = Object.keys(CURS), active = -1;
-    function paint() {
-      cur.textContent = FLAGS[fx.cur] + ' ' + fx.cur;
-      Array.prototype.forEach.call(panel.children, function(o) {
-        o.setAttribute('aria-selected', o.dataset.cur === fx.cur ? 'true' : 'false');
-      });
-    }
-    function setCur(k) {
-      fx.cur = k; active = keys.indexOf(k);
-      try { localStorage.setItem('tersio-fx-cur', fx.cur); } catch (e) { }
-      // Served mode: also persist server-side so close → reopen keeps the
-      // choice. Every `tersio gain` run is a fresh ephemeral port (a new
-      // origin), so localStorage alone cannot survive a restart.
-      if (window.location.protocol !== 'file:' && typeof fetch === 'function') {
-        try {
-          fetch('currency', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ currency: k }) }).catch(function() { });
-        } catch (e) { }
-      }
-      paint();
-      if (DATA) render(DATA);
-    }
-    function open(show) {
-      var willOpen = show === undefined ? panel.classList.contains('hidden') : show;
-      panel.classList.toggle('hidden', !willOpen);
-      btn.setAttribute('aria-expanded', willOpen ? 'true' : 'false');
-      if (willOpen) mark(keys.indexOf(fx.cur));
-    }
-    function mark(i) {
-      active = (i + keys.length) % keys.length;
-      Array.prototype.forEach.call(panel.children, function(o, j) {
-        o.classList.toggle('active', j === active);
-      });
-      var el = panel.children[active];
-      if (el) el.focus();
-    }
-    keys.forEach(function(k) {
-      var o = document.createElement('button');
-      o.type = 'button'; o.className = 'fxopt mono'; o.dataset.cur = k;
-      o.setAttribute('role', 'option');
-      o.innerHTML = '<span>' + FLAGS[k] + ' ' + k + '</span><svg class="tick" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>';
-      o.addEventListener('click', function() { setCur(k); open(false); btn.focus(); });
-      o.addEventListener('mousemove', function() { mark(keys.indexOf(k)); });
-      panel.appendChild(o);
-    });
-    paint();
-    btn.addEventListener('click', function() { open(); });
-    btn.addEventListener('keydown', function(ev) {
-      if (ev.key === 'ArrowDown' || ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); open(true); }
-    });
-    panel.addEventListener('keydown', function(ev) {
-      if (ev.key === 'Escape') { open(false); btn.focus(); }
-      else if (ev.key === 'ArrowDown') { ev.preventDefault(); mark(active + 1); }
-      else if (ev.key === 'ArrowUp') { ev.preventDefault(); mark(active - 1); }
-      else if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); setCur(keys[active]); open(false); btn.focus(); }
-      else if (ev.key === 'Tab') open(false);
-    });
-    document.addEventListener('click', function(ev) {
-      if (!panel.classList.contains('hidden') && !btn.contains(ev.target) && !panel.contains(ev.target)) open(false);
-    });
-    if (typeof fetch !== 'function' || typeof AbortController === 'undefined') return;
-    var ctl = new AbortController();
-    var to = setTimeout(function() { ctl.abort(); }, 4000);
-    fetch('https://api.frankfurter.app/latest?from=USD', { signal: ctl.signal }).then(function(r) { return r.json(); }).then(function(j) {
-      clearTimeout(to);
-      if (!j || !j.rates) return;
-      var ok = Object.keys(CURS).every(function(k) { return k === 'USD' || typeof j.rates[k] === 'number'; });
-      if (!ok) return;
-      fx.rates = Object.assign({ USD: 1 }, j.rates); fx.live = true;
-      try { localStorage.setItem('tersio-fx', JSON.stringify({ rates: fx.rates, ts: Date.now() })); } catch (e) { }
-      if (DATA) render(DATA);
-    }).catch(function() { clearTimeout(to); });
-  })();
-  Array.prototype.forEach.call(document.querySelectorAll('[data-theme-val]'), function(b) {
-    b.addEventListener('click', function() { applyTheme(b.getAttribute('data-theme-val')); });
-  });
-  (function() {
-    var sysMedia = window.matchMedia('(prefers-color-scheme: dark)');
-    if (sysMedia && typeof sysMedia.addEventListener === 'function') sysMedia.addEventListener('change', function() {
-      if (currentTheme() === 'system') applyTheme('system');
-    });
-  })();
-
+  var T = window.Tersio;
+  var fmt = T.fmt, fmtShort = T.fmtShort, CURS = T.CURS, FLAGS = T.FLAGS, fx = T.fx,
+    fxMoney = T.fxMoney, esc = T.esc, countUp = T.countUp,
+    showTip = T.showTip, moveTip = T.moveTip, hideTip = T.hideTip,
+    reduce = T.reduce, hasGsap = T.hasGsap, hasST = T.hasST;
   var OPENAI_SVG = '<svg viewBox="0 0 24 24" fill="#000" aria-hidden="true"><path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"/></svg>';
   var PROVIDERS = [
     [/openai|codex|gpt-|o1/i, 'OpenAI', 'openai', '#fff', OPENAI_SVG],
@@ -258,7 +74,7 @@
     var b = byModel[m] || { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
     return b.input + b.output + b.cacheRead + b.cacheWrite;
   }
-  var DATA = null, cardsShown = false;
+  var cardsShown = false;
   function topModels(byModel, n) {
     return Object.keys(byModel).sort(function(a, b) { return modelTotal(byModel, b) - modelTotal(byModel, a); }).slice(0, n);
   }
@@ -283,36 +99,11 @@
   }
   function allDays() {
     var set = {};
-    Object.keys(DATA.byDay || {}).forEach(function(d) { set[d] = 1; });
-    Object.keys(DATA.byDayModel || {}).forEach(function(d) { set[d] = 1; });
+    Object.keys(T.getData().byDay || {}).forEach(function(d) { set[d] = 1; });
+    Object.keys(T.getData().byDayModel || {}).forEach(function(d) { set[d] = 1; });
     return Object.keys(set).sort();
   }
 
-  var tipEl = null;
-  function tip() {
-    if (!tipEl) {
-      tipEl = document.createElement('div');
-      tipEl.id = 'tip'; tipEl.className = 'mono'; tipEl.setAttribute('role', 'tooltip');
-      document.body.appendChild(tipEl);
-    }
-    return tipEl;
-  }
-  function showTip(html, x, y) {
-    var t = tip();
-    t.innerHTML = html;
-    if (window.lucide) lucide.createIcons();
-    t.classList.add('show');
-    moveTip(x, y);
-  }
-  function moveTip(x, y) {
-    if (!tipEl) return;
-    var w = 300, h = tipEl.offsetHeight || 220;
-    var lx = x + 16 > window.innerWidth - w ? x - w - 12 : x + 16;
-    var ly = y + 16 > window.innerHeight - h ? y - h - 12 : y + 16;
-    tipEl.style.left = Math.max(8, lx) + 'px';
-    tipEl.style.top = Math.max(8, ly) + 'px';
-  }
-  function hideTip() { if (tipEl) tipEl.classList.remove('show'); }
   function dateHead(key) {
     var dt = new Date(key + 'T12:00:00');
     return isNaN(dt) ? key : dt.toLocaleString('en-US', { month: 'short', day: 'numeric' }).toUpperCase();
@@ -327,12 +118,12 @@
     return h;
   }
   function tipModelHTML(m) {
-    var b = (DATA.byModel || {})[m] || { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
-    var req = ((DATA.byModelMessages || {})[m]) || 0;
+    var b = (T.getData().byModel || {})[m] || { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
+    var req = ((T.getData().byModelMessages || {})[m]) || 0;
     var denom = b.input + b.cacheRead;
     var hit = denom ? (b.cacheRead / denom * 100).toFixed(1) + '%' : '-';
     var total = b.input + b.output + b.cacheRead + b.cacheWrite;
-    var cb = ((DATA.byModelBucketUsd || {})[m]) || { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
+    var cb = ((T.getData().byModelBucketUsd || {})[m]) || { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
     var h = '<div class="tt">' + shortName(m) + '</div><div class="tv">' + fmtShort(total) + ' total (' + fxMoney(cb.input + cb.output + cb.cacheRead + cb.cacheWrite) + ')</div>';
     h += '<div class="tr"><span class="sw" style="background:var(--accent)"></span><span class="tn">input</span><span class="tvr">' + fmt(b.input) + ' (' + fxMoney(cb.input) + ')</span></div>';
     h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">output</span><span class="tvr">' + fmt(b.output) + ' (' + fxMoney(cb.output) + ')</span></div>';
@@ -405,17 +196,17 @@
     return ['meh', 'low', 'warn'];
   }
   function tipCo2HTML() {
-    var z = co2Zone(DATA.co2g || 0);
-    var h = '<div class="tt">CO2</div><div class="tv">~' + (DATA.co2g || 0).toFixed(1) + 'g est.</div>';
+    var z = co2Zone(T.getData().co2g || 0);
+    var h = '<div class="tt">CO2</div><div class="tv">~' + (T.getData().co2g || 0).toFixed(1) + 'g est.</div>';
     h += '<div class="tr"><span class="sw" style="background:var(--accent)"></span><span class="tn">zone</span><span class="tvr">' + zoneIcon(z[0], z[2]) + ' ' + z[1] + '</span></div>';
-    h += '<div class="tr"><span class="sw" style="background:var(--accent)"></span><span class="tn">energy</span><span class="tvr">~' + (DATA.energyWh || 0).toFixed(1) + ' Wh</span></div>';
+    h += '<div class="tr"><span class="sw" style="background:var(--accent)"></span><span class="tn">energy</span><span class="tvr">~' + (T.getData().energyWh || 0).toFixed(1) + ' Wh</span></div>';
     return h;
   }
   function tipSavedHTML() {
-    var usd = DATA.usd || 0, saved = DATA.savedUsd || 0;
+    var usd = T.getData().usd || 0, saved = T.getData().savedUsd || 0;
     var lev = usd ? saved / usd : 0;
     var z = levZone(lev);
-    var t = DATA.tokens || { cacheRead: 0 };
+    var t = T.getData().tokens || { cacheRead: 0 };
     var h = '<div class="tt">Saved by cache</div><div class="tv">' + fxMoney(saved) + ' est.</div>';
     h += '<div class="tr"><span class="sw" style="background:var(--accent)"></span><span class="tn">zone</span><span class="tvr">' + zoneIcon(z[0], z[2]) + ' ' + z[1] + '</span></div>';
     h += '<div class="tr"><span class="sw" style="background:var(--accent)"></span><span class="tn">leverage</span><span class="tvr">x' + lev.toFixed(1) + ' per $1</span></div>';
@@ -424,7 +215,7 @@
   }
   function tipShareHTML(share, pp) {
     var z = shareZone(share);
-    var t = DATA.tokens || { cacheRead: 0, cacheWrite: 0 };
+    var t = T.getData().tokens || { cacheRead: 0, cacheWrite: 0 };
     var h = '<div class="tt">Cache share</div><div class="tv">' + share + '%</div>';
     h += '<div class="tr"><span class="sw" style="background:var(--accent)"></span><span class="tn">zone</span><span class="tvr">' + zoneIcon(z[0], z[2]) + ' ' + z[1] + '</span></div>';
     h += '<div class="tr"><span class="sw" style="background:var(--accent)"></span><span class="tn">read</span><span class="tvr">' + fmtShort(t.cacheRead || 0) + '</span></div>';
@@ -450,7 +241,7 @@
   var mdModel = null, mdSpan = 'all', mdHover = { pts: [], days: [] };
   function mdSeries(m) {
     var days = allDays();
-    var per = DATA.byDayModel || {};
+    var per = T.getData().byDayModel || {};
     return days.map(function(d) { return { day: d, v: ((per[d] || {})[m] || 0) }; });
   }
   function mdSlice(series) {
@@ -473,18 +264,19 @@
     var step = pts.length > 1 ? (W - 16) / (pts.length - 1) : 0;
     function X(i) { return 8 + i * step; }
     function Y(p) { return 14 + (1 - p / max) * (H - 36); }
+    // shadcn CartesianGrid language: subtle dashed horizontals only.
     var grid = '';
-    for (i = 1; i <= 3; i++) { y = 14 + (H - 36) * i / 3; grid += '<line class="grid" x1="8" y1="' + y.toFixed(1) + '" x2="' + (W - 8) + '" y2="' + y.toFixed(1) + '"/>'; }
+    for (i = 1; i <= 3; i++) { y = 14 + (H - 36) * i / 3; grid += '<line class="grid" x1="8" y1="' + y.toFixed(1) + '" x2="' + (W - 8) + '" y2="' + y.toFixed(1) + '" stroke-dasharray="3 4"/>'; }
     var d = pts.map(function(p, i) { return (i ? 'L' : 'M') + X(i).toFixed(1) + ' ' + Y(p).toFixed(1); }).join(' ');
     var last = pts.length ? { x: X(pts.length - 1), y: Y(pts[pts.length - 1]) } : { x: 8, y: H - 22 };
     svg.innerHTML = '<defs><linearGradient id="mdGrad" x1="0" y1="0" x2="0" y2="1">' +
-      '<stop offset="0" style="stop-color:var(--accent)" stop-opacity="0.35"/>' +
-      '<stop offset="1" style="stop-color:var(--accent)" stop-opacity="0"/></linearGradient></defs>' +
+      '<stop offset="0" style="stop-color:var(--accent)" stop-opacity="0.32"/>' +
+      '<stop offset="1" style="stop-color:var(--accent)" stop-opacity="0.02"/></linearGradient></defs>' +
       grid +
       (pts.length ? '<path class="area" d="' + d + ' L' + last.x.toFixed(1) + ' ' + (H - 22) + ' L8 ' + (H - 22) + ' Z"/>' : '') +
-      (pts.length ? '<path class="line" d="' + d + '"/>' : '') +
-      (pts.length ? '<circle class="dot" cx="' + last.x.toFixed(1) + '" cy="' + last.y.toFixed(1) + '" r="4"/>' : '') +
-      (pts.length ? '<circle class="hoverdot" id="mdHoverDot" cx="-10" cy="-10" r="4" style="display:none"/>' : '');
+      (pts.length ? '<path class="line" d="' + d + '" stroke-width="2.5"/>' : '') +
+      (pts.length ? '<circle class="dot" cx="' + last.x.toFixed(1) + '" cy="' + last.y.toFixed(1) + '" r="5"/>' : '') +
+      (pts.length ? '<circle class="hoverdot" id="mdHoverDot" cx="-10" cy="-10" r="5" style="display:none"/>' : '');
     mdHover = { pts: pts, days: days };
     svg.onmousemove = function(ev) {
       var tip = document.getElementById('mdTip');
@@ -494,7 +286,7 @@
       var idx = Math.max(0, Math.min(mdHover.pts.length - 1, Math.round((fx - 8) / (step || 1))));
       var dot = document.getElementById('mdHoverDot');
       if (dot) { dot.setAttribute('cx', X(idx).toFixed(1)); dot.setAttribute('cy', Y(mdHover.pts[idx]).toFixed(1)); dot.style.display = ''; }
-      tip.textContent = mdShortDay(mdHover.days[idx]) + ' · ' + fmtShort(mdHover.pts[idx]);
+      tip.innerHTML = '<div class="tt">' + mdShortDay(mdHover.days[idx]) + '</div><div class="tv">' + fmtShort(mdHover.pts[idx]) + ' tokens</div>';
       tip.style.display = 'block';
       // Raw % positioning overflows past the dialog edge on the first/last
       // points (the dialog clips it). Measure and pin inside the card.
@@ -529,6 +321,13 @@
       else if (avg === max) s.className = 'top';
       s.style.height = Math.max(avg ? 5 : 2, Math.round(avg / max * 100)) + '%';
       s.title = mdShortDay(days[i]) + ' · ' + fmtShort(Math.round(sum));
+      (function(day, tokens) {
+        s.addEventListener('mouseenter', function(ev) {
+          showTip('<div class="tt">' + day + '</div><div class="tv">' + tokens + ' tokens</div>', ev.clientX, ev.clientY);
+        });
+        s.addEventListener('mousemove', function(ev) { moveTip(ev.clientX, ev.clientY); });
+        s.addEventListener('mouseleave', hideTip);
+      })(mdShortDay(days[i]), fmtShort(Math.round(sum)));
       el.appendChild(s);
     }
     // Sparse models leave the bars mostly flat: name the peak day, its share
@@ -542,18 +341,31 @@
   function mdDonut(svg, parts) {
     var r = 54, C = 2 * Math.PI * r, off = 0;
     var total = parts.reduce(function(a, p) { return a + p.v; }, 0) || 1;
+    var live = parts.filter(function(p) { return p.v > 0; });
+    // shadcn pie paddingAngle: breathing room between segments.
+    var gap = live.length > 1 ? 4 : 0;
     var html = '<circle class="tk" cx="70" cy="70" r="' + r + '"/>';
     parts.forEach(function(p) {
       var len = p.v / total * C;
       if (len <= 0) return;
-      html += '<circle cx="70" cy="70" r="' + r + '" style="stroke:' + p.color + '" stroke-dasharray="' + len.toFixed(1) + ' ' + (C - len).toFixed(1) + '" stroke-dashoffset="' + (-off).toFixed(1) + '" stroke-linecap="butt"/>';
+      html += '<circle cx="70" cy="70" r="' + r + '" style="stroke:' + p.color + '" stroke-dasharray="' + Math.max(len - gap, 0.5).toFixed(1) + ' ' + (C - len + gap).toFixed(1) + '" stroke-dashoffset="' + (-off - gap / 2).toFixed(1) + '" stroke-linecap="butt"/>';
       off += len;
     });
     svg.innerHTML = html;
     document.getElementById('mdMixTotal').textContent = fmtShort(total);
-    document.getElementById('mdMixLegend').innerHTML = parts.filter(function(p) { return p.v > 0; }).map(function(p) {
-      return '<div class="row"><span class="dot" style="background:' + p.color + '"></span><span>' + p.label + '</span><span class="pct">' + (p.v / total * 100).toFixed(1) + '% · ' + fmtShort(p.v) + '</span></div>';
+    var legend = document.getElementById('mdMixLegend');
+    legend.innerHTML = live.map(function(p) {
+      return '<div class="row" data-mix="' + p.label + '"><span class="dot" style="background:' + p.color + '"></span><span>' + p.label + '</span><span class="pct">' + (p.v / total * 100).toFixed(1) + '% · ' + fmtShort(p.v) + '</span></div>';
     }).join('');
+    Array.prototype.forEach.call(legend.children, function(rowEl) {
+      var part = live.filter(function(p) { return p.label === rowEl.getAttribute('data-mix'); })[0];
+      if (!part) return;
+      rowEl.addEventListener('mouseenter', function(ev) {
+        showTip('<div class="tt">' + part.label + '</div><div class="tv">' + fmtShort(part.v) + ' (' + (part.v / total * 100).toFixed(1) + '%)</div>', ev.clientX, ev.clientY);
+      });
+      rowEl.addEventListener('mousemove', function(ev) { moveTip(ev.clientX, ev.clientY); });
+      rowEl.addEventListener('mouseleave', hideTip);
+    });
   }
   function mdMonths(el, days) {
     el.innerHTML = '';
@@ -585,7 +397,7 @@
     return { t: (pct >= 0 ? '+' : '') + pct.toFixed(0) + '% vs prior 2 wks', up: pct >= 0 };
   }
   function renderModelDialog(m) {
-    var byModel = DATA.byModel || {};
+    var byModel = T.getData().byModel || {};
     var tops = topModels(byModel, Object.keys(byModel).length);
     var rank = tops.indexOf(m) + 1;
     var b = byModel[m] || { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
@@ -593,8 +405,8 @@
     var grand = 1;
     tops.forEach(function(k) { grand += modelTotal(byModel, k); });
     var v = vendorOf(m);
-    var req = ((DATA.byModelMessages || {})[m]) || 0;
-    var usd = ((DATA.byModelUsd || {})[m]) || 0;
+    var req = ((T.getData().byModelMessages || {})[m]) || 0;
+    var usd = ((T.getData().byModelUsd || {})[m]) || 0;
     var denom = b.input + b.cacheRead;
     var hit = denom ? (b.cacheRead / denom * 100) : 0;
     var series = mdSlice(mdSeries(m));
@@ -659,8 +471,8 @@
     if (!dlg.open) dlg.showModal();
   }
   function dayModelRows(key) {
-    var per = (DATA.byDayModel || {})[key] || {};
-    var tops = topModels(DATA.byModel || {}, 8), rows = [], other = 0;
+    var per = (T.getData().byDayModel || {})[key] || {};
+    var tops = topModels(T.getData().byModel || {}, 8), rows = [], other = 0;
     tops.forEach(function(m, i) {
       var v = per[m] || 0;
       if (v) rows.push([m, v, PALETTE[i % PALETTE.length]]);
@@ -682,7 +494,7 @@
     sun.setDate(mon.getDate() + 6);
     var head = isNaN(mon) ? monKey : mon.toLocaleString('en-US', { month: 'short', day: 'numeric' }).toUpperCase() +
       ' - ' + (isNaN(sun) ? '' : sun.toLocaleString('en-US', { month: 'short', day: 'numeric' }).toUpperCase());
-    var tops = topModels(DATA.byModel || {}, 8), rows = [], other = 0;
+    var tops = topModels(T.getData().byModel || {}, 8), rows = [], other = 0;
     tops.forEach(function(m, i) {
       var v = weekPer[m] || 0;
       if (v) rows.push([m, v, PALETTE[i % PALETTE.length]]);
@@ -729,7 +541,7 @@
       if (GMODE === 'weekly' && !isNaN(dt)) {
         var mk = dayKey(mondayOf(dt));
         weekTotal[mk] = (weekTotal[mk] || 0) + (sums[k] || 0);
-        var per = (DATA.byDayModel || {})[k] || {};
+        var per = (T.getData().byDayModel || {})[k] || {};
         if (!weekPer[mk]) weekPer[mk] = {};
         Object.keys(per).forEach(function(m) { weekPer[mk][m] = (weekPer[mk][m] || 0) + per[m]; });
       }
@@ -812,7 +624,7 @@
         Array.prototype.forEach.call(document.querySelectorAll('#activity [data-gmode]'), function(b) { b.classList.remove('on'); });
         btn.classList.add('on');
         GMODE = btn.getAttribute('data-gmode');
-        if (DATA) renderGraph(DATA.byDay || {});
+        if (T.getData()) renderGraph(T.getData().byDay || {});
       });
     });
   }
@@ -847,7 +659,7 @@
     });
   }
   function renderModels() {
-    var byModel = DATA.byModel || {};
+    var byModel = T.getData().byModel || {};
     var tops = topModels(byModel, Object.keys(byModel).length).filter(function(m) { return modelTotal(byModel, m) > 0; });
     var cards = document.getElementById('modelCards');
     cards.innerHTML = '';
@@ -920,7 +732,7 @@
       var right = document.createElement('div'); right.className = 'shrink-0 text-right';
       var n = document.createElement('p'); n.className = 'mono font-bold'; n.textContent = fmt(modelTotal(byModel, m));
       var cost = document.createElement('p'); cost.className = 'mono text-xs'; cost.style.color = 'var(--dim)';
-      cost.textContent = fxMoney((DATA.byModelUsd || {})[m] || 0);
+      cost.textContent = fxMoney((T.getData().byModelUsd || {})[m] || 0);
       right.appendChild(n); right.appendChild(cost);
       li.appendChild(badge); li.appendChild(mid); li.appendChild(right);
       hoverModel(li, m);
@@ -978,7 +790,7 @@
     });
   }
   function renderCmd() {
-    var g = (DATA.rtkGain || {});
+    var g = (T.getData().rtkGain || {});
     var byName = {};
     function add(name, count, saved, avgPct, avgMs) {
       var r = byName[name];
@@ -986,7 +798,7 @@
       r.count += count;
       if (saved !== null && saved !== undefined) r.saved = (r.saved || 0) + saved;
     }
-    (DATA.byTool || []).forEach(function(r) { add(r[0], r[1], null, null, null); });
+    (T.getData().byTool || []).forEach(function(r) { add(r[0], r[1], null, null, null); });
     (g.byCommand || []).forEach(function(r) { add(r.command, r.count, r.saved, r.avgPct, r.avgMs); });
     cmdRows = Object.keys(byName).map(function(k) { return byName[k]; });
     sortCmd();
@@ -1198,12 +1010,11 @@
 
   function dayTotal(b) { return (b.input || 0) + (b.output || 0) + (b.cacheRead || 0) + (b.cacheWrite || 0); }
 
-  function render(d) {
-    DATA = d;
+  function renderMain(d) {
     // Server-provided default currency (tersio gain --currency); a saved
     // picker choice in localStorage always wins.
-    if (!render.fxInit) {
-      render.fxInit = true;
+    if (!renderMain.fxInit) {
+      renderMain.fxInit = true;
       var saved = null;
       try { saved = localStorage.getItem('tersio-fx-cur'); } catch (e) { }
       if (!saved && d.currency && CURS[d.currency]) {
@@ -1296,9 +1107,9 @@
     (function() {
       var el = document.getElementById('ticker');
       if (!el) return;
-      var tops = topModels(DATA.byModel || {}, 5);
+      var tops = topModels(T.getData().byModel || {}, 5);
       var parts = tops.map(function(m) {
-        var b = (DATA.byModel || {})[m];
+        var b = (T.getData().byModel || {})[m];
         var v = b.input + b.output + b.cacheRead + b.cacheWrite;
         var nm = m.toUpperCase().replace(/-(FREE|CONTRIBUTOR.*|NEXT|LATEST)$/, '').replace(/[-.]?\d[\d.]*/, '').replace(/-V(?=-|$)/, '');
         return nm + ' ' + fmtShort(v);
@@ -1317,11 +1128,11 @@
     renderCmd();
 
     if (window.lucide) lucide.createIcons();
-    if (hasGsap && !render.introDone) {
-      render.introDone = true;
+    if (hasGsap && !renderMain.introDone) {
+      renderMain.introDone = true;
       gsap.from('.hero-in', { y: 26, opacity: 0, duration: 0.8, ease: 'power3.out', stagger: 0.08 });
     }
-    observe();
+    T.observe();
   }
   // shadcn/ui badge: default/secondary/destructive/outline carry the meaning,
   // the label carries the detail. Built as DOM nodes so provider error notes
@@ -1347,7 +1158,7 @@
   function renderRecent() {
     var body = document.getElementById('recent');
     body.innerHTML = '';
-    var all = DATA.recent || [];
+    var all = T.getData().recent || [];
     recentRows = all.slice();
     sortRecent();
     var recentPages = Math.max(1, Math.ceil(recentRows.length / recentPer));
@@ -1390,106 +1201,8 @@
     document.getElementById('recentTable').style.display = all.length ? '' : 'none';
     document.getElementById('emptyRecent').classList.toggle('hidden', all.length > 0);
   }
-
-  var seen = new WeakSet();
-  function observe() {
-    var els = document.querySelectorAll('.rise');
-    if (!('IntersectionObserver' in window) || reduce) {
-      els.forEach(function(el) { el.classList.add('in'); });
-      return;
-    }
-    var io = new IntersectionObserver(function(entries) {
-      entries.forEach(function(e) {
-        if (e.isIntersecting && !seen.has(e.target)) {
-          seen.add(e.target); e.target.classList.add('in'); io.unobserve(e.target);
-        }
-      });
-    }, { threshold: 0.12 });
-    els.forEach(function(el) { if (!seen.has(el)) io.observe(el); });
-  }
-
-  var lastJson = '';
-  function load() {
-    // Served mode only: file:// exports have no data.json endpoint, so
-    // polling there would just burn cycles on 404s.
-    if (window.location.protocol === 'file:') return;
-    // Skip background tabs: no render work while hidden, instant refresh on return.
-    if (document.hidden) return;
-    fetch('data.json').then(function(r) { return r.json(); }).then(function(d) {
-      var json = JSON.stringify(d);
-      if (json === lastJson) return;
-      lastJson = json;
-      render(d);
-    }).catch(function() {
-      var cards = document.getElementById('modelCards');
-      if (cards && !cards.children.length) cards.innerHTML = '<div class="empty md:col-span-3">' + emptyState('cloud-off', 'Could not load data', 'Serve with tersio gain instead of opening this file directly.') + '</div>';
-      if (window.lucide) lucide.createIcons();
-      observe();
-    });
-  }
-  // Live view: re-read data.json every 5s while served and visible; identical
-  // payloads skip render. The manual Reload button stays as an instant refresh.
-  setInterval(load, 5000);
-  document.addEventListener('visibilitychange', function() { if (!document.hidden) load(); });
-  function toast(title, desc, icon) {
-    var wrap = document.querySelector('.toaster');
-    if (!wrap) {
-      wrap = document.createElement('div');
-      wrap.className = 'toaster';
-      wrap.popover = 'manual';
-      document.body.appendChild(wrap);
-      if (wrap.showPopover) wrap.showPopover(); // top layer: paints above the native settings dialog
-    }
-    var el = document.createElement('div');
-    el.className = 'toast';
-    el.innerHTML = '<span class="toast-icon"><i data-lucide="' + (icon || 'check') + '" class="size-4"></i></span><div><p class="toast-title"></p><p class="toast-desc"></p></div>';
-    el.querySelector('.toast-title').textContent = title;
-    el.querySelector('.toast-desc').textContent = desc;
-    wrap.appendChild(el);
-    if (window.lucide) lucide.createIcons();
-    setTimeout(function() {
-      el.classList.add('out');
-      setTimeout(function() { el.remove(); }, 200);
-    }, 4000);
-  }
-  document.getElementById('reload').addEventListener('click', load);
-  (function() {
-    var dlg = document.getElementById('settings');
-    if (dlg && typeof dlg.showModal === 'function') {
-      document.getElementById('settingsBtn').addEventListener('click', function() { dlg.showModal(); });
-      document.getElementById('settingsClose').addEventListener('click', function() { dlg.close(); });
-      dlg.addEventListener('click', function(ev) { if (ev.target === dlg) dlg.close(); });
-    }
-    var md = document.getElementById('modelDialog');
-    if (md && typeof md.showModal === 'function') {
-      document.getElementById('mdClose').addEventListener('click', function() { md.close(); });
-      md.addEventListener('click', function(ev) { if (ev.target === md) md.close(); });
-    }
-  })();
-  (function() {
-    var resetBtn = document.getElementById('reset');
-    if (!resetBtn) return;
-    if (window.location.protocol === 'file:') { resetBtn.style.display = 'none'; return; }
-    var label = document.getElementById('resetLabel');
-    resetBtn.addEventListener('click', function() {
-      if (resetBtn.dataset.armed) {
-        delete resetBtn.dataset.armed;
-        label.textContent = 'Clearing…';
-        fetch('reset', { method: 'POST' }).then(function(r) { return r.json(); }).then(function() {
-          label.textContent = 'Reset';
-          load();
-          toast('Statistics reset', 'The usage statistics view now starts fresh. Transcripts and RTK history were never touched.', 'rotate-ccw');
-        }).catch(function() {
-          label.textContent = 'Reset';
-          toast('Reset failed', 'Could not reach the server. Try again.', 'circle-alert');
-        });
-      } else {
-        resetBtn.dataset.armed = '1';
-        label.textContent = 'Sure?';
-        setTimeout(function() { delete resetBtn.dataset.armed; if (label.textContent === 'Sure?') label.textContent = 'Reset'; }, 3000);
-      }
-    });
-  })();
-  load();
-  observe();
+  T.renderMain = renderMain;
+  T.openModelDialog = openModelDialog;
+  T.dayTotal = dayTotal;
+  T.emptyState = emptyState;
 })();