@oh-my-pi-zen/omp-stats 16.3.6-zen.1

package/src/client/routes/CostsRoute.tsx

@@ -0,0 +1,234 @@
+import type { Plugin } from "chart.js";
+import { useMemo, useState } from "react";
+import { Bar, Line } from "react-chartjs-2";
+import { getCostDashboardStats } from "../api";
+import {
+	barDatasetStyle,
+	buildAggregateTimeSeries,
+	buildSharedPlugins,
+	buildSharedScales,
+	buildTopNByModelSeries,
+	CHART_THEMES,
+	lineDatasetStyle,
+	MODEL_COLORS,
+	styleDatasets,
+} from "../components/chart-shared";
+import { formatCost } from "../data/formatters";
+import { useResource } from "../data/useResource";
+import { buildCostSummary } from "../data/view-models";
+import type { CostTimeSeriesPoint, TimeRange } from "../types";
+import { AsyncBoundary, Panel, SegmentedControl } from "../ui";
+import { useSystemTheme } from "../useSystemTheme";
+
+export interface CostsRouteProps {
+	active: boolean;
+	range: TimeRange;
+	refreshTrigger: number;
+}
+
+export function CostsRoute({ active, range, refreshTrigger }: CostsRouteProps) {
+	const {
+		data: costStats,
+		error,
+		loading,
+	} = useResource(["costs", range, refreshTrigger], signal => getCostDashboardStats(range, signal), {
+		pollMs: 30000,
+		enabled: active,
+	});
+
+	return (
+		<div className="stats-route-container space-y-6">
+			<AsyncBoundary loading={loading} error={error} data={costStats}>
+				{costStats && (
+					<>
+						<CostOverviewPanel costSeries={costStats.costSeries} />
+						<CostTrendPanel costSeries={costStats.costSeries} />
+					</>
+				)}
+			</AsyncBoundary>
+		</div>
+	);
+}
+
+function CostOverviewPanel({ costSeries }: { costSeries: CostTimeSeriesPoint[] }) {
+	const summary = useMemo(() => buildCostSummary(costSeries), [costSeries]);
+
+	const cards = [
+		{ label: "Total Cost", value: formatCost(summary.totalCost) },
+		{ label: "Average / Day", value: formatCost(summary.avgDailyCost) },
+		{
+			label: "Top Model",
+			value: summary.topModelName || "—",
+			sub: summary.topModelName ? formatCost(summary.topModelCost) : undefined,
+		},
+	];
+
+	return (
+		<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+			{cards.map(card => (
+				<Panel key={card.label} className="stats-cost-overview-card py-4 px-5">
+					<p className="text-xs stats-text-muted mb-1 font-medium uppercase tracking-wider">{card.label}</p>
+					<p className="text-2xl font-bold stats-text-primary truncate" title={card.value}>
+						{card.value}
+					</p>
+					{card.sub && <p className="text-xs stats-text-muted mt-1 font-medium">Total spent: {card.sub}</p>}
+				</Panel>
+			))}
+		</div>
+	);
+}
+
+const BAR_LABEL_COLORS = {
+	dark: "rgba(248, 250, 252, 0.7)",
+	light: "rgba(15, 23, 42, 0.6)",
+} as const;
+
+// Inline Chart.js plugin to draw cost value above bars
+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) {
+				// Accessing Chart.js internal parsed coordinates via unknown cast
+				const value = (bar as unknown as { $context: { parsed: { y: number } } }).$context.parsed.y;
+				if (!value) continue;
+				const label = `$${Math.round(value)}`;
+				// Accessing internal getProps for positioning via unknown cast
+				const { x, y } = bar.getProps(["x", "y"], true) as {
+					x: number;
+					y: number;
+				};
+				ctx.fillText(label, x, y - 3);
+			}
+			ctx.restore();
+		},
+	};
+}
+
+function CostTrendPanel({ costSeries }: { costSeries: CostTimeSeriesPoint[] }) {
+	const [byModel, setByModel] = useState(false);
+	const theme = useSystemTheme();
+	const chartTheme = CHART_THEMES[theme];
+
+	const chartData = useMemo(() => {
+		if (byModel) {
+			return buildTopNByModelSeries<CostTimeSeriesPoint, { total: number }>(costSeries, {
+				rankWeight: point => point.cost,
+				initBucket: () => ({ total: 0 }),
+				accumulate: (bucket, point) => {
+					bucket.total += point.cost;
+				},
+				bucketToValue: bucket => bucket.total,
+			});
+		}
+		return buildAggregateTimeSeries<CostTimeSeriesPoint, { total: number }>(costSeries, "Cost", {
+			initBucket: () => ({ total: 0 }),
+			accumulate: (bucket, point) => {
+				bucket.total += point.cost;
+			},
+			bucketToValue: bucket => bucket.total,
+		});
+	}, [costSeries, byModel]);
+
+	const sharedPlugins = useMemo(() => {
+		return buildSharedPlugins({
+			chartTheme,
+			showLegend: byModel,
+			defaultLabel: "Cost",
+			formatValue: v => `$${v.toFixed(2)}`,
+			footer: items => {
+				if (!byModel || items.length < 2) return undefined;
+				const total = items.reduce((sum, item) => sum + (item.parsed.y ?? 0), 0);
+				return `Total: $${total.toFixed(2)}`;
+			},
+		});
+	}, [chartTheme, byModel]);
+
+	const { sharedScaleBase, yScale } = useMemo(() => {
+		return buildSharedScales({
+			chartTheme,
+			formatY: v => `$${Math.round(v)}`,
+		});
+	}, [chartTheme]);
+
+	const barLabelPlugin = useMemo(() => {
+		return makeBarLabelPlugin(BAR_LABEL_COLORS[theme]);
+	}, [theme]);
+
+	const lineData = useMemo(() => {
+		if (!byModel) return null;
+		return {
+			labels: chartData.labels,
+			datasets: styleDatasets(chartData, i => lineDatasetStyle(MODEL_COLORS[i % MODEL_COLORS.length])),
+		};
+	}, [chartData, byModel]);
+
+	const lineOptions = useMemo(() => {
+		return {
+			responsive: true,
+			maintainAspectRatio: false,
+			interaction: { mode: "index" as const, intersect: false },
+			plugins: sharedPlugins,
+			scales: { x: sharedScaleBase, y: yScale },
+		};
+	}, [sharedPlugins, sharedScaleBase, yScale]);
+
+	const barData = useMemo(() => {
+		if (byModel) return null;
+		return {
+			labels: chartData.labels,
+			datasets: styleDatasets(chartData, i => barDatasetStyle(MODEL_COLORS[i % MODEL_COLORS.length])),
+		};
+	}, [chartData, byModel]);
+
+	const barOptions = useMemo(() => {
+		return {
+			responsive: true,
+			maintainAspectRatio: false,
+			interaction: { mode: "index" as const, intersect: false },
+			plugins: {
+				...sharedPlugins,
+				costBarLabels: {},
+			},
+			scales: {
+				x: { ...sharedScaleBase, stacked: true },
+				y: { ...yScale, stacked: true },
+			},
+			layout: { padding: { top: 24 } },
+		};
+	}, [sharedPlugins, sharedScaleBase, yScale]);
+
+	const toggleOptions = [
+		{ value: false, label: "All Models" },
+		{ value: true, label: "By Model" },
+	];
+
+	return (
+		<Panel
+			title="Daily Cost"
+			subtitle="API spending over time"
+			actions={<SegmentedControl options={toggleOptions} value={byModel} onChange={setByModel} />}
+		>
+			<div className="h-[300px]">
+				{chartData.labels.length === 0 ? (
+					<div className="h-full flex items-center justify-center text-stats-muted text-sm">
+						No cost data available
+					</div>
+				) : byModel && lineData ? (
+					<Line data={lineData} options={lineOptions} />
+				) : barData ? (
+					<Bar data={barData} options={barOptions} plugins={[barLabelPlugin]} />
+				) : null}
+			</div>
+		</Panel>
+	);
+}

package/src/client/routes/ErrorsRoute.tsx

@@ -0,0 +1,118 @@
+import { useMemo } from "react";
+import { getRecentErrors } from "../api";
+import { formatCost, formatInteger, formatRelativeTime } from "../data/formatters";
+import { useResource } from "../data/useResource";
+import type { MessageStats, TimeRange } from "../types";
+import { AsyncBoundary, DataTable, Panel, StatusPill } from "../ui";
+
+export interface ErrorsRouteProps {
+	active: boolean;
+	range: TimeRange;
+	refreshTrigger: number;
+	onRequestClick: (id: number) => void;
+}
+
+export function ErrorsRoute({ active, refreshTrigger, onRequestClick }: ErrorsRouteProps) {
+	const {
+		data: recentErrors,
+		error,
+		loading,
+	} = useResource(["recent-errors-dense", refreshTrigger], signal => getRecentErrors(50, signal), {
+		pollMs: 30000,
+		enabled: active,
+	});
+
+	const columns = useMemo(
+		() => [
+			{
+				key: "model",
+				header: "Model",
+				render: (item: MessageStats) => (
+					<div>
+						<div className="stats-font-medium stats-text-primary">{item.model}</div>
+						<div className="stats-text-xs stats-text-muted">{item.provider}</div>
+					</div>
+				),
+			},
+			{
+				key: "timestamp",
+				header: "Time",
+				render: (item: MessageStats) => formatRelativeTime(item.timestamp),
+			},
+			{
+				key: "errorMessage",
+				header: "Error Message",
+				render: (item: MessageStats) => (
+					<div
+						className="stats-text-xs stats-text-danger stats-truncate stats-max-w-md stats-font-mono"
+						title={item.errorMessage || ""}
+					>
+						{item.errorMessage || "Unknown error"}
+					</div>
+				),
+			},
+			{
+				key: "tokens",
+				header: "Tokens",
+				numeric: true,
+				render: (item: MessageStats) => formatInteger(item.usage.totalTokens),
+			},
+			{
+				key: "cost",
+				header: "Cost",
+				numeric: true,
+				render: (item: MessageStats) => formatCost(item.usage.cost.total, 4),
+			},
+		],
+		[],
+	);
+
+	const renderMobileCard = (item: MessageStats, onClick?: () => void) => (
+		<div className="stats-mobile-card stats-border-danger" onClick={onClick}>
+			<div className="stats-mobile-card-header">
+				<div>
+					<div className="stats-font-semibold stats-text-primary">{item.model}</div>
+					<div className="stats-text-xs stats-text-muted">{item.provider}</div>
+				</div>
+				<StatusPill variant="danger">Failed</StatusPill>
+			</div>
+			<div className="stats-mobile-card-grid">
+				<div>
+					<div className="stats-mobile-card-label">Time</div>
+					<div className="stats-mobile-card-value">{formatRelativeTime(item.timestamp)}</div>
+				</div>
+				<div>
+					<div className="stats-mobile-card-label">Cost</div>
+					<div className="stats-mobile-card-value">{formatCost(item.usage.cost.total, 4)}</div>
+				</div>
+				<div>
+					<div className="stats-mobile-card-label">Tokens</div>
+					<div className="stats-mobile-card-value">{formatInteger(item.usage.totalTokens)}</div>
+				</div>
+			</div>
+			{item.errorMessage && <div className="stats-mobile-card-error mt-2 stats-font-mono">{item.errorMessage}</div>}
+		</div>
+	);
+
+	return (
+		<div className="stats-route-container">
+			<Panel title="Recent Errors" subtitle="Up to 50 most recent failed requests in the stats database">
+				<AsyncBoundary
+					loading={loading}
+					error={error}
+					data={recentErrors}
+					emptyText="No recent failures in the local stats database"
+				>
+					<DataTable
+						columns={columns}
+						data={recentErrors || []}
+						keyExtractor={item => item.id || `${item.sessionFile}-${item.entryId}`}
+						onRowClick={item => item.id && onRequestClick(item.id)}
+						renderMobileCard={renderMobileCard}
+						emptyText="No recent failures in the local stats database"
+					/>
+				</AsyncBoundary>
+			</Panel>
+		</div>
+	);
+}

package/src/client/routes/GainRoute.tsx

@@ -0,0 +1,226 @@
+import { useMemo, useState } from "react";
+import { Line } from "react-chartjs-2";
+import { getGainDashboardStats } from "../api";
+import { buildSharedPlugins, buildSharedScales, CHART_THEMES, lineDatasetStyle } from "../components/chart-shared";
+import { formatBytes, formatCompact, formatInteger, formatPercent } from "../data/formatters";
+import { useResource } from "../data/useResource";
+import type { GainDashboardStats, GainSourceTotals, GainTimeSeriesPoint, TimeRange } from "../types";
+import { AsyncBoundary, Panel } from "../ui";
+import { useSystemTheme } from "../useSystemTheme";
+
+export interface GainRouteProps {
+	active: boolean;
+	range: TimeRange;
+	refreshTrigger: number;
+}
+
+export function GainRoute({ active, range, refreshTrigger }: GainRouteProps) {
+	const [project, setProject] = useState<string | null>(null);
+
+	const {
+		data: stats,
+		error,
+		loading,
+	} = useResource(["gain", range, refreshTrigger, project], signal => getGainDashboardStats(range, project, signal), {
+		pollMs: 30_000,
+		enabled: active,
+	});
+
+	return (
+		<div className="stats-route-container space-y-6">
+			<AsyncBoundary loading={loading} error={error} data={stats}>
+				{stats && (
+					<>
+						<GainProjectSelector projects={stats.projects} selected={project} onChange={setProject} />
+						<GainOverallPanel overall={stats.overall} />
+						<GainBySourcePanel bySource={stats.bySource} />
+						<GainTimeSeriesPanel timeSeries={stats.timeSeries} />
+					</>
+				)}
+			</AsyncBoundary>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Project selector
+// ---------------------------------------------------------------------------
+
+function GainProjectSelector({
+	projects,
+	selected,
+	onChange,
+}: {
+	projects: string[];
+	selected: string | null;
+	onChange: (p: string | null) => void;
+}) {
+	if (projects.length === 0) return null;
+	return (
+		<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+			<span className="stats-text-secondary" style={{ fontSize: "0.875rem", whiteSpace: "nowrap" }}>
+				Project
+			</span>
+			<select
+				className="stats-select"
+				value={selected ?? ""}
+				onChange={e => onChange(e.target.value || null)}
+				style={{ maxWidth: "480px", flex: 1 }}
+			>
+				<option value="">All projects</option>
+				{projects.map(p => (
+					<option key={p} value={p}>
+						{p}
+					</option>
+				))}
+			</select>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Overall metrics panel
+// ---------------------------------------------------------------------------
+
+function GainOverallPanel({ overall }: { overall: GainSourceTotals }) {
+	return (
+		<Panel title="Overall Gain" subtitle="Aggregate snapcompact savings">
+			<div className="stats-metric-primary-grid">
+				<div className="stats-metric-card primary">
+					<div className="stats-metric-label">Saved Tokens</div>
+					<div className="stats-metric-value">{formatCompact(overall.savedTokens)}</div>
+				</div>
+				<div className="stats-metric-card primary">
+					<div className="stats-metric-label">Saved Bytes</div>
+					<div className="stats-metric-value">{formatBytes(overall.savedBytes)}</div>
+				</div>
+				<div className="stats-metric-card primary">
+					<div className="stats-metric-label">Reduction</div>
+					<div className="stats-metric-value">
+						{overall.reductionPercent !== null ? formatPercent(overall.reductionPercent) : "—"}
+					</div>
+				</div>
+				<div className="stats-metric-card primary">
+					<div className="stats-metric-label">Total Hits</div>
+					<div className="stats-metric-value">{formatInteger(overall.hits)}</div>
+				</div>
+			</div>
+		</Panel>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// By-source breakdown panel
+// ---------------------------------------------------------------------------
+
+function SourceCard({ title, totals }: { title: string; totals: GainSourceTotals }) {
+	return (
+		<div className="stats-metric-card secondary" style={{ flex: 1 }}>
+			<div className="stats-metric-label" style={{ fontWeight: 600, marginBottom: 8 }}>
+				{title}
+			</div>
+			<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
+				<div>
+					<div className="stats-metric-label">Saved Tokens</div>
+					<div className="stats-metric-value" style={{ fontSize: "1rem" }}>
+						{formatCompact(totals.savedTokens)}
+					</div>
+				</div>
+				<div>
+					<div className="stats-metric-label">Saved Bytes</div>
+					<div className="stats-metric-value" style={{ fontSize: "1rem" }}>
+						{formatBytes(totals.savedBytes)}
+					</div>
+				</div>
+				<div>
+					<div className="stats-metric-label">Hits</div>
+					<div className="stats-metric-value" style={{ fontSize: "1rem" }}>
+						{formatInteger(totals.hits)}
+					</div>
+				</div>
+				<div>
+					<div className="stats-metric-label">Reduction</div>
+					<div className="stats-metric-value" style={{ fontSize: "1rem" }}>
+						{totals.reductionPercent !== null ? formatPercent(totals.reductionPercent) : "—"}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function GainBySourcePanel({ bySource }: { bySource: GainDashboardStats["bySource"] }) {
+	return (
+		<Panel title="By Source" subtitle="Savings breakdown per subsystem">
+			<div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
+				<SourceCard title="Snapcompact" totals={bySource.snapcompact} />
+			</div>
+		</Panel>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Time series chart (stacked area, daily)
+// ---------------------------------------------------------------------------
+
+const GAIN_COLORS = {
+	snapcompact: "rgb(34, 197, 94)",
+} as const;
+
+function GainTimeSeriesPanel({ timeSeries }: { timeSeries: GainTimeSeriesPoint[] }) {
+	const theme = useSystemTheme();
+	const chartTheme = CHART_THEMES[theme];
+
+	const { data, options } = useMemo(() => {
+		const labelFormatter = new Intl.DateTimeFormat(undefined, {
+			month: "short",
+			day: "numeric",
+			timeZone: "UTC",
+		});
+		const labels = timeSeries.map(p => labelFormatter.format(new Date(`${p.date}T00:00:00.000Z`)));
+		const chartData = {
+			labels,
+			datasets: [
+				{
+					label: "Snapcompact",
+					data: timeSeries.map(p => p.snapcompact),
+					...lineDatasetStyle(GAIN_COLORS.snapcompact),
+				},
+			],
+		};
+
+		const { sharedScaleBase, yScale } = buildSharedScales({
+			chartTheme,
+			formatY: n => formatCompact(n),
+		});
+
+		const chartOptions = {
+			responsive: true,
+			maintainAspectRatio: false,
+			plugins: buildSharedPlugins({
+				chartTheme,
+				showLegend: true,
+				defaultLabel: "Tokens Saved",
+				formatValue: formatCompact,
+			}),
+			scales: {
+				x: { ...sharedScaleBase, stacked: true },
+				y: { ...yScale, stacked: true },
+			},
+		};
+
+		return { data: chartData, options: chartOptions };
+	}, [timeSeries, chartTheme]);
+
+	return (
+		<Panel title="Savings Over Time" subtitle="Daily token savings">
+			<div style={{ height: 240 }}>
+				{timeSeries.length === 0 ? (
+					<div className="stats-table-empty">No time series data yet</div>
+				) : (
+					<Line data={data} options={options as Parameters<typeof Line>[0]["options"]} />
+				)}
+			</div>
+		</Panel>
+	);
+}