@oh-my-pi/omp-stats 18.0.10 → 18.1.0

package/src/client/styles.css

@@ -1329,3 +1329,319 @@
     transition: none;
   }
 }
+
+/* ==========================================================================
+   Traces (session flamegraph)
+   ========================================================================== */
+.stats-trace-view {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.stats-trace-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.stats-trace-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  font-size: 12px;
+  color: var(--muted);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: color 0.14s ease, border-color 0.14s ease;
+}
+
+.stats-trace-back:hover {
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+
+.stats-trace-back:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: 2px;
+}
+
+.stats-trace-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stats-trace-cwd {
+  font-size: 11px;
+  color: var(--dim);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 3px 10px;
+  max-width: 280px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Summary strip: one bordered card, hairline-divided stat columns. */
+.stats-trace-summary {
+  display: flex;
+  flex-wrap: wrap;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.stats-trace-summary-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 10px 16px;
+  border-right: 1px solid var(--border);
+  min-width: 76px;
+}
+
+.stats-trace-summary-cell:last-child {
+  border-right: none;
+}
+
+.stats-trace-summary-label {
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--dim);
+}
+
+.stats-trace-summary-value {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Toolbar row above the timeline. */
+.stats-trace-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.stats-trace-toolbar-hint {
+  font-size: 10px;
+  color: var(--dim);
+  margin-left: auto;
+}
+
+.stats-trace-input {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text);
+  font-size: 12px;
+  padding: 6px 10px;
+}
+
+.stats-trace-input:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: 1px;
+}
+
+.stats-trace-input::placeholder {
+  color: var(--dim);
+}
+
+.stats-trace-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--muted);
+  cursor: pointer;
+  user-select: none;
+}
+
+.stats-trace-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--muted);
+  cursor: pointer;
+  transition: color 0.14s ease, border-color 0.14s ease;
+}
+
+.stats-trace-icon-btn:hover:not(:disabled) {
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+
+.stats-trace-icon-btn:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: 2px;
+}
+
+.stats-trace-icon-btn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* Timeline card: minimap + canvas share one bordered surface. */
+.stats-trace-timeline-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.stats-trace-timeline {
+  position: relative;
+  display: flex;
+  max-height: 560px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.stats-trace-canvas {
+  cursor: grab;
+  outline: none;
+  touch-action: none;
+  border-radius: var(--radius-sm);
+}
+
+.stats-trace-canvas:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: 2px;
+}
+
+.stats-trace-canvas:active {
+  cursor: grabbing;
+}
+
+.stats-trace-chevron {
+  display: inline-flex;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--muted);
+}
+
+.stats-trace-chevron:hover {
+  color: var(--text);
+}
+
+.stats-trace-gutter-track {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.stats-trace-gutter-model {
+  font-size: 9px;
+  color: var(--dim);
+}
+
+.stats-trace-gutter-lane {
+  position: absolute;
+  font-size: 8px;
+  color: var(--dim);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+/* Transcript list under the timeline. */
+.stats-trace-list {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  height: 340px;
+  overflow-y: auto;
+}
+
+.stats-trace-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 28px;
+  width: 100%;
+  padding: 0 12px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+
+.stats-trace-row:hover {
+  background: var(--bg-hover);
+}
+
+.stats-trace-row:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: -2px;
+}
+
+.stats-trace-row[data-selected="true"] {
+  background: var(--accent-muted);
+}
+
+.stats-trace-row-static {
+  cursor: default;
+}
+
+.stats-trace-row-static:hover {
+  background: transparent;
+}
+
+.stats-trace-kind {
+  flex-shrink: 0;
+  width: 58px;
+  font-size: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border-radius: 3px;
+  padding: 2px 0;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stats-trace-row-meta {
+  flex-shrink: 0;
+  margin-left: auto;
+  font-size: 10px;
+  color: var(--dim);
+  font-variant-numeric: tabular-nums;
+  display: flex;
+  gap: 10px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .stats-trace-back,
+  .stats-trace-icon-btn,
+  .stats-trace-row {
+    transition: none;
+  }
+}

package/src/client/traces/AggregatesPanel.tsx

@@ -0,0 +1,88 @@
+/**
+ * Collapsible per-tool duration aggregates for one trace, sorted by total
+ * time descending (as produced by the server).
+ */
+
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useMemo, useState } from "react";
+import { formatDurationMs, formatInteger } from "../data/formatters";
+import type { TraceToolStat } from "../types";
+import { DataTable } from "../ui/DataTable";
+
+export interface AggregatesPanelProps {
+	toolStats: TraceToolStat[];
+}
+
+export function AggregatesPanel({ toolStats }: AggregatesPanelProps) {
+	const [open, setOpen] = useState(false);
+
+	const columns = useMemo(
+		() => [
+			{ key: "tool", header: "Tool", render: (item: TraceToolStat) => item.tool },
+			{ key: "calls", header: "Calls", numeric: true, render: (item: TraceToolStat) => formatInteger(item.calls) },
+			{
+				key: "errors",
+				header: "Errors",
+				numeric: true,
+				render: (item: TraceToolStat) => formatInteger(item.errors),
+			},
+			{
+				key: "total",
+				header: "Total",
+				numeric: true,
+				render: (item: TraceToolStat) => formatDurationMs(item.totalMs),
+			},
+			{
+				key: "avg",
+				header: "Avg",
+				numeric: true,
+				render: (item: TraceToolStat) => formatDurationMs(item.calls > 0 ? item.totalMs / item.calls : 0),
+			},
+			{ key: "max", header: "Max", numeric: true, render: (item: TraceToolStat) => formatDurationMs(item.maxMs) },
+		],
+		[],
+	);
+
+	if (toolStats.length === 0) return null;
+
+	return (
+		<div className="stats-panel">
+			<button
+				type="button"
+				onClick={() => setOpen(prev => !prev)}
+				aria-expanded={open}
+				style={{
+					display: "flex",
+					alignItems: "center",
+					gap: 6,
+					width: "100%",
+					background: "none",
+					border: "none",
+					padding: "10px 14px",
+					cursor: "pointer",
+					textAlign: "left",
+				}}
+			>
+				{open ? (
+					<ChevronDown size={14} className="stats-text-muted" aria-hidden="true" />
+				) : (
+					<ChevronRight size={14} className="stats-text-muted" aria-hidden="true" />
+				)}
+				<span className="stats-panel-title">Tool Aggregates</span>
+				<span className="stats-text-muted" style={{ fontSize: 11 }}>
+					{toolStats.length} tools
+				</span>
+			</button>
+			{open && (
+				<div className="stats-panel-body">
+					<DataTable
+						columns={columns}
+						data={toolStats}
+						keyExtractor={item => item.tool}
+						emptyText="No tool calls"
+					/>
+				</div>
+			)}
+		</div>
+	);
+}

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 };
+}