@krtclcdy/tersio 2.17.0 → 2.19.0

package/dashboard/app.js

@@ -27,9 +27,25 @@
     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;
-    return c.s + (v * r).toLocaleString('en-US', { minimumFractionDigits: c.d, maximumFractionDigits: c.d });
+    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) {
@@ -100,6 +116,14 @@
     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);
     }
@@ -177,7 +201,7 @@
     [/nemotron|nvidia/i, 'NVIDIA', 'nvidia', '#76b900'],
     [/mistral/i, 'Mistral', 'mistralai', '#ff7000'],
     [/claude|anthropic/i, 'Anthropic', 'anthropic', '#d97757'],
-    [/gemini|google/i, 'Google', 'googlegemini', '#8E75B2'],
+    [/gemini|google|gemma/i, 'Google', 'google', '#4285F4'],
   ];
   function vendorOf(model) {
     for (var i = 0; i < PROVIDERS.length; i++) {
@@ -205,12 +229,12 @@
   function dayKey(d) {
     return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
   }
-  function relTime(ts) {
-    var s = Math.max(0, Math.floor((Date.now() - ts) / 1000));
-    if (s < 60) return 'just now';
-    if (s < 3600) return Math.floor(s / 60) + 'm ago';
-    if (s < 86400) return Math.floor(s / 3600) + 'h ago';
-    return Math.floor(s / 86400) + 'd ago';
+  // Absolute local stamp for the When column: "Sep 18, 11:14:08 PM". The
+  // column is sortable, and a relative label made that ordering unreadable.
+  function whenStamp(ts) {
+    var d = new Date(ts);
+    return d.toLocaleString('en-US', { month: 'short', day: 'numeric' }) + ', ' +
+      d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', second: '2-digit' });
   }
   // Per-request generation time + output throughput from the message-level
   // `duration` (ms). Missing → '–'. Throughput uses output tokens since
@@ -234,13 +258,29 @@
     var b = byModel[m] || { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
     return b.input + b.output + b.cacheRead + b.cacheWrite;
   }
-
-  var DATA = null, RANGE = 'daily', cardsShown = false;
-
+  var DATA = null, cardsShown = false;
   function topModels(byModel, n) {
     return Object.keys(byModel).sort(function(a, b) { return modelTotal(byModel, b) - modelTotal(byModel, a); }).slice(0, n);
   }
-
+  // Display form for folded keys: namespace stays lowercase, model segments
+  // title-case with version dots kept (`deepseek-v4.1-flash` →
+  // `Deepseek-V4.1-Flash`). Keys arrive folded, so this prettifies only.
+  function displayModel(m) {
+    var bare = String(m).replace(/(?::free|-free)$/i, '');
+    function cap(s) {
+      var low = s.toLowerCase();
+      if (low === 'openai') return 'OpenAI';
+      if (low === 'ai') return 'AI';
+      if (/^\d+[a-z]+$/.test(low)) return low.toUpperCase();
+      if (s.length <= 2) return s.toUpperCase();
+      return s[0].toUpperCase() + s.slice(1).toLowerCase();
+    }
+    function seg(s) { return s.split('.').map(cap).join('.'); }
+    function words(s) { return s.split(/[-_:]+/).filter(Boolean).map(seg).join('-'); }
+    var slash = bare.indexOf('/');
+    if (slash >= 0) return bare.slice(0, slash).toLowerCase() + '/' + words(bare.slice(slash + 1));
+    return words(bare);
+  }
   function allDays() {
     var set = {};
     Object.keys(DATA.byDay || {}).forEach(function(d) { set[d] = 1; });
@@ -277,7 +317,7 @@
     var dt = new Date(key + 'T12:00:00');
     return isNaN(dt) ? key : dt.toLocaleString('en-US', { month: 'short', day: 'numeric' }).toUpperCase();
   }
-  function shortName(m) { return m.length > 22 ? m.slice(0, 21) + '...' : m; }
+  function shortName(m) { var d = displayModel(m); return d.length > 22 ? d.slice(0, 21) + '...' : d; }
   function tipDayHTML(key, total, rows) {
     var h = '<div class="tt">' + dateHead(key) + '</div><div class="tv">' + fmtShort(total) + ' total</div>';
     rows.forEach(function(r) {
@@ -307,15 +347,39 @@
     function p(n) { return String(n).padStart(2, '0'); }
     return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()) + ' ' + p(d.getHours()) + ':' + p(d.getMinutes()) + ':' + p(d.getSeconds());
   }
+  // Per-request outcome. OMP records stopReason on every assistant turn and,
+  // on failure, the HTTP errorStatus + errorMessage; toolUse turns are
+  // ordinary completed turns, so only error and aborted stand apart.
+  var STATUS_RANK = { error: 0, aborted: 1, completed: 2 };
+  function statusRank(r) { var k = STATUS_RANK[r.st]; return k === undefined ? 2 : k; }
+  function statusLabel(r) {
+    if (r.st === 'error') return 'error' + (r.code ? ' ' + r.code : '');
+    return r.st === 'aborted' ? 'aborted' : 'completed';
+  }
+  function statusColor(r) { return r.st === 'error' ? '#f87171' : r.st === 'aborted' ? '#fbbf24' : 'var(--accent)'; }
+  // Cost precedence. A recorded charge > 0 is authoritative and shown bare.
+  // A recording of exactly 0 usually means a free/local provider (every row on
+  // a local model reports 0) and would blank the column, so those fall back to
+  // the modeled figure carrying the dashboard's usual "~" estimate marker.
+  // costRecorded() still reports the raw 0 so the tooltip can show both.
+  function costRecorded(r) { return typeof r.usd === 'number'; }
+  function costIsMeasured(r) { return costRecorded(r) && r.usd > 0; }
+  function displayCost(r) { return costIsMeasured(r) ? r.usd : (r.est || 0); }
+
   function tipRecentHTML(r) {
     var tps = r.d !== undefined && r.d > 0 ? r.o / (r.d / 1000) : 0;
-    var h = '<div class="tt">' + shortName(r.m) + '</div><div class="tv">' + stampLocal(r.t) + '</div>';
+    var isEst = !costIsMeasured(r);
+    var h = '<div class="tt">' + esc(shortName(r.m)) + '</div><div class="tv">' + stampLocal(r.t) + '</div>';
     h += '<div class="tr"><span class="sw" style="background:#fb923c"></span><span class="tn">input</span><span class="tvr">' + fmt(r.i) + '</span></div>';
     h += '<div class="tr"><span class="sw" style="background:var(--accent)"></span><span class="tn">output</span><span class="tvr">' + fmt(r.o) + '</span></div>';
-    if ((r.cr || 0) > 0) h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">cache</span><span class="tvr">' + fmtShort(r.cr) + '</span></div>';
-    if ((r.cw || 0) > 0) h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">cache write</span><span class="tvr">' + fmtShort(r.cw) + '</span></div>';
+    if ((r.cr || 0) > 0) h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">cache read</span><span class="tvr">' + fmt(r.cr) + '</span></div>';
+    if ((r.cw || 0) > 0) h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">cache write</span><span class="tvr">' + fmt(r.cw) + '</span></div>';
     h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">elapsed</span><span class="tvr">' + fmtDur(r.d) + '</span></div>';
     h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">speed</span><span class="tvr">' + (r.d !== undefined ? (tps < 10 ? tps.toFixed(1) : Math.round(tps)) + ' tok/s' : '–') + '</span></div>';
+    h += '<div class="tr"><span class="sw" style="background:' + statusColor(r) + '"></span><span class="tn">status</span><span class="tvr">' + statusLabel(r) + '</span></div>';
+    h += '<div class="tr"><span class="sw" style="background:var(--accent)"></span><span class="tn">cost ' + (isEst ? '(est.)' : '(measured)') + '</span><span class="tvr">' + (isEst ? '~' : '') + fxMoney(displayCost(r)) + '</span></div>';
+    if (costRecorded(r)) h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">charged</span><span class="tvr">' + fxMoney(r.usd) + '</span></div>';
+    if (r.note) h += '<div class="tnote">' + esc(r.note) + '</div>';
     return h;
   }
   // Zone indicators: Lucide face per savings-bento metric. Coarse by design;
@@ -378,6 +442,222 @@
     el.addEventListener('mousemove', function(ev) { moveTip(ev.clientX, ev.clientY); });
     el.addEventListener('mouseleave', hideTip);
   }
+  // Model detail dialog: shadcn chart language over daily model volume.
+  // byDayModel is keyed by DAY (Record<day, Record<model, tokens>>); the old
+  // mdSeries read it keyed by model and rendered all-zero charts. Area chart
+  // with gradient + hover crosshair, downsampled rounded bars, token-mix
+  // donut, KPI strip, 30/90/ALL range tabs.
+  var mdModel = null, mdSpan = 'all', mdHover = { pts: [], days: [] };
+  function mdSeries(m) {
+    var days = allDays();
+    var per = DATA.byDayModel || {};
+    return days.map(function(d) { return { day: d, v: ((per[d] || {})[m] || 0) }; });
+  }
+  function mdSlice(series) {
+    if (mdSpan === 'all' || series.length <= mdSpan) return series;
+    return series.slice(series.length - mdSpan);
+  }
+  function mdMonthTicks(days) {
+    if (!days.length) return [];
+    var seen = {}, out = [];
+    days.forEach(function(d) {
+      var t = d.slice(0, 7);
+      if (!seen[t]) { seen[t] = 1; out.push({ day: d, label: new Date(d + 'T12:00:00').toLocaleString('en-US', { month: 'short' }) }); }
+    });
+    return out.slice(-6);
+  }
+  function mdShortDay(d) { return new Date(d + 'T12:00:00').toLocaleString('en-US', { month: 'short', day: 'numeric' }); }
+  function mdAreaChart(svg, pts, days) {
+    var W = 560, H = 190, max = 1, i, x, y;
+    pts.forEach(function(p) { max = Math.max(max, p); });
+    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); }
+    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) + '"/>'; }
+    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>' +
+      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"/>' : '');
+    mdHover = { pts: pts, days: days };
+    svg.onmousemove = function(ev) {
+      var tip = document.getElementById('mdTip');
+      if (!tip || !mdHover.pts.length) return;
+      var r = svg.getBoundingClientRect();
+      var fx = (ev.clientX - r.left) / r.width * W;
+      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.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.
+      var chart = svg.closest ? svg.closest('.md-chart') : null;
+      var px = svg.offsetLeft + (X(idx) / W) * svg.clientWidth;
+      if (chart) {
+        var half = tip.offsetWidth / 2;
+        px = Math.max(half + 4, Math.min(chart.clientWidth - half - 4, px));
+      }
+      tip.style.left = px + 'px';
+      tip.style.top = '8px';
+    };
+    svg.onmouseleave = function() {
+      var tip = document.getElementById('mdTip');
+      if (tip) tip.style.display = 'none';
+      var dot = document.getElementById('mdHoverDot');
+      if (dot) dot.style.display = 'none';
+    };
+  }
+  function mdBars(el, vals, days) {
+    el.innerHTML = '';
+    var max = 1, i, total = 0, active = 0, peak = 0, peakI = 0;
+    vals.forEach(function(v, k) { max = Math.max(max, v); total += v; if (v > 0) { active++; if (v > peak) { peak = v; peakI = k; } } });
+    var n = vals.length, bucket = 1;
+    if (n > 90) bucket = Math.ceil(n / 90);
+    for (i = 0; i < n; i += bucket) {
+      var sum = 0, c = 0;
+      for (var j = i; j < Math.min(n, i + bucket); j++) { sum += vals[j]; c++; }
+      var avg = sum / c;
+      var s = document.createElement('span');
+      if (!avg) s.className = 'zero';
+      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));
+      el.appendChild(s);
+    }
+    // Sparse models leave the bars mostly flat: name the peak day, its share
+    // of the period, and the per-active-day average instead of empty space.
+    var note = document.getElementById('mdBarsNote');
+    if (note) {
+      if (!active) note.textContent = 'no activity in range';
+      else note.textContent = 'Peak ' + mdShortDay(days[peakI]) + ' · ' + fmtShort(peak) + ' (' + (total ? Math.round(peak / total * 100) : 0) + '% of period) · avg ' + fmtShort(Math.round(total / active)) + ' / active day';
+    }
+  }
+  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 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"/>';
+      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>';
+    }).join('');
+  }
+  function mdMonths(el, days) {
+    el.innerHTML = '';
+    mdMonthTicks(days).forEach(function(t) {
+      var s = document.createElement('span');
+      s.textContent = t.label;
+      el.appendChild(s);
+    });
+  }
+  function mdKpi(k, v, d, up) {
+    return '<div class="md-kpi"><p class="k mono">' + k + '</p><p class="v">' + v + '</p><p class="d mono ' + (up ? 'up' : 'flat') + '">' + d + '</p></div>';
+  }
+  function mdStat(k, v, s) {
+    return '<div class="md-stat"><p class="k mono">' + k + '</p><p class="v mono">' + v + '</p>' + (s ? '<p class="s mono">' + s + '</p>' : '') + '</div>';
+  }
+  function mdRange(days) {
+    if (!days.length) return '–';
+    return mdShortDay(days[0]).toUpperCase() + ' → ' + mdShortDay(days[days.length - 1]).toUpperCase();
+  }
+  function mdTrendText(vals) {
+    var max = 0, i;
+    vals.forEach(function(x) { max = Math.max(max, x); });
+    if (vals.length < 14) return max ? { t: 'peak ' + fmtShort(max) + ' in a day', up: true } : { t: 'no activity yet', up: false };
+    var a = 0, b = 0;
+    for (i = vals.length - 14; i < vals.length; i++) a += vals[i];
+    for (i = Math.max(0, vals.length - 28); i < vals.length - 14; i++) b += vals[i];
+    if (!b) return { t: fmtShort(a) + ' / 2 wks', up: a > 0 };
+    var pct = (a - b) / b * 100;
+    return { t: (pct >= 0 ? '+' : '') + pct.toFixed(0) + '% vs prior 2 wks', up: pct >= 0 };
+  }
+  function renderModelDialog(m) {
+    var byModel = DATA.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 };
+    var total = modelTotal(byModel, m);
+    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 denom = b.input + b.cacheRead;
+    var hit = denom ? (b.cacheRead / denom * 100) : 0;
+    var series = mdSlice(mdSeries(m));
+    var days = series.map(function(p) { return p.day; });
+    var vals = series.map(function(p) { return p.v; });
+    var active = vals.filter(function(x) { return x > 0; }).length;
+    var tr = mdTrendText(mdSeries(m).map(function(p) { return p.v; }));
+    document.getElementById('mdBadge').innerHTML = brandHTML(v, false);
+    var title = document.getElementById('mdTitle');
+    title.textContent = displayModel(m);
+    title.title = m;
+    document.getElementById('mdSub').textContent = v.name + ' · ' + fmt(req) + ' requests · ' + (total / grand * 100).toFixed(1) + '% of volume';
+    document.getElementById('mdRank').textContent = rank ? '#' + String(rank).padStart(2, '0') : '#–';
+    var trend = document.getElementById('mdTrend');
+    trend.textContent = tr.t;
+    trend.className = 'md-trend mono' + (tr.up ? ' up' : '');
+    document.getElementById('mdKpis').innerHTML =
+      mdKpi('Tokens', fmtShort(total), mdRange(days), true) +
+      mdKpi('Spend', fxMoney(usd), req ? fxMoney(usd / req) + ' / req' : 'no requests', usd > 0) +
+      mdKpi('Cache hit', hit.toFixed(0) + '%', fmtShort(b.cacheRead) + ' cached', hit >= 50) +
+      mdKpi('Requests', fmt(req), active + ' active days', active > 0);
+    document.getElementById('mdMomRange').textContent = mdRange(days);
+    mdAreaChart(document.getElementById('mdSpark'), vals, days);
+    mdMonths(document.getElementById('mdMonths'), days);
+    var act = document.getElementById('mdActive');
+    act.textContent = active + ' / ' + days.length + ' days';
+    act.className = 'md-trend mono' + (active ? ' up' : '');
+    mdBars(document.getElementById('mdBars'), vals, days);
+    mdMonths(document.getElementById('mdBarsMonths'), days);
+    mdDonut(document.getElementById('mdMix'), [
+      { label: 'Input', v: b.input, color: 'var(--accent)' },
+      { label: 'Output', v: b.output, color: '#818cf8' },
+      { label: 'Cache read', v: b.cacheRead, color: '#22d3ee' },
+      { label: 'Cache write', v: b.cacheWrite, color: 'var(--dim)' },
+    ]);
+    document.getElementById('mdStats').innerHTML =
+      mdStat('Input', fmtShort(b.input), null) +
+      mdStat('Output', fmtShort(b.output), null) +
+      mdStat('Cache read', fmtShort(b.cacheRead), hit.toFixed(0) + '% hit') +
+      mdStat('Cache write', fmtShort(b.cacheWrite), null);
+    if (window.lucide) lucide.createIcons();
+    if (hasGsap && !reduce) {
+      gsap.fromTo('#modelDialog .md-kpi', { y: 12, opacity: 0.2 }, { y: 0, opacity: 1, duration: 0.4, ease: 'power2.out', stagger: 0.05, overwrite: true });
+      gsap.fromTo('#modelDialog .md-chart', { y: 14, opacity: 0.2 }, { y: 0, opacity: 1, duration: 0.45, ease: 'power2.out', stagger: 0.07, overwrite: true });
+      gsap.fromTo('#modelDialog .md-stat', { scale: 0.94, opacity: 0.2 }, { scale: 1, opacity: 1, duration: 0.4, ease: 'power2.out', stagger: 0.04, overwrite: true });
+    }
+  }
+  function openModelDialog(m) {
+    var dlg = document.getElementById('modelDialog');
+    if (!dlg || typeof dlg.showModal !== 'function') return;
+    mdModel = m;
+    Array.prototype.forEach.call(document.querySelectorAll('#modelDialog [data-mdspan]'), function(btn) {
+      var on = btn.getAttribute('data-mdspan') === String(mdSpan);
+      btn.classList.toggle('on', on);
+      btn.onclick = function() {
+        mdSpan = btn.getAttribute('data-mdspan') === 'all' ? 'all' : Number(btn.getAttribute('data-mdspan'));
+        Array.prototype.forEach.call(document.querySelectorAll('#modelDialog [data-mdspan]'), function(o) { o.classList.toggle('on', o === btn); });
+        renderModelDialog(mdModel);
+      };
+    });
+    renderModelDialog(m);
+    if (!dlg.open) dlg.showModal();
+  }
   function dayModelRows(key) {
     var per = (DATA.byDayModel || {})[key] || {};
     var tops = topModels(DATA.byModel || {}, 8), rows = [], other = 0;
@@ -537,18 +817,35 @@
     });
   }
 
-  // 30-day token line: daily totals, smoothed path, hover dot + per-model tip.
-  function wow(model) {
-    var days = allDays().slice(-14), cur = 0, prev = 0;
-    days.forEach(function(d, i) {
-      var v = ((DATA.byDayModel || {})[d] || {})[model] || 0;
-      if (i < days.length - 7) prev += v; else cur += v;
+  var modelPage = 1, modelPer = 10, recentPage = 1, recentPer = 25;
+  // Recent requests default to newest-first, which is how the transcript
+  // arrives; every column is sortable like the command table.
+  var recentSort = { key: 'when', dir: -1 }, recentRows = [];
+  function recentVal(r, key) {
+    if (key === 'model') return r.m.toLowerCase();
+    if (key === 'input') return r.i;
+    if (key === 'output') return r.o;
+    if (key === 'time') return r.d === undefined ? null : r.d;
+    if (key === 'status') return statusRank(r);
+    if (key === 'cost') return displayCost(r);
+    return r.t;
+  }
+  function sortRecent() {
+    var k = recentSort.key, d = recentSort.dir;
+    recentRows.sort(function(a, b) {
+      var av = recentVal(a, k), bv = recentVal(b, k);
+      if (av === null || av === undefined) return 1;
+      if (bv === null || bv === undefined) return -1;
+      if (av < bv) return -d;
+      if (av > bv) return d;
+      return b.t - a.t;
+    });
+    Array.prototype.forEach.call(document.querySelectorAll('#recentTable .thsort'), function(btn) {
+      var on = btn.dataset.sort === k;
+      btn.querySelector('.arr').textContent = on ? (d === 1 ? '↑' : '↓') : '⇅';
+      btn.closest('th').setAttribute('aria-sort', on ? (d === 1 ? 'ascending' : 'descending') : 'none');
     });
-    if (!prev) return cur ? 'new' : '-';
-    var p = Math.round((cur - prev) / prev * 100);
-    return (p >= 0 ? '+' : '') + p + '%';
   }
-  var modelPage = 1, modelPer = 10, recentPage = 1, recentPer = 15;
   function renderModels() {
     var byModel = DATA.byModel || {};
     var tops = topModels(byModel, Object.keys(byModel).length).filter(function(m) { return modelTotal(byModel, m) > 0; });
@@ -556,7 +853,7 @@
     cards.innerHTML = '';
     if (!tops.length) cards.innerHTML = '<div class="empty md:col-span-3">' + emptyState('boxes', 'No models yet', 'Model token totals will appear here once sessions report tokens.') + '</div>';
     tops.slice(0, 3).forEach(function(m, i) {
-      var v = vendorOf(m), d = wow(m);
+      var v = vendorOf(m);
       var card = document.createElement('div');
       card.className = 'modelcard relative p-4 rounded-xl overflow-hidden';
       if (v.svg) {
@@ -577,7 +874,8 @@
         ghostSparkle.setAttribute('aria-hidden', 'true');
         card.appendChild(ghostSparkle);
       }
-      card.style.cssText = 'border: 1px solid var(--line); background: var(--panel)';
+      card.style.cssText = 'border: 1px solid var(--line); background: var(--panel); cursor: pointer';
+      card.setAttribute('role', 'button');
       var head = document.createElement('p');
       head.className = 'mono text-xs mb-3'; head.style.color = 'var(--dim)';
       head.textContent = '0' + (i + 1);
@@ -587,20 +885,14 @@
       badgeWrap.innerHTML = brandHTML(v, false);
       var badge = badgeWrap.firstChild;
       var mid = document.createElement('div'); mid.className = 'min-w-0 flex-1';
-      var nm = document.createElement('p'); nm.className = 'mono text-sm font-bold truncate'; nm.textContent = m;
+      var nm = document.createElement('p'); nm.className = 'mono text-sm font-bold truncate'; nm.textContent = displayModel(m); nm.title = m;
       var vn = document.createElement('p'); vn.className = 'mono text-xs truncate'; vn.style.color = 'var(--dim)'; vn.textContent = v.name;
       mid.appendChild(nm); mid.appendChild(vn);
       var tot = document.createElement('p'); tot.className = 'mono font-bold text-lg shrink-0'; tot.textContent = fmtShort(modelTotal(byModel, m));
       row.appendChild(badge); row.appendChild(mid); row.appendChild(tot);
       card.appendChild(head); card.appendChild(row);
-      if (d !== 'new') {
-        var delta = document.createElement('p');
-        delta.className = 'mono text-xs mt-3';
-        delta.style.color = d.charAt(0) === '-' ? '#f87171' : 'var(--accent)';
-        delta.textContent = d;
-        card.appendChild(delta);
-      }
       hoverModel(card, m);
+      (function(model) { card.addEventListener('click', function() { openModelDialog(model); }); })(m);
       cards.appendChild(card);
     });
     var ol = document.getElementById('models');
@@ -618,7 +910,7 @@
       badgeWrap.innerHTML = brandHTML(v, true);
       var badge = badgeWrap.firstChild;
       var mid = document.createElement('div'); mid.className = 'min-w-0 flex-1';
-      var nm = document.createElement('p'); nm.className = 'mono text-sm truncate'; nm.textContent = m;
+      var nm = document.createElement('p'); nm.className = 'mono text-sm truncate'; nm.textContent = displayModel(m); nm.title = m;
       var track = document.createElement('div'); track.className = 'bar-track mt-1.5 h-1.5 overflow-hidden';
       var fill = document.createElement('div'); fill.className = 'bar-fill h-full';
       var mv = modelTotal(byModel, m);
@@ -632,6 +924,7 @@
       right.appendChild(n); right.appendChild(cost);
       li.appendChild(badge); li.appendChild(mid); li.appendChild(right);
       hoverModel(li, m);
+      (function(model) { li.addEventListener('click', function() { openModelDialog(model); }); })(m);
       ol.appendChild(li);
     });
     document.getElementById('modelsCount').textContent = tops.length ? tops.length + ' models' : '';
@@ -662,8 +955,12 @@
 
   // Union of session tool calls + RTK-metered commands, sortable + paged.
   // Session tools were never metered per command: saved / avg / time show – and sort last.
+  // Rows group by command alone, machine-wide: same command in any repo is one row.
   var cmdSort = { key: 'count', dir: -1 }, cmdPage = 1, cmdPer = 15, cmdRows = [];
-  function cmdVal(r, key) { return key === 'name' ? r.name.toLowerCase() : r[key]; }
+  function cmdVal(r, key) {
+    if (key === 'name') return r.name.toLowerCase();
+    return r[key];
+  }
   function sortCmd() {
     var k = cmdSort.key, d = cmdSort.dir;
     cmdRows.sort(function(a, b) {
@@ -682,12 +979,16 @@
   }
   function renderCmd() {
     var g = (DATA.rtkGain || {});
-    cmdRows = (DATA.byTool || []).map(function(r) {
-      return { name: r[0], count: r[1], saved: null, avgPct: null, avgMs: null };
-    });
-    (g.byCommand || []).forEach(function(r) {
-      cmdRows.push({ name: r.command, count: r.count, saved: r.saved, avgPct: r.avgPct, avgMs: r.avgMs });
-    });
+    var byName = {};
+    function add(name, count, saved, avgPct, avgMs) {
+      var r = byName[name];
+      if (!r) { byName[name] = { name: name, count: count, saved: saved, avgPct: avgPct, avgMs: avgMs }; return; }
+      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); });
+    (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();
     var pages = Math.max(1, Math.ceil(cmdRows.length / cmdPer));
     if (cmdPage > pages) cmdPage = pages;
@@ -720,9 +1021,8 @@
     });
     document.getElementById('cmdTable').style.display = cmdRows.length ? '' : 'none';
     document.getElementById('emptyCmd').classList.toggle('hidden', cmdRows.length > 0);
-    var tools = (DATA.byTool || []).length;
     document.getElementById('toolsScope').textContent =
-      g.commands ? fmt(tools) + ' tools · ' + fmt(g.commands) + ' commands · ' + fmtShort(g.saved) + ' saved' : 'tool calls in sessions';
+      g.commands ? fmt(cmdRows.length) + ' commands · ' + fmt(g.commands) + ' runs · ' + fmtShort(g.saved) + ' saved' : 'tool calls in sessions';
     paintCmdPager(pages);
   }
   // Shared page-number painter: prev/next plus windowed numbers with
@@ -795,6 +1095,19 @@
     bindPerPage('section[aria-label="All models"]', function() { return modelPer; }, function(n) { modelPer = n; modelPage = 1; }, renderModels);
     bindPerPage('section[aria-label="Recent requests"]', function() { return recentPer; }, function(n) { recentPer = n; recentPage = 1; }, renderRecent);
   }
+  function bindRecentTable() {
+    if (bindRecentTable.done) return;
+    bindRecentTable.done = true;
+    Array.prototype.forEach.call(document.querySelectorAll('#recentTable .thsort'), function(btn) {
+      btn.addEventListener('click', function() {
+        var k = btn.dataset.sort;
+        if (recentSort.key === k) recentSort.dir = -recentSort.dir;
+        else { recentSort.key = k; recentSort.dir = k === 'model' || k === 'status' ? 1 : -1; }
+        recentPage = 1;
+        renderRecent();
+      });
+    });
+  }
   function fmtMs(ms) {
     if (ms < 1000) return Math.round(ms) + 'ms';
     return (ms / 1000).toFixed(1) + 's';
@@ -887,6 +1200,22 @@
 
   function render(d) {
     DATA = d;
+    // Server-provided default currency (tersio gain --currency); a saved
+    // picker choice in localStorage always wins.
+    if (!render.fxInit) {
+      render.fxInit = true;
+      var saved = null;
+      try { saved = localStorage.getItem('tersio-fx-cur'); } catch (e) { }
+      if (!saved && d.currency && CURS[d.currency]) {
+        fx.cur = d.currency;
+        var curEl = document.getElementById('fxCur');
+        if (curEl) curEl.textContent = FLAGS[fx.cur] + ' ' + fx.cur;
+        var panel = document.getElementById('fxPanel');
+        if (panel) Array.prototype.forEach.call(panel.children, function(o) {
+          o.setAttribute('aria-selected', o.dataset.cur === fx.cur ? 'true' : 'false');
+        });
+      }
+    }
     var t = d.tokens || { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
     var total = t.input + t.output + t.cacheRead + t.cacheWrite;
     var totalEl = document.getElementById('total');
@@ -903,7 +1232,7 @@
     renderSpark(byDay, d.usd || 0, d.savedUsd || 0, total);
     document.getElementById('verChip').textContent = 'tersio v' + (d.version || '?');
     var dp = d.paths || {};
-    [['pathLedger', dp.ledger], ['pathSessions', dp.sessions]].forEach(function(pair) {
+    [['pathLedger', dp.ledger], ['pathSessions', dp.sessions], ['pathUsageDb', dp.usageDb]].forEach(function(pair) {
       var pel = document.getElementById(pair[0]);
       if (pel && pair[1]) { pel.textContent = pair[1]; pel.title = pair[1]; }
     });
@@ -981,6 +1310,7 @@
     renderStrip(t);
     bindGraphTabs();
     bindCmdTable();
+    bindRecentTable();
     renderGraph(d.byDay || {});
     renderModels();
     renderRecent();
@@ -993,36 +1323,70 @@
     }
     observe();
   }
+  // shadcn/ui badge: default/secondary/destructive/outline carry the meaning,
+  // the label carries the detail. Built as DOM nodes so provider error notes
+  // never reach innerHTML.
+  function statusBadge(r) {
+    var b = document.createElement('span');
+    b.className = 'badge';
+    if (r.st === 'error') {
+      b.classList.add('destructive');
+      b.textContent = statusLabel(r);
+      b.title = 'error' + (r.code ? ' ' + r.code : '') + (r.note ? ' — ' + r.note : '');
+    } else if (r.st === 'aborted') {
+      b.classList.add('outline');
+      b.textContent = 'aborted';
+      b.title = r.note || 'Interrupted by user';
+    } else {
+      b.classList.add('secondary');
+      b.textContent = 'completed';
+      if (r.note) b.title = r.note;
+    }
+    return b;
+  }
   function renderRecent() {
     var body = document.getElementById('recent');
     body.innerHTML = '';
     var all = DATA.recent || [];
-    var recentPages = Math.max(1, Math.ceil(all.length / recentPer));
+    recentRows = all.slice();
+    sortRecent();
+    var recentPages = Math.max(1, Math.ceil(recentRows.length / recentPer));
     if (recentPage > recentPages) recentPage = recentPages;
     var recentStart = (recentPage - 1) * recentPer;
-    var rows = all.slice(recentStart, recentStart + recentPer);
+    var rows = recentRows.slice(recentStart, recentStart + recentPer);
     rows.forEach(function(r, i) {
       var v = vendorOf(r.m);
+      var measured = costIsMeasured(r);
       var tr = document.createElement('tr');
-      tr.className = 'rrow' + (i < Math.min(all.length - recentStart, recentPer) - 1 ? ' rowline' : '');
-      var dot = '<span style="display:inline-block;width:8px;height:8px;border-radius:99px;background:' + v.color + ';margin-right:8px"></span>';
+      tr.className = 'rrow' + (i < Math.min(recentRows.length - recentStart, recentPer) - 1 ? ' rowline' : '');
       tr.innerHTML = '<td class="py-2.5 pr-3 truncate" style="min-width: 0"></td>' +
-        '<td class="text-right py-2.5 pr-3 whitespace-nowrap"></td>' +
+        '<td class="text-right py-2.5 pr-3 whitespace-nowrap" style="color:#fb923c"></td>' +
+        '<td class="text-right py-2.5 pr-3 whitespace-nowrap" style="color:var(--accent)"></td>' +
+        '<td class="text-right py-2.5 pr-3 whitespace-nowrap" style="color:var(--dim)">–</td>' +
+        '<td class="py-2.5 pr-3 whitespace-nowrap"></td>' +
         '<td class="text-right py-2.5 pr-3 whitespace-nowrap"></td>' +
         '<td class="text-right py-2.5 whitespace-nowrap" style="color: var(--dim)"></td>';
       var tds = tr.children;
+      var dot = '<span style="display:inline-block;width:8px;height:8px;border-radius:99px;background:' + v.color + ';margin-right:8px"></span>';
       tds[0].innerHTML = dot + '<span></span>';
-      tds[0].querySelector('span:last-child').textContent = r.m;
-      tds[1].innerHTML = '<span style="color:#fb923c"></span> <span style="color:var(--accent)"></span>';
-      tds[1].children[0].textContent = fmt(r.i) + '↑';
-      tds[1].children[1].textContent = fmt(r.o) + '↓';
-      tds[2].textContent = speedText(r);
-      tds[3].textContent = relTime(r.t);
+      tds[0].querySelector('span:last-child').textContent = displayModel(r.m);
+      tds[1].textContent = fmt(r.i);
+      tds[2].textContent = fmt(r.o);
+      tds[3].textContent = speedText(r);
+      tds[4].appendChild(statusBadge(r));
+      tds[5].textContent = (measured ? '' : '~') + fxMoney(displayCost(r));
+      tds[5].title = measured
+        ? 'measured — charged by the provider'
+        : (costRecorded(r)
+          ? 'est. — provider charged ' + fxMoney(r.usd) + ' (free or local), modeled from tokens'
+          : 'est. — modeled from tokens');
+      if (measured) tds[5].style.color = 'var(--ink)';
+      tds[6].textContent = whenStamp(r.t);
       hoverRecent(tr, r);
       body.appendChild(tr);
     });
-    document.getElementById('recentCount').textContent = all.length ? all.length + ' requests' : '';
-    paintPager('recentPages', 'recentRange', recentPage, recentPer, all.length, function(p) { recentPage = p; renderRecent(); });
+    document.getElementById('recentCount').textContent = all.length ? recentRows.length + ' requests' : '';
+    paintPager('recentPages', 'recentRange', recentPage, recentPer, recentRows.length, function(p) { recentPage = p; renderRecent(); });
     document.getElementById('recentTable').style.display = all.length ? '' : 'none';
     document.getElementById('emptyRecent').classList.toggle('hidden', all.length > 0);
   }
@@ -1091,12 +1455,16 @@
   document.getElementById('reload').addEventListener('click', load);
   (function() {
     var dlg = document.getElementById('settings');
-    if (!dlg || typeof dlg.showModal !== 'function') return;
-    document.getElementById('settingsBtn').addEventListener('click', function() {
-      if (typeof dlg.showModal === 'function') dlg.showModal();
-    });
-    document.getElementById('settingsClose').addEventListener('click', function() { dlg.close(); });
-    dlg.addEventListener('click', function(ev) { if (ev.target === dlg) dlg.close(); });
+    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');