@oh-my-pi/omp-stats 18.16.0 → 18.17.0

package/src/client/spotlight/Savings.tsx

@@ -0,0 +1,355 @@
+import { useMemo, useState } from "react";
+import { type ChartSeries, Legend, TimeChart, Waterfall, type WaterfallStep } from "../charts";
+import { formatCompact, formatCost, formatInteger } from "../data/formatters";
+import { bucketAxis, rangeMeta } from "../data/range";
+import { densify } from "../data/series";
+import type { SpotlightAdjustedTool, SpotlightDashboardStats, SpotlightToolRow, TimeRange } from "../types";
+import { Card, Segmented } from "../ui";
+import {
+	bucketNoun,
+	formatInterval,
+	formatShare,
+	formatSignedCompact,
+	formatSignedCost,
+	foldTools,
+	OTHER_TOOLS,
+	RECOVERY_KIND,
+	RECOVERY_KINDS,
+	toolIcon,
+} from "./meta";
+
+type Unit = "tokens" | "usd";
+
+const UNIT_OPTIONS = [
+	{ value: "tokens", label: "Tokens" },
+	{ value: "usd", label: "$" },
+] as const;
+
+function UnitToggle({ value, onChange }: { value: Unit; onChange: (unit: Unit) => void }) {
+	return <Segmented size="sm" aria-label="Unit" options={UNIT_OPTIONS} value={value} onChange={onChange} />;
+}
+
+export interface SavingsProps {
+	stats: SpotlightDashboardStats;
+	range: TimeRange;
+	stale: boolean;
+}
+
+/** Cumulative gross vs net per bucket, with what recoveries took back hanging below zero. */
+export function SavingsOverTime({ stats, range, stale }: SavingsProps) {
+	const [unit, setUnit] = useState<Unit>("tokens");
+	const meta = rangeMeta(range);
+
+	const chart = useMemo(() => {
+		const buckets = bucketAxis(
+			range,
+			stats.series.map(b => b.timestamp),
+			meta.bucketMs,
+		);
+		const usd = unit === "usd";
+		const saved = densify(stats.series, buckets, b => (usd ? b.savedUsd : b.savedTokens));
+		const net = densify(stats.series, buckets, b => (usd ? b.netUsd : b.netTokens));
+		let grossRun = 0;
+		let netRun = 0;
+		const series: ChartSeries[] = [
+			{
+				key: "gross",
+				label: "Gross (cumulative)",
+				color: "var(--spot-gross)",
+				kind: "area",
+				values: saved.map(v => (grossRun += v)),
+			},
+			{
+				key: "clawback",
+				label: usd ? "Recoveries + Spotlight cost" : "Fetched back",
+				color: "var(--spot-clawback)",
+				kind: "bars",
+				values: saved.map((v, i) => net[i] - v),
+			},
+			{
+				key: "net",
+				label: "Net of every fetch-back (cumulative)",
+				color: "var(--spot-net)",
+				kind: "line",
+				values: net.map(v => (netRun += v)),
+			},
+		];
+		return { buckets, series };
+	}, [stats.series, range, meta.bucketMs, unit]);
+
+	const format = unit === "usd" ? formatSignedCost : formatSignedCompact;
+	return (
+		<Card
+			index={1}
+			title="Savings over time"
+			description={`Running gross and net per ${bucketNoun(meta.bucketMs)}; what recoveries took back hangs below zero`}
+			actions={<UnitToggle value={unit} onChange={setUnit} />}
+			stale={stale}
+			footer={
+				unit === "usd"
+					? "Dollars price each saved token at the cache-read rate of every later request that would have carried it (plus one cache write); recoveries are priced the same way."
+					: "Gross is what the cuts removed against what plain would have shown; this net subtracts every later call that fetched hidden output back, including the share held-out results show comes back anyway (the headline adds that back). Each lands in the bucket of its own timestamp."
+			}
+		>
+			<div className="spot-chart-legend">
+				<Legend items={chart.series.map(s => ({ key: s.key, label: s.label, color: s.color }))} />
+			</div>
+			<TimeChart
+				buckets={chart.buckets}
+				bucketMs={meta.bucketMs}
+				series={chart.series}
+				stacked={false}
+				// Tall enough to sit level with the bridge and per-tool list beside it.
+				height={480}
+				format={format}
+				formatTooltip={
+					unit === "usd" ? formatSignedCost : v => (v < 0 ? `−${formatInteger(-v)}` : formatInteger(v))
+				}
+				showTotal={false}
+				emptyLabel="No shortened results in this range"
+			/>
+		</Card>
+	);
+}
+
+/** Bridge from gross to the holdout-adjusted net: every way the saving was undone, and what would have come back anyway. */
+export function WhereSavingsWent({ stats, stale }: Omit<SavingsProps, "range">) {
+	const [unit, setUnit] = useState<Unit>("tokens");
+	const { gross, clawback, compounding, adjusted } = stats;
+
+	const steps = useMemo((): WaterfallStep[] => {
+		const usd = unit === "usd";
+		const top = usd ? compounding.savedUsd : gross.savedTokens;
+		const share = (v: number) => (top > 0 ? formatShare(v / top) : "");
+		const kindSteps = RECOVERY_KINDS.map((kind): WaterfallStep => {
+			const totals = clawback.byKind[kind];
+			const value = usd ? totals.usd : totals.tokens;
+			return {
+				key: kind,
+				label: (
+					<>
+						<span className="spot-step-swatch" style={{ background: RECOVERY_KIND[kind].color }} />
+						{RECOVERY_KIND[kind].plural}
+						<span className="dim num">{formatInteger(totals.events)}</span>
+					</>
+				),
+				kind: "delta",
+				value: -value,
+				color: RECOVERY_KIND[kind].color,
+				note: share(value),
+				title: RECOVERY_KIND[kind].rule,
+			};
+		});
+		const steps: WaterfallStep[] = [
+			{
+				key: "gross",
+				label: usd ? "Gross saved" : "Gross vs plain",
+				kind: "total",
+				value: top,
+				color: "var(--spot-gross)",
+				title: usd
+					? "Avoided context priced at each later request's cache-read rate, plus one cache write"
+					: "Σ (plain − shortened) tokens over shortened results; a cut that showed more than plain counts negative",
+			},
+			...kindSteps,
+		];
+		if (usd) {
+			steps.push(
+				{
+					key: "turns",
+					label: (
+						<>
+							<span className="spot-step-swatch" style={{ background: "var(--spot-turns)" }} />
+							Extra turns
+							<span className="dim num">{formatInteger(clawback.turns)}</span>
+						</>
+					),
+					kind: "delta",
+					value: -clawback.turnsUsd,
+					color: "var(--spot-turns)",
+					note: share(clawback.turnsUsd),
+					title: "Provider cost of requests that issued nothing but recovery calls",
+				},
+				{
+					key: "spotlight",
+					label: (
+						<>
+							<span className="spot-step-swatch" style={{ background: "var(--spot-cost)" }} />
+							Spotlight cost
+						</>
+					),
+					kind: "delta",
+					value: -compounding.spotlightUsd,
+					color: "var(--spot-cost)",
+					note: share(compounding.spotlightUsd),
+					title: "Spotlight's own scoring bill",
+				},
+			);
+		}
+		// Without holdouts there is no baseline to add back: the net is unadjusted.
+		const unadjusted = usd ? compounding.netUsd : clawback.netTokens;
+		const adjustedNet = usd ? adjusted.netUsd.value : adjusted.netTokens.value;
+		if (adjustedNet !== null) {
+			const anyway = adjustedNet - unadjusted;
+			steps.push({
+				key: "anyway",
+				label: (
+					<>
+						<span className="spot-step-swatch" style={{ background: "var(--spot-anyway)" }} />
+						Back anyway
+					</>
+				),
+				kind: "delta",
+				value: anyway,
+				color: "var(--spot-anyway)",
+				note: share(anyway),
+				title: "Fetch-backs held-out results (shown whole) show the agent makes regardless, per tool: not the cut's cost",
+			});
+		}
+		const net = adjustedNet ?? unadjusted;
+		steps.push({
+			key: "net",
+			label: adjustedNet === null ? "Net (no holdout baseline yet)" : "Net",
+			kind: "total",
+			value: net,
+			color: "var(--spot-net-fill)",
+			note: share(net),
+		});
+		return steps;
+	}, [unit, gross, clawback, compounding, adjusted]);
+
+	return (
+		<Card
+			index={2}
+			title="Where the savings went"
+			description="Gross, minus each way hidden output came back"
+			actions={<UnitToggle value={unit} onChange={setUnit} />}
+			stale={stale}
+			footer={
+				unit === "usd"
+					? "Recoveries are priced as carried context; extra turns are requests that only recovered; Spotlight cost is its own scoring bill. What comes back anyway is the recovery $ in proportion to the tokens held-out results fetch regardless."
+					: "Recovered tokens are the full results of the recovery calls (estimated as chars ÷ 4 where no exact count exists). What comes back anyway is, per tool, the tokens a held-out result gets fetched back times the tool's cuts."
+			}
+		>
+			<Waterfall steps={steps} format={unit === "usd" ? formatCost : formatCompact} />
+			<div className="spot-by-tool">
+				<div className="section-label">Net by tool, tokens</div>
+				<ToolNetList byTool={gross.byTool} adjusted={adjusted.byTool} />
+			</div>
+		</Card>
+	);
+}
+
+/** Tools the net-by-tool list names before folding the rest into `other`. */
+const NET_LIST_TOOLS = 3;
+
+/** One row of the net-by-tool list: a tool, or the folded rest summed. */
+interface ToolNetRow {
+	tool: string;
+	totals: SpotlightToolRow;
+	excess: number | null;
+	title: string | undefined;
+}
+
+/**
+ * Each tool's gross as a bar, its fetch-back beyond the holdout baseline hatched off the end: what is left solid is the
+ * tool's net. The top tools by saving are listed; the rest fold into one `other` row.
+ */
+function ToolNetList({
+	byTool,
+	adjusted,
+}: {
+	byTool: readonly SpotlightToolRow[];
+	adjusted: readonly SpotlightAdjustedTool[];
+}) {
+	const adjustedByTool = new Map(adjusted.map(row => [row.tool, row]));
+	// Fewer rows than other cards: the list sits under the waterfall, beside the savings chart it should not outgrow.
+	const { listed, rest } = foldTools(byTool, NET_LIST_TOOLS);
+	const rows: ToolNetRow[] = listed.map(totals => {
+		const row = adjustedByTool.get(totals.tool);
+		const excessInterval = row === undefined ? "" : formatInterval(row.excessTokens, formatCompact);
+		const baseline = row?.baselinePerCut.value ?? null;
+		return {
+			tool: totals.tool,
+			totals,
+			excess: row?.excessTokens.value ?? null,
+			title:
+				row === undefined
+					? undefined
+					: [
+							`${formatInteger(row.cuts)} cuts fetched back ${formatCompact(row.recoveredTokens)} tokens`,
+							baseline === null
+								? "No held-out baseline yet"
+								: `${formatInteger(row.holdouts)} held-out results get ${formatCompact(baseline)} each fetched back anyway`,
+							excessInterval === "" ? "" : `Beyond the baseline: ${excessInterval} (90%)`,
+						]
+							.filter(Boolean)
+							.join("\n"),
+		};
+	});
+	if (rest.length > 0) {
+		const totals: SpotlightToolRow = {
+			tool: OTHER_TOOLS,
+			results: 0,
+			shaped: 0,
+			inTokens: 0,
+			plainTokens: 0,
+			outTokens: 0,
+			savedTokens: 0,
+			fullSavedTokens: 0,
+		};
+		let excess: number | null = null;
+		for (const row of rest) {
+			totals.results += row.results;
+			totals.shaped += row.shaped;
+			totals.savedTokens += row.savedTokens;
+			const own = adjustedByTool.get(row.tool)?.excessTokens.value ?? null;
+			if (own !== null) excess = (excess ?? 0) + own;
+		}
+		rows.push({
+			tool: OTHER_TOOLS,
+			totals,
+			excess,
+			title: `${formatInteger(rest.length)} more tools: ${rest.map(row => row.tool).join(", ")}`,
+		});
+	}
+	const top = Math.max(0, ...rows.map(row => row.totals.savedTokens));
+	return (
+		<ul className="spot-tool-net">
+			{rows.map(({ tool, totals, excess, title }) => {
+				const net = excess === null ? null : totals.savedTokens - excess;
+				const Icon = toolIcon(tool);
+				// A tool whose cuts showed more than plain nets below zero: no bar.
+				const width = top > 0 ? (Math.max(0, totals.savedTokens) / top) * 100 : 0;
+				const excessShare =
+					excess !== null && totals.savedTokens > 0 ? Math.min(1, excess / totals.savedTokens) : 0;
+				return (
+					<li key={tool} className="spot-tool-net-row" title={title}>
+						<div className="row spot-tool-net-head">
+							<Icon size={13} aria-hidden="true" />
+							<span className="cell-primary">{tool}</span>
+							<span className="dim num">
+								{formatInteger(totals.shaped)} of {formatInteger(totals.results)} shortened
+							</span>
+							<span
+								className="spot-tool-net-value num"
+								title={net === null ? "No holdout baseline yet" : undefined}
+							>
+								{formatSignedCompact(net ?? totals.savedTokens)}
+							</span>
+						</div>
+						<div className="spot-tool-net-track" aria-hidden="true">
+							<span className="spot-tool-net-bar" style={{ width: `${width}%` }}>
+								<span className="spot-tool-net-excess" style={{ width: `${excessShare * 100}%` }} />
+							</span>
+						</div>
+						<div className="micro spot-tool-net-detail">
+							{formatSignedCompact(totals.savedTokens)} gross
+							{excess !== null && <> − {formatCompact(excess)} beyond baseline</>}
+						</div>
+					</li>
+				);
+			})}
+		</ul>
+	);
+}

package/src/client/spotlight/ShareTrend.tsx

@@ -0,0 +1,103 @@
+import { useMemo } from "react";
+import { type ChartSeries, Legend, type SlotMarker, TimeChart } from "../charts";
+import { formatPercent } from "../data/formatters";
+import { bucketAxis, formatBucket, rangeMeta } from "../data/range";
+import { densify } from "../data/series";
+import type { SpotlightDashboardStats, SpotlightSharePoint, TimeRange } from "../types";
+import { Card } from "../ui";
+import { bucketNoun, formatShare } from "./meta";
+
+/** Trailing buckets in each rolling share. */
+const ROLLING_WINDOW = 7;
+
+type ShareGroup = SpotlightSharePoint["group"];
+
+const GROUPS: readonly { group: ShareGroup; label: string; color: string }[] = [
+	{ group: "shaped", label: "Shaped sessions", color: "var(--spot-shaped)" },
+	{ group: "outside", label: "Outside the experiment", color: "var(--spot-outside)" },
+];
+
+export interface ShareTrendProps {
+	stats: SpotlightDashboardStats;
+	range: TimeRange;
+	stale: boolean;
+}
+
+/** Share of context that is tool output, per session group, raw per bucket and as a rolling ratio. */
+export function ShareTrend({ stats, range, stale }: ShareTrendProps) {
+	const meta = rangeMeta(range);
+	const chart = useMemo(() => {
+		const buckets = bucketAxis(
+			range,
+			stats.share.map(p => p.timestamp),
+			meta.bucketMs,
+		);
+		const series: ChartSeries[] = [];
+		const legend: { key: string; label: string; color: string; value?: string }[] = [];
+		for (const { group, label, color } of GROUPS) {
+			const points = stats.share.filter(p => p.group === group);
+			const tool = densify(points, buckets, p => p.toolTokens);
+			const ctx = densify(points, buckets, p => p.contextTokens);
+			let toolSum = 0;
+			let ctxSum = 0;
+			const rolling = buckets.map((_, i) => {
+				let t = 0;
+				let c = 0;
+				for (let j = Math.max(0, i - ROLLING_WINDOW + 1); j <= i; j++) {
+					t += tool[j];
+					c += ctx[j];
+				}
+				toolSum += tool[i];
+				ctxSum += ctx[i];
+				return c > 0 ? t / c : null;
+			});
+			if (ctxSum === 0) continue;
+			series.push(
+				{
+					key: `${group}:raw`,
+					label: `${label} · bucket`,
+					color,
+					kind: "dots",
+					values: buckets.map((_, i) => (ctx[i] > 0 ? tool[i] / ctx[i] : null)),
+				},
+				{ key: `${group}:avg`, label: `${label} · rolling`, color, kind: "line", values: rolling },
+			);
+			legend.push({ key: group, label, color, value: formatShare(toolSum / ctxSum) });
+		}
+		const markers: SlotMarker[] = [];
+		if (stats.experimentStart !== null) {
+			const start = Math.floor(stats.experimentStart / meta.bucketMs) * meta.bucketMs;
+			const index = buckets.indexOf(start);
+			if (index >= 0) markers.push({ index, label: "experiment starts" });
+		}
+		return { buckets, series, legend, markers };
+	}, [stats.share, stats.experimentStart, range, meta.bucketMs]);
+
+	return (
+		<Card
+			index={4}
+			title="Tool-output share of context"
+			description={
+				stats.experimentStart !== null && chart.markers.length === 0
+					? `Since ${formatBucket(stats.experimentStart, 86_400_000)}, shaped sessions should carry less tool output`
+					: "Shaped sessions should carry less tool output than the rest of your history"
+			}
+			actions={<Legend items={chart.legend} />}
+			stale={stale}
+			footer={`Tool tokens are result chars ÷ 4; context adds assistant output, your prompts (chars ÷ 4) and each session's first prompt. Dots are single buckets (one ${bucketNoun(meta.bucketMs)}); lines are the trailing ${ROLLING_WINDOW}-bucket ratio of sums.`}
+		>
+			<TimeChart
+				buckets={chart.buckets}
+				bucketMs={meta.bucketMs}
+				series={chart.series}
+				markers={chart.markers}
+				stacked={false}
+				height={260}
+				format={v => formatPercent(v, 0)}
+				formatTooltip={v => formatPercent(v)}
+				showTotal={false}
+				emptyLabel="No tool calls in this range"
+			/>
+		</Card>
+	);
+}

package/src/client/spotlight/Steps.tsx

@@ -0,0 +1,225 @@
+import { Fragment, type ReactNode, useState } from "react";
+import { formatCompact, formatInteger } from "../data/formatters";
+import type { SpotlightDashboardStats, SpotlightSizeBin, SpotlightStepCell, SpotlightTool } from "../types";
+import { Card } from "../ui";
+import { MoreTools } from "./chips";
+import { foldTools, formatInterval, formatShare, SIZE_BINS, toolIcon, toolsBySaving } from "./meta";
+
+/** Under this many cuts a cell's share swings on a handful of fetch-backs: it renders dimmed. */
+const THIN_CUTS = 10;
+
+/** Tint of a cell kept entirely (or lost entirely, or worse); the rest scale with the distance from half kept. */
+const MAX_TINT = 30;
+const MIN_TINT = 4;
+
+/** Σ over a step's sizes, for its "all sizes" column. */
+interface StepTotal {
+	cuts: number;
+	savedTokens: number;
+	excessTokens: number;
+}
+
+interface StepRow {
+	steps: string;
+	bySize: Map<SpotlightSizeBin, SpotlightStepCell>;
+	total: StepTotal;
+}
+
+/** Steps of one tool, the biggest saving first and `other` last. */
+function stepRows(cells: readonly SpotlightStepCell[], tool: SpotlightTool): StepRow[] {
+	const rows = new Map<string, StepRow>();
+	for (const cell of cells) {
+		if (cell.tool !== tool) continue;
+		let row = rows.get(cell.steps);
+		if (row === undefined) {
+			row = { steps: cell.steps, bySize: new Map(), total: { cuts: 0, savedTokens: 0, excessTokens: 0 } };
+			rows.set(cell.steps, row);
+		}
+		row.bySize.set(cell.size, cell);
+		row.total.cuts += cell.cuts;
+		row.total.savedTokens += cell.savedTokens;
+		row.total.excessTokens += cell.excessTokens;
+	}
+	return [...rows.values()].sort(
+		(a, b) => Number(a.steps === "other") - Number(b.steps === "other") || b.total.savedTokens - a.total.savedTokens,
+	);
+}
+
+/** Green above half the saving kept, red below; strength grows toward all or nothing. */
+function KeptCell({
+	kept,
+	cuts,
+	title,
+	children,
+}: {
+	kept: number | null;
+	cuts: number;
+	title: string;
+	children: ReactNode;
+}) {
+	if (kept === null) {
+		return (
+			<div className="spot-econ-cell" data-empty="true" title={title}>
+				<span className="dim">No saving</span>
+			</div>
+		);
+	}
+	// keptShare goes negative when the excess fetch-back outweighs the saving: as red as a total loss.
+	const tint = MIN_TINT + Math.min(1, Math.abs(kept - 0.5) * 2) * (MAX_TINT - MIN_TINT);
+	return (
+		<div
+			className="spot-econ-cell"
+			data-tone={kept >= 0.5 ? "ok" : "bad"}
+			data-thin={cuts < THIN_CUTS}
+			style={{ "--tint": `${tint}%` }}
+			title={title}
+		>
+			<span className="spot-econ-net num">
+				{formatShare(kept)}
+				<span className="spot-steps-unit"> kept</span>
+			</span>
+			<dl className="spot-econ-facts">{children}</dl>
+		</div>
+	);
+}
+
+/** Tool × shaping steps × cut size: how much of each kind of cut's saving stays saved after fetch-backs. */
+export function Steps({ stats, stale }: { stats: SpotlightDashboardStats; stale: boolean }) {
+	const [expanded, setExpanded] = useState(false);
+	const all = toolsBySaving(stats).flatMap(tool => {
+		const rows = stepRows(stats.steps, tool);
+		return rows.length === 0 ? [] : [{ tool, rows }];
+	});
+	const { listed, rest } = foldTools(all);
+	const tools = expanded ? all : listed;
+
+	return (
+		<Card
+			index={5}
+			title="Which cuts pay"
+			description="Share of each kind of cut's saving that stays saved after fetch-backs beyond the holdout baseline, by size"
+			actions={
+				<span className="spot-econ-scale" aria-hidden="true">
+					<span className="num">0%</span>
+					<span className="spot-econ-ramp" />
+					<span className="num">100% kept</span>
+				</span>
+			}
+			stale={stale}
+			footer={`Scored and score-free cuts. Kept = (saved − fetch-back beyond the tool's holdout baseline) ÷ saved; fetched back is the share of cuts the agent came back for within 12 calls. Sizes are the tokens a cut saved against plain; step combinations under 10 cuts fold into "other". Cells under ${THIN_CUTS} cuts are dimmed.`}
+		>
+			{tools.length === 0 ? (
+				<div className="empty">No shortened results in this range.</div>
+			) : (
+				<>
+					<div className="spot-steps-scroll">
+						<table className="spot-econ spot-steps">
+							<thead>
+								<tr>
+									<th scope="col">Steps</th>
+									{SIZE_BINS.map(size => (
+										<th key={size} scope="col" className="num">
+											{size} <span className="dim">saved</span>
+										</th>
+									))}
+									<th scope="col">All sizes</th>
+								</tr>
+							</thead>
+							<tbody>
+								{tools.map(({ tool, rows }) => {
+									const Icon = toolIcon(tool);
+									return (
+										<Fragment key={tool}>
+											<tr className="spot-steps-tool">
+												<th scope="rowgroup" colSpan={SIZE_BINS.length + 2}>
+													<span className="row spot-econ-tool">
+														<Icon size={13} aria-hidden="true" />
+														{tool}
+													</span>
+												</th>
+											</tr>
+											{rows.map(row => {
+												const { total } = row;
+												const totalKept =
+													total.savedTokens > 0
+														? (total.savedTokens - total.excessTokens) / total.savedTokens
+														: null;
+												return (
+													<tr key={row.steps}>
+														<th scope="row" className="spot-steps-name" title={row.steps}>
+															{row.steps}
+														</th>
+														{SIZE_BINS.map(size => {
+															const cell = row.bySize.get(size);
+															if (cell === undefined || cell.cuts === 0) {
+																return (
+																	<td key={size}>
+																		<div className="spot-econ-cell" data-empty="true">
+																			<span className="dim">–</span>
+																		</div>
+																	</td>
+																);
+															}
+															const interval = formatInterval(cell.fetchBackRate, formatShare);
+															return (
+																<td key={size}>
+																	<KeptCell
+																		kept={cell.keptShare}
+																		cuts={cell.cuts}
+																		title={[
+																			`${tool} · ${row.steps} · ${size} saved: ${formatInteger(cell.cuts)} cuts`,
+																			`Saved ${formatCompact(cell.savedTokens)}, fetched back ${formatCompact(cell.recoveredTokens)}, ${formatCompact(cell.excessTokens)} beyond the baseline`,
+																			`Fetched back after ${formatShare(cell.fetchBackRate.value)} of cuts${interval === "" ? "" : ` (${interval})`}`,
+																		].join("\n")}
+																	>
+																		<div>
+																			<dt>cuts</dt>
+																			<dd className="num">{formatInteger(cell.cuts)}</dd>
+																		</div>
+																		<div>
+																			<dt>fetched back</dt>
+																			<dd className="num">
+																				{formatShare(cell.fetchBackRate.value)}
+																			</dd>
+																		</div>
+																	</KeptCell>
+																</td>
+															);
+														})}
+														<td>
+															<KeptCell
+																kept={totalKept}
+																cuts={total.cuts}
+																title={`${tool} · ${row.steps}: ${formatInteger(total.cuts)} cuts saved ${formatCompact(total.savedTokens)}, ${formatCompact(total.excessTokens)} fetched back beyond the baseline`}
+															>
+																<div>
+																	<dt>cuts</dt>
+																	<dd className="num">{formatInteger(total.cuts)}</dd>
+																</div>
+																<div>
+																	<dt>saved</dt>
+																	<dd className="num">{formatCompact(total.savedTokens)}</dd>
+																</div>
+															</KeptCell>
+														</td>
+													</tr>
+												);
+											})}
+										</Fragment>
+									);
+								})}
+							</tbody>
+						</table>
+					</div>
+					{rest.length > 0 && (
+						<MoreTools
+							hidden={rest.map(item => item.tool)}
+							expanded={expanded}
+							onToggle={() => setExpanded(value => !value)}
+						/>
+					)}
+				</>
+			)}
+		</Card>
+	);
+}