@shivaedev/work-board 0.16.0 → 0.17.1

package/dist/server/workspace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace.js","sourceRoot":"","sources":["../../src/server/workspace.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAsB,MAAM,QAAQ,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAE5E,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAgBxD,MAAM,OAAO,eAAgB,SAAQ,OAAO,CAAC,OAAO,EAAqC,CAAC,2BAA2B,CAAC;CAAG;AAEzH,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAAC;IACtC,EAAE,EAAE,qBAAqB;IACzB,UAAU,EAAE,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC;QAC/B,OAAO,KAAK,CAAC,CAAC,eAAe,CAAC;IAC/B,CAAC,CAAC;IACF,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,OAAO,EAAE,EAAE,EAAE;QAClC,MAAM,QAAQ,GAAG,EAAE,GAAG,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;QACpE,MAAM,IAAI,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;QACpC,SAAS,QAAQ,CAAC,GAAW;YAC5B,OAAO,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;QACjE,CAAC;QACD,OAAO;YACN,QAAQ;YACR,KAAK,EAAE,GAAG,EAAE,CAAC,KAAK;YAClB,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC;SACxC,CAAC;IACH,CAAC;IACD,QAAQ,EAAE,CAAC,eAAe,EAAE,UAAU,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC;CAC7D,CAAC,CAAC"}

package/docs/delivery/README.md

@@ -36,8 +36,8 @@ The roadmap records whether each decision is settled and what it means for a ste
 | [Board parser](https://github.com/ShivaeDev/platform/blob/main/packages/work-board/src/server/render/board.ts), [Markdown renderer](https://github.com/ShivaeDev/platform/blob/main/packages/work-board/src/server/render/markdown.ts) | Source interpretation and semantic reading | Heading boards, GFM, references and readable fallback |
 | [Page route](https://github.com/ShivaeDev/platform/blob/main/packages/work-board/src/server/http/page.ts), [router](https://github.com/ShivaeDev/platform/blob/main/packages/work-board/src/server/board.ts) | Locations, projections and HTTP composition | Loopback boundary, embedding and Effect scope/errors |
 | [Listing](https://github.com/ShivaeDev/platform/blob/main/packages/work-board/src/server/files/list.ts), [watcher](https://github.com/ShivaeDev/platform/blob/main/packages/work-board/src/server/files/changes.ts) | File discovery and freshness | Root policy, rename/delete handling and recovery |
-| [Native client](https://github.com/ShivaeDev/platform/blob/main/packages/work-board/src/client/client.ts), [DOM swap](https://github.com/ShivaeDev/platform/blob/main/packages/work-board/src/client/page/scripts.ts) | Scoped reads and retained reading state | Shared Effect contracts/live primitives, clear failures and reconciliation |
-| [Assets](https://github.com/ShivaeDev/platform/blob/main/packages/work-board/src/server/http/assets.ts), [diagrams](https://github.com/ShivaeDev/platform/blob/main/packages/work-board/src/client/page/scripts.ts) | Local visual reading | Bounded access and locally loaded renderers |
+| [Native client](https://github.com/ShivaeDev/platform/blob/main/packages/work-board/src/client/client.ts), [React navigation](https://github.com/ShivaeDev/platform/blob/main/packages/work-board/src/client/react/useBoardNavigation.ts) | Scoped reads and retained reading state | Shared Effect contracts/live primitives, clear failures and reconciliation |
+| [Assets](https://github.com/ShivaeDev/platform/blob/main/packages/work-board/src/server/http/assets.ts), [diagrams](https://github.com/ShivaeDev/platform/blob/main/packages/work-board/src/client/document/Mermaid.ts) | Local visual reading | Bounded access and locally loaded renderers |
 
 Keep CLI and embedding working together. Static mockup markup and fictional data are review aids, not the production data model. A new framework, persistent store or adapter must earn its cost through an agreed requirement.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shivaedev/work-board",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "description": "Serve a folder of markdown files as a live local page that updates in place when a file changes",
   "homepage": "https://github.com/ShivaeDev/platform/tree/main/packages/work-board#readme",
   "bugs": {
@@ -411,7 +411,7 @@
   "dependencies": {
     "@shivaedev/effect-contract": "0.5.1",
     "@shivaedev/effect-service": "0.3.0",
-    "@shivaedev/platform": "0.14.3",
+    "@shivaedev/platform": "0.15.0",
     "mdast-util-directive": "3.1.1",
     "mermaid": "12.1.0",
     "react": "19.3.0",
@@ -433,8 +433,8 @@
     "@shivaedev/effect-form": "0.4.0",
     "@shivaedev/effect-react": "0.4.1",
     "@shivaedev/effect-test": "0.5.0",
-    "@shivaedev/quality": "0.23.0",
-    "@shivaedev/test-story": "0.6.0",
+    "@shivaedev/quality": "0.24.0",
+    "@shivaedev/test-story": "0.7.0",
     "@tailwindcss/vite": "4.3.3",
     "@tanstack/react-router": "1.170.42",
     "@types/hast": "3.0.5",
@@ -470,7 +470,7 @@
   },
   "scripts": {
     "build": "node --eval \"import('node:fs').then(({ rmSync }) => rmSync('dist', { force: true, recursive: true }))\" && tsc --project tsconfig.build.json && pnpm build:browser",
-    "build:browser": "esbuild src/client/entry.ts --bundle --platform=browser --format=esm --conditions=source --minify --banner:js='/* @shivaedev/work-board native browser bundle */' --outfile=assets/native.js && esbuild src/server/responses/agent-cli.ts --bundle --platform=node --format=esm --conditions=source --minify --outfile=assets/agent.js && vite build",
+    "build:browser": "esbuild src/server/responses/agent-cli.ts --bundle --platform=node --format=esm --conditions=source --minify --outfile=assets/agent.js && vite build",
     "ready": "pnpm typecheck && pnpm test && pnpm build",
     "test": "pnpm test:prepare && vitest run",
     "test:prepare": "pnpm build:browser",

package/src/browser/responses/cardContext.ts

@@ -10,15 +10,19 @@ export function cardContext(source: string) {
 	return { links, recommendation };
 }
 
-export function optionLabel(id: string, source: string, reason: string) {
-	const heading = /^#{1,6}\s+(?<title>.+)$/mu.exec(source)?.groups?.title;
-	if (heading) {
-		return heading;
+export function optionText(id: string, source: string, reason: string) {
+	const heading = promptHeading(source);
+	if (heading.title) {
+		return { description: heading.rest, label: heading.title };
+	}
+	const lead = /^\*\*(?<label>[^*]+)\*\*\s*(?:[—–:-]\s*)?/u.exec(source.trim());
+	if (lead?.groups?.label) {
+		return { description: source.trim().slice(lead[0].length).trim(), label: lead.groups.label.trim() };
 	}
 	if (id === "retry" && /reviewed pr is ready to merge/iu.test(reason)) {
-		return "Request changes (retry)";
+		return { description: source.trim(), label: "Request changes (retry)" };
 	}
-	return id.charAt(0).toUpperCase() + id.slice(1).replaceAll("-", " ");
+	return { description: source.trim(), label: id.charAt(0).toUpperCase() + id.slice(1).replaceAll("-", " ") };
 }
 
 function section(source: string, title: string) {
@@ -48,3 +52,8 @@ function section(source: string, title: string) {
 function nextFence(current: string | undefined, marker: string) {
 	return current?.startsWith(marker.charAt(0)) && marker.length >= current.length ? undefined : marker;
 }
+
+export function promptHeading(source: string) {
+	const heading = /^#{1,6}\s+(?<title>.+)$/mu.exec(source);
+	return { rest: heading ? source.replace(heading[0], "").trim() : source.trim(), title: heading?.groups?.title?.trim() };
+}

package/src/browser/views/remaining.ts

@@ -1,5 +1,4 @@
 import { Schema } from "effect";
-import { Document, DocumentRequest } from "#browser/document/schema.ts";
 import { HandoffPreview, HandoffReading } from "#browser/handoffs/schema.ts";
 import { DiagnosticsSnapshot } from "#diagnostics/daemonContract.ts";
 
@@ -11,8 +10,6 @@ export const StartProjection = Schema.Struct({
 	templates: Schema.Array(Schema.Struct({ file: Schema.String, label: Schema.String, source: Schema.String })),
 });
 export type StartProjection = typeof StartProjection.Type;
-export const RespondProjection = Schema.Struct({ document: Document, request: DocumentRequest });
-export type RespondProjection = typeof RespondProjection.Type;
 export const HandoffProjection = Schema.Struct({
 	background: Schema.String,
 	goal: Schema.String,

package/src/browser/views/schema.ts

@@ -40,6 +40,7 @@ export const InboxProjection = Schema.Struct({
 	complete: Schema.Boolean,
 	issues: Schema.Array(Schema.Struct({ file: Schema.String, line: Schema.Number, message: Schema.String })),
 	items: Schema.Array(InboxItem),
+	later: Schema.Array(InboxItem),
 	parked: Schema.Array(InboxItem),
 	resolved: Schema.Array(InboxItem),
 	sourceIssues: Schema.Boolean,

package/src/client/formStatus.ts

@@ -30,6 +30,6 @@ export function formStatus<A>(
 	};
 }
 
-export function responseSaved(id: string, dirty: boolean) {
-	return `Saved: responses/${id}.md. This records feedback, not acceptance.${dirty ? " Your current draft remains unsaved." : ""}`;
+export function responseSaved(id: string, dirty: boolean, choice = "") {
+	return `Saved: your answer${choice ? ` “${choice}”` : ""} is recorded. The agent reads it from responses/${id}.md the next time it checks. This records your answer, not acceptance of the work.${dirty ? " Your current draft remains unsaved." : ""}`;
 }

package/src/client/react/AnswerContext.tsx

@@ -1,25 +1,30 @@
+import { ExternalLink } from "lucide-react";
 import { cardContext } from "#browser/responses/cardContext.ts";
 import type { QuestionPreview } from "#browser/responses/schema.ts";
-import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
+import { buttonVariants } from "#client/react/components/ui/buttonVariants.ts";
+import { cn } from "#client/react/lib/cn.ts";
+import { AnswerMarkdown } from "./AnswerMarkdown.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 className="rounded-lg bg-muted/60 px-4 py-3 text-sm">
+					<p className="mb-1 font-medium text-muted-foreground text-xs uppercase tracking-wide">Recommendation</p>
+					<AnswerMarkdown className="answer-recommendation" 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`}
+							className={cn(buttonVariants({ size: "sm", variant: link.primary ? "default" : "outline" }), "answer-link")}
 							href={link.url}
 							key={link.url}
 						>
 							{link.label}
+							<ExternalLink aria-hidden="true" />
 						</a>
 					))}
 				</div>

package/src/client/react/AnswerForm.tsx

@@ -1,5 +1,8 @@
+import { CheckCircle2 } from "lucide-react";
 import type { Document, DocumentRequest } from "#browser/document/schema.ts";
 import type { QuestionPreview } from "#browser/responses/schema.ts";
+import { Button } from "#client/react/components/ui/Button.tsx";
+import { cn } from "#client/react/lib/cn.ts";
 import { AnswerMore } from "./AnswerMore.tsx";
 import { AnswerPrompts } from "./AnswerPrompts.tsx";
 import { FormField } from "./FormField.tsx";
@@ -7,6 +10,8 @@ import { shellIds } from "./shellIds.ts";
 import { useFormFocus } from "./useFormFocus.ts";
 import { useResponseForm } from "./useResponseForm.ts";
 
+const READ_ONLY = "This Board is read-only. Start it with --responses to record answers.";
+
 interface AnswerProps {
 	readonly document: Document;
 	readonly preview: QuestionPreview;
@@ -38,6 +43,7 @@ function AnswerSession({ document: data, request, preview }: AnswerProps) {
 	return (
 		<form
 			{...focus}
+			className="space-y-4"
 			data-item={preview.item}
 			data-question={preview.id}
 			data-request={preview.request}
@@ -76,13 +82,26 @@ function AnswerSession({ document: data, request, preview }: AnswerProps) {
 				showErrors={state.attempted}
 			/>
 			{prompts.length === 0 && body}
-			<button disabled={!data.writable || state.created.saving} id={id(shellIds.responseSubmit)} type="submit">
-				Record
-			</button>
-			<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()}
+			<div className="flex flex-wrap items-center gap-3">
+				<Button disabled={!data.writable || state.created.saving} id={id(shellIds.responseSubmit)} type="submit">
+					Record answer
+				</Button>
+			</div>
+			<p
+				className={cn(
+					"flex items-start gap-2 text-sm empty:hidden",
+					!data.writable && "text-muted-foreground",
+					state.outcome === "saved" && "rounded-md border border-done/40 bg-done/10 px-3 py-2",
+					(state.outcome === "rejected" || state.outcome === "uncertain") && "rounded-md border border-destructive/40 px-3 py-2 text-destructive",
+				)}
+				data-outcome={state.outcome}
+				id={id(shellIds.responseStatus)}
+				role="status"
+			>
+				{state.outcome === "saved" && <CheckCircle2 aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-done" />}
+				{data.writable ? writableStatus : `${state.status} ${READ_ONLY}`.trim()}
 			</p>
+			<AnswerMore body={prompts.length > 0 ? body : undefined} id={id} request={request} state={state} />
 		</form>
 	);
 }

package/src/client/react/AnswerMarkdown.tsx

@@ -0,0 +1,15 @@
+import { cn } from "#client/react/lib/cn.ts";
+import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
+
+export function AnswerMarkdown({ className, file, source }: { readonly className?: string; readonly file: string; readonly source: string }) {
+	return (
+		<div
+			className={cn(
+				"[&_a]:underline [&_a]:underline-offset-4 [&_code]:font-mono [&_code]:text-[0.9em] [&_li]:my-1 [&_ol]:list-decimal [&_ol]:pl-5 [&_p+p]:mt-2 [&_ul]:list-disc [&_ul]:pl-5",
+				className,
+			)}
+		>
+			<ResponseMarkdown file={file} source={source} />
+		</div>
+	);
+}

package/src/client/react/AnswerMore.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import type { DocumentRequest } from "#browser/document/schema.ts";
+import { Button } from "#client/react/components/ui/Button.tsx";
 import { FormField } from "./FormField.tsx";
 import { shellIds } from "./shellIds.ts";
 import type { useResponseForm } from "./useResponseForm.ts";
@@ -16,52 +17,63 @@ export function AnswerMore({
 	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 className="group rounded-lg border px-4 py-2 text-sm [&[open]]:pb-4" data-key="response-details">
+			<summary className="cursor-pointer select-none py-1 text-muted-foreground hover:text-foreground">More options</summary>
+			<div className="mt-3 grid gap-4">
+				<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 className="whitespace-pre-wrap rounded-md bg-muted p-3 text-xs" hidden={!state.recovery} id={id(shellIds.responseDraftRecovery)}>
+					{state.recovery}
+				</pre>
+				<p className="text-muted-foreground text-xs">
+					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>
+				<div className="flex flex-wrap gap-2">
+					<Button
+						disabled={typeof window === "undefined" || state.created.saving}
+						id={id(shellIds.responsePreview)}
+						onClick={state.showPreview}
+						size="sm"
+						variant="outline"
+					>
+						Preview Markdown
+					</Button>
+					<Button
+						disabled={typeof window === "undefined" || state.created.saving}
+						id={id(shellIds.responseClear)}
+						onClick={state.clear}
+						size="sm"
+						variant="ghost"
+					>
+						Clear draft
+					</Button>
+				</div>
+				<pre className="whitespace-pre-wrap rounded-md bg-muted p-3 text-xs" hidden={!state.preview} id={id(shellIds.responsePreviewContent)}>
+					{state.preview}
+				</pre>
+			</div>
 		</details>
 	);
 }

package/src/client/react/AnswerPanel.tsx

@@ -1,9 +1,10 @@
+import { MessageCircleQuestion } from "lucide-react";
 import type { Document, DocumentRequest } from "#browser/document/schema.ts";
 import { reasonMarkdown } from "#browser/responses/reasonMarkdown.ts";
 import { AnswerContext } from "./AnswerContext.tsx";
 import { AnswerForm } from "./AnswerForm.tsx";
+import { AnswerMarkdown } from "./AnswerMarkdown.tsx";
 import { ResponseHistory } from "./ResponseHistory.tsx";
-import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
 
 export function AnswerPanel({ document: data }: { readonly document: Document }) {
 	const requests = data.requests.filter(
@@ -30,23 +31,28 @@ function AnswerCard({ document: data, request }: { readonly document: Document;
 	return (
 		<section
 			aria-labelledby={`answer-title-${request.id}`}
-			className="response-panel rounded-lg border border-border bg-card p-4"
+			className="response-panel max-w-[72ch] space-y-5 rounded-xl border bg-card p-5 text-card-foreground shadow-sm"
 			id={`answer-card-${request.id}`}
 			tabIndex={-1}
 		>
-			<h2 id={`answer-title-${request.id}`}>{cardTitle(request, closed)}</h2>
+			<h2 className="flex items-center gap-2 font-medium text-muted-foreground text-sm" id={`answer-title-${request.id}`}>
+				{request.open ? <MessageCircleQuestion aria-hidden="true" className="size-4 text-needs-you" /> : null}
+				{cardTitle(request, closed)}
+			</h2>
 			{!(request.open || unavailable) && (
-				<p role="status">
+				<p className="text-muted-foreground text-sm" role="status">
 					{closed ? "This question is closed. Recorded answers remain below." : "Answer unavailable. Check the source diagnostics."}
 				</p>
 			)}
-			{Boolean(unavailable) && <p role="status">{unavailable}</p>}
+			{Boolean(unavailable) && (
+				<p className="rounded-md border border-destructive/40 px-3 py-2 text-sm" role="status">
+					{unavailable}
+				</p>
+			)}
 			{request.open && preview !== undefined && (
 				<>
+					<AnswerMarkdown className="answer-reason font-medium text-base" file={source.file} source={reasonMarkdown(preview.reason)} />
 					<AnswerContext preview={preview} />
-					<div className="answer-reason">
-						<ResponseMarkdown file={source.file} source={reasonMarkdown(preview.reason)} />
-					</div>
 				</>
 			)}
 			{request.open && preview && !unavailable && <AnswerForm document={source} preview={preview} request={request} />}

package/src/client/react/AnswerPrompts.tsx

@@ -1,10 +1,11 @@
 import { useAtomValue } from "@effect/atom-react";
 import { useId, useLayoutEffect, useRef } from "react";
 import type { Document } from "#browser/document/schema.ts";
+import { promptHeading } from "#browser/responses/cardContext.ts";
 import type { Prompt } from "#browser/responses/Prompt.ts";
 import type { PromptAnswer } from "#browser/responses/schema.ts";
+import { AnswerMarkdown } from "./AnswerMarkdown.tsx";
 import { PromptOption } from "./PromptOption.tsx";
-import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
 import type { useResponseForm } from "./useResponseForm.ts";
 
 type Model = ReturnType<typeof useResponseForm>["form"];
@@ -36,12 +37,9 @@ function PromptField({
 	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.`;
-	}
+	const guidance = promptGuidance(prompt.mode, choices !== undefined);
+	const heading = promptHeading(prompt.source);
+	const title = heading.title ?? `Question ${index + 1}`;
 	function change(next: PromptAnswer) {
 		onEdit(index, next);
 	}
@@ -57,14 +55,14 @@ function PromptField({
 	}
 	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.`;
+		message = `Unanswered: “${title}”. 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}>
+		<fieldset className="m-0 min-w-0 space-y-3 border-0 p-0" data-mode={prompt.mode} data-prompt={prompt.id} data-source={prompt.source}>
+			<legend className="mb-1 p-0 font-semibold text-base">{choices === undefined ? title : "Your answer"}</legend>
+			{choices === undefined && heading.rest ? <AnswerMarkdown className="text-sm" file={document.file} source={heading.rest} /> : null}
+			<p className="text-muted-foreground text-sm">{guidance}</p>
+			<div className={`grid gap-2 ${choices ? "question-choices" : ""}`}>
 				{prompt.options.map((option, choice) => (
 					<PromptOption
 						checked={answer.selected.includes(option.id)}
@@ -78,26 +76,43 @@ function PromptField({
 				))}
 			</div>
 			{prompt.mode !== "text" && (
-				<button data-clear-choices onClick={() => change({ ...answer, selected: [] })} type="button">
+				<button
+					className="text-muted-foreground text-xs underline-offset-4 hover:underline disabled:opacity-50"
+					data-clear-choices
+					disabled={answer.selected.length === 0}
+					onClick={() => change({ ...answer, selected: [] })}
+					type="button"
+				>
 					Clear selections
 				</button>
 			)}
-			<label>
-				{choices ? "Another answer / additional text" : "Additional text / another answer"}
+			<label className="grid gap-2 text-sm">
+				<span>{prompt.mode === "text" ? "Your answer" : "Add a note or answer in your own words (optional)"}</span>
 				<textarea
 					aria-describedby={`${errorId}-error`}
 					aria-invalid={Boolean(error)}
+					className="w-full rounded-md border bg-background px-3 py-2 text-sm aria-invalid:border-destructive"
 					data-answer-text
 					maxLength={8192}
 					onInput={(event) => change({ ...answer, text: event.currentTarget.value })}
 					ref={ref}
-					rows={choices ? 4 : 3}
+					rows={choices || prompt.mode === "text" ? 4 : 2}
 					value={answer.text}
 				/>
-				<span className="response-field-error" hidden={!error} id={`${errorId}-error`}>
+				<span className="response-field-error text-destructive text-xs" hidden={!error} id={`${errorId}-error`}>
 					{message}
 				</span>
 			</label>
 		</fieldset>
 	);
 }
+
+function promptGuidance(mode: Prompt["mode"], authored: boolean) {
+	if (authored) {
+		return "Choose an option or write another answer. Nothing is selected for you.";
+	}
+	if (mode === "text") {
+		return "Answer in your own words.";
+	}
+	return `${mode === "one" ? "Choose one option" : "Choose any combination"}, or answer in your own words. Nothing is selected for you.`;
+}

package/src/client/react/BoardShell.tsx

@@ -4,7 +4,6 @@ import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
 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";
@@ -15,6 +14,7 @@ import { emptyMainLocation, type MainLocation } from "./mainLocation.ts";
 import { PhoneNavigation } from "./PhoneNavigation.tsx";
 import { ReadingLibrary } from "./ReadingLibrary.tsx";
 import { ReadingReadyContext, readingReady } from "./ReadingReadyContext.ts";
+import { navigationQuery } from "./routeQuery.ts";
 import { SearchDialog } from "./SearchDialog.tsx";
 import { SessionContext } from "./SessionContext.ts";
 import type { ShellApi } from "./ShellApi.ts";

package/src/client/react/DocumentAttention.tsx

@@ -1,5 +1,6 @@
 import type { Document } from "#browser/document/schema.ts";
 import { fileUrl } from "#files/url.ts";
+import { responseUrl } from "#responses/url.ts";
 import { keyed } from "./keyed.ts";
 import { Reference } from "./Reference.tsx";
 export function DocumentAttention({ document }: { readonly document: Document }) {
@@ -28,9 +29,7 @@ function Request({ document, index }: { readonly document: Document; readonly in
 		document.metadata.attention?.filter((entry) => entry.id === request.id).length === 1
 			? `attention-request-${request.id}`
 			: `attention-record-${index}`;
-	const respond = document.requests.some((entry) => entry.id === request.id && entry.open)
-		? `#answer-card-${request.id}`
-		: `/_board/respond?item=${encodeURIComponent(document.metadata.id ?? "")}&request=${encodeURIComponent(request.id)}`;
+	const respond = responseUrl(document.metadata.id ?? "", request.id);
 	const targets = request.unblocks.map((target, targetIndex) => (
 		<span key={target}>
 			{targetIndex > 0 && ", "}

package/src/client/react/DocumentMain.tsx

@@ -2,11 +2,11 @@ import { Cause, Option } from "effect";
 import { useEffect, useState } from "react";
 import { useQuery } from "@shivaedev/effect-react/result-state.ts";
 import type { Document } from "#browser/document/schema.ts";
-import { documentQuery } from "#client/page/routeQuery.ts";
 import { DocumentPage } from "./DocumentPage.tsx";
 import type { MainLocation } from "./mainLocation.ts";
 import { ProjectionMain } from "./ProjectionMain.tsx";
 import { RemainingMain } from "./RemainingMain.tsx";
+import { documentQuery } from "./routeQuery.ts";
 import type { ShellApi } from "./ShellApi.ts";
 import { shellIds } from "./shellIds.ts";
 import { useDocumentPage } from "./useDocumentPage.ts";

package/src/client/react/GoalPage.tsx

@@ -1,10 +1,10 @@
 import { Option } from "effect";
 import { useQuery } from "@shivaedev/effect-react/result-state.ts";
 import type { Document } from "#browser/document/schema.ts";
-import { routeQueryOptions } from "#client/page/routeQuery.ts";
 import { GoalCriteria } from "./GoalCriteria.tsx";
 import { GoalWorkTable } from "./GoalWorkTable.tsx";
 import { targetsGoal } from "./goalWork.ts";
+import { routeQueryOptions } from "./routeQuery.ts";
 import type { ShellApi } from "./ShellApi.ts";
 
 export function GoalPage({ api, document }: { readonly api: ShellApi; readonly document: Document }) {

package/src/client/react/GoalProgressHeader.tsx

@@ -2,8 +2,8 @@ import { Option } from "effect";
 import { useId } from "react";
 import { useQuery } from "@shivaedev/effect-react/result-state.ts";
 import type { Document } from "#browser/document/schema.ts";
-import { routeQueryOptions } from "#client/page/routeQuery.ts";
 import { GoalProgressSummary } from "./GoalProgressSummary.tsx";
+import { routeQueryOptions } from "./routeQuery.ts";
 import type { ShellApi } from "./ShellApi.ts";
 
 export function GoalProgressHeader({ api, document }: { readonly api: ShellApi; readonly document: Document }) {

package/src/client/react/LibraryMain.tsx

@@ -1,7 +1,7 @@
-import { routeQueryOptions } from "#client/page/routeQuery.ts";
 import { LibraryPage } from "./LibraryPage.tsx";
 import type { MainLocation } from "./mainLocation.ts";
 import { ProjectionFrame } from "./ProjectionFrame.tsx";
+import { routeQueryOptions } from "./routeQuery.ts";
 import type { ShellApi } from "./ShellApi.ts";
 export function LibraryMain({
 	api,

package/src/client/react/LibraryPage.tsx

@@ -1,8 +1,8 @@
 import { Option } from "effect";
 import { useState } from "react";
 import { useQuery } from "@shivaedev/effect-react/result-state.ts";
-import { routeQueryOptions } from "#client/page/routeQuery.ts";
 import { LibraryContents } from "./LibraryContents.tsx";
+import { routeQueryOptions } from "./routeQuery.ts";
 import type { ShellApi } from "./ShellApi.ts";
 
 export function LibraryPage({ api, url = "/_board/library" }: { readonly api: ShellApi; readonly url?: string }) {

package/src/client/react/ProjectionFrame.tsx

@@ -130,7 +130,7 @@ function projectionView(route: ProjectionRoute | RemainingRoute) {
 	if (route === "board") {
 		return "";
 	}
-	return route === "respond" ? "response" : route;
+	return route;
 }
 
 function failureStatus(missing: boolean, conflict: boolean) {

package/src/client/react/ProjectionMain.tsx

@@ -1,9 +1,9 @@
 import { documentSourceId } from "#client/document/layout.ts";
-import { routeQueryOptions } from "#client/page/routeQuery.ts";
 import { HomeBoard } from "./HomeBoard.tsx";
 import type { MainLocation } from "./mainLocation.ts";
 import { ProjectionFrame } from "./ProjectionFrame.tsx";
 import type { ProjectionRoute } from "./projectionRoute.ts";
+import { routeQueryOptions } from "./routeQuery.ts";
 import type { ShellApi } from "./ShellApi.ts";
 import { TodayPage } from "./TodayPage.tsx";
 import { WorkPage } from "./WorkPage.tsx";