@oh-my-pi/omp-stats 18.3.5 → 18.4.1

package/src/client/ui/Modal.tsx

@@ -0,0 +1,106 @@
+import { X } from "lucide-react";
+import type React from "react";
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import "./modal.css";
+
+export interface ModalAction {
+	label: string;
+	onClick: () => void;
+	disabled?: boolean;
+}
+
+export interface ModalProps {
+	open: boolean;
+	title: React.ReactNode;
+	/** Called on Esc, overlay click, the close icon, and the cancel button. */
+	onClose: () => void;
+	/** Confirming action; receives focus whenever it is present and enabled. */
+	primaryAction?: ModalAction;
+	cancelLabel?: string;
+	children: React.ReactNode;
+}
+
+/**
+ * Centered dialog over a dimmed overlay, portalled to `document.body` so route
+ * containers cannot clip it. Focus lands on the primary action (or the cancel
+ * button when there is none) and returns to the opener on close.
+ */
+export function Modal({ open, title, onClose, primaryAction, cancelLabel = "Cancel", children }: ModalProps) {
+	const primaryRef = useRef<HTMLButtonElement>(null);
+	const cancelRef = useRef<HTMLButtonElement>(null);
+	const onCloseRef = useRef(onClose);
+	onCloseRef.current = onClose;
+
+	useEffect(() => {
+		if (!open) return;
+		const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				onCloseRef.current();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+			opener?.focus();
+		};
+	}, [open]);
+
+	const hasPrimary = primaryAction !== undefined;
+	const primaryDisabled = primaryAction?.disabled ?? false;
+	useEffect(() => {
+		if (!open) return;
+		const target = hasPrimary && !primaryDisabled ? primaryRef.current : cancelRef.current;
+		target?.focus();
+	}, [open, hasPrimary, primaryDisabled]);
+
+	if (!open) return null;
+
+	const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
+		if (e.target === e.currentTarget) onClose();
+	};
+
+	return createPortal(
+		<div className="modal-overlay" onClick={handleOverlayClick} role="presentation">
+			<div className="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
+				<div className="modal-header">
+					<h2 id="modal-title" className="modal-title">
+						{title}
+					</h2>
+					<button
+						type="button"
+						className="btn"
+						data-variant="ghost"
+						data-icon="true"
+						data-size="sm"
+						onClick={onClose}
+						aria-label="Close"
+					>
+						<X size={15} />
+					</button>
+				</div>
+				<div className="modal-body">{children}</div>
+				<div className="modal-footer">
+					<button ref={cancelRef} type="button" className="btn" onClick={onClose}>
+						{cancelLabel}
+					</button>
+					{primaryAction && (
+						<button
+							ref={primaryRef}
+							type="button"
+							className="btn"
+							data-variant="primary"
+							onClick={primaryAction.onClick}
+							disabled={primaryAction.disabled}
+						>
+							{primaryAction.label}
+						</button>
+					)}
+				</div>
+			</div>
+		</div>,
+		document.body,
+	);
+}

package/src/client/ui/RequestDrawer.tsx

@@ -1,208 +1,183 @@
-import { Clock, Coins, Gauge, Hash, Star, X, Zap } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { GitBranch } from "lucide-react";
 import { getRequestDetails } from "../api";
-import { formatDurationMs, formatInteger, formatMessageCost } from "../data/formatters";
+import {
+	formatCost,
+	formatDurationMs,
+	formatFolder,
+	formatInteger,
+	formatMessageCost,
+	formatRelativeTime,
+	formatTimestamp,
+	formatTokensPerSecond,
+} from "../data/formatters";
+import { useQuery } from "../data/query";
+import { buildHash, parseHash } from "../data/useHashRoute";
+import { type RequestStatus, requestStatus } from "../data/view-models";
 import type { RequestDetails } from "../types";
+import { Badge, type Tone } from "./Badge";
+import { Drawer, KeyValues } from "./Drawer";
 import { JsonBlock } from "./JsonBlock";
-import { Skeleton } from "./Skeleton";
-import { StatusPill } from "./StatusPill";
+import { ErrorState, Skeleton } from "./States";
+import "./request-drawer.css";
+
+/** Label and tone for each request outcome; shared by the request tables. */
+export const REQUEST_STATUS: Record<RequestStatus, { label: string; tone: Tone }> = {
+	ok: { label: "OK", tone: "ok" },
+	aborted: { label: "Aborted", tone: "warn" },
+	failed: { label: "Failed", tone: "bad" },
+};
 
 export interface RequestDrawerProps {
 	id: number | null;
 	onClose: () => void;
 }
 
+/** Full detail sheet for one model request: timing, tokens, cost, ids, error, and the raw session entry. */
 export function RequestDrawer({ id, onClose }: RequestDrawerProps) {
-	const [details, setDetails] = useState<RequestDetails | null>(null);
-	const [loading, setLoading] = useState(false);
-	const [error, setError] = useState<Error | null>(null);
-	const previousActiveElement = useRef<HTMLElement | null>(null);
-	const closeButtonRef = useRef<HTMLButtonElement>(null);
-
-	useEffect(() => {
-		if (id === null) {
-			setDetails(null);
-			return;
-		}
-
-		previousActiveElement.current = document.activeElement as HTMLElement | null;
-		setLoading(true);
-		setError(null);
-		setDetails(null);
-
-		const controller = new AbortController();
-		getRequestDetails(id, controller.signal)
-			.then(data => {
-				if (controller.signal.aborted) return;
-				setDetails(data);
-				// Focus the close button for accessibility
-				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();
-	}, [id]);
-
-	useEffect(() => {
-		if (id === null) return;
+	const query = useQuery(["request", id], () => getRequestDetails(id ?? 0), { enabled: id !== null });
+	// Never show the previous request's payload under a new id.
+	const details = query.stale ? null : query.data;
+	const status = details ? REQUEST_STATUS[requestStatus(details)] : null;
 
-		const handleKeyDown = (e: KeyboardEvent) => {
-			if (e.key === "Escape") {
-				onClose();
+	return (
+		<Drawer
+			open={id !== null}
+			onClose={onClose}
+			width={620}
+			title={details ? <span className="mono">{details.model}</span> : "Request"}
+			subtitle={
+				details ? (
+					<>
+						{details.provider} ·{" "}
+						<span title={formatTimestamp(details.timestamp)}>{formatRelativeTime(details.timestamp)}</span>
+					</>
+				) : id !== null ? (
+					<span className="mono">#{id}</span>
+				) : undefined
 			}
-		};
-
-		window.addEventListener("keydown", handleKeyDown);
-		return () => {
-			window.removeEventListener("keydown", handleKeyDown);
-			if (previousActiveElement.current) {
-				previousActiveElement.current.focus();
+			actions={
+				details && status ? (
+					<div className="row" style={{ gap: 6 }}>
+						<a
+							className="btn"
+							data-size="sm"
+							data-variant="ghost"
+							href={buildHash({
+								...parseHash(window.location.hash),
+								section: "traces",
+								session: details.sessionFile,
+							})}
+							onClick={onClose}
+							title="Open this request's session in the trace view"
+						>
+							<GitBranch size={13} /> Trace
+						</a>
+						<Badge tone={status.tone}>{status.label}</Badge>
+					</div>
+				) : undefined
 			}
-		};
-	}, [id, onClose]);
-
-	if (id === null) return null;
+		>
+			{details ? (
+				<RequestDetailsBody details={details} aborted={requestStatus(details) === "aborted"} />
+			) : query.error ? (
+				<ErrorState error={query.error} onRetry={query.refetch} />
+			) : (
+				<div className="stack" style={{ gap: 12 }}>
+					<Skeleton height={56} />
+					<Skeleton height={120} />
+					<Skeleton height={120} />
+					<Skeleton height={220} />
+				</div>
+			)}
+		</Drawer>
+	);
+}
 
-	const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
-		if (e.target === e.currentTarget) {
-			onClose();
-		}
-	};
+function RequestDetailsBody({ details, aborted }: { details: RequestDetails; aborted: boolean }) {
+	const { usage } = details;
+	const throughput =
+		details.duration !== null && details.duration > 0 && usage.output > 0
+			? (usage.output * 1000) / details.duration
+			: null;
+	// The stats row as ingested, without the session payload shown separately below.
+	const { messages, output, ...row } = details;
 
 	return (
-		<div className="stats-drawer-overlay" onClick={handleOverlayClick} role="presentation">
-			<div className="stats-drawer" role="dialog" aria-modal="true" aria-label="Request details">
-				{/* Drawer Header */}
-				<div className="stats-drawer-header">
-					<div className="stats-drawer-header-left">
-						<h2 className="stats-drawer-title">Request Details</h2>
-						{details && <span className="stats-drawer-id">ID: {id}</span>}
-					</div>
-					<button
-						ref={closeButtonRef}
-						type="button"
-						onClick={onClose}
-						className="stats-drawer-close-btn"
-						aria-label="Close request details"
-					>
-						<X size={18} />
-					</button>
+		<>
+			{details.errorMessage && (
+				<section className="request-drawer-error" data-tone={aborted ? "warn" : "bad"} role="note">
+					<div className="request-drawer-error-label">{aborted ? "Aborted" : "Error"}</div>
+					<pre className="request-drawer-error-text">{details.errorMessage}</pre>
+				</section>
+			)}
+
+			<section>
+				<div className="section-label">Timing</div>
+				<KeyValues
+					items={[
+						{ key: "at", label: "Started", value: formatTimestamp(details.timestamp) },
+						{ key: "duration", label: "Duration", value: formatDurationMs(details.duration) },
+						{ key: "ttft", label: "Time to first token", value: formatDurationMs(details.ttft) },
+						{ key: "tps", label: "Output tokens/s", value: formatTokensPerSecond(throughput) },
+					]}
+				/>
+			</section>
+
+			<section>
+				<div className="section-label">Tokens</div>
+				<KeyValues
+					items={[
+						{ key: "input", label: "Uncached input", value: formatInteger(usage.input) },
+						{ key: "cacheRead", label: "Cache read", value: formatInteger(usage.cacheRead) },
+						{ key: "cacheWrite", label: "Cache write", value: formatInteger(usage.cacheWrite) },
+						{ key: "output", label: "Output", value: formatInteger(usage.output) },
+						{ key: "total", label: "Total", value: formatInteger(usage.totalTokens) },
+						{
+							key: "premium",
+							label: "Premium requests",
+							value: formatInteger(Math.round((usage.premiumRequests ?? 0) * 100) / 100),
+						},
+					]}
+				/>
+			</section>
+
+			<section>
+				<div className="section-label">API-equivalent cost</div>
+				<KeyValues
+					items={[
+						{ key: "total", label: "Total", value: formatMessageCost(details, 4) },
+						{ key: "input", label: "Input", value: formatCost(usage.cost.input, 4) },
+						{ key: "cacheRead", label: "Cache read", value: formatCost(usage.cost.cacheRead, 4) },
+						{ key: "cacheWrite", label: "Cache write", value: formatCost(usage.cost.cacheWrite, 4) },
+						{ key: "output", label: "Output", value: formatCost(usage.cost.output, 4) },
+					]}
+				/>
+			</section>
+
+			<section>
+				<div className="section-label">Identity</div>
+				<KeyValues
+					items={[
+						{ key: "id", label: "Request id", value: details.id ?? "–" },
+						{ key: "entry", label: "Entry id", value: details.entryId },
+						{ key: "stop", label: "Stop reason", value: details.stopReason },
+						{ key: "api", label: "API", value: details.api },
+						{
+							key: "project",
+							label: "Project",
+							value: <span title={details.folder}>{formatFolder(details.folder)}</span>,
+						},
+					]}
+				/>
+				<div className="request-drawer-file">
+					<span className="kv-key">Session file</span>
+					<span className="kv-value">{details.sessionFile}</span>
 				</div>
+			</section>
 
-				<div className="stats-drawer-body">
-					{loading && (
-						<div className="stats-drawer-loading">
-							<Skeleton variant="text" width="60%" height={24} className="mb-4" />
-							<Skeleton variant="rect" width="100%" height={80} className="mb-4" />
-							<Skeleton variant="rect" width="100%" height={120} className="mb-4" />
-							<Skeleton variant="rect" width="100%" height={200} />
-						</div>
-					)}
-
-					{error && (
-						<div className="stats-drawer-error">
-							<p className="stats-drawer-error-title">Failed to load request details</p>
-							<p className="stats-drawer-error-message">{error.message}</p>
-						</div>
-					)}
-
-					{details && (
-						<div className="stats-drawer-content">
-							{/* Status Card */}
-							<div className="stats-drawer-status-card">
-								<div className="stats-drawer-status-row">
-									<div>
-										<div className="stats-drawer-model">{details.model}</div>
-										<div className="stats-drawer-provider">{details.provider}</div>
-									</div>
-									<StatusPill variant={details.errorMessage ? "danger" : "success"}>
-										{details.errorMessage ? "Error" : "Success"}
-									</StatusPill>
-								</div>
-								{details.errorMessage && (
-									<div className="stats-drawer-error-block">
-										<div className="stats-drawer-error-label">Error Message</div>
-										<div className="stats-drawer-error-text">{details.errorMessage}</div>
-									</div>
-								)}
-							</div>
-
-							{/* Metrics Grid */}
-							<div className="stats-drawer-metrics-grid">
-								<div className="stats-drawer-metric-card">
-									<div className="stats-drawer-metric-label">
-										<Coins size={14} className="stats-drawer-metric-icon" />
-										API-equivalent estimate
-									</div>
-									<div className="stats-drawer-metric-value">{formatMessageCost(details, 4)}</div>
-								</div>
-
-								<div className="stats-drawer-metric-card">
-									<div className="stats-drawer-metric-label">
-										<Star size={14} className="stats-drawer-metric-icon" />
-										Premium
-									</div>
-									<div className="stats-drawer-metric-value">
-										{formatInteger(details.usage.premiumRequests ?? 0)}
-									</div>
-								</div>
-
-								<div className="stats-drawer-metric-card">
-									<div className="stats-drawer-metric-label">
-										<Hash size={14} className="stats-drawer-metric-icon" />
-										Total Tokens
-									</div>
-									<div className="stats-drawer-metric-value">{formatInteger(details.usage.totalTokens)}</div>
-									<div className="stats-drawer-metric-sub">
-										{formatInteger(details.usage.input)} in · {formatInteger(details.usage.output)} out
-									</div>
-								</div>
-
-								<div className="stats-drawer-metric-card">
-									<div className="stats-drawer-metric-label">
-										<Clock size={14} className="stats-drawer-metric-icon" />
-										Duration
-									</div>
-									<div className="stats-drawer-metric-value">{formatDurationMs(details.duration)}</div>
-								</div>
-
-								<div className="stats-drawer-metric-card">
-									<div className="stats-drawer-metric-label">
-										<Zap size={14} className="stats-drawer-metric-icon" />
-										TTFT
-									</div>
-									<div className="stats-drawer-metric-value">{formatDurationMs(details.ttft)}</div>
-								</div>
-
-								{details.duration && details.usage.output > 0 && (
-									<div className="stats-drawer-metric-card">
-										<div className="stats-drawer-metric-label">
-											<Gauge size={14} className="stats-drawer-metric-icon" />
-											Throughput
-										</div>
-										<div className="stats-drawer-metric-value">
-											{((details.usage.output * 1000) / details.duration).toFixed(1)}
-										</div>
-										<div className="stats-drawer-metric-sub">tokens/second</div>
-									</div>
-								)}
-							</div>
-
-							{/* JSON blocks */}
-							<div className="stats-drawer-json-blocks">
-								<JsonBlock data={details.output} title="Output Payload" initialCollapsed={false} />
-								<JsonBlock data={details} title="Raw Request Metadata" initialCollapsed={true} />
-							</div>
-						</div>
-					)}
-				</div>
-			</div>
-		</div>
+			<JsonBlock data={output} title="Output message" />
+			<JsonBlock data={messages} title="Session entry" initialCollapsed />
+			<JsonBlock data={row} title="Stats row" initialCollapsed />
+		</>
 	);
 }

package/src/client/ui/SearchInput.tsx

@@ -0,0 +1,25 @@
+import { Search } from "lucide-react";
+
+export interface SearchInputProps {
+	value: string;
+	onChange: (value: string) => void;
+	placeholder?: string;
+	width?: number;
+}
+
+/** Text filter with a leading search glyph. */
+export function SearchInput({ value, onChange, placeholder = "Filter…", width }: SearchInputProps) {
+	return (
+		<label className="search">
+			<Search size={14} />
+			<input
+				className="input"
+				type="search"
+				value={value}
+				placeholder={placeholder}
+				onChange={e => onChange(e.target.value)}
+				style={width !== undefined ? { width } : undefined}
+			/>
+		</label>
+	);
+}

package/src/client/ui/Segmented.tsx

@@ -0,0 +1,61 @@
+import { type ReactNode, useLayoutEffect, useRef, useState } from "react";
+
+export interface SegmentedOption<T extends string> {
+	value: T;
+	label: ReactNode;
+	title?: string;
+}
+
+export interface SegmentedProps<T extends string> {
+	options: readonly SegmentedOption<T>[];
+	value: T;
+	onChange: (value: T) => void;
+	size?: "md" | "sm";
+	"aria-label"?: string;
+}
+
+/** Pill toggle with a measured sliding thumb. */
+export function Segmented<T extends string>({
+	options,
+	value,
+	onChange,
+	size = "md",
+	"aria-label": ariaLabel,
+}: SegmentedProps<T>) {
+	const rootRef = useRef<HTMLDivElement>(null);
+	const [thumb, setThumb] = useState<{ left: number; width: number } | null>(null);
+
+	useLayoutEffect(() => {
+		const root = rootRef.current;
+		const active = root?.querySelector<HTMLElement>('[data-active="true"]');
+		if (!root || !active) {
+			setThumb(null);
+			return;
+		}
+		const measure = () => setThumb({ left: active.offsetLeft, width: active.offsetWidth });
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(root);
+		return () => observer.disconnect();
+	}, [value, options]);
+
+	return (
+		<div ref={rootRef} className="segmented" data-size={size} role="radiogroup" aria-label={ariaLabel}>
+			{thumb && <span className="segmented-thumb" style={{ left: thumb.left, width: thumb.width }} />}
+			{options.map(option => (
+				<button
+					key={option.value}
+					type="button"
+					role="radio"
+					aria-checked={option.value === value}
+					className="segmented-option"
+					data-active={option.value === value}
+					title={option.title}
+					onClick={() => onChange(option.value)}
+				>
+					{option.label}
+				</button>
+			))}
+		</div>
+	);
+}

package/src/client/ui/Stat.tsx

@@ -0,0 +1,104 @@
+import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from "react";
+import { Sparkline } from "../charts/Sparkline";
+
+export interface StatDelta {
+	/** Relative change vs the previous period (0.12 = +12%). `null` when there is no baseline. */
+	change: number | null;
+	/** Which direction is good news. Default `"up"`. */
+	good?: "up" | "down";
+}
+
+export interface StatProps {
+	label: ReactNode;
+	value: ReactNode;
+	/** Small print under the value. */
+	hint?: ReactNode;
+	delta?: StatDelta;
+	/** Trend under the value. */
+	spark?: readonly number[];
+	sparkColor?: string;
+	size?: "md" | "sm";
+	/** Title tooltip explaining the metric. */
+	title?: string;
+}
+
+/**
+ * One metric tile. The value flashes briefly when it changes after mount, so
+ * live updates are noticeable without being loud.
+ */
+export function Stat({ label, value, hint, delta, spark, sparkColor, size = "md", title }: StatProps) {
+	const flash = useChangeFlash(typeof value === "string" || typeof value === "number" ? value : null);
+	return (
+		<div className="stat" data-size={size} title={title}>
+			<div className="stat-label">{label}</div>
+			<div className="stat-value" data-flash={flash}>
+				{value}
+			</div>
+			{(hint !== undefined || delta) && (
+				<div className="stat-foot">
+					{delta && <Delta {...delta} />}
+					{hint !== undefined && <span className="truncate">{hint}</span>}
+				</div>
+			)}
+			{spark && spark.length > 1 && (
+				<div className="stat-spark">
+					<Sparkline values={spark} color={sparkColor} />
+				</div>
+			)}
+		</div>
+	);
+}
+
+export interface StatGridProps {
+	/** Minimum tile width before wrapping. Default 170px. */
+	min?: number;
+	children: ReactNode;
+}
+
+/** Tiles sharing one card, separated by hairlines. */
+export function StatGrid({ min, children }: StatGridProps) {
+	return (
+		<div
+			className="stat-grid rise"
+			style={min !== undefined ? ({ "--stat-min": `${min}px` } as CSSProperties) : undefined}
+		>
+			{children}
+		</div>
+	);
+}
+
+/** Signed percentage change pill, green when the move is good news. */
+export function Delta({ change, good = "up" }: StatDelta) {
+	if (change === null || !Number.isFinite(change)) return <span className="delta">new</span>;
+	const rounded = Math.abs(change) < 0.0005 ? 0 : change;
+	const tone = rounded === 0 ? undefined : rounded > 0 === (good === "up") ? "good" : "bad";
+	const sign = rounded > 0 ? "+" : rounded < 0 ? "−" : "±";
+	const pct = Math.abs(rounded) * 100;
+	return (
+		<span className="delta" data-tone={tone}>
+			{sign}
+			{pct >= 100 ? pct.toFixed(0) : pct.toFixed(1)}%
+		</span>
+	);
+}
+
+/** Relative change from `previous` to `current`; `null` when there is no baseline. */
+export function relativeChange(current: number, previous: number): number | null {
+	if (previous === 0) return current === 0 ? 0 : null;
+	return (current - previous) / previous;
+}
+
+function useChangeFlash(value: string | number | null): boolean {
+	const previous = useRef(value);
+	const [flash, setFlash] = useState(false);
+	useEffect(() => {
+		if (previous.current === value) return;
+		const hadValue = previous.current !== null;
+		previous.current = value;
+		if (!hadValue) return;
+		setFlash(true);
+		const timer = setTimeout(() => setFlash(false), 900);
+		return () => clearTimeout(timer);
+	}, [value]);
+	return flash;
+}