@linxiraos/pi-stats 1.1.26 → 1.2.0

package/src/client/traces/TraceView.tsx

@@ -8,7 +8,8 @@ import { ArrowLeft, ChevronLeft, ChevronRight, RefreshCw } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getSessionTrace } from "../api";
 import { useQuery } from "../data/query";
-import type { TraceSpan, TraceSpanKind, TraceTrack } from "../types";
+import { t } from "../i18n";
+import type { SessionTrace, TraceSpan, TraceSpanKind, TraceTrack } from "../types";
 import { Card, ChartSkeleton, PageHeader, QueryView, SearchInput, Segmented } from "../ui";
 import { AggregatesPanel } from "./AggregatesPanel";
 import { Minimap } from "./Minimap";
@@ -26,21 +27,25 @@ export interface TraceViewProps {
 }
 
 const MODE_OPTIONS: Array<{ value: AxisMode; label: string; title?: string }> = [
-	{ value: "time", label: "Duration", title: "Real wall-clock time" },
-	{ value: "turns", label: "Turns", title: "Equal width per user turn" },
-	{ value: "calls", label: "Calls", title: "Equal width per model/tool call boundary" },
+	{ value: "time", label: t("common.duration"), title: t("trace.mode-time-title") },
+	{ value: "turns", label: t("trace.turns"), title: t("trace.mode-turns-title") },
+	{ value: "calls", label: t("trace.calls"), title: t("trace.mode-calls-title") },
 ];
 
 const LEGEND: Array<{ kind: TraceSpanKind; label: string }> = [
-	{ kind: "turn", label: "Input" },
-	{ kind: "model", label: "Model" },
-	{ kind: "tool", label: "Tool" },
-	{ kind: "subagent", label: "Agent" },
-	{ kind: "background", label: "Background" },
+	{ kind: "turn", label: t("common.input") },
+	{ kind: "model", label: t("common.model") },
+	{ kind: "tool", label: t("trace.tool") },
+	{ kind: "subagent", label: t("trace.agent") },
+	{ kind: "background", label: t("trace.background") },
 ];
 
 export function TraceView({ file, active, onBack }: TraceViewProps) {
-	const query = useQuery(["trace", file], () => getSessionTrace(file), { pollMs: 15000, enabled: active });
+	const query = useQuery<SessionTrace>(
+		["trace", file],
+		({ signal }, previous) => getSessionTrace(file, signal, previous),
+		{ pollMs: 15000, enabled: active },
+	);
 	// A previous session's trace must never render under this file's header.
 	const trace = query.stale ? null : query.data;
 
@@ -89,7 +94,10 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 		});
 	}, [scale]);
 
-	const effectiveViewport: TimelineViewport = viewport ?? { u0: scale.domain[0], u1: scale.domain[1] };
+	const effectiveViewport = useMemo<TimelineViewport>(
+		() => viewport ?? { u0: scale.domain[0], u1: scale.domain[1] },
+		[viewport, scale],
+	);
 
 	const allSpans = useMemo(() => {
 		const spans: Array<{ span: TraceSpan; track: TraceTrack }> = [];
@@ -105,6 +113,11 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 		if (!needle) return [];
 		return allSpans.filter(({ span }) => `${span.label} ${span.detail ?? ""}`.toLowerCase().includes(needle));
 	}, [allSpans, search]);
+	// Shared with the canvas and transcript so the match test runs once per search.
+	const matchIds = useMemo(
+		() => (search.trim() ? new Set(matches.map(({ span }) => span.id)) : null),
+		[matches, search],
+	);
 
 	const centerOnSpan = useCallback(
 		(span: TraceSpan) => {
@@ -198,6 +211,15 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 		[tracks],
 	);
 
+	const openFromTranscript = useCallback(
+		(spanId: string) => {
+			selectAndReveal(spanId);
+			setDrawerOpen(true);
+		},
+		[selectAndReveal],
+	);
+	const closeDrawer = useCallback(() => setDrawerOpen(false), []);
+
 	const traceStart = trace?.startedAt ?? 0;
 
 	const traceQuery = { ...query, data: trace };
@@ -207,7 +229,7 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 			<div>
 				<button type="button" className="btn" data-variant="ghost" data-size="sm" onClick={onBack}>
 					<ArrowLeft size={14} aria-hidden="true" />
-					Sessions
+					{t("trace.sessions")}
 				</button>
 			</div>
 			<PageHeader
@@ -220,8 +242,8 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 						data-variant="ghost"
 						data-icon="true"
 						onClick={query.refetch}
-						aria-label="Refresh trace"
-						title="Refresh trace"
+						aria-label={t("trace.refresh")}
+						title={t("trace.refresh")}
 					>
 						<RefreshCw size={14} className={query.refreshing ? "traces-spin" : undefined} />
 					</button>
@@ -235,8 +257,8 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 
 						<Card
 							index={1}
-							title="Timeline"
-							description="W/S zoom · A/D pan · drag pan · wheel zoom · 0 fit · F focus selection · dbl-click focus · Esc deselect"
+							title={t("trace.timeline")}
+							description={t("trace.timeline-hint")}
 							actions={
 								<>
 									<button
@@ -246,7 +268,7 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 										data-size="sm"
 										onClick={() => collapseAll(false)}
 									>
-										Expand all
+										{t("trace.expand-all")}
 									</button>
 									<button
 										type="button"
@@ -255,7 +277,7 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 										data-size="sm"
 										onClick={() => collapseAll(true)}
 									>
-										Collapse all
+										{t("trace.collapse-all")}
 									</button>
 								</>
 							}
@@ -267,7 +289,7 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 										value={mode}
 										onChange={setMode}
 										size="sm"
-										aria-label="Axis mode"
+										aria-label={t("trace.axis-mode")}
 									/>
 									{mode === "time" && (
 										<label className="traces-check">
@@ -276,7 +298,7 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 												checked={compressIdle}
 												onChange={event => setCompressIdle(event.target.checked)}
 											/>
-											Compress idle
+											{t("trace.compress-idle")}
 										</label>
 									)}
 									<div className="traces-search">
@@ -286,7 +308,7 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 												setSearch(value);
 												setMatchIndex(0);
 											}}
-											placeholder="Search spans…"
+											placeholder={t("trace.search-placeholder")}
 											width={200}
 										/>
 										{search.trim() && (
@@ -303,7 +325,7 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 													data-size="sm"
 													data-icon="true"
 													onClick={() => cycleMatch(-1)}
-													aria-label="Previous match"
+													aria-label={t("trace.previous-match")}
 													disabled={matches.length === 0}
 												>
 													<ChevronLeft size={14} />
@@ -315,7 +337,7 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 													data-size="sm"
 													data-icon="true"
 													onClick={() => cycleMatch(1)}
-													aria-label="Next match"
+													aria-label={t("trace.next-match")}
 													disabled={matches.length === 0}
 												>
 													<ChevronRight size={14} />
@@ -346,9 +368,9 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 									scale={scale}
 									viewport={effectiveViewport}
 									onViewportChange={setViewport}
-									selection={selection}
+									selected={selected}
 									onSelect={selectAndOpen}
-									search={search}
+									matchIds={matchIds}
 									collapsed={collapsed}
 									onToggleCollapse={toggleCollapse}
 									traceStart={traceStart}
@@ -356,20 +378,13 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 							</div>
 						</Card>
 
-						<Card
-							index={2}
-							title="Transcript"
-							description="Every span and marker in order; click to inspect"
-							flush
-						>
+						<Card index={2} title={t("trace.transcript")} description={t("trace.transcript-description")} flush>
 							<TranscriptList
 								tracks={tracks}
 								selection={selection}
-								onSelect={spanId => {
-									selectAndReveal(spanId);
-									setDrawerOpen(true);
-								}}
+								onSelect={openFromTranscript}
 								search={search}
+								matchIds={matchIds}
 								traceStart={traceStart}
 							/>
 						</Card>
@@ -381,7 +396,7 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 			<SpanDrawer
 				span={drawerOpen ? (selected?.span ?? null) : null}
 				track={selected?.track ?? null}
-				onClose={() => setDrawerOpen(false)}
+				onClose={closeDrawer}
 				onOpenChildTrack={openChildTrack}
 			/>
 		</div>

package/src/client/traces/TranscriptList.tsx

@@ -4,8 +4,9 @@
  * selection. Hand-rolled fixed-row virtualization (32px rows, spacer divs).
  */
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { formatDurationMs } from "../data/formatters";
+import { t } from "../i18n";
 import { EmptyState } from "../ui";
 import type { TraceMarker, TraceSpan, TraceTrack } from "../types";
 import { formatOffset } from "./time-scale";
@@ -25,6 +26,8 @@ export interface TranscriptListProps {
 	selection: string | null;
 	onSelect: (spanId: string) => void;
 	search: string;
+	/** Spans matching `search` (from the trace view); `null` when not searching. */
+	matchIds: ReadonlySet<string> | null;
 	traceStart: number;
 }
 
@@ -49,20 +52,26 @@ export function buildTranscriptRows(tracks: TraceTrack[]): TranscriptRow[] {
 	return rows;
 }
 
-export function TranscriptList({ tracks, selection, onSelect, search, traceStart }: TranscriptListProps) {
+export const TranscriptList = memo(function TranscriptList({
+	tracks,
+	selection,
+	onSelect,
+	search,
+	matchIds,
+	traceStart,
+}: TranscriptListProps) {
 	const colors = useTraceTheme();
 	const containerRef = useRef<HTMLDivElement>(null);
 	const [scrollTop, setScrollTop] = useState(0);
 
 	const allRows = useMemo(() => buildTranscriptRows(tracks), [tracks]);
 	const rows = useMemo(() => {
+		if (!matchIds) return allRows;
 		const needle = search.trim().toLowerCase();
-		if (!needle) return allRows;
-		return allRows.filter(row => {
-			const text = row.span ? `${row.span.label} ${row.span.detail ?? ""}` : (row.marker?.label ?? "");
-			return text.toLowerCase().includes(needle);
-		});
-	}, [allRows, search]);
+		return allRows.filter(row =>
+			row.span ? matchIds.has(row.span.id) : (row.marker?.label ?? "").toLowerCase().includes(needle),
+		);
+	}, [allRows, search, matchIds]);
 
 	// Scroll the selected row into view when selection changes externally.
 	useEffect(() => {
@@ -106,7 +115,7 @@ export function TranscriptList({ tracks, selection, onSelect, search, traceStart
 								<span className="traces-row-label truncate">{label}</span>
 								{detail && <span className="traces-row-detail truncate">{detail}</span>}
 								<span className="traces-row-meta num">
-									{row.span?.isError && <span className="tone-bad">error</span>}
+									{row.span?.isError && <span className="tone-bad">{t("common.error")}</span>}
 									<span>{duration}</span>
 									<span>{formatOffset(row.time - traceStart)}</span>
 								</span>
@@ -132,7 +141,7 @@ export function TranscriptList({ tracks, selection, onSelect, search, traceStart
 					})}
 				</div>
 			</div>
-			{rows.length === 0 && <EmptyState title="No matching events" />}
+			{rows.length === 0 && <EmptyState title={t("trace.no-matching-events")} />}
 		</div>
 	);
-}
+});

package/src/client/traces/traces.css

@@ -111,6 +111,32 @@
 	cursor: grabbing;
 }
 
+/* Scene canvas with the hover/selection boxes stacked on top. */
+.traces-canvas-stack {
+	position: relative;
+	flex-shrink: 0;
+	overflow: hidden;
+}
+
+.traces-canvas-stack > canvas {
+	display: block;
+}
+
+.traces-canvas-hover,
+.traces-canvas-selection {
+	position: absolute;
+	pointer-events: none;
+	box-sizing: border-box;
+}
+
+.traces-canvas-hover {
+	background: rgba(255, 255, 255, 0.16);
+}
+
+.traces-canvas-selection {
+	border: 1.5px solid;
+}
+
 .traces-chevron {
 	display: inline-flex;
 	background: none;

package/src/client/ui/JsonBlock.tsx

@@ -1,5 +1,6 @@
 import { Check, ChevronDown, ChevronRight, Copy } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { t } from "../i18n";
 
 export interface JsonBlockProps {
 	data: unknown;
@@ -8,7 +9,7 @@ export interface JsonBlockProps {
 }
 
 /** Collapsible, copyable pretty-printed JSON. */
-export function JsonBlock({ data, title = "JSON", initialCollapsed = false }: JsonBlockProps) {
+export function JsonBlock({ data, title = t("ui.json"), initialCollapsed = false }: JsonBlockProps) {
 	const [collapsed, setCollapsed] = useState(initialCollapsed);
 	const [copied, setCopied] = useState(false);
 	const copyResetRef = useRef<number>(0);
@@ -44,7 +45,7 @@ export function JsonBlock({ data, title = "JSON", initialCollapsed = false }: Js
 				</button>
 				<button type="button" className="btn" data-variant="ghost" data-size="sm" onClick={copy}>
 					{copied ? <Check size={13} /> : <Copy size={13} />}
-					{copied ? "Copied" : "Copy"}
+					{copied ? t("common.copied") : t("common.copy")}
 				</button>
 			</div>
 			{!collapsed && (

package/src/client/ui/Modal.tsx

@@ -2,6 +2,7 @@ import { X } from "lucide-react";
 import type React from "react";
 import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
+import { t } from "../i18n";
 import "./modal.css";
 
 export interface ModalAction {
@@ -26,7 +27,7 @@ export interface ModalProps {
  * containers cannot clip it. Focus lands on the primary action (or the cancel
  * button when there is none) and returns to the opener on close.
  */
-export function Modal({ open, title, onClose, primaryAction, cancelLabel = "Cancel", children }: ModalProps) {
+export function Modal({ open, title, onClose, primaryAction, cancelLabel = t("common.cancel"), children }: ModalProps) {
 	const primaryRef = useRef<HTMLButtonElement>(null);
 	const cancelRef = useRef<HTMLButtonElement>(null);
 	const onCloseRef = useRef(onClose);
@@ -76,7 +77,7 @@ export function Modal({ open, title, onClose, primaryAction, cancelLabel = "Canc
 						data-icon="true"
 						data-size="sm"
 						onClick={onClose}
-						aria-label="Close"
+						aria-label={t("common.close")}
 					>
 						<X size={15} />
 					</button>

package/src/client/ui/RequestDrawer.tsx

@@ -1,5 +1,6 @@
 import { GitBranch } from "lucide-react";
 import { getRequestDetails } from "../api";
+import { t } from "../i18n";
 import {
 	formatCost,
 	formatDurationMs,
@@ -22,9 +23,9 @@ import "./request-drawer.css";
 
 /** Label and tone for each request outcome; shared by the request tables. */
 export const REQUEST_STATUS: Record<RequestStatus, { label: string; tone: Tone }> = {
-	ok: { label: "OK", tone: "ok" },
-	aborted: { label: "Aborted", tone: "warn" },
-	failed: { label: "Failed", tone: "bad" },
+	ok: { label: t("ui.status-ok"), tone: "ok" },
+	aborted: { label: t("common.aborted"), tone: "warn" },
+	failed: { label: t("common.failed"), tone: "bad" },
 };
 
 export interface RequestDrawerProps {
@@ -34,7 +35,9 @@ export interface RequestDrawerProps {
 
 /** Full detail sheet for one model request: timing, tokens, cost, ids, error, and the raw session entry. */
 export function RequestDrawer({ id, onClose }: RequestDrawerProps) {
-	const query = useQuery(["request", id], () => getRequestDetails(id ?? 0), { enabled: id !== null });
+	const query = useQuery(["request", id], ({ signal }) => getRequestDetails(id ?? 0, signal), {
+		enabled: id !== null,
+	});
 	// Never show the previous request's payload under a new id.
 	const details = query.stale ? null : query.data;
 	const status = details ? REQUEST_STATUS[requestStatus(details)] : null;
@@ -44,7 +47,7 @@ export function RequestDrawer({ id, onClose }: RequestDrawerProps) {
 			open={id !== null}
 			onClose={onClose}
 			width={620}
-			title={details ? <span className="mono">{details.model}</span> : "Request"}
+			title={details ? <span className="mono">{details.model}</span> : t("common.request")}
 			subtitle={
 				details ? (
 					<>
@@ -68,7 +71,7 @@ export function RequestDrawer({ id, onClose }: RequestDrawerProps) {
 								session: details.sessionFile,
 							})}
 							onClick={onClose}
-							title="Open this request's session in the trace view"
+							title={t("ui.open-trace")}
 						>
 							<GitBranch size={13} /> Trace
 						</a>
@@ -106,35 +109,35 @@ function RequestDetailsBody({ details, aborted }: { details: RequestDetails; abo
 		<>
 			{details.errorMessage && (
 				<section className="request-drawer-error" data-tone={aborted ? "warn" : "bad"} role="note">
-					<div className="request-drawer-error-label">{aborted ? "Aborted" : "Error"}</div>
+					<div className="request-drawer-error-label">{aborted ? t("common.aborted") : t("common.error")}</div>
 					<pre className="request-drawer-error-text">{details.errorMessage}</pre>
 				</section>
 			)}
 
 			<section>
-				<div className="section-label">Timing</div>
+				<div className="section-label">{t("ui.section-timing")}</div>
 				<KeyValues
 					items={[
-						{ key: "at", label: "Started", value: formatTimestamp(details.timestamp) },
-						{ key: "duration", label: "Duration", value: formatDurationMs(details.duration) },
-						{ key: "ttft", label: "Time to first token", value: formatDurationMs(details.ttft) },
-						{ key: "tps", label: "Output tokens/s", value: formatTokensPerSecond(throughput) },
+						{ key: "at", label: t("common.started"), value: formatTimestamp(details.timestamp) },
+						{ key: "duration", label: t("common.duration"), value: formatDurationMs(details.duration) },
+						{ key: "ttft", label: t("ui.time-to-first-token"), value: formatDurationMs(details.ttft) },
+						{ key: "tps", label: t("common.output-tokens-per-second"), value: formatTokensPerSecond(throughput) },
 					]}
 				/>
 			</section>
 
 			<section>
-				<div className="section-label">Tokens</div>
+				<div className="section-label">{t("common.tokens")}</div>
 				<KeyValues
 					items={[
-						{ key: "input", label: "Uncached input", value: formatInteger(usage.input) },
-						{ key: "cacheRead", label: "Cache read", value: formatInteger(usage.cacheRead) },
-						{ key: "cacheWrite", label: "Cache write", value: formatInteger(usage.cacheWrite) },
-						{ key: "output", label: "Output", value: formatInteger(usage.output) },
-						{ key: "total", label: "Total", value: formatInteger(usage.totalTokens) },
+						{ key: "input", label: t("ui.uncached-input"), value: formatInteger(usage.input) },
+						{ key: "cacheRead", label: t("common.cache-read"), value: formatInteger(usage.cacheRead) },
+						{ key: "cacheWrite", label: t("common.cache-write"), value: formatInteger(usage.cacheWrite) },
+						{ key: "output", label: t("common.output"), value: formatInteger(usage.output) },
+						{ key: "total", label: t("common.total"), value: formatInteger(usage.totalTokens) },
 						{
 							key: "premium",
-							label: "Premium requests",
+							label: t("common.premium-requests"),
 							value: formatInteger(Math.round((usage.premiumRequests ?? 0) * 100) / 100),
 						},
 					]}
@@ -142,11 +145,11 @@ function RequestDetailsBody({ details, aborted }: { details: RequestDetails; abo
 			</section>
 
 			<section>
-				<div className="section-label">API-equivalent cost</div>
+				<div className="section-label">{t("ui.section-cost")}</div>
 				<KeyValues
 					items={[
 						{ key: "total", label: "Total", value: formatMessageCost(details, 4) },
-						{ key: "input", label: "Input", value: formatCost(usage.cost.input, 4) },
+						{ key: "input", label: t("common.input"), value: formatCost(usage.cost.input, 4) },
 						{ key: "cacheRead", label: "Cache read", value: formatCost(usage.cost.cacheRead, 4) },
 						{ key: "cacheWrite", label: "Cache write", value: formatCost(usage.cost.cacheWrite, 4) },
 						{ key: "output", label: "Output", value: formatCost(usage.cost.output, 4) },
@@ -155,29 +158,29 @@ function RequestDetailsBody({ details, aborted }: { details: RequestDetails; abo
 			</section>
 
 			<section>
-				<div className="section-label">Identity</div>
+				<div className="section-label">{t("ui.section-identity")}</div>
 				<KeyValues
 					items={[
-						{ key: "id", label: "Request id", value: details.id ?? "–" },
-						{ key: "entry", label: "Entry id", value: details.entryId },
-						{ key: "stop", label: "Stop reason", value: details.stopReason },
+						{ key: "id", label: t("common.request-id"), value: details.id ?? "–" },
+						{ key: "entry", label: t("common.entry-id"), value: details.entryId },
+						{ key: "stop", label: t("ui.stop-reason"), value: details.stopReason },
 						{ key: "api", label: "API", value: details.api },
 						{
 							key: "project",
-							label: "Project",
+							label: t("common.project"),
 							value: <span title={details.folder}>{formatFolder(details.folder)}</span>,
 						},
 					]}
 				/>
 				<div className="request-drawer-file">
-					<span className="kv-key">Session file</span>
+					<span className="kv-key">{t("ui.session-file")}</span>
 					<span className="kv-value">{details.sessionFile}</span>
 				</div>
 			</section>
 
-			<JsonBlock data={output} title="Output message" />
-			<JsonBlock data={messages} title="Session entry" initialCollapsed />
-			<JsonBlock data={row} title="Stats row" initialCollapsed />
+			{output != null && <JsonBlock data={output} title={t("common.output-message")} />}
+			<JsonBlock data={messages} title={t("common.session-entry")} initialCollapsed />
+			<JsonBlock data={row} title={t("ui.stats-row")} initialCollapsed />
 		</>
 	);
 }

package/src/client/ui/SearchInput.tsx

@@ -1,4 +1,5 @@
 import { Search } from "lucide-react";
+import { t } from "../i18n";
 
 export interface SearchInputProps {
 	value: string;
@@ -8,7 +9,7 @@ export interface SearchInputProps {
 }
 
 /** Text filter with a leading search glyph. */
-export function SearchInput({ value, onChange, placeholder = "Filter…", width }: SearchInputProps) {
+export function SearchInput({ value, onChange, placeholder = t("common.filter"), width }: SearchInputProps) {
 	return (
 		<label className="search">
 			<Search size={14} />

package/src/client/ui/States.tsx

@@ -1,7 +1,8 @@
 import { Inbox, RotateCw, TriangleAlert } from "lucide-react";
 import type { CSSProperties, ReactNode } from "react";
+import { t } from "../i18n";
 
-export function EmptyState({ title = "Nothing here yet", hint }: { title?: ReactNode; hint?: ReactNode }) {
+export function EmptyState({ title = t("common.nothing-here-yet"), hint }: { title?: ReactNode; hint?: ReactNode }) {
 	return (
 		<div className="empty">
 			<Inbox size={20} />
@@ -18,7 +19,7 @@ export function ErrorState({ error, onRetry }: { error: Error | string; onRetry?
 			<span className="error-state-message">{typeof error === "string" ? error : error.message}</span>
 			{onRetry && (
 				<button type="button" className="btn" data-size="sm" data-variant="ghost" onClick={onRetry}>
-					<RotateCw size={13} /> Retry
+					<RotateCw size={13} /> {t("ui.retry")}
 				</button>
 			)}
 		</div>

package/src/client/ui/Table.tsx

@@ -1,6 +1,7 @@
 import { ArrowDown, ArrowUp } from "lucide-react";
 import { Fragment, type ReactNode, useMemo, useState } from "react";
 import { formatInteger } from "../data/formatters";
+import { t } from "../i18n";
 import { EmptyState } from "./States";
 
 export interface Column<T> {
@@ -155,7 +156,10 @@ export function Table<T>({
 			{limit !== undefined && sorted.length > limit && (
 				<div className="table-more">
 					<span className="micro">
-						{formatInteger(visible.length)} of {formatInteger(sorted.length)}
+						{t("ui.table-shown-of", {
+							shown: formatInteger(visible.length),
+							total: formatInteger(sorted.length),
+						})}
 					</span>
 					{sorted.length > shown && (
 						<button
@@ -165,7 +169,7 @@ export function Table<T>({
 							data-variant="ghost"
 							onClick={() => setShown(n => n + limit * 4)}
 						>
-							Show more
+							{t("common.show-more")}
 						</button>
 					)}
 					{shown > limit && (
@@ -176,7 +180,7 @@ export function Table<T>({
 							data-variant="ghost"
 							onClick={() => setShown(limit)}
 						>
-							Show fewer
+							{t("ui.show-fewer")}
 						</button>
 					)}
 				</div>