@oh-my-pi/omp-stats 18.3.5 → 18.4.0

package/src/client/App.tsx

@@ -1,11 +1,12 @@
 import { useCallback, useRef, useState } from "react";
-import { AppLayout } from "./app/AppLayout";
-import type { DashboardSection } from "./app/routes";
+import type { DashboardSection } from "./app/nav";
+import { Shell } from "./app/Shell";
+import { LiveProvider } from "./data/live";
 import { useHashRoute } from "./data/useHashRoute";
 import {
-	BehaviorRoute,
 	CostsRoute,
 	ErrorsRoute,
+	FrustrationRoute,
 	GainRoute,
 	ModelsRoute,
 	OverviewRoute,
@@ -18,104 +19,61 @@ import {
 import { RequestDrawer } from "./ui/RequestDrawer";
 
 export default function App() {
+	return (
+		<LiveProvider>
+			<Dashboard />
+		</LiveProvider>
+	);
+}
+
+function Dashboard() {
 	const { section, setSection, range, setRange, session, setSession } = 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.
+	// Stable identity so the drawer's effects don't tear down on every render.
 	const closeDrawer = useCallback(() => setSelectedRequestId(null), []);
 
-	const active = section;
+	// Visited pages stay mounted (hidden) so revisits are instant and keep their
+	// scroll-independent UI state; only the active page fetches (`active`).
+	const mounted = useRef(new Set<DashboardSection>());
+	mounted.current.add(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;
+	const render = (target: DashboardSection) => {
+		const active = target === section;
 		switch (target) {
 			case "overview":
-				return (
-					<OverviewRoute
-						active={isActive}
-						range={range}
-						refreshTrigger={refreshTrigger}
-						onRequestClick={setSelectedRequestId}
-					/>
-				);
+				return <OverviewRoute active={active} range={range} onRequestClick={setSelectedRequestId} />;
 			case "requests":
-				return (
-					<RequestsRoute
-						active={isActive}
-						range={range}
-						refreshTrigger={refreshTrigger}
-						onRequestClick={setSelectedRequestId}
-					/>
-				);
-			case "traces":
-				return (
-					<TracesRoute
-						active={isActive}
-						session={session}
-						onOpenSession={setSession}
-						refreshTrigger={refreshTrigger}
-					/>
-				);
+				return <RequestsRoute active={active} range={range} onRequestClick={setSelectedRequestId} />;
 			case "errors":
-				return (
-					<ErrorsRoute
-						active={isActive}
-						range={range}
-						refreshTrigger={refreshTrigger}
-						onRequestClick={setSelectedRequestId}
-					/>
-				);
+				return <ErrorsRoute active={active} range={range} onRequestClick={setSelectedRequestId} />;
+			case "traces":
+				return <TracesRoute active={active} session={session} onOpenSession={setSession} />;
 			case "models":
-				return <ModelsRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
+				return <ModelsRoute active={active} range={range} />;
 			case "providers":
-				return <ProvidersRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
-			case "tools":
-				return <ToolsRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
+				return <ProvidersRoute active={active} range={range} />;
 			case "costs":
-				return <CostsRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
-			case "behavior":
-				return <BehaviorRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
+				return <CostsRoute active={active} range={range} />;
+			case "tools":
+				return <ToolsRoute active={active} range={range} />;
+			case "frustration":
+				return <FrustrationRoute active={active} range={range} />;
 			case "projects":
-				return <ProjectsRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
+				return <ProjectsRoute active={active} range={range} />;
 			case "gain":
-				return <GainRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
+				return <GainRoute active={active} range={range} />;
 		}
 	};
 
 	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)}
+			<Shell section={section} onSectionChange={setSection} range={range} onRangeChange={setRange}>
+				{[...mounted.current].map(target => (
+					<div key={target} hidden={target !== section}>
+						{render(target)}
 					</div>
 				))}
-			</AppLayout>
-
+			</Shell>
 			<RequestDrawer id={selectedRequestId} onClose={closeDrawer} />
 		</>
 	);

package/src/client/api.ts

@@ -1,12 +1,16 @@
 import type {
-	BehaviorDashboardStats,
 	CostDashboardStats,
 	FolderStats,
+	FrustrationDashboardStats,
+	FrustrationEstimate,
+	FrustrationJobStatus,
 	GainDashboardStats,
+	LiveStatus,
 	MessageStats,
 	ModelDashboardStats,
 	OverviewStats,
 	ProviderDashboardStats,
+	ProviderWindowStats,
 	RequestDetails,
 	SessionSummary,
 	SessionTrace,
@@ -28,14 +32,33 @@ export class ApiError extends Error {
 	}
 }
 
+/** Prefer the server's `{ error }` body over a bare status line. */
+async function readErrorMessage(res: Response, endpoint: string): Promise<string> {
+	try {
+		const body: unknown = await res.json();
+		if (typeof body === "object" && body !== null && "error" in body && typeof body.error === "string") {
+			return body.error;
+		}
+	} catch {
+		// Non-JSON error body: fall through to the status line.
+	}
+	return `HTTP error ${res.status} on ${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}`);
+		throw new ApiError(res.status, endpoint, await readErrorMessage(res, endpoint));
 	}
 	return res.json() as Promise<T>;
 }
 
+/**
+ * Spend-incurring actions carry this custom header. It forces a CORS preflight
+ * the server never approves, so a cross-site page cannot trigger them.
+ */
+const ACTION_HEADERS = { "X-Omp-Stats-Action": "1" };
+
 export async function getOverviewStats(range: TimeRange = "24h", signal?: AbortSignal): Promise<OverviewStats> {
 	return fetchJson<OverviewStats>(`${API_BASE}/stats/overview?range=${encodeURIComponent(range)}`, {
 		signal,
@@ -76,19 +99,42 @@ export async function getRequestDetails(id: number, signal?: AbortSignal): Promi
 	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 });
+/** Ask the server to start a background sync; progress arrives on the `/api/events` stream. */
+export async function requestSync(): Promise<LiveStatus> {
+	return fetchJson<LiveStatus>(`${API_BASE}/sync`, { method: "POST" });
 }
 
-export async function getBehaviorDashboardStats(
+export async function getFrustrationDashboardStats(
 	range: TimeRange = "24h",
 	signal?: AbortSignal,
-): Promise<BehaviorDashboardStats> {
-	return fetchJson<BehaviorDashboardStats>(`${API_BASE}/stats/behavior?range=${encodeURIComponent(range)}`, {
+): Promise<FrustrationDashboardStats> {
+	return fetchJson<FrustrationDashboardStats>(`${API_BASE}/stats/frustration?range=${encodeURIComponent(range)}`, {
+		signal,
+	});
+}
+
+/** Pre-run cost quote for judging every unjudged message in `range`. */
+export async function getFrustrationEstimate(range: TimeRange, signal?: AbortSignal): Promise<FrustrationEstimate> {
+	return fetchJson<FrustrationEstimate>(`${API_BASE}/frustration/estimate?range=${encodeURIComponent(range)}`, {
 		signal,
 	});
 }
 
+/** Start the judge run over the unjudged messages in `range`. Spends money. */
+export async function startFrustrationRun(range: TimeRange): Promise<FrustrationJobStatus> {
+	return fetchJson<FrustrationJobStatus>(`${API_BASE}/frustration/judge?range=${encodeURIComponent(range)}`, {
+		method: "POST",
+		headers: ACTION_HEADERS,
+	});
+}
+
+export async function cancelFrustrationRun(): Promise<FrustrationJobStatus> {
+	return fetchJson<FrustrationJobStatus>(`${API_BASE}/frustration/cancel`, {
+		method: "POST",
+		headers: ACTION_HEADERS,
+	});
+}
+
 export async function getFolderStats(range: TimeRange = "24h", signal?: AbortSignal): Promise<FolderStats[]> {
 	return fetchJson<FolderStats[]>(`${API_BASE}/stats/folders?range=${encodeURIComponent(range)}`, { signal });
 }
@@ -118,6 +164,18 @@ export async function getProviderDashboardStats(
 		signal,
 	});
 }
+
+/** Subscription-window insights (all providers) plus utilization series for `provider` only. */
+export async function getProviderWindowStats(
+	range: TimeRange,
+	provider: string | null,
+	signal?: AbortSignal,
+): Promise<ProviderWindowStats> {
+	const params = new URLSearchParams({ range });
+	if (provider !== null) params.set("provider", provider);
+	return fetchJson<ProviderWindowStats>(`${API_BASE}/stats/provider-windows?${params}`, { signal });
+}
+
 export async function getSessions(limit = 100, q?: string, signal?: AbortSignal): Promise<SessionSummary[]> {
 	const params = new URLSearchParams({ limit: String(limit) });
 	if (q) params.set("q", q);

package/src/client/app/LiveChip.tsx

@@ -0,0 +1,97 @@
+import { RefreshCw } from "lucide-react";
+import { type ReactNode, useEffect, useState } from "react";
+import { formatInteger } from "../data/formatters";
+import { useLive } from "../data/live";
+import { Dot } from "../ui";
+
+/** Topbar ingest status; click to sync now. */
+export function LiveChip() {
+	const { sync, indexingHours, connected, requestSync } = useLive();
+	const now = useNow(sync.phase === "idle" ? 15_000 : null);
+
+	let body: ReactNode;
+	let title: string;
+	if (!connected) {
+		body = (
+			<>
+				<Dot tone="warn" />
+				<span>Reconnecting</span>
+			</>
+		);
+		title = "Lost the live connection to the stats server; retrying";
+	} else if (sync.phase === "syncing") {
+		body = (
+			<>
+				<RefreshCw size={13} className="spin" />
+				<span>Syncing</span>
+				{sync.total > 0 && (
+					<span className="live-chip-count">
+						{formatInteger(sync.current)}/{formatInteger(sync.total)}
+					</span>
+				)}
+			</>
+		);
+		title = "Ingesting session files";
+	} else if (sync.phase === "error") {
+		body = (
+			<>
+				<Dot tone="bad" />
+				<span>Sync failed</span>
+			</>
+		);
+		title = `${sync.error ?? "Sync failed"} — click to retry`;
+	} else if (indexingHours > INDEXING_VISIBLE_HOURS) {
+		body = (
+			<>
+				<RefreshCw size={13} className="spin" />
+				<span>Indexing</span>
+				<span className="live-chip-count">{formatInteger(indexingHours)}h left</span>
+			</>
+		);
+		title = "Building hourly rollups; older ranges fill in as it goes";
+	} else {
+		body = (
+			<>
+				<Dot tone="live" pulse />
+				<span>Live</span>
+				{sync.lastSyncedAt !== null && <span className="live-chip-count">{ago(now - sync.lastSyncedAt)}</span>}
+			</>
+		);
+		title = "Click to sync session files now";
+	}
+
+	return (
+		<button
+			type="button"
+			className="live-chip"
+			onClick={requestSync}
+			disabled={sync.phase === "syncing"}
+			title={title}
+		>
+			{body}
+		</button>
+	);
+}
+
+/** A handful of dirty hours is normal live churn; only a real backlog is worth showing. */
+const INDEXING_VISIBLE_HOURS = 24;
+
+function useNow(intervalMs: number | null): number {
+	const [now, setNow] = useState(Date.now);
+	useEffect(() => {
+		if (intervalMs === null) return;
+		setNow(Date.now());
+		const timer = setInterval(() => setNow(Date.now()), intervalMs);
+		return () => clearInterval(timer);
+	}, [intervalMs]);
+	return now;
+}
+
+function ago(ms: number): string {
+	const s = Math.max(0, Math.round(ms / 1000));
+	if (s < 45) return "just now";
+	const m = Math.round(s / 60);
+	if (m < 60) return `${m}m ago`;
+	const h = Math.round(m / 60);
+	return h < 24 ? `${h}h ago` : `${Math.round(h / 24)}d ago`;
+}

package/src/client/app/Shell.tsx

@@ -0,0 +1,181 @@
+import { Menu } from "lucide-react";
+import { type ReactNode, useEffect, useState } from "react";
+import { rangeMeta, TIME_RANGES } from "../data/range";
+import { useLive } from "../data/live";
+import type { TimeRange } from "../types";
+import { Segmented } from "../ui";
+import { LiveChip } from "./LiveChip";
+import { type DashboardSection, NAV } from "./nav";
+import { ThemeToggle } from "./ThemeToggle";
+
+export interface ShellProps {
+	section: DashboardSection;
+	onSectionChange: (section: DashboardSection) => void;
+	range: TimeRange;
+	onRangeChange: (range: TimeRange) => void;
+	children: ReactNode;
+}
+
+const RANGE_OPTIONS = TIME_RANGES.map((range, i) => ({
+	value: range,
+	label: rangeMeta(range).label,
+	title: `${rangeMeta(range).windowLabel} (${i + 1})`,
+}));
+
+/**
+ * Fixed glass topbar + naked sidebar framing one inset content panel. Owns
+ * the global keyboard shortcuts: `1`–`6` pick a range, `g` then a letter jumps
+ * to a page.
+ */
+export function Shell({ section, onSectionChange, range, onRangeChange, children }: ShellProps) {
+	const [menuOpen, setMenuOpen] = useState(false);
+	const scrolled = useScrolled();
+	const { sync } = useLive();
+	useShortcuts(onSectionChange, onRangeChange);
+
+	const go = (next: DashboardSection) => {
+		onSectionChange(next);
+		setMenuOpen(false);
+		window.scrollTo({ top: 0 });
+	};
+
+	const progress = sync.phase === "syncing" ? (sync.total > 0 ? sync.current / sync.total : null) : undefined;
+
+	return (
+		<>
+			<div className="shell-ambient" />
+			<header className="topbar" data-scrolled={scrolled}>
+				<button
+					type="button"
+					className="btn topbar-menu"
+					data-variant="ghost"
+					data-icon="true"
+					onClick={() => setMenuOpen(true)}
+					aria-label="Open navigation"
+				>
+					<Menu size={16} />
+				</button>
+				<div className="topbar-brand">
+					<svg className="topbar-mark" viewBox="0 0 64 64" width="22" height="22" aria-hidden="true">
+						<defs>
+							<linearGradient id="omp-mark-grad" x1="0" y1="0" x2="1" y2="1">
+								<stop offset="0" stopColor="oklch(0.7 0.24 340)" />
+								<stop offset=".5" stopColor="oklch(0.62 0.21 295)" />
+								<stop offset="1" stopColor="oklch(0.81 0.14 200)" />
+							</linearGradient>
+						</defs>
+						<path fill="url(#omp-mark-grad)" d="M10 14h44v9H43v33h-9V23h-9v22h-9V23H10z" />
+					</svg>
+					<span>omp</span>
+					<span className="topbar-slash">/</span>
+					<span className="topbar-title">stats</span>
+				</div>
+				<div className="topbar-spacer" />
+				<div className="topbar-actions">
+					<span className="topbar-hide-narrow">
+						<LiveChip />
+					</span>
+					<Segmented options={RANGE_OPTIONS} value={range} onChange={onRangeChange} aria-label="Time range" />
+					<ThemeToggle />
+				</div>
+				{progress !== undefined && (
+					<div className="topbar-progress">
+						<div
+							className="topbar-progress-fill"
+							data-indeterminate={progress === null}
+							style={{ width: `${(progress ?? 0) * 100}%` }}
+						/>
+					</div>
+				)}
+			</header>
+
+			{menuOpen && <div className="drawer-scrim" onClick={() => setMenuOpen(false)} role="presentation" />}
+			<nav className="sidebar" data-open={menuOpen} aria-label="Pages">
+				{NAV.map(group => (
+					<div key={group.heading} className="nav-group">
+						<div className="nav-heading">{group.heading}</div>
+						{group.items.map(item => (
+							<button
+								key={item.id}
+								type="button"
+								className="nav-row"
+								data-active={item.id === section}
+								aria-current={item.id === section ? "page" : undefined}
+								onClick={() => go(item.id)}
+							>
+								<item.icon size={15} />
+								<span className="nav-row-label">{item.label}</span>
+								<kbd>G {item.hotkey.toUpperCase()}</kbd>
+							</button>
+						))}
+					</div>
+				))}
+				<div className="sidebar-foot micro">
+					<span>
+						<span className="kbd">1</span>–<span className="kbd">6</span> range
+					</span>
+					<span>
+						<span className="kbd">G</span> then letter to jump
+					</span>
+				</div>
+			</nav>
+
+			<main className="shell-panel">
+				<div className="shell-content">{children}</div>
+			</main>
+		</>
+	);
+}
+
+function useScrolled(): boolean {
+	const [scrolled, setScrolled] = useState(false);
+	useEffect(() => {
+		const onScroll = () => setScrolled(window.scrollY > 4);
+		onScroll();
+		window.addEventListener("scroll", onScroll, { passive: true });
+		return () => window.removeEventListener("scroll", onScroll);
+	}, []);
+	return scrolled;
+}
+
+function useShortcuts(onSection: (section: DashboardSection) => void, onRange: (range: TimeRange) => void): void {
+	useEffect(() => {
+		let pendingG = 0;
+		const onKey = (e: KeyboardEvent) => {
+			if (e.metaKey || e.ctrlKey || e.altKey || e.defaultPrevented) return;
+			const target = e.target;
+			if (
+				target instanceof HTMLElement &&
+				(target.isContentEditable ||
+					target.tagName === "INPUT" ||
+					target.tagName === "TEXTAREA" ||
+					target.tagName === "SELECT")
+			) {
+				return;
+			}
+			if (document.querySelector('[aria-modal="true"]')) return;
+			const key = e.key.toLowerCase();
+			if (pendingG && Date.now() - pendingG < 1200) {
+				pendingG = 0;
+				const item = NAV.flatMap(group => group.items).find(i => i.hotkey === key);
+				if (item) {
+					e.preventDefault();
+					onSection(item.id);
+					window.scrollTo({ top: 0 });
+				}
+				return;
+			}
+			if (key === "g") {
+				pendingG = Date.now();
+				return;
+			}
+			const index = Number(key) - 1;
+			if (Number.isInteger(index) && index >= 0 && index < TIME_RANGES.length) {
+				e.preventDefault();
+				onRange(TIME_RANGES[index]);
+			}
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [onSection, onRange]);
+}

package/src/client/app/ThemeToggle.tsx

@@ -19,6 +19,7 @@ const PREFERENCE_LABEL: Record<ThemePreference, string> = {
 	dark: "Dark theme",
 };
 
+/** Cycles system → light → dark. */
 export function ThemeToggle() {
 	const { preference, setPreference } = useThemePreference();
 	const Icon = PREFERENCE_ICON[preference];
@@ -26,12 +27,14 @@ export function ThemeToggle() {
 	return (
 		<button
 			type="button"
-			className="stats-theme-toggle"
+			className="btn"
+			data-variant="ghost"
+			data-icon="true"
 			onClick={() => setPreference(NEXT_PREFERENCE[preference])}
 			aria-label={`${PREFERENCE_LABEL[preference]} (click to switch)`}
 			title={`${PREFERENCE_LABEL[preference]} — click to switch`}
 		>
-			<Icon size={16} />
+			<Icon size={15} />
 		</button>
 	);
 }

package/src/client/app/nav.ts

@@ -0,0 +1,78 @@
+import {
+	Activity,
+	CircleAlert,
+	Coins,
+	Cpu,
+	FolderGit2,
+	Frown,
+	LayoutGrid,
+	type LucideIcon,
+	PlugZap,
+	Sparkles,
+	SquareChartGantt,
+	Wrench,
+} from "lucide-react";
+
+export type DashboardSection =
+	| "overview"
+	| "models"
+	| "providers"
+	| "costs"
+	| "requests"
+	| "errors"
+	| "traces"
+	| "tools"
+	| "frustration"
+	| "projects"
+	| "gain";
+
+export interface NavItem {
+	id: DashboardSection;
+	label: string;
+	icon: LucideIcon;
+	/** Second key of the `g <key>` jump shortcut. */
+	hotkey: string;
+}
+
+export interface NavGroup {
+	heading: string;
+	items: readonly NavItem[];
+}
+
+/** Sidebar structure; the order here is the order on screen. */
+export const NAV: readonly NavGroup[] = [
+	{
+		heading: "Usage",
+		items: [
+			{ id: "overview", label: "Overview", icon: LayoutGrid, hotkey: "o" },
+			{ id: "models", label: "Models", icon: Cpu, hotkey: "m" },
+			{ id: "providers", label: "Providers", icon: PlugZap, hotkey: "p" },
+			{ id: "costs", label: "Costs", icon: Coins, hotkey: "c" },
+		],
+	},
+	{
+		heading: "Activity",
+		items: [
+			{ id: "requests", label: "Requests", icon: Activity, hotkey: "r" },
+			{ id: "errors", label: "Errors", icon: CircleAlert, hotkey: "e" },
+			{ id: "traces", label: "Traces", icon: SquareChartGantt, hotkey: "t" },
+		],
+	},
+	{
+		heading: "Insights",
+		items: [
+			{ id: "tools", label: "Tools", icon: Wrench, hotkey: "l" },
+			{ id: "frustration", label: "Frustration", icon: Frown, hotkey: "f" },
+			{ id: "projects", label: "Projects", icon: FolderGit2, hotkey: "j" },
+			{ id: "gain", label: "Gain", icon: Sparkles, hotkey: "g" },
+		],
+	},
+];
+
+export const NAV_ITEMS: readonly NavItem[] = NAV.flatMap(group => group.items);
+
+export const SECTIONS: readonly DashboardSection[] = NAV_ITEMS.map(item => item.id);
+
+export function navItem(section: DashboardSection): NavItem {
+	return NAV_ITEMS.find(item => item.id === section) ?? NAV_ITEMS[0];
+}