@shivaedev/work-board 0.14.2 → 0.16.0

package/src/client/react/BoardShell.tsx

@@ -1,21 +1,26 @@
 import { useRouterState } from "@tanstack/react-router";
 import { Option } from "effect";
 import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { useQuery } from "@shivaedev/effect-react/result-state.ts";
 import type { BrowserClient } from "#client/client.ts";
 import { navigationQuery } from "#client/page/routeQuery.ts";
 import { AgeTicker } from "./Age.tsx";
 import { FleetMain } from "./FleetMain.tsx";
+import { FormContext } from "./FormContext.ts";
 import { Header } from "./Header.tsx";
 import { LiveControls } from "./LiveControls.tsx";
-import { displayedLocation, type MainLocation, sameMainLocation } from "./mainLocation.ts";
+import { MainLocationContext, useMainLocation } from "./MainLocationContext.ts";
+import { emptyMainLocation, type MainLocation } from "./mainLocation.ts";
 import { PhoneNavigation } from "./PhoneNavigation.tsx";
 import { ReadingLibrary } from "./ReadingLibrary.tsx";
+import { ReadingReadyContext, readingReady } from "./ReadingReadyContext.ts";
 import { SearchDialog } from "./SearchDialog.tsx";
+import { SessionContext } from "./SessionContext.ts";
 import type { ShellApi } from "./ShellApi.ts";
 import { Sidebar } from "./Sidebar.tsx";
 import { shellIds } from "./shellIds.ts";
+import { ThemeContext } from "./ThemeContext.ts";
 import { UpdatesToggle } from "./UpdatesToggle.tsx";
 import { useAppearance } from "./useAppearance.ts";
 import { useBoardNavigation } from "./useBoardNavigation.ts";
@@ -30,61 +35,61 @@ export interface ShellOptions {
 	readonly registry: AtomRegistry.AtomRegistry;
 }
 export function BoardShell(options: ShellOptions) {
-	const { api, ready, client } = options;
+	const [main, onPage] = useState(emptyMainLocation);
 	const appearance = useAppearance();
+	const [element, setElement] = useState<HTMLElement | null>(null);
+	const report = useCallback((next: HTMLElement, ready: boolean) => {
+		setElement((current) => {
+			if (ready) {
+				return next;
+			}
+			return current === next ? null : current;
+		});
+	}, []);
+	return (
+		<MainLocationContext.Provider value={main}>
+			<ReadingReadyContext.Provider value={{ element, report }}>
+				<SessionContext.Provider value={options.client}>
+					<ThemeContext.Provider value={appearance.scheme}>
+						<BoardWorkspace {...options} appearance={appearance} onPage={onPage} />
+					</ThemeContext.Provider>
+				</SessionContext.Provider>
+			</ReadingReadyContext.Provider>
+		</MainLocationContext.Provider>
+	);
+}
+function BoardWorkspace(
+	options: ShellOptions & { readonly appearance: ReturnType<typeof useAppearance>; readonly onPage: (location: MainLocation) => void },
+) {
+	const { api, ready, client, onPage, appearance } = options;
+	const main = useMainLocation();
 	const sidebar = useSidebar(appearance);
-	const status = useBoardNavigation(options);
+	const [phoneOpen, setPhoneOpen] = useState(false);
+	const closeCurrentDestination = useCallback(() => {
+		sidebar.close();
+		setPhoneOpen(false);
+	}, [sidebar.close]);
+	const status = useBoardNavigation(options, closeCurrentDestination);
 	const search = useSearchDialog();
 	const [libraryOpen, setLibraryOpen] = useState(false);
 	const location = useRouterState({ select: (state) => state.location });
-	const [main, setMain] = useState<MainLocation>({ file: "", view: "" });
 	const query = useQuery(navigationQuery(api), { keepPreviousData: true });
 	const data = Option.getOrUndefined(query.data);
-	const onPage = useCallback((next: MainLocation) => setMain((previous) => (sameMainLocation(previous, next) ? previous : next)), []);
+	const { element } = useContext(ReadingReadyContext);
 	useEffect(() => {
-		function start() {
-			const doc = document.getElementById("doc");
-			const context = doc?.querySelector<HTMLElement>(".item-context");
-			if (data && doc?.dataset.route && (!context || context.dataset.readingReady === "true")) {
-				ready?.();
-			}
+		const doc = document.getElementById("doc");
+		if (data && main.route && doc && readingReady(doc, element)) {
+			ready?.();
 		}
-		start();
-		document.addEventListener("board-page", start);
-		document.addEventListener("board-reading-ready", start);
-		return () => {
-			document.removeEventListener("board-page", start);
-			document.removeEventListener("board-reading-ready", start);
-		};
-	}, [ready, data]);
-	useEffect(() => {
-		function sync() {
-			const doc = document.getElementById("doc");
-			if (doc) {
-				onPage(displayedLocation(doc));
-			}
-		}
-		document.addEventListener("board-page", sync);
-		return () => document.removeEventListener("board-page", sync);
-	}, [onPage]);
-	useEffect(() => {
-		if (data) {
-			document.dispatchEvent(new Event("board-index-change"));
-		}
-	}, [data]);
+	}, [ready, data, main, element]);
 	const live = client ? (
-		<LiveControls
-			client={client}
-			current={location.pathname + location.searchStr}
-			navigationFailed={Option.isSome(query.cause)}
-			navigationPending={query.pending}
-		/>
+		<LiveControls client={client} navigationFailed={Option.isSome(query.cause)} navigationPending={query.pending} />
 	) : (
 		<span className="font-mono text-muted-foreground text-xs" id={shellIds.live} role="status">
 			connecting
 		</span>
 	);
-	return (
+	const content = (
 		<AgeTicker>
 			<ReadingLibrary api={api} close={() => setLibraryOpen(false)} open={libraryOpen}>
 				<a className="sr-only rounded-md bg-background p-3 focus:not-sr-only focus:absolute focus:z-50" href="#doc">
@@ -117,7 +122,7 @@ export function BoardShell(options: ShellOptions) {
 							updates={client ? <UpdatesToggle client={client} /> : null}
 						/>
 						<FleetMain api={api} home={data?.home} onPage={onPage} url={location.pathname + location.searchStr} />
-						<PhoneNavigation main={main} openSearch={search.show} />
+						<PhoneNavigation main={main} more={phoneOpen} onMoreChange={setPhoneOpen} openSearch={search.show} />
 					</div>
 				</div>
 				{Option.isSome(query.cause) && <p role="status">Navigation refresh failed. Your displayed files are retained.</p>}
@@ -133,4 +138,5 @@ export function BoardShell(options: ShellOptions) {
 			</ReadingLibrary>
 		</AgeTicker>
 	);
+	return client ? <FormContext.Provider value={client}>{content}</FormContext.Provider> : content;
 }

package/src/client/react/DocumentContext.tsx

@@ -1,15 +1,22 @@
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import type { Document } from "#browser/document/schema.ts";
 import { Tabs } from "#client/react/components/ui/Tabs.tsx";
 import { Age } from "./Age.tsx";
 import { DocumentMetadata } from "./DocumentMetadata.tsx";
 import { DocumentSource } from "./DocumentSource.tsx";
+import { useMainLocation } from "./MainLocationContext.ts";
+import { ReadingReadyContext } from "./ReadingReadyContext.ts";
 
 export function DocumentContext({ document: data }: { readonly document: Document }) {
+	const page = useMainLocation();
+	const { report } = useContext(ReadingReadyContext);
 	const [headings, setHeadings] = useState<readonly { readonly id: string; readonly title: string; readonly depth: number }[]>([]);
 	const contextRef = useRef<HTMLElement>(null);
 	const [tab, setTab] = useState("details");
 	useEffect(() => {
+		if (page.route && page.projection === "document" && page.file !== data.file) {
+			return;
+		}
 		function outline() {
 			const entries = [
 				...(contextRef.current
@@ -21,10 +28,8 @@ export function DocumentContext({ document: data }: { readonly document: Documen
 				.map((heading) => ({ depth: Number(heading.tagName.slice(1)), id: heading.id, title: heading.textContent?.replace(/#$/u, "") ?? "" }));
 			setHeadings((current) => (JSON.stringify(current) === JSON.stringify(entries) ? current : entries));
 		}
-		document.addEventListener("board-page", outline);
 		outline();
-		return () => document.removeEventListener("board-page", outline);
-	}, []);
+	}, [page, data]);
 
 	useLayoutEffect(() => {
 		const context = contextRef.current;
@@ -39,9 +44,9 @@ export function DocumentContext({ document: data }: { readonly document: Documen
 		if (count !== headings.length) {
 			return;
 		}
-		context.dataset.readingReady = "true";
-		document.dispatchEvent(new Event("board-reading-ready"));
-	}, [headings]);
+		report(context, true);
+		return () => report(context, false);
+	}, [headings, report]);
 	const tabs = [
 		{ content: <Outline headings={headings} />, label: "Details", value: "details" },
 		{ content: <SourcePanel document={data} />, label: "Source", value: "source" },

package/src/client/react/FormContext.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+import type { BrowserClient } from "#client/client.ts";
+
+export type FormClient = Pick<BrowserClient, "handoffs" | "responses" | "runtime">;
+export const FormContext = createContext<FormClient | undefined>(undefined);
+
+export function useFormClient() {
+	const client = useContext(FormContext);
+	if (!client) {
+		throw new Error("Board forms require the shell's RPC client");
+	}
+	return client;
+}

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 { 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,
@@ -55,19 +35,6 @@ export function LiveControls({
 		waiting: navigationPending || reading.pending,
 		watching,
 	});
-	useEffect(
-		() =>
-			client.registry.subscribe(
-				client.updates.paused,
-				(value) => {
-					if (!value) {
-						document.dispatchEvent(new Event("board-updates-resumed"));
-					}
-				},
-				{ immediate: true },
-			),
-		[client],
-	);
 	return (
 		<span
 			className="font-mono text-muted-foreground text-xs data-[state=down]:text-destructive data-[state=stale]:text-destructive"

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/PhoneNavigation.tsx

@@ -1,5 +1,6 @@
+import { useRouter } from "@tanstack/react-router";
 import { CalendarDays, Ellipsis, Flag, Search, Zap } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Button } from "#client/react/components/ui/Button.tsx";
 import { Modal } from "./Modal.tsx";
 import type { MainLocation } from "./mainLocation.ts";
@@ -11,21 +12,25 @@ const icons = [CalendarDays, Flag, Zap];
 const TAB_CLASS =
 	"flex min-h-12 min-w-0 flex-col items-center justify-center gap-1 rounded-md border-0 bg-transparent p-0 text-foreground text-xs no-underline aria-[current=page]:bg-accent aria-[current=page]:text-primary";
 
-export function PhoneNavigation({ main, openSearch }: { readonly main: MainLocation; readonly openSearch: () => void }) {
-	const [more, setMore] = useState(false);
+export function PhoneNavigation({
+	main,
+	more,
+	onMoreChange,
+	openSearch,
+}: {
+	readonly main: MainLocation;
+	readonly more: boolean;
+	readonly onMoreChange: (open: boolean) => void;
+	readonly openSearch: () => void;
+}) {
+	const router = useRouter();
 	const narrow = useMedia("(max-width: 767px)");
 	useEffect(() => {
 		if (!narrow) {
-			setMore(false);
+			onMoreChange(false);
 		}
-	}, [narrow]);
-	useEffect(() => {
-		function close() {
-			setMore(false);
-		}
-		document.addEventListener("board-navigate", close);
-		return () => document.removeEventListener("board-navigate", close);
-	}, []);
+	}, [narrow, onMoreChange]);
+	useEffect(() => router.subscribe("onBeforeNavigate", () => onMoreChange(false)), [router, onMoreChange]);
 	return (
 		<>
 			<nav
@@ -50,19 +55,19 @@ export function PhoneNavigation({ main, openSearch }: { readonly main: MainLocat
 					aria-expanded={more}
 					aria-haspopup="dialog"
 					className={TAB_CLASS}
-					onClick={() => setMore(true)}
+					onClick={() => onMoreChange(true)}
 					type="button"
 				>
 					<Ellipsis aria-hidden="true" className="size-5" />
 					More
 				</button>
 			</nav>
-			<Modal className="phone-more" close={() => setMore(false)} id={shellIds.phoneMore} open={more} title={shellIds.phoneMoreTitle}>
+			<Modal className="phone-more" close={() => onMoreChange(false)} id={shellIds.phoneMore} open={more} title={shellIds.phoneMoreTitle}>
 				<div className="mb-3 flex items-center justify-between">
 					<h2 className="font-semibold" id={shellIds.phoneMoreTitle}>
 						More
 					</h2>
-					<Button onClick={() => setMore(false)} variant="ghost">
+					<Button onClick={() => onMoreChange(false)} variant="ghost">
 						Close
 					</Button>
 				</div>

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 { type ReactNode, useCallback, useLayoutEffect, 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("");
@@ -34,18 +36,17 @@ export function ReadingLibrary({
 		},
 		[key],
 	);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		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,7 @@ 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/ReadingReadyContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+
+export const ReadingReadyContext = createContext<{
+	readonly element: HTMLElement | null;
+	readonly report: (element: HTMLElement, ready: boolean) => void;
+}>({ element: null, report: () => undefined });
+
+export function readingReady(doc: HTMLElement, element: HTMLElement | null) {
+	const context = doc.querySelector(".item-context");
+	return !context || context === element;
+}

package/src/client/react/SessionContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import type { BrowserClient } from "#client/client.ts";
+
+export const SessionContext = createContext<BrowserClient | undefined>(undefined);

package/src/client/react/SystemMain.tsx

@@ -1,6 +1,8 @@
+import { useContext } from "react";
 import { routeQueryOptions } from "#client/page/routeQuery.ts";
 import type { MainLocation } from "./mainLocation.ts";
 import { ProjectionFrame } from "./ProjectionFrame.tsx";
+import { SessionContext } from "./SessionContext.ts";
 import type { ShellApi } from "./ShellApi.ts";
 import { SystemPage } from "./SystemPage.tsx";
 import { useDiagnosticsPolling } from "./useDiagnosticsPolling.ts";
@@ -15,7 +17,7 @@ export function SystemMain({
 	readonly url: string;
 }) {
 	const atom = api.diagnostics.query(undefined, routeQueryOptions);
-	useDiagnosticsPolling(atom, api.fleetItems.query(undefined, routeQueryOptions));
+	useDiagnosticsPolling(useContext(SessionContext), atom, api.fleetItems.query(undefined, routeQueryOptions));
 	return (
 		<ProjectionFrame
 			atom={atom}

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/ThemeContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const ThemeContext = createContext("light");

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"