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

package/src/client/data/formatters.ts

@@ -1,4 +1,4 @@
-import { formatDistanceToNow } from "@oh-my-pi/pi-utils/dates";
+import { format, formatDistanceToNow } from "@oh-my-pi/pi-utils/dates";
 import type { MessageStats } from "../types";
 
 export function formatInteger(value: number): string {
@@ -24,22 +24,25 @@ export function formatEstimatedCost(value: number, unpricedRequests: number, dig
 }
 
 /**
- * Format one request's cost, distinguishing unpriced usage from free usage.
+ * Whether one request's zero cost means unknown spend rather than free usage.
  * Mirrors the server's `unpricedRequestSql`: `xai-oauth` is billed through a
  * subscription, and `costUnpriced` marks a row the ingest path could not price
  * (a scheduled card with no recoverable request timestamp).
  */
+export function isUnpricedMessage(message: Pick<MessageStats, "provider" | "usage" | "costUnpriced">): boolean {
+	return (
+		message.usage.totalTokens > 0 &&
+		message.usage.cost.total === 0 &&
+		(message.provider === "xai-oauth" || message.costUnpriced === true)
+	);
+}
+
+/** Format one request's cost, distinguishing unpriced usage from free usage. */
 export function formatMessageCost(
 	message: Pick<MessageStats, "provider" | "usage" | "costUnpriced">,
 	digits?: number,
 ): string {
-	const unpricedRequests =
-		message.usage.totalTokens > 0 &&
-		message.usage.cost.total === 0 &&
-		(message.provider === "xai-oauth" || message.costUnpriced === true)
-			? 1
-			: 0;
-	return formatEstimatedCost(message.usage.cost.total, unpricedRequests, digits);
+	return formatEstimatedCost(message.usage.cost.total, isUnpricedMessage(message) ? 1 : 0, digits);
 }
 
 export function formatPercent(value: number, digits = 1): string {
@@ -53,6 +56,14 @@ export function formatDurationMs(value: number | null, digits?: number): string
 	return `${sec.toFixed(d)}s`;
 }
 
+/** Wall-clock length: seconds below a minute, then `17m 41s` / `2h 05m`. */
+export function formatElapsed(ms: number): string {
+	if (ms < 60_000) return formatDurationMs(ms);
+	const totalMin = Math.floor(ms / 60_000);
+	if (totalMin < 60) return `${totalMin}m ${String(Math.floor((ms % 60_000) / 1000)).padStart(2, "0")}s`;
+	return `${Math.floor(totalMin / 60)}h ${String(totalMin % 60).padStart(2, "0")}m`;
+}
+
 export function formatTokensPerSecond(value: number | null): string {
 	if (value === null) return "-";
 	return value.toFixed(1);
@@ -62,6 +73,16 @@ export function formatRelativeTime(timestamp: number): string {
 	return formatDistanceToNow(new Date(timestamp), { addSuffix: true });
 }
 
+/** Absolute local date and time to the second ("Sep 28, 14:03:22"). */
+export function formatTimestamp(timestamp: number): string {
+	return format(new Date(timestamp), "MMM d, HH:mm:ss");
+}
+
+/** Project folder as stored by ingest (`/work-pi/`), without the slashes. */
+export function formatFolder(folder: string): string {
+	return folder.replace(/^\/+|\/+$/g, "") || "(root)";
+}
+
 export function formatBytes(value: number): string {
 	if (value >= 1e9) return `${(value / 1e9).toFixed(1)} GB`;
 	if (value >= 1e6) return `${(value / 1e6).toFixed(1)} MB`;

package/src/client/data/live.tsx

@@ -0,0 +1,85 @@
+/**
+ * Live dashboard state streamed from the server (`/api/events`): the data
+ * 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.
+ */
+
+import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useState } 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;
+	sync: LiveSyncStatus;
+	/** Hours whose rollups are still being built; wide ranges may be incomplete. */
+	indexingHours: number;
+	/** The event stream is open. */
+	connected: boolean;
+	/** Ask the server to ingest new session data now. */
+	requestSync: () => void;
+}
+
+const IDLE_SYNC: LiveSyncStatus = {
+	phase: "idle",
+	current: 0,
+	total: 0,
+	processed: 0,
+	lastSyncedAt: null,
+	error: null,
+};
+
+const LiveContext = createContext<LiveState>({
+	version: 0,
+	sync: IDLE_SYNC,
+	indexingHours: 0,
+	connected: false,
+	requestSync: () => {},
+});
+
+export function LiveProvider({ children }: { children: ReactNode }) {
+	const [status, setStatus] = useState<{ server: LiveStatus | null; version: number }>({ server: null, version: 0 });
+	const [connected, setConnected] = useState(false);
+
+	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,
+			}));
+		};
+		return () => source.close();
+	}, []);
+
+	const requestSync = useCallback(() => {
+		api.requestSync().catch(() => {});
+	}, []);
+
+	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>;
+}
+
+export function useLive(): LiveState {
+	return useContext(LiveContext);
+}

package/src/client/data/query.ts

@@ -0,0 +1,166 @@
+/**
+ * `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 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.
+ */
+
+import { startTransition, useCallback, useEffect, useReducer, useRef, useState } from "react";
+import { useLive } from "./live";
+
+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;
+	/** Additionally refetch on this interval while enabled and the tab is visible. */
+	pollMs?: number;
+}
+
+export interface QueryResult<T> {
+	/** Data for the current key, or the previous key's data while it loads. */
+	data: T | null;
+	error: Error | null;
+	/** Nothing to show yet (first load of this query). */
+	loading: boolean;
+	/** `data` belongs to a previous key; the current key is still loading. */
+	stale: boolean;
+	/** A background request is in flight. */
+	refreshing: boolean;
+	/** When the shown data was fetched. */
+	updatedAt: number | null;
+	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);
+	if (entry && entry.version >= version) return;
+	load(keyString, fetcher, version).catch(() => {});
+}
+
+export function useQuery<T>(
+	key: readonly unknown[],
+	fetcher: () => Promise<T>,
+	options?: QueryOptions,
+): QueryResult<T> {
+	const keyString = JSON.stringify(key);
+	const enabled = options?.enabled ?? true;
+	const pollMs = options?.pollMs;
+	const { version } = useLive();
+
+	const [, rerender] = useReducer((n: number) => n + 1, 0);
+	const [error, setError] = useState<{ key: string; error: Error } | null>(null);
+	const [refreshing, setRefreshing] = useState(false);
+
+	const fetcherRef = useRef(fetcher);
+	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);
+
+	const run = useCallback((targetKey: string) => {
+		lastFetchAt.current = Date.now();
+		setRefreshing(true);
+		load(targetKey, () => fetcherRef.current(), versionRef.current)
+			.then(() => {
+				if (keyRef.current !== targetKey) return;
+				startTransition(() => {
+					setError(null);
+					rerender();
+				});
+			})
+			.catch((err: unknown) => {
+				if (keyRef.current !== targetKey) return;
+				setError({ key: targetKey, error: err instanceof Error ? err : new Error(String(err)) });
+			})
+			.finally(() => {
+				if (keyRef.current === targetKey) setRefreshing(false);
+			});
+	}, []);
+
+	// Fetch on key change / enable / data-version bump when the cache is behind.
+	useEffect(() => {
+		if (!enabled) return;
+		const entry = cache.get(keyString);
+		if (entry && entry.version >= version) return;
+		const wait = entry ? lastFetchAt.current + LIVE_REFETCH_THROTTLE_MS - Date.now() : 0;
+		if (wait <= 0) {
+			run(keyString);
+			return;
+		}
+		const timer = setTimeout(() => run(keyString), wait);
+		return () => clearTimeout(timer);
+	}, [keyString, enabled, version, run]);
+
+	useEffect(() => {
+		if (!enabled || !pollMs) return;
+		const interval = setInterval(() => {
+			if (!document.hidden) run(keyRef.current);
+		}, pollMs);
+		return () => clearInterval(interval);
+	}, [enabled, pollMs, run]);
+
+	const refetch = useCallback(() => run(keyRef.current), [run]);
+
+	const entry = cache.get(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;
+
+	return {
+		data: (shown?.data as T | undefined) ?? null,
+		error: currentError,
+		loading: !shown && !currentError,
+		stale: !!shown && shown.key !== keyString,
+		refreshing,
+		updatedAt: shown?.updatedAt ?? null,
+		refetch,
+	};
+}

package/src/client/data/range.ts

@@ -0,0 +1,82 @@
+/**
+ * Time-range metadata shared by every page: labels, the server's bucket size
+ * for the range (mirrors `getTimeRangeConfig` in `aggregator.ts`), tick
+ * formatting, and the contiguous bucket axis charts plot against.
+ */
+
+import { format } from "@oh-my-pi/pi-utils/dates";
+import type { TimeRange } from "../types";
+
+const MINUTE_MS = 60 * 1000;
+const HOUR_MS = 60 * MINUTE_MS;
+const DAY_MS = 24 * HOUR_MS;
+
+export interface RangeMeta {
+	/** Short selector label ("24h"). */
+	label: string;
+	/** Prose label for subtitles ("the last 24 hours"). */
+	windowLabel: string;
+	/** Span covered by the range; `null` for all time. */
+	spanMs: number | null;
+	/** Bucket size of the server's primary time series for this range. */
+	bucketMs: number;
+}
+
+const RANGE_META: Record<TimeRange, RangeMeta> = {
+	"1h": { label: "1h", windowLabel: "the last hour", spanMs: HOUR_MS, bucketMs: 5 * MINUTE_MS },
+	"24h": { label: "24h", windowLabel: "the last 24 hours", spanMs: DAY_MS, bucketMs: HOUR_MS },
+	"7d": { label: "7d", windowLabel: "the last 7 days", spanMs: 7 * DAY_MS, bucketMs: DAY_MS },
+	"30d": { label: "30d", windowLabel: "the last 30 days", spanMs: 30 * DAY_MS, bucketMs: DAY_MS },
+	"90d": { label: "90d", windowLabel: "the last 90 days", spanMs: 90 * DAY_MS, bucketMs: DAY_MS },
+	all: { label: "All", windowLabel: "all time", spanMs: null, bucketMs: DAY_MS },
+};
+
+const MAX_BUCKETS = 1500;
+
+/** Ranges in selector order. */
+export const TIME_RANGES: readonly TimeRange[] = ["1h", "24h", "7d", "30d", "90d", "all"];
+
+export function rangeMeta(range: TimeRange): RangeMeta {
+	return RANGE_META[range];
+}
+
+/** Tick/tooltip label for a bucket start, precise enough for the bucket size. */
+export function formatBucket(timestamp: number, bucketMs: number): string {
+	if (bucketMs < DAY_MS) return format(new Date(timestamp), bucketMs < HOUR_MS ? "HH:mm" : "MMM d HH:mm");
+	return format(new Date(timestamp), "MMM d");
+}
+
+/** Compact axis tick for a bucket start. */
+export function formatTick(timestamp: number, bucketMs: number): string {
+	if (bucketMs < DAY_MS) return format(new Date(timestamp), "HH:mm");
+	return format(new Date(timestamp), "MMM d");
+}
+
+/**
+ * Contiguous, ascending bucket starts covering `range`, aligned like the
+ * server's `(timestamp / bucketMs) * bucketMs`. For all time the axis starts at
+ * the earliest data point, so gaps between sessions still render as zeros;
+ * it is capped at {@link MAX_BUCKETS} so a stray epoch-zero timestamp cannot
+ * explode the axis into decades of empty days.
+ */
+export function bucketAxis(
+	range: TimeRange,
+	dataTimestamps: Iterable<number>,
+	bucketMs = RANGE_META[range].bucketMs,
+	now = Date.now(),
+): number[] {
+	const last = Math.floor(now / bucketMs) * bucketMs;
+	const span = RANGE_META[range].spanMs;
+	let first: number;
+	if (span !== null) {
+		first = Math.floor((now - span) / bucketMs) * bucketMs;
+	} else {
+		first = last;
+		for (const ts of dataTimestamps) if (ts < first) first = ts;
+		first = Math.floor(first / bucketMs) * bucketMs;
+	}
+	first = Math.max(first, last - (MAX_BUCKETS - 1) * bucketMs);
+	const buckets: number[] = [];
+	for (let t = first; t <= last; t += bucketMs) buckets.push(t);
+	return buckets;
+}

package/src/client/data/series.ts

@@ -0,0 +1,85 @@
+/**
+ * Turn the server's long-format bucket rows (`{ timestamp, key…, value }`)
+ * into dense chart series aligned to a bucket axis (see `bucketAxis`).
+ */
+
+import type { ChartSeries } from "../charts/types";
+import { OTHER_COLOR, SERIES_COLORS } from "./colors";
+
+/** Sum `value(point)` into a dense array aligned to `buckets`. Out-of-axis points are dropped. */
+export function densify<P extends { timestamp: number }>(
+	points: readonly P[],
+	buckets: readonly number[],
+	value: (point: P) => number,
+): number[] {
+	const index = bucketIndex(buckets);
+	const out = Array.from({ length: buckets.length }, () => 0);
+	for (const point of points) {
+		const i = index.get(point.timestamp);
+		if (i !== undefined) out[i] += value(point);
+	}
+	return out;
+}
+
+export interface PivotOptions<P> {
+	buckets: readonly number[];
+	/** Series identity for a row. */
+	key: (point: P) => string;
+	/** Display label for a series key; defaults to the key. */
+	label?: (key: string) => string;
+	value: (point: P) => number;
+	/** Keep the `limit` largest series (by total); fold the rest into "Other". */
+	limit?: number;
+	/** Fixed colors per key (e.g. from `buildModelColorLookup`); falls back to rank order. */
+	colors?: ReadonlyMap<string, string>;
+}
+
+/**
+ * Pivot long rows into one dense series per key, ranked by total (largest
+ * first). Series beyond `limit` merge into a trailing "Other" series.
+ */
+export function pivotSeries<P extends { timestamp: number }>(
+	points: readonly P[],
+	opts: PivotOptions<P>,
+): ChartSeries[] {
+	const index = bucketIndex(opts.buckets);
+	const byKey = new Map<string, number[]>();
+	for (const point of points) {
+		const i = index.get(point.timestamp);
+		if (i === undefined) continue;
+		const key = opts.key(point);
+		let values = byKey.get(key);
+		if (!values) {
+			values = Array.from({ length: opts.buckets.length }, () => 0);
+			byKey.set(key, values);
+		}
+		values[i] += opts.value(point);
+	}
+
+	const ranked = [...byKey.entries()]
+		.map(([key, values]) => ({ key, values, total: values.reduce((sum, v) => sum + v, 0) }))
+		.filter(entry => entry.total !== 0)
+		.sort((a, b) => b.total - a.total || a.key.localeCompare(b.key));
+
+	const limit = opts.limit ?? Number.POSITIVE_INFINITY;
+	const head = ranked.slice(0, limit);
+	const tail = ranked.slice(limit);
+	const series: ChartSeries[] = head.map((entry, rank) => ({
+		key: entry.key,
+		label: opts.label ? opts.label(entry.key) : entry.key,
+		color: opts.colors?.get(entry.key) ?? SERIES_COLORS[rank % SERIES_COLORS.length],
+		values: entry.values,
+	}));
+	if (tail.length > 0) {
+		const other = Array.from({ length: opts.buckets.length }, () => 0);
+		for (const entry of tail) for (let i = 0; i < other.length; i++) other[i] += entry.values[i];
+		series.push({ key: "__other__", label: `Other (${tail.length})`, color: OTHER_COLOR, values: other });
+	}
+	return series;
+}
+
+function bucketIndex(buckets: readonly number[]): Map<number, number> {
+	const index = new Map<number, number>();
+	for (let i = 0; i < buckets.length; i++) index.set(buckets[i], i);
+	return index;
+}

package/src/client/data/useHashRoute.ts

@@ -1,106 +1,64 @@
 import { useCallback, useEffect, useState } from "react";
-import type { DashboardSection } from "../app/routes";
+import { type DashboardSection, SECTIONS } from "../app/nav";
 import type { TimeRange } from "../types";
+import { TIME_RANGES } from "./range";
 
-const VALID_SECTIONS: DashboardSection[] = [
-	"overview",
-	"requests",
-	"traces",
-	"errors",
-	"models",
-	"providers",
-	"tools",
-	"costs",
-	"behavior",
-	"projects",
-	"gain",
-];
-
-const VALID_RANGES: TimeRange[] = ["1h", "24h", "7d", "30d", "90d", "all"];
-
-function parseHash(hash: string): { section: DashboardSection; range: TimeRange; session: string | null } {
-	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";
-	let session: string | null = null;
-	if (queryPart) {
-		const params = new URLSearchParams(queryPart);
-		const rangeParam = params.get("range") as TimeRange;
-		if (VALID_RANGES.includes(rangeParam)) {
-			range = rangeParam;
-		}
-		session = params.get("s");
-	}
+export interface HashRoute {
+	section: DashboardSection;
+	range: TimeRange;
+	/** Deep-linked trace session file (traces only). */
+	session: string | null;
+}
 
-	return { section, range, session };
+export function parseHash(hash: string): HashRoute {
+	const [pathPart, queryPart] = hash.replace(/^#\/?/, "").split("?");
+	const section = (SECTIONS as readonly string[]).includes(pathPart) ? (pathPart as DashboardSection) : "overview";
+	const params = new URLSearchParams(queryPart ?? "");
+	const rangeParam = params.get("range");
+	const range = (TIME_RANGES as readonly string[]).includes(rangeParam ?? "") ? (rangeParam as TimeRange) : "24h";
+	return { section, range, session: params.get("s") };
 }
 
-function buildHash(section: string, range: TimeRange, session?: string | null): string {
+export function buildHash({ section, range, session }: HashRoute): string {
 	const sessionPart = session ? `&s=${encodeURIComponent(session)}` : "";
-	return `/${section}?range=${range}${sessionPart}`;
+	return `#/${section}?range=${range}${sessionPart}`;
 }
 
+/**
+ * Dashboard location in the URL hash (`#/models?range=7d`). Setters update
+ * state synchronously and push a history entry, so the UI never waits on the
+ * `hashchange` round trip.
+ */
 export function useHashRoute() {
-	const [route, setRouteState] = useState(() => parseHash(window.location.hash));
+	const [route, setRoute] = useState(() => parseHash(window.location.hash));
 
 	useEffect(() => {
-		const handleHashChange = () => {
-			setRouteState(parseHash(window.location.hash));
-		};
-
-		window.addEventListener("hashchange", handleHashChange);
+		const onHashChange = () => setRoute(parseHash(window.location.hash));
+		window.addEventListener("hashchange", onHashChange);
+		window.addEventListener("popstate", onHashChange);
+		// Canonicalize a missing/partial hash without adding a history entry.
+		const canonical = buildHash(parseHash(window.location.hash));
+		if (window.location.hash !== canonical) history.replaceState(null, "", canonical);
 		return () => {
-			window.removeEventListener("hashchange", handleHashChange);
+			window.removeEventListener("hashchange", onHashChange);
+			window.removeEventListener("popstate", onHashChange);
 		};
 	}, []);
 
-	const updateHash = useCallback((section: string, range: TimeRange, session?: string | null) => {
-		window.location.hash = buildHash(section, range, session);
+	const navigate = useCallback((next: HashRoute) => {
+		setRoute(next);
+		const hash = buildHash(next);
+		if (window.location.hash !== hash) history.pushState(null, "", hash);
 	}, []);
 
 	const setSection = useCallback(
-		(newSection: DashboardSection) => {
+		(section: DashboardSection) =>
 			// The deep-linked session only applies to the traces view.
-			updateHash(newSection, route.range, newSection === "traces" ? route.session : null);
-		},
-		[route.range, route.session, updateHash],
+			navigate({ ...route, section, session: section === "traces" ? route.session : null }),
+		[route, navigate],
 	);
+	const setRange = useCallback((range: TimeRange) => navigate({ ...route, range }), [route, navigate]);
+	const setSession = useCallback((session: string | null) => navigate({ ...route, session }), [route, navigate]);
 
-	const setRange = useCallback(
-		(newRange: string) => {
-			const nextRange = VALID_RANGES.includes(newRange as TimeRange) ? (newRange as TimeRange) : "24h";
-			updateHash(route.section, nextRange, route.session);
-		},
-		[route.section, route.session, updateHash],
-	);
-
-	const setSession = useCallback(
-		(file: string | null) => {
-			updateHash(route.section, route.range, file);
-		},
-		[route.section, route.range, updateHash],
-	);
-
-	useEffect(() => {
-		const currentHash = window.location.hash;
-		const parsed = parseHash(currentHash);
-		const expectedHash = `#${buildHash(parsed.section, parsed.range, parsed.session)}`;
-		if (currentHash !== expectedHash) {
-			window.location.hash = buildHash(parsed.section, parsed.range, parsed.session);
-		}
-	}, []);
-
-	return {
-		section: route.section,
-		setSection,
-		range: route.range,
-		setRange,
-		session: route.session,
-		setSession,
-	};
+	return { ...route, setSection, setRange, setSession };
 }