tokenleak 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokenleak",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "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.0";
+var VERSION = "0.4.1";
 
 // packages/registry/dist/models/normalizer.js
 var DATE_SUFFIX_PATTERN = /-\d{8}$/;
@@ -1650,7 +1650,13 @@ function renderHeatmap(daily, theme, options = {}) {
 }
 
 // packages/renderers/dist/svg/svg-renderer.js
-var MIN_SVG_WIDTH = 800;
+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([
@@ -1682,7 +1688,7 @@ function renderBottomStat(x, y, label, value, theme) {
     }),
     text(x, y + 32, value, {
       fill: theme.foreground,
-      "font-size": 22,
+      "font-size": 18,
       "font-family": FONT_FAMILY,
       "font-weight": "700"
     })
@@ -1728,21 +1734,24 @@ class SvgRenderer {
     }
     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 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 ? `${topModel.model} (${formatNumber(topModel.tokens)})` : "N/A";
+    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 ? `${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));
+    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 + 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));
+    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);