@oh-my-pi/omp-stats 17.1.1 → 17.1.2

package/src/client/routes/ProvidersRoute.tsx

@@ -0,0 +1,492 @@
+import { useMemo, useState } from "react";
+import { Bar } from "react-chartjs-2";
+import { getProviderDashboardStats } from "../api";
+import {
+	barDatasetStyle,
+	buildSharedPlugins,
+	buildSharedScales,
+	buildTopNByModelSeries,
+	CHART_THEMES,
+	MODEL_COLORS,
+	styleDatasets,
+} from "../components/chart-shared";
+import {
+	formatCompact,
+	formatCost,
+	formatInteger,
+	formatPercent,
+	formatRelativeTime,
+	formatTokensPerSecond,
+} from "../data/formatters";
+import { useResource } from "../data/useResource";
+import type {
+	ProviderAggregate,
+	ProviderDashboardStats,
+	ProviderHourlyPoint,
+	ProviderWindowInsight,
+	TimeRange,
+	UsageWindowSeries,
+} from "../types";
+import { AsyncBoundary, DataTable, type DataTableColumn, EmptyState, Panel, SegmentedControl } from "../ui";
+import { useSystemTheme } from "../useSystemTheme";
+
+export interface ProvidersRouteProps {
+	active: boolean;
+	range: TimeRange;
+	refreshTrigger: number;
+}
+
+export function ProvidersRoute({ active, range, refreshTrigger }: ProvidersRouteProps) {
+	const {
+		data: stats,
+		error,
+		loading,
+	} = useResource(["providers", range, refreshTrigger], signal => getProviderDashboardStats(range, signal), {
+		pollMs: 30000,
+		enabled: active,
+	});
+
+	return (
+		<div className="stats-route-container space-y-6">
+			<AsyncBoundary loading={loading} error={error} data={stats}>
+				{stats && (
+					<>
+						<ProviderTotalsPanel providers={stats.providers} />
+						<ProviderTrendPanel stats={stats} />
+						<PeakHoursPanel hourly={stats.hourly} providers={stats.providers} />
+						<WindowInsightsPanel insights={stats.windowInsights} />
+						<WindowUtilizationPanel usageSeries={stats.usageSeries} />
+					</>
+				)}
+			</AsyncBoundary>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Provider totals
+// ---------------------------------------------------------------------------
+
+function ProviderTotalsPanel({ providers }: { providers: ProviderAggregate[] }) {
+	const grandTotal = useMemo(() => providers.reduce((sum, p) => sum + p.totalTokens, 0), [providers]);
+
+	const columns: DataTableColumn<ProviderAggregate>[] = [
+		{ key: "provider", header: "Provider", render: p => <span className="font-medium">{p.provider}</span> },
+		{ key: "requests", header: "Requests", numeric: true, render: p => formatInteger(p.totalRequests) },
+		{
+			key: "errors",
+			header: "Error Rate",
+			numeric: true,
+			render: p => formatPercent(p.totalRequests > 0 ? p.failedRequests / p.totalRequests : 0),
+		},
+		{ key: "models", header: "Models", numeric: true, render: p => formatInteger(p.models) },
+		{
+			key: "tokens",
+			header: "Tokens",
+			numeric: true,
+			render: p => (
+				<span
+					title={`Input ${formatCompact(p.totalInputTokens)} · Output ${formatCompact(p.totalOutputTokens)} · Cache read ${formatCompact(p.totalCacheReadTokens)} · Cache write ${formatCompact(p.totalCacheWriteTokens)}`}
+				>
+					{formatCompact(p.totalTokens)}
+				</span>
+			),
+		},
+		{
+			key: "share",
+			header: "Share",
+			numeric: true,
+			render: p => formatPercent(grandTotal > 0 ? p.totalTokens / grandTotal : 0),
+		},
+		{ key: "cost", header: "Cost", numeric: true, render: p => formatCost(p.totalCost) },
+		{ key: "tps", header: "Tok/s", numeric: true, render: p => formatTokensPerSecond(p.avgTokensPerSecond) },
+	];
+
+	return (
+		<Panel title="Provider Totals" subtitle="Token, request, and cost totals per provider over the active range">
+			<DataTable
+				columns={columns}
+				data={providers}
+				keyExtractor={p => p.provider}
+				emptyText="No requests recorded in this range"
+			/>
+		</Panel>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Token / cost trend by provider
+// ---------------------------------------------------------------------------
+
+function ProviderTrendPanel({ stats }: { stats: ProviderDashboardStats }) {
+	const [metric, setMetric] = useState<"tokens" | "cost">("tokens");
+	const theme = useSystemTheme();
+	const chartTheme = CHART_THEMES[theme];
+
+	// buildTopNByModelSeries keys on `model`; feed it the provider name so we
+	// get the same top-N + "Other" rollup without a parallel implementation.
+	const chartData = useMemo(() => {
+		const points = stats.series.map(p => ({ ...p, model: p.provider }));
+		return buildTopNByModelSeries<(typeof points)[number], { total: number }>(points, {
+			topN: 6,
+			rankWeight: p => (metric === "tokens" ? p.totalTokens : p.cost),
+			initBucket: () => ({ total: 0 }),
+			accumulate: (bucket, p) => {
+				bucket.total += metric === "tokens" ? p.totalTokens : p.cost;
+			},
+			bucketToValue: bucket => bucket.total,
+		});
+	}, [stats.series, metric]);
+
+	const formatValue = metric === "tokens" ? formatCompact : (v: number) => formatCost(v);
+	const options = useMemo(() => {
+		const { sharedScaleBase, yScale } = buildSharedScales({ chartTheme, formatY: formatValue });
+		return {
+			responsive: true,
+			maintainAspectRatio: false,
+			interaction: { mode: "index" as const, intersect: false },
+			plugins: buildSharedPlugins({
+				chartTheme,
+				showLegend: true,
+				defaultLabel: metric === "tokens" ? "Tokens" : "Cost",
+				formatValue,
+				footer: items => {
+					if (items.length < 2) return undefined;
+					const total = items.reduce((sum, item) => sum + (item.parsed.y ?? 0), 0);
+					return `Total: ${formatValue(total)}`;
+				},
+			}),
+			scales: {
+				x: { ...sharedScaleBase, stacked: true },
+				y: { ...yScale, stacked: true },
+			},
+		};
+	}, [chartTheme, metric, formatValue]);
+
+	const data = useMemo(
+		() => ({
+			labels: chartData.labels,
+			datasets: styleDatasets(chartData, i => barDatasetStyle(MODEL_COLORS[i % MODEL_COLORS.length])),
+		}),
+		[chartData],
+	);
+
+	return (
+		<Panel
+			title="Burn by Provider"
+			subtitle="Stacked token/cost burn per provider over time"
+			actions={
+				<SegmentedControl
+					options={[
+						{ value: "tokens" as const, label: "Tokens" },
+						{ value: "cost" as const, label: "Cost" },
+					]}
+					value={metric}
+					onChange={setMetric}
+				/>
+			}
+		>
+			<div className="h-[300px]">
+				{chartData.labels.length === 0 ? (
+					<EmptyState message="No provider activity in this range" />
+				) : (
+					<Bar data={data} options={options} />
+				)}
+			</div>
+		</Panel>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Peak burn hours
+// ---------------------------------------------------------------------------
+
+const ALL_PROVIDERS = "__all__";
+
+function PeakHoursPanel({ hourly, providers }: { hourly: ProviderHourlyPoint[]; providers: ProviderAggregate[] }) {
+	const [provider, setProvider] = useState(ALL_PROVIDERS);
+	const theme = useSystemTheme();
+	const chartTheme = CHART_THEMES[theme];
+
+	const { tokensByHour, peakHour } = useMemo(() => {
+		const tokens = new Array<number>(24).fill(0);
+		for (const point of hourly) {
+			if (provider !== ALL_PROVIDERS && point.provider !== provider) continue;
+			tokens[point.hour] += point.totalTokens;
+		}
+		let peak = 0;
+		for (let hour = 1; hour < 24; hour++) {
+			if (tokens[hour] > tokens[peak]) peak = hour;
+		}
+		return { tokensByHour: tokens, peakHour: peak };
+	}, [hourly, provider]);
+
+	const hasData = tokensByHour.some(v => v > 0);
+
+	const data = useMemo(
+		() => ({
+			labels: Array.from({ length: 24 }, (_, hour) => `${String(hour).padStart(2, "0")}:00`),
+			datasets: [
+				{
+					label: "Tokens",
+					data: tokensByHour,
+					...barDatasetStyle(MODEL_COLORS[2]),
+					// Highlight the peak hour in the brand accent color.
+					backgroundColor: tokensByHour.map((_, hour) => (hour === peakHour ? MODEL_COLORS[0] : MODEL_COLORS[2])),
+				},
+			],
+		}),
+		[tokensByHour, peakHour],
+	);
+
+	const options = useMemo(() => {
+		const { sharedScaleBase, yScale } = buildSharedScales({ chartTheme, formatY: formatCompact });
+		return {
+			responsive: true,
+			maintainAspectRatio: false,
+			plugins: buildSharedPlugins({
+				chartTheme,
+				showLegend: false,
+				defaultLabel: "Tokens",
+				formatValue: formatCompact,
+			}),
+			scales: { x: sharedScaleBase, y: yScale },
+		};
+	}, [chartTheme]);
+
+	return (
+		<Panel
+			title="Peak Burn Hours"
+			subtitle={
+				hasData
+					? `Token burn by local hour of day — peak at ${String(peakHour).padStart(2, "0")}:00`
+					: "Token burn by local hour of day"
+			}
+			actions={
+				<select
+					className="stats-select"
+					value={provider}
+					onChange={e => setProvider(e.target.value)}
+					aria-label="Provider"
+				>
+					<option value={ALL_PROVIDERS}>All providers</option>
+					{providers.map(p => (
+						<option key={p.provider} value={p.provider}>
+							{p.provider}
+						</option>
+					))}
+				</select>
+			}
+		>
+			<div className="h-[260px]">
+				{hasData ? <Bar data={data} options={options} /> : <EmptyState message="No activity in this range" />}
+			</div>
+		</Panel>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Subscription window insights
+// ---------------------------------------------------------------------------
+
+function WindowInsightsPanel({ insights }: { insights: ProviderWindowInsight[] }) {
+	const columns: DataTableColumn<ProviderWindowInsight>[] = [
+		{ key: "provider", header: "Provider", render: i => <span className="font-medium">{i.provider}</span> },
+		{ key: "window", header: "Window", render: i => i.windowLabel },
+		{ key: "accounts", header: "Accounts", numeric: true, render: i => formatInteger(i.accounts) },
+		{
+			key: "consumed",
+			header: "Windows Burned",
+			numeric: true,
+			render: i => (
+				<span title="Subscription-window equivalents consumed in range (sum of used-fraction increases across accounts)">
+					{i.fractionConsumed.toFixed(2)}
+				</span>
+			),
+		},
+		{
+			key: "capacity",
+			header: "Est. Tokens / Window",
+			numeric: true,
+			render: i => (
+				<span title="Provider tokens burned in range ÷ windows burned — what one full window is worth">
+					{i.estTokensPerWindow !== null ? formatCompact(i.estTokensPerWindow) : "—"}
+				</span>
+			),
+		},
+		{
+			key: "peak",
+			header: "Peak Utilization",
+			numeric: true,
+			render: i => (
+				<span title="Peak of summed used fraction across accounts at any sampled instant">
+					{formatPercent(i.peakConcurrentFraction)}
+				</span>
+			),
+		},
+		{
+			key: "ideal",
+			header: "Ideal Accounts",
+			numeric: true,
+			render: i => (
+				<span
+					title="Accounts needed to keep peak demand under 90% of fleet capacity"
+					className={i.idealAccounts > i.accounts ? "stats-text-warning font-semibold" : undefined}
+				>
+					{formatInteger(i.idealAccounts)}
+					{i.idealAccounts > i.accounts ? ` (have ${i.accounts})` : ""}
+				</span>
+			),
+		},
+		{
+			key: "exhausted",
+			header: "Exhaustions",
+			numeric: true,
+			render: i => (
+				<span className={i.exhaustedEvents > 0 ? "stats-text-warning" : undefined}>
+					{formatInteger(i.exhaustedEvents)}
+				</span>
+			),
+		},
+	];
+
+	return (
+		<Panel
+			title="Subscription Windows"
+			subtitle="What each usage window buys you, and how many accounts peak demand needs"
+		>
+			<DataTable
+				columns={columns}
+				data={insights}
+				keyExtractor={i => `${i.provider}::${i.windowKey}`}
+				emptyText="No usage snapshots recorded yet — they accumulate whenever usage is fetched (TUI footer, /usage, omp usage)"
+			/>
+		</Panel>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Window utilization
+// ---------------------------------------------------------------------------
+
+const UTILIZATION_COLORS = {
+	ok: "#62d394",
+	warning: "#f5c14b",
+	exhausted: "#ff6b7d",
+} as const;
+
+function WindowUtilizationPanel({ usageSeries }: { usageSeries: UsageWindowSeries[] }) {
+	const providers = useMemo(() => [...new Set(usageSeries.map(s => s.provider))], [usageSeries]);
+	const [selected, setSelected] = useState<string | null>(null);
+	const provider = selected !== null && providers.includes(selected) ? selected : (providers[0] ?? null);
+	const theme = useSystemTheme();
+	const chartTheme = CHART_THEMES[theme];
+
+	// One row per (window, account): the latest recorded fraction. Snapshot
+	// history is bursty (rows appear whenever usage is fetched), so a "how full
+	// is each window right now" bar reads far better than a time axis.
+	const rows = useMemo(() => {
+		return usageSeries
+			.filter(s => s.provider === provider)
+			.map(s => {
+				const latest = [...s.points].reverse().find(p => p.usedFraction !== null);
+				return latest
+					? {
+							label: `${s.windowLabel} · ${s.accountLabel}`,
+							fraction: latest.usedFraction ?? 0,
+							exhausted: latest.exhausted,
+							recordedAt: latest.timestamp,
+						}
+					: null;
+			})
+			.filter(row => row !== null)
+			.sort((a, b) => b.fraction - a.fraction);
+	}, [usageSeries, provider]);
+
+	const data = useMemo(
+		() => ({
+			labels: rows.map(r => r.label),
+			datasets: [
+				{
+					label: "Used",
+					data: rows.map(r => r.fraction * 100),
+					backgroundColor: rows.map(r =>
+						r.exhausted
+							? UTILIZATION_COLORS.exhausted
+							: r.fraction >= 0.8
+								? UTILIZATION_COLORS.warning
+								: UTILIZATION_COLORS.ok,
+					),
+					borderWidth: 0,
+					borderRadius: 4,
+					barThickness: 18,
+				},
+			],
+		}),
+		[rows],
+	);
+
+	const options = useMemo(() => {
+		const { sharedScaleBase, yScale } = buildSharedScales({ chartTheme, formatY: v => `${Math.round(v)}%` });
+		const xMax = Math.max(100, ...rows.map(r => r.fraction * 100));
+		const shared = buildSharedPlugins({
+			chartTheme,
+			showLegend: false,
+			defaultLabel: "Used",
+			formatValue: v => `${v.toFixed(1)}%`,
+		});
+		return {
+			indexAxis: "y" as const,
+			responsive: true,
+			maintainAspectRatio: false,
+			plugins: {
+				...shared,
+				tooltip: {
+					...shared.tooltip,
+					callbacks: {
+						label: (ctx: { dataIndex: number; parsed: { x: number | null } }) => {
+							const row = rows[ctx.dataIndex];
+							const used = `${(ctx.parsed.x ?? 0).toFixed(1)}% used`;
+							return row ? `${used} · recorded ${formatRelativeTime(row.recordedAt)}` : used;
+						},
+					},
+				},
+			},
+			scales: {
+				x: { ...yScale, max: xMax },
+				y: { ...sharedScaleBase, grid: { display: false } },
+			},
+		};
+	}, [chartTheme, rows]);
+
+	return (
+		<Panel
+			title="Window Utilization"
+			subtitle="Latest recorded limit utilization per account and window — red bars are exhausted, amber above 80%"
+			actions={
+				providers.length > 1 ? (
+					<select
+						className="stats-select"
+						value={provider ?? ""}
+						onChange={e => setSelected(e.target.value)}
+						aria-label="Provider"
+					>
+						{providers.map(p => (
+							<option key={p} value={p}>
+								{p}
+							</option>
+						))}
+					</select>
+				) : undefined
+			}
+		>
+			<div style={{ height: Math.max(160, rows.length * 34 + 60) }}>
+				{rows.length === 0 ? (
+					<EmptyState message="No usage snapshots recorded yet — they accumulate whenever usage is fetched" />
+				) : (
+					<Bar data={data} options={options} />
+				)}
+			</div>
+		</Panel>
+	);
+}

package/src/client/routes/index.ts

@@ -5,5 +5,6 @@ export * from "./GainRoute";
 export * from "./ModelsRoute";
 export * from "./OverviewRoute";
 export * from "./ProjectsRoute";
+export * from "./ProvidersRoute";
 export * from "./RequestsRoute";
 export * from "./ToolsRoute";

package/src/client/styles.css

@@ -1172,6 +1172,7 @@
 .stats-text-primary { color: var(--text); }
 .stats-text-secondary { color: var(--muted); }
 .stats-text-muted { color: var(--dim); }
+.stats-text-warning { color: var(--warning); }
 .stats-text-xs { font-size: 12px; }
 .stats-font-medium { font-weight: 500; }
 .stats-font-semibold { font-weight: 600; }

package/src/db.ts

@@ -18,6 +18,9 @@ import type {
 	ModelPerformancePoint,
 	ModelStats,
 	ModelTimeSeriesPoint,
+	ProviderAggregate,
+	ProviderHourlyPoint,
+	ProviderTimeSeriesPoint,
 	TimeSeriesPoint,
 	ToolCallStats,
 	ToolModelStats,
@@ -723,6 +726,144 @@ export function getModelTimeSeries(
 	}));
 }
 
+/**
+ * Get request/token/cost totals grouped by provider.
+ */
+export function getStatsByProvider(cutoff?: number | null): ProviderAggregate[] {
+	if (!db) return [];
+
+	const hasCutoff = cutoff !== undefined && cutoff !== null && cutoff > 0;
+	const stmt = db.prepare(`
+		SELECT
+			provider,
+			COUNT(*) as total_requests,
+			SUM(CASE WHEN stop_reason = 'error' THEN 1 ELSE 0 END) as failed_requests,
+			COUNT(DISTINCT model) as models,
+			SUM(input_tokens) as total_input_tokens,
+			SUM(output_tokens) as total_output_tokens,
+			SUM(cache_read_tokens) as total_cache_read_tokens,
+			SUM(cache_write_tokens) as total_cache_write_tokens,
+			SUM(input_tokens + output_tokens + cache_read_tokens + cache_write_tokens) as total_tokens,
+			SUM(cost_total) as total_cost,
+			SUM(premium_requests) as total_premium_requests,
+			AVG(CASE WHEN duration > 0 THEN output_tokens * 1000.0 / duration ELSE NULL END) as avg_tokens_per_second
+		FROM messages
+		${hasCutoff ? "WHERE timestamp >= ?" : ""}
+		GROUP BY provider
+		ORDER BY total_tokens DESC
+	`);
+
+	const rows = (hasCutoff ? stmt.all(cutoff) : stmt.all()) as Array<{
+		provider: string;
+		total_requests: number;
+		failed_requests: number;
+		models: number;
+		total_input_tokens: number | null;
+		total_output_tokens: number | null;
+		total_cache_read_tokens: number | null;
+		total_cache_write_tokens: number | null;
+		total_tokens: number | null;
+		total_cost: number | null;
+		total_premium_requests: number | null;
+		avg_tokens_per_second: number | null;
+	}>;
+	return rows.map(row => ({
+		provider: row.provider,
+		totalRequests: row.total_requests,
+		failedRequests: row.failed_requests,
+		models: row.models,
+		totalInputTokens: row.total_input_tokens ?? 0,
+		totalOutputTokens: row.total_output_tokens ?? 0,
+		totalCacheReadTokens: row.total_cache_read_tokens ?? 0,
+		totalCacheWriteTokens: row.total_cache_write_tokens ?? 0,
+		totalTokens: row.total_tokens ?? 0,
+		totalCost: row.total_cost ?? 0,
+		totalPremiumRequests: row.total_premium_requests ?? 0,
+		avgTokensPerSecond: row.avg_tokens_per_second,
+	}));
+}
+
+/**
+ * Get token burn grouped by provider and local hour of day (0-23).
+ * Hours use the server's timezone — the dashboard is a localhost tool, so
+ * server-local and viewer-local time coincide.
+ */
+export function getProviderHourlyBurn(cutoff?: number | null): ProviderHourlyPoint[] {
+	if (!db) return [];
+
+	const hasCutoff = cutoff !== undefined && cutoff !== null && cutoff > 0;
+	const stmt = db.prepare(`
+		SELECT
+			provider,
+			CAST(strftime('%H', timestamp / 1000, 'unixepoch', 'localtime') AS INTEGER) as hour,
+			SUM(input_tokens + output_tokens + cache_read_tokens + cache_write_tokens) as total_tokens,
+			SUM(output_tokens) as output_tokens,
+			COUNT(*) as requests
+		FROM messages
+		${hasCutoff ? "WHERE timestamp >= ?" : ""}
+		GROUP BY provider, hour
+		ORDER BY provider, hour
+	`);
+
+	const rows = (hasCutoff ? stmt.all(cutoff) : stmt.all()) as Array<{
+		provider: string;
+		hour: number;
+		total_tokens: number | null;
+		output_tokens: number | null;
+		requests: number;
+	}>;
+	return rows.map(row => ({
+		provider: row.provider,
+		hour: row.hour,
+		totalTokens: row.total_tokens ?? 0,
+		outputTokens: row.output_tokens ?? 0,
+		requests: row.requests,
+	}));
+}
+
+/**
+ * Get token/cost time series grouped by provider (bucketed like the model series).
+ */
+export function getProviderTimeSeries(
+	days = 14,
+	cutoff?: number | null,
+	bucketMs = 24 * 60 * 60 * 1000,
+): ProviderTimeSeriesPoint[] {
+	if (!db) return [];
+
+	const hasCutoff = cutoff !== null;
+	const seriesCutoff = hasCutoff ? (cutoff ?? Date.now() - days * 24 * 60 * 60 * 1000) : 0;
+
+	const stmt = db.prepare(`
+		SELECT
+			(timestamp / ?) * ? as bucket,
+			provider,
+			SUM(input_tokens + output_tokens + cache_read_tokens + cache_write_tokens) as total_tokens,
+			SUM(cost_total) as cost,
+			COUNT(*) as requests
+		FROM messages
+		${hasCutoff ? "WHERE timestamp >= ?" : ""}
+		GROUP BY bucket, provider
+		ORDER BY bucket ASC
+	`);
+
+	const rowsRaw = hasCutoff ? stmt.all(bucketMs, bucketMs, seriesCutoff) : stmt.all(bucketMs, bucketMs);
+	const rows = rowsRaw as Array<{
+		bucket: number;
+		provider: string;
+		total_tokens: number | null;
+		cost: number | null;
+		requests: number;
+	}>;
+	return rows.map(row => ({
+		timestamp: row.bucket,
+		provider: row.provider,
+		totalTokens: row.total_tokens ?? 0,
+		cost: row.cost ?? 0,
+		requests: row.requests,
+	}));
+}
+
 /**
  * Get daily model performance time series data for the last N days.
  */

package/src/server.ts

@@ -10,6 +10,7 @@ import {
 	getDashboardStats,
 	getModelDashboardStats,
 	getOverviewStats,
+	getProviderDashboardStats,
 	getRecentErrors,
 	getRecentRequests,
 	getRequestDetails,
@@ -222,6 +223,11 @@ export async function handleApi(req: Request): Promise<Response> {
 		return Response.json(stats);
 	}
 
+	if (path === "/api/stats/providers") {
+		const stats = await getProviderDashboardStats(range);
+		return Response.json(stats);
+	}
+
 	if (path === "/api/stats/recent") {
 		const limit = url.searchParams.get("limit");
 		const stats = await getRecentRequests(limit ? parseInt(limit, 10) : undefined);