@krtclcdy/tersio 2.9.0 → 2.11.0

package/dashboard/styles.css

@@ -0,0 +1,194 @@
+  :root {
+    --bg: #f4f4f5; --panel: #ffffff; --ink: #18181b; --dim: #52525b;
+    --line: rgba(24, 24, 27, .12); --accent: #047857; --accent-soft: rgba(4, 120, 87, .12);
+    --track: rgba(24, 24, 27, .08); --grid: rgba(4, 120, 87, .07);
+    --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; }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --bg: #09090b; --panel: #101014; --ink: #f4f4f5; --dim: #a1a1aa;
+      --line: rgba(255, 255, 255, .09); --accent: #34d399; --accent-soft: rgba(52, 211, 153, .1);
+      --track: rgba(255, 255, 255, .07); --grid: rgba(52, 211, 153, .05);
+      --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); }
+  .hero-glow { position: absolute; left: 50%; top: 44%; width: min(720px, 90vw); height: 300px;
+    transform: translate(-50%, -50%); pointer-events: none;
+    background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 65%);
+    animation: breathe 5s ease-in-out infinite; }
+  @keyframes breathe { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } }
+  .herototal { background: linear-gradient(180deg, var(--ink) 55%, var(--accent) 130%);
+    -webkit-background-clip: text; background-clip: text;
+    -webkit-text-fill-color: transparent; color: transparent; }
+  html[data-theme="dark"] {
+    --bg: #09090b; --panel: #101014; --ink: #f4f4f5; --dim: #a1a1aa;
+    --line: rgba(255, 255, 255, .09); --accent: #34d399; --accent-soft: rgba(52, 211, 153, .1);
+    --track: rgba(255, 255, 255, .07); --grid: rgba(52, 211, 153, .05);
+    --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; }
+  @keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+  .display { font-family: "Outfit", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+  .bg-blueprint {
+    background-image: linear-gradient(var(--grid) 1px, transparent 1px),
+      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
+    background-size: 44px 44px;
+    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 75%);
+  }
+  .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; }
+  .pill.flat { background: var(--track); color: var(--dim); }
+  .fxbtn { background: var(--track); color: var(--ink); border: 0; cursor: pointer; gap: 6px; }
+  .fxbtn:focus-visible { outline: 1px solid var(--accent); }
+  .fxbtn svg { transition: transform .15s; }
+  .fxbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
+  .fxpanel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 132px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 8px 28px rgba(0, 0, 0, .28); }
+  .fxopt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 7px; font-size: 11px; cursor: pointer; color: var(--ink); background: transparent; border: 0; text-align: left; }
+  .fxopt:hover, .fxopt.active { background: var(--accent-soft); }
+  .fxopt:focus-visible { outline: 1px solid var(--accent); }
+  .fxopt .tick { margin-left: auto; color: var(--accent); visibility: hidden; }
+  .fxopt[aria-selected="true"] .tick { visibility: visible; }
+  .bar-fill { background: var(--accent); border-radius: 999px; transform-origin: left; transition: width 1s cubic-bezier(.16, 1, .3, 1); }
+  .bar-track { background: var(--track); border-radius: 999px; }
+  .live-dot { background: var(--accent); box-shadow: 0 0 0 0 var(--accent-soft); animation: ping 2s cubic-bezier(0, 0, .2, 1) infinite; }
+  .thsort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-transform: inherit; letter-spacing: inherit; }
+  .thsort.num { float: right; }
+  .thsort:hover { color: var(--ink); }
+  .thsort:focus-visible { outline: 1px solid var(--accent); border-radius: 4px; }
+  .thsort .arr { font-size: 10px; color: var(--accent); }
+  th[aria-sort="none"] .arr { color: var(--dim); opacity: .55; }
+  .pgbtn { min-width: 26px; height: 26px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--dim); cursor: pointer; }
+  .pgbtn:hover:not(:disabled) { color: var(--ink); border-color: var(--accent); }
+  .pgbtn.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 700; }
+  .pgbtn:disabled { opacity: .35; cursor: default; }
+  .pgbtn:focus-visible { outline: 1px solid var(--accent); }
+  .rail { position: fixed; left: 14px; top: 50%; transform: translateY(-50%); z-index: 40; flex-direction: column; gap: 5px; }
+  .rail button { all: unset; width: 14px; height: 2px; border-radius: 2px; background: var(--track); cursor: pointer; transition: background .2s; }
+  .rail button.lit { background: var(--accent); }
+  .rail button:hover { background: var(--dim); }
+  .rail button:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
+  @keyframes ping { 75%, 100% { box-shadow: 0 0 0 9px transparent; } }
+  .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); 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 { box-shadow: var(--shadow-xs); }
+  .stripcell { transition: background .25s; }
+  .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 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; }
+  .cell.l1 { background: var(--cell-1); } .cell.l2 { background: var(--cell-2); }
+  .cell.l3 { background: var(--cell-3); } .cell.l4 { background: var(--cell-4); }
+  .brandmark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; color: #fff; }
+  .brandmark img { width: 18px; height: 18px; }
+  .brandmark.sm { width: 28px; height: 28px; border-radius: 8px; }
+  .brandmark.sm img { width: 14px; height: 14px; }
+  .brandmark .fb { display: none; width: 18px; height: 18px; }
+  .brandmark.sm .fb { width: 14px; height: 14px; }
+  .ghostimg { position: absolute; right: -6px; bottom: -10px; width: 88px; height: 88px;
+    opacity: .08; pointer-events: none; user-select: none; }
+  @media (prefers-color-scheme: light) {
+    :root:not([data-theme="dark"]) .ghostimg { opacity: .06; filter: brightness(0); }
+  }
+  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: var(--panel);
+    border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
+    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 { box-shadow: var(--shadow-xs); }
+
+  .heatmonth { font-size: 10px; }
+  #graphMonths span { overflow: visible; white-space: nowrap; }
+  .dock {
+    position: sticky; top: 12px; z-index: 50;
+    border: 1px solid var(--line); border-radius: 20px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
+  }
+  .dock img.brand { border-radius: 10px; }
+  .dock {
+    background:
+      linear-gradient(var(--panel), var(--panel)) padding-box,
+      linear-gradient(120deg, var(--accent-soft), var(--line) 30%, var(--line) 70%, var(--accent-soft)) border-box;
+    border: 1px solid transparent;
+  }
+  #reload:hover { box-shadow: 0 0 14px var(--accent-soft); border-color: var(--accent); }
+  .spark { display: flex; align-items: flex-end; gap: 3px; }
+  .spark > span { flex: 1; min-width: 3px; border-radius: 2px 2px 0 0; background: var(--accent); opacity: .45; }
+  .spark > span.top { opacity: 1; box-shadow: 0 0 8px var(--accent-soft); }
+  @media (prefers-reduced-motion: reduce) {
+    .rise { opacity: 1; transform: none; }
+    .live-dot { animation: none; }
+    .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-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; }
+  .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

@@ -0,0 +1,305 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<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);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>
+<script src="https://unpkg.com/lucide@latest"></script>
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/outfit@5/index.css">
+<link rel="stylesheet" href="styles.css">
+</head>
+<body class="min-h-[100dvh] antialiased">
+<div class="bg-blueprint pointer-events-none fixed inset-0" aria-hidden="true"></div>
+
+<main class="overflow-x-clip w-full max-w-full">
+<div class="relative mx-auto max-w-7xl px-4 sm:px-6 pb-16">
+  <!-- Scroll progress rail: fixed left ticks, accent fill by scroll fraction -->
+  <nav id="rail" class="rail hidden md:flex" aria-label="Scroll progress"></nav>
+
+  <!-- Floating dock navbar -->
+  <header class="dock mt-4 flex w-full items-center gap-2 px-3 py-2">
+    <a href="#" class="flex shrink-0 items-center gap-2.5 pl-1 pr-2" aria-label="Tersio dashboard home">
+      <img src="brand.webp" alt="Tersio" width="32" height="32" class="brand size-8 rounded-full">
+      <span class="leading-tight text-left">
+        <span class="block font-bold tracking-tight text-sm">TERSIO DASHBOARD</span>
+        <span class="mono block text-[11px]" style="color: var(--dim)">live token number feed</span>
+      </span>
+    </a>
+    <span class="mono hidden shrink-0 sm:flex items-center gap-2 text-xs px-2 ml-auto" style="color: var(--dim)">
+      <span class="live-dot inline-block size-2 rounded-full"></span>
+      <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="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="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>
+    <p class="hero-in mono text-[11px] uppercase tracking-[0.22em] mb-4 relative" style="color: var(--accent)">Live token feed</p>
+    <p class="hero-in mono font-bold tracking-tighter leading-none text-7xl md:text-8xl relative herototal" id="total">0</p>
+    <div class="hero-in relative mt-6 overflow-hidden" aria-hidden="true" style="mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent)">
+      <div class="ticker mono text-xs whitespace-nowrap inline-block" id="ticker" style="color: var(--dim)"></div>
+    </div>
+  </section>
+
+  <!-- Savings bento: big USD card + nested right rail -->
+  <section class="grid grid-cols-12 grid-flow-dense gap-3" aria-label="Savings">
+    <div class="rise col-span-12 lg:col-span-7 lg:row-span-2 rounded-xl p-6 flex flex-col justify-between" style="border: 1px solid var(--line); background: var(--panel)">
+      <div>
+        <div class="flex items-center justify-between gap-2">
+          <p class="mono text-[11px] uppercase tracking-[0.14em]" style="color: var(--dim)" id="costLabel">usd cost</p>
+          <span class="relative">
+            <button id="fxBtn" class="pill mono fxbtn" aria-haspopup="listbox" aria-expanded="false"><span id="fxCur">🇺🇸 USD</span><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></button>
+            <div id="fxPanel" class="fxpanel hidden" role="listbox" aria-label="Display currency"></div>
+          </span>
+        </div>
+        <p class="mono font-bold tracking-tighter leading-none mt-2 text-6xl lg:text-7xl" id="usd">-</p>
+      </div>
+      <div class="mt-4">
+        <div class="spark h-16" id="usdSpark"></div>
+        <div class="flex gap-4 mt-3 mono text-xs" style="color: var(--dim)">
+          <span>avg <span id="usdPerDay" style="color: var(--ink)">-</span>/day</span>
+          <span>top <span id="usdTopDay" style="color: var(--ink)">-</span></span>
+          <span title="Cache savings per $1 spent, vs full input price">x<span id="usdLeverage" style="color: var(--accent)">-</span> cache leverage</span>
+        </div>
+      </div>
+      <p class="mono text-[11px] mt-3" style="color: var(--dim)" id="usdNote">per-model price table</p>
+    </div>
+    <div class="col-span-12 lg:col-span-5 lg:row-span-2 grid grid-cols-2 grid-flow-dense gap-3 h-full grid-rows-[auto_1fr]">
+      <div class="rise col-span-2 rounded-xl p-5" style="border: 1px solid var(--line); background: var(--panel)">
+        <div class="flex items-center justify-between gap-2">
+          <div><p class="mono text-[11px] uppercase tracking-[0.14em]" style="color: var(--dim)">saved by cache</p>
+          <p class="mono font-bold text-3xl mt-1" style="color: var(--accent)" id="saved">-</p></div>
+          <span class="pill flat mono" title="Modeled estimate, not measured">est.</span>
+        </div>
+        <p class="mono text-[11px] mt-2" style="color: var(--dim)">est. vs full input price</p>
+      </div>
+      <div class="rise col-span-1 rounded-xl p-5" style="border: 1px solid var(--line); background: var(--panel)">
+        <div class="flex items-center justify-between gap-2">
+          <div><p class="mono text-[11px] uppercase tracking-[0.14em]" style="color: var(--dim)">co2</p>
+          <p class="mono font-bold text-3xl mt-1" id="co2">-</p>
+          <p class="mt-2"><span class="pill flat mono" title="Single-stream ceiling divided by 32-way served concurrency">served ÷32</span></p></div>
+        </div>
+        <p class="mono text-[11px] mt-2" style="color: var(--dim)">est. from output</p>
+      </div>
+      <div class="rise col-span-1 rounded-xl p-5" style="border: 1px solid var(--line); background: var(--panel)">
+        <div class="flex items-center justify-between gap-2">
+          <div><p class="mono text-[11px] uppercase tracking-[0.14em]" style="color: var(--dim)">cache share</p>
+          <p class="mono font-bold text-3xl mt-1" id="cacheShare">-</p>
+          <p class="mt-2"><span class="pill good mono" id="cacheDelta">-</span></p></div>
+        </div>
+        <p class="mono text-[11px] mt-2" style="color: var(--dim)">of tokens cached</p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Token strip: nonzero buckets only -->
+  <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" 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 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 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>
+    <div class="mono text-[11px] mt-3 flex items-center gap-1.5" style="color: var(--dim)">
+      <span>less</span>
+      <span class="cell key"></span><span class="cell key l1"></span><span class="cell key l2"></span><span class="cell key l3"></span><span class="cell key l4"></span>
+      <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 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>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-3" id="modelCards"></div>
+  </section>
+
+
+  <!-- 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 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>
+    <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: 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 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 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>
+            <th class="font-normal py-2 pr-3" aria-sort="none"><button class="thsort" data-sort="name">Tool / Command <span class="arr">⇅</span></button></th>
+            <th class="font-normal text-right py-2 pr-3" aria-sort="descending"><button class="thsort num" data-sort="count">Count <span class="arr">↓</span></button></th>
+            <th class="font-normal text-right py-2 pr-3" aria-sort="none"><button class="thsort num" data-sort="saved">Saved <span class="arr">⇅</span></button></th>
+            <th class="font-normal text-right py-2 pr-3" aria-sort="none"><button class="thsort num" data-sort="avgPct">Avg% <span class="arr">⇅</span></button></th>
+            <th class="font-normal text-right py-2 pr-3" aria-sort="none"><button class="thsort num" data-sort="avgMs">Time <span class="arr">⇅</span></button></th>
+            <th class="font-normal py-2 min-w-32">Impact</th>
+          </tr>
+        </thead>
+        <tbody id="cmdBody"></tbody>
+      </table>
+    </div>
+    <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">
+        <button data-pp="10" class="px-2.5 py-1" role="button">10</button>
+        <button data-pp="15" class="on px-2.5 py-1" role="button">15</button>
+        <button data-pp="25" class="px-2.5 py-1" role="button">25</button>
+        <button data-pp="50" class="px-2.5 py-1" role="button">50</button>
+      </span>
+      <span class="ml-auto flex items-center gap-1" id="cmdPages" role="navigation" aria-label="Pages"></span>
+    </div>
+    <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)">
+    <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"><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"><img height="16" width="16" src="https://cdn.jsdelivr.net/npm/simple-icons@v16/icons/instagram.svg" alt="Instagram"></a>
+</span>
+    </div>
+  </footer>
+</div>
+</main>
+
+<script src="app.js" defer></script>
+</body>
+</html>

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) => {

package/extensions/combo-toggle/index.js

@@ -78,8 +78,10 @@ export default function comboToggleExtension(pi) {
         return useState(reconcileSharedComboEntries(sessionEntries(ctx)), ctx);
     }
     function listen(ctx) {
+        // Stable identity: the bridge set dedupes, so repeated track()/command
+        // calls register once instead of stacking duplicate listeners.
         if (ctx?.hasUI)
-            setSharedComboListener((state) => useState(state));
+            setSharedComboListener(useState);
     }
     function track(ctx) {
         listen(ctx);
@@ -112,8 +114,6 @@ export default function comboToggleExtension(pi) {
             useState(setSharedComboLevel(level), ctx);
             const active = activeModesSummary(getSharedComboState());
             ctx?.ui?.notify?.(level === 'off' ? `Combo off — all tersio modes inactive for this session. Active: ${active}.` : `Combo ${level} on — ${active} active for this session.`, 'info');
-            if (ctx?.reload)
-                await ctx.reload();
         },
     });
     pi.on('session_start', async (_event, ctx) => {

package/extensions/rtk-session/index.js

@@ -1,6 +1,6 @@
 import os from 'node:os';
 import path from 'node:path';
-import { activeModesSummary, asPromptArray, getSharedComboState, isComboPresetActive, isOmpSubagentPrompt, lastCustomValue, normalizeInputCommand, paintStatusBar, reconcileSharedComboEntries, sessionEntries, setSharedComboMode } from '../shared/session-state.js';
+import { activeModesSummary, asPromptArray, getSharedComboState, isComboPresetActive, isOmpSubagentPrompt, lastCustomValue, normalizeInputCommand, paintStatusBar, reconcileSharedComboEntries, sessionEntries, setSharedComboListener, setSharedComboMode } from '../shared/session-state.js';
 import { readRtkDefault } from '../shared/plugin-settings.js';
 const DEFAULT_ENABLED = false;
 function asBoolean(value) {
@@ -48,6 +48,13 @@ export default function rtkSessionExtension(pi) {
         ctx?.ui?.notify?.(enabled ? `RTK on — compact shell output for this session. Active: ${active}.` : `RTK off. Active: ${active}.`, 'info');
     }
     pi.setLabel?.('RTK session toggle');
+    // Live mirror: a /tersio or /combo switch publishes shared state — adopt
+    // it at once so the next turn and the rtk_run gate see it, no reload.
+    function syncFromShared(state) {
+        enabled = state.rtk === 'on';
+        syncStatus();
+    }
+    setSharedComboListener(syncFromShared);
     pi.registerCommand?.('rtk', {
         description: 'Toggle RTK compact shell-output guidance for this session',
         handler: async (args, ctx) => {