llm-usage-metrics 0.3.7 → 0.4.1

package/dist/index.js

@@ -1014,6 +1014,13 @@ function hasUsageSignal(usage) {
 function deriveDeltaUsage(info, previousTotalUsage) {
   const totalUsage = toUsage(info.total_token_usage);
   const lastUsage = toUsage(info.last_token_usage);
+  if (totalUsage && previousTotalUsage) {
+    const deltaFromTotals = subtractUsage(totalUsage, previousTotalUsage);
+    if (hasUsageSignal(deltaFromTotals)) {
+      return { deltaUsage: deltaFromTotals, latestTotalUsage: totalUsage };
+    }
+    return { latestTotalUsage: totalUsage };
+  }
   if (lastUsage) {
     return { deltaUsage: lastUsage, latestTotalUsage: totalUsage };
   }
@@ -2452,6 +2459,214 @@ function createDefaultAdapters(options) {
   return sourceRegistrations.map((source) => source.create(options, sourceDirectoryOverrides));
 }
 
+// src/render/share-svg-theme.ts
+var shareTheme = {
+  bg: "#0d1117",
+  cardBg: "#161b22",
+  cardBorder: "#30363d",
+  textPrimary: "#e6edf3",
+  textSecondary: "#8b949e",
+  textMuted: "#484f58",
+  gridLine: "#21262d",
+  font: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif",
+  mono: "ui-monospace, 'SF Mono', 'Fira Code', monospace"
+};
+var knownSourceColors = {
+  pi: "#ec4899",
+  codex: "#22c55e",
+  gemini: "#eab308",
+  droid: "#3b82f6",
+  opencode: "#a855f7"
+};
+var fallbackColors = ["#f97316", "#06b6d4", "#ef4444", "#84cc16", "#f43f5e"];
+function getSourceColor(source, index) {
+  return knownSourceColors[source] ?? fallbackColors[index % fallbackColors.length];
+}
+function escapeSvg(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+}
+function formatCompact(n) {
+  if (n >= 1e9) return (n / 1e9).toFixed(1).replace(/\.0$/, "") + "B";
+  if (n >= 1e6) return (n / 1e6).toFixed(1).replace(/\.0$/, "") + "M";
+  if (n >= 1e3) return (n / 1e3).toFixed(1).replace(/\.0$/, "") + "k";
+  return String(n);
+}
+var intFmt = new Intl.NumberFormat("en-US");
+var decFmt = new Intl.NumberFormat("en-US", {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+});
+var usdFmt = new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+});
+function formatInteger(n) {
+  return intFmt.format(n);
+}
+function formatDecimal(n) {
+  return n === void 0 ? "-" : decFmt.format(n);
+}
+function formatUsd(n) {
+  return n === void 0 ? "-" : usdFmt.format(n);
+}
+function catmullRom(points, tension = 0.3, yFloor) {
+  if (points.length < 2) return "";
+  const clamp = (y) => yFloor !== void 0 ? Math.min(y, yFloor) : y;
+  let d = `M${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[Math.max(0, i - 1)];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[Math.min(points.length - 1, i + 2)];
+    const cp1x = p1.x + (p2.x - p0.x) * tension / 3;
+    const cp1y = clamp(p1.y + (p2.y - p0.y) * tension / 3);
+    const cp2x = p2.x - (p3.x - p1.x) * tension / 3;
+    const cp2y = clamp(p2.y - (p3.y - p1.y) * tension / 3);
+    d += ` C${cp1x.toFixed(2)},${cp1y.toFixed(2)} ${cp2x.toFixed(2)},${cp2y.toFixed(2)} ${p2.x.toFixed(2)},${p2.y.toFixed(2)}`;
+  }
+  return d;
+}
+function scaleY(value, max, top, bottom) {
+  if (max <= 0) return bottom;
+  return bottom - Math.max(0, value) / max * (bottom - top);
+}
+
+// src/render/render-efficiency-share-svg.ts
+var W = 1500;
+var H = 640;
+var ACCENT_H = 4;
+var FOOTER_H = 36;
+var pad = { top: 160, right: 130, bottom: 70 + FOOTER_H, left: 110 };
+var chartColors = {
+  commits: "#8b949e",
+  usdPerCommit: "#f97316"
+};
+function toMonthlyRows(rows) {
+  return rows.filter((row) => row.rowType === "period").sort((a, b) => a.periodKey.localeCompare(b.periodKey));
+}
+function toAllRow(rows) {
+  return rows.find((row) => row.periodKey === "ALL");
+}
+function renderSummaryStats(allRow, vcenter) {
+  const cost = formatUsd(allRow?.costUsd);
+  const commits = formatInteger(allRow?.commitCount ?? 0);
+  const usdPerCommit = formatUsd(allRow?.usdPerCommit);
+  const tokPerCommit = formatDecimal(allRow?.tokensPerCommit);
+  const y = vcenter;
+  const items = [
+    { label: "Total Cost", value: cost, x: pad.left },
+    { label: "Commits", value: commits, x: 280 },
+    { label: "$/Commit", value: usdPerCommit, x: 480 },
+    { label: "Tokens/Commit", value: tokPerCommit, x: 680 }
+  ];
+  return items.map(
+    (item) => `<text x="${item.x}" y="${y}" font-size="14" fill="${shareTheme.textMuted}" font-family="${shareTheme.font}">${escapeSvg(item.label)}</text><text x="${item.x}" y="${y + 20}" font-size="18" font-weight="700" fill="${shareTheme.textPrimary}" font-family="${shareTheme.font}">${escapeSvg(item.value)}</text>`
+  ).join("\n");
+}
+function renderLegend(x, y) {
+  const items = [
+    { label: "Commits", color: chartColors.commits, shape: "rect" },
+    { label: "$ / Commit", color: chartColors.usdPerCommit, shape: "line" }
+  ];
+  return items.map((item, i) => {
+    const ix = x + i * 180;
+    const shape = item.shape === "rect" ? `<rect x="${ix}" y="${y - 6}" width="14" height="14" rx="3" fill="${item.color}" opacity="0.5"/>` : `<line x1="${ix}" y1="${y + 1}" x2="${ix + 14}" y2="${y + 1}" stroke="${item.color}" stroke-width="3" stroke-linecap="round"/>`;
+    return `${shape}<text x="${ix + 20}" y="${y + 5}" font-size="13" fill="${shareTheme.textSecondary}" font-family="${shareTheme.font}">${escapeSvg(item.label)}</text>`;
+  }).join("\n");
+}
+function renderCommitBarLabels(monthlyRows, chartLeft, stepX, maxCommits, chartTop, chartBottom) {
+  return monthlyRows.map((row, i) => {
+    const x = chartLeft + i * stepX;
+    const yTop = scaleY(row.commitCount, maxCommits, chartTop, chartBottom);
+    return `<text x="${x.toFixed(2)}" y="${(yTop - 8).toFixed(0)}" text-anchor="middle" font-size="12" font-weight="600" fill="${shareTheme.textSecondary}" font-family="${shareTheme.font}">${formatInteger(row.commitCount)}</text>`;
+  }).join("\n");
+}
+function renderUsdDataLabels(monthlyRows, usdPoints) {
+  return monthlyRows.map((row, i) => {
+    const p = usdPoints[i];
+    const val = row.usdPerCommit;
+    if (val === void 0) return "";
+    const labelY = p.y - 14;
+    return `<text x="${p.x.toFixed(2)}" y="${labelY.toFixed(0)}" text-anchor="middle" font-size="12" font-weight="600" fill="${chartColors.usdPerCommit}" font-family="${shareTheme.font}">${escapeSvg(formatUsd(val))}</text>`;
+  }).join("\n");
+}
+function renderEfficiencyMonthlyShareSvg(efficiencyData) {
+  const monthlyRows = toMonthlyRows(efficiencyData.rows);
+  const allRow = toAllRow(efficiencyData.rows);
+  const chartLeft = pad.left;
+  const chartTop = pad.top;
+  const chartRight = W - pad.right;
+  const chartBottom = H - pad.bottom;
+  const chartW = chartRight - chartLeft;
+  const count = Math.max(1, monthlyRows.length);
+  const stepX = count === 1 ? 0 : chartW / (count - 1);
+  const maxCommits = Math.max(1, ...monthlyRows.map((r) => r.commitCount));
+  const actualMaxUsd = Math.max(0, ...monthlyRows.map((r) => Math.max(0, r.usdPerCommit ?? 0)));
+  const scaleMaxUsd = Math.max(0.01, actualMaxUsd);
+  const barWidth = Math.min(48, Math.max(18, chartW / (count * 2.2)));
+  const commitBars = monthlyRows.map((row, i) => {
+    const x = chartLeft + i * stepX;
+    const yTop = scaleY(row.commitCount, maxCommits, chartTop, chartBottom);
+    return `<rect x="${(x - barWidth / 2).toFixed(2)}" y="${yTop.toFixed(2)}" width="${barWidth.toFixed(2)}" height="${(chartBottom - yTop).toFixed(2)}" rx="4" fill="${chartColors.commits}" fill-opacity="0.35"/>`;
+  }).join("\n");
+  const usdPoints = monthlyRows.map((row, i) => ({
+    x: chartLeft + i * stepX,
+    y: scaleY(row.usdPerCommit ?? 0, scaleMaxUsd, chartTop, chartBottom)
+  }));
+  const usdLine = usdPoints.length >= 2 ? `<path d="${catmullRom(usdPoints, 0.3, chartBottom)}" fill="none" stroke="${chartColors.usdPerCommit}" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>` : "";
+  const dotRadius = count <= 4 ? 6 : 4.5;
+  const usdDots = usdPoints.map(
+    (p) => `<circle cx="${p.x.toFixed(2)}" cy="${p.y.toFixed(2)}" r="${dotRadius}" fill="${chartColors.usdPerCommit}"/>`
+  ).join("\n");
+  const monthLabels = monthlyRows.map((row, i) => {
+    const x = chartLeft + i * stepX;
+    return `<text x="${x.toFixed(2)}" y="${(chartBottom + 28).toFixed(0)}" text-anchor="middle" font-size="13" fill="${shareTheme.textMuted}" font-family="${shareTheme.font}">${escapeSvg(row.periodKey)}</text>`;
+  }).join("\n");
+  const axisLabels = [
+    `<text x="${(chartLeft - 12).toFixed(0)}" y="${(chartTop - 10).toFixed(0)}" text-anchor="end" font-size="12" font-weight="600" fill="${chartColors.commits}" font-family="${shareTheme.font}">Commits</text>`,
+    `<text x="${(chartLeft - 12).toFixed(0)}" y="${(chartTop + 5).toFixed(0)}" text-anchor="end" font-size="11" fill="${shareTheme.textMuted}" font-family="${shareTheme.font}">${escapeSvg(formatInteger(maxCommits))}</text>`,
+    `<text x="${(chartLeft - 12).toFixed(0)}" y="${(chartBottom + 5).toFixed(0)}" text-anchor="end" font-size="11" fill="${shareTheme.textMuted}" font-family="${shareTheme.font}">0</text>`,
+    `<text x="${(chartRight + 12).toFixed(0)}" y="${(chartTop - 10).toFixed(0)}" font-size="12" font-weight="600" fill="${chartColors.usdPerCommit}" font-family="${shareTheme.font}">$/Commit</text>`,
+    `<text x="${(chartRight + 12).toFixed(0)}" y="${(chartTop + 5).toFixed(0)}" font-size="11" fill="${shareTheme.textMuted}" font-family="${shareTheme.font}">${escapeSvg(formatUsd(actualMaxUsd))}</text>`,
+    `<text x="${(chartRight + 12).toFixed(0)}" y="${(chartBottom + 5).toFixed(0)}" font-size="11" fill="${shareTheme.textMuted}" font-family="${shareTheme.font}">$0.00</text>`
+  ].join("\n");
+  const noData = monthlyRows.length === 0 ? `<text x="${(W / 2).toFixed(0)}" y="${(H / 2).toFixed(0)}" text-anchor="middle" font-size="20" fill="${shareTheme.textSecondary}" font-family="${shareTheme.font}">No monthly efficiency data available</text>` : "";
+  const vcenter = 70;
+  const commandText = "llm-usage efficiency monthly --share";
+  const badgeW = commandText.length * 9.5 + 28;
+  const badgeX = W - pad.right - badgeW;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">
+<defs>
+  <linearGradient id="accent-grad" x1="0" y1="0" x2="1" y2="0">
+    <stop offset="0%" stop-color="#10b981"/>
+    <stop offset="100%" stop-color="#06b6d4"/>
+  </linearGradient>
+</defs>
+<rect width="${W}" height="${H}" fill="${shareTheme.bg}"/>
+<rect width="${W}" height="${ACCENT_H}" fill="url(#accent-grad)"/>
+<text x="${pad.left}" y="52" font-size="32" font-weight="700" fill="${shareTheme.textPrimary}" font-family="${shareTheme.font}">Monthly Efficiency</text>
+<rect x="${badgeX.toFixed(0)}" y="30" width="${badgeW.toFixed(0)}" height="34" rx="17" fill="none" stroke="${shareTheme.cardBorder}"/>
+<text x="${(badgeX + badgeW / 2).toFixed(0)}" y="52" text-anchor="middle" font-size="14" fill="${shareTheme.textMuted}" font-family="${shareTheme.mono}">${escapeSvg(commandText)}</text>
+${renderSummaryStats(allRow, vcenter)}
+${renderLegend(pad.left, vcenter + 50)}
+<line x1="${chartLeft}" y1="${chartBottom}" x2="${chartRight}" y2="${chartBottom}" stroke="${shareTheme.gridLine}" stroke-width="1"/>
+<line x1="${chartLeft}" y1="${chartTop}" x2="${chartLeft}" y2="${chartBottom}" stroke="${shareTheme.gridLine}" stroke-width="1"/>
+<line x1="${chartRight}" y1="${chartTop}" x2="${chartRight}" y2="${chartBottom}" stroke="${shareTheme.gridLine}" stroke-width="1"/>
+${axisLabels}
+${commitBars}
+${renderCommitBarLabels(monthlyRows, chartLeft, stepX, maxCommits, chartTop, chartBottom)}
+${usdLine}
+${usdDots}
+${renderUsdDataLabels(monthlyRows, usdPoints)}
+${monthLabels}
+${noData}
+<line x1="0" y1="${H - FOOTER_H + 1}" x2="${W}" y2="${H - FOOTER_H + 1}" stroke="${shareTheme.gridLine}" stroke-width="1"/>
+<text x="60" y="${H - FOOTER_H / 2 + 5}" fill="${shareTheme.textMuted}" font-family="${shareTheme.mono}" font-size="13">llm-usage-metrics</text>
+</svg>`;
+}
+
 // src/utils/time-buckets.ts
 var formatterCache = /* @__PURE__ */ new Map();
 function getDateFormatter(timezone) {
@@ -2776,8 +2991,7 @@ function computeDerivedMetrics(usage, outcomes) {
   return {
     usdPerCommit: costUsd !== void 0 && outcomes.commitCount > 0 ? costUsd / outcomes.commitCount : void 0,
     usdPer1kLinesChanged: costUsd !== void 0 && outcomes.linesChanged > 0 ? costUsd / (outcomes.linesChanged / 1e3) : void 0,
-    tokensPerCommit: outcomes.commitCount > 0 ? usage.totalTokens / outcomes.commitCount : void 0,
-    nonCacheTokensPerCommit: outcomes.commitCount > 0 ? nonCacheTotalTokens / outcomes.commitCount : void 0,
+    tokensPerCommit: outcomes.commitCount > 0 ? nonCacheTotalTokens / outcomes.commitCount : void 0,
     commitsPerUsd: costUsd !== void 0 && costUsd > 0 ? outcomes.commitCount / costUsd : void 0
   };
 }
@@ -3576,7 +3790,7 @@ function normalizeSkippedRowReasons(value) {
 // src/cli/parse-file-cache.ts
 import { mkdir as mkdir2, readFile as readFile4, rename, rm, stat as stat3, writeFile as writeFile2 } from "fs/promises";
 import path11 from "path";
-var PARSE_FILE_CACHE_VERSION = 3;
+var PARSE_FILE_CACHE_VERSION = 4;
 var CACHE_KEY_SEPARATOR = "\0";
 function createCacheKey(source, filePath) {
   return `${source}${CACHE_KEY_SEPARATOR}${filePath}`;
@@ -5122,6 +5336,15 @@ function emitEnvVarOverrides(activeEnvOverrides, diagnosticsLogger) {
   }
 }
 
+// src/cli/share-artifact.ts
+import { writeFile as writeFile4 } from "fs/promises";
+import path13 from "path";
+async function writeShareSvgFile(fileName, svgContent) {
+  const outputPath = path13.resolve(process.cwd(), fileName);
+  await writeFile4(outputPath, svgContent, "utf8");
+  return outputPath;
+}
+
 // src/render/table-text-layout.ts
 var ansiEscapePattern = new RegExp(String.raw`\u001B\[[0-9;]*m`, "gu");
 var combiningMarkPattern = /\p{Mark}/u;
@@ -5372,8 +5595,7 @@ var efficiencyTableHeaders = [
   "Cost",
   "$/Commit",
   "$/1k Lines",
-  "All Tokens/Commit",
-  "Non-Cache/Commit",
+  "Tokens/Commit",
   "Commits/$"
 ];
 var integerFormatter = new Intl.NumberFormat("en-US");
@@ -5393,10 +5615,10 @@ var usdRateFormatter = new Intl.NumberFormat("en-US", {
   minimumFractionDigits: 4,
   maximumFractionDigits: 4
 });
-function formatInteger(value) {
+function formatInteger2(value) {
   return integerFormatter.format(value);
 }
-function formatUsd(value, options = {}) {
+function formatUsd2(value, options = {}) {
   if (value === void 0) {
     return "-";
   }
@@ -5410,7 +5632,7 @@ function formatUsdRate(value, options = {}) {
   const formatted = usdRateFormatter.format(value);
   return options.approximate ? `~${formatted}` : formatted;
 }
-function formatDecimal(value, options = {}) {
+function formatDecimal2(value, options = {}) {
   if (value === void 0) {
     return "-";
   }
@@ -5420,22 +5642,21 @@ function formatDecimal(value, options = {}) {
 function toEfficiencyTableCells(rows) {
   return rows.map((row) => [
     row.periodKey,
-    formatInteger(row.commitCount),
-    formatInteger(row.linesAdded),
-    formatInteger(row.linesDeleted),
-    formatInteger(row.linesChanged),
-    formatInteger(row.inputTokens),
-    formatInteger(row.outputTokens),
-    formatInteger(row.reasoningTokens),
-    formatInteger(row.cacheReadTokens),
-    formatInteger(row.cacheWriteTokens),
-    formatInteger(row.totalTokens),
-    formatUsd(row.costUsd, { approximate: row.costIncomplete }),
+    formatInteger2(row.commitCount),
+    formatInteger2(row.linesAdded),
+    formatInteger2(row.linesDeleted),
+    formatInteger2(row.linesChanged),
+    formatInteger2(row.inputTokens),
+    formatInteger2(row.outputTokens),
+    formatInteger2(row.reasoningTokens),
+    formatInteger2(row.cacheReadTokens),
+    formatInteger2(row.cacheWriteTokens),
+    formatInteger2(row.totalTokens),
+    formatUsd2(row.costUsd, { approximate: row.costIncomplete }),
     formatUsdRate(row.usdPerCommit, { approximate: row.costIncomplete }),
     formatUsdRate(row.usdPer1kLinesChanged, { approximate: row.costIncomplete }),
-    formatDecimal(row.tokensPerCommit),
-    formatDecimal(row.nonCacheTokensPerCommit),
-    formatDecimal(row.commitsPerUsd, { approximate: row.costIncomplete })
+    formatDecimal2(row.tokensPerCommit),
+    formatDecimal2(row.commitsPerUsd, { approximate: row.costIncomplete })
   ]);
 }
 
@@ -5546,7 +5767,7 @@ function formatSource(row) {
 function formatTokenCount(value) {
   return integerFormatter2.format(value ?? 0);
 }
-function formatUsd2(value, options = {}) {
+function formatUsd3(value, options = {}) {
   if (value === void 0) {
     return "-";
   }
@@ -5581,13 +5802,13 @@ function formatModelMetric(row, selector, formatter, layout) {
 }
 function formatModelCostMetric(row, layout) {
   if (layout !== "per_model_columns" || row.modelBreakdown.length === 0) {
-    return formatUsd2(row.costUsd, { incomplete: row.costIncomplete });
+    return formatUsd3(row.costUsd, { incomplete: row.costIncomplete });
   }
   const lines = row.modelBreakdown.map(
-    (modelUsage) => formatUsd2(modelUsage.costUsd, { incomplete: modelUsage.costIncomplete })
+    (modelUsage) => formatUsd3(modelUsage.costUsd, { incomplete: modelUsage.costIncomplete })
   );
   if (row.modelBreakdown.length > 1) {
-    lines.push(formatUsd2(row.costUsd, { incomplete: row.costIncomplete }));
+    lines.push(formatUsd3(row.costUsd, { incomplete: row.costIncomplete }));
   }
   return lines.join("\n");
 }
@@ -6191,13 +6412,23 @@ function resolveReportFormat(options) {
   }
   return "terminal";
 }
+function validateShareOption(granularity, options) {
+  if (!options.share) {
+    return;
+  }
+  if (granularity !== "monthly") {
+    throw new Error("--share is only supported for efficiency monthly");
+  }
+}
 async function prepareEfficiencyReport(granularity, options) {
   validateOutputFormatOptions(options);
+  validateShareOption(granularity, options);
   const efficiencyData = await buildEfficiencyData(granularity, options);
   const format = resolveReportFormat(options);
   return {
     format,
     diagnostics: efficiencyData.diagnostics,
+    shareSvg: options.share ? renderEfficiencyMonthlyShareSvg(efficiencyData) : void 0,
     output: renderEfficiencyReport(efficiencyData, format, {
       granularity
     })
@@ -6222,9 +6453,141 @@ async function runEfficiencyReport(granularity, options) {
       logger.warn(message);
     });
   }
+  if (preparedReport.shareSvg) {
+    const outputPath = await writeShareSvgFile(
+      "efficiency-monthly-share.svg",
+      preparedReport.shareSvg
+    );
+    logger.info(`Wrote efficiency share SVG: ${outputPath}`);
+  }
   console.log(preparedReport.output);
 }
 
+// src/render/render-optimize-share-svg.ts
+var W2 = 1500;
+var H2 = 780;
+var ACCENT_H2 = 4;
+var FOOTER_H2 = 36;
+var pad2 = { top: 180, right: 70, bottom: 60 + FOOTER_H2, left: 260 };
+function formatPercent(value) {
+  if (value === void 0) return "-";
+  return `${(value * 100).toFixed(1)}%`;
+}
+function cellFill(value) {
+  if (value === void 0) return "rgba(139,148,158,0.12)";
+  const mag = Math.min(1, Math.abs(value));
+  const alpha = 0.22 + mag * 0.58;
+  if (value > 0) return `rgba(34,197,94,${alpha.toFixed(3)})`;
+  if (value < 0) return `rgba(239,68,68,${alpha.toFixed(3)})`;
+  return "rgba(139,148,158,0.15)";
+}
+function cellTextFill(value) {
+  if (value === void 0) return shareTheme.textMuted;
+  if (Math.abs(value) >= 0.35) return "#ffffff";
+  return shareTheme.textPrimary;
+}
+function toCandidateRows(data) {
+  return data.rows.filter((r) => r.rowType === "candidate");
+}
+function sortPeriodKeys(keys) {
+  return [...keys].sort(compareByCodePoint);
+}
+function renderOptimizeMonthlyShareSvg(optimizeData) {
+  const candidateRows = toCandidateRows(optimizeData);
+  const periodKeys = sortPeriodKeys(
+    new Set(candidateRows.map((r) => r.periodKey).filter((k) => k !== "ALL"))
+  );
+  const candidateModels = [...new Set(candidateRows.map((r) => r.candidateModel))].sort(
+    compareByCodePoint
+  );
+  const cellMap = /* @__PURE__ */ new Map();
+  for (const row of candidateRows) {
+    cellMap.set(`${row.candidateModel}__${row.periodKey}`, row);
+  }
+  const allByCandidate = /* @__PURE__ */ new Map();
+  for (const row of candidateRows) {
+    if (row.periodKey === "ALL") allByCandidate.set(row.candidateModel, row);
+  }
+  const chartLeft = pad2.left;
+  const chartTop = pad2.top;
+  const chartRight = W2 - pad2.right;
+  const chartBottom = H2 - pad2.bottom;
+  const chartW = chartRight - chartLeft;
+  const chartH = chartBottom - chartTop;
+  const rowCount = Math.max(1, candidateModels.length);
+  const colCount = Math.max(1, periodKeys.length);
+  const cellW = chartW / colCount;
+  const cellH = chartH / rowCount;
+  const gridCells = [];
+  const colLabels = [];
+  const rowLabels = [];
+  for (let c = 0; c < periodKeys.length; c++) {
+    const x = chartLeft + c * cellW + cellW / 2;
+    colLabels.push(
+      `<text x="${x.toFixed(2)}" y="${(chartTop - 14).toFixed(0)}" text-anchor="middle" font-size="14" fill="${shareTheme.textSecondary}" font-family="${shareTheme.font}">${escapeSvg(periodKeys[c])}</text>`
+    );
+  }
+  for (let r = 0; r < candidateModels.length; r++) {
+    const model = candidateModels[r];
+    const y = chartTop + r * cellH + cellH / 2 + 5;
+    const allRow = allByCandidate.get(model);
+    const allLabel = allRow?.savingsUsd === void 0 ? "-" : formatUsd(Math.abs(allRow.savingsUsd));
+    const allColor = allRow?.savingsUsd === void 0 ? shareTheme.textMuted : allRow.savingsUsd > 0 ? "#22c55e" : allRow.savingsUsd < 0 ? "#ef4444" : shareTheme.textSecondary;
+    const prefix = allRow?.savingsUsd === void 0 ? "" : allRow.savingsUsd > 0 ? "+" : allRow.savingsUsd < 0 ? "-" : "";
+    rowLabels.push(
+      `<text x="${(chartLeft - 16).toFixed(0)}" y="${y.toFixed(0)}" text-anchor="end" font-size="14" fill="${shareTheme.textPrimary}" font-family="${shareTheme.font}">${escapeSvg(model)}</text>`
+    );
+    rowLabels.push(
+      `<text x="${(chartLeft - 16).toFixed(0)}" y="${(y + 16).toFixed(0)}" text-anchor="end" font-size="12" fill="${allColor}" font-family="${shareTheme.font}">ALL: ${escapeSvg(prefix + allLabel)}</text>`
+    );
+    for (let c = 0; c < periodKeys.length; c++) {
+      const row = cellMap.get(`${model}__${periodKeys[c]}`);
+      const x = chartLeft + c * cellW;
+      const yTop = chartTop + r * cellH;
+      const pct = row?.savingsPct;
+      gridCells.push(
+        `<rect x="${(x + 2).toFixed(2)}" y="${(yTop + 2).toFixed(2)}" width="${Math.max(0, cellW - 4).toFixed(2)}" height="${Math.max(0, cellH - 4).toFixed(2)}" fill="${cellFill(pct)}" rx="6"/>`
+      );
+      gridCells.push(
+        `<text x="${(x + cellW / 2).toFixed(2)}" y="${(yTop + cellH / 2 + 5).toFixed(2)}" text-anchor="middle" font-size="13" font-weight="600" fill="${cellTextFill(pct)}" font-family="${shareTheme.font}">${escapeSvg(formatPercent(pct))}</text>`
+      );
+    }
+  }
+  const provider = optimizeData.diagnostics.provider;
+  const missing = optimizeData.diagnostics.candidatesWithMissingPricing;
+  const warning = optimizeData.diagnostics.warning ?? "";
+  const commandText = "llm-usage optimize monthly --share";
+  const badgeW = commandText.length * 9.5 + 28;
+  const badgeX = W2 - pad2.right - badgeW;
+  const noData = candidateModels.length === 0 || periodKeys.length === 0 ? `<text x="${(W2 / 2).toFixed(0)}" y="${(H2 / 2).toFixed(0)}" text-anchor="middle" font-size="20" fill="${shareTheme.textSecondary}" font-family="${shareTheme.font}">No monthly optimize data available</text>` : "";
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${W2}" height="${H2}" viewBox="0 0 ${W2} ${H2}">
+<defs>
+  <linearGradient id="accent-grad" x1="0" y1="0" x2="1" y2="0">
+    <stop offset="0%" stop-color="#10b981"/>
+    <stop offset="100%" stop-color="#06b6d4"/>
+  </linearGradient>
+</defs>
+<rect width="${W2}" height="${H2}" fill="${shareTheme.bg}"/>
+<rect width="${W2}" height="${ACCENT_H2}" fill="url(#accent-grad)"/>
+<text x="${pad2.left}" y="52" font-size="32" font-weight="700" fill="${shareTheme.textPrimary}" font-family="${shareTheme.font}">Monthly Optimize</text>
+<text x="${pad2.left}" y="78" font-size="15" fill="${shareTheme.textSecondary}" font-family="${shareTheme.font}">Savings % heatmap by candidate and month</text>
+<rect x="${badgeX.toFixed(0)}" y="30" width="${badgeW.toFixed(0)}" height="34" rx="17" fill="none" stroke="${shareTheme.cardBorder}"/>
+<text x="${(badgeX + badgeW / 2).toFixed(0)}" y="52" text-anchor="middle" font-size="14" fill="${shareTheme.textMuted}" font-family="${shareTheme.mono}">${escapeSvg(commandText)}</text>
+<text x="${pad2.left}" y="112" font-size="15" fill="${shareTheme.textPrimary}" font-family="${shareTheme.font}">Provider: <tspan font-weight="700">${escapeSvg(provider)}</tspan></text>
+<text x="${pad2.left + 280}" y="112" font-size="14" fill="#22c55e" font-family="${shareTheme.font}">\u25CF positive = savings</text>
+<text x="${pad2.left + 480}" y="112" font-size="14" fill="#ef4444" font-family="${shareTheme.font}">\u25CF negative = higher cost</text>
+${missing.length > 0 ? `<text x="${pad2.left}" y="136" font-size="13" fill="#eab308" font-family="${shareTheme.font}">Missing pricing: ${escapeSvg(missing.join(", "))}</text>` : ""}
+${warning ? `<text x="${pad2.left}" y="158" font-size="13" fill="#eab308" font-family="${shareTheme.font}">${escapeSvg(warning)}</text>` : ""}
+<rect x="${chartLeft}" y="${chartTop}" width="${chartW}" height="${chartH}" fill="${shareTheme.cardBg}" rx="10"/>
+${gridCells.join("\n")}
+${colLabels.join("\n")}
+${rowLabels.join("\n")}
+${noData}
+<line x1="0" y1="${H2 - FOOTER_H2 + 1}" x2="${W2}" y2="${H2 - FOOTER_H2 + 1}" stroke="${shareTheme.gridLine}" stroke-width="1"/>
+<text x="60" y="${H2 - FOOTER_H2 / 2 + 5}" fill="${shareTheme.textMuted}" font-family="${shareTheme.mono}" font-size="13">llm-usage-metrics</text>
+</svg>`;
+}
+
 // src/render/render-optimize-report.ts
 import { markdownTable as markdownTable2 } from "markdown-table";
 import pc6 from "picocolors";
@@ -6261,14 +6624,14 @@ function getReportTitle2(granularity) {
       return "Monthly Optimize Report";
   }
 }
-function formatUsd3(value, options = {}) {
+function formatUsd4(value, options = {}) {
   if (value === void 0) {
     return "-";
   }
   const formatted = usdFormatter3.format(value);
   return options.approximate ? `~${formatted}` : formatted;
 }
-function formatPercent(value) {
+function formatPercent2(value) {
   if (value === void 0) {
     return "-";
   }
@@ -6322,7 +6685,7 @@ function resolveTerminalContextLines(optimizeData, options) {
   lines.push(options.useColor ? pc6.cyan(providerLine) : providerLine);
   if (allBaselineRow) {
     lines.push(
-      `ALL baseline cost: ${formatUsd3(allBaselineRow.baselineCostUsd, { approximate: allBaselineRow.baselineCostIncomplete })}`
+      `ALL baseline cost: ${formatUsd4(allBaselineRow.baselineCostUsd, { approximate: allBaselineRow.baselineCostIncomplete })}`
     );
   }
   if (allCandidateRows.length > 0) {
@@ -6334,11 +6697,11 @@ function resolveTerminalContextLines(optimizeData, options) {
       lines.push("ALL best candidate: unavailable (missing baseline or candidate pricing)");
     } else if (bestRow.savingsUsd > 0) {
       lines.push(
-        `ALL best candidate: ${bestRow.candidateModel} saves ${formatAbsoluteUsd(bestRow.savingsUsd)} (${formatPercent(bestRow.savingsPct)})`
+        `ALL best candidate: ${bestRow.candidateModel} saves ${formatAbsoluteUsd(bestRow.savingsUsd)} (${formatPercent2(bestRow.savingsPct)})`
       );
     } else if (bestRow.savingsUsd < 0) {
       lines.push(
-        `ALL best candidate: ${bestRow.candidateModel} increases cost by ${formatAbsoluteUsd(bestRow.savingsUsd)} (${formatPercent(bestRow.savingsPct)})`
+        `ALL best candidate: ${bestRow.candidateModel} increases cost by ${formatAbsoluteUsd(bestRow.savingsUsd)} (${formatPercent2(bestRow.savingsPct)})`
       );
     } else {
       lines.push(`ALL best candidate: ${bestRow.candidateModel} matches baseline cost`);
@@ -6364,20 +6727,20 @@ function toTableCells(optimizeData, options) {
         periodCell,
         styleCandidateCell("BASELINE", "baseline", options.useColor),
         "-",
-        formatUsd3(row.baselineCostUsd, { approximate: row.baselineCostIncomplete }),
+        formatUsd4(row.baselineCostUsd, { approximate: row.baselineCostIncomplete }),
         "-",
         "-"
       ];
       return options.includeNotesColumn ? [...baselineCells, "-"] : baselineCells;
     }
-    const savingsCell = formatUsd3(row.savingsUsd);
-    const savingsPctCell = formatPercent(row.savingsPct);
+    const savingsCell = formatUsd4(row.savingsUsd);
+    const savingsPctCell = formatPercent2(row.savingsPct);
     const notesCell = formatNotes(row.notes);
     const candidateCells = [
       periodCell,
       styleCandidateCell(row.candidateModel, "candidate", options.useColor),
-      formatUsd3(row.hypotheticalCostUsd, { approximate: row.hypotheticalCostIncomplete }),
-      formatUsd3(baselineRow?.baselineCostUsd, {
+      formatUsd4(row.hypotheticalCostUsd, { approximate: row.hypotheticalCostIncomplete }),
+      formatUsd4(baselineRow?.baselineCostUsd, {
         approximate: baselineRow?.baselineCostIncomplete === true
       }),
       styleDeltaCell2(row.savingsUsd, savingsCell, options.useColor),
@@ -6818,8 +7181,17 @@ function resolveReportFormat2(options) {
   }
   return "terminal";
 }
+function validateShareOption2(granularity, options) {
+  if (!options.share) {
+    return;
+  }
+  if (granularity !== "monthly") {
+    throw new Error("--share is only supported for optimize monthly");
+  }
+}
 async function prepareOptimizeReport(granularity, options) {
   validateOutputFormatOptions2(options);
+  validateShareOption2(granularity, options);
   const optimizeData = await buildOptimizeData(granularity, options);
   const format = resolveReportFormat2(options);
   return {
@@ -6828,6 +7200,7 @@ async function prepareOptimizeReport(granularity, options) {
     candidateCount: optimizeData.rows.filter(
       (row) => row.rowType === "candidate" && row.periodKey === "ALL"
     ).length,
+    shareSvg: options.share ? renderOptimizeMonthlyShareSvg(optimizeData) : void 0,
     output: renderOptimizeReport(optimizeData, format, {
       granularity
     })
@@ -6853,6 +7226,13 @@ async function runOptimizeReport(granularity, options) {
       logger.warn(message);
     });
   }
+  if (preparedReport.shareSvg) {
+    const outputPath = await writeShareSvgFile(
+      "optimize-monthly-share.svg",
+      preparedReport.shareSvg
+    );
+    logger.info(`Wrote optimize share SVG: ${outputPath}`);
+  }
   console.log(preparedReport.output);
 }
 
@@ -6910,6 +7290,257 @@ function renderUsageReport(usageData, format, options) {
   }
 }
 
+// src/render/render-usage-share-svg.ts
+var W3 = 1500;
+var H3 = 560;
+var ACCENT_H3 = 4;
+var FOOTER_H3 = 36;
+var pad3 = { top: 140, right: 80, bottom: 60 + FOOTER_H3, left: 200 };
+function extractPeriodSourceRows(rows) {
+  return rows.filter((r) => r.rowType === "period_source");
+}
+function extractGrandTotal(rows) {
+  return rows.find((r) => r.rowType === "grand_total");
+}
+function buildSourceSeries(sourceRows, periods, sources) {
+  const lookup = /* @__PURE__ */ new Map();
+  const sourceTotals = /* @__PURE__ */ new Map();
+  for (const row of sourceRows) {
+    const key = `${row.source}__${row.periodKey}`;
+    lookup.set(key, (lookup.get(key) ?? 0) + row.totalTokens);
+    sourceTotals.set(row.source, (sourceTotals.get(row.source) ?? 0) + row.totalTokens);
+  }
+  return sources.map((source, index) => ({
+    source,
+    color: getSourceColor(source, index),
+    total: sourceTotals.get(source) ?? 0,
+    values: periods.map((period) => lookup.get(`${source}__${period}`) ?? 0)
+  }));
+}
+function buildStackedValues(series) {
+  if (series.length === 0) return [];
+  const periodCount = series[0].values.length;
+  const stacked = [];
+  for (let s = 0; s < series.length; s++) {
+    stacked.push(
+      Array.from({ length: periodCount }, (_, p) => {
+        let sum = 0;
+        for (let si = 0; si <= s; si++) sum += series[si].values[p];
+        return sum;
+      })
+    );
+  }
+  return stacked;
+}
+function renderAccentBar() {
+  return [
+    `<defs><linearGradient id="accent-grad" x1="0" y1="0" x2="1" y2="0">`,
+    `  <stop offset="0%" stop-color="#10b981"/>`,
+    `  <stop offset="100%" stop-color="#06b6d4"/>`,
+    `</linearGradient></defs>`,
+    `<rect width="${W3}" height="${ACCENT_H3}" fill="url(#accent-grad)"/>`
+  ].join("\n");
+}
+function renderStatColumn(totalTokens, costUsd, sourceCount) {
+  const x = 60;
+  const baseY = ACCENT_H3 + 48;
+  let svg = "";
+  svg += `<text x="${x}" y="${baseY}" fill="${shareTheme.textPrimary}" font-family="${shareTheme.font}" font-size="52" font-weight="800">${escapeSvg(formatCompact(totalTokens))}</text>
+`;
+  svg += `<text x="${x}" y="${baseY + 22}" fill="${shareTheme.textMuted}" font-family="${shareTheme.font}" font-size="14" letter-spacing="3" font-weight="600">TOKENS</text>
+`;
+  if (costUsd !== void 0) {
+    svg += `<text x="${x}" y="${baseY + 50}" fill="${shareTheme.textSecondary}" font-family="${shareTheme.font}" font-size="22" font-weight="600">${escapeSvg(formatUsd(costUsd))}</text>
+`;
+  }
+  svg += `<text x="${x}" y="${baseY + 74}" fill="${shareTheme.textMuted}" font-family="${shareTheme.font}" font-size="13">${sourceCount} source${sourceCount !== 1 ? "s" : ""}</text>
+`;
+  return svg;
+}
+function renderSourcePills(series) {
+  let svg = "";
+  let cx = pad3.left + 10;
+  const pillY = ACCENT_H3 + 30;
+  for (const s of series) {
+    const label = `${s.source}  ${formatCompact(s.total)}`;
+    const textW = label.length * 8.5;
+    const pillW = textW + 28;
+    const pillH = 30;
+    svg += `<rect x="${cx}" y="${pillY}" width="${pillW.toFixed(0)}" height="${pillH}" rx="${pillH / 2}" fill="${s.color}" fill-opacity="0.15" stroke="${s.color}" stroke-opacity="0.4" stroke-width="1"/>
+`;
+    svg += `<circle cx="${cx + 14}" cy="${pillY + pillH / 2}" r="4" fill="${s.color}"/>
+`;
+    svg += `<text x="${cx + 24}" y="${pillY + pillH / 2 + 5}" fill="${shareTheme.textSecondary}" font-family="${shareTheme.font}" font-size="14">${escapeSvg(label)}</text>
+`;
+    cx += pillW + 10;
+  }
+  return svg;
+}
+function renderCommandBadge(command) {
+  const textW = command.length * 9;
+  const badgeW = textW + 28;
+  const badgeH = 30;
+  const x = W3 - 60 - badgeW;
+  const y = ACCENT_H3 + 30;
+  return [
+    `<rect x="${x}" y="${y}" width="${badgeW}" height="${badgeH}" rx="${badgeH / 2}" fill="none" stroke="${shareTheme.cardBorder}" stroke-width="1"/>`,
+    `<text x="${x + badgeW / 2}" y="${y + badgeH / 2 + 5}" text-anchor="middle" font-size="13" fill="${shareTheme.textMuted}" font-family="${shareTheme.mono}">${escapeSvg(command)}</text>`
+  ].join("\n");
+}
+function renderGridLines(chartLeft, chartRight, chartTop, chartH, maxY) {
+  const gridCount = 4;
+  let svg = "";
+  for (let i = 1; i <= gridCount; i++) {
+    const val = maxY / gridCount * i;
+    const y = chartTop + chartH - i / gridCount * chartH;
+    svg += `<line x1="${chartLeft}" y1="${y.toFixed(2)}" x2="${chartRight}" y2="${y.toFixed(2)}" stroke="${shareTheme.gridLine}" stroke-width="1" stroke-dasharray="4 4"/>
+`;
+    svg += `<text x="${(chartLeft - 12).toFixed(0)}" y="${(y + 4).toFixed(0)}" text-anchor="end" fill="${shareTheme.textMuted}" font-family="${shareTheme.font}" font-size="11">${escapeSvg(formatCompact(val))}</text>
+`;
+  }
+  return svg;
+}
+function renderGradientDefs(series) {
+  return series.map(
+    (s, i) => `<linearGradient id="area-grad-${i}" x1="0" y1="0" x2="0" y2="1">
+  <stop offset="0%" stop-color="${s.color}" stop-opacity="0.6"/>
+  <stop offset="100%" stop-color="${s.color}" stop-opacity="0.15"/>
+</linearGradient>`
+  ).join("\n");
+}
+function renderStackedAreas(series, stacked, periodCount, toX, toChartY, chartBottom) {
+  if (periodCount < 2 || series.length === 0) return "";
+  let svg = "";
+  for (let s = series.length - 1; s >= 0; s--) {
+    const topPoints = Array.from({ length: periodCount }, (_, p) => ({
+      x: toX(p),
+      y: toChartY(stacked[s][p])
+    }));
+    const topPath = catmullRom(topPoints, 0.3, chartBottom);
+    let botPath;
+    if (s === 0) {
+      botPath = `L${toX(periodCount - 1).toFixed(2)},${chartBottom} L${toX(0).toFixed(2)},${chartBottom}`;
+    } else {
+      const botPoints = Array.from({ length: periodCount }, (_, p) => ({
+        x: toX(p),
+        y: toChartY(stacked[s - 1][p])
+      })).reverse();
+      botPath = catmullRom(botPoints, 0.3, chartBottom).replace("M", "L");
+    }
+    svg += `<path d="${topPath} ${botPath} Z" fill="url(#area-grad-${s})" clip-path="url(#chart-clip)"/>
+`;
+  }
+  const totalPoints = Array.from({ length: periodCount }, (_, p) => ({
+    x: toX(p),
+    y: toChartY(stacked[stacked.length - 1][p])
+  }));
+  const topLinePath = catmullRom(totalPoints, 0.3, chartBottom);
+  svg += `<path d="${topLinePath}" fill="none" stroke="${shareTheme.textPrimary}" stroke-width="2" stroke-opacity="0.5" stroke-linejoin="round" stroke-linecap="round" clip-path="url(#chart-clip)"/>
+`;
+  for (const pt of totalPoints) {
+    svg += `<circle cx="${pt.x.toFixed(2)}" cy="${pt.y.toFixed(2)}" r="3" fill="${shareTheme.textPrimary}" fill-opacity="0.6" clip-path="url(#chart-clip)"/>
+`;
+  }
+  return svg;
+}
+function renderSinglePeriodBars(series, stacked, toX, toChartY, chartBottom, chartW) {
+  let svg = "";
+  const barWidth = Math.min(120, chartW * 0.4);
+  const xCenter = toX(0);
+  for (let s = series.length - 1; s >= 0; s--) {
+    const yTop = toChartY(stacked[s][0]);
+    const yBot = s === 0 ? chartBottom : toChartY(stacked[s - 1][0]);
+    if (yBot - yTop > 0) {
+      svg += `<rect x="${(xCenter - barWidth / 2).toFixed(2)}" y="${yTop.toFixed(2)}" width="${barWidth.toFixed(2)}" height="${(yBot - yTop).toFixed(2)}" fill="url(#area-grad-${s})" rx="4"/>
+`;
+    }
+  }
+  return svg;
+}
+function renderPeriodLabels(periods, toX, chartBottom) {
+  const periodCount = periods.length;
+  const maxLabels = 12;
+  const labelStep = periodCount <= maxLabels ? 1 : Math.ceil(periodCount / maxLabels);
+  let svg = "";
+  for (let p = 0; p < periodCount; p += labelStep) {
+    svg += `<text x="${toX(p).toFixed(2)}" y="${(chartBottom + 24).toFixed(0)}" text-anchor="middle" font-size="13" fill="${shareTheme.textMuted}" font-family="${shareTheme.font}">${escapeSvg(periods[p])}</text>
+`;
+  }
+  return svg;
+}
+function renderFooter(periods) {
+  const y = H3 - FOOTER_H3;
+  const lineY = y + 1;
+  const textY = y + FOOTER_H3 / 2 + 5;
+  const range = periods.length >= 2 ? `${periods[0]} \u2192 ${periods[periods.length - 1]}` : periods[0] ?? "";
+  return [
+    `<line x1="0" y1="${lineY}" x2="${W3}" y2="${lineY}" stroke="${shareTheme.gridLine}" stroke-width="1"/>`,
+    `<text x="60" y="${textY}" fill="${shareTheme.textMuted}" font-family="${shareTheme.mono}" font-size="13">llm-usage-metrics</text>`,
+    `<text x="${W3 - 60}" y="${textY}" text-anchor="end" fill="${shareTheme.textMuted}" font-family="${shareTheme.font}" font-size="13">${escapeSvg(range)}</text>`
+  ].join("\n");
+}
+function renderUsageShareSvg(usageData, granularity) {
+  const sourceRows = extractPeriodSourceRows(usageData.rows);
+  const grandTotal = extractGrandTotal(usageData.rows);
+  const periods = [...new Set(sourceRows.map((r) => r.periodKey))].sort(compareByCodePoint);
+  const sources = [...new Set(sourceRows.map((r) => r.source))].sort(compareByCodePoint);
+  const allSeries = buildSourceSeries(sourceRows, periods, sources);
+  const activeSeries = allSeries.filter((s) => s.total > 0);
+  const totalTokens = grandTotal?.totalTokens ?? 0;
+  const totalCost = grandTotal?.costUsd;
+  const chartLeft = pad3.left;
+  const chartTop = pad3.top;
+  const chartRight = W3 - pad3.right;
+  const chartBottom = H3 - pad3.bottom;
+  const chartW = chartRight - chartLeft;
+  const chartH = chartBottom - chartTop;
+  const periodCount = periods.length;
+  const stacked = buildStackedValues(activeSeries);
+  const maxY = periodCount > 0 && stacked.length > 0 ? Math.max(1, ...stacked[stacked.length - 1]) * 1.08 : 1;
+  const toX = (p) => chartLeft + (periodCount <= 1 ? chartW / 2 : p / (periodCount - 1) * chartW);
+  const toChartY = (val) => scaleY(val, maxY, chartTop, chartBottom);
+  const commandText = `llm-usage ${granularity} --share`;
+  let chartContent;
+  if (periodCount === 0) {
+    chartContent = `<text x="${(W3 / 2).toFixed(0)}" y="${(H3 / 2).toFixed(0)}" text-anchor="middle" font-size="20" fill="${shareTheme.textSecondary}" font-family="${shareTheme.font}">No usage data available</text>`;
+  } else if (periodCount === 1) {
+    chartContent = renderSinglePeriodBars(
+      activeSeries,
+      stacked,
+      toX,
+      toChartY,
+      chartBottom,
+      chartW
+    );
+  } else {
+    chartContent = renderStackedAreas(
+      activeSeries,
+      stacked,
+      periodCount,
+      toX,
+      toChartY,
+      chartBottom
+    );
+  }
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${W3}" height="${H3}" viewBox="0 0 ${W3} ${H3}">
+<defs>
+  <clipPath id="chart-clip">
+    <rect x="${chartLeft}" y="${chartTop - 4}" width="${chartW}" height="${chartH + 8}"/>
+  </clipPath>
+  ${renderGradientDefs(activeSeries)}
+</defs>
+<rect width="${W3}" height="${H3}" fill="${shareTheme.bg}"/>
+${renderAccentBar()}
+${renderStatColumn(totalTokens, totalCost, activeSeries.length)}
+${renderSourcePills(activeSeries)}
+${renderCommandBadge(commandText)}
+${renderGridLines(chartLeft, chartRight, chartTop, chartH, maxY)}
+${chartContent}
+${renderPeriodLabels(periods, toX, chartBottom)}
+${renderFooter(periods)}
+</svg>`;
+}
+
 // src/cli/run-usage-report.ts
 function validateOutputFormatOptions3(options) {
   if (options.markdown && options.json) {
@@ -6928,6 +7559,9 @@ function resolveReportFormat3(options) {
 function resolveTableLayout(options) {
   return options.perModelColumns ? "per_model_columns" : "compact";
 }
+function resolveShareFileName(granularity) {
+  return `usage-${granularity}-share.svg`;
+}
 async function prepareUsageReport(granularity, options) {
   validateOutputFormatOptions3(options);
   const usageData = await buildUsageData(granularity, options);
@@ -6935,6 +7569,7 @@ async function prepareUsageReport(granularity, options) {
   return {
     format,
     diagnostics: usageData.diagnostics,
+    shareSvg: options.share ? renderUsageShareSvg(usageData, granularity) : void 0,
     output: renderUsageReport(usageData, format, {
       granularity,
       tableLayout: resolveTableLayout(options)
@@ -6950,6 +7585,13 @@ async function runUsageReport(granularity, options) {
       logger.warn(message);
     });
   }
+  if (preparedReport.shareSvg) {
+    const outputPath = await writeShareSvgFile(
+      resolveShareFileName(granularity),
+      preparedReport.shareSvg
+    );
+    logger.info(`Wrote usage share SVG: ${outputPath}`);
+  }
   console.log(preparedReport.output);
 }
 
@@ -6999,6 +7641,9 @@ function addSharedOptions(command, options = {}) {
     "Render per-model metrics as multiline aligned table columns (terminal/markdown)"
   );
 }
+function addShareOption(command) {
+  return command.option("--share", "Write a share SVG image to the current directory");
+}
 function commandDescription(granularity) {
   switch (granularity) {
     case "daily":
@@ -7011,7 +7656,7 @@ function commandDescription(granularity) {
 }
 function createCommand(granularity) {
   const command = new Command(granularity);
-  addSharedOptions(command).description(commandDescription(granularity)).action(async (options) => {
+  addShareOption(addSharedOptions(command)).description(commandDescription(granularity)).action(async (options) => {
     await runUsageReport(granularity, options);
   });
   return command;
@@ -7025,14 +7670,14 @@ function parseGranularityArgument(value) {
 }
 function createEfficiencyCommand() {
   const command = new Command("efficiency");
-  addSharedOptions(command, { includePerModelColumns: false }).argument("<granularity>", "Granularity: daily | weekly | monthly", parseGranularityArgument).option("--repo-dir <path>", "Path to repository for Git outcome metrics").option("--include-merge-commits", "Include merge commits in Git outcome metrics").description("Show efficiency report by correlating usage metrics with local Git outcomes").action(async (granularity, options) => {
+  addShareOption(addSharedOptions(command, { includePerModelColumns: false })).argument("<granularity>", "Granularity: daily | weekly | monthly", parseGranularityArgument).option("--repo-dir <path>", "Path to repository for Git outcome metrics").option("--include-merge-commits", "Include merge commits in Git outcome metrics").description("Show efficiency report by correlating usage metrics with local Git outcomes").action(async (granularity, options) => {
     await runEfficiencyReport(granularity, options);
   });
   return command;
 }
 function createOptimizeCommand() {
   const command = new Command("optimize");
-  addSharedOptions(command, { includePerModelColumns: false }).argument("<granularity>", "Granularity: daily | weekly | monthly", parseGranularityArgument).option(
+  addShareOption(addSharedOptions(command, { includePerModelColumns: false })).argument("<granularity>", "Granularity: daily | weekly | monthly", parseGranularityArgument).option(
     "--candidate-model <name>",
     "Candidate model for counterfactual pricing (repeatable or comma-separated)",
     collectRepeatedOption,