@oh-my-pi/omp-stats 16.0.3 → 16.0.5

package/src/client/ui/AsyncBoundary.tsx

@@ -0,0 +1,54 @@
+import type React from "react";
+import { EmptyState } from "./EmptyState";
+import { ErrorState } from "./ErrorState";
+import { Skeleton } from "./Skeleton";
+
+export interface AsyncBoundaryProps {
+	loading: boolean;
+	error: Error | null;
+	data: unknown | null;
+	empty?: boolean;
+	emptyText?: string;
+	fallback?: React.ReactNode;
+	onRetry?: () => void;
+	children: React.ReactNode;
+}
+
+export function AsyncBoundary({
+	loading,
+	error,
+	data,
+	empty = false,
+	emptyText = "No data available",
+	fallback,
+	onRetry,
+	children,
+}: AsyncBoundaryProps) {
+	// If there's an error and no stale data, render ErrorState
+	if (error && data === null) {
+		return <ErrorState error={error} onRetry={onRetry} />;
+	}
+
+	// If it's loading and there is no stale data, render Loading state / Skeleton
+	if (loading && data === null) {
+		if (fallback) {
+			return <>{fallback}</>;
+		}
+		return (
+			<div className="stats-boundary-skeleton">
+				<Skeleton variant="text" width="60%" height={24} className="mb-4" />
+				<Skeleton variant="rect" width="100%" height={160} className="mb-4" />
+				<Skeleton variant="text" width="80%" height={20} className="mb-2" />
+				<Skeleton variant="text" width="40%" height={20} />
+			</div>
+		);
+	}
+
+	// If there is data but it's empty, render EmptyState
+	if (!loading && (empty || data === null)) {
+		return <EmptyState message={emptyText} />;
+	}
+
+	// Render children (stale data is kept visible even if loading is true in background)
+	return <>{children}</>;
+}

package/src/client/ui/DataTable.tsx

@@ -0,0 +1,122 @@
+import type React from "react";
+
+export interface DataTableColumn<T> {
+	key: string;
+	header: React.ReactNode;
+	render?: (item: T) => React.ReactNode;
+	className?: string;
+	numeric?: boolean;
+}
+
+export interface DataTableProps<T> {
+	columns: DataTableColumn<T>[];
+	data: T[];
+	keyExtractor: (item: T) => string | number;
+	onRowClick?: (item: T) => void;
+	renderMobileCard?: (item: T, onClick?: () => void) => React.ReactNode;
+	emptyText?: string;
+}
+
+export function DataTable<T>({
+	columns,
+	data,
+	keyExtractor,
+	onRowClick,
+	renderMobileCard,
+	emptyText = "No data available",
+}: DataTableProps<T>) {
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLTableRowElement>, item: T) => {
+		if (onRowClick && (e.key === "Enter" || e.key === " ")) {
+			e.preventDefault();
+			onRowClick(item);
+		}
+	};
+
+	if (data.length === 0) {
+		return <div className="stats-table-empty">{emptyText}</div>;
+	}
+
+	return (
+		<div className="stats-table-wrapper">
+			{/* Mobile layout */}
+			{renderMobileCard && (
+				<div className="stats-table-mobile-only">
+					<div className="stats-table-mobile-list">
+						{data.map(item => {
+							const key = String(keyExtractor(item));
+							const onClick = onRowClick ? () => onRowClick(item) : undefined;
+							return (
+								<div key={key} className="stats-table-mobile-card-wrapper">
+									{renderMobileCard(item, onClick)}
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			)}
+
+			{/* Desktop layout */}
+			<div className={renderMobileCard ? "stats-table-desktop-only" : "stats-table-container"}>
+				<table className="stats-table">
+					<thead>
+						<tr>
+							{columns.map(col => {
+								const headerClasses = [
+									"stats-table-th",
+									col.numeric ? "stats-text-right" : "stats-text-left",
+									col.className || "",
+								]
+									.filter(Boolean)
+									.join(" ");
+
+								return (
+									<th key={col.key} className={headerClasses}>
+										{col.header}
+									</th>
+								);
+							})}
+						</tr>
+					</thead>
+					<tbody>
+						{data.map(item => {
+							const key = String(keyExtractor(item));
+							const isClickable = typeof onRowClick === "function";
+							const rowClasses = ["stats-table-tr", isClickable ? "stats-table-tr-clickable" : ""]
+								.filter(Boolean)
+								.join(" ");
+
+							return (
+								<tr
+									key={key}
+									className={rowClasses}
+									onClick={isClickable ? () => onRowClick!(item) : undefined}
+									onKeyDown={isClickable ? e => handleKeyDown(e, item) : undefined}
+									tabIndex={isClickable ? 0 : undefined}
+									role={isClickable ? "button" : undefined}
+								>
+									{columns.map(col => {
+										const cellClasses = [
+											"stats-table-td",
+											col.numeric ? "stats-text-right" : "stats-text-left",
+											col.className || "",
+										]
+											.filter(Boolean)
+											.join(" ");
+
+										return (
+											<td key={col.key} className={cellClasses}>
+												{col.render
+													? col.render(item)
+													: ((item as Record<string, unknown>)[col.key] as React.ReactNode)}
+											</td>
+										);
+									})}
+								</tr>
+							);
+						})}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	);
+}

package/src/client/ui/EmptyState.tsx

@@ -0,0 +1,16 @@
+import { Inbox, type LucideIcon } from "lucide-react";
+
+export interface EmptyStateProps {
+	message?: string;
+	icon?: LucideIcon;
+	className?: string;
+}
+
+export function EmptyState({ message = "No data available", icon: Icon = Inbox, className = "" }: EmptyStateProps) {
+	return (
+		<div className={`stats-empty-state ${className}`}>
+			<Icon size={24} className="stats-empty-state-icon" aria-hidden="true" />
+			<p className="stats-empty-state-message">{message}</p>
+		</div>
+	);
+}

package/src/client/ui/ErrorState.tsx

@@ -0,0 +1,25 @@
+export interface ErrorStateProps {
+	error?: Error | null;
+	onRetry?: () => void;
+	className?: string;
+}
+
+export function ErrorState({ error, onRetry, className = "" }: ErrorStateProps) {
+	return (
+		<div className={`stats-error-state ${className}`}>
+			<div className="stats-error-state-content">
+				<h4 className="stats-error-state-title">Failed to load data</h4>
+				{error && <p className="stats-error-state-message">{error.message}</p>}
+				{onRetry && (
+					<button
+						type="button"
+						onClick={onRetry}
+						className="stats-button stats-button-secondary stats-error-state-btn"
+					>
+						Retry
+					</button>
+				)}
+			</div>
+		</div>
+	);
+}

package/src/client/ui/JsonBlock.tsx

@@ -0,0 +1,75 @@
+import { Check, Copy } from "lucide-react";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+
+export interface JsonBlockProps {
+	data: unknown;
+	title?: string;
+	initialCollapsed?: boolean;
+}
+
+export function JsonBlock({ data, title, 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);
+
+	// 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();
+		try {
+			await navigator.clipboard.writeText(jsonStr);
+			setCopied(true);
+			window.clearTimeout(copyResetRef.current);
+			copyResetRef.current = window.setTimeout(() => setCopied(false), 1500);
+		} catch {
+			// Clipboard API unavailable (e.g. insecure context); silently no-op.
+		}
+	};
+
+	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>
+			{!collapsed && (
+				<div className="stats-json-block-content-wrapper">
+					<pre className="stats-json-block-content">
+						<code>{jsonStr}</code>
+					</pre>
+				</div>
+			)}
+		</div>
+	);
+}

package/src/client/ui/MetricCluster.tsx

@@ -0,0 +1,67 @@
+import {
+	formatCompact,
+	formatCost,
+	formatDurationMs,
+	formatInteger,
+	formatPercent,
+	formatTokensPerSecond,
+} from "../data/formatters";
+import type { AggregatedStats } from "../types";
+
+export interface MetricClusterProps {
+	stats: AggregatedStats;
+}
+
+export function MetricCluster({ stats }: MetricClusterProps) {
+	return (
+		<div className="stats-metric-cluster">
+			<div className="stats-metric-primary-grid">
+				<div className="stats-metric-card primary">
+					<div className="stats-metric-label">Total Cost</div>
+					<div className="stats-metric-value">
+						{formatCost(stats.totalCost, stats.totalCost > 0 && stats.totalCost < 0.01 ? 4 : 2)}
+					</div>
+				</div>
+				<div className="stats-metric-card primary">
+					<div className="stats-metric-label">Requests</div>
+					<div className="stats-metric-value">{formatInteger(stats.totalRequests)}</div>
+				</div>
+				<div className="stats-metric-card primary">
+					<div className="stats-metric-label">Cache Rate</div>
+					<div className="stats-metric-value">{formatPercent(stats.cacheRate)}</div>
+				</div>
+				<div className="stats-metric-card primary">
+					<div className="stats-metric-label">Error Rate</div>
+					<div className="stats-metric-value">{formatPercent(stats.errorRate)}</div>
+				</div>
+			</div>
+
+			<div className="stats-metric-secondary-grid">
+				<div className="stats-metric-card secondary">
+					<div className="stats-metric-label">Input Tokens</div>
+					<div className="stats-metric-value">{formatCompact(stats.totalInputTokens)}</div>
+				</div>
+				<div className="stats-metric-card secondary">
+					<div className="stats-metric-label">Output Tokens</div>
+					<div className="stats-metric-value">{formatCompact(stats.totalOutputTokens)}</div>
+				</div>
+				<div className="stats-metric-card secondary">
+					<div className="stats-metric-label">Premium Requests</div>
+					<div className="stats-metric-value">{formatInteger(stats.totalPremiumRequests)}</div>
+				</div>
+				<div className="stats-metric-card secondary">
+					<div className="stats-metric-label">Tokens/s</div>
+					<div className="stats-metric-value">{formatTokensPerSecond(stats.avgTokensPerSecond)}</div>
+				</div>
+				<div className="stats-metric-card secondary">
+					<div className="stats-metric-label">Avg Latency</div>
+					<div className="stats-metric-value">{formatDurationMs(stats.avgDuration)}</div>
+				</div>
+				<div className="stats-metric-card secondary">
+					<div className="stats-metric-label">Avg TTFT</div>
+					<div className="stats-metric-value">{formatDurationMs(stats.avgTtft)}</div>
+				</div>
+			</div>
+		</div>
+	);
+}

package/src/client/ui/Panel.tsx

@@ -0,0 +1,24 @@
+import type React from "react";
+
+export interface PanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+	title?: React.ReactNode;
+	subtitle?: React.ReactNode;
+	actions?: React.ReactNode;
+}
+
+export function Panel({ title, subtitle, actions, children, className = "", ...props }: PanelProps) {
+	return (
+		<div className={`stats-panel ${className}`} {...props}>
+			{(title || subtitle || actions) && (
+				<div className="stats-panel-header">
+					<div className="stats-panel-header-titles">
+						{title && <h3 className="stats-panel-title">{title}</h3>}
+						{subtitle && <p className="stats-panel-subtitle">{subtitle}</p>}
+					</div>
+					{actions && <div className="stats-panel-actions">{actions}</div>}
+				</div>
+			)}
+			<div className="stats-panel-body">{children}</div>
+		</div>
+	);
+}

package/src/client/ui/RequestDrawer.tsx

@@ -0,0 +1,208 @@
+import { Clock, Coins, Gauge, Hash, Star, X, Zap } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { getRequestDetails } from "../api";
+import { formatCost, formatDurationMs, formatInteger } from "../data/formatters";
+import type { RequestDetails } from "../types";
+import { JsonBlock } from "./JsonBlock";
+import { Skeleton } from "./Skeleton";
+import { StatusPill } from "./StatusPill";
+
+export interface RequestDrawerProps {
+	id: number | null;
+	onClose: () => void;
+}
+
+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 handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				onClose();
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+			if (previousActiveElement.current) {
+				previousActiveElement.current.focus();
+			}
+		};
+	}, [id, onClose]);
+
+	if (id === null) return null;
+
+	const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
+		if (e.target === e.currentTarget) {
+			onClose();
+		}
+	};
+
+	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>
+				</div>
+
+				<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" />
+										Cost
+									</div>
+									<div className="stats-drawer-metric-value">{formatCost(details.usage.cost.total, 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>
+	);
+}

package/src/client/ui/SegmentedControl.tsx

@@ -0,0 +1,36 @@
+export interface SegmentedControlOption<T> {
+	value: T;
+	label: string;
+	title?: string;
+}
+
+export interface SegmentedControlProps<T> {
+	options: SegmentedControlOption<T>[];
+	value: T;
+	onChange: (value: T) => void;
+	className?: string;
+}
+
+export function SegmentedControl<T>({ options, value, onChange, className = "" }: SegmentedControlProps<T>) {
+	return (
+		<div className={`stats-segmented-control ${className}`} role="radiogroup">
+			{options.map(opt => {
+				const isActive = opt.value === value;
+				return (
+					<button
+						key={String(opt.value)}
+						type="button"
+						role="radio"
+						aria-checked={isActive}
+						data-active={isActive ? "true" : "false"}
+						className="stats-segmented-control-btn"
+						title={opt.title}
+						onClick={() => onChange(opt.value)}
+					>
+						{opt.label}
+					</button>
+				);
+			})}
+		</div>
+	);
+}

package/src/client/ui/Skeleton.tsx

@@ -0,0 +1,17 @@
+import type React from "react";
+
+export interface SkeletonProps {
+	variant?: "text" | "rect" | "circle";
+	width?: string | number;
+	height?: string | number;
+	className?: string;
+}
+
+export function Skeleton({ variant = "text", width, height, className = "" }: SkeletonProps) {
+	const style: React.CSSProperties = {
+		width: width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
+		height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
+	};
+
+	return <div className={`stats-skeleton ${className}`} data-variant={variant} style={style} />;
+}

package/src/client/ui/StatusPill.tsx

@@ -0,0 +1,15 @@
+import type React from "react";
+
+export interface StatusPillProps {
+	variant: "success" | "danger" | "warning" | "info" | "default";
+	children: React.ReactNode;
+	className?: string;
+}
+
+export function StatusPill({ variant, children, className = "" }: StatusPillProps) {
+	return (
+		<span className={`stats-status-pill ${className}`} data-variant={variant}>
+			{children}
+		</span>
+	);
+}

package/src/client/ui/index.ts

@@ -0,0 +1,11 @@
+export * from "./AsyncBoundary";
+export * from "./DataTable";
+export * from "./EmptyState";
+export * from "./ErrorState";
+export * from "./JsonBlock";
+export * from "./MetricCluster";
+export * from "./Panel";
+export * from "./RequestDrawer";
+export * from "./SegmentedControl";
+export * from "./Skeleton";
+export * from "./StatusPill";