@shivaedev/work-board 0.11.0 → 0.13.0

package/src/client/formFocus.ts

@@ -0,0 +1,37 @@
+export interface FormFocus {
+	readonly direction: "forward" | "backward" | "none" | null;
+	readonly end: number | null;
+	readonly name: string;
+	readonly prompt: string | undefined;
+	readonly start: number | null;
+}
+export function captureFocus(host: HTMLElement): FormFocus | undefined {
+	const control = document.activeElement;
+	if (!((control instanceof HTMLTextAreaElement || (control instanceof HTMLInputElement && control.type === "text")) && host.contains(control))) {
+		return;
+	}
+	return {
+		direction: control.selectionDirection,
+		end: control.selectionEnd,
+		name: control.name,
+		prompt: control.closest<HTMLElement>("[data-prompt]")?.dataset.prompt,
+		start: control.selectionStart,
+	};
+}
+export function restoreFocus(main: HTMLElement, selection: FormFocus | undefined) {
+	if (!selection) {
+		return;
+	}
+	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/mockups/app.ts

@@ -0,0 +1,114 @@
+import { element } from "./element.ts";
+import { names, searchEntries } from "./sampleData.ts";
+import { renderWork, selectWork } from "./work.ts";
+
+let toastTimer: ReturnType<typeof setTimeout> | undefined;
+const searchDialog = element("#search-dialog", HTMLDialogElement);
+const searchInput = element("#search-input", HTMLInputElement);
+
+function navigate() {
+	const requested = location.hash.slice(1);
+	const screen = Object.hasOwn(names, requested) ? requested : "overview";
+	for (const section of document.querySelectorAll<HTMLElement>(".screen")) {
+		section.hidden = section.id !== screen;
+	}
+	for (const link of document.querySelectorAll<HTMLAnchorElement>("nav a")) {
+		const active = link.dataset.screen === screen;
+		link.classList.toggle("active", active);
+		if (active) {
+			link.setAttribute("aria-current", "page");
+		} else {
+			link.removeAttribute("aria-current");
+		}
+	}
+	element("#breadcrumb", HTMLElement).textContent = names[screen] ?? "Overview";
+	document.title = `${names[screen]} — Work Board vision`;
+	window.scrollTo(0, 0);
+}
+function notify(message: string) {
+	const toast = element("#toast", HTMLElement);
+	clearTimeout(toastTimer);
+	toast.textContent = message;
+	toast.hidden = false;
+	toastTimer = setTimeout(() => {
+		toast.hidden = true;
+	}, 5000);
+}
+function renderSearch() {
+	const query = searchInput.value.trim().toLowerCase();
+	const matches = searchEntries.filter((entry) => `${entry.title} ${entry.detail}`.toLowerCase().includes(query));
+	element("#search-results", HTMLElement).innerHTML =
+		matches
+			.map(
+				(entry) =>
+					`<a href="#${entry.screen}" ${entry.item ? `data-search-item="${entry.item}"` : ""}>${entry.title}<small>${entry.detail}</small></a>`,
+			)
+			.join("") || '<p class="small-note">No matches. Try “decision”, “navigation”, or “Atlas”.</p>';
+}
+function openSearch() {
+	renderSearch();
+	searchDialog.showModal();
+	searchInput.focus();
+}
+function respond(revisionRequested: boolean) {
+	const text = element("#direction", HTMLTextAreaElement).value.trim();
+	if (!text) {
+		element("#direction", HTMLTextAreaElement).focus();
+		notify("Add some direction before continuing.");
+		return;
+	}
+	const status = element("#decision-status", HTMLElement);
+	status.textContent = revisionRequested ? "Revision requested · demo" : "Option A selected · demo";
+	status.className = "tag green";
+	const result = element("#decision-result", HTMLElement);
+	result.textContent = revisionRequested
+		? "Demo: your feedback would return to Atlas with proposal revision 3 attached."
+		: "Demo: this direction would be recorded against proposal revision 3 and included in Atlas’s next handoff.";
+	result.hidden = false;
+	notify("Preview updated. No source files changed and no agent was contacted.");
+}
+window.addEventListener("hashchange", navigate);
+element("#search-launch", HTMLElement).addEventListener("click", openSearch);
+element("#close-search", HTMLElement).addEventListener("click", () => searchDialog.close());
+searchInput.addEventListener("input", renderSearch);
+document.addEventListener("keydown", (event) => {
+	if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+		event.preventDefault();
+		if (!searchDialog.open) {
+			openSearch();
+		}
+	}
+});
+element("#search-results", HTMLElement).addEventListener("click", (event) => {
+	const link = event.target instanceof Element ? event.target.closest("a") : null;
+	if (!link) {
+		return;
+	}
+	if (link.dataset.searchItem) {
+		selectWork(link.dataset.searchItem);
+	}
+	searchDialog.close();
+});
+for (const button of document.querySelectorAll<HTMLElement>("[data-artifact]")) {
+	button.addEventListener("click", () => {
+		for (const tab of document.querySelectorAll<HTMLElement>("[data-artifact]")) {
+			const active = tab === button;
+			tab.classList.toggle("selected", active);
+			tab.setAttribute("aria-selected", String(active));
+			element(`#artifact-${tab.dataset.artifact}`, HTMLElement).hidden = !active;
+		}
+	});
+}
+element("#approve", HTMLElement).addEventListener("click", () => respond(false));
+element("#revise", HTMLElement).addEventListener("click", () => respond(true));
+element("#send-feedback", HTMLElement).addEventListener("click", () => {
+	const input = element("#review-note", HTMLTextAreaElement);
+	if (!input.value.trim()) {
+		input.focus();
+		notify("Add feedback so the next pass has clear direction.");
+		return;
+	}
+	notify("Demo revision request prepared for Juniper. Nothing was sent or saved.");
+});
+renderWork();
+navigate();

package/src/client/mockups/element.ts

@@ -0,0 +1,7 @@
+export function element<E extends Element>(selector: string, kind: new () => E): E {
+	const found = document.querySelector(selector);
+	if (!(found instanceof kind)) {
+		throw new Error(`Missing prototype element: ${selector}`);
+	}
+	return found;
+}

package/src/client/mockups/sampleData.ts

@@ -0,0 +1,92 @@
+export interface Item {
+	readonly attention: boolean;
+	readonly destination: "brief" | "decision" | "evidence";
+	readonly id: string;
+	readonly next: string;
+	readonly note: string;
+	readonly owner: string;
+	readonly state: string;
+	readonly tag: string;
+	readonly title: string;
+}
+export const items: readonly Item[] = [
+	{
+		attention: true,
+		destination: "decision",
+		id: "WB–014",
+		next: "Record the scope decision",
+		note: "Two options are ready. Your direction sets the next handoff.",
+		owner: "Atlas",
+		state: "Up next",
+		tag: "Decision needed",
+		title: "Choose the first release boundary",
+	},
+	{
+		attention: false,
+		destination: "brief",
+		id: "WB–025",
+		next: "Define the read-side decision model",
+		note: "Keep the rationale connected to the work it changes.",
+		owner: "Atlas",
+		state: "Up next",
+		tag: "Planned",
+		title: "Give every decision a place",
+	},
+	{
+		attention: false,
+		destination: "brief",
+		id: "WB–018",
+		next: "Check unresolved and duplicate references",
+		note: "Link plans, decisions, and evidence without duplicating their source.",
+		owner: "Atlas",
+		state: "In progress",
+		tag: "Relationships",
+		title: "Connect the context",
+	},
+	{
+		attention: false,
+		destination: "brief",
+		id: "WB–028",
+		next: "Check focus, selection, and expanded details",
+		note: "A live update should leave the reader oriented.",
+		owner: "Juniper",
+		state: "In progress",
+		tag: "Live updates",
+		title: "Keep your place as work changes",
+	},
+	{
+		attention: true,
+		destination: "evidence",
+		id: "WB–021",
+		next: "Review clarity, focus, and contrast",
+		note: "Search across the project. Open a result beside the board. Keep its context within reach.",
+		owner: "Juniper",
+		state: "In review",
+		tag: "Review needed",
+		title: "Make work easy to find",
+	},
+	{
+		attention: false,
+		destination: "evidence",
+		id: "WB–023",
+		next: "Check the proposed artifact presentation",
+		note: "Screenshots and supporting files live beside the work they explain.",
+		owner: "Juniper",
+		state: "In review",
+		tag: "Evidence",
+		title: "A clear home for local artifacts",
+	},
+];
+export const names: Readonly<Record<string, string>> = {
+	brief: "Project brief",
+	decision: "Decisions",
+	evidence: "Evidence",
+	overview: "Overview",
+	work: "Work",
+};
+export const searchEntries: readonly { readonly detail: string; readonly item?: string; readonly screen: string; readonly title: string }[] = [
+	...items.map((item) => ({ detail: `${item.id} · ${item.state} · ${item.owner}`, item: item.id, screen: "work", title: item.title })),
+	{ detail: "Decision · Options and tradeoffs", screen: "decision", title: "Choose the shape of wave one" },
+	{ detail: "Artifacts · Keyboard · Source changes", screen: "evidence", title: "Navigation review evidence" },
+	{ detail: "Project brief · Principles · Local only", screen: "brief", title: "Work Board north star" },
+];

package/src/client/mockups/work.ts

@@ -0,0 +1,84 @@
+import { element } from "./element.ts";
+import { type Item, items } from "./sampleData.ts";
+
+let view = "board";
+let filter = "all";
+let selectedId = "WB–021";
+function tagClass(item: Item) {
+	if (item.id === "WB–014") {
+		return "amber";
+	}
+	return item.attention ? "green" : "neutral";
+}
+function card(item: Item) {
+	return `<button type="button" class="work-card ${item.id === selectedId ? "selected" : ""}" data-item="${item.id}" aria-pressed="${item.id === selectedId}"><span class="muted">${item.id}</span><strong>${item.title}</strong><p>${item.note}</p><div class="card-bottom"><span>${item.owner}</span><span class="tag ${tagClass(item)}">${item.tag}</span></div></button>`;
+}
+const destinationLabels = { brief: "Principles and direction", decision: "Scope proposal", evidence: "Supporting evidence" };
+function renderDetail() {
+	const item = items.find((entry) => entry.id === selectedId);
+	if (item === undefined) {
+		return;
+	}
+	element("#item-detail", HTMLElement).innerHTML =
+		`<p class="eyebrow">IN CONTEXT / ${item.id}</p><span class="tag ${tagClass(item)}">${item.tag}</span><h2>${item.title}</h2><p>${item.note}</p><dl class="detail-props"><div><dt>State</dt><dd>${item.state}</dd></div><div><dt>Owner</dt><dd>${item.owner}</dd></div><div><dt>Milestone</dt><dd>Wave 1</dd></div></dl><div class="detail-section"><h3>The next step</h3><p>${item.next}</p></div><div class="detail-section"><h3>Connected context</h3><a href="#brief">→ The project brief</a><a href="#${item.destination}">→ ${destinationLabels[item.destination]}</a></div><div class="detail-section"><p>Source: work/${item.id.toLowerCase().replace("–", "-")}.md</p><p class="small-note">Illustrative source path</p></div>`;
+}
+export function renderWork() {
+	const visible = items.filter((item) => filter === "all" || (filter === "attention" ? item.attention : item.owner === "Atlas"));
+	if (!visible.some((item) => item.id === selectedId)) {
+		const first = visible[0];
+		if (first === undefined) {
+			return;
+		}
+		selectedId = first.id;
+	}
+	const content = element("#work-content", HTMLElement);
+	if (view === "board") {
+		content.innerHTML = `<div class="kanban">${["Up next", "In progress", "In review"]
+			.map((state) => {
+				const group = visible.filter((item) => item.state === state);
+				return `<section class="lane" aria-label="${state}"><div class="lane-heading">${state}<span>${group.length}</span></div>${group.map(card).join("") || '<p class="empty-filter">No matching work.</p>'}</section>`;
+			})
+			.join("")}</div>`;
+	} else {
+		content.innerHTML = `<table class="work-table"><thead><tr><th>WORK ITEM</th><th>STATE</th><th>OWNER</th></tr></thead><tbody>${visible.map((item) => `<tr><td><button type="button" data-item="${item.id}" aria-pressed="${item.id === selectedId}"><span class="muted">${item.id}</span><br>${item.title}</button></td><td><span class="tag ${tagClass(item)}">${item.state}</span></td><td>${item.owner}</td></tr>`).join("")}</tbody></table>`;
+	}
+	renderDetail();
+}
+function updateChoice(kind: string, value: string) {
+	for (const button of document.querySelectorAll<HTMLElement>(`[data-${kind}]`)) {
+		const selected = button.dataset[kind] === value;
+		button.classList.toggle("selected", selected);
+		button.setAttribute("aria-pressed", String(selected));
+	}
+}
+element(".work-toolbar", HTMLElement).addEventListener("click", (event) => {
+	const button = event.target instanceof Element ? event.target.closest("button") : null;
+	if (!button) {
+		return;
+	}
+	if (button.dataset.view) {
+		view = button.dataset.view;
+		updateChoice("view", view);
+	}
+	if (button.dataset.filter) {
+		filter = button.dataset.filter;
+		updateChoice("filter", filter);
+	}
+	renderWork();
+});
+element("#work-content", HTMLElement).addEventListener("click", (event) => {
+	const button = event.target instanceof Element ? event.target.closest<HTMLButtonElement>("[data-item]") : null;
+	if (!button?.dataset.item) {
+		return;
+	}
+	selectedId = button.dataset.item;
+	renderWork();
+	element(`[data-item="${selectedId}"]`, HTMLButtonElement).focus({ preventScroll: true });
+});
+
+export function selectWork(id: string) {
+	selectedId = id;
+	filter = "all";
+	updateChoice("filter", filter);
+	renderWork();
+}

package/src/client/page/resolvedDocumentFailure.ts

@@ -0,0 +1,6 @@
+import { Cause, Option, Predicate } from "effect";
+
+export function resolvedDocumentFailure(cause: Cause.Cause<unknown>): boolean {
+	const error = Option.getOrUndefined(Cause.findErrorOption(cause));
+	return Predicate.isTagged(error, "NotFound") || Predicate.isTagged(error, "Conflict");
+}

package/src/client/page/routeQuery.ts

@@ -0,0 +1,11 @@
+import type { BrowserClient } from "#client/client.ts";
+
+interface PageApi {
+	readonly document: Pick<BrowserClient["api"]["document"], "query">;
+}
+
+export const routeQueryOptions = { timeToLive: 60_000 };
+
+export function documentQuery(api: PageApi, url: string) {
+	return api.document.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

@@ -0,0 +1,104 @@
+import type { Document, DocumentRequest } from "#browser/document/schema.ts";
+import type { QuestionPreview } from "#browser/responses/schema.ts";
+import { AnswerPrompts } from "./AnswerPrompts.tsx";
+import { FormField } from "./FormField.tsx";
+import { shellIds } from "./shellIds.ts";
+import { useFormFocus } from "./useFormFocus.ts";
+import { useResponseForm } from "./useResponseForm.ts";
+
+interface AnswerProps {
+	readonly document: Document;
+	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 state = useResponseForm(preview, prompts);
+	const focus = useFormFocus(state.draft.key);
+	const form = state.form;
+	const body = (
+		<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 (
+		<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>
+				</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>
+					{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>
+	);
+}

package/src/client/react/AnswerPanel.tsx

@@ -0,0 +1,40 @@
+import type { Document } from "#browser/document/schema.ts";
+import { fileUrl } from "#files/url.ts";
+import { AnswerForm } from "./AnswerForm.tsx";
+import { ResponseHistory } from "./ResponseHistory.tsx";
+export function AnswerPanel({ document: data }: { readonly document: Document }) {
+	const request = data.requests.find((entry) => entry.id === "answer");
+	const preview = request?.preview;
+	const unavailable = request?.unavailable ?? request?.promptUnavailable;
+	const open = !["closed", "done", "completed", "cancelled", "canceled", "resolved", "released"].includes(
+		data.metadata.status?.trim().toLowerCase() ?? "",
+	);
+	let title = "Answer unavailable";
+	if (!open) {
+		title = "Question closed";
+	} else if (preview && !unavailable) {
+		title = "Answer this question";
+	}
+	return (
+		<section className="response-panel">
+			<h2>{title}</h2>
+			{!open && <p role="status">This question is closed. Recorded answers remain below.</p>}
+			{Boolean(unavailable) && <p role="status">{unavailable}</p>}
+			{open && preview !== undefined && request !== undefined && !unavailable && (
+				<>
+					<p>{preview.reason}</p>
+					<p>
+						<a href={fileUrl(preview.source)}>Source: {preview.source}</a> · Reviewed SHA-256: <code>{preview.reviewedRevision}</code>
+					</p>
+					<p>An answer removes this question from the Inbox for this source revision.</p>
+					<details>
+						<summary>Exact source being reviewed</summary>
+						<pre>{preview.context}</pre>
+					</details>
+					<AnswerForm document={data} preview={preview} request={request} />
+				</>
+			)}
+			{!request?.unavailable && <ResponseHistory request={request} />}
+		</section>
+	);
+}

package/src/client/react/AnswerPrompts.tsx

@@ -0,0 +1,93 @@
+import { useAtomValue } from "@effect/atom-react";
+import { useLayoutEffect, useRef } from "react";
+import type { Document } from "#browser/document/schema.ts";
+import type { Prompt } from "#browser/responses/Prompt.ts";
+import type { PromptAnswer } from "#browser/responses/schema.ts";
+import { PromptOption } from "./PromptOption.tsx";
+import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
+import type { useResponseForm } from "./useResponseForm.ts";
+
+type Model = ReturnType<typeof useResponseForm>["form"];
+interface PromptProps {
+	readonly answers: readonly PromptAnswer[];
+	readonly document: Document;
+	readonly form: Model;
+	readonly onEdit: (index: number, answer: PromptAnswer) => void;
+	readonly prompts: readonly Prompt[];
+}
+export function AnswerPrompts(props: PromptProps) {
+	return props.prompts.map((prompt, index) => <PromptField {...props} index={index} key={prompt.id} prompt={prompt} />);
+}
+function PromptField({ document, prompt, index, answers, form, onEdit }: PromptProps & { readonly prompt: Prompt; readonly index: number }) {
+	const answer = answers[index] ?? { prompt: prompt.id, selected: [], text: "" };
+	const error = useAtomValue(form.errorAt(["answers", index, "text"]));
+	const ref = useRef<HTMLTextAreaElement>(null);
+	useLayoutEffect(() => ref.current?.setCustomValidity(error ?? ""), [error]);
+	const choices = document.metadata.options;
+
+	let guidance = "Answer in your own words.";
+	if (choices) {
+		guidance = "Choose an option or write another answer.";
+	} else if (prompt.mode !== "text") {
+		guidance = `${prompt.mode === "one" ? "Choose one option" : "Choose any combination"}, or answer in your own words.`;
+	}
+	function change(next: PromptAnswer) {
+		onEdit(index, next);
+	}
+
+	function choose(id: string, checked: boolean) {
+		let selected: readonly string[] = [];
+		if (prompt.mode === "one") {
+			selected = checked ? [id] : [];
+		} else {
+			selected = checked ? [...new Set([...answer.selected, id])] : answer.selected.filter((entry) => entry !== id);
+		}
+		change({ ...answer, selected });
+	}
+	let message = error;
+	if (error && answer.selected.length === 0 && !answer.text.trim()) {
+		message = `Unanswered: Question ${index + 1} · ${prompt.id}. Choose an option or answer in your own words.`;
+	}
+	return (
+		<fieldset data-mode={prompt.mode} data-prompt={prompt.id} data-source={prompt.source}>
+			<legend>{choices ? "Your answer" : `Question ${index + 1} · ${prompt.id}`}</legend>
+			{choices === undefined && <ResponseMarkdown file={document.file} source={prompt.source} />}
+			<p>{guidance} Nothing is selected for you.</p>
+			<div className={choices ? "question-choices" : undefined}>
+				{prompt.options.map((option, choice) => (
+					<PromptOption
+						checked={answer.selected.includes(option.id)}
+						choice={choice}
+						choose={choose}
+						document={document}
+						index={index}
+						key={option.id}
+						option={option}
+						prompt={prompt}
+					/>
+				))}
+			</div>
+			{prompt.mode !== "text" && (
+				<button data-clear-choices onClick={() => change({ ...answer, selected: [] })} type="button">
+					Clear selections
+				</button>
+			)}
+			<label>
+				{choices ? "Another answer / additional text" : "Additional text / another answer"}
+				<textarea
+					aria-describedby={`answer-${index}-error`}
+					aria-invalid={Boolean(error)}
+					data-answer-text
+					maxLength={8192}
+					onInput={(event) => change({ ...answer, text: event.currentTarget.value })}
+					ref={ref}
+					rows={choices ? 4 : 3}
+					value={answer.text}
+				/>
+				<span className="response-field-error" hidden={!error} id={`answer-${index}-error`}>
+					{message}
+				</span>
+			</label>
+		</fieldset>
+	);
+}

package/src/client/react/BoardMain.tsx

@@ -0,0 +1,30 @@
+import type { Navigation } from "#browser/navigation/schema.ts";
+import { DocumentMain } from "./DocumentMain.tsx";
+import { documentRoute } from "./documentRoute.ts";
+import type { MainLocation } from "./mainLocation.ts";
+import { ProjectionMain } from "./ProjectionMain.tsx";
+import { projectionRoute } from "./projectionRoute.ts";
+import { RemainingMain } from "./RemainingMain.tsx";
+import { remainingRoute } from "./remainingRoute.ts";
+import type { ShellApi } from "./ShellApi.ts";
+export function BoardMain({
+	api,
+	home,
+	onPage,
+	url,
+}: {
+	readonly api: ShellApi;
+	readonly home: Navigation["home"];
+	readonly onPage: (location: MainLocation) => void;
+	readonly url: string;
+}) {
+	const pathname = new URL(url, "http://127.0.0.1").pathname;
+	const projection = projectionRoute(pathname, home);
+	if (projection) {
+		return <ProjectionMain api={api} onPage={onPage} route={projection} url={url} />;
+	}
+	if (documentRoute(pathname, home)) {
+		return <DocumentMain api={api} onPage={onPage} url={url} />;
+	}
+	return <RemainingMain api={api} onPage={onPage} route={remainingRoute(pathname) ?? "start"} url={url} />;
+}