@linxiraos/pi-stats 1.0.0

package/src/client/App.tsx

@@ -0,0 +1,112 @@
+import { useCallback, useRef, useState } from "react";
+import { AppLayout } from "./app/AppLayout";
+import type { DashboardSection } from "./app/routes";
+import { useHashRoute } from "./data/useHashRoute";
+import {
+	BehaviorRoute,
+	CostsRoute,
+	ErrorsRoute,
+	GainRoute,
+	ModelsRoute,
+	OverviewRoute,
+	ProjectsRoute,
+	ProvidersRoute,
+	RequestsRoute,
+	ToolsRoute,
+} from "./routes";
+import { RequestDrawer } from "./ui/RequestDrawer";
+
+export default function App() {
+	const { section, setSection, range, setRange } = useHashRoute();
+	const [refreshTrigger, setRefreshTrigger] = useState(0);
+	const [selectedRequestId, setSelectedRequestId] = useState<number | null>(null);
+	const [updatedAt, setUpdatedAt] = useState<number | null>(() => Date.now());
+
+	const handleSyncComplete = useCallback((result: { success: boolean }) => {
+		if (result.success) {
+			setRefreshTrigger(prev => prev + 1);
+			setUpdatedAt(Date.now());
+		}
+	}, []);
+
+	// Stable identity so the drawer's effects don't tear down on every App render.
+	const closeDrawer = useCallback(() => setSelectedRequestId(null), []);
+
+	const active = section;
+
+	// Keep every visited section mounted and just toggle visibility. Remounting a
+	// route on each navigation replays the chart entry animations (a visible
+	// flicker); keeping it alive makes revisits instant while the live chart
+	// instances still animate in place on data/range updates. Only the active
+	// route fetches/polls (enabled), so hidden routes don't keep hitting the API.
+	const mountedRef = useRef<Set<DashboardSection>>(new Set());
+	mountedRef.current.add(active);
+
+	const renderRoute = (target: DashboardSection) => {
+		const isActive = target === active;
+		switch (target) {
+			case "overview":
+				return (
+					<OverviewRoute
+						active={isActive}
+						range={range}
+						refreshTrigger={refreshTrigger}
+						onRequestClick={setSelectedRequestId}
+					/>
+				);
+			case "requests":
+				return (
+					<RequestsRoute
+						active={isActive}
+						range={range}
+						refreshTrigger={refreshTrigger}
+						onRequestClick={setSelectedRequestId}
+					/>
+				);
+			case "errors":
+				return (
+					<ErrorsRoute
+						active={isActive}
+						range={range}
+						refreshTrigger={refreshTrigger}
+						onRequestClick={setSelectedRequestId}
+					/>
+				);
+			case "models":
+				return <ModelsRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
+			case "providers":
+				return <ProvidersRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
+			case "tools":
+				return <ToolsRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
+			case "costs":
+				return <CostsRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
+			case "behavior":
+				return <BehaviorRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
+			case "projects":
+				return <ProjectsRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
+			case "gain":
+				return <GainRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
+		}
+	};
+
+	return (
+		<>
+			<AppLayout
+				activeSection={active}
+				onSectionChange={setSection}
+				range={range}
+				onRangeChange={setRange}
+				updatedAt={updatedAt}
+				onSyncComplete={handleSyncComplete}
+			>
+				{[...mountedRef.current].map(target => (
+					<div key={target} hidden={target !== active}>
+						{renderRoute(target)}
+					</div>
+				))}
+			</AppLayout>
+
+			<RequestDrawer id={selectedRequestId} onClose={closeDrawer} />
+		</>
+	);
+}

package/src/client/api.ts

@@ -0,0 +1,118 @@
+import type {
+	BehaviorDashboardStats,
+	CostDashboardStats,
+	FolderStats,
+	GainDashboardStats,
+	MessageStats,
+	ModelDashboardStats,
+	OverviewStats,
+	ProviderDashboardStats,
+	RequestDetails,
+	TimeRange,
+	ToolDashboardStats,
+} from "./types";
+
+const API_BASE = "/api";
+
+export class ApiError extends Error {
+	status: number;
+	endpoint: string;
+
+	constructor(status: number, endpoint: string, message: string) {
+		super(message);
+		this.name = "ApiError";
+		this.status = status;
+		this.endpoint = endpoint;
+	}
+}
+
+async function fetchJson<T>(endpoint: string, options?: RequestInit): Promise<T> {
+	const res = await fetch(endpoint, options);
+	if (!res.ok) {
+		throw new ApiError(res.status, endpoint, `HTTP error ${res.status} on ${endpoint}`);
+	}
+	return res.json() as Promise<T>;
+}
+
+export async function getOverviewStats(range: TimeRange = "24h", signal?: AbortSignal): Promise<OverviewStats> {
+	return fetchJson<OverviewStats>(`${API_BASE}/stats/overview?range=${encodeURIComponent(range)}`, {
+		signal,
+	});
+}
+
+export async function getModelDashboardStats(
+	range: TimeRange = "24h",
+	signal?: AbortSignal,
+): Promise<ModelDashboardStats> {
+	return fetchJson<ModelDashboardStats>(`${API_BASE}/stats/model-dashboard?range=${encodeURIComponent(range)}`, {
+		signal,
+	});
+}
+
+export async function getCostDashboardStats(
+	range: TimeRange = "24h",
+	signal?: AbortSignal,
+): Promise<CostDashboardStats> {
+	return fetchJson<CostDashboardStats>(`${API_BASE}/stats/costs?range=${encodeURIComponent(range)}`, { signal });
+}
+
+export async function getRecentRequests(limit = 50, signal?: AbortSignal): Promise<MessageStats[]> {
+	return fetchJson<MessageStats[]>(`${API_BASE}/stats/recent?limit=${limit}`, { signal });
+}
+
+export async function getRecentErrors(
+	range: TimeRange = "24h",
+	limit = 50,
+	signal?: AbortSignal,
+): Promise<MessageStats[]> {
+	return fetchJson<MessageStats[]>(`${API_BASE}/stats/errors?range=${encodeURIComponent(range)}&limit=${limit}`, {
+		signal,
+	});
+}
+
+export async function getRequestDetails(id: number, signal?: AbortSignal): Promise<RequestDetails> {
+	return fetchJson<RequestDetails>(`${API_BASE}/request/${id}`, { signal });
+}
+
+export async function sync(signal?: AbortSignal): Promise<{ processed: number; files: number; totalMessages: number }> {
+	return fetchJson<{ processed: number; files: number; totalMessages: number }>(`${API_BASE}/sync`, { signal });
+}
+
+export async function getBehaviorDashboardStats(
+	range: TimeRange = "24h",
+	signal?: AbortSignal,
+): Promise<BehaviorDashboardStats> {
+	return fetchJson<BehaviorDashboardStats>(`${API_BASE}/stats/behavior?range=${encodeURIComponent(range)}`, {
+		signal,
+	});
+}
+
+export async function getFolderStats(range: TimeRange = "24h", signal?: AbortSignal): Promise<FolderStats[]> {
+	return fetchJson<FolderStats[]>(`${API_BASE}/stats/folders?range=${encodeURIComponent(range)}`, { signal });
+}
+
+export async function getGainDashboardStats(
+	range: TimeRange = "24h",
+	project?: string | null,
+	signal?: AbortSignal,
+): Promise<GainDashboardStats> {
+	const params = new URLSearchParams({ range });
+	if (project) params.set("project", project);
+	return fetchJson<GainDashboardStats>(`${API_BASE}/stats/gain?${params}`, { signal });
+}
+
+export async function getToolDashboardStats(
+	range: TimeRange = "24h",
+	signal?: AbortSignal,
+): Promise<ToolDashboardStats> {
+	return fetchJson<ToolDashboardStats>(`${API_BASE}/stats/tools?range=${encodeURIComponent(range)}`, { signal });
+}
+
+export async function getProviderDashboardStats(
+	range: TimeRange = "24h",
+	signal?: AbortSignal,
+): Promise<ProviderDashboardStats> {
+	return fetchJson<ProviderDashboardStats>(`${API_BASE}/stats/providers?range=${encodeURIComponent(range)}`, {
+		signal,
+	});
+}

package/src/client/app/AppLayout.tsx

@@ -0,0 +1,93 @@
+import { X } from "lucide-react";
+import type React from "react";
+import { useState } from "react";
+import type { TimeRange } from "../types";
+import { NavRail } from "./NavRail";
+import type { DashboardSection } from "./routes";
+import { TopBar } from "./TopBar";
+
+export interface AppLayoutProps {
+	activeSection: DashboardSection;
+	onSectionChange: (section: DashboardSection) => void;
+	range: TimeRange;
+	onRangeChange: (range: TimeRange) => void;
+	updatedAt: number | null;
+	onSyncStart?: () => void;
+	onSyncComplete?: (result: { success: boolean }) => void;
+	children: React.ReactNode;
+}
+
+export function AppLayout({
+	activeSection,
+	onSectionChange,
+	range,
+	onRangeChange,
+	updatedAt,
+	onSyncStart,
+	onSyncComplete,
+	children,
+}: AppLayoutProps) {
+	const [menuOpen, setMenuOpen] = useState(false);
+
+	const handleSectionChange = (section: DashboardSection) => {
+		onSectionChange(section);
+		setMenuOpen(false);
+	};
+
+	return (
+		<div className="stats-app-container">
+			{/* Desktop Rail */}
+			<NavRail activeSection={activeSection} onSectionChange={handleSectionChange} className="stats-desktop-nav" />
+
+			{/* Mobile Nav Drawer */}
+			{menuOpen && (
+				<div className="stats-mobile-drawer-overlay" onClick={() => setMenuOpen(false)} role="presentation">
+					<div
+						className="stats-mobile-drawer"
+						onClick={e => e.stopPropagation()}
+						role="dialog"
+						aria-modal="true"
+						aria-label="Navigation menu"
+					>
+						<div className="stats-mobile-drawer-header">
+							<div className="stats-logo-container">
+								<span className="stats-logo-text">OH MY PI</span>
+								<span className="stats-logo-subtext">Observability</span>
+							</div>
+							<button
+								type="button"
+								onClick={() => setMenuOpen(false)}
+								className="stats-drawer-close-btn"
+								aria-label="Close navigation menu"
+							>
+								<X size={18} />
+							</button>
+						</div>
+						<NavRail
+							activeSection={activeSection}
+							onSectionChange={handleSectionChange}
+							className="stats-mobile-nav"
+						/>
+					</div>
+				</div>
+			)}
+
+			{/* Main Layout Pane */}
+			<div className="stats-main-pane">
+				<TopBar
+					activeSection={activeSection}
+					range={range}
+					onRangeChange={onRangeChange}
+					updatedAt={updatedAt}
+					onSyncStart={onSyncStart}
+					onSyncComplete={onSyncComplete}
+					onMenuToggle={() => setMenuOpen(true)}
+				/>
+
+				<main className="stats-content-area">
+					<div className="stats-content-inner">{children}</div>
+				</main>
+			</div>
+		</div>
+	);
+}

package/src/client/app/NavRail.tsx

@@ -0,0 +1,44 @@
+import { type DashboardSection, routes } from "./routes";
+
+export interface NavRailProps {
+	activeSection: DashboardSection;
+	onSectionChange: (section: DashboardSection) => void;
+	className?: string;
+}
+
+export function NavRail({ activeSection, onSectionChange, className = "" }: NavRailProps) {
+	return (
+		<aside className={`stats-nav-rail ${className}`}>
+			<div className="stats-nav-rail-header">
+				<div className="stats-logo-container">
+					<span className="stats-logo-text">OH MY PI</span>
+					<span className="stats-logo-subtext">Observability</span>
+				</div>
+			</div>
+
+			<nav className="stats-nav-rail-menu">
+				{routes.map(route => {
+					const isActive = route.id === activeSection;
+					const Icon = route.icon;
+					return (
+						<button
+							key={route.id}
+							type="button"
+							onClick={() => onSectionChange(route.id)}
+							className="stats-nav-rail-item"
+							data-active={isActive ? "true" : "false"}
+							aria-current={isActive ? "page" : undefined}
+						>
+							<Icon size={16} className="stats-nav-rail-item-icon" />
+							<span className="stats-nav-rail-item-label">{route.label}</span>
+						</button>
+					);
+				})}
+			</nav>
+
+			<div className="stats-nav-rail-footer">
+				<span className="stats-version-tag">OMP Stats v1.0.0</span>
+			</div>
+		</aside>
+	);
+}

package/src/client/app/RangeControl.tsx

@@ -0,0 +1,39 @@
+import type { TimeRange } from "../types";
+
+export interface RangeControlProps {
+	value: TimeRange;
+	onChange: (value: TimeRange) => void;
+	className?: string;
+}
+
+const RANGE_OPTIONS: { value: TimeRange; label: string }[] = [
+	{ value: "1h", label: "1h" },
+	{ value: "24h", label: "24h" },
+	{ value: "7d", label: "7d" },
+	{ value: "30d", label: "30d" },
+	{ value: "90d", label: "90d" },
+	{ value: "all", label: "All" },
+];
+
+export function RangeControl({ value, onChange, className = "" }: RangeControlProps) {
+	return (
+		<div className={`stats-range-control ${className}`} role="radiogroup" aria-label="Select time range">
+			{RANGE_OPTIONS.map(opt => {
+				const isActive = opt.value === value;
+				return (
+					<button
+						key={opt.value}
+						type="button"
+						role="radio"
+						aria-checked={isActive}
+						data-active={isActive ? "true" : "false"}
+						className="stats-range-control-btn"
+						onClick={() => onChange(opt.value)}
+					>
+						{opt.label}
+					</button>
+				);
+			})}
+		</div>
+	);
+}

package/src/client/app/SyncButton.tsx

@@ -0,0 +1,75 @@
+import { RefreshCw } from "lucide-react";
+import { useState } from "react";
+import { sync } from "../api";
+
+export interface SyncButtonProps {
+	onSyncStart?: () => void;
+	onSyncComplete?: (result: {
+		success: boolean;
+		data?: { processed: number; files: number; totalMessages: number };
+		error?: string;
+	}) => void;
+	className?: string;
+}
+
+export function SyncButton({ onSyncStart, onSyncComplete, className = "" }: SyncButtonProps) {
+	const [syncing, setSyncing] = useState(false);
+	const [status, setStatus] = useState<{ type: "success" | "error"; message: string } | null>(null);
+
+	const handleSync = async () => {
+		if (syncing) return;
+
+		setSyncing(true);
+		setStatus(null);
+		if (onSyncStart) {
+			onSyncStart();
+		}
+
+		try {
+			const data = await sync();
+			const result = {
+				processed: typeof data?.processed === "number" ? data.processed : 0,
+				files: typeof data?.files === "number" ? data.files : 0,
+				totalMessages: typeof data?.totalMessages === "number" ? data.totalMessages : 0,
+			};
+			setStatus({
+				type: "success",
+				message: `Synced: ${result.processed} new request${result.processed === 1 ? "" : "s"} found.`,
+			});
+			if (onSyncComplete) {
+				onSyncComplete({ success: true, data: result });
+			}
+		} catch (err) {
+			const errorMessage = err instanceof Error ? err.message : String(err);
+			setStatus({
+				type: "error",
+				message: `Sync failed: ${errorMessage}`,
+			});
+			if (onSyncComplete) {
+				onSyncComplete({ success: false, error: errorMessage });
+			}
+		} finally {
+			setSyncing(false);
+		}
+	};
+
+	return (
+		<div className={`stats-sync-container ${className}`}>
+			{status && (
+				<span className="stats-sync-status-msg" data-type={status.type}>
+					{status.message}
+				</span>
+			)}
+			<button
+				type="button"
+				onClick={handleSync}
+				disabled={syncing}
+				className="stats-button stats-button-primary stats-sync-btn"
+				aria-busy={syncing}
+			>
+				<RefreshCw size={14} className={`stats-sync-icon ${syncing ? "stats-spin" : ""}`} />
+				{syncing ? "Syncing..." : "Sync DB"}
+			</button>
+		</div>
+	);
+}

package/src/client/app/ThemeToggle.tsx

@@ -0,0 +1,37 @@
+import { type LucideIcon, Monitor, Moon, Sun } from "lucide-react";
+import { type ThemePreference, useThemePreference } from "../useSystemTheme";
+
+const NEXT_PREFERENCE: Record<ThemePreference, ThemePreference> = {
+	system: "light",
+	light: "dark",
+	dark: "system",
+};
+
+const PREFERENCE_ICON: Record<ThemePreference, LucideIcon> = {
+	system: Monitor,
+	light: Sun,
+	dark: Moon,
+};
+
+const PREFERENCE_LABEL: Record<ThemePreference, string> = {
+	system: "System theme",
+	light: "Light theme",
+	dark: "Dark theme",
+};
+
+export function ThemeToggle() {
+	const { preference, setPreference } = useThemePreference();
+	const Icon = PREFERENCE_ICON[preference];
+
+	return (
+		<button
+			type="button"
+			className="stats-theme-toggle"
+			onClick={() => setPreference(NEXT_PREFERENCE[preference])}
+			aria-label={`${PREFERENCE_LABEL[preference]} (click to switch)`}
+			title={`${PREFERENCE_LABEL[preference]} — click to switch`}
+		>
+			<Icon size={16} />
+		</button>
+	);
+}

package/src/client/app/TopBar.tsx

@@ -0,0 +1,73 @@
+import { Menu } from "lucide-react";
+import type { TimeRange } from "../types";
+import { RangeControl } from "./RangeControl";
+import type { DashboardSection } from "./routes";
+import { routes } from "./routes";
+import { SyncButton } from "./SyncButton";
+import { ThemeToggle } from "./ThemeToggle";
+
+export interface TopBarProps {
+	activeSection: DashboardSection;
+	range: TimeRange;
+	onRangeChange: (range: TimeRange) => void;
+	updatedAt: number | null;
+	onSyncStart?: () => void;
+	onSyncComplete?: (result: { success: boolean }) => void;
+	onMenuToggle?: () => void;
+	className?: string;
+}
+
+export function TopBar({
+	activeSection,
+	range,
+	onRangeChange,
+	updatedAt,
+	onSyncStart,
+	onSyncComplete,
+	onMenuToggle,
+	className = "",
+}: TopBarProps) {
+	const currentRoute = routes.find(r => r.id === activeSection);
+	const title = currentRoute?.label || "Observability";
+
+	const formatLastUpdated = (time: number | null) => {
+		if (!time) return "Not updated";
+		const date = new Date(time);
+		return `Updated ${date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" })}`;
+	};
+
+	return (
+		<header className={`stats-top-bar ${className}`}>
+			<div className="stats-top-bar-left">
+				{onMenuToggle && (
+					<button
+						type="button"
+						onClick={onMenuToggle}
+						className="stats-mobile-menu-btn"
+						aria-label="Open navigation menu"
+					>
+						<Menu size={20} />
+					</button>
+				)}
+				<h1 className="stats-page-title">{title}</h1>
+			</div>
+
+			<div className="stats-top-bar-right">
+				<div className="stats-top-bar-meta">
+					<span
+						className="stats-last-updated"
+						title={updatedAt ? new Date(updatedAt).toLocaleString() : undefined}
+					>
+						{formatLastUpdated(updatedAt)}
+					</span>
+				</div>
+
+				<RangeControl value={range} onChange={onRangeChange} />
+
+				<ThemeToggle />
+
+				<SyncButton onSyncStart={onSyncStart} onSyncComplete={onSyncComplete} />
+			</div>
+		</header>
+	);
+}

package/src/client/app/routes.ts

@@ -0,0 +1,86 @@
+import {
+	Activity,
+	AlertCircle,
+	Coins,
+	Cpu,
+	Folder,
+	LayoutDashboard,
+	Plug,
+	Smile,
+	TrendingUp,
+	Wrench,
+} from "lucide-react";
+import type React from "react";
+
+export type DashboardSection =
+	| "overview"
+	| "requests"
+	| "errors"
+	| "models"
+	| "providers"
+	| "tools"
+	| "costs"
+	| "behavior"
+	| "projects"
+	| "gain";
+
+export interface DashboardRoute {
+	id: DashboardSection;
+	label: string;
+	shortLabel?: string;
+	icon: React.ComponentType<{ size?: number; className?: string }>;
+}
+
+export const routes: DashboardRoute[] = [
+	{
+		id: "overview",
+		label: "Overview",
+		icon: LayoutDashboard,
+	},
+	{
+		id: "requests",
+		label: "Requests",
+		icon: Activity,
+	},
+	{
+		id: "errors",
+		label: "Errors",
+		icon: AlertCircle,
+	},
+	{
+		id: "models",
+		label: "Models",
+		icon: Cpu,
+	},
+	{
+		id: "providers",
+		label: "Providers",
+		icon: Plug,
+	},
+	{
+		id: "tools",
+		label: "Tools",
+		icon: Wrench,
+	},
+	{
+		id: "costs",
+		label: "Costs",
+		icon: Coins,
+	},
+	{
+		id: "behavior",
+		label: "Behavior",
+		shortLabel: "Behavior",
+		icon: Smile,
+	},
+	{
+		id: "projects",
+		label: "Projects",
+		icon: Folder,
+	},
+	{
+		id: "gain",
+		label: "Gain",
+		icon: TrendingUp,
+	},
+];