@oh-my-pi-zen/omp-stats 16.3.6-zen.1

package/src/client/data/useHashRoute.ts

@@ -0,0 +1,87 @@
+import { useCallback, useEffect, useState } from "react";
+import type { DashboardSection } from "../app/routes";
+import type { TimeRange } from "../types";
+
+const VALID_SECTIONS: DashboardSection[] = [
+	"overview",
+	"requests",
+	"errors",
+	"models",
+	"tools",
+	"costs",
+	"behavior",
+	"projects",
+	"gain",
+];
+
+const VALID_RANGES: TimeRange[] = ["1h", "24h", "7d", "30d", "90d", "all"];
+
+function parseHash(hash: string): { section: DashboardSection; range: TimeRange } {
+	const cleanHash = hash.replace(/^#\/?/, "");
+	const [pathPart, queryPart] = cleanHash.split("?");
+
+	const section: DashboardSection = (VALID_SECTIONS as string[]).includes(pathPart)
+		? (pathPart as DashboardSection)
+		: "overview";
+
+	let range: TimeRange = "24h";
+	if (queryPart) {
+		const params = new URLSearchParams(queryPart);
+		const rangeParam = params.get("range") as TimeRange;
+		if (VALID_RANGES.includes(rangeParam)) {
+			range = rangeParam;
+		}
+	}
+
+	return { section, range };
+}
+
+export function useHashRoute() {
+	const [route, setRouteState] = useState(() => parseHash(window.location.hash));
+
+	useEffect(() => {
+		const handleHashChange = () => {
+			setRouteState(parseHash(window.location.hash));
+		};
+
+		window.addEventListener("hashchange", handleHashChange);
+		return () => {
+			window.removeEventListener("hashchange", handleHashChange);
+		};
+	}, []);
+
+	const updateHash = useCallback((section: string, range: TimeRange) => {
+		window.location.hash = `/${section}?range=${range}`;
+	}, []);
+
+	const setSection = useCallback(
+		(newSection: DashboardSection) => {
+			updateHash(newSection, route.range);
+		},
+		[route.range, updateHash],
+	);
+
+	const setRange = useCallback(
+		(newRange: string) => {
+			const nextRange = VALID_RANGES.includes(newRange as TimeRange) ? (newRange as TimeRange) : "24h";
+			updateHash(route.section, nextRange);
+		},
+		[route.section, updateHash],
+	);
+
+	useEffect(() => {
+		const currentHash = window.location.hash;
+		const parsed = parseHash(currentHash);
+		const expectedHash = `#/${parsed.section}?range=${parsed.range}`;
+		if (currentHash !== expectedHash) {
+			window.location.hash = `/${parsed.section}?range=${parsed.range}`;
+		}
+	}, []);
+
+	return {
+		section: route.section,
+		setSection,
+		range: route.range,
+		setRange,
+	};
+}

package/src/client/data/useResource.ts

@@ -0,0 +1,154 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export interface ResourceResult<T> {
+	data: T | null;
+	error: Error | null;
+	loading: boolean;
+	refreshing: boolean;
+	refetch: () => Promise<void>;
+	updatedAt: number | null;
+}
+
+export interface ResourceOptions {
+	pollMs?: number;
+	enabled?: boolean;
+}
+
+// Session-scoped cache keyed by the resource key. Lets navigation between
+// screens (and back to an already-visited range) render instantly from the
+// last value and refresh in the background, instead of unmounting to a
+// skeleton on every visit. Cleared only on full page reload.
+const resourceCache = new Map<string, { data: unknown; updatedAt: number }>();
+const RESOURCE_CACHE_LIMIT = 64;
+
+export function useResource<T>(
+	key: readonly unknown[],
+	fetcher: (signal: AbortSignal) => Promise<T>,
+	options?: ResourceOptions,
+): ResourceResult<T> {
+	const keyString = JSON.stringify(key);
+
+	const [data, setData] = useState<T | null>(() => (resourceCache.get(keyString)?.data as T | undefined) ?? null);
+	const [error, setError] = useState<Error | null>(null);
+	const [loading, setLoading] = useState(() => !resourceCache.has(keyString));
+	const [refreshing, setRefreshing] = useState(false);
+	const [updatedAt, setUpdatedAt] = useState<number | null>(() => resourceCache.get(keyString)?.updatedAt ?? null);
+
+	const fetcherRef = useRef(fetcher);
+	fetcherRef.current = fetcher;
+	const keyStringRef = useRef(keyString);
+	keyStringRef.current = keyString;
+
+	const enabled = options?.enabled ?? true;
+	const pollMs = options?.pollMs;
+
+	const controllerRef = useRef<AbortController | null>(null);
+
+	// Track whether we already hold data so a key change refreshes in the
+	// background — keeping the prior view mounted so charts animate to the new
+	// data instead of flashing a skeleton.
+	const hasDataRef = useRef(false);
+	hasDataRef.current = data !== null;
+
+	const executeFetch = useCallback(async (isBackground: boolean) => {
+		if (controllerRef.current) {
+			controllerRef.current.abort();
+		}
+
+		const controller = new AbortController();
+		controllerRef.current = controller;
+
+		if (isBackground) {
+			setRefreshing(true);
+		} else {
+			setLoading(true);
+			setData(null);
+		}
+		setError(null);
+
+		try {
+			const result = await fetcherRef.current(controller.signal);
+			if (controller.signal.aborted) {
+				return;
+			}
+			resourceCache.set(keyStringRef.current, { data: result, updatedAt: Date.now() });
+			if (resourceCache.size > RESOURCE_CACHE_LIMIT) {
+				const oldestKey = resourceCache.keys().next().value;
+				if (oldestKey !== undefined) resourceCache.delete(oldestKey);
+			}
+			setData(result);
+			setUpdatedAt(Date.now());
+			setError(null);
+		} catch (err) {
+			if (controller.signal.aborted) {
+				return;
+			}
+			setError(err instanceof Error ? err : new Error(String(err)));
+		} finally {
+			if (!controller.signal.aborted) {
+				setLoading(false);
+				setRefreshing(false);
+				if (controllerRef.current === controller) {
+					controllerRef.current = null;
+				}
+			}
+		}
+	}, []);
+
+	useEffect(() => {
+		if (!enabled) {
+			setLoading(false);
+			setRefreshing(false);
+			return;
+		}
+
+		const cached = resourceCache.get(keyString);
+		if (cached) {
+			// Show the cached value immediately, then revalidate in the background.
+			setData(cached.data as T);
+			setUpdatedAt(cached.updatedAt);
+			setLoading(false);
+			executeFetch(true);
+		} else {
+			// No cache: keep any stale data (range morph) or show a skeleton (first load).
+			executeFetch(hasDataRef.current);
+		}
+
+		return () => {
+			if (controllerRef.current) {
+				controllerRef.current.abort();
+				controllerRef.current = null;
+			}
+		};
+	}, [keyString, enabled, executeFetch]);
+
+	useEffect(() => {
+		if (!enabled || !pollMs) {
+			return;
+		}
+
+		const interval = setInterval(() => {
+			if (document.hidden) {
+				return;
+			}
+			void executeFetch(true);
+		}, pollMs);
+
+		return () => {
+			clearInterval(interval);
+		};
+	}, [enabled, pollMs, executeFetch]);
+
+	const refetch = useCallback(async () => {
+		await executeFetch(true);
+	}, [executeFetch]);
+
+	return {
+		data,
+		error,
+		loading,
+		refreshing,
+		refetch,
+		updatedAt,
+	};
+}

package/src/client/data/view-models.ts

@@ -0,0 +1,251 @@
+import { rangeMeta } from "../components/range-meta";
+import type {
+	AgentType,
+	AgentTypeStats,
+	BehaviorOverallStats,
+	BehaviorTimeSeriesPoint,
+	CostTimeSeriesPoint,
+	FolderStats,
+	ModelPerformancePoint,
+	TimeRange,
+	ToolUsageStats,
+} from "../types";
+
+/** Fixed display order for the agent-token-share breakdown. */
+const AGENT_TYPE_ORDER: AgentType[] = ["main", "subagent", "advisor"];
+
+export interface AgentTokenSegment {
+	agentType: AgentType;
+	/** input + output + cache read + cache write — the displayed denominator. */
+	tokens: number;
+	requests: number;
+	cost: number;
+	/** Fraction (0-1) of total tokens across all present agent types. */
+	share: number;
+}
+
+export interface AgentTokenShareView {
+	totalTokens: number;
+	totalCost: number;
+	segments: AgentTokenSegment[];
+}
+
+/**
+ * Build the "token usage by agent" breakdown: one segment per agent type that
+ * appears in the data, ordered main -> subagents -> advisor, each carrying its
+ * token total and share of the grand total. Token counts sum the same four
+ * columns the overview renders (input + output + cache read + cache write) so a
+ * segment's share never disagrees with the count beside it.
+ */
+export function buildAgentTokenShare(stats: AgentTypeStats[]): AgentTokenShareView {
+	const byType = new Map<AgentType, AgentTypeStats>();
+	for (const stat of stats) byType.set(stat.agentType, stat);
+
+	const tokensOf = (stat: AgentTypeStats) =>
+		stat.totalInputTokens + stat.totalOutputTokens + stat.totalCacheReadTokens + stat.totalCacheWriteTokens;
+
+	const present = AGENT_TYPE_ORDER.map(type => byType.get(type)).filter(
+		(stat): stat is AgentTypeStats => stat !== undefined,
+	);
+	const totalTokens = present.reduce((sum, stat) => sum + tokensOf(stat), 0);
+	const totalCost = present.reduce((sum, stat) => sum + stat.totalCost, 0);
+
+	const segments = present.map(stat => {
+		const tokens = tokensOf(stat);
+		return {
+			agentType: stat.agentType,
+			tokens,
+			requests: stat.totalRequests,
+			cost: stat.totalCost,
+			share: totalTokens > 0 ? tokens / totalTokens : 0,
+		};
+	});
+
+	return { totalTokens, totalCost, segments };
+}
+
+export interface CostSummaryView {
+	totalCost: number;
+	avgDailyCost: number;
+	topModelName: string;
+	topModelCost: number;
+}
+
+export interface ModelPerformanceDataPoint {
+	timestamp: number;
+	avgTtftSeconds: number | null;
+	avgTokensPerSecond: number | null;
+	requests: number;
+}
+
+export interface ModelPerformanceSeries {
+	label: string;
+	data: ModelPerformanceDataPoint[];
+}
+
+export interface BehaviorSummaryView {
+	totalMessages: number;
+	totalYelling: number;
+	totalProfanity: number;
+	totalAnguish: number;
+	totalFrustration: number;
+	highestFrictionModel: {
+		model: string;
+		provider: string;
+		score: number;
+	} | null;
+}
+
+export interface FolderRowView extends FolderStats {
+	costPercentage: number;
+	requestsPercentage: number;
+}
+
+export function buildCostSummary(costSeries: CostTimeSeriesPoint[]): CostSummaryView {
+	const totalCost = costSeries.reduce((sum, p) => sum + p.cost, 0);
+	const dayBuckets = new Set(costSeries.map(p => p.timestamp)).size;
+	const avgDailyCost = dayBuckets > 0 ? totalCost / dayBuckets : 0;
+
+	const modelTotals = new Map<string, number>();
+	for (const point of costSeries) {
+		modelTotals.set(point.model, (modelTotals.get(point.model) ?? 0) + point.cost);
+	}
+
+	let topModelName = "";
+	let topModelCost = 0;
+	for (const [model, cost] of modelTotals) {
+		if (cost > topModelCost) {
+			topModelName = model;
+			topModelCost = cost;
+		}
+	}
+
+	return {
+		totalCost,
+		avgDailyCost,
+		topModelName,
+		topModelCost,
+	};
+}
+
+export function buildModelPerformanceLookup(
+	points: ModelPerformancePoint[],
+	range: TimeRange,
+): Map<string, ModelPerformanceSeries> {
+	if (points.length === 0) return new Map();
+
+	const meta = rangeMeta(range);
+	const bucketMs = meta.bucketMs;
+	const bucketCount = meta.bucketCount;
+
+	const buckets =
+		bucketCount > 0
+			? (() => {
+					const maxTimestamp = points.reduce((max, point) => Math.max(max, point.timestamp), 0);
+					const anchor = maxTimestamp > 0 ? maxTimestamp : Math.floor(Date.now() / bucketMs) * bucketMs;
+					const start = anchor - (bucketCount - 1) * bucketMs;
+					return Array.from({ length: bucketCount }, (_, index) => start + index * bucketMs);
+				})()
+			: Array.from(new Set(points.map(p => p.timestamp))).sort((a, b) => a - b);
+	const bucketIndex = new Map(buckets.map((timestamp, index) => [timestamp, index]));
+	const seriesByKey = new Map<string, ModelPerformanceSeries>();
+
+	for (const point of points) {
+		const key = `${point.model}::${point.provider}`;
+		let series = seriesByKey.get(key);
+		if (!series) {
+			series = {
+				label: `${point.model} (${point.provider})`,
+				data: buckets.map(timestamp => ({
+					timestamp,
+					avgTtftSeconds: null,
+					avgTokensPerSecond: null,
+					requests: 0,
+				})),
+			};
+			seriesByKey.set(key, series);
+		}
+
+		const index = bucketIndex.get(point.timestamp);
+		if (index === undefined) continue;
+
+		series.data[index] = {
+			timestamp: point.timestamp,
+			avgTtftSeconds: point.avgTtft !== null ? point.avgTtft / 1000 : null,
+			avgTokensPerSecond: point.avgTokensPerSecond,
+			requests: point.requests,
+		};
+	}
+
+	return seriesByKey;
+}
+
+export function buildBehaviorSummary(
+	overall: BehaviorOverallStats,
+	series: BehaviorTimeSeriesPoint[],
+): BehaviorSummaryView {
+	const totalFrustration = overall.totalNegation + overall.totalRepetition + overall.totalBlame;
+
+	const totals = new Map<string, { model: string; provider: string; score: number }>();
+	for (const point of series) {
+		const key = `${point.model}::${point.provider}`;
+		const existing = totals.get(key);
+		const score = point.yelling + point.profanity + point.anguish + point.negation + point.repetition + point.blame;
+		if (existing) {
+			existing.score += score;
+		} else {
+			totals.set(key, { model: point.model, provider: point.provider, score });
+		}
+	}
+
+	let highestFrictionModel: { model: string; provider: string; score: number } | null = null;
+	for (const entry of totals.values()) {
+		if (!highestFrictionModel || entry.score > highestFrictionModel.score) {
+			highestFrictionModel = entry;
+		}
+	}
+
+	return {
+		totalMessages: overall.totalMessages,
+		totalYelling: overall.totalYelling,
+		totalProfanity: overall.totalProfanity,
+		totalAnguish: overall.totalAnguish,
+		totalFrustration,
+		highestFrictionModel,
+	};
+}
+
+export function buildFolderRows(folders: FolderStats[]): FolderRowView[] {
+	const sorted = [...folders].sort((a, b) => {
+		if (b.totalCost !== a.totalCost) {
+			return b.totalCost - a.totalCost;
+		}
+		return b.totalRequests - a.totalRequests;
+	});
+
+	const maxCost = sorted.reduce((max, f) => Math.max(max, f.totalCost), 0);
+	const maxRequests = sorted.reduce((max, f) => Math.max(max, f.totalRequests), 0);
+
+	return sorted.map(f => ({
+		...f,
+		costPercentage: maxCost > 0 ? (f.totalCost / maxCost) * 100 : 0,
+		requestsPercentage: maxRequests > 0 ? (f.totalRequests / maxRequests) * 100 : 0,
+	}));
+}
+
+/** Table row for the Tools route: usage stats plus derived rates/shares. */
+export interface ToolRowView extends ToolUsageStats {
+	/** errors / calls (0 for zero calls). */
+	errorRate: number;
+	/** Calls relative to the busiest tool, 0-100, for the share bar. */
+	callsPercentage: number;
+}
+
+export function buildToolRows(tools: ToolUsageStats[]): ToolRowView[] {
+	const maxCalls = tools.reduce((max, t) => Math.max(max, t.calls), 0);
+	return tools.map(t => ({
+		...t,
+		errorRate: t.calls > 0 ? t.errors / t.calls : 0,
+		callsPercentage: maxCalls > 0 ? (t.calls / maxCalls) * 100 : 0,
+	}));
+}

package/src/client/index.tsx

@@ -0,0 +1,10 @@
+import "./styles.css";
+// Side-effect import: registers all Chart.js scales/elements/plugins exactly
+// once before any chart renders. Without it the first chart throws
+// "category is not a registered scale" and unmounts the whole app.
+import "./data/charts";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(<App />);