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

package/src/client/components/CostChart.tsx

@@ -1,171 +0,0 @@
-import {
-	BarElement,
-	CategoryScale,
-	Chart as ChartJS,
-	type ChartOptions,
-	Filler,
-	Legend,
-	LinearScale,
-	LineElement,
-	type Plugin,
-	PointElement,
-	Title,
-	Tooltip,
-} from "chart.js";
-import { useMemo, useState } from "react";
-import { Bar, Line } from "react-chartjs-2";
-import type { CostTimeSeriesPoint } from "../types";
-import { useSystemTheme } from "../useSystemTheme";
-import {
-	barDatasetStyle,
-	buildAggregateTimeSeries,
-	buildSharedPlugins,
-	buildSharedScales,
-	buildTopNByModelSeries,
-	CHART_THEMES,
-	ChartFrame,
-	type ChartSeries,
-	lineDatasetStyle,
-	MODEL_COLORS,
-	styleDatasets,
-} from "./chart-shared";
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend, Filler);
-
-/** Cost bar labels need a per-theme color that the generic chart theme doesn't carry. */
-const BAR_LABEL_COLORS = {
-	dark: "rgba(248, 250, 252, 0.7)",
-	light: "rgba(15, 23, 42, 0.6)",
-} as const;
-
-interface CostChartProps {
-	costSeries: CostTimeSeriesPoint[];
-}
-
-/** Inline Chart.js plugin — draws cost value centered above each bar. */
-function makeBarLabelPlugin(color: string): Plugin<"bar"> {
-	return {
-		id: "costBarLabels",
-		afterDatasetsDraw(chart) {
-			const { ctx } = chart;
-			const dataset = chart.data.datasets[0];
-			if (!dataset) return;
-			const meta = chart.getDatasetMeta(0);
-			ctx.save();
-			ctx.font = "11px system-ui, sans-serif";
-			ctx.fillStyle = color;
-			ctx.textAlign = "center";
-			ctx.textBaseline = "bottom";
-			for (const bar of meta.data) {
-				const value = (bar as unknown as { $context: { parsed: { y: number } } }).$context.parsed.y;
-				if (!value) continue;
-				const label = `$${Math.round(value)}`;
-				const { x, y } = bar.getProps(["x", "y"], true) as { x: number; y: number };
-				ctx.fillText(label, x, y - 3);
-			}
-			ctx.restore();
-		},
-	};
-}
-
-function buildAggregateSeries(points: CostTimeSeriesPoint[]): ChartSeries {
-	return buildAggregateTimeSeries<CostTimeSeriesPoint, { total: number }>(points, "Cost", {
-		initBucket: () => ({ total: 0 }),
-		accumulate: (bucket, point) => {
-			bucket.total += point.cost;
-		},
-		bucketToValue: bucket => bucket.total,
-	});
-}
-
-function buildByModelSeries(points: CostTimeSeriesPoint[]): ChartSeries {
-	// Rank models by total cost; per-day buckets are simple cost sums.
-	return buildTopNByModelSeries<CostTimeSeriesPoint, { total: number }>(points, {
-		rankWeight: point => point.cost,
-		initBucket: () => ({ total: 0 }),
-		accumulate: (bucket, point) => {
-			bucket.total += point.cost;
-		},
-		bucketToValue: bucket => bucket.total,
-	});
-}
-
-export function CostChart({ costSeries }: CostChartProps) {
-	const [byModel, setByModel] = useState(false);
-	const theme = useSystemTheme();
-	const chartTheme = CHART_THEMES[theme];
-
-	const chartData = useMemo(
-		() => (byModel ? buildByModelSeries(costSeries) : buildAggregateSeries(costSeries)),
-		[costSeries, byModel],
-	);
-
-	const sharedPlugins = buildSharedPlugins({
-		chartTheme,
-		showLegend: byModel,
-		defaultLabel: "Cost",
-		formatValue: v => `$${Math.round(v)}`,
-		footer: items => {
-			if (!byModel || items.length < 2) return undefined;
-			const total = items.reduce((sum, item) => sum + (item.parsed.y ?? 0), 0);
-			return `Total: $${Math.round(total)}`;
-		},
-	});
-
-	const { sharedScaleBase, yScale } = buildSharedScales({
-		chartTheme,
-		formatY: v => `$${Math.round(v)}`,
-	});
-
-	let chartNode: React.ReactNode;
-	if (byModel) {
-		const lineData = {
-			labels: chartData.labels,
-			datasets: styleDatasets(chartData, i => lineDatasetStyle(MODEL_COLORS[i % MODEL_COLORS.length])),
-		};
-
-		const lineOptions: ChartOptions<"line"> = {
-			responsive: true,
-			maintainAspectRatio: false,
-			interaction: { mode: "index", intersect: false },
-			plugins: sharedPlugins,
-			scales: { x: sharedScaleBase, y: yScale },
-		};
-
-		chartNode = <Line data={lineData} options={lineOptions} />;
-	} else {
-		const barData = {
-			labels: chartData.labels,
-			datasets: styleDatasets(chartData, i => barDatasetStyle(MODEL_COLORS[i % MODEL_COLORS.length])),
-		};
-
-		const barLabelPlugin = makeBarLabelPlugin(BAR_LABEL_COLORS[theme]);
-
-		const barOptions: ChartOptions<"bar"> = {
-			responsive: true,
-			maintainAspectRatio: false,
-			interaction: { mode: "index", intersect: false },
-			plugins: { ...sharedPlugins, costBarLabels: {} } as ChartOptions<"bar">["plugins"],
-			scales: {
-				x: { ...sharedScaleBase, stacked: true },
-				y: { ...yScale, stacked: true },
-			},
-			layout: { padding: { top: 24 } },
-		};
-
-		chartNode = <Bar data={barData} options={barOptions} plugins={[barLabelPlugin]} />;
-	}
-
-	return (
-		<ChartFrame
-			title="Daily Cost"
-			subtitle="API spending over time"
-			empty={chartData.labels.length === 0}
-			emptyMessage="No cost data available"
-			byModel={byModel}
-			onByModelChange={setByModel}
-		>
-			{chartNode}
-		</ChartFrame>
-	);
-}

package/src/client/components/CostSummary.tsx

@@ -1,53 +0,0 @@
-import type { CostTimeSeriesPoint } from "../types";
-
-interface CostSummaryProps {
-	costSeries: CostTimeSeriesPoint[];
-}
-
-function formatCost(value: number): string {
-	return `$${Math.round(value)}`;
-}
-
-export function CostSummary({ costSeries }: CostSummaryProps) {
-	const totalCost = costSeries.reduce((sum, p) => sum + p.cost, 0);
-	const dayBuckets = new Set(costSeries.map(p => p.timestamp)).size;
-	const avgDaily = dayBuckets > 0 ? totalCost / dayBuckets : 0;
-
-	// Most expensive model over the visible window
-	const modelTotals = new Map<string, number>();
-	for (const point of costSeries) {
-		modelTotals.set(point.model, (modelTotals.get(point.model) ?? 0) + point.cost);
-	}
-	let topModel = "";
-	let topModelCost = 0;
-	for (const [model, cost] of modelTotals) {
-		if (cost > topModelCost) {
-			topModel = model;
-			topModelCost = cost;
-		}
-	}
-
-	const cards = [
-		{ label: "Total", value: formatCost(totalCost) },
-		{ label: "Avg / day", value: formatCost(avgDaily) },
-		{
-			label: "Top model",
-			value: topModel || "—",
-			sub: topModel ? formatCost(topModelCost) : undefined,
-		},
-	];
-
-	return (
-		<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-			{cards.map(card => (
-				<div key={card.label} className="surface px-4 py-3">
-					<p className="text-xs text-[var(--text-muted)] mb-1">{card.label}</p>
-					<p className="text-lg font-semibold text-[var(--text-primary)] truncate" title={card.value}>
-						{card.value}
-					</p>
-					{card.sub && <p className="text-xs text-[var(--text-muted)] mt-0.5">{card.sub}</p>}
-				</div>
-			))}
-		</div>
-	);
-}

package/src/client/components/Header.tsx

@@ -1,72 +0,0 @@
-import { Activity, RefreshCw } from "lucide-react";
-import type { TimeRange } from "../types";
-
-type Tab = "overview" | "requests" | "errors" | "models" | "costs" | "behavior";
-
-const tabs: Tab[] = ["overview", "requests", "errors", "models", "costs", "behavior"];
-const timeRanges: { label: string; value: TimeRange }[] = [
-	{ label: "1h", value: "1h" },
-	{ label: "24h", value: "24h" },
-	{ label: "7d", value: "7d" },
-	{ label: "30d", value: "30d" },
-	{ label: "90d", value: "90d" },
-	{ label: "All", value: "all" },
-];
-
-interface HeaderProps {
-	activeTab: Tab;
-	onTabChange: (tab: Tab) => void;
-	onSync: () => void;
-	syncing: boolean;
-	timeRange: TimeRange;
-	onTimeRangeChange: (timeRange: TimeRange) => void;
-}
-
-export function Header({ activeTab, onTabChange, onSync, syncing, timeRange, onTimeRangeChange }: 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>
-				<div className="flex bg-[var(--bg-surface)] rounded-[var(--radius-md)] p-1 border border-[var(--border-subtle)]">
-					{timeRanges.map(range => (
-						<button
-							key={range.value}
-							type="button"
-							onClick={() => onTimeRangeChange(range.value)}
-							className={`tab-btn ${timeRange === range.value ? "active" : ""}`}
-							title={range.value === "all" ? "All time" : `Last ${range.label}`}
-						>
-							{range.label}
-						</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

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