@linxiraos/pi-stats 1.1.26 → 1.2.0

package/src/client/routes/GainRoute.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from "react";
 import { getGainDashboardStats } from "../api";
+import { t } from "../i18n";
 import { Chart, type ChartSeries, Legend } from "../charts";
 import { formatBytes, formatCompact, formatInteger, formatPercent } from "../data/formatters";
 import { useQuery } from "../data/query";
@@ -39,7 +40,9 @@ interface SourceRow extends GainSourceTotals {
 
 export function GainRoute({ active, range }: GainRouteProps) {
 	const [project, setProject] = useState<string | null>(null);
-	const gain = useQuery(["gain", range, project], () => getGainDashboardStats(range, project), { enabled: active });
+	const gain = useQuery(["gain", range, project], ({ signal }) => getGainDashboardStats(range, project, signal), {
+		enabled: active,
+	});
 	const meta = rangeMeta(range);
 	const data = gain.data;
 
@@ -69,13 +72,12 @@ export function GainRoute({ active, range }: GainRouteProps) {
 	const projects = data?.projects ?? [];
 	// Keep the chosen project selectable even when the current range never saw it.
 	const projectOptions = project !== null && !projects.includes(project) ? [project, ...projects] : projects;
-	const scope = project ? ` for ${project}` : "";
 
 	const chartSeries: ChartSeries[] = [
-		{ key: "daily", label: "Saved per day", color: "var(--chart-primary)", values: series.daily },
+		{ key: "daily", label: t("gain.saved-per-day"), color: "var(--chart-primary)", values: series.daily },
 		{
 			key: "cumulative",
-			label: "Cumulative",
+			label: t("gain.cumulative"),
 			color: "var(--chart-secondary)",
 			values: series.cumulative,
 			kind: "line",
@@ -86,18 +88,22 @@ export function GainRoute({ active, range }: GainRouteProps) {
 	return (
 		<div className="page">
 			<PageHeader
-				title="Gain"
-				description={`Tokens snapcompact kept out of context${scope} in ${meta.windowLabel}.`}
+				title={t("gain.title")}
+				description={
+					project
+						? t("gain.description-scoped", { project, window: t(meta.windowKey) })
+						: t("gain.description", { window: t(meta.windowKey) })
+				}
 				actions={
 					projectOptions.length > 0 && (
 						<select
 							className="input"
-							aria-label="Project"
+							aria-label={t("common.project")}
 							value={project ?? ""}
 							onChange={e => setProject(e.target.value || null)}
 							style={{ maxWidth: 320 }}
 						>
-							<option value="">All projects</option>
+							<option value="">{t("gain.all-projects")}</option>
 							{projectOptions.map(p => (
 								<option key={p} value={p}>
 									{p}
@@ -115,12 +121,12 @@ export function GainRoute({ active, range }: GainRouteProps) {
 				empty={
 					<Card>
 						<EmptyState
-							title={`No savings recorded${scope} in ${meta.windowLabel}`}
-							hint={
-								range === "all"
-									? "Savings appear here once snapcompact compacts tool output."
-									: "Try a longer range."
+							title={
+								project
+									? t("gain.empty-title-scoped", { project, window: t(meta.windowKey) })
+									: t("gain.empty-title", { window: t(meta.windowKey) })
 							}
+							hint={range === "all" ? t("gain.empty-hint-all") : t("gain.empty-hint-longer-range")}
 						/>
 					</Card>
 				}
@@ -130,31 +136,31 @@ export function GainRoute({ active, range }: GainRouteProps) {
 						<div data-stale={gain.stale}>
 							<StatGrid min={180}>
 								<Stat
-									label="Saved tokens"
+									label={t("gain.saved-tokens")}
 									value={formatCompact(overall.savedTokens)}
 									hint={formatInteger(overall.savedTokens)}
 									spark={series.daily}
 								/>
-								<Stat label="Saved bytes" value={formatBytes(overall.savedBytes)} />
+								<Stat label={t("gain.saved-bytes")} value={formatBytes(overall.savedBytes)} />
 								<Stat
-									label="Reduction"
-									title="Saved bytes ÷ original bytes, when the original size is known"
+									label={t("gain.reduction")}
+									title={t("gain.reduction-title")}
 									value={overall.reductionPercent !== null ? formatPercent(overall.reductionPercent) : "–"}
-									hint={overall.reductionPercent === null ? "original size not recorded" : undefined}
+									hint={overall.reductionPercent === null ? t("gain.reduction-unknown") : undefined}
 								/>
-								<Stat label="Hits" value={formatInteger(overall.hits)} />
+								<Stat label={t("gain.hits")} value={formatInteger(overall.hits)} />
 								<Stat
-									label="Saved per hit"
+									label={t("gain.saved-per-hit")}
 									value={overall.hits > 0 ? formatCompact(overall.savedTokens / overall.hits) : "–"}
-									hint="tokens"
+									hint={t("common.tokens")}
 								/>
 							</StatGrid>
 						</div>
 
 						<Card
 							index={1}
-							title="Savings over time"
-							description="Tokens saved per UTC day, with the running total"
+							title={t("gain.savings-over-time")}
+							description={t("gain.savings-over-time-description")}
 							actions={<Legend items={chartSeries.map(s => ({ key: s.key, label: s.label, color: s.color }))} />}
 							stale={gain.stale}
 						>
@@ -168,7 +174,13 @@ export function GainRoute({ active, range }: GainRouteProps) {
 							/>
 						</Card>
 
-						<Card index={2} title="By source" description="Savings per subsystem" flush stale={gain.stale}>
+						<Card
+							index={2}
+							title={t("gain.by-source")}
+							description={t("gain.by-source-description")}
+							flush
+							stale={gain.stale}
+						>
 							<Table rows={sourceRows} rowKey={row => row.source} columns={SOURCE_COLUMNS} />
 						</Card>
 					</>
@@ -181,13 +193,13 @@ export function GainRoute({ active, range }: GainRouteProps) {
 const SOURCE_COLUMNS: Column<SourceRow>[] = [
 	{
 		key: "source",
-		header: "Source",
+		header: t("gain.source"),
 		sort: row => row.source,
 		render: row => <span className="cell-primary">{SOURCE_LABEL[row.source]}</span>,
 	},
 	{
 		key: "tokens",
-		header: "Saved tokens",
+		header: t("gain.saved-tokens"),
 		align: "right",
 		sort: row => row.savedTokens,
 		render: row => (
@@ -198,28 +210,28 @@ const SOURCE_COLUMNS: Column<SourceRow>[] = [
 	},
 	{
 		key: "share",
-		header: "Share",
+		header: t("common.share"),
 		align: "right",
 		sort: row => row.share,
 		render: row => <span className="num muted">{formatPercent(row.share)}</span>,
 	},
 	{
 		key: "bytes",
-		header: "Saved bytes",
+		header: t("gain.saved-bytes"),
 		align: "right",
 		sort: row => row.savedBytes,
 		render: row => <span className="num">{formatBytes(row.savedBytes)}</span>,
 	},
 	{
 		key: "hits",
-		header: "Hits",
+		header: t("gain.hits"),
 		align: "right",
 		sort: row => row.hits,
 		render: row => <span className="num">{formatInteger(row.hits)}</span>,
 	},
 	{
 		key: "reduction",
-		header: "Reduction",
+		header: t("gain.reduction"),
 		align: "right",
 		sort: row => row.reductionPercent ?? -1,
 		render: row => (

package/src/client/routes/ModelsRoute.tsx

@@ -2,11 +2,13 @@ import "./models.css";
 import { ChevronRight } from "lucide-react";
 import { useMemo, useState } from "react";
 import { getModelDashboardStats } from "../api";
+import { t } from "../i18n";
 import { type ChartSeries, Legend, Sparkline, TimeChart, useHiddenSeries } from "../charts";
 import { buildModelColorLookup, modelKey, OTHER_COLOR } from "../data/colors";
 import {
 	formatCompact,
 	formatDurationMs,
+	formatErrorRate,
 	formatEstimatedCost,
 	formatInteger,
 	formatPercent,
@@ -51,30 +53,34 @@ export interface ModelsRouteProps {
 type ShareMode = "share" | "requests";
 
 const SHARE_OPTIONS = [
-	{ value: "share" as const, label: "Share" },
-	{ value: "requests" as const, label: "Requests" },
+	{ value: "share" as const, label: t("common.share") },
+	{ value: "requests" as const, label: t("common.requests") },
 ];
 
 /** Models plotted individually in the share chart; the rest fold into "Other". */
 const SHARE_LIMIT = 6;
 
 export function ModelsRoute({ active, range }: ModelsRouteProps) {
-	const query = useQuery(["models", range], () => getModelDashboardStats(range), { enabled: active });
+	const query = useQuery(["models", range], ({ signal }) => getModelDashboardStats(range, signal), {
+		enabled: active,
+	});
 	const meta = rangeMeta(range);
 	const [mode, setMode] = useState<ShareMode>("share");
 	const [hidden, toggleSeries] = useHiddenSeries();
 	const [expandedKey, setExpandedKey] = useState<string | null>(null);
 	const view = useMemo(() => (query.data ? buildModelsView(query.data, range) : null), [query.data, range]);
 	const bucketWord = bucketName(meta.bucketMs);
+	// Stable columns: a fresh array would make Table re-sort on every render.
+	const columns = useMemo(
+		() => (view ? buildModelColumns(view, expandedKey, bucketWord) : []),
+		[view, expandedKey, bucketWord],
+	);
 	const isEmpty = (data: ModelDashboardStats) => data.byModel.length === 0;
-	const empty = <EmptyState title="No model usage in this range" hint="Pick a wider range in the top bar." />;
+	const empty = <EmptyState title={t("models.empty-title")} hint={t("models.empty-hint")} />;
 
 	return (
 		<div className="page">
-			<PageHeader
-				title="Models"
-				description={`Which models did the work in ${meta.windowLabel}, and how fast they answered.`}
-			/>
+			<PageHeader title={t("common.models")} description={t("models.subtitle", { window: t(meta.windowKey) })} />
 
 			<QueryView
 				query={query}
@@ -87,32 +93,41 @@ export function ModelsRoute({ active, range }: ModelsRouteProps) {
 						<div data-stale={query.stale}>
 							<StatGrid min={200}>
 								<Stat
-									label="Models used"
+									label={t("models.used")}
 									value={formatInteger(view.models.length)}
-									hint={`across ${formatInteger(view.providerCount)} provider${view.providerCount === 1 ? "" : "s"}`}
+									hint={
+										view.providerCount === 1
+											? t("models.across-providers-one", { count: formatInteger(view.providerCount) })
+											: t("models.across-providers", { count: formatInteger(view.providerCount) })
+									}
 								/>
 								<Stat
-									label="Most used"
+									label={t("models.most-used")}
 									title={view.top ? `${view.top.model} (${view.top.provider})` : undefined}
 									value={view.top ? view.top.model : "–"}
 									hint={
 										view.top
-											? `${formatPercent(view.top.totalRequests / Math.max(1, view.totalRequests))} of requests · ${view.top.provider}`
+											? t("models.most-used-hint", {
+													share: formatPercent(view.top.totalRequests / Math.max(1, view.totalRequests)),
+													provider: view.top.provider,
+												})
 											: undefined
 									}
 								/>
 								<Stat
-									label="Requests"
+									label={t("common.requests")}
 									value={formatInteger(view.totalRequests)}
-									hint={`${formatInteger(view.failedRequests)} failed`}
+									hint={t("models.failed-n", { count: formatInteger(view.failedRequests) })}
 									spark={view.requestTotals}
 								/>
 								<Stat
-									label="API-equivalent cost"
-									title="What this usage would cost at public API rates"
+									label={t("models.api-cost")}
+									title={t("models.api-cost-title")}
 									value={formatEstimatedCost(view.totalCost, view.unpricedRequests)}
 									hint={
-										view.unpricedRequests > 0 ? `${formatInteger(view.unpricedRequests)} unpriced` : undefined
+										view.unpricedRequests > 0
+											? t("models.unpriced-n", { count: formatInteger(view.unpricedRequests) })
+											: undefined
 									}
 								/>
 							</StatGrid>
@@ -123,11 +138,11 @@ export function ModelsRoute({ active, range }: ModelsRouteProps) {
 
 			<Card
 				index={1}
-				title="Request share"
+				title={t("models.request-share")}
 				description={
 					mode === "share"
-						? `Each model's share of requests per ${bucketWord}`
-						: `Requests per ${bucketWord}, stacked by model`
+						? t("models.share-desc", { bucket: bucketWord })
+						: t("models.count-desc", { bucket: bucketWord })
 				}
 				actions={
 					<Segmented
@@ -135,7 +150,7 @@ export function ModelsRoute({ active, range }: ModelsRouteProps) {
 						options={SHARE_OPTIONS}
 						value={mode}
 						onChange={setMode}
-						aria-label="Share chart mode"
+						aria-label={t("models.share-mode-aria")}
 					/>
 				}
 				stale={query.stale}
@@ -171,20 +186,14 @@ export function ModelsRoute({ active, range }: ModelsRouteProps) {
 				</QueryView>
 			</Card>
 
-			<Card
-				index={2}
-				title="All models"
-				description="Click a row for latency and throughput over time"
-				stale={query.stale}
-				flush
-			>
+			<Card index={2} title={t("models.all-models")} description={t("models.table-desc")} stale={query.stale} flush>
 				<QueryView query={query} skeleton={<TableSkeleton rows={8} />} isEmpty={isEmpty} empty={empty}>
 					{() =>
 						view && (
 							<Table
 								rows={view.models}
 								rowKey={row => modelKey(row.model, row.provider)}
-								columns={buildModelColumns(view, expandedKey, bucketWord)}
+								columns={columns}
 								initialSort={{ key: "requests", dir: "desc" }}
 								limit={25}
 								onRowClick={row => {
@@ -322,7 +331,7 @@ function buildModelColumns(view: ModelsView, expandedKey: string | null, bucketW
 		},
 		{
 			key: "model",
-			header: "Model",
+			header: t("common.model"),
 			sort: row => row.model,
 			render: row => (
 				<LabelCell
@@ -334,7 +343,7 @@ function buildModelColumns(view: ModelsView, expandedKey: string | null, bucketW
 		},
 		{
 			key: "requests",
-			header: "Requests",
+			header: t("common.requests"),
 			align: "right",
 			sort: row => row.totalRequests,
 			render: row => (
@@ -348,16 +357,16 @@ function buildModelColumns(view: ModelsView, expandedKey: string | null, bucketW
 		},
 		{
 			key: "cost",
-			header: "Cost",
-			title: "API-equivalent estimate at public rates",
+			header: t("common.cost"),
+			title: t("models.cost-title"),
 			align: "right",
 			sort: row => row.totalCost,
 			render: row => <span className="num">{formatEstimatedCost(row.totalCost, row.unpricedRequests)}</span>,
 		},
 		{
 			key: "tokens",
-			header: "Tokens",
-			title: "Uncached input + cache reads + cache writes + output",
+			header: t("common.tokens"),
+			title: t("models.tokens-title"),
 			align: "right",
 			sort: row => sumConversationTokens(row),
 			render: row => {
@@ -371,48 +380,48 @@ function buildModelColumns(view: ModelsView, expandedKey: string | null, bucketW
 		},
 		{
 			key: "cache",
-			header: "Cache rate",
-			title: "Cache reads ÷ (uncached input + cache reads)",
+			header: t("models.cache-rate"),
+			title: t("models.cache-title"),
 			align: "right",
 			sort: row => row.cacheRate,
 			render: row => <span className="num">{formatPercent(row.cacheRate)}</span>,
 		},
 		{
 			key: "errors",
-			header: "Errors",
+			header: t("models.errors"),
 			align: "right",
 			sort: row => row.errorRate,
 			render: row =>
 				row.failedRequests === 0 ? (
 					<span className="num dim">0%</span>
 				) : (
-					<span title={`${formatInteger(row.failedRequests)} failed`}>
+					<span title={t("models.failed-n", { count: formatInteger(row.failedRequests) })}>
 						<Badge tone={errorRateTone(row.errorRate)} mono>
-							{formatPercent(row.errorRate)}
+							{formatErrorRate(row.errorRate)}
 						</Badge>
 					</span>
 				),
 		},
 		{
 			key: "tps",
-			header: "Tokens/s",
-			title: "Average output tokens per second",
+			header: t("common.tokens-per-second"),
+			title: t("models.tps-title"),
 			align: "right",
 			sort: row => row.avgTokensPerSecond ?? -1,
 			render: row => <span className="num">{formatTokensPerSecond(row.avgTokensPerSecond)}</span>,
 		},
 		{
 			key: "ttft",
-			header: "TTFT",
-			title: "Average time to first token",
+			header: t("models.ttft"),
+			title: t("models.ttft-title"),
 			align: "right",
 			sort: row => row.avgTtft ?? -1,
 			render: row => <span className="num">{formatDurationMs(row.avgTtft)}</span>,
 		},
 		{
 			key: "trend",
-			header: "Trend",
-			title: `Requests per ${bucketWord}`,
+			header: t("models.trend"),
+			title: t("models.trend-title", { bucket: bucketWord }),
 			width: 112,
 			render: row => {
 				const key = modelKey(row.model, row.provider);
@@ -449,14 +458,14 @@ function ModelDetail({
 	const series: ChartSeries[] = [
 		{
 			key: "tps",
-			label: "Tokens/s",
+			label: t("common.tokens-per-second"),
 			color,
 			kind: points.length > 1 ? "line" : "bars",
 			values: points.map(p => p.avgTokensPerSecond),
 		},
 		{
 			key: "ttft",
-			label: "TTFT",
+			label: t("models.ttft"),
 			color: OTHER_COLOR,
 			kind: points.length > 1 ? "line" : "bars",
 			axis: "right",
@@ -469,23 +478,25 @@ function ModelDetail({
 		<div className="models-detail">
 			<div className="models-detail-facts">
 				<div>
-					<div className="section-label">Efficiency</div>
+					<div className="section-label">{t("models.efficiency")}</div>
 					<KeyValues
 						items={[
 							{
 								key: "err",
-								label: "Error rate",
+								label: t("common.error-rate"),
 								value: (
 									<span className={`tone-${errorRateTone(model.errorRate)}`}>
-										{formatPercent(model.errorRate)}{" "}
-										<span className="dim">({formatInteger(model.failedRequests)} failed)</span>
+										{formatErrorRate(model.errorRate)}{" "}
+										<span className="dim">
+											({t("models.failed-n", { count: formatInteger(model.failedRequests) })})
+										</span>
 									</span>
 								),
 							},
-							{ key: "cache", label: "Cache rate", value: formatPercent(model.cacheRate) },
+							{ key: "cache", label: t("models.cache-rate"), value: formatPercent(model.cacheRate) },
 							{
 								key: "savings",
-								label: "Cache savings",
+								label: t("models.cache-savings"),
 								value: (
 									<span className={model.cacheSavings < 0 ? "tone-bad" : undefined}>
 										{formatPercent(model.cacheSavings)}
@@ -494,42 +505,48 @@ function ModelDetail({
 							},
 							{
 								key: "premium",
-								label: "Premium requests",
+								label: t("common.premium-requests"),
 								value: formatInteger(Math.round(model.totalPremiumRequests * 100) / 100),
 							},
 						]}
 					/>
 				</div>
 				<div>
-					<div className="section-label">Latency</div>
+					<div className="section-label">{t("models.latency")}</div>
 					<KeyValues
 						items={[
-							{ key: "dur", label: "Avg duration", value: formatDurationMs(model.avgDuration) },
-							{ key: "ttft", label: "Avg TTFT", value: formatDurationMs(model.avgTtft) },
-							{ key: "tps", label: "Tokens/s", value: formatTokensPerSecond(model.avgTokensPerSecond) },
+							{ key: "dur", label: t("models.avg-duration"), value: formatDurationMs(model.avgDuration) },
+							{ key: "ttft", label: t("models.avg-ttft"), value: formatDurationMs(model.avgTtft) },
+							{
+								key: "tps",
+								label: t("common.tokens-per-second"),
+								value: formatTokensPerSecond(model.avgTokensPerSecond),
+							},
 						]}
 					/>
 				</div>
 				<div>
-					<div className="section-label">Tokens</div>
+					<div className="section-label">{t("common.tokens")}</div>
 					<KeyValues
 						items={[
-							{ key: "in", label: "Uncached input", value: formatCompact(model.totalInputTokens) },
-							{ key: "cr", label: "Cache read", value: formatCompact(model.totalCacheReadTokens) },
-							{ key: "cw", label: "Cache write", value: formatCompact(model.totalCacheWriteTokens) },
-							{ key: "out", label: "Output", value: formatCompact(model.totalOutputTokens) },
+							{ key: "in", label: t("models.uncached-input"), value: formatCompact(model.totalInputTokens) },
+							{ key: "cr", label: t("common.cache-read"), value: formatCompact(model.totalCacheReadTokens) },
+							{ key: "cw", label: t("common.cache-write"), value: formatCompact(model.totalCacheWriteTokens) },
+							{ key: "out", label: t("common.output"), value: formatCompact(model.totalOutputTokens) },
 						]}
 					/>
 				</div>
 				<div className="micro dim">
-					First seen {formatRelativeTime(model.firstTimestamp)} · last seen{" "}
-					{formatRelativeTime(model.lastTimestamp)}
+					{t("models.first-last-seen", {
+						first: formatRelativeTime(model.firstTimestamp),
+						last: formatRelativeTime(model.lastTimestamp),
+					})}
 				</div>
 			</div>
 			<div className="models-detail-chart">
 				<div className="row" style={{ justifyContent: "space-between" }}>
 					<div className="section-label" style={{ marginBottom: 0 }}>
-						Performance per active {bucketWord}
+						{t("models.performance-per-bucket", { bucket: bucketWord })}
 					</div>
 					<Legend
 						items={series.map(s => ({ key: s.key, label: s.label, color: s.color }))}
@@ -538,7 +555,7 @@ function ModelDetail({
 					/>
 				</div>
 				{points.length === 0 ? (
-					<EmptyState title="No performance samples" hint="Timing is recorded for streamed responses." />
+					<EmptyState title={t("models.no-samples-title")} hint={t("models.no-samples-hint")} />
 				) : (
 					<TimeChart
 						buckets={points.map(p => p.timestamp)}
@@ -548,11 +565,11 @@ function ModelDetail({
 						stacked={false}
 						height={240}
 						format={formatCompact}
-						formatTooltip={v => `${formatTokensPerSecond(v)} tok/s`}
+						formatTooltip={v => t("models.tok-per-second", { value: formatTokensPerSecond(v) })}
 						formatRight={v => `${Number(v.toFixed(2))}s`}
 						tooltipExtra={i => (
 							<div className="chart-tooltip-row chart-tooltip-total">
-								<span className="chart-tooltip-label">Requests</span>
+								<span className="chart-tooltip-label">{t("common.requests")}</span>
 								<span className="chart-tooltip-value">{formatInteger(points[i].requests)}</span>
 							</div>
 						)}
@@ -564,9 +581,9 @@ function ModelDetail({
 }
 
 function bucketName(bucketMs: number): string {
-	if (bucketMs < 3_600_000) return "5 minutes";
-	if (bucketMs < 86_400_000) return "hour";
-	return "day";
+	if (bucketMs < 3_600_000) return t("models.bucket-5m");
+	if (bucketMs < 86_400_000) return t("models.bucket-hour");
+	return t("models.bucket-day");
 }
 
 function sumValues(values: readonly (number | null)[]): number {