@shivaedev/work-board 0.14.2 → 0.16.0

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,8 @@
+import type { AnyRouter } from "@tanstack/react-router";
 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 "";
 	}
@@ -25,3 +26,14 @@ export function sameReadingLocation(
 ) {
 	return previous.route === next.route && previous.id === next.id && previous.hash === next.hash;
 }
+
+export function recordEntry(router: AnyRouter, route: string, id: string, native: boolean) {
+	if (!native) {
+		return;
+	}
+	router.history.flush?.();
+	if (window.location.pathname + window.location.search !== route || window.history.state?.workBoard?.id === id) {
+		return;
+	}
+	window.history.replaceState({ ...window.history.state, workBoard: { id } }, "");
+}

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) {

package/src/client/react/scheduleReading.ts

@@ -9,18 +9,10 @@ export function scheduleReading(
 	setStatus: (status: string) => void,
 	focus: boolean,
 ) {
-	let restored = false;
 	function restore() {
-		if (restored || !active()) {
-			document.removeEventListener("board-reading-ready", restore);
+		if (!active()) {
 			return;
 		}
-		const context = doc.querySelector<HTMLElement>(".item-context");
-		if (context && context.dataset.readingReady !== "true") {
-			return;
-		}
-		restored = true;
-		document.removeEventListener("board-reading-ready", restore);
 		if (focus && !document.activeElement?.closest("[data-response-form], #response-form, #handoff-form")) {
 			doc.focus({ preventScroll: true });
 		}
@@ -41,6 +33,5 @@ export function scheduleReading(
 			}
 		});
 	}
-	document.addEventListener("board-reading-ready", restore);
 	requestAnimationFrame(restore);
 }

package/src/client/react/useAppearance.ts

@@ -37,7 +37,6 @@ export function useAppearance() {
 		if (doc) {
 			doc.dataset.scheme = scheme;
 		}
-		document.dispatchEvent(new Event("board-theme"));
 	}, [value.theme, value.density, scheme]);
 	function change(next: Partial<Pick<typeof value, "closed" | "density" | "theme">>) {
 		const appearance = { closed: valueRef.current.closed, density: valueRef.current.density, theme: valueRef.current.theme, ...next };
@@ -50,6 +49,6 @@ export function useAppearance() {
 		valueRef.current = { ...appearance, notice };
 		setValue(valueRef.current);
 	}
-	return { ...value, change };
+	return { ...value, change, scheme };
 }
-export type AppearanceControls = ReturnType<typeof useAppearance>;
+export type AppearanceControls = Omit<ReturnType<typeof useAppearance>, "scheme">;

package/src/client/react/useBoardNavigation.ts

@@ -1,15 +1,27 @@
 import { useRouter } from "@tanstack/react-router";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import type { RouterShell } from "#client/react/loadBoardPage.ts";
-import { currentEntry, navigationFailure, readingKey, sameReadingLocation } from "#client/react/navigationLocation.ts";
+import { useMainLocation } from "#client/react/MainLocationContext.ts";
+import { currentEntry, navigationFailure, readingKey, recordEntry, sameReadingLocation } from "#client/react/navigationLocation.ts";
+import { ReadingReadyContext, readingReady } from "#client/react/ReadingReadyContext.ts";
 import { readerLink } from "#client/react/readerLink.ts";
 import { captureReading } from "#client/react/readingState.ts";
 import { retryPage } from "#client/react/retryPage.ts";
 import { scheduleReading } from "#client/react/scheduleReading.ts";
 import { readingEntry, storedReadings } from "#client/react/storedReadings.ts";
 
-export function useBoardNavigation(shell: RouterShell) {
+export function useBoardNavigation(shell: RouterShell, onCurrentDestination?: () => void) {
 	const router = useRouter();
+	const main = useMainLocation();
+	const { element } = useContext(ReadingReadyContext);
+	const readyRef = useRef(element);
+	const mainRef = useRef(main);
+	const pageRef = useRef<(() => void) | undefined>(undefined);
+	useEffect(() => {
+		mainRef.current = main;
+		readyRef.current = element;
+		pageRef.current?.();
+	}, [main, element]);
 	const [status, setStatus] = useState("");
 	useEffect(() => {
 		const readings = storedReadings();
@@ -21,7 +33,7 @@ export function useBoardNavigation(shell: RouterShell) {
 		let failure = "";
 		let interrupted = false;
 		function save() {
-			if (!displayed || document.getElementById("doc")?.dataset.route !== route) {
+			if (!displayed || mainRef.current.route !== route || router.state.location.pathname + router.state.location.searchStr !== route) {
 				interrupted ||= displayed !== "";
 				return;
 			}
@@ -34,11 +46,11 @@ export function useBoardNavigation(shell: RouterShell) {
 			const location = router.state.resolvedLocation ?? router.state.location;
 			const nextRoute = location.pathname + location.searchStr;
 			const doc = document.getElementById("doc");
-			if (doc?.dataset.route !== nextRoute) {
+			if (!doc || mainRef.current.route !== nextRoute || !readingReady(doc, readyRef.current)) {
 				return;
 			}
 			const previousFailure = failure;
-			failure = navigationFailure(doc.dataset.status);
+			failure = navigationFailure(mainRef.current.status);
 			if (failure) {
 				setStatus(failure);
 				return;
@@ -57,13 +69,19 @@ export function useBoardNavigation(shell: RouterShell) {
 			route = nextRoute;
 			hash = location.hash;
 			recordEntry(router, nextRoute, id, shell.client !== undefined);
-			scheduleReading(doc, reading, hash, () => displayed === id && doc.dataset.route === nextRoute, setStatus, focus);
+			scheduleReading(doc, reading, hash, () => displayed === id && mainRef.current.route === nextRoute && doc.isConnected, setStatus, focus);
 		}
 		async function open(target: URL) {
 			save();
-			document.dispatchEvent(new Event("board-navigate"));
 			const url = target.pathname + target.search + target.hash;
-			if (url === router.state.location.href && retryPage(shell.api, shell.registry, target.pathname + target.search)) {
+			if (url === router.state.location.href) {
+				onCurrentDestination?.();
+			}
+			if (
+				url === router.state.location.href
+				&& mainRef.current.route === target.pathname + target.search
+				&& retryPage(shell.api, shell.registry, mainRef.current)
+			) {
 				await router.invalidate();
 			} else if (url !== router.state.location.href) {
 				await router.navigate({ to: url });
@@ -107,7 +125,7 @@ export function useBoardNavigation(shell: RouterShell) {
 		const resolved = router.subscribe("onResolved", page);
 		window.history.scrollRestoration = "manual";
 		document.addEventListener("click", click);
-		document.addEventListener("board-page", page);
+		pageRef.current = page;
 		window.addEventListener("pagehide", save);
 		page();
 		return () => {
@@ -115,20 +133,9 @@ export function useBoardNavigation(shell: RouterShell) {
 			resolved();
 			document.removeEventListener("submit", submit);
 			document.removeEventListener("click", click);
-			document.removeEventListener("board-page", page);
+			pageRef.current = undefined;
 			window.removeEventListener("pagehide", save);
 		};
-	}, [router, shell.api, shell.registry, shell.reading, shell.client]);
+	}, [router, shell.api, shell.registry, shell.reading, shell.client, onCurrentDestination]);
 	return status;
 }
-
-function recordEntry(router: ReturnType<typeof useRouter>, route: string, id: string, native: boolean) {
-	if (!native) {
-		return;
-	}
-	router.history.flush?.();
-	if (window.location.pathname + window.location.search !== route || window.history.state?.workBoard?.id === id) {
-		return;
-	}
-	window.history.replaceState({ ...window.history.state, workBoard: { id } }, "");
-}

package/src/client/react/useDiagnosticsPolling.ts

@@ -1,14 +1,17 @@
 import { RegistryContext } from "@effect/atom-react";
 import type * as Atom from "effect/reactivity/Atom";
 import { useContext, useEffect } from "react";
-import { session } from "#client/entry.ts";
+import type { BrowserClient } from "#client/client.ts";
 
-export function useDiagnosticsPolling<A, TFleet>(atom: Atom.Atom<A>, fleet?: Atom.Atom<TFleet>) {
+export function useDiagnosticsPolling<A, TFleet>(
+	client: (Pick<BrowserClient, "registry"> & { readonly updates: Pick<BrowserClient["updates"], "paused"> }) | undefined,
+	atom: Atom.Atom<A>,
+	fleet?: Atom.Atom<TFleet>,
+) {
 	const registry = useContext(RegistryContext);
 	useEffect(() => {
 		function refresh() {
-			const native = session(window);
-			if (!(document.hidden || native.registry.get(native.updates.paused))) {
+			if (!(document.hidden || client?.registry.get(client.updates.paused))) {
 				registry.refresh(atom);
 				if (fleet) {
 					registry.refresh(fleet);
@@ -16,12 +19,16 @@ export function useDiagnosticsPolling<A, TFleet>(atom: Atom.Atom<A>, fleet?: Ato
 			}
 		}
 		const timer = setInterval(refresh, 15_000);
-		document.addEventListener("board-updates-resumed", refresh);
+		const resumed = client?.registry.subscribe(client.updates.paused, (paused) => {
+			if (!paused) {
+				refresh();
+			}
+		});
 		document.addEventListener("visibilitychange", refresh);
 		return () => {
 			clearInterval(timer);
-			document.removeEventListener("board-updates-resumed", refresh);
+			resumed?.();
 			document.removeEventListener("visibilitychange", refresh);
 		};
-	}, [atom, fleet, registry]);
+	}, [atom, fleet, registry, client]);
 }

package/src/client/react/useDocumentPage.ts

@@ -3,7 +3,7 @@ import { flushSync } from "react-dom";
 import type { Document } from "#browser/document/schema.ts";
 import { documentSourceId } from "#client/document/layout.ts";
 import { fileUrl } from "#files/url.ts";
-import { displayedLocation, type MainLocation } from "./mainLocation.ts";
+import type { MainLocation } from "./mainLocation.ts";
 export function useDocumentPage({
 	data,
 	pending,
@@ -25,9 +25,7 @@ export function useDocumentPage({
 		}
 		const main = element;
 		main.dataset.scheme = document.documentElement.dataset.scheme ?? "";
-		if (main.dataset.route !== url) {
-			delete main.dataset.route;
-		}
+		delete main.dataset.route;
 		let active = true;
 		let scheduled = false;
 		function announce() {
@@ -72,10 +70,18 @@ function publishPage(main: HTMLElement, data: Document | undefined, status: stri
 	} else {
 		delete main.dataset.identity;
 	}
-	flushSync(() => onPage(displayedLocation(main)));
 	main.dataset.route = url;
 	main.dataset.status = status;
-	document.dispatchEvent(new Event("board-page"));
+	flushSync(() =>
+		onPage({
+			file: data?.file ?? "",
+			projection: "document",
+			route: url,
+			status: Number(status),
+			title: main.querySelector("h1")?.textContent?.trim(),
+			view: "",
+		}),
+	);
 }
 function affectsDocument(record: MutationRecord) {
 	const element = record.target instanceof Element ? record.target : record.target.parentElement;