@oh-my-pi/omp-stats 14.9.3 → 14.9.7

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/omp-stats",
-	"version": "14.9.3",
+	"version": "14.9.7",
 	"description": "Local observability dashboard for pi AI usage statistics",
 	"homepage": "https://github.com/can1357/oh-my-pi",
 	"author": "Can Boluk",
@@ -37,22 +37,22 @@
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-ai": "14.9.3",
-		"@oh-my-pi/pi-utils": "14.9.3",
+		"@oh-my-pi/pi-ai": "14.9.7",
+		"@oh-my-pi/pi-utils": "14.9.7",
 		"@tailwindcss/node": "^4.2.4",
 		"chart.js": "^4.5.1",
 		"date-fns": "^4.1.0",
 		"lucide-react": "^1.14.0",
 		"react": "19.2.5",
 		"react-chartjs-2": "^5.3.1",
-		"react-dom": "19.2.5"
+		"react-dom": "19.2.5",
+		"tailwindcss": "^4.2.4"
 	},
 	"devDependencies": {
 		"@types/bun": "^1.3.13",
 		"@types/react": "^19.2.14",
 		"@types/react-dom": "^19.2.3",
-		"postcss": "^8.5.14",
-		"tailwindcss": "^4.2.4"
+		"postcss": "^8.5.14"
 	},
 	"engines": {
 		"bun": ">=1.3.7"

package/src/aggregator.ts

@@ -2,6 +2,9 @@ import * as fs from "node:fs";
 import {
 	getRecentErrors as dbGetRecentErrors,
 	getRecentRequests as dbGetRecentRequests,
+	getBehaviorByModel,
+	getBehaviorOverall,
+	getBehaviorTimeSeries,
 	getCostTimeSeries,
 	getFileOffset,
 	getMessageById,
@@ -14,82 +17,306 @@ import {
 	getTimeSeries,
 	initDb,
 	insertMessageStats,
+	insertUserMessageStats,
 	setFileOffset,
+	updateUserMessageLinks,
 } from "./db";
-import { getSessionEntry, listAllSessionFiles, parseSessionFile } from "./parser";
-import type { DashboardStats, MessageStats, RequestDetails } from "./types";
+import { getSessionEntry, listAllSessionFiles, type ParseSessionResult } from "./parser";
+import type { SyncWorkerRequest, SyncWorkerResponse } from "./sync-worker";
+// `with { type: "file" }` resolves to the worker's absolute path at runtime
+// (dev) and survives bundling (the asset is copied alongside the build).
+// tsgo doesn't recognize Bun's file-URL import attribute and would raise
+// TS1192/TS5097 here; Bun honors it. Same suppression pattern lives in
+// `tab-supervisor.ts` and `context-manager.ts`.
+// @ts-expect-error -- Bun file-URL import (see comment above).
+import syncWorkerUrl from "./sync-worker.ts" with { type: "file" };
+import type { BehaviorDashboardStats, DashboardStats, MessageStats, RequestDetails } from "./types";
 
 /**
- * Sync a single session file to the database.
- * Only processes new entries since the last sync.
+ * Apply a freshly parsed result to the database. Runs entirely on the
+ * main thread so the single SQLite handle owns every write.
  */
-async function syncSessionFile(sessionFile: string): Promise<number> {
-	// Get file stats
-	let fileStats: fs.Stats;
-	try {
-		fileStats = await fs.promises.stat(sessionFile);
-	} catch {
-		return 0;
-	}
+function applyParseResult(sessionFile: string, lastModified: number, result: ParseSessionResult): number {
+	if (result.stats.length > 0) insertMessageStats(result.stats);
+	if (result.userStats.length > 0) insertUserMessageStats(result.userStats);
+	if (result.userLinks.length > 0) updateUserMessageLinks(result.userLinks);
+	setFileOffset(sessionFile, result.newOffset, lastModified);
+	return result.stats.length + result.userStats.length;
+}
 
-	const lastModified = fileStats.mtimeMs;
+/**
+ * Progress event emitted after each session file is fully processed.
+ * `current` is the number of files completed (skipped + parsed),
+ * `total` is the size of the work set. `processed` is the running total
+ * of inserted rows.
+ */
+export interface SyncProgress {
+	current: number;
+	total: number;
+	processed: number;
+	sessionFile: string;
+}
 
-	// Check if file has changed since last sync
-	const stored = getFileOffset(sessionFile);
-	if (stored && stored.lastModified >= lastModified) {
-		return 0; // File hasn't changed
-	}
+export interface SyncOptions {
+	/** Called after each file completes. Synchronous; keep it cheap. */
+	onProgress?: (event: SyncProgress) => void;
+	/**
+	 * Worker pool size. Defaults to a sensible value derived from the host
+	 * (capped to avoid drowning a small machine in workers). Set to `1` to
+	 * force serial parsing without spawning workers.
+	 */
+	workers?: number;
+}
 
-	// Parse file from last offset
-	const fromOffset = stored?.offset ?? 0;
-	const { stats, newOffset } = await parseSessionFile(sessionFile, fromOffset);
+function defaultWorkerCount(): number {
+	// `navigator.hardwareConcurrency` is the portable answer in Bun; fall
+	// back to a small fixed pool if it's somehow unavailable.
+	const hw = typeof navigator !== "undefined" ? (navigator.hardwareConcurrency ?? 0) : 0;
+	const raw = hw > 0 ? hw : 4;
+	// Cap at 8 - parse is JSON-bound, and SQLite writes serialize on main
+	// thread anyway, so more workers stop helping.
+	return Math.min(8, Math.max(2, Math.floor(raw)));
+}
 
-	if (stats.length > 0) {
-		insertMessageStats(stats);
-	}
+interface WorkerHandle {
+	worker: Worker;
+	busy: boolean;
+	resolve: ((res: ParseSessionResult) => void) | null;
+	reject: ((err: Error) => void) | null;
+}
 
-	// Update offset tracker
-	setFileOffset(sessionFile, newOffset, lastModified);
+function spawnWorker(): WorkerHandle {
+	const worker = new Worker(syncWorkerUrl, { type: "module" });
+	const handle: WorkerHandle = { worker, busy: false, resolve: null, reject: null };
+	worker.onmessage = (event: MessageEvent<SyncWorkerResponse>) => {
+		const { resolve, reject } = handle;
+		handle.resolve = null;
+		handle.reject = null;
+		handle.busy = false;
+		if (!resolve || !reject) return;
+		if (event.data.ok) resolve(event.data.result);
+		else reject(new Error(event.data.error));
+	};
+	worker.onerror = (event: ErrorEvent) => {
+		const { reject } = handle;
+		handle.resolve = null;
+		handle.reject = null;
+		handle.busy = false;
+		reject?.(event.error instanceof Error ? event.error : new Error(event.message || "worker error"));
+	};
+	return handle;
+}
 
-	return stats.length;
+function dispatch(handle: WorkerHandle, request: SyncWorkerRequest): Promise<ParseSessionResult> {
+	if (handle.busy) {
+		return Promise.reject(new Error("worker is busy - this is a bug in the dispatcher"));
+	}
+	const { promise, resolve, reject } = Promise.withResolvers<ParseSessionResult>();
+	handle.busy = true;
+	handle.resolve = resolve;
+	handle.reject = reject;
+	handle.worker.postMessage(request);
+	return promise;
 }
 
 /**
  * Sync all session files to the database.
- * Returns the number of new entries processed.
+ *
+ * Parsing fans out across a worker pool (one in-flight job per worker)
+ * while DB writes and offset bookkeeping stay on the calling thread so the
+ * single SQLite handle stays uncontended. `onProgress` fires once per
+ * completed file (skipped files included so the bar walks at a steady
+ * rate).
  */
-export async function syncAllSessions(): Promise<{ processed: number; files: number }> {
+export async function syncAllSessions(opts?: SyncOptions): Promise<{ processed: number; files: number }> {
 	await initDb();
 
 	const files = await listAllSessionFiles();
+	if (files.length === 0) return { processed: 0, files: 0 };
+
 	let totalProcessed = 0;
 	let filesProcessed = 0;
+	let completed = 0;
+	let cursor = 0;
+
+	const poolSize = Math.max(1, Math.min(files.length, opts?.workers ?? defaultWorkerCount()));
+	const handles: WorkerHandle[] = [];
+	for (let i = 0; i < poolSize; i++) handles.push(spawnWorker());
+
+	const report = (sessionFile: string) => {
+		completed++;
+		opts?.onProgress?.({
+			current: completed,
+			total: files.length,
+			processed: totalProcessed,
+			sessionFile,
+		});
+	};
 
-	for (const file of files) {
-		const count = await syncSessionFile(file);
-		if (count > 0) {
-			totalProcessed += count;
-			filesProcessed++;
+	async function drain(handle: WorkerHandle): Promise<void> {
+		while (true) {
+			const idx = cursor++;
+			if (idx >= files.length) return;
+			const sessionFile = files[idx];
+
+			let fileStats: fs.Stats;
+			try {
+				fileStats = await fs.promises.stat(sessionFile);
+			} catch {
+				report(sessionFile);
+				continue;
+			}
+			const lastModified = fileStats.mtimeMs;
+			const stored = getFileOffset(sessionFile);
+			if (stored && stored.lastModified >= lastModified) {
+				report(sessionFile);
+				continue;
+			}
+
+			const fromOffset = stored?.offset ?? 0;
+			const result = await dispatch(handle, { sessionFile, fromOffset });
+			const inserted = applyParseResult(sessionFile, lastModified, result);
+			if (inserted > 0) {
+				totalProcessed += inserted;
+				filesProcessed++;
+			}
+			report(sessionFile);
 		}
 	}
 
+	try {
+		await Promise.all(handles.map(drain));
+	} finally {
+		for (const handle of handles) handle.worker.terminate();
+	}
+
 	return { processed: totalProcessed, files: filesProcessed };
 }
 
+const HOUR_MS = 60 * 60 * 1000;
+const DAY_MS = 24 * HOUR_MS;
+
+type TimeRange = "1h" | "24h" | "7d" | "30d" | "90d" | "all";
+
+interface TimeRangeConfig {
+	timeSeriesHours: number;
+	timeSeriesBucketMs: number;
+	modelSeriesDays: number;
+	modelPerformanceDays: number;
+	costSeriesDays: number;
+	cutoff: number | null;
+}
+
+const DEFAULT_TIME_RANGE: TimeRange = "24h";
+
+const TIME_RANGE_TO_CONFIG: Record<TimeRange, Omit<TimeRangeConfig, "cutoff">> = {
+	"1h": {
+		timeSeriesHours: 1,
+		timeSeriesBucketMs: HOUR_MS,
+		modelSeriesDays: 1,
+		modelPerformanceDays: 1,
+		costSeriesDays: 1,
+	},
+	"24h": {
+		timeSeriesHours: 24,
+		timeSeriesBucketMs: HOUR_MS,
+		modelSeriesDays: 1,
+		modelPerformanceDays: 1,
+		costSeriesDays: 1,
+	},
+	"7d": {
+		timeSeriesHours: 24 * 7,
+		timeSeriesBucketMs: DAY_MS,
+		modelSeriesDays: 7,
+		modelPerformanceDays: 7,
+		costSeriesDays: 7,
+	},
+	"30d": {
+		timeSeriesHours: 24 * 30,
+		timeSeriesBucketMs: DAY_MS,
+		modelSeriesDays: 30,
+		modelPerformanceDays: 30,
+		costSeriesDays: 30,
+	},
+	"90d": {
+		timeSeriesHours: 24 * 90,
+		timeSeriesBucketMs: DAY_MS,
+		modelSeriesDays: 90,
+		modelPerformanceDays: 90,
+		costSeriesDays: 90,
+	},
+	all: {
+		timeSeriesHours: 24 * 3650,
+		timeSeriesBucketMs: DAY_MS,
+		modelSeriesDays: 3650,
+		modelPerformanceDays: 3650,
+		costSeriesDays: 3650,
+	},
+};
+
+function getTimeRangeConfig(range?: string | null): TimeRangeConfig {
+	const normalized = range?.trim().toLowerCase() ?? DEFAULT_TIME_RANGE;
+	const config = TIME_RANGE_TO_CONFIG[normalized as TimeRange];
+	if (config) {
+		const cutoff = normalized === "all" ? null : Date.now() - Math.max(1, config.timeSeriesHours * 60 * 60 * 1000);
+		return { ...config, cutoff };
+	}
+
+	const fallbackConfig = TIME_RANGE_TO_CONFIG[DEFAULT_TIME_RANGE];
+	return {
+		...fallbackConfig,
+		cutoff: Date.now() - fallbackConfig.timeSeriesHours * 60 * 60 * 1000,
+	};
+}
+
 /**
  * Get all dashboard stats.
  */
-export async function getDashboardStats(): Promise<DashboardStats> {
+export async function getDashboardStats(range?: string | null): Promise<DashboardStats> {
 	await initDb();
+	const { timeSeriesHours, timeSeriesBucketMs, modelSeriesDays, modelPerformanceDays, costSeriesDays, cutoff } =
+		getTimeRangeConfig(range);
 
 	return {
-		overall: getOverallStats(),
-		byModel: getStatsByModel(),
-		byFolder: getStatsByFolder(),
-		timeSeries: getTimeSeries(24),
-		modelSeries: getModelTimeSeries(14),
-		modelPerformanceSeries: getModelPerformanceSeries(14),
-		costSeries: getCostTimeSeries(90),
+		overall: getOverallStats(cutoff ?? undefined),
+		byModel: getStatsByModel(cutoff ?? undefined),
+		byFolder: getStatsByFolder(cutoff ?? undefined),
+		timeSeries: getTimeSeries(timeSeriesHours, cutoff, timeSeriesBucketMs),
+		modelSeries: getModelTimeSeries(modelSeriesDays, cutoff),
+		modelPerformanceSeries: getModelPerformanceSeries(modelPerformanceDays, cutoff),
+		costSeries: getCostTimeSeries(costSeriesDays, cutoff),
+	};
+}
+
+export async function getOverviewStats(range?: string | null): Promise<Pick<DashboardStats, "overall" | "timeSeries">> {
+	await initDb();
+	const { timeSeriesHours, timeSeriesBucketMs, cutoff } = getTimeRangeConfig(range);
+
+	return {
+		overall: getOverallStats(cutoff ?? undefined),
+		timeSeries: getTimeSeries(timeSeriesHours, cutoff, timeSeriesBucketMs),
+	};
+}
+
+export async function getModelDashboardStats(
+	range?: string | null,
+): Promise<Pick<DashboardStats, "byModel" | "modelSeries" | "modelPerformanceSeries">> {
+	await initDb();
+	const { modelSeriesDays, modelPerformanceDays, cutoff } = getTimeRangeConfig(range);
+
+	return {
+		byModel: getStatsByModel(cutoff ?? undefined),
+		modelSeries: getModelTimeSeries(modelSeriesDays, cutoff),
+		modelPerformanceSeries: getModelPerformanceSeries(modelPerformanceDays, cutoff),
+	};
+}
+
+export async function getCostDashboardStats(range?: string | null): Promise<Pick<DashboardStats, "costSeries">> {
+	await initDb();
+	const { costSeriesDays, cutoff } = getTimeRangeConfig(range);
+
+	return {
+		costSeries: getCostTimeSeries(costSeriesDays, cutoff),
 	};
 }
 export async function getRecentRequests(limit?: number): Promise<MessageStats[]> {
@@ -128,3 +355,13 @@ export async function getTotalMessageCount(): Promise<number> {
 	await initDb();
 	return getMessageCount();
 }
+
+export async function getBehaviorDashboardStats(range?: string | null): Promise<BehaviorDashboardStats> {
+	await initDb();
+	const { cutoff } = getTimeRangeConfig(range);
+	return {
+		overall: getBehaviorOverall(cutoff),
+		byModel: getBehaviorByModel(cutoff),
+		behaviorSeries: getBehaviorTimeSeries(cutoff),
+	};
+}

package/src/client/App.tsx

@@ -1,5 +1,16 @@
 import { useCallback, useEffect, useState } from "react";
-import { getRecentErrors, getRecentRequests, getStats, sync } from "./api";
+import {
+	getBehaviorDashboardStats,
+	getCostDashboardStats,
+	getModelDashboardStats,
+	getOverviewStats,
+	getRecentErrors,
+	getRecentRequests,
+	sync,
+} from "./api";
+import { BehaviorChart } from "./components/BehaviorChart";
+import { BehaviorModelsTable } from "./components/BehaviorModelsTable";
+import { BehaviorSummary } from "./components/BehaviorSummary";
 import { ChartsContainer } from "./components/ChartsContainer";
 import { CostChart } from "./components/CostChart";
 import { CostSummary } from "./components/CostSummary";
@@ -8,64 +19,102 @@ import { ModelsTable } from "./components/ModelsTable";
 import { RequestDetail } from "./components/RequestDetail";
 import { RequestList } from "./components/RequestList";
 import { StatsGrid } from "./components/StatsGrid";
-import type { DashboardStats, MessageStats } from "./types";
+import type {
+	BehaviorDashboardStats,
+	CostDashboardStats,
+	MessageStats,
+	ModelDashboardStats,
+	OverviewStats,
+	TimeRange,
+} from "./types";
 
-type Tab = "overview" | "requests" | "errors" | "models" | "costs";
+type Tab = "overview" | "requests" | "errors" | "models" | "costs" | "behavior";
 
 export default function App() {
-	const [stats, setStats] = useState<DashboardStats | null>(null);
+	const [overviewStats, setOverviewStats] = useState<OverviewStats | null>(null);
+	const [modelStats, setModelStats] = useState<ModelDashboardStats | null>(null);
+	const [costStats, setCostStats] = useState<CostDashboardStats | null>(null);
+	const [behaviorStats, setBehaviorStats] = useState<BehaviorDashboardStats | null>(null);
 	const [recentRequests, setRecentRequests] = useState<MessageStats[]>([]);
 	const [recentErrors, setRecentErrors] = useState<MessageStats[]>([]);
 	const [selectedRequest, setSelectedRequest] = useState<number | null>(null);
 	const [syncing, setSyncing] = useState(false);
 	const [activeTab, setActiveTab] = useState<Tab>("overview");
+	const [timeRange, setTimeRange] = useState<TimeRange>("24h");
 
-	const loadData = useCallback(async () => {
+	const loadRecentLists = useCallback(async () => {
 		try {
-			const [s, r, e] = await Promise.all([getStats(), getRecentRequests(50), getRecentErrors(50)]);
-			setStats(s);
-			setRecentRequests(r);
-			setRecentErrors(e);
+			const [requests, errors] = await Promise.all([getRecentRequests(50), getRecentErrors(50)]);
+			setRecentRequests(requests);
+			setRecentErrors(errors);
 		} catch (err) {
 			console.error(err);
 		}
 	}, []);
 
+	const loadActiveTabStats = useCallback(async () => {
+		try {
+			if (activeTab === "models") {
+				setModelStats(await getModelDashboardStats(timeRange));
+				return;
+			}
+			if (activeTab === "costs") {
+				setCostStats(await getCostDashboardStats(timeRange));
+				return;
+			}
+			if (activeTab === "behavior") {
+				setBehaviorStats(await getBehaviorDashboardStats(timeRange));
+				return;
+			}
+			if (activeTab === "overview") {
+				setOverviewStats(await getOverviewStats(timeRange));
+			}
+		} catch (err) {
+			console.error(err);
+		}
+	}, [activeTab, timeRange]);
+
 	const handleSync = async () => {
 		setSyncing(true);
 		try {
 			await sync();
-			await loadData();
+			await Promise.all([loadActiveTabStats(), loadRecentLists()]);
 		} finally {
 			setSyncing(false);
 		}
 	};
 
 	useEffect(() => {
-		loadData();
-		const interval = setInterval(loadData, 30000);
+		loadRecentLists();
+		const interval = setInterval(loadRecentLists, 30000);
 		return () => clearInterval(interval);
-	}, [loadData]);
-
-	if (!stats) {
-		return (
-			<div className="min-h-screen flex items-center justify-center">
-				<div className="flex items-center gap-3 text-[var(--text-muted)]">
-					<div className="w-5 h-5 border-2 border-[var(--border-default)] border-t-[var(--accent-cyan)] rounded-full spin" />
-					<span className="text-sm">Loading analytics...</span>
-				</div>
-			</div>
-		);
-	}
+	}, [loadRecentLists]);
+
+	useEffect(() => {
+		loadActiveTabStats();
+		const interval = setInterval(loadActiveTabStats, 30000);
+		return () => clearInterval(interval);
+	}, [loadActiveTabStats]);
 
 	return (
 		<div className="min-h-screen">
 			<div className="max-w-[1600px] mx-auto px-6 py-6">
-				<Header activeTab={activeTab} onTabChange={setActiveTab} onSync={handleSync} syncing={syncing} />
+				<Header
+					activeTab={activeTab}
+					onTabChange={setActiveTab}
+					onSync={handleSync}
+					syncing={syncing}
+					timeRange={timeRange}
+					onTimeRangeChange={setTimeRange}
+				/>
 
 				{activeTab === "overview" && (
 					<div className="space-y-6 animate-fade-in">
-						<StatsGrid stats={stats.overall} />
+						{overviewStats ? (
+							<StatsGrid stats={overviewStats.overall} />
+						) : (
+							<LoadingState label="Loading overview..." />
+						)}
 
 						<div className="grid lg:grid-cols-2 gap-6">
 							<RequestList
@@ -104,15 +153,50 @@ export default function App() {
 
 				{activeTab === "models" && (
 					<div className="space-y-6 animate-fade-in">
-						<ChartsContainer modelSeries={stats.modelSeries} />
-						<ModelsTable models={stats.byModel} performanceSeries={stats.modelPerformanceSeries} />
+						{modelStats ? (
+							<>
+								<ChartsContainer modelSeries={modelStats.modelSeries} />
+								<ModelsTable
+									models={modelStats.byModel}
+									performanceSeries={modelStats.modelPerformanceSeries}
+								/>
+							</>
+						) : (
+							<LoadingState label="Loading models..." />
+						)}
 					</div>
 				)}
 
 				{activeTab === "costs" && (
 					<div className="space-y-6 animate-fade-in">
-						<CostSummary costSeries={stats.costSeries} />
-						<CostChart costSeries={stats.costSeries} />
+						{costStats ? (
+							<>
+								<CostSummary costSeries={costStats.costSeries} />
+								<CostChart costSeries={costStats.costSeries} />
+							</>
+						) : (
+							<LoadingState label="Loading costs..." />
+						)}
+					</div>
+				)}
+
+				{activeTab === "behavior" && (
+					<div className="space-y-6 animate-fade-in">
+						{behaviorStats ? (
+							<>
+								<BehaviorSummary
+									overall={behaviorStats.overall}
+									behaviorSeries={behaviorStats.behaviorSeries}
+								/>
+								<BehaviorChart behaviorSeries={behaviorStats.behaviorSeries} />
+								<BehaviorModelsTable
+									models={behaviorStats.byModel}
+									behaviorSeries={behaviorStats.behaviorSeries}
+								/>
+							</>
+						) : (
+							<LoadingState label="Loading behavior..." />
+						)}
 					</div>
 				)}
 
@@ -123,3 +207,14 @@ export default function App() {
 		</div>
 	);
 }
+
+function LoadingState({ label }: { label: string }) {
+	return (
+		<div className="min-h-[180px] flex items-center justify-center">
+			<div className="flex items-center gap-3 text-[var(--text-muted)]">
+				<div className="w-5 h-5 border-2 border-[var(--border-default)] border-t-[var(--accent-cyan)] rounded-full spin" />
+				<span className="text-sm">{label}</span>
+			</div>
+		</div>
+	);
+}

package/src/client/api.ts

@@ -1,13 +1,39 @@
-import type { DashboardStats, MessageStats, RequestDetails } from "./types";
+import type {
+	BehaviorDashboardStats,
+	CostDashboardStats,
+	DashboardStats,
+	MessageStats,
+	ModelDashboardStats,
+	OverviewStats,
+	RequestDetails,
+} from "./types";
 
 const API_BASE = "/api";
 
-export async function getStats(): Promise<DashboardStats> {
-	const res = await fetch(`${API_BASE}/stats`);
+export async function getStats(range = "24h"): Promise<DashboardStats> {
+	const res = await fetch(`${API_BASE}/stats?range=${encodeURIComponent(range)}`);
 	if (!res.ok) throw new Error("Failed to fetch stats");
 	return res.json() as Promise<DashboardStats>;
 }
 
+export async function getOverviewStats(range = "24h"): Promise<OverviewStats> {
+	const res = await fetch(`${API_BASE}/stats/overview?range=${encodeURIComponent(range)}`);
+	if (!res.ok) throw new Error("Failed to fetch overview stats");
+	return res.json() as Promise<OverviewStats>;
+}
+
+export async function getModelDashboardStats(range = "24h"): Promise<ModelDashboardStats> {
+	const res = await fetch(`${API_BASE}/stats/model-dashboard?range=${encodeURIComponent(range)}`);
+	if (!res.ok) throw new Error("Failed to fetch model stats");
+	return res.json() as Promise<ModelDashboardStats>;
+}
+
+export async function getCostDashboardStats(range = "24h"): Promise<CostDashboardStats> {
+	const res = await fetch(`${API_BASE}/stats/costs?range=${encodeURIComponent(range)}`);
+	if (!res.ok) throw new Error("Failed to fetch cost stats");
+	return res.json() as Promise<CostDashboardStats>;
+}
+
 export async function getRecentRequests(limit = 50): Promise<MessageStats[]> {
 	const res = await fetch(`${API_BASE}/stats/recent?limit=${limit}`);
 	if (!res.ok) throw new Error("Failed to fetch recent requests");
@@ -31,3 +57,9 @@ export async function sync(): Promise<any> {
 	if (!res.ok) throw new Error("Failed to sync");
 	return res.json();
 }
+
+export async function getBehaviorDashboardStats(range = "24h"): Promise<BehaviorDashboardStats> {
+	const res = await fetch(`${API_BASE}/stats/behavior?range=${encodeURIComponent(range)}`);
+	if (!res.ok) throw new Error("Failed to fetch behavior stats");
+	return res.json() as Promise<BehaviorDashboardStats>;
+}