@linxiraos/pi-stats 1.1.27 → 1.2.0

package/src/client/routes/ToolsRoute.tsx

@@ -1,6 +1,7 @@
 import { X } from "lucide-react";
 import { useMemo, useState } from "react";
 import { getToolDashboardStats } from "../api";
+import { t } from "../i18n";
 import { Legend, Sparkline, TimeChart, useHiddenSeries } from "../charts";
 import { buildColorLookup, OTHER_COLOR } from "../data/colors";
 import {
@@ -44,20 +45,26 @@ export interface ToolsRouteProps {
 type CallMetric = "calls" | "errors";
 
 const METRIC_OPTIONS = [
-	{ value: "calls" as const, label: "Calls" },
-	{ value: "errors" as const, label: "Errors" },
+	{ value: "calls" as const, label: t("tools.calls") },
+	{ value: "errors" as const, label: t("tools.errors") },
 ];
 
 /** Tools stacked individually in the calls chart; the rest fold into "Other". */
 const TOP_TOOLS = 6;
 
-const ATTRIBUTION_NOTE =
-	"Tokens and API-equivalent cost of each invoking turn, split evenly across that turn's tool calls";
+const ATTRIBUTION_NOTE = t("tools.attribution-note");
 
-const NO_CALLS = <EmptyState title="No tool calls in this range" />;
+/** Bucket granularity label for the calls chart description. */
+function bucketUnit(bucketMs: number): string {
+	if (bucketMs < 3_600_000) return t("tools.bucket-5m");
+	if (bucketMs < 86_400_000) return t("tools.bucket-hour");
+	return t("tools.bucket-day");
+}
+
+const NO_CALLS = <EmptyState title={t("tools.no-tool-calls")} />;
 
 export function ToolsRoute({ active, range }: ToolsRouteProps) {
-	const tools = useQuery(["tools", range], () => getToolDashboardStats(range), { enabled: active });
+	const tools = useQuery(["tools", range], ({ signal }) => getToolDashboardStats(range, signal), { enabled: active });
 	const [metric, setMetric] = useState<CallMetric>("calls");
 	const [hidden, toggleHidden] = useHiddenSeries();
 	const [pickedTool, setToolFilter] = useState<string | null>(null);
@@ -72,75 +79,78 @@ export function ToolsRoute({ active, range }: ToolsRouteProps) {
 
 	return (
 		<div className="page">
-			<PageHeader
-				title="Tools"
-				description={`Which tools zeta called in ${meta.windowLabel}, how often they failed, and what they cost.`}
-			/>
+			<PageHeader title={t("tools.title")} description={t("tools.description", { window: t(meta.windowKey) })} />
 
 			<QueryView query={tools} skeleton={<ChartSkeleton height={112} />}>
 				{() => {
-					const t = view.totals;
+					const totals = view.totals;
 					return (
 						<div data-stale={tools.stale} className="stack" style={{ gap: 16 }}>
 							<StatGrid min={190}>
 								<Stat
-									label="Tool calls"
-									value={formatInteger(t.calls)}
-									hint={`${formatInteger(t.errors)} failed`}
+									label={t("tools.tool-calls")}
+									value={formatInteger(totals.calls)}
+									hint={t("tools.failed-n", { count: formatInteger(totals.errors) })}
 									spark={view.totalCalls}
 								/>
 								<Stat
-									label="Distinct tools"
-									value={formatInteger(t.tools)}
-									hint={view.rows[0] ? `Most used: ${view.rows[0].tool}` : undefined}
+									label={t("tools.distinct-tools")}
+									value={formatInteger(totals.tools)}
+									hint={view.rows[0] ? t("tools.most-used", { tool: view.rows[0].tool }) : undefined}
 								/>
 								<Stat
-									label="Error rate"
-									title="Tool results that came back flagged as errors"
-									value={formatErrorRate(t.calls > 0 ? t.errors / t.calls : 0)}
-									hint={`${formatInteger(t.calls - t.errors)} succeeded`}
+									label={t("common.error-rate")}
+									title={t("tools.error-rate-title")}
+									value={formatErrorRate(totals.calls > 0 ? totals.errors / totals.calls : 0)}
+									hint={t("tools.succeeded-n", { count: formatInteger(totals.calls - totals.errors) })}
 									spark={view.totalErrors}
 									sparkColor="var(--bad)"
 								/>
 								<Stat
-									label="Attributed tokens"
+									label={t("tools.attributed-tokens")}
 									title={ATTRIBUTION_NOTE}
-									value={formatCompact(Math.round(t.tokens))}
-									hint={`${formatCompact(Math.round(t.output))} output`}
+									value={formatCompact(Math.round(totals.tokens))}
+									hint={t("tools.tokens-output", { tokens: formatCompact(Math.round(totals.output)) })}
 								/>
 								<Stat
-									label="Attributed cost"
-									title={`${ATTRIBUTION_NOTE}; API-equivalent estimate`}
-									value={formatEstimatedCost(t.cost, t.unpriced)}
+									label={t("tools.attributed-cost")}
+									title={t("tools.attribution-estimate", { note: ATTRIBUTION_NOTE })}
+									value={formatEstimatedCost(totals.cost, totals.unpriced)}
 									hint={
-										t.unpriced > 0
-											? `${formatInteger(Math.round(t.unpriced))} unpriced requests`
-											: "API-equivalent"
+										totals.unpriced > 0
+											? t("tools.unpriced-requests-n", { count: formatInteger(Math.round(totals.unpriced)) })
+											: t("tools.api-equivalent")
 									}
 								/>
 							</StatGrid>
 							<StatGrid min={150}>
 								<Stat
 									size="sm"
-									label="Result text"
-									title="Characters of tool-result text fed back into context"
-									value={`${formatCompact(t.resultChars)} chars`}
+									label={t("tools.result-text")}
+									title={t("tools.result-chars-title")}
+									value={t("tools.chars", { count: formatCompact(totals.resultChars) })}
 								/>
 								<Stat
 									size="sm"
-									label="Call arguments"
-									title="Characters of serialized tool-call arguments"
-									value={`${formatCompact(t.argsChars)} chars`}
+									label={t("tools.call-arguments")}
+									title={t("tools.args-chars-title")}
+									value={t("tools.chars", { count: formatCompact(totals.argsChars) })}
 								/>
 								<Stat
 									size="sm"
-									label="Avg result per call"
-									value={`${formatCompact(t.calls > 0 ? Math.round(t.resultChars / t.calls) : 0)} chars`}
+									label={t("tools.avg-result-per-call")}
+									value={t("tools.chars", {
+										count: formatCompact(
+											totals.calls > 0 ? Math.round(totals.resultChars / totals.calls) : 0,
+										),
+									})}
 								/>
 								<Stat
 									size="sm"
-									label="Avg arguments per call"
-									value={`${formatCompact(t.calls > 0 ? Math.round(t.argsChars / t.calls) : 0)} chars`}
+									label={t("tools.avg-args-per-call")}
+									value={t("tools.chars", {
+										count: formatCompact(totals.calls > 0 ? Math.round(totals.argsChars / totals.calls) : 0),
+									})}
 								/>
 							</StatGrid>
 						</div>
@@ -150,8 +160,8 @@ export function ToolsRoute({ active, range }: ToolsRouteProps) {
 
 			<Card
 				index={1}
-				title={metric === "calls" ? "Calls over time" : "Errors over time"}
-				description={`Per ${meta.bucketMs < 3_600_000 ? "5 minutes" : meta.bucketMs < 86_400_000 ? "hour" : "day"}, top ${TOP_TOOLS} tools stacked`}
+				title={metric === "calls" ? t("tools.calls-over-time") : t("tools.errors-over-time")}
+				description={t("tools.chart-description", { bucket: bucketUnit(meta.bucketMs), count: TOP_TOOLS })}
 				actions={<Segmented size="sm" options={METRIC_OPTIONS} value={metric} onChange={setMetric} />}
 				stale={tools.stale}
 			>
@@ -165,7 +175,7 @@ export function ToolsRoute({ active, range }: ToolsRouteProps) {
 								hidden={hidden}
 								height={260}
 								formatTooltip={formatInteger}
-								emptyLabel={metric === "errors" ? "No tool errors in this range" : undefined}
+								emptyLabel={metric === "errors" ? t("tools.no-tool-errors") : undefined}
 							/>
 							<Legend
 								items={chartSeries.map(s => ({
@@ -184,8 +194,8 @@ export function ToolsRoute({ active, range }: ToolsRouteProps) {
 
 			<Card
 				index={2}
-				title="By tool"
-				description={`${ATTRIBUTION_NOTE}. Select a tool to break it down by model.`}
+				title={t("tools.by-tool")}
+				description={t("tools.by-tool-description", { note: ATTRIBUTION_NOTE })}
 				flush
 				stale={tools.stale}
 			>
@@ -207,8 +217,8 @@ export function ToolsRoute({ active, range }: ToolsRouteProps) {
 
 			<Card
 				index={3}
-				title="By tool and model"
-				description="Which models call which tools, and how often those calls fail"
+				title={t("tools.by-tool-and-model")}
+				description={t("tools.by-tool-and-model-description")}
 				flush
 				stale={tools.stale}
 				actions={
@@ -217,9 +227,9 @@ export function ToolsRoute({ active, range }: ToolsRouteProps) {
 							className="input tools-filter"
 							value={toolFilter ?? ""}
 							onChange={e => setToolFilter(e.target.value || null)}
-							aria-label="Filter by tool"
+							aria-label={t("tools.filter-by-tool")}
 						>
-							<option value="">All tools</option>
+							<option value="">{t("tools.all-tools")}</option>
 							{view.toolNames.map(name => (
 								<option key={name} value={name}>
 									{name}
@@ -233,8 +243,8 @@ export function ToolsRoute({ active, range }: ToolsRouteProps) {
 								data-size="sm"
 								data-variant="ghost"
 								data-icon="true"
-								title="Clear tool filter"
-								aria-label="Clear tool filter"
+								title={t("tools.clear-tool-filter")}
+								aria-label={t("tools.clear-tool-filter")}
 								onClick={() => setToolFilter(null)}
 							>
 								<X size={13} />
@@ -271,7 +281,7 @@ function buildToolsView(data: ToolDashboardStats | null, range: TimeRange) {
 	const byTool = data?.byTool ?? [];
 	const points = data?.series ?? [];
 	const rows = buildToolRows(byTool).sort((a, b) => b.calls - a.calls);
-	const colors = buildColorLookup(byTool.map(t => ({ key: t.tool, weight: t.calls })));
+	const colors = buildColorLookup(byTool.map(item => ({ key: item.tool, weight: item.calls })));
 	const buckets = bucketAxis(
 		range,
 		points.map(p => p.timestamp),
@@ -288,15 +298,15 @@ function buildToolsView(data: ToolDashboardStats | null, range: TimeRange) {
 		resultChars: 0,
 		argsChars: 0,
 	};
-	for (const t of byTool) {
-		totals.calls += t.calls;
-		totals.errors += t.errors;
-		totals.tokens += t.totalTokensShare;
-		totals.output += t.outputTokensShare;
-		totals.cost += t.costShare;
-		totals.unpriced += t.unpricedRequestsShare;
-		totals.resultChars += t.resultChars;
-		totals.argsChars += t.argsChars;
+	for (const item of byTool) {
+		totals.calls += item.calls;
+		totals.errors += item.errors;
+		totals.tokens += item.totalTokensShare;
+		totals.output += item.outputTokensShare;
+		totals.cost += item.costShare;
+		totals.unpriced += item.unpricedRequestsShare;
+		totals.resultChars += item.resultChars;
+		totals.argsChars += item.argsChars;
 	}
 
 	// Every tool keeps its table swatch color in both metrics; zero slots become
@@ -338,7 +348,7 @@ function buildToolColumns(
 	return [
 		{
 			key: "tool",
-			header: "Tool",
+			header: t("tools.tool"),
 			sort: row => row.tool,
 			render: row => (
 				<span className="row" style={{ gap: 8 }}>
@@ -351,8 +361,8 @@ function buildToolColumns(
 		},
 		{
 			key: "trend",
-			header: "Trend",
-			title: "Calls per bucket over the range",
+			header: t("tools.trend"),
+			title: t("tools.trend-title"),
 			render: row => {
 				const values = trends.get(row.tool);
 				return values && values.length > 1 ? (
@@ -364,7 +374,7 @@ function buildToolColumns(
 		},
 		{
 			key: "calls",
-			header: "Calls",
+			header: t("tools.calls"),
 			align: "right",
 			sort: row => row.calls,
 			render: row => (
@@ -372,7 +382,7 @@ function buildToolColumns(
 					value={row.calls}
 					max={maxCalls}
 					display={
-						<span title={`${formatPercent(row.callFraction)} of all tool calls`}>
+						<span title={t("tools.share-of-calls", { percent: formatPercent(row.callFraction) })}>
 							{formatInteger(row.calls)}
 							<span className="dim tools-share">{formatPercent(row.callFraction, 0)}</span>
 						</span>
@@ -382,8 +392,8 @@ function buildToolColumns(
 		},
 		{
 			key: "errorRate",
-			header: "Errors",
-			title: "Calls whose result came back flagged as an error",
+			header: t("tools.errors"),
+			title: t("tools.errors-title"),
 			align: "right",
 			sort: row => row.errorRate,
 			render: row => (
@@ -397,36 +407,36 @@ function buildToolColumns(
 		},
 		{
 			key: "args",
-			header: "Args",
-			title: "Characters of serialized tool-call arguments",
+			header: t("tools.args"),
+			title: t("tools.args-chars-title"),
 			align: "right",
 			sort: row => row.argsChars,
 			render: row => <span className="num">{formatCompact(row.argsChars)}</span>,
 		},
 		{
 			key: "result",
-			header: "Result",
-			title: "Characters of tool-result text fed back into context",
+			header: t("tools.result"),
+			title: t("tools.result-chars-title"),
 			align: "right",
 			sort: row => row.resultChars,
 			render: row => <span className="num">{formatCompact(row.resultChars)}</span>,
 		},
 		{
 			key: "avgResult",
-			header: "Result / call",
-			title: "Mean tool-result characters per call",
+			header: t("tools.result-per-call"),
+			title: t("tools.result-per-call-title"),
 			align: "right",
 			sort: row => row.avgResultChars,
 			render: row => <span className="num muted">{formatCompact(Math.round(row.avgResultChars))}</span>,
 		},
 		{
 			key: "tokens",
-			header: "Attr. tokens",
+			header: t("tools.attr-tokens"),
 			title: ATTRIBUTION_NOTE,
 			align: "right",
 			sort: row => row.totalTokensShare,
 			render: row => (
-				<span className="num" title={`${formatPercent(row.tokenFraction)} of attributed tokens`}>
+				<span className="num" title={t("tools.share-of-tokens", { percent: formatPercent(row.tokenFraction) })}>
 					{formatCompact(Math.round(row.totalTokensShare))}
 					<span className="dim tools-share">{formatPercent(row.tokenFraction, 0)}</span>
 				</span>
@@ -434,12 +444,12 @@ function buildToolColumns(
 		},
 		{
 			key: "cost",
-			header: "Attr. cost",
-			title: `${ATTRIBUTION_NOTE}; API-equivalent estimate`,
+			header: t("tools.attr-cost"),
+			title: t("tools.attribution-estimate", { note: ATTRIBUTION_NOTE }),
 			align: "right",
 			sort: row => row.costShare,
 			render: row => (
-				<span className="num" title={`${formatPercent(row.costFraction)} of attributed cost`}>
+				<span className="num" title={t("tools.share-of-cost", { percent: formatPercent(row.costFraction) })}>
 					{formatEstimatedCost(row.costShare, row.unpricedRequestsShare)}
 					<span className="dim tools-share">{formatPercent(row.costFraction, 0)}</span>
 				</span>
@@ -447,7 +457,7 @@ function buildToolColumns(
 		},
 		{
 			key: "lastUsed",
-			header: "Last used",
+			header: t("tools.last-used"),
 			align: "right",
 			sort: row => row.lastUsed,
 			render: row => <span className="muted">{formatRelativeTime(row.lastUsed)}</span>,
@@ -485,7 +495,7 @@ function ToolModelTable({
 		return [
 			{
 				key: "tool",
-				header: "Tool",
+				header: t("tools.tool"),
 				sort: row => row.tool,
 				render: row => (
 					<span className="row" style={{ gap: 8 }}>
@@ -498,22 +508,25 @@ function ToolModelTable({
 			},
 			{
 				key: "model",
-				header: "Model",
+				header: t("common.model"),
 				sort: row => row.model,
 				render: row => (
-					<LabelCell primary={<span className="mono">{row.model || "(unknown)"}</span>} secondary={row.provider} />
+					<LabelCell
+						primary={<span className="mono">{row.model || t("common.unknown")}</span>}
+						secondary={row.provider}
+					/>
 				),
 			},
 			{
 				key: "calls",
-				header: "Calls",
+				header: t("tools.calls"),
 				align: "right",
 				sort: row => row.calls,
 				render: row => <MeterCell value={row.calls} max={maxCalls} display={formatInteger(row.calls)} />,
 			},
 			{
 				key: "errorRate",
-				header: "Errors",
+				header: t("tools.errors"),
 				align: "right",
 				sort: row => row.errorRate,
 				render: row => (
@@ -527,15 +540,15 @@ function ToolModelTable({
 			},
 			{
 				key: "result",
-				header: "Result",
-				title: "Characters of tool-result text fed back into context",
+				header: t("tools.result"),
+				title: t("tools.result-chars-title"),
 				align: "right",
 				sort: row => row.resultChars,
 				render: row => <span className="num">{formatCompact(row.resultChars)}</span>,
 			},
 			{
 				key: "tokens",
-				header: "Attr. tokens",
+				header: t("tools.attr-tokens"),
 				title: ATTRIBUTION_NOTE,
 				align: "right",
 				sort: row => row.totalTokensShare,
@@ -543,15 +556,15 @@ function ToolModelTable({
 			},
 			{
 				key: "cost",
-				header: "Attr. cost",
-				title: `${ATTRIBUTION_NOTE}; API-equivalent estimate`,
+				header: t("tools.attr-cost"),
+				title: t("tools.attribution-estimate", { note: ATTRIBUTION_NOTE }),
 				align: "right",
 				sort: row => row.costShare,
 				render: row => <span className="num">{formatEstimatedCost(row.costShare, row.unpricedRequestsShare)}</span>,
 			},
 			{
 				key: "lastUsed",
-				header: "Last used",
+				header: t("tools.last-used"),
 				align: "right",
 				sort: row => row.lastUsed,
 				render: row => <span className="muted">{formatRelativeTime(row.lastUsed)}</span>,
@@ -567,7 +580,7 @@ function ToolModelTable({
 			initialSort={{ key: "calls", dir: "desc" }}
 			limit={25}
 			dense
-			empty={<EmptyState title={tool ? `No calls to ${tool} in this range` : "No tool calls in this range"} />}
+			empty={<EmptyState title={tool ? t("tools.no-calls-to-tool", { tool }) : t("tools.no-tool-calls")} />}
 		/>
 	);
 }

package/src/client/routes/TracesRoute.tsx

@@ -13,6 +13,7 @@ import {
 	formatRelativeTime,
 } from "../data/formatters";
 import { useQuery } from "../data/query";
+import { t } from "../i18n";
 import { TraceView } from "../traces/TraceView";
 import type { SessionSummary } from "../types";
 import {
@@ -49,10 +50,11 @@ function ModelList({ models }: { models: string[] }) {
 
 export function TracesRoute({ active, session, onOpenSession }: TracesRouteProps) {
 	const [filter, setFilter] = useState("");
-	const sessions = useQuery(["sessions", SESSION_LIMIT], () => getSessions(SESSION_LIMIT), {
-		pollMs: 30000,
-		enabled: active && session === null,
-	});
+	const sessions = useQuery(
+		["sessions", SESSION_LIMIT],
+		({ signal }) => getSessions(SESSION_LIMIT, undefined, signal),
+		{ pollMs: 30000, enabled: active && session === null },
+	);
 
 	const filtered = useMemo(() => {
 		const rows = sessions.data ?? [];
@@ -72,7 +74,7 @@ export function TracesRoute({ active, session, onOpenSession }: TracesRouteProps
 		() => [
 			{
 				key: "title",
-				header: "Session",
+				header: t("trace.session"),
 				width: "32%",
 				render: row => (
 					<LabelCell
@@ -82,10 +84,10 @@ export function TracesRoute({ active, session, onOpenSession }: TracesRouteProps
 				),
 				sort: row => (row.title ?? row.file).toLowerCase(),
 			},
-			{ key: "models", header: "Models", render: row => <ModelList models={row.models} /> },
+			{ key: "models", header: t("common.models"), render: row => <ModelList models={row.models} /> },
 			{
 				key: "started",
-				header: "Started",
+				header: t("common.started"),
 				align: "right",
 				render: row => (
 					<span className="muted" title={new Date(row.startedAt).toLocaleString()}>
@@ -96,28 +98,28 @@ export function TracesRoute({ active, session, onOpenSession }: TracesRouteProps
 			},
 			{
 				key: "duration",
-				header: "Duration",
+				header: t("common.duration"),
 				align: "right",
 				render: row => <span className="num">{formatElapsed(row.endedAt - row.startedAt)}</span>,
 				sort: row => row.endedAt - row.startedAt,
 			},
 			{
 				key: "requests",
-				header: "Requests",
+				header: t("common.requests"),
 				align: "right",
 				render: row => <span className="num">{formatInteger(row.requests)}</span>,
 				sort: row => row.requests,
 			},
 			{
 				key: "toolCalls",
-				header: "Tools",
+				header: t("trace.tools"),
 				align: "right",
 				render: row => <span className="num">{formatInteger(row.toolCalls)}</span>,
 				sort: row => row.toolCalls,
 			},
 			{
 				key: "subagents",
-				header: "Agents",
+				header: t("trace.agents"),
 				align: "right",
 				render: row =>
 					row.subagents > 0 ? (
@@ -129,14 +131,14 @@ export function TracesRoute({ active, session, onOpenSession }: TracesRouteProps
 			},
 			{
 				key: "tokens",
-				header: "Tokens",
+				header: t("common.tokens"),
 				align: "right",
 				render: row => <span className="num">{formatCompact(row.totalTokens)}</span>,
 				sort: row => row.totalTokens,
 			},
 			{
 				key: "cost",
-				header: "Cost",
+				header: t("common.cost"),
 				align: "right",
 				width: 150,
 				render: row => (
@@ -159,24 +161,24 @@ export function TracesRoute({ active, session, onOpenSession }: TracesRouteProps
 	const total = sessions.data?.length ?? 0;
 	return (
 		<div className="stack traces-page">
-			<PageHeader
-				title="Traces"
-				description="Recent sessions with subagent activity folded in. Open one to inspect its timeline."
-			/>
+			<PageHeader title={t("trace.title")} description={t("trace.description")} />
 			<Card
-				title="Sessions"
+				title={t("trace.sessions")}
 				description={
 					sessions.data
 						? filter.trim()
-							? `${formatInteger(filtered.length)} of ${formatInteger(total)} most recent`
-							: `${formatInteger(total)} most recent`
+							? t("trace.most-recent-filtered", {
+									shown: formatInteger(filtered.length),
+									total: formatInteger(total),
+								})
+							: t("trace.most-recent", { count: formatInteger(total) })
 						: undefined
 				}
 				actions={
 					<SearchInput
 						value={filter}
 						onChange={setFilter}
-						placeholder="Filter by title, project, model…"
+						placeholder={t("trace.filter-placeholder")}
 						width={260}
 					/>
 				}
@@ -188,7 +190,7 @@ export function TracesRoute({ active, session, onOpenSession }: TracesRouteProps
 					query={sessions}
 					skeleton={<TableSkeleton rows={10} />}
 					isEmpty={rows => rows.length === 0}
-					empty={<EmptyState title="No sessions found" hint="Run a sync to index recent activity." />}
+					empty={<EmptyState title={t("trace.empty-title")} hint={t("trace.empty-hint")} />}
 				>
 					{() => (
 						<Table
@@ -198,7 +200,7 @@ export function TracesRoute({ active, session, onOpenSession }: TracesRouteProps
 							onRowClick={row => onOpenSession(row.file)}
 							initialSort={{ key: "started", dir: "desc" }}
 							limit={50}
-							empty={<EmptyState title="No matching sessions" hint="Try a different filter." />}
+							empty={<EmptyState title={t("trace.no-matching-title")} hint={t("trace.no-matching-hint")} />}
 						/>
 					)}
 				</QueryView>

package/src/client/styles.css

@@ -460,8 +460,10 @@ kbd {
 	gap: 8px;
 }
 
-.topbar-menu {
-	display: none;
+@media (min-width: 901px) {
+	.btn.topbar-menu {
+		display: none;
+	}
 }
 
 /* Sync progress hairline along the bottom edge of the topbar. */