burner-cc 0.1.0

package/src/render.js

@@ -0,0 +1,36 @@
+import { readFileSync, writeFileSync, mkdirSync, copyFileSync, cpSync } from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import { fileURLToPath } from 'node:url';
+import { spawn } from 'node:child_process';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const webDir = path.join(__dirname, '..', 'web');
+const outDir = path.join(os.homedir(), '.burner-cc-cache');
+
+export function renderReceipts(sessions) {
+  mkdirSync(outDir, { recursive: true });
+
+  const template = readFileSync(path.join(webDir, 'receipt.html'), 'utf-8');
+  const injected = template.replace(
+    '/*__BURNER_DATA__*/[]',
+    JSON.stringify(sessions)
+  );
+
+  const outHtml = path.join(outDir, 'receipt.html');
+  writeFileSync(outHtml, injected, 'utf-8');
+  copyFileSync(path.join(webDir, 'receipt.css'), path.join(outDir, 'receipt.css'));
+  copyFileSync(path.join(webDir, 'receipt.js'), path.join(outDir, 'receipt.js'));
+  copyFileSync(path.join(webDir, 'logo-mark.png'), path.join(outDir, 'logo-mark.png'));
+  copyFileSync(path.join(webDir, 'logo-with-text.png'), path.join(outDir, 'logo-with-text.png'));
+  cpSync(path.join(webDir, 'vendor'), path.join(outDir, 'vendor'), { recursive: true });
+
+  return outHtml;
+}
+
+export function openInBrowser(filePath) {
+  const platform = process.platform;
+  const cmd = platform === 'win32' ? 'cmd' : platform === 'darwin' ? 'open' : 'xdg-open';
+  const args = platform === 'win32' ? ['/c', 'start', '""', filePath] : [filePath];
+  spawn(cmd, args, { detached: true, stdio: 'ignore', shell: false }).unref();
+}

package/web/receipt.css

@@ -0,0 +1,298 @@
+:root[data-theme="paper"] {
+  --bg: #f4f1e8;
+  --ink: #2b2b26;
+  --dim: #8a8478;
+  --rule: #b8b2a2;
+  --accent: #2b2b26;
+  --page-bg: #e7e2d3;
+}
+
+:root[data-theme="dark"] {
+  --bg: #14161a;
+  --ink: #e6e6e6;
+  --dim: #767b85;
+  --rule: #3a3f47;
+  --accent: #ffffff;
+  --page-bg: #0a0b0d;
+}
+
+:root[data-theme="thermal"] {
+  --bg: #fdf6e3;
+  --ink: #4a3f2a;
+  --dim: #a89a78;
+  --rule: #d8c9a0;
+  --accent: #7a5c00;
+  --page-bg: #efe6c8;
+}
+
+:root[data-theme="matrix"] {
+  --bg: #041005;
+  --ink: #45f77e;
+  --dim: #1f7a3f;
+  --rule: #1f7a3f;
+  --accent: #7dffab;
+  --page-bg: #000700;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font-family: 'IBM Plex Mono', 'Courier New', monospace;
+  background: var(--page-bg);
+  color: var(--ink);
+  padding: 28px 16px 60px;
+  transition: background 0.15s, color 0.15s;
+}
+
+.page-brand {
+  position: fixed;
+  top: 20px;
+  left: 24px;
+  height: 56px;
+  width: auto;
+  z-index: 6;
+}
+
+.toolbar {
+  max-width: 520px;
+  margin: 0 auto 16px;
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.toolbar-group {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.toolbar button {
+  font-family: inherit;
+  font-size: 12px;
+  letter-spacing: 0.05em;
+  border: 1px solid var(--rule);
+  background: transparent;
+  color: var(--ink);
+  padding: 6px 12px;
+  cursor: pointer;
+  border-radius: 3px;
+  text-transform: uppercase;
+}
+
+.toolbar button.active {
+  background: var(--ink);
+  color: var(--page-bg);
+}
+
+.carousel {
+  position: relative;
+  max-width: 520px;
+  margin: 0 auto;
+}
+
+.carousel-track {
+  display: flex;
+  align-items: flex-start;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  gap: 24px;
+  padding-bottom: 8px;
+  scrollbar-width: thin;
+}
+
+.carousel-track > .slide {
+  flex: 0 0 100%;
+  scroll-snap-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+.nav-arrow {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 5;
+  background: var(--ink);
+  color: var(--page-bg);
+  border: none;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 18px;
+  opacity: 0.7;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
+}
+
+.nav-arrow.prev { left: 32px; }
+.nav-arrow.next { right: 32px; }
+.nav-arrow:hover { opacity: 1; }
+
+.slide-dots {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+  margin: 10px 0 0;
+}
+
+.slide-dots span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--rule);
+}
+
+.slide-dots span.active { background: var(--ink); }
+
+.receipt {
+  width: 100%;
+  max-width: 460px;
+  background: var(--bg);
+  color: var(--ink);
+  padding: 28px 26px 30px;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
+}
+
+.receipt h1 {
+  text-align: center;
+  font-size: 22px;
+  letter-spacing: 0.15em;
+  margin: 0 0 4px;
+}
+
+.receipt .subtitle {
+  text-align: center;
+  font-size: 12px;
+  letter-spacing: 0.1em;
+  font-weight: bold;
+  margin: 0 0 4px;
+}
+
+.receipt .tagline {
+  text-align: center;
+  font-size: 11px;
+  color: var(--dim);
+  margin: 0 0 14px;
+  font-style: italic;
+}
+
+.rule {
+  border: none;
+  border-top: 1px dashed var(--rule);
+  margin: 12px 0;
+}
+
+.meta-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  line-height: 1.6;
+}
+
+.meta-row .left, .meta-row .right { text-align: left; }
+.meta-row .right { text-align: right; }
+
+.line {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 12.5px;
+  line-height: 1.7;
+  gap: 8px;
+}
+
+.line .label { flex: 1; }
+.line .label.indent { padding-left: 14px; color: var(--dim); font-size: 11px; }
+.line .tok { color: var(--dim); font-size: 11px; min-width: 72px; text-align: right; }
+.line .amt { font-weight: bold; min-width: 60px; text-align: right; }
+
+.line.bold .label, .line.bold .amt { font-weight: bold; }
+.line.total .amt { font-size: 15px; }
+
+.model-heading {
+  font-weight: bold;
+  font-size: 12px;
+  letter-spacing: 0.05em;
+  margin-top: 10px;
+}
+
+.footer {
+  text-align: center;
+  font-size: 11px;
+  color: var(--dim);
+  margin-top: 4px;
+}
+
+.footer .tip {
+  font-weight: bold;
+  color: var(--ink);
+  margin-top: 6px;
+}
+
+.receipt-logo {
+  display: block;
+  height: 64px;
+  width: auto;
+  margin: 14px auto 4px;
+}
+
+.footer .brand {
+  margin-top: 2px;
+  font-size: 10px;
+  letter-spacing: 0.15em;
+  color: var(--dim);
+}
+
+.unpriced-flag {
+  color: #c0392b;
+  font-weight: bold;
+}
+
+.barcode {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  gap: 2px;
+  margin: 18px 0 4px;
+  cursor: help;
+}
+
+.barcode span {
+  background: var(--ink);
+}
+
+.barcode-label {
+  text-align: center;
+  font-size: 10px;
+  color: var(--dim);
+  letter-spacing: 0.1em;
+}
+
+.disclaimer {
+  max-width: 460px;
+  margin: 14px auto 0;
+  font-size: 10px;
+  color: var(--dim);
+  text-align: center;
+}
+
+.toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--ink);
+  color: var(--page-bg);
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 12px;
+  letter-spacing: 0.05em;
+  opacity: 0;
+  transition: opacity 0.2s;
+  pointer-events: none;
+}
+
+.toast.show { opacity: 1; }

package/web/receipt.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en" data-theme="paper">
+<head>
+<meta charset="utf-8" />
+<title>Burner — Claude Code Session Receipt</title>
+<link rel="icon" type="image/png" href="logo-mark.png" />
+<link rel="stylesheet" href="receipt.css" />
+</head>
+<body>
+  <img class="page-brand" src="logo-with-text.png" alt="Burner" />
+
+  <div class="toolbar">
+    <div class="toolbar-group">
+      <button data-theme="paper">Paper</button>
+      <button data-theme="thermal">Thermal</button>
+      <button data-theme="matrix">Matrix</button>
+      <button data-theme="dark">Dark</button>
+    </div>
+    <div class="toolbar-group">
+      <button id="copyBtn">Copy</button>
+      <button id="downloadBtn">Download</button>
+    </div>
+  </div>
+
+  <div id="root"></div>
+
+  <script>window.__BURNER_DATA__ = /*__BURNER_DATA__*/[];</script>
+  <script src="vendor/html2canvas.min.js"></script>
+  <script src="receipt.js"></script>
+</body>
+</html>

package/web/receipt.js

@@ -0,0 +1,315 @@
+function fmtUsd(n) {
+  if (n === null || n === undefined) return '???';
+  return '$' + n.toFixed(3);
+}
+
+function fmtTok(n) {
+  return n.toLocaleString('en-US') + ' tok';
+}
+
+function shortDate(iso) {
+  if (!iso) return 'unknown';
+  const d = new Date(iso);
+  return d.toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric' }).toUpperCase();
+}
+
+const TAGLINES = [
+  'context in, cash out',
+  'tokens are not free, apparently',
+  'thoughts, itemized',
+  'you paid for every "let me check"',
+  'burned so you don’t have to guess',
+];
+
+function taglineFor(seed) {
+  return TAGLINES[seed % TAGLINES.length];
+}
+
+// The barcode isn't decorative noise: it's a real (if silly) binary
+// encoding of the session's total cost in cents, so two receipts only
+// look alike if they cost the same. Widest bar = most significant bit.
+function barcode(totalCost, seed) {
+  const cents = Math.max(0, Math.round(totalCost * 100));
+  const bits = cents.toString(2).padStart(16, '0').slice(-16);
+  const bars = [];
+  for (const bit of bits) {
+    const w = bit === '1' ? 4 : 1;
+    bars.push(`<span style="width:${w}px;height:32px"></span>`);
+    bars.push(`<span style="width:1px;height:32px;background:transparent"></span>`);
+  }
+  // A few seeded filler bars purely so short/cheap sessions don't render
+  // a suspiciously tiny barcode.
+  let x = seed || 1;
+  for (let i = 0; i < 10; i++) {
+    x = (x * 9301 + 49297) % 233280;
+    bars.push(`<span style="width:${1 + (x % 2)}px;height:${18 + (x % 14)}px"></span>`);
+  }
+  return { html: bars.join(''), title: `encodes total cost: ${cents}¢ as binary (${bits})` };
+}
+
+function hashSeed(str) {
+  let h = 0;
+  for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) >>> 0;
+  return h;
+}
+
+function modelBlock(m) {
+  const rows = [];
+  rows.push(`<div class="model-heading">${m.displayName}${m.fidelity !== 'measured' ? ` <span class="unpriced-flag" title="${m.fidelity}">*</span>` : ''}</div>`);
+
+  const t = m.tokens;
+  const c = m.cost;
+  const line = (label, tok, amt, indent) =>
+    `<div class="line"><span class="label${indent ? ' indent' : ''}">${label}</span><span class="tok">${fmtTok(tok)}</span><span class="amt">${fmtUsd(amt)}</span></div>`;
+
+  if (t.input) rows.push(line('FRESH INPUT (uncached)', t.input, c ? c.input : null, true));
+  if (t.cacheWrite5m || t.cacheWrite1h) rows.push(line('CACHE WRITE (new context)', t.cacheWrite5m + t.cacheWrite1h, c ? c.cacheWrite : null, true));
+  if (t.cacheRead) rows.push(line('CACHE READ (reused)', t.cacheRead, c ? c.cacheRead : null, true));
+  if (t.output) rows.push(line('OUTPUT TOKENS', t.output, c ? c.output : null, true));
+
+  return rows.join('');
+}
+
+function receiptHtml(session, index) {
+  const totalTok = Object.values(session.totals.tokens).reduce((a, b) => a + b, 0);
+  const seed = hashSeed(session.sessionId);
+
+  const modelLines = session.models.map(modelBlock).join('');
+  const subagentSection = (session.subagentGroups ?? []).length
+    ? `<hr class="rule" />` + session.subagentGroups.map((g) =>
+        `<div class="model-heading">SUBAGENT: ${g.agentType.toUpperCase()} (${g.runCount} run${g.runCount > 1 ? 's' : ''})</div>` +
+        g.models.map(modelBlock).join('')
+      ).join('')
+    : '';
+
+  const activitySection = activityHtml(session.activity);
+
+  const authCode = session.sessionId.slice(0, 4).toUpperCase() + '-' + (seed % 9999);
+  const bc = barcode(session.totals.cost.total, seed);
+  const notSubscription = session.billingMode !== 'subscription-likely';
+  const totalLabel = notSubscription ? 'TOTAL' : 'API-EQUIVALENT VALUE';
+  const paidWith = notSubscription ? 'TOKEN BUDGET' : 'FLAT-FEE PLAN (est. value shown, not what you paid)';
+
+  return `
+    <div class="receipt" data-session="${session.sessionId}">
+      <h1>CLAUDE CODE</h1>
+      <div class="subtitle">AGENTIC SESSION RECEIPT</div>
+      <div class="tagline">-- ${taglineFor(seed)} --</div>
+      <hr class="rule" />
+      <div class="meta-row">
+        <div class="left">
+          SESSION: ${session.title ?? session.sessionId.slice(0, 8)}<br/>
+          DATE: ${shortDate(session.startedAt)}<br/>
+          PROJECT: ${session.project}
+        </div>
+        <div class="right">
+          TURNS: ~${session.turnCount}<br/>
+          MODELS: ${session.models.length}<br/>
+          &nbsp;
+        </div>
+      </div>
+      <hr class="rule" />
+      ${modelLines}
+      ${subagentSection}
+      <hr class="rule" />
+      <div class="line bold"><span class="label">SUBTOTAL</span><span class="tok">${fmtTok(totalTok)}</span><span class="amt"></span></div>
+      <div class="line total bold"><span class="label">${totalLabel}</span><span class="tok"></span><span class="amt">${fmtUsd(session.totals.cost.total)}</span></div>
+      ${activitySection}
+      <hr class="rule" />
+      <div class="footer">
+        PAID WITH: ${paidWith}<br/>
+        AUTH CODE: ${authCode}
+        ${session.hasUnpriced ? '<br/><span class="unpriced-flag">* one model unpriced — total is a floor</span>' : ''}
+      </div>
+      <hr class="rule" />
+      <div class="footer">
+        * THANK YOU FOR YOUR CONTEXT *<br/>
+        ITEMS NON-REFUNDABLE ONCE SENT
+        <div class="tip">SUGGESTED TIP: ${tipFor(session)}</div>
+      </div>
+      <div class="barcode" title="${bc.title}">${bc.html}</div>
+      <div class="barcode-label">CC-SESSION-${session.sessionId.slice(0, 8).toUpperCase()}</div>
+      <img class="receipt-logo" src="logo-mark.png" alt="Burner" />
+      <div class="footer brand">~ B U R N E R ~</div>
+    </div>
+  `;
+}
+
+function activityHtml(activity) {
+  if (!activity) return '';
+  const mcpEntries = Object.entries(activity.mcp ?? {});
+  const skillEntries = Object.entries(activity.skills ?? {});
+  const webEntries = Object.entries(activity.web ?? {});
+  if (!mcpEntries.length && !skillEntries.length && !webEntries.length) return '';
+
+  const row = (label, count) =>
+    `<div class="line"><span class="label indent">${label}</span><span class="tok">${count}×</span><span class="amt"></span></div>`;
+
+  return `
+    <hr class="rule" />
+    <div class="model-heading">ACTIVITY LOG <span class="unpriced-flag" title="call counts only — not split into a dollar cost, since a turn's token cost can't be attributed to one tool call inside it">*</span></div>
+    ${mcpEntries.map(([server, n]) => row(`MCP: ${server}`, n)).join('')}
+    ${skillEntries.map(([skill, n]) => row(`SKILL: ${skill}`, n)).join('')}
+    ${webEntries.map(([tool, n]) => row(tool.toUpperCase(), n)).join('')}
+  `;
+}
+
+function tipFor(session) {
+  const t = session.totals.tokens;
+  const cacheEff = t.cacheRead / (t.cacheRead + t.input + t.cacheWrite5m + t.cacheWrite1h || 1);
+  if (cacheEff < 0.3 && (t.cacheWrite5m + t.cacheWrite1h) > 20000) {
+    return 'LOW CACHE REUSE — AVOID LONG GAPS BETWEEN TURNS';
+  }
+  if (session.subagentCount > 3) {
+    return 'HEAVY SUBAGENT USE — CHECK IF TASKS CAN BE MERGED';
+  }
+  if (t.output > t.input) {
+    return 'OUTPUT-HEAVY SESSION — CONSIDER SHORTER RESPONSES';
+  }
+  return 'DISABLE UNUSED MCP SERVERS BEFORE CHECKOUT';
+}
+
+function textReceipt(session) {
+  const lines = [];
+  lines.push('CLAUDE CODE - AGENTIC SESSION RECEIPT');
+  lines.push(`SESSION: ${session.title ?? session.sessionId.slice(0, 8)}  |  ${shortDate(session.startedAt)}  |  ${session.project}`);
+  lines.push('-'.repeat(40));
+  const modelLine = (m) => {
+    lines.push(m.displayName + ':');
+    const t = m.tokens, c = m.cost;
+    if (t.input) lines.push(`  fresh input      ${fmtTok(t.input)}   ${fmtUsd(c?.input)}`);
+    if (t.cacheWrite5m || t.cacheWrite1h) lines.push(`  cache write      ${fmtTok(t.cacheWrite5m + t.cacheWrite1h)}   ${fmtUsd(c?.cacheWrite)}`);
+    if (t.cacheRead) lines.push(`  cache read       ${fmtTok(t.cacheRead)}   ${fmtUsd(c?.cacheRead)}`);
+    if (t.output) lines.push(`  output           ${fmtTok(t.output)}   ${fmtUsd(c?.output)}`);
+  };
+  session.models.forEach(modelLine);
+  for (const g of session.subagentGroups ?? []) {
+    lines.push(`SUBAGENT: ${g.agentType} (${g.runCount} runs)`);
+    g.models.forEach(modelLine);
+  }
+  lines.push('-'.repeat(40));
+  const totalLabel = session.billingMode === 'subscription-likely' ? 'API-EQUIVALENT VALUE' : 'TOTAL';
+  lines.push(`${totalLabel}: ${fmtUsd(session.totals.cost.total)}`);
+  const mcpEntries = Object.entries(session.activity?.mcp ?? {});
+  const skillEntries = Object.entries(session.activity?.skills ?? {});
+  const webEntries = Object.entries(session.activity?.web ?? {});
+  if (mcpEntries.length || skillEntries.length || webEntries.length) {
+    lines.push('ACTIVITY (not itemized in cost above):');
+    mcpEntries.forEach(([s, n]) => lines.push(`  mcp:${s}   ${n}x`));
+    skillEntries.forEach(([s, n]) => lines.push(`  skill:${s}   ${n}x`));
+    webEntries.forEach(([s, n]) => lines.push(`  ${s}   ${n}x`));
+  }
+  lines.push('~ burner ~');
+  return lines.join('\n');
+}
+
+let currentData = [];
+
+function showToast(msg) {
+  const toast = document.getElementById('toast');
+  toast.textContent = msg;
+  toast.classList.add('show');
+  setTimeout(() => toast.classList.remove('show'), 1600);
+}
+
+function currentSlideIndex(track) {
+  const slideWidth = track.children[0]?.offsetWidth ?? 1;
+  return Math.round(track.scrollLeft / (slideWidth + 24));
+}
+
+function render() {
+  currentData = window.__BURNER_DATA__ || [];
+  const root = document.getElementById('root');
+  if (!currentData.length) {
+    root.innerHTML = '<div class="disclaimer">No session data found.</div>';
+    return;
+  }
+
+  const slides = currentData.map((s, i) => `<div class="slide">${receiptHtml(s, i)}</div>`).join('');
+  const arrows = currentData.length > 1
+    ? `<button class="nav-arrow prev" aria-label="previous">‹</button><button class="nav-arrow next" aria-label="next">›</button>`
+    : '';
+  const dots = currentData.length > 1
+    ? `<div class="slide-dots">${currentData.map((_, i) => `<span data-i="${i}" class="${i === 0 ? 'active' : ''}"></span>`).join('')}</div>`
+    : '';
+
+  const onSubscription = currentData[0]?.billingMode === 'subscription-likely';
+  const disclaimer = onSubscription
+    ? 'Estimates, not official billing. Looks like a Pro/Max/Team plan, not pay-per-token — shown as API-equivalent value, not an actual charge.'
+    : 'Estimates, not official billing.';
+
+  root.innerHTML =
+    `<div class="carousel">${arrows}<div class="carousel-track" id="track">${slides}</div></div>${dots}` +
+    `<div class="disclaimer">${disclaimer}</div>` +
+    `<div class="toast" id="toast"></div>`;
+
+  const track = document.getElementById('track');
+  const dotEls = () => [...document.querySelectorAll('.slide-dots span')];
+
+  const goPrev = () => track.scrollBy({ left: -(track.children[0].offsetWidth + 24), behavior: 'smooth' });
+  const goNext = () => track.scrollBy({ left: track.children[0].offsetWidth + 24, behavior: 'smooth' });
+
+  document.querySelector('.nav-arrow.prev')?.addEventListener('click', goPrev);
+  document.querySelector('.nav-arrow.next')?.addEventListener('click', goNext);
+  track?.addEventListener('scroll', () => {
+    const i = currentSlideIndex(track);
+    dotEls().forEach((d) => d.classList.toggle('active', Number(d.dataset.i) === i));
+  }, { passive: true });
+
+  if (track && currentData.length > 1) {
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowLeft') goPrev();
+      else if (e.key === 'ArrowRight') goNext();
+    });
+  }
+}
+
+function activeReceiptNode() {
+  const track = document.getElementById('track');
+  if (!track) return document.querySelector('.receipt');
+  const i = currentSlideIndex(track);
+  return track.children[i]?.querySelector('.receipt') ?? document.querySelector('.receipt');
+}
+
+function activeSession() {
+  const node = activeReceiptNode();
+  const id = node?.dataset.session;
+  return currentData.find((s) => s.sessionId === id) ?? currentData[0];
+}
+
+function setTheme(theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  localStorage.setItem('burner-theme', theme);
+  document.querySelectorAll('.toolbar-group button[data-theme]').forEach((b) => {
+    b.classList.toggle('active', b.dataset.theme === theme);
+  });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const saved = localStorage.getItem('burner-theme') || 'paper';
+  setTheme(saved);
+  document.querySelectorAll('.toolbar-group button[data-theme]').forEach((b) => {
+    b.addEventListener('click', () => setTheme(b.dataset.theme));
+  });
+  render();
+
+  document.getElementById('copyBtn').addEventListener('click', async () => {
+    const session = activeSession();
+    if (!session) return;
+    await navigator.clipboard.writeText(textReceipt(session));
+    showToast('Copied to clipboard');
+  });
+
+  document.getElementById('downloadBtn').addEventListener('click', () => {
+    const node = activeReceiptNode();
+    if (!node || !window.html2canvas) return;
+    html2canvas(node, { backgroundColor: null, scale: 2 }).then((canvas) => {
+      const link = document.createElement('a');
+      const session = activeSession();
+      link.download = `burner-receipt-${session?.sessionId?.slice(0, 8) ?? 'session'}.png`;
+      link.href = canvas.toDataURL('image/png');
+      link.click();
+      showToast('Downloaded');
+    });
+  });
+});