@oh-my-pi/omp-stats 12.1.0 → 12.2.0

package/src/client/components/RequestDetail.tsx

@@ -1,4 +1,4 @@
-import { X } from "lucide-react";
+import { Clock, Coins, FileJson, Gauge, Hash, X, Zap } from "lucide-react";
 import { useEffect, useState } from "react";
 import { getRequestDetails } from "../api";
 import type { RequestDetails } from "../types";
@@ -21,18 +21,13 @@ export function RequestDetail({ id, onClose }: RequestDetailProps) {
 
 	if (!details && loading) {
 		return (
-			<div
-				style={{
-					position: "fixed",
-					inset: 0,
-					background: "rgba(0,0,0,0.5)",
-					display: "flex",
-					justifyContent: "center",
-					alignItems: "center",
-					zIndex: 100,
-				}}
-			>
-				<div style={{ background: "var(--bg-secondary)", padding: "20px", borderRadius: "8px" }}>Loading...</div>
+			<div className="fixed inset-0 bg-[var(--bg-overlay)] flex justify-center items-center z-[100]">
+				<div className="surface px-8 py-6">
+					<div className="flex items-center gap-3 text-[var(--text-secondary)]">
+						<div className="w-5 h-5 border-2 border-[var(--border-default)] border-t-[var(--accent-cyan)] rounded-full spin" />
+						<span>Loading...</span>
+					</div>
+				</div>
 			</div>
 		);
 	}
@@ -43,118 +38,127 @@ export function RequestDetail({ id, onClose }: RequestDetailProps) {
 		// biome-ignore lint/a11y/noStaticElementInteractions: modal backdrop dismissal
 		<div
 			role="presentation"
-			style={{
-				position: "fixed",
-				inset: 0,
-				background: "rgba(0,0,0,0.8)",
-				display: "flex",
-				justifyContent: "end",
-				zIndex: 100,
-			}}
+			className="fixed inset-0 bg-[var(--bg-overlay)] backdrop-blur-sm flex justify-end z-[100] animate-fade-in"
 			onClick={onClose}
 		>
 			{/* biome-ignore lint/a11y/useKeyWithClickEvents: stopPropagation for modal content */}
 			<div
 				role="dialog"
 				aria-modal="true"
-				style={{
-					width: "800px",
-					maxWidth: "100%",
-					background: "var(--bg-primary)",
-					height: "100%",
-					overflowY: "auto",
-					borderLeft: "1px solid var(--border)",
-					padding: "30px",
-				}}
+				className="w-[600px] max-w-full bg-[var(--bg-page)] h-full overflow-y-auto border-l border-[var(--border-subtle)] animate-slide-up"
 				onClick={e => e.stopPropagation()}
 			>
-				<div style={{ display: "flex", justifyContent: "space-between", marginBottom: "20px" }}>
-					<h2 style={{ margin: 0 }}>Request Details</h2>
+				{/* Header */}
+				<div className="sticky top-0 bg-[var(--bg-page)]/95 backdrop-blur border-b border-[var(--border-subtle)] px-6 py-4 flex justify-between items-center z-10">
+					<div className="flex items-center gap-3">
+						<div className="w-8 h-8 rounded-[var(--radius-sm)] bg-gradient-to-br from-[var(--accent-pink)]/20 to-[var(--accent-cyan)]/20 flex items-center justify-center">
+							<FileJson size={16} className="text-[var(--accent-cyan)]" />
+						</div>
+						<h2 className="text-lg font-semibold text-[var(--text-primary)]">Request Details</h2>
+					</div>
 					<button
 						type="button"
 						onClick={onClose}
-						style={{ background: "none", border: "none", color: "var(--text-secondary)", cursor: "pointer" }}
+						className="p-2 rounded-[var(--radius-sm)] text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)] transition-colors"
 					>
-						<X />
+						<X size={20} />
 					</button>
 				</div>
 
-				<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px", marginBottom: "30px" }}>
-					<div>
-						<div style={{ color: "var(--text-secondary)", fontSize: "0.9rem" }}>Model</div>
-						<div>
-							{details.model} ({details.provider})
+				<div className="p-6 space-y-6">
+					{/* Model Info */}
+					<div className="surface p-5">
+						<div className="flex items-center justify-between mb-4">
+							<div>
+								<div className="text-2xl font-bold text-[var(--text-primary)]">{details.model}</div>
+								<div className="text-sm text-[var(--text-muted)]">{details.provider}</div>
+							</div>
+							{details.errorMessage ? (
+								<span className="badge badge-error">Error</span>
+							) : (
+								<span className="badge badge-success">Success</span>
+							)}
 						</div>
 					</div>
-					<div>
-						<div style={{ color: "var(--text-secondary)", fontSize: "0.9rem" }}>Cost</div>
-						<div>${details.usage.cost.total.toFixed(4)}</div>
-					</div>
-					<div>
-						<div style={{ color: "var(--text-secondary)", fontSize: "0.9rem" }}>Tokens</div>
-						<div>
-							{details.usage.totalTokens} (In: {details.usage.input}, Out: {details.usage.output})
+
+					{/* Stats Grid */}
+					<div className="grid grid-cols-2 gap-4">
+						<div className="surface p-4">
+							<div className="flex items-center gap-2 text-[var(--text-muted)] mb-2">
+								<Coins size={14} />
+								<span className="text-xs uppercase tracking-wide">Cost</span>
+							</div>
+							<div className="text-xl font-semibold text-[var(--text-primary)]">
+								${details.usage.cost.total.toFixed(4)}
+							</div>
+						</div>
+
+						<div className="surface p-4">
+							<div className="flex items-center gap-2 text-[var(--text-muted)] mb-2">
+								<Hash size={14} />
+								<span className="text-xs uppercase tracking-wide">Tokens</span>
+							</div>
+							<div className="text-xl font-semibold text-[var(--text-primary)]">
+								{details.usage.totalTokens.toLocaleString()}
+							</div>
+							<div className="text-xs text-[var(--text-muted)] mt-1">
+								{details.usage.input.toLocaleString()} in · {details.usage.output.toLocaleString()} out
+							</div>
+						</div>
+
+						<div className="surface p-4">
+							<div className="flex items-center gap-2 text-[var(--text-muted)] mb-2">
+								<Clock size={14} />
+								<span className="text-xs uppercase tracking-wide">Duration</span>
+							</div>
+							<div className="text-xl font-semibold text-[var(--text-primary)]">
+								{details.duration ? `${(details.duration / 1000).toFixed(2)}s` : "-"}
+							</div>
+						</div>
+
+						<div className="surface p-4">
+							<div className="flex items-center gap-2 text-[var(--text-muted)] mb-2">
+								<Zap size={14} />
+								<span className="text-xs uppercase tracking-wide">TTFT</span>
+							</div>
+							<div className="text-xl font-semibold text-[var(--text-primary)]">
+								{details.ttft ? `${(details.ttft / 1000).toFixed(2)}s` : "-"}
+							</div>
 						</div>
 					</div>
+
+					{/* Tokens/Sec */}
+					{details.duration && details.usage.output > 0 && (
+						<div className="surface p-4">
+							<div className="flex items-center justify-between">
+								<div className="flex items-center gap-2 text-[var(--text-muted)]">
+									<Gauge size={14} />
+									<span className="text-xs uppercase tracking-wide">Throughput</span>
+								</div>
+								<span className="text-2xl font-bold gradient-text">
+									{((details.usage.output * 1000) / details.duration).toFixed(1)}
+								</span>
+							</div>
+							<div className="text-xs text-[var(--text-muted)] mt-1 text-right">tokens/second</div>
+						</div>
+					)}
+
+					{/* Output */}
 					<div>
-						<div style={{ color: "var(--text-secondary)", fontSize: "0.9rem" }}>Duration</div>
-						<div>{details.duration ? `${(details.duration / 1000).toFixed(2)}s` : "-"}</div>
-					</div>
-					<div>
-						<div style={{ color: "var(--text-secondary)", fontSize: "0.9rem" }}>TTFT</div>
-						<div>{details.ttft ? `${(details.ttft / 1000).toFixed(2)}s` : "-"}</div>
+						<h3 className="text-sm font-semibold text-[var(--text-primary)] mb-3">Output</h3>
+						<pre className="surface bg-[var(--bg-elevated)] p-4 rounded-[var(--radius-md)] text-sm font-mono text-[var(--text-secondary)] overflow-x-auto">
+							{JSON.stringify(details.output, null, 2)}
+						</pre>
 					</div>
+
+					{/* Raw Metadata */}
 					<div>
-						<div style={{ color: "var(--text-secondary)", fontSize: "0.9rem" }}>Tokens/sec</div>
-						<div>
-							{details.duration && details.usage.output
-								? ((details.usage.output * 1000) / details.duration).toFixed(1)
-								: "-"}
-						</div>
+						<h3 className="text-sm font-semibold text-[var(--text-primary)] mb-3">Raw Metadata</h3>
+						<pre className="surface bg-[var(--bg-elevated)] p-4 rounded-[var(--radius-md)] text-xs font-mono text-[var(--text-muted)] overflow-x-auto">
+							{JSON.stringify(details, null, 2)}
+						</pre>
 					</div>
 				</div>
-
-				<h3 style={{ borderBottom: "1px solid var(--border)", paddingBottom: "10px", marginBottom: "15px" }}>
-					Output
-				</h3>
-				<pre
-					style={{
-						background: "var(--bg-secondary)",
-						padding: "20px",
-						borderRadius: "8px",
-						whiteSpace: "pre-wrap",
-						overflowX: "auto",
-						fontSize: "0.9rem",
-						fontFamily: "monospace",
-					}}
-				>
-					{JSON.stringify(details.output, null, 2)}
-				</pre>
-
-				<h3
-					style={{
-						borderBottom: "1px solid var(--border)",
-						paddingBottom: "10px",
-						marginBottom: "15px",
-						marginTop: "30px",
-					}}
-				>
-					Raw Metadata
-				</h3>
-				<pre
-					style={{
-						background: "var(--bg-secondary)",
-						padding: "20px",
-						borderRadius: "8px",
-						whiteSpace: "pre-wrap",
-						overflowX: "auto",
-						fontSize: "0.8rem",
-						fontFamily: "monospace",
-						color: "var(--text-secondary)",
-					}}
-				>
-					{JSON.stringify(details, null, 2)}
-				</pre>
 			</div>
 		</div>
 	);

package/src/client/components/RequestList.tsx

@@ -1,4 +1,5 @@
 import { formatDistanceToNow } from "date-fns";
+import { CheckCircle2, XCircle } from "lucide-react";
 import type { MessageStats } from "../types";
 
 interface RequestListProps {
@@ -9,94 +10,20 @@ interface RequestListProps {
 
 export function RequestList({ requests, onSelect, title }: RequestListProps) {
 	return (
-		<div
-			style={{
-				background: "var(--bg-secondary)",
-				borderRadius: "12px",
-				border: "1px solid var(--border)",
-				overflow: "hidden",
-				display: "flex",
-				flexDirection: "column",
-				height: "100%",
-			}}
-		>
-			<div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)" }}>
-				<h3 style={{ margin: 0, fontSize: "1rem" }}>{title}</h3>
+		<div className="surface overflow-hidden flex flex-col h-full">
+			<div className="px-5 py-4 border-b border-[var(--border-subtle)]">
+				<h3 className="text-sm font-semibold text-[var(--text-primary)]">{title}</h3>
 			</div>
-			<div style={{ overflowY: "auto", flex: 1 }}>
-				<table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.9rem" }}>
-					<thead style={{ background: "rgba(0,0,0,0.2)", position: "sticky", top: 0 }}>
+			<div className="overflow-auto flex-1">
+				<table className="w-full">
+					<thead className="bg-[var(--bg-elevated)] sticky top-0 z-10">
 						<tr>
-							<th
-								style={{
-									textAlign: "left",
-									padding: "12px 20px",
-									color: "var(--text-secondary)",
-									fontWeight: 500,
-								}}
-							>
-								Time
-							</th>
-							<th
-								style={{
-									textAlign: "left",
-									padding: "12px 20px",
-									color: "var(--text-secondary)",
-									fontWeight: 500,
-								}}
-							>
-								Model
-							</th>
-							<th
-								style={{
-									textAlign: "right",
-									padding: "12px 20px",
-									color: "var(--text-secondary)",
-									fontWeight: 500,
-								}}
-							>
-								Tokens
-							</th>
-							<th
-								style={{
-									textAlign: "right",
-									padding: "12px 20px",
-									color: "var(--text-secondary)",
-									fontWeight: 500,
-								}}
-							>
-								Cost
-							</th>
-							<th
-								style={{
-									textAlign: "right",
-									padding: "12px 20px",
-									color: "var(--text-secondary)",
-									fontWeight: 500,
-								}}
-							>
-								Duration
-							</th>
-							<th
-								style={{
-									textAlign: "right",
-									padding: "12px 20px",
-									color: "var(--text-secondary)",
-									fontWeight: 500,
-								}}
-							>
-								TTFT
-							</th>
-							<th
-								style={{
-									textAlign: "right",
-									padding: "12px 20px",
-									color: "var(--text-secondary)",
-									fontWeight: 500,
-								}}
-							>
-								Tokens/s
-							</th>
+							<th className="text-left py-3 px-4 table-header">Model</th>
+							<th className="text-left py-3 px-4 table-header">Time</th>
+							<th className="text-right py-3 px-4 table-header">Tokens</th>
+							<th className="text-right py-3 px-4 table-header">Cost</th>
+							<th className="text-right py-3 px-4 table-header">Duration</th>
+							<th className="text-center py-3 px-4 table-header">Status</th>
 						</tr>
 					</thead>
 					<tbody>
@@ -104,42 +31,40 @@ export function RequestList({ requests, onSelect, title }: RequestListProps) {
 							<tr
 								key={`${req.sessionFile}-${req.entryId}`}
 								onClick={() => onSelect(req)}
-								style={{
-									cursor: "pointer",
-									borderBottom: "1px solid var(--border)",
-									transition: "background 0.1s",
-								}}
-								onMouseEnter={e => {
-									e.currentTarget.style.background = "rgba(255,255,255,0.05)";
-								}}
-								onMouseLeave={e => {
-									e.currentTarget.style.background = "transparent";
-								}}
+								className="table-row cursor-pointer border-b border-[var(--border-subtle)] last:border-b-0"
 							>
-								<td style={{ padding: "12px 20px" }}>
-									{formatDistanceToNow(req.timestamp, { addSuffix: true })}
+								<td className="py-3 px-4">
+									<div className="font-medium text-[var(--text-primary)] text-sm">{req.model}</div>
+									<div className="text-xs text-[var(--text-muted)]">{req.provider}</div>
 								</td>
-								<td style={{ padding: "12px 20px" }}>
-									<div style={{ fontWeight: 500 }}>{req.model}</div>
-									<div style={{ fontSize: "0.8rem", color: "var(--text-secondary)" }}>{req.provider}</div>
+								<td className="py-3 px-4 text-sm text-[var(--text-secondary)]">
+									{formatDistanceToNow(req.timestamp, { addSuffix: true })}
 								</td>
-								<td style={{ padding: "12px 20px", textAlign: "right" }}>
+								<td className="py-3 px-4 text-right text-sm text-[var(--text-secondary)] font-mono">
 									{req.usage.totalTokens.toLocaleString()}
 								</td>
-								<td style={{ padding: "12px 20px", textAlign: "right" }}>${req.usage.cost.total.toFixed(4)}</td>
-								<td style={{ padding: "12px 20px", textAlign: "right" }}>
-									{req.duration ? `${(req.duration / 1000).toFixed(1)}s` : "-"}
+								<td className="py-3 px-4 text-right text-sm text-[var(--text-secondary)] font-mono">
+									${req.usage.cost.total.toFixed(4)}
 								</td>
-								<td style={{ padding: "12px 20px", textAlign: "right" }}>
-									{req.ttft ? `${(req.ttft / 1000).toFixed(2)}s` : "-"}
+								<td className="py-3 px-4 text-right text-sm text-[var(--text-secondary)] font-mono">
+									{req.duration ? `${(req.duration / 1000).toFixed(1)}s` : "-"}
 								</td>
-								<td style={{ padding: "12px 20px", textAlign: "right" }}>
-									{req.duration && req.usage.output
-										? ((req.usage.output * 1000) / req.duration).toFixed(1)
-										: "-"}
+								<td className="py-3 px-4 text-center">
+									{req.errorMessage ? (
+										<XCircle size={16} className="text-[var(--accent-red)] mx-auto" />
+									) : (
+										<CheckCircle2 size={16} className="text-[var(--accent-green)] mx-auto" />
+									)}
 								</td>
 							</tr>
 						))}
+						{requests.length === 0 && (
+							<tr>
+								<td colSpan={6} className="py-12 text-center text-[var(--text-muted)] text-sm">
+									No requests found
+								</td>
+							</tr>
+						)}
 					</tbody>
 				</table>
 			</div>

package/src/client/components/StatsGrid.tsx

@@ -0,0 +1,88 @@
+import { Activity, AlertCircle, BarChart3, Database, Server, Zap } from "lucide-react";
+import type { AggregatedStats } from "../types";
+
+interface StatsGridProps {
+	stats: AggregatedStats;
+}
+
+const statConfig = [
+	{
+		key: "requests",
+		title: "Total Requests",
+		icon: Server,
+		color: "var(--accent-violet)",
+		getValue: (s: AggregatedStats) => s.totalRequests.toLocaleString(),
+		getDetail: (s: AggregatedStats) =>
+			`${s.successfulRequests.toLocaleString()} success · ${s.failedRequests.toLocaleString()} errors`,
+	},
+	{
+		key: "cost",
+		title: "Total Cost",
+		icon: Activity,
+		color: "var(--accent-pink)",
+		getValue: (s: AggregatedStats) => `$${s.totalCost.toFixed(2)}`,
+		getDetail: (s: AggregatedStats) =>
+			s.totalRequests > 0 ? `$${(s.totalCost / s.totalRequests).toFixed(4)} avg/req` : "-",
+	},
+	{
+		key: "cache",
+		title: "Cache Rate",
+		icon: Database,
+		color: "var(--accent-cyan)",
+		getValue: (s: AggregatedStats) => `${(s.cacheRate * 100).toFixed(1)}%`,
+		getDetail: (s: AggregatedStats) => `${(s.totalCacheReadTokens / 1000).toFixed(1)}k cached tokens`,
+	},
+	{
+		key: "errors",
+		title: "Error Rate",
+		icon: AlertCircle,
+		color: "var(--accent-red)",
+		getValue: (s: AggregatedStats) => `${(s.errorRate * 100).toFixed(1)}%`,
+		getDetail: (s: AggregatedStats) => `${s.failedRequests.toLocaleString()} failed requests`,
+	},
+	{
+		key: "tokens",
+		title: "Tokens/Sec",
+		icon: BarChart3,
+		color: "var(--accent-green)",
+		getValue: (s: AggregatedStats) => s.avgTokensPerSecond?.toFixed(1) ?? "-",
+		getDetail: (s: AggregatedStats) => `${(s.totalInputTokens + s.totalOutputTokens).toLocaleString()} total tokens`,
+	},
+	{
+		key: "ttft",
+		title: "TTFT",
+		icon: Zap,
+		color: "var(--accent-amber)",
+		getValue: (s: AggregatedStats) => (s.avgTtft ? `${(s.avgTtft / 1000).toFixed(2)}s` : "-"),
+		getDetail: () => "Time to first token",
+	},
+];
+
+export function StatsGrid({ stats }: StatsGridProps) {
+	return (
+		<div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 mb-8">
+			{statConfig.map(stat => {
+				const Icon = stat.icon;
+				return (
+					<div key={stat.key} className="stat-card group">
+						<div className="flex items-center justify-between mb-3">
+							<span className="text-sm font-medium text-[var(--text-secondary)]">{stat.title}</span>
+							<div
+								className="p-2 rounded-[var(--radius-sm)] transition-colors"
+								style={{ backgroundColor: `${stat.color}15` }}
+							>
+								<Icon
+									size={18}
+									style={{ color: stat.color }}
+									className="transition-transform group-hover:scale-110"
+								/>
+							</div>
+						</div>
+						<div className="text-2xl font-bold text-[var(--text-primary)] mb-1">{stat.getValue(stats)}</div>
+						<div className="text-xs text-[var(--text-muted)] truncate">{stat.getDetail(stats)}</div>
+					</div>
+				);
+			})}
+		</div>
+	);
+}

package/src/client/index.tsx

@@ -1,3 +1,4 @@
+import "./styles.css";
 import { createRoot } from "react-dom/client";
 import App from "./App";