tledger 0.3.0 → 0.4.0

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

@@ -2,15 +2,39 @@ import { Buffer } from "node:buffer";
 
 import sharp from "sharp";
 
+import { buildBurnDayBins, buildUsageTrend } from "./token-ledger-trend.mjs";
+import { chooseBinSize } from "./token-ledger-trend-terminal.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";
+  calculateCodexPurchasedCredits,
+  codexCreditMultiplier,
+  isFastServiceTier,
+} from "../lib/token-ledger-rates.mjs";
+import {
+  compact,
+  escapeXml,
+  fastShade,
+  shiftCalendarDate,
+  svgRect,
+  svgText,
+  textWidth,
+  truncateText,
+  TREND_IMAGE_MODEL_COLORS,
+} from "./token-ledger-image-primitives.mjs";
+import {
+  buildTrendReportViewModel,
+  zonedMidnight,
+} from "./token-ledger-report-data.mjs";
+export {
+  compact,
+  escapeXml,
+  fastShade,
+  shiftCalendarDate,
+  svgRect,
+  svgText,
+  textWidth,
+  truncateText,
+  TREND_IMAGE_MODEL_COLORS,
+};
 
 const MODEL_ORDER = [
   "Luna",
@@ -25,25 +49,11 @@ const MODEL_ORDER = [
   "Unattributed",
 ];
 
-// Dark-surface categorical palette; the co-occurring set and the stack-order
-// adjacency both pass CVD, normal-vision, and contrast checks on #0e1420.
-export const TREND_IMAGE_MODEL_COLORS = {
-  Luna: "#3b82f6",
-  Sol: "#10a394",
-  Terra: "#8b7cf6",
-  "GPT-5.5": "#d55181",
-  "GPT-5.4": "#0891b2",
-  Daybreak: "#16a34a",
-  "Auto review": "#e5484d",
-  Other: "#64748b",
-  Unknown: "#64748b",
-  Unattributed: "#475569",
-};
-
 const COLORS = {
   background: "#0e1420",
   panel: "#151d2c",
   panelBorder: "#273246",
+  separator: "rgba(119,131,154,.22)",
   meterPanel: "#1b1712",
   meterPanelBorder: "rgba(246,183,60,.4)",
   ink: "#f2f5fa",
@@ -51,81 +61,178 @@ const COLORS = {
   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",
+  cache: "#22c58f",
+  uncached: "#b0483f",
   deltaUp: "#7fb37a",
-  deltaUpFill: "rgba(127,179,122,.14)",
   deltaDown: "#e08a86",
-  deltaDownFill: "rgba(217,83,79,.16)",
+  warn: "#f0a35e",
   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;
+const PROJECT_PANEL_ROW_COUNT = 5;
 
-export function escapeXml(value) {
-  return String(value)
-    .replaceAll("&", "&")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;")
-    .replaceAll("'", "&apos;");
+function pct(value) {
+  if (!Number.isFinite(value)) return "—";
+  if (value > 0 && value < 0.05) return "<0.1%";
+  return `${value.toFixed(1)}%`;
 }
 
-export function compact(value, digits = 2) {
+// Meter percentages read as whole numbers when they are whole ("0%", "62%").
+function meterPct(value) {
   if (!Number.isFinite(value)) return "—";
-  const absolute = Math.abs(value);
-  const units = [
-    [1_000_000_000, "B"],
-    [1_000_000, "M"],
-    [1_000, "K"],
-  ];
-  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");
+  const rounded = Math.round(value);
+  if (Math.abs(value - rounded) < 0.05) return `${rounded}%`;
+  return `${value.toFixed(1)}%`;
+}
+
+// Advance width of a letter-spaced label; SVG letter-spacing adds per glyph.
+function spacedWidth(text, size, weight, spacing) {
+  return textWidth(text, size, weight) + (Number(spacing) || 0) * String(text).length;
+}
+
+function deltaLabel(value) {
+  if (!Number.isFinite(value)) return "—";
+  return `${value >= 0 ? "+" : "−"}${Math.abs(value).toFixed(1)}%`;
+}
+
+function approximateLabel(value, estimated) {
+  return estimated && value !== "—" ? `≈${value}` : value;
 }
 
-function percent(value) {
-  const numeric = Number(value);
-  if (!Number.isFinite(numeric)) return "—";
-  if (numeric > 0 && numeric < 0.1) return "<0.1%";
-  return `${numeric.toFixed(1)}%`;
+function durationLabel(ms) {
+  if (!Number.isFinite(ms) || ms <= 0) return "—";
+  const hours = ms / 3_600_000;
+  if (hours >= 36) return `${Math.round(ms / 86_400_000)} days`;
+  if (hours >= 21) return "1 day";
+  return `${Math.max(1, Math.round(hours))} ${Math.max(1, Math.round(hours)) === 1 ? "hour" : "hours"}`;
 }
 
-function meterLabel(value) {
-  const numeric = Number(value);
-  if (!Number.isFinite(numeric)) return "—";
-  return `${numeric.toFixed(Number.isInteger(numeric) ? 0 : 1)}%`;
+function barTotalLabelPlacement({
+  centerX,
+  labelWidth,
+  slotLeft,
+  slotRight,
+  resetXs,
+}) {
+  const resetPadding = 5;
+  const resetGap = 8;
+  const boundsFor = (x, anchor) => {
+    if (anchor === "end") return { left: x - labelWidth, right: x };
+    if (anchor === "start") return { left: x, right: x + labelWidth };
+    return { left: x - labelWidth / 2, right: x + labelWidth / 2 };
+  };
+  const isClear = ({ left, right }) =>
+    left >= slotLeft &&
+    right <= slotRight &&
+    !resetXs.some((resetX) =>
+      resetX >= left - resetPadding && resetX <= right + resetPadding
+    );
+  const centered = {
+    x: centerX,
+    anchor: "middle",
+    placement: "centered",
+  };
+  if (isClear(boundsFor(centered.x, centered.anchor))) return centered;
+
+  const candidates = [];
+  for (const resetX of resetXs) {
+    for (const candidate of [
+      { x: resetX - resetGap, anchor: "end", placement: "reset-left" },
+      { x: resetX + resetGap, anchor: "start", placement: "reset-right" },
+    ]) {
+      const bounds = boundsFor(candidate.x, candidate.anchor);
+      if (!isClear(bounds)) continue;
+      candidates.push({
+        ...candidate,
+        distance: Math.abs((bounds.left + bounds.right) / 2 - centerX),
+      });
+    }
+  }
+  candidates.sort((left, right) => left.distance - right.distance);
+  if (candidates.length) {
+    return {
+      x: candidates[0].x,
+      anchor: candidates[0].anchor,
+      placement: candidates[0].placement,
+    };
+  }
+  return { ...centered, placement: "centered-over-reset" };
+}
+
+function fastRateSummary(snapshot, bounds, effectiveEndMs, events = null) {
+  let standardCardCredits = 0;
+  let fastCardCredits = 0;
+  let unratedTokens = 0;
+  const multipliers = new Set();
+  const sourceEvents = events ?? snapshot.events ?? [];
+  for (const event of sourceEvents) {
+    const timestampMs = new Date(event?.timestamp).getTime();
+    if (
+      !Number.isFinite(timestampMs) ||
+      timestampMs < bounds.start.getTime() ||
+      timestampMs >= effectiveEndMs ||
+      !isFastServiceTier(event?.serviceTier)
+    ) {
+      continue;
+    }
+    const tokens = Math.max(0, Number(event.totalTokens) || 0);
+    const model = event.rateCardModel ?? event.model;
+    const multiplier = codexCreditMultiplier(model, event.serviceTier);
+    const standardCredits = calculateCodexPurchasedCredits({
+      model,
+      serviceTier: null,
+      usage: event,
+    });
+    const fastCredits = calculateCodexPurchasedCredits({
+      model,
+      serviceTier: event.serviceTier,
+      usage: event,
+    });
+    if (
+      multiplier === null ||
+      !Number.isFinite(standardCredits) ||
+      !(standardCredits > 0) ||
+      !Number.isFinite(fastCredits)
+    ) {
+      unratedTokens += tokens;
+      continue;
+    }
+    standardCardCredits += standardCredits;
+    fastCardCredits += fastCredits;
+    multipliers.add(multiplier);
+  }
+  const sortedMultipliers = [...multipliers].sort((left, right) => left - right);
+  return {
+    unratedTokens,
+    effectiveMultiplier: standardCardCredits > 0
+      ? fastCardCredits / standardCardCredits
+      : null,
+    minimumMultiplier: sortedMultipliers[0] ?? null,
+    maximumMultiplier: sortedMultipliers.at(-1) ?? null,
+    mixedMultipliers: sortedMultipliers.length > 1,
+  };
 }
 
-function niceCeiling(value) {
+// Darker step of the same hue; retained for terminal parity and callers that
+// still shade fast-mode swatches (the report itself uses the hatch pattern).
+// Ceiling scale for the daily chart. Tighter than 1–2–5 so a 2.39B peak lands
+// on a 3.00B axis instead of 5.00B.
+const NICE_CEILING_STEPS = [1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10];
+export function reportCeiling(value) {
   if (!(value > 0)) return 1;
-  const magnitude = 10 ** Math.floor(Math.log10(value));
-  const normalized = value / magnitude;
-  const step = normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10;
+  const target = value * 1.12;
+  const magnitude = 10 ** Math.floor(Math.log10(target));
+  const normalized = target / magnitude;
+  const step =
+    NICE_CEILING_STEPS.find((candidate) => normalized <= candidate) ?? 10;
   return step * magnitude;
 }
 
@@ -143,62 +250,53 @@ function styleForModel(model) {
   return TREND_IMAGE_MODEL_COLORS[model] ?? TREND_IMAGE_MODEL_COLORS.Other;
 }
 
-// Darker step of the same hue, used for the fast-mode share of a segment.
-export function fastShade(hexColor) {
-  const match = /^#([0-9a-f]{6})$/i.exec(String(hexColor));
-  if (!match) return hexColor;
-  const channels = [0, 2, 4].map((offset) =>
-    Math.round(parseInt(match[1].slice(offset, offset + 2), 16) * 0.62),
-  );
-  return `#${channels.map((value) => value.toString(16).padStart(2, "0")).join("")}`;
-}
-
-function sortedModelEntries(values) {
-  return [...values.entries()]
-    .filter(([, value]) => value > 0)
-    .sort(([left], [right]) => modelSort(left, right));
-}
-
-function dateParts(dateString) {
-  return dateString.split("-").map(Number);
-}
-
-function dateStringFromParts(year, month, day) {
-  return [year, month, day]
-    .map((value, index) =>
-      index === 0 ? String(value) : String(value).padStart(2, "0"),
-    )
-    .join("-");
+function truncateToWidth(text, maxWidth, size, weight = 400) {
+  const value = String(text);
+  if (textWidth(value, size, weight) <= maxWidth) return value;
+  let kept = value;
+  while (kept.length > 1 && textWidth(`${kept}…`, size, weight) > maxWidth) {
+    kept = kept.slice(0, -1);
+  }
+  return `${kept.trimEnd()}…`;
 }
 
-export function shiftCalendarDate(dateString, amount) {
-  const [year, month, day] = dateParts(dateString);
-  const date = new Date(Date.UTC(year, month - 1, day + amount));
-  return dateStringFromParts(
-    date.getUTCFullYear(),
-    date.getUTCMonth() + 1,
-    date.getUTCDate(),
-  );
+function fitTextSize(text, maxWidth, preferredSize, minimumSize, weight = 400) {
+  let size = preferredSize;
+  while (size > minimumSize && textWidth(text, size, weight) > maxWidth) {
+    size = Math.max(minimumSize, size - 0.25);
+  }
+  return size;
 }
 
-function timeZoneOffsetMs(instant, timeZone) {
-  const parts = new Intl.DateTimeFormat("en-US", {
-    timeZone,
-    timeZoneName: "longOffset",
-  }).formatToParts(instant);
-  const value = parts.find((part) => part.type === "timeZoneName")?.value ?? "GMT";
-  if (value === "GMT") return 0;
-  const match = value.match(/^GMT([+-])(\d{2}):?(\d{2})?$/);
-  if (!match) return 0;
-  const minutes = Number(match[2]) * 60 + Number(match[3] || 0);
-  return (match[1] === "+" ? 1 : -1) * minutes * 60 * 1_000;
+function svgLine(x1, y1, x2, y2, attrs = {}) {
+  const pieces = [
+    `x1="${Number(x1).toFixed(2)}"`,
+    `y1="${Number(y1).toFixed(2)}"`,
+    `x2="${Number(x2).toFixed(2)}"`,
+    `y2="${Number(y2).toFixed(2)}"`,
+  ];
+  for (const [key, value] of Object.entries(attrs)) {
+    if (value === null || value === undefined) continue;
+    pieces.push(`${key}="${value}"`);
+  }
+  return `<line ${pieces.join(" ")}/>`;
 }
 
-function zonedMidnight(dateString, timeZone) {
-  const [year, month, day] = dateParts(dateString);
-  const utcGuess = Date.UTC(year, month - 1, day);
-  const first = new Date(utcGuess - timeZoneOffsetMs(new Date(utcGuess), timeZone));
-  return new Date(first.getTime() - timeZoneOffsetMs(first, timeZone));
+function chip(x, y, label, { fill, stroke, color, size = 11.5, weight = 700, anchor = "start", mono = false }) {
+  const width = textWidth(label, size, weight) + 14;
+  const left = anchor === "middle" ? x - width / 2 : anchor === "end" ? x - width : x;
+  return {
+    width,
+    markup: [
+      svgRect(left, y - 13, width, 19, {
+        rx: 4,
+        fill: fill ?? "none",
+        stroke: stroke ?? null,
+        "stroke-width": stroke ? 1 : null,
+      }),
+      svgText({ x: left + 7, y: y + 1, value: label, fill: color, size, weight, mono }),
+    ].join("\n"),
+  };
 }
 
 function localDateLabel(dateString, timeZone) {
@@ -216,1671 +314,2013 @@ function localWeekdayLabel(dateString, timeZone) {
   }).format(zonedMidnight(dateString, timeZone));
 }
 
-function timestampDateLabel(timestampMs, timeZone) {
-  if (!Number.isFinite(timestampMs)) return "unknown";
+function shortDateTimeLabel(timestampMs, timeZone) {
+  if (!Number.isFinite(timestampMs)) return "unknown time";
   return new Intl.DateTimeFormat("en-US", {
     timeZone,
     month: "short",
     day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  }).format(new Date(timestampMs));
+}
+
+function timeOnlyLabel(timestampMs, timeZone) {
+  if (!Number.isFinite(timestampMs)) return "unknown time";
+  return new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    hour: "numeric",
+    minute: "2-digit",
   }).format(new Date(timestampMs));
 }
 
 function binDateLabel(bin, timeZone) {
   const start = localDateLabel(bin.startDateString, timeZone);
-  const lastDate = shiftCalendarDate(bin.endDateString, -1);
+  const lastDate = bin.lastDateString;
   if (lastDate === bin.startDateString) return start;
-  return `${start}–${localDateLabel(lastDate, timeZone).replace(/^[A-Za-z]+ /, "")}`;
+  const end = localDateLabel(lastDate, timeZone);
+  if (bin.startDateString.slice(0, 4) !== lastDate.slice(0, 4)) {
+    return `${start} ${bin.startDateString.slice(0, 4)}–${end} ${lastDate.slice(0, 4)}`;
+  }
+  const [startMonth] = start.split(" ");
+  const [endMonth, endDay] = end.split(" ");
+  return startMonth === endMonth ? `${start}–${endDay}` : `${start}–${end}`;
 }
 
-// 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);
+function labelEvery(binCount) {
+  if (binCount <= 14) return 1;
+  if (binCount <= 20) return 2;
+  return 3;
 }
 
-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;
+// Keep the requested cadence, but drop a candidate when its actual label
+// bounds would crowd the preceding label. The final bin is always retained so
+// a partial marker and its through-time remain visible.
+function selectDateLabelIndices(
+  bins,
+  {
+    timeZone,
+    slotWidth,
+    labelStep,
+    labelSize,
+    labelForBin = (bin) => binDateLabel(bin, timeZone),
+    gap = 8,
+  },
+) {
+  const finalIndex = bins.length - 1;
+  if (finalIndex < 0 || !(slotWidth > 0)) return new Set();
+  const cadence = Math.max(1, Math.floor(Number(labelStep) || 1));
+  const candidates = [];
+  for (let index = 0; index < bins.length; index += 1) {
+    if (index % cadence !== 0 && index !== finalIndex) continue;
+    const width = textWidth(labelForBin(bins[index]), labelSize);
+    const center = (index + 0.5) * slotWidth;
+    candidates.push({
+      index,
+      left: center - width / 2,
+      right: center + width / 2,
+    });
   }
-  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;
+
+  const selected = [];
+  for (const candidate of candidates) {
+    while (
+      candidate.index === finalIndex &&
+      selected.length > 0 &&
+      candidate.left - selected.at(-1).right < gap
+    ) {
+      selected.pop();
+    }
+    if (
+      selected.length > 0 &&
+      candidate.left - selected.at(-1).right < gap
+    ) {
+      continue;
+    }
+    selected.push(candidate);
   }
-  return `${characters.slice(0, low).join("").trimEnd()}${ellipsis}`;
+  return new Set(selected.map(({ index }) => index));
 }
 
-export function svgText({
-  x,
-  y,
-  value,
-  fill = COLORS.ink,
-  size = 12,
-  weight = 400,
-  anchor = "start",
-  spacing = null,
-  opacity = null,
-  mono = false,
-}) {
-  const spacingAttr = spacing ? ` letter-spacing="${spacing}"` : "";
-  const opacityAttr = opacity !== null ? ` opacity="${opacity}"` : "";
-  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 hourLabel(timestampMs, timeZone, withZone = false) {
+  if (!Number.isFinite(timestampMs)) return "unknown time";
+  return new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    hour: "numeric",
+    minute: "2-digit",
+    ...(withZone ? { timeZoneName: "short" } : {}),
+  }).format(new Date(timestampMs));
 }
 
-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}"`);
+function hourlyChartRows(rows, timeZone) {
+  const baseLabels = rows.map((row) => hourLabel(row.startMs, timeZone));
+  const labelCounts = new Map();
+  for (const label of baseLabels) {
+    labelCounts.set(label, (labelCounts.get(label) ?? 0) + 1);
   }
-  return `<rect ${pieces.join(" ")}/>`;
+  return rows.map((row, index) => ({
+    ...row,
+    startDateString: row.dateString,
+    lastDateString: row.dateString,
+    hourStartMs: row.startMs,
+    hourEndMs: row.endMs,
+    hourLabel: labelCounts.get(baseLabels[index]) > 1
+      ? hourLabel(row.startMs, timeZone, true)
+      : baseLabels[index],
+  }));
 }
 
-// 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;
-    }
-    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];
+export function buildBurnHourBins(trend, hourRows, startMs, endMs) {
+  const bins = hourRows.map((row) => ({
+    ...row,
+    values: new Map(),
+    totalPercent: 0,
+    approximate: false,
+  }));
+  for (const interval of trend?.burnIntervals ?? []) {
+    const intervalStartMs = Number(interval.startMs);
+    const intervalEndMs = Number(interval.endMs);
+    if (!Number.isFinite(intervalStartMs) || !Number.isFinite(intervalEndMs)) continue;
+    const fullDurationMs = intervalEndMs - intervalStartMs;
+    if (!(fullDurationMs > 0)) continue;
+    const clippedStartMs = Math.max(startMs, intervalStartMs);
+    const clippedEndMs = Math.min(endMs, intervalEndMs);
+    if (!(clippedEndMs > clippedStartMs)) continue;
+    for (const bin of bins) {
+      const overlapMs = Math.min(bin.endMs, clippedEndMs) -
+        Math.max(bin.startMs, clippedStartMs);
+      if (!(overlapMs > 0)) continue;
+      // A burn interval can straddle the report window. Allocate only its
+      // in-window elapsed share; dividing by the clipped duration would
+      // incorrectly move the entire interval's drain into this chart.
+      const fraction = overlapMs / fullDurationMs;
+      if (interval.spansLongGap) bin.approximate = true;
+      for (const [model, burnPoints] of Object.entries(interval.contributions ?? {})) {
+        const share = Number(burnPoints) * fraction;
+        if (!(share > 0)) continue;
+        bin.values.set(model, (bin.values.get(model) ?? 0) + share);
+        bin.totalPercent += share;
+      }
     }
   }
-  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)}`;
+  const totals = new Map();
+  let totalPercent = 0;
+  for (const bin of bins) {
+    for (const [model, value] of bin.values) {
+      totals.set(model, (totals.get(model) ?? 0) + value);
+      totalPercent += value;
+    }
   }
-  return path;
-}
-
-function labelEvery(binCount) {
-  if (binCount <= 14) return 1;
-  if (binCount <= 20) return 2;
-  return 3;
+  return {
+    bins,
+    totals,
+    totalPercent,
+    binSize: 1,
+    binCount: bins.length,
+  };
 }
 
-function fallbackProjectRows(snapshot, bounds) {
-  const startMs = bounds.start.getTime();
-  const endMs = bounds.end.getTime();
-  const totals = new Map();
-  for (const event of usageBucketsInRange(snapshot, startMs, endMs)) {
-    const timestampMs = new Date(event.timestamp).getTime();
-    if (!Number.isFinite(timestampMs)) continue;
-    const tokens = Math.max(0, Number(event.totalTokens) || 0);
-    if (!(tokens > 0)) continue;
-    const project = String(event.project || "Unlabelled activity")
-      .replace(/[\t\r\n]+/g, " ")
-      .trim() || "Unlabelled activity";
-    totals.set(project, (totals.get(project) ?? 0) + tokens);
+// Merge the view model's per-day rows into multi-day bins for narrow layouts.
+function binDailyRows(daily, binSize) {
+  const bins = [];
+  for (let index = 0; index < daily.length; index += binSize) {
+    const rows = daily.slice(index, index + binSize);
+    const models = new Map();
+    for (const row of rows) {
+      for (const dayModel of row.models) {
+        const merged = models.get(dayModel.model) ?? {
+          model: dayModel.model,
+          totalTokens: 0,
+          normalTokens: 0,
+          fastTokens: 0,
+          unknownTokens: 0,
+          estimated: false,
+        };
+        merged.totalTokens += dayModel.totalTokens;
+        merged.normalTokens += dayModel.normalTokens;
+        merged.fastTokens += dayModel.fastTokens;
+        merged.unknownTokens += dayModel.unknownTokens;
+        merged.estimated ||= dayModel.estimated === true;
+        models.set(dayModel.model, merged);
+      }
+    }
+    bins.push({
+      startDateString: rows[0].dateString,
+      lastDateString: rows.at(-1).dateString,
+      totalTokens: rows.reduce((sum, row) => sum + row.totalTokens, 0),
+      inputTokens: rows.reduce((sum, row) => sum + row.inputTokens, 0),
+      cachedInputTokens: rows.reduce(
+        (sum, row) => sum + row.cachedInputTokens,
+        0,
+      ),
+      modelCalls: rows.reduce((sum, row) => sum + row.modelCalls, 0),
+      estimated: rows.some((row) => row.estimated),
+      partial: rows.some((row) => row.partial),
+      unobserved: rows.every((row) => row.observed === false),
+      models: [...models.values()].sort(
+        (left, right) => modelSort(left.model, right.model),
+      ),
+    });
   }
-  return [...totals.entries()]
-    .map(([project, totalTokens]) => ({
-      project,
-      displayProject: project,
-      totalTokens,
-    }))
-    .sort((left, right) => right.totalTokens - left.totalTokens);
+  return bins;
 }
 
 export function renderTrendImage({
   snapshot,
   bounds,
-  trend = buildUsageTrend(snapshot, bounds),
+  trend = null,
   days = bounds.rangeDays ?? 7,
   options = {},
   projectRows = null,
+  viewModel = null,
+  reportTimeMs = null,
+  sourceStatus = null,
+  analysis = null,
+  reportEvents = null,
 }) {
   const width = Math.max(900, Math.min(2_400, Number(options.imageWidth) || 1_280));
-  const outer = 32;
-  const plotLeft = 96;
-  const plotRight = width - 96;
-  const plotWidth = plotRight - plotLeft;
+  const outer = 28;
   const contentRight = width - outer;
   const contentWidth = width - outer * 2;
+  const wide = width >= 1_100;
 
-  // 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;
-  const bars = percentMode ? burn.bins : actual.bins;
-  const binCount = actual.binCount;
-  const binTotalOf = (bin) => (percentMode ? bin.totalPercent : bin.totalTokens);
-  const maxBar = niceCeiling(
-    bars.reduce((maximum, bin) => Math.max(maximum, binTotalOf(bin)), 0),
-  );
-  const hasLine = Boolean(trend.available && (trend.points ?? []).length > 1);
-
-  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 }));
-
-  // Prior-period per-model totals feed the delta chips.
-  const priorBounds = {
-    ...bounds,
-    startDateString: shiftCalendarDate(bounds.startDateString, -days),
-    endDateString: shiftCalendarDate(bounds.endDateString, -days),
-    start: zonedMidnight(
-      shiftCalendarDate(bounds.startDateString, -days),
-      bounds.timeZone,
-    ),
-    end: bounds.start,
-  };
-  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 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(
+  const effectiveReportTimeMs = Number.isFinite(reportTimeMs)
+    ? reportTimeMs
+    : Number.isFinite(options.reportTimeMs)
+      ? options.reportTimeMs
+      : null;
+  const effectiveSourceStatus = sourceStatus ?? options.sourceStatus ??
+    "verified-current";
+  const vm = viewModel ?? buildTrendReportViewModel({
     snapshot,
     bounds,
     days,
-    plotWidth,
-    actual.binSize,
+    reportTimeMs: effectiveReportTimeMs,
+    sourceStatus: effectiveSourceStatus,
+    projectRows,
+    events: reportEvents ?? analysis?.currentEvents ?? null,
+    priorEvents: analysis?.priorEvents ?? null,
+  });
+  const { summary, meter, meta } = vm;
+  const timeZone = meta.timeZone;
+  const stale = meta.sourceStatus === "stale-fallback";
+  const verified = meta.sourceStatus === "verified-current";
+  const fastRates = fastRateSummary(
+    snapshot,
+    bounds,
+    meta.effectiveEndMs,
+    reportEvents ?? analysis?.currentEvents,
   );
-  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.";
-  }
+  // Drain mode swaps the main chart to observed meter-drain columns; every
+  // other panel keeps actual-token semantics.
+  const drainTrend = options.drain
+    ? trend ?? buildUsageTrend(snapshot, bounds)
+    : null;
 
-  // ---- Layout ----
-  // 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 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 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" 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({
+  const elements = [];
+  const defs = [
+    "<defs>",
+    // Fast-mode tokens keep the model color and add this hatch so they stay
+    // visible in grayscale without inventing extra bar height.
+    '<pattern id="fast-mode-hatch" patternUnits="userSpaceOnUse" width="7" height="7" patternTransform="rotate(45)">',
+    '<line x1="0" y1="0" x2="0" y2="7" stroke="rgba(14,20,32,.48)" stroke-width="1.6"/>',
+    "</pattern>",
+    "</defs>",
+  ].join("\n");
+
+  // ---------------------------------------------------------------- header
+  function buildHeaderSection() {
+    const yearLabel = meta.endDateString.slice(0, 4);
+    const title = `TOKEN LEDGER · ${meta.rangeDays}-DAY TREND`;
+    const subtitle = [
+      `${localDateLabel(meta.startDateString, timeZone)} – ${localDateLabel(meta.endDateString, timeZone)}, ${yearLabel}`,
+      timeZone,
+      vm.provenance.historyScope,
+    ].filter(Boolean).join(" · ");
+    elements.push(svgText({
       x: outer,
-      y: headerBaseline,
+      y: 46,
       value: title,
-      size: 27,
+      size: 26,
       weight: 800,
-      spacing: "-0.27",
-    }),
-    svgText({
-      x: contentRight,
-      y: headerBaseline,
+      spacing: "-0.26",
+    }));
+    // The subtitle sits beside the title when the right-hand provenance block
+    // leaves room; otherwise it wraps beneath the title.
+    const subtitleX = outer + textWidth(title, 26, 800) + 18;
+    const subtitleInline =
+      subtitleX + textWidth(subtitle, 13.5) < contentRight - 270;
+    elements.push(svgText({
+      x: subtitleInline ? subtitleX : outer,
+      y: subtitleInline ? 46 : 68,
       value: subtitle,
       fill: COLORS.muted,
-      size: 14,
+      size: 13.5,
+    }));
+
+    const generatedLabel = shortDateTimeLabel(
+      vm.provenance.snapshotGeneratedAtMs,
+      timeZone,
+    );
+    const throughLine = verified
+      ? `Report through ${shortDateTimeLabel(meta.reportThroughMs, timeZone)}`
+      : `Snapshot generated ${generatedLabel}`;
+    elements.push(svgText({
+      x: contentRight,
+      y: 34,
+      value: throughLine,
+      fill: COLORS.secondary,
+      size: 12.5,
       anchor: "end",
-    }),
-  ];
+    }));
+    elements.push(svgText({
+      x: contentRight,
+      y: 54,
+      value: meter.lastObservedAtMs !== null
+        ? `Meter last observed ${shortDateTimeLabel(meter.lastObservedAtMs, timeZone)}`
+        : "No weekly meter observation",
+      fill: COLORS.muted,
+      size: 12.5,
+      anchor: "end",
+    }));
+    return 82;
+  }
 
-  // ---- KPI cards ----
-  const cards = [];
-  let meterCard = null;
-  for (const { model, tokens } of modelCards) {
-    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,
-      };
-    }
+  // -------------------------------------------------------------- KPI cards
+  function compactCards() {
+    const cards = [];
     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,
+      accent: COLORS.leftAxis,
+      label: "TOTAL USAGE",
+      value: approximateLabel(compact(summary.totalTokens), summary.estimated),
+      unit: "tokens",
+      sub: summary.totalDeltaPercent !== null
+        ? {
+            text: approximateLabel(
+              deltaLabel(summary.totalDeltaPercent),
+              summary.totalDeltaEstimated,
+            ),
+            color: summary.totalDeltaPercent >= 0 ? COLORS.deltaUp : COLORS.deltaDown,
+            weight: 700,
+          }
+        : { text: "no prior-period baseline", color: COLORS.muted },
+      caption: summary.totalDeltaPercent !== null
+        ? "vs prior equivalent period"
+        : null,
+      sparkline: vm.daily
+        .filter((row) => row.observed !== false)
+        .map((row) => row.totalTokens),
     });
-  }
-  if (hasFast) {
-    const fastShare = totalTokens > 0 ? (fastTokens / totalTokens) * 100 : 0;
+    const cacheKnown = summary.inputTokens > 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,
+      accent: COLORS.cache,
+      label: "CACHE EFFICIENCY",
+      value: cacheKnown
+        ? approximateLabel(pct(summary.cacheRatePercent), summary.estimated)
+        : "—",
+      unit: cacheKnown ? "input-weighted" : null,
+      sub: cacheKnown
+        ? {
+            text: `${approximateLabel(compact(summary.cachedInputTokens), summary.estimated)} of ${approximateLabel(compact(summary.inputTokens), summary.estimated)} input cached`,
+            color: COLORS.secondary,
+          }
+        : { text: "No measured input-token breakdown", color: COLORS.muted },
+      bar: cacheKnown
+        ? { fraction: summary.cacheRatePercent / 100, fill: COLORS.cache }
+        : null,
     });
-  }
-  if (percentMode) {
+    const hasFast = summary.fastTokens > 0;
+    const hasUnknownTier = summary.unknownTokens > 0;
+    const confirmedFastShare = approximateLabel(
+      pct(summary.fastSharePercent),
+      summary.estimated,
+    );
+    const fastRateShare = hasFast &&
+        fastRates.effectiveMultiplier !== null &&
+        fastRates.unratedTokens === 0
+      ? ` · ${fastRates.effectiveMultiplier.toFixed(2)}× avg`
+      : "";
+    const unknownTierCaption = hasUnknownTier
+      ? `${approximateLabel(pct(summary.unknownSharePercent), summary.estimated)} unknown${
+          hasFast ? " · hatch=fast" : ""
+        }`
+      : null;
     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,
+      accent: FAST_MODE_LABEL_COLOR,
+      label: "FAST MODE USAGE",
+      value: approximateLabel(compact(summary.fastTokens), summary.fastEstimated),
+      unit: "tokens",
+      sub: {
+        text: `${confirmedFastShare} confirmed fast`,
+        optionalSuffix: fastRateShare,
+        color: hasFast || hasUnknownTier ? COLORS.secondary : COLORS.muted,
+      },
+      bar: hasFast
+        ? { fraction: summary.fastSharePercent / 100, fill: FAST_MODE_LABEL_COLOR }
+        : null,
+      caption: unknownTierCaption ?? (hasFast
+        ? fastRates.effectiveMultiplier === null
+          ? "Fast credit rate: UNRATED"
+          : fastRates.unratedTokens > 0
+            ? "Some fast usage is unrated"
+            : "Hatched = confirmed fast"
+        : null),
     });
-  }
-  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,
+    cards.push({
+      accent: COLORS.secondary,
+      label: "PROJECTS",
+      value: String(summary.activeProjects),
+      unit: "active",
+      sub: summary.topFourProjectSharePercent !== null
+        ? {
+            text: `Top ${Math.min(4, vm.projects.length)} = ${approximateLabel(pct(summary.topFourProjectSharePercent), summary.estimated)}`,
+            color: COLORS.secondary,
+          }
+        : { text: "no project activity", color: COLORS.muted },
+      histogram: [...vm.projects.map((row) => row.sharePercent),
+        vm.projectRemainder.sharePercent].filter((share) => share > 0),
     });
+    return cards;
   }
-  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,
+
+  function drawCompactCard(card, x, y, cardWidth, cardHeight) {
+    elements.push(svgText({
+      x: x + 16,
+      y: y + 25,
+      value: card.label,
+      fill: card.accent,
+      size: 12,
+      weight: 600,
+      spacing: "1.08",
     }));
-    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}"/>`);
+    const valueBaseline = y + 62;
+    const innerWidth = cardWidth - 32;
+    const valueSize = 30;
+    const unitSize = 12.5;
+    const inlineUnitGap = 11;
+    const valueWidth = textWidth(card.value, valueSize, 800);
+    const unitInline = !card.unit ||
+      valueWidth + inlineUnitGap + textWidth(card.unit, unitSize) <= innerWidth;
+    elements.push(svgText({
+      x: x + 16,
+      y: valueBaseline,
+      value: card.value,
+      size: valueSize,
+      weight: 800,
+      spacing: "-0.6",
+    }));
+    if (card.unit) {
+      const placement = unitInline ? "inline" : "stacked";
+      elements.push(`<g data-role="kpi-unit" data-placement="${placement}">`);
       elements.push(svgText({
-        x: contentX + 15,
-        y: cellY + 23,
-        value: labelText,
-        fill: card.labelColor,
-        size: 10.5,
-        spacing: ".9",
+        x: unitInline ? x + 16 + valueWidth + inlineUnitGap : x + 16,
+        y: unitInline ? valueBaseline : y + 81,
+        value: card.unit,
+        fill: COLORS.muted,
+        size: unitInline ? unitSize : 11.5,
       }));
-      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("</g>");
+    }
+    if (card.sub) {
+      const subWidth = innerWidth;
+      const fullSub = card.sub.text + (card.sub.optionalSuffix || "");
+      const subText = textWidth(fullSub, 11.5, card.sub.weight ?? 400) <= subWidth
+        ? fullSub
+        : card.sub.text;
+      const subSize = fitTextSize(
+        subText,
+        subWidth,
+        12.5,
+        11.5,
+        card.sub.weight ?? 400,
+      );
+      const subBaseline = unitInline ? y + 88 : y + 96;
+      elements.push(`<g data-role="kpi-sub" data-placement="${unitInline ? "inline" : "stacked"}" data-baseline="${subBaseline}">`);
       elements.push(svgText({
-        x: contentX,
-        y: valueBaseline,
-        value: card.value,
-        fill: card.valueColor,
-        size: 21,
-        weight: 800,
-        spacing: "-0.5",
+        x: x + 16,
+        y: subBaseline,
+        value: truncateToWidth(
+          subText,
+          subWidth,
+          subSize,
+          card.sub.weight ?? 400,
+        ),
+        fill: card.sub.color,
+        size: subSize,
+        weight: card.sub.weight ?? 400,
       }));
-      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,
+      elements.push("</g>");
+    }
+    if (card.caption) {
+      const captionBaseline = unitInline ? y + 107 : y + 112;
+      elements.push(`<g data-role="kpi-caption" data-placement="${unitInline ? "inline" : "stacked"}" data-baseline="${captionBaseline}">`);
+      elements.push(svgText({
+        x: x + 16,
+        y: captionBaseline,
+        value: truncateToWidth(card.caption, cardWidth - 32, 12),
+        fill: COLORS.muted,
+        size: 12,
       }));
-      const fillWidth = (Math.min(100, Math.max(0, card.barPercent)) / 100) * innerWidth;
+      elements.push("</g>");
+    }
+    if (card.bar) {
+      const barY = y + cardHeight - 22;
+      const barWidth = cardWidth - 32;
+      elements.push(svgRect(x + 16, barY, barWidth, 5, { rx: 2.5, fill: COLORS.track }));
+      const fillWidth = Math.max(0, Math.min(1, card.bar.fraction)) * barWidth;
       if (fillWidth > 0) {
-        elements.push(svgRect(contentX, barY, fillWidth, 3, {
-          rx: 1.5,
-          fill: card.fill,
-        }));
+        elements.push(svgRect(x + 16, barY, fillWidth, 5, { rx: 2.5, fill: card.bar.fill }));
       }
-    });
-    elements.push(svgRect(outer, cardTop, quadWidth, topRowHeight, {
-      rx: 7,
-      fill: "none",
-      stroke: COLORS.panelBorder,
+    }
+    if (card.sparkline && card.sparkline.length > 1 && card.sparkline.some((value) => value > 0)) {
+      const sparkWidth = Math.min(84, cardWidth * 0.34);
+      const sparkHeight = 26;
+      const sparkLeft = x + cardWidth - sparkWidth - 14;
+      const sparkTop = y + 16;
+      const maxValue = Math.max(...card.sparkline);
+      const points = card.sparkline.map((value, index) => {
+        const px = sparkLeft + (index / (card.sparkline.length - 1)) * sparkWidth;
+        const py = sparkTop + (1 - (maxValue > 0 ? value / maxValue : 0)) * sparkHeight;
+        return `${px.toFixed(1)},${py.toFixed(1)}`;
+      });
+      elements.push(`<polyline points="${points.join(" ")}" fill="none" stroke="${COLORS.leftAxis}" stroke-width="1.6" stroke-linejoin="round"/>`);
+    }
+    if (card.histogram && card.histogram.length) {
+      const shares = card.histogram.slice(0, 7);
+      const maxShare = Math.max(...shares);
+      const histWidth = Math.min(86, cardWidth * 0.34);
+      const slot = histWidth / shares.length;
+      const histBottom = y + cardHeight - 20;
+      shares.forEach((share, index) => {
+        const barHeight = maxShare > 0 ? Math.max(2, (share / maxShare) * 30) : 2;
+        elements.push(svgRect(
+          x + cardWidth - 14 - histWidth + index * slot,
+          histBottom - barHeight,
+          Math.max(2, slot - 3),
+          barHeight,
+          { fill: COLORS.leftAxis, opacity: 0.85, rx: 1 },
+        ));
+      });
+    }
+  }
+
+  function addVerticalDivider(x, y, height, role) {
+    elements.push(svgLine(x, y + 2, x, y + height - 2, {
+      stroke: COLORS.separator,
       "stroke-width": 1,
+      "data-role": role,
     }));
   }
 
-  // ---- 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",
+  function drawWeeklyCard(x, y, cardWidth, cardHeight) {
+    elements.push(svgRect(x, y, cardWidth, cardHeight, {
+      rx: 8,
+      fill: COLORS.meterPanel,
+      stroke: COLORS.meterPanelBorder,
+      "stroke-width": 1,
     }));
+    let labelX = x + 16;
     elements.push(svgText({
-      x: paceTextX + textWidth(meterCard.value, 28, 800) + 10,
-      y: cardTop + paceHeadlineBaseline,
-      value: meterCard.suffix,
-      fill: COLORS.secondary,
-      size: 11,
+      x: labelX,
+      y: y + 25,
+      value: "WEEKLY LIMIT",
+      fill: COLORS.meterAxis,
+      size: 12,
+      weight: 600,
+      spacing: "1.08",
     }));
-    if (paceLines.length > 1) {
-      const runwayValue = paceLines[0].value;
-      const runwayDetail = "left at this pace";
-      const detailWidth = textWidth(runwayDetail, 11);
+    labelX += textWidth("WEEKLY LIMIT", 12, 600) + 22;
+    if (stale) {
+      elements.push(chip(labelX, y + 21, "STALE SNAPSHOT", {
+        fill: "rgba(246,183,60,.16)",
+        stroke: COLORS.line,
+        color: COLORS.line,
+        size: 10.5,
+      }).markup);
+    }
+
+    const status = meter.status;
+    const valueBaseline = y + 60;
+    const rightX = x + cardWidth - 16;
+
+    if (status === "unavailable") {
       elements.push(svgText({
-        x: paceRight - detailWidth - 8,
-        y: cardTop + paceHeadlineBaseline,
-        value: runwayValue,
-        fill: paceLines[0].color,
-        size: 18,
+        x: x + 16,
+        y: valueBaseline,
+        value: "NO OBSERVATION",
+        fill: COLORS.line,
+        size: 24,
         weight: 800,
-        anchor: "end",
+        spacing: "-0.24",
       }));
       elements.push(svgText({
-        x: paceRight,
-        y: cardTop + paceHeadlineBaseline,
-        value: runwayDetail,
-        fill: COLORS.muted,
-        size: 11,
-        anchor: "end",
+        x: x + 16,
+        y: y + 86,
+        value: truncateToWidth(
+          "No account-wide weekly-limit reading was found",
+          cardWidth - 32,
+          12.5,
+        ),
+        fill: COLORS.secondary,
+        size: 12.5,
       }));
+      return;
     }
-  } else {
-    const paceHeadline = paceLines[0];
-    elements.push(svgText({
-      x: paceTextX,
-      y: cardTop + paceHeadlineBaseline,
-      value: paceHeadline.value,
-      fill: paceHeadline.color,
-      size: 26,
-      weight: 800,
-      spacing: "-0.52",
-    }));
-    elements.push(svgText({
-      x: paceTextX + textWidth(paceHeadline.value, 26, 800) + 10,
-      y: cardTop + paceHeadlineBaseline,
-      value: paceHeadline.detail,
-      fill: COLORS.muted,
-      size: 12.5,
-    }));
-  }
-  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,
+
+    // Right column: time to the scheduled reset.
+    if (meter.resetInMs !== null) {
+      elements.push(svgText({
+        x: rightX,
+        y: y + 25,
+        value: "RESETS IN",
+        fill: COLORS.meterAxis,
+        size: 11,
+        weight: 600,
+        spacing: "1",
+        anchor: "end",
+      }));
+      elements.push(svgText({
+        x: rightX,
+        y: y + 50,
+        value: durationLabel(meter.resetInMs).toUpperCase(),
         fill: COLORS.line,
+        size: 21,
+        weight: 800,
+        anchor: "end",
+        spacing: "-0.2",
       }));
     }
-    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"/>`);
+
+    let subLine;
+    if (status === "exhausted") {
+      elements.push(svgText({
+        x: x + 16,
+        y: valueBaseline,
+        value: "EXHAUSTED",
+        fill: COLORS.line,
+        size: 26,
+        weight: 800,
+        spacing: "-0.26",
+      }));
+      subLine = meter.firstExhaustedObservedAtMs !== null && meter.resetsAtMs !== null
+        ? `Reached 0% about ${durationLabel(meter.resetsAtMs - meter.firstExhaustedObservedAtMs)} before reset`
+        : "Latest reading reports 0% remaining";
+    } else {
+      elements.push(svgText({
+        x: x + 16,
+        y: valueBaseline,
+        value: meterPct(meter.remainingPercent),
+        fill: COLORS.line,
+        size: 26,
+        weight: 800,
+        spacing: "-0.26",
+      }));
+      elements.push(svgText({
+        x: x + 16 + textWidth(meterPct(meter.remainingPercent), 26, 800) + 12,
+        y: valueBaseline,
+        value: "remaining",
+        fill: COLORS.secondary,
+        size: 12.5,
+      }));
+      if (status === "at-risk" && meter.runwayDays !== null && meter.resetInMs !== null) {
+        subLine = `At this pace: 0% about ${durationLabel(meter.resetInMs - meter.runwayDays * 86_400_000)} before reset`;
+      } else if (meter.runwayDays !== null) {
+        subLine = `${meter.runwayDays.toFixed(1)} days of runway at this pace`;
+      } else {
+        subLine = "Runway unavailable · no usable meter drain in the active cycle";
+      }
+    }
     elements.push(svgText({
-      x: paceTextX,
-      y: trackY + 22,
-      value: "now",
-      fill: COLORS.muted,
-      size: 10.5,
+      x: x + 16,
+      y: y + 91,
+      value: truncateToWidth(subLine, cardWidth - 32, 12.5),
+      fill: status === "at-risk" ? COLORS.warn : COLORS.secondary,
+      size: 12.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),
+
+    const barY = y + cardHeight - 20;
+    const barWidth = cardWidth - 32;
+    elements.push(svgRect(x + 16, barY, barWidth, 5, { rx: 2.5, fill: "rgba(246,183,60,.2)" }));
+    const fillWidth = (Math.max(0, Math.min(100, meter.remainingPercent)) / 100) * barWidth;
+    if (fillWidth > 0) {
+      elements.push(svgRect(x + 16, barY, fillWidth, 5, { rx: 2.5, fill: COLORS.line }));
+    }
+  }
+
+  function buildKpiSection(top) {
+    const cards = compactCards();
+    const cardHeight = 140;
+    const gap = 12;
+    if (wide) {
+      // Weekly card takes ~1.55 compact-card widths on one row.
+      const unit = (contentWidth - gap * 4) / (4 + 1.55);
+      for (let index = 1; index < cards.length; index += 1) {
+        addVerticalDivider(
+          outer + index * (unit + gap) - gap / 2,
+          top,
+          cardHeight,
+          "kpi-column-divider",
+        );
+      }
+      cards.forEach((card, index) => {
+        drawCompactCard(card, outer + index * (unit + gap), top, unit, cardHeight);
+      });
+      drawWeeklyCard(outer + 4 * (unit + gap), top, unit * 1.55, cardHeight);
+      return top + cardHeight;
+    }
+    const half = (contentWidth - gap) / 2;
+    addVerticalDivider(
+      outer + half + gap / 2,
+      top,
+      cardHeight * 2 + gap,
+      "kpi-column-divider",
     );
-    elements.push(svgText({
-      x: resetLabelX,
-      y: trackY + 22,
-      value: resetLabel,
-      fill: COLORS.muted,
-      size: 10.5,
-      anchor: "middle",
-    }));
+    cards.forEach((card, index) => {
+      const row = Math.floor(index / 2);
+      const column = index % 2;
+      drawCompactCard(card, outer + column * (half + gap), top + row * (cardHeight + gap), half, cardHeight);
+    });
+    const weeklyTop = top + 2 * (cardHeight + gap);
+    drawWeeklyCard(outer, weeklyTop, contentWidth, cardHeight);
+    return weeklyTop + cardHeight;
   }
-  const paceStatLines = meterCard
-    ? (paceLines.length > 1 ? paceLines.slice(1) : paceLines)
-    : paceLines.slice(1);
-  paceStatLines.forEach((line, index) => {
-    const columnX = paceTextX + index * (paceInnerWidth / 2 + 8);
+
+  // ------------------------------------------------------------- model mix
+  function buildModelMixSection(top) {
+    const sectionHeight = 28;
+    const labelBaseline = top + 19;
     elements.push(svgText({
-      x: columnX,
-      y: cardTop + paceStatValueBaseline,
-      value: line.value,
-      fill: line.color,
-      size: 17,
-      weight: 700,
+      x: outer + 16,
+      y: labelBaseline,
+      value: "MODEL MIX",
+      fill: COLORS.leftAxis,
+      size: 11.5,
+      weight: 600,
+      spacing: "1.08",
     }));
     elements.push(svgText({
-      x: columnX,
-      y: cardTop + paceStatValueBaseline + 16,
-      value: line.detail,
+      x: outer + 16 + spacedWidth("MODEL MIX", 11.5, 600, 1.08) + 8,
+      y: labelBaseline,
+      value: "(by tokens)",
       fill: COLORS.muted,
       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 [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 - 14,
-      y: y + 4,
-      value: percentMode
-        ? `${Number((maxBar * fraction).toFixed(1))}%`
-        : fraction === 0
-          ? "0"
-          : compact(maxBar * fraction),
-      fill: COLORS.muted,
-      size: 13,
-      anchor: "end",
-      mono: true,
-    }));
-    if (hasLine) {
+    const rows = vm.models.filter((row) => row.totalTokens > 0);
+    if (!rows.length || !(summary.totalTokens > 0)) {
       elements.push(svgText({
-        x: plotRight + 14,
-        y: y + 4,
-        value: `${Math.round(fraction * 100)}%`,
-        fill: COLORS.meterAxis,
-        size: 13,
-        mono: true,
+        x: contentRight - 16,
+        y: labelBaseline,
+        value: "no usage in range",
+        fill: COLORS.muted,
+        size: 12.5,
+        anchor: "end",
       }));
+      return top + sectionHeight;
     }
-  }
-  elements.push(svgText({
-    x: plotLeft,
-    y: chartBlockTop + 18,
-    value: percentMode
-      ? "METER DRAIN · OBSERVED TOTAL, ESTIMATED MODEL SPLIT"
-      : "TOKEN VOLUME · ACTUAL",
-    fill: COLORS.leftAxis,
-    size: 11.5,
-    spacing: "1.25",
-  }));
-  if (hasLine) {
-    elements.push(svgText({
-      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(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,
-    };
-  });
-
-  const segmentLabels = [];
-  for (const { bin, centerX, x } of barGeometry) {
-    const entries = sortedModelEntries(bin.values);
-    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);
-      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",
-        }));
+    // Segments that are too narrow for an inside label move to an external
+    // caption at the right end of the strip.
+    const barLeft = outer + 170;
+    const external = [];
+    const externalRows = [];
+    let barRight = contentRight - 16;
+    const segmentLabel = (row) =>
+      `${row.model} ${approximateLabel(pct(row.sharePercent), summary.estimated)} (${approximateLabel(compact(row.totalTokens), row.estimated)})`;
+    for (const row of [...rows].reverse()) {
+      const share = row.totalTokens / summary.totalTokens;
+      const estimatedWidth = share * (barRight - barLeft);
+      if (
+        estimatedWidth < textWidth(segmentLabel(row), 12, 600) + 18 &&
+        externalRows.length < 2 &&
+        rows.length > 1
+      ) {
+        externalRows.unshift(row);
+      } else {
+        break;
       }
-      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,
+    }
+    for (const row of externalRows) external.push(segmentLabel(row));
+    if (external.length) {
+      const caption = external.join(" · ");
+      barRight -= textWidth(caption, 11, 500) + 16;
+      elements.push(svgText({
+        x: contentRight - 16,
+        y: labelBaseline,
+        value: caption,
+        fill: COLORS.secondary,
+        size: 11,
+        weight: 500,
+        anchor: "end",
+      }));
+    }
+    const barY = top + 7;
+    const barHeight = 14;
+    const unlabeledRows = [];
+    let cursor = barLeft;
+    const barWidth = Math.max(60, barRight - barLeft);
+    rows.forEach((row, index) => {
+      const share = row.totalTokens / summary.totalTokens;
+      const segmentWidth = share * barWidth;
+      elements.push(svgRect(cursor, barY, segmentWidth, barHeight, {
+        fill: styleForModel(row.model),
+        rx: index === 0 || index === rows.length - 1 ? 3 : null,
+      }));
+      const label = segmentLabel(row);
+      if (!externalRows.includes(row) && textWidth(label, 10.5, 600) + 14 <= segmentWidth) {
+        elements.push(svgText({
+          x: cursor + segmentWidth / 2,
+          y: barY + 10.5,
+          value: label,
           fill: "#ffffff",
-          size: 15,
-          weight: 700,
+          size: 10.5,
+          weight: 600,
           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))]);
-        }
-      } 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]);
-        }
+      if (!externalRows.includes(row) && textWidth(label, 10.5, 600) + 14 > segmentWidth) {
+        unlabeledRows.push(row);
       }
-      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,
-        });
+      cursor += segmentWidth;
+    });
+    let captionX = barLeft;
+    let captionRow = 0;
+    for (const row of unlabeledRows) {
+      const label = segmentLabel(row);
+      const labelWidth = textWidth(label, 11, 500) + 24;
+      if (captionX > barLeft && captionX + labelWidth > contentRight - 16) {
+        captionX = barLeft;
+        captionRow += 1;
       }
+      elements.push(svgText({
+        x: captionX, y: top + 38 + captionRow * 18, value: label,
+        fill: styleForModel(row.model), size: 11, weight: 500,
+      }));
+      captionX += labelWidth;
+    }
+    return top + sectionHeight + (unlabeledRows.length ? (captionRow + 1) * 18 : 0);
+  }
 
-      // 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,
+  // ------------------------------------------------------------ daily chart
+  function buildDailyChartSection(top) {
+    const hourlyMode = meta.granularity === "hour" &&
+      Array.isArray(vm.hourly) &&
+      vm.hourly.length > 0;
+    const hourlyRows = hourlyMode ? hourlyChartRows(vm.hourly, timeZone) : null;
+    const plotWidthEstimate = contentWidth - 70 - 66 - 24;
+    const binSize = hourlyMode
+      ? 1
+      : chooseBinSize(meta.rangeDays, plotWidthEstimate, {
+          minBinWidth: MIN_BAR_WIDTH,
+          preferDaily: true,
         });
-      }
+    const tokenBins = hourlyMode ? hourlyRows : binDailyRows(vm.daily, binSize);
+    const meterDrainAvailable = Boolean(options.drain) &&
+      Boolean(drainTrend?.available) &&
+      meter.status !== "unavailable";
+    const burnCandidate = meterDrainAvailable
+      ? hourlyMode
+        ? buildBurnHourBins(
+            drainTrend,
+            hourlyRows,
+            meta.startMs,
+            meta.effectiveEndMs,
+          )
+        : buildBurnDayBins(drainTrend, bounds, { days: meta.rangeDays, binSize })
+      : null;
+    const percentMode = Boolean(options.drain && burnCandidate?.totalPercent > 0);
+    const drainFallback = Boolean(options.drain) && !percentMode;
+    const burn = percentMode ? burnCandidate : null;
+    const bins = percentMode
+      ? burn.bins.map((bin, index) => ({
+          ...bin,
+          startDateString: bin.startDateString,
+          lastDateString: bin.lastDateString ?? shiftCalendarDate(bin.endDateString, -1),
+          totalPercent: bin.totalPercent,
+          approximate: bin.approximate,
+          values: bin.values,
+          partial: tokenBins[index]?.partial ?? false,
+          unobserved: tokenBins[index]?.unobserved ?? true,
+          estimated: false,
+        }))
+      : tokenBins;
+    const binCount = bins.length;
+    const binTotalOf = (bin) => (percentMode ? bin.totalPercent : bin.totalTokens);
+    const maxBin = bins.reduce((maximum, bin) => Math.max(maximum, binTotalOf(bin)), 0);
+    const ceiling = reportCeiling(maxBin);
+    const meterVisible = meter.status !== "unavailable" && meter.observations.length > 0;
+
+    const panelTop = top;
+    const headerBaseline = panelTop + 27;
+    const plotLeft = outer + 70;
+    const plotRight = contentRight - (meterVisible ? 66 : 24);
+    const plotWidth = plotRight - plotLeft;
+    const plotTop = panelTop + 64;
+    const plotHeight = wide ? 330 : 300;
+    const plotBottom = plotTop + plotHeight;
+    const partialInRange = bins.some((bin) => bin.partial);
+    const slotWidth = plotWidth / binCount;
+    const barWidth = Math.min(86, Math.max(MIN_BAR_WIDTH, slotWidth * 0.62));
+    const entriesForBin = (bin) => percentMode
+      ? [...bin.values.entries()]
+          .filter(([, value]) => value > 0)
+          .sort(([left], [right]) => modelSort(left, right))
+          .map(([model, value]) => ({ model, totalTokens: value, fastTokens: 0 }))
+      : [...bin.models].filter((entry) => entry.totalTokens > 0)
+          .sort((left, right) => modelSort(left.model, right.model));
+    const valueLabelFor = (entry) => percentMode
+      ? pct(entry.totalTokens)
+      : approximateLabel(compact(entry.totalTokens), entry.estimated);
+    const fitsInside = (entry) =>
+      (entry.totalTokens / ceiling) * plotHeight >= 20 &&
+      textWidth(entry.model, 12.5, 700) <= barWidth - 6;
+    const smallSegments = bins.map((bin) => bin.unobserved
+      ? [] : entriesForBin(bin).filter((entry) => !fitsInside(entry)));
+    const labelBand = 58 + (partialInRange ? 18 : 0);
+    const panelHeight = plotBottom - panelTop + labelBand;
+    elements.push(svgRect(outer, panelTop, contentWidth, panelHeight, {
+      rx: 8,
+      fill: COLORS.panel,
+      stroke: COLORS.panelBorder,
+      "stroke-width": 1,
+    }));
 
-      // 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 });
-        }
-      }
-      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);
-      }
+    // Panel header: title + legend + right axis caption.
+    const chartTitle = percentMode
+      ? "OBSERVED LIMIT DRAIN"
+      : hourlyMode
+        ? "HOURLY TOKEN VOLUME"
+        : "DAILY TOKEN VOLUME";
+    const chartSubtitle = percentMode
+      ? hourlyMode
+        ? "(meter percent by hour)"
+        : "(meter percent by model)"
+      : drainFallback
+        ? "(actual · --drain unavailable; raw local tokens)"
+        : "(actual)";
+    elements.push(svgText({
+      x: outer + 16,
+      y: headerBaseline,
+      value: chartTitle,
+      fill: COLORS.leftAxis,
+      size: 12,
+      weight: 600,
+      spacing: "1.08",
+    }));
+    elements.push(svgText({
+      x: outer + 16 +
+        spacedWidth(chartTitle, 12, 600, 1.08) + 8,
+      y: headerBaseline,
+      value: chartSubtitle,
+      fill: COLORS.muted,
+      size: 11.5,
+    }));
+    if (meterVisible) {
+      elements.push(svgText({
+        x: contentRight - 16,
+        y: headerBaseline,
+        value: "Meter %",
+        fill: COLORS.meterAxis,
+        size: 12,
+        weight: 600,
+        anchor: "end",
+      }));
     }
 
-    // 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,
-      });
+    // Legend, wrapped when narrow.
+    const legendItems = [];
+    const presentModels = vm.models
+      .filter((row) => row.totalTokens > 0)
+      .map((row) => row.model)
+      .sort(modelSort);
+    for (const model of presentModels) {
+      legendItems.push({ kind: "swatch", fill: styleForModel(model), label: model });
     }
-    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"/>`);
+    if (!percentMode && summary.fastTokens > 0) {
+      legendItems.push({ kind: "hatch", label: "Fast mode" });
     }
-
-    // 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));
+    if (meterVisible) {
+      legendItems.push({ kind: "solid", label: "Reported interval" });
+      legendItems.push({ kind: "dashed", label: "Unobserved gap" });
+    }
+    let legendX = outer + 16;
+    let legendY = headerBaseline + 21;
+    const legendLimit = contentRight - 16;
+    for (const item of legendItems) {
+      const swatchWidth = item.kind === "swatch" || item.kind === "hatch" ? 13 : 20;
+      const itemWidth = swatchWidth + 7 + textWidth(item.label, 12) + 18;
+      if (legendX + itemWidth > legendLimit && legendX > outer + 16) {
+        legendX = outer + 16;
+        legendY += 18;
+      }
+      if (item.kind === "swatch") {
+        elements.push(svgRect(legendX, legendY - 9, 13, 10, { fill: item.fill, rx: 2 }));
+      } else if (item.kind === "hatch") {
+        elements.push(svgRect(legendX, legendY - 9, 13, 10, { fill: COLORS.leftAxis, rx: 2 }));
+        elements.push(svgRect(legendX, legendY - 9, 13, 10, { fill: "url(#fast-mode-hatch)", rx: 2 }));
+      } else if (item.kind === "solid") {
+        elements.push(svgLine(legendX, legendY - 4, legendX + 20, legendY - 4, {
+          stroke: COLORS.line,
+          "stroke-width": 2.4,
+        }));
+      } else {
+        elements.push(svgLine(legendX, legendY - 4, legendX + 20, legendY - 4, {
+          stroke: COLORS.line,
+          "stroke-width": 2,
+          "stroke-dasharray": "4 4",
+        }));
       }
-      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,
+        x: legendX + swatchWidth + 7,
+        y: legendY,
+        value: item.label,
+        fill: COLORS.secondary,
+        size: 12,
       }));
+      legendX += itemWidth;
     }
 
-    // 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);
+    // Meter pixel geometry is needed both by the overlay and by bar-total
+    // placement (totals step above the line when it crosses their band).
+    // Hourly bars retain the nominal end of the final partial hour so meter
+    // timestamps land inside the same column; meter observations themselves
+    // are still clipped by the view model's effective cutoff.
+    const chartEndMs = hourlyMode
+      ? hourlyRows.at(-1).endMs
+      : meta.requestedEndMs;
+    const spanMs = chartEndMs - meta.startMs;
+    const xForTs = (timestampMs) =>
+      plotLeft +
+      Math.max(0, Math.min(1, spanMs > 0 ? (timestampMs - meta.startMs) / spanMs : 0)) *
+        plotWidth;
+    const resetXs = meterVisible
+      ? meter.resets.map((reset) => xForTs(reset.timestampMs))
+      : [];
+    const yForRemaining = (value) =>
+      plotTop + (1 - Math.max(0, Math.min(100, value)) / 100) * plotHeight;
+    const pixelSegments = meterVisible
+      ? meter.segments.map((segment) => ({
+          x0: xForTs(segment.fromMs),
+          y0: yForRemaining(segment.fromPercent),
+          x1: xForTs(segment.toMs),
+          y1: yForRemaining(segment.toPercent),
+        }))
+      : [];
+    const lineTopWithin = (x0, x1, bandTop, bandBottom) => {
+      let top = Infinity;
+      for (const segment of pixelSegments) {
+        if (segment.x1 < x0 || segment.x0 > x1) continue;
+        const clip0 = Math.max(x0, segment.x0);
+        const clip1 = Math.min(x1, segment.x1);
         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));
+          segment.y0 +
+          (segment.x1 === segment.x0
+            ? 0
+            : ((x - segment.x0) / (segment.x1 - segment.x0)) * (segment.y1 - segment.y0));
         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);
       }
-    }
-    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;
+      return Number.isFinite(top) ? top : null;
+    };
+
+    // Grid and axes.
+    for (const fraction of [1, 0.75, 0.5, 0.25, 0]) {
+      const y = plotBottom - fraction * plotHeight;
+      elements.push(svgLine(plotLeft, y, plotRight, y, {
+        stroke: fraction === 0 ? COLORS.baseline : COLORS.grid,
+        "stroke-width": 1,
+      }));
       elements.push(svgText({
-        x: centerX,
-        y: clearedTop - 13,
+        x: plotLeft - 12,
+        y: y + 4,
         value: percentMode
-          ? `${bin.approximate ? "≈" : ""}${percent(binTotal)}`
-          : compact(binTotal),
-        fill: COLORS.ink,
-        size: 16,
-        weight: 700,
-        anchor: "middle",
+          ? `${Number((ceiling * fraction).toFixed(1))}%`
+          : fraction === 0
+            ? "0"
+            : compact(ceiling * fraction),
+        fill: COLORS.muted,
+        size: 12,
+        anchor: "end",
+        mono: true,
       }));
+      if (meterVisible) {
+        elements.push(svgText({
+          x: plotRight + 12,
+          y: y + 4,
+          value: `${Math.round(fraction * 100)}%`,
+          fill: COLORS.meterAxis,
+          size: 12,
+          mono: true,
+        }));
+      }
     }
-    if (isLabeledColumn(binIndex)) {
-      const weekday = actual.binSize === 1
-        ? localWeekdayLabel(bin.startDateString, bounds.timeZone).toUpperCase()
-        : "";
-      if (weekday) {
+
+    // Bars.
+    const labelStep = labelEvery(binCount);
+    const peakBinIndex = hourlyMode && maxBin > 0
+      ? bins.reduce(
+          (peakIndex, bin, index) =>
+            binTotalOf(bin) > binTotalOf(bins[peakIndex]) ? index : peakIndex,
+          0,
+        )
+      : -1;
+    const isLabeledColumn = (index) =>
+      index % labelStep === 0 ||
+      index === binCount - 1 ||
+      index === peakBinIndex;
+    const dateLabelIndices = selectDateLabelIndices(bins, {
+      timeZone,
+      slotWidth,
+      labelStep,
+      labelSize: 14,
+      labelForBin: hourlyMode
+        ? (bin) => bin.hourLabel
+        : (bin) => binDateLabel(bin, timeZone),
+    });
+    const isDateLabeledColumn = (index) => dateLabelIndices.has(index);
+    const segmentLabels = [];
+
+    bins.forEach((bin, binIndex) => {
+      const centerX = plotLeft + (binIndex + 0.5) * slotWidth;
+      const x = centerX - barWidth / 2;
+      if (bin.unobserved) {
+        elements.push(svgRect(centerX - slotWidth / 2 + 2, plotTop, slotWidth - 4, plotHeight, {
+          fill: "rgba(255,255,255,.025)",
+        }));
+        if (isDateLabeledColumn(binIndex)) {
+          elements.push(chip(centerX, plotBottom + 21, "UNOBSERVED", {
+            fill: "rgba(255,255,255,.04)",
+            stroke: COLORS.baseline,
+            color: COLORS.muted,
+            size: 9.5,
+            anchor: "middle",
+          }).markup);
+          elements.push(svgText({
+            x: centerX,
+            y: plotBottom + 45,
+            value: hourlyMode ? bin.hourLabel : binDateLabel(bin, timeZone),
+            fill: COLORS.secondary,
+            size: 14,
+            anchor: "middle",
+          }));
+        }
+        return;
+      }
+      if (bin.partial) {
+        elements.push(svgRect(centerX - slotWidth / 2 + 2, plotTop, slotWidth - 4, plotHeight, {
+          fill: "rgba(255,255,255,.03)",
+        }));
+      }
+      const entries = entriesForBin(bin);
+      let y = plotBottom;
+      for (const entry of entries) {
+        const value = entry.totalTokens;
+        const segmentHeight = (value / ceiling) * plotHeight;
+        y -= segmentHeight;
+        if (segmentHeight <= 0.4) continue;
+        const baseColor = styleForModel(entry.model);
+        elements.push(svgRect(x, y, barWidth, segmentHeight, {
+          fill: baseColor,
+          "data-series": "usage-bars",
+        }));
+        // Fast-mode tokens are a subset of the segment: same color, hatched,
+        // never extra height.
+        const fastFraction = value > 0 ? Math.min(1, entry.fastTokens / value) : 0;
+        const fastHeight = segmentHeight * fastFraction;
+        if (fastHeight > 0.5) {
+          elements.push(svgRect(x, y, barWidth, fastHeight, {
+            fill: "url(#fast-mode-hatch)",
+          }));
+        }
+        const valueLabel = valueLabelFor(entry);
+        if (fitsInside(entry)) {
+          const segmentCenter = y + segmentHeight / 2;
+          const amountSize = Math.min(14,
+            14 * (barWidth - 6) / Math.max(1, textWidth(valueLabel, 14, 700)));
+          const showAmount = segmentHeight >= 34 && amountSize >= 9;
+          segmentLabels.push(`<g data-role="segment-label" data-bin="${binIndex}">`);
+          segmentLabels.push(svgText({
+            x: centerX,
+            y: segmentCenter + (showAmount ? -4 : 4),
+            value: entry.model,
+            fill: COLORS.onFill,
+            size: 12.5,
+            anchor: "middle",
+          }));
+          if (showAmount) segmentLabels.push(svgText({
+            x: centerX,
+            y: segmentCenter + 13,
+            value: valueLabel,
+            fill: "#ffffff",
+            size: amountSize,
+            weight: 700,
+            anchor: "middle",
+          }));
+          segmentLabels.push("</g>");
+        }
+      }
+      const total = binTotalOf(bin);
+      let totalLabelY = y - 9;
+      if (total > 0 && isLabeledColumn(binIndex)) {
+        const estimatedPrefix = (percentMode ? bin.approximate : bin.estimated) ? "≈" : "";
+        const labelValue = percentMode
+          ? `${estimatedPrefix}${pct(total)}`
+          : `${estimatedPrefix}${compact(total)}`;
+        const labelWidth = textWidth(labelValue, 15, 700);
+        const placement = barTotalLabelPlacement({
+          centerX,
+          labelWidth,
+          slotLeft: centerX - slotWidth / 2 + 4,
+          slotRight: centerX + slotWidth / 2 - 4,
+          resetXs,
+        });
+        let labelTop = y;
+        const labelLeft = placement.anchor === "end"
+          ? placement.x - labelWidth
+          : placement.anchor === "start"
+            ? placement.x
+            : placement.x - labelWidth / 2;
+        const labelRight = labelLeft + labelWidth;
+        const clearance = lineTopWithin(
+          labelLeft - 5,
+          labelRight + 5,
+          labelTop - 28,
+          labelTop + 8,
+        );
+        if (clearance !== null) labelTop = Math.min(labelTop, clearance);
+        const lineSafeLabelY = Math.max(plotTop + 12, labelTop - 9);
+        const labelY = placement.placement.startsWith("reset-")
+          ? Math.max(plotTop + 40, lineSafeLabelY)
+          : lineSafeLabelY;
+        totalLabelY = labelY;
+        segmentLabels.push(
+          `<g data-role="bar-total-label" data-placement="${placement.placement}"${placement.placement.startsWith("reset-") ? ' data-clearance="reset-marker"' : ""}>${svgText({
+            x: placement.x,
+            y: labelY,
+            value: labelValue,
+            size: 15,
+            weight: 700,
+            anchor: placement.anchor,
+          })}</g>`,
+        );
+      }
+      // Low-volume columns have room above them for a compact callout;
+      // keep the date axis clear and connect the callout to its actual bar.
+      if (total > 0 && (total / ceiling) * plotHeight < 100) {
+        const details = smallSegments[binIndex]
+          .filter((entry) => entry.totalTokens / total >= 0.05)
+          .sort((left, right) => right.totalTokens - left.totalTokens);
+        const rowHeight = 16;
+        const calloutBottom = totalLabelY - 25;
+        if (details.length) {
+          elements.push(svgLine(centerX, calloutBottom + 5, centerX, totalLabelY - 13, {
+            stroke: COLORS.muted, "stroke-width": 1,
+          }));
+        }
+        details.forEach((entry, rowIndex) => {
+          const label = `${entry.model} ${valueLabelFor(entry)}`;
+          const labelSize = Math.min(10.5, 10.5 * (slotWidth - 6) /
+            Math.max(1, textWidth(label, 10.5, 600)));
+          elements.push(`<g data-role="small-segment-label" data-bin="${binIndex}">`);
+          elements.push(svgText({
+            x: centerX,
+            y: calloutBottom - (details.length - rowIndex - 1) * rowHeight,
+            value: label, fill: styleForModel(entry.model), size: labelSize,
+            weight: 600, anchor: "middle",
+          }));
+          elements.push("</g>");
+        });
+      }
+      // Day labels.
+      if (isDateLabeledColumn(binIndex)) {
+        const weekday = !hourlyMode &&
+          binSize === 1 &&
+          bin.lastDateString === bin.startDateString
+          ? localWeekdayLabel(bin.startDateString, timeZone).toUpperCase()
+          : "";
+        if (bin.partial) {
+          elements.push(chip(centerX, plotBottom + 21, "PARTIAL", {
+            fill: "rgba(255,255,255,.06)",
+            stroke: COLORS.baseline,
+            color: COLORS.secondary,
+            size: 10.5,
+            anchor: "middle",
+          }).markup);
+        } else if (weekday) {
+          elements.push(svgText({
+            x: centerX,
+            y: plotBottom + 25,
+            value: weekday,
+            fill: COLORS.muted,
+            size: 12,
+            anchor: "middle",
+            spacing: "1.44",
+          }));
+        }
         elements.push(svgText({
           x: centerX,
-          y: plotBottom + 32,
-          value: weekday,
-          fill: COLORS.muted,
-          size: 13,
+          y: plotBottom + (weekday || bin.partial ? 45 : 34),
+          value: hourlyMode ? bin.hourLabel : binDateLabel(bin, timeZone),
+          fill: COLORS.secondary,
+          size: 14,
           anchor: "middle",
-          spacing: "1.56",
         }));
+        if (bin.partial && meta.partialFinalDay) {
+          elements.push(svgText({
+            x: centerX,
+            y: plotBottom + 62,
+            value: `THROUGH ${timeOnlyLabel(meta.effectiveEndMs, timeZone).toUpperCase()}`,
+            fill: COLORS.muted,
+            size: 10.5,
+            anchor: "middle",
+            spacing: "0.63",
+          }));
+        }
+      }
+    });
+
+    // Meter overlay: solid runs mark spans confirmed by repeated equal
+    // readings, while dashed runs bridge unobserved gaps. The line never
+    // extends past the last reading.
+    if (meterVisible) {
+      // Dense windows keep a line per reset but cap the callout chips so the
+      // top of the plot stays readable; scheduled expiries win the labels.
+      const chipLimit = 4;
+      const labeledResets = (() => {
+        if (meter.resets.length <= chipLimit) return new Set(meter.resets);
+        const scheduled = meter.resets.filter(
+          (reset) => reset.kind === "weekly-expiry",
+        );
+        const pool = scheduled.length >= chipLimit ? scheduled : meter.resets;
+        const selected = new Set();
+        for (let index = 0; index < chipLimit; index += 1) {
+          selected.add(
+            pool[Math.round((index / (chipLimit - 1)) * (pool.length - 1))],
+          );
+        }
+        return selected;
+      })();
+      const resetLabelMarkups = [];
+      const resetLabelBounds = [];
+      for (const reset of meter.resets) {
+        const x = xForTs(reset.timestampMs);
+        elements.push(svgLine(x, plotTop, x, plotBottom, {
+          stroke: "rgba(246,183,60,.5)",
+          "stroke-width": 2,
+          "stroke-dasharray": reset.inferred ? "5 6" : null,
+        }));
+        if (!labeledResets.has(reset)) continue;
+        const labelX = Math.max(plotLeft + 32, Math.min(plotRight - 32, x));
+        const resetLabel = chip(
+          labelX,
+          plotTop + 13,
+          reset.kind === "weekly-expiry" ? "RESET" : "RESTART",
+          {
+            fill: COLORS.panel,
+            color: COLORS.meterAxis,
+            size: 10.5,
+            weight: 600,
+            anchor: "middle",
+            mono: true,
+          },
+        );
+        resetLabelBounds.push({
+          left: labelX - resetLabel.width / 2,
+          right: labelX + resetLabel.width / 2,
+          bottom: plotTop + 19,
+        });
+        resetLabelMarkups.push(
+          `<g data-role="meter-reset-label">${resetLabel.markup}</g>`,
+        );
+      }
+
+      for (const segment of meter.segments) {
+        elements.push(svgLine(
+          xForTs(segment.fromMs),
+          yForRemaining(segment.fromPercent),
+          xForTs(segment.toMs),
+          yForRemaining(segment.toPercent),
+          {
+            stroke: COLORS.line,
+            "stroke-width": segment.kind === "confirmed" ? 2.6 : 2,
+            "stroke-dasharray": segment.kind === "confirmed" ? null : "5 5",
+            "stroke-linecap": "round",
+            "data-series": "weekly-meter",
+          },
+        ));
+      }
+      elements.push(...resetLabelMarkups);
+      const latest = meter.observations.at(-1);
+      if (latest) {
+        const label = `${Math.round(latest.remainingPercent)}%`;
+        const px = xForTs(latest.timestampMs);
+        const py = yForRemaining(latest.remainingPercent);
+        const anchorEnd = px > plotRight - 70;
+        const labelX = anchorEnd ? px - 10 : px + 10;
+        const labelWidth = textWidth(label, 11, 700) + 14;
+        const labelLeft = anchorEnd ? labelX - labelWidth : labelX;
+        const labelRight = labelLeft + labelWidth;
+        let labelY = Math.max(plotTop + 14, Math.min(plotBottom - 6, py + 1));
+        const overlapsResetLabel = resetLabelBounds.some((bounds) =>
+          labelLeft < bounds.right + 6 &&
+          labelRight > bounds.left - 6 &&
+          labelY - 13 < bounds.bottom + 6
+        );
+        if (overlapsResetLabel) labelY = plotTop + 38;
+        const latestLabel = chip(
+          labelX,
+          labelY,
+          label,
+          {
+            fill: COLORS.background,
+            stroke: COLORS.line,
+            color: COLORS.line,
+            size: 11,
+            anchor: anchorEnd ? "end" : "start",
+            mono: true,
+          },
+        );
+        elements.push(
+          `<g data-role="meter-latest-label">${latestLabel.markup}</g>`,
+        );
       }
-      elements.push(svgText({
-        x: centerX,
-        y: plotBottom + (weekday ? 54 : 40),
-        value: binDateLabel(bin, bounds.timeZone),
-        fill: COLORS.secondary,
-        size: 15,
-        anchor: "middle",
-      }));
     }
-  }
-  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,
-    }));
+
+    elements.push(...segmentLabels);
+    return panelTop + panelHeight;
   }
 
-  // ---- Legend row ----
-  const legendModels = sortedModelEntries(
-    percentMode ? burn.totals : actual.totals,
-  ).map(([model]) => model);
-  let legendX = outer;
-  const legendItem = (swatchMarkup, swatchWidth, label) => {
-    elements.push(swatchMarkup);
+  // ------------------------------------------------------------ lower panels
+  function panelHeading(x, y, title, suffix = null) {
     elements.push(svgText({
-      x: legendX + swatchWidth + 9,
-      y: legendBaseline,
-      value: label,
-      fill: COLORS.secondary,
-      size: 13.5,
+      x: x + 16,
+      y: y + 25,
+      value: title,
+      fill: COLORS.leftAxis,
+      size: 12,
+      weight: 600,
+      spacing: "1.08",
     }));
-    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",
-    );
+    if (suffix) {
+      elements.push(svgText({
+        x: x + 16 + spacedWidth(title, 12, 600, 1.08) + 8,
+        y: y + 25,
+        value: suffix,
+        fill: COLORS.muted,
+        size: 11.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,
+  function buildCacheByDayPanel(x, y, panelWidth, panelHeight) {
+    const hourlyMode = meta.granularity === "hour" &&
+      Array.isArray(vm.hourly) &&
+      vm.hourly.length > 0;
+    const hourlyRows = hourlyMode ? hourlyChartRows(vm.hourly, timeZone) : null;
+    panelHeading(
+      x,
+      y,
+      hourlyMode ? "CACHE EFFICIENCY BY HOUR" : "CACHE EFFICIENCY BY DAY",
+      "(input-weighted)",
     );
-    for (const item of cacheLegendItems) {
-      if (item.swatch) {
-        elements.push(svgRect(cacheLegendX, cacheHeaderBaseline - 10, 13, 11, {
-          rx: 2,
-          fill: item.swatch,
-        }));
-        cacheLegendX += 20;
-      }
+    const inner = panelWidth - 32;
+    const left = x + 16;
+
+    const binSize = hourlyMode
+      ? 1
+      : chooseBinSize(meta.rangeDays, inner, {
+          minBinWidth: 18,
+          preferDaily: true,
+        });
+    const cacheBins = hourlyMode ? hourlyRows : binDailyRows(vm.daily, binSize);
+    const rated = cacheBins.filter((bin) => bin.inputTokens > 0);
+    if (!rated.length) {
       elements.push(svgText({
-        x: cacheLegendX,
-        y: cacheHeaderBaseline,
-        value: item.label,
+        x: left,
+        y: y + 60,
+        value: "No measured input-token breakdown in this range",
         fill: COLORS.muted,
         size: 12.5,
       }));
-      cacheLegendX += textWidth(item.label, 12.5) + 18;
+      return;
     }
-    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"/>`);
+
+    const rates = rated.map((bin) => (bin.cachedInputTokens / bin.inputTokens) * 100);
+    const minRate = Math.min(...rates);
+    // Zoomed axis: at least a 20-point span, floor snapped to tens, 0–80.
+    let floor = Math.max(0, Math.min(80, Math.floor((minRate - 5) / 10) * 10));
+    floor = Math.min(floor, 80);
+    if (floor > 0) {
       elements.push(svgText({
-        x: plotLeft - 14,
-        y: y + 4,
-        value: `${value}%`,
+        x: x + panelWidth - 16,
+        y: y + 25,
+        value: "ZOOMED SCALE",
         fill: COLORS.muted,
-        size: 11.5,
+        size: 9.5,
+        weight: 600,
+        spacing: "0.65",
+        anchor: "end",
+      }));
+    }
+
+    const lineTop = y + 52;
+    const lineHeight = 64;
+    const lineBottom = lineTop + lineHeight;
+    const axisLabels = [
+      { value: 100, y: lineTop },
+      { value: (100 + floor) / 2, y: lineTop + lineHeight / 2 },
+      { value: floor, y: lineBottom },
+    ];
+    const axisWidth = 34;
+    for (const label of axisLabels) {
+      elements.push(svgText({
+        x: left + axisWidth - 6,
+        y: label.y + 4,
+        value: `${Math.round(label.value)}%`,
+        fill: COLORS.muted,
+        size: 10.5,
         anchor: "end",
         mono: true,
       }));
+      elements.push(svgLine(left + axisWidth, label.y, x + panelWidth - 16, label.y, {
+        stroke: COLORS.grid,
+        "stroke-width": 1,
+      }));
     }
-    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 chartLeft = left + axisWidth + 6;
+    const chartWidth = x + panelWidth - 16 - chartLeft;
+    const slot = chartWidth / cacheBins.length;
+    const yForRate = (rate) =>
+      lineBottom - ((Math.max(floor, Math.min(100, rate)) - floor) / (100 - floor)) * lineHeight;
+
+    const linePoints = [];
+    cacheBins.forEach((bin, index) => {
+      if (!(bin.inputTokens > 0)) {
+        linePoints.push(null);
+        return;
+      }
+      linePoints.push({
+        x: chartLeft + (index + 0.5) * slot,
+        y: yForRate((bin.cachedInputTokens / bin.inputTokens) * 100),
+        rate: (bin.cachedInputTokens / bin.inputTokens) * 100,
+        estimated: bin.estimated,
+      });
+    });
+    for (let index = 0; index < linePoints.length - 1; index += 1) {
+      const from = linePoints[index];
+      const to = linePoints[index + 1];
+      if (!from || !to) continue;
+      elements.push(svgLine(from.x, from.y, to.x, to.y, {
+        stroke: COLORS.cache,
+        "stroke-width": 2,
+        "stroke-linecap": "round",
+      }));
+    }
+    const rateLabelStep = cacheBins.length <= 8 ? 1 : Math.ceil(cacheBins.length / 8);
+    const cacheDateLabelIndices = selectDateLabelIndices(cacheBins, {
+      timeZone,
+      slotWidth: slot,
+      labelStep: rateLabelStep,
+      labelSize: 10,
+      labelForBin: hourlyMode
+        ? (bin) => bin.hourLabel
+        : (bin) => binDateLabel(bin, timeZone),
+    });
+    linePoints.forEach((point, index) => {
+      if (!point) return;
+      elements.push(`<circle cx="${point.x.toFixed(2)}" cy="${point.y.toFixed(2)}" r="3.2" fill="${COLORS.cache}"/>`);
+      if (cacheDateLabelIndices.has(index)) {
+        elements.push(svgText({
+          x: point.x,
+          y: point.y - 8,
+          value: approximateLabel(pct(point.rate), point.estimated),
+          fill: COLORS.secondary,
+          size: 10.5,
+          anchor: "middle",
         }));
-        const cachedHeight = cachePlotHeight * (bin.rate / 100);
-        if (cachedHeight > 0) {
-          elements.push(svgRect(
-            barX,
-            cachePlotBottom - cachedHeight,
-            cacheBarWidth,
-            cachedHeight,
-            { rx: 2, fill: COLORS.cached },
-          ));
+      }
+    });
+
+    // Input-volume columns beneath the rate line.
+    const columnsTop = lineBottom + 26;
+    const columnsHeight = 44;
+    const columnsBottom = columnsTop + columnsHeight;
+    const maxInput = Math.max(...cacheBins.map((bin) => bin.inputTokens), 1);
+    elements.push(svgText({
+      x: left + axisWidth - 6,
+      y: columnsBottom - columnsHeight / 2 + 4,
+      value: "Input",
+      fill: COLORS.muted,
+      size: 10.5,
+      anchor: "end",
+    }));
+    cacheBins.forEach((bin, index) => {
+      const centerX = chartLeft + (index + 0.5) * slot;
+      const columnWidth = Math.min(30, Math.max(8, slot * 0.5));
+      if (bin.unobserved) {
+        elements.push(svgRect(
+          centerX - columnWidth / 2,
+          lineTop,
+          columnWidth,
+          columnsBottom - lineTop,
+          { fill: "rgba(255,255,255,.025)" },
+        ));
+      }
+      const columnHeight = (bin.inputTokens / maxInput) * columnsHeight;
+      if (columnHeight > 0.4) {
+        elements.push(svgRect(centerX - columnWidth / 2, columnsBottom - columnHeight, columnWidth, columnHeight, {
+          fill: COLORS.cache,
+          opacity: 0.85,
+          rx: 1.5,
+        }));
+      }
+      if (cacheDateLabelIndices.has(index)) {
+        if (bin.inputTokens > 0) {
+          elements.push(svgText({
+            x: centerX,
+            y: columnsBottom - columnHeight - 5,
+            value: approximateLabel(compact(bin.inputTokens), bin.estimated),
+            fill: COLORS.muted,
+            size: 10,
+            anchor: "middle",
+          }));
         }
-        if (showCacheRateLabels) {
+        if (bin.unobserved) {
           elements.push(svgText({
             x: centerX,
-            y: cachePlotTop - 9,
-            value: percent(bin.rate),
-            fill: COLORS.secondary,
-            size: 11.5,
-            weight: 700,
+            y: columnsBottom + 15,
+            value: "UNOBSERVED",
+            fill: COLORS.muted,
+            size: 8.5,
+            weight: 600,
+            spacing: "0.45",
+            anchor: "middle",
+          }));
+        } else {
+          elements.push(svgText({
+            x: centerX,
+            y: columnsBottom + 15,
+            value: hourlyMode ? bin.hourLabel : binDateLabel(bin, timeZone),
+            fill: COLORS.muted,
+            size: 10,
             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: plotRight + 8,
-        y: lineY + 4,
-        value: percent(cacheData.rate),
-        fill: COLORS.weighted,
-        size: 11.5,
-        weight: 700,
-        mono: true,
-      }));
-    }
-  } else {
+
+    // Summary strip.
+    const stripY = y + panelHeight - 32;
+    const approxUncached = vm.coverage.estimated;
     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,
+      x: left,
+      y: stripY + 15,
+      value: truncateToWidth(
+        `${approximateLabel(pct(summary.cacheRatePercent), summary.estimated)} input-weighted · ${approximateLabel(compact(summary.cachedInputTokens), summary.estimated)} of ${approximateLabel(compact(summary.inputTokens), summary.estimated)} input cached · ${approxUncached ? "≈" : ""}${compact(summary.uncachedInputTokens)} uncached`,
+        inner,
+        11,
+      ),
+      fill: COLORS.cache,
+      size: 11,
     }));
   }
 
-  // ---- 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",
-  }));
+  function buildProjectsPanel(x, y, panelWidth, panelHeight) {
+    panelHeading(x, y, "WHERE IT WENT · TOP PROJECTS");
+    elements.push(svgText({
+      x: x + panelWidth - 16,
+      y: y + 25,
+      value: `${summary.activeProjects} ${summary.activeProjects === 1 ? "project" : "projects"} active`,
+      fill: COLORS.muted,
+      size: 11.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) {
+    const rows = vm.projects.map((row, index) => ({
+      rank: String(index + 1).padStart(2, "0"),
+      name: options.private ? `Project ${index + 1}` : row.displayProject,
+      tokens: row.totalTokens,
+      share: row.sharePercent,
+      estimated: row.estimated,
+      muted: false,
+    }));
+    if (vm.projectRemainder.count > 0) {
+      rows.push({
+        rank: String(rows.length + 1).padStart(2, "0"),
+        name: vm.projectRemainder.count === 1
+          ? "1 other project"
+          : `${vm.projectRemainder.count} other projects`,
+        tokens: vm.projectRemainder.totalTokens,
+        share: vm.projectRemainder.sharePercent,
+        estimated: vm.projectRemainder.estimated,
+        muted: true,
+      });
+    }
+    while (rows.length < PROJECT_PANEL_ROW_COUNT) {
+      rows.push({
+        rank: String(rows.length + 1).padStart(2, "0"),
+        name: rows.length === 0 ? "No project activity in range" : "—",
+        empty: true,
+        muted: true,
+      });
+    }
+
+    const rowTop = y + 52;
+    const rowGap = 33;
+    const rankX = x + 16;
+    const nameX = rankX + 26;
+    const pctRight = x + panelWidth - 16;
+    const tokensRight = pctRight - 52;
+    const barWidth = Math.max(56, panelWidth * 0.2);
+    const barX = tokensRight - 66 - barWidth;
+    const nameWidth = barX - nameX - 12;
+    rows.forEach((row, index) => {
+      const centerY = rowTop + index * rowGap + 8;
+      elements.push(`<g data-role="project-row" data-kind="${row.empty ? "placeholder" : "data"}" data-baseline="${centerY + 4}">`);
       elements.push(svgText({
         x: rankX,
-        y: centerY + 5,
+        y: centerY + 4,
         value: row.rank,
         fill: COLORS.muted,
-        size: 13,
+        size: 12,
         mono: true,
       }));
+      elements.push(svgText({
+        x: nameX,
+        y: centerY + 4,
+        value: truncateToWidth(row.name, nameWidth, 13.5, row.muted ? 400 : 700),
+        fill: row.muted ? COLORS.muted : COLORS.ink,
+        size: 13.5,
+        weight: row.muted ? 400 : 700,
+      }));
+      if (!row.empty) {
+        elements.push(svgRect(barX, centerY - 4, barWidth, 9, {
+          rx: 2,
+          fill: COLORS.projectTrack,
+        }));
+        const fillWidth = (Math.max(0, Math.min(100, row.share)) / 100) * barWidth;
+        if (fillWidth > 0) {
+          elements.push(svgRect(barX, centerY - 4, fillWidth, 9, {
+            rx: 2,
+            fill: row.muted ? COLORS.remainderBar : COLORS.leftAxis,
+          }));
+        }
+        elements.push(svgText({
+          x: tokensRight,
+          y: centerY + 4,
+          value: approximateLabel(compact(row.tokens), row.estimated),
+          fill: row.muted ? COLORS.secondary : COLORS.ink,
+          size: 13.5,
+          weight: 700,
+          anchor: "end",
+        }));
+        elements.push(svgText({
+          x: pctRight,
+          y: centerY + 4,
+          value: approximateLabel(pct(row.share), summary.estimated),
+          fill: COLORS.muted,
+          size: 12,
+          anchor: "end",
+        }));
+      }
+      elements.push("</g>");
+    });
+
+    if (summary.topFourProjectSharePercent !== null && vm.projects.length) {
+      const stripY = y + panelHeight - 32;
+      elements.push(svgText({
+        x: x + 16,
+        y: stripY + 15,
+        value: `Top ${Math.min(4, vm.projects.length)} projects = ${approximateLabel(pct(summary.topFourProjectSharePercent), summary.estimated)} of tokens`,
+        fill: COLORS.leftAxis,
+        size: 11.5,
+      }));
     }
-    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,
+  }
+
+  function buildModelCachePanel(x, y, panelWidth, panelHeight) {
+    panelHeading(x, y, "CACHE EFFICIENCY BY MODEL", "(input-weighted)");
+
+    // Combine minor models past the fourth row so the table always fits.
+    const source = vm.models.filter((row) => row.totalTokens > 0);
+    const rows = source.slice(0, 4).map((row) => ({ ...row }));
+    const overflow = source.slice(4);
+    if (overflow.length) {
+      const merged = overflow.reduce(
+        (sum, row) => {
+          sum.cacheInputTokens += row.cacheInputTokens;
+          sum.cachedInputTokens += row.cachedInputTokens;
+          sum.estimated ||= row.estimated === true;
+          return sum;
+        },
+        {
+          model: `${overflow.length} other models`,
+          cacheInputTokens: 0,
+          cachedInputTokens: 0,
+          estimated: false,
+        },
+      );
+      // A single overflow row is still one identifiable model. Naming it
+      // directly avoids making its cache rate look like an unexplained
+      // aggregate; reserve the aggregate label for real multi-model overflow.
+      merged.model = overflow.length === 1
+        ? overflow[0].model
+        : `${overflow.length} other models`;
+      merged.uncachedInputTokens = Math.max(
+        0,
+        merged.cacheInputTokens - merged.cachedInputTokens,
+      );
+      merged.cacheRatePercent = merged.cacheInputTokens > 0
+        ? (merged.cachedInputTokens / merged.cacheInputTokens) * 100
+        : null;
+      merged.combined = overflow.length > 1;
+      rows.push(merged);
+    }
+    if (!rows.length) {
+      elements.push(svgText({
+        x: x + 16,
+        y: y + 60,
+        value: "No measured input-token breakdown in this range",
+        fill: COLORS.muted,
+        size: 12.5,
       }));
+      return;
     }
+
+    const inputRight = x + panelWidth - 104;
+    const uncachedRight = x + panelWidth - 16;
     elements.push(svgText({
-      x: tokensRight,
-      y: centerY + 5,
-      value: compact(row.tokens),
-      fill: row.muted ? COLORS.secondary : COLORS.ink,
-      size: 15,
-      weight: 700,
+      x: inputRight,
+      y: y + 47,
+      value: "INPUT",
+      fill: COLORS.muted,
+      size: 10.5,
+      spacing: "0.84",
       anchor: "end",
     }));
     elements.push(svgText({
-      x: leftColumnRight,
-      y: centerY + 5,
-      value: percent(share),
+      x: uncachedRight,
+      y: y + 47,
+      value: "UNCACHED",
       fill: COLORS.muted,
-      size: 13.5,
+      size: 10.5,
+      spacing: "0.84",
       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) {
+    const rowTop = y + 64;
+    const rowGap = 33;
+    const nameX = x + 30;
+    const rateX = x + Math.min(150, panelWidth * 0.34);
+    const barX = rateX + 52;
+    const barWidth = Math.max(44, inputRight - 66 - barX);
+    rows.forEach((row, index) => {
+      const centerY = rowTop + index * rowGap;
+      elements.push(`<g data-role="model-cache-row" data-baseline="${centerY}">`);
+      if (!row.combined) {
+        elements.push(`<circle cx="${x + 19}" cy="${centerY - 4}" r="4" fill="${styleForModel(row.model)}"/>`);
+      }
+      elements.push(svgText({
+        x: nameX,
+        y: centerY,
+        value: truncateToWidth(row.model, rateX - nameX - 8, 13, row.combined ? 400 : 600),
+        fill: row.combined ? COLORS.muted : COLORS.ink,
+        size: 13,
+        weight: row.combined ? 400 : 600,
+      }));
+      const hasComponents = row.cacheRatePercent !== null;
+      elements.push(svgText({
+        x: rateX + 44,
+        y: centerY,
+        value: hasComponents
+          ? approximateLabel(pct(row.cacheRatePercent), row.estimated)
+          : "—",
+        fill: COLORS.ink,
+        size: 13,
+        weight: 700,
+        anchor: "end",
+        mono: true,
+      }));
+      if (hasComponents && barWidth > 30) {
+        elements.push(svgRect(barX, centerY - 8, barWidth, 8, {
+          rx: 2,
+          fill: COLORS.track,
+        }));
+        const cachedWidth = (row.cacheRatePercent / 100) * barWidth;
+        if (cachedWidth > 0) {
+          elements.push(svgRect(barX, centerY - 8, cachedWidth, 8, {
+            rx: 2,
+            fill: COLORS.cache,
+          }));
+        }
+        if (barWidth - cachedWidth > 0.5) {
+          elements.push(svgRect(barX + cachedWidth, centerY - 8, barWidth - cachedWidth, 8, {
+            fill: COLORS.uncached,
+            rx: 2,
+          }));
+        }
+      }
+      elements.push(svgText({
+        x: inputRight,
+        y: centerY,
+        value: hasComponents
+          ? approximateLabel(compact(row.cacheInputTokens), row.estimated)
+          : "—",
+        fill: COLORS.secondary,
+        size: 12.5,
+        anchor: "end",
+        mono: true,
+      }));
+      elements.push(svgText({
+        x: uncachedRight,
+        y: centerY,
+        value: hasComponents
+          ? approximateLabel(compact(row.uncachedInputTokens), row.estimated)
+          : "—",
+        fill: COLORS.secondary,
+        size: 12.5,
+        anchor: "end",
+        mono: true,
+      }));
+      elements.push("</g>");
+    });
+
     elements.push(svgText({
-      x: modelColumnX,
-      y: bottomTop + 29 + 14,
-      value: "No measured input to break out.",
-      fill: COLORS.secondary,
-      size: 13,
+      x: x + 16,
+      y: y + panelHeight - 15,
+      value: "Uncached = input not served from cache (input-weighted)",
+      fill: COLORS.muted,
+      size: 11,
     }));
   }
-  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,
-      }));
+
+  function buildLowerSection(top) {
+    const gap = 14;
+    const projectRowCount = PROJECT_PANEL_ROW_COUNT;
+    const modelRowCount = Math.min(5, vm.models.filter((r) => r.totalTokens > 0).length || 1);
+    const cacheHeight = 258;
+    const projectsHeight = Math.max(150, 44 + projectRowCount * 33 + 46);
+    const modelHeight = Math.max(150, 64 + modelRowCount * 33 + 30);
+    if (wide) {
+      const height = Math.max(cacheHeight, projectsHeight, modelHeight);
+      const cacheWidth = contentWidth * 0.36;
+      const projectsWidth = contentWidth * 0.31 - gap;
+      const modelWidth = contentWidth - cacheWidth - projectsWidth - gap * 2;
+      addVerticalDivider(
+        outer + cacheWidth + gap / 2,
+        top,
+        height,
+        "lower-column-divider",
+      );
+      addVerticalDivider(
+        outer + cacheWidth + gap + projectsWidth + gap / 2,
+        top,
+        height,
+        "lower-column-divider",
+      );
+      buildCacheByDayPanel(outer, top, cacheWidth, height);
+      buildProjectsPanel(outer + cacheWidth + gap, top, projectsWidth, height);
+      buildModelCachePanel(outer + cacheWidth + projectsWidth + gap * 2, top, modelWidth, height);
+      return top + height;
     }
-    elements.push(svgText({
-      x: contentRight,
-      y: centerY + 4,
-      value: compact(model.inputTokens),
-      fill: COLORS.secondary,
-      size: 12.5,
-      weight: 700,
-      anchor: "end",
-      mono: true,
-    }));
-  });
+    buildCacheByDayPanel(outer, top, contentWidth, cacheHeight);
+    const rowTop = top + cacheHeight + gap;
+    const half = (contentWidth - gap) / 2;
+    const rowHeight = Math.max(projectsHeight, modelHeight);
+    addVerticalDivider(
+      outer + half + gap / 2,
+      rowTop,
+      rowHeight,
+      "lower-column-divider",
+    );
+    buildProjectsPanel(outer, rowTop, half, rowHeight);
+    buildModelCachePanel(outer + half + gap, rowTop, half, rowHeight);
+    return rowTop + rowHeight;
+  }
 
-  elements.push("</svg>");
-  return elements.join("\n");
+  // ---------------------------------------------------------------- compose
+  const body = [];
+  const headerBottom = buildHeaderSection();
+  const kpiBottom = buildKpiSection(headerBottom + 10);
+  const mixBottom = buildModelMixSection(kpiBottom + 10);
+  const chartBottom = buildDailyChartSection(mixBottom + 10);
+  const lowerBottom = buildLowerSection(chartBottom + 14);
+  const height = Math.ceil(lowerBottom + 16);
+
+  const description =
+    "Dark report card: total usage, input-weighted cache efficiency, fast-mode share, and active-project KPI cards beside the sampled weekly-limit state; a model-mix strip; stacked daily token columns by model with hatched fast-mode overlays and the sampled weekly meter drawn as solid confirmed intervals and dashed unobserved gaps; plus daily cache efficiency, top projects, and per-model cache tables.";
+  body.push(
+    `<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 · ${meta.rangeDays}-day trend`)}</title>`,
+    `<desc id="trend-description">${escapeXml(description)}</desc>`,
+    defs,
+    `<rect width="100%" height="100%" fill="${COLORS.background}"/>`,
+    ...elements,
+    "</svg>",
+  );
+  return body.join("\n");
 }
 
 export async function writeTrendPng(svg, outputPath) {