@oh-my-pi/omp-stats 18.3.4 → 18.4.0

package/src/client/traces/TimelineCanvas.tsx

@@ -7,11 +7,11 @@
 
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { formatDurationMs } from "../data/formatters";
 import type { TraceMarker, TraceSpan, TraceSpanKind, TraceTrack } from "../types";
-import { useSystemTheme } from "../useSystemTheme";
 import { buildTicks, formatOffset, type TraceScale } from "./time-scale";
-import { TRACE_THEMES, type TraceTheme } from "./trace-colors";
+import { type TraceTheme, useTraceTheme } from "./trace-colors";
 
 export interface TimelineViewport {
 	u0: number;
@@ -166,8 +166,7 @@ export function TimelineCanvas({
 	onToggleCollapse,
 	traceStart,
 }: TimelineCanvasProps) {
-	const theme = useSystemTheme();
-	const colors = TRACE_THEMES[theme];
+	const colors = useTraceTheme();
 	const containerRef = useRef<HTMLDivElement>(null);
 	const canvasRef = useRef<HTMLCanvasElement>(null);
 	const [canvasWidth, setCanvasWidth] = useState(800);
@@ -416,7 +415,7 @@ export function TimelineCanvas({
 	const tooltip = hover ? renderTooltip(hover, traceStart) : null;
 
 	return (
-		<div ref={containerRef} className="stats-trace-timeline">
+		<div ref={containerRef} className="traces-timeline">
 			{/* Gutter: track/lane labels + collapse chevrons (DOM, not canvas). */}
 			<div style={{ width: GUTTER_W, flexShrink: 0, position: "relative", height: layout.totalHeight }}>
 				{layout.blocks.map(block => (
@@ -443,18 +442,18 @@ export function TimelineCanvas({
 											? `Expand ${block.track.label}`
 											: `Collapse ${block.track.label}`
 									}
-									className="stats-trace-chevron"
+									className="traces-chevron"
 								>
 									{collapsed.has(block.track.id) ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
 								</button>
 							) : (
 								<span style={{ width: 12, flexShrink: 0 }} />
 							)}
-							<span className="stats-trace-gutter-track truncate" style={{ minWidth: 0 }}>
+							<span className="traces-gutter-track truncate" style={{ minWidth: 0 }}>
 								{block.track.label}
 							</span>
 							{block.track.model && (
-								<span className="stats-trace-gutter-model truncate" style={{ flexShrink: 1, minWidth: 0 }}>
+								<span className="traces-gutter-model mono truncate" style={{ flexShrink: 1, minWidth: 0 }}>
 									{block.track.model}
 								</span>
 							)}
@@ -462,7 +461,7 @@ export function TimelineCanvas({
 						{block.lanes.map(lane => (
 							<div
 								key={`${lane.track.id}:${lane.kind}`}
-								className="stats-trace-gutter-lane"
+								className="traces-gutter-lane"
 								style={{ top: lane.y, left: 20 + block.depth * 14, lineHeight: `${LANE_H}px` }}
 							>
 								{lane.label}
@@ -474,7 +473,7 @@ export function TimelineCanvas({
 
 			<canvas
 				ref={canvasRef}
-				className="stats-trace-canvas"
+				className="traces-canvas"
 				width={Math.floor(canvasWidth * devicePixelRatio)}
 				height={Math.floor(layout.totalHeight * devicePixelRatio)}
 				style={{ width: canvasWidth, height: layout.totalHeight }}
@@ -492,7 +491,7 @@ export function TimelineCanvas({
 				onKeyDown={handleKeyDown}
 			/>
 
-			{tooltip}
+			{tooltip && createPortal(tooltip, document.body)}
 		</div>
 	);
 }
@@ -573,14 +572,14 @@ function draw(
 		ctx.stroke();
 		ctx.restore();
 		ctx.fillStyle = colors.tick;
-		ctx.font = "9px system-ui, sans-serif";
+		ctx.font = `9px ${colors.fontMono}`;
 		ctx.textAlign = "center";
 		ctx.fillText(`⋯ ${formatDurationMs(gap.t1 - gap.t0)}`, x, RULER_H - 4);
 		ctx.textAlign = "left";
 	}
 
 	// Ruler: major ticks get a full-height gridline, minors stay in the ruler.
-	ctx.font = "9px system-ui, sans-serif";
+	ctx.font = `9px ${colors.fontMono}`;
 	for (const tick of buildTicks(scale, u0, u1, width)) {
 		const x = Math.round(toX(tick.u)) + 0.5;
 		ctx.strokeStyle = colors.grid;
@@ -625,9 +624,11 @@ function draw(
 			ctx.globalAlpha = matches ? 1 : 0.3;
 			if (isTurnLane) {
 				// Turn ranges read as context, not work: soft fill + solid start cap.
-				ctx.fillStyle = `${color}3a`;
+				ctx.fillStyle = color;
+				ctx.globalAlpha = (matches ? 1 : 0.3) * 0.23;
 				spanPath(ctx, x, y, w, LANE_H);
 				ctx.fill();
+				ctx.globalAlpha = matches ? 1 : 0.3;
 				ctx.fillStyle = color;
 				ctx.fillRect(x, y, 2, LANE_H);
 			} else {
@@ -636,7 +637,7 @@ function draw(
 				ctx.fill();
 			}
 			if (span.isError) {
-				ctx.fillStyle = `${colors.error}55`;
+				ctx.fillStyle = colors.errorSoft;
 				spanPath(ctx, x, y, w, LANE_H);
 				ctx.fill();
 				ctx.fillStyle = colors.error;
@@ -677,7 +678,7 @@ function draw(
 				ctx.rect(x + 3, y, w - 6, LANE_H);
 				ctx.clip();
 				ctx.fillStyle = isTurnLane ? colors.tick : colors.spanText;
-				ctx.font = "10px system-ui, sans-serif";
+				ctx.font = `10px ${colors.fontSans}`;
 				ctx.fillText(span.label, x + 5, y + LANE_H - 5);
 				ctx.restore();
 			}
@@ -713,28 +714,14 @@ function renderTooltip(hover: HoverState, traceStart: number) {
 	// Fixed positioning escapes the scroll frame's clipping; clamp to the window.
 	const left = Math.min(hover.clientX + 14, window.innerWidth - 320);
 	const top = hover.clientY + 16 > window.innerHeight - 140 ? hover.clientY - 120 : hover.clientY + 16;
-	const style: React.CSSProperties = {
-		position: "fixed",
-		left,
-		top,
-		zIndex: 60,
-		maxWidth: 300,
-		pointerEvents: "none",
-		background: "var(--surface-2)",
-		border: "1px solid var(--border-strong)",
-		borderRadius: 6,
-		padding: "7px 10px",
-		fontSize: 11,
-		lineHeight: 1.5,
-		boxShadow: "0 1px 2px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.25)",
-	};
+	const style: React.CSSProperties = { left, top };
 
 	if (hover.hit.kind === "marker") {
 		const { marker } = hover.hit;
 		return (
-			<div style={style}>
-				<div className="stats-font-medium stats-text-primary">{marker.label}</div>
-				<div className="stats-text-muted">
+			<div className="traces-tooltip" style={style}>
+				<div className="traces-tooltip-title">{marker.label}</div>
+				<div className="muted num">
 					{new Date(marker.time).toLocaleTimeString()} ({formatOffset(marker.time - traceStart)})
 				</div>
 			</div>
@@ -743,26 +730,22 @@ function renderTooltip(hover: HoverState, traceStart: number) {
 
 	const { span } = hover.hit;
 	return (
-		<div style={style}>
-			<div className="stats-font-medium stats-text-primary truncate">{span.label}</div>
-			<div className="stats-text-muted">
+		<div className="traces-tooltip" style={style}>
+			<div className="traces-tooltip-title truncate">{span.label}</div>
+			<div className="muted num">
 				{formatDurationMs(span.end - span.start)} · {new Date(span.start).toLocaleTimeString()} (
 				{formatOffset(span.start - traceStart)}){span.unterminated ? " · unterminated" : ""}
 			</div>
 			{span.kind === "model" && (
-				<div className="stats-text-muted">
+				<div className="muted num">
 					{span.tokens !== undefined && <>{span.tokens.toLocaleString()} tok</>}
 					{span.cost !== undefined && <> · ${span.cost.toFixed(4)}</>}
 					{span.ttft !== undefined && <> · TTFT {formatDurationMs(span.ttft)}</>}
 					{span.isError && <> · error</>}
 				</div>
 			)}
-			{span.kind === "subagent" && span.model && <div className="stats-text-muted">{span.model}</div>}
-			{span.detail && (
-				<div className="stats-text-secondary" style={{ wordBreak: "break-word" }}>
-					{span.detail}
-				</div>
-			)}
+			{span.kind === "subagent" && span.model && <div className="muted num">{span.model}</div>}
+			{span.detail && <div className="traces-tooltip-detail">{span.detail}</div>}
 		</div>
 	);
 }

package/src/client/traces/TraceView.tsx

@@ -4,19 +4,19 @@
  * Owns the shared viewport/selection state so all pieces stay in sync.
  */
 
-import { ArrowLeft, RefreshCw } from "lucide-react";
+import { ArrowLeft, ChevronLeft, ChevronRight, RefreshCw } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getSessionTrace } from "../api";
-import { useResource } from "../data/useResource";
-import type { TraceSpan, TraceTrack } from "../types";
-import { AsyncBoundary } from "../ui/AsyncBoundary";
-import { SegmentedControl } from "../ui/SegmentedControl";
+import { useQuery } from "../data/query";
+import type { TraceSpan, TraceSpanKind, TraceTrack } from "../types";
+import { Card, ChartSkeleton, PageHeader, QueryView, SearchInput, Segmented } from "../ui";
 import { AggregatesPanel } from "./AggregatesPanel";
 import { Minimap } from "./Minimap";
 import { SpanDrawer } from "./SpanDrawer";
 import { SummaryStrip } from "./SummaryStrip";
 import { TimelineCanvas, type TimelineViewport } from "./TimelineCanvas";
 import { TranscriptList } from "./TranscriptList";
+import { CATEGORY_VARS } from "./trace-colors";
 import { type AxisMode, buildScale } from "./time-scale";
 
 export interface TraceViewProps {
@@ -31,17 +31,18 @@ const MODE_OPTIONS: Array<{ value: AxisMode; label: string; title?: string }> =
 	{ value: "calls", label: "Calls", title: "Equal width per model/tool call boundary" },
 ];
 
+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" },
+];
+
 export function TraceView({ file, active, onBack }: TraceViewProps) {
-	const {
-		data: trace,
-		error,
-		loading,
-		refetch,
-		refreshing,
-	} = useResource(["trace", file], signal => getSessionTrace(file, signal), {
-		pollMs: 15000,
-		enabled: active,
-	});
+	const query = useQuery(["trace", file], () => getSessionTrace(file), { pollMs: 15000, enabled: active });
+	// A previous session's trace must never render under this file's header.
+	const trace = query.stale ? null : query.data;
 
 	const [mode, setMode] = useState<AxisMode>("time");
 	const [compressIdle, setCompressIdle] = useState(true);
@@ -199,139 +200,183 @@ export function TraceView({ file, active, onBack }: TraceViewProps) {
 
 	const traceStart = trace?.startedAt ?? 0;
 
+	const traceQuery = { ...query, data: trace };
+
 	return (
-		<div className="stats-trace-view">
-			<div className="stats-trace-header">
-				<button type="button" onClick={onBack} className="stats-trace-back">
-					<ArrowLeft size={13} aria-hidden="true" />
+		<div className="stack traces-view">
+			<div>
+				<button type="button" className="btn" data-variant="ghost" data-size="sm" onClick={onBack}>
+					<ArrowLeft size={14} aria-hidden="true" />
 					Sessions
 				</button>
-				<h2 className="stats-trace-title" style={{ maxWidth: 480, margin: 0 }}>
-					{trace?.title ?? file.split("/").pop()}
-				</h2>
-				{trace?.cwd && <span className="stats-trace-cwd">{trace.cwd}</span>}
-				<button
-					type="button"
-					onClick={() => void refetch()}
-					className="stats-trace-icon-btn"
-					aria-label="Refresh trace"
-					title="Refresh trace"
-					style={{ marginLeft: "auto" }}
-				>
-					<RefreshCw size={14} className={refreshing ? "stats-spin" : undefined} />
-				</button>
 			</div>
+			<PageHeader
+				title={<span className="traces-title truncate">{trace?.title ?? file.split("/").pop()}</span>}
+				description={trace?.cwd ? <span className="mono">{trace.cwd}</span> : undefined}
+				actions={
+					<button
+						type="button"
+						className="btn"
+						data-variant="ghost"
+						data-icon="true"
+						onClick={query.refetch}
+						aria-label="Refresh trace"
+						title="Refresh trace"
+					>
+						<RefreshCw size={14} className={query.refreshing ? "traces-spin" : undefined} />
+					</button>
+				}
+			/>
 
-			<AsyncBoundary loading={loading} error={error} data={trace}>
-				{trace && (
+			<QueryView query={traceQuery} skeleton={<ChartSkeleton height={420} />}>
+				{loaded => (
 					<>
-						<SummaryStrip summary={trace.summary} />
+						<SummaryStrip summary={loaded.summary} />
 
-						<div className="stats-trace-toolbar">
-							<SegmentedControl options={MODE_OPTIONS} value={mode} onChange={setMode} />
-							{mode === "time" && (
-								<label className="stats-trace-check">
-									<input
-										type="checkbox"
-										checked={compressIdle}
-										onChange={event => setCompressIdle(event.target.checked)}
+						<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"
+							actions={
+								<>
+									<button
+										type="button"
+										className="btn"
+										data-variant="ghost"
+										data-size="sm"
+										onClick={() => collapseAll(false)}
+									>
+										Expand all
+									</button>
+									<button
+										type="button"
+										className="btn"
+										data-variant="ghost"
+										data-size="sm"
+										onClick={() => collapseAll(true)}
+									>
+										Collapse all
+									</button>
+								</>
+							}
+						>
+							<div className="stack">
+								<div className="traces-toolbar">
+									<Segmented
+										options={MODE_OPTIONS}
+										value={mode}
+										onChange={setMode}
+										size="sm"
+										aria-label="Axis mode"
 									/>
-									Compress idle
-								</label>
-							)}
-							<div style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
-								<input
-									type="search"
-									value={search}
-									onChange={event => {
-										setSearch(event.target.value);
-										setMatchIndex(0);
-									}}
-									placeholder="Search spans…"
-									aria-label="Search spans"
-									spellCheck={false}
-									className="stats-trace-input"
-									style={{ width: 190 }}
+									{mode === "time" && (
+										<label className="traces-check">
+											<input
+												type="checkbox"
+												checked={compressIdle}
+												onChange={event => setCompressIdle(event.target.checked)}
+											/>
+											Compress idle
+										</label>
+									)}
+									<div className="traces-search">
+										<SearchInput
+											value={search}
+											onChange={value => {
+												setSearch(value);
+												setMatchIndex(0);
+											}}
+											placeholder="Search spans…"
+											width={200}
+										/>
+										{search.trim() && (
+											<>
+												<span className="num muted traces-match-count">
+													{matches.length === 0
+														? "0"
+														: `${(matchIndex % Math.max(matches.length, 1)) + 1}/${matches.length}`}
+												</span>
+												<button
+													type="button"
+													className="btn"
+													data-variant="ghost"
+													data-size="sm"
+													data-icon="true"
+													onClick={() => cycleMatch(-1)}
+													aria-label="Previous match"
+													disabled={matches.length === 0}
+												>
+													<ChevronLeft size={14} />
+												</button>
+												<button
+													type="button"
+													className="btn"
+													data-variant="ghost"
+													data-size="sm"
+													data-icon="true"
+													onClick={() => cycleMatch(1)}
+													aria-label="Next match"
+													disabled={matches.length === 0}
+												>
+													<ChevronRight size={14} />
+												</button>
+											</>
+										)}
+									</div>
+									<div className="traces-legend">
+										{LEGEND.map(item => (
+											<span key={item.kind} className="traces-legend-item">
+												<span
+													className="swatch"
+													style={{ background: `var(${CATEGORY_VARS[item.kind]})` }}
+												/>
+												{item.label}
+											</span>
+										))}
+									</div>
+								</div>
+								<Minimap
+									tracks={tracks}
+									scale={scale}
+									viewport={effectiveViewport}
+									onViewportChange={setViewport}
+								/>
+								<TimelineCanvas
+									tracks={tracks}
+									scale={scale}
+									viewport={effectiveViewport}
+									onViewportChange={setViewport}
+									selection={selection}
+									onSelect={selectAndOpen}
+									search={search}
+									collapsed={collapsed}
+									onToggleCollapse={toggleCollapse}
+									traceStart={traceStart}
 								/>
-								{search.trim() && (
-									<>
-										<span
-											className="stats-text-muted"
-											style={{ fontSize: 11, fontVariantNumeric: "tabular-nums" }}
-										>
-											{matches.length === 0
-												? "0"
-												: `${(matchIndex % Math.max(matches.length, 1)) + 1}/${matches.length}`}
-										</span>
-										<button
-											type="button"
-											onClick={() => cycleMatch(-1)}
-											className="stats-trace-icon-btn"
-											aria-label="Previous match"
-											disabled={matches.length === 0}
-										>
-											‹
-										</button>
-										<button
-											type="button"
-											onClick={() => cycleMatch(1)}
-											className="stats-trace-icon-btn"
-											aria-label="Next match"
-											disabled={matches.length === 0}
-										>
-											›
-										</button>
-									</>
-								)}
-							</div>
-							<div style={{ marginLeft: "auto", display: "inline-flex", gap: 6 }}>
-								<button type="button" onClick={() => collapseAll(false)} className="stats-trace-back">
-									Expand all
-								</button>
-								<button type="button" onClick={() => collapseAll(true)} className="stats-trace-back">
-									Collapse all
-								</button>
 							</div>
-						</div>
+						</Card>
 
-						<div className="stats-trace-timeline-card">
-							<Minimap
+						<Card
+							index={2}
+							title="Transcript"
+							description="Every span and marker in order; click to inspect"
+							flush
+						>
+							<TranscriptList
 								tracks={tracks}
-								scale={scale}
-								viewport={effectiveViewport}
-								onViewportChange={setViewport}
-							/>
-							<TimelineCanvas
-								tracks={tracks}
-								scale={scale}
-								viewport={effectiveViewport}
-								onViewportChange={setViewport}
 								selection={selection}
-								onSelect={selectAndOpen}
+								onSelect={spanId => {
+									selectAndReveal(spanId);
+									setDrawerOpen(true);
+								}}
 								search={search}
-								collapsed={collapsed}
-								onToggleCollapse={toggleCollapse}
 								traceStart={traceStart}
 							/>
-							<div className="stats-trace-toolbar-hint" style={{ marginLeft: 0 }}>
-								W/S zoom · A/D pan · drag pan · wheel zoom · 0 fit · F focus selection · dbl-click focus · Esc
-								deselect
-							</div>
-						</div>
-						<TranscriptList
-							tracks={tracks}
-							selection={selection}
-							onSelect={spanId => {
-								selectAndReveal(spanId);
-								setDrawerOpen(true);
-							}}
-							search={search}
-							traceStart={traceStart}
-						/>
-						<AggregatesPanel toolStats={trace.summary.toolStats} />
+						</Card>
+						<AggregatesPanel toolStats={loaded.summary.toolStats} index={3} />
 					</>
 				)}
-			</AsyncBoundary>
+			</QueryView>
 
 			<SpanDrawer
 				span={drawerOpen ? (selected?.span ?? null) : null}

package/src/client/traces/TranscriptList.tsx

@@ -6,10 +6,10 @@
 
 import { useEffect, useMemo, useRef, useState } from "react";
 import { formatDurationMs } from "../data/formatters";
+import { EmptyState } from "../ui";
 import type { TraceMarker, TraceSpan, TraceTrack } from "../types";
-import { useSystemTheme } from "../useSystemTheme";
 import { formatOffset } from "./time-scale";
-import { TRACE_THEMES } from "./trace-colors";
+import { useTraceTheme } from "./trace-colors";
 
 export interface TranscriptRow {
 	key: string;
@@ -50,8 +50,7 @@ export function buildTranscriptRows(tracks: TraceTrack[]): TranscriptRow[] {
 }
 
 export function TranscriptList({ tracks, selection, onSelect, search, traceStart }: TranscriptListProps) {
-	const theme = useSystemTheme();
-	const colors = TRACE_THEMES[theme];
+	const colors = useTraceTheme();
 	const containerRef = useRef<HTMLDivElement>(null);
 	const [scrollTop, setScrollTop] = useState(0);
 
@@ -83,11 +82,7 @@ export function TranscriptList({ tracks, selection, onSelect, search, traceStart
 	const visible = rows.slice(firstVisible, lastVisible);
 
 	return (
-		<div
-			ref={containerRef}
-			onScroll={event => setScrollTop(event.currentTarget.scrollTop)}
-			className="stats-trace-list"
-		>
+		<div ref={containerRef} onScroll={event => setScrollTop(event.currentTarget.scrollTop)} className="traces-list">
 			<div style={{ height: rows.length * ROW_H, position: "relative" }}>
 				<div style={{ position: "absolute", top: firstVisible * ROW_H, left: 0, right: 0 }}>
 					{visible.map(row => {
@@ -100,37 +95,18 @@ export function TranscriptList({ tracks, selection, onSelect, search, traceStart
 						const chipText = row.span?.kind ?? row.marker?.kind ?? "";
 						const rowContent = (
 							<>
-								<span
-									className="stats-trace-kind"
-									style={{
-										color,
-										background: `${color}1c`,
-									}}
-								>
+								<span className="traces-kind" style={{ "--traces-kind-color": color } as React.CSSProperties}>
 									{chipText}
 								</span>
 								{row.depth > 0 && (
-									<span
-										className="stats-text-muted truncate"
-										style={{ flexShrink: 0, maxWidth: 90, fontSize: 9 }}
-										title={row.track.label}
-									>
+									<span className="traces-row-track mono truncate" title={row.track.label}>
 										{row.track.id}
 									</span>
 								)}
-								<span
-									className="stats-text-primary truncate"
-									style={{ fontSize: 11, minWidth: 0, flexShrink: 1 }}
-								>
-									{label}
-								</span>
-								{detail && (
-									<span className="stats-text-muted truncate" style={{ fontSize: 10, minWidth: 0, flex: 1 }}>
-										{detail}
-									</span>
-								)}
-								<span className="stats-trace-row-meta">
-									{row.span?.isError && <span style={{ color: colors.error }}>error</span>}
+								<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>}
 									<span>{duration}</span>
 									<span>{formatOffset(row.time - traceStart)}</span>
 								</span>
@@ -142,25 +118,21 @@ export function TranscriptList({ tracks, selection, onSelect, search, traceStart
 								key={row.key}
 								type="button"
 								onClick={() => onSelect(span.id)}
-								className="stats-trace-row"
+								className="traces-row"
 								data-selected={isSelected ? "true" : "false"}
 								style={indent}
 							>
 								{rowContent}
 							</button>
 						) : (
-							<div key={row.key} className="stats-trace-row stats-trace-row-static" style={indent}>
+							<div key={row.key} className="traces-row" data-static="true" style={indent}>
 								{rowContent}
 							</div>
 						);
 					})}
 				</div>
 			</div>
-			{rows.length === 0 && (
-				<div className="stats-text-muted" style={{ padding: 16, fontSize: 12 }}>
-					No matching events
-				</div>
-			)}
+			{rows.length === 0 && <EmptyState title="No matching events" />}
 		</div>
 	);
 }