@shivaedev/work-board 0.17.0 → 0.18.0

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 { useQuery } from "@shivaedev/effect-react/client/resultState.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/LiveControls.tsx

@@ -2,7 +2,7 @@ import { useAtomValue } from "@effect/atom-react";
 import { Option } from "effect";
 import * as Atom from "effect/reactivity/Atom";
 import { useMemo } from "react";
-import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { useQuery } from "@shivaedev/effect-react/client/resultState.ts";
 import type { BrowserClient } from "#client/client.ts";
 import { activeRead } from "./activeRead.ts";
 import { liveStatus } from "./liveStatus.ts";

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";

package/src/client/react/PromptOption.tsx

@@ -1,8 +1,10 @@
 import { useId } from "react";
 import type { Document } from "#browser/document/schema.ts";
-import { optionLabel } from "#browser/responses/cardContext.ts";
+import { optionText } from "#browser/responses/cardContext.ts";
 import type { Prompt } from "#browser/responses/Prompt.ts";
-import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
+import { Badge } from "#client/react/components/ui/Badge.tsx";
+import { cn } from "#client/react/lib/cn.ts";
+
 export function PromptOption({
 	document,
 	prompt,
@@ -20,37 +22,50 @@ export function PromptOption({
 }) {
 	const source = document.metadata.options?.[choice];
 	const id = useId();
-	const control = (
-		<input
-			checked={checked}
-			data-option-source={option.source}
-			hidden
-			id={id}
-			name={`choice-${prompt.id}`}
-			onChange={(event) => choose(option.id, event.currentTarget.checked)}
-			onInput={(event) => choose(option.id, event.currentTarget.checked)}
-			type={prompt.mode === "one" ? "radio" : "checkbox"}
-			value={option.id}
-		/>
-	);
-	const label = source?.label ?? optionLabel(option.id, option.source, document.requests.find((request) => request.open)?.preview?.reason ?? "");
+	const authored = optionText(option.id, option.source);
+	const label = source?.label ?? authored.label;
+	const description = source?.description ?? authored.description;
 	return (
 		<div>
-			{control}
+			<input
+				checked={checked}
+				data-option-source={option.source}
+				hidden
+				id={id}
+				name={`choice-${prompt.id}`}
+				onChange={(event) => choose(option.id, event.currentTarget.checked)}
+				onInput={(event) => choose(option.id, event.currentTarget.checked)}
+				type={prompt.mode === "one" ? "radio" : "checkbox"}
+				value={option.id}
+			/>
 			<button
 				aria-pressed={checked}
-				className="question-choice"
+				className={cn(
+					"question-choice flex w-full items-start gap-3 rounded-lg border bg-background px-4 py-3 text-left transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+					checked && "border-primary bg-accent",
+				)}
 				data-choice={option.id}
 				onClick={() => choose(option.id, prompt.mode !== "many" || !checked)}
 				type="button"
 			>
-				<strong>
-					{label}
-					{label === document.metadata.recommended && " · Recommended"}
-				</strong>
-				{source !== undefined && <small>{source.description}</small>}
+				<span
+					aria-hidden="true"
+					className={cn(
+						"mt-0.5 grid size-4 shrink-0 place-items-center border border-muted-foreground",
+						prompt.mode === "many" ? "rounded-sm" : "rounded-full",
+						checked && "border-primary",
+					)}
+				>
+					{checked ? <span className={cn("size-2 bg-primary", prompt.mode === "many" ? "rounded-[1px]" : "rounded-full")} /> : null}
+				</span>
+				<span className="grid gap-1">
+					<strong className="flex flex-wrap items-center gap-2 font-medium text-sm">
+						{label}
+						{label === document.metadata.recommended && <Badge variant="outline">Recommended</Badge>}
+					</strong>
+					{Boolean(description) && <small className="text-muted-foreground text-sm">{description}</small>}
+				</span>
 			</button>
-			{source === undefined && <ResponseMarkdown file={document.file} source={option.source.replace(/^#{1,6}\s+.+$/mu, "")} />}
 		</div>
 	);
 }

package/src/client/react/ReadingHistory.tsx

@@ -1,5 +1,5 @@
 import { Option } from "effect";
-import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { useQuery } from "@shivaedev/effect-react/client/resultState.ts";
 import type { Item } from "#client/react/LibraryContext.ts";
 import { fileUrl } from "#files/url.ts";
 import type { ShellApi } from "./ShellApi.ts";

package/src/client/react/RemainingMain.tsx

@@ -1,4 +1,3 @@
-import { routeQueryOptions } from "#client/page/routeQuery.ts";
 import { GoalsPage } from "./GoalsPage.tsx";
 import { HandoffPage } from "./HandoffPage.tsx";
 import { LibraryMain } from "./LibraryMain.tsx";
@@ -6,6 +5,7 @@ import type { MainLocation } from "./mainLocation.ts";
 import { ProjectionFrame } from "./ProjectionFrame.tsx";
 import { ResultPage } from "./ResultPage.tsx";
 import type { RemainingRoute } from "./remainingRoute.ts";
+import { routeQueryOptions } from "./routeQuery.ts";
 import type { ShellApi } from "./ShellApi.ts";
 import { StartPage } from "./StartPage.tsx";
 import { SystemMain } from "./SystemMain.tsx";

package/src/client/react/ResponseHistory.tsx

@@ -1,6 +1,12 @@
 import type { DocumentRequest } from "#browser/document/schema.ts";
-import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
+import type { RecordedResponse } from "#browser/responses/schema.ts";
+import { chosenLabels } from "#client/responses/summary.ts";
+import { Age } from "./Age.tsx";
+import { AnswerMarkdown } from "./AnswerMarkdown.tsx";
 import { shellIds } from "./shellIds.ts";
+
+const KINDS = { "answer": "answered", "clarify": "asked back", "not_now": "said not now" } as const;
+
 export function ResponseHistory({
 	request,
 	id = shellIds.responseHistory,
@@ -11,34 +17,67 @@ export function ResponseHistory({
 	const records = request?.responses ?? [];
 	const preview = request?.preview;
 	return (
-		<section id={id}>
-			<h2>Recorded responses</h2>
+		<section className="space-y-3 border-t pt-4" id={id}>
+			<h2 className="font-medium text-sm">Recorded responses</h2>
 			{records.length === 0 ? (
-				<p>No response is recorded for this source revision.</p>
+				<p className="text-muted-foreground text-sm">No response is recorded yet.</p>
 			) : (
-				records.map((record) => <ResponseEntry current={record.response.question === preview?.id} key={record.id} record={record} />)
+				records.map((record) => (
+					<ResponseEntry current={record.response.question === preview?.id} key={record.id} record={record} request={request} />
+				))
 			)}
 		</section>
 	);
 }
-function ResponseEntry({ record, current }: { readonly record: import("#browser/responses/schema.ts").RecordedResponse; readonly current: boolean }) {
+function ResponseEntry({
+	record,
+	current,
+	request,
+}: {
+	readonly record: RecordedResponse;
+	readonly current: boolean;
+	readonly request: DocumentRequest | undefined;
+}) {
+	const answers = record.response.answers;
+	const chosen = chosenLabels(request?.prompts ?? [], answers);
+	const notes = (answers ?? []).map((answer) => answer.text.trim()).filter(Boolean);
 	return (
-		<article id={record.id}>
-			<h3>
-				<a href={`/responses/${record.id}.md`}>
-					{record.response.author} · {record.response.type}
+		<article className="space-y-2 rounded-lg bg-muted/50 px-4 py-3 text-sm" id={record.id}>
+			<h3 className="flex flex-wrap items-baseline gap-x-1.5 font-normal">
+				<a className="font-medium underline-offset-4 hover:underline" href={`/responses/${record.id}.md`}>
+					{record.response.author}
 				</a>
+				<span className="text-muted-foreground">{KINDS[record.response.type]}</span>
+				<Age modified={record.response.recordedAt} short />
 			</h3>
-			<p>
+			{answers === undefined ? (
+				<AnswerMarkdown file={`responses/${record.id}.md`} source={record.body} />
+			) : (
+				<>
+					<p>
+						<span className="text-muted-foreground">Chose </span>
+						<strong className="font-medium">{chosen || "no listed option"}</strong>
+					</p>
+					{notes.map((note) => (
+						<p className="whitespace-pre-wrap" key={note}>
+							{note}
+						</p>
+					))}
+					<details className="text-muted-foreground text-xs">
+						<summary className="cursor-pointer select-none">Full response</summary>
+						<AnswerMarkdown className="mt-2 text-foreground text-sm" file={`responses/${record.id}.md`} source={record.body} />
+					</details>
+				</>
+			)}
+			<p className="text-muted-foreground text-xs" title={record.response.reviewedRevision}>
 				{current ? "This reviewed revision" : "Earlier reviewed context — does not approve the current source"} ·{" "}
-				<code>{record.response.reviewedRevision}</code>
+				<code>{record.response.reviewedRevision.slice(0, 12)}</code>
 			</p>
 			{Boolean(record.response.supersedes) && (
-				<p>
+				<p className="text-muted-foreground text-xs">
 					Explicitly supersedes <a href={`/responses/${record.response.supersedes}.md`}>{record.response.supersedes}</a>.
 				</p>
 			)}
-			<ResponseMarkdown file={`responses/${record.id}.md`} source={record.body} />
 		</article>
 	);
 }

package/src/client/react/SearchPalette.tsx

@@ -1,6 +1,6 @@
 import { Option } from "effect";
 import { useEffect, useRef, useState } from "react";
-import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { useQuery } from "@shivaedev/effect-react/client/resultState.ts";
 import { SearchResults } from "#client/react/SearchResults.tsx";
 import type { ShellApi } from "#client/react/ShellApi.ts";
 import { matchingCommands, type SearchItem } from "#client/react/searchCommands.ts";

package/src/client/react/Sidebar.tsx

@@ -1,10 +1,11 @@
 import { Option } from "effect";
 import { PanelsTopLeft } from "lucide-react";
 import { useContext, useEffect } from "react";
-import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { useQuery } from "@shivaedev/effect-react/client/resultState.ts";
 import type { Navigation } from "#browser/Navigation.ts";
 import { Badge } from "#client/react/components/ui/Badge.tsx";
 import { buttonVariants } from "#client/react/components/ui/buttonVariants.ts";
+import { destinationName } from "#client/react/destinationName.ts";
 import { GoalProgress } from "#client/react/GoalProgress.tsx";
 import { InboxCount } from "#client/react/Header.tsx";
 import { type Item, LibraryContext } from "#client/react/LibraryContext.ts";
@@ -38,6 +39,12 @@ export function Sidebar({
 		today: data?.inboxCount,
 		work: data?.counts.now,
 	};
+	function name(view: (typeof workspaceDestinations)[number]["view"], label: string) {
+		if (view === "today") {
+			return destinationName(label, counts.today, "need you");
+		}
+		return view === "work" ? destinationName(label, counts.work, "open tasks") : label;
+	}
 	useEffect(() => {
 		const sidebar = document.getElementById(shellIds.sidebar);
 		if (controls.narrow && controls.open) {
@@ -66,6 +73,7 @@ export function Sidebar({
 				{workspaceDestinations.map(({ label, href, view, id }) => (
 					<a
 						aria-current={(view === "today" ? home : main.view === view) ? "page" : undefined}
+						aria-label={name(view, label)}
 						className={cn(
 							buttonVariants({ variant: "ghost" }),
 							"justify-between no-underline",
@@ -77,7 +85,7 @@ export function Sidebar({
 					>
 						<span>{label}</span>
 						{view === "today" && <InboxCount count={counts.today ?? null} id={shellIds.inboxCount} />}
-						{view === "work" && <Badge>{counts.work ?? "?"}</Badge>}
+						{view === "work" && counts.work !== undefined && <Badge aria-hidden="true">{counts.work}</Badge>}
 					</a>
 				))}
 			</nav>

package/src/client/react/SystemFleetLane.tsx

@@ -1,4 +1,5 @@
 import type { FleetItemsProjection } from "#browser/views/FleetItemsProjection.ts";
+import { fleetHolder } from "#browser/views/now.ts";
 import { Badge } from "#client/react/components/ui/Badge.tsx";
 import { Card } from "#client/react/components/ui/Card.tsx";
 
@@ -29,7 +30,7 @@ function FleetRow({ item }: { readonly item: Item }) {
 				{title}
 			</a>
 			<Badge variant="outline">{item.stage}</Badge>
-			{Boolean(item.attentionOwner) && <span className="text-muted-foreground text-xs">Waiting on {item.attentionOwner}</span>}
+			<span className="text-muted-foreground text-xs">{fleetHolder(item)}</span>
 			{Boolean(item.prUrl) && (
 				<a aria-label={`Pull request for ${title}`} className="text-sm underline" href={item.prUrl}>
 					PR ↗

package/src/client/react/SystemHealth.tsx

@@ -1,6 +1,17 @@
 import type { FleetHealth } from "#diagnostics/health.ts";
 import { ObservedTime } from "./diagnosticsValues.tsx";
-export function SystemHealth({ value, now }: { readonly value: FleetHealth; readonly now: number }) {
+
+const waitingOn = { automation: "Waiting on Fleet agents", orchestrator: "Waiting on the orchestrator" } as const;
+
+export function SystemHealth({
+	value,
+	now,
+	needsYou,
+}: {
+	readonly value: FleetHealth;
+	readonly now: number;
+	readonly needsYou?: number | null | undefined;
+}) {
 	let freshness = "Current snapshot";
 	if (now < value.observedAt) {
 		freshness = "Publisher clock is ahead";
@@ -26,11 +37,20 @@ export function SystemHealth({ value, now }: { readonly value: FleetHealth; read
 						<strong>{value.queued}</strong>
 					</dd>
 				</div>
-				{Object.entries(value.waiting).map(([owner, count]) => (
+				<div data-needs-you>
+					<dt>Needs you</dt>
+					<dd className="flex flex-wrap items-baseline gap-2">
+						<strong>{needsYou ?? "Unavailable"}</strong>
+						<a className="text-xs" href="/#needs-you">
+							Open Today
+						</a>
+					</dd>
+				</div>
+				{(["orchestrator", "automation"] as const).map((owner) => (
 					<div key={owner}>
-						<dt>Waiting on {owner}</dt>
+						<dt>{waitingOn[owner]}</dt>
 						<dd>
-							<strong>{count}</strong>
+							<strong>{value.waiting[owner]}</strong>
 						</dd>
 					</div>
 				))}

package/src/client/react/SystemMain.tsx

@@ -1,7 +1,9 @@
+import { Option } from "effect";
 import { useContext } from "react";
-import { routeQueryOptions } from "#client/page/routeQuery.ts";
+import { useQuery } from "@shivaedev/effect-react/client/resultState.ts";
 import type { MainLocation } from "./mainLocation.ts";
 import { ProjectionFrame } from "./ProjectionFrame.tsx";
+import { navigationQuery, routeQueryOptions } from "./routeQuery.ts";
 import { SessionContext } from "./SessionContext.ts";
 import type { ShellApi } from "./ShellApi.ts";
 import { SystemPage } from "./SystemPage.tsx";
@@ -18,12 +20,14 @@ export function SystemMain({
 }) {
 	const atom = api.diagnostics.query(undefined, routeQueryOptions);
 	useDiagnosticsPolling(useContext(SessionContext), atom, api.fleetItems.query(undefined, routeQueryOptions));
+	const navigation = useQuery(navigationQuery(api), { keepPreviousData: true });
+	const needsYou = Option.getOrUndefined(navigation.data)?.inboxCount;
 	return (
 		<ProjectionFrame
 			atom={atom}
 			location={() => ({ file: "System", status: 200, view: "system" })}
 			onPage={onPage}
-			render={(data) => <SystemPage data={data} />}
+			render={(data) => <SystemPage data={data} needsYou={needsYou} />}
 			route="system"
 			url={url}
 		/>

package/src/client/react/SystemPage.tsx

@@ -7,7 +7,13 @@ import { FleetItemsContext } from "./FleetItemsContext.ts";
 import { githubLimited } from "./githubLimited.ts";
 import { SystemFleetLane } from "./SystemFleetLane.tsx";
 import { SystemHealth } from "./SystemHealth.tsx";
-export function SystemPage({ data: { sources: data, now } }: { readonly data: DiagnosticsProjection }) {
+export function SystemPage({
+	data: { sources: data, now },
+	needsYou,
+}: {
+	readonly data: DiagnosticsProjection;
+	readonly needsYou?: number | null | undefined;
+}) {
 	const items = useContext(FleetItemsContext);
 	const fleet = data.fleet.state === "ready" ? { ...data.fleet, observedAt: data.fleet.value.observedAt } : data.fleet;
 	return (
@@ -38,7 +44,7 @@ export function SystemPage({ data: { sources: data, now } }: { readonly data: Di
 							|| now < fleet.value.observedAt)
 					}
 					name="Fleet"
-					render={(value) => <SystemHealth now={now} value={value} />}
+					render={(value) => <SystemHealth needsYou={needsYou} now={now} value={value} />}
 					source={fleet}
 					stale={fleet.state === "ready" && now - fleet.value.observedAt > fleet.value.staleAfterMs}
 				/>

package/src/client/react/TodayNeeds.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import type { InboxProjection } from "#browser/views/schema.ts";
 import { StatusChip } from "#client/react/components/ui/StatusChip.tsx";
 import { Age } from "./Age.tsx";
@@ -13,7 +14,9 @@ export function TodayNeeds({ api, data }: { readonly api: ShellApi; readonly dat
 		<ul aria-label="Needs you" className="m-0 list-none divide-y rounded-lg border border-border p-0">
 			{data.you.map((item) => (
 				<li className="h-12 max-h-12" data-attention-id={item.id} key={`${item.file}:${item.href}`}>
-					<TodayRow api={api} item={item} />
+					<TodayRow item={item} status="needs-you">
+						<TodayOptions api={api} item={item} />
+					</TodayRow>
 				</li>
 			))}
 		</ul>
@@ -22,13 +25,25 @@ export function TodayNeeds({ api, data }: { readonly api: ShellApi; readonly dat
 	);
 }
 
-function TodayRow({ api, item }: { readonly api: ShellApi; readonly item: Item }) {
+export function TodayLater({ items }: { readonly items: readonly Item[] }) {
 	return (
-		<div className="today-row flex h-full min-w-0 items-center gap-2 px-2" data-attention-row>
+		<ul aria-label="Later" className="m-0 list-none divide-y rounded-lg border border-border p-0">
+			{items.map((item) => (
+				<li className="h-12 max-h-12" key={item.file}>
+					<TodayRow item={item} status="deferred" />
+				</li>
+			))}
+		</ul>
+	);
+}
+
+function TodayRow({ children, item, status }: { readonly children?: ReactNode; readonly item: Item; readonly status: "deferred" | "needs-you" }) {
+	return (
+		<div className="today-row flex h-full min-w-0 items-center gap-2 px-2" data-attention-row={status === "needs-you" ? "" : undefined}>
 			<StatusChip
-				aria-label="Needs you"
+				aria-label={status === "needs-you" ? "Needs you" : "Deferred"}
 				className="shrink-0 max-sm:size-6 max-sm:justify-center max-sm:gap-0 max-sm:px-1 max-sm:text-[0px] max-sm:[&_svg]:shrink-0"
-				status="needs-you"
+				status={status}
 			/>
 			<div className="min-w-0 flex-1">
 				<div className="flex min-w-0 items-baseline gap-2">
@@ -48,7 +63,7 @@ function TodayRow({ api, item }: { readonly api: ShellApi; readonly item: Item }
 			<span className="shrink-0 text-[10px] text-muted-foreground tabular-nums">
 				{item.modified === undefined ? "Age ?" : <Age modified={item.modified} short />}
 			</span>
-			<TodayOptions api={api} item={item} />
+			{children}
 		</div>
 	);
 }

package/src/client/react/TodayOptionButton.tsx

@@ -0,0 +1,35 @@
+import { optionText } from "#browser/responses/cardContext.ts";
+import { Button } from "#client/react/components/ui/Button.tsx";
+
+export function TodayOptionButton({
+	disabled,
+	onChoose,
+	option,
+	recommended,
+	source,
+}: {
+	readonly disabled: boolean;
+	readonly onChoose: () => void;
+	readonly option: { readonly id: string; readonly source: string };
+	readonly recommended: string | undefined;
+	readonly source: { readonly label: string; readonly description: string } | undefined;
+}) {
+	const authored = optionText(option.id, option.source);
+	const text = source?.label ?? authored.label;
+	const description = source?.description ?? authored.description;
+	return (
+		<Button
+			className="h-auto w-full flex-col items-start gap-0.5 whitespace-normal px-3 py-2 text-left"
+			disabled={disabled}
+			onClick={onChoose}
+			size="sm"
+			variant="outline"
+		>
+			<span>
+				{text}
+				{recommended === text ? " · Recommended" : null}
+			</span>
+			{description ? <span className="font-normal text-muted-foreground text-xs">{description}</span> : null}
+		</Button>
+	);
+}

package/src/client/react/TodayOptions.tsx

@@ -1,21 +1,23 @@
 import { RegistryContext } from "@effect/atom-react";
 import { Cause, Effect, Option } from "effect";
-import { useContext, useMemo, useState } from "react";
-import { useAction, useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { useContext, useMemo, useRef, useState } from "react";
+import { useAction, useQuery } from "@shivaedev/effect-react/client/resultState.ts";
 import type { Document, DocumentRequest } from "#browser/document/schema.ts";
 import { answerBody } from "#browser/responses/answerBody.ts";
-import { optionLabel } from "#browser/responses/cardContext.ts";
+import { promptHeading } from "#browser/responses/cardContext.ts";
+import { reasonMarkdown } from "#browser/responses/reasonMarkdown.ts";
 import type { InboxProjection } from "#browser/views/schema.ts";
-import { documentQuery, navigationQuery, routeQueryOptions } from "#client/page/routeQuery.ts";
-import { Button } from "#client/react/components/ui/Button.tsx";
 import { Popover } from "#client/react/components/ui/Popover.tsx";
 import { authorLabel } from "#client/responses/authorLabel.ts";
+import { chosenLabels } from "#client/responses/summary.ts";
 import { saveFailure } from "#client/saveFailure.ts";
 import { fileUrl } from "#files/url.ts";
 import { responseUrl } from "#responses/url.ts";
 import { createResponse } from "./createResponse.ts";
 import { useFormClient } from "./FormContext.ts";
+import { documentQuery, navigationQuery, routeQueryOptions } from "./routeQuery.ts";
 import type { ShellApi } from "./ShellApi.ts";
+import { TodayOptionButton } from "./TodayOptionButton.tsx";
 
 export function TodayOptions({ api, item }: { readonly api: ShellApi; readonly item: InboxProjection["you"][number] }) {
 	const query = useQuery(documentQuery(api, fileUrl(item.file)), { keepPreviousData: true });
@@ -28,11 +30,11 @@ export function TodayOptions({ api, item }: { readonly api: ShellApi; readonly i
 		&& !request.promptUnavailable
 		&& request.prompts?.length === 1
 		&& request.prompts[0]?.mode === "one" ? (
-		<Popover label={`Answer ${item.title}`} trigger="Answer" triggerClassName="h-8 w-auto px-1 text-xs">
-			<a className="mb-3 block text-xs" href={item.href}>
-				Open full question
-			</a>
+		<Popover className="w-80" label={`Answer ${item.title}`} trigger="Answer" triggerClassName="h-8 w-auto px-1 text-xs">
 			<InlineOptions api={api} document={data} key={request.preview.reviewedRevision} request={request} />
+			<a className="mt-3 block border-t px-2 pt-2 text-muted-foreground text-xs hover:text-foreground" href={item.href}>
+				Open the full question with its context →
+			</a>
 		</Popover>
 	) : (
 		<a aria-label={`Answer ${item.title}`} className="shrink-0 text-xs" href={item.href}>
@@ -43,6 +45,8 @@ export function TodayOptions({ api, item }: { readonly api: ShellApi; readonly i
 
 function InlineOptions({ api, document: data, request }: { readonly api: ShellApi; readonly document: Document; readonly request: DocumentRequest }) {
 	const registry = useContext(RegistryContext);
+	const requestRef = useRef(request);
+	requestRef.current = request;
 	const client = useFormClient();
 	const [label] = useState(() => authorLabel(() => localStorage, document.documentElement.dataset.workspace));
 	const [author, setAuthor] = useState(() => label.read("") || "maintainer");
@@ -50,8 +54,8 @@ function InlineOptions({ api, document: data, request }: { readonly api: ShellAp
 		() =>
 			client.runtime.fn(
 				Effect.fn("Board.answerOption")(function* (choice: string) {
-					const preview = request.preview;
-					const prompt = request.prompts?.[0];
+					const preview = requestRef.current.preview;
+					const prompt = requestRef.current.prompts?.[0];
 					if (!(preview && prompt && author.trim())) {
 						return yield* Effect.fail("Add your local author label.");
 					}
@@ -73,12 +77,14 @@ function InlineOptions({ api, document: data, request }: { readonly api: ShellAp
 					return saved;
 				}),
 			),
-		[client, api, registry, request, author, data.file, label.save],
+		[client, api, registry, author, data.file, label.save],
 	);
 	const action = useAction(actionAtom);
 	const failure = Option.getOrUndefined(Option.flatMap(action.cause, Cause.findErrorOption));
 	const saved = Option.getOrUndefined(action.data);
-	let status = saved ? `Saved: responses/${saved.id}.md. This records feedback, not acceptance.` : "";
+	let status = saved
+		? `Saved: your answer “${chosenLabels(request.prompts ?? [], saved.answers)}” is recorded. The agent reads it the next time it checks.`
+		: "";
 	if (failure) {
 		status = typeof failure === "string" ? failure : saveFailure(failure, "response").text;
 	}
@@ -86,33 +92,36 @@ function InlineOptions({ api, document: data, request }: { readonly api: ShellAp
 		status = "Pending: registering reviewed context, then recording response…";
 	}
 	const prompt = request.prompts?.[0];
+	const reason = reasonMarkdown(request.preview?.reason ?? "").split("\n")[0];
 	return (
-		<fieldset aria-label={`Options for ${data.identity}`} className="m-0 min-w-0 space-y-2 border-0 px-2 pb-2">
-			<div className="flex flex-wrap gap-2">
-				{prompt?.options.map((option, index) => {
-					const text = data.metadata.options?.[index]?.label ?? optionLabel(option.id, option.source, request.preview?.reason ?? "");
-					return (
-						<Button
-							disabled={!(data.writable && author.trim()) || action.pending || Boolean(saved)}
-							key={option.id}
-							onClick={() => action.dispatch(option.id)}
-							size="sm"
-							variant="outline"
-						>
-							{text}
-							{data.metadata.recommended === text && " · Recommended"}
-						</Button>
-					);
-				})}
+		<fieldset aria-label={`Options for ${data.identity}`} className="m-0 min-w-0 space-y-3 border-0 px-2 pb-1">
+			{Boolean(reason) && <p className="m-0 font-medium text-sm">{reason}</p>}
+			{prompt ? <p className="m-0 text-muted-foreground text-xs">{promptHeading(prompt.source).title ?? "Choose one option."}</p> : null}
+			<div className="grid gap-2">
+				{prompt?.options.map((option, index) => (
+					<TodayOptionButton
+						disabled={!(data.writable && author.trim()) || action.pending || Boolean(saved)}
+						key={option.id}
+						onChoose={() => action.dispatch(option.id)}
+						option={option}
+						recommended={data.metadata.recommended}
+						source={data.metadata.options?.[index]}
+					/>
+				))}
 			</div>
 			<details className="text-muted-foreground text-xs">
 				<summary className="cursor-pointer">Answer as {author || "…"}</summary>
-				<label>
+				<label className="mt-2 flex items-center gap-2">
 					Local author label{" "}
-					<input className="rounded border px-2 py-1" maxLength={200} onChange={(event) => setAuthor(event.currentTarget.value)} value={author} />
+					<input
+						className="rounded border bg-background px-2 py-1"
+						maxLength={200}
+						onChange={(event) => setAuthor(event.currentTarget.value)}
+						value={author}
+					/>
 				</label>
 			</details>
-			{!data.writable && <p className="m-0 text-muted-foreground text-xs">Read-only. Enable responses to record an answer.</p>}
+			{!data.writable && <p className="m-0 text-muted-foreground text-xs">This Board is read-only. Start it with --responses to record answers.</p>}
 			{Boolean(status) && (
 				<p className="m-0 text-xs" role="status">
 					{status}