tledger 0.2.0 → 0.3.0

package/bin/token-ledger-trend-image.mjs

@@ -2,9 +2,15 @@ import { Buffer } from "node:buffer";
 
 import sharp from "sharp";
 
-import { buildBurnDayBins, buildUsageTrend } from "./token-ledger-trend.mjs";
-import { creditsForUsage } from "./token-ledger-rates.mjs";
+import {
+  buildBurnDayBins,
+  buildUsageTrend,
+  weeklyQuotaObservations,
+} from "./token-ledger-trend.mjs";
+import { FAST_MODE_MULTIPLIER } from "./token-ledger-rates.mjs";
 import { buildActualTokenBins } from "./token-ledger-trend-terminal.mjs";
+import { buildCacheReportData } from "./token-ledger-cache-image.mjs";
+import { usageBucketsInRange } from "../lib/token-ledger-usage.mjs";
 
 const MODEL_ORDER = [
   "Luna",
@@ -38,20 +44,38 @@ const COLORS = {
   background: "#0e1420",
   panel: "#151d2c",
   panelBorder: "#273246",
+  meterPanel: "#1b1712",
+  meterPanelBorder: "rgba(246,183,60,.4)",
   ink: "#f2f5fa",
   secondary: "#aeb8c9",
   muted: "#77839a",
   grid: "#1c2534",
   baseline: "#33405a",
+  rule: "rgba(255,255,255,.1)",
+  track: "rgba(255,255,255,.09)",
+  projectTrack: "rgba(255,255,255,.07)",
   line: "#f6b73c",
+  meterAxis: "#cf9a37",
   chipFill: "#151d2c",
   leftAxis: "#7ea2f0",
+  deltaUp: "#7fb37a",
+  deltaUpFill: "rgba(127,179,122,.14)",
+  deltaDown: "#e08a86",
+  deltaDownFill: "rgba(217,83,79,.16)",
+  remainderBar: "#475569",
+  onFill: "rgba(255,255,255,.82)",
+  cached: "#2ec4a1",
+  uncached: "#d88362",
+  weighted: "#c7d2e8",
+  cacheTrack: "#202a3a",
 };
 
 const FONT_FAMILY = "system-ui, -apple-system, 'Segoe UI', sans-serif";
+const MONO_FAMILY = "ui-monospace, Menlo, monospace";
 const FAST_MODE_LABEL_COLOR = "#a78bfa";
+const MIN_BAR_WIDTH = 26;
 
-function escapeXml(value) {
+export function escapeXml(value) {
   return String(value)
     .replaceAll("&", "&")
     .replaceAll("<", "&lt;")
@@ -60,25 +84,41 @@ function escapeXml(value) {
     .replaceAll("'", "&apos;");
 }
 
-function compact(value, digits = 2) {
+export function compact(value, digits = 2) {
   if (!Number.isFinite(value)) return "—";
   const absolute = Math.abs(value);
-  for (const [divisor, suffix] of [
+  const units = [
     [1_000_000_000, "B"],
     [1_000_000, "M"],
     [1_000, "K"],
-  ]) {
-    if (absolute >= divisor) {
-      const scaled = value / divisor;
-      const precision = scaled >= 100 ? 0 : scaled >= 10 ? 1 : digits;
-      return `${scaled.toFixed(precision)}${suffix}`;
+  ];
+  for (let index = 0; index < units.length; index += 1) {
+    const [divisor, suffix] = units[index];
+    if (absolute < divisor) continue;
+    const scaled = value / divisor;
+    const magnitude = Math.abs(scaled);
+    const precision = magnitude >= 100 ? 0 : magnitude >= 10 ? 1 : digits;
+    // Values that round to 1000 of a unit belong to the next unit up
+    // (999,999 → 1.00M, not 1000K).
+    if (index > 0 && Number(magnitude.toFixed(precision)) >= 1_000) {
+      return compact(Math.sign(value) * divisor * 1_000, digits);
     }
+    return `${scaled.toFixed(precision)}${suffix}`;
   }
   return Math.round(value).toLocaleString("en-US");
 }
 
 function percent(value) {
-  return `${Number(value).toFixed(value >= 10 ? 1 : 2)}%`;
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return "—";
+  if (numeric > 0 && numeric < 0.1) return "<0.1%";
+  return `${numeric.toFixed(1)}%`;
+}
+
+function meterLabel(value) {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return "—";
+  return `${numeric.toFixed(Number.isInteger(numeric) ? 0 : 1)}%`;
 }
 
 function niceCeiling(value) {
@@ -119,50 +159,6 @@ function sortedModelEntries(values) {
     .sort(([left], [right]) => modelSort(left, right));
 }
 
-function eventRateCardCredits(event) {
-  const computed = creditsForUsage(event.model, event);
-  if (Number.isFinite(computed) && computed >= 0) {
-    return event.serviceTier === "priority" ? computed * 1.5 : computed;
-  }
-  const stored = Number(event.rateCardCredits);
-  if (
-    event.rateCardCredits !== null &&
-    event.rateCardCredits !== undefined &&
-    Number.isFinite(stored) &&
-    stored >= 0
-  ) {
-    return stored;
-  }
-  return null;
-}
-
-function rateCardSummary(snapshot, bounds) {
-  const startMs = bounds.start.getTime();
-  const endMs = bounds.end.getTime();
-  let totalTokens = 0;
-  let ratedTokens = 0;
-  let credits = 0;
-  for (const event of snapshot.events ?? []) {
-    const timestampMs = new Date(event.timestamp).getTime();
-    if (!Number.isFinite(timestampMs) || timestampMs < startMs || timestampMs >= endMs) {
-      continue;
-    }
-    const tokens = Math.max(0, Number(event.totalTokens) || 0);
-    totalTokens += tokens;
-    const eventCredits = eventRateCardCredits(event);
-    if (Number.isFinite(eventCredits) && eventCredits >= 0) {
-      ratedTokens += tokens;
-      credits += eventCredits;
-    }
-  }
-  return {
-    totalTokens,
-    ratedTokens,
-    credits,
-    coveragePercent: totalTokens > 0 ? (ratedTokens / totalTokens) * 100 : 0,
-  };
-}
-
 function dateParts(dateString) {
   return dateString.split("-").map(Number);
 }
@@ -175,7 +171,7 @@ function dateStringFromParts(year, month, day) {
     .join("-");
 }
 
-function shiftCalendarDate(dateString, amount) {
+export function shiftCalendarDate(dateString, amount) {
   const [year, month, day] = dateParts(dateString);
   const date = new Date(Date.UTC(year, month - 1, day + amount));
   return dateStringFromParts(
@@ -220,12 +216,12 @@ function localWeekdayLabel(dateString, timeZone) {
   }).format(zonedMidnight(dateString, timeZone));
 }
 
-function localDateTimeLabel(timestampMs, timeZone) {
-  if (!Number.isFinite(timestampMs)) return "unknown time";
+function timestampDateLabel(timestampMs, timeZone) {
+  if (!Number.isFinite(timestampMs)) return "unknown";
   return new Intl.DateTimeFormat("en-US", {
     timeZone,
-    dateStyle: "medium",
-    timeStyle: "short",
+    month: "short",
+    day: "numeric",
   }).format(new Date(timestampMs));
 }
 
@@ -236,7 +232,46 @@ function binDateLabel(bin, timeZone) {
   return `${start}–${localDateLabel(lastDate, timeZone).replace(/^[A-Za-z]+ /, "")}`;
 }
 
-function svgText({
+// Rough sans-serif advance widths in em units, for placing inline runs
+// (value + chip, legend items, pace rows). SVG has no flow layout.
+export function textWidth(text, size, weight = 400) {
+  let units = 0;
+  for (const character of String(text)) {
+    if (/[il.,:;'|!]/.test(character)) units += 0.3;
+    else if (/[Ijtfr\-()[\] ]/.test(character)) units += 0.37;
+    else if (/[mwMW@%]/.test(character)) units += 0.92;
+    else if (/[A-Z]/.test(character)) units += 0.7;
+    else if (/[0-9+±×−]/.test(character)) units += 0.58;
+    else units += 0.55;
+  }
+  return units * size * (weight >= 700 ? 1.05 : 1);
+}
+
+export function truncateText(text, maxWidth, size, weight = 400) {
+  let value = String(text ?? "").replace(/\.{3,}/g, "…");
+  if (!(maxWidth > 0) || textWidth(value, size, weight) <= maxWidth) return value;
+  if (value.includes("…")) {
+    const leading = `${value.split("…", 1)[0].trimEnd()}…`;
+    if (textWidth(leading, size, weight) <= maxWidth) return leading;
+    value = leading;
+  }
+  const ellipsis = "…";
+  const ellipsisWidth = textWidth(ellipsis, size, weight);
+  if (ellipsisWidth >= maxWidth) return ellipsis;
+
+  const characters = [...value];
+  let low = 0;
+  let high = characters.length;
+  while (low < high) {
+    const middle = Math.ceil((low + high) / 2);
+    const candidate = `${characters.slice(0, middle).join("")}${ellipsis}`;
+    if (textWidth(candidate, size, weight) <= maxWidth) low = middle;
+    else high = middle - 1;
+  }
+  return `${characters.slice(0, low).join("").trimEnd()}${ellipsis}`;
+}
+
+export function svgText({
   x,
   y,
   value,
@@ -246,75 +281,72 @@ function svgText({
   anchor = "start",
   spacing = null,
   opacity = null,
+  mono = false,
 }) {
   const spacingAttr = spacing ? ` letter-spacing="${spacing}"` : "";
   const opacityAttr = opacity !== null ? ` opacity="${opacity}"` : "";
-  return `<text x="${x}" y="${y}" fill="${fill}" font-family="${FONT_FAMILY}" font-size="${size}px" font-weight="${weight}" text-anchor="${anchor}"${spacingAttr}${opacityAttr}>${escapeXml(value)}</text>`;
-}
-
-// Approximate text fitting for card and footer copy: shrink a little, then
-// ellipsize, so text never crosses its container border.
-function fitLine(text, size, maxWidth, minSize = 10) {
-  const widthOf = (value, fontSize) => value.length * fontSize * 0.62;
-  let fitted = size;
-  while (widthOf(text, fitted) > maxWidth && fitted > minSize) fitted -= 0.5;
-  if (widthOf(text, fitted) <= maxWidth) return { text, size: fitted };
-  const capacity = Math.max(1, Math.floor(maxWidth / (fitted * 0.62)) - 1);
-  return { text: `${text.slice(0, capacity)}…`, size: fitted };
-}
-
-function linePath(points) {
-  return points
-    .map((point, index) => `${index === 0 ? "M" : "L"}${point.x.toFixed(2)},${point.y.toFixed(2)}`)
-    .join(" ");
+  const family = mono ? MONO_FAMILY : FONT_FAMILY;
+  return `<text x="${x}" y="${y}" fill="${fill}" font-family="${family}" font-size="${size}px" font-weight="${weight}" text-anchor="${anchor}"${spacingAttr}${opacityAttr}>${escapeXml(value)}</text>`;
 }
 
-function roundedTopRect(x, y, width, height, radius, fill) {
-  const r = Math.min(radius, width / 2, height);
-  return `<path d="M${x.toFixed(2)},${(y + height).toFixed(2)} L${x.toFixed(2)},${(y + r).toFixed(2)} Q${x.toFixed(2)},${y.toFixed(2)} ${(x + r).toFixed(2)},${y.toFixed(2)} L${(x + width - r).toFixed(2)},${y.toFixed(2)} Q${(x + width).toFixed(2)},${y.toFixed(2)} ${(x + width).toFixed(2)},${(y + r).toFixed(2)} L${(x + width).toFixed(2)},${(y + height).toFixed(2)} Z" fill="${fill}"/>`;
-}
-
-function xPosition(timestampMs, bounds, plotLeft, plotWidth) {
-  const span = bounds.end.getTime() - bounds.start.getTime();
-  const ratio = span > 0
-    ? (timestampMs - bounds.start.getTime()) / span
-    : 0;
-  return plotLeft + Math.max(0, Math.min(1, ratio)) * plotWidth;
+export function svgRect(x, y, width, height, attrs = {}) {
+  const pieces = [
+    `x="${Number(x).toFixed(2)}"`,
+    `y="${Number(y).toFixed(2)}"`,
+    `width="${Math.max(0, Number(width)).toFixed(2)}"`,
+    `height="${Math.max(0, Number(height)).toFixed(2)}"`,
+  ];
+  for (const [key, value] of Object.entries(attrs)) {
+    if (value === null || value === undefined) continue;
+    pieces.push(`${key}="${value}"`);
+  }
+  return `<rect ${pieces.join(" ")}/>`;
 }
 
-function buildQuotaLine(trend, bounds, plotLeft, plotWidth, chartTop, chartHeight) {
-  const points = (trend.points ?? [])
-    .filter((point) => point.timestampMs >= bounds.start.getTime() && point.timestampMs <= bounds.end.getTime())
-    .sort((left, right) => left.timestampMs - right.timestampMs);
-  if (!points.length) return { points: [], resetPoints: [], yForRemaining: null };
-
-  const resetPoints = [];
-  const linePoints = [];
-  const resets = [...(trend.resets ?? [])].sort((left, right) => left.timestampMs - right.timestampMs);
-  let resetIndex = 0;
-
-  const yForRemaining = (value) =>
-    chartTop + chartHeight - (Math.max(0, Math.min(100, value)) / 100) * chartHeight;
-  for (const point of points) {
-    while (resetIndex < resets.length && resets[resetIndex].timestampMs <= point.timestampMs) {
-      const reset = resets[resetIndex];
-      if (reset.timestampMs >= bounds.start.getTime() && linePoints.length) {
-        const x = xPosition(reset.timestampMs, bounds, plotLeft, plotWidth);
-        const previous = linePoints.at(-1);
-        linePoints.push({ x, y: previous.y });
-        linePoints.push({ x, y: yForRemaining(100), reset: true });
-        resetPoints.push({ x, timestampMs: reset.timestampMs, kind: reset.kind });
-      }
-      resetIndex += 1;
+// Fritsch–Carlson monotone cubic through the points; keeps the meter line
+// smooth without overshooting between observations.
+function monotonePath(points) {
+  const count = points.length;
+  if (count < 2) return "";
+  const round = (value) => Math.round(value * 100) / 100;
+  const dx = [];
+  const slope = [];
+  for (let index = 0; index < count - 1; index += 1) {
+    dx[index] = Math.max(0.01, points[index + 1].x - points[index].x);
+    slope[index] = (points[index + 1].y - points[index].y) / dx[index];
+  }
+  const tangent = [slope[0]];
+  for (let index = 1; index < count - 1; index += 1) {
+    tangent.push(
+      slope[index - 1] * slope[index] <= 0
+        ? 0
+        : (slope[index - 1] + slope[index]) / 2,
+    );
+  }
+  tangent.push(slope[count - 2]);
+  for (let index = 0; index < count - 1; index += 1) {
+    if (slope[index] === 0) {
+      tangent[index] = 0;
+      tangent[index + 1] = 0;
+      continue;
     }
-    linePoints.push({
-      x: xPosition(point.timestampMs, bounds, plotLeft, plotWidth),
-      y: yForRemaining(point.remainingPercent),
-      timestampMs: point.timestampMs,
-      remainingPercent: point.remainingPercent,
-    });
+    const alpha = tangent[index] / slope[index];
+    const beta = tangent[index + 1] / slope[index];
+    const magnitude = alpha * alpha + beta * beta;
+    if (magnitude > 9) {
+      const tau = 3 / Math.sqrt(magnitude);
+      tangent[index] = tau * alpha * slope[index];
+      tangent[index + 1] = tau * beta * slope[index];
+    }
+  }
+  let path = `M ${round(points[0].x)} ${round(points[0].y)}`;
+  for (let index = 0; index < count - 1; index += 1) {
+    const h = dx[index];
+    path += ` C ${round(points[index].x + h / 3)} ${round(points[index].y + (tangent[index] * h) / 3)}` +
+      ` ${round(points[index + 1].x - h / 3)} ${round(points[index + 1].y - (tangent[index + 1] * h) / 3)}` +
+      ` ${round(points[index + 1].x)} ${round(points[index + 1].y)}`;
   }
-  return { points: linePoints, resetPoints, yForRemaining };
+  return path;
 }
 
 function labelEvery(binCount) {
@@ -323,51 +355,27 @@ function labelEvery(binCount) {
   return 3;
 }
 
-function chip(x, y, value, { anchor = "middle", small = false } = {}) {
-  const textSize = small ? 10.5 : 12;
-  const paddingX = small ? 7 : 9;
-  const chipHeight = small ? 19 : 23;
-  const chipWidth = String(value).length * (textSize * 0.62) + paddingX * 2;
-  const left = anchor === "middle" ? x - chipWidth / 2 : anchor === "end" ? x - chipWidth : x;
-  return [
-    `<rect x="${left.toFixed(2)}" y="${(y - chipHeight / 2).toFixed(2)}" width="${chipWidth.toFixed(2)}" height="${chipHeight}" rx="6" fill="${COLORS.chipFill}" stroke="${COLORS.line}" stroke-width="1.25"/>`,
-    svgText({
-      x: left + chipWidth / 2,
-      y: y + textSize * 0.36,
-      value,
-      fill: COLORS.line,
-      size: textSize,
-      weight: 650,
-      anchor: "middle",
-    }),
-  ].join("\n");
-}
-
-function priorRangeTotals(snapshot, bounds, days) {
-  const startMs = zonedMidnight(
-    shiftCalendarDate(bounds.startDateString, -days),
-    bounds.timeZone,
-  ).getTime();
-  const endMs = bounds.start.getTime();
+function fallbackProjectRows(snapshot, bounds) {
+  const startMs = bounds.start.getTime();
+  const endMs = bounds.end.getTime();
   const totals = new Map();
-  for (const event of snapshot.events ?? []) {
+  for (const event of usageBucketsInRange(snapshot, startMs, endMs)) {
     const timestampMs = new Date(event.timestamp).getTime();
-    if (!Number.isFinite(timestampMs) || timestampMs < startMs || timestampMs >= endMs) {
-      continue;
-    }
+    if (!Number.isFinite(timestampMs)) continue;
     const tokens = Math.max(0, Number(event.totalTokens) || 0);
     if (!(tokens > 0)) continue;
-    const model = (() => {
-      const value = String(event.model || "unknown").trim().toLowerCase();
-      for (const label of MODEL_ORDER) {
-        if (label === "Other" || label === "Unknown" || label === "Unattributed") continue;
-      }
-      return value;
-    })();
-    void model;
-    totals.set(event.model, tokens);
+    const project = String(event.project || "Unlabelled activity")
+      .replace(/[\t\r\n]+/g, " ")
+      .trim() || "Unlabelled activity";
+    totals.set(project, (totals.get(project) ?? 0) + tokens);
   }
-  return { startMs, endMs };
+  return [...totals.entries()]
+    .map(([project, totalTokens]) => ({
+      project,
+      displayProject: project,
+      totalTokens,
+    }))
+    .sort((left, right) => right.totalTokens - left.totalTokens);
 }
 
 export function renderTrendImage({
@@ -376,14 +384,22 @@ export function renderTrendImage({
   trend = buildUsageTrend(snapshot, bounds),
   days = bounds.rangeDays ?? 7,
   options = {},
+  projectRows = null,
 }) {
   const width = Math.max(900, Math.min(2_400, Number(options.imageWidth) || 1_280));
   const outer = 32;
-  const margin = { left: 84, right: 96 };
-  const plotLeft = margin.left;
-  const plotWidth = width - margin.left - margin.right;
+  const plotLeft = 96;
+  const plotRight = width - 96;
+  const plotWidth = plotRight - plotLeft;
+  const contentRight = width - outer;
+  const contentWidth = width - outer * 2;
 
-  const actual = buildActualTokenBins(snapshot, bounds, days, plotWidth);
+  // Keep daily bars while they fit at the minimum readable width; aggregate
+  // longer windows into multi-day columns so bars and labels never overlap.
+  const actual = buildActualTokenBins(snapshot, bounds, days, plotWidth, {
+    minBinWidth: MIN_BAR_WIDTH,
+    preferDaily: true,
+  });
   const burn = buildBurnDayBins(trend, bounds, { days, binSize: actual.binSize });
   const meterUsable = Boolean(trend.available && burn.totalPercent > 0);
   const percentMode = Boolean(options.drain) && meterUsable;
@@ -395,547 +411,1474 @@ export function renderTrendImage({
   );
   const hasLine = Boolean(trend.available && (trend.points ?? []).length > 1);
 
-  // Range totals for the stat cards.
   const totalTokens = [...actual.totals.values()].reduce((sum, value) => sum + value, 0);
+  const fastTokens = [...(actual.fastTotals?.values() ?? [])].reduce(
+    (sum, value) => sum + value,
+    0,
+  );
+  const hasFast = !percentMode && fastTokens > 0;
+
   const modelCards = [...actual.totals.entries()]
     .filter(([, value]) => value > 0 && totalTokens > 0 && value / totalTokens >= 0.01)
     .sort((left, right) => right[1] - left[1])
     .slice(0, 3)
     .map(([model, value]) => ({ model, tokens: value }));
-  const fastTokens = [...(actual.fastTotals?.values() ?? [])].reduce((sum, value) => sum + value, 0);
-  const hasFast = !percentMode && fastTokens > 0;
 
-  // Prior-period per-model totals for the delta line.
-  const prior = priorRangeTotals(snapshot, bounds, days);
-  const priorTotals = new Map();
-  for (const event of snapshot.events ?? []) {
-    const timestampMs = new Date(event.timestamp).getTime();
-    if (!Number.isFinite(timestampMs) || timestampMs < prior.startMs || timestampMs >= prior.endMs) {
-      continue;
-    }
-    const tokens = Math.max(0, Number(event.totalTokens) || 0);
-    if (!(tokens > 0)) continue;
-    const label = MODEL_ORDER.find((candidate) =>
-      String(event.model || "").toLowerCase().includes(candidate.toLowerCase().split(" ")[0]),
-    );
-    void label;
-  }
-  // Reuse the bin labeler for prior-period totals so model naming matches.
+  // Prior-period per-model totals feed the delta chips.
   const priorBounds = {
     ...bounds,
     startDateString: shiftCalendarDate(bounds.startDateString, -days),
     endDateString: shiftCalendarDate(bounds.endDateString, -days),
-    start: new Date(prior.startMs),
-    end: new Date(prior.endMs),
+    start: zonedMidnight(
+      shiftCalendarDate(bounds.startDateString, -days),
+      bounds.timeZone,
+    ),
+    end: bounds.start,
   };
-  const priorActual = buildActualTokenBins(snapshot, priorBounds, days, plotWidth);
-  for (const [model, value] of priorActual.totals) priorTotals.set(model, value);
+  const priorTotals = buildActualTokenBins(snapshot, priorBounds, days, plotWidth, {
+    minBinWidth: MIN_BAR_WIDTH,
+    preferDaily: true,
+  }).totals;
 
   const latestQuotaPoint = [...(trend.points ?? [])]
     .filter((point) => point.timestampMs <= bounds.end.getTime())
     .at(-1);
-  const rateCard = rateCardSummary(snapshot, bounds);
-  const expiries = (trend.resets ?? []).filter((reset) => reset.kind === "weekly-expiry").length;
-  const restarts = (trend.resets ?? []).filter((reset) => reset.kind !== "weekly-expiry").length;
+  const latestQuotaReadMs = Number.isFinite(trend.observedThroughMs)
+    ? trend.observedThroughMs
+    : null;
+  const resetsInRange = trend.resets ?? [];
+  const weeklyObservationsAll = weeklyQuotaObservations(snapshot).filter(
+    (observation) => observation.timestampMs < bounds.end.getTime(),
+  );
+  const latestResetsAtSec = weeklyObservationsAll.at(-1)?.resetsAt ?? null;
+
+  const rows = projectRows ?? fallbackProjectRows(snapshot, bounds);
+
+  // Cache bins share the trend chart's bin size so both charts' columns stay
+  // vertically aligned.
+  const cacheData = buildCacheReportData(
+    snapshot,
+    bounds,
+    days,
+    plotWidth,
+    actual.binSize,
+  );
+  const hasCache = cacheData.inputTokens > 0;
+  const cacheModelRows = (() => {
+    if (!hasCache) return [];
+    const models = cacheData.models;
+    if (models.length <= 4) return models;
+    const rest = models.slice(3);
+    const restInput = rest.reduce((sum, model) => sum + model.inputTokens, 0);
+    const restCached = rest.reduce(
+      (sum, model) => sum + model.cachedInputTokens,
+      0,
+    );
+    return [...models.slice(0, 3), {
+      model: `${rest.length} other models`,
+      inputTokens: restInput,
+      cachedInputTokens: restCached,
+      rate: restInput > 0 ? (restCached / restInput) * 100 : null,
+      muted: true,
+    }];
+  })();
+
+  // ---- Pace & runway (computed early: its height shapes the top row) ----
+  const generatedAtMs = new Date(snapshot.generatedAt).getTime();
+  const paceLines = [];
+  let paceNote = null;
+  let paceRunwayBar = null;
+  const dailyAverage = totalTokens / Math.max(1, days);
+  if (hasLine && meterUsable && latestQuotaPoint && totalTokens > 0) {
+    const tokensPerPercent = totalTokens / burn.totalPercent;
+    const burnPerDay = dailyAverage / tokensPerPercent;
+    const runwayDays = burnPerDay > 0
+      ? latestQuotaPoint.remainingPercent / burnPerDay
+      : null;
+    if (runwayDays !== null) {
+      paceLines.push({
+        value: `${runwayDays.toFixed(1)} days`,
+        size: 23,
+        weight: 800,
+        color: COLORS.line,
+        detail: "of meter left at this pace",
+      });
+    }
+    paceLines.push({
+      value: `${compact(dailyAverage)} / day`,
+      size: 17,
+      weight: 700,
+      color: COLORS.ink,
+      detail: `${days}-day average · ${burnPerDay.toFixed(1)}% of meter`,
+    });
+    paceLines.push({
+      value: `${compact(tokensPerPercent)} / 1%`,
+      size: 17,
+      weight: 700,
+      color: COLORS.ink,
+      detail: "tokens per meter point",
+    });
+    const daysToReset = latestResetsAtSec !== null && Number.isFinite(generatedAtMs)
+      ? (latestResetsAtSec * 1_000 - generatedAtMs) / 86_400_000
+      : null;
+    if (runwayDays !== null && daysToReset !== null && daysToReset > 0) {
+      const resetIn = Math.max(1, Math.round(daysToReset));
+      const resetInLabel = `${resetIn} ${resetIn === 1 ? "day" : "days"}`;
+      paceRunwayBar = { runwayDays, daysToReset, resetInLabel };
+      const gap = runwayDays - daysToReset;
+      if (Math.abs(gap) <= 1.5) {
+        paceNote = `Next weekly reset in ${resetInLabel}. Current pace lands within ~${Math.max(1, Math.round(Math.abs(gap)))} day of it.`;
+      } else if (gap > 0) {
+        paceNote = `Next weekly reset in ${resetInLabel}. Current pace leaves ~${Math.round(gap)} days of headroom past it.`;
+      } else {
+        paceNote = `Next weekly reset in ${resetInLabel}. Current pace runs the meter out ~${Math.round(-gap)} days before it.`;
+      }
+    }
+  } else {
+    paceLines.push({
+      value: `${compact(dailyAverage)} / day`,
+      size: 17,
+      weight: 700,
+      color: COLORS.ink,
+      detail: `${days}-day average`,
+    });
+    paceNote = "No usable weekly meter drain in this range, so runway cannot be estimated.";
+  }
 
   // ---- Layout ----
-  const headerTop = 48;
-  const cardTop = 100;
-  const cardHeight = 100;
-  const chartTop = cardTop + cardHeight + 64;
-  const chartHeight = 470;
-  const chartBottom = chartTop + chartHeight;
-  const xLabelBand = 58;
-  const legendY = chartBottom + xLabelBand + 26;
-  const footerTop = legendY + 26;
-  const footerHeight = 96;
-  const height = footerTop + footerHeight + outer;
-
-  const title = `TOKEN LEDGER · ${days}-DAY TREND`;
+  // One uniform-height top band: a 2x2 quad of stat cells beside one unified
+  // weekly meter + pace panel.
+  const headerBaseline = 53;
+  const cardTop = 82;
+  const topGap = 24;
+  const hasMeterCard = Boolean(hasLine && latestQuotaPoint);
+  const statCardCount =
+    modelCards.length + (hasFast ? 1 : 0) + (percentMode ? 1 : 0);
+  const pacePanelWidth = hasMeterCard
+    ? Math.min(560, Math.max(480, contentWidth * 0.55))
+    : 432;
+  const pacePanelX = contentRight - pacePanelWidth;
+  const paceTextX = pacePanelX + 18;
+  const paceInnerWidth = pacePanelWidth - 36;
+  const quadWidth = contentWidth - pacePanelWidth - topGap;
+  const quadColumns = statCardCount >= 2 ? 2 : 1;
+  const quadRows = Math.max(1, Math.ceil(statCardCount / quadColumns));
+  const paceNoteLines = [];
+  if (paceNote) {
+    let current = "";
+    for (const word of paceNote.split(" ")) {
+      const candidate = current ? `${current} ${word}` : word;
+      if (textWidth(candidate, 11.5) > paceInnerWidth && current) {
+        paceNoteLines.push(current);
+        current = word;
+      } else {
+        current = candidate;
+      }
+    }
+    if (current) paceNoteLines.push(current);
+  }
+  // Baseline offsets inside the unified panel: meter headline, optional
+  // runway timeline, the two-column stat pair, then the note.
+  const paceHeadlineBaseline = hasMeterCard ? 58 : 54;
+  const paceStatValueBaseline = paceHeadlineBaseline + (paceRunwayBar ? 62 : 34);
+  const paceStatsPresent = paceLines.length > (hasMeterCard ? 0 : 1);
+  const paceNoteStart =
+    (paceStatsPresent ? paceStatValueBaseline + 16 : paceHeadlineBaseline) + 24;
+  const topRowHeight = Math.max(
+    hasMeterCard ? 170 : 150,
+    paceNoteStart + (paceNoteLines.length - 1) * 16 + 14,
+  );
+  const chartBlockTop = cardTop + topRowHeight + 16;
+  const plotTop = chartBlockTop + 40;
+  const plotHeight = 430;
+  const plotBottom = plotTop + plotHeight;
+  const chartBlockBottom = plotBottom + 70;
+  const legendBaseline = chartBlockBottom + 25;
+  const cacheRuleY = legendBaseline + 23;
+  const cacheHeaderBaseline = cacheRuleY + 27;
+  const cachePlotTop = cacheHeaderBaseline + 34;
+  const cachePlotHeight = 128;
+  const cachePlotBottom = hasCache
+    ? cachePlotTop + cachePlotHeight
+    : cacheHeaderBaseline + 26;
+  const bottomRuleY = cachePlotBottom + 30;
+  const bottomTop = bottomRuleY + 20;
+  const projectRowCount = Math.min(4, rows.length > 3 ? 4 : rows.length);
+  const bottomBlockHeight = Math.max(
+    29 + projectRowCount * 29,
+    29 + Math.max(1, cacheModelRows.length) * 30,
+    120,
+  );
+  const height = bottomTop + bottomBlockHeight + 34;
+
   const yearLabel = bounds.endDateString.slice(0, 4);
-  const subtitle = `${localDateLabel(bounds.startDateString, bounds.timeZone)} – ${localDateLabel(bounds.endDateString, bounds.timeZone)}, ${yearLabel} · ${bounds.timeZone}${latestQuotaPoint ? ` · Latest remaining: ${percent(latestQuotaPoint.remainingPercent)}` : ""}`;
+  const title = percentMode
+    ? `TOKEN LEDGER · ${days}-DAY METER DRAIN`
+    : `TOKEN LEDGER · ${days}-DAY TREND`;
+  const subtitle = `${localDateLabel(bounds.startDateString, bounds.timeZone)} – ${localDateLabel(bounds.endDateString, bounds.timeZone)}, ${yearLabel} · ${bounds.timeZone}`;
   const description = percentMode
-    ? "Dark dashboard: stat cards for each model, then stacked columns of the observed weekly-limit percentage consumed per day split by model via rate-card credit weights, overlaid with the observed weekly meter remaining as an amber line with value chips."
-    : "Dark dashboard: stat cards for each model, then stacked columns of local token volume per day by model with per-segment token and share labels, overlaid with the observed weekly meter remaining as an amber line with value chips. Darker shades within a segment are fast-mode usage.";
+    ? "Dark report card: compact actual-token stat cards beside pace and runway, stacked columns of observed weekly-meter drain with an explicitly estimated per-model split, the observed weekly meter remaining as an amber line with continuous reset boundaries, a compressed cache-rate-by-period strip, and top projects beside per-model cache rates."
+    : "Dark report card: compact model stat cards with week-over-week delta chips beside pace and runway, stacked columns of local token volume by model with fast-mode usage in a darker shade, the observed weekly meter remaining as a smoothed amber line with reset breaks and callout pills, a compressed cache-rate-by-period strip, and top projects beside per-model cache rates.";
 
   const elements = [
-    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img" aria-labelledby="trend-title trend-description">`,
-    `<title id="trend-title">${escapeXml(`Token Ledger · ${days}-day trend`)}</title>`,
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img" aria-labelledby="trend-title trend-description" data-report-mode="${percentMode ? "meter-drain" : "actual-tokens"}">`,
+    `<title id="trend-title">${escapeXml(percentMode ? `Token Ledger · ${days}-day meter drain` : `Token Ledger · ${days}-day trend`)}</title>`,
     `<desc id="trend-description">${escapeXml(description)}</desc>`,
+    `<defs><clipPath id="trend-plot-clip"><rect x="${plotLeft}" y="${plotTop}" width="${plotWidth}" height="${plotHeight}"/></clipPath></defs>`,
     `<rect width="100%" height="100%" fill="${COLORS.background}"/>`,
-    svgText({ x: outer, y: headerTop, value: title, size: 26, weight: 750, spacing: "0.02em" }),
-    svgText({ x: outer, y: headerTop + 26, value: subtitle, fill: COLORS.secondary, size: 13 }),
+    svgText({
+      x: outer,
+      y: headerBaseline,
+      value: title,
+      size: 27,
+      weight: 800,
+      spacing: "-0.27",
+    }),
+    svgText({
+      x: contentRight,
+      y: headerBaseline,
+      value: subtitle,
+      fill: COLORS.muted,
+      size: 14,
+      anchor: "end",
+    }),
   ];
 
-  // ---- Stat cards ----
-  const card = (x, cardWidth, body) => {
-    elements.push(`<rect x="${x.toFixed(2)}" y="${cardTop}" width="${cardWidth.toFixed(2)}" height="${cardHeight}" rx="10" fill="${COLORS.panel}" stroke="${COLORS.panelBorder}" stroke-width="1"/>`);
-    body(x + 16, cardTop);
-  };
-  const deltaLine = (model, tokens) => {
-    const priorValue = priorTotals.get(model) ?? 0;
-    if (priorValue < 1_000_000) return `no prior ${days}d baseline`;
-    const ratio = tokens / priorValue;
-    if (ratio >= 5) return `${ratio.toFixed(1)}× vs prior ${days}d`;
-    const delta = (ratio - 1) * 100;
-    const signed = `${delta >= 0 ? "+" : "−"}${Math.abs(delta).toFixed(1)}%`;
-    return `${signed} vs prior ${days}d`;
-  };
-  const cardGap = 12;
-  const cardCount = modelCards.length + (hasFast ? 1 : 0) + (hasLine ? 1 : 0);
-  const keyCardScale = 1.45;
-  const unitWidth = (width - outer * 2 - cardGap * cardCount) / (cardCount + keyCardScale);
-  let cardX = outer;
+  // ---- KPI cards ----
+  const cards = [];
+  let meterCard = null;
   for (const { model, tokens } of modelCards) {
-    card(cardX, unitWidth, (x, y) => {
-      elements.push(`<circle cx="${x + 6}" cy="${y + 25}" r="6" fill="${styleForModel(model)}"/>`);
-      elements.push(svgText({ x: x + 20, y: y + 30, value: model, fill: COLORS.ink, size: 14, weight: 650 }));
-      elements.push(svgText({ x, y: y + 58, value: compact(tokens), fill: COLORS.ink, size: 20, weight: 700 }));
-      elements.push(svgText({
-        x: x + unitWidth - 32,
-        y: y + 58,
-        value: totalTokens > 0 ? percent((tokens / totalTokens) * 100) : "—",
-        fill: COLORS.secondary,
-        size: 14,
-        weight: 600,
-        anchor: "end",
-      }));
-      const delta = fitLine(deltaLine(model, tokens), 11.5, unitWidth - 32);
-      elements.push(svgText({ x, y: y + 82, value: delta.text, fill: COLORS.muted, size: delta.size }));
+    const share = totalTokens > 0 ? (tokens / totalTokens) * 100 : 0;
+    const priorValue = priorTotals.get(model) ?? 0;
+    let chip = null;
+    if (priorValue >= 1_000_000) {
+      const ratio = tokens / priorValue;
+      const delta = (ratio - 1) * 100;
+      chip = {
+        text: ratio >= 5
+          ? `${ratio.toFixed(1)}×`
+          : `${delta >= 0 ? "+" : "−"}${Math.abs(delta).toFixed(1)}%`,
+        color: delta >= 0 ? COLORS.deltaUp : COLORS.deltaDown,
+        fill: delta >= 0 ? COLORS.deltaUpFill : COLORS.deltaDownFill,
+      };
+    }
+    cards.push({
+      swatch: styleForModel(model),
+      label: percentMode ? `${model} · tokens` : model,
+      labelColor: COLORS.muted,
+      value: compact(tokens),
+      valueColor: COLORS.ink,
+      chip,
+      suffix: null,
+      track: COLORS.track,
+      fill: styleForModel(model),
+      barPercent: share,
+      caption: `${percent(share)} of ${percentMode ? "actual " : ""}tokens`,
+      captionShort: percent(share),
+      panel: COLORS.panel,
+      border: COLORS.panelBorder,
     });
-    cardX += unitWidth + cardGap;
   }
   if (hasFast) {
-    card(cardX, unitWidth, (x, y) => {
-      elements.push(`<circle cx="${x + 6}" cy="${y + 25}" r="6" fill="${FAST_MODE_LABEL_COLOR}"/>`);
-      elements.push(svgText({ x: x + 20, y: y + 30, value: "Fast Mode", fill: COLORS.ink, size: 14, weight: 650 }));
-      elements.push(svgText({ x, y: y + 58, value: "1.50× rate", fill: COLORS.ink, size: 20, weight: 700 }));
-      const fastSub = fitLine(
-        `${percent((fastTokens / Math.max(1, totalTokens)) * 100)} of tokens`,
-        11.5,
-        unitWidth - 32,
-      );
+    const fastShare = totalTokens > 0 ? (fastTokens / totalTokens) * 100 : 0;
+    cards.push({
+      swatch: FAST_MODE_LABEL_COLOR,
+      label: "Fast mode",
+      labelColor: COLORS.muted,
+      value: `${FAST_MODE_MULTIPLIER.toFixed(2)}×`,
+      valueColor: COLORS.ink,
+      chip: null,
+      suffix: "rate",
+      track: COLORS.track,
+      fill: FAST_MODE_LABEL_COLOR,
+      barPercent: fastShare,
+      caption: `${percent(fastShare)} of tokens · darker bar shade`,
+      captionShort: `${percent(fastShare)} of tokens`,
+      panel: COLORS.panel,
+      border: COLORS.panelBorder,
+    });
+  }
+  if (percentMode) {
+    cards.push({
+      swatch: COLORS.line,
+      label: "Observed drain",
+      labelColor: COLORS.meterAxis,
+      value: `${burn.totalPercent.toFixed(1)} pts`,
+      valueColor: COLORS.line,
+      chip: null,
+      suffix: null,
+      track: "rgba(246,183,60,.16)",
+      fill: COLORS.line,
+      barPercent: burn.totalPercent,
+      caption: "observed total · model split estimated",
+      captionShort: "model split estimated",
+      panel: COLORS.panel,
+      border: COLORS.panelBorder,
+    });
+  }
+  if (hasLine && latestQuotaPoint) {
+    const lastReset = resetsInRange.at(-1);
+    const resetCaption = lastReset
+      ? `reset ${timestampDateLabel(lastReset.timestampMs, bounds.timeZone)}`
+      : latestResetsAtSec
+        ? `resets ${timestampDateLabel(latestResetsAtSec * 1_000, bounds.timeZone)}`
+        : "no reset in range";
+    meterCard = ({
+      swatch: COLORS.line,
+      label: "Weekly meter",
+      labelColor: COLORS.meterAxis,
+      value: meterLabel(latestQuotaPoint.remainingPercent),
+      valueColor: COLORS.line,
+      chip: null,
+      suffix: "remaining",
+      track: "rgba(246,183,60,.2)",
+      fill: COLORS.line,
+      barPercent: latestQuotaPoint.remainingPercent,
+      caption: latestQuotaReadMs === null
+        ? resetCaption
+        : `${resetCaption} · read ${timestampDateLabel(latestQuotaReadMs, bounds.timeZone)}`,
+      captionShort: resetCaption,
+      panel: COLORS.meterPanel,
+      border: COLORS.meterPanelBorder,
+    });
+  }
+  if (cards.length) {
+    // A 2x2 quad of stat cells inside one panel with hairline dividers.
+    const cellWidth = quadWidth / quadColumns;
+    const cellHeight = topRowHeight / quadRows;
+    elements.push(svgRect(outer, cardTop, quadWidth, topRowHeight, {
+      rx: 7,
+      fill: COLORS.panel,
+    }));
+    if (quadColumns > 1) {
+      const dividerX = outer + cellWidth;
+      elements.push(`<line x1="${dividerX.toFixed(2)}" y1="${cardTop + 1}" x2="${dividerX.toFixed(2)}" y2="${cardTop + topRowHeight - 1}" stroke="${COLORS.panelBorder}" stroke-width="1"/>`);
+    }
+    if (quadRows > 1) {
+      const dividerY = cardTop + cellHeight;
+      elements.push(`<line x1="${outer + 1}" y1="${dividerY.toFixed(2)}" x2="${(outer + quadWidth - 1).toFixed(2)}" y2="${dividerY.toFixed(2)}" stroke="${COLORS.panelBorder}" stroke-width="1"/>`);
+    }
+    cards.forEach((card, index) => {
+      const cellX = outer + (index % quadColumns) * cellWidth;
+      const cellY = cardTop + Math.floor(index / quadColumns) * cellHeight;
+      const contentX = cellX + 17;
+      const innerWidth = cellWidth - 34;
+      const innerRight = contentX + innerWidth;
+      const labelText = card.label.toUpperCase();
+      // Each corner carries something: label top-left, delta chip top-right,
+      // value bottom-left, share caption bottom-right, bar along the bottom.
+      elements.push(`<circle cx="${(contentX + 3.5).toFixed(2)}" cy="${(cellY + 19).toFixed(2)}" r="3.5" fill="${card.swatch}"/>`);
       elements.push(svgText({
-        x,
-        y: y + 82,
-        value: fastSub.text,
-        fill: COLORS.muted,
-        size: fastSub.size,
+        x: contentX + 15,
+        y: cellY + 23,
+        value: labelText,
+        fill: card.labelColor,
+        size: 10.5,
+        spacing: ".9",
+      }));
+      const labelBaseline = cellY + 23;
+      if (card.chip) {
+        const chipTextWidth = textWidth(card.chip.text, 10, 700);
+        const chipX = innerRight - chipTextWidth - 10;
+        const labelEnd =
+          contentX +
+          15 +
+          textWidth(labelText, 10.5) +
+          Math.max(0, labelText.length - 1) * 0.9;
+        if (chipX >= labelEnd + 10) {
+          elements.push(svgRect(chipX, labelBaseline - 11, chipTextWidth + 10, 15, {
+            rx: 3,
+            fill: card.chip.fill,
+          }));
+          elements.push(svgText({
+            x: chipX + 5,
+            y: labelBaseline,
+            value: card.chip.text,
+            fill: card.chip.color,
+            size: 10,
+            weight: 700,
+          }));
+        }
+      }
+      const valueBaseline = cellY + cellHeight / 2 + 9;
+      elements.push(svgText({
+        x: contentX,
+        y: valueBaseline,
+        value: card.value,
+        fill: card.valueColor,
+        size: 21,
+        weight: 800,
+        spacing: "-0.5",
+      }));
+      let valueEnd = contentX + textWidth(card.value, 21, 800);
+      if (card.suffix) {
+        elements.push(svgText({
+          x: valueEnd + 10,
+          y: valueBaseline,
+          value: card.suffix,
+          fill: COLORS.secondary,
+          size: 10.5,
+        }));
+        valueEnd += 10 + textWidth(card.suffix, 10.5);
+      }
+      const captionAvail = innerRight - valueEnd - 16;
+      const caption = card.captionShort && textWidth(card.caption, 11) > captionAvail
+        ? card.captionShort
+        : card.caption;
+      if (textWidth(caption, 11) <= captionAvail) {
+        elements.push(svgText({
+          x: innerRight,
+          y: valueBaseline,
+          value: caption,
+          fill: COLORS.secondary,
+          size: 11,
+          anchor: "end",
+        }));
+      }
+      const barY = cellY + cellHeight - 16;
+      elements.push(svgRect(contentX, barY, innerWidth, 3, {
+        rx: 1.5,
+        fill: card.track,
       }));
+      const fillWidth = (Math.min(100, Math.max(0, card.barPercent)) / 100) * innerWidth;
+      if (fillWidth > 0) {
+        elements.push(svgRect(contentX, barY, fillWidth, 3, {
+          rx: 1.5,
+          fill: card.fill,
+        }));
+      }
     });
-    cardX += unitWidth + cardGap;
+    elements.push(svgRect(outer, cardTop, quadWidth, topRowHeight, {
+      rx: 7,
+      fill: "none",
+      stroke: COLORS.panelBorder,
+      "stroke-width": 1,
+    }));
   }
-  if (hasLine) {
-    card(cardX, unitWidth, (x, y) => {
-      elements.push(`<circle cx="${x + 6}" cy="${y + 25}" r="6" fill="${COLORS.line}"/>`);
-      elements.push(svgText({ x: x + 20, y: y + 30, value: "Weekly Meter", fill: COLORS.ink, size: 14, weight: 650 }));
+
+  // ---- Unified weekly meter + pace panel (top right) ----
+  elements.push(svgRect(pacePanelX, cardTop, pacePanelWidth, topRowHeight, {
+    rx: 7,
+    fill: meterCard ? meterCard.panel : COLORS.panel,
+    stroke: meterCard ? meterCard.border : COLORS.panelBorder,
+    "stroke-width": 1,
+  }));
+  const paceRight = pacePanelX + pacePanelWidth - 18;
+  if (meterCard) {
+    elements.push(`<circle cx="${(paceTextX + 3.5).toFixed(2)}" cy="${cardTop + 19}" r="3.5" fill="${meterCard.swatch}"/>`);
+  }
+  elements.push(svgText({
+    x: paceTextX + (meterCard ? 15 : 0),
+    y: cardTop + 23,
+    value: meterCard ? "WEEKLY METER · PACE & RUNWAY" : "PACE & RUNWAY",
+    fill: meterCard ? meterCard.labelColor : COLORS.muted,
+    size: 10.5,
+    spacing: "1.2",
+  }));
+  if (meterCard) {
+    // Provenance rides the label row; the meter reading is the headline with
+    // the projected runway right-aligned beside it.
+    elements.push(svgText({
+      x: paceRight,
+      y: cardTop + 23,
+      value: meterCard.caption,
+      fill: COLORS.muted,
+      size: 10.5,
+      anchor: "end",
+    }));
+    elements.push(svgText({
+      x: paceTextX,
+      y: cardTop + paceHeadlineBaseline,
+      value: meterCard.value,
+      fill: meterCard.valueColor,
+      size: 28,
+      weight: 800,
+      spacing: "-0.6",
+    }));
+    elements.push(svgText({
+      x: paceTextX + textWidth(meterCard.value, 28, 800) + 10,
+      y: cardTop + paceHeadlineBaseline,
+      value: meterCard.suffix,
+      fill: COLORS.secondary,
+      size: 11,
+    }));
+    if (paceLines.length > 1) {
+      const runwayValue = paceLines[0].value;
+      const runwayDetail = "left at this pace";
+      const detailWidth = textWidth(runwayDetail, 11);
       elements.push(svgText({
-        x,
-        y: y + 58,
-        value: latestQuotaPoint ? percent(latestQuotaPoint.remainingPercent) : "—",
-        fill: COLORS.ink,
-        size: 20,
-        weight: 700,
+        x: paceRight - detailWidth - 8,
+        y: cardTop + paceHeadlineBaseline,
+        value: runwayValue,
+        fill: paceLines[0].color,
+        size: 18,
+        weight: 800,
+        anchor: "end",
       }));
-      const meterSub = fitLine(
-        latestQuotaPoint
-          ? `remaining · ${localDateLabel(bounds.endDateString, bounds.timeZone)}`
-          : "no observations",
-        11.5,
-        unitWidth - 32,
-      );
       elements.push(svgText({
-        x,
-        y: y + 82,
-        value: meterSub.text,
+        x: paceRight,
+        y: cardTop + paceHeadlineBaseline,
+        value: runwayDetail,
         fill: COLORS.muted,
-        size: meterSub.size,
+        size: 11,
+        anchor: "end",
       }));
-    });
-    cardX += unitWidth + cardGap;
-  }
-  const keyCardWidth = unitWidth * keyCardScale;
-  card(cardX, keyCardWidth, (x, y) => {
-    // Mini stacked-bar glyph.
-    elements.push(`<rect x="${x}" y="${y + 24}" width="5" height="10" rx="1" fill="${styleForModel("Luna")}"/>`);
-    elements.push(`<rect x="${x}" y="${y + 17}" width="5" height="6" rx="1" fill="${styleForModel("Sol")}"/>`);
-    elements.push(`<rect x="${x + 7}" y="${y + 20}" width="5" height="14" rx="1" fill="${styleForModel("Luna")}"/>`);
-    const keyLineOne = fitLine(
-      percentMode
-        ? "Bars = observed limit drain"
-        : "Bars = actual token volume",
-      12,
-      keyCardWidth - 54,
-    );
+    }
+  } else {
+    const paceHeadline = paceLines[0];
     elements.push(svgText({
-      x: x + 22,
-      y: y + 30,
-      value: keyLineOne.text,
-      fill: COLORS.secondary,
-      size: keyLineOne.size,
+      x: paceTextX,
+      y: cardTop + paceHeadlineBaseline,
+      value: paceHeadline.value,
+      fill: paceHeadline.color,
+      size: 26,
+      weight: 800,
+      spacing: "-0.52",
     }));
-    elements.push(`<line x1="${x}" y1="${y + 56}" x2="${x + 12}" y2="${y + 56}" stroke="${COLORS.line}" stroke-width="2.5" stroke-linecap="round"/>`);
-    elements.push(`<circle cx="${x + 6}" cy="${y + 56}" r="2.5" fill="${COLORS.line}"/>`);
-    const keyLineTwo = fitLine(
-      "Line = weekly meter remaining (%)",
-      12,
-      keyCardWidth - 54,
-    );
     elements.push(svgText({
-      x: x + 22,
-      y: y + 60,
-      value: keyLineTwo.text,
-      fill: COLORS.secondary,
-      size: keyLineTwo.size,
+      x: paceTextX + textWidth(paceHeadline.value, 26, 800) + 10,
+      y: cardTop + paceHeadlineBaseline,
+      value: paceHeadline.detail,
+      fill: COLORS.muted,
+      size: 12.5,
     }));
-    const keyLineThree = fitLine(
-      "Darker segment shade = fast mode",
-      11,
-      keyCardWidth - 54,
+  }
+  if (paceRunwayBar) {
+    // Runway timeline: amber fill = days of meter left, tick = the next
+    // weekly reset, both on a shared day scale.
+    const scaleDays = Math.max(paceRunwayBar.runwayDays, paceRunwayBar.daysToReset) * 1.06;
+    const trackY = cardTop + paceHeadlineBaseline + 12;
+    elements.push(svgRect(paceTextX, trackY, paceInnerWidth, 5, {
+      rx: 2.5,
+      fill: "rgba(246,183,60,.14)",
+    }));
+    const runwayWidth = Math.min(1, paceRunwayBar.runwayDays / scaleDays) * paceInnerWidth;
+    if (runwayWidth > 0) {
+      elements.push(svgRect(paceTextX, trackY, runwayWidth, 5, {
+        rx: 2.5,
+        fill: COLORS.line,
+      }));
+    }
+    const tickX = paceTextX +
+      Math.min(1, paceRunwayBar.daysToReset / scaleDays) * paceInnerWidth;
+    elements.push(`<line x1="${tickX.toFixed(2)}" y1="${trackY - 3}" x2="${tickX.toFixed(2)}" y2="${trackY + 8}" stroke="${COLORS.secondary}" stroke-width="2"/>`);
+    elements.push(svgText({
+      x: paceTextX,
+      y: trackY + 22,
+      value: "now",
+      fill: COLORS.muted,
+      size: 10.5,
+    }));
+    const resetLabel = `reset in ${paceRunwayBar.resetInLabel}`;
+    const resetLabelWidth = textWidth(resetLabel, 10.5);
+    const nowLabelWidth = textWidth("now", 10.5);
+    const resetLabelX = Math.max(
+      paceTextX + nowLabelWidth + 8 + resetLabelWidth / 2,
+      Math.min(tickX, paceTextX + paceInnerWidth - resetLabelWidth / 2 - 2),
     );
     elements.push(svgText({
-      x: x + 22,
-      y: y + 82,
-      value: keyLineThree.text,
+      x: resetLabelX,
+      y: trackY + 22,
+      value: resetLabel,
+      fill: COLORS.muted,
+      size: 10.5,
+      anchor: "middle",
+    }));
+  }
+  const paceStatLines = meterCard
+    ? (paceLines.length > 1 ? paceLines.slice(1) : paceLines)
+    : paceLines.slice(1);
+  paceStatLines.forEach((line, index) => {
+    const columnX = paceTextX + index * (paceInnerWidth / 2 + 8);
+    elements.push(svgText({
+      x: columnX,
+      y: cardTop + paceStatValueBaseline,
+      value: line.value,
+      fill: line.color,
+      size: 17,
+      weight: 700,
+    }));
+    elements.push(svgText({
+      x: columnX,
+      y: cardTop + paceStatValueBaseline + 16,
+      value: line.detail,
       fill: COLORS.muted,
-      size: keyLineThree.size,
+      size: 11,
     }));
   });
+  let paceNoteBaseline = cardTop + paceNoteStart;
+  for (const line of paceNoteLines) {
+    elements.push(svgText({
+      x: paceTextX,
+      y: paceNoteBaseline,
+      value: line,
+      fill: COLORS.muted,
+      size: 11.5,
+    }));
+    paceNoteBaseline += 16;
+  }
 
   // ---- Chart grid + axes ----
-  for (const fraction of [0, 0.25, 0.5, 0.75, 1]) {
-    const y = chartBottom - fraction * chartHeight;
-    elements.push(`<line x1="${plotLeft}" y1="${y.toFixed(2)}" x2="${plotLeft + plotWidth}" y2="${y.toFixed(2)}" stroke="${fraction === 0 ? COLORS.baseline : COLORS.grid}" stroke-width="1"/>`);
+  for (const fraction of [1, 0.75, 0.5, 0.25, 0]) {
+    const y = plotBottom - fraction * plotHeight;
+    elements.push(`<line x1="${plotLeft}" y1="${y.toFixed(2)}" x2="${plotRight}" y2="${y.toFixed(2)}" stroke="${fraction === 0 ? COLORS.baseline : COLORS.grid}" stroke-width="1"/>`);
     elements.push(svgText({
-      x: plotLeft - 12,
+      x: plotLeft - 14,
       y: y + 4,
       value: percentMode
         ? `${Number((maxBar * fraction).toFixed(1))}%`
-        : compact(maxBar * fraction),
-      fill: COLORS.secondary,
-      size: 12,
+        : fraction === 0
+          ? "0"
+          : compact(maxBar * fraction),
+      fill: COLORS.muted,
+      size: 13,
       anchor: "end",
+      mono: true,
     }));
     if (hasLine) {
       elements.push(svgText({
-        x: plotLeft + plotWidth + 14,
+        x: plotRight + 14,
         y: y + 4,
         value: `${Math.round(fraction * 100)}%`,
-        fill: COLORS.line,
-        size: 12,
-        weight: 600,
+        fill: COLORS.meterAxis,
+        size: 13,
+        mono: true,
       }));
     }
   }
   elements.push(svgText({
-    x: 26,
-    y: chartTop + chartHeight / 2,
-    value: percentMode ? "OBSERVED LIMIT DRAIN" : "ACTUAL TOKEN VOLUME",
+    x: plotLeft,
+    y: chartBlockTop + 18,
+    value: percentMode
+      ? "METER DRAIN · OBSERVED TOTAL, ESTIMATED MODEL SPLIT"
+      : "TOKEN VOLUME · ACTUAL",
     fill: COLORS.leftAxis,
-    size: 12,
-    weight: 650,
-    anchor: "middle",
-    spacing: "0.1em",
-  }).replace("<text ", `<text transform="rotate(-90 26 ${chartTop + chartHeight / 2})" `));
+    size: 11.5,
+    spacing: "1.25",
+  }));
   if (hasLine) {
     elements.push(svgText({
-      x: width - 24,
-      y: chartTop + chartHeight / 2,
-      value: "WEEKLY METER REMAINING (%)",
-      fill: COLORS.line,
-      size: 12,
-      weight: 650,
-      anchor: "middle",
-      spacing: "0.1em",
-    }).replace("<text ", `<text transform="rotate(90 ${width - 24} ${chartTop + chartHeight / 2})" `));
+      x: plotRight,
+      y: chartBlockTop + 18,
+      value: "WEEKLY METER · REMAINING",
+      fill: COLORS.meterAxis,
+      size: 11.5,
+      anchor: "end",
+      spacing: "1.25",
+    }));
   }
 
   // ---- Bars ----
   const slotWidth = plotWidth / binCount;
-  const barWidth = Math.min(104, Math.max(26, slotWidth * 0.62));
-  const segmentGap = 2;
+  const barWidth = Math.min(74, Math.max(MIN_BAR_WIDTH, slotWidth * 0.6));
+  const barGeometry = bars.map((bin, binIndex) => {
+    const centerX = plotLeft + (binIndex + 0.5) * slotWidth;
+    return {
+      bin,
+      centerX,
+      x: centerX - barWidth / 2,
+      topY: plotBottom - (binTotalOf(bin) / maxBar) * plotHeight,
+    };
+  });
 
-  for (const [binIndex, bin] of bars.entries()) {
-    const x = plotLeft + binIndex * slotWidth + (slotWidth - barWidth) / 2;
-    const binTotal = binTotalOf(bin);
+  const segmentLabels = [];
+  for (const { bin, centerX, x } of barGeometry) {
     const entries = sortedModelEntries(bin.values);
-    let cumulative = 0;
-    for (const [entryIndex, [model, value]] of entries.entries()) {
-      const isTop = entryIndex === entries.length - 1;
-      const fullHeight = (value / maxBar) * chartHeight;
-      const gap = entryIndex === 0 ? 0 : segmentGap;
-      const segmentHeight = Math.max(0, fullHeight - gap);
-      const y = chartBottom - cumulative - fullHeight;
+    let y = plotBottom;
+    for (const [model, value] of entries) {
+      const segmentHeight = (value / maxBar) * plotHeight;
+      y -= segmentHeight;
+      if (segmentHeight <= 0.4) continue;
       const baseColor = styleForModel(model);
-      if (segmentHeight > 0.4) {
-        if (isTop) {
-          elements.push(roundedTopRect(x, y, barWidth, segmentHeight, 5, baseColor));
-        } else {
-          elements.push(`<rect x="${x.toFixed(2)}" y="${y.toFixed(2)}" width="${barWidth.toFixed(2)}" height="${segmentHeight.toFixed(2)}" fill="${baseColor}"/>`);
+      const fastValue = percentMode ? 0 : (bin.fastValues?.get(model) ?? 0);
+      const fastHeight = fastValue > 0 && value > 0
+        ? segmentHeight * Math.min(1, fastValue / value)
+        : 0;
+      elements.push(svgRect(x, y, barWidth, segmentHeight - fastHeight, {
+        fill: baseColor,
+        "data-series": "usage-bars",
+        "data-model": model,
+        "data-value": value,
+        "data-unit": percentMode ? "meter-points" : "tokens",
+      }));
+      if (fastHeight > 0.5) {
+        elements.push(svgRect(x, y + segmentHeight - fastHeight, barWidth, fastHeight, {
+          fill: fastShade(baseColor),
+          "data-series": "usage-bars",
+          "data-model": model,
+          "data-value": fastValue,
+          "data-unit": "tokens",
+          "data-tier": "fast",
+        }));
+      }
+      const valueLabel = percentMode ? percent(value) : compact(value);
+      const fits = (text, size) => textWidth(text, size, 700) <= barWidth - 6;
+      if (segmentHeight >= 32 && fits(model, 13) && fits(valueLabel, 15)) {
+        const segmentCenter = y + segmentHeight / 2;
+        segmentLabels.push(svgText({
+          x: centerX,
+          y: segmentCenter - 5,
+          value: model,
+          fill: COLORS.onFill,
+          size: 13,
+          anchor: "middle",
+        }));
+        segmentLabels.push(svgText({
+          x: centerX,
+          y: segmentCenter + 13,
+          value: valueLabel,
+          fill: "#ffffff",
+          size: 15,
+          weight: 700,
+          anchor: "middle",
+        }));
+      }
+    }
+  }
+
+  // ---- Meter line: per-cycle smoothed segments with reset breaks ----
+  const yForRemaining = (value) =>
+    plotTop + (1 - Math.max(0, Math.min(100, value)) / 100) * plotHeight;
+  const xForTimestamp = (timestampMs) => {
+    const span = bounds.end.getTime() - bounds.start.getTime();
+    const ratio = span > 0 ? (timestampMs - bounds.start.getTime()) / span : 0;
+    return plotLeft + Math.max(0, Math.min(1, ratio)) * plotWidth;
+  };
+
+  let resetMarks = [];
+  let binDots = [];
+  let pills = [];
+  const lineSegments = [];
+  if (hasLine) {
+    const cycles = new Map();
+    for (const point of trend.points ?? []) {
+      const cycle = cycles.get(point.cycle) ?? [];
+      cycle.push(point);
+      cycles.set(point.cycle, cycle);
+    }
+    const orderedCycles = [...cycles.entries()].sort(
+      (left, right) => left[1][0].timestampMs - right[1][0].timestampMs,
+    );
+
+    resetMarks = resetsInRange
+      .filter((reset) => reset.kind !== "start")
+      .map((reset) => ({
+        ...reset,
+        x: xForTimestamp(Math.max(bounds.start.getTime(), reset.timestampMs)),
+        label: reset.kind === "weekly-expiry"
+          ? "RESET · 100%"
+          : "RESTART · 100%",
+      }));
+    const resetByCycle = new Map(resetMarks.map((reset) => [reset.cycle, reset]));
+    const resetLabels = (() => {
+      const maximum = 4;
+      if (resetMarks.length <= maximum) return resetMarks;
+      const selected = new Map();
+      const add = (reset) => {
+        if (reset) selected.set(reset.cycle, reset);
+      };
+      const scheduled = resetMarks.filter(
+        (reset) => reset.kind === "weekly-expiry",
+      );
+      if (scheduled.length >= maximum) {
+        for (let index = 0; index < maximum; index += 1) {
+          add(scheduled[Math.round((index / (maximum - 1)) * (scheduled.length - 1))]);
         }
-        const fastValue = percentMode ? 0 : (bin.fastValues?.get(model) ?? 0);
-        const fastHeight = fastValue > 0 && value > 0
-          ? segmentHeight * Math.min(1, fastValue / value)
-          : 0;
-        if (fastHeight > 0.5) {
-          if (isTop) {
-            elements.push(roundedTopRect(x, y, barWidth, fastHeight, 5, fastShade(baseColor)));
-          } else {
-            elements.push(`<rect x="${x.toFixed(2)}" y="${y.toFixed(2)}" width="${barWidth.toFixed(2)}" height="${fastHeight.toFixed(2)}" fill="${fastShade(baseColor)}"/>`);
-          }
+      } else {
+        scheduled.forEach(add);
+        add(resetMarks[0]);
+        add(resetMarks.findLast((reset) => reset.kind !== "weekly-expiry"));
+        for (let index = 1; selected.size < maximum && index < resetMarks.length - 1; index += 1) {
+          const candidateIndex = Math.round(
+            (index / (maximum - 1)) * (resetMarks.length - 1),
+          );
+          add(resetMarks[candidateIndex]);
         }
-        // Per-segment labels: model name first, then value and share of the
-        // column — each line only when it fits the segment.
-        const share = binTotal > 0 ? (value / binTotal) * 100 : 0;
-        const valueLabel = percentMode ? percent(value) : compact(value);
-        const fits = (text, size) => text.length * size * 0.6 <= barWidth - 8;
-        const candidates = [
-          { value: model, size: 12, weight: 650, opacity: null },
-          { value: valueLabel, size: 11.5, weight: 600, opacity: null },
-          { value: `(${percent(share)})`, size: 10, weight: 400, opacity: 0.75 },
-        ].filter((line) => fits(line.value, line.size));
-        const lineHeight = 15;
-        const maxLines = Math.min(
-          candidates.length,
-          Math.floor((segmentHeight - 6) / lineHeight),
-        );
-        if (maxLines > 0) {
-          const lines = candidates.slice(0, maxLines);
-          const blockTop = y + segmentHeight / 2 - ((lines.length - 1) * lineHeight) / 2;
-          for (const [lineIndex, line] of lines.entries()) {
-            elements.push(svgText({
-              x: x + barWidth / 2,
-              y: blockTop + lineIndex * lineHeight + 4,
-              value: line.value,
-              fill: "#ffffff",
-              size: line.size,
-              weight: line.weight,
-              anchor: "middle",
-              opacity: line.opacity,
-            }));
+      }
+      return [...selected.values()]
+        .sort((left, right) => left.x - right.x)
+        .slice(-maximum);
+    })();
+    const labeledResetCycles = new Set(resetLabels.map((reset) => reset.cycle));
+
+    for (const [cycleIndex, [cycleId, cyclePoints]] of orderedCycles.entries()) {
+      const points = cyclePoints.map((point) => ({
+        x: xForTimestamp(point.timestampMs),
+        y: yForRemaining(point.remainingPercent),
+        remainingPercent: point.remainingPercent,
+        timestampMs: point.timestampMs,
+      }));
+      const cycleReset = resetByCycle.get(cycleId);
+      if (
+        cycleReset &&
+        points.length &&
+        cycleReset.timestampMs < points[0].timestampMs
+      ) {
+        points.unshift({
+          x: cycleReset.x,
+          y: yForRemaining(100),
+          remainingPercent: 100,
+          timestampMs: cycleReset.timestampMs,
+          syntheticReset: true,
+        });
+      }
+
+      // Carry the previous reading to the exact reset boundary. The former
+      // renderer stopped at the last observation and restarted at a nudged
+      // marker, leaving a visible gap that looked like a broken series.
+      const nextCycleId = orderedCycles[cycleIndex + 1]?.[0];
+      const nextReset = resetByCycle.get(nextCycleId);
+      const lastPoint = points.at(-1);
+      if (
+        nextReset &&
+        lastPoint &&
+        lastPoint.timestampMs < nextReset.timestampMs
+      ) {
+        points.push({
+          ...lastPoint,
+          x: nextReset.x,
+          timestampMs: nextReset.timestampMs,
+          carriedToReset: true,
+        });
+      }
+
+      // Thin to at most one point per 2px so the path stays light while the
+      // spline still follows every meaningful movement.
+      const thinned = [];
+      for (const point of points) {
+        const { x, y } = point;
+        const previous = thinned.at(-1);
+        if (previous && x - previous.x < 2) {
+          if (previous.syntheticReset && Math.abs(previous.y - y) > 0.5) {
+            thinned.push({ ...point, x: Math.max(x, previous.x + 0.75) });
+          } else {
+            Object.assign(previous, point);
           }
+        } else {
+          thinned.push({ ...point });
         }
       }
-      cumulative += fullHeight;
+      const path = monotonePath(thinned);
+      if (path) {
+        elements.push(`<path d="${path}" fill="none" stroke="${COLORS.background}" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round" opacity=".88" clip-path="url(#trend-plot-clip)"/>`);
+        elements.push(`<path d="${path}" fill="none" stroke="${COLORS.line}" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" clip-path="url(#trend-plot-clip)" data-series="weekly-meter" data-cycle="${escapeXml(cycleId)}"/>`);
+        lineSegments.push(thinned);
+      }
+    }
+
+    // One dot per labeled column: the last observation inside that column.
+    const observed = (trend.points ?? []).filter((point) => point.observed);
+    const step = labelEvery(binCount);
+    const resetBinIndexes = new Set(resetMarks.map((reset) =>
+      Math.max(0, Math.min(binCount - 1, Math.floor((reset.x - plotLeft) / slotWidth)))));
+    for (let binIndex = 0; binIndex < binCount; binIndex += 1) {
+      if (binIndex % step !== 0 && binIndex !== binCount - 1) continue;
+      if (resetBinIndexes.has(binIndex)) continue;
+      const binEndMs = zonedMidnight(
+        bars[binIndex].endDateString,
+        bounds.timeZone,
+      ).getTime();
+      const binStartMs = zonedMidnight(
+        bars[binIndex].startDateString,
+        bounds.timeZone,
+      ).getTime();
+      const point = observed.findLast(
+        (candidate) =>
+          candidate.timestampMs >= binStartMs && candidate.timestampMs < binEndMs,
+      );
+      if (!point) continue;
+      binDots.push({
+        binIndex,
+        x: xForTimestamp(point.timestampMs),
+        y: yForRemaining(point.remainingPercent),
+        remainingPercent: point.remainingPercent,
+        cycle: point.cycle,
+      });
+    }
+    for (const dot of binDots) {
+      elements.push(`<circle cx="${dot.x.toFixed(2)}" cy="${dot.y.toFixed(2)}" r="3.5" fill="${COLORS.line}" stroke="${COLORS.background}" stroke-width="1.5"/>`);
+    }
+
+    // Stagger dense reset labels across lanes: a label joins the first lane
+    // whose previous label sits far enough to its left.
+    const laneRight = [];
+    for (const reset of resetMarks) {
+      const resetBinIndex = Math.max(
+        0,
+        Math.min(binCount - 1, Math.floor((reset.x - plotLeft) / slotWidth)),
+      );
+      const resetBar = barGeometry[resetBinIndex];
+      const crossesBar = resetBar &&
+        reset.x >= resetBar.x - 2 &&
+        reset.x <= resetBar.x + barWidth + 2;
+      const resetLineBottom = crossesBar
+        ? Math.max(plotTop + 36, resetBar.topY - 8)
+        : plotBottom;
+      elements.push(`<line x1="${reset.x.toFixed(2)}" y1="${plotTop}" x2="${reset.x.toFixed(2)}" y2="${resetLineBottom.toFixed(2)}" stroke="rgba(246,183,60,.48)" stroke-width="1.5" stroke-dasharray="5 6"/>`);
+      if (!labeledResetCycles.has(reset.cycle)) continue;
+      const labelWidth = textWidth(reset.label, 11, 700) + 14;
+      const labelCenterX = Math.max(
+        plotLeft + labelWidth / 2,
+        Math.min(plotRight - labelWidth / 2, reset.x),
+      );
+      const labelLeft = labelCenterX - labelWidth / 2;
+      let lane = laneRight.findIndex((right) => labelLeft - right >= 8);
+      if (lane < 0) {
+        lane = laneRight.length < 3
+          ? laneRight.length
+          : laneRight.indexOf(Math.min(...laneRight));
+      }
+      laneRight[lane] = labelCenterX + labelWidth / 2;
+      const labelBaseline = plotTop + 20 + lane * 21;
+      elements.push(svgRect(
+        labelCenterX - labelWidth / 2,
+        labelBaseline - 14,
+        labelWidth,
+        19,
+        {
+          rx: 5,
+          fill: COLORS.background,
+          stroke: "rgba(246,183,60,.42)",
+          "stroke-width": 1,
+        },
+      ));
+      elements.push(svgText({
+        x: labelCenterX,
+        y: labelBaseline,
+        value: reset.label,
+        fill: COLORS.line,
+        size: 11,
+        weight: 700,
+        anchor: "middle",
+        mono: true,
+      }));
+    }
+
+    // Keep the line readable with no more than two decision-useful labels:
+    // the first reading after the latest reset (or the range start when no
+    // reset exists) and the latest reading.
+    const picked = [];
+    const latestReset = resetMarks.at(-1);
+    if (latestReset) {
+      const afterReset = binDots.find((dot) => dot.x > latestReset.x + 2);
+      if (afterReset) picked.push(afterReset);
+    } else if (binDots.length) {
+      picked.push(binDots[0]);
+    }
+    if (binDots.length > 1) picked.push(binDots.at(-1));
+    const uniquePicks = [...new Map(picked.map((dot) => [dot.binIndex, dot])).values()];
+    pills = uniquePicks.map((dot, pickIndex) => {
+      const label = meterLabel(dot.remainingPercent);
+      const pillWidth = textWidth(label, 12, 700) + 18;
+      const preferLeft = pickIndex === uniquePicks.length - 1 ||
+        dot.x + pillWidth + 16 > plotRight;
+      let x = preferLeft ? dot.x - pillWidth - 13 : dot.x + 13;
+      x = Math.max(plotLeft + 3, Math.min(plotRight - pillWidth - 3, x));
+      let y = dot.y - 32;
+      if (y < plotTop + 7) y = dot.y + 11;
+      y = Math.max(plotTop + 7, Math.min(plotBottom - 31, y));
+      return {
+        x,
+        y,
+        w: pillWidth,
+        h: 24,
+        tx: x + pillWidth / 2,
+        ty: y + 16,
+        label,
+        dotX: dot.x,
+        dotY: dot.y,
+      };
+    });
+  }
+
+  // ---- Bar totals and day labels (drawn over the line like the labels) ----
+  elements.push(...segmentLabels);
+  // Where the line passes through a horizontal span at band height, from the
+  // thinned polylines; keeps each column total clear of the amber stroke.
+  const lineTopIfCrossing = (x0, x1, bandTop, bandBottom) => {
+    let top = Infinity;
+    for (const segment of lineSegments) {
+      for (let index = 0; index < segment.length - 1; index += 1) {
+        const from = segment[index];
+        const to = segment[index + 1];
+        if (to.x < x0 || from.x > x1) continue;
+        const clip0 = Math.max(x0, from.x);
+        const clip1 = Math.min(x1, to.x);
+        if (clip1 < clip0) continue;
+        const yAt = (x) =>
+          from.y + (to.x === from.x ? 0 : ((x - from.x) / (to.x - from.x)) * (to.y - from.y));
+        const yLow = Math.min(yAt(clip0), yAt(clip1));
+        const yHigh = Math.max(yAt(clip0), yAt(clip1));
+        if (yLow <= bandBottom && yHigh >= bandTop) top = Math.min(top, yLow);
+      }
     }
-    if (binTotal > 0) {
+    return top;
+  };
+  const labelStep = labelEvery(binCount);
+  const isLabeledColumn = (binIndex) =>
+    binIndex % labelStep === 0 || binIndex === binCount - 1;
+  for (const [binIndex, { bin, centerX, topY }] of barGeometry.entries()) {
+    const binTotal = binTotalOf(bin);
+    // Dense windows only caption the columns that carry date labels; a total
+    // on all 30 daily columns would overlap its neighbours.
+    if (binTotal > 0 && isLabeledColumn(binIndex)) {
+      // The total label sits in the band just above the stack; step it above
+      // the line only when the line actually crosses that band.
+      const lineTop = lineTopIfCrossing(
+        centerX - barWidth / 2 - 6,
+        centerX + barWidth / 2 + 6,
+        topY - 32,
+        topY + 8,
+      );
+      const clearedTop = Number.isFinite(lineTop) ? Math.min(topY, lineTop) : topY;
       elements.push(svgText({
-        x: x + barWidth / 2,
-        y: chartBottom - (binTotal / maxBar) * chartHeight - 10,
+        x: centerX,
+        y: clearedTop - 13,
         value: percentMode
           ? `${bin.approximate ? "≈" : ""}${percent(binTotal)}`
           : compact(binTotal),
         fill: COLORS.ink,
-        size: 14.5,
-        weight: 650,
+        size: 16,
+        weight: 700,
         anchor: "middle",
       }));
     }
-
-    if (binIndex % labelEvery(binCount) === 0 || binIndex === binCount - 1) {
+    if (isLabeledColumn(binIndex)) {
       const weekday = actual.binSize === 1
         ? localWeekdayLabel(bin.startDateString, bounds.timeZone).toUpperCase()
         : "";
       if (weekday) {
         elements.push(svgText({
-          x: x + barWidth / 2,
-          y: chartBottom + 24,
+          x: centerX,
+          y: plotBottom + 32,
           value: weekday,
           fill: COLORS.muted,
-          size: 11,
-          weight: 600,
+          size: 13,
           anchor: "middle",
+          spacing: "1.56",
         }));
       }
       elements.push(svgText({
-        x: x + barWidth / 2,
-        y: chartBottom + (weekday ? 42 : 30),
+        x: centerX,
+        y: plotBottom + (weekday ? 54 : 40),
         value: binDateLabel(bin, bounds.timeZone),
         fill: COLORS.secondary,
-        size: 12.5,
+        size: 15,
         anchor: "middle",
       }));
     }
   }
-
-  // ---- Meter line, refill markers, chips ----
-  const quota = hasLine
-    ? buildQuotaLine(trend, bounds, plotLeft, plotWidth, chartTop, chartHeight)
-    : { points: [], resetPoints: [] };
-  if (hasLine && quota.points.length > 1) {
-    for (const reset of quota.resetPoints) {
-      elements.push(`<line x1="${reset.x.toFixed(2)}" y1="${chartTop}" x2="${reset.x.toFixed(2)}" y2="${chartBottom}" stroke="${COLORS.baseline}" stroke-width="1.25" stroke-dasharray="5 5"/>`);
-    }
-    elements.push(`<path d="${linePath(quota.points)}" fill="none" stroke="${COLORS.line}" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"/>`);
-
-    // Chips: one meter reading per labeled column (the last observation in
-    // that column), plus a refill chip at each restart or reset.
-    const step = labelEvery(binCount);
-    const observationPoints = quota.points.filter((point) => point.timestampMs);
-    const chipPoints = [];
-    for (let binIndex = 0; binIndex < binCount; binIndex += 1) {
-      if (binIndex % step !== 0 && binIndex !== binCount - 1) continue;
-      const binEndMs = zonedMidnight(
-        bars[binIndex].endDateString,
-        bounds.timeZone,
-      ).getTime();
-      const candidates = observationPoints.filter((point) => point.timestampMs < binEndMs);
-      const point = candidates.at(-1);
-      if (point) chipPoints.push(point);
-    }
-    const lastPoint = observationPoints.at(-1);
-    if (lastPoint) chipPoints.push(lastPoint);
-    const seen = new Set();
-    const barGeometry = (xValue) => {
-      const binIndex = Math.max(0, Math.min(binCount - 1,
-        Math.floor((xValue - plotLeft) / slotWidth)));
-      const barLeft = plotLeft + binIndex * slotWidth + (slotWidth - barWidth) / 2;
-      const total = binTotalOf(bars[binIndex]);
-      const topY = chartBottom - (total / maxBar) * chartHeight;
-      return { barLeft, barRight: barLeft + barWidth, topY, total };
-    };
-    for (const point of chipPoints) {
-      const key = `${point.x.toFixed(0)}`;
-      if (seen.has(key)) continue;
-      seen.add(key);
-      elements.push(`<circle cx="${point.x.toFixed(2)}" cy="${point.y.toFixed(2)}" r="4.5" fill="${COLORS.line}" stroke="${COLORS.background}" stroke-width="2"/>`);
-      const geometry = barGeometry(point.x);
-      const overBar = point.x >= geometry.barLeft - 8 && point.x <= geometry.barRight + 8;
-      const insideBar = overBar && point.y > geometry.topY - 6 && geometry.total > 0;
-      let chipX = point.x;
-      let chipY = point.y - 24;
-      let anchor = "middle";
-      if (insideBar) {
-        // Slide the chip into the slot gap beside the column.
-        const rightX = geometry.barRight + 12;
-        if (rightX + 64 <= plotLeft + plotWidth) {
-          chipX = rightX;
-          anchor = "start";
-        } else {
-          chipX = geometry.barLeft - 12;
-          anchor = "end";
-        }
-        chipY = point.y;
-      } else if (overBar && Math.abs(point.y - geometry.topY) < 60 && geometry.total > 0) {
-        // Keep clear of the column-total label just above the cap.
-        chipY = geometry.topY - 44;
-      } else if (point.y < chartTop + 44) {
-        chipY = point.y + 26;
-      }
-      elements.push(chip(chipX, chipY, percent(point.remainingPercent), { anchor }));
-    }
-    let previousRefillX = -Infinity;
-    let refillLane = 0;
-    for (const reset of quota.resetPoints) {
-      const label = reset.kind === "weekly-expiry" ? "RESET 100%" : "RESTART 100%";
-      // Stagger dense refill chips across two lanes so they stay legible.
-      refillLane = reset.x - previousRefillX < 112 ? (refillLane + 1) % 2 : 0;
-      previousRefillX = reset.x;
-      elements.push(chip(reset.x, chartTop - 18 - refillLane * 24, label, { small: true }));
-    }
+  for (const pill of pills) {
+    const leaderX = pill.x > pill.dotX ? pill.x : pill.x + pill.w;
+    const leaderY = Math.max(pill.y + 6, Math.min(pill.y + pill.h - 6, pill.dotY));
+    elements.push(`<line x1="${pill.dotX.toFixed(2)}" y1="${pill.dotY.toFixed(2)}" x2="${leaderX.toFixed(2)}" y2="${leaderY.toFixed(2)}" stroke="rgba(246,183,60,.58)" stroke-width="1"/>`);
+    elements.push(svgRect(pill.x, pill.y, pill.w, pill.h, {
+      rx: 5,
+      fill: COLORS.background,
+      stroke: COLORS.line,
+      "stroke-width": 1,
+    }));
+    elements.push(svgText({
+      x: pill.tx,
+      y: pill.ty,
+      value: pill.label,
+      fill: COLORS.line,
+      size: 12,
+      weight: 700,
+      anchor: "middle",
+      mono: true,
+    }));
   }
 
-  // ---- Legend strip ----
+  // ---- Legend row ----
   const legendModels = sortedModelEntries(
     percentMode ? burn.totals : actual.totals,
   ).map(([model]) => model);
-  const legendParts = legendModels.map((model) => ({ swatch: styleForModel(model), label: model }));
-  let legendX = plotLeft;
-  for (const part of legendParts) {
-    elements.push(`<rect x="${legendX}" y="${legendY - 11}" width="13" height="13" rx="3" fill="${part.swatch}"/>`);
-    elements.push(svgText({ x: legendX + 20, y: legendY, value: part.label, fill: COLORS.secondary, size: 12.5 }));
-    legendX += 20 + part.label.length * 7.4 + 28;
-  }
-  if (hasLine) {
-    elements.push(`<line x1="${legendX}" y1="${legendY - 5}" x2="${legendX + 22}" y2="${legendY - 5}" stroke="${COLORS.line}" stroke-width="2.75" stroke-linecap="round"/>`);
-    elements.push(`<circle cx="${legendX + 11}" cy="${legendY - 5}" r="3" fill="${COLORS.line}"/>`);
+  let legendX = outer;
+  const legendItem = (swatchMarkup, swatchWidth, label) => {
+    elements.push(swatchMarkup);
     elements.push(svgText({
-      x: legendX + 30,
-      y: legendY,
-      value: "Observed weekly meter remaining (%)",
+      x: legendX + swatchWidth + 9,
+      y: legendBaseline,
+      value: label,
       fill: COLORS.secondary,
-      size: 12.5,
+      size: 13.5,
     }));
+    legendX += swatchWidth + 9 + textWidth(label, 13.5) + 24;
+  };
+  for (const model of legendModels) {
+    legendItem(
+      svgRect(legendX, legendBaseline - 10, 13, 11, { fill: styleForModel(model) }),
+      13,
+      model,
+    );
+  }
+  if (hasFast && legendModels.length) {
+    legendItem(
+      svgRect(legendX, legendBaseline - 10, 13, 11, {
+        fill: fastShade(styleForModel(legendModels[0])),
+      }),
+      13,
+      "Darker shade = fast mode",
+    );
+  }
+  if (hasLine) {
+    legendItem(
+      svgRect(legendX, legendBaseline - 6, 20, 3, { fill: COLORS.line }),
+      20,
+      percentMode
+        ? "Amber = observed meter remaining · columns = estimated model split"
+        : "Weekly meter remaining · observed",
+    );
   }
 
-  // ---- Footer strip ----
-  elements.push(`<rect x="${outer}" y="${footerTop}" width="${width - outer * 2}" height="${footerHeight}" rx="10" fill="${COLORS.panel}" stroke="${COLORS.panelBorder}" stroke-width="1"/>`);
-  const generatedAtMs = new Date(snapshot.generatedAt).getTime();
-  const meterTime = latestQuotaPoint
-    ? localDateTimeLabel(latestQuotaPoint.timestampMs, bounds.timeZone)
-    : "unknown";
-  const snapshotTime = Number.isFinite(generatedAtMs)
-    ? localDateTimeLabel(generatedAtMs, bounds.timeZone)
-    : "unknown";
-  const footerCells = [
-    {
-      icon: "bars",
-      lines: percentMode
-        ? ["Bars = observed meter drops", `${percent(burn.totalPercent)} drained in range`, "split by rate-card credit weights"]
-        : meterUsable
-          ? ["Bars show actual token volume", `meter dropped ${percent(burn.totalPercent)} in range`, "≈ = drop spread over meter gaps"]
-          : ["Bars show actual token volume", "no usable meter drain in range", ""],
-    },
-    {
-      icon: "card",
-      lines: [
-        "Rate-card estimate",
-        `${compact(rateCard.credits)} credits${hasFast ? " · fast ×1.5" : ""} · card ${trend.rateCardAsOf}`,
-        "estimate only · not the meter",
-      ],
-    },
-    {
-      icon: "clock",
-      lines: [
-        `${expiries} weekly expir${expiries === 1 ? "y" : "ies"}, ${restarts} restart${restarts === 1 ? "" : "s"}`,
-        "restarts are provider-initiated",
-        "windows keyed by reset time",
-      ],
-    },
-    {
-      icon: "calendar",
-      lines: ["Meter snapshots", `latest ${meterTime}`, `snapshot ${snapshotTime}`],
-    },
-  ];
-  const cellWidth = (width - outer * 2) / footerCells.length;
-  const drawIcon = (kind, x, y) => {
-    const stroke = COLORS.secondary;
-    if (kind === "bars") {
-      elements.push(`<rect x="${x}" y="${y + 8}" width="4" height="10" rx="1" fill="${stroke}"/>`);
-      elements.push(`<rect x="${x + 6}" y="${y + 3}" width="4" height="15" rx="1" fill="${stroke}"/>`);
-      elements.push(`<rect x="${x + 12}" y="${y + 11}" width="4" height="7" rx="1" fill="${stroke}"/>`);
-    } else if (kind === "card") {
-      elements.push(`<rect x="${x}" y="${y + 3}" width="17" height="14" rx="2" fill="none" stroke="${stroke}" stroke-width="1.5"/>`);
-      elements.push(`<line x1="${x}" y1="${y + 8}" x2="${x + 17}" y2="${y + 8}" stroke="${stroke}" stroke-width="1.5"/>`);
-    } else if (kind === "clock") {
-      elements.push(`<circle cx="${x + 8}" cy="${y + 10}" r="7.5" fill="none" stroke="${stroke}" stroke-width="1.5"/>`);
-      elements.push(`<path d="M${x + 8},${y + 6} L${x + 8},${y + 10} L${x + 11},${y + 12}" fill="none" stroke="${stroke}" stroke-width="1.5" stroke-linecap="round"/>`);
-    } else {
-      elements.push(`<rect x="${x}" y="${y + 4}" width="16" height="13" rx="2" fill="none" stroke="${stroke}" stroke-width="1.5"/>`);
-      elements.push(`<line x1="${x + 4}" y1="${y + 2}" x2="${x + 4}" y2="${y + 6}" stroke="${stroke}" stroke-width="1.5"/>`);
-      elements.push(`<line x1="${x + 12}" y1="${y + 2}" x2="${x + 12}" y2="${y + 6}" stroke="${stroke}" stroke-width="1.5"/>`);
+  // ---- Cache rate by period (compressed strip) ----
+  elements.push(`<line x1="${outer}" y1="${cacheRuleY}" x2="${contentRight}" y2="${cacheRuleY}" stroke="${COLORS.rule}" stroke-width="1"/>`);
+  elements.push(svgText({
+    x: outer,
+    y: cacheHeaderBaseline,
+    value: "CACHE RATE BY PERIOD",
+    fill: COLORS.muted,
+    size: 12,
+    spacing: "1.32",
+  }));
+  if (hasCache) {
+    const cacheLegendItems = [
+      { swatch: COLORS.cached, label: "Cached" },
+      { swatch: COLORS.uncached, label: "Uncached" },
+      {
+        swatch: null,
+        label: `${percent(cacheData.rate)} weighted · ${compact(cacheData.cachedInputTokens)} of ${compact(cacheData.inputTokens)} input cached`,
+      },
+    ];
+    let cacheLegendX = contentRight - cacheLegendItems.reduce(
+      (sum, item) =>
+        sum + (item.swatch ? 20 : 0) + textWidth(item.label, 12.5) + 18,
+      -18,
+    );
+    for (const item of cacheLegendItems) {
+      if (item.swatch) {
+        elements.push(svgRect(cacheLegendX, cacheHeaderBaseline - 10, 13, 11, {
+          rx: 2,
+          fill: item.swatch,
+        }));
+        cacheLegendX += 20;
+      }
+      elements.push(svgText({
+        x: cacheLegendX,
+        y: cacheHeaderBaseline,
+        value: item.label,
+        fill: COLORS.muted,
+        size: 12.5,
+      }));
+      cacheLegendX += textWidth(item.label, 12.5) + 18;
     }
-  };
-  for (const [cellIndex, cell] of footerCells.entries()) {
-    const cellX = outer + cellIndex * cellWidth;
-    if (cellIndex > 0) {
-      elements.push(`<line x1="${cellX.toFixed(2)}" y1="${footerTop + 14}" x2="${cellX.toFixed(2)}" y2="${footerTop + footerHeight - 14}" stroke="${COLORS.panelBorder}" stroke-width="1"/>`);
+    for (const value of [100, 50, 0]) {
+      const y = cachePlotBottom - (value / 100) * cachePlotHeight;
+      elements.push(`<line x1="${plotLeft}" y1="${y.toFixed(2)}" x2="${plotRight}" y2="${y.toFixed(2)}" stroke="${value === 0 ? COLORS.baseline : COLORS.grid}" stroke-width="1"/>`);
+      elements.push(svgText({
+        x: plotLeft - 14,
+        y: y + 4,
+        value: `${value}%`,
+        fill: COLORS.muted,
+        size: 11.5,
+        anchor: "end",
+        mono: true,
+      }));
     }
-    drawIcon(cell.icon, cellX + 20, footerTop + 22);
-    for (const [lineIndex, line] of cell.lines.entries()) {
-      if (!line) continue;
-      const fitted = fitLine(line, lineIndex === 0 ? 12.5 : 11.5, cellWidth - 52 - 18);
+    const cacheSlotWidth = plotWidth / cacheData.binCount;
+    const cacheBarWidth = Math.min(
+      74,
+      Math.max(MIN_BAR_WIDTH, cacheSlotWidth * 0.6),
+    );
+    const showCacheRateLabels = cacheSlotWidth >= 46 && cacheData.binCount <= 20;
+    cacheData.bins.forEach((bin, binIndex) => {
+      const centerX = plotLeft + (binIndex + 0.5) * cacheSlotWidth;
+      const barX = centerX - cacheBarWidth / 2;
+      if (Number.isFinite(bin.rate)) {
+        elements.push(svgRect(barX, cachePlotTop, cacheBarWidth, cachePlotHeight, {
+          rx: 3,
+          fill: COLORS.uncached,
+          opacity: ".88",
+        }));
+        const cachedHeight = cachePlotHeight * (bin.rate / 100);
+        if (cachedHeight > 0) {
+          elements.push(svgRect(
+            barX,
+            cachePlotBottom - cachedHeight,
+            cacheBarWidth,
+            cachedHeight,
+            { rx: 2, fill: COLORS.cached },
+          ));
+        }
+        if (showCacheRateLabels) {
+          elements.push(svgText({
+            x: centerX,
+            y: cachePlotTop - 9,
+            value: percent(bin.rate),
+            fill: COLORS.secondary,
+            size: 11.5,
+            weight: 700,
+            anchor: "middle",
+            mono: true,
+          }));
+        }
+      } else {
+        // No measured input this period: an empty track with a midline dash.
+        elements.push(svgRect(barX, cachePlotTop, cacheBarWidth, cachePlotHeight, {
+          rx: 3,
+          fill: COLORS.cacheTrack,
+          stroke: COLORS.baseline,
+          "stroke-width": 1,
+        }));
+        elements.push(`<line x1="${(barX + 5).toFixed(2)}" y1="${cachePlotTop + cachePlotHeight / 2}" x2="${(barX + cacheBarWidth - 5).toFixed(2)}" y2="${cachePlotTop + cachePlotHeight / 2}" stroke="${COLORS.muted}" stroke-width="1"/>`);
+      }
+    });
+    if (Number.isFinite(cacheData.rate)) {
+      const lineY = cachePlotBottom - (cacheData.rate / 100) * cachePlotHeight;
+      elements.push(`<line x1="${plotLeft}" y1="${lineY.toFixed(2)}" x2="${plotRight}" y2="${lineY.toFixed(2)}" stroke="${COLORS.weighted}" stroke-width="1.6" stroke-dasharray="6 5"/>`);
       elements.push(svgText({
-        x: cellX + 52,
-        y: footerTop + 32 + lineIndex * 20,
-        value: fitted.text,
-        fill: lineIndex === 0 ? COLORS.secondary : COLORS.muted,
-        size: fitted.size,
-        weight: lineIndex === 0 ? 600 : 400,
+        x: plotRight + 8,
+        y: lineY + 4,
+        value: percent(cacheData.rate),
+        fill: COLORS.weighted,
+        size: 11.5,
+        weight: 700,
+        mono: true,
       }));
     }
+  } else {
+    elements.push(svgText({
+      x: outer,
+      y: cacheHeaderBaseline + 24,
+      value: "No events with a usable input-token breakdown in this range.",
+      fill: COLORS.secondary,
+      size: 13,
+    }));
   }
 
+  // ---- Top projects + cache rate by model ----
+  elements.push(`<line x1="${outer}" y1="${bottomRuleY}" x2="${contentRight}" y2="${bottomRuleY}" stroke="${COLORS.rule}" stroke-width="1"/>`);
+  const sectionBaseline = bottomTop + 10;
+  const columnGap = 28;
+  const modelColumnWidth = Math.min(
+    368,
+    Math.max(300, contentWidth * 0.32),
+  );
+  const leftColumnWidth =
+    contentWidth - columnGap - 28 - modelColumnWidth;
+  const leftColumnRight = outer + leftColumnWidth;
+  const dividerX = leftColumnRight + columnGap;
+  const modelColumnX = dividerX + 28;
+
+  const projectHeader = "WHERE IT WENT · TOP PROJECTS";
+  elements.push(svgText({
+    x: outer,
+    y: sectionBaseline,
+    value: projectHeader,
+    fill: COLORS.muted,
+    size: 12,
+    spacing: "1.32",
+  }));
+  const topRows = rows.slice(0, 3);
+  const restRows = rows.slice(3);
+  const topTokens = topRows.reduce((sum, row) => sum + row.totalTokens, 0);
+  const topShare = totalTokens > 0
+    ? percent((topTokens / totalTokens) * 100)
+    : "—";
+  const fullProjectSummary = `${rows.length} ${rows.length === 1 ? "project" : "projects"} active · top ${topRows.length} = ${topShare} of tokens`;
+  const shortProjectSummary = `top ${topRows.length} = ${topShare}`;
+  const projectHeaderWidth =
+    textWidth(projectHeader, 12) +
+    Math.max(0, projectHeader.length - 1) * 1.32;
+  const projectSummary = textWidth(fullProjectSummary, 12.5) <=
+      leftColumnRight - outer - projectHeaderWidth - 16
+    ? fullProjectSummary
+    : shortProjectSummary;
+  elements.push(svgText({
+    x: leftColumnRight,
+    y: sectionBaseline,
+    value: projectSummary,
+    fill: COLORS.muted,
+    size: 12.5,
+    anchor: "end",
+  }));
+
+  const displayRows = topRows.map((row, index) => ({
+    rank: String(index + 1).padStart(2, "0"),
+    name: row.displayProject ?? row.project,
+    tokens: row.totalTokens,
+    fill: COLORS.leftAxis,
+    muted: false,
+  }));
+  if (restRows.length) {
+    displayRows.push({
+      rank: null,
+      name: restRows.length === 1
+        ? (restRows[0].displayProject ?? restRows[0].project)
+        : `${restRows.length} other projects`,
+      tokens: restRows.reduce((sum, row) => sum + row.totalTokens, 0),
+      fill: COLORS.remainderBar,
+      muted: true,
+    });
+  }
+  const rowGap = 12;
+  const rankX = outer;
+  const nameX = rankX + 22 + rowGap;
+  const projectBarX = nameX + 190 + rowGap;
+  const tokensRight = leftColumnRight - 62 - rowGap;
+  const projectBarWidth = tokensRight - (86 + rowGap) - projectBarX;
+  const projectNameWidth = projectBarX - nameX - rowGap;
+  displayRows.forEach((row, index) => {
+    const centerY = bottomTop + 29 + index * 29 + 9;
+    const projectName = truncateText(
+      row.name,
+      projectNameWidth,
+      15,
+      row.muted ? 400 : 700,
+    );
+    if (row.rank) {
+      elements.push(svgText({
+        x: rankX,
+        y: centerY + 5,
+        value: row.rank,
+        fill: COLORS.muted,
+        size: 13,
+        mono: true,
+      }));
+    }
+    elements.push(svgText({
+      x: nameX,
+      y: centerY + 5,
+      value: projectName,
+      fill: row.muted ? COLORS.muted : COLORS.ink,
+      size: 15,
+      weight: row.muted ? 400 : 700,
+    }));
+    elements.push(svgRect(projectBarX, centerY - 5, projectBarWidth, 10, {
+      rx: 2,
+      fill: COLORS.projectTrack,
+    }));
+    const share = totalTokens > 0 ? (row.tokens / totalTokens) * 100 : 0;
+    const fillWidth = (Math.min(100, share) / 100) * projectBarWidth;
+    if (fillWidth > 0) {
+      elements.push(svgRect(projectBarX, centerY - 5, fillWidth, 10, {
+        rx: 2,
+        fill: row.fill,
+      }));
+    }
+    elements.push(svgText({
+      x: tokensRight,
+      y: centerY + 5,
+      value: compact(row.tokens),
+      fill: row.muted ? COLORS.secondary : COLORS.ink,
+      size: 15,
+      weight: 700,
+      anchor: "end",
+    }));
+    elements.push(svgText({
+      x: leftColumnRight,
+      y: centerY + 5,
+      value: percent(share),
+      fill: COLORS.muted,
+      size: 13.5,
+      anchor: "end",
+    }));
+  });
+
+  elements.push(`<line x1="${dividerX}" y1="${bottomTop}" x2="${dividerX}" y2="${bottomTop + bottomBlockHeight}" stroke="${COLORS.rule}" stroke-width="1"/>`);
+  elements.push(svgText({
+    x: modelColumnX,
+    y: sectionBaseline,
+    value: "CACHE RATE BY MODEL",
+    fill: COLORS.muted,
+    size: 12,
+    spacing: "1.32",
+  }));
+  if (cacheModelRows.length === 0) {
+    elements.push(svgText({
+      x: modelColumnX,
+      y: bottomTop + 29 + 14,
+      value: "No measured input to break out.",
+      fill: COLORS.secondary,
+      size: 13,
+    }));
+  }
+  const compactModelColumns = modelColumnWidth < 340;
+  const modelLabelSize = compactModelColumns ? 12.5 : 13.5;
+  const modelRateSize = compactModelColumns ? 11.5 : 12.5;
+  const widestModelLabel = cacheModelRows.reduce(
+    (width, model) => Math.max(
+      width,
+      textWidth(model.model, modelLabelSize, 700),
+    ),
+    0,
+  );
+  const minimumRateRight =
+    modelColumnX +
+    18 +
+    widestModelLabel +
+    8 +
+    textWidth("100.0%", modelRateSize, 700);
+  const modelRateRight = Math.max(
+    modelColumnX + modelColumnWidth * 0.42,
+    minimumRateRight,
+  );
+  const modelBarX = modelRateRight + 15;
+  const modelInputReserve = Math.min(
+    58,
+    Math.max(48, modelColumnWidth * 0.16),
+  );
+  const modelBarWidth = contentRight - modelInputReserve - modelBarX;
+  cacheModelRows.forEach((model, index) => {
+    const centerY = bottomTop + 29 + index * 30 + 9;
+    if (!model.muted) {
+      elements.push(`<circle cx="${(modelColumnX + 5).toFixed(2)}" cy="${centerY}" r="4" fill="${styleForModel(model.model)}"/>`);
+    }
+    elements.push(svgText({
+      x: modelColumnX + 18,
+      y: centerY + 4,
+      value: model.model,
+      fill: model.muted ? COLORS.muted : COLORS.ink,
+      size: modelLabelSize,
+      weight: model.muted ? 400 : 700,
+    }));
+    elements.push(svgText({
+      x: modelRateRight,
+      y: centerY + 4,
+      value: percent(model.rate),
+      fill: COLORS.secondary,
+      size: modelRateSize,
+      weight: 700,
+      anchor: "end",
+      mono: true,
+    }));
+    elements.push(svgRect(modelBarX, centerY - 5, modelBarWidth, 10, {
+      rx: 3,
+      fill: COLORS.uncached,
+      opacity: ".7",
+    }));
+    const rateFill = Number.isFinite(model.rate)
+      ? modelBarWidth * (model.rate / 100)
+      : 0;
+    if (rateFill > 0) {
+      elements.push(svgRect(modelBarX, centerY - 5, rateFill, 10, {
+        rx: 3,
+        fill: COLORS.cached,
+      }));
+    }
+    elements.push(svgText({
+      x: contentRight,
+      y: centerY + 4,
+      value: compact(model.inputTokens),
+      fill: COLORS.secondary,
+      size: 12.5,
+      weight: 700,
+      anchor: "end",
+      mono: true,
+    }));
+  });
+
   elements.push("</svg>");
   return elements.join("\n");
 }