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

package/src/client/spotlight/Coverage.tsx

@@ -0,0 +1,96 @@
+import { BarList, Legend, ShareBar } from "../charts";
+import { formatCompact, formatInteger } from "../data/formatters";
+import type { SpotlightDashboardStats } from "../types";
+import { Badge, Card } from "../ui";
+import { foldTools, formatShare } from "./meta";
+
+const SHAPED_COLOR = "var(--spot-applied)";
+const UNSHAPED_COLOR = "var(--spot-unshaped)";
+
+/** Which tools' output the models of experiment sessions saw, shaped and not: where shaping could reach next. */
+export function Coverage({ stats, stale }: { stats: SpotlightDashboardStats; stale: boolean }) {
+	const rows = [...stats.coverage].sort((a, b) => b.tokens - a.tokens);
+	const { listed, rest } = foldTools(rows);
+	let shaped = 0;
+	let unshaped = 0;
+	for (const row of rows) {
+		if (row.shaped) shaped += row.share;
+		else unshaped += row.share;
+	}
+	const items = listed.map(row => ({
+		key: row.tool,
+		label: (
+			<>
+				<span className="spot-coverage-tool">{row.tool}</span>
+				{row.shaped && <Badge>shaped</Badge>}
+				<span className="dim num">{formatInteger(row.calls)} calls</span>
+			</>
+		),
+		value: row.share,
+		display: `${formatShare(row.share)} · ${formatCompact(row.tokens)}`,
+		color: row.shaped ? SHAPED_COLOR : UNSHAPED_COLOR,
+	}));
+	if (rest.length > 0) {
+		let share = 0;
+		let tokens = 0;
+		let calls = 0;
+		for (const row of rest) {
+			share += row.share;
+			tokens += row.tokens;
+			calls += row.calls;
+		}
+		items.push({
+			key: "\u0000rest",
+			label: (
+				<>
+					<span className="spot-coverage-tool">
+						{formatInteger(rest.length)} more {rest.length === 1 ? "tool" : "tools"}
+					</span>
+					<span className="dim num">{formatInteger(calls)} calls</span>
+				</>
+			),
+			value: share,
+			display: `${formatShare(share)} · ${formatCompact(tokens)}`,
+			color: rest.some(row => row.shaped) ? SHAPED_COLOR : UNSHAPED_COLOR,
+		});
+	}
+
+	return (
+		<Card
+			index={5}
+			title="Not shaped yet"
+			description="Share of the tool output experiment sessions' models saw, by tool: the unshaped ones are where shaping could reach next"
+			actions={
+				<Legend
+					items={[
+						{ key: "shaped", label: "Shaped", color: SHAPED_COLOR },
+						{ key: "unshaped", label: "Not shaped", color: UNSHAPED_COLOR },
+					]}
+				/>
+			}
+			stale={stale}
+			footer="Tokens are tool-result chars ÷ 4 over the experiment's sessions in the range; a tool counts as shaped when the experiment evaluated any of its results in the range."
+		>
+			{rows.length === 0 ? (
+				<div className="empty">No tool output in this range.</div>
+			) : (
+				<div className="spot-coverage">
+					<div className="spot-coverage-summary">
+						<div className="spot-coverage-headline">
+							<span className="num">{formatShare(unshaped)}</span> of tool output comes from tools the experiment
+							did not shape in this range
+						</div>
+						<ShareBar
+							height={8}
+							segments={[
+								{ key: "shaped", label: "Shaped", value: shaped, color: SHAPED_COLOR },
+								{ key: "unshaped", label: "Not shaped", value: unshaped, color: UNSHAPED_COLOR },
+							]}
+						/>
+					</div>
+					<BarList items={items} />
+				</div>
+			)}
+		</Card>
+	);
+}

package/src/client/spotlight/Economics.tsx

@@ -0,0 +1,167 @@
+import { formatCompact, formatCost, formatInteger } from "../data/formatters";
+import type { SpotlightCutEconomics, SpotlightDashboardStats } from "../types";
+import { Card } from "../ui";
+import { foldTools, formatSignedCost, OTHER_TOOLS, toolIcon, toolsBySaving } from "./meta";
+
+export interface EconomicsProps {
+	stats: SpotlightDashboardStats;
+	stale: boolean;
+}
+
+/**
+ * Tint strength of the strongest cell; the rest scale with √|net| so the sign reads first, size second, and one
+ * outlier does not wash out every other cell.
+ */
+const MAX_TINT = 30;
+const MIN_TINT = 5;
+
+/** Narrowest tool column before the table scrolls sideways instead of squeezing its cells. */
+const TOOL_COLUMN_PX = 120;
+
+function cellTitle(cell: SpotlightCutEconomics): string {
+	return [
+		`${cell.tool}: ${formatInteger(cell.cuts)} cuts`,
+		`Saved ${formatCompact(cell.savedTokens)} tokens (${formatCost(cell.savedUsd)})`,
+		`Fetched back ${formatCompact(cell.recoveredTokens)} tokens (${formatCost(cell.recoveryUsd)})`,
+		`${formatInteger(cell.extraTurns)} extra turns (${formatCost(cell.turnUsd)})`,
+		`Net ${formatSignedCost(cell.netUsd)}`,
+	].join("\n");
+}
+
+/** The folded tools' cells summed into an `other` cell. */
+function otherCell(cells: readonly SpotlightCutEconomics[]): SpotlightCutEconomics | undefined {
+	if (cells.length === 0) return undefined;
+	const sum: SpotlightCutEconomics = {
+		tool: OTHER_TOOLS,
+		cuts: 0,
+		savedTokens: 0,
+		recoveredTokens: 0,
+		extraTurns: 0,
+		savedUsd: 0,
+		recoveryUsd: 0,
+		turnUsd: 0,
+		netUsd: 0,
+		extraTurnsPer100Cuts: 0,
+		netUsdPer100Cuts: 0,
+	};
+	for (const cell of cells) {
+		sum.cuts += cell.cuts;
+		sum.savedTokens += cell.savedTokens;
+		sum.recoveredTokens += cell.recoveredTokens;
+		sum.extraTurns += cell.extraTurns;
+		sum.savedUsd += cell.savedUsd;
+		sum.recoveryUsd += cell.recoveryUsd;
+		sum.turnUsd += cell.turnUsd;
+		sum.netUsd += cell.netUsd;
+	}
+	if (sum.cuts > 0) {
+		sum.extraTurnsPer100Cuts = (sum.extraTurns * 100) / sum.cuts;
+		sum.netUsdPer100Cuts = (sum.netUsd * 100) / sum.cuts;
+	}
+	return sum;
+}
+
+/**
+ * Per tool: what a hundred cuts earn after fetch-backs, extra turns and Spotlight's bill. Tools with cuts, the
+ * largest saving first; past the top ones the rest sum into one `other` column.
+ */
+export function Economics({ stats, stale }: EconomicsProps) {
+	const cut = new Set(stats.economics.filter(cell => cell.cuts > 0).map(cell => cell.tool));
+	const { listed, rest } = foldTools(toolsBySaving(stats).filter(tool => cut.has(tool)));
+	const folded = new Set(rest);
+	const cells = new Map(stats.economics.filter(cell => !folded.has(cell.tool)).map(cell => [cell.tool, cell]));
+	const other = otherCell(stats.economics.filter(cell => folded.has(cell.tool)));
+	if (other) cells.set(OTHER_TOOLS, other);
+	const tools = rest.length > 0 ? [...listed, OTHER_TOOLS] : listed;
+	let maxAbs = 0;
+	for (const cell of cells.values()) if (cell.cuts > 0) maxAbs = Math.max(maxAbs, Math.abs(cell.netUsdPer100Cuts));
+
+	return (
+		<Card
+			index={3}
+			title="What cuts earn, by tool"
+			description="Net dollars per 100 cuts after fetch-backs, extra turns and Spotlight's own bill"
+			actions={
+				maxAbs > 0 && (
+					<span className="spot-econ-scale" aria-hidden="true">
+						<span className="num">{formatSignedCost(-maxAbs)}</span>
+						<span className="spot-econ-ramp" />
+						<span className="num">{formatSignedCost(maxAbs)}</span>
+					</span>
+				)
+			}
+			stale={stale}
+			footer="Shortened results only; held-out ones save nothing. Every fetch-back counts against the cut here, the share held-out results show comes back anyway included, so this is the cautious view. An extra turn is a request whose every tool call fetched back output these cuts hid. Dollars price saved and fetched-back tokens as carried context, like Compounding."
+		>
+			{tools.length === 0 ? (
+				<div className="empty">No shortened results in this range.</div>
+			) : (
+				<div className="spot-econ-scroll">
+					<table className="spot-econ" style={{ minWidth: `${tools.length * TOOL_COLUMN_PX}px` }}>
+						<thead>
+							<tr>
+								{tools.map(tool => {
+									const Icon = toolIcon(tool);
+									return (
+										<th key={tool} scope="col" title={tool === OTHER_TOOLS ? rest.join(", ") : tool}>
+											<span className="row spot-econ-tool">
+												<Icon size={13} aria-hidden="true" />
+												<span className="spot-econ-tool-name">{tool}</span>
+											</span>
+										</th>
+									);
+								})}
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								{tools.map(tool => {
+									const cell = cells.get(tool);
+									if (cell === undefined || cell.cuts === 0) {
+										return (
+											<td key={tool}>
+												<div className="spot-econ-cell" data-empty="true">
+													<span className="dim">No cuts</span>
+												</div>
+											</td>
+										);
+									}
+									const net = cell.netUsdPer100Cuts;
+									const tint =
+										maxAbs > 0 ? MIN_TINT + Math.sqrt(Math.abs(net) / maxAbs) * (MAX_TINT - MIN_TINT) : 0;
+									const tone = net < 0 ? "bad" : net > 0 ? "ok" : "neutral";
+									return (
+										<td key={tool}>
+											<div
+												className="spot-econ-cell"
+												data-tone={tone}
+												style={{ "--tint": `${tint}%` }}
+												title={cellTitle(cell)}
+											>
+												<span className="spot-econ-net num">{formatSignedCost(net)}</span>
+												<dl className="spot-econ-facts">
+													<div>
+														<dt>cuts</dt>
+														<dd className="num">{formatInteger(cell.cuts)}</dd>
+													</div>
+													<div>
+														<dt>saved</dt>
+														<dd className="num">{formatCompact(cell.savedTokens)}</dd>
+													</div>
+													<div>
+														<dt>extra turns /100</dt>
+														<dd className="num">{cell.extraTurnsPer100Cuts.toFixed(1)}</dd>
+													</div>
+												</dl>
+											</div>
+										</td>
+									);
+								})}
+							</tr>
+						</tbody>
+					</table>
+				</div>
+			)}
+		</Card>
+	);
+}

package/src/client/spotlight/FetchBack.tsx

@@ -0,0 +1,222 @@
+import { useState } from "react";
+import { DotWhisker, type DotWhiskerMark, type DotWhiskerRow } from "../charts";
+import { formatInteger } from "../data/formatters";
+import type {
+	SpotlightCutGroup,
+	SpotlightDashboardStats,
+	SpotlightFetchBackCell,
+	SpotlightGapCount,
+	SpotlightTool,
+} from "../types";
+import { Card } from "../ui";
+import { GroupLegend, MoreTools } from "./chips";
+import { CUT_GROUP, CUT_GROUPS, foldTools, formatShare, GAP_BINS, toolIcon, toolsBySaving } from "./meta";
+
+/** Vertical spread of a row's marks, so overlapping intervals stay readable. */
+const MARK_OFFSET: Record<SpotlightCutGroup, number> = {
+	applied: -12,
+	scoreFree: -6,
+	holdout: 0,
+	gated: 6,
+	reference: 12,
+};
+
+/** What a scored cut's rate is read against, in the row's small print: the score-free cut, then the baselines. */
+const COMPARISONS: readonly SpotlightCutGroup[] = ["scoreFree", "holdout", "reference"];
+
+/** Groups the gap histogram counts (`SpotlightGapCount` fields). */
+type GapGroup = "applied" | "holdout";
+const GAP_GROUPS: readonly GapGroup[] = ["applied", "holdout"];
+
+const FETCH_BACK_RULE =
+	"One rule for every group: within 12 calls, a read of the same path overlapping the result's own window (the whole file without a selector), a rerun of the call (a similar bash command; for other tools, ≥ 60% shared argument tokens), or a read of an artifact it named; not after an edit of that path (reads) or any edit (reruns), nor from the same request.";
+
+export interface FetchBackProps {
+	stats: SpotlightDashboardStats;
+	stale: boolean;
+}
+
+/** Fetch-back rate per tool: the scored cut against the score-free one, the random holdout and the unchanged results. */
+export function FetchBack({ stats, stale }: FetchBackProps) {
+	const [expanded, setExpanded] = useState(false);
+	const cells = new Map<string, SpotlightFetchBackCell>();
+	for (const cell of stats.fetchBack) cells.set(`${cell.tool}/${cell.group}`, cell);
+	const measured = new Set(stats.fetchBack.filter(cell => cell.results > 0).map(cell => cell.tool));
+	const { listed, rest } = foldTools(toolsBySaving(stats).filter(tool => measured.has(tool)));
+	// Only reads were gated, and only while pi's former edit gate ran: the legend names the group where it has results.
+	const legend = CUT_GROUPS.filter(
+		group => group !== "gated" || stats.fetchBack.some(cell => cell.group === "gated" && cell.results > 0),
+	);
+
+	const rows: DotWhiskerRow[] = [];
+	for (const tool of expanded ? [...listed, ...rest] : listed) {
+		const Icon = toolIcon(tool);
+		const groups = CUT_GROUPS.flatMap(group => {
+			const cell = cells.get(`${tool}/${group}`);
+			return cell !== undefined && cell.results > 0 ? [cell] : [];
+		});
+		if (groups.length === 0) continue;
+		const byGroup = new Map(groups.map(cell => [cell.group, cell]));
+		const applied = byGroup.get("applied");
+		const marks: DotWhiskerMark[] = groups.map(cell => ({
+			key: cell.group,
+			...cell.rate,
+			color: CUT_GROUP[cell.group].color,
+			shape: CUT_GROUP[cell.group].shape,
+			offset: MARK_OFFSET[cell.group],
+			title: `${CUT_GROUP[cell.group].label}: ${formatShare(cell.rate.value)} of ${formatInteger(cell.results)} results in ${formatInteger(cell.sessions)} sessions`,
+		}));
+		rows.push({
+			key: tool,
+			label: (
+				<span className="spot-fb-tool" title={tool}>
+					<Icon size={13} aria-hidden="true" />
+					<span className="spot-fb-tool-name">{tool}</span>
+				</span>
+			),
+			marks,
+			figure: (
+				<span style={{ color: CUT_GROUP.applied.color }} title={CUT_GROUP.applied.rule}>
+					{applied === undefined ? "–" : formatShare(applied.rate.value)}
+				</span>
+			),
+			detail: (
+				<>
+					{COMPARISONS.map((group, i) => {
+						const cell = byGroup.get(group);
+						return (
+							<span key={group} title={`${CUT_GROUP[group].label}: ${CUT_GROUP[group].rule}`}>
+								{i > 0 && " · "}
+								<span className="spot-fb-detail" data-group={group}>
+									{cell === undefined ? "–" : formatShare(cell.rate.value)}
+								</span>
+							</span>
+						);
+					})}
+				</>
+			),
+		});
+	}
+
+	return (
+		<Card
+			index={3}
+			title="Does the agent come back for it?"
+			description="Share of results the agent fetched more of within 12 calls: cut with Spotlight's scores, cut without them, held out at random, kept whole by pi's former edit gate, and left unchanged"
+			stale={stale}
+			footer={`${FETCH_BACK_RULE} Held-out results are the true counterfactual: drawn at random from the would-be cuts and shown whole; until they accumulate, unchanged results stand in, re-weighted to the cuts' size mix. Score-free cuts skip Spotlight by a second coin and take the no-score fallback rules: if they come back as often as scored cuts, the scores add nothing. Gated reads are reads pi's former edit gate (removed) kept whole, listed only where the range has any. Small print: score-free · held out · unchanged. Whiskers are 90% session bootstrap intervals, from 3 sessions.`}
+		>
+			{rows.length === 0 ? (
+				<div className="empty">No evaluated results in this range.</div>
+			) : (
+				<div className="spot-fb">
+					<GroupLegend groups={legend} />
+					<DotWhisker rows={rows} format={formatShare} formatTick={v => `${Math.round(v * 100)}%`} />
+					{rest.length > 0 && (
+						<MoreTools hidden={rest} expanded={expanded} onToggle={() => setExpanded(value => !value)} />
+					)}
+				</div>
+			)}
+		</Card>
+	);
+}
+
+/** Fetch-backs per gap bin as each group's share of its own fetch-backs (the groups differ in size). */
+function GapPanel({ tool, counts }: { tool: SpotlightTool; counts: readonly SpotlightGapCount[] }) {
+	const Icon = toolIcon(tool);
+	const byBin = new Map(counts.map(c => [c.gap, c]));
+	let applied = 0;
+	let holdout = 0;
+	for (const c of counts) {
+		applied += c.applied;
+		holdout += c.holdout;
+	}
+	const totals: Record<GapGroup, number> = { applied, holdout };
+	let top = 0;
+	for (const c of counts) {
+		if (applied > 0) top = Math.max(top, c.applied / applied);
+		if (holdout > 0) top = Math.max(top, c.holdout / holdout);
+	}
+
+	return (
+		<section className="spot-gap" aria-label={`${tool} fetch-back gaps`}>
+			<h3 className="spot-panel-title row spot-gap-title">
+				<Icon size={13} aria-hidden="true" />
+				{tool}
+				<span className="dim">
+					<span className="num">{formatInteger(applied)}</span> shortened ·{" "}
+					<span className="num">{formatInteger(holdout)}</span> held out
+				</span>
+			</h3>
+			{applied + holdout === 0 ? (
+				<div className="spot-gap-empty dim">No fetch-backs</div>
+			) : (
+				<div className="spot-gap-bins">
+					{GAP_BINS.map(bin => {
+						const count = byBin.get(bin);
+						return (
+							<div key={bin} className="spot-gap-bin">
+								<div className="spot-gap-bars">
+									{GAP_GROUPS.map(group => {
+										const n = count?.[group] ?? 0;
+										const total = totals[group];
+										const share = total > 0 ? n / total : 0;
+										const noun = bin === "1" ? "call" : "calls";
+										return (
+											<span
+												key={group}
+												className="spot-gap-bar"
+												data-group={group}
+												data-empty={total === 0}
+												title={`${bin} ${noun} later: ${formatInteger(n)} of ${formatInteger(total)} ${CUT_GROUP[group].label.toLowerCase()} fetch-backs`}
+											>
+												{total > 0 && <span className="spot-gap-value num">{formatShare(share)}</span>}
+												<span
+													className="spot-gap-fill"
+													style={{ height: `${top > 0 ? (share / top) * 100 : 0}%` }}
+												/>
+											</span>
+										);
+									})}
+								</div>
+								<span className="spot-gap-label num">{bin}</span>
+							</div>
+						);
+					})}
+				</div>
+			)}
+		</section>
+	);
+}
+
+/** How many calls after the cut the agent fetched back, per tool, shortened against held out. */
+export function FetchBackGaps({ stats, stale }: FetchBackProps) {
+	const [expanded, setExpanded] = useState(false);
+	const counted = new Set(stats.gaps.map(count => count.tool));
+	const { listed, rest } = foldTools(toolsBySaving(stats).filter(tool => counted.has(tool)));
+	return (
+		<Card
+			index={3}
+			title="How soon it comes back"
+			description="Calls between a result and the first fetch-back after it"
+			stale={stale}
+			footer="Bars are each group's share of its own fetch-backs, so shortened and held-out results compare despite their different counts (next to each tool). Same rule as above; nothing after 12 calls counts."
+		>
+			{listed.length === 0 ? (
+				<div className="empty">No fetch-backs in this range.</div>
+			) : (
+				<>
+					<GroupLegend groups={GAP_GROUPS} />
+					<div className="spot-gaps">
+						{(expanded ? [...listed, ...rest] : listed).map(tool => (
+							<GapPanel key={tool} tool={tool} counts={stats.gaps.filter(c => c.tool === tool)} />
+						))}
+					</div>
+					{rest.length > 0 && (
+						<MoreTools hidden={rest} expanded={expanded} onToggle={() => setExpanded(value => !value)} />
+					)}
+				</>
+			)}
+		</Card>
+	);
+}

package/src/client/spotlight/Hero.tsx

@@ -0,0 +1,177 @@
+import { TriangleAlert } from "lucide-react";
+import { formatCompact, formatInteger } from "../data/formatters";
+import type { SpotlightDashboardStats } from "../types";
+import { Stat } from "../ui";
+import { foldTools, formatInterval, formatShare, formatSignedCompact, formatSignedCost, OTHER_TOOLS } from "./meta";
+
+export interface SpotlightHeroProps {
+	stats: SpotlightDashboardStats;
+	/** Prose window ("the last 7 days"). */
+	windowLabel: string;
+	stale: boolean;
+}
+
+/**
+ * Headline: the holdout-adjusted net (tokens and $, with intervals) against what `plain` would have shown, the old
+ * full-output figure struck through as the baseline note, then gross, the excess fetch-back and the sample.
+ */
+export function SpotlightHero({ stats, windowLabel, stale }: SpotlightHeroProps) {
+	const { gross, clawback, adjusted } = stats;
+	const net = adjusted.netTokens;
+	const netUsd = adjusted.netUsd;
+	const tokenInterval = formatInterval(net, formatSignedCompact);
+	const usdInterval = formatInterval(netUsd, formatSignedCost);
+	// A tool's baseline only matters when it has cuts to adjust; `adjusted.byTool` runs the largest saving first.
+	const thin = adjusted.byTool.filter(row => row.cuts > 0 && row.holdouts < adjusted.minHoldouts).map(row => row.tool);
+	// Prose list: `read`, `read and bash`, `read, bash and eval`, `read, bash, … and 4 more tools`.
+	const thinFold = foldTools(thin);
+	const thinNames = thinFold.rest.length > 0 ? [...thinFold.listed, `${thinFold.rest.length} more tools`] : thin;
+	const thinProse =
+		thinNames.length < 2 ? (thinNames[0] ?? "") : `${thinNames.slice(0, -1).join(", ")} and ${thinNames.at(-1)}`;
+	const heldFold = foldTools(adjusted.byTool);
+	const heldRows = heldFold.listed.map(row => ({
+		tool: row.tool,
+		holdouts: row.holdouts,
+		thin: thin.includes(row.tool),
+	}));
+	if (heldFold.rest.length > 0) {
+		heldRows.push({
+			tool: OTHER_TOOLS,
+			holdouts: heldFold.rest.reduce((sum, row) => sum + row.holdouts, 0),
+			thin: heldFold.rest.some(row => thin.includes(row.tool)),
+		});
+	}
+	const overstated = gross.fullSavedTokens > 0 ? 1 - gross.savedTokens / gross.fullSavedTokens : null;
+
+	return (
+		<section className="card rise spot-hero" data-stale={stale} aria-label="Spotlight savings summary">
+			<div className="spot-hero-main">
+				<div className="spot-hero-headline">
+					<div className="spot-eyebrow">Net saved in {windowLabel}, after fetch-backs a cut caused</div>
+					<div className="spot-hero-figures">
+						<span
+							className="spot-hero-value gradient-text"
+							title={net.value === null ? undefined : `${formatInteger(net.value)} tokens`}
+						>
+							{net.value === null ? "–" : formatSignedCompact(net.value)}
+						</span>
+						<span className="spot-hero-unit">tokens</span>
+						{netUsd.value !== null && (
+							<span
+								className="spot-hero-usd"
+								data-negative={netUsd.value < 0}
+								title="Avoided context priced at each later request's cache rates, minus the fetch-backs beyond the holdout baseline (priced the same way) and Spotlight's own bill"
+							>
+								{formatSignedCost(netUsd.value)}
+							</span>
+						)}
+					</div>
+					{(tokenInterval !== "" || usdInterval !== "") && (
+						<div className="spot-hero-interval">
+							90% interval{" "}
+							<span className="num">{[tokenInterval, usdInterval].filter(Boolean).join(" · ")}</span>
+						</div>
+					)}
+				</div>
+				<div className="spot-hero-aside">
+					<p className="spot-hero-note">
+						Counted against what pi would have shown unshaped (<code>plain</code>) for the same call (its inline
+						cap and read page), with fetch-backs that held-out results show happen anyway added back.{" "}
+						{gross.fullSavedTokens > gross.savedTokens && (
+							<>
+								Against the full output the shaping read, the cuts would claim{" "}
+								<s className="spot-struck num">{formatCompact(gross.fullSavedTokens)}</s>, overstating the gross
+								by {formatShare(overstated)}.{" "}
+							</>
+						)}
+						{gross.widerThanPlain > 0 &&
+							`${formatInteger(gross.widerThanPlain)} ${gross.widerThanPlain === 1 ? "result was" : "results were"} wider than plain would have shown: cuts shown that way count as losses, results pi capped at plain's text save nothing. `}
+						{gross.estimatedPlain > 0 &&
+							`${formatInteger(gross.estimatedPlain)} older ${gross.estimatedPlain === 1 ? "result estimates" : "results estimate"} plain from the inline cap.`}
+					</p>
+					{thin.length > 0 && (
+						<p className="spot-hero-warn" role="note">
+							<TriangleAlert size={14} aria-hidden="true" />
+							<span>
+								{thinProse} {thin.length === 1 ? "has" : "have"} fewer than{" "}
+								{formatInteger(adjusted.minHoldouts)} held-out results: {thin.length === 1 ? "its" : "their"}{" "}
+								part of the net rests on a thin baseline.
+							</span>
+						</p>
+					)}
+				</div>
+			</div>
+
+			<div className="spot-hero-stats">
+				<Stat
+					size="sm"
+					label="Gross vs plain"
+					title="Σ (plain − shortened) tokens over shortened results; a cut that showed more than plain counts negative"
+					value={formatSignedCompact(gross.savedTokens)}
+					hint={`${formatShare(gross.ofToolOutput)} of tool output · ${formatInteger(gross.shaped)} of ${formatInteger(gross.results)} results shortened`}
+				/>
+				<Stat
+					size="sm"
+					label="Fetched back beyond baseline"
+					title="Fetch-back tokens beyond what held-out results (shown whole) fetch anyway, per tool (reads split by whether the agent was likely to edit them); 90% interval below"
+					value={adjusted.excessTokens.value === null ? "–" : formatSignedCompact(-adjusted.excessTokens.value)}
+					hint={
+						<>
+							of {formatCompact(clawback.tokens)} fetched back
+							{adjusted.excessTokens.lo !== null && adjusted.excessTokens.hi !== null && (
+								<>
+									{" "}
+									<span className="dim">
+										·{" "}
+										<span className="spot-nowrap">
+											90% {formatInterval(adjusted.excessTokens, formatCompact)}
+										</span>
+									</span>
+								</>
+							)}
+						</>
+					}
+				/>
+				<Stat
+					size="sm"
+					label="Held out"
+					title={`Would-be cuts shown whole at random: the baseline per tool (under ${adjusted.minHoldouts} is thin)`}
+					value={formatInteger(stats.holdouts)}
+					hint={
+						<span className="spot-hero-tools">
+							{heldRows.map(row => (
+								<span
+									key={row.tool}
+									data-thin={row.thin}
+									title={
+										row.tool === OTHER_TOOLS
+											? heldFold.rest.map(rest => `${rest.tool} ${formatInteger(rest.holdouts)}`).join(", ")
+											: row.thin
+												? `${row.tool}: under ${adjusted.minHoldouts} held out`
+												: undefined
+									}
+								>
+									{row.tool} <span className="num">{formatInteger(row.holdouts)}</span>
+									{row.thin && <TriangleAlert size={11} aria-label="thin baseline" />}
+								</span>
+							))}
+						</span>
+					}
+				/>
+				<Stat
+					size="sm"
+					label="Score-free cuts"
+					title="Cuts a random coin made without Spotlight (the no-score fallback rules): what Spotlight's scores add is the difference"
+					value={formatInteger(stats.scoreFree)}
+					hint="cut without Spotlight, for comparison"
+				/>
+				<Stat
+					size="sm"
+					label="Sessions"
+					value={formatInteger(stats.sessions)}
+					hint="experiment sessions, all shaped"
+				/>
+			</div>
+		</section>
+	);
+}