@krtclcdy/tersio 2.16.0 → 2.18.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) {
@@ -164,7 +180,9 @@
     });
   })();
 
+  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],
     [/muse/i, 'Meta', 'meta', '#0082fb'],
     [/deepseek/i, 'DeepSeek', 'deepseek', '#4d6bfe'],
     [/qwen|qwq/i, 'Qwen', 'qwen', '#6950EF'],
@@ -175,21 +193,27 @@
     [/nemotron|nvidia/i, 'NVIDIA', 'nvidia', '#76b900'],
     [/mistral/i, 'Mistral', 'mistralai', '#ff7000'],
     [/claude|anthropic/i, 'Anthropic', 'anthropic', '#d97757'],
-    [/gemini|google/i, 'Google', 'googlegemini', '#4285f4'],
+    [/gemini|google|gemma/i, 'Google', 'google', '#4285F4'],
   ];
   function vendorOf(model) {
     for (var i = 0; i < PROVIDERS.length; i++) {
-      if (PROVIDERS[i][0].test(model)) return { name: PROVIDERS[i][1], slug: PROVIDERS[i][2], color: PROVIDERS[i][3] };
+      if (PROVIDERS[i][0].test(model)) return { name: PROVIDERS[i][1], slug: PROVIDERS[i][2], color: PROVIDERS[i][3], svg: PROVIDERS[i][4] };
     }
     return { name: 'Other', slug: '', color: '#71717a' };
   }
-  // Brand glyph from the Simple Icons CDN; a missing slug (or offline export)
-  // falls back to a neutral bot glyph. Never a bare initial.
+  // Brand glyph: inline SVG when the provider ships one (OpenAI), else the
+  // Simple Icons CDN; unknown / Other providers render a clean Lucide
+  // sparkles icon with no solid background as a placeholder.
   function brandHTML(v, small) {
-    var icon = v.slug
-      ? '<img src="https://cdn.simpleicons.org/' + v.slug + '/white" alt="" loading="lazy" onerror="this.style.display=\'none\';this.nextElementSibling.style.display=\'grid\';">'
-      : '';
-    var fb = '<i data-lucide="bot" class="fb"' + (v.slug ? '' : ' style="display:grid"') + '></i>';
+    if (v.svg) {
+      return '<span class="brandmark' + (small ? ' sm' : '') + '" style="background:' + v.color + '" title="' + v.name + '">' + v.svg + '</span>';
+    }
+    if (!v.slug) {
+      return '<span class="brandmark placeholder' + (small ? ' sm' : '') + '" title="' + v.name + '">' +
+        '<i data-lucide="sparkles" class="fb" style="display:grid"></i></span>';
+    }
+    var icon = '<img src="https://cdn.simpleicons.org/' + v.slug + '/white" alt="" loading="lazy" onerror="this.style.display=\'none\';this.nextElementSibling.style.display=\'grid\';">';
+    var fb = '<i data-lucide="sparkles" class="fb"></i>';
     return '<span class="brandmark' + (small ? ' sm' : '') + '" style="background:' + v.color + '" title="' + v.name + '">' + icon + fb + '</span>';
   }
   var PALETTE = ['#34d399', '#818cf8', '#22d3ee', '#fbbf24', '#f472b6', '#a78bfa', '#fb923c', '#2dd4bf'];
@@ -197,12 +221,30 @@
   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
+  // that is what streams to the user during the measured window.
+  function fmtDur(ms) {
+    if (ms === undefined) return '–';
+    var s = ms / 1000;
+    return (s < 10 ? s.toFixed(1) : Math.round(s)) + 's';
+  }
+  function speedText(r) {
+    if (r.d === undefined) return '–';
+    var tps = r.d > 0 ? r.o / (r.d / 1000) : 0;
+    return fmtDur(r.d) + ' ⚡' + (tps < 10 ? tps.toFixed(1) : Math.round(tps)) + '/s';
+  }
+  function speedTitle(r) {
+    if (r.d === undefined) return 'no duration recorded';
+    var tps = r.d > 0 ? r.o / (r.d / 1000) : 0;
+    return '⏱ ' + (r.d / 1000).toFixed(1) + 's elapsed with the model, ⚡ ' + r.o + ' output tokens (' + tps.toFixed(1) + ' tok/s)';
   }
   function modelTotal(byModel, m) {
     var b = byModel[m] || { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
@@ -234,6 +276,7 @@
   function showTip(html, x, y) {
     var t = tip();
     t.innerHTML = html;
+    if (window.lucide) lucide.createIcons();
     t.classList.add('show');
     moveTip(x, y);
   }
@@ -265,19 +308,104 @@
     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 h = '<div class="tt">' + shortName(m) + '</div><div class="tv">' + fmtShort(total) + ' total</div>';
-    h += '<div class="tr"><span class="sw" style="background:var(--accent)"></span><span class="tn">input</span><span class="tvr">' + fmt(b.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) + '</span></div>';
+    var cb = ((DATA.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>';
+    if (b.cacheRead > 0) h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">cache read</span><span class="tvr">' + fmt(b.cacheRead) + ' (' + fxMoney(cb.cacheRead) + ')</span></div>';
+    if (b.cacheWrite > 0) h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">cache write</span><span class="tvr">' + fmt(b.cacheWrite) + ' (' + fxMoney(cb.cacheWrite) + ')</span></div>';
     h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">requests</span><span class="tvr">' + fmt(req) + '</span></div>';
     h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">cache hit</span><span class="tvr">' + hit + '</span></div>';
     return h;
   }
+  function stampLocal(ts) {
+    var d = new Date(ts);
+    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 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 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;
+  // captions say est. where modeled. Icons paint via showTip/render createIcons.
+  function zoneIcon(glyph, cls) { return '<i data-lucide="' + glyph + '" class="zface ' + cls + '"></i>'; }
+  function co2Zone(g) {
+    if (!(g > 0)) return ['minus', 'no data', ''];
+    if (g <= 50) return ['sprout', 'light', 'good'];
+    if (g <= 500) return ['smile', 'moderate', 'good'];
+    if (g <= 2000) return ['meh', 'heavy', 'warn'];
+    return ['flame', 'very high', 'bad'];
+  }
+  function levZone(x) {
+    if (!(x > 0)) return ['minus', 'no savings yet', ''];
+    if (x >= 3) return ['rocket', 'high leverage', 'good'];
+    if (x >= 1) return ['smile', 'solid', 'good'];
+    return ['meh', 'light', 'warn'];
+  }
+  function shareZone(p) {
+    if (!(p > 0)) return ['minus', 'uncached', ''];
+    if (p >= 80) return ['rocket', 'high', 'good'];
+    if (p >= 50) return ['smile', 'good', 'good'];
+    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>';
+    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(--dim)"></span><span class="tn">method</span><span class="tvr">EcoLogits 0.8.2 port</span></div>';
-    h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">served</span><span class="tvr">ceiling / 32</span></div>';
-    h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">grid</span><span class="tvr">per provider</span></div>';
+    return h;
+  }
+  function tipSavedHTML() {
+    var usd = DATA.usd || 0, saved = DATA.savedUsd || 0;
+    var lev = usd ? saved / usd : 0;
+    var z = levZone(lev);
+    var t = DATA.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>';
+    h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">cache read</span><span class="tvr">' + fmtShort(t.cacheRead || 0) + '</span></div>';
+    return h;
+  }
+  function tipShareHTML(share, pp) {
+    var z = shareZone(share);
+    var t = DATA.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>';
+    if ((t.cacheWrite || 0) > 0) h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">write</span><span class="tvr">' + fmtShort(t.cacheWrite) + '</span></div>';
+    h += '<div class="tr"><span class="sw" style="background:var(--dim)"></span><span class="tn">7d trend</span><span class="tvr">' + (pp >= 0 ? '+' : '') + pp.toFixed(1) + 'pp</span></div>';
     return h;
   }
   function hoverModel(el, m) {
@@ -285,6 +413,11 @@
     el.addEventListener('mousemove', function(ev) { moveTip(ev.clientX, ev.clientY); });
     el.addEventListener('mouseleave', hideTip);
   }
+  function hoverRecent(el, r) {
+    el.addEventListener('mouseenter', function(ev) { showTip(tipRecentHTML(r), ev.clientX, ev.clientY); });
+    el.addEventListener('mousemove', function(ev) { moveTip(ev.clientX, ev.clientY); });
+    el.addEventListener('mouseleave', hideTip);
+  }
   function dayModelRows(key) {
     var per = (DATA.byDayModel || {})[key] || {};
     var tops = topModels(DATA.byModel || {}, 8), rows = [], other = 0;
@@ -444,33 +577,62 @@
     });
   }
 
-  // 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 + '%';
   }
   function renderModels() {
     var byModel = DATA.byModel || {};
-    var tops = topModels(byModel, 8).filter(function(m) { return modelTotal(byModel, m) > 0; });
+    var tops = topModels(byModel, Object.keys(byModel).length).filter(function(m) { return modelTotal(byModel, m) > 0; });
     var cards = document.getElementById('modelCards');
     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.slug) {
+      if (v.svg) {
+        var ghostSvg = document.createElement('span');
+        ghostSvg.className = 'ghostimg'; ghostSvg.setAttribute('aria-hidden', 'true');
+        ghostSvg.innerHTML = v.svg;
+        card.appendChild(ghostSvg);
+      } else if (v.slug) {
         var ghost = document.createElement('img');
         ghost.className = 'ghostimg'; ghost.alt = '';
         ghost.src = 'https://cdn.simpleicons.org/' + v.slug + '/white';
         ghost.setAttribute('aria-hidden', 'true');
         card.appendChild(ghost);
+      } else {
+        var ghostSparkle = document.createElement('i');
+        ghostSparkle.setAttribute('data-lucide', 'sparkles');
+        ghostSparkle.className = 'ghosticon';
+        ghostSparkle.setAttribute('aria-hidden', 'true');
+        card.appendChild(ghostSparkle);
       }
       card.style.cssText = 'border: 1px solid var(--line); background: var(--panel)';
       var head = document.createElement('p');
@@ -488,13 +650,6 @@
       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);
       cards.appendChild(card);
     });
@@ -502,10 +657,13 @@
     ol.innerHTML = '';
     var max = 1;
     tops.forEach(function(m) { max = Math.max(max, modelTotal(byModel, m)); });
-    tops.forEach(function(m, i) {
+    var modelPages = Math.max(1, Math.ceil(tops.length / modelPer));
+    if (modelPage > modelPages) modelPage = modelPages;
+    var modelStart = (modelPage - 1) * modelPer;
+    tops.slice(modelStart, modelStart + modelPer).forEach(function(m, i) {
       var v = vendorOf(m);
       var li = document.createElement('li');
-      li.className = 'mrow flex items-center gap-3 px-4 py-3' + (i < tops.length - 1 ? ' rowline' : '');
+      li.className = 'mrow flex items-center gap-3 px-4 py-3' + (i < Math.min(tops.length - modelStart, modelPer) - 1 ? ' rowline' : '');
       var badgeWrap = document.createElement('span');
       badgeWrap.innerHTML = brandHTML(v, true);
       var badge = badgeWrap.firstChild;
@@ -527,6 +685,7 @@
       ol.appendChild(li);
     });
     document.getElementById('modelsCount').textContent = tops.length ? tops.length + ' models' : '';
+    paintPager('modelPages', 'modelRange', modelPage, modelPer, tops.length, function(p) { modelPage = p; renderModels(); });
     ol.style.display = tops.length ? '' : 'none';
     document.getElementById('emptyModels').classList.toggle('hidden', tops.length > 0);
     if (tops.length && 'IntersectionObserver' in window && !reduce) {
@@ -553,8 +712,43 @@
 
   // Union of session tool calls + RTK-metered commands, sortable + paged.
   // Session tools were never metered per command: saved / avg / time show – and sort last.
-  var cmdSort = { key: 'count', dir: -1 }, cmdPage = 1, cmdPer = 15, cmdRows = [];
-  function cmdVal(r, key) { return key === 'name' ? r.name.toLowerCase() : r[key]; }
+  // RTK rows arrive per (command, project) because rtk's history is machine-wide:
+  // fusing projects let one repo's `rtk grep` stand in for every project's.
+  var cmdSort = { key: 'count', dir: -1 }, cmdPage = 1, cmdPer = 15, cmdRows = [], cmdProject = '';
+  function cmdVal(r, key) {
+    if (key === 'name') return r.name.toLowerCase();
+    if (key === 'project') return (r.project || '').toLowerCase();
+    return r[key];
+  }
+  function baseName(p) {
+    if (!p) return '–';
+    var parts = String(p).replace(/\/+$/, '').split('/');
+    return parts[parts.length - 1] || p;
+  }
+  // Options come from the rows themselves so the list follows the machine.
+  // Repaint is skipped while the option set is unchanged: render runs every
+  // 5s and a rebuild would close an open dropdown mid-selection.
+  function paintProjectFilter(all) {
+    var sel = document.getElementById('cmdProject');
+    if (!sel) return;
+    var seen = {};
+    all.forEach(function(r) { if (r.project) seen[r.project] = 1; });
+    var keys = Object.keys(seen).sort();
+    if (cmdProject && keys.indexOf(cmdProject) < 0) cmdProject = '';
+    var sig = keys.join('\n') + '\u0000' + cmdProject;
+    if (sel.dataset.sig === sig) return;
+    sel.dataset.sig = sig;
+    sel.innerHTML = '';
+    var any = document.createElement('option');
+    any.value = ''; any.textContent = 'All projects (' + keys.length + ')';
+    sel.appendChild(any);
+    keys.forEach(function(k) {
+      var o = document.createElement('option');
+      o.value = k; o.textContent = baseName(k); o.title = k;
+      sel.appendChild(o);
+    });
+    sel.value = cmdProject;
+  }
   function sortCmd() {
     var k = cmdSort.key, d = cmdSort.dir;
     cmdRows.sort(function(a, b) {
@@ -573,12 +767,14 @@
   }
   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 };
+    var all = (DATA.byTool || []).map(function(r) {
+      return { name: r[0], project: '', 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 });
+      all.push({ name: r.command, project: r.project || '', count: r.count, saved: r.saved, avgPct: r.avgPct, avgMs: r.avgMs });
     });
+    paintProjectFilter(all);
+    cmdRows = cmdProject ? all.filter(function(r) { return r.project === cmdProject; }) : all;
     sortCmd();
     var pages = Math.max(1, Math.ceil(cmdRows.length / cmdPer));
     if (cmdPage > pages) cmdPage = pages;
@@ -593,6 +789,7 @@
       tr.className = 'mrow' + (i < Math.min(cmdRows.length - start, cmdPer) - 1 ? ' rowline' : '');
       tr.innerHTML = '<td class="text-right pr-3 py-2.5 mono text-xs w-10" style="color: var(--dim)"></td>' +
         '<td class="py-2.5 pr-3 truncate" style="max-width: 280px"></td>' +
+        '<td class="py-2.5 pr-3 truncate" style="max-width: 120px; color: var(--dim)"></td>' +
         '<td class="text-right py-2.5 pr-3 font-bold"></td>' +
         '<td class="text-right py-2.5 pr-3 font-bold"></td>' +
         '<td class="text-right py-2.5 pr-3" style="color: var(--accent)"></td>' +
@@ -602,11 +799,13 @@
       tds[0].textContent = String(n + 1).padStart(2, '0');
       tds[1].textContent = r.name;
       tds[1].title = r.name;
-      tds[2].textContent = fmt(r.count);
-      tds[3].textContent = r.saved === null ? '–' : fmtShort(r.saved);
-      tds[4].textContent = r.avgPct === null ? '–' : r.avgPct.toFixed(1) + '%';
-      tds[5].textContent = r.avgMs === null || r.avgMs === undefined ? '–' : fmtMs(r.avgMs);
-      tds[6].firstChild.firstChild.style.width = r.count ? Math.round(r.count / max * 100) + '%' : '0';
+      tds[2].textContent = baseName(r.project);
+      tds[2].title = r.project || 'session tool call (no project recorded)';
+      tds[3].textContent = fmt(r.count);
+      tds[4].textContent = r.saved === null ? '–' : fmtShort(r.saved);
+      tds[5].textContent = r.avgPct === null ? '–' : r.avgPct.toFixed(1) + '%';
+      tds[6].textContent = r.avgMs === null || r.avgMs === undefined ? '–' : fmtMs(r.avgMs);
+      tds[7].firstChild.firstChild.style.width = r.count ? Math.round(r.count / max * 100) + '%' : '0';
       body.appendChild(tr);
     });
     document.getElementById('cmdTable').style.display = cmdRows.length ? '' : 'none';
@@ -616,26 +815,31 @@
       g.commands ? fmt(tools) + ' tools · ' + fmt(g.commands) + ' commands · ' + fmtShort(g.saved) + ' saved' : 'tool calls in sessions';
     paintCmdPager(pages);
   }
-  function paintCmdPager(pages) {
-    var total = cmdRows.length, start = total ? (cmdPage - 1) * cmdPer + 1 : 0;
-    document.getElementById('cmdRange').textContent =
-      'Showing ' + start + '–' + Math.min(total, cmdPage * cmdPer) + ' of ' + total;
-    var wrap = document.getElementById('cmdPages');
+  // Shared page-number painter: prev/next plus windowed numbers with
+  // ellipsis. onPick(page) rerenders the owning card. Same controls as the
+  // Command tools pager; Models and Recent reuse it verbatim.
+  function paintPager(wrapId, rangeId, page, per, total, onPick) {
+    var start = total ? (page - 1) * per + 1 : 0;
+    document.getElementById(rangeId).textContent =
+      'Showing ' + start + '–' + Math.min(total, page * per) + ' of ' + total;
+    var wrap = document.getElementById(wrapId);
     wrap.innerHTML = '';
-    function btn(label, page, opts) {
+    var pages = Math.max(1, Math.ceil(total / per));
+    if (page > pages) onPick(pages);
+    function btn(label, next, opts) {
       var b = document.createElement('button');
       b.type = 'button'; b.className = 'pgbtn mono' + (opts && opts.on ? ' on' : '');
       b.textContent = label;
       if (opts && opts.dim) b.setAttribute('aria-label', opts.dim);
       if (opts && opts.off) b.disabled = true;
-      else b.addEventListener('click', function() { cmdPage = page; renderCmd(); });
+      else b.addEventListener('click', function() { onPick(next); });
       wrap.appendChild(b);
       return b;
     }
-    btn('‹', cmdPage - 1, { dim: 'Previous page', off: cmdPage <= 1 });
+    btn('‹', page - 1, { dim: 'Previous page', off: page <= 1 });
     var nums = [];
     for (var p = 1; p <= pages; p++) {
-      if (p === 1 || p === pages || Math.abs(p - cmdPage) <= 1) nums.push(p);
+      if (p === 1 || p === pages || Math.abs(p - page) <= 1) nums.push(p);
       else if (nums[nums.length - 1] !== '…') nums.push('…');
     }
     nums.forEach(function(p) {
@@ -643,9 +847,27 @@
         var s = document.createElement('span');
         s.textContent = '…'; s.style.padding = '0 2px';
         wrap.appendChild(s);
-      } else btn(String(p), p, { on: p === cmdPage });
+      } else btn(String(p), p, { on: p === page });
+    });
+    btn('›', page + 1, { dim: 'Next page', off: page >= pages });
+  }
+  function paintCmdPager(pages) {
+    var total = cmdRows.length;
+    if (cmdPage > pages) cmdPage = pages;
+    paintPager('cmdPages', 'cmdRange', cmdPage, cmdPer, total, function(p) { cmdPage = p; renderCmd(); });
+  }
+  function bindPerPage(sel, get, set, render) {
+    Array.prototype.forEach.call(document.querySelectorAll(sel + ' [data-pp]'), function(btn) {
+      if (btn.dataset.bound) return;
+      btn.dataset.bound = '1';
+      btn.addEventListener('click', function() {
+        if (Number(btn.dataset.pp) === get()) return;
+        Array.prototype.forEach.call(document.querySelectorAll(sel + ' [data-pp]'), function(b) { b.classList.remove('on'); });
+        btn.classList.add('on');
+        set(Number(btn.dataset.pp));
+        render();
+      });
     });
-    btn('›', cmdPage + 1, { dim: 'Next page', off: cmdPage >= pages });
   }
   function bindCmdTable() {
     if (bindCmdTable.done) return;
@@ -659,17 +881,25 @@
         renderCmd();
       });
     });
-    Array.prototype.forEach.call(document.querySelectorAll('#cmdPager [data-pp]'), function(btn) {
+    bindPerPage('#cmdPager', function() { return cmdPer; }, function(n) { cmdPer = n; cmdPage = 1; }, renderCmd);
+    var pf = document.getElementById('cmdProject');
+    if (pf) pf.addEventListener('change', function() { cmdProject = pf.value; cmdPage = 1; renderCmd(); });
+    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() {
-        Array.prototype.forEach.call(document.querySelectorAll('#cmdPager [data-pp]'), function(b) { b.classList.remove('on'); });
-        btn.classList.add('on');
-        cmdPer = Number(btn.dataset.pp);
-        cmdPage = 1;
-        renderCmd();
+        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';
@@ -783,7 +1013,19 @@
       if (pel && pair[1]) { pel.textContent = pair[1]; pel.title = pair[1]; }
     });
     countUp(document.getElementById('saved'), d.savedUsd || 0, true);
-    document.getElementById('co2').textContent = '~' + (d.co2g || 0).toFixed(1) + 'g';
+    (function() {
+      var lev = (d.usd || 0) ? (d.savedUsd || 0) / d.usd : 0;
+      var z = levZone(lev);
+      var note = document.getElementById('usdNote');
+      note.innerHTML = ((d.priced ? 'per-model price table' : 'incl. default pricing') + (fx.live ? ' · fx live' : ' · fx snapshot') + ' · ') + zoneIcon(z[0], z[2]) + ' ' + z[1];
+      note.title = 'Cache leverage x' + lev.toFixed(1) + ' — cache savings per $1 spent, vs full input price';
+    })();
+    (function() {
+      var z = co2Zone(d.co2g || 0);
+      var el = document.getElementById('co2');
+      el.innerHTML = '~' + (d.co2g || 0).toFixed(1) + 'g ' + zoneIcon(z[0], z[2]);
+      el.title = z[1] + ' footprint (est.)';
+    })();
     (function() {
       var el = document.getElementById('co2');
       var card = el ? el.closest('div.rounded-xl') : null;
@@ -793,16 +1035,39 @@
       card.addEventListener('mousemove', function(ev) { moveTip(ev.clientX, ev.clientY); });
       card.addEventListener('mouseleave', hideTip);
     })();
+    (function() {
+      var el = document.getElementById('saved');
+      var card = el ? el.closest('div.rounded-xl') : null;
+      if (!card || card.dataset.savetip) return;
+      card.dataset.savetip = '1';
+      card.addEventListener('mouseenter', function(ev) { showTip(tipSavedHTML(), ev.clientX, ev.clientY); });
+      card.addEventListener('mousemove', function(ev) { moveTip(ev.clientX, ev.clientY); });
+      card.addEventListener('mouseleave', hideTip);
+    })();
     var share = total ? Math.round((t.cacheRead + t.cacheWrite) / total * 100) : 0;
-    document.getElementById('cacheShare').textContent = share + '%';
+    var shareZ = shareZone(share);
+    document.getElementById('cacheShare').innerHTML = share + '% ' + zoneIcon(shareZ[0], shareZ[2]);
+    document.getElementById('cacheShare').title = shareZ[1] + ' cache share';
     var shareOf = function(b) { var s = dayTotal(b); return s ? ((b.cacheRead || 0) + (b.cacheWrite || 0)) / s * 100 : 0; };
     var keys = Object.keys(byDay).sort(), cPct = 0, pPct = 0, cn = 0, pn = 0;
     keys.slice(-7).forEach(function(k) { cPct += shareOf(byDay[k]); cn++; });
     keys.slice(-14, -7).forEach(function(k) { pPct += shareOf(byDay[k]); pn++; });
     var pp = (cn ? cPct / cn : 0) - (pn ? pPct / pn : 0);
     var cd = document.getElementById('cacheDelta');
-    cd.textContent = (pp >= 0 ? '▲ +' : '▼ ') + Math.abs(pp).toFixed(1) + 'pp vs prior 7d';
-    cd.className = 'pill mono ' + (Math.abs(pp) < 0.05 ? 'flat' : (pp > 0 ? 'good' : 'bad'));
+    var cs = document.getElementById('cacheShare');
+    cs.dataset.share = String(share);
+    cs.dataset.pp = pp.toFixed(1);
+    (function() {
+      var el = document.getElementById('cacheShare');
+      var card = el ? el.closest('div.rounded-xl') : null;
+      if (!card || card.dataset.sharetip) return;
+      card.dataset.sharetip = '1';
+      card.addEventListener('mouseenter', function(ev) {
+        showTip(tipShareHTML(Number(el.dataset.share || 0), Number(el.dataset.pp || 0)), ev.clientX, ev.clientY);
+      });
+      card.addEventListener('mousemove', function(ev) { moveTip(ev.clientX, ev.clientY); });
+      card.addEventListener('mouseleave', hideTip);
+    })();
 
     (function() {
       var el = document.getElementById('ticker');
@@ -821,6 +1086,7 @@
     renderStrip(t);
     bindGraphTabs();
     bindCmdTable();
+    bindRecentTable();
     renderGraph(d.byDay || {});
     renderModels();
     renderRecent();
@@ -833,33 +1099,73 @@
     }
     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 rows = (DATA.recent || []).slice(0, 13);
+    var all = DATA.recent || [];
+    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 = 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 < rows.length - 1 ? ' rowline' : '');
-      var dot = '<span style="display:inline-block;width:8px;height:8px;border-radius:99px;background:' + v.color + ';margin-right:8px"></span>';
-      tr.innerHTML = '<td class="py-2.5 pr-3 truncate" style="max-width: 180px"></td>' +
+      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" 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[0].title = r.m;
-      tds[1].innerHTML = '<span style="color:#fb923c"></span> <span style="color:var(--accent)"></span>';
-      tds[1].children[0].textContent = fmt(r.i) + '\u2191';
-      tds[1].children[1].textContent = fmt(r.o) + '\u2193';
-      tds[1].title = fmt(r.i) + ' in / ' + fmt(r.o) + ' out';
-      tds[2].textContent = relTime(r.t);
+      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);
+      tds[6].title = stampLocal(r.t);
+      hoverRecent(tr, r);
       body.appendChild(tr);
     });
-    document.getElementById('recentCount').textContent = rows.length ? rows.length + ' requests' : '';
-    document.getElementById('recentTable').style.display = rows.length ? '' : 'none';
-    document.getElementById('emptyRecent').classList.toggle('hidden', rows.length > 0);
+    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);
   }
 
   var seen = new WeakSet();