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

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/omp-stats",
-	"version": "14.9.3",
+	"version": "14.9.5",
 	"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.5",
+		"@oh-my-pi/pi-utils": "14.9.5",
 		"@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,10 +17,11 @@ import {
 	getTimeSeries,
 	initDb,
 	insertMessageStats,
+	insertUserMessageStats,
 	setFileOffset,
 } from "./db";
 import { getSessionEntry, listAllSessionFiles, parseSessionFile } from "./parser";
-import type { DashboardStats, MessageStats, RequestDetails } from "./types";
+import type { BehaviorDashboardStats, DashboardStats, MessageStats, RequestDetails } from "./types";
 
 /**
  * Sync a single session file to the database.
@@ -42,16 +46,19 @@ async function syncSessionFile(sessionFile: string): Promise<number> {
 
 	// Parse file from last offset
 	const fromOffset = stored?.offset ?? 0;
-	const { stats, newOffset } = await parseSessionFile(sessionFile, fromOffset);
+	const { stats, userStats, newOffset } = await parseSessionFile(sessionFile, fromOffset);
 
 	if (stats.length > 0) {
 		insertMessageStats(stats);
 	}
+	if (userStats.length > 0) {
+		insertUserMessageStats(userStats);
+	}
 
 	// Update offset tracker
 	setFileOffset(sessionFile, newOffset, lastModified);
 
-	return stats.length;
+	return stats.length + userStats.length;
 }
 
 /**
@@ -76,20 +83,130 @@ export async function syncAllSessions(): Promise<{ processed: number; files: num
 	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(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 {
-		overall: getOverallStats(),
-		byModel: getStatsByModel(),
-		byFolder: getStatsByFolder(),
-		timeSeries: getTimeSeries(24),
-		modelSeries: getModelTimeSeries(14),
-		modelPerformanceSeries: getModelPerformanceSeries(14),
-		costSeries: getCostTimeSeries(90),
+		costSeries: getCostTimeSeries(costSeriesDays, cutoff),
 	};
 }
 export async function getRecentRequests(limit?: number): Promise<MessageStats[]> {
@@ -128,3 +245,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>;
+}