@linxiraos/pi-stats 1.1.26 → 1.2.0

package/src/client/traces/AggregatesPanel.tsx

@@ -4,6 +4,7 @@
  */
 
 import { formatDurationMs, formatInteger } from "../data/formatters";
+import { t } from "../i18n";
 import type { TraceToolStat } from "../types";
 import { Badge, Card, type Column, MeterCell, Table } from "../ui";
 
@@ -16,21 +17,26 @@ export function AggregatesPanel({ toolStats, index }: AggregatesPanelProps) {
 	if (toolStats.length === 0) return null;
 	const maxTotal = Math.max(...toolStats.map(stat => stat.totalMs));
 	const columns: Column<TraceToolStat>[] = [
-		{ key: "tool", header: "Tool", render: row => <span className="mono">{row.tool}</span>, sort: row => row.tool },
+		{
+			key: "tool",
+			header: t("trace.tool"),
+			render: row => <span className="mono">{row.tool}</span>,
+			sort: row => row.tool,
+		},
 		{
 			key: "calls",
-			header: "Calls",
+			header: t("trace.calls"),
 			align: "right",
 			render: row => <span className="num">{formatInteger(row.calls)}</span>,
 			sort: row => row.calls,
 		},
 		{
 			key: "errors",
-			header: "Errors",
+			header: t("trace.errors"),
 			align: "right",
 			render: row =>
 				row.errors > 0 ? (
-					<Badge tone="bad">{formatInteger(row.errors)} failed</Badge>
+					<Badge tone="bad">{t("trace.failed-n", { count: formatInteger(row.errors) })}</Badge>
 				) : (
 					<span className="num dim">0</span>
 				),
@@ -38,7 +44,7 @@ export function AggregatesPanel({ toolStats, index }: AggregatesPanelProps) {
 		},
 		{
 			key: "total",
-			header: "Total",
+			header: t("common.total"),
 			align: "right",
 			width: 200,
 			render: row => (
@@ -48,21 +54,26 @@ export function AggregatesPanel({ toolStats, index }: AggregatesPanelProps) {
 		},
 		{
 			key: "avg",
-			header: "Avg",
+			header: t("trace.avg"),
 			align: "right",
 			render: row => <span className="num">{formatDurationMs(row.calls > 0 ? row.totalMs / row.calls : 0)}</span>,
 			sort: row => (row.calls > 0 ? row.totalMs / row.calls : 0),
 		},
 		{
 			key: "max",
-			header: "Max",
+			header: t("trace.max"),
 			align: "right",
 			render: row => <span className="num">{formatDurationMs(row.maxMs)}</span>,
 			sort: row => row.maxMs,
 		},
 	];
 	return (
-		<Card title="Tool aggregates" description={`${toolStats.length} tools, by total time`} flush index={index}>
+		<Card
+			title={t("trace.tool-aggregates")}
+			description={t("trace.tool-aggregates-desc", { count: toolStats.length })}
+			flush
+			index={index}
+		>
 			<Table columns={columns} rows={toolStats} rowKey={row => row.tool} dense limit={12} />
 		</Card>
 	);

package/src/client/traces/Minimap.tsx

@@ -1,13 +1,16 @@
 /**
  * Timeline overview strip: per-category density over the full virtual domain
  * plus a draggable/resizable viewport brush, mirroring DevTools' overview.
+ * The density layer is painted once per trace/scale/size/theme into an
+ * offscreen canvas; pan and zoom only blit it and redraw the brush.
  */
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { t } from "../i18n";
 import type { TraceSpanKind, TraceTrack } from "../types";
 import type { TimelineViewport } from "./TimelineCanvas";
 import type { TraceScale } from "./time-scale";
-import { useTraceTheme } from "./trace-colors";
+import { type TraceTheme, useTraceTheme } from "./trace-colors";
 
 export interface MinimapProps {
 	tracks: TraceTrack[];
@@ -23,6 +26,59 @@ const MIN_WINDOW_U = 10;
 
 type DragMode = "move" | "left" | "right" | "create";
 
+/** Paint the density strips (bucketed span coverage per pixel per category) at device resolution. */
+function paintDensity(
+	tracks: TraceTrack[],
+	scale: TraceScale,
+	width: number,
+	colors: TraceTheme,
+): OffscreenCanvas | HTMLCanvasElement {
+	const dpr = devicePixelRatio;
+	const pixelWidth = Math.floor(width * dpr);
+	const pixelHeight = Math.floor(HEIGHT * dpr);
+	let layer: OffscreenCanvas | HTMLCanvasElement;
+	let ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D | null;
+	if (typeof OffscreenCanvas === "undefined") {
+		const canvas = document.createElement("canvas");
+		canvas.width = pixelWidth;
+		canvas.height = pixelHeight;
+		layer = canvas;
+		ctx = canvas.getContext("2d");
+	} else {
+		const canvas = new OffscreenCanvas(pixelWidth, pixelHeight);
+		layer = canvas;
+		ctx = canvas.getContext("2d");
+	}
+	if (!ctx) return layer;
+	ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+	const [d0, d1] = scale.domain;
+	const dSpan = Math.max(d1 - d0, 1e-9);
+	const buckets = STRIP_KINDS.map(() => new Float32Array(width));
+	for (const track of tracks) {
+		for (const span of track.spans) {
+			const k = STRIP_KINDS.indexOf(span.kind);
+			if (k === -1) continue;
+			const strip = buckets[k];
+			const x0 = Math.max(0, Math.floor(((scale.toU(span.start) - d0) / dSpan) * width));
+			const x1 = Math.min(width - 1, Math.ceil(((scale.toU(span.end) - d0) / dSpan) * width));
+			for (let x = x0; x <= x1; x++) strip[x] = Math.min(1, strip[x] + 0.34);
+		}
+	}
+	const stripH = HEIGHT / STRIP_KINDS.length;
+	for (let k = 0; k < STRIP_KINDS.length; k++) {
+		const strip = buckets[k];
+		ctx.fillStyle = colors.category[STRIP_KINDS[k]];
+		for (let x = 0; x < width; x++) {
+			if (strip[x] <= 0) continue;
+			ctx.globalAlpha = 0.25 + strip[x] * 0.75;
+			ctx.fillRect(x, k * stripH + 1, 1, stripH - 2);
+		}
+		ctx.globalAlpha = 1;
+	}
+	return layer;
+}
+
 export function Minimap({ tracks, scale, viewport, onViewportChange }: MinimapProps) {
 	const colors = useTraceTheme();
 	const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -44,36 +100,18 @@ export function Minimap({ tracks, scale, viewport, onViewportChange }: MinimapPr
 	const toX = useCallback((u: number) => ((u - d0) / dSpan) * width, [d0, dSpan, width]);
 	const toU = useCallback((x: number) => d0 + (x / Math.max(width, 1)) * dSpan, [d0, dSpan, width]);
 
+	const density = useMemo(() => paintDensity(tracks, scale, width, colors), [tracks, scale, width, colors]);
+
 	useEffect(() => {
 		const canvas = canvasRef.current;
 		if (!canvas) return;
 		const ctx = canvas.getContext("2d");
 		if (!ctx) return;
 		const dpr = devicePixelRatio;
+		ctx.setTransform(1, 0, 0, 1, 0, 0);
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		ctx.drawImage(density, 0, 0);
 		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-		ctx.clearRect(0, 0, width, HEIGHT);
-
-		// Density strips: bucket span coverage per pixel per category.
-		const stripH = HEIGHT / STRIP_KINDS.length;
-		for (let k = 0; k < STRIP_KINDS.length; k++) {
-			const kind = STRIP_KINDS[k];
-			const buckets = new Float32Array(width);
-			for (const track of tracks) {
-				for (const span of track.spans) {
-					if (span.kind !== kind) continue;
-					const x0 = Math.max(0, Math.floor(toX(scale.toU(span.start))));
-					const x1 = Math.min(width - 1, Math.ceil(toX(scale.toU(span.end))));
-					for (let x = x0; x <= x1; x++) buckets[x] = Math.min(1, buckets[x] + 0.34);
-				}
-			}
-			ctx.fillStyle = colors.category[kind];
-			for (let x = 0; x < width; x++) {
-				if (buckets[x] <= 0) continue;
-				ctx.globalAlpha = 0.25 + buckets[x] * 0.75;
-				ctx.fillRect(x, k * stripH + 1, 1, stripH - 2);
-			}
-			ctx.globalAlpha = 1;
-		}
 
 		// Viewport brush.
 		const vx0 = toX(viewport.u0);
@@ -85,7 +123,7 @@ export function Minimap({ tracks, scale, viewport, onViewportChange }: MinimapPr
 		ctx.fillStyle = colors.selection;
 		ctx.fillRect(vx0, 0, 2, HEIGHT);
 		ctx.fillRect(vx1 - 2, 0, 2, HEIGHT);
-	}, [tracks, scale, viewport, colors, width, toX]);
+	}, [density, viewport, colors, toX]);
 
 	const handlePointerDown = (event: React.PointerEvent<HTMLCanvasElement>) => {
 		const rect = event.currentTarget.getBoundingClientRect();
@@ -146,7 +184,7 @@ export function Minimap({ tracks, scale, viewport, onViewportChange }: MinimapPr
 			className="traces-minimap"
 			style={{ height: HEIGHT }}
 			role="slider"
-			aria-label="Timeline overview brush"
+			aria-label={t("trace.minimap-aria")}
 			aria-valuemin={0}
 			aria-valuemax={100}
 			aria-valuenow={Math.round(((viewport.u0 - d0) / dSpan) * 100)}

package/src/client/traces/SpanDrawer.tsx

@@ -8,6 +8,7 @@ import { Check, Copy } from "lucide-react";
 import { type ReactNode, useEffect, useRef, useState } from "react";
 import { getSessionEntryDetail } from "../api";
 import { formatDurationMs, formatInteger } from "../data/formatters";
+import { t } from "../i18n";
 import type { TraceSpan, TraceTrack } from "../types";
 import { Badge, Drawer, ErrorState, JsonBlock, KeyValues, Skeleton } from "../ui";
 
@@ -112,32 +113,44 @@ export function SpanDrawer({ span, track, onClose, onOpenChildTrack }: SpanDrawe
 	const metrics: Array<{ key: string; label: ReactNode; value: ReactNode }> = [
 		{
 			key: "duration",
-			label: "Duration",
+			label: t("common.duration"),
 			value: (
 				<span className="num">
 					{formatDurationMs(span.end - span.start)}
-					{span.unterminated && <span className="muted"> · unterminated</span>}
+					{span.unterminated && <span className="muted"> · {t("trace.unterminated")}</span>}
 				</span>
 			),
 		},
-		{ key: "start", label: "Start", value: <span className="num">{new Date(span.start).toLocaleTimeString()}</span> },
-		{ key: "track", label: "Track", value: <span className="mono">{track?.label ?? "-"}</span> },
+		{
+			key: "start",
+			label: t("trace.start"),
+			value: <span className="num">{new Date(span.start).toLocaleTimeString()}</span>,
+		},
+		{ key: "track", label: t("trace.track"), value: <span className="mono">{track?.label ?? "-"}</span> },
 	];
 	if (span.kind === "model") {
 		metrics.push(
 			{
 				key: "tokens",
-				label: "Tokens",
+				label: t("common.tokens"),
 				value: <span className="num">{formatInteger(span.tokens ?? 0)}</span>,
 			},
-			{ key: "cost", label: "Cost", value: <span className="num">${(span.cost ?? 0).toFixed(4)}</span> },
-			{ key: "ttft", label: "TTFT", value: <span className="num">{formatDurationMs(span.ttft ?? null)}</span> },
-			{ key: "model", label: "Model", value: <span className="mono">{msg?.model ?? span.model ?? "-"}</span> },
+			{ key: "cost", label: t("common.cost"), value: <span className="num">${(span.cost ?? 0).toFixed(4)}</span> },
+			{
+				key: "ttft",
+				label: t("trace.ttft"),
+				value: <span className="num">{formatDurationMs(span.ttft ?? null)}</span>,
+			},
+			{
+				key: "model",
+				label: t("common.model"),
+				value: <span className="mono">{msg?.model ?? span.model ?? "-"}</span>,
+			},
 		);
 		if (usage)
 			metrics.push({
 				key: "split",
-				label: "Input / output / cached",
+				label: t("trace.io-cached"),
 				value: (
 					<span className="num">
 						{formatInteger(usage.input ?? 0)} / {formatInteger(usage.output ?? 0)} /{" "}
@@ -146,9 +159,17 @@ export function SpanDrawer({ span, track, onClose, onOpenChildTrack }: SpanDrawe
 				),
 			});
 		if (msg?.provider)
-			metrics.push({ key: "provider", label: "Provider", value: <span className="mono">{msg.provider}</span> });
+			metrics.push({
+				key: "provider",
+				label: t("common.provider"),
+				value: <span className="mono">{msg.provider}</span>,
+			});
 		if (msg?.stopReason)
-			metrics.push({ key: "stop", label: "Stop reason", value: <span className="mono">{msg.stopReason}</span> });
+			metrics.push({
+				key: "stop",
+				label: t("trace.stop-reason"),
+				value: <span className="mono">{msg.stopReason}</span>,
+			});
 	}
 
 	return (
@@ -159,7 +180,7 @@ export function SpanDrawer({ span, track, onClose, onOpenChildTrack }: SpanDrawe
 			subtitle={
 				<span className="row" style={{ gap: 6 }}>
 					<Badge tone={span.isError ? "bad" : "neutral"}>
-						{span.isError ? `${span.kind} · error` : span.kind}
+						{span.isError ? `${span.kind} · ${t("common.error")}` : span.kind}
 					</Badge>
 				</span>
 			}
@@ -170,8 +191,8 @@ export function SpanDrawer({ span, track, onClose, onOpenChildTrack }: SpanDrawe
 					data-variant="ghost"
 					data-icon="true"
 					onClick={handleCopy}
-					aria-label="Copy raw JSON"
-					title="Copy raw JSON"
+					aria-label={t("trace.copy-json")}
+					title={t("trace.copy-json")}
 				>
 					{copied ? <Check size={15} /> : <Copy size={15} />}
 				</button>
@@ -182,7 +203,7 @@ export function SpanDrawer({ span, track, onClose, onOpenChildTrack }: SpanDrawe
 
 				{msg?.errorMessage && (
 					<div className="stack" style={{ gap: 6 }}>
-						<div className="section-label tone-bad">Error message</div>
+						<div className="section-label tone-bad">{t("trace.error-message")}</div>
 						<pre className="code-block traces-pre">{msg.errorMessage}</pre>
 					</div>
 				)}
@@ -191,7 +212,7 @@ export function SpanDrawer({ span, track, onClose, onOpenChildTrack }: SpanDrawe
 					<div className="stack" style={{ gap: 8 }}>
 						{span.detail && (
 							<>
-								<div className="section-label">Task</div>
+								<div className="section-label">{t("trace.task")}</div>
 								<pre className="code-block traces-pre">{span.detail}</pre>
 							</>
 						)}
@@ -203,7 +224,7 @@ export function SpanDrawer({ span, track, onClose, onOpenChildTrack }: SpanDrawe
 									data-size="sm"
 									onClick={() => onOpenChildTrack(span.childTrackId ?? "")}
 								>
-									Open child track <span className="mono">{span.childTrackId}</span>
+									{t("trace.open-child-track")} <span className="mono">{span.childTrackId}</span>
 								</button>
 							</div>
 						)}
@@ -212,7 +233,7 @@ export function SpanDrawer({ span, track, onClose, onOpenChildTrack }: SpanDrawe
 
 				{span.kind === "tool" && span.detail && (
 					<div className="stack" style={{ gap: 6 }}>
-						<div className="section-label">Args</div>
+						<div className="section-label">{t("trace.args")}</div>
 						<pre className="code-block traces-pre">{span.detail}</pre>
 					</div>
 				)}
@@ -223,20 +244,24 @@ export function SpanDrawer({ span, track, onClose, onOpenChildTrack }: SpanDrawe
 						<Skeleton height={160} />
 					</div>
 				)}
-				{error && <ErrorState error={`Failed to load entry: ${error.message}`} />}
+				{error && <ErrorState error={t("trace.load-failed", { message: error.message })} />}
 
 				{!loading &&
 					entry !== null &&
 					textBlocks(msg?.content).map((block, index) => (
 						<div key={`${block.kind}-${index}`} className="stack" style={{ gap: 6 }}>
-							<div className="section-label">{block.kind === "thinking" ? "Thinking" : "Text"}</div>
+							<div className="section-label">
+								{block.kind === "thinking" ? t("trace.thinking") : t("trace.text")}
+							</div>
 							<pre className="code-block traces-pre" data-scroll="true">
 								{block.text}
 							</pre>
 						</div>
 					))}
 
-				{!loading && entry !== null && <JsonBlock data={entry} title="Raw entry" initialCollapsed={true} />}
+				{!loading && entry !== null && (
+					<JsonBlock data={entry} title={t("trace.raw-entry")} initialCollapsed={true} />
+				)}
 			</div>
 		</Drawer>
 	);

package/src/client/traces/SummaryStrip.tsx

@@ -4,6 +4,7 @@
  */
 
 import { formatCompact, formatElapsed, formatEstimatedCost, formatInteger, formatPercent } from "../data/formatters";
+import { t } from "../i18n";
 import type { TraceSummary } from "../types";
 import { Stat, StatGrid } from "../ui";
 
@@ -12,23 +13,38 @@ export interface SummaryStripProps {
 }
 
 export function SummaryStrip({ summary }: SummaryStripProps) {
-	const share = (ms: number) => (summary.wallMs > 0 ? `${formatPercent(ms / summary.wallMs)} of wall` : undefined);
+	const share = (ms: number) =>
+		summary.wallMs > 0 ? t("trace.of-wall", { percent: formatPercent(ms / summary.wallMs) }) : undefined;
 	return (
 		<StatGrid min={112}>
-			<Stat size="sm" label="Wall time" value={formatElapsed(summary.wallMs)} />
-			<Stat size="sm" label="Model time" value={formatElapsed(summary.modelMs)} hint={share(summary.modelMs)} />
-			<Stat size="sm" label="Tool time" value={formatElapsed(summary.toolMs)} hint={share(summary.toolMs)} />
-			<Stat size="sm" label="Idle" value={formatElapsed(summary.idleMs)} hint={share(summary.idleMs)} />
-			<Stat size="sm" label="Turns" value={formatInteger(summary.turns)} />
+			<Stat size="sm" label={t("trace.wall-time")} value={formatElapsed(summary.wallMs)} />
 			<Stat
 				size="sm"
-				label="Requests"
+				label={t("trace.model-time")}
+				value={formatElapsed(summary.modelMs)}
+				hint={share(summary.modelMs)}
+			/>
+			<Stat
+				size="sm"
+				label={t("trace.tool-time")}
+				value={formatElapsed(summary.toolMs)}
+				hint={share(summary.toolMs)}
+			/>
+			<Stat size="sm" label={t("trace.idle")} value={formatElapsed(summary.idleMs)} hint={share(summary.idleMs)} />
+			<Stat size="sm" label={t("trace.turns")} value={formatInteger(summary.turns)} />
+			<Stat
+				size="sm"
+				label={t("common.requests")}
 				value={formatInteger(summary.requests)}
-				hint={`${formatInteger(summary.toolCalls)} tool calls`}
+				hint={t("trace.tool-calls-n", { count: formatInteger(summary.toolCalls) })}
+			/>
+			<Stat size="sm" label={t("trace.agents")} value={formatInteger(summary.subagents)} />
+			<Stat size="sm" label={t("common.tokens")} value={formatCompact(summary.totalTokens)} />
+			<Stat
+				size="sm"
+				label={t("common.cost")}
+				value={formatEstimatedCost(summary.costTotal, summary.unpricedRequests)}
 			/>
-			<Stat size="sm" label="Agents" value={formatInteger(summary.subagents)} />
-			<Stat size="sm" label="Tokens" value={formatCompact(summary.totalTokens)} />
-			<Stat size="sm" label="Cost" value={formatEstimatedCost(summary.costTotal, summary.unpricedRequests)} />
 		</StatGrid>
 	);
 }