@krtclcdy/tersio 2.10.0 → 2.12.0

package/dashboard/app.js

@@ -44,14 +44,22 @@
     if (c) c.textContent = new Date().toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
   }
   tick(); setInterval(tick, 1000);
-  function syncThemeIcon() {
-    var dark = document.documentElement.getAttribute('data-theme') === 'dark' ||
-      (!document.documentElement.getAttribute('data-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
-    var moon = document.getElementById('iconMoon'), sun = document.getElementById('iconSun');
-    if (moon) moon.classList.toggle('hidden', dark);
-    if (sun) sun.classList.toggle('hidden', !dark);
-  }
-  syncThemeIcon();
+  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;
@@ -146,14 +154,15 @@
       if (DATA) render(DATA);
     }).catch(function() { clearTimeout(to); });
   })();
-  document.getElementById('theme').addEventListener('click', function() {
-    var cur = document.documentElement.getAttribute('data-theme');
-    var sysDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    var next = (cur || (sysDark ? 'dark' : 'light')) === 'dark' ? 'light' : 'dark';
-    document.documentElement.setAttribute('data-theme', next);
-    try { localStorage.setItem('tersio-theme', next); } catch (e) { }
-    syncThemeIcon();
+  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 PROVIDERS = [
     [/muse/i, 'Meta', 'meta', '#0082fb'],
@@ -188,6 +197,13 @@
   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';
+  }
   function modelTotal(byModel, m) {
     var b = byModel[m] || { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
     return b.input + b.output + b.cacheRead + b.cacheWrite;
@@ -302,6 +318,13 @@
     if (other) rows.push(['Other', other, 'var(--dim)']);
     return tipDayHTML(head, weekTotal, rows.length ? rows : [['no activity', 0, 'var(--dim)']]);
   }
+  // Shared empty state (shadcn pattern): icon chip + title + hint. Callers
+  // inject the HTML; render()'s trailing lucide.createIcons() paints icons.
+  function emptyState(icon, title, desc) {
+    return '<span class="empty-icon"><i data-lucide="' + icon + '" class="size-5"></i></span>' +
+      '<p class="empty-title">' + title + '</p>' +
+      '<p class="empty-desc">' + desc + '</p>';
+  }
   function renderGraph(byDay) {
     var g = document.getElementById('graph');
     g.innerHTML = '';
@@ -312,6 +335,15 @@
       var b = byDay[day];
       sums[day] = b.input + b.output + b.cacheRead + b.cacheWrite;
     });
+    var hasData = Object.keys(sums).some(function(k) { return sums[k] > 0; });
+    document.getElementById('emptyGraph').classList.toggle('hidden', hasData);
+    document.getElementById('graph').style.display = hasData ? '' : 'none';
+    document.getElementById('graphMonths').style.display = hasData ? '' : 'none';
+    if (!hasData) {
+      document.getElementById('graphRange').textContent = '';
+      document.getElementById('graphCap').textContent = 'no data in trailing 12 months';
+      return;
+    }
     // per-day values under the active mode
     var dayKeys = [], wk;
     for (wk = 0; wk < 53; wk++) for (var di = 0; di < 7; di++) {
@@ -428,6 +460,7 @@
     var tops = topModels(byModel, 8).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 card = document.createElement('div');
@@ -493,8 +526,10 @@
       hoverModel(li, m);
       ol.appendChild(li);
     });
-    if (!tops.length) ol.innerHTML = '<li class="mono text-sm px-4 py-6" style="color: var(--dim)">no session tokens yet</li>';
-    else if ('IntersectionObserver' in window && !reduce) {
+    document.getElementById('modelsCount').textContent = tops.length ? tops.length + ' models' : '';
+    ol.style.display = tops.length ? '' : 'none';
+    document.getElementById('emptyModels').classList.toggle('hidden', tops.length > 0);
+    if (tops.length && 'IntersectionObserver' in window && !reduce) {
       var fio = new IntersectionObserver(function(entries) {
         entries.forEach(function(e) {
           if (e.isIntersecting) {
@@ -504,7 +539,7 @@
         });
       }, { threshold: 0.2 });
       fio.observe(ol);
-    } else {
+    } else if (tops.length) {
       ol.querySelectorAll('.bar-fill').forEach(function(f) { f.style.width = f.dataset.w || '0'; });
     }
     if (hasGsap && hasST && !cardsShown && tops.length) {
@@ -669,6 +704,29 @@
     var el = document.getElementById('usdSpark');
     el.innerHTML = '';
     var keys = Object.keys(byDay).sort().slice(-30);
+    // Zero state: the spark strip is a fixed h-16, so a placeholder inside it
+    // overflows onto the big number. Hide the number, strip, and stats, and
+    // mount one placeholder in the card body instead. Restored below on data.
+    var mid = el.parentElement || null, card = mid && mid.parentElement ? mid.parentElement : null;
+    var usdEl = document.getElementById('usd'), noteEl = document.getElementById('usdNote');
+    var ex = document.getElementById('emptyUsd');
+    if (!keys.length && card && mid) {
+      if (!ex) {
+        ex = document.createElement('div');
+        ex.id = 'emptyUsd'; ex.className = 'empty'; ex.style.marginTop = '16px';
+        ex.innerHTML = emptyState('trending-up', 'No cost data yet', 'Daily spend will spark here once sessions report tokens.');
+        card.insertBefore(ex, mid);
+      }
+      el.style.display = 'none'; mid.style.display = 'none';
+      if (usdEl) usdEl.style.display = 'none';
+      if (noteEl) noteEl.style.display = 'none';
+    } else {
+      if (ex && ex.parentElement) ex.parentElement.removeChild(ex);
+      el.style.display = '';
+      if (mid) mid.style.display = '';
+      if (usdEl) usdEl.style.display = '';
+      if (noteEl) noteEl.style.display = '';
+    }
     var rate = total ? usd / total : 0;
     var max = 1, vols = [];
     keys.forEach(function(k) {
@@ -719,6 +777,11 @@
     var byDay = d.byDay || {};
     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], ['pathRtk', dp.rtk]].forEach(function(pair) {
+      var pel = document.getElementById(pair[0]);
+      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() {
@@ -760,6 +823,7 @@
     bindCmdTable();
     renderGraph(d.byDay || {});
     renderModels();
+    renderRecent();
     renderCmd();
 
     if (window.lucide) lucide.createIcons();
@@ -770,6 +834,34 @@
     observe();
   }
 
+  function renderRecent() {
+    var body = document.getElementById('recent');
+    body.innerHTML = '';
+    var rows = (DATA.recent || []).slice(0, 13);
+    rows.forEach(function(r, i) {
+      var v = vendorOf(r.m);
+      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>' +
+        '<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;
+      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);
+      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);
+  }
+
   var seen = new WeakSet();
   function observe() {
     var els = document.querySelectorAll('.rise');
@@ -789,13 +881,42 @@
 
   function load() {
     fetch('data.json').then(function(r) { return r.json(); }).then(render).catch(function() {
-      document.getElementById('topTable').style.display = 'none';
-      document.getElementById('emptyTop').classList.remove('hidden');
+      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();
     });
   }
   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(); });
+  })();
+  (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();
+        }).catch(function() { label.textContent = 'Reset'; });
+      } else {
+        resetBtn.dataset.armed = '1';
+        label.textContent = 'Sure?';
+        setTimeout(function() { delete resetBtn.dataset.armed; if (label.textContent === 'Sure?') label.textContent = 'Reset'; }, 3000);
+      }
+    });
+  })();
   load();
   observe();
 })();

package/dashboard/styles.css

@@ -5,6 +5,7 @@
     --cell-0: rgba(24, 24, 27, .07);
     --cell-1: rgba(4, 120, 87, .3); --cell-2: rgba(4, 120, 87, .55);
     --cell-3: rgba(4, 120, 87, .8); --cell-4: #047857;
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.07);
   }
   html[data-theme="light"] { color-scheme: light; }
   html[data-theme="dark"] { color-scheme: dark; }
@@ -16,6 +17,7 @@
       --cell-0: rgba(255, 255, 255, .07);
       --cell-1: rgba(52, 211, 153, .3); --cell-2: rgba(52, 211, 153, .55);
       --cell-3: rgba(52, 211, 153, .8); --cell-4: #34d399;
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.55);
     }
   }
   body { background: var(--bg); color: var(--ink); }
@@ -34,6 +36,7 @@
     --cell-0: rgba(255, 255, 255, .07);
     --cell-1: rgba(52, 211, 153, .3); --cell-2: rgba(52, 211, 153, .55);
     --cell-3: rgba(52, 211, 153, .8); --cell-4: #34d399;
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.55);
   }
   .ticker { animation: tick 36s linear infinite; will-change: transform; }
   .ticker:hover { animation-play-state: paused; }
@@ -47,6 +50,8 @@
   }
   .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
   .rowline { border-bottom: 1px solid var(--line); }
+  #recentTable, #cmdTable { table-layout: fixed; }
+  #recentTable td:first-child, #cmdTable td:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 3px 10px; font-size: 11px; white-space: nowrap; }
   .pill.good { background: var(--accent-soft); color: var(--accent); }
   .pill.bad { background: rgba(248, 113, 113, .12); color: #f87171; }
@@ -84,21 +89,25 @@
   .rise { opacity: 0; transform: translateY(26px); }
   .rise.in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
   .tilt { transition: transform .25s cubic-bezier(.16, 1, .3, 1), background .25s; }
-  .tilt:hover { transform: translateX(6px); background: var(--accent-soft); }
+  .tilt:hover { transform: translateX(6px); box-shadow: var(--shadow-xs); }
   .seg button { color: var(--dim); border-radius: 8px; transition: background .2s, color .2s; cursor: pointer; }
   .seg button.on { background: var(--accent-soft); color: var(--ink); }
   .seg button:not(.on):hover { color: var(--ink); }
   .mrow { transition: background .25s; }
-  .mrow:hover { background: var(--accent-soft); }
+  .mrow:hover { box-shadow: var(--shadow-xs); }
   .stripcell { transition: background .25s; }
-  .stripcell:hover { background: var(--accent-soft); }
+  .stripcell:hover { box-shadow: var(--shadow-xs); }
   button, .tilt, .cell, .stripcell { cursor: pointer; }
   .btn-push { transition: transform .12s, background .2s; }
   .btn-push:hover { background: var(--accent-soft); }
   .btn-push:active { transform: scale(.96); }
   a.social { color: var(--ink); }
   a.social:hover { color: var(--accent); }
-  a.social svg { width: 16px; height: 16px; display: block; }
+  a.social img, a.social svg { width: 16px; height: 16px; display: block; }
+  html[data-theme="dark"] a.social img { filter: invert(1); }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) a.social img { filter: invert(1); }
+  }
   a.social:hover { outline: 1px solid var(--accent); outline-offset: 2px; }
   .cell { width: 100%; aspect-ratio: 1 / 1; border-radius: 3px; background: var(--cell-0); min-width: 0; }
   .cell.key { width: 11px; height: 11px; aspect-ratio: auto; flex-shrink: 0; }
@@ -117,19 +126,25 @@
   }
   html[data-theme="light"] .ghostimg { opacity: .06; filter: brightness(0); }
   #tip { position: fixed; z-index: 100; pointer-events: none; min-width: 230px; max-width: 300px;
-    background: color-mix(in srgb, var(--panel) 94%, transparent);
-    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
+    background: var(--panel);
     border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
-    box-shadow: 0 16px 48px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .15s; }
+    box-shadow: var(--shadow-xs); opacity: 0; transition: opacity .15s; }
   #tip.show { opacity: 1; }
   #tip .tt { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }
   #tip .tv { font-size: 13px; margin: 2px 0 8px; }
   #tip .tr { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2.5px 0; }
   #tip .sw { width: 9px; height: 9px; border-radius: 2.5px; flex-shrink: 0; }
   #tip .tn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .scrollarea { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
+  .scrollarea::-webkit-scrollbar { width: 8px; }
+  .scrollarea::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
+  .scrollarea::-webkit-scrollbar-track { background: transparent; }
+  .rrow { transition: background .2s; cursor: pointer; }
+  .rrow:hover { box-shadow: var(--shadow-xs); }
+  #recentTable thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
   #tip .tvr { flex-shrink: 0; }
   .modelcard { transition: background .25s; }
-  .modelcard:hover { background: var(--accent-soft); }
+  .modelcard:hover { box-shadow: var(--shadow-xs); }
 
   .heatmonth { font-size: 10px; }
   #graphMonths span { overflow: visible; white-space: nowrap; }
@@ -155,3 +170,26 @@
     .tilt, .btn-push, .mrow, .bar-fill { transition: none; }
     .hero-glow, .ticker { animation: none; }
   }
+  /* Empty states (shadcn pattern): dashed well, icon chip, title + hint. */
+  .empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; border: 1px dashed var(--line); border-radius: 12px; padding: 32px 16px; }
+  .empty.hidden { display: none; } /* beats .empty flex: same-file order, higher specificity than tailwind .hidden */
+  .empty-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--track); color: var(--dim); margin-bottom: 10px; }
+  .empty-title { font-weight: 600; font-size: 14px; color: var(--ink); margin: 0; }
+  .empty-desc { font-size: 12px; color: var(--dim); margin: 0; max-width: 340px; }
+  #reset:hover { box-shadow: 0 0 14px var(--accent-soft); border-color: var(--accent); }
+  /* Settings dialog (shadcn pattern over the native modal). */
+  .dlg { margin: auto; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 16px; padding: 20px; width: min(460px, calc(100vw - 32px)); box-shadow: 0 16px 48px rgba(0, 0, 0, .35); }
+  .dlg::backdrop { background: rgba(0, 0, 0, .8); }
+  .dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+  .dlg-title { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin: 0; }
+  .dlg-desc { font-size: 12px; color: var(--dim); margin: 2px 0 0; }
+  .dlg-label { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--dim); margin: 18px 0 8px; }
+  .dlg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+  .dlg-name { font-size: 13px; font-weight: 600; margin: 0; }
+  .dlg-hint { font-size: 12px; color: var(--dim); margin: 2px 0 0; }
+  .dlg-own { font-weight: 400; font-size: 11px; color: var(--dim); }
+  .dlg-paths { margin-top: 12px; display: grid; gap: 8px; }
+  .dlg-path { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-width: 0; overflow: hidden; }
+  .dlg-file { font-size: 11px; color: var(--dim); margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  #settingsBtn:hover { box-shadow: 0 0 14px var(--accent-soft); border-color: var(--accent); }
+  .dlg .seg button { display: grid; place-items: center; }

package/dashboard/template.html

@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="color-scheme" content="dark light">
-<script>(function(){try{var t=localStorage.getItem('tersio-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t);}catch(e){}})();</script>
+<script>(function(){try{var t=localStorage.getItem('tersio-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t);else document.documentElement.removeAttribute('data-theme');}catch(e){}})();</script>
 <title>Tersio Dashboard</title>
 <link rel="icon" type="image/png" href="brand.webp">
 <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
@@ -36,15 +36,63 @@
       <span id="clock">--:--</span>
     </span>
     <span class="hidden sm:block w-px h-5 shrink-0" style="background: var(--line)" aria-hidden="true"></span>
-    <button id="theme" class="btn-push flex shrink-0 items-center p-2 rounded-xl" style="border: 1px solid var(--line); color: var(--ink)" aria-label="Toggle dark mode">
-      <span id="iconMoon"><i data-lucide="moon" class="size-4"></i></span>
-      <span id="iconSun" class="hidden"><i data-lucide="sun" class="size-4"></i></span>
+    <button id="reset" class="btn-push mono flex shrink-0 items-center gap-2 text-xs pl-2.5 pr-3 py-2 rounded-xl" style="border: 1px solid var(--line); color: var(--ink)" aria-label="Reset tersio statistics">
+      <i data-lucide="rotate-ccw" class="size-3.5"></i><span class="hidden md:inline" id="resetLabel">Reset</span>
     </button>
-    <button id="reload" class="btn-push mono flex shrink-0 items-center gap-2 text-xs pl-2.5 pr-3 py-2 rounded-xl" style="border: 1px solid var(--line); color: var(--ink)" aria-label="Reload data">
-      <i data-lucide="refresh-cw" class="size-3.5"></i><span class="hidden md:inline">Reload</span>
+    <button id="settingsBtn" class="btn-push flex shrink-0 items-center p-2 rounded-xl" style="border: 1px solid var(--line); color: var(--ink)" aria-label="Open settings">
+      <i data-lucide="settings" class="size-4"></i>
     </button>
   </header>
 
+  <!-- Settings dialog (shadcn pattern, native modal) -->
+  <dialog id="settings" class="dlg" aria-labelledby="settingsTitle">
+    <div class="dlg-head">
+      <div class="min-w-0">
+        <p class="dlg-title" id="settingsTitle">Settings</p>
+        <p class="dlg-desc">Appearance, data refresh, and where statistics live.</p>
+      </div>
+      <button id="settingsClose" class="btn-push flex shrink-0 items-center p-2 rounded-xl" style="border: 1px solid var(--line); color: var(--ink)" aria-label="Close settings">
+        <i data-lucide="x" class="size-4"></i>
+      </button>
+    </div>
+    <p class="dlg-label">Appearance</p>
+    <div class="dlg-row">
+      <div class="min-w-0">
+        <p class="dlg-name">Theme</p>
+        <p class="dlg-hint">Light, dark, or follow the system.</p>
+      </div>
+      <div class="seg mono text-xs flex items-center gap-1 p-1 rounded-[10px]" style="border: 1px solid var(--line); background: var(--panel)" role="tablist" aria-label="Theme">
+        <button data-theme-val="light" class="px-2.5 py-1.5" role="tab" aria-label="Light" title="Light"><i data-lucide="sun" class="size-4"></i></button>
+        <button data-theme-val="dark" class="px-2.5 py-1.5" role="tab" aria-label="Dark" title="Dark"><i data-lucide="moon" class="size-4"></i></button>
+        <button data-theme-val="system" class="px-2.5 py-1.5" role="tab" aria-label="System" title="System"><i data-lucide="monitor" class="size-4"></i></button>
+      </div>
+    </div>
+    <p class="dlg-label">Data</p>
+    <div class="dlg-row">
+      <div class="min-w-0">
+        <p class="dlg-name">Reload</p>
+        <p class="dlg-hint">Re-read statistics from disk.</p>
+      </div>
+      <button id="reload" class="btn-push mono flex shrink-0 items-center gap-2 text-xs pl-2.5 pr-3 py-2 rounded-xl" style="border: 1px solid var(--line); color: var(--ink)" aria-label="Reload data">
+        <i data-lucide="refresh-cw" class="size-3.5"></i><span>Reload</span>
+      </button>
+    </div>
+    <div class="dlg-paths">
+      <div class="dlg-path">
+        <p class="dlg-name">Usage ledger <span class="dlg-own">tersio-owned · reset clears</span></p>
+        <p class="mono dlg-file" id="pathLedger" title="">–</p>
+      </div>
+      <div class="dlg-path">
+        <p class="dlg-name">Session transcripts <span class="dlg-own">host-owned · never touched</span></p>
+        <p class="mono dlg-file" id="pathSessions" title="">–</p>
+      </div>
+      <div class="dlg-path">
+        <p class="dlg-name">RTK history <span class="dlg-own">rtk-owned · never touched</span></p>
+        <p class="mono dlg-file" id="pathRtk" title="">–</p>
+      </div>
+    </div>
+  </dialog>
+
   <!-- Hero: centered total -->
   <section class="mx-auto max-w-6xl text-center pt-14 pb-10 relative">
     <div class="hero-glow" aria-hidden="true"></div>
@@ -110,17 +158,18 @@
   <section class="rise mt-3 flex rounded-xl overflow-hidden" style="border: 1px solid var(--line); background: var(--panel)" id="tokens" aria-label="Tokens by bucket"></section>
 
   <!-- Activity: full-width year heatmap -->
-  <section id="activity" class="rise mt-8 rounded-xl p-5 overflow-hidden" style="border: 1px solid var(--line); background: var(--panel); scroll-margin-top: 90px" aria-label="Activity graph">
+  <section id="activity" class="rise mt-8" style="scroll-margin-top: 90px" aria-label="Activity graph">
     <div class="flex items-center gap-2 mb-1">
       <i data-lucide="calendar-days" class="size-4" style="color: var(--accent)"></i>
-      <h2 class="display font-bold tracking-tight text-xl">Activity</h2>
-      <div class="seg mono text-xs flex items-center gap-1 ml-auto p-1 rounded-[10px]" style="border: 1px solid var(--line)" role="tablist" aria-label="Graph range">
+      <h2 class="display font-bold tracking-tight text-xl truncate min-w-0">Activity</h2>
+      <div class="seg mono text-xs flex items-center gap-1 ml-auto p-1 rounded-[10px]" style="border: 1px solid var(--line); background: var(--panel)" role="tablist" aria-label="Graph range">
         <button data-gmode="daily" class="on px-3 py-1.5" role="tab">Daily</button>
         <button data-gmode="weekly" class="px-3 py-1.5" role="tab">Weekly</button>
         <button data-gmode="cumulative" class="px-3 py-1.5" role="tab">Cumulative</button>
       </div>
     </div>
-    <p class="mono text-xs mb-4" style="color: var(--dim)"><span id="graphRange"></span> · <span id="graphCap">daily values / trailing 12 months</span></p>
+    <p class="mono text-xs mb-4 truncate" style="color: var(--dim)"><span id="graphRange"></span> · <span id="graphCap">daily values / trailing 12 months</span></p>
+    <div class="rounded-xl p-5 overflow-hidden" style="border: 1px solid var(--line); background: var(--panel)">
     <div class="pb-1">
       <div class="grid w-full" style="grid-template-columns: repeat(53, minmax(0, 1fr)); gap: 3px;" id="graph"></div>
     </div>
@@ -130,13 +179,19 @@
       <span>more</span>
     </div>
     <div class="heatmonth mono mt-2 grid w-full" style="color: var(--dim); grid-template-columns: repeat(53, minmax(0, 1fr)); gap: 3px;" id="graphMonths"></div>
+    <div id="emptyGraph" class="empty hidden">
+      <span class="empty-icon"><i data-lucide="calendar-x" class="size-5"></i></span>
+      <p class="empty-title">No activity yet</p>
+      <p class="empty-desc">Daily token activity will chart here once sessions report tokens.</p>
+    </div>
+    </div>
   </section>
 
   <!-- Top models: 3 columns -->
   <section class="mt-8" aria-label="Top models">
     <div class="flex items-center gap-2 mb-1">
       <i data-lucide="cpu" class="size-4" style="color: var(--accent)"></i>
-      <h2 class="display font-bold tracking-tight text-xl">Top models</h2>
+      <h2 class="display font-bold tracking-tight text-xl truncate min-w-0">Top models</h2>
       <span class="mono text-xs ml-auto" style="color: var(--dim)">usage across sessions</span>
     </div>
     <p class="mono text-xs mb-4" style="color: var(--dim)">week-over-week vs prior 7 days</p>
@@ -144,26 +199,61 @@
   </section>
 
 
-  <!-- Models list: full width -->
-  <section class="rise mt-8" aria-label="All models">
+  <!-- Models + recent: twin cards -->
+  <div class="rise grid grid-cols-12 grid-flow-dense gap-3 mt-8">
+  <section class="col-span-12 lg:col-span-7 rounded-xl p-5 overflow-hidden" style="border: 1px solid var(--line); background: var(--panel)" aria-label="All models">
     <div class="flex items-center gap-2 mb-1">
       <i data-lucide="layers" class="size-4" style="color: var(--accent)"></i>
-      <h2 class="display font-bold tracking-tight text-xl">Models</h2>
+      <h2 class="display font-bold tracking-tight text-xl truncate min-w-0">Models</h2>
+      <span class="mono text-xs ml-auto truncate shrink-0" style="color: var(--dim)" id="modelsCount"></span>
     </div>
     <p class="mono text-xs mb-4" style="color: var(--dim)">ranked by tokens / top 8</p>
-    <ol id="models" class="rounded-xl overflow-hidden" style="border: 1px solid var(--line); background: var(--panel)"></ol>
+    <div class="scrollarea" style="max-height:410px"><ol id="models" class="overflow-hidden"></ol></div>
+    <div id="emptyModels" class="empty hidden">
+      <span class="empty-icon"><i data-lucide="boxes" class="size-5"></i></span>
+      <p class="empty-title">No models yet</p>
+      <p class="empty-desc">Model token totals will appear here once sessions report tokens.</p>
+    </div>
+  </section>
+  <section class="col-span-12 lg:col-span-5 rounded-xl p-5 overflow-hidden" style="border: 1px solid var(--line); background: var(--panel)" aria-label="Recent requests">
+    <div class="flex items-center gap-2 mb-1">
+      <i data-lucide="history" class="size-4" style="color: var(--accent)"></i>
+      <h2 class="display font-bold tracking-tight text-xl truncate min-w-0">Recent requests</h2>
+      <span class="mono text-xs ml-auto truncate shrink-0" style="color: var(--dim)" id="recentCount"></span>
+    </div>
+    <p class="mono text-xs mb-4 truncate" style="color: var(--dim)">latest assistant messages</p>
+    <div class="scrollarea overflow-x-auto" style="max-height:410px">
+      <table class="w-full mono text-[13px]" id="recentTable">
+        <colgroup><col><col style="width:150px"><col style="width:90px"></colgroup>
+        <thead>
+          <tr class="text-left text-[11px] uppercase tracking-[0.14em]" style="color: var(--dim)">
+            <th class="font-normal py-2 pr-3">Model</th>
+            <th class="font-normal text-right py-2 pr-3">In / Out</th>
+            <th class="font-normal text-right py-2">When</th>
+          </tr>
+        </thead>
+        <tbody id="recent"></tbody>
+      </table>
+    </div>
+    <div id="emptyRecent" class="empty hidden">
+      <span class="empty-icon"><i data-lucide="inbox" class="size-5"></i></span>
+      <p class="empty-title">No requests yet</p>
+      <p class="empty-desc">Recent assistant messages will show here once sessions report tokens.</p>
+    </div>
   </section>
+  </div>
 
-  <!-- Command tools: session tool calls + measured RTK savings, one table -->
+  <!-- Command tools: own card, header outside like Models -->
   <section id="tools" class="rise mt-8 rounded-xl p-5 overflow-hidden" style="border: 1px solid var(--line); background: var(--panel); scroll-margin-top: 90px" aria-label="Command tools">
     <div class="flex items-center gap-2 mb-1">
       <i data-lucide="terminal" class="size-4" style="color: var(--accent)"></i>
-      <h2 class="display font-bold tracking-tight text-xl">Command tools</h2>
-      <span class="mono text-xs ml-auto" style="color: var(--dim)" id="toolsScope">tool calls in sessions</span>
+      <h2 class="display font-bold tracking-tight text-xl truncate min-w-0">Command tools</h2>
+      <span class="mono text-xs ml-auto truncate min-w-0" style="color: var(--dim)" id="toolsScope">tool calls in sessions</span>
     </div>
-    <p class="mono text-xs mb-4" style="color: var(--dim)">count · tokens saved · avg rate · avg time · share of executions</p>
+    <p class="mono text-xs mb-4 truncate" style="color: var(--dim)">count · tokens saved · avg rate · avg time · share of executions</p>
     <div class="overflow-x-auto">
       <table class="w-full mono text-[13px]" id="cmdTable">
+        <colgroup><col style="width:40px"><col><col style="width:90px"><col style="width:90px"><col style="width:90px"><col style="width:90px"><col style="width:140px"></colgroup>
         <thead>
           <tr class="text-left text-[11px] uppercase tracking-[0.14em]" style="color: var(--dim)">
             <th class="font-normal text-right pr-3 py-2 w-10">#</th>
@@ -178,7 +268,11 @@
         <tbody id="cmdBody"></tbody>
       </table>
     </div>
-    <p id="emptyCmd" class="mono text-sm py-6 text-center hidden" style="color: var(--dim)">No tool calls or RTK measurements yet.</p>
+    <div id="emptyCmd" class="empty hidden">
+      <span class="empty-icon"><i data-lucide="wrench" class="size-5"></i></span>
+      <p class="empty-title">No tool data yet</p>
+      <p class="empty-desc">Session tool calls and RTK measurements will appear here once recorded.</p>
+    </div>
     <div id="cmdPager" class="mono text-xs mt-4 flex flex-wrap items-center gap-x-4 gap-y-3" style="color: var(--dim)">
       <span id="cmdRange">Showing 0 of 0</span>
       <span class="seg flex items-center gap-1 p-1 rounded-[10px]" style="border: 1px solid var(--line)" role="group" aria-label="Rows per page">
@@ -192,16 +286,14 @@
     <p class="mono text-[11px] mt-3" style="color: var(--dim)">saved / avg / time are RTK-metered per command — session tools without metering show –. caveman + ponytail gains are instruction-following, bench-measured in BENCHMARK.md.</p>
   </section>
 
-  <footer class="mono text-xs mt-12 pt-4" style="color: var(--dim); border-top: 1px solid var(--line)">
-
   <footer class="mono text-xs mt-12 pt-4" style="color: var(--dim); border-top: 1px solid var(--line)">
     <div class="flex flex-wrap items-center gap-x-4 gap-y-3">
       <span>© 2026 Tersio. KurutoDenzeru. All rights reserved.</span>
       <span class="pill flat" id="verChip">tersio</span>
       <span class="ml-auto flex items-center gap-1" style="color: var(--ink)">
-<a href="https://github.com/KurutoDenzeru/tersio" target="_blank" rel="noopener" aria-label="GitHub" class="btn-push social grid size-8 place-items-center rounded-lg"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a>
+<a href="https://github.com/KurutoDenzeru/tersio" target="_blank" rel="noopener" aria-label="GitHub" class="btn-push social grid size-8 place-items-center rounded-lg"><img height="16" width="16" src="https://cdn.jsdelivr.net/npm/simple-icons@v16/icons/github.svg" alt="GitHub"></a>
 <a href="https://linkedin.com/in/kurtcalacday/" target="_blank" rel="noopener" aria-label="LinkedIn" class="btn-push social grid size-8 place-items-center rounded-lg"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a>
-<a href="https://instagram.com/krtclcdy/" target="_blank" rel="noopener" aria-label="Instagram" class="btn-push social grid size-8 place-items-center rounded-lg"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg></a>
+<a href="https://instagram.com/krtclcdy/" target="_blank" rel="noopener" aria-label="Instagram" class="btn-push social grid size-8 place-items-center rounded-lg"><img height="16" width="16" src="https://cdn.jsdelivr.net/npm/simple-icons@v16/icons/instagram.svg" alt="Instagram"></a>
 </span>
     </div>
   </footer>

package/extensions/caveman-session/index.js

@@ -1,7 +1,7 @@
 import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
+import { activeModesSummary, asPromptArray, getSharedComboState, isComboPresetActive, isOmpSubagentPrompt, lastCustomValue, normalizeInputCommand, normalizeMode, paintStatusBar, reconcileSharedComboEntries, sessionEntries, setSharedComboListener, setSharedComboMode } from '../shared/session-state.js';
 import { dirname, join } from 'node:path';
-import { activeModesSummary, asPromptArray, getSharedComboState, isComboPresetActive, isOmpSubagentPrompt, lastCustomValue, normalizeInputCommand, normalizeMode, paintStatusBar, reconcileSharedComboEntries, sessionEntries, setSharedComboMode } from '../shared/session-state.js';
 import { readCavemanDefault } from '../shared/plugin-settings.js';
 const CAVERN_DIR = dirname(fileURLToPath(import.meta.url));
 const RULE_PATH = join(CAVERN_DIR, 'rule.md');
@@ -74,6 +74,17 @@ export default function cavemanSessionExtension(pi) {
         return true;
     }
     pi.setLabel?.('Caveman session toggle');
+    // Live mirror: a /tersio or /combo switch publishes shared state — adopt
+    // it at once so the next turn injects the new mode with no session reload.
+    // Stable identity, so the bridge set dedupes across re-inits.
+    function syncFromShared(state) {
+        const mode = normalizeMode('caveman', state.caveman);
+        if (mode) {
+            currentMode = mode;
+            syncStatus();
+        }
+    }
+    setSharedComboListener(syncFromShared);
     pi.registerCommand?.('caveman', {
         description: 'Toggle terse caveman replies for this session',
         handler: async (args, ctx) => {