@gajae-code/stats 0.1.1

package/src/client/components/ModelsTable.tsx

@@ -0,0 +1,265 @@
+import {
+	CategoryScale,
+	Chart as ChartJS,
+	Legend,
+	LinearScale,
+	LineElement,
+	PointElement,
+	Title,
+	Tooltip,
+} from "chart.js";
+import { format } from "date-fns";
+import { useMemo, useState } from "react";
+import { Line } from "react-chartjs-2";
+import type { ModelPerformancePoint, ModelStats, TimeRange } from "../types";
+import { useSystemTheme } from "../useSystemTheme";
+import {
+	DetailChartEmpty,
+	detailChartPlugins,
+	detailChartScalesDualAxis,
+	ExpandableModelRow,
+	lineSeriesStyle,
+	MiniSparkline,
+	MODEL_COLORS,
+	ModelNameCell,
+	ModelTableBody,
+	ModelTableHeader,
+	ModelTableShell,
+	TABLE_CHART_THEMES,
+	type TableChartTheme,
+	TrendEmpty,
+} from "./models-table-shared";
+import { rangeMeta } from "./range-meta";
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+
+const GRID_TEMPLATE = "2fr 0.9fr 0.9fr 1fr 0.8fr 0.8fr 140px 40px";
+
+interface ModelsTableProps {
+	models: ModelStats[];
+	performanceSeries: ModelPerformancePoint[];
+	timeRange: TimeRange;
+}
+
+type ModelPerformanceSeries = {
+	label: string;
+	data: Array<{
+		timestamp: number;
+		avgTtftSeconds: number | null;
+		avgTokensPerSecond: number | null;
+		requests: number;
+	}>;
+};
+
+export function ModelsTable({ models, performanceSeries, timeRange }: ModelsTableProps) {
+	const [expandedKey, setExpandedKey] = useState<string | null>(null);
+	const meta = rangeMeta(timeRange);
+
+	const performanceSeriesByKey = useMemo(
+		() => buildModelPerformanceLookup(performanceSeries, meta.bucketCount, meta.bucketMs),
+		[performanceSeries, meta.bucketCount, meta.bucketMs],
+	);
+	const theme = useSystemTheme();
+	const chartTheme = TABLE_CHART_THEMES[theme];
+	const sortedModels = [...models].sort(
+		(a, b) => b.totalInputTokens + b.totalOutputTokens - (a.totalInputTokens + a.totalOutputTokens),
+	);
+
+	return (
+		<ModelTableShell title="Model Statistics">
+			<ModelTableHeader
+				gridTemplate={GRID_TEMPLATE}
+				columns={[
+					{ label: "Model" },
+					{ label: "Requests", align: "right" },
+					{ label: "Cost", align: "right" },
+					{ label: "Tokens", align: "right" },
+					{ label: "Tokens/s", align: "right" },
+					{ label: "TTFT", align: "right" },
+					{ label: meta.trendLabel, align: "center" },
+				]}
+			/>
+
+			<ModelTableBody>
+				{sortedModels.map((model, index) => {
+					const key = `${model.model}::${model.provider}`;
+					const performance = performanceSeriesByKey.get(key);
+					const trendData = performance?.data ?? [];
+					const trendColor = MODEL_COLORS[index % MODEL_COLORS.length];
+					const isExpanded = expandedKey === key;
+					const errorRate = model.errorRate * 100;
+
+					return (
+						<ExpandableModelRow
+							key={key}
+							gridTemplate={GRID_TEMPLATE}
+							isExpanded={isExpanded}
+							onToggle={() => setExpandedKey(isExpanded ? null : key)}
+							cells={[
+								<ModelNameCell key="name" model={model.model} provider={model.provider} />,
+								<div key="requests" className="text-right text-[var(--text-secondary)] font-mono text-sm">
+									{model.totalRequests.toLocaleString()}
+								</div>,
+								<div key="cost" className="text-right text-[var(--text-secondary)] font-mono text-sm">
+									${model.totalCost.toFixed(2)}
+								</div>,
+								<div key="tokens" className="text-right text-[var(--text-secondary)] font-mono text-sm">
+									{(model.totalInputTokens + model.totalOutputTokens).toLocaleString()}
+								</div>,
+								<div key="tps" className="text-right text-[var(--text-secondary)] font-mono text-sm">
+									{model.avgTokensPerSecond?.toFixed(1) ?? "-"}
+								</div>,
+								<div key="ttft" className="text-right text-[var(--text-secondary)] font-mono text-sm">
+									{model.avgTtft ? `${(model.avgTtft / 1000).toFixed(2)}s` : "-"}
+								</div>,
+							]}
+							trendCell={
+								trendData.length === 0 ? (
+									<TrendEmpty />
+								) : (
+									<MiniSparkline
+										timestamps={trendData.map(d => d.timestamp)}
+										values={trendData.map(d => d.avgTokensPerSecond ?? 0)}
+										color={trendColor}
+									/>
+								)
+							}
+							expandedContent={
+								<div className="grid gap-4" style={{ gridTemplateColumns: "200px 1fr" }}>
+									<div className="space-y-4 text-sm">
+										<div>
+											<div className="text-[var(--text-primary)] font-medium mb-2">Quality</div>
+											<div className="space-y-1 text-[var(--text-secondary)]">
+												<div className="flex items-center justify-between">
+													<span>Error rate</span>
+													<span
+														className={
+															errorRate > 5 ? "text-[var(--accent-red)]" : "text-[var(--accent-green)]"
+														}
+													>
+														{errorRate.toFixed(1)}%
+													</span>
+												</div>
+												<div className="flex items-center justify-between">
+													<span>Cache rate</span>
+													<span className="text-[var(--accent-cyan)]">
+														{(model.cacheRate * 100).toFixed(1)}%
+													</span>
+												</div>
+											</div>
+										</div>
+										<div>
+											<div className="text-[var(--text-primary)] font-medium mb-2">Latency</div>
+											<div className="space-y-1 text-[var(--text-secondary)]">
+												<div className="flex items-center justify-between">
+													<span>Avg duration</span>
+													<span className="font-mono">
+														{model.avgDuration ? `${(model.avgDuration / 1000).toFixed(2)}s` : "-"}
+													</span>
+												</div>
+												<div className="flex items-center justify-between">
+													<span>Avg TTFT</span>
+													<span className="font-mono">
+														{model.avgTtft ? `${(model.avgTtft / 1000).toFixed(2)}s` : "-"}
+													</span>
+												</div>
+											</div>
+										</div>
+									</div>
+									<div className="h-[200px]">
+										{trendData.length === 0 ? (
+											<DetailChartEmpty />
+										) : (
+											<PerformanceChart data={trendData} color={trendColor} chartTheme={chartTheme} />
+										)}
+									</div>
+								</div>
+							}
+						/>
+					);
+				})}
+			</ModelTableBody>
+		</ModelTableShell>
+	);
+}
+
+function PerformanceChart({
+	data,
+	color,
+	chartTheme,
+}: {
+	data: Array<{ timestamp: number; avgTtftSeconds: number | null; avgTokensPerSecond: number | null }>;
+	color: string;
+	chartTheme: TableChartTheme;
+}) {
+	const chartData = {
+		labels: data.map(d => format(new Date(d.timestamp), "MMM d")),
+		datasets: [
+			{
+				label: "TTFT",
+				data: data.map(d => d.avgTtftSeconds ?? null),
+				...lineSeriesStyle("#fbbf24"),
+				yAxisID: "y" as const,
+			},
+			{
+				label: "Tokens/s",
+				data: data.map(d => d.avgTokensPerSecond ?? null),
+				...lineSeriesStyle(color),
+				yAxisID: "y1" as const,
+			},
+		],
+	};
+
+	const options = {
+		responsive: true,
+		maintainAspectRatio: false,
+		plugins: detailChartPlugins(chartTheme),
+		scales: detailChartScalesDualAxis(chartTheme),
+	};
+
+	return <Line data={chartData} options={options} />;
+}
+
+function buildModelPerformanceLookup(
+	points: ModelPerformancePoint[],
+	bucketCount: number,
+	bucketMs: number,
+): Map<string, ModelPerformanceSeries> {
+	const maxTimestamp = points.reduce((max, point) => Math.max(max, point.timestamp), 0);
+	const anchor = maxTimestamp > 0 ? maxTimestamp : Math.floor(Date.now() / bucketMs) * bucketMs;
+	const uniqueTimestamps = new Set(points.map(p => p.timestamp));
+	const effectiveCount = bucketCount > 0 ? bucketCount : Math.max(1, uniqueTimestamps.size);
+	const start = anchor - (effectiveCount - 1) * bucketMs;
+	const buckets = Array.from({ length: effectiveCount }, (_, index) => start + index * bucketMs);
+	const bucketIndex = new Map(buckets.map((timestamp, index) => [timestamp, index]));
+	const seriesByKey = new Map<string, ModelPerformanceSeries>();
+
+	for (const point of points) {
+		const key = `${point.model}::${point.provider}`;
+		let series = seriesByKey.get(key);
+		if (!series) {
+			series = {
+				label: `${point.model} (${point.provider})`,
+				data: buckets.map(timestamp => ({
+					timestamp,
+					avgTtftSeconds: null,
+					avgTokensPerSecond: null,
+					requests: 0,
+				})),
+			};
+			seriesByKey.set(key, series);
+		}
+
+		const index = bucketIndex.get(point.timestamp);
+		if (index === undefined) continue;
+
+		series.data[index] = {
+			timestamp: point.timestamp,
+			avgTtftSeconds: point.avgTtft !== null ? point.avgTtft / 1000 : null,
+			avgTokensPerSecond: point.avgTokensPerSecond,
+			requests: point.requests,
+		};
+	}
+
+	return seriesByKey;
+}

package/src/client/components/RequestDetail.tsx

@@ -0,0 +1,172 @@
+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

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,135 @@
+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>
+	);
+}