tokenleak 0.3.0 → 0.4.0

package/package.json

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

package/tokenleak.js

@@ -422,18 +422,29 @@ var DEFAULT_DAYS = 90;
 var DEFAULT_CONCURRENCY = 3;
 var MAX_JSONL_RECORD_BYTES = 10 * 1024 * 1024;
 var SCHEMA_VERSION = 1;
+// packages/core/dist/date-utils.js
+var ONE_DAY_MS = 86400000;
+function dateToUtcMs(dateString) {
+  return new Date(dateString + "T00:00:00Z").getTime();
+}
+function formatDateStringUtc(date) {
+  return date.toISOString().slice(0, 10);
+}
+function compareDateStrings(a, b) {
+  return dateToUtcMs(a) - dateToUtcMs(b);
+}
+
 // packages/core/dist/aggregation/streaks.js
 function calculateStreaks(daily) {
   if (daily.length === 0) {
     return { current: 0, longest: 0 };
   }
-  const sorted = [...daily].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
-  const ONE_DAY_MS = 86400000;
+  const sorted = [...daily].sort((a, b) => dateToUtcMs(a.date) - dateToUtcMs(b.date));
   let longest = 1;
   let currentRun = 1;
   for (let i = 1;i < sorted.length; i++) {
-    const prev = new Date(sorted[i - 1].date).getTime();
-    const curr = new Date(sorted[i].date).getTime();
+    const prev = dateToUtcMs(sorted[i - 1].date);
+    const curr = dateToUtcMs(sorted[i].date);
     const diff = curr - prev;
     if (diff === ONE_DAY_MS) {
       currentRun++;
@@ -446,8 +457,8 @@ function calculateStreaks(daily) {
   }
   let current = 1;
   for (let i = sorted.length - 1;i > 0; i--) {
-    const curr = new Date(sorted[i].date).getTime();
-    const prev = new Date(sorted[i - 1].date).getTime();
+    const curr = dateToUtcMs(sorted[i].date);
+    const prev = dateToUtcMs(sorted[i - 1].date);
     if (curr - prev === ONE_DAY_MS) {
       current++;
     } else {
@@ -461,13 +472,12 @@ function rollingWindow(daily, days, referenceDate) {
   if (daily.length === 0 || days <= 0) {
     return { tokens: 0, cost: 0 };
   }
-  const refTime = new Date(referenceDate).getTime();
-  const ONE_DAY_MS = 86400000;
+  const refTime = dateToUtcMs(referenceDate);
   const windowStart = refTime - (days - 1) * ONE_DAY_MS;
   let tokens = 0;
   let cost = 0;
   for (const entry of daily) {
-    const entryTime = new Date(entry.date).getTime();
+    const entryTime = dateToUtcMs(entry.date);
     if (entryTime >= windowStart && entryTime <= refTime) {
       tokens += entry.totalTokens;
       cost += entry.cost;
@@ -507,7 +517,7 @@ function dayOfWeekBreakdown(daily) {
     count: 0
   }));
   for (const entry of daily) {
-    const dayIndex = new Date(entry.date + "T00:00:00").getUTCDay();
+    const dayIndex = new Date(dateToUtcMs(entry.date)).getUTCDay();
     const bucket = buckets[dayIndex];
     bucket.tokens += entry.totalTokens;
     bucket.cost += entry.cost;
@@ -577,6 +587,7 @@ function topModels(daily, limit = DEFAULT_LIMIT) {
   return entries.slice(0, limit);
 }
 // packages/core/dist/aggregation/aggregate.js
+var ROLLING_WINDOW_DAYS = 30;
 function aggregate(daily, referenceDate) {
   const streaks = calculateStreaks(daily);
   const rolling30 = rollingWindow(daily, 30, referenceDate);
@@ -586,20 +597,18 @@ function aggregate(daily, referenceDate) {
   const cache = cacheHitRate(daily);
   const models = topModels(daily);
   let totalTokens = 0;
+  let totalInputTokens = 0;
+  let totalOutputTokens = 0;
   let totalCost = 0;
   for (const entry of daily) {
     totalTokens += entry.totalTokens;
+    totalInputTokens += entry.inputTokens;
+    totalOutputTokens += entry.outputTokens;
     totalCost += entry.cost;
   }
+  const rolling30dTopModel = computeRolling30dTopModel(daily, referenceDate);
   const activeDays = daily.length;
-  let totalDays = 0;
-  if (daily.length > 0) {
-    const sorted = [...daily].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
-    const first = new Date(sorted[0].date).getTime();
-    const last = new Date(sorted[sorted.length - 1].date).getTime();
-    const ONE_DAY_MS = 86400000;
-    totalDays = Math.round((last - first) / ONE_DAY_MS) + 1;
-  }
+  const totalDays = computeTotalDays(daily);
   const averages = calculateAverages(daily, totalDays);
   return {
     currentStreak: streaks.current,
@@ -613,13 +622,46 @@ function aggregate(daily, referenceDate) {
     averageDailyCost: averages.cost,
     cacheHitRate: cache,
     totalTokens,
+    totalInputTokens,
+    totalOutputTokens,
     totalCost,
     totalDays,
     activeDays,
     dayOfWeek: dow,
-    topModels: models
+    topModels: models,
+    rolling30dTopModel
   };
 }
+function computeRolling30dTopModel(daily, referenceDate) {
+  const refTime = dateToUtcMs(referenceDate);
+  const windowStart = refTime - (ROLLING_WINDOW_DAYS - 1) * ONE_DAY_MS;
+  const modelTokensMap = new Map;
+  for (const entry of daily) {
+    const entryTime = dateToUtcMs(entry.date);
+    if (entryTime >= windowStart && entryTime <= refTime) {
+      for (const m of entry.models) {
+        modelTokensMap.set(m.model, (modelTokensMap.get(m.model) ?? 0) + m.totalTokens);
+      }
+    }
+  }
+  let topModel = null;
+  let maxTokens = 0;
+  for (const [model, tokens] of modelTokensMap) {
+    if (tokens > maxTokens) {
+      maxTokens = tokens;
+      topModel = model;
+    }
+  }
+  return topModel;
+}
+function computeTotalDays(daily) {
+  if (daily.length === 0)
+    return 0;
+  const sorted = [...daily].sort((a, b) => dateToUtcMs(a.date) - dateToUtcMs(b.date));
+  const first = dateToUtcMs(sorted[0].date);
+  const last = dateToUtcMs(sorted[sorted.length - 1].date);
+  return Math.round((last - first) / ONE_DAY_MS) + 1;
+}
 // packages/core/dist/aggregation/merge.js
 function mergeProviderData(providers) {
   const dateMap = new Map;
@@ -648,7 +690,7 @@ function mergeProviderData(providers) {
       }
     }
   }
-  return [...dateMap.values()].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+  return [...dateMap.values()].sort((a, b) => compareDateStrings(a.date, b.date));
 }
 // packages/core/dist/aggregation/compare.js
 function computeDeltas(statsA, statsB) {
@@ -683,19 +725,18 @@ function parseCompareRange(rangeStr) {
   return { since, until };
 }
 function computePreviousPeriod(current) {
-  const ONE_DAY_MS = 86400000;
-  const sinceMs = new Date(current.since).getTime();
-  const untilMs = new Date(current.until).getTime();
+  const sinceMs = dateToUtcMs(current.since);
+  const untilMs = dateToUtcMs(current.until);
   const periodDays = Math.round((untilMs - sinceMs) / ONE_DAY_MS);
   const prevUntil = new Date(sinceMs - ONE_DAY_MS);
   const prevSince = new Date(prevUntil.getTime() - periodDays * ONE_DAY_MS);
   return {
-    since: prevSince.toISOString().slice(0, 10),
-    until: prevUntil.toISOString().slice(0, 10)
+    since: formatDateStringUtc(prevSince),
+    until: formatDateStringUtc(prevUntil)
   };
 }
 // packages/core/dist/index.js
-var VERSION = "0.2.0";
+var VERSION = "0.4.0";
 
 // packages/registry/dist/models/normalizer.js
 var DATE_SUFFIX_PATTERN = /-\d{8}$/;
@@ -915,6 +956,13 @@ async function* splitJsonlRecords(filePath) {
 import { existsSync, readdirSync, statSync } from "fs";
 import { join } from "path";
 import { homedir } from "os";
+
+// packages/registry/dist/utils.js
+function isInRange(date, range) {
+  return date >= range.since && date <= range.until;
+}
+
+// packages/registry/dist/providers/claude-code.js
 var DEFAULT_BASE_DIR = join(homedir(), ".claude", "projects");
 var CLAUDE_CODE_COLORS = {
   primary: "#ff6b35",
@@ -981,9 +1029,6 @@ function extractUsage(record) {
     cacheWriteTokens
   };
 }
-function isInRange(date, range) {
-  return date >= range.since && date <= range.until;
-}
 function buildDailyUsage(records) {
   const byDate = new Map;
   for (const rec of records) {
@@ -1011,7 +1056,7 @@ function buildDailyUsage(records) {
     mb.outputTokens += rec.outputTokens;
     mb.cacheReadTokens += rec.cacheReadTokens;
     mb.cacheWriteTokens += rec.cacheWriteTokens;
-    mb.totalTokens += rec.inputTokens + rec.outputTokens;
+    mb.totalTokens += rec.inputTokens + rec.outputTokens + rec.cacheReadTokens + rec.cacheWriteTokens;
     mb.cost += cost;
   }
   const daily = [];
@@ -1125,9 +1170,6 @@ function extractDate(timestamp) {
   const match = /^(\d{4}-\d{2}-\d{2})/.exec(timestamp);
   return match ? match[1] : null;
 }
-function isInRange2(date, range) {
-  return date >= range.since && date <= range.until;
-}
 
 class CodexProvider {
   name = "codex";
@@ -1161,7 +1203,7 @@ class CodexProvider {
             continue;
           }
           const date = extractDate(event.timestamp);
-          if (!date || !isInRange2(date, range)) {
+          if (!date || !isInRange(date, range)) {
             continue;
           }
           const normalizedModel = normalizeModelName(compactModelDateSuffix(event.model));
@@ -1188,7 +1230,9 @@ class CodexProvider {
           const breakdown = modelMap.get(normalizedModel);
           breakdown.inputTokens += inputTokens;
           breakdown.outputTokens += outputTokens;
-          breakdown.totalTokens += inputTokens + outputTokens;
+          breakdown.cacheReadTokens += cacheReadTokens;
+          breakdown.cacheWriteTokens += cacheWriteTokens;
+          breakdown.totalTokens += inputTokens + outputTokens + cacheReadTokens + cacheWriteTokens;
           breakdown.cost += cost;
         }
       } catch {
@@ -1248,9 +1292,6 @@ function extractDate2(createdAt) {
   }
   return new Date(createdAt).toISOString().slice(0, 10);
 }
-function isWithinRange(date, range) {
-  return date >= range.since && date <= range.until;
-}
 function buildProviderData(records) {
   const byDate = new Map;
   for (const record of records) {
@@ -1280,13 +1321,15 @@ function buildProviderData(records) {
     let dayCost = 0;
     for (const [model, usage] of modelMap) {
       const cost = estimateCost(model, usage.inputTokens, usage.outputTokens, 0, 0);
-      const modelTotal = usage.inputTokens + usage.outputTokens;
+      const cacheReadTokens = 0;
+      const cacheWriteTokens = 0;
+      const modelTotal = usage.inputTokens + usage.outputTokens + cacheReadTokens + cacheWriteTokens;
       models.push({
         model,
         inputTokens: usage.inputTokens,
         outputTokens: usage.outputTokens,
-        cacheReadTokens: 0,
-        cacheWriteTokens: 0,
+        cacheReadTokens,
+        cacheWriteTokens,
         totalTokens: modelTotal,
         cost
       });
@@ -1324,7 +1367,7 @@ function loadFromSqlite(dbPath, range) {
     const records = [];
     for (const row of rows) {
       const date = extractDate2(row.created_at);
-      if (isWithinRange(date, range)) {
+      if (isInRange(date, range)) {
         records.push({
           date,
           model: row.model,
@@ -1352,7 +1395,7 @@ function loadFromJson(sessionsDir, range) {
         continue;
       }
       const date = extractDate2(msg.created_at);
-      if (isWithinRange(date, range)) {
+      if (isInRange(date, range)) {
         records.push({
           date,
           model: msg.model,
@@ -1413,46 +1456,42 @@ var DARK_THEME = {
   muted: "#7d8590",
   border: "#30363d",
   cardBackground: "#161b22",
-  heatmap: ["#161b22", "#0e4429", "#006d32", "#26a641", "#39d353"],
+  heatmap: ["#161b22", "#1e3a5f", "#2563eb", "#3b82f6", "#1d4ed8"],
   accent: "#58a6ff",
   accentSecondary: "#bc8cff",
-  barFill: "#58a6ff",
+  barFill: "#3b82f6",
   barBackground: "#21262d"
 };
 var LIGHT_THEME = {
   background: "#ffffff",
-  foreground: "#1f2328",
-  muted: "#656d76",
-  border: "#d0d7de",
-  cardBackground: "#f6f8fa",
-  heatmap: ["#ebedf0", "#9be9a8", "#40c463", "#30a14e", "#216e39"],
-  accent: "#0969da",
-  accentSecondary: "#8250df",
-  barFill: "#0969da",
-  barBackground: "#eaeef2"
+  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 = 24;
-var CELL_SIZE = 12;
-var CELL_GAP = 3;
-var HEADER_HEIGHT = 60;
-var MONTH_LABEL_HEIGHT = 20;
-var DAY_LABEL_WIDTH = 32;
+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 = 28;
-var STAT_ROW_HEIGHT = 28;
-var BAR_HEIGHT = 20;
-var BAR_GAP = 8;
-var BAR_LABEL_WIDTH = 120;
-var FONT_SIZE_TITLE = 20;
+var SECTION_GAP = 32;
+var FONT_SIZE_TITLE = 28;
 var FONT_SIZE_SUBTITLE = 14;
-var FONT_SIZE_BODY = 12;
-var FONT_SIZE_SMALL = 10;
-var FONT_FAMILY = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif";
+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) {
@@ -1472,28 +1511,24 @@ function group(children, transform) {
 }
 function formatNumber(n) {
   if (n >= 1e6) {
-    return `${(n / 1e6).toFixed(1)}M`;
+    const millions = Number((n / 1e6).toFixed(1));
+    if (millions >= 1000) {
+      return `${(n / 1e9).toFixed(1)}B`;
+    }
+    return `${millions.toFixed(1)}M`;
   }
   if (n >= 1000) {
-    return `${(n / 1000).toFixed(1)}K`;
+    const thousands = Number((n / 1000).toFixed(1));
+    if (thousands >= 1000) {
+      return `${(n / 1e6).toFixed(1)}M`;
+    }
+    return `${thousands.toFixed(1)}K`;
   }
   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)}`;
-}
-function formatPercent(rate) {
-  return `${(rate * 100).toFixed(1)}%`;
-}
 
 // packages/renderers/dist/svg/heatmap.js
-var DAY_LABELS2 = ["", "Mon", "", "Wed", "", "Fri", ""];
+var DAY_LABELS2 = ["Mon", "", "Wed", "", "Fri", "", "Sun"];
 var MONTH_NAMES = [
   "Jan",
   "Feb",
@@ -1538,10 +1573,10 @@ function renderHeatmap(daily, theme, options = {}) {
   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);
-  const start = new Date(startStr);
-  const startDay = start.getDay();
-  start.setDate(start.getDate() - startDay);
+  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);
@@ -1549,19 +1584,20 @@ function renderHeatmap(daily, theme, options = {}) {
   let col = 0;
   const monthLabels = [];
   let lastMonth = -1;
+  const cellRadius = 3;
   while (current <= end) {
-    const row = current.getDay();
+    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="2"><title>${escapeXml(title)}</title></rect>`);
-    const month = current.getMonth();
+    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 - 6, MONTH_NAMES[month] ?? "", {
+      monthLabels.push(text(x, MONTH_LABEL_HEIGHT - 8, MONTH_NAMES[month] ?? "", {
         fill: theme.muted,
         "font-size": FONT_SIZE_SMALL,
         "font-family": FONT_FAMILY
@@ -1570,12 +1606,12 @@ function renderHeatmap(daily, theme, options = {}) {
     if (row === 6) {
       col++;
     }
-    current.setDate(current.getDate() + 1);
+    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 - 1;
+    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,
@@ -1583,291 +1619,144 @@ function renderHeatmap(daily, theme, options = {}) {
     });
   });
   const totalCols = col + 1;
-  const width = DAY_LABEL_WIDTH + totalCols * (CELL_SIZE + CELL_GAP);
-  const height = MONTH_LABEL_HEIGHT + HEATMAP_ROWS * (CELL_SIZE + CELL_GAP);
-  const svg = group([...monthLabels, ...dayLabels, ...cells]);
-  return { svg, width, height };
+  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/stats-panel.js
-function buildStatItems(stats) {
-  return [
-    { label: "Current Streak", value: `${stats.currentStreak} days` },
-    { label: "Longest Streak", value: `${stats.longestStreak} days` },
-    { label: "Total Tokens", value: formatNumber(stats.totalTokens) },
-    { label: "Total Cost", value: formatCost(stats.totalCost) },
-    { label: "30-Day Tokens", value: formatNumber(stats.rolling30dTokens) },
-    { label: "30-Day Cost", value: formatCost(stats.rolling30dCost) },
-    { label: "Avg Daily Tokens", value: formatNumber(stats.averageDailyTokens) },
-    { label: "Cache Hit Rate", value: formatPercent(stats.cacheHitRate) },
-    { label: "Active Days", value: `${stats.activeDays} / ${stats.totalDays}` }
-  ];
-}
-function renderStatsPanel(stats, theme) {
-  const items = buildStatItems(stats);
-  const width = 280;
-  const children = [];
-  for (let i = 0;i < items.length; i++) {
-    const item = items[i];
-    if (!item)
-      continue;
-    const y = i * STAT_ROW_HEIGHT + STAT_ROW_HEIGHT;
-    children.push(text(0, y, item.label, {
+// packages/renderers/dist/svg/svg-renderer.js
+var MIN_SVG_WIDTH = 800;
+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_SMALL,
-      "font-family": FONT_FAMILY
-    }));
-    children.push(text(width - 8, y, item.value, {
-      fill: theme.foreground,
-      "font-size": FONT_SIZE_BODY,
+      "font-size": FONT_SIZE_STAT_LABEL,
       "font-family": FONT_FAMILY,
-      "text-anchor": "end"
-    }));
-  }
-  const height = items.length * STAT_ROW_HEIGHT + STAT_ROW_HEIGHT;
-  return { svg: group(children), width, height };
-}
-
-// packages/renderers/dist/svg/insights-panel.js
-var DAY_NAMES = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-function buildInsights(stats, providers) {
-  const items = [];
-  if (stats.peakDay) {
-    items.push({
-      label: "Peak Day",
-      value: `${stats.peakDay.date} (${formatNumber(stats.peakDay.tokens)} tokens)`
-    });
-  }
-  if (stats.dayOfWeek.length > 0) {
-    const sorted = [...stats.dayOfWeek].sort((a, b) => b.tokens - a.tokens);
-    const top = sorted[0];
-    if (top) {
-      items.push({
-        label: "Most Active Day",
-        value: DAY_NAMES[top.day] ?? top.label
-      });
-    }
-  }
-  if (stats.topModels.length > 0) {
-    const top = stats.topModels[0];
-    if (top) {
-      const pct = top.percentage < 1 ? top.percentage * 100 : top.percentage;
-      items.push({
-        label: "Top Model",
-        value: `${top.model} (${pct.toFixed(1)}%)`
-      });
-    }
-  }
-  if (providers.length > 0) {
-    const sorted = [...providers].sort((a, b) => b.totalTokens - a.totalTokens);
-    const top = sorted[0];
-    if (top) {
-      items.push({
-        label: "Top Provider",
-        value: `${top.displayName} (${formatNumber(top.totalTokens)} tokens)`
-      });
-    }
-  }
-  return items;
-}
-function renderInsightsPanel(stats, providers, theme) {
-  const items = buildInsights(stats, providers);
-  const width = 360;
-  const children = [];
-  for (let i = 0;i < items.length; i++) {
-    const item = items[i];
-    if (!item)
-      continue;
-    const y = i * STAT_ROW_HEIGHT + STAT_ROW_HEIGHT;
-    children.push(text(0, y, item.label, {
-      fill: theme.muted,
-      "font-size": FONT_SIZE_SMALL,
-      "font-family": FONT_FAMILY
-    }));
-    children.push(text(width - 8, y, item.value, {
+      "font-weight": "700",
+      "text-anchor": anchor,
+      "letter-spacing": "1"
+    }),
+    text(x, y + 34, value, {
       fill: theme.foreground,
-      "font-size": FONT_SIZE_BODY,
+      "font-size": FONT_SIZE_STAT_VALUE,
       "font-family": FONT_FAMILY,
-      "text-anchor": "end"
-    }));
-  }
-  const height = Math.max(items.length * STAT_ROW_HEIGHT + STAT_ROW_HEIGHT, STAT_ROW_HEIGHT);
-  return { svg: group(children), width, height };
-}
-
-// packages/renderers/dist/svg/day-of-week-chart.js
-function renderDayOfWeekChart(dayOfWeek, theme) {
-  const chartWidth = 300;
-  const barAreaWidth = chartWidth - BAR_LABEL_WIDTH;
-  const maxTokens = Math.max(...dayOfWeek.map((d) => d.tokens), 1);
-  const children = [];
-  for (let i = 0;i < dayOfWeek.length; i++) {
-    const entry = dayOfWeek[i];
-    if (!entry)
-      continue;
-    const y = i * (BAR_HEIGHT + BAR_GAP);
-    const barWidth = Math.max(entry.tokens / maxTokens * barAreaWidth, 0);
-    children.push(text(0, y + BAR_HEIGHT - 4, entry.label, {
-      fill: theme.muted,
-      "font-size": FONT_SIZE_SMALL,
-      "font-family": FONT_FAMILY
-    }));
-    children.push(rect(BAR_LABEL_WIDTH, y, barAreaWidth, BAR_HEIGHT, theme.barBackground, 3));
-    if (barWidth > 0) {
-      children.push(rect(BAR_LABEL_WIDTH, y, barWidth, BAR_HEIGHT, theme.barFill, 3));
-    }
-    children.push(text(BAR_LABEL_WIDTH + barAreaWidth + 8, y + BAR_HEIGHT - 4, formatNumber(entry.tokens), {
-      fill: theme.foreground,
-      "font-size": FONT_SIZE_SMALL,
-      "font-family": FONT_FAMILY
-    }));
-  }
-  const height = dayOfWeek.length * (BAR_HEIGHT + BAR_GAP);
-  const width = chartWidth + 60;
-  return { svg: group(children), width, height };
+      "font-weight": "700",
+      "text-anchor": anchor
+    })
+  ]);
 }
-
-// packages/renderers/dist/svg/model-chart.js
-function renderModelChart(topModels2, theme) {
-  const chartWidth = 360;
-  const barAreaWidth = chartWidth - BAR_LABEL_WIDTH;
-  const maxTokens = Math.max(...topModels2.map((m) => m.tokens), 1);
-  const children = [];
-  for (let i = 0;i < topModels2.length; i++) {
-    const entry = topModels2[i];
-    if (!entry)
-      continue;
-    const y = i * (BAR_HEIGHT + BAR_GAP);
-    const barWidth = Math.max(entry.tokens / maxTokens * barAreaWidth, 0);
-    const label = entry.model.length > 18 ? entry.model.slice(0, 17) + "\u2026" : entry.model;
-    children.push(text(0, y + BAR_HEIGHT - 4, label, {
+function renderBottomStat(x, y, label, value, theme) {
+  return group([
+    text(x, y, label, {
       fill: theme.muted,
-      "font-size": FONT_SIZE_SMALL,
-      "font-family": FONT_FAMILY
-    }));
-    children.push(rect(BAR_LABEL_WIDTH, y, barAreaWidth, BAR_HEIGHT, theme.barBackground, 3));
-    if (barWidth > 0) {
-      children.push(rect(BAR_LABEL_WIDTH, y, barWidth, BAR_HEIGHT, theme.accentSecondary, 3));
-    }
-    const pct = entry.percentage < 1 ? entry.percentage * 100 : entry.percentage;
-    const valueStr = `${formatNumber(entry.tokens)} (${pct.toFixed(1)}%)`;
-    children.push(text(BAR_LABEL_WIDTH + barAreaWidth + 8, y + BAR_HEIGHT - 4, valueStr, {
+      "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": FONT_SIZE_SMALL,
-      "font-family": FONT_FAMILY
-    }));
-  }
-  const height = Math.max(topModels2.length * (BAR_HEIGHT + BAR_GAP), BAR_HEIGHT);
-  const width = chartWidth + 100;
-  return { svg: group(children), width, height };
+      "font-size": 22,
+      "font-family": FONT_FAMILY,
+      "font-weight": "700"
+    })
+  ]);
 }
 
-// packages/renderers/dist/svg/svg-renderer.js
-var MIN_SVG_WIDTH = 520;
-
 class SvgRenderer {
   format = "svg";
   async render(output, options) {
     const theme = getTheme(options.theme);
-    let y = PADDING;
     const sections = [];
     const sectionWidths = [];
-    sections.push(group([
-      text(PADDING, y + FONT_SIZE_TITLE + 4, "Tokenleak", {
-        fill: theme.foreground,
-        "font-size": FONT_SIZE_TITLE,
-        "font-family": FONT_FAMILY,
-        "font-weight": "bold"
-      }),
-      text(PADDING, y + FONT_SIZE_TITLE + 4 + 20, `${output.dateRange.since} \u2014 ${output.dateRange.until}`, {
-        fill: theme.muted,
-        "font-size": FONT_SIZE_SUBTITLE,
-        "font-family": FONT_FAMILY
-      })
-    ]));
-    y += HEADER_HEIGHT + SECTION_GAP;
-    if (output.providers.length > 0) {
-      const providerNames = output.providers.map((p) => p.displayName).join(" \xB7 ");
-      sections.push(text(PADDING, y, providerNames, {
-        fill: theme.accent,
-        "font-size": FONT_SIZE_SUBTITLE,
-        "font-family": FONT_FAMILY
-      }));
-      y += SECTION_GAP;
-    }
+    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(text(PADDING, y, "Activity", {
-        fill: theme.foreground,
-        "font-size": FONT_SIZE_SUBTITLE,
-        "font-family": FONT_FAMILY,
-        "font-weight": "bold"
-      }));
-      y += 16;
-      const heatmap = renderHeatmap(allDaily, theme, {
-        startDate: output.dateRange.since,
-        endDate: output.dateRange.until
-      });
       sections.push(group([heatmap.svg], `translate(${PADDING}, ${y})`));
-      sectionWidths.push(heatmap.width);
-      y += heatmap.height + SECTION_GAP;
-    }
-    sections.push(text(PADDING, y, "Statistics", {
-      fill: theme.foreground,
-      "font-size": FONT_SIZE_SUBTITLE,
+      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 numCards = 4;
+    const cardWidth = contentWidth / numCards;
+    const topModel = stats.topModels.length > 0 ? stats.topModels[0] : null;
+    const topModelLabel = topModel ? `${topModel.model} (${formatNumber(topModel.tokens)})` : "N/A";
+    sections.push(renderBottomStat(PADDING, y, "MOST USED MODEL", topModelLabel, theme));
+    const recent30Label = stats.rolling30dTopModel ? `${stats.rolling30dTopModel} (${formatNumber(stats.rolling30dTokens)})` : formatNumber(stats.rolling30dTokens);
+    sections.push(renderBottomStat(PADDING + cardWidth, y, "RECENT USE (LAST 30 DAYS)", recent30Label, theme));
+    sections.push(renderBottomStat(PADDING + cardWidth * 2, y, "LONGEST STREAK", `${stats.longestStreak} days`, theme));
+    sections.push(renderBottomStat(PADDING + cardWidth * 3, y, "CURRENT STREAK", `${stats.currentStreak} days`, theme));
+    y += 56 + SECTION_GAP;
+    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 + cardWidth, y, "CACHE HIT RATE", `${(stats.cacheHitRate * 100).toFixed(1)}%`, theme));
+    sections.push(renderBottomStat(PADDING + cardWidth * 2, y, "ACTIVE DAYS", `${stats.activeDays} / ${stats.totalDays}`, theme));
+    sections.push(renderBottomStat(PADDING + cardWidth * 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,
-      "font-weight": "bold"
+      "text-anchor": "end",
+      opacity: "0.4"
     }));
-    y += 16;
-    const stats = renderStatsPanel(output.aggregated, theme);
-    sections.push(group([stats.svg], `translate(${PADDING}, ${y})`));
-    sectionWidths.push(stats.width);
-    y += stats.height + SECTION_GAP;
-    if (output.aggregated.dayOfWeek.length > 0) {
-      sections.push(text(PADDING, y, "Day of Week", {
-        fill: theme.foreground,
-        "font-size": FONT_SIZE_SUBTITLE,
-        "font-family": FONT_FAMILY,
-        "font-weight": "bold"
-      }));
-      y += 16;
-      const dowChart = renderDayOfWeekChart(output.aggregated.dayOfWeek, theme);
-      sections.push(group([dowChart.svg], `translate(${PADDING}, ${y})`));
-      sectionWidths.push(dowChart.width);
-      y += dowChart.height + SECTION_GAP;
-    }
-    if (output.aggregated.topModels.length > 0) {
-      sections.push(text(PADDING, y, "Top Models", {
-        fill: theme.foreground,
-        "font-size": FONT_SIZE_SUBTITLE,
-        "font-family": FONT_FAMILY,
-        "font-weight": "bold"
-      }));
-      y += 16;
-      const modelChart = renderModelChart(output.aggregated.topModels, theme);
-      sections.push(group([modelChart.svg], `translate(${PADDING}, ${y})`));
-      sectionWidths.push(modelChart.width);
-      y += modelChart.height + SECTION_GAP;
-    }
-    if (options.showInsights) {
-      sections.push(text(PADDING, y, "Insights", {
-        fill: theme.foreground,
-        "font-size": FONT_SIZE_SUBTITLE,
-        "font-family": FONT_FAMILY,
-        "font-weight": "bold"
-      }));
-      y += 16;
-      const insights = renderInsightsPanel(output.aggregated, output.providers, theme);
-      sections.push(group([insights.svg], `translate(${PADDING}, ${y})`));
-      sectionWidths.push(insights.width);
-      y += insights.height + SECTION_GAP;
-    }
-    const totalHeight = y + PADDING;
-    const maxContentWidth = sectionWidths.length > 0 ? Math.max(...sectionWidths) : MIN_SVG_WIDTH - PADDING * 2;
-    const svgWidth = Math.max(maxContentWidth + PADDING * 2, MIN_SVG_WIDTH);
     const svgContent = [
       `<svg xmlns="http://www.w3.org/2000/svg" width="${svgWidth}" height="${totalHeight}" viewBox="0 0 ${svgWidth} ${totalHeight}">`,
-      rect(0, 0, svgWidth, totalHeight, theme.background, 8),
+      `<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(`
@@ -2034,7 +1923,7 @@ var BOX_TL = "\u250C";
 var BOX_TR = "\u2510";
 var BOX_BL = "\u2514";
 var BOX_BR = "\u2518";
-var DAY_NAMES2 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 var BAR_CHAR = "\u2588";
 var MAX_BAR_LENGTH = 20;
 function formatTokens(count) {
@@ -2049,7 +1938,7 @@ function formatTokens(count) {
 function formatCost2(cost) {
   return `$${cost.toFixed(2)}`;
 }
-function formatPercent2(rate) {
+function formatPercent(rate) {
   return `${(rate * 100).toFixed(1)}%`;
 }
 function divider(width) {
@@ -2089,7 +1978,7 @@ function renderStats(stats, width, noColor2) {
     ["7d Cost", formatCost2(stats.rolling7dCost)],
     ["Avg Daily Tokens", formatTokens(stats.averageDailyTokens)],
     ["Avg Daily Cost", formatCost2(stats.averageDailyCost)],
-    ["Cache Hit Rate", formatPercent2(stats.cacheHitRate)],
+    ["Cache Hit Rate", formatPercent(stats.cacheHitRate)],
     ["Active Days", `${stats.activeDays} / ${stats.totalDays}`]
   ];
   if (stats.peakDay) {
@@ -2106,7 +1995,7 @@ function renderDayOfWeek(stats, width, noColor2) {
   const lines = [];
   const maxTokens = Math.max(...stats.dayOfWeek.map((d) => d.tokens), 0);
   for (const entry of stats.dayOfWeek) {
-    const label = DAY_NAMES2[entry.day] ?? `Day${entry.day}`;
+    const label = DAY_NAMES[entry.day] ?? `Day${entry.day}`;
     const bar = dayBar(entry.tokens, maxTokens, noColor2);
     const tokenStr = formatTokens(entry.tokens);
     const line = `  ${label}  ${bar} ${tokenStr}`;
@@ -2118,7 +2007,7 @@ function renderDayOfWeek(stats, width, noColor2) {
 function renderTopModels(stats, width, noColor2) {
   const lines = [];
   for (const model of stats.topModels.slice(0, 5)) {
-    const pct = formatPercent2(model.percentage);
+    const pct = formatPercent(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);
@@ -2132,7 +2021,7 @@ function renderInsights(stats, noColor2) {
     insights.push(`You have a ${stats.currentStreak}-day coding streak going!`);
   }
   if (stats.cacheHitRate > 0.5) {
-    insights.push(`Cache hit rate is ${formatPercent2(stats.cacheHitRate)} - good cache reuse.`);
+    insights.push(`Cache hit rate is ${formatPercent(stats.cacheHitRate)} - good cache reuse.`);
   }
   if (stats.cacheHitRate < 0.1 && stats.totalTokens > 0) {
     insights.push("Cache hit rate is low - consider enabling prompt caching.");