@gajae-code/stats 0.1.1

package/src/client/api.ts

@@ -0,0 +1,65 @@
+import type {
+	BehaviorDashboardStats,
+	CostDashboardStats,
+	DashboardStats,
+	MessageStats,
+	ModelDashboardStats,
+	OverviewStats,
+	RequestDetails,
+} from "./types";
+
+const API_BASE = "/api";
+
+export async function getStats(range = "24h"): Promise<DashboardStats> {
+	const res = await fetch(`${API_BASE}/stats?range=${encodeURIComponent(range)}`);
+	if (!res.ok) throw new Error("Failed to fetch stats");
+	return res.json() as Promise<DashboardStats>;
+}
+
+export async function getOverviewStats(range = "24h"): Promise<OverviewStats> {
+	const res = await fetch(`${API_BASE}/stats/overview?range=${encodeURIComponent(range)}`);
+	if (!res.ok) throw new Error("Failed to fetch overview stats");
+	return res.json() as Promise<OverviewStats>;
+}
+
+export async function getModelDashboardStats(range = "24h"): Promise<ModelDashboardStats> {
+	const res = await fetch(`${API_BASE}/stats/model-dashboard?range=${encodeURIComponent(range)}`);
+	if (!res.ok) throw new Error("Failed to fetch model stats");
+	return res.json() as Promise<ModelDashboardStats>;
+}
+
+export async function getCostDashboardStats(range = "24h"): Promise<CostDashboardStats> {
+	const res = await fetch(`${API_BASE}/stats/costs?range=${encodeURIComponent(range)}`);
+	if (!res.ok) throw new Error("Failed to fetch cost stats");
+	return res.json() as Promise<CostDashboardStats>;
+}
+
+export async function getRecentRequests(limit = 50): Promise<MessageStats[]> {
+	const res = await fetch(`${API_BASE}/stats/recent?limit=${limit}`);
+	if (!res.ok) throw new Error("Failed to fetch recent requests");
+	return res.json() as Promise<MessageStats[]>;
+}
+
+export async function getRecentErrors(limit = 50): Promise<MessageStats[]> {
+	const res = await fetch(`${API_BASE}/stats/errors?limit=${limit}`);
+	if (!res.ok) throw new Error("Failed to fetch recent errors");
+	return res.json() as Promise<MessageStats[]>;
+}
+
+export async function getRequestDetails(id: number): Promise<RequestDetails> {
+	const res = await fetch(`${API_BASE}/request/${id}`);
+	if (!res.ok) throw new Error("Failed to fetch request details");
+	return res.json() as Promise<RequestDetails>;
+}
+
+export async function sync(): Promise<any> {
+	const res = await fetch(`${API_BASE}/sync`);
+	if (!res.ok) throw new Error("Failed to sync");
+	return res.json();
+}
+
+export async function getBehaviorDashboardStats(range = "24h"): Promise<BehaviorDashboardStats> {
+	const res = await fetch(`${API_BASE}/stats/behavior?range=${encodeURIComponent(range)}`);
+	if (!res.ok) throw new Error("Failed to fetch behavior stats");
+	return res.json() as Promise<BehaviorDashboardStats>;
+}

package/src/client/components/BehaviorChart.tsx

@@ -0,0 +1,189 @@
+import {
+	BarElement,
+	CategoryScale,
+	Chart as ChartJS,
+	type ChartOptions,
+	Filler,
+	Legend,
+	LinearScale,
+	LineElement,
+	PointElement,
+	Title,
+	Tooltip,
+} from "chart.js";
+import { useMemo, useState } from "react";
+import { Bar, Line } from "react-chartjs-2";
+import type { BehaviorTimeSeriesPoint } from "../types";
+import { useSystemTheme } from "../useSystemTheme";
+import {
+	barDatasetStyle,
+	buildAggregateTimeSeries,
+	buildSharedPlugins,
+	buildSharedScales,
+	buildTopNByModelSeries,
+	CHART_THEMES,
+	ChartFrame,
+	type ChartSeries,
+	lineDatasetStyle,
+	MODEL_COLORS,
+	styleDatasets,
+} from "./chart-shared";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend, Filler);
+
+const METRIC_OPTIONS = [
+	{ value: "yelling", label: "Yelling" },
+	{ value: "profanity", label: "Profanity" },
+	{ value: "anguish", label: "Anguish (!!!, nooo, dude, ..)" },
+	{ value: "negation", label: "Negation (no/nope/wrong)" },
+	{ value: "repetition", label: "Repetition (i meant, still doesnt)" },
+	{ value: "blame", label: "Blame (you didnt, stop X-ing)" },
+	{ value: "frustration", label: "Frustration (neg + rep + blame)" },
+	{ value: "total", label: "All signals combined" },
+] as const;
+type Metric = (typeof METRIC_OPTIONS)[number]["value"];
+
+function formatRateAxis(value: number): string {
+	if (!Number.isFinite(value)) return "-";
+	if (value === 0) return "0%";
+	if (Math.abs(value) < 1) return `${value.toFixed(1)}%`;
+	return `${value.toFixed(0)}%`;
+}
+
+interface BehaviorChartProps {
+	behaviorSeries: BehaviorTimeSeriesPoint[];
+}
+
+function pointHits(point: BehaviorTimeSeriesPoint, metric: Metric): number {
+	if (metric === "frustration") return point.negation + point.repetition + point.blame;
+	if (metric === "total") {
+		return point.yelling + point.profanity + point.anguish + point.negation + point.repetition + point.blame;
+	}
+	return point[metric];
+}
+
+/** Hits per 100 user messages, 0 when there were no messages. */
+function ratePercent(hits: number, messages: number): number {
+	if (messages <= 0) return 0;
+	return (hits / messages) * 100;
+}
+
+interface DailyBucket {
+	hits: number;
+	messages: number;
+}
+
+function buildAggregateSeries(points: BehaviorTimeSeriesPoint[], metric: Metric): ChartSeries {
+	const label = METRIC_OPTIONS.find(m => m.value === metric)?.label ?? "Hits";
+	return buildAggregateTimeSeries<BehaviorTimeSeriesPoint, DailyBucket>(points, label, {
+		initBucket: () => ({ hits: 0, messages: 0 }),
+		accumulate: (bucket, point) => {
+			bucket.hits += pointHits(point, metric);
+			bucket.messages += point.messages;
+		},
+		bucketToValue: bucket => ratePercent(bucket.hits, bucket.messages),
+	});
+}
+
+function buildByModelSeries(points: BehaviorTimeSeriesPoint[], metric: Metric): ChartSeries {
+	// Rank by message volume so the models you actually use surface first,
+	// matching the Behavior-by-Model table. Per-bucket math tracks hits +
+	// messages separately so the final rate isn't skewed by low-volume days.
+	return buildTopNByModelSeries<BehaviorTimeSeriesPoint, DailyBucket>(points, {
+		rankWeight: point => point.messages,
+		initBucket: () => ({ hits: 0, messages: 0 }),
+		accumulate: (bucket, point) => {
+			bucket.hits += pointHits(point, metric);
+			bucket.messages += point.messages;
+		},
+		bucketToValue: bucket => ratePercent(bucket.hits, bucket.messages),
+	});
+}
+
+export function BehaviorChart({ behaviorSeries }: BehaviorChartProps) {
+	const [byModel, setByModel] = useState(false);
+	const [metric, setMetric] = useState<Metric>("total");
+	const theme = useSystemTheme();
+	const chartTheme = CHART_THEMES[theme];
+
+	const chartData = useMemo(
+		() => (byModel ? buildByModelSeries(behaviorSeries, metric) : buildAggregateSeries(behaviorSeries, metric)),
+		[behaviorSeries, byModel, metric],
+	);
+
+	const sharedPlugins = buildSharedPlugins({
+		chartTheme,
+		showLegend: byModel,
+		defaultLabel: "Hits",
+		formatValue: formatRateAxis,
+	});
+
+	const { sharedScaleBase, yScale } = buildSharedScales({ chartTheme, formatY: formatRateAxis });
+
+	const metricLabel = METRIC_OPTIONS.find(m => m.value === metric)?.label ?? "";
+	const metricTabs = (
+		<div className="flex bg-[var(--bg-surface)] rounded-[var(--radius-sm)] p-0.5 border border-[var(--border-subtle)]">
+			{METRIC_OPTIONS.map(opt => (
+				<button
+					key={opt.value}
+					type="button"
+					onClick={() => setMetric(opt.value)}
+					className={`tab-btn text-xs ${metric === opt.value ? "active" : ""}`}
+				>
+					{opt.label}
+				</button>
+			))}
+		</div>
+	);
+
+	let chartNode: React.ReactNode;
+	if (byModel) {
+		const lineData = {
+			labels: chartData.labels,
+			datasets: styleDatasets(chartData, i => lineDatasetStyle(MODEL_COLORS[i % MODEL_COLORS.length])),
+		};
+
+		const lineOptions: ChartOptions<"line"> = {
+			responsive: true,
+			maintainAspectRatio: false,
+			interaction: { mode: "index", intersect: false },
+			plugins: sharedPlugins,
+			scales: { x: sharedScaleBase, y: yScale },
+		};
+
+		chartNode = <Line data={lineData} options={lineOptions} />;
+	} else {
+		const barData = {
+			labels: chartData.labels,
+			datasets: styleDatasets(chartData, i => barDatasetStyle(MODEL_COLORS[i % MODEL_COLORS.length])),
+		};
+
+		const barOptions: ChartOptions<"bar"> = {
+			responsive: true,
+			maintainAspectRatio: false,
+			interaction: { mode: "index", intersect: false },
+			plugins: sharedPlugins,
+			scales: {
+				x: { ...sharedScaleBase, stacked: true },
+				y: { ...yScale, stacked: true },
+			},
+			layout: { padding: { top: 8 } },
+		};
+
+		chartNode = <Bar data={barData} options={barOptions} />;
+	}
+
+	return (
+		<ChartFrame
+			title="User Tantrums"
+			subtitle={`${metricLabel} as % of user messages per day`}
+			empty={chartData.labels.length === 0}
+			emptyMessage="No behavioral data yet. Sync to scan your sessions."
+			controls={metricTabs}
+			byModel={byModel}
+			onByModelChange={setByModel}
+		>
+			{chartNode}
+		</ChartFrame>
+	);
+}

package/src/client/components/BehaviorModelsTable.tsx

@@ -0,0 +1,342 @@
+import {
+	CategoryScale,
+	Chart as ChartJS,
+	Legend,
+	LinearScale,
+	LineElement,
+	PointElement,
+	Title,
+	Tooltip,
+} from "chart.js";
+import { format } from "date-fns";
+import { useMemo, useState } from "react";
+import { Line } from "react-chartjs-2";
+import type { BehaviorModelStats, BehaviorTimeSeriesPoint } from "../types";
+import { useSystemTheme } from "../useSystemTheme";
+import {
+	DetailChartEmpty,
+	detailChartPlugins,
+	detailChartScalesSingleAxis,
+	ExpandableModelRow,
+	lineSeriesStyle,
+	MiniSparkline,
+	MODEL_COLORS,
+	ModelNameCell,
+	ModelTableBody,
+	ModelTableHeader,
+	ModelTableShell,
+	TABLE_CHART_THEMES,
+	type TableChartTheme,
+	TrendEmpty,
+} from "./models-table-shared";
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+
+const SERIES_COLORS = {
+	yelling: "#fbbf24", // amber
+	profanity: "#f87171", // red
+	anguish: "#a78bfa", // violet
+	frustration: "#22d3ee", // cyan - new semantic signals
+} as const;
+
+interface BehaviorModelsTableProps {
+	models: BehaviorModelStats[];
+	behaviorSeries: BehaviorTimeSeriesPoint[];
+}
+
+interface DailyPoint {
+	timestamp: number;
+	yelling: number;
+	profanity: number;
+	anguish: number;
+	frustration: number;
+	total: number;
+}
+
+interface ModelTrendSeries {
+	data: DailyPoint[];
+}
+
+const GRID_TEMPLATE = "2fr 0.9fr 0.8fr 0.8fr 0.8fr 0.9fr 0.8fr 140px 40px";
+
+function formatInt(value: number): string {
+	return value.toLocaleString();
+}
+
+function totalHitRate(model: BehaviorModelStats): number {
+	if (model.totalMessages === 0) return 0;
+	const hits =
+		model.totalYelling +
+		model.totalProfanity +
+		model.totalAnguish +
+		model.totalNegation +
+		model.totalRepetition +
+		model.totalBlame;
+	return hits / model.totalMessages;
+}
+
+/**
+ * Rate-as-percent. < 1% shows one decimal so a 0.4% model doesn't read as 0%.
+ */
+function formatRate(total: number, messages: number): string {
+	if (messages === 0) return "-";
+	const pct = (total / messages) * 100;
+	if (pct === 0) return "0%";
+	if (pct < 1) return `${pct.toFixed(1)}%`;
+	return `${pct.toFixed(0)}%`;
+}
+
+export function BehaviorModelsTable({ models, behaviorSeries }: BehaviorModelsTableProps) {
+	const [expandedKey, setExpandedKey] = useState<string | null>(null);
+	const theme = useSystemTheme();
+	const chartTheme = TABLE_CHART_THEMES[theme];
+
+	const trendByKey = useMemo(() => buildTrendLookup(behaviorSeries), [behaviorSeries]);
+
+	// Sort by usage so the models you actually rely on surface first; rates
+	// stay visible per row so a low-volume freak doesn't dominate.
+	const sortedModels = [...models].sort((a, b) => {
+		if (b.totalMessages !== a.totalMessages) return b.totalMessages - a.totalMessages;
+		return totalHitRate(b) - totalHitRate(a);
+	});
+
+	return (
+		<ModelTableShell
+			title="Behavior by Model"
+			subtitle="How often each model elicited a tantrum — rates are per user message"
+		>
+			<ModelTableHeader
+				gridTemplate={GRID_TEMPLATE}
+				columns={[
+					{ label: "Model" },
+					{ label: "Messages", align: "right" },
+					{ label: "CAPS %", align: "right" },
+					{ label: "Profanity %", align: "right" },
+					{ label: "Anguish %", align: "right" },
+					{ label: "Frustration %", align: "right" },
+					{ label: "Hits %", align: "right" },
+					{ label: "Trend", align: "center" },
+				]}
+			/>
+
+			<ModelTableBody>
+				{sortedModels.map((model, index) => {
+					const key = `${model.model}::${model.provider}`;
+					const trend = trendByKey.get(key)?.data ?? [];
+					const trendColor = MODEL_COLORS[index % MODEL_COLORS.length];
+					const isExpanded = expandedKey === key;
+					const totalFrustration = model.totalNegation + model.totalRepetition + model.totalBlame;
+					const totalHits = model.totalYelling + model.totalProfanity + model.totalAnguish + totalFrustration;
+
+					return (
+						<ExpandableModelRow
+							key={key}
+							gridTemplate={GRID_TEMPLATE}
+							isExpanded={isExpanded}
+							onToggle={() => setExpandedKey(isExpanded ? null : key)}
+							cells={[
+								<ModelNameCell key="name" model={model.model} provider={model.provider} />,
+								<div key="messages" className="text-right text-[var(--text-secondary)] font-mono text-sm">
+									{formatInt(model.totalMessages)}
+								</div>,
+								<div key="caps" className="text-right text-[var(--text-secondary)] font-mono text-sm">
+									{formatRate(model.totalYelling, model.totalMessages)}
+								</div>,
+								<div key="profanity" className="text-right text-[var(--text-secondary)] font-mono text-sm">
+									{formatRate(model.totalProfanity, model.totalMessages)}
+								</div>,
+								<div key="anguish" className="text-right text-[var(--text-secondary)] font-mono text-sm">
+									{formatRate(model.totalAnguish, model.totalMessages)}
+								</div>,
+								<div key="frustration" className="text-right text-[var(--text-secondary)] font-mono text-sm">
+									{formatRate(totalFrustration, model.totalMessages)}
+								</div>,
+								<div key="hits" className="text-right text-[var(--text-secondary)] font-mono text-sm">
+									{formatRate(totalHits, model.totalMessages)}
+								</div>,
+							]}
+							trendCell={
+								trend.length === 0 ? (
+									<TrendEmpty />
+								) : (
+									<MiniSparkline
+										timestamps={trend.map(d => d.timestamp)}
+										values={trend.map(d => d.total)}
+										color={trendColor}
+									/>
+								)
+							}
+							expandedContent={
+								<div className="grid gap-4" style={{ gridTemplateColumns: "220px 1fr" }}>
+									<div className="space-y-4 text-sm">
+										<DetailRow
+											label="Yelling (CAPS)"
+											total={model.totalYelling}
+											messages={model.totalMessages}
+											valueClass="text-[var(--accent-amber,#fbbf24)]"
+										/>
+										<DetailRow
+											label="Profanity"
+											total={model.totalProfanity}
+											messages={model.totalMessages}
+											valueClass="text-[var(--accent-red,#f87171)]"
+										/>
+										<DetailRow
+											label="Anguish (!!!, nooo, dude, ..)"
+											total={model.totalAnguish}
+											messages={model.totalMessages}
+											valueClass="text-[var(--accent-violet,#a78bfa)]"
+										/>
+										<DetailRow
+											label="Negation (no/nope/wrong)"
+											total={model.totalNegation}
+											messages={model.totalMessages}
+											valueClass="text-[var(--accent-cyan,#22d3ee)]"
+										/>
+										<DetailRow
+											label="Repetition (i meant, still doesnt)"
+											total={model.totalRepetition}
+											messages={model.totalMessages}
+											valueClass="text-[var(--accent-cyan,#22d3ee)]"
+										/>
+										<DetailRow
+											label="Blame (you didnt, stop X-ing)"
+											total={model.totalBlame}
+											messages={model.totalMessages}
+											valueClass="text-[var(--accent-cyan,#22d3ee)]"
+										/>
+										<DetailRow
+											label="Avg chars / msg"
+											total={model.totalChars}
+											messages={model.totalMessages}
+											valueClass="text-[var(--text-secondary)]"
+											mode="average"
+										/>
+									</div>
+									<div className="h-[200px]">
+										{trend.length === 0 ? (
+											<DetailChartEmpty />
+										) : (
+											<BreakdownChart data={trend} chartTheme={chartTheme} />
+										)}
+									</div>
+								</div>
+							}
+						/>
+					);
+				})}
+				{sortedModels.length === 0 ? (
+					<div className="border-t border-[var(--border-subtle)] px-5 py-8 text-center text-[var(--text-muted)] text-sm">
+						No user behavior recorded for this range yet.
+					</div>
+				) : null}
+			</ModelTableBody>
+		</ModelTableShell>
+	);
+}
+
+function DetailRow({
+	label,
+	total,
+	messages,
+	valueClass,
+	mode = "rate",
+}: {
+	label: string;
+	total: number;
+	messages: number;
+	valueClass: string;
+	mode?: "rate" | "average";
+}) {
+	const perMsgLabel = mode === "rate" ? "% of msgs" : "Per msg";
+	const perMsgValue =
+		messages > 0 ? (mode === "rate" ? formatRate(total, messages) : (total / messages).toFixed(0)) : "-";
+	return (
+		<div>
+			<div className="text-[var(--text-primary)] font-medium mb-2">{label}</div>
+			<div className="space-y-1 text-[var(--text-secondary)]">
+				<div className="flex items-center justify-between">
+					<span>Total</span>
+					<span className={`font-mono ${valueClass}`}>{formatInt(total)}</span>
+				</div>
+				<div className="flex items-center justify-between">
+					<span>{perMsgLabel}</span>
+					<span className="font-mono">{perMsgValue}</span>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function BreakdownChart({ data, chartTheme }: { data: DailyPoint[]; chartTheme: TableChartTheme }) {
+	const chartData = {
+		labels: data.map(d => format(new Date(d.timestamp), "MMM d")),
+		datasets: [
+			{ label: "CAPS", data: data.map(d => d.yelling), ...lineSeriesStyle(SERIES_COLORS.yelling) },
+			{ label: "Profanity", data: data.map(d => d.profanity), ...lineSeriesStyle(SERIES_COLORS.profanity) },
+			{ label: "Anguish", data: data.map(d => d.anguish), ...lineSeriesStyle(SERIES_COLORS.anguish) },
+			{ label: "Frustration", data: data.map(d => d.frustration), ...lineSeriesStyle(SERIES_COLORS.frustration) },
+		],
+	};
+
+	const options = {
+		responsive: true,
+		maintainAspectRatio: false,
+		plugins: detailChartPlugins(chartTheme),
+		scales: detailChartScalesSingleAxis(chartTheme),
+	};
+
+	return <Line data={chartData} options={options} />;
+}
+
+/**
+ * Group the daily time-series by model+provider, producing one continuous
+ * day-bucket array per model so the sparkline / breakdown chart can render
+ * without missing-day artifacts.
+ */
+function buildTrendLookup(points: BehaviorTimeSeriesPoint[]): Map<string, ModelTrendSeries> {
+	if (points.length === 0) return new Map();
+
+	const allDays = [...new Set(points.map(p => p.timestamp))].sort((a, b) => a - b);
+	const byKey = new Map<string, Map<number, DailyPoint>>();
+
+	for (const point of points) {
+		const key = `${point.model}::${point.provider}`;
+		let dayMap = byKey.get(key);
+		if (!dayMap) {
+			dayMap = new Map();
+			byKey.set(key, dayMap);
+		}
+		const existing = dayMap.get(point.timestamp) ?? {
+			timestamp: point.timestamp,
+			yelling: 0,
+			profanity: 0,
+			anguish: 0,
+			frustration: 0,
+			total: 0,
+		};
+		existing.yelling += point.yelling;
+		existing.profanity += point.profanity;
+		existing.anguish += point.anguish;
+		existing.frustration += point.negation + point.repetition + point.blame;
+		existing.total = existing.yelling + existing.profanity + existing.anguish + existing.frustration;
+		dayMap.set(point.timestamp, existing);
+	}
+
+	const out = new Map<string, ModelTrendSeries>();
+	for (const [key, dayMap] of byKey) {
+		const data = allDays.map(
+			ts =>
+				dayMap.get(ts) ?? {
+					timestamp: ts,
+					yelling: 0,
+					profanity: 0,
+					anguish: 0,
+					frustration: 0,
+					total: 0,
+				},
+		);
+		out.set(key, { data });
+	}
+	return out;
+}

package/src/client/components/BehaviorSummary.tsx

@@ -0,0 +1,95 @@
+import { useMemo } from "react";
+import type { BehaviorOverallStats, BehaviorTimeSeriesPoint } from "../types";
+
+interface BehaviorSummaryProps {
+	overall: BehaviorOverallStats;
+	behaviorSeries: BehaviorTimeSeriesPoint[];
+}
+
+function formatInt(value: number): string {
+	return value.toLocaleString();
+}
+
+/**
+ * Per-message rate for a signal. Uses 2 decimals so a 0.01-hits-per-msg model
+ * still distinguishes from a true zero, and never shows `NaN` or `Infinity`
+ * when there are no messages.
+ */
+function perMsg(total: number, messages: number): string | undefined {
+	if (messages <= 0) return undefined;
+	return `${(total / messages).toFixed(2)} / msg`;
+}
+
+export function BehaviorSummary({ overall, behaviorSeries }: BehaviorSummaryProps) {
+	// Top "ranted-at" model: model that absorbed the most caps + profanity +
+	// anguish + frustration (negation/repetition/blame).
+	const topModel = useMemo(() => {
+		const totals = new Map<string, { model: string; provider: string; score: number }>();
+		for (const point of behaviorSeries) {
+			const key = `${point.model}::${point.provider}`;
+			const existing = totals.get(key);
+			const score =
+				point.yelling + point.profanity + point.anguish + point.negation + point.repetition + point.blame;
+			if (existing) {
+				existing.score += score;
+			} else {
+				totals.set(key, { model: point.model, provider: point.provider, score });
+			}
+		}
+		let best: { model: string; provider: string; score: number } | null = null;
+		for (const entry of totals.values()) {
+			if (!best || entry.score > best.score) best = entry;
+		}
+		return best;
+	}, [behaviorSeries]);
+
+	const totalFrustration = overall.totalNegation + overall.totalRepetition + overall.totalBlame;
+	const messages = overall.totalMessages;
+
+	const cards: Array<{ label: string; value: string; sub?: string }> = [
+		{
+			label: "Messages",
+			value: formatInt(overall.totalMessages),
+			sub: messages > 0 ? "in selected range" : undefined,
+		},
+		{
+			label: "Yelling",
+			value: formatInt(overall.totalYelling),
+			sub: perMsg(overall.totalYelling, messages),
+		},
+		{
+			label: "Profanity hits",
+			value: formatInt(overall.totalProfanity),
+			sub: perMsg(overall.totalProfanity, messages),
+		},
+		{
+			label: "Anguish",
+			value: formatInt(overall.totalAnguish),
+			sub: perMsg(overall.totalAnguish, messages),
+		},
+		{
+			label: "Frustration",
+			value: formatInt(totalFrustration),
+			sub: perMsg(totalFrustration, messages),
+		},
+		{
+			label: "Most yelled-at",
+			value: topModel?.model ?? "\u2014",
+			sub: topModel ? `${formatInt(topModel.score)} hits` : undefined,
+		},
+	];
+
+	return (
+		<div className="grid grid-cols-2 sm:grid-cols-6 gap-4">
+			{cards.map(card => (
+				<div key={card.label} className="surface px-4 py-3">
+					<p className="text-xs text-[var(--text-muted)] mb-1">{card.label}</p>
+					<p className="text-lg font-semibold text-[var(--text-primary)] truncate" title={card.value}>
+						{card.value}
+					</p>
+					{card.sub && <p className="text-xs text-[var(--text-muted)] mt-0.5">{card.sub}</p>}
+				</div>
+			))}
+		</div>
+	);
+}