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

package/src/client/traces/trace-colors.ts

@@ -1,77 +1,84 @@
 /**
- * Category palette + canvas chrome tokens for the trace flamegraph, keyed by
- * resolved theme. Hues align with the dashboard chip palette; chrome tokens
- * mirror `CHART_THEMES` so the canvas matches the chart.js surfaces.
+ * Canvas palette for the trace flamegraph, resolved from the dashboard's CSS
+ * design tokens so canvas drawing follows the active theme.
  */
 
+import { useEffect, useMemo, useState } from "react";
 import type { TraceSpanKind } from "../types";
+import { useSystemTheme } from "../useSystemTheme";
 
 export interface TraceTheme {
 	/** Span fill per category. */
 	category: Record<TraceSpanKind, string>;
-	/** Error fill tint + left-edge accent. */
+	/** Error left-edge accent. */
 	error: string;
+	/** Error fill tint. */
+	errorSoft: string;
 	/** Marker diamond fill. */
 	marker: string;
 	/** Alternating turn-band fill. */
 	turnBand: string;
-	/** Canvas background. */
-	surface: string;
 	/** Ruler/lane hairlines. */
 	grid: string;
 	/** Ruler tick labels. */
 	tick: string;
 	/** Span label text drawn inside blocks. */
 	spanText: string;
-	/** Selection outline (brand cyan focus ring). */
+	/** Selection outline / minimap brush. */
 	selection: string;
-	tooltipBackground: string;
-	tooltipTitle: string;
-	tooltipBody: string;
-	tooltipBorder: string;
+	/** Minimap brush fill. */
+	brush: string;
+	/** Canvas font stacks. */
+	fontSans: string;
+	fontMono: string;
 }
 
-export const TRACE_THEMES: Record<"dark" | "light", TraceTheme> = {
-	dark: {
-		category: {
-			turn: "#34d399",
-			model: "#a78bfa",
-			tool: "#fbbf24",
-			subagent: "#38bdf8",
-			background: "#94a3b8",
-		},
-		error: "#f87171",
-		marker: "#facc15",
-		turnBand: "rgba(255, 255, 255, 0.035)",
-		surface: "transparent",
-		grid: "rgba(255, 255, 255, 0.06)",
-		tick: "#867a93",
-		spanText: "#16121c",
-		selection: "#5ad8e6",
-		tooltipBackground: "#241a2e",
-		tooltipTitle: "#eae5ef",
-		tooltipBody: "#a89fb3",
-		tooltipBorder: "rgba(255, 255, 255, 0.12)",
-	},
-	light: {
+/** CSS custom property backing each category (also used by DOM chips). */
+export const CATEGORY_VARS: Record<TraceSpanKind, string> = {
+	turn: "--ink-2",
+	model: "--chart-primary",
+	tool: "--warn",
+	subagent: "--chart-secondary",
+	background: "--ink-4",
+};
+
+function readTheme(): TraceTheme {
+	const style = getComputedStyle(document.documentElement);
+	const v = (name: string, fallback: string) => style.getPropertyValue(name).trim() || fallback;
+	return {
 		category: {
-			turn: "#059669",
-			model: "#7c3aed",
-			tool: "#d97706",
-			subagent: "#0284c7",
-			background: "#64748b",
+			turn: v(CATEGORY_VARS.turn, "#a0a0a8"),
+			model: v(CATEGORY_VARS.model, "#5ad8e6"),
+			tool: v(CATEGORY_VARS.tool, "#f5a524"),
+			subagent: v(CATEGORY_VARS.subagent, "#ed4abf"),
+			background: v(CATEGORY_VARS.background, "#46464c"),
 		},
-		error: "#ef4444",
-		marker: "#ca8a04",
-		turnBand: "rgba(0, 0, 0, 0.04)",
-		surface: "transparent",
-		grid: "rgba(20, 12, 28, 0.08)",
-		tick: "#6a6275",
-		spanText: "#ffffff",
-		selection: "#0e7490",
-		tooltipBackground: "#ffffff",
-		tooltipTitle: "#241a2e",
-		tooltipBody: "#5a5462",
-		tooltipBorder: "rgba(20, 12, 28, 0.15)",
-	},
-};
+		error: v("--bad", "#ff6166"),
+		errorSoft: v("--bad-soft", "rgba(255, 97, 102, 0.13)"),
+		marker: v("--ink-1", "#ededef"),
+		turnBand: v("--hover", "rgba(255, 255, 255, 0.035)"),
+		grid: v("--chart-grid", "rgba(255, 255, 255, 0.055)"),
+		tick: v("--chart-axis", "#5c5c64"),
+		spanText: v("--ink-inverse", "#0a0a0b"),
+		selection: v("--focus", "#5ad8e6"),
+		brush: v("--selected", "rgba(255, 255, 255, 0.075)"),
+		fontSans: v("--font-sans", "system-ui, sans-serif"),
+		fontMono: v("--font-mono", "ui-monospace, monospace"),
+	};
+}
+
+/**
+ * Current trace palette. Re-reads the tokens whenever the resolved theme
+ * changes (store or a direct `data-theme` attribute write).
+ */
+export function useTraceTheme(): TraceTheme {
+	const theme = useSystemTheme();
+	const [attrVersion, setAttrVersion] = useState(0);
+	useEffect(() => {
+		const observer = new MutationObserver(() => setAttrVersion(n => n + 1));
+		observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+		return () => observer.disconnect();
+	}, []);
+	// biome-ignore lint/correctness/useExhaustiveDependencies: theme/attrVersion are re-read triggers.
+	return useMemo(readTheme, [theme, attrVersion]);
+}

package/src/client/traces/traces.css

@@ -0,0 +1,279 @@
+/* Traces page: session list + single-session trace viewer. */
+
+.traces-models {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	max-width: 220px;
+	min-width: 0;
+	color: var(--ink-2);
+}
+
+.traces-title {
+	display: block;
+	max-width: 720px;
+}
+
+.traces-spin {
+	animation: traces-spin 900ms linear infinite;
+}
+
+@keyframes traces-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+/* Toolbar above the timeline. */
+.traces-toolbar {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 12px;
+}
+
+.traces-check {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 12.5px;
+	color: var(--ink-2);
+	cursor: pointer;
+	user-select: none;
+}
+
+.traces-check input {
+	accent-color: var(--accent);
+	margin: 0;
+}
+
+.traces-search {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.traces-match-count {
+	font-size: 12px;
+	min-width: 36px;
+	text-align: center;
+}
+
+.traces-legend {
+	display: inline-flex;
+	flex-wrap: wrap;
+	gap: 12px;
+	margin-left: auto;
+	font-size: 12px;
+	color: var(--ink-2);
+}
+
+.traces-legend-item {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+}
+
+/* Minimap brush strip. */
+.traces-minimap {
+	width: 100%;
+	display: block;
+	cursor: crosshair;
+	border-radius: var(--r-chip);
+	border: 1px solid var(--line-2);
+	background: var(--panel);
+	touch-action: none;
+}
+
+/* Flamegraph: DOM gutter + canvas. */
+.traces-timeline {
+	position: relative;
+	display: flex;
+	max-height: 560px;
+	overflow-y: auto;
+	overflow-x: hidden;
+	border-top: 1px solid var(--line-1);
+}
+
+.traces-canvas {
+	cursor: grab;
+	outline: none;
+	touch-action: none;
+}
+
+.traces-canvas:focus-visible {
+	outline: 1px solid var(--focus);
+	outline-offset: -1px;
+	border-radius: var(--r-chip);
+}
+
+.traces-canvas:active {
+	cursor: grabbing;
+}
+
+.traces-chevron {
+	display: inline-flex;
+	background: none;
+	border: none;
+	padding: 0;
+	cursor: pointer;
+	color: var(--ink-3);
+	border-radius: 4px;
+}
+
+.traces-chevron:hover {
+	color: var(--ink-1);
+}
+
+.traces-chevron:focus-visible {
+	outline: 2px solid var(--focus);
+}
+
+.traces-gutter-track {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--ink-1);
+}
+
+.traces-gutter-model {
+	font-size: 10.5px;
+	color: var(--ink-3);
+}
+
+.traces-gutter-lane {
+	position: absolute;
+	font-size: 10.5px;
+	color: var(--ink-3);
+}
+
+.traces-tooltip {
+	position: fixed;
+	z-index: 60;
+	max-width: 300px;
+	pointer-events: none;
+	background: var(--overlay);
+	backdrop-filter: blur(12px);
+	border: 1px solid var(--line-3);
+	border-radius: var(--r-control);
+	padding: 8px 10px;
+	font-size: 12px;
+	line-height: 1.5;
+	box-shadow: var(--shadow-2);
+}
+
+.traces-tooltip-title {
+	font-weight: 500;
+	color: var(--ink-1);
+}
+
+.traces-tooltip-detail {
+	color: var(--ink-2);
+	word-break: break-word;
+}
+
+/* Transcript list (virtualised, fixed 28px rows). */
+.traces-list {
+	height: 340px;
+	overflow-y: auto;
+}
+
+.traces-row {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	height: 28px;
+	width: 100%;
+	padding: 0 16px;
+	background: transparent;
+	border: none;
+	border-bottom: 1px solid var(--line-1);
+	color: inherit;
+	font: inherit;
+	text-align: left;
+	cursor: pointer;
+	transition: background var(--dur-1) var(--ease);
+}
+
+.traces-row:hover {
+	background: var(--hover);
+}
+
+.traces-row:focus-visible {
+	outline: 2px solid var(--focus);
+	outline-offset: -2px;
+}
+
+.traces-row[data-selected="true"] {
+	background: var(--selected);
+	box-shadow: inset 2px 0 0 var(--accent);
+}
+
+.traces-row[data-static="true"] {
+	cursor: default;
+}
+
+.traces-row[data-static="true"]:hover {
+	background: transparent;
+}
+
+.traces-kind {
+	flex-shrink: 0;
+	width: 72px;
+	font-size: 11px;
+	font-weight: 500;
+	border-radius: var(--r-chip);
+	padding: 1px 0;
+	text-align: center;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: var(--ink-1);
+	background: color-mix(in srgb, var(--traces-kind-color) 18%, transparent);
+	box-shadow: inset 2px 0 0 var(--traces-kind-color);
+}
+
+.traces-row-track {
+	flex-shrink: 0;
+	max-width: 110px;
+	font-size: 11px;
+	color: var(--ink-3);
+}
+
+.traces-row-label {
+	font-size: 12.5px;
+	color: var(--ink-1);
+	min-width: 0;
+	flex-shrink: 1;
+}
+
+.traces-row-detail {
+	font-size: 12px;
+	color: var(--ink-3);
+	min-width: 0;
+	flex: 1;
+}
+
+.traces-row-meta {
+	margin-left: auto;
+	flex-shrink: 0;
+	display: inline-flex;
+	gap: 12px;
+	font-size: 11.5px;
+	color: var(--ink-3);
+}
+
+/* Span drawer. */
+.traces-drawer {
+	gap: 16px;
+}
+
+.traces-pre {
+	margin: 0;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+.traces-pre[data-scroll="true"] {
+	max-height: 360px;
+	overflow-y: auto;
+}

package/src/client/ui/Badge.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+
+export type Tone = "neutral" | "ok" | "warn" | "bad" | "accent";
+
+/** Pill label; status badges always carry a word, never color alone. */
+export function Badge({ tone = "neutral", mono, children }: { tone?: Tone; mono?: boolean; children: ReactNode }) {
+	return (
+		<span className="badge" data-tone={tone} data-mono={mono ?? false}>
+			{children}
+		</span>
+	);
+}
+
+/** Round status dot; `pulse` for things happening right now. */
+export function Dot({ tone = "neutral", pulse }: { tone?: Tone | "live"; pulse?: boolean }) {
+	return <span className="dot" data-tone={tone} data-pulse={pulse ?? false} />;
+}
+
+/** Color square matching a chart series. */
+export function Swatch({ color }: { color: string }) {
+	return <span className="swatch" style={{ background: color }} />;
+}
+
+/** Badge tone for an error rate (fraction). */
+export function errorRateTone(rate: number): Tone {
+	if (rate >= 0.05) return "bad";
+	if (rate >= 0.01) return "warn";
+	return "ok";
+}

package/src/client/ui/Card.tsx

@@ -0,0 +1,61 @@
+import type { CSSProperties, ReactNode } from "react";
+
+export interface CardProps {
+	title?: ReactNode;
+	description?: ReactNode;
+	/** Right-aligned header controls (segmented toggles, selects, buttons). */
+	actions?: ReactNode;
+	/** Body without padding — for full-bleed tables and lists. */
+	flush?: boolean;
+	footer?: ReactNode;
+	className?: string;
+	/** Stagger index for the entrance animation. */
+	index?: number;
+	/** Dim the body while previous data is on screen (see `useQuery().stale`). */
+	stale?: boolean;
+	children: ReactNode;
+}
+
+/** The dashboard's container: top-lit hairline edge, optional header and footer. */
+export function Card({ title, description, actions, flush, footer, className, index, stale, children }: CardProps) {
+	const hasHeader = title !== undefined || description !== undefined || actions !== undefined;
+	return (
+		<section
+			className={className ? `card rise ${className}` : "card rise"}
+			style={index !== undefined ? ({ "--i": index } as CSSProperties) : undefined}
+		>
+			{hasHeader && (
+				<header className="card-header">
+					<div className="card-titles">
+						{title !== undefined && <h2 className="card-title">{title}</h2>}
+						{description !== undefined && <p className="card-description">{description}</p>}
+					</div>
+					{actions !== undefined && <div className="card-actions">{actions}</div>}
+				</header>
+			)}
+			<div className="card-body" data-flush={flush ?? false} data-stale={stale ?? false}>
+				{children}
+			</div>
+			{footer !== undefined && <footer className="card-footer">{footer}</footer>}
+		</section>
+	);
+}
+
+export interface PageHeaderProps {
+	title: ReactNode;
+	description?: ReactNode;
+	actions?: ReactNode;
+}
+
+/** Title band at the top of every page. */
+export function PageHeader({ title, description, actions }: PageHeaderProps) {
+	return (
+		<header className="page-header rise">
+			<div>
+				<h1 className="page-title">{title}</h1>
+				{description !== undefined && <p className="page-description">{description}</p>}
+			</div>
+			{actions !== undefined && <div className="page-actions">{actions}</div>}
+		</header>
+	);
+}

package/src/client/ui/Drawer.tsx

@@ -0,0 +1,93 @@
+import { X } from "lucide-react";
+import { type CSSProperties, type ReactNode, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+export interface DrawerProps {
+	open: boolean;
+	onClose: () => void;
+	title: ReactNode;
+	subtitle?: ReactNode;
+	/** Header controls left of the close button. */
+	actions?: ReactNode;
+	/** Sheet width in px. Default 560. */
+	width?: number;
+	children: ReactNode;
+}
+
+/**
+ * Right-side glass sheet over a scrim, portalled to `document.body`. Esc and
+ * scrim clicks close it; focus returns to the opener.
+ */
+export function Drawer({ open, onClose, title, subtitle, actions, width, children }: DrawerProps) {
+	const onCloseRef = useRef(onClose);
+	onCloseRef.current = onClose;
+	const panelRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!open) return;
+		const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		panelRef.current?.focus();
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				onCloseRef.current();
+			}
+		};
+		window.addEventListener("keydown", onKey);
+		return () => {
+			window.removeEventListener("keydown", onKey);
+			opener?.focus();
+		};
+	}, [open]);
+
+	if (!open) return null;
+	return createPortal(
+		<>
+			<div className="drawer-scrim" onClick={onClose} role="presentation" />
+			<div
+				ref={panelRef}
+				className="drawer"
+				role="dialog"
+				aria-modal="true"
+				tabIndex={-1}
+				style={width !== undefined ? ({ "--drawer-w": `${width}px` } as CSSProperties) : undefined}
+			>
+				<header className="drawer-header">
+					<div className="drawer-titles">
+						<h2 className="drawer-title">{title}</h2>
+						{subtitle !== undefined && <div className="drawer-subtitle">{subtitle}</div>}
+					</div>
+					{actions}
+					<button
+						type="button"
+						className="btn"
+						data-variant="ghost"
+						data-icon="true"
+						onClick={onClose}
+						aria-label="Close"
+					>
+						<X size={16} />
+					</button>
+				</header>
+				<div className="drawer-body">{children}</div>
+			</div>
+		</>,
+		document.body,
+	);
+}
+
+/** Label/value grid for detail panels. */
+export function KeyValues({ items }: { items: readonly { key: string; label: ReactNode; value: ReactNode }[] }) {
+	return (
+		<dl className="kv" style={{ margin: 0 }}>
+			{items.map(item => (
+				<div key={item.key} className="kv-item">
+					<dt className="kv-key">{item.label}</dt>
+					<dd className="kv-value" style={{ margin: 0 }}>
+						{item.value}
+					</dd>
+				</div>
+			))}
+		</dl>
+	);
+}

package/src/client/ui/JsonBlock.tsx

@@ -1,5 +1,4 @@
-import { Check, Copy } from "lucide-react";
-import type React from "react";
+import { Check, ChevronDown, ChevronRight, Copy } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 
 export interface JsonBlockProps {
@@ -8,27 +7,19 @@ export interface JsonBlockProps {
 	initialCollapsed?: boolean;
 }
 
-export function JsonBlock({ data, title, initialCollapsed = false }: JsonBlockProps) {
+/** Collapsible, copyable pretty-printed JSON. */
+export function JsonBlock({ data, title = "JSON", initialCollapsed = false }: JsonBlockProps) {
 	const [collapsed, setCollapsed] = useState(initialCollapsed);
 	const [copied, setCopied] = useState(false);
 	const copyResetRef = useRef<number>(0);
-	const jsonStr = JSON.stringify(data, null, 2);
+	const json = JSON.stringify(data, null, 2);
 
 	// Clear the pending "Copied" reset if the block unmounts (e.g. drawer close).
 	useEffect(() => () => window.clearTimeout(copyResetRef.current), []);
 
-	const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
-			setCollapsed(!collapsed);
-		}
-	};
-
-	const handleCopy = async (e: React.MouseEvent) => {
-		// Don't toggle the collapse state when copying.
-		e.stopPropagation();
+	const copy = async () => {
 		try {
-			await navigator.clipboard.writeText(jsonStr);
+			await navigator.clipboard.writeText(json);
 			setCopied(true);
 			window.clearTimeout(copyResetRef.current);
 			copyResetRef.current = window.setTimeout(() => setCopied(false), 1500);
@@ -38,37 +29,28 @@ export function JsonBlock({ data, title, initialCollapsed = false }: JsonBlockPr
 	};
 
 	return (
-		<div className="stats-json-block">
-			<div
-				className="stats-json-block-header"
-				onClick={() => setCollapsed(!collapsed)}
-				onKeyDown={handleKeyDown}
-				tabIndex={0}
-				role="button"
-				aria-expanded={!collapsed}
-			>
-				<span className="stats-json-block-title">{title || "JSON"}</span>
-				<div className="stats-json-actions">
-					<button
-						type="button"
-						className="stats-json-copy-btn"
-						onClick={handleCopy}
-						aria-label={copied ? "Copied to clipboard" : "Copy JSON to clipboard"}
-					>
-						{copied ? <Check size={13} /> : <Copy size={13} />}
-						{copied ? "Copied" : "Copy"}
-					</button>
-					<span className="stats-json-block-toggle-indicator" data-collapsed={collapsed}>
-						{collapsed ? "▶ Show" : "▼ Hide"}
-					</span>
-				</div>
+		<div className="stack" style={{ gap: 6 }}>
+			<div className="row" style={{ justifyContent: "space-between" }}>
+				<button
+					type="button"
+					className="btn"
+					data-variant="ghost"
+					data-size="sm"
+					onClick={() => setCollapsed(c => !c)}
+					aria-expanded={!collapsed}
+				>
+					{collapsed ? <ChevronRight size={13} /> : <ChevronDown size={13} />}
+					{title}
+				</button>
+				<button type="button" className="btn" data-variant="ghost" data-size="sm" onClick={copy}>
+					{copied ? <Check size={13} /> : <Copy size={13} />}
+					{copied ? "Copied" : "Copy"}
+				</button>
 			</div>
 			{!collapsed && (
-				<div className="stats-json-block-content-wrapper">
-					<pre className="stats-json-block-content">
-						<code>{jsonStr}</code>
-					</pre>
-				</div>
+				<pre className="code-block">
+					<code>{json}</code>
+				</pre>
 			)}
 		</div>
 	);