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

package/src/client/components/RequestDetail.tsx

@@ -1,172 +0,0 @@
-import { Clock, Coins, FileJson, Gauge, Hash, Star, X, Zap } from "lucide-react";
-import { useEffect, useState } from "react";
-import { getRequestDetails } from "../api";
-import type { RequestDetails } from "../types";
-
-interface RequestDetailProps {
-	id: number;
-	onClose: () => void;
-}
-
-export function RequestDetail({ id, onClose }: RequestDetailProps) {
-	const [details, setDetails] = useState<RequestDetails | null>(null);
-	const [loading, setLoading] = useState(true);
-
-	useEffect(() => {
-		getRequestDetails(id)
-			.then(setDetails)
-			.catch(console.error)
-			.finally(() => setLoading(false));
-	}, [id]);
-
-	if (!details && loading) {
-		return (
-			<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>
-		);
-	}
-
-	if (!details) return null;
-
-	return (
-		<div
-			role="presentation"
-			className="fixed inset-0 bg-[var(--bg-overlay)] backdrop-blur-sm flex justify-end z-[100] animate-fade-in"
-			onClick={onClose}
-		>
-			<div
-				role="dialog"
-				aria-modal="true"
-				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()}
-			>
-				{/* 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}
-						className="p-2 rounded-[var(--radius-sm)] text-[var(--text-muted)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)] transition-colors"
-					>
-						<X size={20} />
-					</button>
-				</div>
-
-				<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>
-
-					{/* 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">
-								<Star size={14} />
-								<span className="text-xs uppercase tracking-wide">Premium Reqs</span>
-							</div>
-							<div className="text-xl font-semibold text-[var(--text-primary)]">
-								{(details.usage.premiumRequests ?? 0).toLocaleString()}
-							</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>
-						<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>
-						<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>
-			</div>
-		</div>
-	);
-}

package/src/client/components/RequestList.tsx

@@ -1,73 +0,0 @@
-import { formatDistanceToNow } from "date-fns";
-import { CheckCircle2, XCircle } from "lucide-react";
-import type { MessageStats } from "../types";
-
-interface RequestListProps {
-	requests: MessageStats[];
-	onSelect: (req: MessageStats) => void;
-	title: string;
-}
-
-export function RequestList({ requests, onSelect, title }: RequestListProps) {
-	return (
-		<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 className="overflow-auto flex-1">
-				<table className="w-full">
-					<thead className="bg-[var(--bg-elevated)] sticky top-0 z-10">
-						<tr>
-							<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>
-						{requests.map(req => (
-							<tr
-								key={`${req.sessionFile}-${req.entryId}`}
-								onClick={() => onSelect(req)}
-								className="table-row cursor-pointer border-b border-[var(--border-subtle)] last:border-b-0"
-							>
-								<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 className="py-3 px-4 text-sm text-[var(--text-secondary)]">
-									{formatDistanceToNow(req.timestamp, { addSuffix: true })}
-								</td>
-								<td className="py-3 px-4 text-right text-sm text-[var(--text-secondary)] font-mono">
-									{req.usage.totalTokens.toLocaleString()}
-								</td>
-								<td className="py-3 px-4 text-right text-sm text-[var(--text-secondary)] font-mono">
-									${req.usage.cost.total.toFixed(4)}
-								</td>
-								<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 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>
-		</div>
-	);
-}

package/src/client/components/StatsGrid.tsx

@@ -1,135 +0,0 @@
-import { Activity, AlertCircle, BarChart3, Database, Download, Server, Star, Upload, Zap } from "lucide-react";
-import type { AggregatedStats } from "../types";
-
-interface StatsGridProps {
-	stats: AggregatedStats;
-}
-
-const compactNumberFormatter = new Intl.NumberFormat(undefined, {
-	notation: "compact",
-	maximumFractionDigits: 1,
-});
-
-function formatCompactNumber(value: number): string {
-	return compactNumberFormatter.format(value);
-}
-
-function formatExactNumber(value: number): string {
-	return value.toLocaleString();
-}
-
-const totalPromptCompletionTokens = (stats: AggregatedStats) => stats.totalInputTokens + stats.totalOutputTokens;
-
-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: "premiumRequests",
-		title: "Premium Reqs",
-		icon: Star,
-		color: "var(--accent-amber)",
-		getValue: (s: AggregatedStats) => formatExactNumber(s.totalPremiumRequests),
-		getDetail: (s: AggregatedStats) =>
-			s.totalRequests > 0 ? `${((s.totalPremiumRequests / s.totalRequests) * 100).toFixed(1)}% of requests` : "-",
-	},
-	{
-		key: "cache",
-		title: "Cache Rate",
-		icon: Database,
-		color: "var(--accent-cyan)",
-		getValue: (s: AggregatedStats) => `${(s.cacheRate * 100).toFixed(1)}%`,
-		getDetail: (s: AggregatedStats) => `${formatCompactNumber(s.totalCacheReadTokens)} cached tokens`,
-	},
-	{
-		key: "inputTokens",
-		title: "Input Tokens",
-		icon: Download,
-		color: "var(--accent-violet)",
-		getValue: (s: AggregatedStats) => formatExactNumber(s.totalInputTokens),
-		getDetail: (s: AggregatedStats) =>
-			totalPromptCompletionTokens(s) > 0
-				? `${((s.totalInputTokens / totalPromptCompletionTokens(s)) * 100).toFixed(1)}% of prompt+completion`
-				: "-",
-	},
-	{
-		key: "outputTokens",
-		title: "Output Tokens",
-		icon: Upload,
-		color: "var(--accent-pink)",
-		getValue: (s: AggregatedStats) => formatExactNumber(s.totalOutputTokens),
-		getDetail: (s: AggregatedStats) =>
-			totalPromptCompletionTokens(s) > 0
-				? `${((s.totalOutputTokens / totalPromptCompletionTokens(s)) * 100).toFixed(1)}% of prompt+completion`
-				: "-",
-	},
-	{
-		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) =>
-			`${formatCompactNumber(totalPromptCompletionTokens(s))} total prompt+completion`,
-	},
-	{
-		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-9 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>
-	);
-}