@gajae-code/stats 0.1.1

package/src/client/components/ChartsContainer.tsx

@@ -0,0 +1,221 @@
+import {
+	CategoryScale,
+	Chart as ChartJS,
+	Filler,
+	Legend,
+	LinearScale,
+	LineElement,
+	PointElement,
+	Title,
+	Tooltip,
+} from "chart.js";
+import { useMemo } from "react";
+import { Line } from "react-chartjs-2";
+import type { ModelTimeSeriesPoint, TimeRange } from "../types";
+import { useSystemTheme } from "../useSystemTheme";
+import { formatRangeTick, rangeMeta } from "./range-meta";
+
+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
+];
+
+const CHART_THEMES = {
+	dark: {
+		legendLabel: "#94a3b8",
+		tooltipBackground: "#16161e",
+		tooltipTitle: "#f8fafc",
+		tooltipBody: "#94a3b8",
+		tooltipBorder: "rgba(255, 255, 255, 0.1)",
+		grid: "rgba(255, 255, 255, 0.06)",
+		tick: "#64748b",
+	},
+	light: {
+		legendLabel: "#475569",
+		tooltipBackground: "#ffffff",
+		tooltipTitle: "#0f172a",
+		tooltipBody: "#334155",
+		tooltipBorder: "rgba(15, 23, 42, 0.18)",
+		grid: "rgba(15, 23, 42, 0.08)",
+		tick: "#64748b",
+	},
+} as const;
+interface ChartsContainerProps {
+	modelSeries: ModelTimeSeriesPoint[];
+	timeRange: TimeRange;
+}
+
+export function ChartsContainer({ modelSeries, timeRange }: ChartsContainerProps) {
+	const chartData = useMemo(() => buildModelPreferenceSeries(modelSeries), [modelSeries]);
+	const theme = useSystemTheme();
+	const chartTheme = CHART_THEMES[theme];
+	const meta = rangeMeta(timeRange);
+	const data = {
+		labels: chartData.data.map(d => formatRangeTick(d.timestamp, timeRange)),
+		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: chartTheme.legendLabel,
+					usePointStyle: true,
+					padding: 16,
+					font: { size: 12 },
+					boxWidth: 8,
+				},
+			},
+			tooltip: {
+				backgroundColor: chartTheme.tooltipBackground,
+				titleColor: chartTheme.tooltipTitle,
+				bodyColor: chartTheme.tooltipBody,
+				borderColor: chartTheme.tooltipBorder,
+				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: chartTheme.grid,
+					drawBorder: false,
+				},
+				ticks: {
+					color: chartTheme.tick,
+					font: { size: 11 },
+				},
+			},
+			y: {
+				grid: {
+					color: chartTheme.grid,
+					drawBorder: false,
+				},
+				ticks: {
+					color: chartTheme.tick,
+					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 {meta.windowLabel}</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, { model: string; provider: string; total: number }>();
+	for (const point of points) {
+		const key = `${point.model}::${point.provider}`;
+		const existing = totals.get(key);
+		if (existing) {
+			existing.total += point.requests;
+		} else {
+			totals.set(key, { model: point.model, provider: point.provider, total: point.requests });
+		}
+	}
+
+	const sorted = [...totals.entries()].map(([key, value]) => ({ key, ...value })).sort((a, b) => b.total - a.total);
+	const topEntries = sorted.slice(0, topN);
+	const topKeys = new Set(topEntries.map(entry => entry.key));
+
+	const topModelCounts = new Map<string, number>();
+	for (const entry of topEntries) {
+		topModelCounts.set(entry.model, (topModelCounts.get(entry.model) ?? 0) + 1);
+	}
+
+	const labelByKey = new Map<string, string>();
+	for (const entry of topEntries) {
+		const showProvider = (topModelCounts.get(entry.model) ?? 0) > 1;
+		labelByKey.set(entry.key, showProvider ? `${entry.model} (${entry.provider})` : entry.model);
+	}
+
+	const dataMap = new Map<number, Record<string, number>>();
+
+	for (const point of points) {
+		const key = `${point.model}::${point.provider}`;
+		const bucket = dataMap.get(point.timestamp) ?? { timestamp: point.timestamp, total: 0 };
+		bucket.total += point.requests;
+		const seriesLabel = topKeys.has(key) ? (labelByKey.get(key) ?? point.model) : "Other";
+		bucket[seriesLabel] = (bucket[seriesLabel] ?? 0) + point.requests;
+		dataMap.set(point.timestamp, bucket);
+	}
+
+	const series = topEntries.map(entry => labelByKey.get(entry.key) ?? entry.model);
+	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/CostChart.tsx

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

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

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