cchubber 0.5.8 → 0.6.0

package/src/renderers/s1-report.js

@@ -0,0 +1,166 @@
+import { readFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { monthsBilled } from '../readers/plan.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PKG_VERSION = JSON.parse(readFileSync(join(__dirname, '..', '..', 'package.json'), 'utf-8')).version;
+
+function esc(s) {
+  if (!s) return '';
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
+}
+
+const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];
+const WORDS = ['zero','one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve'];
+const fmtUSD = (n) => '$' + (n >= 1000 || Number.isInteger(n) ? Math.round(n).toLocaleString('en-US') : n.toFixed(2));
+const fmtDate = (iso) => { const d = new Date(iso + 'T00:00:00Z'); return isNaN(d) ? iso : `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}, ${d.getUTCFullYear()}`; };
+const fmtBig = (n) => n >= 1e9 ? (n / 1e9).toFixed(1) + ' billion' : n >= 1e6 ? (n / 1e6).toFixed(1) + ' million' : Math.round(n).toLocaleString('en-US');
+const word = (n) => n < WORDS.length ? WORDS[n] : String(n);
+
+function familyShares(modelCosts) {
+  const fam = {};
+  let total = 0;
+  for (const [name, cost] of Object.entries(modelCosts || {})) {
+    if (!(cost > 0)) continue;
+    const f = /opus/i.test(name) ? 'Opus' : /sonnet/i.test(name) ? 'Sonnet' : /haiku/i.test(name) ? 'Haiku' : /fable/i.test(name) ? 'Fable' : null;
+    if (!f) continue;
+    fam[f] = (fam[f] || 0) + cost;
+    total += cost;
+  }
+  return Object.entries(fam).map(([f, c]) => ({ family: f, pct: total ? Math.round(c / total * 100) : 0 })).sort((a, b) => b.pct - a.pct);
+}
+
+// Each risk factor is a true sentence about this user's own logs, and it only appears when its data clears the bar.
+function riskFactors(report, plan) {
+  const { costAnalysis, cacheHealth, inflection, sessionIntel } = report;
+  const out = [];
+  const top = familyShares(costAnalysis.modelCosts)[0];
+  if (top && top.pct >= 50) out.push([`We depend on a single supplier.`, `All of our spend went to Anthropic, ${top.pct}% of it to ${top.family}.`]);
+  const peak = costAnalysis.peakDay;
+  if (peak && plan && peak.cost >= plan.monthlyUSD) {
+    const n = Math.floor(peak.cost / plan.monthlyUSD);
+    out.push([`One day cost more than ${word(n)} month${n === 1 ? '' : 's'} of our subscription.`, `On ${fmtDate(peak.date)}, we consumed ${fmtUSD(peak.cost)} of Claude across ${peak.messageCount.toLocaleString('en-US')} replies.`]);
+  } else if (peak) {
+    out.push([`Our costs are concentrated.`, `On ${fmtDate(peak.date)} alone, we consumed ${fmtUSD(peak.cost)} of Claude.`]);
+  }
+  const hours = sessionIntel?.hourDistribution;
+  if (Array.isArray(hours) && hours.length === 24) {
+    const total = hours.reduce((a, b) => a + b, 0);
+    const night = hours.slice(0, 5).reduce((a, b) => a + b, 0);
+    const peakHour = hours.indexOf(Math.max(...hours));
+    const label = peakHour === 0 ? 'midnight' : peakHour === 12 ? 'noon' : peakHour < 12 ? `${peakHour}am` : `${peakHour - 12}pm`;
+    if (total && night / total >= 0.2) out.push([`We do our best work at ${label}.`, `${Math.round(night / total * 100)}% of our Claude usage happened between midnight and 5am.`]);
+  }
+  if (inflection && inflection.direction === 'worsened' && inflection.multiplier >= 2) {
+    out.push([`Our cache efficiency fell ${inflection.multiplier}x on ${fmtDate(inflection.date)}, and we kept going.`, `The week before, we re-read ${inflection.beforeRatio.toLocaleString('en-US')} tokens for every token we got back. The week after, ${inflection.afterRatio.toLocaleString('en-US')}.`]);
+  }
+  const saved = cacheHealth?.savings?.fromCaching || 0;
+  if (saved > costAnalysis.totalCost) {
+    // cache-health prices every cached token at Opus rates, so this is an estimate and is shown rounded
+    out.push([`Caching is the only thing keeping this affordable.`, `Without it, the same work would have cost roughly ${fmtUSD(Math.round((costAnalysis.totalCost + saved) / 1000) * 1000)} at list price.`]);
+  }
+  const maxMin = sessionIntel?.maxDuration || 0;
+  if (maxMin >= 1440) out.push([`Our longest session spanned ${word(Math.round(maxMin / 1440))} days.`, `We did not close the terminal.`]);
+  return out.slice(0, 5);
+}
+
+export function renderS1(report, { plan = null, name = null, showProject = false } = {}) {
+  const { costAnalysis, cacheHealth, generatedAt } = report;
+  const days = costAnalysis.dailyCosts || [];
+  const first = days[0]?.date, last = days[days.length - 1]?.date;
+  const consumed = costAnalysis.totalCost || 0;
+  const months = first && last ? monthsBilled(first, last) : 1;
+  const paid = plan ? plan.monthlyUSD * months : null;
+  const multiple = paid ? consumed / paid : null;
+  const company = (name ? String(name).trim() : 'You').toUpperCase() + ', INC.';
+  const dated = fmtDate((generatedAt || new Date().toISOString()).slice(0, 10));
+  const cacheRead = costAnalysis.totals?.cacheReadTokens ?? cacheHealth?.totals?.cacheRead ?? 0;
+  const peak = costAnalysis.peakDay;
+  const risks = riskFactors(report, plan);
+  // Use of proceeds names the top project by output, only when asked, since repo names can be private
+  let proceeds = null;
+  if (showProject && report.projectBreakdown?.length) {
+    const byOut = [...report.projectBreakdown].sort((x, y) => (y.outputTokens || 0) - (x.outputTokens || 0));
+    const all = byOut.reduce((t, p) => t + (p.outputTokens || 0), 0);
+    if (all && byOut[0].name) proceeds = { name: byOut[0].name, pct: Math.round((byOut[0].outputTokens || 0) / all * 100) };
+  }
+
+  const rows = [
+    paid !== null ? ['Paid to Anthropic', `${fmtUSD(paid)}`, `${esc(plan.name)}, ${months} month${months === 1 ? '' : 's'}`] : null,
+    ['Claude consumed at API list prices', fmtUSD(consumed), `${costAnalysis.activeDays} active days`],
+    cacheRead ? ['Cached tokens read', fmtBig(cacheRead), ''] : null,
+    peak ? ['Largest single day', fmtUSD(peak.cost), fmtDate(peak.date)] : null,
+  ].filter(Boolean);
+
+  return `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${esc(company)} Form S-1 (parody) | CC Hubber</title>
+<style>
+  :root { --ink:#111; --paper:#fff; --desk:#e8e5de; --red:#c1121f; --rule:#111; }
+  * { box-sizing:border-box; }
+  body { margin:0; background:var(--desk); color:var(--ink); font-family:"Times New Roman", Times, "Liberation Serif", serif; }
+  .wrap { padding:40px 16px 64px; display:flex; justify-content:center; }
+  .paper { position:relative; width:820px; max-width:100%; background:var(--paper); padding:56px 64px 44px 92px; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 12px 40px rgba(60,50,30,.14); }
+  .herring { position:absolute; left:26px; top:56px; bottom:44px; width:40px; writing-mode:vertical-rl; transform:rotate(180deg); color:var(--red); font-size:10.5px; line-height:1.35; text-align:center; font-style:italic; }
+  .dated { text-align:right; font-size:12px; font-style:italic; margin:0 0 26px; }
+  .c { text-align:center; }
+  .agency { font-size:13px; font-weight:700; letter-spacing:.08em; line-height:1.5; }
+  .form { font-size:26px; font-weight:700; letter-spacing:.14em; margin:14px 0 2px; }
+  .act { font-size:12px; font-weight:700; letter-spacing:.06em; }
+  hr { border:0; border-top:1.5px solid var(--rule); margin:18px 0; }
+  hr.thin { border-top-width:.75px; margin:12px 0; }
+  .prospectus { font-size:13px; font-weight:700; letter-spacing:.3em; margin-top:22px; }
+  .co { font-size:44px; font-weight:700; letter-spacing:.02em; margin:6px 0 2px; line-height:1.05; }
+  .exact { font-size:12px; font-style:italic; }
+  .hero { margin:30px 0 8px; }
+  .hero .n { font-size:78px; font-weight:700; letter-spacing:-.01em; line-height:1; }
+  .hero .k { font-size:15px; margin-top:8px; }
+  .hero .x { display:inline-block; margin-top:16px; font-size:22px; font-weight:700; border:1.5px solid var(--ink); padding:4px 14px; }
+  table { width:100%; border-collapse:collapse; font-size:15px; margin:6px 0 2px; }
+  td { padding:6px 0; vertical-align:baseline; }
+  td.l { width:auto; }
+  td.l span { background:var(--paper); padding-right:6px; }
+  td.l::after { content:""; }
+  td.v { text-align:right; font-weight:700; white-space:nowrap; padding-left:10px; width:1%; }
+  td.m { text-align:right; font-size:12.5px; font-style:italic; color:#333; white-space:nowrap; padding-left:14px; width:1%; }
+  .lead { position:relative; }
+  .lead::before { content:""; position:absolute; left:0; right:0; bottom:10px; border-bottom:1px dotted #777; z-index:0; }
+  .lead span { position:relative; z-index:1; }
+  h2 { font-size:15px; font-weight:700; letter-spacing:.18em; text-align:center; margin:26px 0 10px; }
+  .risk { font-size:15px; line-height:1.45; margin:0 0 10px; }
+  .risk b { font-style:italic; }
+  .foot { font-size:11.5px; line-height:1.45; color:#333; margin-top:22px; }
+  .cmd { font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:13px; background:#f3f1ec; padding:2px 7px; border-radius:3px; color:#111; }
+  .gen { display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; font-size:12.5px; }
+  @media (max-width:640px) {
+    .paper { padding:36px 20px 30px 52px; }
+    .herring { left:12px; width:30px; font-size:9px; }
+    .co { font-size:30px; } .hero .n { font-size:52px; } .form { font-size:21px; }
+    table { font-size:13.5px; } td.m { display:none; }
+  }
+</style></head>
+<body><div class="wrap"><article class="paper" id="s1">
+  <div class="herring">The information in this prospectus is not complete and may be changed. We may not stop until the weekly limit resets. This prospectus is not an offer to sell anything and is not soliciting an offer to buy anything. It is a receipt.</div>
+  <p class="dated">Subject to Completion. Preliminary Prospectus dated ${esc(dated)}</p>
+  <div class="c agency">UNITED STATES<br>TOKENS AND EXCHANGE COMMISSION<br><span style="font-weight:400;font-style:italic;letter-spacing:0">~/.claude, Your Terminal</span></div>
+  <div class="c form">FORM S-1</div>
+  <div class="c act">REGISTRATION STATEMENT UNDER THE CLAUDE CODE ACT</div>
+  <hr>
+  <div class="c prospectus">PROSPECTUS</div>
+  <div class="c co">${esc(company)}</div>
+  <div class="c exact">(Exact name of heavy user as specified in its CLAUDE.md)</div>
+  <div class="c hero">
+    <div class="n">${fmtUSD(consumed)}</div>
+    <div class="k">of Claude consumed at API list prices${paid !== null ? `, against ${fmtUSD(paid)} paid` : ''}</div>
+    ${multiple ? `<div class="x">${multiple >= 10 ? Math.round(multiple) : multiple.toFixed(1)}&times; what we paid</div>` : ''}
+  </div>
+  <hr class="thin">
+  <table>${rows.map(r => `<tr><td class="l lead"><span>${esc(r[0])}</span></td><td class="v">${esc(r[1])}</td><td class="m">${r[2]}</td></tr>`).join('')}</table>
+  ${proceeds ? `<h2>USE OF PROCEEDS</h2><p class="risk" style="text-align:center">${proceeds.pct}% of our output went to one project: <b style="font-style:normal">${esc(proceeds.name)}</b>.</p>` : ''}
+  ${risks.length ? `<h2>RISK FACTORS</h2>${risks.map(([h, b]) => `<p class="risk"><b>${esc(h)}</b> ${esc(b)}</p>`).join('')}` : ''}
+  <hr class="thin">
+  <p class="foot">Anthropic&rsquo;s own prospectus, as reported by Reuters on September 28, 2026, says two customers made up nearly a quarter of its 2025 revenue. We are not one of them. Figures come from this machine&rsquo;s Claude Code logs${first ? ` (${esc(fmtDate(first))} to ${esc(fmtDate(last))})` : ''}, priced at public API rates, which are not Anthropic&rsquo;s own costs. This is a parody, not a securities filing.</p>
+  <div class="gen"><span>Get yours: <span class="cmd">npx cchubber --s1</span></span><span style="font-style:italic">CC Hubber v${esc(PKG_VERSION)}</span></div>
+</article></div></body></html>`;
+}

package/src/renderers/spent-well.js

@@ -0,0 +1,171 @@
+import { tokensLabel, int } from './vs-text.js';
+
+// "Did you spend them well?": a strip under the grade card, and an in-page panel that hands the user a prompt for their
+// own Claude Code. Everything is local except one optional anonymous count per button (see the script), which is only
+// wired in when telemetry was on at the time the report was made.
+
+export const PROMPT = `Be brutally honest with me. I want the truth, not encouragement.
+
+1. Find what I said I wanted: read CLAUDE.md, the README, any plan, roadmap, TODO or notes file, and my recent commit messages and branch names. If my goals aren't written down anywhere, say that first. That is a finding.
+2. Find what I actually did: the git log for the last 30 days, what shipped, what is half finished, what I started and dropped, and what I rewrote more than once.
+3. Compare the two. Where did the time and tokens really go? Which work moved the goal, and which was avoidance that felt like progress (polishing, refactoring, tooling, research, switching projects)?
+4. Give me a one-line verdict first, then the evidence with file names and commits. No softening and no compliment sandwich.
+5. Tell me the one thing I should do next and the one thing I should stop doing.
+6. Last, answer honestly: would a system that keeps my goals, plan and decisions in front of you every session, and pushes back when I drift, have closed this gap? That is what Mover OS does (moveros.dev). If it would not have helped, say so.`;
+
+export const MOVER_URL = 'https://moveros.dev/?utm_source=cchubber&utm_medium=report&utm_campaign=spent_well';
+export const INTRO = "Paste this into Claude Code in the project you've been working on. It compares what you set out to do with what you actually did. It won't be nice.";
+export const FIX_LINE = "The fix: Mover OS keeps what you said you'd do in front of Claude every session and calls it out when you drift.";
+export const EVENTS = ['spent_well_open', 'spent_well_copy', 'spent_well_mover'];
+
+export const FINE_ON = 'Clicking these buttons sends one anonymous count each (which button, this version, your anonymous install ID). Nothing from your usage. Turn it off with --no-telemetry.';
+export const FINE_OFF = 'Telemetry is off, so clicking these buttons sends nothing.';
+
+function esc(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+/** 25.3B, 740M, 12,300: the short form for the terminal. */
+export function tokensShort(n) {
+  const trim = (x) => x.toFixed(1).replace(/\.0$/, '');
+  return n >= 1e9 ? `${trim(n / 1e9)}B` : n >= 1e6 ? `${trim(n / 1e6)}M` : int(n);
+}
+
+/** Every token the logs hold, read from the same totals the repricing uses. */
+export function totalTokensOf(report) {
+  const t = report?.costAnalysis?.totals || {};
+  return (t.inputTokens || 0) + (t.outputTokens || 0) + (t.cacheReadTokens || 0) + (t.cacheWriteTokens || 0);
+}
+
+export function spentWellLine(report) {
+  const n = totalTokensOf(report);
+  return n > 0 ? `You burnt ${tokensShort(n)} tokens. Did you spend them well? Find out in your report.` : null;
+}
+
+const CSS = `
+#sw{
+  --sw-surface:#1b1c1d; --sw-deep:#0d0e0f; --sw-ink:#e3e2e3; --sw-dim:#c7c4d7; --sw-faint:#908fa0; --sw-line:rgba(70,69,84,.25);
+  --sw-accent:#c0c1ff; --sw-warm:#ffb690; --sw-on:#7fe0b0;
+  --sw-sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+  --sw-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
+  width:100%; max-width:740px; margin-left:auto; margin-right:auto; font-family:var(--sw-sans);
+}
+#sw .sw-strip{display:flex; align-items:center; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; background:var(--sw-surface);
+  border:1px solid rgba(70,69,84,.15); border-left:3px solid var(--sw-warm); border-radius:12px; padding:18px 22px}
+#sw .sw-line{margin:0; flex:1 1 280px; font-size:clamp(17px,2.4vw,21px); line-height:1.3; font-weight:700; color:var(--sw-dim)}
+#sw .sw-line b{color:var(--sw-ink); font-weight:800}
+#sw .sw-btn{appearance:none; font:inherit; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; color:var(--sw-ink); background:rgba(255,255,255,.05);
+  border:1px solid rgba(70,69,84,.3); border-radius:8px; padding:10px 18px; min-height:44px; display:inline-flex; align-items:center; justify-content:center}
+#sw .sw-btn:hover{background:#292a2b}
+#sw .sw-btn.sw-primary{background:var(--sw-accent); color:#1000a9; border-color:transparent}
+#sw .sw-btn.sw-primary:hover{background:#d3d4ff}
+#sw .sw-btn:focus-visible, #sw .sw-link:focus-visible, #sw .sw-prompt:focus-visible, #sw .sw-head:focus-visible{outline:2px solid var(--sw-accent); outline-offset:2px}
+#sw .sw-fine{margin:10px 4px 0; font-size:11px; line-height:1.5; color:var(--sw-faint)}
+
+#sw .sw-panel{margin-top:12px; background:var(--sw-surface); border:1px solid rgba(70,69,84,.15); border-radius:12px; padding:24px}
+#sw .sw-panel[hidden]{display:none}
+#sw .sw-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
+#sw .sw-head{margin:0; font-size:20px; line-height:1.2; font-weight:800; color:var(--sw-ink)}
+#sw .sw-intro{margin:12px 0 14px; font-size:15px; line-height:1.5; color:var(--sw-dim)}
+#sw .sw-prompt{display:block; width:100%; box-sizing:border-box; resize:vertical; background:var(--sw-deep); color:var(--sw-ink); border:1px solid rgba(144,143,160,.35);
+  border-radius:8px; padding:14px; font-family:var(--sw-mono); font-size:13px; line-height:1.55; min-height:160px}
+#sw .sw-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px}
+/* read out by screen readers; the button label already shows Copied to everyone else */
+#sw .sw-status{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
+#sw .sw-fix{margin:22px 0 0; padding-top:18px; border-top:1px solid var(--sw-line); font-size:16px; line-height:1.45; font-weight:600; color:var(--sw-dim)}
+#sw .sw-link{display:inline-flex; align-items:center; min-height:44px; margin-top:10px; font-size:14px; font-weight:700; color:var(--sw-accent)}
+
+@media (max-width:640px){
+  #sw .sw-strip{padding:16px}
+  #sw .sw-strip .sw-btn{flex:1 1 100%}
+  #sw .sw-panel{padding:18px 16px}
+  #sw .sw-prompt{font-size:12px}
+  #sw .sw-row .sw-btn{flex:1 1 100%}
+}
+`;
+
+// Plain ES5, no template literals and no ${ so it can sit in a String.raw block. It reads #sw-data and touches only #sw.
+const SCRIPT = String.raw`
+(function(){
+  var T = JSON.parse(document.getElementById('sw-data').textContent);   // { on: false } or { on: true, url, uid, v }
+  var btn = document.getElementById('sw-open'), panel = document.getElementById('sw-panel'), head = document.getElementById('sw-head');
+  var prompt = document.getElementById('sw-prompt'), copyBtn = document.getElementById('sw-copy'), status = document.getElementById('sw-status');
+  var closeBtn = document.getElementById('sw-close'), link = document.getElementById('sw-mover');
+  var sent = {}, timer = null;
+
+  // One anonymous count per button per page load, and only when telemetry was on when this report was made.
+  function beacon(ev){
+    if (!T.on || sent[ev]) return;
+    sent[ev] = true;
+    try { if (navigator.sendBeacon) navigator.sendBeacon(T.url, JSON.stringify({ event: ev, v: T.v, uid: T.uid })); } catch (e) {}
+  }
+  function fit(){ prompt.style.height = 'auto'; prompt.style.height = (prompt.scrollHeight + 4) + 'px'; }
+  function open(){
+    panel.hidden = false; btn.setAttribute('aria-expanded', 'true'); fit();
+    head.focus(); panel.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    beacon('spent_well_open');
+  }
+  function close(){ panel.hidden = true; btn.setAttribute('aria-expanded', 'false'); btn.focus(); }
+  btn.addEventListener('click', function(){ if (panel.hidden) open(); else close(); });
+  closeBtn.addEventListener('click', close);
+  document.addEventListener('keydown', function(e){ if ((e.key === 'Escape' || e.key === 'Esc') && !panel.hidden) { e.preventDefault(); close(); } });
+  window.addEventListener('resize', function(){ if (!panel.hidden) fit(); });
+
+  function done(ok){
+    status.textContent = ok ? 'Copied' : 'Could not copy. Select the text and copy it yourself.';
+    copyBtn.textContent = ok ? 'Copied' : 'Copy prompt';
+    clearTimeout(timer);
+    timer = setTimeout(function(){ status.textContent = ''; copyBtn.textContent = 'Copy prompt'; }, 2600);
+  }
+  function fallback(){
+    prompt.focus(); prompt.select(); prompt.setSelectionRange(0, prompt.value.length);
+    var ok = false; try { ok = document.execCommand('copy'); } catch (e) {}
+    done(ok);
+  }
+  copyBtn.addEventListener('click', function(){
+    beacon('spent_well_copy');
+    if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(prompt.value).then(function(){ done(true); }, fallback); } else { fallback(); }
+  });
+  link.addEventListener('click', function(){ beacon('spent_well_mover'); });
+  link.addEventListener('auxclick', function(){ beacon('spent_well_mover'); });
+})();
+`;
+
+/**
+ * The strip and the panel. `telemetry` is what telemetry.js said when the report was made: { on: false } puts no address
+ * and no id in the file; { on: true, url, uid, v } lets the three buttons send one count each.
+ */
+export function renderSpentWell(report, telemetry = { on: false }) {
+  const n = totalTokensOf(report);
+  if (!(n > 0)) return '';
+  const on = !!(telemetry && telemetry.on && telemetry.url);
+  const data = on ? { on: true, url: telemetry.url, uid: telemetry.uid, v: telemetry.v } : { on: false };
+  const json = JSON.stringify(data).replace(/</g, '\\u003c').replace(/>/g, '\\u003e').replace(/&/g, '\\u0026');
+  return `
+<!-- DID YOU SPEND THEM WELL: strip under the grade card, panel with the prompt -->
+<style>${CSS}</style>
+<section id="sw" aria-label="Did you spend your tokens well?">
+  <div class="sw-strip">
+    <p class="sw-line">You burnt <b>${esc(tokensLabel(n))}</b> tokens. Did you spend them well?</p>
+    <button class="sw-btn sw-primary" id="sw-open" type="button" aria-expanded="false" aria-controls="sw-panel">Find out</button>
+  </div>
+  <p class="sw-fine">${esc(on ? FINE_ON : FINE_OFF)}</p>
+  <div class="sw-panel" id="sw-panel" role="region" aria-labelledby="sw-head" hidden>
+    <div class="sw-top">
+      <h3 class="sw-head" id="sw-head" tabindex="-1">Did you spend them well?</h3>
+      <button class="sw-btn" id="sw-close" type="button" aria-label="Close">Close</button>
+    </div>
+    <p class="sw-intro">${esc(INTRO)}</p>
+    <textarea class="sw-prompt" id="sw-prompt" readonly rows="18" spellcheck="false" aria-label="Prompt to paste into Claude Code">${esc(PROMPT)}</textarea>
+    <div class="sw-row">
+      <button class="sw-btn sw-primary" id="sw-copy" type="button">Copy prompt</button>
+      <span class="sw-status" id="sw-status" role="status" aria-live="polite"></span>
+    </div>
+    <p class="sw-fix">${esc(FIX_LINE)}</p>
+    <a class="sw-link" id="sw-mover" href="${esc(MOVER_URL)}" target="_blank" rel="noopener">See Mover OS</a>
+  </div>
+</section>
+<script type="application/json" id="sw-data">${json}</script>
+<script id="sw-js">${SCRIPT}</script>
+`;
+}

package/src/renderers/terminal-summary.js

@@ -1,3 +1,5 @@
+import { usd0, low, high } from './vs-text.js';
+
 // ANSI color codes
 const c = {
   reset: '\x1b[0m',
@@ -61,3 +63,11 @@ export function renderTerminal(report) {
     }
   }
 }
+
+
+/** The one line after the usual summary: the cheapest and the dearest bill, computed from the reprice object. */
+export function vsOneLiner(rp) {
+  if (!rp || !rp.models || rp.models.length < 2) return null;
+  const lo = low(rp), hi = high(rp);
+  return `On other models: ${lo.label} ${usd0(lo.total)} to ${hi.label} ${usd0(hi.total)}. The race and a card to post are in your report.`;
+}