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

package/src/client/components/ChartsContainer.tsx

@@ -0,0 +1,185 @@
+import {
+	CategoryScale,
+	Chart as ChartJS,
+	Filler,
+	Legend,
+	LinearScale,
+	LineElement,
+	PointElement,
+	Title,
+	Tooltip,
+} from "chart.js";
+import { format } from "date-fns";
+import { useMemo } from "react";
+import { Line } from "react-chartjs-2";
+import type { ModelTimeSeriesPoint } from "../types";
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler);
+
+const MODEL_COLORS = [
+	"#a78bfa", // violet
+	"#22d3ee", // cyan
+	"#ec4899", // pink
+	"#4ade80", // green
+	"#fbbf24", // amber
+	"#f87171", // red
+	"#60a5fa", // blue
+];
+
+interface ChartsContainerProps {
+	modelSeries: ModelTimeSeriesPoint[];
+}
+
+export function ChartsContainer({ modelSeries }: ChartsContainerProps) {
+	const chartData = useMemo(() => buildModelPreferenceSeries(modelSeries), [modelSeries]);
+
+	const data = {
+		labels: chartData.data.map(d => format(new Date(d.timestamp), "MMM d")),
+		datasets: chartData.series.map((seriesName, index) => ({
+			label: seriesName,
+			data: chartData.data.map(d => d[seriesName] ?? 0),
+			borderColor: MODEL_COLORS[index % MODEL_COLORS.length],
+			backgroundColor: `${MODEL_COLORS[index % MODEL_COLORS.length]}20`,
+			fill: true,
+			tension: 0.4,
+			pointRadius: 0,
+			pointHoverRadius: 4,
+			borderWidth: 2,
+		})),
+	};
+
+	const options = {
+		responsive: true,
+		maintainAspectRatio: false,
+		interaction: {
+			mode: "index" as const,
+			intersect: false,
+		},
+		plugins: {
+			legend: {
+				position: "top" as const,
+				align: "start" as const,
+				labels: {
+					color: "var(--text-secondary)",
+					usePointStyle: true,
+					padding: 16,
+					font: { size: 12 },
+					boxWidth: 8,
+				},
+			},
+			tooltip: {
+				backgroundColor: "var(--bg-elevated)",
+				titleColor: "var(--text-primary)",
+				bodyColor: "var(--text-secondary)",
+				borderColor: "var(--border-default)",
+				borderWidth: 1,
+				padding: 12,
+				cornerRadius: 8,
+				callbacks: {
+					label: (context: { dataset: { label?: string }; parsed: { y: number | null } }) => {
+						const label = context.dataset.label ?? "";
+						const value = context.parsed.y;
+						return `${label}: ${(value ?? 0).toFixed(1)}%`;
+					},
+				},
+			},
+		},
+		scales: {
+			x: {
+				grid: {
+					color: "var(--border-subtle)",
+					drawBorder: false,
+				},
+				ticks: {
+					color: "var(--text-muted)",
+					font: { size: 11 },
+				},
+			},
+			y: {
+				grid: {
+					color: "var(--border-subtle)",
+					drawBorder: false,
+				},
+				ticks: {
+					color: "var(--text-muted)",
+					font: { size: 11 },
+					callback: (value: number | string) => `${value}%`,
+				},
+				min: 0,
+				max: 100,
+			},
+		},
+	};
+
+	return (
+		<div className="surface overflow-hidden">
+			<div className="px-5 py-4 border-b border-[var(--border-subtle)]">
+				<h3 className="text-sm font-semibold text-[var(--text-primary)]">Model Preference</h3>
+				<p className="text-xs text-[var(--text-muted)] mt-1">Share of requests over the last 14 days</p>
+			</div>
+			<div className="p-5 min-h-[320px]">
+				{chartData.data.length === 0 ? (
+					<div className="h-full flex items-center justify-center text-[var(--text-muted)] text-sm">
+						No data available
+					</div>
+				) : (
+					<div className="h-[280px]">
+						<Line data={data} options={options} />
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+function buildModelPreferenceSeries(
+	points: ModelTimeSeriesPoint[],
+	topN = 5,
+): {
+	data: Array<Record<string, number>>;
+	series: string[];
+} {
+	if (points.length === 0) return { data: [], series: [] };
+
+	const totals = new Map<string, { label: string; total: number }>();
+	for (const point of points) {
+		const key = `${point.model}::${point.provider}`;
+		const label = `${point.model} (${point.provider})`;
+		const existing = totals.get(key);
+		if (existing) {
+			existing.total += point.requests;
+		} else {
+			totals.set(key, { label, total: point.requests });
+		}
+	}
+
+	const sorted = [...totals.values()].sort((a, b) => b.total - a.total);
+	const topLabels = sorted.slice(0, topN).map(entry => entry.label);
+	const dataMap = new Map<number, Record<string, number>>();
+
+	for (const point of points) {
+		const label = `${point.model} (${point.provider})`;
+		const bucket = dataMap.get(point.timestamp) ?? { timestamp: point.timestamp, total: 0 };
+		bucket.total += point.requests;
+		const key = topLabels.includes(label) ? label : "Other";
+		bucket[key] = (bucket[key] ?? 0) + point.requests;
+		dataMap.set(point.timestamp, bucket);
+	}
+
+	const series = [...topLabels];
+	if ([...dataMap.values()].some(row => (row.Other ?? 0) > 0)) {
+		series.push("Other");
+	}
+
+	const data = [...dataMap.values()]
+		.sort((a, b) => (a.timestamp ?? 0) - (b.timestamp ?? 0))
+		.map(row => {
+			const total = row.total ?? 0;
+			for (const key of series) {
+				row[key] = total > 0 ? ((row[key] ?? 0) / total) * 100 : 0;
+			}
+			return row;
+		});
+
+	return { data, series };
+}

package/src/client/components/Header.tsx

@@ -0,0 +1,48 @@
+import { Activity, RefreshCw } from "lucide-react";
+
+type Tab = "overview" | "requests" | "errors" | "models";
+
+interface HeaderProps {
+	activeTab: Tab;
+	onTabChange: (tab: Tab) => void;
+	onSync: () => void;
+	syncing: boolean;
+}
+
+const tabs: Tab[] = ["overview", "requests", "errors", "models"];
+
+export function Header({ activeTab, onTabChange, onSync, syncing }: HeaderProps) {
+	return (
+		<header className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 mb-8 border-b border-[var(--border-subtle)]">
+			<div className="flex items-center gap-3">
+				<div className="w-10 h-10 rounded-[var(--radius-md)] bg-gradient-to-br from-[var(--accent-pink)] to-[var(--accent-cyan)] flex items-center justify-center shadow-lg">
+					<Activity className="w-5 h-5 text-white" />
+				</div>
+				<div>
+					<h1 className="text-xl font-semibold text-[var(--text-primary)]">AI Usage</h1>
+					<p className="text-sm text-[var(--text-muted)]">Statistics & Analytics</p>
+				</div>
+			</div>
+
+			<div className="flex items-center gap-3">
+				<div className="flex bg-[var(--bg-surface)] rounded-[var(--radius-md)] p-1 border border-[var(--border-subtle)]">
+					{tabs.map(tab => (
+						<button
+							key={tab}
+							type="button"
+							onClick={() => onTabChange(tab)}
+							className={`tab-btn capitalize ${activeTab === tab ? "active" : ""}`}
+						>
+							{tab}
+						</button>
+					))}
+				</div>
+
+				<button type="button" onClick={onSync} disabled={syncing} className="btn btn-primary">
+					<RefreshCw size={16} className={syncing ? "spin" : ""} />
+					{syncing ? "Syncing..." : "Sync"}
+				</button>
+			</div>
+		</header>
+	);
+}

package/src/client/components/ModelsTable.tsx

@@ -0,0 +1,343 @@
+import {
+	CategoryScale,
+	Chart as ChartJS,
+	Legend,
+	LinearScale,
+	LineElement,
+	PointElement,
+	Title,
+	Tooltip,
+} from "chart.js";
+import { format } from "date-fns";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Line } from "react-chartjs-2";
+import type { ModelPerformancePoint, ModelStats } from "../types";
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+
+const MODEL_COLORS = [
+	"#a78bfa", // violet
+	"#22d3ee", // cyan
+	"#ec4899", // pink
+	"#4ade80", // green
+	"#fbbf24", // amber
+	"#f87171", // red
+	"#60a5fa", // blue
+];
+
+interface ModelsTableProps {
+	models: ModelStats[];
+	performanceSeries: ModelPerformancePoint[];
+}
+
+type ModelPerformanceSeries = {
+	label: string;
+	data: Array<{
+		timestamp: number;
+		avgTtftSeconds: number | null;
+		avgTokensPerSecond: number | null;
+		requests: number;
+	}>;
+};
+
+export function ModelsTable({ models, performanceSeries }: ModelsTableProps) {
+	const [expandedKey, setExpandedKey] = useState<string | null>(null);
+
+	const performanceSeriesByKey = useMemo(() => buildModelPerformanceLookup(performanceSeries), [performanceSeries]);
+	const sortedModels = [...models].sort(
+		(a, b) => b.totalInputTokens + b.totalOutputTokens - (a.totalInputTokens + a.totalOutputTokens),
+	);
+
+	return (
+		<div className="surface overflow-hidden">
+			<div className="px-5 py-4 border-b border-[var(--border-subtle)]">
+				<h3 className="text-sm font-semibold text-[var(--text-primary)]">Model Statistics</h3>
+			</div>
+
+			<div className="overflow-x-auto">
+				<div
+					className="grid gap-3 px-5 py-3 text-[var(--text-muted)] text-xs uppercase tracking-wider font-semibold"
+					style={{ gridTemplateColumns: "2fr 0.9fr 0.9fr 1fr 0.8fr 0.8fr 140px 40px" }}
+				>
+					<div>Model</div>
+					<div className="text-right">Requests</div>
+					<div className="text-right">Cost</div>
+					<div className="text-right">Tokens</div>
+					<div className="text-right">Tokens/s</div>
+					<div className="text-right">TTFT</div>
+					<div className="text-center">14d Trend</div>
+					<div />
+				</div>
+
+				<div className="max-h-[calc(100vh-300px)] overflow-y-auto">
+					{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 (
+							<div key={key} className="border-t border-[var(--border-subtle)]">
+								<button
+									type="button"
+									onClick={() => setExpandedKey(isExpanded ? null : key)}
+									className="w-full bg-transparent border-none text-left px-5 py-3 cursor-pointer hover:bg-[var(--bg-hover)] transition-colors"
+								>
+									<div
+										className="grid gap-3 items-center"
+										style={{ gridTemplateColumns: "2fr 0.9fr 0.9fr 1fr 0.8fr 0.8fr 140px 40px" }}
+									>
+										<div>
+											<div className="font-medium text-[var(--text-primary)]">{model.model}</div>
+											<div className="text-xs text-[var(--text-muted)]">{model.provider}</div>
+										</div>
+										<div className="text-right text-[var(--text-secondary)] font-mono text-sm">
+											{model.totalRequests.toLocaleString()}
+										</div>
+										<div className="text-right text-[var(--text-secondary)] font-mono text-sm">
+											${model.totalCost.toFixed(2)}
+										</div>
+										<div className="text-right text-[var(--text-secondary)] font-mono text-sm">
+											{(model.totalInputTokens + model.totalOutputTokens).toLocaleString()}
+										</div>
+										<div className="text-right text-[var(--text-secondary)] font-mono text-sm">
+											{model.avgTokensPerSecond?.toFixed(1) ?? "-"}
+										</div>
+										<div className="text-right text-[var(--text-secondary)] font-mono text-sm">
+											{model.avgTtft ? `${(model.avgTtft / 1000).toFixed(2)}s` : "-"}
+										</div>
+										<div className="h-10">
+											{trendData.length === 0 ? (
+												<div className="text-[var(--text-muted)] text-center text-sm">-</div>
+											) : (
+												<TrendChart data={trendData} color={trendColor} />
+											)}
+										</div>
+										<div className="flex justify-center text-[var(--text-muted)]">
+											{isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+										</div>
+									</div>
+								</button>
+
+								{isExpanded && (
+									<div className="px-5 py-4 bg-[var(--bg-elevated)] border-t border-[var(--border-subtle)]">
+										<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 ? (
+													<div className="h-full flex items-center justify-center text-[var(--text-muted)] text-sm">
+														No data available
+													</div>
+												) : (
+													<PerformanceChart data={trendData} color={trendColor} />
+												)}
+											</div>
+										</div>
+									</div>
+								)}
+							</div>
+						);
+					})}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function TrendChart({
+	data,
+	color,
+}: {
+	data: Array<{ timestamp: number; avgTokensPerSecond: number | null }>;
+	color: string;
+}) {
+	const chartData = {
+		labels: data.map(d => format(new Date(d.timestamp), "MMM d")),
+		datasets: [
+			{
+				data: data.map(d => d.avgTokensPerSecond ?? 0),
+				borderColor: color,
+				backgroundColor: "transparent",
+				tension: 0.4,
+				pointRadius: 0,
+				borderWidth: 2,
+			},
+		],
+	};
+
+	const options = {
+		responsive: true,
+		maintainAspectRatio: false,
+		plugins: { legend: { display: false }, tooltip: { enabled: false } },
+		scales: {
+			x: { display: false },
+			y: { display: false, min: 0 },
+		},
+	};
+
+	return <Line data={chartData} options={options} />;
+}
+
+function PerformanceChart({
+	data,
+	color,
+}: {
+	data: Array<{ timestamp: number; avgTtftSeconds: number | null; avgTokensPerSecond: number | null }>;
+	color: string;
+}) {
+	const chartData = {
+		labels: data.map(d => format(new Date(d.timestamp), "MMM d")),
+		datasets: [
+			{
+				label: "TTFT",
+				data: data.map(d => d.avgTtftSeconds ?? null),
+				borderColor: "#fbbf24",
+				backgroundColor: "transparent",
+				tension: 0.4,
+				pointRadius: 0,
+				borderWidth: 2,
+				yAxisID: "y" as const,
+			},
+			{
+				label: "Tokens/s",
+				data: data.map(d => d.avgTokensPerSecond ?? null),
+				borderColor: color,
+				backgroundColor: "transparent",
+				tension: 0.4,
+				pointRadius: 0,
+				borderWidth: 2,
+				yAxisID: "y1" as const,
+			},
+		],
+	};
+
+	const options = {
+		responsive: true,
+		maintainAspectRatio: false,
+		plugins: {
+			legend: {
+				display: true,
+				position: "top" as const,
+				labels: {
+					color: "var(--text-secondary)",
+					usePointStyle: true,
+					padding: 12,
+					font: { size: 10 },
+				},
+			},
+			tooltip: {
+				backgroundColor: "var(--bg-elevated)",
+				titleColor: "var(--text-primary)",
+				bodyColor: "var(--text-secondary)",
+				borderColor: "var(--border-default)",
+				borderWidth: 1,
+				cornerRadius: 8,
+			},
+		},
+		scales: {
+			x: {
+				grid: { color: "var(--border-subtle)" },
+				ticks: { color: "var(--text-muted)", font: { size: 10 } },
+			},
+			y: {
+				type: "linear" as const,
+				display: true,
+				position: "left" as const,
+				grid: { color: "var(--border-subtle)" },
+				ticks: { color: "var(--text-muted)", font: { size: 10 } },
+			},
+			y1: {
+				type: "linear" as const,
+				display: true,
+				position: "right" as const,
+				grid: { drawOnChartArea: false },
+				ticks: { color: "var(--text-muted)", font: { size: 10 } },
+			},
+		},
+	};
+
+	return <Line data={chartData} options={options} />;
+}
+
+function buildModelPerformanceLookup(points: ModelPerformancePoint[], days = 14): Map<string, ModelPerformanceSeries> {
+	const dayMs = 24 * 60 * 60 * 1000;
+	const maxTimestamp = points.reduce((max, point) => Math.max(max, point.timestamp), 0);
+	const anchor = maxTimestamp > 0 ? maxTimestamp : Math.floor(Date.now() / dayMs) * dayMs;
+	const start = anchor - (days - 1) * dayMs;
+	const buckets = Array.from({ length: days }, (_, index) => start + index * dayMs);
+	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;
+}