@linxiraos/pi-stats 1.1.26 → 1.2.0

package/src/client/routes/CostsRoute.tsx

@@ -1,6 +1,7 @@
 import "./costs.css";
 import { useMemo, useState } from "react";
 import { getCostDashboardStats } from "../api";
+import { t } from "../i18n";
 import { Chart, type ChartSeries, Legend, ShareBar, useHiddenSeries } from "../charts";
 import { buildModelColorLookup, modelKey, OTHER_COLOR, SERIES_COLORS } from "../data/colors";
 import { formatCost, formatEstimatedCost, formatInteger, formatPercent } from "../data/formatters";
@@ -35,8 +36,8 @@ export interface CostsRouteProps {
 type SplitMode = "model" | "component";
 
 const SPLIT_OPTIONS = [
-	{ value: "model" as const, label: "By model" },
-	{ value: "component" as const, label: "By component" },
+	{ value: "model" as const, label: t("costs.by-model") },
+	{ value: "component" as const, label: t("costs.by-component") },
 ];
 
 /** Models stacked individually in the daily chart; the rest fold into "Other". */
@@ -46,10 +47,10 @@ const MODEL_LIMIT = 6;
 const DAY_MS = 86_400_000;
 
 const COMPONENTS = [
-	{ key: "costInput", label: "Input", color: "#5b8cff" },
-	{ key: "costOutput", label: "Output", color: "var(--chart-secondary)" },
-	{ key: "costCacheRead", label: "Cache read", color: "var(--chart-primary)" },
-	{ key: "costCacheWrite", label: "Cache write", color: "#f5b54a" },
+	{ key: "costInput", label: t("common.input"), color: "#5b8cff" },
+	{ key: "costOutput", label: t("common.output"), color: "var(--chart-secondary)" },
+	{ key: "costCacheRead", label: t("common.cache-read"), color: "var(--chart-primary)" },
+	{ key: "costCacheWrite", label: t("common.cache-write"), color: "#f5b54a" },
 ] as const satisfies readonly { key: keyof CostComponents; label: string; color: string }[];
 
 const UTC_DAY = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric", timeZone: "UTC" });
@@ -62,20 +63,19 @@ const UTC_DAY_LONG = new Intl.DateTimeFormat(undefined, {
 });
 
 export function CostsRoute({ active, range }: CostsRouteProps) {
-	const query = useQuery(["costs", range], () => getCostDashboardStats(range), { enabled: active });
+	const query = useQuery(["costs", range], ({ signal }) => getCostDashboardStats(range, signal), { enabled: active });
 	const meta = rangeMeta(range);
 	const [split, setSplit] = useState<SplitMode>("model");
 	const [hidden, toggleSeries] = useHiddenSeries();
 	const view = useMemo(() => (query.data ? buildCostsView(query.data, range) : null), [query.data, range]);
+	// Stable columns: a fresh array would make Table re-sort on every render.
+	const columns = useMemo(() => (view ? buildCostColumns(view) : []), [view]);
 	const isEmpty = (data: CostDashboardStats) => data.costSeries.length === 0;
-	const empty = <EmptyState title="No usage in this range" hint="Pick a wider range in the top bar." />;
+	const empty = <EmptyState title={t("costs.no-usage-in-range")} hint={t("costs.empty-hint")} />;
 
 	return (
 		<div className="page">
-			<PageHeader
-				title="Costs"
-				description={`What ${meta.windowLabel} of usage would cost at public API rates. Subscription usage without a public price is counted as unpriced, not free.`}
-			/>
+			<PageHeader title={t("costs.title")} description={t("costs.description", { window: t(meta.windowKey) })} />
 
 			<QueryView
 				query={query}
@@ -89,17 +89,15 @@ export function CostsRoute({ active, range }: CostsRouteProps) {
 			<div className="grid grid-main-side">
 				<Card
 					index={1}
-					title="Daily estimate"
-					description={
-						split === "model" ? "Per UTC day, stacked by model" : "Per UTC day, stacked by billing component"
-					}
+					title={t("costs.daily-estimate")}
+					description={split === "model" ? t("costs.daily-by-model") : t("costs.daily-by-component")}
 					actions={
 						<Segmented
 							size="sm"
 							options={SPLIT_OPTIONS}
 							value={split}
 							onChange={setSplit}
-							aria-label="Split by"
+							aria-label={t("costs.split-by")}
 						/>
 					}
 					stale={query.stale}
@@ -119,11 +117,11 @@ export function CostsRoute({ active, range }: CostsRouteProps) {
 										height={280}
 										format={v => formatCost(v, Number.isInteger(v) ? 0 : 2)}
 										formatTooltip={v => formatCost(v)}
-										emptyLabel="No priced usage in this range"
+										emptyLabel={t("costs.no-priced-usage")}
 										tooltipExtra={i =>
 											view.unpricedPerDay[i] > 0 ? (
 												<div className="chart-tooltip-row chart-tooltip-total">
-													<span className="chart-tooltip-label">Unpriced requests</span>
+													<span className="chart-tooltip-label">{t("costs.unpriced-requests")}</span>
 													<span className="chart-tooltip-value">
 														{formatInteger(view.unpricedPerDay[i])}
 													</span>
@@ -147,7 +145,12 @@ export function CostsRoute({ active, range }: CostsRouteProps) {
 					</QueryView>
 				</Card>
 
-				<Card index={2} title="Where it went" description="Estimate by billing component" stale={query.stale}>
+				<Card
+					index={2}
+					title={t("costs.where-it-went")}
+					description={t("costs.estimate-by-component")}
+					stale={query.stale}
+				>
 					<QueryView query={query} skeleton={<ChartSkeleton height={280} />} isEmpty={isEmpty} empty={empty}>
 						{() => view && <ComponentBreakdown summary={view.summary} />}
 					</QueryView>
@@ -156,8 +159,8 @@ export function CostsRoute({ active, range }: CostsRouteProps) {
 
 			<Card
 				index={3}
-				title="By model"
-				description="Estimate per model with its input, output and cache split"
+				title={t("costs.by-model")}
+				description={t("costs.by-model-description")}
 				stale={query.stale}
 				flush
 			>
@@ -167,7 +170,7 @@ export function CostsRoute({ active, range }: CostsRouteProps) {
 							<Table
 								rows={view.summary.models}
 								rowKey={row => row.key}
-								columns={buildCostColumns(view)}
+								columns={columns}
 								initialSort={{ key: "cost", dir: "desc" }}
 								limit={20}
 							/>
@@ -245,36 +248,45 @@ function CostStats({ view, stale }: { view: CostsView; stale: boolean }) {
 		<div data-stale={stale}>
 			<StatGrid min={180}>
 				<Stat
-					label="API-equivalent estimate"
-					title="What this usage would cost at public API rates"
+					label={t("costs.api-equivalent-estimate")}
+					title={t("costs.api-estimate-title")}
 					value={formatEstimatedCost(summary.totalCost, summary.unpricedRequests)}
-					hint={`${formatInteger(summary.requests)} requests`}
+					hint={t("costs.requests-n", { count: formatInteger(summary.requests) })}
 					spark={view.dailyTotals}
 					sparkColor="var(--chart-secondary)"
 				/>
 				<Stat
-					label="Average per day"
-					title="Estimate ÷ days with any usage"
+					label={t("costs.average-per-day")}
+					title={t("costs.average-per-day-title")}
 					value={formatEstimatedCost(summary.avgDailyCost, summary.unpricedRequests)}
-					hint={`over ${formatInteger(summary.activeDays)} active day${summary.activeDays === 1 ? "" : "s"}`}
+					hint={t(summary.activeDays === 1 ? "costs.active-days-one" : "costs.active-days-n", {
+						count: formatInteger(summary.activeDays),
+					})}
 				/>
 				<Stat
-					label="Top model"
+					label={t("costs.top-model")}
 					title={top ? `${top.model} (${top.provider})` : undefined}
 					value={top ? top.model : "–"}
-					hint={top ? `${formatCost(top.cost)} · ${formatPercent(top.share)} of estimate` : "Nothing priced yet"}
+					hint={
+						top
+							? t("costs.top-model-hint", {
+									cost: formatCost(top.cost),
+									share: formatPercent(top.share),
+								})
+							: t("costs.nothing-priced-yet")
+					}
 				/>
 				<Stat
-					label="Per priced request"
-					title="Estimate ÷ requests that have a public price"
+					label={t("costs.per-priced-request")}
+					title={t("costs.per-priced-request-title")}
 					value={pricedRequests > 0 ? formatUnitCost(summary.totalCost / pricedRequests) : "–"}
-					hint={`${formatInteger(pricedRequests)} priced`}
+					hint={t("costs.priced-n", { count: formatInteger(pricedRequests) })}
 				/>
 				<Stat
-					label="Unpriced requests"
-					title="Subscription usage with no public-equivalent price; excluded from the estimate"
+					label={t("costs.unpriced-requests")}
+					title={t("costs.unpriced-title")}
 					value={formatInteger(summary.unpricedRequests)}
-					hint={summary.unpricedRequests > 0 ? "excluded from the estimate" : "all usage priced"}
+					hint={summary.unpricedRequests > 0 ? t("costs.unpriced-hint") : t("costs.all-priced")}
 				/>
 			</StatGrid>
 		</div>
@@ -302,15 +314,16 @@ function ComponentBreakdown({ summary }: { summary: CostSummaryView }) {
 					</div>
 				))}
 				<div className="costs-component-row costs-component-total">
-					<span>Total</span>
+					<span>{t("common.total")}</span>
 					<span className="num">{formatEstimatedCost(summary.totalCost, summary.unpricedRequests)}</span>
 					<span className="costs-component-share" />
 				</div>
 			</div>
 			{summary.unpricedRequests > 0 && (
 				<p className="micro dim">
-					{formatInteger(summary.unpricedRequests)} unpriced subscription request
-					{summary.unpricedRequests === 1 ? " is" : "s are"} not included.
+					{t(summary.unpricedRequests === 1 ? "costs.unpriced-note-one" : "costs.unpriced-note-n", {
+						count: formatInteger(summary.unpricedRequests),
+					})}
 				</p>
 			)}
 		</div>
@@ -328,7 +341,7 @@ function buildCostColumns(view: CostsView): Column<CostModelRow>[] {
 	return [
 		{
 			key: "model",
-			header: "Model",
+			header: t("common.model"),
 			sort: row => row.model,
 			render: row => (
 				<LabelCell
@@ -340,15 +353,15 @@ function buildCostColumns(view: CostsView): Column<CostModelRow>[] {
 		},
 		{
 			key: "requests",
-			header: "Requests",
+			header: t("common.requests"),
 			align: "right",
 			sort: row => row.requests,
 			render: row => <span className="num">{formatInteger(row.requests)}</span>,
 		},
 		{
 			key: "cost",
-			header: "Estimate",
-			title: "API-equivalent estimate at public rates",
+			header: t("costs.estimate"),
+			title: t("costs.estimate-title"),
 			align: "right",
 			sort: row => row.cost,
 			render: row => (
@@ -362,14 +375,14 @@ function buildCostColumns(view: CostsView): Column<CostModelRow>[] {
 		},
 		{
 			key: "share",
-			header: "Share",
+			header: t("common.share"),
 			align: "right",
 			sort: row => row.share,
 			render: row => <span className="num muted">{row.cost > 0 ? formatPercent(row.share) : "–"}</span>,
 		},
 		{
 			key: "split",
-			header: "Split",
+			header: t("costs.split"),
 			title: "Input · output · cache read · cache write",
 			width: 150,
 			render: row =>
@@ -384,7 +397,7 @@ function buildCostColumns(view: CostsView): Column<CostModelRow>[] {
 		...componentColumns,
 		{
 			key: "perRequest",
-			header: "Per request",
+			header: t("costs.per-request"),
 			title: "Estimate ÷ priced requests",
 			align: "right",
 			sort: row => (row.requests > row.unpricedRequests ? row.cost / (row.requests - row.unpricedRequests) : -1),
@@ -398,7 +411,7 @@ function buildCostColumns(view: CostsView): Column<CostModelRow>[] {
 		},
 		{
 			key: "unpriced",
-			header: "Unpriced",
+			header: t("costs.unpriced"),
 			title: "Requests with no public-equivalent price",
 			align: "right",
 			sort: row => row.unpricedRequests,

package/src/client/routes/ErrorsRoute.tsx

@@ -1,6 +1,7 @@
 import { ArrowUpRight, X } from "lucide-react";
 import { useMemo, useState } from "react";
 import { getRecentErrors } from "../api";
+import { t } from "../i18n";
 import { BarList } from "../charts";
 import { modelKey } from "../data/colors";
 import {
@@ -44,7 +45,9 @@ const LOAD_STEPS = [50, 200, 1_000] as const;
 export function ErrorsRoute({ active, range, onRequestClick }: ErrorsRouteProps) {
 	const [step, setStep] = useState(0);
 	const limit = LOAD_STEPS[step];
-	const errors = useQuery(["errors", range, limit], () => getRecentErrors(range, limit), { enabled: active });
+	const errors = useQuery(["errors", range, limit], ({ signal }) => getRecentErrors(range, limit, signal), {
+		enabled: active,
+	});
 	const [selectedSignature, setSelectedSignature] = useState<string | null>(null);
 	const [selectedModel, setSelectedModel] = useState<string | null>(null);
 	const [search, setSearch] = useState("");
@@ -97,9 +100,7 @@ export function ErrorsRoute({ active, range, onRequestClick }: ErrorsRouteProps)
 	const footer =
 		errors.data !== null && !complete ? (
 			<>
-				<span>
-					Showing the latest {formatInteger(loaded)} failures in {meta.windowLabel}; older ones are not loaded.
-				</span>
+				<span>{t("errors.footer", { count: formatInteger(loaded), window: t(meta.windowKey) })}</span>
 				{nextStep !== null && (
 					<button
 						type="button"
@@ -108,7 +109,9 @@ export function ErrorsRoute({ active, range, onRequestClick }: ErrorsRouteProps)
 						disabled={errors.refreshing}
 						onClick={() => setStep(step + 1)}
 					>
-						{errors.refreshing && errors.stale ? "Loading…" : `Load latest ${formatInteger(nextStep)}`}
+						{errors.refreshing && errors.stale
+							? t("errors.loading")
+							: t("errors.load-latest", { count: formatInteger(nextStep) })}
 					</button>
 				)}
 			</>
@@ -120,35 +123,44 @@ export function ErrorsRoute({ active, range, onRequestClick }: ErrorsRouteProps)
 
 	return (
 		<div className="page">
-			<PageHeader
-				title="Errors"
-				description={`Failed model requests in ${meta.windowLabel}, grouped by error signature. Open a failure for its full payload.`}
-			/>
+			<PageHeader title={t("errors.title")} description={t("errors.description", { window: t(meta.windowKey) })} />
 
 			<QueryView query={errors} skeleton={<Skeleton height={96} style={{ borderRadius: 12 }} />}>
 				{() => (
 					<div data-stale={errors.stale}>
 						<StatGrid min={170}>
 							<Stat
-								label="Failures"
+								label={t("errors.failures")}
 								value={formatInteger(loaded)}
-								hint={complete ? `in ${meta.windowLabel}` : `latest ${formatInteger(loaded)} loaded`}
+								hint={
+									complete
+										? t("errors.hint-in-window", { window: t(meta.windowKey) })
+										: t("errors.hint-latest-loaded", { count: formatInteger(loaded) })
+								}
 							/>
 							<Stat
-								label="Signatures"
-								title="Distinct error messages after normalizing ids and numbers"
+								label={t("errors.signatures")}
+								title={t("errors.signatures-hint")}
 								value={formatInteger(view.groups.length)}
-								hint={view.groups[0] ? `top: ${formatInteger(view.groups[0].count)} failures` : undefined}
+								hint={
+									view.groups[0]
+										? t("errors.signatures-top", { count: formatInteger(view.groups[0].count) })
+										: undefined
+								}
 							/>
 							<Stat
-								label="Affected models"
+								label={t("errors.affected-models")}
 								value={formatInteger(view.models.length)}
 								hint={view.models[0]?.model}
 							/>
 							<Stat
-								label="Last failure"
+								label={t("errors.last-failure")}
 								value={view.newest ? formatRelativeTime(view.newest.timestamp) : "–"}
-								hint={view.newest ? formatTimestamp(view.newest.timestamp) : `none in ${meta.windowLabel}`}
+								hint={
+									view.newest
+										? formatTimestamp(view.newest.timestamp)
+										: t("errors.none-in-window", { window: t(meta.windowKey) })
+								}
 							/>
 						</StatGrid>
 					</div>
@@ -158,8 +170,8 @@ export function ErrorsRoute({ active, range, onRequestClick }: ErrorsRouteProps)
 			<div className="grid grid-main-side">
 				<Card
 					index={1}
-					title="Error signatures"
-					description="Same message with ids and counters normalized. Select one to filter the failures below."
+					title={t("errors.error-signatures")}
+					description={t("errors.signatures-card-description")}
 					flush
 					stale={errors.stale}
 				>
@@ -169,8 +181,8 @@ export function ErrorsRoute({ active, range, onRequestClick }: ErrorsRouteProps)
 						isEmpty={rows => rows.length === 0}
 						empty={
 							<EmptyState
-								title={`No failures in ${meta.windowLabel}`}
-								hint="Every request succeeded or was aborted."
+								title={t("errors.empty-no-failures", { window: t(meta.windowKey) })}
+								hint={t("errors.empty-all-succeeded")}
 							/>
 						}
 					>
@@ -196,15 +208,15 @@ export function ErrorsRoute({ active, range, onRequestClick }: ErrorsRouteProps)
 
 				<Card
 					index={2}
-					title="By model"
-					description="Failures per model. Select one to filter."
+					title={t("errors.by-model")}
+					description={t("errors.by-model-description")}
 					stale={errors.stale}
 				>
 					<QueryView
 						query={errors}
 						skeleton={<Skeleton height={180} />}
 						isEmpty={rows => rows.length === 0}
-						empty={<EmptyState title="No affected models" />}
+						empty={<EmptyState title={t("errors.empty-no-affected-models")} />}
 					>
 						{() => (
 							<BarList
@@ -228,11 +240,14 @@ export function ErrorsRoute({ active, range, onRequestClick }: ErrorsRouteProps)
 
 			<Card
 				index={3}
-				title="Failures"
+				title={t("errors.failures")}
 				description={
 					errors.data === null
-						? "Loading failures…"
-						: `${formatInteger(filtered.length)} of ${formatInteger(loaded)} failures, newest first`
+						? t("errors.loading-failures")
+						: t("errors.filtered-of-total", {
+								shown: formatInteger(filtered.length),
+								total: formatInteger(loaded),
+							})
 				}
 				actions={
 					<>
@@ -259,7 +274,7 @@ export function ErrorsRoute({ active, range, onRequestClick }: ErrorsRouteProps)
 								<X size={12} />
 							</button>
 						)}
-						<SearchInput value={search} onChange={setSearch} placeholder="Message, model or project" />
+						<SearchInput value={search} onChange={setSearch} placeholder={t("errors.search-placeholder")} />
 					</>
 				}
 				flush
@@ -270,7 +285,7 @@ export function ErrorsRoute({ active, range, onRequestClick }: ErrorsRouteProps)
 					query={errors}
 					skeleton={<TableSkeleton rows={10} />}
 					isEmpty={rows => rows.length === 0}
-					empty={<EmptyState title={`No failures in ${meta.windowLabel}`} />}
+					empty={<EmptyState title={t("errors.empty-no-failures", { window: t(meta.windowKey) })} />}
 				>
 					{() => (
 						<Table
@@ -281,7 +296,7 @@ export function ErrorsRoute({ active, range, onRequestClick }: ErrorsRouteProps)
 							initialSort={{ key: "time", dir: "desc" }}
 							limit={50}
 							dense
-							empty={<EmptyState title="No failures match" hint="Clear the search or the selected filters." />}
+							empty={<EmptyState title={t("errors.no-match")} hint={t("errors.no-match-hint")} />}
 						/>
 					)}
 				</QueryView>
@@ -294,7 +309,7 @@ function buildGroupColumns(maxCount: number): Column<ErrorGroupView>[] {
 	return [
 		{
 			key: "signature",
-			header: "Signature",
+			header: t("errors.signature"),
 			wrap: true,
 			sort: group => group.signature,
 			render: group => (
@@ -305,18 +320,22 @@ function buildGroupColumns(maxCount: number): Column<ErrorGroupView>[] {
 		},
 		{
 			key: "models",
-			header: "Models",
+			header: t("common.models"),
 			sort: group => group.models.length,
 			render: group => (
 				<LabelCell
 					primary={<span className="mono">{group.models[0]?.model}</span>}
-					secondary={group.models.length > 1 ? `+${group.models.length - 1} more` : group.models[0]?.provider}
+					secondary={
+						group.models.length > 1
+							? t("errors.more-models", { count: formatInteger(group.models.length - 1) })
+							: group.models[0]?.provider
+					}
 				/>
 			),
 		},
 		{
 			key: "last",
-			header: "Last seen",
+			header: t("errors.last-seen"),
 			sort: group => group.lastSeen,
 			render: group => (
 				<span className="muted" title={formatTimestamp(group.lastSeen)}>
@@ -326,7 +345,7 @@ function buildGroupColumns(maxCount: number): Column<ErrorGroupView>[] {
 		},
 		{
 			key: "count",
-			header: "Failures",
+			header: t("errors.failures"),
 			align: "right",
 			width: 120,
 			sort: group => group.count,
@@ -341,15 +360,20 @@ function SignatureDetail({ group, onRequestClick }: { group: ErrorGroupView; onR
 	const latestId = group.latest.id;
 	return (
 		<div className="errors-detail">
-			<pre className="code-block errors-detail-message">{group.latest.errorMessage ?? "Unknown error"}</pre>
+			<pre className="code-block errors-detail-message">
+				{group.latest.errorMessage ?? t("errors.unknown-error")}
+			</pre>
 			<div className="errors-detail-meta">
 				<span className="muted">
-					{formatInteger(group.count)} failures · first {formatTimestamp(group.firstSeen)} · last{" "}
-					{formatTimestamp(group.lastSeen)}
+					{t("errors.group-meta", {
+						count: formatInteger(group.count),
+						first: formatTimestamp(group.firstSeen),
+						last: formatTimestamp(group.lastSeen),
+					})}
 				</span>
 				{latestId !== undefined && (
 					<button type="button" className="btn" data-size="sm" onClick={() => onRequestClick(latestId)}>
-						Open latest <ArrowUpRight size={13} />
+						{t("errors.open-latest")} <ArrowUpRight size={13} />
 					</button>
 				)}
 			</div>
@@ -368,7 +392,7 @@ function SignatureDetail({ group, onRequestClick }: { group: ErrorGroupView; onR
 const FAILURE_COLUMNS: readonly Column<MessageStats>[] = [
 	{
 		key: "time",
-		header: "When",
+		header: t("errors.when"),
 		width: 120,
 		sort: row => row.timestamp,
 		render: row => (
@@ -379,23 +403,23 @@ const FAILURE_COLUMNS: readonly Column<MessageStats>[] = [
 	},
 	{
 		key: "model",
-		header: "Model",
+		header: t("common.model"),
 		sort: row => row.model,
 		render: row => <LabelCell primary={<span className="mono">{row.model}</span>} secondary={row.provider} />,
 	},
 	{
 		key: "error",
-		header: "Error",
+		header: t("common.error"),
 		sort: row => row.errorMessage ?? "",
 		render: row => (
 			<span className="errors-message" title={row.errorMessage ?? undefined}>
-				{row.errorMessage ?? "Unknown error"}
+				{row.errorMessage ?? t("errors.unknown-error")}
 			</span>
 		),
 	},
 	{
 		key: "project",
-		header: "Project",
+		header: t("common.project"),
 		sort: row => row.folder,
 		render: row => (
 			<span className="mono muted" title={row.folder}>
@@ -405,15 +429,15 @@ const FAILURE_COLUMNS: readonly Column<MessageStats>[] = [
 	},
 	{
 		key: "tokens",
-		header: "Tokens",
+		header: t("common.tokens"),
 		align: "right",
 		sort: row => row.usage.totalTokens,
 		render: row => <span className="num">{formatInteger(row.usage.totalTokens)}</span>,
 	},
 	{
 		key: "cost",
-		header: "Cost",
-		title: "API-equivalent estimate",
+		header: t("common.cost"),
+		title: t("errors.cost-hint"),
 		align: "right",
 		sort: row => row.usage.cost.total,
 		render: row => <span className="num">{formatMessageCost(row, 4)}</span>,