@shivaedev/work-board 0.14.2 → 0.15.0

package/src/client/react/LiveControls.tsx

@@ -1,26 +1,21 @@
 import { useAtomValue } from "@effect/atom-react";
 import { Option } from "effect";
 import * as Atom from "effect/reactivity/Atom";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
 import { useQuery } from "@shivaedev/effect-react/result-state.ts";
 import type { BrowserClient } from "#client/client.ts";
 import { activeRead } from "./activeRead.ts";
 import { liveStatus } from "./liveStatus.ts";
+import { useMainLocation } from "./MainLocationContext.ts";
 import { shellIds } from "./shellIds.ts";
 
 const opening = Atom.make({ failed: false, pending: true });
-interface Page {
-	readonly kind: string;
-	readonly url: string;
-}
 export function LiveControls({
 	client,
-	current,
 	navigationPending,
 	navigationFailed,
 }: {
-	readonly client: BrowserClient;
-	readonly current: string;
+	readonly client: Pick<BrowserClient, "api" | "registry"> & { readonly updates: Pick<BrowserClient["updates"], "paused" | "status"> };
 	readonly navigationPending: boolean;
 	readonly navigationFailed: boolean;
 }) {
@@ -28,23 +23,8 @@ export function LiveControls({
 	const paused = useAtomValue(client.updates.paused);
 	const watcher = useQuery(client.api.watcher.query());
 	const watching = Option.getOrUndefined(watcher.data)?.watching === true;
-	const [page, setPage] = useState<Page>();
-	useEffect(() => {
-		function sync() {
-			const doc = document.getElementById("doc");
-			if (doc?.dataset.route !== current) {
-				return;
-			}
-			setPage({
-				kind: doc?.dataset.projection ?? "document",
-				url: current,
-			});
-		}
-		sync();
-		document.addEventListener("board-page", sync);
-		return () => document.removeEventListener("board-page", sync);
-	}, [current]);
-	const atom = useMemo(() => (page ? activeRead(client.api, page.kind, page.url) : opening), [client, page]);
+	const page = useMainLocation();
+	const atom = useMemo(() => (page.route ? activeRead(client.api, page.projection, page.route) : opening), [client, page.projection, page.route]);
 	const reading = useAtomValue(atom);
 	const displayed = liveStatus({
 		connection: status.connection,

package/src/client/react/MainLocationContext.ts

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+import { emptyMainLocation } from "./mainLocation.ts";
+
+export const MainLocationContext = createContext(emptyMainLocation);
+
+export function useMainLocation() {
+	return useContext(MainLocationContext);
+}

package/src/client/react/ProjectionFrame.tsx

@@ -21,7 +21,7 @@ export function ProjectionFrame<A, E>({
 	url,
 }: {
 	readonly atom: Atom.Atom<AsyncResult.AsyncResult<A, E>>;
-	readonly location: (data: A) => MainLocation & { readonly identity?: string | undefined; readonly status: number };
+	readonly location: (data: A) => Omit<MainLocation, "route" | "projection"> & { readonly identity?: string | undefined };
 	readonly onPage: (location: MainLocation) => void;
 	readonly render: (data: A) => ReactNode;
 	readonly source?: (data: A) => string | undefined;
@@ -36,7 +36,7 @@ export function ProjectionFrame<A, E>({
 	const failed = Option.isSome(query.cause);
 	useLayoutEffect(() => {
 		const element = hostRef.current;
-		if (element && element.dataset.route !== url) {
+		if (element) {
 			delete element.dataset.route;
 		}
 		if (!element || query.pending || (data === undefined && !failed)) {
@@ -56,8 +56,16 @@ export function ProjectionFrame<A, E>({
 				}
 				renderedRef.current = projectionChanges(mainElement, renderedRef.current, url);
 				mainElement.dataset.route = url;
-				flushSync(() => onPage({ file: main.file, title: mainElement.querySelector("h1")?.textContent?.trim(), view: main.view }));
-				document.dispatchEvent(new Event("board-page"));
+				flushSync(() =>
+					onPage({
+						file: main.file,
+						projection: route,
+						route: url,
+						status: main.status,
+						title: mainElement.querySelector("h1")?.textContent?.trim(),
+						view: main.view,
+					}),
+				);
 			});
 		}
 		const observer = new MutationObserver((records) => {
@@ -78,7 +86,7 @@ export function ProjectionFrame<A, E>({
 			active = false;
 			observer.disconnect();
 		};
-	}, [data, failed, query.pending, expectedSource, main.file, main.view, onPage, url]);
+	}, [data, failed, query.pending, expectedSource, main.file, main.status, main.view, onPage, route, url]);
 	return (
 		<>
 			<main

package/src/client/react/ReadingLibrary.tsx

@@ -1,5 +1,6 @@
 import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { LibraryContext, restoreLibrary } from "#client/react/LibraryContext.ts";
+import { useMainLocation } from "./MainLocationContext.ts";
 import { Modal } from "./Modal.tsx";
 import { ReadingHistory } from "./ReadingHistory.tsx";
 import type { ShellApi } from "./ShellApi.ts";
@@ -16,6 +17,7 @@ export function ReadingLibrary({
 	readonly close: () => void;
 	readonly children: ReactNode;
 }) {
+	const page = useMainLocation();
 	const key = `work-board:library:${document.documentElement.dataset.workspace}`;
 	const [saved, setSaved] = useState(() => restoreLibrary(key));
 	const [current, setCurrent] = useState("");
@@ -36,16 +38,15 @@ export function ReadingLibrary({
 	);
 	useEffect(() => {
 		function sync() {
-			const doc = document.getElementById("doc");
-			if (!doc?.dataset.route) {
+			if (!page.route) {
 				return;
 			}
-			const file = doc.dataset.file ?? "";
-			const title = doc.querySelector("h1")?.textContent?.trim() || file;
+			const file = page.file;
+			const title = page.title || file;
 			document.title = title ? `${title} · Work Board` : "Work Board";
 
 			setCurrent(file);
-			if (file && doc.querySelector("#favorite-toggle") && visitedRef.current !== `${file}:${title}`) {
+			if (file && page.view === "" && visitedRef.current !== `${file}:${title}`) {
 				visitedRef.current = `${file}:${title}`;
 				save({
 					favorites: savedRef.current.favorites,
@@ -54,13 +55,11 @@ export function ReadingLibrary({
 			}
 		}
 		sync();
-		document.addEventListener("board-page", sync);
 		document.addEventListener("board-index-change", sync);
 		return () => {
-			document.removeEventListener("board-page", sync);
 			document.removeEventListener("board-index-change", sync);
 		};
-	}, [save]);
+	}, [save, page]);
 
 	return (
 		<LibraryContext.Provider

package/src/client/react/SystemPage.tsx

@@ -4,6 +4,7 @@ import type { DiagnosticsProjection } from "#browser/views/remaining.ts";
 import { Card as Surface } from "#client/react/components/ui/Card.tsx";
 import { DiagnosticsGithub, DiagnosticsWindows, ObservedTime } from "./diagnosticsValues.tsx";
 import { FleetItemsContext } from "./FleetItemsContext.ts";
+import { githubLimited } from "./githubLimited.ts";
 import { SystemFleetLane } from "./SystemFleetLane.tsx";
 import { SystemHealth } from "./SystemHealth.tsx";
 export function SystemPage({ data: { sources: data, now } }: { readonly data: DiagnosticsProjection }) {
@@ -24,7 +25,7 @@ export function SystemPage({ data: { sources: data, now } }: { readonly data: Di
 					source={data.codex}
 				/>
 				<Card
-					attention={data.github.state === "ready" && [data.github.value.core, data.github.value.graphql].some((window) => window.remaining === 0)}
+					attention={data.github.state === "ready" && data.github.value.some((window) => githubLimited(window, now))}
 					name="GitHub"
 					render={(value) => <DiagnosticsGithub now={now} value={value} />}
 					source={data.github}

package/src/client/react/TodayOptions.tsx

@@ -1,6 +1,5 @@
 import { RegistryContext } from "@effect/atom-react";
-import { Effect, Option } from "effect";
-import * as Atom from "effect/reactivity/Atom";
+import { Cause, Effect, Option } from "effect";
 import { useContext, useMemo, useState } from "react";
 import { useAction, useQuery } from "@shivaedev/effect-react/result-state.ts";
 import type { Document, DocumentRequest } from "#browser/document/schema.ts";
@@ -11,8 +10,10 @@ import { documentQuery, navigationQuery, routeQueryOptions } from "#client/page/
 import { Button } from "#client/react/components/ui/Button.tsx";
 import { Popover } from "#client/react/components/ui/Popover.tsx";
 import { authorLabel } from "#client/responses/authorLabel.ts";
+import { saveFailure } from "#client/saveFailure.ts";
 import { fileUrl } from "#files/url.ts";
 import { createResponse } from "./createResponse.ts";
+import { useFormClient } from "./FormContext.ts";
 import type { ShellApi } from "./ShellApi.ts";
 
 export function TodayOptions({ api, item }: { readonly api: ShellApi; readonly item: InboxProjection["you"][number] }) {
@@ -42,42 +43,48 @@ export function TodayOptions({ api, item }: { readonly api: ShellApi; readonly i
 
 function InlineOptions({ api, document: data, request }: { readonly api: ShellApi; readonly document: Document; readonly request: DocumentRequest }) {
 	const registry = useContext(RegistryContext);
-	const [status, setStatus] = useState("");
-	const [outcome, setOutcome] = useState("");
+	const client = useFormClient();
 	const [label] = useState(() => authorLabel(() => localStorage, document.documentElement.dataset.workspace));
 	const [author, setAuthor] = useState(() => label.read("") || "maintainer");
 	const actionAtom = useMemo(
 		() =>
-			Atom.fn<string>()((choice) => {
-				const preview = request.preview;
-				const prompt = request.prompts?.[0];
-				if (!(preview && prompt && author.trim())) {
-					return Effect.fail("Add your local author label.");
-				}
-				const answers = [{ prompt: prompt.id, selected: [choice], text: "" }];
-				const submission = {
-					answers,
-					author: author.trim(),
-					body: answerBody([prompt], answers, ""),
-					id: `response.${crypto.randomUUID()}`,
-					question: preview.id,
-					revision: preview.reviewedRevision,
-					type: "answer" as const,
-				};
-				return createResponse(preview, submission, () => submission, setOutcome, setStatus).pipe(
-					Effect.tap(() =>
-						Effect.sync(() => {
-							label.save(author);
-							registry.refresh(api.inbox.query(undefined, routeQueryOptions));
-							registry.refresh(navigationQuery(api));
-							registry.refresh(documentQuery(api, fileUrl(data.file)));
-						}),
-					),
-				);
-			}),
-		[api, registry, request, author, data.file, label.save],
+			client.runtime.fn(
+				Effect.fn("Board.answerOption")(function* (choice: string) {
+					const preview = request.preview;
+					const prompt = request.prompts?.[0];
+					if (!(preview && prompt && author.trim())) {
+						return yield* Effect.fail("Add your local author label.");
+					}
+					const answers = [{ prompt: prompt.id, selected: [choice], text: "" }];
+					const submission = {
+						answers,
+						author: author.trim(),
+						body: answerBody([prompt], answers, ""),
+						id: `response.${crypto.randomUUID()}`,
+						question: preview.id,
+						revision: preview.reviewedRevision,
+						type: "answer" as const,
+					};
+					const saved = yield* createResponse(client, preview, submission);
+					label.save(author);
+					registry.refresh(api.inbox.query(undefined, routeQueryOptions));
+					registry.refresh(navigationQuery(api));
+					registry.refresh(documentQuery(api, fileUrl(data.file)));
+					return saved;
+				}),
+			),
+		[client, api, registry, request, author, data.file, label.save],
 	);
 	const action = useAction(actionAtom);
+	const failure = Option.getOrUndefined(Option.flatMap(action.cause, Cause.findErrorOption));
+	const saved = Option.getOrUndefined(action.data);
+	let status = saved ? `Saved: responses/${saved.id}.md. This records feedback, not acceptance.` : "";
+	if (failure) {
+		status = typeof failure === "string" ? failure : saveFailure(failure, "response").text;
+	}
+	if (action.pending) {
+		status = "Pending: registering reviewed context, then recording response…";
+	}
 	const prompt = request.prompts?.[0];
 	return (
 		<fieldset aria-label={`Options for ${data.identity}`} className="m-0 min-w-0 space-y-2 border-0 px-2 pb-2">
@@ -86,7 +93,7 @@ function InlineOptions({ api, document: data, request }: { readonly api: ShellAp
 					const text = data.metadata.options?.[index]?.label ?? optionLabel(option.id, option.source, request.preview?.reason ?? "");
 					return (
 						<Button
-							disabled={!(data.writable && author.trim()) || action.pending || outcome === "pending" || outcome === "saved"}
+							disabled={!(data.writable && author.trim()) || action.pending || Boolean(saved)}
 							key={option.id}
 							onClick={() => action.dispatch(option.id)}
 							size="sm"

package/src/client/react/VisualViewer.tsx

@@ -1,11 +1,14 @@
 import { useEffect, useRef, useState } from "react";
 import { KeyboardHints } from "./KeyboardHints.tsx";
+import { useMainLocation } from "./MainLocationContext.ts";
 import { shellIds } from "./shellIds.ts";
 import { VisualControls } from "./VisualControls.tsx";
 import { graphicWidth, visualFilename } from "./visualDimensions.ts";
 import type { VisualSelection } from "./visualSources.ts";
 
 export function VisualViewer({ selection, close }: { readonly selection: VisualSelection; readonly close: () => void }) {
+	const page = useMainLocation();
+	const openedPageRef = useRef(page);
 	const [selected, setSelected] = useState(selection.selected);
 	const [scale, setScale] = useState(100);
 	const [baseWidth, setBaseWidth] = useState(0);
@@ -27,13 +30,11 @@ export function VisualViewer({ selection, close }: { readonly selection: VisualS
 		return () => URL.revokeObjectURL(url);
 	}, [selection.drawing]);
 	useEffect(() => {
-		function changed() {
+		if (page !== openedPageRef.current) {
 			setStale(true);
 			setStatus("Source updated. This preview is the drawing/image opened earlier; close and reopen to inspect or save the latest source.");
 		}
-		document.addEventListener("board-page", changed);
-		return () => document.removeEventListener("board-page", changed);
-	}, []);
+	}, [page]);
 	function handleFitVisual() {
 		setBaseWidth(0);
 		setScale(100);
@@ -114,8 +115,7 @@ export function VisualViewer({ selection, close }: { readonly selection: VisualS
 				</button>
 			</div>
 			<p id={shellIds.visualContext}>
-				{image ? `${image.alt || "Local image"} · ${selected + 1} of ${selection.images.length} · ${image.local}` : "Mermaid diagram"} ·{" "}
-				{document.getElementById("doc")?.dataset.file}
+				{image ? `${image.alt || "Local image"} · ${selected + 1} of ${selection.images.length} · ${image.local}` : "Mermaid diagram"} · {page.file}
 				{image ? "" : " · Current drawing"}
 			</p>
 			<VisualControls

package/src/client/react/boardRouter.ts

@@ -1,8 +1,8 @@
-import { createRootRouteWithContext, createRoute, createRouter } from "@tanstack/react-router";
+import { createRootRouteWithContext, createRoute, createRouter, type RouterHistory } from "@tanstack/react-router";
 import { createElement } from "react";
 import { BoardShell } from "./BoardShell.tsx";
 import { loadBoardPage, type RouterShell } from "./loadBoardPage.ts";
-export function boardRouter(options?: RouterShell) {
+export function boardRouter(options?: RouterShell, history?: RouterHistory) {
 	const root = createRootRouteWithContext<{ readonly shell?: RouterShell }>()({
 		component: () => {
 			const { shell } = root.useRouteContext();
@@ -24,6 +24,7 @@ export function boardRouter(options?: RouterShell) {
 		path: "$",
 	});
 	return createRouter({
+		...(history ? { history } : {}),
 		context: options ? { shell: options } : {},
 		defaultPendingMs: Number.POSITIVE_INFINITY,
 		defaultPreloadStaleTime: 0,

package/src/client/react/createResponse.ts

@@ -1,40 +1,15 @@
-import { Effect, Equal } from "effect";
+import { Effect } from "effect";
 import type { QuestionPreview } from "#browser/responses/schema.ts";
-import { session } from "#client/entry.ts";
-import { responseFailure } from "#client/responses/failure.ts";
-import type { ResponseInput, ResponseSubmission } from "#client/responses/formSchema.ts";
+import type { ResponseSubmission } from "#client/responses/formSchema.ts";
+import type { FormClient } from "./FormContext.ts";
 
-export function createResponse(
+export const createResponse = Effect.fn("Board.createResponse")(function* (
+	client: FormClient,
 	source: QuestionPreview,
 	submission: ResponseSubmission,
-	current: () => ResponseInput | undefined,
-	setOutcome: (outcome: string) => void,
-	setStatus: (status: string) => void,
 ) {
-	return Effect.tryPromise({
-		catch: (error) => error,
-		try: async () => {
-			const native = session(window);
-			setOutcome("pending");
-			setStatus("Pending: registering reviewed context, then recording response…");
-			try {
-				const question = await native.mutate(
-					native.responses.registerQuestion.run({ item: source.item, request: source.request, revision: submission.revision }),
-				);
-				const { answerContext: _answerContext, recovery: _recovery, ...input } = submission;
-				await native.mutate(native.responses.recordResponse.run({ ...input, question: question.id }));
-				const newer = !Equal.equals(current(), submission);
-				setOutcome("saved");
-				setStatus(
-					`Saved: responses/${submission.id}.md. This records feedback, not acceptance.${newer ? " Your current draft remains unsaved." : ""}`,
-				);
-				return submission;
-			} catch (error) {
-				const failure = responseFailure(error);
-				setOutcome(failure.outcome);
-				setStatus(failure.text);
-				throw error;
-			}
-		},
-	});
-}
+	const question = yield* client.responses.registerQuestion.run({ item: source.item, request: source.request, revision: submission.revision });
+	const { answerContext: _answerContext, recovery: _recovery, ...input } = submission;
+	yield* client.responses.recordResponse.run({ ...input, question: question.id });
+	return submission;
+});

package/src/client/react/diagnosticsValues.tsx

@@ -1,4 +1,4 @@
-import type { CodexLimits, GithubLimits, UsageWindow } from "#browser/diagnostics/schema.ts";
+import type { CodexLimits, GithubLimits, GithubWindow, UsageWindow } from "#browser/diagnostics/schema.ts";
 import { resetLabel } from "#diagnostics/resetLabel.ts";
 export function ObservedTime({ at }: { readonly at: number | null }) {
 	return at === null ? (
@@ -71,33 +71,41 @@ export function DiagnosticsWindows({ value, now }: { readonly value: CodexLimits
 		</ul>
 	);
 }
+const GITHUB_RESOURCES: Readonly<Record<string, string>> = { core: "REST", graphql: "GraphQL", search: "Search" };
+const GITHUB_PAUSES = { "rate-limit": "Rate-limited", reserve: "GitHub paused below the 20% reserve" } as const;
 export function DiagnosticsGithub({ value, now }: { readonly value: GithubLimits; readonly now: number }) {
-	const windows = (
-		[
-			["REST", value.core],
-			["GraphQL", value.graphql],
-		] as const
-	).map(([name, window]) => <GithubWindow key={name} name={name} now={now} window={window} />);
 	return (
 		<>
-			<dl className="grid gap-4 text-sm [&_dt]:text-muted-foreground">{windows}</dl>
-			<p className="text-muted-foreground text-xs">Cached for one minute across all tabs.</p>
+			<dl className="grid gap-4 text-sm [&_dt]:text-muted-foreground">
+				{value.map((window) => (
+					<GithubResource key={window.resource} now={now} window={window} />
+				))}
+			</dl>
+			<p className="text-muted-foreground text-xs">Recorded from the rate-limit headers of Fleet's own GitHub responses.</p>
 		</>
 	);
 }
-function GithubWindow({ name, window, now }: { readonly name: string; readonly window: GithubLimits["core"]; readonly now: number }) {
+function GithubResource({ window, now }: { readonly window: GithubWindow; readonly now: number }) {
 	return (
-		<div>
-			<dt>{name}</dt>
+		<div data-resource={window.resource}>
+			<dt>{GITHUB_RESOURCES[window.resource] ?? window.resource}</dt>
 			<dd>
 				<strong>
 					{window.remaining} / {window.limit}
 				</strong>{" "}
 				remaining
 			</dd>
+			{window.limitedUntil !== null && window.limitedUntil > now ? (
+				<dd>
+					<strong>{GITHUB_PAUSES[window.limitedBy ?? "rate-limit"]}</strong> until <Reset at={window.limitedUntil} now={now} />
+				</dd>
+			) : null}
 			<dd>
 				Resets <Reset at={window.reset * 1000} now={now} />
 			</dd>
+			<dd>
+				Observed <time dateTime={new Date(window.observedAt).toISOString()}>{resetLabel(window.observedAt, now)}</time>
+			</dd>
 		</div>
 	);
 }

package/src/client/react/entry.tsx

@@ -1,43 +1,8 @@
-import { RegistryContext } from "@effect/atom-react";
-import { RouterProvider } from "@tanstack/react-router";
-import { createRoot } from "react-dom/client";
 import { session } from "#client/entry.ts";
-import { boardRouter } from "./boardRouter.ts";
+import { mountBoard } from "./mountBoard.tsx";
 import "#client/react/entry.css";
 
 const container = document.querySelector("[data-board-react-root]");
 if (container) {
-	const root = createRoot(container);
-	let native = session(window);
-	let started = false;
-	function ready() {
-		if (started) {
-			return;
-		}
-		started = true;
-		document.documentElement.dataset.boardReady = "true";
-		document.documentElement.dataset.js = "true";
-	}
-	const reading = history.state?.workBoard;
-	const router = boardRouter({ api: native.api, client: native, reading, ready, registry: native.registry });
-	if (reading) {
-		history.replaceState({ ...history.state, workBoard: reading }, "");
-	}
-	function render() {
-		root.render(
-			<RegistryContext.Provider value={native.registry}>
-				<RouterProvider router={router} />
-			</RegistryContext.Provider>,
-		);
-	}
-	render();
-	window.addEventListener("pageshow", (event) => {
-		if (!event.persisted) {
-			return;
-		}
-		native = session(window);
-		router.update({ context: { shell: { api: native.api, client: native, reading, ready, registry: native.registry } } });
-		void router.invalidate();
-		render();
-	});
+	mountBoard(container, () => session(window));
 }

package/src/client/react/githubLimited.ts

@@ -0,0 +1,5 @@
+import type { GithubWindow } from "#browser/diagnostics/schema.ts";
+
+export function githubLimited(window: GithubWindow, now: number) {
+	return window.remaining === 0 || (window.limitedUntil !== null && window.limitedUntil > now);
+}

package/src/client/react/mainLocation.ts

@@ -1,13 +1,10 @@
 export interface MainLocation {
 	readonly file: string;
+	readonly projection: string;
+	readonly route: string;
+	readonly status: number;
 	readonly title?: string | undefined;
 	readonly view: string;
 }
-export function displayedLocation(main: HTMLElement | null): MainLocation {
-	const file = main?.dataset.file ?? "";
-	const title = main?.querySelector("h1")?.textContent?.trim();
-	return { file, title, view: main?.dataset.view ?? "" };
-}
-export function sameMainLocation(previous: MainLocation, next: MainLocation) {
-	return previous.file === next.file && previous.view === next.view && previous.title === next.title;
-}
+
+export const emptyMainLocation: MainLocation = { file: "", projection: "document", route: "", status: 200, view: "" };

package/src/client/react/mountBoard.tsx

@@ -0,0 +1,49 @@
+import { RegistryContext } from "@effect/atom-react";
+import { RouterProvider } from "@tanstack/react-router";
+import { createRoot } from "react-dom/client";
+import type { BrowserClient } from "#client/client.ts";
+import { boardRouter } from "./boardRouter.ts";
+
+export function mountBoard(container: Element, readSession: () => BrowserClient) {
+	const root = createRoot(container);
+	let native = readSession();
+	let generation = 0;
+	let started = false;
+	function ready() {
+		if (started) {
+			return;
+		}
+		started = true;
+		document.documentElement.dataset.boardReady = "true";
+		document.documentElement.dataset.js = "true";
+	}
+	const reading = history.state?.workBoard;
+	let router = boardRouter({ api: native.api, client: native, reading, ready, registry: native.registry });
+	const navigation = router.history;
+	if (reading) {
+		history.replaceState({ ...history.state, workBoard: reading }, "");
+	}
+	function render() {
+		root.render(
+			<RegistryContext.Provider key={generation} value={native.registry}>
+				<RouterProvider router={router} />
+			</RegistryContext.Provider>,
+		);
+	}
+	render();
+	function restore(event: PageTransitionEvent) {
+		if (!event.persisted) {
+			return;
+		}
+		native = readSession();
+		generation += 1;
+		router = boardRouter({ api: native.api, client: native, reading, ready, registry: native.registry }, navigation);
+		render();
+	}
+	window.addEventListener("pageshow", restore);
+	return () => {
+		window.removeEventListener("pageshow", restore);
+		root.unmount();
+		navigation.destroy();
+	};
+}

package/src/client/react/navigationLocation.ts

@@ -1,7 +1,7 @@
 import { readingEntry } from "#client/react/storedReadings.ts";
 
-export function navigationFailure(status: string | undefined) {
-	const code = Number(status ?? 200);
+export function navigationFailure(status: number) {
+	const code = status;
 	if (code < 400) {
 		return "";
 	}

package/src/client/react/retryPage.ts

@@ -1,11 +1,11 @@
 import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
+import type { MainLocation } from "./mainLocation.ts";
 import { pageQueries } from "./pageQueries.ts";
 import type { ShellApi } from "./ShellApi.ts";
 
-export function retryPage(api: ShellApi, registry: AtomRegistry.AtomRegistry, url: string) {
-	const doc = document.getElementById("doc");
-	const queries = pageQueries(api, doc?.dataset.projection ?? "document", url);
-	if (Number(doc?.dataset.status ?? 200) < 400 && !queries.some((query) => registry.get(query)._tag === "Failure")) {
+export function retryPage(api: ShellApi, registry: AtomRegistry.AtomRegistry, page: MainLocation) {
+	const queries = pageQueries(api, page.projection, page.route);
+	if (page.status < 400 && !queries.some((query) => registry.get(query)._tag === "Failure")) {
 		return false;
 	}
 	for (const query of queries) {