@krtclcdy/tersio 2.20.1 → 2.22.0

package/dashboard/share.js

@@ -0,0 +1,218 @@
+(function() {
+  var T = window.Tersio;
+  var fmt = T.fmt, fmtShort = T.fmtShort, fxMoney = T.fxMoney, toast = T.toast;
+  (function initShare() {
+    function dayStr(d) { return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0'); }
+    function streak(byDay) {
+      var cur = new Date(); cur.setHours(0, 0, 0, 0);
+      var key = dayStr(cur);
+      if (!byDay[key]) { cur.setDate(cur.getDate() - 1); key = dayStr(cur); if (!byDay[key]) return 0; }
+      var n = 0;
+      while (byDay[key]) { n++; cur.setDate(cur.getDate() - 1); key = dayStr(cur); }
+      return n;
+    }
+    function shareStats() {
+      var t = (T.getData() && T.getData().tokens) || { input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
+      var total = t.input + t.output + t.cacheRead + t.cacheWrite;
+      var runs = (T.getData() && T.getData().messages) || 0;
+      var byModel = (T.getData() && T.getData().byModel) || {};
+      var models = Object.keys(byModel).length;
+      var cost = (T.getData() && T.getData().usd) || 0;
+      var best = 0, bestDay = '';
+      Object.keys((T.getData() && T.getData().byDay) || {}).forEach(function(k) {
+        var b = (T.getData() && T.getData().byDay)[k];
+        var v = b.input + b.output + b.cacheRead + b.cacheWrite;
+        if (v > best) { best = v; bestDay = k; }
+      });
+      return { total: total, runs: runs, avg: runs ? Math.round(total / runs) : 0, saved: (T.getData() && T.getData().savedUsd) || 0, streak: streak((T.getData() && T.getData().byDay) || {}), best: best, bestDay: bestDay, cost: cost, models: models };
+    }
+    function shareText() {
+      var s = shareStats();
+      return fmtShort(s.total) + ' tokens / ' + fmt(s.runs) + ' runs / ' + fmtShort(s.avg) + ' per run. Saved ' + fxMoney(s.saved) + ' via cache. ' + s.streak + '-day streak. My AI spend, tracked with Tersio.';
+    }
+    var brandURI = null, brandQueued = false;
+    function loadBrand() {
+      if (brandURI || brandQueued || typeof fetch !== 'function') return;
+      brandQueued = true;
+      fetch('brand.webp').then(function(r) { return r.blob(); }).then(function(b) {
+        var fr = new FileReader();
+        fr.onload = function() { brandURI = fr.result; };
+        fr.readAsDataURL(b);
+      }).catch(function() { });
+    }
+    loadBrand();
+    function paint() {
+      var s = shareStats();
+      document.getElementById('shareTotal').textContent = fmtShort(s.total) + ' tokens';
+      document.getElementById('shareRuns').textContent = 'across ' + fmt(s.runs) + ' agent runs';
+      document.getElementById('shareAvg').textContent = fmtShort(s.avg) + ' / run';
+      document.getElementById('shareSaved').textContent = fxMoney(s.saved);
+      document.getElementById('shareBest').textContent = fmtShort(s.best);
+      document.getElementById('shareBest').title = s.bestDay || '';
+      document.getElementById('shareCost').textContent = fxMoney(s.cost);
+      document.getElementById('shareModels').textContent = String(s.models);
+      document.getElementById('shareStreak').textContent = s.streak + (s.streak === 1 ? ' day' : ' days');
+      document.getElementById('shareBest').textContent = fmtShort(s.best);
+      document.getElementById('shareBest').title = s.bestDay || '';
+      document.getElementById('shareCost').textContent = fxMoney(s.cost);
+      document.getElementById('shareModels').textContent = String(s.models);
+      document.getElementById('shareStreak').textContent = s.streak + (s.streak === 1 ? ' day' : ' days');
+      paintHeat();
+    }
+    function heatVals(count) {
+      var byDay = (T.getData() && T.getData().byDay) || {};
+      var d = new Date(); d.setHours(0, 0, 0, 0); d.setDate(d.getDate() - (count - 1));
+      var vals = [], max = 0;
+      for (var i = 0; i < count; i++) {
+        var k = dayStr(d);
+        var b = byDay[k], v = b ? T.dayTotal(b) : 0;
+        vals.push(v); if (v > max) max = v;
+        d.setDate(d.getDate() + 1);
+      }
+      return { vals: vals, max: max };
+    }
+    function heatLevel(v, max) {
+      var s = max ? Math.sqrt(v / max) : 0;
+      return !v ? '' : s >= 0.7 ? ' l4' : s >= 0.45 ? ' l3' : s >= 0.2 ? ' l2' : ' l1';
+    }
+    function paintHeat() {
+      var el = document.getElementById('shareHeat');
+      if (!el) return;
+      // GitHub layout: 26 weekly columns × 7 weekday rows, oldest first.
+      var h = heatVals(182), out = [];
+      for (var d = 0; d < 7; d++) {
+        for (var w = 0; w < 26; w++) {
+          out.push('<span class="cell' + heatLevel(h.vals[w * 7 + d], h.max) + '"></span>');
+        }
+      }
+      el.innerHTML = out.join('');
+    }
+    function copyText(text, okMsg) {
+      function done() { toast('Copied', okMsg, 'copy'); }
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(done, function() { fallback(); });
+      } else fallback();
+      function fallback() {
+        try {
+          var ta = document.createElement('textarea');
+          ta.value = text; document.body.appendChild(ta); ta.select();
+          document.execCommand('copy'); ta.remove(); done();
+        } catch (e) { toast('Copy failed', 'Select the text manually.', 'circle-alert'); }
+      }
+    }
+    function svgCard() {
+      var s = shareStats();
+      function e(x) { return String(x).replace(/&/g, '&amp;').replace(/</g, '&lt;'); }
+      // Render honors the active theme: explicit choice wins, otherwise the
+      // OS preference (same rule as applyTheme).
+      var themeChoice = null;
+      try { themeChoice = localStorage.getItem('tersio-theme'); } catch (err) { }
+      var dark = themeChoice ? themeChoice === 'dark'
+        : !!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+      var pal = dark
+        ? { bg: '#09090b', ink: '#f4f4f5', dim: '#a1a1aa', accent: '#34d399' }
+        : { bg: '#ffffff', ink: '#18181b', dim: '#52525b', accent: '#047857' };
+      var h = heatVals(182);
+      var cw = 32, gap = 9, step = cw + gap, gx = 64, gy = 340, grid = '';
+      for (var gd = 0; gd < 7; gd++) {
+        for (var gw = 0; gw < 26; gw++) {
+          var gv = h.vals[gw * 7 + gd];
+          var gs = h.max ? Math.sqrt(gv / h.max) : 0;
+          var go = gv ? (0.45 + 0.55 * gs).toFixed(2) : 0.13;
+          grid += '<rect x="' + (gx + gw * step) + '" y="' + (gy + gd * step) + '" width="' + cw + '" height="' + cw + '" rx="8" fill="' + pal.accent + '" opacity="' + go + '"/>';
+        }
+      }
+      var streakTxt = s.streak + (s.streak === 1 ? ' day' : ' days');
+      var logo = brandURI ? '<clipPath id="blogo"><rect x="1012" y="40" width="124" height="124" rx="62"/></clipPath>' +
+        '<image x="1012" y="40" width="124" height="124" clip-path="url(#blogo)" href="' + brandURI + '"/>' : '';
+      return '<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="850" viewBox="0 0 1200 850">' +
+        '<rect width="1200" height="850" rx="28" fill="' + pal.bg + '"/>' +
+        '<path d="M1090 700 L980 800 h70 l-8 60 80 -96 h-70 l8 -64 z" fill="none" stroke="' + pal.accent + '" stroke-width="14" opacity="0.08" stroke-linejoin="round"/>' +
+        '<text x="64" y="80" font-family="monospace" font-size="26" letter-spacing="6" fill="' + pal.accent + '">TERSIO · USAGE PROFILE</text>' +
+        '<text x="60" y="250" font-family="monospace" font-size="130" font-weight="bold" fill="' + pal.ink + '">' + e(fmtShort(s.total) + ' tokens') + '</text>' +
+        '<text x="64" y="300" font-family="monospace" font-size="30" fill="' + pal.dim + '">across ' + e(fmt(s.runs)) + ' agent runs</text>' +
+        grid +
+        '<text x="64" y="680" font-family="monospace" font-size="24" letter-spacing="3" fill="' + pal.dim + '">AVG / RUN</text>' +
+        '<text x="64" y="725" font-family="monospace" font-size="40" font-weight="bold" fill="' + pal.ink + '">' + e(fmtShort(s.avg) + ' / run') + '</text>' +
+        '<text x="430" y="680" font-family="monospace" font-size="24" letter-spacing="3" fill="' + pal.dim + '">SAVED</text>' +
+        '<text x="430" y="725" font-family="monospace" font-size="40" font-weight="bold" fill="' + pal.ink + '">' + e(fxMoney(s.saved)) + '</text>' +
+        '<text x="830" y="680" font-family="monospace" font-size="24" letter-spacing="3" fill="' + pal.dim + '">DAY STREAK</text>' +
+        '<text x="830" y="725" font-family="monospace" font-size="40" font-weight="bold" fill="' + pal.ink + '">' + e(streakTxt) + '</text>' +
+        '<text x="64" y="775" font-family="monospace" font-size="24" letter-spacing="3" fill="' + pal.dim + '">BEST DAY</text>' +
+        '<text x="64" y="820" font-family="monospace" font-size="40" font-weight="bold" fill="' + pal.ink + '">' + e(fmtShort(s.best)) + '</text>' +
+        '<text x="430" y="775" font-family="monospace" font-size="24" letter-spacing="3" fill="' + pal.dim + '">EST. COST</text>' +
+        '<text x="430" y="820" font-family="monospace" font-size="40" font-weight="bold" fill="' + pal.ink + '">' + e(fxMoney(s.cost)) + '</text>' +
+        '<text x="830" y="775" font-family="monospace" font-size="24" letter-spacing="3" fill="' + pal.dim + '">MODELS</text>' +
+        '<text x="830" y="820" font-family="monospace" font-size="40" font-weight="bold" fill="' + pal.ink + '">' + e(s.models) + '</text>' +
+        logo + '</svg>';
+    }
+    function pngBlob(cb) {
+      try {
+        var img = new Image();
+        var svg = new Blob([svgCard()], { type: 'image/svg+xml;charset=utf-8' });
+        var url = URL.createObjectURL(svg);
+        img.onload = function() {
+          try {
+            var c = document.createElement('canvas');
+            c.width = 1200; c.height = 850;
+            c.getContext('2d').drawImage(img, 0, 0, 1200, 850);
+            URL.revokeObjectURL(url);
+            if (c.toBlob) c.toBlob(function(b) { cb(b); }, 'image/png');
+            else cb(null);
+          } catch (e) { cb(null); }
+        };
+        img.onerror = function() { URL.revokeObjectURL(url); cb(null); };
+        img.src = url;
+      } catch (e) { cb(null); }
+    }
+    function copyImage(into) {
+      pngBlob(function(b) {
+        if (!b || !navigator.clipboard || !window.ClipboardItem) {
+          copyText(shareText(), 'Share text copied (image copy unsupported here).');
+          return;
+        }
+        navigator.clipboard.write([new ClipboardItem({ 'image/png': b })]).then(function() {
+          toast('Image copied', into, 'image');
+        }, function() {
+          copyText(shareText(), 'Share text copied (image copy blocked).');
+        });
+      });
+    }
+    document.getElementById('shareX').addEventListener('click', function() {
+      window.open('https://x.com/intent/post?text=' + encodeURIComponent(shareText() + ' #Tersio'), '_blank', 'noopener,width=560,height=460');
+    });
+    document.getElementById('shareReddit').addEventListener('click', function() {
+      window.open('https://www.reddit.com/submit?title=' + encodeURIComponent('My Tersio usage profile') + '&text=' + encodeURIComponent(shareText()), '_blank', 'noopener');
+    });
+    document.getElementById('shareCopy').addEventListener('click', function() { copyImage('Card copied — paste it straight into your post.'); });
+    document.getElementById('shareLinkedIn').addEventListener('click', function() {
+      window.open('https://www.linkedin.com/feed/', '_blank', 'noopener');
+      copyImage('Image copied — paste it into the LinkedIn composer.');
+    });
+    document.getElementById('sharePng').addEventListener('click', function() {
+      pngBlob(function(b) {
+        if (!b) { toast('Save failed', 'Browser blocked the render.', 'circle-alert'); return; }
+        try {
+          var a = document.createElement('a');
+          a.download = 'tersio-usage.png';
+          a.href = URL.createObjectURL(b);
+          a.click();
+          setTimeout(function() { URL.revokeObjectURL(a.href); }, 5000);
+          toast('Saved', 'Card downloaded as PNG.', 'download');
+        } catch (e) { toast('Save failed', 'Browser blocked the render.', 'circle-alert'); }
+      });
+    });
+    T.onRender(paint);
+    paint();
+    var sh = document.getElementById('shareDialog');
+    if (sh && typeof sh.showModal === 'function') {
+      document.getElementById('shareBtn').addEventListener('click', function() { paint(); sh.showModal(); });
+      document.getElementById('shareClose').addEventListener('click', function() { sh.close(); });
+      sh.addEventListener('click', function(ev) { if (ev.target === sh) sh.close(); });
+      sh.addEventListener('close', function() { document.body.style.overflow = ''; });
+      new MutationObserver(function() {
+        if (sh.open) document.body.style.overflow = 'hidden';
+      }).observe(sh, { attributes: true, attributeFilter: ['open'] });
+    }
+  })();
+})();

package/dashboard/styles.css

@@ -6,6 +6,7 @@
     --cell-1: rgba(4, 120, 87, .3); --cell-2: rgba(4, 120, 87, .55);
     --cell-3: rgba(4, 120, 87, .8); --cell-4: #047857;
     --danger: #dc2626; --danger-border: rgba(220, 38, 38, .35); --danger-soft: rgba(220, 38, 38, .05);
+    --warn-soft: rgba(217, 119, 6, .1); --warn-border: rgba(217, 119, 6, .4);
     --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.07);
   }
   html[data-theme="light"] { color-scheme: light; }
@@ -42,17 +43,8 @@
     --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.55);
   }
   html[data-theme="dark"] .modelsSection {
-    --panel: #ffffff;
-    --ink: #18181b;
-    --dim: #52525b;
-    --line: rgba(24, 24, 27, .12);
-    --track: rgba(24, 24, 27, .08);
-    --cell-0: rgba(24, 24, 27, .07);
-    --accent-soft: rgba(4, 120, 87, .12);
-    --accent: #047857;
-    color-scheme: light;
+    color-scheme: dark;
   }
-  html[data-theme="dark"] .modelsSection .brandmark.placeholder { background: #fff !important; color: #000 !important; }
   .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%); } }
@@ -144,7 +136,6 @@
   .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.placeholder { background: transparent !important; border: 1px solid var(--line); color: var(--dim); }
-html[data-theme="dark"] .brandmark.placeholder { background: #fff !important; color: #000 !important; }
   .brandmark img { width: 18px; height: 18px; }
   .brandmark svg { width: 18px; height: 18px; display: block; }
   .brandmark.sm { width: 28px; height: 28px; border-radius: 8px; }
@@ -206,6 +197,7 @@ html[data-theme="dark"] .brandmark.placeholder { background: #fff !important; co
     .live-dot { animation: none; }
     .tilt, .btn-push, .mrow, .bar-fill { transition: none; }
     .hero-glow, .ticker { animation: none; }
+    .skel { 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; }
@@ -236,6 +228,85 @@ html[data-theme="dark"] .brandmark.placeholder { background: #fff !important; co
   #reset:hover { border-color: var(--danger); box-shadow: 0 0 14px var(--danger-border); }
   .dlg .seg button { display: grid; place-items: center; }
 
+  /* Settings modal (sidebar + panes). Wide like the app settings panels. */
+  .dlg.setdlg { width: min(920px, calc(100vw - 32px)); max-height: min(88vh, 860px); padding: 0; overflow: hidden; display: none; }
+  .dlg.setdlg[open] { display: block; }
+  .set-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: min(70vh, 700px); max-height: inherit; }
+  .set-side { border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 10px; min-height: 0; background: var(--panel); }
+  .set-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; color: var(--dim); }
+  .set-search input { all: unset; flex: 1; min-width: 0; font-size: 13px; color: var(--ink); }
+  .set-nav { display: grid; gap: 2px; overflow-y: auto; }
+  .set-navitem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-size: 13px; cursor: pointer; text-align: left; }
+  .set-navitem:hover { background: var(--track); }
+  .set-navitem.on { background: var(--track); font-weight: 600; }
+  .set-navitem.hide { display: none; }
+  .set-ver { margin-top: auto; font-size: 11px; color: var(--dim); padding: 0 10px; }
+  .set-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+  .set-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
+  .set-pane > .dlg-row:first-child { margin-top: 14px; }
+  .set-panes { overflow-y: auto; min-height: 0; padding: 0 20px 20px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
+  .set-pane { display: none; }
+  .set-pane.on { display: block; animation: set-in .16s ease-out; }
+  @keyframes set-in { from { opacity: 0; transform: translateY(6px); } }
+  .set-note { margin: 2px 0 10px; }
+  .set-list { display: grid; gap: 2px; }
+  .set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
+  .set-row:last-child { border-bottom: 0; }
+  .set-row .k { font-weight: 600; }
+  .set-row .s { font-size: 12px; color: var(--dim); margin: 2px 0 0; }
+  .set-row .v { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12px; white-space: nowrap; }
+  .set-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--track); flex-shrink: 0; }
+  .set-dot.ok { background: var(--accent); }
+  .set-dot.bad { background: var(--danger); }
+  button.set-row { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; cursor: pointer; text-align: left; color: var(--ink); }
+  button.set-row:hover { background: var(--track); }
+  button.set-row[aria-selected="true"] .v { color: var(--accent); }
+  .selwrap { position: relative; flex-shrink: 0; }
+  .selbtn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 10px; padding: 7px 10px; font-size: 12px; cursor: pointer; }
+  .selbtn:hover { border-color: var(--accent); }
+  .selbtn svg { transition: transform .15s; }
+  .selbtn[aria-expanded="true"] svg { transform: rotate(180deg); }
+  .selpanel { position: fixed; z-index: 200; min-width: 148px; max-height: 260px; overflow-y: auto; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 8px 28px rgba(0, 0, 0, .28); }
+  .selopt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 7px; font-size: 12px; cursor: pointer; color: var(--ink); background: transparent; border: 0; text-align: left; }
+  .selopt:hover { background: var(--accent-soft); }
+  .selopt .tick { margin-left: auto; color: var(--accent); visibility: hidden; flex-shrink: 0; }
+  .selopt[aria-selected="true"] .tick { visibility: visible; }
+  .selopt[aria-selected="true"] { color: var(--accent); }
+  .set-list.set-scroll { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; }
+  #setDoctor { max-height: 380px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
+  .set-group { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--dim); margin: 12px 0 2px; }
+  .set-group:first-child { margin-top: 4px; }
+  .share-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--bg); }
+  .share-logo { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 12px; }
+  .dlg.shdlg { width: min(660px, calc(100vw - 32px)); max-height: min(92vh, 940px); overflow-y: auto; }
+  .sh-glow { position: absolute; left: 50%; top: 0; width: min(480px, 90%); height: 180px; transform: translate(-50%, -40%); pointer-events: none; background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 65%); }
+  .sh-heat { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 3px; margin-top: 16px; }
+  .sh-heat .cell { aspect-ratio: 1 / 1; width: 100%; min-width: 0; }
+  .sh-card { margin-top: 14px; }
+  .sh-card .ghosticon { width: 120px; height: 120px; right: -8px; bottom: -14px; }
+  .sh-card .ghosticon svg { width: 110px; height: 110px; }
+  .share-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--accent); margin: 0; }
+  .share-total { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.03em; margin: 6px 0 0; font-variant-numeric: tabular-nums; }
+  .share-sub { font-size: 12px; color: var(--dim); margin: 4px 0 0; }
+  .share-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
+  .share-mini-k { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--dim); margin: 0; }
+  .share-mini-v { font-size: 15px; font-weight: 700; margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
+  .share-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 10px; padding: 7px 12px; font-size: 12px; cursor: pointer; }
+  .share-btn:hover { border-color: var(--accent); }
+  .share-btn.share-icon { padding: 7px 9px; }
+  .skel-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
+  .skel-col { flex: 1; min-width: 0; }
+  .skel { display: block; border-radius: 6px; background: var(--track); animation: skel-pulse 1.2s ease-in-out infinite; }
+  .skel.t { height: 14px; width: 42%; }
+  .skel.s { height: 11px; width: 64%; margin-top: 6px; }
+  .skel.v { height: 12px; width: 64px; flex-shrink: 0; }
+  @keyframes skel-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
+  .set-pane[data-pane="diagnosis"] .dlg-row { margin-bottom: 14px; }
+  .set-fixrow { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
+  .set-fixhint { font-size: 11px; color: var(--dim); }
+  .set-fixbox { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; border: 1px solid var(--warn-border); border-radius: 12px; padding: 12px 14px; background: var(--warn-soft); }
+  @media (max-width: 640px) { .set-shell { grid-template-columns: minmax(0, 1fr); } .set-side { border-right: 0; border-bottom: 1px solid var(--line); } }
+
   /* Toaster (shadcn/ui sonner-style, dependency-free) */
   .toaster { position: fixed; inset: auto 16px 16px auto; z-index: 100; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); border: 0; padding: 0; background: transparent; overflow: visible; }
   .toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; box-shadow: var(--shadow-xs), 0 8px 24px rgba(0, 0, 0, .22); animation: toast-in .18s ease-out; }
@@ -273,7 +344,11 @@ html[data-theme="dark"] .brandmark.placeholder { background: #fff !important; co
   #mdSpark .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
   #mdSpark .dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
   #mdSpark .hoverdot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
-  .md-tip { position: absolute; pointer-events: none; background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); border-radius: 8px; padding: 6px 10px; font-size: 11px; line-height: 1.5; white-space: nowrap; max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; transform: translate(-50%, -110%); display: none; z-index: 5; font-variant-numeric: tabular-nums; }
+  .md-tip { position: absolute; pointer-events: none; background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); border-radius: 10px; padding: 10px 12px; font-size: 11px; line-height: 1.5; white-space: nowrap; max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; transform: translate(-50%, -110%); display: none; z-index: 5; font-variant-numeric: tabular-nums; }
+  .md-tip .tt { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--dim); }
+  .md-tip .tv { font-size: 14px; font-weight: 800; margin-top: 2px; }
+  .md-legend .row { cursor: default; border-radius: 7px; padding: 2px 4px; margin: 0 -4px; }
+  .md-legend .row:hover { background: var(--track); }
   .md-cols { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: dense; gap: 12px; }
   @media (min-width: 720px) { .md-cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
   .md-months { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .12em; }

package/dashboard/template.html

@@ -36,68 +36,128 @@
       <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="shareBtn" class="btn-push flex shrink-0 items-center p-2 rounded-xl" style="border: 1px solid var(--line); color: var(--ink)" aria-label="Share your usage">
+      <i data-lucide="share-2" class="size-4"></i>
+    </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, and where statistics live. <span id="verChip" class="mono">tersio</span></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">Usage DB <span class="dlg-own">tersio-owned · reset clears</span></p>
-        <p class="mono dlg-file" id="pathUsageDb" title="">–</p>
-      </div>
-    </div>
-    <div class="dlg-danger">
-      <p class="dlg-label">Danger zone</p>
-      <div class="dlg-row">
-        <div class="min-w-0">
-          <p class="dlg-name">Reset statistics</p>
-          <p class="dlg-hint">Clears tersio statistics. Host-owned files stay intact. Click twice to confirm.</p>
+  <!-- Settings modal (ChatGPT pattern): sidebar nav + content panes -->
+  <dialog id="settings" class="dlg setdlg" aria-labelledby="settingsTitle">
+    <div class="set-shell">
+      <aside class="set-side" aria-label="Settings sections">
+        <div class="set-search">
+          <i data-lucide="search" class="size-4"></i>
+          <input id="setSearch" type="search" placeholder="Search settings" aria-label="Search settings" autocomplete="off">
+        </div>
+        <nav class="set-nav" id="setNav" aria-label="Settings">
+          <button class="set-navitem on" data-pane="general"><i data-lucide="settings" class="size-4"></i><span>General</span></button>
+          <button class="set-navitem" data-pane="connection"><i data-lucide="plug" class="size-4"></i><span>Connection</span></button>
+          <button class="set-navitem" data-pane="diagnosis"><i data-lucide="stethoscope" class="size-4"></i><span>Diagnosis</span></button>
+          <button class="set-navitem" data-pane="data"><i data-lucide="database" class="size-4"></i><span>Data</span></button>
+        </nav>
+        <p class="mono set-ver" id="verChip">tersio</p>
+      </aside>
+      <div class="set-main">
+        <div class="set-head">
+          <p class="dlg-title" id="settingsTitle">General</p>
+          <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>
+        <div class="set-panes">
+          <section class="set-pane on" data-pane="general" aria-label="General">
+            <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>
+            <div class="dlg-row">
+              <div class="min-w-0">
+                <p class="dlg-name">Currency</p>
+                <p class="dlg-hint">Display currency for cost figures. Persists to tersio settings.</p>
+              </div>
+              <span class="selwrap">
+                <button id="setCurBtn" class="selbtn mono" aria-haspopup="listbox" aria-expanded="false"><span id="setCurLabel">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>
+                <span id="setCurPanel" class="selpanel hidden" role="listbox" aria-label="Display currency"></span>
+              </span>
+            </div>
+          </section>
+          <section class="set-pane" data-pane="connection" aria-label="Connection">
+            <div class="set-list" id="setHealth"></div>
+          </section>
+          <section class="set-pane" data-pane="diagnosis" aria-label="Diagnosis">
+            <p class="dlg-hint set-note">What works and what does not. Repair with <span class="mono">tersio doctor --fix</span>.</p>
+            <div class="dlg-row">
+              <div class="min-w-0">
+                <p class="dlg-name">Auto-check</p>
+                <p class="dlg-hint" id="setDiagChecked">Never checked.</p>
+              </div>
+              <span class="selwrap">
+                <button id="setSchedBtn" class="selbtn mono" aria-haspopup="listbox" aria-expanded="false"><span id="setSchedLabel">Manual</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>
+                <span id="setSchedPanel" class="selpanel hidden" role="listbox" aria-label="Diagnosis schedule"></span>
+              </span>
+            </div>
+            <div class="dlg-row">
+              <div class="min-w-0">
+                <p class="dlg-name">Scan</p>
+                <p class="dlg-hint">Runs every check fresh and refreshes the list below.</p>
+              </div>
+              <button id="setDiagRefresh" 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="Scan now">
+                <i data-lucide="scan-line" class="size-3.5"></i><span>Scan</span>
+              </button>
+            </div>
+            <div class="set-list" id="setDoctor"></div>
+            <div class="set-fixbox">
+              <div class="min-w-0">
+                <p class="dlg-name">Fix issues</p>
+                <p class="dlg-hint">Repairs extension files, config registrations, and the bundled ponytail copy. RTK binary and CLI update stay manual.</p>
+              </div>
+              <button id="setFixIssues" 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="Fix diagnosed issues">
+                <i data-lucide="wrench" class="size-3.5"></i><span id="setFixLabel">Fix issues</span>
+              </button>
+            </div>
+          </section>
+          </section>
+          <section class="set-pane" data-pane="data" aria-label="Data">
+            <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 DB <span class="dlg-own">tersio-owned · local hosted</span></p>
+                <p class="mono dlg-file" id="pathUsageDb" title="">–</p>
+              </div>
+            </div>
+            <div class="dlg-danger">
+              <p class="dlg-label">Danger zone</p>
+              <div class="dlg-row">
+                <div class="min-w-0">
+                  <p class="dlg-name">Reset statistics</p>
+                  <p class="dlg-hint">Clears tersio statistics. Host-owned files stay intact. Click twice to confirm.</p>
+                </div>
+                <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(--danger-border)" aria-label="Reset tersio statistics">
+                  <i data-lucide="rotate-ccw" class="size-3.5"></i><span id="resetLabel">Reset</span>
+                </button>
+              </div>
+            </div>
+          </section>
         </div>
-        <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(--danger-border)" aria-label="Reset tersio statistics">
-          <i data-lucide="rotate-ccw" class="size-3.5"></i><span id="resetLabel">Reset</span>
-        </button>
       </div>
     </div>
   </dialog>
@@ -392,6 +452,47 @@
     <p class="mono text-[11px] mt-3" style="color: var(--dim)">bash commands run through the rtk-wired OMP hook meter automatically; rows without metering show –. caveman + ponytail gains are instruction-following, bench-measured in BENCHMARK.md.</p>
   </section>
 
+  <!-- Share dialog: stats card preview + social actions -->
+  <dialog id="shareDialog" class="dlg shdlg" aria-labelledby="shareTitle">
+    <div class="sh-glow" aria-hidden="true"></div>
+    <div class="dlg-head">
+      <div class="min-w-0">
+        <p class="dlg-title" id="shareTitle">Share your usage</p>
+        <p class="dlg-desc">Download the card or post your stats.</p>
+      </div>
+      <button id="shareClose" class="btn-push flex shrink-0 items-center p-2 rounded-xl" style="border: 1px solid var(--line); color: var(--ink)" aria-label="Close share">
+        <i data-lucide="x" class="size-4"></i>
+      </button>
+    </div>
+    <div class="share-card sh-card" aria-hidden="false">
+      <span class="ghosticon" aria-hidden="true"><i data-lucide="zap"></i></span>
+      <img src="brand.webp" alt="" width="44" height="44" class="share-logo" aria-hidden="true">
+      <p class="mono share-kicker">tersio · usage profile</p>
+      <p class="mono share-total" id="shareTotal">-</p>
+      <p class="mono share-sub" id="shareRuns">-</p>
+      <div class="sh-heat" id="shareHeat" aria-hidden="true"></div>
+      <div class="share-grid mono">
+        <div><p class="share-mini-k">avg / run</p><p class="share-mini-v" id="shareAvg">-</p></div>
+        <div><p class="share-mini-k">saved</p><p class="share-mini-v" id="shareSaved">-</p></div>
+        <div><p class="share-mini-k">day streak</p><p class="share-mini-v" id="shareStreak">-</p></div>
+        <div><p class="share-mini-k">best day</p><p class="share-mini-v" id="shareBest">-</p></div>
+        <div><p class="share-mini-k">est. cost</p><p class="share-mini-v" id="shareCost">-</p></div>
+        <div><p class="share-mini-k">models</p><p class="share-mini-v" id="shareModels">-</p></div>
+      </div>
+    </div>
+    <div class="mono text-xs mt-4 flex flex-wrap items-center gap-2">
+      <span class="flex items-center gap-2">
+      <button id="shareX" class="btn-push share-btn share-icon" aria-label="Share on X" title="Share on X"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></button>
+      <button id="shareReddit" class="btn-push share-btn share-icon" aria-label="Share on Reddit" title="Share on Reddit"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.688-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/></svg></button>
+      <button id="shareLinkedIn" class="btn-push share-btn share-icon" aria-label="Share on LinkedIn" title="Share on LinkedIn"><svg width="14" height="14" 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></button>
+      </span>
+      <span class="flex items-center gap-2 ml-auto">
+      <button id="shareCopy" class="btn-push share-btn" aria-label="Copy card image"><i data-lucide="copy" class="size-3.5"></i><span>Copy</span></button>
+      <button id="sharePng" class="btn-push share-btn" aria-label="Download card as PNG"><i data-lucide="download" class="size-3.5"></i><span>Download</span></button>
+      </span>
+    </div>
+  </dialog>
+
   <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>
@@ -405,6 +506,10 @@
 </div>
 </main>
 
-<script src="app.js" defer></script>
+<script>window.__TERSIO_SNAP = null;</script>
+<script src="core.js" defer></script>
+<script src="charts.js" defer></script>
+<script src="settings.js" defer></script>
+<script src="share.js" defer></script>
 </body>
 </html>