@linxiraos/pi-stats 1.1.6 → 1.1.8

package/src/client/traces/Minimap.tsx

@@ -0,0 +1,177 @@
+/**
+ * Timeline overview strip: per-category density over the full virtual domain
+ * plus a draggable/resizable viewport brush, mirroring DevTools' overview.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { TraceSpanKind, TraceTrack } from "../types";
+import { useSystemTheme } from "../useSystemTheme";
+import type { TimelineViewport } from "./TimelineCanvas";
+import type { TraceScale } from "./time-scale";
+import { TRACE_THEMES } from "./trace-colors";
+
+export interface MinimapProps {
+	tracks: TraceTrack[];
+	scale: TraceScale;
+	viewport: TimelineViewport;
+	onViewportChange: (viewport: TimelineViewport) => void;
+}
+
+const HEIGHT = 44;
+const STRIP_KINDS: TraceSpanKind[] = ["turn", "model", "tool", "subagent"];
+const EDGE_PX = 6;
+const MIN_WINDOW_U = 10;
+
+type DragMode = "move" | "left" | "right" | "create";
+
+export function Minimap({ tracks, scale, viewport, onViewportChange }: MinimapProps) {
+	const theme = useSystemTheme();
+	const colors = TRACE_THEMES[theme];
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+	const [width, setWidth] = useState(800);
+	const dragRef = useRef<{ mode: DragMode; startX: number; startViewport: TimelineViewport } | null>(null);
+
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		const observer = new ResizeObserver(entries => {
+			setWidth(Math.max(100, Math.floor(entries[0].contentRect.width)));
+		});
+		observer.observe(canvas);
+		return () => observer.disconnect();
+	}, []);
+
+	const [d0, d1] = scale.domain;
+	const dSpan = Math.max(d1 - d0, 1e-9);
+	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]);
+
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) return;
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+		const dpr = devicePixelRatio;
+		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);
+		const vx1 = toX(viewport.u1);
+		ctx.fillStyle = theme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)";
+		ctx.fillRect(vx0, 0, vx1 - vx0, HEIGHT);
+		ctx.strokeStyle = colors.selection;
+		ctx.strokeRect(vx0 + 0.5, 0.5, vx1 - vx0 - 1, HEIGHT - 1);
+		ctx.fillStyle = colors.selection;
+		ctx.fillRect(vx0, 0, 2, HEIGHT);
+		ctx.fillRect(vx1 - 2, 0, 2, HEIGHT);
+	}, [tracks, scale, viewport, colors, theme, width, toX]);
+
+	const handlePointerDown = (event: React.PointerEvent<HTMLCanvasElement>) => {
+		const rect = event.currentTarget.getBoundingClientRect();
+		const x = event.clientX - rect.left;
+		const vx0 = toX(viewport.u0);
+		const vx1 = toX(viewport.u1);
+		let mode: DragMode;
+		if (Math.abs(x - vx0) <= EDGE_PX) mode = "left";
+		else if (Math.abs(x - vx1) <= EDGE_PX) mode = "right";
+		else if (x > vx0 && x < vx1) mode = "move";
+		else {
+			mode = "create";
+			const u = toU(x);
+			onViewportChange(clamp({ u0: u, u1: u + MIN_WINDOW_U }, d0, d1));
+		}
+		dragRef.current = { mode, startX: x, startViewport: viewport };
+		event.currentTarget.setPointerCapture(event.pointerId);
+	};
+
+	const handlePointerMove = (event: React.PointerEvent<HTMLCanvasElement>) => {
+		const drag = dragRef.current;
+		if (!drag) return;
+		const rect = event.currentTarget.getBoundingClientRect();
+		const x = event.clientX - rect.left;
+		const deltaU = toU(x) - toU(drag.startX);
+		const { u0, u1 } = drag.startViewport;
+		if (drag.mode === "move") {
+			onViewportChange(clamp({ u0: u0 + deltaU, u1: u1 + deltaU }, d0, d1));
+		} else if (drag.mode === "left") {
+			onViewportChange(clamp({ u0: Math.min(u0 + deltaU, u1 - MIN_WINDOW_U), u1 }, d0, d1));
+		} else if (drag.mode === "right") {
+			onViewportChange(clamp({ u0, u1: Math.max(u1 + deltaU, u0 + MIN_WINDOW_U) }, d0, d1));
+		} else {
+			const anchor = toU(drag.startX);
+			const current = toU(x);
+			onViewportChange(
+				clamp(
+					{
+						u0: Math.min(anchor, current),
+						u1: Math.max(anchor, current, Math.min(anchor, current) + MIN_WINDOW_U),
+					},
+					d0,
+					d1,
+				),
+			);
+		}
+	};
+
+	const handlePointerUp = () => {
+		dragRef.current = null;
+	};
+
+	return (
+		<canvas
+			ref={canvasRef}
+			width={Math.floor(width * devicePixelRatio)}
+			height={Math.floor(HEIGHT * devicePixelRatio)}
+			style={{
+				width: "100%",
+				height: HEIGHT,
+				display: "block",
+				cursor: "crosshair",
+				borderRadius: 4,
+				border: "1px solid var(--border)",
+				touchAction: "none",
+			}}
+			role="slider"
+			aria-label="Timeline overview brush"
+			aria-valuemin={0}
+			aria-valuemax={100}
+			aria-valuenow={Math.round(((viewport.u0 - d0) / dSpan) * 100)}
+			tabIndex={-1}
+			onPointerDown={handlePointerDown}
+			onPointerMove={handlePointerMove}
+			onPointerUp={handlePointerUp}
+		/>
+	);
+}
+
+function clamp(viewport: TimelineViewport, d0: number, d1: number): TimelineViewport {
+	let span = Math.max(MIN_WINDOW_U, viewport.u1 - viewport.u0);
+	span = Math.min(span, d1 - d0 || MIN_WINDOW_U);
+	let start = viewport.u0;
+	if (start < d0) start = d0;
+	if (start + span > d1) start = d1 - span;
+	return { u0: start, u1: start + span };
+}

package/src/client/traces/SpanDrawer.tsx

@@ -0,0 +1,309 @@
+/**
+ * Detail drawer for a selected trace span. Fetches the full journal entry on
+ * demand (`/api/session/entry`) and renders per-kind detail: model usage grid
+ * + text blocks, tool args/result, user text, subagent task text.
+ */
+
+import { Check, Copy, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { getSessionEntryDetail } from "../api";
+import { formatDurationMs, formatInteger } from "../data/formatters";
+import type { TraceSpan, TraceTrack } from "../types";
+import { JsonBlock } from "../ui/JsonBlock";
+import { Skeleton } from "../ui/Skeleton";
+import { StatusPill } from "../ui/StatusPill";
+
+export interface SpanDrawerProps {
+	span: TraceSpan | null;
+	track: TraceTrack | null;
+	onClose: () => void;
+	/** Selects the first span of the given child track ("open child track"). */
+	onOpenChildTrack?: (childTrackId: string) => void;
+}
+
+/** Loose structural view of a fetched journal entry (validated field-by-field). */
+interface EntryDetailView {
+	message?: {
+		role?: string;
+		content?: unknown;
+		usage?: {
+			input?: number;
+			output?: number;
+			cacheRead?: number;
+			cacheWrite?: number;
+			totalTokens?: number;
+			cost?: { total?: number };
+		};
+		model?: string;
+		provider?: string;
+		stopReason?: string;
+		errorMessage?: string;
+		duration?: number;
+		ttft?: number;
+		toolName?: string;
+		isError?: boolean;
+		details?: unknown;
+	};
+}
+
+function textBlocks(content: unknown): Array<{ kind: string; text: string }> {
+	const blocks: Array<{ kind: string; text: string }> = [];
+	if (typeof content === "string") {
+		if (content.trim()) blocks.push({ kind: "text", text: content });
+		return blocks;
+	}
+	if (!Array.isArray(content)) return blocks;
+	for (const block of content) {
+		if (!block || typeof block !== "object" || !("type" in block)) continue;
+		if ((block.type === "text" || block.type === "thinking") && "text" in block && typeof block.text === "string") {
+			blocks.push({ kind: String(block.type), text: block.text });
+		}
+	}
+	return blocks;
+}
+
+export function SpanDrawer({ span, track, onClose, onOpenChildTrack }: SpanDrawerProps) {
+	const [entry, setEntry] = useState<unknown>(null);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<Error | null>(null);
+	const [copied, setCopied] = useState(false);
+	const closeButtonRef = useRef<HTMLButtonElement>(null);
+	const previousActiveElement = useRef<HTMLElement | null>(null);
+
+	useEffect(() => {
+		setEntry(null);
+		setError(null);
+		setCopied(false);
+		if (!span || !track || !span.entryId) return;
+		previousActiveElement.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		setLoading(true);
+		const controller = new AbortController();
+		getSessionEntryDetail(track.file, span.entryId, controller.signal)
+			.then(data => {
+				if (controller.signal.aborted) return;
+				setEntry(data.entry);
+				setTimeout(() => closeButtonRef.current?.focus(), 50);
+			})
+			.catch(err => {
+				if (controller.signal.aborted) return;
+				setError(err instanceof Error ? err : new Error(String(err)));
+			})
+			.finally(() => {
+				if (!controller.signal.aborted) setLoading(false);
+			});
+		return () => controller.abort();
+	}, [span, track]);
+
+	useEffect(() => {
+		if (!span) return;
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === "Escape") onClose();
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+			previousActiveElement.current?.focus();
+		};
+	}, [span, onClose]);
+
+	if (!span) return null;
+
+	const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {
+		if (event.target === event.currentTarget) onClose();
+	};
+
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(JSON.stringify(entry ?? span, null, 2));
+			setCopied(true);
+			setTimeout(() => setCopied(false), 1500);
+		} catch {
+			// Clipboard unavailable (permissions); leave the button state as-is.
+		}
+	};
+
+	// Boundary view: server returns opaque journal JSON, fields re-checked below.
+	const view: EntryDetailView = entry && typeof entry === "object" ? (entry as EntryDetailView) : {};
+	const msg = view.message;
+	const usage = msg?.usage;
+
+	return (
+		<div className="stats-drawer-overlay" onClick={handleOverlayClick} role="presentation">
+			<div className="stats-drawer" role="dialog" aria-modal="true" aria-label="Span details">
+				<div className="stats-drawer-header">
+					<div className="stats-drawer-header-left">
+						<h2 className="stats-drawer-title truncate" style={{ maxWidth: 320 }}>
+							{span.label}
+						</h2>
+						<StatusPill variant={span.isError ? "danger" : "success"}>{span.kind}</StatusPill>
+					</div>
+					<div style={{ display: "flex", gap: 8 }}>
+						<button
+							type="button"
+							onClick={handleCopy}
+							className="stats-drawer-close-btn"
+							aria-label="Copy raw JSON"
+							title="Copy raw JSON"
+						>
+							{copied ? <Check size={16} /> : <Copy size={16} />}
+						</button>
+						<button
+							ref={closeButtonRef}
+							type="button"
+							onClick={onClose}
+							className="stats-drawer-close-btn"
+							aria-label="Close span details"
+						>
+							<X size={18} />
+						</button>
+					</div>
+				</div>
+
+				<div className="stats-drawer-body">
+					<div className="stats-drawer-content">
+						<div className="stats-drawer-metrics-grid">
+							<div className="stats-drawer-metric-card">
+								<div className="stats-drawer-metric-label">Duration</div>
+								<div className="stats-drawer-metric-value">{formatDurationMs(span.end - span.start)}</div>
+								{span.unterminated && <div className="stats-drawer-metric-sub">unterminated</div>}
+							</div>
+							<div className="stats-drawer-metric-card">
+								<div className="stats-drawer-metric-label">Start</div>
+								<div className="stats-drawer-metric-value" style={{ fontSize: 13 }}>
+									{new Date(span.start).toLocaleTimeString()}
+								</div>
+							</div>
+							{span.kind === "model" && (
+								<>
+									<div className="stats-drawer-metric-card">
+										<div className="stats-drawer-metric-label">Tokens</div>
+										<div className="stats-drawer-metric-value">{formatInteger(span.tokens ?? 0)}</div>
+										{usage && (
+											<div className="stats-drawer-metric-sub">
+												{formatInteger(usage.input ?? 0)} in · {formatInteger(usage.output ?? 0)} out ·{" "}
+												{formatInteger(usage.cacheRead ?? 0)} cached
+											</div>
+										)}
+									</div>
+									<div className="stats-drawer-metric-card">
+										<div className="stats-drawer-metric-label">Cost</div>
+										<div className="stats-drawer-metric-value">${(span.cost ?? 0).toFixed(4)}</div>
+									</div>
+									<div className="stats-drawer-metric-card">
+										<div className="stats-drawer-metric-label">TTFT</div>
+										<div className="stats-drawer-metric-value">{formatDurationMs(span.ttft ?? null)}</div>
+									</div>
+									<div className="stats-drawer-metric-card">
+										<div className="stats-drawer-metric-label">Model</div>
+										<div className="stats-drawer-metric-value" style={{ fontSize: 12 }}>
+											{msg?.model ?? span.model ?? "-"}
+										</div>
+										{msg?.provider && <div className="stats-drawer-metric-sub">{msg.provider}</div>}
+										{msg?.stopReason && <div className="stats-drawer-metric-sub">stop: {msg.stopReason}</div>}
+									</div>
+								</>
+							)}
+						</div>
+
+						{msg?.errorMessage && (
+							<div className="stats-drawer-error-block">
+								<div className="stats-drawer-error-label">Error Message</div>
+								<div className="stats-drawer-error-text">{msg.errorMessage}</div>
+							</div>
+						)}
+
+						{span.kind === "subagent" && (
+							<div>
+								{span.detail && (
+									<pre
+										style={{
+											whiteSpace: "pre-wrap",
+											wordBreak: "break-word",
+											fontSize: 12,
+											background: "var(--surface-2)",
+											borderRadius: 6,
+											padding: 10,
+										}}
+									>
+										{span.detail}
+									</pre>
+								)}
+								{span.childTrackId && onOpenChildTrack && (
+									<button
+										type="button"
+										className="stats-segmented-control-btn"
+										style={{ marginTop: 8, border: "1px solid var(--border)", borderRadius: 6 }}
+										onClick={() => onOpenChildTrack(span.childTrackId ?? "")}
+									>
+										Open child track {span.childTrackId}
+									</button>
+								)}
+							</div>
+						)}
+
+						{span.kind === "tool" && span.detail && (
+							<div>
+								<div className="stats-drawer-metric-label">Args</div>
+								<pre
+									style={{
+										whiteSpace: "pre-wrap",
+										wordBreak: "break-word",
+										fontSize: 12,
+										background: "var(--surface-2)",
+										borderRadius: 6,
+										padding: 10,
+									}}
+								>
+									{span.detail}
+								</pre>
+							</div>
+						)}
+
+						{loading && (
+							<div>
+								<Skeleton variant="rect" width="100%" height={80} className="mb-4" />
+								<Skeleton variant="rect" width="100%" height={160} />
+							</div>
+						)}
+						{error && (
+							<div className="stats-drawer-error">
+								<p className="stats-drawer-error-title">Failed to load entry</p>
+								<p className="stats-drawer-error-message">{error.message}</p>
+							</div>
+						)}
+
+						{!loading &&
+							entry !== null &&
+							textBlocks(msg?.content).map((block, index) => (
+								<div key={`${block.kind}-${index}`}>
+									<div className="stats-drawer-metric-label" style={{ textTransform: "capitalize" }}>
+										{block.kind}
+									</div>
+									<pre
+										style={{
+											whiteSpace: "pre-wrap",
+											wordBreak: "break-word",
+											fontSize: 12,
+											background: "var(--surface-2)",
+											borderRadius: 6,
+											padding: 10,
+											maxHeight: 360,
+											overflowY: "auto",
+										}}
+									>
+										{block.text}
+									</pre>
+								</div>
+							))}
+
+						{!loading && entry !== null && (
+							<div className="stats-drawer-json-blocks">
+								<JsonBlock data={entry} title="Raw Entry" initialCollapsed={true} />
+							</div>
+						)}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/client/traces/SummaryStrip.tsx

@@ -0,0 +1,37 @@
+/**
+ * Headline chips for one trace: wall/model/tool/idle time, turns, requests,
+ * tool calls, agents, tokens, cost.
+ */
+
+import { formatCompact, formatCost, formatDurationMs, formatInteger } from "../data/formatters";
+import type { TraceSummary } from "../types";
+
+export interface SummaryStripProps {
+	summary: TraceSummary;
+}
+
+export function SummaryStrip({ summary }: SummaryStripProps) {
+	const chips: Array<{ label: string; value: string }> = [
+		{ label: "Wall", value: formatDurationMs(summary.wallMs) },
+		{ label: "Model", value: formatDurationMs(summary.modelMs) },
+		{ label: "Tools", value: formatDurationMs(summary.toolMs) },
+		{ label: "Idle", value: formatDurationMs(summary.idleMs) },
+		{ label: "Turns", value: formatInteger(summary.turns) },
+		{ label: "Requests", value: formatInteger(summary.requests) },
+		{ label: "Tool Calls", value: formatInteger(summary.toolCalls) },
+		{ label: "Agents", value: formatInteger(summary.subagents) },
+		{ label: "Tokens", value: formatCompact(summary.totalTokens) },
+		{ label: "Cost", value: formatCost(summary.costTotal) },
+	];
+
+	return (
+		<div className="stats-trace-summary">
+			{chips.map(chip => (
+				<div key={chip.label} className="stats-trace-summary-cell">
+					<span className="stats-trace-summary-label">{chip.label}</span>
+					<span className="stats-trace-summary-value">{chip.value}</span>
+				</div>
+			))}
+		</div>
+	);
+}