@linxiraos/pi-stats 1.1.27 → 1.2.0

package/src/client/routes/ProvidersRoute.tsx

@@ -1,6 +1,6 @@
-import { format } from "@linxiraos/pi-utils/dates";
 import { type ReactNode, useMemo, useState } from "react";
 import { getProviderDashboardStats, getProviderWindowStats } from "../api";
+import { t } from "../i18n";
 import { Chart, type ChartSeries, Legend, ShareBar, TimeChart, useHiddenSeries } from "../charts";
 import { buildColorLookup, OTHER_COLOR, SERIES_COLORS } from "../data/colors";
 import {
@@ -12,6 +12,7 @@ import {
 	formatPercent,
 	formatRelativeTime,
 	formatTokensPerSecond,
+	formatDateTimeShort,
 } from "../data/formatters";
 import { type QueryResult, useQuery } from "../data/query";
 import { bucketAxis, formatBucket, formatTick, rangeMeta } from "../data/range";
@@ -52,23 +53,22 @@ export interface ProvidersRouteProps {
 type BurnMetric = "tokens" | "cost" | "requests";
 
 const BURN_OPTIONS = [
-	{ value: "tokens" as const, label: "Tokens" },
-	{ value: "cost" as const, label: "Cost", title: "API-equivalent estimate" },
-	{ value: "requests" as const, label: "Requests" },
+	{ value: "tokens" as const, label: t("common.tokens") },
+	{ value: "cost" as const, label: t("common.cost"), title: t("providers.cost-title") },
+	{ value: "requests" as const, label: t("common.requests") },
 ];
 
 /** Providers stacked individually in the burn chart; the rest fold into "Other". */
 const TOP_PROVIDERS = 6;
 
 const TOKEN_MIX = [
-	{ key: "input", label: "Uncached input", color: "#5b8cff" },
-	{ key: "cacheRead", label: "Cache read", color: "var(--chart-primary)" },
-	{ key: "cacheWrite", label: "Cache write", color: "#f5b54a" },
-	{ key: "output", label: "Output", color: "var(--chart-secondary)" },
+	{ key: "input", label: t("ui.uncached-input"), color: "#5b8cff" },
+	{ key: "cacheRead", label: t("common.cache-read"), color: "var(--chart-primary)" },
+	{ key: "cacheWrite", label: t("common.cache-write"), color: "#f5b54a" },
+	{ key: "output", label: t("common.output"), color: "var(--chart-secondary)" },
 ] as const;
 
-const SNAPSHOT_HINT =
-	"Usage snapshots accumulate whenever usage limits are fetched (TUI footer, /usage, zeta-c usage).";
+const SNAPSHOT_HINT = t("providers.snapshot-hint");
 
 interface WindowRef {
 	provider: string;
@@ -76,14 +76,16 @@ interface WindowRef {
 }
 
 export function ProvidersRoute({ active, range }: ProvidersRouteProps) {
-	const stats = useQuery(["providers", range], () => getProviderDashboardStats(range), { enabled: active });
+	const stats = useQuery(["providers", range], ({ signal }) => getProviderDashboardStats(range, signal), {
+		enabled: active,
+	});
 	const [metric, setMetric] = useState<BurnMetric>("tokens");
 	const [hidden, toggleHidden] = useHiddenSeries();
 	const meta = rangeMeta(range);
 
 	// Subscription windows load independently: insights for every provider
 	// first, then utilization series for the one provider being charted.
-	const windows = useQuery(["provider-windows", range], () => getProviderWindowStats(range, null), {
+	const windows = useQuery(["provider-windows", range], ({ signal }) => getProviderWindowStats(range, null, signal), {
 		enabled: active,
 	});
 	const [picked, setPicked] = useState<WindowRef | null>(null);
@@ -91,7 +93,7 @@ export function ProvidersRoute({ active, range }: ProvidersRouteProps) {
 	const selectedProvider = selected?.provider ?? null;
 	const accounts = useQuery(
 		["provider-windows", range, selectedProvider],
-		() => getProviderWindowStats(range, selectedProvider),
+		({ signal }) => getProviderWindowStats(range, selectedProvider, signal),
 		{ enabled: active && selectedProvider !== null },
 	);
 
@@ -140,13 +142,13 @@ export function ProvidersRoute({ active, range }: ProvidersRouteProps) {
 
 	const burnSeries = view.burn[metric];
 	const burnFormat = metric === "cost" ? (v: number) => formatCost(v) : formatCompact;
-	const t = view.totals;
+	const totals = view.totals;
 
 	return (
 		<div className="page">
 			<PageHeader
-				title="Providers"
-				description={`Burn, reliability and subscription headroom per provider over ${meta.windowLabel}.`}
+				title={t("common.providers")}
+				description={t("providers.description", { window: t(meta.windowKey) })}
 			/>
 
 			<QueryView query={stats} skeleton={<ChartSkeleton height={112} />}>
@@ -154,34 +156,42 @@ export function ProvidersRoute({ active, range }: ProvidersRouteProps) {
 					<div data-stale={stats.stale}>
 						<StatGrid min={190}>
 							<Stat
-								label="Providers"
+								label={t("common.providers")}
 								value={formatInteger(providers.length)}
-								hint={view.topProvider ? `Most tokens: ${view.topProvider.provider}` : undefined}
+								hint={
+									view.topProvider
+										? t("providers.most-tokens", { provider: view.topProvider.provider })
+										: undefined
+								}
 							/>
 							<Stat
-								label="Requests"
-								value={formatInteger(t.requests)}
-								hint={`${formatInteger(t.failed)} failed`}
+								label={t("common.requests")}
+								value={formatInteger(totals.requests)}
+								hint={t("providers.failed-n", { count: formatInteger(totals.failed) })}
 								spark={view.spark.requests}
 							/>
 							<Stat
-								label="Tokens"
-								title="Uncached input + cache reads + cache writes + output"
-								value={formatCompact(t.tokens)}
+								label={t("common.tokens")}
+								title={t("providers.tokens-title")}
+								value={formatCompact(totals.tokens)}
 								spark={view.spark.tokens}
 							/>
 							<Stat
-								label="API-equivalent cost"
-								title="What this usage would cost at public API rates"
-								value={formatEstimatedCost(t.cost, t.unpriced)}
-								hint={t.unpriced > 0 ? `${formatInteger(t.unpriced)} unpriced` : undefined}
+								label={t("providers.api-equivalent-cost")}
+								title={t("providers.api-cost-title")}
+								value={formatEstimatedCost(totals.cost, totals.unpriced)}
+								hint={
+									totals.unpriced > 0
+										? t("providers.unpriced-n", { count: formatInteger(totals.unpriced) })
+										: undefined
+								}
 								spark={view.spark.cost}
 								sparkColor="var(--chart-secondary)"
 							/>
 							<Stat
-								label="Error rate"
-								value={formatErrorRate(t.requests > 0 ? t.failed / t.requests : 0)}
-								hint={`${formatInteger(t.requests - t.failed)} succeeded`}
+								label={t("common.error-rate")}
+								value={formatErrorRate(totals.requests > 0 ? totals.failed / totals.requests : 0)}
+								hint={t("providers.succeeded-n", { count: formatInteger(totals.requests - totals.failed) })}
 							/>
 						</StatGrid>
 					</div>
@@ -190,11 +200,16 @@ export function ProvidersRoute({ active, range }: ProvidersRouteProps) {
 
 			<Card
 				index={1}
-				title="Provider totals"
+				title={t("providers.totals")}
 				description={
-					t.unpriced > 0
-						? `Cost is an API-equivalent estimate and excludes ${formatInteger(t.unpriced)} unpriced subscription request${t.unpriced === 1 ? "" : "s"}. Select a row for its token mix.`
-						: "Cost is an API-equivalent estimate. Select a row for its token mix."
+					totals.unpriced > 0
+						? t(
+								totals.unpriced === 1
+									? "providers.totals-description-unpriced-one"
+									: "providers.totals-description-unpriced-n",
+								{ count: formatInteger(totals.unpriced) },
+							)
+						: t("providers.totals-description")
 				}
 				flush
 				stale={stats.stale}
@@ -207,11 +222,21 @@ export function ProvidersRoute({ active, range }: ProvidersRouteProps) {
 			<div className="grid grid-main-side">
 				<Card
 					index={2}
-					title="Burn by provider"
+					title={t("providers.burn")}
 					description={
-						metric === "cost" && t.unpriced > 0
-							? `API-equivalent estimate per ${meta.bucketMs < 86_400_000 ? "hour" : "day"}; excludes unpriced subscription requests`
-							: `Per ${meta.bucketMs < 3_600_000 ? "5 minutes" : meta.bucketMs < 86_400_000 ? "hour" : "day"}, top ${TOP_PROVIDERS} providers stacked`
+						metric === "cost" && totals.unpriced > 0
+							? t("providers.burn-estimate-description", {
+									bucket: meta.bucketMs < 86_400_000 ? t("providers.bucket-hour") : t("providers.bucket-day"),
+								})
+							: t("providers.burn-description", {
+									bucket:
+										meta.bucketMs < 3_600_000
+											? t("providers.bucket-5m")
+											: meta.bucketMs < 86_400_000
+												? t("providers.bucket-hour")
+												: t("providers.bucket-day"),
+									count: TOP_PROVIDERS,
+								})
 					}
 					actions={<Segmented size="sm" options={BURN_OPTIONS} value={metric} onChange={setMetric} />}
 					stale={stats.stale}
@@ -227,7 +252,7 @@ export function ProvidersRoute({ active, range }: ProvidersRouteProps) {
 									height={260}
 									format={burnFormat}
 									formatTooltip={metric === "cost" ? v => formatCost(v) : formatInteger}
-									emptyLabel="No provider activity in this range"
+									emptyLabel={t("providers.no-provider-activity")}
 								/>
 								<Legend
 									items={burnSeries.map(s => ({
@@ -251,8 +276,8 @@ export function ProvidersRoute({ active, range }: ProvidersRouteProps) {
 
 			<Card
 				index={4}
-				title="Subscription windows"
-				description="What one usage window buys you and how many accounts peak demand needs. Select a row to chart it."
+				title={t("providers.subscription-windows")}
+				description={t("providers.subscription-windows-description")}
 				flush
 				stale={windows.stale}
 			>
@@ -311,7 +336,7 @@ function ProviderTotalsTable({
 		return [
 			{
 				key: "provider",
-				header: "Provider",
+				header: t("common.provider"),
 				sort: p => p.provider,
 				render: p => (
 					<span className="row" style={{ gap: 8 }}>
@@ -322,7 +347,7 @@ function ProviderTotalsTable({
 			},
 			{
 				key: "requests",
-				header: "Requests",
+				header: t("common.requests"),
 				align: "right",
 				sort: p => p.totalRequests,
 				render: p => (
@@ -331,7 +356,7 @@ function ProviderTotalsTable({
 			},
 			{
 				key: "errors",
-				header: "Error rate",
+				header: t("common.error-rate"),
 				align: "right",
 				sort: p => (p.totalRequests > 0 ? p.failedRequests / p.totalRequests : 0),
 				render: p => {
@@ -348,16 +373,16 @@ function ProviderTotalsTable({
 			},
 			{
 				key: "models",
-				header: "Models",
-				title: "Distinct models used through this provider",
+				header: t("common.models"),
+				title: t("providers.models-title"),
 				align: "right",
 				sort: p => p.models,
 				render: p => <span className="num">{formatInteger(p.models)}</span>,
 			},
 			{
 				key: "tokens",
-				header: "Tokens",
-				title: "Uncached input + cache reads + cache writes + output",
+				header: t("common.tokens"),
+				title: t("providers.tokens-title"),
 				align: "right",
 				sort: p => p.totalTokens,
 				render: p => (
@@ -371,8 +396,8 @@ function ProviderTotalsTable({
 			},
 			{
 				key: "share",
-				header: "Share",
-				title: "Fraction of all tokens in range",
+				header: t("common.share"),
+				title: t("providers.share-title"),
 				align: "right",
 				sort: p => p.totalTokens,
 				render: p => (
@@ -381,14 +406,18 @@ function ProviderTotalsTable({
 			},
 			{
 				key: "cost",
-				header: "Cost",
-				title: "API-equivalent estimate",
+				header: t("common.cost"),
+				title: t("providers.cost-title"),
 				align: "right",
 				sort: p => p.totalCost,
 				render: p => (
 					<span
 						className="num"
-						title={p.unpricedRequests > 0 ? `${formatInteger(p.unpricedRequests)} unpriced` : undefined}
+						title={
+							p.unpricedRequests > 0
+								? t("providers.unpriced-n", { count: formatInteger(p.unpricedRequests) })
+								: undefined
+						}
 					>
 						{formatEstimatedCost(p.totalCost, p.unpricedRequests)}
 					</span>
@@ -396,16 +425,16 @@ function ProviderTotalsTable({
 			},
 			{
 				key: "tps",
-				header: "Tokens/s",
-				title: "Average output throughput",
+				header: t("common.tokens-per-second"),
+				title: t("providers.tps-title"),
 				align: "right",
 				sort: p => p.avgTokensPerSecond ?? -1,
 				render: p => <span className="num">{formatTokensPerSecond(p.avgTokensPerSecond)}</span>,
 			},
 			{
 				key: "premium",
-				header: "Premium",
-				title: "Premium requests (subscription multiplier units)",
+				header: t("common.premium"),
+				title: t("providers.premium-title"),
 				align: "right",
 				sort: p => p.totalPremiumRequests,
 				render: p => (
@@ -427,7 +456,7 @@ function ProviderTotalsTable({
 			selectedKey={open}
 			onRowClick={p => setOpen(prev => (prev === p.provider ? null : p.provider))}
 			expanded={p => (p.provider === open ? <TokenMix provider={p} /> : null)}
-			empty={<EmptyState title="No requests in this range" />}
+			empty={<EmptyState title={t("providers.no-requests-in-range")} />}
 		/>
 	);
 }
@@ -489,13 +518,13 @@ function PeakHoursCard({
 		const series: ChartSeries[] = [
 			{
 				key: "tokens",
-				label: "Tokens",
+				label: t("common.tokens"),
 				color: "var(--chart-primary)",
 				values: tokens.map((v, hour) => (hasData && hour === peak ? null : v)),
 			},
 			{
 				key: "peak",
-				label: "Tokens (peak hour)",
+				label: t("providers.tokens-peak-hour"),
 				color: "var(--chart-secondary)",
 				values: tokens.map((v, hour) => (hasData && hour === peak ? v : null)),
 			},
@@ -508,20 +537,20 @@ function PeakHoursCard({
 	return (
 		<Card
 			index={3}
-			title="Peak burn hours"
+			title={t("providers.peak-burn-hours")}
 			description={
 				hours.hasData
-					? `Tokens by local hour of day; peak at ${hourLabel(hours.peak)}`
-					: "Tokens by local hour of day"
+					? t("providers.peak-hours-description", { hour: hourLabel(hours.peak) })
+					: t("providers.hours-description")
 			}
 			actions={
 				<select
 					className="input providers-select"
 					value={current}
 					onChange={e => setProvider(e.target.value)}
-					aria-label="Provider"
+					aria-label={t("common.provider")}
 				>
-					<option value={ALL_PROVIDERS}>All providers</option>
+					<option value={ALL_PROVIDERS}>{t("providers.all-providers")}</option>
 					{providers.map(p => (
 						<option key={p.provider} value={p.provider}>
 							{p.provider}
@@ -539,15 +568,15 @@ function PeakHoursCard({
 				height={260}
 				showTotal={false}
 				formatTooltip={formatInteger}
-				emptyLabel="No activity in this range"
+				emptyLabel={t("providers.no-activity-in-range")}
 				tooltipExtra={hour => (
 					<>
 						<div className="chart-tooltip-row">
-							<span className="chart-tooltip-label">Output</span>
+							<span className="chart-tooltip-label">{t("common.output")}</span>
 							<span className="chart-tooltip-value">{formatInteger(hours.output[hour])}</span>
 						</div>
 						<div className="chart-tooltip-row">
-							<span className="chart-tooltip-label">Requests</span>
+							<span className="chart-tooltip-label">{t("common.requests")}</span>
 							<span className="chart-tooltip-value">{formatInteger(hours.requests[hour])}</span>
 						</div>
 					</>
@@ -579,7 +608,7 @@ function WindowInsightsTable({
 			limit={12}
 			selectedKey={selected ? `${selected.provider}::${selected.windowKey}` : null}
 			onRowClick={i => onSelect({ provider: i.provider, windowKey: i.windowKey })}
-			empty={<EmptyState title="No usage snapshots in this range" hint={SNAPSHOT_HINT} />}
+			empty={<EmptyState title={t("providers.no-snapshots-in-range")} hint={SNAPSHOT_HINT} />}
 		/>
 	);
 }
@@ -587,53 +616,53 @@ function WindowInsightsTable({
 const INSIGHT_COLUMNS: Column<ProviderWindowInsight>[] = [
 	{
 		key: "window",
-		header: "Window",
-		sort: i => `${i.provider} ${i.windowLabel}`,
-		render: i => <LabelCell primary={i.windowLabel} secondary={<span className="mono">{i.provider}</span>} />,
+		header: t("providers.window"),
+		sort: i => `${i.provider} ${i.windowKey}`,
+		render: i => <LabelCell primary={i.windowKey} secondary={<span className="mono">{i.provider}</span>} />,
 	},
 	{
 		key: "accounts",
-		header: "Accounts",
-		title: "Accounts with at least one snapshot for this window in range",
+		header: t("providers.accounts"),
+		title: t("providers.accounts-title"),
 		align: "right",
 		sort: i => i.accounts,
 		render: i => <span className="num">{formatInteger(i.accounts)}</span>,
 	},
 	{
 		key: "cycles",
-		header: "Resets",
-		title: "Window resets observed (drops in used fraction)",
+		header: t("providers.resets"),
+		title: t("providers.resets-title"),
 		align: "right",
 		sort: i => i.cycles,
 		render: i => <span className="num muted">{formatInteger(i.cycles)}</span>,
 	},
 	{
 		key: "consumed",
-		header: "Windows burned",
-		title: "Subscription-window equivalents consumed in range (sum of used-fraction increases across accounts)",
+		header: t("providers.windows-burned"),
+		title: t("providers.windows-burned-title"),
 		align: "right",
 		sort: i => i.fractionConsumed,
 		render: i => <span className="num">{i.fractionConsumed.toFixed(2)}</span>,
 	},
 	{
 		key: "capacity",
-		header: "Tokens / window",
-		title: "Provider tokens burned in range ÷ windows burned — what one full window is worth",
+		header: t("providers.tokens-per-window"),
+		title: t("providers.tokens-per-window-title"),
 		align: "right",
 		sort: i => i.estTokensPerWindow ?? -1,
 		render: i =>
 			i.estTokensPerWindow !== null ? (
 				<span className="num">{formatCompact(i.estTokensPerWindow)}</span>
 			) : (
-				<span className="dim" title="Too little of the window was consumed to extrapolate">
+				<span className="dim" title={t("providers.too-little-consumed")}>
 					–
 				</span>
 			),
 	},
 	{
 		key: "peak",
-		header: "Peak utilization",
-		title: "Peak of summed used fraction across accounts at any sampled instant; the bar is relative to fleet capacity",
+		header: t("providers.peak-utilization"),
+		title: t("providers.peak-utilization-title"),
 		align: "right",
 		sort: i => i.peakConcurrentFraction,
 		render: i => {
@@ -650,14 +679,17 @@ const INSIGHT_COLUMNS: Column<ProviderWindowInsight>[] = [
 	},
 	{
 		key: "ideal",
-		header: "Accounts needed",
-		title: "Accounts needed to keep peak demand under 90% of fleet capacity",
+		header: t("providers.accounts-needed"),
+		title: t("providers.accounts-needed-title"),
 		align: "right",
 		sort: i => i.idealAccounts - i.accounts,
 		render: i =>
 			i.idealAccounts > i.accounts ? (
 				<Badge tone="warn" mono>
-					{formatInteger(i.idealAccounts)} · have {formatInteger(i.accounts)}
+					{t("providers.ideal-accounts", {
+						ideal: formatInteger(i.idealAccounts),
+						have: formatInteger(i.accounts),
+					})}
 				</Badge>
 			) : (
 				<span className="num">{formatInteger(i.idealAccounts)}</span>
@@ -665,14 +697,14 @@ const INSIGHT_COLUMNS: Column<ProviderWindowInsight>[] = [
 	},
 	{
 		key: "exhausted",
-		header: "Exhaustions",
-		title: "Transitions into an exhausted state observed in range",
+		header: t("providers.exhaustions"),
+		title: t("providers.exhaustions-title"),
 		align: "right",
 		sort: i => i.exhaustedEvents,
 		render: i =>
 			i.exhaustedEvents > 0 ? (
 				<Badge tone="warn" mono>
-					{formatInteger(i.exhaustedEvents)} exhausted
+					{t("providers.exhausted-n", { count: formatInteger(i.exhaustedEvents) })}
 				</Badge>
 			) : (
 				<span className="num dim">0</span>
@@ -737,7 +769,7 @@ function WindowUtilizationCard({
 		() =>
 			(insights ?? [])
 				.filter(i => i.provider === selected?.provider)
-				.map(i => ({ key: i.windowKey, label: i.windowLabel })),
+				.map(i => ({ key: i.windowKey, label: i.windowKey })),
 		[insights, selected?.provider],
 	);
 	// While another provider's series are still on screen, show none of them.
@@ -791,7 +823,7 @@ function WindowUtilizationCard({
 			.sort(
 				(a, b) =>
 					Number(b.color !== null) - Number(a.color !== null) ||
-					a.series.windowLabel.localeCompare(b.series.windowLabel) ||
+					a.series.windowKey.localeCompare(b.series.windowKey) ||
 					(b.latest?.fraction ?? -1) - (a.latest?.fraction ?? -1),
 			);
 	}, [providerSeries, names, chart.series, selected?.windowKey]);
@@ -801,11 +833,15 @@ function WindowUtilizationCard({
 	return (
 		<Card
 			index={5}
-			title="Window utilization"
+			title={t("providers.utilization")}
 			description={
 				chart.buckets.length > 0
-					? `${windowLabel ?? "Window"} used fraction per account, ${format(new Date(chart.first), "MMM d HH:mm")} – ${format(new Date(chart.last), "MMM d HH:mm")}`
-					: "Recorded limit utilization per account"
+					? t("providers.utilization-description", {
+							window: windowLabel ?? t("providers.window"),
+							from: formatDateTimeShort(chart.first),
+							to: formatDateTimeShort(chart.last),
+						})
+					: t("providers.utilization-description-plain")
 			}
 			actions={
 				selected && (
@@ -818,7 +854,7 @@ function WindowUtilizationCard({
 								const first = insights?.find(i => i.provider === next);
 								if (first) onSelect({ provider: next, windowKey: first.windowKey });
 							}}
-							aria-label="Provider"
+							aria-label={t("common.provider")}
 						>
 							{providers.map(p => (
 								<option key={p} value={p}>
@@ -830,7 +866,7 @@ function WindowUtilizationCard({
 							className="input providers-select"
 							value={selected.windowKey}
 							onChange={e => onSelect({ provider: selected.provider, windowKey: e.target.value })}
-							aria-label="Window"
+							aria-label={t("providers.window")}
 						>
 							{windows.map(w => (
 								<option key={w.key} value={w.key}>
@@ -846,7 +882,7 @@ function WindowUtilizationCard({
 			{insights === null ? (
 				<ChartSkeleton height={260} />
 			) : selected === null ? (
-				<EmptyState title="No usage snapshots in this range" hint={SNAPSHOT_HINT} />
+				<EmptyState title={t("providers.no-snapshots-in-range")} hint={SNAPSHOT_HINT} />
 			) : (
 				<QueryView query={accounts} skeleton={<ChartSkeleton height={260} />}>
 					{() =>
@@ -873,12 +909,12 @@ function WindowUtilizationCard({
 										format={v => formatPercent(v, 0)}
 										formatTooltip={v => formatPercent(v, 1)}
 										references={[{ value: 1, label: "100%" }]}
-										emptyLabel="No utilization readings for this window"
+										emptyLabel={t("providers.no-utilization-readings")}
 										tooltipExtra={i => {
 											const exhausted = chart.exhausted[i];
 											return exhausted.length > 0 ? (
 												<div className="chart-tooltip-row">
-													<span className="chart-tooltip-label tone-bad">Exhausted</span>
+													<span className="chart-tooltip-label tone-bad">{t("providers.exhausted")}</span>
 													<span className="chart-tooltip-value">{exhausted.join(", ")}</span>
 												</div>
 											) : null;
@@ -979,16 +1015,16 @@ function buildUtilization(accounts: UsageWindowSeries[], names: ReadonlyMap<stri
 }
 
 function statusBadge(latest: AccountRow["latest"]): ReactNode {
-	if (!latest) return <span className="dim">No reading</span>;
-	if (latest.exhausted) return <Badge tone="bad">Exhausted</Badge>;
-	if (latest.fraction >= 0.8) return <Badge tone="warn">High</Badge>;
-	return <Badge tone="ok">OK</Badge>;
+	if (!latest) return <span className="dim">{t("providers.no-reading")}</span>;
+	if (latest.exhausted) return <Badge tone="bad">{t("providers.exhausted")}</Badge>;
+	if (latest.fraction >= 0.8) return <Badge tone="warn">{t("providers.high")}</Badge>;
+	return <Badge tone="ok">{t("ui.status-ok")}</Badge>;
 }
 
 const ACCOUNT_COLUMNS: Column<AccountRow>[] = [
 	{
 		key: "account",
-		header: "Account",
+		header: t("providers.account"),
 		sort: r => r.name,
 		render: r => (
 			<span className="row" style={{ gap: 8 }}>
@@ -1001,13 +1037,13 @@ const ACCOUNT_COLUMNS: Column<AccountRow>[] = [
 	},
 	{
 		key: "window",
-		header: "Window",
-		sort: r => r.series.windowLabel,
-		render: r => <span className={r.color ? undefined : "muted"}>{r.series.windowLabel}</span>,
+		header: t("providers.window"),
+		sort: r => r.series.windowKey,
+		render: r => <span className={r.color ? undefined : "muted"}>{r.series.windowKey}</span>,
 	},
 	{
 		key: "latest",
-		header: "Latest used",
+		header: t("providers.latest-used"),
 		align: "right",
 		sort: r => r.latest?.fraction ?? -1,
 		render: r =>
@@ -1024,27 +1060,27 @@ const ACCOUNT_COLUMNS: Column<AccountRow>[] = [
 	},
 	{
 		key: "status",
-		header: "Status",
+		header: t("providers.status"),
 		sort: r => (r.latest?.exhausted ? 2 : (r.latest?.fraction ?? 0) >= 0.8 ? 1 : 0),
 		render: r => statusBadge(r.latest),
 	},
 	{
 		key: "peak",
-		header: "Peak in range",
+		header: t("providers.peak-in-range"),
 		align: "right",
 		sort: r => r.peak ?? -1,
 		render: r => <span className="num">{r.peak === null ? "–" : formatPercent(r.peak, 0)}</span>,
 	},
 	{
 		key: "samples",
-		header: "Snapshots",
+		header: t("providers.snapshots"),
 		align: "right",
 		sort: r => r.samples,
 		render: r => <span className="num muted">{formatInteger(r.samples)}</span>,
 	},
 	{
 		key: "recorded",
-		header: "Recorded",
+		header: t("providers.recorded"),
 		align: "right",
 		sort: r => r.latest?.timestamp ?? 0,
 		render: r => <span className="muted">{r.latest ? formatRelativeTime(r.latest.timestamp) : "–"}</span>,