@shivaedev/work-board 0.12.0 → 0.13.0

package/src/browser/views/state.ts

@@ -0,0 +1,47 @@
+import { Option, Schema } from "effect";
+
+const View = Schema.Literals(["board", "table"]);
+const Sort = Schema.Literals(["title", "owner", "status"]);
+export const State = Schema.Struct({
+	board: Schema.String,
+	item: Schema.String,
+	owner: Schema.String,
+	query: Schema.String,
+	sort: Sort,
+	status: Schema.String,
+	view: View,
+});
+export type State = typeof State.Type;
+
+export function stateOf(url: string): State {
+	const params = new URL(url, "http://127.0.0.1").searchParams;
+	return {
+		board: params.get("board") ?? "",
+		item: params.get("item") ?? "",
+		owner: params.get("owner") ?? "",
+		query: (params.get("q") ?? "").slice(0, 200),
+		sort: Option.getOrElse(Schema.decodeUnknownOption(Sort)(params.get("sort")), () => "title"),
+		status: params.get("status") ?? "",
+		view: Option.getOrElse(Schema.decodeUnknownOption(View)(params.get("view")), () => "board"),
+	};
+}
+export function viewUrl(state: State, changes: Partial<State> = {}, hash = ""): string {
+	const next = { ...state, ...changes };
+	const params = new URLSearchParams({ view: next.view });
+	for (const [key, value] of Object.entries({
+		board: next.board,
+		item: next.item,
+		owner: next.owner,
+		q: next.query,
+		sort: next.sort,
+		status: next.status,
+	})) {
+		if (value) {
+			params.set(key, value);
+		}
+	}
+	return `/_board/work?${params}${hash ? `#${hash}` : ""}`;
+}
+export function fieldFilter(value: string | undefined): string {
+	return value === undefined ? "missing" : `value:${value}`;
+}

package/src/client/client.ts

@@ -1,12 +1,12 @@
 import { Effect, Layer } from "effect";
-import { FetchHttpClient } from "effect/unstable/http";
-import type * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
-import type * as Atom from "effect/unstable/reactivity/Atom";
-import * as AtomRegistry from "effect/unstable/reactivity/AtomRegistry";
-import * as AtomRpc from "effect/unstable/reactivity/AtomRpc";
-import type * as Reactivity from "effect/unstable/reactivity/Reactivity";
-import { RpcClient, RpcSerialization } from "effect/unstable/rpc";
-import type { RpcClientError } from "effect/unstable/rpc/RpcClientError";
+import { FetchHttpClient } from "effect/http";
+import type * as AsyncResult from "effect/reactivity/AsyncResult";
+import type * as Atom from "effect/reactivity/Atom";
+import * as AtomRegistry from "effect/reactivity/AtomRegistry";
+import * as AtomRpc from "effect/reactivity/AtomRpc";
+import type * as Reactivity from "effect/reactivity/Reactivity";
+import { RpcClient, RpcSerialization } from "effect/rpc";
+import type { RpcClientError } from "effect/rpc/RpcClientError";
 import { type Bound, bind } from "@shivaedev/effect-contract/bind.ts";
 import type { Contract } from "@shivaedev/effect-contract/contract.ts";
 import { live } from "@shivaedev/effect-contract/live.ts";

package/src/client/document/Mermaid.ts

@@ -1,10 +1,15 @@
-import { createElement, useEffect, useId, useState } from "react";
+import { createElement, useCallback, useEffect, useId, useRef, useState } from "react";
+
+const drawings = new Map<string, { readonly source: string; readonly svg: string }>();
+
+const MAX_DRAWINGS = 30;
 
 type Drawing = { readonly source: string; readonly svg: string } | { readonly source: string; readonly error: string };
 
 export function Mermaid({ source }: { readonly source: string }) {
 	const id = useId().replace(/[^a-z\d_-]/giu, "");
-	const [drawing, setDrawing] = useState<Drawing>();
+	const [drawing, setDrawing] = useState<Drawing | undefined>(() => drawings.get(`${document.documentElement.dataset.scheme ?? "light"}:${source}`));
+	const previousSourceRef = useRef(source);
 	const [theme, setTheme] = useState(() => document.documentElement.dataset.scheme ?? "light");
 	useEffect(() => {
 		function sync() {
@@ -14,6 +19,19 @@ export function Mermaid({ source }: { readonly source: string }) {
 		return () => document.removeEventListener("board-theme", sync);
 	}, []);
 	useEffect(() => {
+		if (previousSourceRef.current !== source) {
+			for (const [key, value] of drawings) {
+				if (value.source === previousSourceRef.current) {
+					drawings.delete(key);
+				}
+			}
+			previousSourceRef.current = source;
+		}
+		const cached = drawings.get(`${theme}:${source}`);
+		if (cached) {
+			setDrawing(cached);
+			return;
+		}
 		let current = true;
 		async function draw() {
 			try {
@@ -39,7 +57,7 @@ export function Mermaid({ source }: { readonly source: string }) {
 				});
 				const { svg } = await mermaid.render(`document-diagram-${id}`, source);
 				if (current) {
-					setDrawing({ source, svg });
+					setDrawing(retainDrawing(theme, source, svg));
 				}
 			} catch (error) {
 				if (current) {
@@ -54,21 +72,33 @@ export function Mermaid({ source }: { readonly source: string }) {
 	}, [id, source, theme]);
 	const shown = drawing?.source === source || (drawing && "svg" in drawing) ? drawing : undefined;
 	const state = drawingState(shown, source);
+	const svgSource = shown && "svg" in shown ? shown.svg : undefined;
+	const svgRef = useCallback(
+		(element: HTMLDivElement | null) => {
+			if (element && svgSource) {
+				const svg = new DOMParser().parseFromString(svgSource, "text/html").body.firstElementChild;
+				if (svg) {
+					element.replaceChildren(document.importNode(svg, true));
+				}
+			}
+		},
+		[svgSource],
+	);
 	return createElement(
 		"figure",
 		{ className: "diagram", "data-error": shown && "error" in shown ? shown.error : undefined, "data-react-diagram": "", "data-state": state },
 		shown && "svg" in shown
 			? createElement("div", {
 					className: "diagram-svg",
-					ref: (element: HTMLDivElement | null) => {
-						if (element) {
-							const svg = new DOMParser().parseFromString(shown.svg, "image/svg+xml").documentElement;
-							element.replaceChildren(document.importNode(svg, true));
-						}
-					},
+					ref: svgRef,
 				})
 			: null,
 		createElement("pre", { className: "diagram-source" }, source),
+		createElement(
+			"span",
+			{ "data-visual-tools": "" },
+			createElement("button", { "data-inspect-diagram": "", disabled: state !== "drawn", type: "button" }, "Inspect diagram"),
+		),
 		shown && "error" in shown ? createElement("p", { "data-diagram-error": "", role: "status" }, `Diagram could not be drawn: ${shown.error}`) : null,
 	);
 }
@@ -82,3 +112,13 @@ function drawingState(shown: Drawing | undefined, source: string): string {
 	}
 	return shown.source === source ? "drawn" : "redrawing";
 }
+
+function retainDrawing(theme: string, source: string, svg: string) {
+	const next = { source, svg };
+	drawings.set(`${theme}:${source}`, next);
+	const oldest = drawings.keys().next().value;
+	if (drawings.size > MAX_DRAWINGS && oldest !== undefined) {
+		drawings.delete(oldest);
+	}
+	return next;
+}

package/src/client/document/View.ts

@@ -3,10 +3,12 @@ import { type Components, MarkdownHooks } from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import type { PluggableList } from "unified";
 import type { Document } from "#browser/document/schema.ts";
+import { Age } from "#client/react/Age";
 import { documentHeadings } from "#render/documentHeadings.ts";
 import { documentLinks } from "#render/documentLinks.ts";
 import { documentPlugins } from "#render/documentPlugins.ts";
 import { footnoteIds } from "#render/footnotes.ts";
+import { boardLayout } from "./boardLayout.ts";
 import { DetailStatesContext, DocumentDetails } from "./Details.ts";
 import { highlightDocument } from "./highlight.ts";
 import { documentLayout, documentSourceId } from "./layout.ts";
@@ -25,9 +27,17 @@ const components: Components = {
 			? createElement(Fragment, null, children)
 			: createElement("pre", props, children);
 	},
+	span: ({ node, children, ...props }) => {
+		const modified = node?.properties.dataModified ?? node?.properties["data-modified"];
+		if (modified !== undefined && props.className?.split(" ").includes("age")) {
+			return createElement(Age, { modified: Number(modified), short: props.className.split(" ").includes("short") });
+		}
+		return createElement("span", props, children);
+	},
 };
 
 export interface DocumentViewProps {
+	readonly board?: readonly { readonly count: number; readonly title: string }[];
 	readonly context?: ReactNode;
 	readonly document: Document;
 	readonly idPrefix?: string;
@@ -53,7 +63,7 @@ function LayoutHeader({ node: _node, children, ...props }: React.ComponentProps<
 		context,
 	);
 }
-export function DocumentView({ document, idPrefix = "", context, introduction }: DocumentViewProps) {
+export function DocumentView({ document, idPrefix = "", context, introduction, board }: DocumentViewProps) {
 	const layout = context !== undefined;
 	const identity = document.identity ?? document.file;
 	const states = useMemo(() => ({ identity, values: new Map<string, boolean>() }), [identity]);
@@ -64,6 +74,9 @@ export function DocumentView({ document, idPrefix = "", context, introduction }:
 		documentLinks(document.file, document.links),
 		documentHeadings(true).plugin,
 	];
+	if (board) {
+		rehypePlugins.push([boardLayout, board, document.modified, document.file, documentSourceId(document)]);
+	}
 	if (layout) {
 		rehypePlugins.push([documentLayout, documentSourceId(document)]);
 	}

package/src/client/document/boardLayout.ts

@@ -0,0 +1,80 @@
+import type { Element, ElementContent, Root } from "hast";
+
+function element(tagName: string, children: ElementContent[] = [], className?: string): Element {
+	return { children, properties: className ? { className: [className] } : {}, tagName, type: "element" };
+}
+interface Draft {
+	readonly board: Element;
+	closing: boolean;
+	readonly footer: Element;
+	readonly header: Element;
+	item: Element | undefined;
+	section: Element | undefined;
+}
+function place(draft: Draft, node: ElementContent, afterHeading: boolean) {
+	if (node.type === "element" && node.tagName === "hr" && afterHeading && draft.section) {
+		draft.closing = true;
+		return;
+	}
+	if (draft.closing) {
+		draft.footer.children.push(node);
+		return;
+	}
+	if (node.type === "element" && node.tagName === "h2") {
+		draft.section = element("section", [node]);
+		draft.board.children.push(draft.section);
+		draft.item = undefined;
+		return;
+	}
+	if (!draft.section) {
+		draft.header.children.push(node);
+		return;
+	}
+	if (node.type === "element" && node.tagName === "h3") {
+		draft.item = element("article", [node], "item");
+		draft.section.children.push(draft.item);
+		return;
+	}
+	if (!draft.item) {
+		draft.item = element("div", [], "notes");
+		draft.section.children.push(draft.item);
+	}
+	draft.item.children.push(node);
+}
+function summary(counts: readonly { readonly count: number; readonly title: string }[]) {
+	const result = element("p", [], "counts");
+	for (const [index, count] of counts.entries()) {
+		if (index > 0) {
+			result.children.push({ type: "text", value: " · " });
+		}
+		result.children.push(
+			element("span", [element("b", [{ type: "text", value: String(count.count) }]), { type: "text", value: ` ${count.title.toLowerCase()}` }]),
+		);
+	}
+	return result;
+}
+export function boardLayout(counts: readonly { readonly count: number; readonly title: string }[], modified: number, file: string, source: string) {
+	return (tree: Root) => {
+		const nodes = tree.children.filter((node): node is ElementContent => node.type !== "doctype" && !(node.type === "text" && !node.value.trim()));
+		const lastHeading = nodes.findLastIndex((node) => node.type === "element" && /^h[1-6]$/u.test(node.tagName));
+		const draft: Draft = {
+			board: element("div", [], "board"),
+			closing: false,
+			footer: element("footer"),
+			header: element("header", [], "board-head"),
+			item: undefined,
+			section: undefined,
+		};
+		for (const [index, node] of nodes.entries()) {
+			place(draft, node, index > lastHeading);
+		}
+		if (!draft.header.children.some((node) => node.type === "element" && node.tagName === "h1")) {
+			draft.header.children.unshift(element("h1", [{ type: "text", value: file }]));
+		}
+		const age = element("span", [{ type: "text", value: `updated ${new Date(modified).toISOString()}` }], "age");
+		age.properties.dataModified = modified;
+		draft.board.properties.dataSource = source;
+		draft.header.children.push(summary(counts), element("p", [age], "meta"));
+		tree.children = [draft.header, draft.board, ...(draft.footer.children.length > 0 ? [draft.footer] : [])];
+	};
+}

package/src/client/entry.ts

@@ -1,27 +1,3 @@
-import { navigationHtml as renderNavigation } from "#browser/navigation/html.ts";
-import { setupHandoffs } from "#client/handoffs/setup.ts";
-import { resolvedDocumentFailure as documentFailure } from "#client/page/resolvedDocumentFailure.ts";
-import { attachResponses as attachResponseForm } from "#client/responses/attach.ts";
-import { setupResponses } from "#client/responses/setup.ts";
-
-export const navigationHtml = renderNavigation;
-
-if (typeof window !== "undefined" && typeof document !== "undefined") {
-	setupResponses();
-	setupHandoffs();
-}
-
 import { session as ownedSession } from "./session.ts";
 
 export const session = ownedSession;
-
-import { remember as retain } from "#client/reconcile/signature.ts";
-import { swap as reconcile } from "#client/reconcile/swap.ts";
-export const remember = retain;
-export const swap = reconcile;
-
-import { legacyRuntime as loadLegacy } from "./legacyRuntime.ts";
-export const legacyRuntime = loadLegacy;
-
-export const attachResponses = attachResponseForm;
-export const resolvedDocumentFailure = documentFailure;

package/src/client/formDraft.ts

@@ -0,0 +1,9 @@
+import type { PersistedDraftConfig } from "@shivaedev/effect-form/persistence.ts";
+
+export function formDraft(kind: "response" | "handoff", item: string, request = ""): PersistedDraftConfig {
+	const workspace = typeof document === "undefined" ? "" : (document.documentElement.dataset.workspace ?? "");
+	return {
+		key: `work-board:form:${JSON.stringify([workspace, kind, item, request])}`,
+		storage: () => window.localStorage,
+	};
+}

package/src/client/formFocus.ts

@@ -25,6 +25,11 @@ export function restoreFocus(main: HTMLElement, selection: FormFocus | undefined
 	const focused = [...main.querySelectorAll<HTMLInputElement | HTMLTextAreaElement>("input, textarea")].find(
 		(field) => field.name === selection.name && field.closest<HTMLElement>("[data-prompt]")?.dataset.prompt === selection.prompt,
 	);
+	for (let parent = focused?.parentElement; parent; parent = parent.parentElement) {
+		if (parent instanceof HTMLDetailsElement) {
+			parent.open = true;
+		}
+	}
 	focused?.focus({ preventScroll: true });
 	if (selection.start !== null && selection.end !== null) {
 		focused?.setSelectionRange(selection.start, selection.end, selection.direction ?? undefined);

package/src/client/handoffs/failureStatus.ts

@@ -0,0 +1,6 @@
+import { Schema } from "effect";
+import { InternalServerError } from "@shivaedev/platform/errors/taxonomy.ts";
+import { PublicationUncertain, ResponseRejection } from "#rpc/rejections.ts";
+export function failureStatus(error: unknown) {
+	return `${Schema.is(ResponseRejection)(error) && !(error instanceof PublicationUncertain) && !(error instanceof InternalServerError) ? "Rejected" : "Uncertain"}: ${String(error)}. Draft retained; preview and retry.`;
+}

package/src/client/page/routeQuery.ts

@@ -2,7 +2,6 @@ import type { BrowserClient } from "#client/client.ts";
 
 interface PageApi {
 	readonly document: Pick<BrowserClient["api"]["document"], "query">;
-	readonly page: Pick<BrowserClient["api"]["page"], "query">;
 }
 
 export const routeQueryOptions = { timeToLive: 60_000 };
@@ -10,7 +9,3 @@ export const routeQueryOptions = { timeToLive: 60_000 };
 export function documentQuery(api: PageApi, url: string) {
 	return api.document.query({ url }, routeQueryOptions);
 }
-
-export function pageQuery(api: PageApi, url: string) {
-	return api.page.query({ url }, routeQueryOptions);
-}

package/src/client/react/Age.tsx

@@ -0,0 +1,35 @@
+import { Clock, Effect } from "effect";
+import { createContext, type ReactNode, useContext, useEffect, useState } from "react";
+
+const TimeContext = createContext(Effect.runSync(Clock.currentTimeMillis));
+function now() {
+	return Effect.runSync(Clock.currentTimeMillis);
+}
+export function AgeTicker({ children }: { readonly children: ReactNode }) {
+	const [time, setTime] = useState(now);
+	useEffect(() => {
+		const timer = setInterval(() => setTime(now()), 5000);
+		return () => clearInterval(timer);
+	}, []);
+	return <TimeContext.Provider value={time}>{children}</TimeContext.Provider>;
+}
+function since(seconds: number) {
+	if (seconds < 60) {
+		return `${seconds}s`;
+	}
+	if (seconds < 3600) {
+		return `${Math.round(seconds / 60)}m`;
+	}
+	if (seconds < 172_800) {
+		return `${Math.round(seconds / 3600)}h`;
+	}
+	return `${Math.round(seconds / 86_400)}d`;
+}
+export function Age({ modified, short = false }: { readonly modified: number; readonly short?: boolean }) {
+	const ago = since(Math.max(0, Math.round((useContext(TimeContext) - modified) / 1000)));
+	return (
+		<span className={short ? "age short" : "age"} data-modified={modified}>
+			{short ? ago : `updated ${ago} ago`}
+		</span>
+	);
+}

package/src/client/react/AnswerForm.tsx

@@ -1,98 +1,104 @@
 import type { Document, DocumentRequest } from "#browser/document/schema.ts";
 import type { QuestionPreview } from "#browser/responses/schema.ts";
-import { AnswerFocus } from "./AnswerFocus.tsx";
 import { AnswerPrompts } from "./AnswerPrompts.tsx";
+import { FormField } from "./FormField.tsx";
 import { shellIds } from "./shellIds.ts";
-export function AnswerForm({
-	document: data,
-	request,
-	preview,
-}: {
+import { useFormFocus } from "./useFormFocus.ts";
+import { useResponseForm } from "./useResponseForm.ts";
+
+interface AnswerProps {
 	readonly document: Document;
-	readonly request: DocumentRequest;
 	readonly preview: QuestionPreview;
-}) {
+	readonly request: DocumentRequest;
+}
+export function AnswerForm(props: AnswerProps) {
+	return <AnswerSession key={JSON.stringify([props.preview.item, props.preview.request, Boolean(props.request.prompts?.length)])} {...props} />;
+}
+function AnswerSession({ document: data, request, preview }: AnswerProps) {
 	const prompts = request.prompts ?? [];
-	const records = request.responses ?? [];
+	const state = useResponseForm(preview, prompts);
+	const focus = useFormFocus(state.draft.key);
+	const form = state.form;
 	const body = (
-		<label>
-			{prompts.length > 0 ? "Overall response / next action (optional)" : "Your response"}
-			<textarea maxLength={32_768} name="body" required={prompts.length === 0} rows={4} />
-		</label>
+		<FormField
+			form={form}
+			label={prompts.length > 0 ? "Overall response / next action (optional)" : "Your response"}
+			maxLength={32_768}
+			name="body"
+			required={prompts.length === 0}
+			rows={4}
+		/>
 	);
+	const writableStatus = typeof window === "undefined" ? "JavaScript is required to record a response." : state.status;
 	return (
-		<AnswerFocus context={preview.id}>
-			<form
-				data-item={preview.item}
-				data-question={preview.id}
-				data-request={preview.request}
-				data-revision={preview.reviewedRevision}
-				data-writable={data.writable}
-				id={shellIds.responseForm}
-				noValidate
-			>
-				<label>
-					Local author label <input autoComplete="nickname" maxLength={200} name="author" required />
-				</label>
-				<AnswerPrompts document={data} prompts={prompts} />
-				{prompts.length === 0 && body}
-				<AnswerDetails body={prompts.length > 0 ? body : null} records={records} />
-				<pre hidden id={shellIds.responseDraftRecovery} />
-				<p>
-					Submit the whole packet together. Drafts stay in this browser for 30 days after the last edit, with a 2 MiB workspace limit. Saved responses
-					are Markdown files in responses/.
-				</p>
-				<button disabled id={shellIds.responsePreview} type="button">
-					Preview Markdown
-				</button>
-				<pre hidden id={shellIds.responsePreviewContent} />
-				<button disabled id={shellIds.responseSubmit} type="submit">
-					Record response
-				</button>
-				<button disabled id={shellIds.responseClear} type="button">
-					Clear workspace drafts
-				</button>
-				<p id={shellIds.responseStatus} role="status">
-					{data.writable
-						? "JavaScript is required to record a response."
-						: "Read-only mode. Restart with --responses to explicitly enable local writes."}
-				</p>
-			</form>
-		</AnswerFocus>
-	);
-}
-
-function AnswerDetails({
-	body,
-	records,
-}: {
-	readonly body: import("react").ReactNode;
-	readonly records: readonly import("#browser/responses/schema.ts").RecordedResponse[];
-}) {
-	const options = records.map((record) => (
-		<option key={record.id} value={record.id}>
-			{record.id} · {record.response.author} · {record.response.reviewedRevision.slice(0, 12)}
-		</option>
-	));
-	return (
-		<details data-key="response-details">
-			<summary>Response details</summary>
-			<label>
-				Response kind{" "}
-				<select name="type">
+		<form
+			{...focus}
+			data-item={preview.item}
+			data-question={preview.id}
+			data-request={preview.request}
+			data-revision={preview.reviewedRevision}
+			data-writable={data.writable}
+			id={shellIds.responseForm}
+			noValidate
+			onChange={state.edit}
+			onInput={state.edit}
+			onSubmit={(event) => {
+				event.preventDefault();
+				if (!state.valid) {
+					event.currentTarget.querySelector<HTMLElement>('[aria-invalid="true"]')?.focus();
+				}
+				if (data.writable && state.preview && state.valid && !state.created.saving) {
+					state.created.save();
+				}
+			}}
+		>
+			<FormField autoComplete="nickname" form={form} label="Local author label" maxLength={200} name="author" required />
+			<AnswerPrompts answers={state.answers ?? []} document={data} form={form} onEdit={state.editAnswers} prompts={prompts} />
+			{(prompts.length === 0 || data.metadata.kind !== "question") && body}
+			<details data-key="response-details">
+				<summary>Response details</summary>
+				<FormField form={form} label="Response kind" name="type">
 					<option value="answer">Answer (including no)</option>
 					<option value="clarify">Ask back / clarify</option>
 					<option value="not_now">Not now</option>
-				</select>
-			</label>
-			{body}
-			<label>
-				Supersedes an earlier response (optional)
-				<select name="supersedes">
+				</FormField>
+				{prompts.length > 0 && data.metadata.kind === "question" && body}
+				<FormField form={form} label="Supersedes an earlier response (optional)" name="supersedes">
 					<option value="">Adds feedback; does not supersede</option>
-					{options}
-				</select>
-			</label>
-		</details>
+					{request.responses?.map((record) => (
+						<option key={record.id} value={record.id}>
+							{record.id} · {record.response.author} · {record.response.reviewedRevision.slice(0, 12)}
+						</option>
+					))}
+				</FormField>
+			</details>
+			<pre hidden={!state.recovery} id={shellIds.responseDraftRecovery}>
+				{state.recovery}
+			</pre>
+			<p>
+				Submit the whole packet together. Drafts stay in this browser for seven days after the last edit, with a 256 KiB limit per draft. Saved
+				responses are Markdown files in responses/.
+			</p>
+			<button
+				disabled={typeof window === "undefined" || state.created.saving}
+				id={shellIds.responsePreview}
+				onClick={state.showPreview}
+				type="button"
+			>
+				Preview Markdown
+			</button>
+			<pre hidden={!state.preview} id={shellIds.responsePreviewContent}>
+				{state.preview}
+			</pre>
+			<button disabled={!(data.writable && state.preview && state.valid) || state.created.saving} id={shellIds.responseSubmit} type="submit">
+				Record response
+			</button>
+			<button disabled={typeof window === "undefined" || state.created.saving} id={shellIds.responseClear} onClick={state.clear} type="button">
+				Clear draft
+			</button>
+			<p data-outcome={state.outcome} id={shellIds.responseStatus} role="status">
+				{data.writable ? writableStatus : `${state.status} Read-only mode. Restart with --responses to explicitly enable local writes.`}
+			</p>
+		</form>
 	);
 }