tokenleak 0.2.0 → 0.3.0

package/package.json

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

package/tokenleak.js

@@ -1651,9 +1651,10 @@ function buildInsights(stats, providers) {
   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} (${top.percentage.toFixed(1)}%)`
+        value: `${top.model} (${pct.toFixed(1)}%)`
       });
     }
   }
@@ -1748,7 +1749,8 @@ function renderModelChart(topModels2, theme) {
     if (barWidth > 0) {
       children.push(rect(BAR_LABEL_WIDTH, y, barWidth, BAR_HEIGHT, theme.accentSecondary, 3));
     }
-    const valueStr = `${formatNumber(entry.tokens)} (${entry.percentage.toFixed(1)}%)`;
+    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, {
       fill: theme.foreground,
       "font-size": FONT_SIZE_SMALL,
@@ -1761,13 +1763,15 @@ function renderModelChart(topModels2, theme) {
 }
 
 // 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);
-    const contentWidth = options.width - PADDING * 2;
     let y = PADDING;
     const sections = [];
+    const sectionWidths = [];
     sections.push(group([
       text(PADDING, y + FONT_SIZE_TITLE + 4, "Tokenleak", {
         fill: theme.foreground,
@@ -1805,6 +1809,7 @@ class SvgRenderer {
         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", {
@@ -1816,6 +1821,7 @@ class SvgRenderer {
     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", {
@@ -1827,6 +1833,7 @@ class SvgRenderer {
       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) {
@@ -1839,6 +1846,7 @@ class SvgRenderer {
       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) {
@@ -1851,12 +1859,15 @@ class SvgRenderer {
       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="${options.width}" height="${totalHeight}" viewBox="0 0 ${options.width} ${totalHeight}">`,
-      rect(0, 0, options.width, totalHeight, theme.background, 8),
+      `<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),
       ...sections,
       "</svg>"
     ].join(`
@@ -2107,7 +2118,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 / 100);
+    const pct = formatPercent2(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);