@oh-my-pi/omp-stats 16.0.4 → 16.0.5

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,178 @@
+import { rangeMeta } from "../components/range-meta";
+import type {
+	BehaviorOverallStats,
+	BehaviorTimeSeriesPoint,
+	CostTimeSeriesPoint,
+	FolderStats,
+	ModelPerformancePoint,
+	TimeRange,
+} from "../types";
+
+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,
+	}));
+}

package/src/client/index.tsx

@@ -1,4 +1,8 @@
 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";