tokenleak 1.0.1 → 1.0.2

package/package.json

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

package/tokenleak

@@ -756,7 +756,7 @@ function computePreviousPeriod(current) {
   };
 }
 // packages/core/dist/index.js
-var VERSION = "1.0.1";
+var VERSION = "1.0.2";
 
 // packages/registry/dist/models/normalizer.js
 var DATE_SUFFIX_PATTERN = /-\d{8}$/;
@@ -1792,66 +1792,10 @@ class JsonRenderer {
     return JSON.stringify(output, null, 2);
   }
 }
-// packages/renderers/dist/svg/theme.js
-var DARK_THEME = {
-  background: "#0d1117",
-  foreground: "#e6edf3",
-  muted: "#7d8590",
-  border: "#30363d",
-  cardBackground: "#161b22",
-  heatmap: ["#161b22", "#1e3a5f", "#2563eb", "#3b82f6", "#1d4ed8"],
-  accent: "#58a6ff",
-  accentSecondary: "#bc8cff",
-  barFill: "#3b82f6",
-  barBackground: "#21262d"
-};
-var LIGHT_THEME = {
-  background: "#ffffff",
-  foreground: "#1a1a2e",
-  muted: "#8b8fa3",
-  border: "#e5e7eb",
-  cardBackground: "#f8f9fc",
-  heatmap: ["#ebedf0", "#c6d4f7", "#8da4ef", "#5b6abf", "#2f3778"],
-  accent: "#3b5bdb",
-  accentSecondary: "#7048e8",
-  barFill: "#5b6abf",
-  barBackground: "#ebedf0"
-};
-function getTheme(mode) {
-  return mode === "dark" ? DARK_THEME : LIGHT_THEME;
-}
-
-// packages/renderers/dist/svg/layout.js
-var PADDING = 40;
-var CELL_SIZE = 16;
-var CELL_GAP = 4;
-var MONTH_LABEL_HEIGHT = 24;
-var DAY_LABEL_WIDTH = 44;
-var HEATMAP_ROWS = 7;
-var SECTION_GAP = 32;
-var FONT_SIZE_TITLE = 28;
-var FONT_SIZE_SUBTITLE = 14;
-var FONT_SIZE_SMALL = 11;
-var FONT_SIZE_STAT_VALUE = 32;
-var FONT_SIZE_STAT_LABEL = 11;
-var FONT_FAMILY = "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif";
-
 // packages/renderers/dist/svg/utils.js
 function escapeXml(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
 }
-function rect(x, y, w, h, fill, rx) {
-  const rxAttr = rx !== undefined ? ` rx="${rx}"` : "";
-  return `<rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${escapeXml(fill)}"${rxAttr}/>`;
-}
-function text(x, y, content, attrs) {
-  const attrStr = attrs ? Object.entries(attrs).map(([k, v]) => ` ${k}="${typeof v === "string" ? escapeXml(v) : v}"`).join("") : "";
-  return `<text x="${x}" y="${y}"${attrStr}>${escapeXml(content)}</text>`;
-}
-function group(children, transform) {
-  const transformAttr = transform ? ` transform="${escapeXml(transform)}"` : "";
-  return `<g${transformAttr}>${children.join("")}</g>`;
-}
 function formatNumber(n) {
   if (n >= 1e6) {
     const millions = Number((n / 1e6).toFixed(1));
@@ -1879,275 +1823,35 @@ function formatCost(cost) {
   return `$${cost.toFixed(4)}`;
 }
 
-// packages/renderers/dist/svg/heatmap.js
-var DAY_LABELS2 = ["Mon", "", "Wed", "", "Fri", "", "Sun"];
-var MONTH_NAMES = [
-  "Jan",
-  "Feb",
-  "Mar",
-  "Apr",
-  "May",
-  "Jun",
-  "Jul",
-  "Aug",
-  "Sep",
-  "Oct",
-  "Nov",
-  "Dec"
-];
-function getLevel(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 computeQuantiles(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 renderHeatmap(daily, theme, options = {}) {
-  const tokenMap = new Map;
-  for (const d of daily) {
-    const existing = tokenMap.get(d.date) ?? 0;
-    tokenMap.set(d.date, existing + d.totalTokens);
-  }
-  const dates = daily.map((d) => d.date).sort();
-  const endStr = options.endDate ?? dates[dates.length - 1] ?? new Date().toISOString().slice(0, 10);
-  const startStr = options.startDate ?? dates[0] ?? endStr;
-  const end = new Date(endStr + "T00:00:00Z");
-  const start = new Date(startStr + "T00:00:00Z");
-  const startDay = start.getUTCDay();
-  start.setUTCDate(start.getUTCDate() - startDay);
-  const cells = [];
-  const allTokens = Array.from(tokenMap.values());
-  const quantiles = computeQuantiles(allTokens);
-  const current = new Date(start);
-  let col = 0;
-  const monthLabels = [];
-  let lastMonth = -1;
-  const cellRadius = 3;
-  while (current <= end) {
-    const row = current.getUTCDay();
-    const dateStr = current.toISOString().slice(0, 10);
-    const tokens = tokenMap.get(dateStr) ?? 0;
-    const level = getLevel(tokens, quantiles);
-    const x = DAY_LABEL_WIDTH + col * (CELL_SIZE + CELL_GAP);
-    const y = MONTH_LABEL_HEIGHT + row * (CELL_SIZE + CELL_GAP);
-    const title = `${dateStr}: ${tokens.toLocaleString()} tokens`;
-    cells.push(`<rect x="${x}" y="${y}" width="${CELL_SIZE}" height="${CELL_SIZE}" fill="${escapeXml(theme.heatmap[level])}" rx="${cellRadius}"><title>${escapeXml(title)}</title></rect>`);
-    const month = current.getUTCMonth();
-    if (month !== lastMonth && row === 0) {
-      lastMonth = month;
-      monthLabels.push(text(x, MONTH_LABEL_HEIGHT - 8, MONTH_NAMES[month] ?? "", {
-        fill: theme.muted,
-        "font-size": FONT_SIZE_SMALL,
-        "font-family": FONT_FAMILY
-      }));
-    }
-    if (row === 6) {
-      col++;
-    }
-    current.setUTCDate(current.getUTCDate() + 1);
-  }
-  const dayLabels = DAY_LABELS2.map((label, i) => {
-    if (!label)
-      return "";
-    const y = MONTH_LABEL_HEIGHT + i * (CELL_SIZE + CELL_GAP) + CELL_SIZE - 2;
-    return text(0, y, label, {
-      fill: theme.muted,
-      "font-size": FONT_SIZE_SMALL,
-      "font-family": FONT_FAMILY
-    });
-  });
-  const totalCols = col + 1;
-  const gridWidth = DAY_LABEL_WIDTH + totalCols * CELL_SIZE + Math.max(0, totalCols - 1) * CELL_GAP;
-  const height = MONTH_LABEL_HEIGHT + HEATMAP_ROWS * CELL_SIZE + (HEATMAP_ROWS - 1) * CELL_GAP;
-  const legendY = height + 16;
-  const legendItems = [];
-  const legendStartX = 0;
-  legendItems.push(text(legendStartX, legendY + CELL_SIZE - 2, "LESS", {
-    fill: theme.muted,
-    "font-size": 9,
-    "font-family": FONT_FAMILY,
-    "font-weight": "600",
-    "letter-spacing": "0.5"
-  }));
-  const legendBoxStart = legendStartX + 40;
-  for (let i = 0;i < 5; i++) {
-    legendItems.push(`<rect x="${legendBoxStart + i * (CELL_SIZE + 3)}" y="${legendY}" width="${CELL_SIZE}" height="${CELL_SIZE}" fill="${escapeXml(theme.heatmap[i])}" rx="${cellRadius}"/>`);
-  }
-  legendItems.push(text(legendBoxStart + 5 * (CELL_SIZE + 3) + 4, legendY + CELL_SIZE - 2, "MORE", {
-    fill: theme.muted,
-    "font-size": 9,
-    "font-family": FONT_FAMILY,
-    "font-weight": "600",
-    "letter-spacing": "0.5"
-  }));
-  const totalHeight = legendY + CELL_SIZE + 8;
-  const legendRightX = legendBoxStart + 5 * (CELL_SIZE + 3) + 4 + 40;
-  const width = Math.max(gridWidth, legendRightX);
-  const svg = group([...monthLabels, ...dayLabels, ...cells, ...legendItems]);
-  return { svg, width, height: totalHeight };
-}
-
-// packages/renderers/dist/svg/svg-renderer.js
-var MIN_SVG_WIDTH = 1000;
-var MAX_STAT_VALUE_CHARS = 28;
-function truncateText(value, maxChars) {
-  if (value.length <= maxChars)
-    return value;
-  return value.slice(0, maxChars - 1) + "\u2026";
-}
-function renderHeaderStat(x, y, label, value, theme, align = "end") {
-  const anchor = align === "end" ? "end" : "start";
-  return group([
-    text(x, y, label, {
-      fill: theme.muted,
-      "font-size": FONT_SIZE_STAT_LABEL,
-      "font-family": FONT_FAMILY,
-      "font-weight": "700",
-      "text-anchor": anchor,
-      "letter-spacing": "1"
-    }),
-    text(x, y + 34, value, {
-      fill: theme.foreground,
-      "font-size": FONT_SIZE_STAT_VALUE,
-      "font-family": FONT_FAMILY,
-      "font-weight": "700",
-      "text-anchor": anchor
-    })
-  ]);
-}
-function renderBottomStat(x, y, label, value, theme) {
-  return group([
-    text(x, y, label, {
-      fill: theme.muted,
-      "font-size": FONT_SIZE_STAT_LABEL,
-      "font-family": FONT_FAMILY,
-      "font-weight": "700",
-      "letter-spacing": "0.8"
-    }),
-    text(x, y + 32, value, {
-      fill: theme.foreground,
-      "font-size": 18,
-      "font-family": FONT_FAMILY,
-      "font-weight": "700"
-    })
-  ]);
-}
-
-class SvgRenderer {
-  format = "svg";
-  async render(output, options) {
-    const theme = getTheme(options.theme);
-    const sections = [];
-    const sectionWidths = [];
-    let y = PADDING;
-    const providerName = output.providers.length > 0 ? output.providers.map((p) => p.displayName).join(" + ") : "Tokenleak";
-    sections.push(text(PADDING, y + FONT_SIZE_TITLE, providerName, {
-      fill: theme.foreground,
-      "font-size": FONT_SIZE_TITLE,
-      "font-family": FONT_FAMILY,
-      "font-weight": "700"
-    }));
-    sections.push(text(PADDING, y + FONT_SIZE_TITLE + 22, `${output.dateRange.since} \u2014 ${output.dateRange.until}`, {
-      fill: theme.muted,
-      "font-size": FONT_SIZE_SUBTITLE,
-      "font-family": FONT_FAMILY
-    }));
-    const allDaily = output.providers.flatMap((p) => p.daily);
-    const heatmap = renderHeatmap(allDaily, theme, {
-      startDate: output.dateRange.since,
-      endDate: output.dateRange.until
-    });
-    sectionWidths.push(heatmap.width);
-    const contentWidth = Math.max(heatmap.width, MIN_SVG_WIDTH - PADDING * 2);
-    const stats = output.aggregated;
-    const headerStatSpacing = 180;
-    const headerStatsX = PADDING + contentWidth;
-    sections.push(renderHeaderStat(headerStatsX, y, "INPUT TOKENS", formatNumber(stats.totalInputTokens), theme));
-    sections.push(renderHeaderStat(headerStatsX - headerStatSpacing, y, "OUTPUT TOKENS", formatNumber(stats.totalOutputTokens), theme));
-    sections.push(renderHeaderStat(headerStatsX - headerStatSpacing * 2, y, "TOTAL TOKENS", formatNumber(stats.totalTokens), theme));
-    y += FONT_SIZE_TITLE + 22 + SECTION_GAP;
-    if (allDaily.length > 0) {
-      sections.push(group([heatmap.svg], `translate(${PADDING}, ${y})`));
-      y += heatmap.height + SECTION_GAP + 8;
-    }
-    sections.push(`<line x1="${PADDING}" y1="${y}" x2="${PADDING + contentWidth}" y2="${y}" stroke="${escapeXml(theme.border)}" stroke-width="1"/>`);
-    y += SECTION_GAP;
-    const col1Width = contentWidth * 0.35;
-    const col2Width = contentWidth * 0.35;
-    const col3Width = contentWidth * 0.15;
-    const col4Width = contentWidth * 0.15;
-    const topModel = stats.topModels.length > 0 ? stats.topModels[0] : null;
-    const topModelLabel = topModel ? truncateText(`${topModel.model} (${formatNumber(topModel.tokens)})`, MAX_STAT_VALUE_CHARS) : "N/A";
-    sections.push(renderBottomStat(PADDING, y, "MOST USED MODEL", topModelLabel, theme));
-    const recent30Label = stats.rolling30dTopModel ? truncateText(`${stats.rolling30dTopModel} (${formatNumber(stats.rolling30dTokens)})`, MAX_STAT_VALUE_CHARS) : formatNumber(stats.rolling30dTokens);
-    sections.push(renderBottomStat(PADDING + col1Width, y, "RECENT USE (LAST 30 DAYS)", recent30Label, theme));
-    sections.push(renderBottomStat(PADDING + col1Width + col2Width, y, "LONGEST STREAK", `${stats.longestStreak} days`, theme));
-    sections.push(renderBottomStat(PADDING + col1Width + col2Width + col3Width, y, "CURRENT STREAK", `${stats.currentStreak} days`, theme));
-    y += 56 + SECTION_GAP;
-    const evenCardWidth = contentWidth / 4;
-    sections.push(`<line x1="${PADDING}" y1="${y - SECTION_GAP / 2}" x2="${PADDING + contentWidth}" y2="${y - SECTION_GAP / 2}" stroke="${escapeXml(theme.border)}" stroke-width="1"/>`);
-    sections.push(renderBottomStat(PADDING, y, "TOTAL COST", stats.totalCost >= 100 ? `$${stats.totalCost.toFixed(0)}` : `$${stats.totalCost.toFixed(2)}`, theme));
-    sections.push(renderBottomStat(PADDING + evenCardWidth, y, "CACHE HIT RATE", `${(stats.cacheHitRate * 100).toFixed(1)}%`, theme));
-    sections.push(renderBottomStat(PADDING + evenCardWidth * 2, y, "ACTIVE DAYS", `${stats.activeDays} / ${stats.totalDays}`, theme));
-    sections.push(renderBottomStat(PADDING + evenCardWidth * 3, y, "AVG DAILY TOKENS", formatNumber(stats.averageDailyTokens), theme));
-    y += 56 + PADDING;
-    const totalHeight = y;
-    const svgWidth = Math.max(contentWidth + PADDING * 2, MIN_SVG_WIDTH);
-    sections.push(text(svgWidth - PADDING, totalHeight - 16, "tokenleak", {
-      fill: theme.muted,
-      "font-size": 10,
-      "font-family": FONT_FAMILY,
-      "text-anchor": "end",
-      opacity: "0.4"
-    }));
-    const svgContent = [
-      `<svg xmlns="http://www.w3.org/2000/svg" width="${svgWidth}" height="${totalHeight}" viewBox="0 0 ${svgWidth} ${totalHeight}">`,
-      `<defs><style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&amp;display=swap');</style></defs>`,
-      rect(0, 0, svgWidth, totalHeight, theme.background, 12),
-      ...sections,
-      "</svg>"
-    ].join(`
-`);
-    return svgContent;
-  }
-}
-// packages/renderers/dist/png/terminal-card.js
+// packages/renderers/dist/card/layout.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 CELL_SIZE = 16;
+var CELL_GAP = 4;
 var STAT_GRID_COLS = 3;
 var MODEL_BAR_HEIGHT = 8;
-var DAY_LABEL_WIDTH2 = 44;
-var MONTH_LABEL_HEIGHT2 = 24;
+var DAY_LABEL_WIDTH = 44;
+var MONTH_LABEL_HEIGHT = 24;
 var PROVIDER_SECTION_GAP = 36;
-var FONT_FAMILY2 = "'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', monospace";
+var MIN_CONTENT_WIDTH = 700;
+var MODEL_NAME_WIDTH = 220;
+var MODEL_BAR_GAP = 36;
+var MODEL_PERCENT_WIDTH = 40;
+
+// packages/renderers/dist/png/terminal-card.js
+var FONT_FAMILY = "'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', monospace";
 function getCardTheme(mode) {
   if (mode === "dark") {
     return {
-      bg: "#0c0c0c",
+      bg: "#09090b",
       fg: "#ffffff",
       muted: "#52525b",
       border: "rgba(255,255,255,0.06)",
       accent: "#10b981",
-      heatmapEmpty: "#1a1a1a",
-      barTrack: "#1c1c1c",
+      heatmapEmpty: "#141418",
+      barTrack: "#18181b",
       titlebarBorder: "rgba(255,255,255,0.06)"
     };
   }
@@ -2189,7 +1893,7 @@ function rgbToHex(r, g, b) {
   const toHex = (n) => n.toString(16).padStart(2, "0");
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
-function computeQuantiles2(values) {
+function computeQuantiles(values) {
   const nonZero = values.filter((v) => v > 0).sort((a, b) => a - b);
   if (nonZero.length === 0)
     return [0, 0, 0];
@@ -2199,7 +1903,7 @@ function computeQuantiles2(values) {
   };
   return [q(0.25), q(0.5), q(0.75)];
 }
-function getLevel2(tokens, quantiles) {
+function getLevel(tokens, quantiles) {
   if (tokens <= 0)
     return 0;
   if (tokens <= quantiles[0])
@@ -2210,7 +1914,7 @@ function getLevel2(tokens, quantiles) {
     return 3;
   return 4;
 }
-var MONTH_NAMES2 = [
+var MONTH_NAMES = [
   "Jan",
   "Feb",
   "Mar",
@@ -2265,7 +1969,7 @@ function renderProviderHeatmap(daily, since, until, heatmapColors, emptyColor) {
   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 quantiles = computeQuantiles(allTokens);
   const cells = [];
   const monthLabels = [];
   let lastMonth = -1;
@@ -2275,33 +1979,36 @@ function renderProviderHeatmap(daily, since, until, heatmapColors, emptyColor) {
     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 level = getLevel(tokens, quantiles);
+    const x = DAY_LABEL_WIDTH + col * (CELL_SIZE + CELL_GAP);
+    const y = MONTH_LABEL_HEIGHT + row * (CELL_SIZE + CELL_GAP);
     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>`);
+    cells.push(`<rect x="${x}" y="${y}" width="${CELL_SIZE}" height="${CELL_SIZE}" 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>`);
+      monthLabels.push(`<text x="${x}" y="${MONTH_LABEL_HEIGHT - 8}" fill="__MUTED__" font-size="11" font-family="${escapeXml(FONT_FAMILY)}">${escapeXml(MONTH_NAMES[month] ?? "")}</text>`);
     }
     if (row === 6)
       col++;
     current.setUTCDate(current.getUTCDate() + 1);
   }
   const dayLabels = [
+    { label: "Sun", row: 0 },
     { label: "Mon", row: 1 },
+    { label: "Tue", row: 2 },
     { label: "Wed", row: 3 },
+    { label: "Thu", row: 4 },
     { label: "Fri", row: 5 },
-    { label: "Sun", row: 0 }
+    { label: "Sat", row: 6 }
   ].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>`;
+    const y = MONTH_LABEL_HEIGHT + d.row * (CELL_SIZE + CELL_GAP) + CELL_SIZE - 2;
+    return `<text x="0" y="${y}" fill="__MUTED__" font-size="11" font-family="${escapeXml(FONT_FAMILY)}">${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 gridWidth = DAY_LABEL_WIDTH + totalCols * (CELL_SIZE + CELL_GAP);
+  const height = MONTH_LABEL_HEIGHT + 7 * (CELL_SIZE + CELL_GAP);
   const svg = [dayLabels, ...monthLabels, ...cells].join(`
 `);
   return { svg, gridWidth, height };
@@ -2313,6 +2020,7 @@ function renderTerminalCardSvg(output, options) {
   const stats = output.aggregated;
   const { since, until } = output.dateRange;
   const providers = output.providers;
+  const cardAccent = providers.length === 1 ? providers[0]?.colors.primary ?? theme.accent : theme.accent;
   const providerHeatmaps = providers.map((p) => {
     const heatmapColors = buildHeatmapScale(p.colors, isDark);
     return {
@@ -2322,7 +2030,7 @@ function renderTerminalCardSvg(output, options) {
     };
   });
   const maxHeatmapWidth = providerHeatmaps.reduce((max, ph) => Math.max(max, ph.heatmap.gridWidth), 0);
-  const minContentWidth = Math.max(maxHeatmapWidth, 700);
+  const minContentWidth = Math.max(maxHeatmapWidth, MIN_CONTENT_WIDTH);
   const cardWidth = minContentWidth + pad * 2;
   const contentWidth = cardWidth - pad * 2;
   let y = 0;
@@ -2340,23 +2048,21 @@ function renderTerminalCardSvg(output, options) {
   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>`);
+  sections.push(`<text x="${pad}" y="${y + 16}" font-size="15" font-family="${escapeXml(FONT_FAMILY)}" font-weight="500">` + `<tspan fill="${escapeXml(cardAccent)}">$</tspan>` + `<tspan fill="${escapeXml(theme.fg)}"> tokenleak</tspan>` + `<tspan fill="${escapeXml(cardAccent)}">_</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>`);
+  sections.push(`<text x="${pad}" y="${y + 14}" fill="${escapeXml(theme.muted)}" font-size="12" font-family="${escapeXml(FONT_FAMILY)}" 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>`);
+    sections.push(`<text x="${pad + provDotRadius * 2 + 10}" y="${y + 13}" fill="${escapeXml(theme.fg)}" font-size="14" font-family="${escapeXml(FONT_FAMILY)}" 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>`);
+    sections.push(`<text x="${cardWidth - pad}" y="${y + 13}" fill="${escapeXml(theme.muted)}" font-size="11" font-family="${escapeXml(FONT_FAMILY)}" 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})">`);
@@ -2372,13 +2078,13 @@ function renderTerminalCardSvg(output, options) {
     }
   }
   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>`);
+    sections.push(`<text x="${pad}" y="${y + 14}" fill="${escapeXml(theme.muted)}" font-size="12" font-family="${escapeXml(FONT_FAMILY)}" 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>`);
+    sections.push(`<text x="${pad}" y="${y}" fill="${escapeXml(theme.muted)}" font-size="10" font-family="${escapeXml(FONT_FAMILY)}" font-weight="600" letter-spacing="2">${escapeXml("OVERALL")}</text>`);
     y += 24;
   }
   const statColWidth = contentWidth / STAT_GRID_COLS;
@@ -2396,9 +2102,9 @@ function renderTerminalCardSvg(output, options) {
     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>`);
+      sections.push(`<text x="${x}" y="${startY}" fill="${escapeXml(theme.muted)}" font-size="10" font-family="${escapeXml(FONT_FAMILY)}" font-weight="600" letter-spacing="1.5">${escapeXml(stat.label)}</text>`);
+      const valueColor = stat.accent ? cardAccent : theme.fg;
+      sections.push(`<text x="${x}" y="${startY + 28}" fill="${escapeXml(valueColor)}" font-size="22" font-family="${escapeXml(FONT_FAMILY)}" font-weight="700">${escapeXml(stat.value)}</text>`);
     }
   }
   renderStatRow(statsRow1, y);
@@ -2408,21 +2114,22 @@ function renderTerminalCardSvg(output, options) {
   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>`);
+  sections.push(`<text x="${pad}" y="${y}" fill="${escapeXml(theme.muted)}" font-size="10" font-family="${escapeXml(FONT_FAMILY)}" 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 modelNameWidth = MODEL_NAME_WIDTH;
+  const barGap = MODEL_BAR_GAP;
+  const percentX = cardWidth - pad;
+  const barX = pad + modelNameWidth;
+  const barMaxWidth = Math.max(48, percentX - barX - barGap);
+  for (const [index, model] of topModels2.entries()) {
     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(`<text x="${pad}" y="${y + MODEL_BAR_HEIGHT - 1}" fill="${escapeXml(theme.muted)}" font-size="12" font-family="${escapeXml(FONT_FAMILY)}" font-weight="400">${escapeXml(model.model)}</text>`);
     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>`);
+    const gradId = `grad-${index}-${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(cardAccent)}44"/>` + `<stop offset="100%" stop-color="${escapeXml(cardAccent)}"/>` + `</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>`);
+    sections.push(`<text x="${percentX}" y="${y + MODEL_BAR_HEIGHT - 1}" fill="${escapeXml(theme.muted)}" font-size="12" font-family="${escapeXml(FONT_FAMILY)}" font-weight="500" text-anchor="end">${escapeXml(`${model.percentage.toFixed(0)}%`)}</text>`);
     y += 32;
   }
   y += pad * 0.5;
@@ -2430,16 +2137,26 @@ function renderTerminalCardSvg(output, options) {
   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}" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${cardWidth}" height="${cardHeight}" viewBox="0 0 ${cardWidth} ${cardHeight}" shape-rendering="geometricPrecision" text-rendering="optimizeLegibility" color-rendering="optimizeQuality">`,
     svg,
     "</svg>"
   ].join(`
 `);
 }
 
+// packages/renderers/dist/svg/svg-renderer.js
+class SvgRenderer {
+  format = "svg";
+  async render(output, options) {
+    return renderTerminalCardSvg(output, {
+      ...options,
+      format: "svg"
+    });
+  }
+}
 // packages/renderers/dist/png/png-renderer.js
 import sharp from "sharp";
-var PNG_DENSITY = 288;
+var PNG_DENSITY = 432;
 
 class PngRenderer {
   format = "png";
@@ -2448,7 +2165,9 @@ class PngRenderer {
     const pngBuffer = await sharp(Buffer.from(svgString), {
       density: PNG_DENSITY
     }).png({
-      compressionLevel: 9
+      adaptiveFiltering: true,
+      compressionLevel: 9,
+      force: true
     }).toBuffer();
     return pngBuffer;
   }
@@ -2475,20 +2194,8 @@ var HEATMAP_BLOCKS = {
   DARK: "\u2593",
   MEDIUM: "\u2592",
   LIGHT: "\u2591",
-  EMPTY: " "
+  EMPTY: "\xB7"
 };
-function intensityBlock(value, max) {
-  if (max <= 0 || value <= 0)
-    return HEATMAP_BLOCKS.EMPTY;
-  const ratio = value / max;
-  if (ratio >= 0.75)
-    return HEATMAP_BLOCKS.FULL;
-  if (ratio >= 0.5)
-    return HEATMAP_BLOCKS.DARK;
-  if (ratio >= 0.25)
-    return HEATMAP_BLOCKS.MEDIUM;
-  return HEATMAP_BLOCKS.LIGHT;
-}
 function intensityColor(value, max) {
   if (max <= 0 || value <= 0)
     return "dim";
@@ -2503,9 +2210,10 @@ function intensityColor(value, max) {
 }
 
 // packages/renderers/dist/terminal/heatmap.js
-var DAY_LABELS3 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var DAY_LABELS2 = ["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_WIDTH3 = 4;
+var DAY_LABEL_WIDTH2 = 4;
+var WEEK_COLUMN_WIDTH = 2;
 var LEGEND_TEXT = "Less";
 var LEGEND_TEXT_MORE = "More";
 function buildUsageMap(daily) {
@@ -2515,83 +2223,117 @@ function buildUsageMap(daily) {
   }
   return map;
 }
-function renderTerminalHeatmap(daily, options) {
-  if (daily.length === 0) {
-    return "  No usage data available.";
+function computeQuantiles2(values) {
+  const nonZero = values.filter((value) => value > 0).sort((a, b) => a - b);
+  if (nonZero.length === 0)
+    return [0, 0, 0];
+  const quantile = (ratio) => {
+    const index = Math.floor(ratio * (nonZero.length - 1));
+    return nonZero[index] ?? 0;
+  };
+  return [quantile(0.25), quantile(0.5), quantile(0.75)];
+}
+function getHeatmapBlock(tokens, quantiles) {
+  if (tokens <= 0)
+    return HEATMAP_BLOCKS.EMPTY;
+  if (tokens <= quantiles[0])
+    return HEATMAP_BLOCKS.LIGHT;
+  if (tokens <= quantiles[1])
+    return HEATMAP_BLOCKS.MEDIUM;
+  if (tokens <= quantiles[2])
+    return HEATMAP_BLOCKS.DARK;
+  return HEATMAP_BLOCKS.FULL;
+}
+function formatDate(date) {
+  const year = date.getUTCFullYear();
+  const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const day = String(date.getUTCDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+function buildMonthHeader(weeks) {
+  const header = Array.from({ length: weeks.length * WEEK_COLUMN_WIDTH }, () => " ");
+  let lastMonth = -1;
+  let nextFreeIndex = 0;
+  for (let weekIndex = 0;weekIndex < weeks.length; weekIndex++) {
+    const firstDay = weeks[weekIndex]?.[0];
+    if (!firstDay)
+      continue;
+    const month = firstDay.getUTCMonth();
+    if (month === lastMonth)
+      continue;
+    lastMonth = month;
+    const desiredStart = weekIndex * WEEK_COLUMN_WIDTH;
+    const startIndex = Math.max(desiredStart, nextFreeIndex);
+    const remaining = header.length - startIndex;
+    if (remaining <= 0)
+      continue;
+    const fullLabel = MONTH_LABELS[month] ?? "";
+    const label = remaining >= fullLabel.length ? fullLabel : remaining >= 2 ? fullLabel.slice(0, 2) : fullLabel.slice(0, 1);
+    for (let offset = 0;offset < label.length; offset++) {
+      header[startIndex + offset] = label[offset] ?? " ";
+    }
+    nextFreeIndex = startIndex + label.length + 1;
   }
-  const usageMap = buildUsageMap(daily);
-  const maxTokens = Math.max(...usageMap.values(), 0);
-  const dates = daily.map((d) => d.date).sort();
-  const startDate = new Date(dates[0]);
-  const endDate = new Date(dates[dates.length - 1]);
+  return `${" ".repeat(DAY_LABEL_WIDTH2)}${header.join("")}`;
+}
+function buildWeeks(startDate, endDate) {
   const alignedStart = new Date(startDate);
-  alignedStart.setDate(alignedStart.getDate() - alignedStart.getDay());
+  alignedStart.setUTCDate(alignedStart.getUTCDate() - alignedStart.getUTCDay());
   const weeks = [];
-  const current = new Date(alignedStart);
-  while (current <= endDate) {
+  const cursor = new Date(alignedStart);
+  while (cursor <= endDate) {
     const week = [];
-    for (let d = 0;d < 7; d++) {
-      week.push(new Date(current));
-      current.setDate(current.getDate() + 1);
+    for (let day = 0;day < 7; day++) {
+      week.push(new Date(cursor));
+      cursor.setUTCDate(cursor.getUTCDate() + 1);
     }
     weeks.push(week);
   }
-  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_WIDTH3);
-  let lastMonth = -1;
-  for (const week of displayWeeks) {
-    const month = week[0].getMonth();
-    if (month !== lastMonth) {
-      monthHeader += MONTH_LABELS[month];
-      lastMonth = month;
-      const labelLen = MONTH_LABELS[month].length;
-    } else {
-      monthHeader += " ";
-    }
-  }
-  if (monthHeader.length > options.width) {
-    monthHeader = monthHeader.slice(0, options.width);
+  return weeks;
+}
+function renderTerminalHeatmap(daily, options) {
+  if (daily.length === 0) {
+    return "  No usage data available.";
   }
-  lines.push(monthHeader);
-  for (let dayIdx = 0;dayIdx < 7; dayIdx++) {
-    const label = dayIdx % 2 === 1 ? DAY_LABELS3[dayIdx] : "   ";
-    let line = label + " ";
-    line = line.slice(0, DAY_LABEL_WIDTH3);
+  const usageMap = buildUsageMap(daily);
+  const quantiles = computeQuantiles2(Array.from(usageMap.values()));
+  const maxTokens = Math.max(...usageMap.values(), 0);
+  const dates = daily.map((entry) => entry.date).sort();
+  const startDate = new Date(`${dates[0]}T00:00:00Z`);
+  const endDate = new Date(`${dates[dates.length - 1]}T00:00:00Z`);
+  const weeks = buildWeeks(startDate, endDate);
+  const availableColumns = Math.max(WEEK_COLUMN_WIDTH, options.width - DAY_LABEL_WIDTH2);
+  const maxWeeks = Math.max(1, Math.floor(availableColumns / WEEK_COLUMN_WIDTH));
+  const displayWeeks = weeks.slice(Math.max(0, weeks.length - maxWeeks));
+  const lines = [buildMonthHeader(displayWeeks)];
+  for (let dayIndex = 0;dayIndex < 7; dayIndex++) {
+    const label = DAY_LABELS2[dayIndex] ?? "   ";
+    let line = `${label} `.slice(0, DAY_LABEL_WIDTH2);
     for (const week of displayWeeks) {
-      const date = week[dayIdx];
-      if (!date || date > endDate || date < startDate) {
-        line += " ";
+      const date = week[dayIndex];
+      if (!date || date < startDate || date > endDate) {
+        line += `${HEATMAP_BLOCKS.EMPTY} `;
         continue;
       }
-      const dateStr = formatDate(date);
-      const tokens = usageMap.get(dateStr) ?? 0;
-      const block = intensityBlock(tokens, maxTokens);
+      const dateString = formatDate(date);
+      const tokens = usageMap.get(dateString) ?? 0;
+      const block = getHeatmapBlock(tokens, quantiles);
       const color = intensityColor(tokens, maxTokens);
-      line += colorize(block, color, options.noColor);
+      line += `${colorize(block, color, options.noColor)} `;
     }
-    lines.push(line);
+    lines.push(line.trimEnd());
   }
-  const legendBlocks = [
+  const legend = `${" ".repeat(DAY_LABEL_WIDTH2)}${LEGEND_TEXT} ${[
     HEATMAP_BLOCKS.EMPTY,
     HEATMAP_BLOCKS.LIGHT,
     HEATMAP_BLOCKS.MEDIUM,
     HEATMAP_BLOCKS.DARK,
     HEATMAP_BLOCKS.FULL
-  ];
-  const legend = `${" ".repeat(DAY_LABEL_WIDTH3)}${LEGEND_TEXT} ${legendBlocks.join("")} ${LEGEND_TEXT_MORE}`;
+  ].join("")} ${LEGEND_TEXT_MORE}`;
   lines.push(legend);
   return lines.join(`
 `);
 }
-function formatDate(date) {
-  const y = date.getFullYear();
-  const m = String(date.getMonth() + 1).padStart(2, "0");
-  const d = String(date.getDate()).padStart(2, "0");
-  return `${y}-${m}-${d}`;
-}
 
 // packages/renderers/dist/terminal/dashboard.js
 var BOX_H = "\u2500";
@@ -2686,11 +2428,18 @@ function renderDayOfWeek(stats, width, noColor2) {
 }
 function renderTopModels(stats, width, noColor2) {
   const lines = [];
+  const nameWidth = Math.min(28, Math.max(16, Math.floor(width * 0.35)));
+  const pctWidth = 4;
+  const barGap = 2;
+  const barWidth = Math.max(8, width - nameWidth - pctWidth - 6);
   for (const model of stats.topModels.slice(0, 5)) {
     const pct = formatSharePercent(model.percentage);
-    const tokens = formatTokens(model.tokens);
-    const line = `  ${colorize(model.model, "yellow", noColor2)}  ${tokens}  ${pct}`;
-    lines.push(line.length > width ? line.slice(0, width) : line);
+    const normalizedName = model.model.length > nameWidth ? `${model.model.slice(0, nameWidth - 1)}\u2026` : model.model;
+    const fillLength = Math.max(1, Math.round(model.percentage / 100 * barWidth));
+    const fill = colorize(BAR_CHAR.repeat(fillLength), "green", noColor2);
+    const track = "\u2591".repeat(Math.max(0, barWidth - fillLength));
+    const line = `  ${colorize(normalizedName.padEnd(nameWidth), "yellow", noColor2)}${" ".repeat(barGap)}${fill}${track}${" ".repeat(barGap)}${pct.padStart(pctWidth)}`;
+    lines.push(line);
   }
   return lines.join(`
 `);
@@ -2757,7 +2506,8 @@ function renderDashboard(output, options) {
   }
   for (let i = 0;i < output.providers.length; i++) {
     const provider = output.providers[i];
-    sections.push(renderProviderSection(provider, output.aggregated, width, noColor2, options.showInsights));
+    const providerStats = aggregate(provider.daily, output.dateRange.until);
+    sections.push(renderProviderSection(provider, providerStats, width, noColor2, options.showInsights));
     if (i < output.providers.length - 1) {
       sections.push("");
       sections.push(divider(width));
@@ -2802,7 +2552,7 @@ class TerminalRenderer {
   }
 }
 // packages/renderers/dist/live/template.js
-var MONTH_NAMES3 = [
+var MONTH_NAMES2 = [
   "Jan",
   "Feb",
   "Mar",
@@ -2858,7 +2608,7 @@ function computeQuantiles3(values) {
   };
   return [q(0.25), q(0.5), q(0.75)];
 }
-function getLevel3(tokens, quantiles) {
+function getLevel2(tokens, quantiles) {
   if (tokens <= 0)
     return 0;
   if (tokens <= quantiles[0])
@@ -2918,12 +2668,12 @@ function buildHeatmapCells(daily, since, until) {
     const row = current.getUTCDay();
     const dateStr = current.toISOString().slice(0, 10);
     const tokens = tokenMap.get(dateStr) ?? 0;
-    const level = getLevel3(tokens, quantiles);
+    const level = getLevel2(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 });
+      months.push({ label: MONTH_NAMES2[month] ?? "", col });
     }
     if (row === 6)
       col++;
@@ -2934,21 +2684,17 @@ function buildHeatmapCells(daily, since, until) {
 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 heatmapWidth = DAY_LABEL_WIDTH + totalCols * (CELL_SIZE + CELL_GAP);
+  const heatmapHeight = MONTH_LABEL_HEIGHT + 7 * (CELL_SIZE + CELL_GAP);
   const cellsHtml = cells.map((c) => {
-    const x = dayLabelWidth + c.col * (cellSize + cellGap);
-    const y = monthLabelHeight + c.row * (cellSize + cellGap);
+    const x = DAY_LABEL_WIDTH + c.col * (CELL_SIZE + CELL_GAP);
+    const y = MONTH_LABEL_HEIGHT + c.row * (CELL_SIZE + CELL_GAP);
     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);
+    const x = DAY_LABEL_WIDTH + m.col * (CELL_SIZE + CELL_GAP);
     return `<span class="month-label" style="left:${x}px">${esc(m.label)}</span>`;
   }).join(`
 `);
@@ -2958,7 +2704,7 @@ function renderProviderHeatmapHtml(provider, since, until, isDark, emptyCell) {
     { label: "Fri", row: 5 },
     { label: "Sun", row: 0 }
   ].map((d) => {
-    const y = monthLabelHeight + d.row * (cellSize + cellGap) + cellSize - 2;
+    const y = MONTH_LABEL_HEIGHT + d.row * (CELL_SIZE + CELL_GAP) + CELL_SIZE - 2;
     return `<span class="day-label" style="top:${y - 10}px">${d.label}</span>`;
   }).join(`
 `);
@@ -3080,8 +2826,8 @@ function generateHtml(output, options) {
   .heatmap-container { position: relative; margin-bottom: 8px; }
   .heatmap-cell {
     position: absolute;
-    width: 16px;
-    height: 16px;
+    width: ${CELL_SIZE}px;
+    height: ${CELL_SIZE}px;
     border-radius: 3px;
     cursor: pointer;
   }
@@ -3111,11 +2857,17 @@ function generateHtml(output, options) {
   .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-row {
+    display: grid;
+    grid-template-columns: ${MODEL_NAME_WIDTH}px minmax(0, 1fr) ${MODEL_PERCENT_WIDTH}px;
+    align-items: center;
+    column-gap: ${MODEL_BAR_GAP}px;
+    margin-bottom: 16px;
+  }
+  .model-name { color: ${muted}; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .model-bar-track { width: 100%; 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; }
+  .model-pct { color: ${muted}; font-size: 12px; text-align: right; }
   .refresh-btn {
     display: inline-flex;
     align-items: center;
@@ -3400,6 +3152,171 @@ async function uploadToGist(content, filename, description) {
 // packages/cli/src/cli.ts
 var FORMAT_VALUES = ["json", "svg", "png", "terminal"];
 var THEME_VALUES = ["dark", "light"];
+var PROVIDER_SHORTCUTS = {
+  claude: "claude-code",
+  codex: "codex",
+  openCode: "open-code"
+};
+var PROVIDER_ALIASES = {
+  anthropic: "claude-code",
+  claude: "claude-code",
+  "claude-code": "claude-code",
+  claudecode: "claude-code",
+  codex: "codex",
+  openai: "codex",
+  "open-code": "open-code",
+  open_code: "open-code",
+  opencode: "open-code"
+};
+var PROVIDER_ALIAS_GROUPS = {
+  "claude-code": ["anthropic", "claude", "claudecode"],
+  codex: ["openai"],
+  "open-code": ["opencode", "open_code"]
+};
+function normalizeProviderToken(token) {
+  const normalized = token.trim().toLowerCase().replace(/\s+/g, "-");
+  return PROVIDER_ALIASES[normalized] ?? normalized;
+}
+function getRequestedProviders(config) {
+  const requested = new Set;
+  if (config.provider) {
+    for (const token of config.provider.split(",")) {
+      const normalized = normalizeProviderToken(token);
+      if (normalized) {
+        requested.add(normalized);
+      }
+    }
+  }
+  if (config.claude)
+    requested.add(PROVIDER_SHORTCUTS.claude);
+  if (config.codex)
+    requested.add(PROVIDER_SHORTCUTS.codex);
+  if (config.openCode)
+    requested.add(PROVIDER_SHORTCUTS.openCode);
+  return requested;
+}
+function providerMatchesFilter(provider, requested) {
+  if (requested.size === 0)
+    return true;
+  const candidates = [
+    normalizeProviderToken(provider.name),
+    normalizeProviderToken(provider.displayName)
+  ];
+  return candidates.some((candidate) => requested.has(candidate));
+}
+function buildHelpText() {
+  return [
+    `tokenleak ${VERSION}`,
+    "Visualize AI coding assistant token usage across providers.",
+    "",
+    "Usage:",
+    "  tokenleak [flags]",
+    "",
+    "Provider Shortcuts:",
+    "  --claude                Only include Claude Code",
+    "  --codex                 Only include Codex",
+    "  --open-code             Only include OpenCode",
+    "  --all-providers         Ignore provider filters and use every available provider",
+    "  --list-providers        Show registered providers and aliases",
+    "",
+    "Flags:",
+    "  -f, --format <format>   Output format: terminal, png, svg, json",
+    "  -t, --theme <theme>     Theme for png/svg/live output: dark, light",
+    "  -s, --since <date>      Start date in YYYY-MM-DD format",
+    "  -u, --until <date>      End date in YYYY-MM-DD format",
+    `  -d, --days <number>     Number of trailing days to include (default: ${DEFAULT_DAYS})`,
+    "  -o, --output <path>     Write output to a file and infer format from extension",
+    "  -w, --width <number>    Terminal render width",
+    "  -p, --provider <list>   Provider filter list, comma-separated",
+    "      --compare <range>   Compare against YYYY-MM-DD..YYYY-MM-DD or auto",
+    "      --clipboard         Copy rendered output to the clipboard",
+    "      --open              Open the generated output file",
+    "      --upload <target>   Upload rendered output, currently: gist",
+    "  -L, --live-server       Start the interactive local dashboard",
+    "      --no-color          Disable ANSI colors",
+    "      --no-insights       Hide insights in terminal mode",
+    "      --help              Show this help",
+    "      --version           Show version information",
+    "",
+    "Examples:",
+    "  tokenleak",
+    "  tokenleak --claude --days 30",
+    "  tokenleak --codex --format png --output codex.png",
+    "  tokenleak --open-code --since 2026-01-01 --until 2026-03-01",
+    "  tokenleak --provider claude,codex --format svg --output usage.svg",
+    "  tokenleak --provider anthropic,openai",
+    "  tokenleak --list-providers",
+    "  tokenleak --compare auto --format terminal",
+    "  tokenleak --live-server --theme light",
+    "",
+    "Version:",
+    `  CLI ${VERSION}`,
+    `  Schema ${SCHEMA_VERSION}`,
+    ""
+  ].join(`
+`);
+}
+function buildVersionText() {
+  return `tokenleak ${VERSION}
+schema ${SCHEMA_VERSION}
+`;
+}
+function normalizeCliArg(arg) {
+  const flagMap = {
+    "--all-providers": "--allProviders",
+    "--list-providers": "--listProviders",
+    "--open-code": "--openCode",
+    "--live-server": "--liveServer",
+    "--no-color": "--noColor",
+    "--no-insights": "--noInsights"
+  };
+  return flagMap[arg] ?? arg;
+}
+function normalizeCliArgv(argv) {
+  const normalized = argv.map(normalizeCliArg);
+  const result = [];
+  for (let i = 0;i < normalized.length; i++) {
+    const arg = normalized[i];
+    if (arg === "--provider" || arg === "-p") {
+      result.push(arg);
+      const providerParts = [];
+      let j = i + 1;
+      while (j < normalized.length) {
+        const next = normalized[j];
+        if (next.startsWith("-"))
+          break;
+        providerParts.push(next);
+        j++;
+      }
+      if (providerParts.length > 0) {
+        result.push(providerParts.join(" "));
+        i = j - 1;
+      }
+      continue;
+    }
+    result.push(arg);
+  }
+  return result;
+}
+function registerBuiltInProviders(registry) {
+  registry.register(new ClaudeCodeProvider);
+  registry.register(new CodexProvider);
+  registry.register(new OpenCodeProvider);
+}
+function buildProviderList(providers, availability) {
+  const lines = ["Registered providers:", ""];
+  for (const provider of providers) {
+    const aliases = PROVIDER_ALIAS_GROUPS[provider.name] ?? [];
+    const status = availability.get(provider.name) ? "available" : "unavailable";
+    lines.push(`- ${provider.name} (${provider.displayName}) [${status}]`);
+    if (aliases.length > 0) {
+      lines.push(`  aliases: ${aliases.join(", ")}`);
+    }
+  }
+  lines.push("");
+  return lines.join(`
+`);
+}
 function inferFormatFromPath(filePath) {
   const ext = filePath.split(".").pop()?.toLowerCase();
   switch (ext) {
@@ -3453,6 +3370,11 @@ function resolveConfig(cliArgs) {
     width: 80,
     noColor: false,
     noInsights: false,
+    claude: false,
+    codex: false,
+    openCode: false,
+    allProviders: false,
+    listProviders: false,
     clipboard: false,
     open: false,
     liveServer: false
@@ -3518,6 +3440,21 @@ function resolveConfig(cliArgs) {
   if (cliArgs["provider"] !== undefined) {
     result.provider = cliArgs["provider"];
   }
+  if (cliArgs["claude"] !== undefined) {
+    result.claude = cliArgs["claude"];
+  }
+  if (cliArgs["codex"] !== undefined) {
+    result.codex = cliArgs["codex"];
+  }
+  if (cliArgs["openCode"] !== undefined) {
+    result.openCode = cliArgs["openCode"];
+  }
+  if (cliArgs["allProviders"] !== undefined) {
+    result.allProviders = cliArgs["allProviders"];
+  }
+  if (cliArgs["listProviders"] !== undefined) {
+    result.listProviders = cliArgs["listProviders"];
+  }
   if (cliArgs["clipboard"] !== undefined) {
     result.clipboard = cliArgs["clipboard"];
   }
@@ -3578,19 +3515,30 @@ async function runCompare(compareStr, currentRange, _registry, available) {
 }
 async function run(cliArgs) {
   const config = resolveConfig(cliArgs);
+  if (config.allProviders && (config.provider || config.claude || config.codex || config.openCode)) {
+    throw new TokenleakError("--all-providers cannot be combined with provider filters");
+  }
+  const registry = new ProviderRegistry;
+  registerBuiltInProviders(registry);
+  if (config.listProviders) {
+    const providers = registry.getAll();
+    const availabilityResults = await Promise.all(providers.map(async (provider) => [provider.name, await provider.isAvailable()]));
+    process.stdout.write(buildProviderList(providers, new Map(availabilityResults)));
+    return;
+  }
   const dateRange = computeDateRange({
     since: config.since,
     until: config.until,
     days: config.days
   });
-  const registry = new ProviderRegistry;
-  registry.register(new ClaudeCodeProvider);
-  registry.register(new CodexProvider);
-  registry.register(new OpenCodeProvider);
   let available = await registry.getAvailable();
-  if (config.provider) {
-    const requested = new Set(config.provider.split(",").map((s) => s.trim().toLowerCase()));
-    available = available.filter((p) => requested.has(p.name.toLowerCase()) || requested.has(p.displayName.toLowerCase()));
+  const requestedProviders = getRequestedProviders(config);
+  if (!config.allProviders && requestedProviders.size > 0) {
+    if (config.provider && (config.claude || config.codex || config.openCode)) {
+      process.stderr.write(`Combining provider filters: ${Array.from(requestedProviders).join(", ")}
+`);
+    }
+    available = available.filter((provider) => providerMatchesFilter(provider, requestedProviders));
   }
   if (available.length === 0) {
     throw new TokenleakError("No provider data found");
@@ -3771,6 +3719,31 @@ var main = defineCommand({
       alias: "p",
       description: "Filter to specific provider(s), comma-separated"
     },
+    claude: {
+      type: "boolean",
+      description: "Shortcut for --provider claude-code",
+      default: false
+    },
+    codex: {
+      type: "boolean",
+      description: "Shortcut for --provider codex",
+      default: false
+    },
+    openCode: {
+      type: "boolean",
+      description: "Shortcut for --provider open-code",
+      default: false
+    },
+    allProviders: {
+      type: "boolean",
+      description: "Ignore provider filters and use every available provider",
+      default: false
+    },
+    listProviders: {
+      type: "boolean",
+      description: "List registered providers and aliases",
+      default: false
+    },
     clipboard: {
       type: "boolean",
       description: "Copy output to clipboard after rendering",
@@ -3817,6 +3790,16 @@ var main = defineCommand({
         cliArgs["compare"] = args.compare;
       if (args.provider !== undefined)
         cliArgs["provider"] = args.provider;
+      if (args.claude)
+        cliArgs["claude"] = true;
+      if (args.codex)
+        cliArgs["codex"] = true;
+      if (args.openCode)
+        cliArgs["openCode"] = true;
+      if (args.allProviders)
+        cliArgs["allProviders"] = true;
+      if (args.listProviders)
+        cliArgs["listProviders"] = true;
       if (args.clipboard)
         cliArgs["clipboard"] = true;
       if (args.open)
@@ -3833,11 +3816,23 @@ var main = defineCommand({
 });
 var isDirectExecution = typeof Bun !== "undefined" ? Bun.main === import.meta.path : process.argv[1] !== undefined && import.meta.url.endsWith(process.argv[1].replace(/\\/g, "/"));
 if (isDirectExecution) {
+  const normalizedArgv = normalizeCliArgv(process.argv.slice(2));
+  process.argv = [...process.argv.slice(0, 2), ...normalizedArgv];
+  const argv = normalizedArgv;
+  if (argv.includes("--help") || argv.includes("-h")) {
+    process.stdout.write(buildHelpText());
+    process.exit(0);
+  }
+  if (argv.includes("--version") || argv.includes("-v")) {
+    process.stdout.write(buildVersionText());
+    process.exit(0);
+  }
   runMain(main);
 }
 export {
   run,
   resolveConfig,
+  normalizeCliArgv,
   inferFormatFromPath,
   computeDateRange
 };