@oh-my-pi/omp-stats 18.7.0 → 18.8.1

package/src/client/data/live.tsx

@@ -3,21 +3,17 @@
  * version every query revalidates against, background ingest progress, and
  * the rollup indexing backlog.
  *
- * Any component can `useLive()`; queries (see `useQuery`) refetch whenever
- * `version` advances, so rows ingested in the background repaint the active
- * page without a manual refresh.
+ * The state lives in a module store read through narrow selectors, so a
+ * progress tick only re-renders what shows progress: `useLiveVersion()` for
+ * queries (see `useQuery`), `useLiveStatus()` for the chrome.
  */
 
-import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { type ReactNode, useEffect, useSyncExternalStore } from "react";
 import * as api from "../api";
 import type { LiveStatus, LiveSyncStatus } from "../types";
 
-export interface LiveState {
-	/**
-	 * Client-side data version; bumps whenever the server's version changes
-	 * (including after reconnecting to a restarted server).
-	 */
-	version: number;
+/** Ingest status shown by the chrome. */
+export interface LiveStatusView {
 	sync: LiveSyncStatus;
 	/** Hours whose rollups are still being built; wide ranges may be incomplete. */
 	indexingHours: number;
@@ -36,50 +32,94 @@ const IDLE_SYNC: LiveSyncStatus = {
 	error: null,
 };
 
-const LiveContext = createContext<LiveState>({
-	version: 0,
-	sync: IDLE_SYNC,
-	indexingHours: 0,
-	connected: false,
-	requestSync: () => {},
-});
+function requestSync(): void {
+	api.requestSync().catch(() => {});
+}
 
-export function LiveProvider({ children }: { children: ReactNode }) {
-	const [status, setStatus] = useState<{ server: LiveStatus | null; version: number }>({ server: null, version: 0 });
-	const [connected, setConnected] = useState(false);
+let lastServerVersion: number | null = null;
+/** Distinct server versions seen (including across server restarts). */
+let seenVersions = 0;
+/**
+ * Client-side data version; bumps whenever the server's version changes.
+ * Lags `seenVersions` by one so the first stream message doesn't refetch what
+ * just loaded.
+ */
+let version = 0;
+let status: LiveStatusView = { sync: IDLE_SYNC, indexingHours: 0, connected: false, requestSync };
+const listeners = new Set<() => void>();
+
+function subscribe(listener: () => void): () => void {
+	listeners.add(listener);
+	return () => listeners.delete(listener);
+}
+
+function emit(): void {
+	for (const listener of listeners) listener();
+}
+
+function sameSync(a: LiveSyncStatus, b: LiveSyncStatus): boolean {
+	return (
+		a.phase === b.phase &&
+		a.current === b.current &&
+		a.total === b.total &&
+		a.processed === b.processed &&
+		a.lastSyncedAt === b.lastSyncedAt &&
+		a.error === b.error
+	);
+}
+
+function receive(next: LiveStatus): void {
+	if (lastServerVersion !== next.version) {
+		lastServerVersion = next.version;
+		seenVersions++;
+	}
+	const nextVersion = Math.max(0, seenVersions - 1);
+	const statusChanged = next.indexingHours !== status.indexingHours || !sameSync(next.sync, status.sync);
+	if (!statusChanged && nextVersion === version) return;
+	version = nextVersion;
+	if (statusChanged) status = { ...status, sync: next.sync, indexingHours: next.indexingHours };
+	emit();
+}
 
+function setConnected(connected: boolean): void {
+	if (connected === status.connected) return;
+	status = { ...status, connected };
+	emit();
+}
+
+const getStatus = (): LiveStatusView => status;
+const getVersion = (): number => version;
+const getDisabledVersion = (): number => -1;
+
+/** Current data version, read outside render (e.g. when a fetch starts). */
+export function currentLiveVersion(): number {
+	return version;
+}
+
+/** Owns the `/api/events` stream; mount once at the app root. */
+export function LiveProvider({ children }: { children: ReactNode }) {
 	useEffect(() => {
 		const source = new EventSource("/api/events");
 		source.onopen = () => setConnected(true);
 		source.onerror = () => setConnected(false);
-		source.onmessage = event => {
-			const next = JSON.parse(event.data) as LiveStatus;
-			setStatus(prev => ({
-				server: next,
-				version: prev.server && prev.server.version === next.version ? prev.version : prev.version + 1,
-			}));
+		source.onmessage = event => receive(JSON.parse(event.data) as LiveStatus);
+		return () => {
+			source.close();
+			setConnected(false);
 		};
-		return () => source.close();
-	}, []);
-
-	const requestSync = useCallback(() => {
-		api.requestSync().catch(() => {});
 	}, []);
+	return children;
+}
 
-	const value = useMemo<LiveState>(
-		() => ({
-			// Start at 0 so the first stream message (version 1) doesn't refetch what just loaded.
-			version: Math.max(0, status.version - 1),
-			sync: status.server?.sync ?? IDLE_SYNC,
-			indexingHours: status.server?.indexingHours ?? 0,
-			connected,
-			requestSync,
-		}),
-		[status, connected, requestSync],
-	);
-	return <LiveContext.Provider value={value}>{children}</LiveContext.Provider>;
+/** Ingest status for the chrome; data-version bumps alone don't re-render. */
+export function useLiveStatus(): LiveStatusView {
+	return useSyncExternalStore(subscribe, getStatus);
 }
 
-export function useLive(): LiveState {
-	return useContext(LiveContext);
+/**
+ * Data version for queries. Disabled (hidden) consumers read a constant -1 so
+ * live traffic never re-renders them.
+ */
+export function useLiveVersion(enabled = true): number {
+	return useSyncExternalStore(subscribe, enabled ? getVersion : getDisabledVersion);
 }

package/src/client/data/query-store.ts

@@ -0,0 +1,108 @@
+/**
+ * Framework-free query cache behind `useQuery`: per-key cached results in
+ * size-bounded buckets, and one shared in-flight request per key that is
+ * aborted once its last waiter leaves.
+ */
+
+export interface CacheEntry {
+	data: unknown;
+	updatedAt: number;
+	version: number;
+}
+
+interface CacheBucket {
+	entries: Map<string, CacheEntry>;
+	limit: number;
+}
+
+export interface Inflight {
+	promise: Promise<unknown>;
+	controller: AbortController;
+	/** Queries (and prefetches) waiting on this request. */
+	waiters: number;
+}
+
+/** Handed to every fetcher. */
+export interface QueryFetchContext {
+	/** Aborted once no query waits for this request any more. */
+	signal: AbortSignal;
+}
+
+/**
+ * Loads one key's data. `previous` is the cached data for this key, for
+ * conditional revalidation; `undefined` on first load. It is a separate
+ * parameter so fetchers that ignore it still let `T` be inferred from their
+ * return type.
+ */
+export type QueryFetcher<T> = (context: QueryFetchContext, previous: T | undefined) => Promise<T>;
+
+const defaultBucket: CacheBucket = { entries: new Map(), limit: 128 };
+/** Full session traces: MBs each, at most a few worth keeping. */
+const traceBucket: CacheBucket = { entries: new Map(), limit: 4 };
+/** Request detail payloads (full prompts and responses). */
+const requestBucket: CacheBucket = { entries: new Map(), limit: 16 };
+
+const inflight = new Map<string, Inflight>();
+
+function bucketFor(key: string): CacheBucket {
+	if (key.startsWith('["trace",')) return traceBucket;
+	if (key.startsWith('["request",')) return requestBucket;
+	return defaultBucket;
+}
+
+export function cachedEntry(key: string): CacheEntry | undefined {
+	return bucketFor(key).entries.get(key);
+}
+
+/** The shared request currently running for `key`, if any. */
+export function inflightRequest(key: string): Inflight | undefined {
+	return inflight.get(key);
+}
+
+function remember(key: string, entry: CacheEntry): void {
+	const { entries, limit } = bucketFor(key);
+	entries.delete(key);
+	entries.set(key, entry);
+	if (entries.size > limit) {
+		const oldest = entries.keys().next().value;
+		if (oldest !== undefined) entries.delete(oldest);
+	}
+}
+
+/**
+ * Fetch into the cache (tagged with live data `version`), sharing one request
+ * among concurrent callers of the same key. The caller holds one waiter on
+ * the returned request; pair with {@link releaseQuery}.
+ */
+export function loadQuery<T>(key: string, version: number, fetcher: QueryFetcher<T>): Inflight {
+	const pending = inflight.get(key);
+	if (pending) {
+		pending.waiters++;
+		return pending;
+	}
+	const controller = new AbortController();
+	// Entries for a key are only ever written by fetchers of that key's type.
+	const previous = cachedEntry(key)?.data as T | undefined;
+	const request: Inflight = {
+		promise: fetcher({ signal: controller.signal }, previous)
+			.then(data => {
+				remember(key, { data, updatedAt: Date.now(), version });
+				return data;
+			})
+			.finally(() => {
+				if (inflight.get(key) === request) inflight.delete(key);
+			}),
+		controller,
+		waiters: 1,
+	};
+	inflight.set(key, request);
+	return request;
+}
+
+/** Drop one waiter; the last one out aborts the request. */
+export function releaseQuery(key: string, request: Inflight): void {
+	request.waiters--;
+	if (request.waiters > 0) return;
+	if (inflight.get(key) === request) inflight.delete(key);
+	request.controller.abort();
+}

package/src/client/data/query.ts

@@ -2,31 +2,26 @@
  * `useQuery`: cached, live-revalidating data fetching for dashboard pages.
  *
  * - Results are cached per key for the page session, so revisiting a page or
- *   a range renders instantly from memory.
+ *   a range renders instantly from memory. Multi-MB detail payloads (traces,
+ *   request details) live in their own small LRUs so they don't pile up.
  * - A key change keeps the previous key's data on screen (`stale: true`) until
  *   the new data lands, so charts morph instead of flashing skeletons.
  * - Every cached entry remembers the live data version it was fetched at
- *   (see `useLive`); when the version advances, enabled queries refetch in the
- *   background, throttled so a burst of ingest batches costs one request.
- * - Identical keys share one in-flight request.
+ *   (see `useLiveVersion`); when the version advances, enabled queries refetch
+ *   in the background, throttled so a burst of ingest batches costs one request.
+ * - Identical keys share one in-flight request; it is aborted once no query
+ *   waits for it any more.
+ * - Fetchers receive the cached data for their key, so conditional requests
+ *   can resolve to that same object; an unchanged reference does not re-render.
  */
 
 import { startTransition, useCallback, useEffect, useReducer, useRef, useState } from "react";
-import { useLive } from "./live";
+import { currentLiveVersion, useLiveVersion } from "./live";
+import { cachedEntry, type Inflight, inflightRequest, loadQuery, type QueryFetcher, releaseQuery } from "./query-store";
 
-interface CacheEntry {
-	data: unknown;
-	updatedAt: number;
-	version: number;
-}
-
-const CACHE_LIMIT = 128;
 /** Minimum spacing between live-driven refetches of one query. */
 const LIVE_REFETCH_THROTTLE_MS = 1500;
 
-const cache = new Map<string, CacheEntry>();
-const inflight = new Map<string, Promise<unknown>>();
-
 export interface QueryOptions {
 	/** Only enabled queries fetch; hidden (kept-alive) pages pass `false`. Default true. */
 	enabled?: boolean;
@@ -49,48 +44,20 @@ export interface QueryResult<T> {
 	refetch: () => void;
 }
 
-function remember(key: string, entry: CacheEntry): void {
-	cache.delete(key);
-	cache.set(key, entry);
-	if (cache.size > CACHE_LIMIT) {
-		const oldest = cache.keys().next().value;
-		if (oldest !== undefined) cache.delete(oldest);
-	}
-}
-
-/** Fetch into the cache, sharing one request among concurrent callers of the same key. */
-function load<T>(key: string, fetcher: () => Promise<T>, version: number): Promise<T> {
-	const pending = inflight.get(key);
-	if (pending) return pending as Promise<T>;
-	const promise = fetcher()
-		.then(data => {
-			remember(key, { data, updatedAt: Date.now(), version });
-			return data;
-		})
-		.finally(() => {
-			inflight.delete(key);
-		});
-	inflight.set(key, promise);
-	return promise;
-}
-
 /** Warm the cache for a key the user is likely to open next. No-op if cached for this version. */
 export function prefetchQuery<T>(key: readonly unknown[], fetcher: () => Promise<T>, version: number): void {
 	const keyString = JSON.stringify(key);
-	const entry = cache.get(keyString);
+	const entry = cachedEntry(keyString);
 	if (entry && entry.version >= version) return;
-	load(keyString, fetcher, version).catch(() => {});
+	// Never released: a prefetch runs to completion.
+	loadQuery(keyString, currentLiveVersion(), fetcher).promise.catch(() => {});
 }
 
-export function useQuery<T>(
-	key: readonly unknown[],
-	fetcher: () => Promise<T>,
-	options?: QueryOptions,
-): QueryResult<T> {
+export function useQuery<T>(key: readonly unknown[], fetcher: QueryFetcher<T>, options?: QueryOptions): QueryResult<T> {
 	const keyString = JSON.stringify(key);
 	const enabled = options?.enabled ?? true;
 	const pollMs = options?.pollMs;
-	const { version } = useLive();
+	const version = useLiveVersion(enabled);
 
 	const [, rerender] = useReducer((n: number) => n + 1, 0);
 	const [error, setError] = useState<{ key: string; error: Error } | null>(null);
@@ -100,35 +67,59 @@ export function useQuery<T>(
 	fetcherRef.current = fetcher;
 	const keyRef = useRef(keyString);
 	keyRef.current = keyString;
-	const versionRef = useRef(version);
-	versionRef.current = version;
 	const lastShown = useRef<{ key: string; data: unknown; updatedAt: number } | null>(null);
 	const lastFetchAt = useRef(0);
+	/** The request this query currently waits on. */
+	const waiting = useRef<{ key: string; request: Inflight } | null>(null);
 
 	const run = useCallback((targetKey: string) => {
 		lastFetchAt.current = Date.now();
+		const current = waiting.current;
+		if (current?.key === targetKey && inflightRequest(targetKey) === current.request) return;
+		const shownBefore = cachedEntry(targetKey)?.data;
 		setRefreshing(true);
-		load(targetKey, () => fetcherRef.current(), versionRef.current)
-			.then(() => {
+		const request = loadQuery(targetKey, currentLiveVersion(), fetcherRef.current);
+		waiting.current = { key: targetKey, request };
+		// Join the new request before leaving the old one, so a shared request isn't aborted in between.
+		if (current) releaseQuery(current.key, current.request);
+		request.promise
+			.then(data => {
 				if (keyRef.current !== targetKey) return;
+				// Revalidated to the very same object: nothing on screen changes.
+				if (data === shownBefore) {
+					setError(prev => (prev === null ? prev : null));
+					return;
+				}
 				startTransition(() => {
 					setError(null);
 					rerender();
 				});
 			})
 			.catch((err: unknown) => {
-				if (keyRef.current !== targetKey) return;
+				if (keyRef.current !== targetKey || request.controller.signal.aborted) return;
 				setError({ key: targetKey, error: err instanceof Error ? err : new Error(String(err)) });
 			})
 			.finally(() => {
+				if (waiting.current?.request === request) waiting.current = null;
 				if (keyRef.current === targetKey) setRefreshing(false);
 			});
 	}, []);
 
+	/** Stop waiting so an abandoned multi-MB fetch can be aborted. */
+	const leave = useCallback(() => {
+		const current = waiting.current;
+		waiting.current = null;
+		if (current) releaseQuery(current.key, current.request);
+	}, []);
+
+	// Unmounting, disabling, or switching keys abandons the current request.
+	useEffect(() => leave, [leave]);
+
 	// Fetch on key change / enable / data-version bump when the cache is behind.
 	useEffect(() => {
+		if (!enabled || (waiting.current && waiting.current.key !== keyString)) leave();
 		if (!enabled) return;
-		const entry = cache.get(keyString);
+		const entry = cachedEntry(keyString);
 		if (entry && entry.version >= version) return;
 		const wait = entry ? lastFetchAt.current + LIVE_REFETCH_THROTTLE_MS - Date.now() : 0;
 		if (wait <= 0) {
@@ -137,7 +128,7 @@ export function useQuery<T>(
 		}
 		const timer = setTimeout(() => run(keyString), wait);
 		return () => clearTimeout(timer);
-	}, [keyString, enabled, version, run]);
+	}, [keyString, enabled, version, run, leave]);
 
 	useEffect(() => {
 		if (!enabled || !pollMs) return;
@@ -149,7 +140,7 @@ export function useQuery<T>(
 
 	const refetch = useCallback(() => run(keyRef.current), [run]);
 
-	const entry = cache.get(keyString);
+	const entry = cachedEntry(keyString);
 	if (entry) lastShown.current = { key: keyString, data: entry.data, updatedAt: entry.updatedAt };
 	const shown = lastShown.current;
 	const currentError = error?.key === keyString ? error.error : null;

package/src/client/routes/CostsRoute.tsx

@@ -62,11 +62,13 @@ const UTC_DAY_LONG = new Intl.DateTimeFormat(undefined, {
 });
 
 export function CostsRoute({ active, range }: CostsRouteProps) {
-	const query = useQuery(["costs", range], () => getCostDashboardStats(range), { enabled: active });
+	const query = useQuery(["costs", range], ({ signal }) => getCostDashboardStats(range, signal), { enabled: active });
 	const meta = rangeMeta(range);
 	const [split, setSplit] = useState<SplitMode>("model");
 	const [hidden, toggleSeries] = useHiddenSeries();
 	const view = useMemo(() => (query.data ? buildCostsView(query.data, range) : null), [query.data, range]);
+	// Stable columns: a fresh array would make Table re-sort on every render.
+	const columns = useMemo(() => (view ? buildCostColumns(view) : []), [view]);
 	const isEmpty = (data: CostDashboardStats) => data.costSeries.length === 0;
 	const empty = <EmptyState title="No usage in this range" hint="Pick a wider range in the top bar." />;
 
@@ -167,7 +169,7 @@ export function CostsRoute({ active, range }: CostsRouteProps) {
 							<Table
 								rows={view.summary.models}
 								rowKey={row => row.key}
-								columns={buildCostColumns(view)}
+								columns={columns}
 								initialSort={{ key: "cost", dir: "desc" }}
 								limit={20}
 							/>

package/src/client/routes/ErrorsRoute.tsx

@@ -44,7 +44,9 @@ const LOAD_STEPS = [50, 200, 1_000] as const;
 export function ErrorsRoute({ active, range, onRequestClick }: ErrorsRouteProps) {
 	const [step, setStep] = useState(0);
 	const limit = LOAD_STEPS[step];
-	const errors = useQuery(["errors", range, limit], () => getRecentErrors(range, limit), { enabled: active });
+	const errors = useQuery(["errors", range, limit], ({ signal }) => getRecentErrors(range, limit, signal), {
+		enabled: active,
+	});
 	const [selectedSignature, setSelectedSignature] = useState<string | null>(null);
 	const [selectedModel, setSelectedModel] = useState<string | null>(null);
 	const [search, setSearch] = useState("");

package/src/client/routes/FrustrationRoute.tsx

@@ -53,7 +53,7 @@ const ALL_CLASSES = "*";
 
 export function FrustrationRoute({ active, range }: FrustrationRouteProps) {
 	const [running, setRunning] = useState(false);
-	const stats = useQuery(["frustration", range], () => getFrustrationDashboardStats(range), {
+	const stats = useQuery(["frustration", range], ({ signal }) => getFrustrationDashboardStats(range, signal), {
 		enabled: active,
 		pollMs: running ? RUNNING_POLL_MS : undefined,
 	});

package/src/client/routes/GainRoute.tsx

@@ -39,7 +39,9 @@ interface SourceRow extends GainSourceTotals {
 
 export function GainRoute({ active, range }: GainRouteProps) {
 	const [project, setProject] = useState<string | null>(null);
-	const gain = useQuery(["gain", range, project], () => getGainDashboardStats(range, project), { enabled: active });
+	const gain = useQuery(["gain", range, project], ({ signal }) => getGainDashboardStats(range, project, signal), {
+		enabled: active,
+	});
 	const meta = rangeMeta(range);
 	const data = gain.data;
 

package/src/client/routes/ModelsRoute.tsx

@@ -60,13 +60,20 @@ const SHARE_OPTIONS = [
 const SHARE_LIMIT = 6;
 
 export function ModelsRoute({ active, range }: ModelsRouteProps) {
-	const query = useQuery(["models", range], () => getModelDashboardStats(range), { enabled: active });
+	const query = useQuery(["models", range], ({ signal }) => getModelDashboardStats(range, signal), {
+		enabled: active,
+	});
 	const meta = rangeMeta(range);
 	const [mode, setMode] = useState<ShareMode>("share");
 	const [hidden, toggleSeries] = useHiddenSeries();
 	const [expandedKey, setExpandedKey] = useState<string | null>(null);
 	const view = useMemo(() => (query.data ? buildModelsView(query.data, range) : null), [query.data, range]);
 	const bucketWord = bucketName(meta.bucketMs);
+	// Stable columns: a fresh array would make Table re-sort on every render.
+	const columns = useMemo(
+		() => (view ? buildModelColumns(view, expandedKey, bucketWord) : []),
+		[view, expandedKey, bucketWord],
+	);
 	const isEmpty = (data: ModelDashboardStats) => data.byModel.length === 0;
 	const empty = <EmptyState title="No model usage in this range" hint="Pick a wider range in the top bar." />;
 
@@ -185,7 +192,7 @@ export function ModelsRoute({ active, range }: ModelsRouteProps) {
 							<Table
 								rows={view.models}
 								rowKey={row => modelKey(row.model, row.provider)}
-								columns={buildModelColumns(view, expandedKey, bucketWord)}
+								columns={columns}
 								initialSort={{ key: "requests", dir: "desc" }}
 								limit={25}
 								onRowClick={row => {

package/src/client/routes/OverviewRoute.tsx

@@ -62,8 +62,8 @@ const TOKEN_MIX = [
 ] as const;
 
 export function OverviewRoute({ active, range, onRequestClick }: OverviewRouteProps) {
-	const overview = useQuery(["overview", range], () => getOverviewStats(range), { enabled: active });
-	const recent = useQuery(["recent-requests"], () => getRecentRequests(12), { enabled: active });
+	const overview = useQuery(["overview", range], ({ signal }) => getOverviewStats(range, signal), { enabled: active });
+	const recent = useQuery(["recent-requests"], ({ signal }) => getRecentRequests(12, signal), { enabled: active });
 	const [metric, setMetric] = useState<ActivityMetric>("requests");
 	const meta = rangeMeta(range);
 

package/src/client/routes/ProjectsRoute.tsx

@@ -43,7 +43,7 @@ const TABLE_LIMIT = 100;
 const TOP_LIMIT = 8;
 
 export function ProjectsRoute({ active, range }: ProjectsRouteProps) {
-	const folders = useQuery(["projects", range], () => getFolderStats(range), { enabled: active });
+	const folders = useQuery(["projects", range], ({ signal }) => getFolderStats(range, signal), { enabled: active });
 	const [search, setSearch] = useState("");
 	// Benchmarks and scratch sessions can leave tens of thousands of one-off temp folders; hide them by default.
 	const [hideTemporary, setHideTemporary] = useState(true);

package/src/client/routes/ProvidersRoute.tsx

@@ -75,14 +75,16 @@ interface WindowRef {
 }
 
 export function ProvidersRoute({ active, range }: ProvidersRouteProps) {
-	const stats = useQuery(["providers", range], () => getProviderDashboardStats(range), { enabled: active });
+	const stats = useQuery(["providers", range], ({ signal }) => getProviderDashboardStats(range, signal), {
+		enabled: active,
+	});
 	const [metric, setMetric] = useState<BurnMetric>("tokens");
 	const [hidden, toggleHidden] = useHiddenSeries();
 	const meta = rangeMeta(range);
 
 	// Subscription windows load independently: insights for every provider
 	// first, then utilization series for the one provider being charted.
-	const windows = useQuery(["provider-windows", range], () => getProviderWindowStats(range, null), {
+	const windows = useQuery(["provider-windows", range], ({ signal }) => getProviderWindowStats(range, null, signal), {
 		enabled: active,
 	});
 	const [picked, setPicked] = useState<WindowRef | null>(null);
@@ -90,7 +92,7 @@ export function ProvidersRoute({ active, range }: ProvidersRouteProps) {
 	const selectedProvider = selected?.provider ?? null;
 	const accounts = useQuery(
 		["provider-windows", range, selectedProvider],
-		() => getProviderWindowStats(range, selectedProvider),
+		({ signal }) => getProviderWindowStats(range, selectedProvider, signal),
 		{ enabled: active && selectedProvider !== null },
 	);
 

package/src/client/routes/RequestsRoute.tsx

@@ -47,7 +47,7 @@ type StatusFilter = "all" | RequestStatus;
 export function RequestsRoute({ active, range, onRequestClick }: RequestsRouteProps) {
 	const [step, setStep] = useState(0);
 	const limit = LOAD_STEPS[step];
-	const log = useQuery(["requests-log", limit], () => getRecentRequests(limit), { enabled: active });
+	const log = useQuery(["requests-log", limit], ({ signal }) => getRecentRequests(limit, signal), { enabled: active });
 	const [search, setSearch] = useState("");
 	const [status, setStatus] = useState<StatusFilter>("all");
 	const meta = rangeMeta(range);

package/src/client/routes/ToolsRoute.tsx

@@ -57,7 +57,7 @@ const ATTRIBUTION_NOTE =
 const NO_CALLS = <EmptyState title="No tool calls in this range" />;
 
 export function ToolsRoute({ active, range }: ToolsRouteProps) {
-	const tools = useQuery(["tools", range], () => getToolDashboardStats(range), { enabled: active });
+	const tools = useQuery(["tools", range], ({ signal }) => getToolDashboardStats(range, signal), { enabled: active });
 	const [metric, setMetric] = useState<CallMetric>("calls");
 	const [hidden, toggleHidden] = useHiddenSeries();
 	const [pickedTool, setToolFilter] = useState<string | null>(null);

package/src/client/routes/TracesRoute.tsx

@@ -49,10 +49,11 @@ function ModelList({ models }: { models: string[] }) {
 
 export function TracesRoute({ active, session, onOpenSession }: TracesRouteProps) {
 	const [filter, setFilter] = useState("");
-	const sessions = useQuery(["sessions", SESSION_LIMIT], () => getSessions(SESSION_LIMIT), {
-		pollMs: 30000,
-		enabled: active && session === null,
-	});
+	const sessions = useQuery(
+		["sessions", SESSION_LIMIT],
+		({ signal }) => getSessions(SESSION_LIMIT, undefined, signal),
+		{ pollMs: 30000, enabled: active && session === null },
+	);
 
 	const filtered = useMemo(() => {
 		const rows = sessions.data ?? [];