@shivaedev/work-board 0.17.0 → 0.17.1

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/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/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, document.requests.find((request) => request.open)?.preview?.reason ?? "");
+	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/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/SystemMain.tsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
-import { routeQueryOptions } from "#client/page/routeQuery.ts";
 import type { MainLocation } from "./mainLocation.ts";
 import { ProjectionFrame } from "./ProjectionFrame.tsx";
+import { routeQueryOptions } from "./routeQuery.ts";
 import { SessionContext } from "./SessionContext.ts";
 import type { ShellApi } from "./ShellApi.ts";
 import { SystemPage } from "./SystemPage.tsx";

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,37 @@
+import { optionText } from "#browser/responses/cardContext.ts";
+import { Button } from "#client/react/components/ui/Button.tsx";
+
+export function TodayOptionButton({
+	disabled,
+	onChoose,
+	option,
+	reason,
+	recommended,
+	source,
+}: {
+	readonly disabled: boolean;
+	readonly onChoose: () => void;
+	readonly option: { readonly id: string; readonly source: string };
+	readonly reason: string;
+	readonly recommended: string | undefined;
+	readonly source: { readonly label: string; readonly description: string } | undefined;
+}) {
+	const authored = optionText(option.id, option.source, reason);
+	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

@@ -4,18 +4,20 @@ import { useContext, useMemo, useState } from "react";
 import { useAction, useQuery } from "@shivaedev/effect-react/result-state.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}>
@@ -78,7 +80,9 @@ function InlineOptions({ api, document: data, request }: { readonly api: ShellAp
 	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 +90,37 @@ 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}
+						reason={request.preview?.reason ?? ""}
+						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}

package/src/client/react/TodayPage.tsx

@@ -1,15 +1,15 @@
 import { Option } from "effect";
 import { useQuery } from "@shivaedev/effect-react/result-state.ts";
 import type { InboxProjection } from "#browser/views/schema.ts";
-import { navigationQuery, routeQueryOptions } from "#client/page/routeQuery.ts";
 import { fileUrl } from "#files/url.ts";
 import { inProgressItems } from "./inProgressItems.ts";
+import { navigationQuery, routeQueryOptions } from "./routeQuery.ts";
 import type { ShellApi } from "./ShellApi.ts";
 import { TodayGoals } from "./TodayGoals.tsx";
-import { TodayNeeds } from "./TodayNeeds.tsx";
+import { TodayLater, TodayNeeds } from "./TodayNeeds.tsx";
 import { TodayProgress } from "./TodayProgress.tsx";
 
-const todayIds = { goals: "today-goals", needs: "needs-you", progress: "in-progress" };
+const todayIds = { goals: "today-goals", later: "later", needs: "needs-you", progress: "in-progress" };
 
 export function TodayPage({ api, data }: { readonly api: ShellApi; readonly data: InboxProjection }) {
 	const query = useQuery(api.goals.query(undefined, routeQueryOptions), { keepPreviousData: true });
@@ -43,6 +43,7 @@ export function TodayPage({ api, data }: { readonly api: ShellApi; readonly data
 						<h2 className="mt-0 mb-3 font-semibold text-lg">In progress</h2>
 						<TodayProgress data={fleet} failed={Option.isSome(fleetQuery.cause)} />
 					</section>
+					{data.complete && data.later.length > 0 && <Later items={data.later} />}
 				</div>
 				<section className="min-w-0" id={todayIds.goals}>
 					<h2 className="mt-0 mb-3 font-semibold text-lg">Goals</h2>
@@ -67,3 +68,17 @@ function NeedsYou({ api, data }: { readonly api: ShellApi; readonly data: InboxP
 		</section>
 	);
 }
+
+function Later({ items }: { readonly items: InboxProjection["later"] }) {
+	return (
+		<section className="min-w-0" id={todayIds.later}>
+			<details>
+				<summary className="mb-3 cursor-pointer">
+					<h2 className="m-0 inline font-semibold text-lg">Later</h2>
+					<span className="ml-2 text-muted-foreground text-sm tabular-nums">{items.length}</span>
+				</summary>
+				<TodayLater items={items} />
+			</details>
+		</section>
+	);
+}

package/src/client/react/activeRead.ts

@@ -1,7 +1,7 @@
 import type { Cause } from "effect";
 import * as Atom from "effect/reactivity/Atom";
-import { resolvedDocumentFailure } from "#client/page/resolvedDocumentFailure.ts";
 import { pageQueries } from "./pageQueries.ts";
+import { resolvedDocumentFailure } from "./resolvedDocumentFailure.ts";
 import type { ShellApi } from "./ShellApi.ts";
 
 function health(value: { readonly _tag: string; readonly waiting: boolean; readonly cause?: Cause.Cause<unknown> }) {

package/src/client/react/entry.css

@@ -219,12 +219,6 @@
 	}
 }
 
-.answer-cards > .response-panel {
-	max-width: 72ch;
-	padding: 1rem;
-	margin: 0;
-}
-
 @layer components {
 	figure.diagram {
 		@apply mx-0;

package/src/client/react/loadBoardPage.ts

@@ -2,13 +2,13 @@ import { isRedirect, type LoaderFnContext, redirect } from "@tanstack/react-rout
 import { Predicate } from "effect";
 import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
 import { loadQuery } from "@shivaedev/effect-react/router.ts";
-import { documentQuery, navigationQuery } from "#client/page/routeQuery.ts";
 import type { ShellOptions } from "./BoardShell.tsx";
 import { documentRoute } from "./documentRoute.ts";
 import { loadProjection } from "./loadProjection.ts";
 import { loadRemaining } from "./loadRemaining.ts";
 import { projectionRoute } from "./projectionRoute.ts";
 import { remainingRoute } from "./remainingRoute.ts";
+import { documentQuery, navigationQuery } from "./routeQuery.ts";
 
 export type RouterShell = ShellOptions & { readonly registry: AtomRegistry.AtomRegistry };
 

package/src/client/react/loadProjection.ts

@@ -1,8 +1,8 @@
 import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
 import { loadQuery } from "@shivaedev/effect-react/router.ts";
-import { routeQueryOptions } from "#client/page/routeQuery.ts";
 import { pageQueries } from "./pageQueries.ts";
 import type { ProjectionRoute } from "./projectionRoute.ts";
+import { routeQueryOptions } from "./routeQuery.ts";
 import type { ShellApi } from "./ShellApi.ts";
 export function loadProjection(
 	registry: AtomRegistry.AtomRegistry,

package/src/client/react/loadRemaining.ts

@@ -1,7 +1,7 @@
 import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
 import { loadQuery } from "@shivaedev/effect-react/router.ts";
-import { routeQueryOptions } from "#client/page/routeQuery.ts";
 import type { RemainingRoute } from "./remainingRoute.ts";
+import { routeQueryOptions } from "./routeQuery.ts";
 import type { ShellApi } from "./ShellApi.ts";
 export function loadRemaining(
 	registry: AtomRegistry.AtomRegistry,

package/src/client/react/pageQueries.ts

@@ -1,6 +1,6 @@
 import type * as AsyncResult from "effect/reactivity/AsyncResult";
 import type * as Atom from "effect/reactivity/Atom";
-import { routeQueryOptions } from "#client/page/routeQuery.ts";
+import { routeQueryOptions } from "./routeQuery.ts";
 import type { ShellApi } from "./ShellApi.ts";
 
 export function pageQueries(api: ShellApi, kind: string, url: string): readonly Atom.Atom<AsyncResult.AsyncResult<unknown, unknown>>[] {

package/src/client/react/useResponseForm.ts

@@ -11,7 +11,7 @@ import { authorLabel } from "#client/responses/authorLabel.ts";
 import { type ResponseInput, responseFormSchema } from "#client/responses/formSchema.ts";
 import { responsePreview } from "#client/responses/preview.ts";
 import { retainContext } from "#client/responses/retainContext.ts";
-import { responseFeedback, responseSummary } from "#client/responses/summary.ts";
+import { chosenLabels, responseFeedback, responseSummary } from "#client/responses/summary.ts";
 import { sourceChanged } from "#client/sourceChanged.ts";
 import { createResponse } from "./createResponse.ts";
 import { useFormClient } from "./FormContext.ts";
@@ -116,7 +116,9 @@ export function useResponseForm(source: QuestionPreview, prompts: readonly Promp
 		setInteraction("cleared");
 	}
 	const previewed = preview !== undefined && same && Equal.equals(preview, values);
-	const { outcome, text: status } = formStatus(created, interaction, "response", (saved) => responseSaved(saved.id, created.dirty));
+	const { outcome, text: status } = formStatus(created, interaction, "response", (saved) =>
+		responseSaved(saved.id, created.dirty, chosenLabels(prompts, saved.answers)),
+	);
 	const summary = responseSummary(values, prompts, answers(values), attempted);
 	return {
 		answers: answers(values),