@eat-pray-ai/wingman 0.1.0

package/src/themes/shared/header.ts

@@ -0,0 +1,29 @@
+import type { SectionResult, ShowcaseData } from "../../types.js";
+import { svgText } from "../../svg/components.js";
+import type { RenderContext } from "./context.js";
+import { formatDateRange, separator } from "./helpers.js";
+
+export function renderHeader(ctx: RenderContext, data: ShowcaseData, y: number): SectionResult {
+  const startY = y;
+  const parts: string[] = [];
+
+  parts.push(
+    svgText(ctx.padX, startY + 30, "Wingman Stats", {
+      fill: ctx.colors.blue,
+      size: 16,
+      weight: "bold",
+    }),
+  );
+  parts.push(
+    svgText(ctx.cardWidth - ctx.padX, startY + 30, formatDateRange(data.period.since, data.period.until), {
+      fill: ctx.colors.muted,
+      size: 11,
+      anchor: "end",
+    }),
+  );
+
+  const endY = startY + 48;
+  parts.push(separator(ctx, endY));
+
+  return { svg: parts.join("\n"), height: endY - startY };
+}

package/src/themes/shared/heatmap.ts

@@ -0,0 +1,229 @@
+import type { SectionResult, ShowcaseData } from "../../types.js";
+import { svgRect, svgText } from "../../svg/components.js";
+import { ICONS, svgIcon } from "../../svg/icons.js";
+import type { RenderContext } from "./context.js";
+import { separator, topModels } from "./helpers.js";
+
+export function renderActivityHeatmap(ctx: RenderContext, data: ShowcaseData, y: number): SectionResult {
+  const startY = y;
+  const parts: string[] = [];
+  const agents = data.agents.slice(0, 6);
+  const models = topModels(data, 5);
+
+  // Generate ALL days in the period (since → until), with min 60 days
+  const MIN_HEATMAP_DAYS = 60;
+  const periodStart = new Date(data.period.since);
+  periodStart.setHours(0, 0, 0, 0);
+  const periodEnd = new Date(data.period.until);
+  periodEnd.setHours(23, 59, 59, 999);
+  const periodDays = Math.round((periodEnd.getTime() - periodStart.getTime()) / 86400000) + 1;
+
+  // If period < 60 days, extend start backwards
+  const heatmapStart = new Date(periodStart);
+  if (periodDays < MIN_HEATMAP_DAYS) {
+    heatmapStart.setDate(heatmapStart.getDate() - (MIN_HEATMAP_DAYS - periodDays));
+  }
+  heatmapStart.setHours(0, 0, 0, 0);
+
+  const allDays: string[] = [];
+  const cursor = new Date(heatmapStart);
+  while (cursor <= periodEnd) {
+    const y2 = cursor.getFullYear();
+    const m2 = String(cursor.getMonth() + 1).padStart(2, "0");
+    const d2 = String(cursor.getDate()).padStart(2, "0");
+    allDays.push(`${y2}-${m2}-${d2}`);
+    cursor.setDate(cursor.getDate() + 1);
+  }
+
+  if (allDays.length === 0) return { svg: "", height: 0 };
+
+  parts.push(svgIcon(ctx.padX, startY + 5, ICONS.calendar3, { fill: ctx.colors.secondary, size: 11 }));
+  parts.push(
+    svgText(ctx.padX + 14, startY + 16, "ACTIVITY", { fill: ctx.colors.secondary, size: 11 }),
+  );
+
+  // ── Map every day to (col=week, row=dow) ──
+  const firstDate = new Date(allDays[0] + "T00:00:00");
+  const firstDow = (firstDate.getDay() + 6) % 7; // Mon=0..Sun=6
+
+  const dayGrid = new Map<string, { col: number; row: number }>();
+  let maxCol = 0;
+  for (const day of allDays) {
+    const date = new Date(day + "T00:00:00");
+    const dow = (date.getDay() + 6) % 7;
+    const daysSinceStart = Math.round((date.getTime() - firstDate.getTime()) / 86400000) + firstDow;
+    const col = Math.floor(daysSinceStart / 7);
+    dayGrid.set(day, { col, row: dow });
+    if (col > maxCol) maxCol = col;
+  }
+  const numWeeks = maxCol + 1;
+
+  // ── Flowing 3-column layout: [heatmap] [labels] [ratio] [bar chart] ──
+  const gridX = ctx.padX;
+  const cellGap = 2;
+  const cellW = Math.min(16, Math.max(6, 12));
+  const colStep = cellW + cellGap;
+  const heatmapW = numWeeks * colStep - cellGap;
+
+  const gapLR = 8;
+  // --days 180 produces 181 allDays (inclusive), so use > 182 to cover that
+  const isCompact = periodDays > 182; // N > ~180 days → ratio-only
+  const labelColW = isCompact ? 28 : 28; // "Mon" is ~24px, keep tight
+  const ratioColW = 38; // "18.4%" right-aligned
+  const labelX = gridX + heatmapW + gapLR;
+  const labelCenterX = labelX + labelColW / 2;
+  const ratioEndX = labelX + labelColW + ratioColW;
+
+  // Bar chart: flowing after ratio, dynamic width
+  const barStartX = ratioEndX + 4;
+  const availableBarW = ctx.cardWidth - ctx.padX - barStartX;
+  // 1x base = 80px, max 2x = 160px, capped by available space
+  const baseBarW = 80;
+  const barChartW = isCompact ? 0 : Math.max(baseBarW, Math.min(baseBarW * 2, availableBarW));
+
+  const heatLineH = 10;
+  const heatLineGap = 2;
+  const mainCellH = cellW; // square cells
+  const mainCellGap = 2;
+  const rowStep = mainCellH + mainCellGap;
+
+  // ── Aggregate weekly totals per agent & model ──
+  const agentWeekly = agents.map((agent) => {
+    const weekly = Array<number>(numWeeks).fill(0);
+    for (const [day, tokens] of Object.entries(agent.dailyActivity)) {
+      const pos = dayGrid.get(day);
+      if (pos) weekly[pos.col] += tokens;
+    }
+    return weekly;
+  });
+
+  const modelWeekly = models.map((model) => {
+    const weekly = Array<number>(numWeeks).fill(0);
+    const activity = data.modelDailyActivity[model.id] ?? {};
+    for (const day of allDays) {
+      const pos = dayGrid.get(day);
+      if (pos) weekly[pos.col] += activity[day] ?? 0;
+    }
+    return weekly;
+  });
+
+  // ── Compute DOW totals for bar chart / ratio ──
+  const dowTotals = Array<number>(7).fill(0);
+  for (const [day] of dayGrid) {
+    const date = new Date(day + "T00:00:00");
+    const dow = (date.getDay() + 6) % 7;
+    let total = 0;
+    for (const agent of agents) {
+      total += agent.dailyActivity[day] ?? 0;
+    }
+    dowTotals[dow] += total;
+  }
+  const maxDowTotal = Math.max(...dowTotals, 1);
+  const totalAllDow = dowTotals.reduce((s, v) => s + v, 0) || 1;
+
+  let curY = startY + 28;
+
+  // ── Heat-line row 1: top agent per week (solid fill + people icon) ──
+  parts.push(svgIcon(labelX, curY + 1, ICONS.people, { fill: ctx.colors.muted, size: 9 }));
+  parts.push(
+    svgText(labelX + 12, curY + 9, "Agent", { fill: ctx.colors.muted, size: 9 }),
+  );
+  for (let w = 0; w < numWeeks; w++) {
+    let bestIdx = 0;
+    let bestVal = 0;
+    agentWeekly.forEach((weekly, i) => {
+      if (weekly[w] > bestVal) { bestVal = weekly[w]; bestIdx = i; }
+    });
+    const color = ctx.agentColors[bestIdx % ctx.agentColors.length];
+    const opacity = bestVal === 0 ? 0.08 : 0.85;
+    parts.push(svgRect(gridX + w * colStep, curY, cellW, heatLineH, { fill: color, rx: 2, opacity }));
+  }
+  curY += heatLineH + heatLineGap;
+
+  // ── Heat-line row 2: top model per week (solid fill + stars icon) ──
+  parts.push(svgIcon(labelX, curY + 1, ICONS.stars, { fill: ctx.colors.muted, size: 9 }));
+  parts.push(
+    svgText(labelX + 12, curY + 9, "Model", { fill: ctx.colors.muted, size: 9 }),
+  );
+  for (let w = 0; w < numWeeks; w++) {
+    let bestIdx = 0;
+    let bestVal = 0;
+    modelWeekly.forEach((weekly, i) => {
+      if (weekly[w] > bestVal) { bestVal = weekly[w]; bestIdx = i; }
+    });
+    const color = ctx.modelColors[bestIdx % ctx.modelColors.length];
+    const opacity = bestVal === 0 ? 0.08 : 0.85;
+    parts.push(svgRect(gridX + w * colStep, curY, cellW, heatLineH, { fill: color, rx: 2, opacity }));
+  }
+  curY += heatLineH + 6;
+
+  // ── Main heatmap + labels + DOW bars/ratios (aligned rows) ──
+  const dowLabels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+  const heatmapStartY = curY;
+
+  // Compute daily totals
+  const dayTotals = new Map<string, number>();
+  for (const day of allDays) {
+    let total = 0;
+    for (const agent of agents) {
+      total += agent.dailyActivity[day] ?? 0;
+    }
+    dayTotals.set(day, total);
+  }
+  const maxDayTotal = Math.max(...dayTotals.values(), 1);
+
+  for (let r = 0; r < 7; r++) {
+    const ry = heatmapStartY + r * rowStep;
+    const ratio = (dowTotals[r] / totalAllDow * 100).toFixed(1);
+
+    // Label (center column)
+    parts.push(
+      svgText(labelCenterX, ry + mainCellH / 2 + 3, dowLabels[r], { fill: ctx.colors.muted, size: 9, anchor: "middle" }),
+    );
+
+    // Ratio text (left of bar, right-aligned)
+    parts.push(
+      svgText(ratioEndX, ry + mainCellH / 2 + 3, `${ratio}%`, { fill: ctx.colors.muted, size: 9, anchor: "end" }),
+    );
+
+    if (!isCompact) {
+      // Bar (N <= 180)
+      const barW = (dowTotals[r] / maxDowTotal) * barChartW;
+      if (barW > 0) {
+        parts.push(svgRect(barStartX, ry + 2, barW, mainCellH - 4, { fill: ctx.colors.green, rx: 3, opacity: 0.7 }));
+      }
+    }
+  }
+
+  // Green heatmap cells
+  for (const [day, { col, row }] of dayGrid) {
+    const cx = gridX + col * colStep;
+    const cy = heatmapStartY + row * rowStep;
+    const totalTokens = dayTotals.get(day) ?? 0;
+
+    if (totalTokens === 0) {
+      parts.push(svgRect(cx, cy, cellW, mainCellH, { fill: ctx.colors.separator, rx: 3, opacity: 0.2 }));
+      continue;
+    }
+
+    const strength = 0.15 + (totalTokens / maxDayTotal) * 0.85;
+    parts.push(svgRect(cx, cy, cellW, mainCellH, { fill: ctx.colors.green, rx: 3, opacity: strength }));
+  }
+
+  // ── "less → more" scale ──
+  const gridH = 7 * rowStep - mainCellGap;
+  curY = heatmapStartY + gridH + 10;
+  parts.push(svgText(gridX, curY, "less", { fill: ctx.colors.muted, size: 9 }));
+  const scaleX = gridX + 28;
+  const scaleOpacities = [0.15, 0.35, 0.55, 0.75, 1.0];
+  for (let si = 0; si < scaleOpacities.length; si++) {
+    parts.push(svgRect(scaleX + si * 13, curY - 8, 10, 10, {
+      fill: ctx.colors.green, rx: 2, opacity: scaleOpacities[si],
+    }));
+  }
+  parts.push(svgText(scaleX + scaleOpacities.length * 13 + 4, curY, "more", { fill: ctx.colors.muted, size: 9 }));
+
+  curY += 10;
+  parts.push(separator(ctx, curY));
+  return { svg: parts.join("\n"), height: curY - startY };
+}

package/src/themes/shared/helpers.ts

@@ -0,0 +1,103 @@
+import type { ShowcaseData } from "../../types.js";
+import { formatDate, svgLine } from "../../svg/components.js";
+import type { RenderContext } from "./context.js";
+
+const MIN_CARD_WIDTH = 660;
+const MAX_CARD_WIDTH = 1200;
+
+export function separator(ctx: RenderContext, y: number): string {
+  return svgLine(ctx.padX, y, ctx.cardWidth - ctx.padX, y, { stroke: ctx.colors.separator });
+}
+
+export function shortMonth(d: Date): string {
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  return months[d.getMonth()];
+}
+
+export function formatDateRange(since: Date, until: Date): string {
+  const sameYear = since.getFullYear() === until.getFullYear();
+  const sameMonth = sameYear && since.getMonth() === until.getMonth();
+
+  if (sameMonth) {
+    return `${shortMonth(since)} ${since.getDate()} \u2013 ${until.getDate()}, ${until.getFullYear()}`;
+  }
+  if (sameYear) {
+    return `${shortMonth(since)} ${since.getDate()} \u2013 ${shortMonth(until)} ${until.getDate()}, ${until.getFullYear()}`;
+  }
+  return `${formatDate(since)} \u2013 ${formatDate(until)}`;
+}
+
+export function collectSortedDays(data: ShowcaseData): string[] {
+  const days = new Set<string>();
+  for (const agent of data.agents) {
+    for (const day of Object.keys(agent.dailyActivity)) {
+      days.add(day);
+    }
+  }
+  return [...days].sort();
+}
+
+export function topModels(data: ShowcaseData, limit: number): { id: string; tokens: number; cost: number }[] {
+  const map = new Map<string, { tokens: number; cost: number }>();
+  for (const agent of data.agents) {
+    for (const [modelId, stats] of Object.entries(agent.models)) {
+      const existing = map.get(modelId);
+      if (existing) {
+        existing.tokens += stats.tokens;
+        existing.cost += stats.cost;
+      } else {
+        map.set(modelId, { tokens: stats.tokens, cost: stats.cost });
+      }
+    }
+  }
+  return [...map.entries()]
+    .map(([id, s]) => ({ id, ...s }))
+    .sort((a, b) => b.tokens - a.tokens)
+    .slice(0, limit);
+}
+
+export function computePeriodSize(data: ShowcaseData): { numWeeks: number; numDays: number } {
+  const periodStart = new Date(data.period.since);
+  periodStart.setHours(0, 0, 0, 0);
+  const end = new Date(data.period.until);
+  end.setHours(23, 59, 59, 999);
+  const numDays = Math.round((end.getTime() - periodStart.getTime()) / 86400000) + 1;
+
+  const MIN_HEATMAP_DAYS = 60;
+  const heatmapStart = new Date(periodStart);
+  if (numDays < MIN_HEATMAP_DAYS) {
+    heatmapStart.setDate(heatmapStart.getDate() - (MIN_HEATMAP_DAYS - numDays));
+  }
+  heatmapStart.setHours(0, 0, 0, 0);
+
+  const firstDow = (heatmapStart.getDay() + 6) % 7;
+  const cursor = new Date(heatmapStart);
+  const startTime = cursor.getTime();
+  let maxCol = 0;
+  while (cursor <= end) {
+    const daysSinceStart = Math.round((cursor.getTime() - startTime) / 86400000) + firstDow;
+    maxCol = Math.floor(daysSinceStart / 7);
+    cursor.setDate(cursor.getDate() + 1);
+  }
+  return { numWeeks: maxCol + 1, numDays };
+}
+
+export function computeCardWidth(numWeeks: number, numDays: number): number {
+  const cellW = Math.min(16, Math.max(6, 12));
+  const colStep = cellW + 2;
+  const effectiveWeeks = Math.max(numWeeks, Math.ceil(60 / 7) + 1);
+  const heatmapW = effectiveWeeks * colStep - 2;
+  const labelColW = 28;
+  const ratioColW = 38;
+  const gapLR = 8;
+  const padX = 24;
+
+  if (numDays <= 182) {
+    const minBarW = 80;
+    const barGap = 4;
+    const needed = padX + heatmapW + gapLR + labelColW + ratioColW + barGap + minBarW + padX;
+    return Math.max(MIN_CARD_WIDTH, Math.min(MAX_CARD_WIDTH, needed));
+  }
+  const needed = padX + heatmapW + gapLR + labelColW + ratioColW + padX;
+  return Math.max(MIN_CARD_WIDTH, Math.min(MAX_CARD_WIDTH, needed));
+}

package/src/themes/shared/inventory.ts

@@ -0,0 +1,105 @@
+import type { SectionResult, ShowcaseData } from "../../types.js";
+import { svgPill, svgText } from "../../svg/components.js";
+import { ICONS, svgIcon } from "../../svg/icons.js";
+import type { RenderContext } from "./context.js";
+
+export function renderInventory(ctx: RenderContext, data: ShowcaseData, y: number): SectionResult {
+  const inv = data.inventory;
+  const hasPlugins = inv.plugins.length > 0;
+  const hasMcp = inv.mcpServers.length > 0;
+  const hasSkills = inv.skills.length > 0;
+
+  if (!hasPlugins && !hasMcp && !hasSkills) {
+    return { svg: "", height: 0 };
+  }
+
+  // Build agent → color map (same order as AGENTS section)
+  const agentColorMap = new Map<string, string>();
+  for (let i = 0; i < data.agents.length; i++) {
+    agentColorMap.set(data.agents[i].agent, ctx.agentColors[i % ctx.agentColors.length]);
+  }
+  const toBadges = (sources: string[]) => sources.map(s => agentColorMap.get(s) ?? ctx.colors.muted);
+
+  const parts: string[] = [];
+  const startY = y;
+  parts.push(svgIcon(ctx.padX, startY + 5, ICONS.box, { fill: ctx.colors.secondary, size: 11 }));
+  parts.push(
+    svgText(ctx.padX + 14, startY + 16, "INVENTORY", { fill: ctx.colors.secondary, size: 11 }),
+  );
+
+  const pillGap = 6;
+  const maxX = ctx.cardWidth - ctx.padX;
+  const indent = 20;
+  const rowH = 26;
+  let curY = startY + 28;
+
+  // ── Plugins (hierarchical: plugin → skills, agents, commands) ──
+  for (const plugin of inv.plugins) {
+    const label = plugin.version ? `${plugin.name} v${plugin.version}` : plugin.name;
+    parts.push(svgIcon(ctx.padX, curY + 3, ICONS.puzzle, { fill: ctx.colors.blue, size: 12 }));
+    const pill = svgPill(ctx.padX + 16, curY, label, {
+      fill: "#1f6feb22",
+      textFill: ctx.colors.blue,
+      badges: toBadges(plugin.sources),
+    });
+    parts.push(pill.svg);
+    curY += rowH;
+
+    // Helper: render a labeled row of pills with wrapping
+    const renderPillRow = (label: string, labelW: number, items: string[], prefix = "") => {
+      parts.push(
+        svgText(ctx.padX + indent, curY + 12, label, { fill: ctx.colors.muted, size: 9 }),
+      );
+      let px = ctx.padX + indent + labelW;
+      for (const item of items) {
+        const text = prefix + item;
+        const sp = svgPill(px, curY, text, { fill: ctx.colors.separator, textFill: ctx.colors.secondary });
+        if (px + sp.width > maxX && px > ctx.padX + indent + labelW) {
+          curY += rowH;
+          px = ctx.padX + indent + labelW;
+          const sp2 = svgPill(px, curY, text, { fill: ctx.colors.separator, textFill: ctx.colors.secondary });
+          parts.push(sp2.svg);
+          px += sp2.width + pillGap;
+        } else {
+          parts.push(sp.svg);
+          px += sp.width + pillGap;
+        }
+      }
+      curY += rowH;
+    };
+
+    if (plugin.skills.length > 0) renderPillRow("skills", 36, plugin.skills);
+    if (plugin.agents.length > 0) renderPillRow("agents", 40, plugin.agents);
+    if (plugin.commands.length > 0) renderPillRow("cmds", 32, plugin.commands, "/");
+  }
+
+  // Helper: render a section of InventoryItems with badges inside pills
+  const renderItemSection = (
+    iconPath: string, iconColor: string, title: string, items: typeof inv.mcpServers,
+  ) => {
+    parts.push(svgIcon(ctx.padX, curY + 3, iconPath, { fill: iconColor, size: 12 }));
+    parts.push(svgText(ctx.padX + 16, curY + 12, title, { fill: ctx.colors.secondary, size: 10 }));
+    curY += 18;
+    let px = ctx.padX + indent;
+    for (const item of items) {
+      const badges = toBadges(item.sources);
+      const sp = svgPill(px, curY, item.name, { fill: ctx.colors.separator, textFill: ctx.colors.secondary, badges });
+      if (px + sp.width > maxX && px > ctx.padX + indent) {
+        curY += rowH;
+        px = ctx.padX + indent;
+        const sp2 = svgPill(px, curY, item.name, { fill: ctx.colors.separator, textFill: ctx.colors.secondary, badges });
+        parts.push(sp2.svg);
+        px += sp2.width + pillGap;
+      } else {
+        parts.push(sp.svg);
+        px += sp.width + pillGap;
+      }
+    }
+    curY += rowH;
+  };
+
+  if (hasMcp) renderItemSection(ICONS.tools, ctx.colors.green, "MCP Servers", inv.mcpServers);
+  if (hasSkills) renderItemSection(ICONS.hexagon, ctx.colors.purple, "Skills", inv.skills);
+
+  return { svg: parts.join("\n"), height: curY - startY };
+}

package/src/themes/shared/legend.ts

@@ -0,0 +1,91 @@
+import type { SectionResult, ShowcaseData } from "../../types.js";
+import { escapeXml, svgCircle, svgRect, svgText } from "../../svg/components.js";
+import type { RenderContext } from "./context.js";
+import { separator, topModels } from "./helpers.js";
+
+export function renderLegend(ctx: RenderContext, data: ShowcaseData, y: number): SectionResult {
+  const startY = y + 8;
+  const parts: string[] = [];
+  const agents = data.agents.slice(0, 6);
+  const models = topModels(data, 5);
+
+  const agentRowH = 22;
+  const modelRowH = 22;
+  const agentCount = agents.length;
+  const modelCount = models.length;
+
+  const squareX = 200;
+  const circleX = ctx.cardWidth - 200;
+  const agentTextX = squareX - 10;
+  const modelTextX = circleX + 14;
+
+  const totalH = Math.max(agentCount, modelCount) * agentRowH;
+  const agentStartY = startY + (totalH - agentCount * agentRowH) / 2;
+  const modelStartY = startY + (totalH - modelCount * modelRowH) / 2;
+
+  const modelYMap = new Map<string, number>();
+  models.forEach((m, i) => {
+    modelYMap.set(m.id, modelStartY + i * modelRowH + modelRowH / 2);
+  });
+
+  let maxPairTokens = 1;
+  for (const agent of agents) {
+    for (const [, stats] of Object.entries(agent.models)) {
+      if (stats.tokens > maxPairTokens) maxPairTokens = stats.tokens;
+    }
+  }
+
+  // Flow lines (behind labels)
+  for (let ai = 0; ai < agents.length; ai++) {
+    const agent = agents[ai];
+    const agentColor = ctx.agentColors[ai % ctx.agentColors.length];
+    const ay = agentStartY + ai * agentRowH + agentRowH / 2;
+    const sx = squareX + 12;
+
+    for (const [modelId, stats] of Object.entries(agent.models)) {
+      const my = modelYMap.get(modelId);
+      if (my === undefined) continue;
+
+      const lineW = Math.max(1, (stats.tokens / maxPairTokens) * 8);
+      const cx = circleX - 6;
+      const midX = (sx + cx) / 2;
+      parts.push(
+        `<path d="M ${sx} ${ay} C ${midX} ${ay}, ${midX} ${my}, ${cx} ${my}" ` +
+        `fill="none" stroke="${agentColor}" stroke-width="${lineW.toFixed(1)}" opacity="0.35"/>`,
+      );
+    }
+  }
+
+  // Agent labels + squares
+  agents.forEach((agent, i) => {
+    const cy = agentStartY + i * agentRowH + agentRowH / 2;
+    const color = ctx.agentColors[i % ctx.agentColors.length];
+    parts.push(svgRect(squareX, cy - 5, 10, 10, { fill: color, rx: 2 }));
+    parts.push(
+      svgText(agentTextX, cy + 4, escapeXml(agent.displayName), {
+        fill: ctx.colors.primary,
+        size: 11,
+        anchor: "end",
+      }),
+    );
+  });
+
+  // Model labels + circles
+  models.forEach((model, i) => {
+    const cy = modelStartY + i * modelRowH + modelRowH / 2;
+    const color = ctx.modelColors[i % ctx.modelColors.length];
+    const truncId = model.id.length > 24 ? model.id.slice(0, 24) + "\u2026" : model.id;
+    parts.push(svgCircle(circleX, cy, 5, { fill: color }));
+    parts.push(
+      svgText(modelTextX, cy + 4, truncId, {
+        fill: ctx.colors.primary,
+        size: 11,
+      }),
+    );
+  });
+
+  const endY = startY + totalH + 8;
+  parts.push(separator(ctx, endY));
+
+  return { svg: parts.join("\n"), height: endY - y };
+}

package/src/themes/shared/sections.ts

@@ -0,0 +1,20 @@
+import type { SectionEntry } from "./context.js";
+import { renderHeader } from "./header.js";
+import { renderTopStats } from "./stats.js";
+import { renderLegend } from "./legend.js";
+import { renderCharts } from "./charts.js";
+import { renderActivityHeatmap } from "./heatmap.js";
+import { renderInventory } from "./inventory.js";
+import { renderFooter } from "./footer.js";
+
+export const ALL_SECTIONS: SectionEntry[] = [
+  { name: "header", render: renderHeader },
+  { name: "stats", render: renderTopStats },
+  { name: "legend", render: renderLegend },
+  { name: "charts", render: renderCharts },
+  { name: "heatmap", render: renderActivityHeatmap },
+  { name: "inventory", render: renderInventory },
+  { name: "footer", render: renderFooter },
+];
+
+export const SECTION_NAMES = ALL_SECTIONS.map((s) => s.name);

package/src/themes/shared/stats.ts

@@ -0,0 +1,60 @@
+import type { SectionResult, ShowcaseData } from "../../types.js";
+import { formatCost, formatNumber, svgText } from "../../svg/components.js";
+import { ICONS, svgIcon } from "../../svg/icons.js";
+import type { RenderContext } from "./context.js";
+import { separator } from "./helpers.js";
+
+export function renderTopStats(ctx: RenderContext, data: ShowcaseData, y: number): SectionResult {
+  const startY = y;
+  const parts: string[] = [];
+  const colWidth = ctx.contentWidth / 3;
+
+  const col1x = ctx.padX;
+  parts.push(svgIcon(col1x, startY + 11, ICONS.hash, { fill: ctx.colors.secondary, size: 11 }));
+  parts.push(
+    svgText(col1x + 14, startY + 22, "TOTAL TOKENS", { fill: ctx.colors.secondary, size: 11 }),
+  );
+  parts.push(
+    svgText(col1x, startY + 52, formatNumber(data.totals.tokens), {
+      fill: ctx.colors.primary,
+      size: 28,
+      weight: "bold",
+    }),
+  );
+
+  const breakdown = `${formatNumber(data.totals.inputTokens)} in / ${formatNumber(data.totals.outputTokens)} out / ${formatNumber(data.totals.cacheReadTokens)} read / ${formatNumber(data.totals.cacheWriteTokens)} write`;
+  parts.push(
+    svgText(col1x, startY + 66, breakdown, { fill: ctx.colors.secondary, size: 10 }),
+  );
+
+  const col2x = ctx.padX + colWidth;
+  parts.push(svgIcon(col2x, startY + 11, ICONS.currencyDollar, { fill: ctx.colors.secondary, size: 11 }));
+  parts.push(
+    svgText(col2x + 14, startY + 22, "TOTAL COST", { fill: ctx.colors.secondary, size: 11 }),
+  );
+  parts.push(
+    svgText(col2x, startY + 52, formatCost(data.totals.cost), {
+      fill: ctx.colors.green,
+      size: 28,
+      weight: "bold",
+    }),
+  );
+
+  const col3x = ctx.padX + colWidth * 2;
+  parts.push(svgIcon(col3x, startY + 11, ICONS.terminal, { fill: ctx.colors.secondary, size: 11 }));
+  parts.push(
+    svgText(col3x + 14, startY + 22, "SESSIONS", { fill: ctx.colors.secondary, size: 11 }),
+  );
+  parts.push(
+    svgText(col3x, startY + 52, formatNumber(data.totals.sessions), {
+      fill: ctx.colors.purple,
+      size: 28,
+      weight: "bold",
+    }),
+  );
+
+  const endY = startY + 72;
+  parts.push(separator(ctx, endY));
+
+  return { svg: parts.join("\n"), height: endY - startY };
+}