zidane-ui 9.0.4 → 9.1.3

package/dist/session/WelcomeScreen.js

@@ -1,526 +1,70 @@
-import { MetaChip } from "../components/Form.js";
-import { buildHeatmapGrid, buildStackedSeries, formatCost, formatHour, formatTokens, shortDayLabel } from "./headless/usage-format.js";
 import { useSessionLabels } from "./useSessionLabels.js";
-import { USAGE_RANGES } from "./headless/usage.js";
+import { PanelContentView } from "../workspace/PanelContentView.js";
+import { ExtensionSlot } from "../extensions/ExtensionSlot.js";
 import { useUsageSummary } from "./useUsageSummary.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
+import { usageBlockContent, usageBlockView } from "zidane/chat/pure";
 //#region src/session/WelcomeScreen.tsx
-/**
-* The welcome screen: a greeting, then the usage card (Overview: totals,
-* streaks and a 26-week activity heatmap; Models: daily tokens by model and
-* spend by provider), switchable by range. It is the new-chat surface: the
-* first send replaces it with the transcript.
-*
-* Data is the host's `usage.summary` through `useUsageSummary` (the last
-* numbers on the first frame, refreshed behind them); without it only the
-* greeting shows. Model and heatmap colors are an accent ramp derived with
-* `color-mix`, no palette entries of their own.
-*/
-/** Accent ramp for model series: index 0 is the biggest model. */
-const MODEL_RAMP = [
-	"var(--zg-accent)",
-	"color-mix(in srgb, var(--zg-accent) 62%, var(--zg-text))",
-	"color-mix(in srgb, var(--zg-accent) 52%, var(--zg-raised))",
-	"color-mix(in srgb, var(--zg-accent) 36%, var(--zg-raised))",
-	"color-mix(in srgb, var(--zg-accent) 24%, var(--zg-raised))"
-];
-const OTHER_COLOR = "color-mix(in srgb, var(--zg-text-muted) 40%, var(--zg-raised))";
-/** Heatmap intensity ramp (level 1-4); level 0 is a quiet track tint. */
-const HEAT_RAMP = [
-	"var(--zg-track)",
-	"color-mix(in srgb, var(--zg-accent) 22%, var(--zg-raised))",
-	"color-mix(in srgb, var(--zg-accent) 42%, var(--zg-raised))",
-	"color-mix(in srgb, var(--zg-accent) 68%, var(--zg-raised))",
-	"var(--zg-accent)"
-];
-const ownId = (id) => id;
+const noAction = () => {};
 /**
 * Renders the greeting and the usage card.
 *
 * @param props - `modelName`, `now`, `className` and `style`.
 */
-function WelcomeScreen({ modelName = ownId, now: nowProp, className = "", style }) {
+function WelcomeScreen({ modelName, now: nowProp, className = "", style }) {
 	const labels = useSessionLabels();
-	const [range, setRange] = useState("all");
-	const [tab, setTab] = useState("overview");
+	const [view, setView] = useState({});
+	const { range } = usageBlockView(view);
 	const { summary, standIn, available } = useUsageSummary(range);
 	const now = useMemo(() => nowProp ?? /* @__PURE__ */ new Date(), [nowProp]);
-	const name = summary?.userName ?? null;
-	const isEmpty = summary !== null && !standIn && summary.sessions === 0 && summary.messages === 0;
+	const content = useMemo(() => summary ? usageBlockContent(summary, {
+		...view,
+		range: summary.range
+	}, {
+		now,
+		project: false,
+		...modelName ? { modelName } : {}
+	}) : null, [
+		summary,
+		view,
+		now,
+		modelName
+	]);
+	const onControl = useCallback((id, value) => setView((v) => ({
+		...v,
+		[id]: value
+	})), []);
 	return /* @__PURE__ */ jsxs("div", {
 		className: `zg-welcome-in mx-auto w-full max-w-[680px] pt-0 pb-8 text-zg-ui text-[var(--zg-text)] ${className}`,
 		style,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "mb-7 px-1",
-			children: [/* @__PURE__ */ jsx("h1", {
-				className: "text-zg-title leading-7 font-medium tracking-[-0.01em] m-0",
-				children: labels.welcomeGreeting(now.getHours(), name)
-			}), /* @__PURE__ */ jsx("p", {
-				className: "m-0 mt-1 text-zg-label leading-4 text-[var(--zg-text-muted)]",
-				children: labels.welcomeDate(now)
-			})]
-		}), !available ? null : isEmpty ? /* @__PURE__ */ jsx("p", {
-			className: "px-1 text-zg-label text-[var(--zg-text-muted)]",
-			children: labels.welcomeNoUsage
-		}) : /* @__PURE__ */ jsxs("section", {
-			"aria-label": labels.welcomeUsageLabel,
-			"aria-busy": summary === null || standIn,
-			className: "zg-raised border rounded-zg-xl overflow-hidden p-4",
-			children: [/* @__PURE__ */ jsxs("header", {
-				className: "flex items-center justify-between gap-3",
-				children: [/* @__PURE__ */ jsx("div", {
-					role: "tablist",
-					"aria-label": labels.welcomeViewLabel,
-					className: "zg-segment",
-					children: ["overview", "models"].map((t) => /* @__PURE__ */ jsx(SegmentItem, {
-						role: "tab",
-						active: tab === t,
-						onClick: () => setTab(t),
-						children: t === "overview" ? labels.welcomeOverview : labels.welcomeModels
-					}, t))
-				}), /* @__PURE__ */ jsx("div", {
-					role: "group",
-					"aria-label": labels.welcomeRangeLabel,
-					className: "zg-segment",
-					children: USAGE_RANGES.map((r) => /* @__PURE__ */ jsx(SegmentItem, {
-						active: range === r,
-						onClick: () => setRange(r),
-						children: labels.welcomeRange[r]
-					}, r))
-				})]
-			}), /* @__PURE__ */ jsx("div", {
-				"data-stand-in": standIn || void 0,
-				className: "data-[stand-in]:opacity-55",
-				style: { transition: "opacity var(--zg-motion-fade)" },
-				children: tab === "overview" ? /* @__PURE__ */ jsx(OverviewTab, {
-					summary,
-					now,
-					modelName
-				}) : /* @__PURE__ */ jsx(ModelsTab, {
-					summary,
-					now,
-					modelName
-				})
-			})]
-		})]
-	});
-}
-function SegmentItem({ active, onClick, role, children }) {
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		role,
-		"aria-selected": role === "tab" ? active : void 0,
-		"aria-pressed": role === "tab" ? void 0 : active,
-		onClick,
-		"data-active": active ? "" : void 0,
-		className: `zg-segment-item zg-press-subtle h-6 px-2.5 rounded-full border-0 bg-transparent text-zg-meta cursor-pointer ${active ? "text-[var(--zg-text)] font-medium" : "text-[var(--zg-text-muted)]"}`,
-		children
-	});
-}
-/** A value not loaded yet: the box of `sample`, in the track tone. */
-function Pending({ sample }) {
-	return /* @__PURE__ */ jsx("span", {
-		"aria-hidden": true,
-		className: "zg-skeleton",
-		children: sample
-	});
-}
-function StatTile({ label, value, hint, sample }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "min-w-0",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "text-zg-body leading-5 font-medium tabular-nums truncate",
-			title: hint,
-			children: value ?? /* @__PURE__ */ jsx(Pending, { sample })
-		}), /* @__PURE__ */ jsx("div", {
-			className: "mt-0.5 text-[length:var(--zg-font-size-meta)] leading-4 text-[var(--zg-text-muted)] truncate",
-			children: label
-		})]
-	});
-}
-function OverviewTab({ summary, now, modelName }) {
-	const labels = useSessionLabels();
-	const comparison = summary && labels.welcomeTokenComparison(summary.totalTokens, Math.floor((now.getTime() - new Date(now.getFullYear(), 0, 0).getTime()) / 864e5));
-	const s = summary;
-	return /* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsxs("div", {
-			className: "grid grid-cols-4 gap-x-4 gap-y-3.5 mt-4",
-			children: [
-				/* @__PURE__ */ jsx(StatTile, {
-					label: labels.welcomeSessions,
-					sample: "000",
-					value: s && s.sessions.toLocaleString("en-US")
-				}),
-				/* @__PURE__ */ jsx(StatTile, {
-					label: labels.welcomeMessages,
-					sample: "00,000",
-					value: s && s.messages.toLocaleString("en-US")
-				}),
-				/* @__PURE__ */ jsx(StatTile, {
-					label: labels.welcomeTotalTokens,
-					sample: "00.0M",
-					value: s && formatTokens(s.totalTokens),
-					...s ? { hint: labels.welcomeTokensExact(s.totalTokens) } : {}
-				}),
-				/* @__PURE__ */ jsx(StatTile, {
-					label: labels.welcomeActiveDays,
-					sample: "00",
-					value: s && String(s.activeDays)
-				}),
-				/* @__PURE__ */ jsx(StatTile, {
-					label: labels.welcomeCurrentStreak,
-					sample: "0 days",
-					value: s && labels.welcomeDays(s.currentStreak)
-				}),
-				/* @__PURE__ */ jsx(StatTile, {
-					label: labels.welcomeLongestStreak,
-					sample: "00 days",
-					value: s && labels.welcomeDays(s.longestStreak)
-				}),
-				/* @__PURE__ */ jsx(StatTile, {
-					label: labels.welcomePeakHour,
-					sample: "00 pm",
-					value: s && (s.peakHour === null ? labels.welcomeNoneYet : formatHour(s.peakHour))
-				}),
-				/* @__PURE__ */ jsx(StatTile, {
-					label: labels.welcomeFavoriteModel,
-					sample: "Model name",
-					value: s && (s.favoriteModel === null ? labels.welcomeNoneYet : modelName(s.favoriteModel)),
-					...s?.favoriteModel ? { hint: s.favoriteModel } : {}
-				})
-			]
-		}),
-		/* @__PURE__ */ jsx("div", {
-			className: "mt-4 pt-4 border-t border-[var(--zg-hairline)]",
-			children: /* @__PURE__ */ jsx(Heatmap, {
-				days: summary?.heatmap ?? null,
-				now
-			})
-		}),
-		/* @__PURE__ */ jsx("p", {
-			className: "m-0 mt-3.5 text-zg-label leading-4 text-[var(--zg-text-muted)] truncate",
-			children: summary === null ? /* @__PURE__ */ jsx(Pending, { sample: labels.welcomeComparisonSample }) : comparison ?? "\xA0"
-		})
-	] });
-}
-const CELL = 9;
-const GAP = 4;
-const SLOT = 13;
-const Heatmap = memo(function Heatmap({ days, now }) {
-	const labels = useSessionLabels();
-	const grid = useMemo(() => buildHeatmapGrid(days ?? [], now), [days, now]);
-	const [hover, setHover] = useState(null);
-	const hostRef = useRef(null);
-	const width = grid.weeks * SLOT - GAP;
-	const height = 87;
-	const rects = useMemo(() => grid.cells.map((cell, i) => /* @__PURE__ */ jsx("rect", {
-		"data-i": i,
-		x: cell.week * SLOT,
-		y: cell.weekday * SLOT,
-		width: CELL,
-		height: CELL,
-		rx: 2.25,
-		fill: HEAT_RAMP[cell.level]
-	}, cell.day)), [grid]);
-	return /* @__PURE__ */ jsxs("div", {
-		ref: hostRef,
-		className: "relative",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "zg-section-label",
-					children: labels.welcomeActivity
-				}), /* @__PURE__ */ jsxs("span", {
-					"aria-hidden": true,
-					className: "flex items-center gap-[3px] text-zg-badge leading-4 text-[var(--zg-text-muted)]",
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "mr-0.5",
-							children: labels.welcomeLess
-						}),
-						HEAT_RAMP.map((c) => /* @__PURE__ */ jsx("span", {
-							className: "inline-block w-[7px] h-[7px] rounded-[2px]",
-							style: { background: c }
-						}, c)),
-						/* @__PURE__ */ jsx("span", {
-							className: "ml-0.5",
-							children: labels.welcomeMore
-						})
-					]
+				className: "mb-7 px-1",
+				children: [/* @__PURE__ */ jsx("h1", {
+					className: "text-zg-title leading-7 font-medium tracking-[-0.01em] m-0",
+					children: labels.welcomeGreeting(now.getHours(), summary?.userName ?? null)
+				}), /* @__PURE__ */ jsx("p", {
+					className: "m-0 mt-1 text-zg-label leading-4 text-[var(--zg-text-muted)]",
+					children: labels.welcomeDate(now)
 				})]
 			}),
-			/* @__PURE__ */ jsx("div", {
-				"aria-hidden": true,
-				className: "relative h-4 mt-2.5 text-zg-badge leading-4 text-[var(--zg-text-muted)]",
-				children: grid.monthLabels.map(([week, label]) => /* @__PURE__ */ jsx("span", {
-					className: "absolute top-0",
-					style: { left: `${week * SLOT / width * 100}%` },
-					children: label
-				}, `${week}-${label}`))
-			}),
-			/* @__PURE__ */ jsx("svg", {
-				width: "100%",
-				viewBox: `0 0 ${width} ${height}`,
-				preserveAspectRatio: "xMinYMin meet",
-				role: "img",
-				"aria-label": labels.welcomeHeatmapLabel,
-				className: "block mt-1",
-				onMouseMove: (e) => {
-					const index = e.target.getAttribute("data-i");
-					const cell = index === null || days === null ? void 0 : grid.cells[Number(index)];
-					const host = hostRef.current?.getBoundingClientRect();
-					if (!cell || !host) return;
-					setHover((prev) => prev?.cell === cell ? prev : {
-						cell,
-						x: e.clientX - host.left,
-						y: e.clientY - host.top,
-						width: host.width
-					});
-				},
-				onMouseLeave: () => setHover(null),
-				children: rects
+			/* @__PURE__ */ jsx(ExtensionSlot, {
+				at: "home.block",
+				className: "mb-3 px-1 flex-wrap"
 			}),
-			hover !== null && /* @__PURE__ */ jsxs("div", {
-				role: "tooltip",
-				className: "absolute z-10 pointer-events-none flex flex-col gap-1 px-2 py-1.5 rounded-zg-sm bg-[var(--zg-overlay)] shadow-[var(--zg-shadow-float)] text-zg-meta whitespace-nowrap",
-				style: {
-					left: Math.max(0, Math.min(hover.x - 60, hover.width - 200)),
-					top: hover.y + 16
-				},
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-[var(--zg-text)]",
-					children: labels.welcomeDay(hover.cell.day)
-				}), /* @__PURE__ */ jsxs("span", {
-					className: "flex gap-1 tabular-nums",
-					children: [/* @__PURE__ */ jsx(MetaChip, { children: labels.welcomeTokens(formatTokens(hover.cell.tokens)) }), /* @__PURE__ */ jsx(MetaChip, { children: labels.welcomeMessageCount(hover.cell.messages) })]
-				})]
-			})
-		]
-	});
-});
-const TOP_MODELS = 5;
-function ModelsTab({ summary, now, modelName }) {
-	if (summary === null) return /* @__PURE__ */ jsx("div", {
-		className: "mt-4",
-		children: /* @__PURE__ */ jsx(StackedChart, {
-			series: [],
-			colorFor: () => OTHER_COLOR,
-			placeholder: true
-		})
-	});
-	return /* @__PURE__ */ jsx(ModelsBody, {
-		summary,
-		now,
-		modelName
-	});
-}
-const percent = (share) => share >= 1 ? Math.round(share) : share.toFixed(1);
-function ModelsBody({ summary, now, modelName }) {
-	const labels = useSessionLabels();
-	const top = summary.models.slice(0, TOP_MODELS);
-	const rest = summary.models.slice(TOP_MODELS);
-	const hasOther = rest.length > 0;
-	const spanDays = useMemo(() => {
-		if (summary.range === "7d") return 7;
-		if (summary.range === "30d") return 30;
-		const first = summary.modelDaily[0]?.day;
-		if (!first) return 30;
-		const [y, m, d] = first.split("-").map(Number);
-		const days = Math.floor((now.getTime() - new Date(y, m - 1, d).getTime()) / 864e5) + 1;
-		return Math.max(7, Math.min(120, days));
-	}, [summary, now]);
-	const series = useMemo(() => buildStackedSeries(summary.modelDaily, top.map((m) => m.modelId), now, spanDays, hasOther), [
-		summary.modelDaily,
-		top,
-		now,
-		spanDays,
-		hasOther
-	]);
-	const colorFor = (i) => i < TOP_MODELS ? MODEL_RAMP[i] : OTHER_COLOR;
-	const totalTokensAll = summary.models.reduce((a, m) => a + m.tokensIn + m.tokensOut, 0);
-	const totalCost = summary.providers.reduce((a, p) => a + p.cost, 0);
-	const maxProviderCost = summary.providers[0]?.cost ?? 0;
-	return /* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsx("div", {
-			className: "mt-4",
-			children: /* @__PURE__ */ jsx(StackedChart, {
-				series,
-				colorFor
-			})
-		}),
-		/* @__PURE__ */ jsxs("ul", {
-			className: "list-none m-0 mt-4 p-0 flex flex-col gap-2",
-			children: [top.map((m, i) => {
-				const share = totalTokensAll > 0 ? (m.tokensIn + m.tokensOut) / totalTokensAll * 100 : 0;
-				return /* @__PURE__ */ jsxs("li", {
-					className: "flex items-center gap-2.5 min-w-0",
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							"aria-hidden": true,
-							className: "inline-block w-[8px] h-[8px] rounded-[2px] shrink-0",
-							style: { background: colorFor(i) }
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "truncate",
-							title: m.modelId,
-							children: modelName(m.modelId)
-						}),
-						/* @__PURE__ */ jsxs("span", {
-							className: "flex gap-1",
-							children: [/* @__PURE__ */ jsx(MetaChip, { children: labels.welcomeTokensIn(formatTokens(m.tokensIn)) }), /* @__PURE__ */ jsx(MetaChip, { children: labels.welcomeTokensOut(formatTokens(m.tokensOut)) })]
-						}),
-						/* @__PURE__ */ jsxs("span", {
-							className: "zg-meta ml-auto pl-3",
-							children: [percent(share), "%"]
-						})
-					]
-				}, m.modelId);
-			}), hasOther && /* @__PURE__ */ jsxs("li", {
-				className: "flex items-center gap-2.5 min-w-0",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						"aria-hidden": true,
-						className: "inline-block w-[8px] h-[8px] rounded-[2px] shrink-0",
-						style: { background: OTHER_COLOR }
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "text-[var(--zg-text-muted)]",
-						children: labels.welcomeOtherModels(rest.length)
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "zg-meta ml-auto pl-3",
-						children: totalTokensAll > 0 ? `${Math.max(0, Math.round(rest.reduce((a, m) => a + m.tokensIn + m.tokensOut, 0) / totalTokensAll * 100))}%` : "0%"
-					})
-				]
-			})]
-		}),
-		summary.providers.length > 0 && /* @__PURE__ */ jsxs("div", {
-			className: "mt-4 pt-4 border-t border-[var(--zg-hairline)]",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "zg-section-label",
-						children: labels.welcomeSpend
-					}), /* @__PURE__ */ jsx("span", {
-						className: "zg-meta",
-						children: labels.welcomeSpendTotal(formatCost(totalCost))
-					})]
-				}),
-				/* @__PURE__ */ jsx("ul", {
-					className: "list-none m-0 mt-3 p-0 flex flex-col gap-2.5",
-					children: summary.providers.map((p) => {
-						const share = totalCost > 0 ? p.cost / totalCost * 100 : 0;
-						const barPct = maxProviderCost > 0 ? p.cost / maxProviderCost * 100 : 0;
-						return /* @__PURE__ */ jsxs("li", {
-							className: "grid grid-cols-[110px_1fr_auto_auto] items-center gap-3",
-							children: [
-								/* @__PURE__ */ jsx("span", {
-									className: "truncate",
-									children: p.provider
-								}),
-								/* @__PURE__ */ jsx("span", {
-									"aria-hidden": true,
-									className: "h-[4px] rounded-full overflow-hidden bg-[var(--zg-track)]",
-									children: /* @__PURE__ */ jsx("span", {
-										className: "block h-full rounded-full",
-										style: {
-											width: `${Math.max(1.5, barPct)}%`,
-											background: "color-mix(in srgb, var(--zg-accent) 70%, var(--zg-raised))"
-										}
-									})
-								}),
-								/* @__PURE__ */ jsx("span", {
-									className: "zg-meta !text-[var(--zg-text)]",
-									children: formatCost(p.cost)
-								}),
-								/* @__PURE__ */ jsxs("span", {
-									className: "zg-meta w-[38px] text-right",
-									children: [percent(share), "%"]
-								})
-							]
-						}, p.provider);
-					})
-				}),
-				/* @__PURE__ */ jsx("p", {
-					className: "m-0 mt-3 text-zg-meta leading-4 text-[var(--zg-text-muted)] opacity-80",
-					children: labels.welcomeSpendCaption
+			available && /* @__PURE__ */ jsx("section", {
+				"aria-label": labels.welcomeUsageLabel,
+				className: "zg-raised border rounded-zg-xl overflow-hidden p-4",
+				children: /* @__PURE__ */ jsx(PanelContentView, {
+					variant: "block",
+					content,
+					loading: summary === null || standIn,
+					error: null,
+					onAction: noAction,
+					onControl
 				})
-			]
-		})
-	] });
-}
-const CHART_W = 600;
-const CHART_H = 120;
-function StackedChart({ series, colorFor, placeholder = false }) {
-	const labels = useSessionLabels();
-	const max = series.reduce((a, d) => Math.max(a, d.total), 0);
-	if (placeholder) return /* @__PURE__ */ jsx("svg", {
-		width: "100%",
-		viewBox: `0 0 ${CHART_W} 136`,
-		"aria-hidden": true,
-		className: "block",
-		children: /* @__PURE__ */ jsx("line", {
-			x1: 0,
-			y1: 120.5,
-			x2: CHART_W,
-			y2: 120.5,
-			stroke: "var(--zg-hairline)",
-			strokeWidth: 1
-		})
-	});
-	if (max === 0) return /* @__PURE__ */ jsx("div", {
-		className: "h-[80px] flex items-center justify-center text-zg-label text-[var(--zg-text-muted)]",
-		children: labels.welcomeNoModelActivity
-	});
-	const n = series.length;
-	const slot = CHART_W / n;
-	const barW = Math.max(1, Math.min(slot - 2, slot * .72));
-	const labelEvery = Math.max(1, Math.ceil(n / 4));
-	const axis = series.map((d, i) => [i, d.day]).filter(([i]) => i % labelEvery === Math.floor(labelEvery / 2));
-	return /* @__PURE__ */ jsxs("svg", {
-		width: "100%",
-		viewBox: `0 0 ${CHART_W} 136`,
-		role: "img",
-		"aria-label": labels.welcomeChartLabel,
-		className: "block",
-		children: [
-			/* @__PURE__ */ jsx("line", {
-				x1: 0,
-				y1: 120.5,
-				x2: CHART_W,
-				y2: 120.5,
-				stroke: "var(--zg-hairline)",
-				strokeWidth: 1
-			}),
-			series.map((d, i) => {
-				if (d.total === 0) return null;
-				const x = i * slot + (slot - barW) / 2;
-				let y = CHART_H;
-				return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("title", { children: labels.welcomeBarTitle(shortDayLabel(d.day), formatTokens(d.total)) }), d.values.map((v, vi) => {
-					if (v <= 0) return null;
-					const h = Math.max(.75, v / max * 114);
-					y -= h;
-					return /* @__PURE__ */ jsx("rect", {
-						x,
-						y,
-						width: barW,
-						height: h,
-						fill: colorFor(vi),
-						rx: barW > 4 ? 1 : 0
-					}, vi);
-				})] }, d.day);
-			}),
-			axis.map(([i, day]) => /* @__PURE__ */ jsx("text", {
-				x: i * slot + slot / 2,
-				y: 132,
-				textAnchor: "middle",
-				fontSize: 9,
-				className: "fill-[var(--zg-text-muted)]",
-				children: shortDayLabel(day)
-			}, day))
+			})
 		]
 	});
 }

package/dist/session/headless/fixture-host.js

@@ -53,6 +53,45 @@ function createFixtureSessionHost(fixture = {}) {
 	};
 	const turnsOf = (sessionId) => turnLists.get(sessionId) ?? [];
 	const { usage: summaries, providerUsage, githubUsage } = fixture;
+	let heldUsage = providerUsage;
+	const redeemReset = async (target) => {
+		const found = heldUsage?.find((s) => s.providerKey === target.providerKey && s.credentialKey === target.credentialKey);
+		if (!found?.resets || found.resets.available <= 0) return {
+			code: "no_credit",
+			windowsReset: 0,
+			error: null
+		};
+		const used = found.windows.filter((w) => w.usedPercent > 0);
+		if (used.length === 0) return {
+			code: "nothing_to_reset",
+			windowsReset: 0,
+			error: null
+		};
+		const credits = found.resets.credits;
+		if (target.creditId && !credits?.some((c) => c.id === target.creditId)) return {
+			code: "no_credit",
+			windowsReset: 0,
+			error: null
+		};
+		const spent = target.creditId ?? credits?.[0]?.id;
+		const next = {
+			...found,
+			windows: found.windows.map((w) => ({
+				...w,
+				usedPercent: 0
+			})),
+			resets: {
+				available: found.resets.available - 1,
+				...credits ? { credits: credits.filter((c) => c.id !== spent) } : {}
+			}
+		};
+		heldUsage = heldUsage.map((s) => s === found ? next : s);
+		return {
+			code: "reset",
+			windowsReset: used.length,
+			error: null
+		};
+	};
 	const sides = fixture.sides ? new Map(Object.entries(fixture.sides)) : null;
 	let sideSeq = 0;
 	const snapshotOf = (sessionId) => {
@@ -211,7 +250,10 @@ function createFixtureSessionHost(fixture = {}) {
 				if (!summary) throw new Error(`No usage summary for ${range}`);
 				return summary;
 			} } : {},
-			...providerUsage ? { providers: async () => providerUsage } : {},
+			...providerUsage ? {
+				providers: async () => heldUsage,
+				redeemReset
+			} : {},
 			...githubUsage ? { github: async () => githubUsage } : {}
 		} } : {},
 		...sides ? { side: {