tokenleak 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokenleak",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Visualise your AI coding-assistant token usage across providers — heatmaps, dashboards, and shareable cards.",
   "type": "module",
   "bin": {

package/tokenleak.js

@@ -736,7 +736,7 @@ function computePreviousPeriod(current) {
   };
 }
 // packages/core/dist/index.js
-var VERSION = "0.4.1";
+var VERSION = "0.5.0";
 
 // packages/registry/dist/models/normalizer.js
 var DATE_SUFFIX_PATTERN = /-\d{8}$/;
@@ -1526,6 +1526,15 @@ function formatNumber(n) {
   }
   return n.toFixed(0);
 }
+function formatCost(cost) {
+  if (cost >= 100) {
+    return `$${cost.toFixed(0)}`;
+  }
+  if (cost >= 1) {
+    return `$${cost.toFixed(2)}`;
+  }
+  return `$${cost.toFixed(4)}`;
+}
 
 // packages/renderers/dist/svg/heatmap.js
 var DAY_LABELS2 = ["Mon", "", "Wed", "", "Fri", "", "Sun"];
@@ -1773,14 +1782,326 @@ class SvgRenderer {
     return svgContent;
   }
 }
+// packages/renderers/dist/png/terminal-card.js
+var CARD_PADDING = 48;
+var TITLEBAR_HEIGHT = 48;
+var DOT_RADIUS = 6;
+var DOT_GAP = 8;
+var CELL_SIZE2 = 16;
+var CELL_GAP2 = 4;
+var STAT_GRID_COLS = 3;
+var MODEL_BAR_HEIGHT = 8;
+var DAY_LABEL_WIDTH2 = 44;
+var MONTH_LABEL_HEIGHT2 = 24;
+var PROVIDER_SECTION_GAP = 36;
+var FONT_FAMILY2 = "'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', monospace";
+function getCardTheme(mode) {
+  if (mode === "dark") {
+    return {
+      bg: "#0c0c0c",
+      fg: "#ffffff",
+      muted: "#52525b",
+      border: "rgba(255,255,255,0.06)",
+      accent: "#10b981",
+      heatmapEmpty: "#1a1a1a",
+      barTrack: "#1c1c1c",
+      titlebarBorder: "rgba(255,255,255,0.06)"
+    };
+  }
+  return {
+    bg: "#fafafa",
+    fg: "#18181b",
+    muted: "#a1a1aa",
+    border: "rgba(0,0,0,0.08)",
+    accent: "#059669",
+    heatmapEmpty: "#e4e4e7",
+    barTrack: "#e5e5e5",
+    titlebarBorder: "rgba(0,0,0,0.08)"
+  };
+}
+function buildHeatmapScale(colors, isDark) {
+  const [startHex, endHex] = colors.gradient;
+  const s = hexToRgb(startHex);
+  const e = hexToRgb(endHex);
+  const opacities = isDark ? [0.15, 0.35, 0.6, 1] : [0.2, 0.4, 0.65, 1];
+  return [
+    "transparent",
+    ...opacities.map((t) => {
+      const r = Math.round(s.r + (e.r - s.r) * t);
+      const g = Math.round(s.g + (e.g - s.g) * t);
+      const b = Math.round(s.b + (e.b - s.b) * t);
+      return rgbToHex(r, g, b);
+    })
+  ];
+}
+function hexToRgb(hex) {
+  const h = hex.replace("#", "");
+  return {
+    r: parseInt(h.slice(0, 2), 16),
+    g: parseInt(h.slice(2, 4), 16),
+    b: parseInt(h.slice(4, 6), 16)
+  };
+}
+function rgbToHex(r, g, b) {
+  const toHex = (n) => n.toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function computeQuantiles2(values) {
+  const nonZero = values.filter((v) => v > 0).sort((a, b) => a - b);
+  if (nonZero.length === 0)
+    return [0, 0, 0];
+  const q = (p) => {
+    const idx = Math.floor(p * (nonZero.length - 1));
+    return nonZero[idx] ?? 0;
+  };
+  return [q(0.25), q(0.5), q(0.75)];
+}
+function getLevel2(tokens, quantiles) {
+  if (tokens <= 0)
+    return 0;
+  if (tokens <= quantiles[0])
+    return 1;
+  if (tokens <= quantiles[1])
+    return 2;
+  if (tokens <= quantiles[2])
+    return 3;
+  return 4;
+}
+var MONTH_NAMES2 = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+var MONTH_NAMES_FULL = [
+  "JAN",
+  "FEB",
+  "MAR",
+  "APR",
+  "MAY",
+  "JUN",
+  "JUL",
+  "AUG",
+  "SEP",
+  "OCT",
+  "NOV",
+  "DEC"
+];
+function formatDateRange(since, until) {
+  const s = new Date(since + "T00:00:00Z");
+  const u = new Date(until + "T00:00:00Z");
+  const diffMs = u.getTime() - s.getTime();
+  const days = Math.round(diffMs / (1000 * 60 * 60 * 24));
+  const sMonth = MONTH_NAMES_FULL[s.getUTCMonth()] ?? "";
+  const uMonth = MONTH_NAMES_FULL[u.getUTCMonth()] ?? "";
+  return `${sMonth} ${s.getUTCFullYear()} \u2014 ${uMonth} ${u.getUTCFullYear()} \xB7 ${days} DAYS`;
+}
+function formatPercentage(rate) {
+  return `${(rate * 100).toFixed(1)}%`;
+}
+function formatStreak(n) {
+  return `${n} day${n !== 1 ? "s" : ""}`;
+}
+function renderProviderHeatmap(daily, since, until, heatmapColors, emptyColor) {
+  const tokenMap = new Map;
+  for (const d of daily) {
+    tokenMap.set(d.date, (tokenMap.get(d.date) ?? 0) + d.totalTokens);
+  }
+  const dates = daily.map((d) => d.date).sort();
+  const endStr = until ?? dates[dates.length - 1] ?? new Date().toISOString().slice(0, 10);
+  const startStr = since ?? dates[0] ?? endStr;
+  const end = new Date(endStr + "T00:00:00Z");
+  const start = new Date(startStr + "T00:00:00Z");
+  start.setUTCDate(start.getUTCDate() - start.getUTCDay());
+  const allTokens = Array.from(tokenMap.values());
+  const quantiles = computeQuantiles2(allTokens);
+  const cells = [];
+  const monthLabels = [];
+  let lastMonth = -1;
+  let col = 0;
+  const current = new Date(start);
+  while (current <= end) {
+    const row = current.getUTCDay();
+    const dateStr = current.toISOString().slice(0, 10);
+    const tokens = tokenMap.get(dateStr) ?? 0;
+    const level = getLevel2(tokens, quantiles);
+    const x = DAY_LABEL_WIDTH2 + col * (CELL_SIZE2 + CELL_GAP2);
+    const y = MONTH_LABEL_HEIGHT2 + row * (CELL_SIZE2 + CELL_GAP2);
+    const fill = level === 0 ? emptyColor : heatmapColors[level];
+    const title = `${dateStr}: ${tokens.toLocaleString()} tokens`;
+    cells.push(`<rect x="${x}" y="${y}" width="${CELL_SIZE2}" height="${CELL_SIZE2}" fill="${escapeXml(fill)}" rx="3"><title>${escapeXml(title)}</title></rect>`);
+    const month = current.getUTCMonth();
+    if (month !== lastMonth && row === 0) {
+      lastMonth = month;
+      monthLabels.push(`<text x="${x}" y="${MONTH_LABEL_HEIGHT2 - 8}" fill="__MUTED__" font-size="11" font-family="${escapeXml(FONT_FAMILY2)}">${escapeXml(MONTH_NAMES2[month] ?? "")}</text>`);
+    }
+    if (row === 6)
+      col++;
+    current.setUTCDate(current.getUTCDate() + 1);
+  }
+  const dayLabels = [
+    { label: "Mon", row: 1 },
+    { label: "Wed", row: 3 },
+    { label: "Fri", row: 5 },
+    { label: "Sun", row: 0 }
+  ].map((d) => {
+    const y = MONTH_LABEL_HEIGHT2 + d.row * (CELL_SIZE2 + CELL_GAP2) + CELL_SIZE2 - 2;
+    return `<text x="0" y="${y}" fill="__MUTED__" font-size="11" font-family="${escapeXml(FONT_FAMILY2)}">${escapeXml(d.label)}</text>`;
+  }).join("");
+  const totalCols = col + 1;
+  const gridWidth = DAY_LABEL_WIDTH2 + totalCols * (CELL_SIZE2 + CELL_GAP2);
+  const height = MONTH_LABEL_HEIGHT2 + 7 * (CELL_SIZE2 + CELL_GAP2);
+  const svg = [dayLabels, ...monthLabels, ...cells].join(`
+`);
+  return { svg, gridWidth, height };
+}
+function renderTerminalCardSvg(output, options) {
+  const theme = getCardTheme(options.theme);
+  const isDark = options.theme === "dark";
+  const pad = CARD_PADDING;
+  const stats = output.aggregated;
+  const { since, until } = output.dateRange;
+  const providers = output.providers;
+  const providerHeatmaps = providers.map((p) => {
+    const heatmapColors = buildHeatmapScale(p.colors, isDark);
+    return {
+      provider: p,
+      heatmap: renderProviderHeatmap(p.daily, since, until, heatmapColors, theme.heatmapEmpty),
+      heatmapColors
+    };
+  });
+  const maxHeatmapWidth = providerHeatmaps.reduce((max, ph) => Math.max(max, ph.heatmap.gridWidth), 0);
+  const minContentWidth = Math.max(maxHeatmapWidth, 700);
+  const cardWidth = minContentWidth + pad * 2;
+  const contentWidth = cardWidth - pad * 2;
+  let y = 0;
+  const sections = [];
+  sections.push(`<defs><style>@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap');</style></defs>`);
+  sections.push(`<rect width="${cardWidth}" height="__CARD_HEIGHT__" rx="12" fill="${escapeXml(theme.bg)}" stroke="${escapeXml(theme.border)}" stroke-width="1"/>`);
+  sections.push(`<clipPath id="titlebar-clip"><rect width="${cardWidth}" height="${TITLEBAR_HEIGHT}" rx="12"/></clipPath>`);
+  sections.push(`<rect width="${cardWidth}" height="${TITLEBAR_HEIGHT}" fill="${escapeXml(theme.bg)}" clip-path="url(#titlebar-clip)"/>`);
+  const dotY = TITLEBAR_HEIGHT / 2;
+  const dotStartX = pad;
+  const dots = [
+    { color: "#ff5f57", cx: dotStartX },
+    { color: "#febc2e", cx: dotStartX + DOT_RADIUS * 2 + DOT_GAP },
+    { color: "#28c840", cx: dotStartX + (DOT_RADIUS * 2 + DOT_GAP) * 2 }
+  ];
+  for (const dot of dots) {
+    sections.push(`<circle cx="${dot.cx}" cy="${dotY}" r="${DOT_RADIUS}" fill="${escapeXml(dot.color)}"/>`);
+  }
+  const titleX = dots[2].cx + DOT_RADIUS + 20;
+  sections.push(`<text x="${titleX}" y="${dotY + 5}" fill="${escapeXml(theme.muted)}" font-size="13" font-family="${escapeXml(FONT_FAMILY2)}" font-weight="500">${escapeXml("tokenleak")}</text>`);
+  sections.push(`<line x1="0" y1="${TITLEBAR_HEIGHT}" x2="${cardWidth}" y2="${TITLEBAR_HEIGHT}" stroke="${escapeXml(theme.titlebarBorder)}" stroke-width="1"/>`);
+  y = TITLEBAR_HEIGHT + pad * 0.6;
+  sections.push(`<text x="${pad}" y="${y + 16}" font-size="15" font-family="${escapeXml(FONT_FAMILY2)}" font-weight="500">` + `<tspan fill="${escapeXml(theme.accent)}">$</tspan>` + `<tspan fill="${escapeXml(theme.fg)}"> tokenleak</tspan>` + `<tspan fill="${escapeXml(theme.accent)}">_</tspan>` + `</text>`);
+  y += 40;
+  const dateRangeText = formatDateRange(since, until);
+  sections.push(`<text x="${pad}" y="${y + 14}" fill="${escapeXml(theme.muted)}" font-size="12" font-family="${escapeXml(FONT_FAMILY2)}" font-weight="600" letter-spacing="2">${escapeXml(dateRangeText)}</text>`);
+  y += 40;
+  for (let pi = 0;pi < providerHeatmaps.length; pi++) {
+    const { provider, heatmap, heatmapColors } = providerHeatmaps[pi];
+    const provDotRadius = 5;
+    const provColor = provider.colors.primary;
+    sections.push(`<circle cx="${pad + provDotRadius}" cy="${y + 8}" r="${provDotRadius}" fill="${escapeXml(provColor)}"/>`);
+    sections.push(`<text x="${pad + provDotRadius * 2 + 10}" y="${y + 13}" fill="${escapeXml(theme.fg)}" font-size="14" font-family="${escapeXml(FONT_FAMILY2)}" font-weight="600">${escapeXml(provider.displayName)}</text>`);
+    const summaryText = `${formatNumber(provider.totalTokens)} tokens \xB7 ${formatCost(provider.totalCost)}`;
+    sections.push(`<text x="${cardWidth - pad}" y="${y + 13}" fill="${escapeXml(theme.muted)}" font-size="11" font-family="${escapeXml(FONT_FAMILY2)}" font-weight="500" text-anchor="end">${escapeXml(summaryText)}</text>`);
+    y += 28;
+    const heatmapSvg = heatmap.svg.replace(/__MUTED__/g, escapeXml(theme.muted));
+    sections.push(`<g transform="translate(${pad}, ${y})">`);
+    sections.push(heatmapSvg);
+    sections.push("</g>");
+    y += heatmap.height;
+    if (pi < providerHeatmaps.length - 1) {
+      y += 12;
+      sections.push(`<line x1="${pad}" y1="${y}" x2="${cardWidth - pad}" y2="${y}" stroke="${escapeXml(theme.border)}" stroke-width="1"/>`);
+      y += PROVIDER_SECTION_GAP - 12;
+    } else {
+      y += 24;
+    }
+  }
+  if (providers.length === 0) {
+    sections.push(`<text x="${pad}" y="${y + 14}" fill="${escapeXml(theme.muted)}" font-size="12" font-family="${escapeXml(FONT_FAMILY2)}" font-weight="500">${escapeXml("No provider data")}</text>`);
+    y += 32;
+  }
+  sections.push(`<line x1="${pad}" y1="${y}" x2="${cardWidth - pad}" y2="${y}" stroke="${escapeXml(theme.border)}" stroke-width="1"/>`);
+  y += 28;
+  if (providers.length > 1) {
+    sections.push(`<text x="${pad}" y="${y}" fill="${escapeXml(theme.muted)}" font-size="10" font-family="${escapeXml(FONT_FAMILY2)}" font-weight="600" letter-spacing="2">${escapeXml("OVERALL")}</text>`);
+    y += 24;
+  }
+  const statColWidth = contentWidth / STAT_GRID_COLS;
+  const statsRow1 = [
+    { label: "CURRENT STREAK", value: formatStreak(stats.currentStreak), accent: true },
+    { label: "LONGEST STREAK", value: formatStreak(stats.longestStreak), accent: false },
+    { label: "TOTAL TOKENS", value: formatNumber(stats.totalTokens), accent: true }
+  ];
+  const statsRow2 = [
+    { label: "TOTAL COST", value: formatCost(stats.totalCost), accent: false },
+    { label: "30-DAY TOKENS", value: formatNumber(stats.rolling30dTokens), accent: false },
+    { label: "CACHE HIT RATE", value: formatPercentage(stats.cacheHitRate), accent: false }
+  ];
+  function renderStatRow(row, startY) {
+    for (let i = 0;i < row.length; i++) {
+      const stat = row[i];
+      const x = pad + i * statColWidth;
+      sections.push(`<text x="${x}" y="${startY}" fill="${escapeXml(theme.muted)}" font-size="10" font-family="${escapeXml(FONT_FAMILY2)}" font-weight="600" letter-spacing="1.5">${escapeXml(stat.label)}</text>`);
+      const valueColor = stat.accent ? theme.accent : theme.fg;
+      sections.push(`<text x="${x}" y="${startY + 28}" fill="${escapeXml(valueColor)}" font-size="22" font-family="${escapeXml(FONT_FAMILY2)}" font-weight="700">${escapeXml(stat.value)}</text>`);
+    }
+  }
+  renderStatRow(statsRow1, y);
+  y += 60;
+  renderStatRow(statsRow2, y);
+  y += 60;
+  y += 8;
+  sections.push(`<line x1="${pad}" y1="${y}" x2="${cardWidth - pad}" y2="${y}" stroke="${escapeXml(theme.border)}" stroke-width="1"/>`);
+  y += 28;
+  sections.push(`<text x="${pad}" y="${y}" fill="${escapeXml(theme.muted)}" font-size="10" font-family="${escapeXml(FONT_FAMILY2)}" font-weight="600" letter-spacing="2">${escapeXml("TOP MODELS")}</text>`);
+  y += 24;
+  const topModels2 = stats.topModels.slice(0, 3);
+  const modelNameWidth = 200;
+  const percentWidth = 60;
+  const barMaxWidth = contentWidth - modelNameWidth - percentWidth - 20;
+  for (const model of topModels2) {
+    const barWidth = Math.max(4, model.percentage / 100 * barMaxWidth);
+    sections.push(`<text x="${pad}" y="${y + MODEL_BAR_HEIGHT + 4}" fill="${escapeXml(theme.muted)}" font-size="12" font-family="${escapeXml(FONT_FAMILY2)}" font-weight="400">${escapeXml(model.model)}</text>`);
+    const barX = pad + modelNameWidth;
+    sections.push(`<rect x="${barX}" y="${y}" width="${barMaxWidth}" height="${MODEL_BAR_HEIGHT}" rx="4" fill="${escapeXml(theme.barTrack)}"/>`);
+    const gradId = `grad-${model.model.replace(/[^a-zA-Z0-9]/g, "")}`;
+    sections.push(`<defs><linearGradient id="${escapeXml(gradId)}" x1="0%" y1="0%" x2="100%" y2="0%">` + `<stop offset="0%" stop-color="${escapeXml(theme.accent)}44"/>` + `<stop offset="100%" stop-color="${escapeXml(theme.accent)}"/>` + `</linearGradient></defs>`);
+    sections.push(`<rect x="${barX}" y="${y}" width="${barWidth}" height="${MODEL_BAR_HEIGHT}" rx="4" fill="url(#${escapeXml(gradId)})"/>`);
+    sections.push(`<text x="${barX + barMaxWidth + 12}" y="${y + MODEL_BAR_HEIGHT + 4}" fill="${escapeXml(theme.muted)}" font-size="12" font-family="${escapeXml(FONT_FAMILY2)}" font-weight="500" text-anchor="end">${escapeXml(`${model.percentage.toFixed(0)}%`)}</text>`);
+    y += 32;
+  }
+  y += pad * 0.5;
+  const cardHeight = y;
+  const svg = sections.join(`
+`).replace("__CARD_HEIGHT__", String(cardHeight));
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${cardWidth}" height="${cardHeight}" viewBox="0 0 ${cardWidth} ${cardHeight}">`,
+    svg,
+    "</svg>"
+  ].join(`
+`);
+}
+
 // packages/renderers/dist/png/png-renderer.js
 import sharp from "sharp";
 
 class PngRenderer {
   format = "png";
-  svgRenderer = new SvgRenderer;
   async render(output, options) {
-    const svgString = await this.svgRenderer.render(output, options);
+    const svgString = renderTerminalCardSvg(output, options);
     const pngBuffer = await sharp(Buffer.from(svgString)).png().toBuffer();
     return pngBuffer;
   }
@@ -1837,7 +2158,7 @@ function intensityColor(value, max) {
 // packages/renderers/dist/terminal/heatmap.js
 var DAY_LABELS3 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var MONTH_LABELS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-var DAY_LABEL_WIDTH2 = 4;
+var DAY_LABEL_WIDTH3 = 4;
 var LEGEND_TEXT = "Less";
 var LEGEND_TEXT_MORE = "More";
 function buildUsageMap(daily) {
@@ -1868,11 +2189,11 @@ function renderTerminalHeatmap(daily, options) {
     }
     weeks.push(week);
   }
-  const availableWidth = options.width - DAY_LABEL_WIDTH2;
+  const availableWidth = options.width - DAY_LABEL_WIDTH3;
   const maxWeeks = Math.min(weeks.length, availableWidth);
   const displayWeeks = weeks.slice(Math.max(0, weeks.length - maxWeeks));
   const lines = [];
-  let monthHeader = " ".repeat(DAY_LABEL_WIDTH2);
+  let monthHeader = " ".repeat(DAY_LABEL_WIDTH3);
   let lastMonth = -1;
   for (const week of displayWeeks) {
     const month = week[0].getMonth();
@@ -1891,7 +2212,7 @@ function renderTerminalHeatmap(daily, options) {
   for (let dayIdx = 0;dayIdx < 7; dayIdx++) {
     const label = dayIdx % 2 === 1 ? DAY_LABELS3[dayIdx] : "   ";
     let line = label + " ";
-    line = line.slice(0, DAY_LABEL_WIDTH2);
+    line = line.slice(0, DAY_LABEL_WIDTH3);
     for (const week of displayWeeks) {
       const date = week[dayIdx];
       if (!date || date > endDate || date < startDate) {
@@ -1913,7 +2234,7 @@ function renderTerminalHeatmap(daily, options) {
     HEATMAP_BLOCKS.DARK,
     HEATMAP_BLOCKS.FULL
   ];
-  const legend = `${" ".repeat(DAY_LABEL_WIDTH2)}${LEGEND_TEXT} ${legendBlocks.join("")} ${LEGEND_TEXT_MORE}`;
+  const legend = `${" ".repeat(DAY_LABEL_WIDTH3)}${LEGEND_TEXT} ${legendBlocks.join("")} ${LEGEND_TEXT_MORE}`;
   lines.push(legend);
   return lines.join(`
 `);
@@ -2130,6 +2451,441 @@ class TerminalRenderer {
     return renderDashboard(output, effectiveOptions);
   }
 }
+// packages/renderers/dist/live/template.js
+var MONTH_NAMES3 = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+var MONTH_NAMES_FULL2 = [
+  "JAN",
+  "FEB",
+  "MAR",
+  "APR",
+  "MAY",
+  "JUN",
+  "JUL",
+  "AUG",
+  "SEP",
+  "OCT",
+  "NOV",
+  "DEC"
+];
+function formatDateRange2(since, until) {
+  const s = new Date(since + "T00:00:00Z");
+  const u = new Date(until + "T00:00:00Z");
+  const diffMs = u.getTime() - s.getTime();
+  const days = Math.round(diffMs / (1000 * 60 * 60 * 24));
+  const sMonth = MONTH_NAMES_FULL2[s.getUTCMonth()] ?? "";
+  const uMonth = MONTH_NAMES_FULL2[u.getUTCMonth()] ?? "";
+  return `${sMonth} ${s.getUTCFullYear()} &mdash; ${uMonth} ${u.getUTCFullYear()} &middot; ${days} DAYS`;
+}
+function formatPercentage2(rate) {
+  return `${(rate * 100).toFixed(1)}%`;
+}
+function formatStreak2(n) {
+  return `${n} day${n !== 1 ? "s" : ""}`;
+}
+function esc(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function computeQuantiles3(values) {
+  const nonZero = values.filter((v) => v > 0).sort((a, b) => a - b);
+  if (nonZero.length === 0)
+    return [0, 0, 0];
+  const q = (p) => {
+    const idx = Math.floor(p * (nonZero.length - 1));
+    return nonZero[idx] ?? 0;
+  };
+  return [q(0.25), q(0.5), q(0.75)];
+}
+function getLevel3(tokens, quantiles) {
+  if (tokens <= 0)
+    return 0;
+  if (tokens <= quantiles[0])
+    return 1;
+  if (tokens <= quantiles[1])
+    return 2;
+  if (tokens <= quantiles[2])
+    return 3;
+  return 4;
+}
+function hexToRgb2(hex) {
+  const h = hex.replace("#", "");
+  return {
+    r: parseInt(h.slice(0, 2), 16),
+    g: parseInt(h.slice(2, 4), 16),
+    b: parseInt(h.slice(4, 6), 16)
+  };
+}
+function rgbToHex2(r, g, b) {
+  const toHex = (n) => n.toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function buildHeatmapScale2(colors, isDark) {
+  const [startHex, endHex] = colors.gradient;
+  const s = hexToRgb2(startHex);
+  const e = hexToRgb2(endHex);
+  const opacities = isDark ? [0.15, 0.35, 0.6, 1] : [0.2, 0.4, 0.65, 1];
+  return [
+    "transparent",
+    ...opacities.map((t) => {
+      const r = Math.round(s.r + (e.r - s.r) * t);
+      const g = Math.round(s.g + (e.g - s.g) * t);
+      const b = Math.round(s.b + (e.b - s.b) * t);
+      return rgbToHex2(r, g, b);
+    })
+  ];
+}
+function buildHeatmapCells(daily, since, until) {
+  const tokenMap = new Map;
+  for (const d of daily) {
+    tokenMap.set(d.date, (tokenMap.get(d.date) ?? 0) + d.totalTokens);
+  }
+  const dates = daily.map((d) => d.date).sort();
+  const endStr = until ?? dates[dates.length - 1] ?? new Date().toISOString().slice(0, 10);
+  const startStr = since ?? dates[0] ?? endStr;
+  const end = new Date(endStr + "T00:00:00Z");
+  const start = new Date(startStr + "T00:00:00Z");
+  start.setUTCDate(start.getUTCDate() - start.getUTCDay());
+  const allTokens = Array.from(tokenMap.values());
+  const quantiles = computeQuantiles3(allTokens);
+  const cells = [];
+  const months = [];
+  let lastMonth = -1;
+  let col = 0;
+  const current = new Date(start);
+  while (current <= end) {
+    const row = current.getUTCDay();
+    const dateStr = current.toISOString().slice(0, 10);
+    const tokens = tokenMap.get(dateStr) ?? 0;
+    const level = getLevel3(tokens, quantiles);
+    cells.push({ date: dateStr, tokens, level, row, col });
+    const month = current.getUTCMonth();
+    if (month !== lastMonth && row === 0) {
+      lastMonth = month;
+      months.push({ label: MONTH_NAMES3[month] ?? "", col });
+    }
+    if (row === 6)
+      col++;
+    current.setUTCDate(current.getUTCDate() + 1);
+  }
+  return { cells, months, totalCols: col + 1 };
+}
+function renderProviderHeatmapHtml(provider, since, until, isDark, emptyCell) {
+  const heatmapColors = buildHeatmapScale2(provider.colors, isDark);
+  const { cells, months, totalCols } = buildHeatmapCells(provider.daily, since, until);
+  const cellSize = 16;
+  const cellGap = 4;
+  const dayLabelWidth = 44;
+  const monthLabelHeight = 24;
+  const heatmapWidth = dayLabelWidth + totalCols * (cellSize + cellGap);
+  const heatmapHeight = monthLabelHeight + 7 * (cellSize + cellGap);
+  const cellsHtml = cells.map((c) => {
+    const x = dayLabelWidth + c.col * (cellSize + cellGap);
+    const y = monthLabelHeight + c.row * (cellSize + cellGap);
+    const fill = c.level === 0 ? emptyCell : heatmapColors[c.level];
+    return `<div class="heatmap-cell" style="left:${x}px;top:${y}px;background:${fill}" data-date="${esc(c.date)}" data-tokens="${c.tokens}"></div>`;
+  }).join(`
+`);
+  const monthLabelsHtml = months.map((m) => {
+    const x = dayLabelWidth + m.col * (cellSize + cellGap);
+    return `<span class="month-label" style="left:${x}px">${esc(m.label)}</span>`;
+  }).join(`
+`);
+  const dayLabelsHtml = [
+    { label: "Mon", row: 1 },
+    { label: "Wed", row: 3 },
+    { label: "Fri", row: 5 },
+    { label: "Sun", row: 0 }
+  ].map((d) => {
+    const y = monthLabelHeight + d.row * (cellSize + cellGap) + cellSize - 2;
+    return `<span class="day-label" style="top:${y - 10}px">${d.label}</span>`;
+  }).join(`
+`);
+  const summaryText = `${esc(formatNumber(provider.totalTokens))} tokens &middot; ${esc(formatCost(provider.totalCost))}`;
+  return `<div class="provider-section" data-provider="${esc(provider.provider)}">
+    <div class="provider-header">
+      <div class="provider-name-row">
+        <span class="provider-dot" style="background:${esc(provider.colors.primary)}"></span>
+        <span class="provider-name">${esc(provider.displayName)}</span>
+      </div>
+      <span class="provider-summary">${summaryText}</span>
+    </div>
+    <div class="heatmap-container" style="width:${heatmapWidth}px;height:${heatmapHeight}px">
+      ${dayLabelsHtml}
+      ${monthLabelsHtml}
+      ${cellsHtml}
+    </div>
+  </div>`;
+}
+function generateHtml(output, options) {
+  const isDark = options.theme === "dark";
+  const stats = output.aggregated;
+  const { since, until } = output.dateRange;
+  const providers = output.providers;
+  const bg = isDark ? "#0c0c0c" : "#fafafa";
+  const fg = isDark ? "#ffffff" : "#18181b";
+  const muted = isDark ? "#52525b" : "#a1a1aa";
+  const accent = isDark ? "#10b981" : "#059669";
+  const border = isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.08)";
+  const emptyCell = isDark ? "#1a1a1a" : "#e4e4e7";
+  const barTrack = isDark ? "#1c1c1c" : "#e5e5e5";
+  const providerSectionsHtml = providers.map((p, i) => {
+    const section = renderProviderHeatmapHtml(p, since, until, isDark, emptyCell);
+    const divider2 = i < providers.length - 1 ? '<hr class="provider-divider">' : "";
+    return section + divider2;
+  }).join(`
+`);
+  const statRows = [
+    [
+      { label: "CURRENT STREAK", value: esc(formatStreak2(stats.currentStreak)), accent: true },
+      { label: "LONGEST STREAK", value: esc(formatStreak2(stats.longestStreak)), accent: false },
+      { label: "TOTAL TOKENS", value: esc(formatNumber(stats.totalTokens)), accent: true }
+    ],
+    [
+      { label: "TOTAL COST", value: esc(formatCost(stats.totalCost)), accent: false },
+      { label: "30-DAY TOKENS", value: esc(formatNumber(stats.rolling30dTokens)), accent: false },
+      { label: "CACHE HIT RATE", value: esc(formatPercentage2(stats.cacheHitRate)), accent: false }
+    ]
+  ];
+  const statsHtml = statRows.map((row) => `<div class="stat-row">${row.map((s) => `<div class="stat"><div class="stat-label">${s.label}</div><div class="stat-value${s.accent ? " accent" : ""}">${s.value}</div></div>`).join("")}</div>`).join("");
+  const topModels2 = stats.topModels.slice(0, 3);
+  const modelsHtml = topModels2.map((m) => {
+    const width = Math.max(2, m.percentage);
+    return `<div class="model-row">
+      <span class="model-name">${esc(m.model)}</span>
+      <div class="model-bar-track"><div class="model-bar-fill" style="width:${width}%"></div></div>
+      <span class="model-pct">${m.percentage.toFixed(0)}%</span>
+    </div>`;
+  }).join("");
+  const overallLabel = providers.length > 1 ? '<div class="overall-label">OVERALL</div>' : "";
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>tokenleak \u2014 live dashboard</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
+    background: ${isDark ? "#000" : "#f4f4f5"};
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 48px 24px;
+    min-height: 100vh;
+  }
+  .card {
+    background: ${bg};
+    border-radius: 12px;
+    border: 1px solid ${border};
+    box-shadow: 0 20px 60px -12px ${isDark ? "rgba(0,0,0,0.7)" : "rgba(0,0,0,0.15)"}, 0 0 80px ${isDark ? "rgba(16,185,129,0.1)" : "rgba(5,150,105,0.08)"};
+    max-width: 900px;
+    width: 100%;
+    overflow: hidden;
+  }
+  .titlebar {
+    display: flex;
+    align-items: center;
+    height: 48px;
+    padding: 0 20px;
+    border-bottom: 1px solid ${border};
+    gap: 8px;
+  }
+  .dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
+  .dot-red { background: #ff5f57; }
+  .dot-yellow { background: #febc2e; }
+  .dot-green { background: #28c840; }
+  .titlebar-label { color: ${muted}; font-size: 13px; font-weight: 500; margin-left: 12px; }
+  .content { padding: 28px 48px 48px; }
+  .prompt { font-size: 15px; font-weight: 500; margin-bottom: 24px; }
+  .prompt .dollar { color: ${accent}; }
+  .prompt .cmd { color: ${fg}; }
+  .prompt .cursor { color: ${accent}; animation: blink 1s step-end infinite; }
+  @keyframes blink { 50% { opacity: 0; } }
+  .date-range { color: ${muted}; font-size: 12px; font-weight: 600; letter-spacing: 2px; margin-bottom: 24px; }
+
+  /* Provider sections */
+  .provider-section { margin-bottom: 12px; }
+  .provider-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+  .provider-name-row { display: flex; align-items: center; gap: 10px; }
+  .provider-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+  .provider-name { color: ${fg}; font-size: 14px; font-weight: 600; }
+  .provider-summary { color: ${muted}; font-size: 11px; font-weight: 500; }
+  .provider-divider { border: none; border-top: 1px solid ${border}; margin: 24px 0; }
+
+  .heatmap-container { position: relative; margin-bottom: 8px; }
+  .heatmap-cell {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+  .heatmap-cell:hover { outline: 2px solid ${accent}; outline-offset: 1px; }
+  .month-label { position: absolute; top: 0; color: ${muted}; font-size: 11px; }
+  .day-label { position: absolute; left: 0; color: ${muted}; font-size: 11px; }
+  .tooltip {
+    display: none;
+    position: fixed;
+    background: ${isDark ? "#1c1c1c" : "#fff"};
+    color: ${fg};
+    border: 1px solid ${border};
+    border-radius: 6px;
+    padding: 6px 10px;
+    font-size: 11px;
+    pointer-events: none;
+    z-index: 100;
+    white-space: nowrap;
+    box-shadow: 0 4px 12px ${isDark ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0.1)"};
+  }
+
+  .divider { border: none; border-top: 1px solid ${border}; margin: 0 0 28px; }
+  .overall-label { color: ${muted}; font-size: 10px; font-weight: 600; letter-spacing: 2px; margin-bottom: 16px; }
+  .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
+  .stat-label { color: ${muted}; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; margin-bottom: 8px; }
+  .stat-value { color: ${fg}; font-size: 22px; font-weight: 700; }
+  .stat-value.accent { color: ${accent}; }
+  .models-section { margin-top: 8px; }
+  .models-label { color: ${muted}; font-size: 10px; font-weight: 600; letter-spacing: 2px; margin-bottom: 16px; }
+  .model-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
+  .model-name { color: ${muted}; font-size: 12px; width: 200px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .model-bar-track { flex: 1; height: 8px; background: ${barTrack}; border-radius: 4px; overflow: hidden; }
+  .model-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, ${accent}44, ${accent}); }
+  .model-pct { color: ${muted}; font-size: 12px; width: 40px; text-align: right; flex-shrink: 0; }
+  .refresh-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 24px;
+    padding: 8px 16px;
+    background: ${isDark ? "#1c1c1c" : "#e5e5e5"};
+    color: ${muted};
+    border: 1px solid ${border};
+    border-radius: 6px;
+    font-family: inherit;
+    font-size: 12px;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+  .refresh-btn:hover { background: ${isDark ? "#262626" : "#d4d4d8"}; color: ${fg}; }
+</style>
+</head>
+<body>
+<div class="card">
+  <div class="titlebar">
+    <div class="dot dot-red"></div>
+    <div class="dot dot-yellow"></div>
+    <div class="dot dot-green"></div>
+    <span class="titlebar-label">tokenleak</span>
+  </div>
+  <div class="content">
+    <div class="prompt">
+      <span class="dollar">$</span>
+      <span class="cmd"> tokenleak</span>
+      <span class="cursor">_</span>
+    </div>
+    <div class="date-range">${formatDateRange2(since, until)}</div>
+    ${providerSectionsHtml}
+    <hr class="divider">
+    ${overallLabel}
+    ${statsHtml}
+    <hr class="divider" style="margin-top:8px">
+    <div class="models-section">
+      <div class="models-label">TOP MODELS</div>
+      ${modelsHtml}
+    </div>
+    <button class="refresh-btn" onclick="location.reload()">&#x21bb; Refresh</button>
+  </div>
+</div>
+<div class="tooltip" id="tooltip"></div>
+<script>
+  const tooltip = document.getElementById('tooltip');
+  document.querySelectorAll('.heatmap-cell').forEach(cell => {
+    const section = cell.closest('.provider-section');
+    const provider = section ? section.dataset.provider : '';
+    cell.addEventListener('mouseenter', e => {
+      const date = cell.dataset.date;
+      const tokens = Number(cell.dataset.tokens).toLocaleString();
+      tooltip.textContent = (provider ? provider + ' \u2014 ' : '') + date + ': ' + tokens + ' tokens';
+      tooltip.style.display = 'block';
+    });
+    cell.addEventListener('mousemove', e => {
+      tooltip.style.left = (e.clientX + 12) + 'px';
+      tooltip.style.top = (e.clientY - 30) + 'px';
+    });
+    cell.addEventListener('mouseleave', () => {
+      tooltip.style.display = 'none';
+    });
+  });
+</script>
+</body>
+</html>`;
+}
+
+// packages/renderers/dist/live/live-server.js
+function tryServe(html, port) {
+  try {
+    const server = Bun.serve({
+      port,
+      fetch(_req) {
+        return new Response(html, {
+          headers: { "Content-Type": "text/html; charset=utf-8" }
+        });
+      }
+    });
+    return { server, error: null };
+  } catch (err) {
+    return { server: null, error: err };
+  }
+}
+function isAddrInUse(err) {
+  if (err && typeof err === "object") {
+    const obj = err;
+    if (obj["code"] === "EADDRINUSE")
+      return true;
+  }
+  if (err instanceof Error) {
+    const msg = err.message;
+    if (msg.includes("EADDRINUSE") || msg.includes("address already in use"))
+      return true;
+  }
+  return false;
+}
+async function startLiveServer(output, options) {
+  const html = generateHtml(output, options);
+  const startPort = options.port ?? 3333;
+  const maxAttempts = 20;
+  let port = startPort;
+  for (let attempt = 0;attempt < maxAttempts; attempt++) {
+    const result = tryServe(html, port);
+    if (result.server) {
+      const actualPort = result.server.port ?? port;
+      process.stderr.write(`Server running at http://localhost:${String(actualPort)}
+`);
+      return { port: actualPort, stop: () => result.server.stop(true) };
+    }
+    if (isAddrInUse(result.error)) {
+      port++;
+      continue;
+    }
+    throw result.error;
+  }
+  throw new Error(`Could not find a free port after ${maxAttempts} attempts starting from ${startPort}`);
+}
 // packages/cli/src/config.ts
 import { readFileSync as readFileSync2 } from "fs";
 import { join as join4 } from "path";
@@ -2332,7 +3088,8 @@ function resolveConfig(cliArgs) {
     noColor: false,
     noInsights: false,
     clipboard: false,
-    open: false
+    open: false,
+    liveServer: false
   };
   if (fileConfig.format && FORMAT_VALUES.includes(fileConfig.format)) {
     merged.format = fileConfig.format;
@@ -2404,6 +3161,9 @@ function resolveConfig(cliArgs) {
   if (cliArgs["upload"] !== undefined) {
     result.upload = cliArgs["upload"];
   }
+  if (cliArgs["liveServer"] !== undefined) {
+    result.liveServer = cliArgs["liveServer"];
+  }
   return result;
 }
 function getRenderer(format) {
@@ -2500,6 +3260,29 @@ async function run(cliArgs) {
     providers: providerDataList,
     aggregated: stats
   };
+  if (config.liveServer) {
+    const renderOptions2 = {
+      format: config.format,
+      theme: config.theme,
+      width: config.width,
+      showInsights: !config.noInsights,
+      noColor: config.noColor,
+      output: config.output
+    };
+    const { port } = await startLiveServer(output, renderOptions2);
+    await new Promise((resolve) => {
+      process.on("SIGINT", () => {
+        process.stderr.write(`
+Shutting down server...
+`);
+        resolve();
+      });
+      process.on("SIGTERM", () => {
+        resolve();
+      });
+    });
+    return;
+  }
   const renderer = getRenderer(config.format);
   const renderOptions = {
     format: config.format,
@@ -2618,6 +3401,12 @@ var main = defineCommand({
     upload: {
       type: "string",
       description: "Upload output to a service (supported: gist)"
+    },
+    liveServer: {
+      type: "boolean",
+      alias: "L",
+      description: "Start a local server with an interactive dashboard",
+      default: false
     }
   },
   async run({ args }) {
@@ -2651,6 +3440,8 @@ var main = defineCommand({
         cliArgs["open"] = true;
       if (args.upload !== undefined)
         cliArgs["upload"] = args.upload;
+      if (args.liveServer)
+        cliArgs["liveServer"] = true;
       await run(cliArgs);
     } catch (error) {
       handleError(error);