@shivaedev/work-board 0.13.0 → 0.14.0

package/src/browser/views/now.ts

@@ -0,0 +1,93 @@
+import type { Metadata } from "#metadata/schema.ts";
+import type { FleetItemsProjection } from "./FleetItemsProjection.ts";
+
+export const nowLanes = ["Queued", "Executing", "Reviewing", "Delivering", "Waiting on a person", "Done in the last 7 days"] as const;
+export type NowLane = (typeof nowLanes)[number];
+export type FleetWork = Extract<FleetItemsProjection, { state: "ready" }>["items"][number];
+
+const stages: Record<FleetWork["stage"], NowLane | undefined> = {
+	adopting: "Executing",
+	completed: "Done in the last 7 days",
+	delivering: "Delivering",
+	executing: "Executing",
+	"needs-human": "Waiting on a person",
+	prepared: "Queued",
+	released: undefined,
+	repairing: "Reviewing",
+	reviewing: "Reviewing",
+	validating: "Reviewing",
+};
+
+export function isWork(metadata: Metadata): boolean {
+	return !(metadata.requestReceipt || ["board", "decision", "question", "response", "result"].includes(metadata.kind ?? ""));
+}
+
+export function laneOf(metadata: Metadata, fleet: FleetWork | undefined, approved = false): NowLane | undefined {
+	if (metadata.kind !== "task" || metadata.requestReceipt) {
+		return undefined;
+	}
+	if (fleet) {
+		return stages[fleet.stage];
+	}
+	if (["superseded", "deferred", "cancelled", "canceled", "done", "completed"].includes(metadata.status ?? "")) {
+		return undefined;
+	}
+	return authoredLane(metadata.status, approved);
+}
+
+function authoredLane(status: string | undefined, approved: boolean): NowLane | undefined {
+	if (["active", "running", "in-progress", "agent-working", "executing", "adopting"].includes(status ?? "")) {
+		return "Executing";
+	}
+	if (["blocked", "needs-human", "needs-you", "waiting-on-person"].includes(status ?? "")) {
+		return "Waiting on a person";
+	}
+	if (status === "in-review") {
+		return "Reviewing";
+	}
+	if (status === "approved" || (approved && [undefined, "planned", "received"].includes(status))) {
+		return "Queued";
+	}
+	return Object.entries(stages).find(([stage]) => stage === status)?.[1];
+}
+
+export function holderOf(metadata: Metadata, fleet: FleetWork | undefined): string | undefined {
+	if (fleet) {
+		return fleet.attentionOwner && fleet.attentionOwner !== "automation" ? fleet.attentionOwner : "Fleet";
+	}
+	return ["maintainer", "orchestrator"].includes(metadata.owner ?? "") ? metadata.owner : undefined;
+}
+
+export function cardStatus(metadata: Metadata, fleet: FleetWork | undefined, waiting: string | undefined): string | undefined {
+	if (fleet) {
+		if (fleet.stage === "needs-human") {
+			return "needs-you";
+		}
+		return fleet.stage === "completed" ? "done" : fleet.stage;
+	}
+	return waiting ? "needs-you" : metadata.status;
+}
+
+const statusOrder = [
+	"planned",
+	"received",
+	"active",
+	"running",
+	"in-progress",
+	"reviewing",
+	"repairing",
+	"validating",
+	"delivering",
+	"blocked",
+	"needs-human",
+	"done",
+	"deferred",
+	"superseded",
+];
+export function compareStatuses(left: string | undefined, right: string | undefined): number {
+	function rank(status: string | undefined) {
+		const index = statusOrder.indexOf(status ?? "");
+		return index < 0 ? statusOrder.length : index;
+	}
+	return rank(left) - rank(right) || (left ?? "\uffff").localeCompare(right ?? "\uffff", "en");
+}

package/src/browser/views/schema.ts

@@ -3,9 +3,9 @@ import { Document } from "#browser/document/schema.ts";
 import { Metadata } from "#metadata/schema.ts";
 import { State } from "./state.ts";
 
-const Link = Schema.Struct({ href: Schema.optional(Schema.String), label: Schema.String });
-const WorkItem = Schema.Struct({
+export const WorkItem = Schema.Struct({
 	file: Schema.String,
+	fleetApproved: Schema.optional(Schema.Boolean),
 	id: Schema.String,
 	metadata: Metadata,
 	title: Schema.String,
@@ -24,43 +24,28 @@ export const WorkProjection = Schema.Struct({
 	validBoard: Schema.Boolean,
 });
 export type WorkProjection = typeof WorkProjection.Type;
+const InboxItem = Schema.Struct({
+	earlierAsks: Schema.optional(Schema.Number),
+	file: Schema.String,
+	href: Schema.String,
+	id: Schema.String,
+	modified: Schema.optional(Schema.Number),
+	problem: Schema.optional(Schema.String),
+	reason: Schema.String,
+	responseFrom: Schema.optional(Schema.Array(Schema.String)),
+	title: Schema.String,
+});
 export const InboxProjection = Schema.Struct({
+	agents: Schema.Array(InboxItem),
 	complete: Schema.Boolean,
-	items: Schema.Array(
-		Schema.Struct({
-			file: Schema.String,
-			href: Schema.String,
-			id: Schema.String,
-			modified: Schema.optional(Schema.Number),
-			problem: Schema.optional(Schema.String),
-			reason: Schema.String,
-			title: Schema.String,
-		}),
-	),
+	issues: Schema.Array(Schema.Struct({ file: Schema.String, line: Schema.Number, message: Schema.String })),
+	items: Schema.Array(InboxItem),
+	parked: Schema.Array(InboxItem),
+	resolved: Schema.Array(InboxItem),
 	sourceIssues: Schema.Boolean,
+	you: Schema.Array(InboxItem),
 });
 export type InboxProjection = typeof InboxProjection.Type;
-export const OverviewProjection = Schema.Struct({
-	complete: Schema.Boolean,
-	entries: Schema.Array(
-		Schema.Struct({
-			file: Schema.String,
-			href: Schema.String,
-			id: Schema.String,
-			itemId: Schema.String,
-			kind: Schema.Literals(["decision", "review", "blocker"]),
-			line: Schema.Number,
-			reason: Schema.String,
-			responseFrom: Schema.Array(Schema.String),
-			title: Schema.String,
-			unblocks: Schema.Array(Link),
-		}),
-	),
-	inboxCount: Schema.Number,
-	issues: Schema.Array(Schema.Struct({ file: Schema.String, line: Schema.Number, message: Schema.String })),
-	unavailable: Schema.Array(Schema.String),
-});
-export type OverviewProjection = typeof OverviewProjection.Type;
 export const BoardProjection = Schema.Struct({
 	counts: Schema.Array(Schema.Struct({ count: Schema.Number, title: Schema.String })),
 	document: Document,

package/src/browser/views/state.ts

@@ -1,6 +1,6 @@
 import { Option, Schema } from "effect";
 
-const View = Schema.Literals(["board", "table"]);
+const View = Schema.Literals(["now", "board", "table"]);
 const Sort = Schema.Literals(["title", "owner", "status"]);
 export const State = Schema.Struct({
 	board: Schema.String,
@@ -22,7 +22,7 @@ export function stateOf(url: string): State {
 		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"),
+		view: Option.getOrElse(Schema.decodeUnknownOption(View)(params.get("view")), () => "now"),
 	};
 }
 export function viewUrl(state: State, changes: Partial<State> = {}, hash = ""): string {

package/src/client/document/Mermaid.ts

@@ -1,4 +1,5 @@
 import { createElement, useCallback, useEffect, useId, useRef, useState } from "react";
+import { mermaidColor } from "./mermaidColor.ts";
 
 const drawings = new Map<string, { readonly source: string; readonly svg: string }>();
 
@@ -37,7 +38,7 @@ export function Mermaid({ source }: { readonly source: string }) {
 			try {
 				const { default: mermaid } = await import("mermaid");
 				function token(name: string) {
-					return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+					return name === "--sans" ? getComputedStyle(document.documentElement).getPropertyValue(name).trim() : mermaidColor(name);
 				}
 				mermaid.initialize({
 					securityLevel: "strict",
@@ -48,7 +49,7 @@ export function Mermaid({ source }: { readonly source: string }) {
 						background: token("--bg"),
 						darkMode: theme === "dark",
 						fontFamily: token("--sans"),
-						lineColor: token("--muted"),
+						lineColor: token("--muted-foreground"),
 						primaryBorderColor: token("--border"),
 						primaryColor: token("--surface"),
 						primaryTextColor: token("--text"),
@@ -93,7 +94,7 @@ export function Mermaid({ source }: { readonly source: string }) {
 					ref: svgRef,
 				})
 			: null,
-		createElement("pre", { className: "diagram-source" }, source),
+		createElement("pre", { className: "diagram-source", hidden: !(shown && "error" in shown) }, source),
 		createElement(
 			"span",
 			{ "data-visual-tools": "" },

package/src/client/document/View.ts

@@ -37,33 +37,59 @@ const components: Components = {
 };
 
 export interface DocumentViewProps {
+	readonly answer?: ReactNode;
 	readonly board?: readonly { readonly count: number; readonly title: string }[];
+	readonly content?: ReactNode;
 	readonly context?: ReactNode;
 	readonly document: Document;
 	readonly idPrefix?: string;
 	readonly introduction?: ReactNode;
+	readonly lead?: ReactNode;
 }
 
-const LayoutContext = createContext<{ readonly context: ReactNode; readonly introduction: ReactNode; readonly file: string }>({
+const LayoutContext = createContext<{
+	readonly answer: ReactNode;
+	readonly context: ReactNode;
+	readonly content: ReactNode;
+	readonly introduction: ReactNode;
+	readonly lead: ReactNode;
+	readonly file: string;
+	readonly identified: boolean;
+}>({
+	answer: null,
+	content: null,
 	context: null,
 	file: "",
+	identified: false,
 	introduction: null,
+	lead: null,
 });
-const layoutComponents: Components = { ...components, header: LayoutHeader };
+const layoutComponents: Components = { ...components, article: LayoutArticle, header: LayoutHeader };
+function LayoutArticle({ node, children, ...props }: React.ComponentProps<"article"> & import("react-markdown").ExtraProps) {
+	const { content } = useContext(LayoutContext);
+	return createElement("article", props, node?.properties.dataSource === undefined ? null : content, children);
+}
 function LayoutHeader({ node: _node, children, ...props }: React.ComponentProps<"header"> & import("react-markdown").ExtraProps) {
-	const { context, introduction, file } = useContext(LayoutContext);
+	const { answer, context, introduction, lead, file, identified } = useContext(LayoutContext);
 	const header = createElement("header", props, children);
-	if (props.className !== "item-introduction") {
+	if (!props.className?.split(" ").includes("item-introduction")) {
 		return header;
 	}
 	return createElement(
 		Fragment,
 		null,
-		createElement("header", props, Children.count(children) > 0 ? children : createElement("h1", null, file), introduction),
+		createElement(
+			"header",
+			{ ...props, className: `${props.className} col-span-full bg-background py-3 ${identified ? "sticky top-0 z-20 border-b border-border" : ""}` },
+			Children.count(children) > 0 ? children : createElement("h1", { className: "font-mono" }, file),
+			introduction,
+		),
+		lead,
+		answer,
 		context,
 	);
 }
-export function DocumentView({ document, idPrefix = "", context, introduction, board }: DocumentViewProps) {
+export function DocumentView({ document, idPrefix = "", context, content, introduction, board, answer, lead }: DocumentViewProps) {
 	const layout = context !== undefined;
 	const identity = document.identity ?? document.file;
 	const states = useMemo(() => ({ identity, values: new Map<string, boolean>() }), [identity]);
@@ -75,20 +101,22 @@ export function DocumentView({ document, idPrefix = "", context, introduction, b
 		documentHeadings(true).plugin,
 	];
 	if (board) {
-		rehypePlugins.push([boardLayout, board, document.modified, document.file, documentSourceId(document)]);
+		rehypePlugins.push([boardLayout, board, document.modified, document.file, documentSourceId(document), layout]);
 	}
-	if (layout) {
+	if (layout && !board) {
 		rehypePlugins.push([documentLayout, documentSourceId(document)]);
 	}
 	return createElement(
 		layout ? "div" : "article",
-		{ className: layout ? "document-layout" : "doc" },
+		{
+			className: layout ? "document-layout grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,68ch)_minmax(240px,1fr)] lg:gap-x-8" : "doc reading-column",
+		},
 		createElement(
 			DetailStatesContext.Provider,
 			{ key: states.identity, value: states.values },
 			createElement(
 				LayoutContext.Provider,
-				{ value: { context, file: document.file, introduction } },
+				{ value: { answer, content, context, file: document.file, identified: Boolean(document.metadata.id), introduction, lead } },
 				createElement(
 					MarkdownHooks,
 					{

package/src/client/document/boardLayout.ts

@@ -53,15 +53,21 @@ function summary(counts: readonly { readonly count: number; readonly title: stri
 	}
 	return result;
 }
-export function boardLayout(counts: readonly { readonly count: number; readonly title: string }[], modified: number, file: string, source: string) {
+export function boardLayout(
+	counts: readonly { readonly count: number; readonly title: string }[],
+	modified: number,
+	file: string,
+	source: string,
+	layout = false,
+) {
 	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"),
+			board: element("div", [], layout ? "board lg:col-start-1 lg:row-start-2" : "board"),
 			closing: false,
 			footer: element("footer"),
-			header: element("header", [], "board-head"),
+			header: element("header", [], layout ? "item-introduction board-head" : "board-head"),
 			item: undefined,
 			section: undefined,
 		};

package/src/client/document/layout.ts

@@ -20,7 +20,7 @@ export function documentLayout(source: string) {
 			{ children: title ? [title] : [], properties: { className: ["item-introduction"] }, tagName: "header", type: "element" },
 			{
 				children: tree.children.filter((node) => node.type !== "doctype"),
-				properties: { className: ["doc"], dataSource: source },
+				properties: { className: ["doc", "reading-column", "lg:col-start-1", "row-start-2"], dataSource: source },
 				tagName: "article",
 				type: "element",
 			},

package/src/client/document/mermaidColor.ts

@@ -0,0 +1,19 @@
+export function mermaidColor(name: string): string {
+	const style = getComputedStyle(document.documentElement);
+	const color = style.getPropertyValue(name).trim();
+	const canvas = document.createElement("canvas");
+	canvas.width = 1;
+	canvas.height = 1;
+	const context = canvas.getContext("2d");
+	if (!context) {
+		return color;
+	}
+	context.fillStyle = style.getPropertyValue("--bg").trim();
+	context.fillRect(0, 0, 1, 1);
+	context.fillStyle = color;
+	context.fillRect(0, 0, 1, 1);
+	return `#${Array.from(context.getImageData(0, 0, 1, 1).data)
+		.slice(0, 3)
+		.map((channel) => channel.toString(16).padStart(2, "0"))
+		.join("")}`;
+}

package/src/client/formFocus.ts

@@ -5,8 +5,7 @@ export interface FormFocus {
 	readonly prompt: string | undefined;
 	readonly start: number | null;
 }
-export function captureFocus(host: HTMLElement): FormFocus | undefined {
-	const control = document.activeElement;
+export function captureFocus(host: HTMLElement, control: Element | null = document.activeElement): FormFocus | undefined {
 	if (!((control instanceof HTMLTextAreaElement || (control instanceof HTMLInputElement && control.type === "text")) && host.contains(control))) {
 		return;
 	}

package/src/client/page/routeQuery.ts

@@ -9,3 +9,7 @@ export const routeQueryOptions = { timeToLive: 60_000 };
 export function documentQuery(api: PageApi, url: string) {
 	return api.document.query({ url }, routeQueryOptions);
 }
+
+export function navigationQuery(api: { readonly navigation: Pick<BrowserClient["api"]["navigation"], "query"> }) {
+	return api.navigation.query({ current: "" }, routeQueryOptions);
+}

package/src/client/react/Age.tsx

@@ -28,7 +28,14 @@ function since(seconds: number) {
 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}>
+		<span
+			className={
+				short
+					? "shrink-0 whitespace-nowrap font-mono text-muted-foreground text-xs"
+					: "ml-1.5 whitespace-nowrap font-mono text-muted-foreground text-xs"
+			}
+			data-modified={modified}
+		>
 			{short ? ago : `updated ${ago} ago`}
 		</span>
 	);

package/src/client/react/AnswerContext.tsx

@@ -0,0 +1,29 @@
+import { cardContext } from "#browser/responses/cardContext.ts";
+import type { QuestionPreview } from "#browser/responses/schema.ts";
+import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
+
+export function AnswerContext({ preview }: { readonly preview: QuestionPreview }) {
+	const context = cardContext(preview.context);
+	return (
+		<>
+			{Boolean(context.recommendation) && (
+				<div className="answer-recommendation">
+					<ResponseMarkdown file={preview.source} source={context.recommendation} />
+				</div>
+			)}
+			{context.links.length > 0 && (
+				<div className="answer-links flex flex-wrap gap-2">
+					{context.links.map((link) => (
+						<a
+							className={`answer-link ${link.primary ? "bg-primary text-primary-foreground" : "border border-border"} inline-flex items-center rounded-md px-4 py-2 font-medium`}
+							href={link.url}
+							key={link.url}
+						>
+							{link.label}
+						</a>
+					))}
+				</div>
+			)}
+		</>
+	);
+}

package/src/client/react/AnswerForm.tsx

@@ -1,5 +1,6 @@
 import type { Document, DocumentRequest } from "#browser/document/schema.ts";
 import type { QuestionPreview } from "#browser/responses/schema.ts";
+import { AnswerMore } from "./AnswerMore.tsx";
 import { AnswerPrompts } from "./AnswerPrompts.tsx";
 import { FormField } from "./FormField.tsx";
 import { shellIds } from "./shellIds.ts";
@@ -15,6 +16,9 @@ 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) {
+	function id(value: string) {
+		return data.requests.filter((entry) => entry.open).length > 1 ? `${value}-${request.id}` : value;
+	}
 	const prompts = request.prompts ?? [];
 	const state = useResponseForm(preview, prompts);
 	const focus = useFormFocus(state.draft.key);
@@ -27,6 +31,7 @@ function AnswerSession({ document: data, request, preview }: AnswerProps) {
 			name="body"
 			required={prompts.length === 0}
 			rows={4}
+			showErrors={state.attempted}
 		/>
 	);
 	const writableStatus = typeof window === "undefined" ? "JavaScript is required to record a response." : state.status;
@@ -36,68 +41,47 @@ function AnswerSession({ document: data, request, preview }: AnswerProps) {
 			data-item={preview.item}
 			data-question={preview.id}
 			data-request={preview.request}
+			data-response-form
 			data-revision={preview.reviewedRevision}
 			data-writable={data.writable}
-			id={shellIds.responseForm}
+			id={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();
+				const valid = state.attempt();
+				if (!valid) {
+					const target = event.currentTarget;
+					requestAnimationFrame(() => {
+						const invalid = target.querySelector<HTMLElement>('[aria-invalid="true"]');
+						const more = invalid?.closest("details");
+						if (more) {
+							more.open = true;
+						}
+						invalid?.focus();
+					});
 				}
-				if (data.writable && state.preview && state.valid && !state.created.saving) {
+				if (data.writable && 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
+			<AnswerPrompts
+				answers={state.answers ?? []}
+				document={data}
+				form={form}
+				onEdit={state.editAnswers}
+				prompts={prompts}
+				showErrors={state.attempted}
+			/>
+			{prompts.length === 0 && body}
+			<button disabled={!data.writable || state.created.saving} id={id(shellIds.responseSubmit)} type="submit">
+				Record
 			</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.`}
+			<AnswerMore body={prompts.length > 0 ? body : undefined} id={id} request={request} state={state} />
+			<p data-outcome={state.outcome} id={id(shellIds.responseStatus)} role="status">
+				{data.writable ? writableStatus : `${state.status} Read-only. Restart with --responses to enable answers.`.trim()}
 			</p>
 		</form>
 	);

package/src/client/react/AnswerMore.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+import type { DocumentRequest } from "#browser/document/schema.ts";
+import { FormField } from "./FormField.tsx";
+import { shellIds } from "./shellIds.ts";
+import type { useResponseForm } from "./useResponseForm.ts";
+
+export function AnswerMore({
+	body,
+	id,
+	request,
+	state,
+}: {
+	readonly body?: ReactNode;
+	readonly id: (value: string) => string;
+	readonly request: DocumentRequest;
+	readonly state: ReturnType<typeof useResponseForm>;
+}) {
+	return (
+		<details data-key="response-details">
+			<summary>More</summary>
+			<FormField
+				autoComplete="nickname"
+				form={state.form}
+				label="Local author label"
+				maxLength={200}
+				name="author"
+				required
+				showErrors={state.attempted}
+			/>
+			<FormField form={state.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>
+			{body}
+			<FormField form={state.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>
+			<pre hidden={!state.recovery} id={id(shellIds.responseDraftRecovery)}>
+				{state.recovery}
+			</pre>
+			<p>
+				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={id(shellIds.responsePreview)}
+				onClick={state.showPreview}
+				type="button"
+			>
+				Preview Markdown
+			</button>
+			<pre hidden={!state.preview} id={id(shellIds.responsePreviewContent)}>
+				{state.preview}
+			</pre>
+			<button disabled={typeof window === "undefined" || state.created.saving} id={id(shellIds.responseClear)} onClick={state.clear} type="button">
+				Clear draft
+			</button>
+		</details>
+	);
+}