@linxiraos/pi-stats 1.1.27 → 1.2.0

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>,