@shivaedev/work-board 0.13.0 → 0.14.0

package/src/client/react/PhoneNavigation.tsx

@@ -0,0 +1,84 @@
+import { CalendarDays, Ellipsis, Flag, Search, Zap } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "#client/react/components/ui/Button.tsx";
+import { Modal } from "./Modal.tsx";
+import type { MainLocation } from "./mainLocation.ts";
+import { shellIds } from "./shellIds.ts";
+import { useMedia } from "./useMedia.ts";
+import { workspaceDestinations } from "./workspaceDestinations.ts";
+
+const icons = [CalendarDays, Flag, Zap];
+const TAB_CLASS =
+	"flex min-h-12 min-w-0 flex-col items-center justify-center gap-1 rounded-md border-0 bg-transparent p-0 text-foreground text-xs no-underline aria-[current=page]:bg-accent aria-[current=page]:text-primary";
+
+export function PhoneNavigation({ main, openSearch }: { readonly main: MainLocation; readonly openSearch: () => void }) {
+	const [more, setMore] = useState(false);
+	const narrow = useMedia("(max-width: 767px)");
+	useEffect(() => {
+		if (!narrow) {
+			setMore(false);
+		}
+	}, [narrow]);
+	useEffect(() => {
+		function close() {
+			setMore(false);
+		}
+		document.addEventListener("board-navigate", close);
+		return () => document.removeEventListener("board-navigate", close);
+	}, []);
+	return (
+		<>
+			<nav
+				aria-label="Phone navigation"
+				className="fixed inset-x-0 bottom-0 z-20 grid grid-cols-5 border-t bg-background px-2 pt-1 pb-[max(0.25rem,env(safe-area-inset-bottom))] md:hidden print:hidden"
+			>
+				{workspaceDestinations.slice(0, 3).map(({ label, href, view }, index) => {
+					const Icon = icons[index] ?? CalendarDays;
+					return (
+						<a aria-current={main.view === view ? "page" : undefined} className={TAB_CLASS} href={href} key={view}>
+							<Icon aria-hidden="true" className="size-5" />
+							{label}
+						</a>
+					);
+				})}
+				<button aria-controls="search-dialog" aria-haspopup="dialog" className={TAB_CLASS} onClick={() => openSearch()} type="button">
+					<Search aria-hidden="true" className="size-5" />
+					Search
+				</button>
+				<button
+					aria-controls="phone-more"
+					aria-expanded={more}
+					aria-haspopup="dialog"
+					className={TAB_CLASS}
+					onClick={() => setMore(true)}
+					type="button"
+				>
+					<Ellipsis aria-hidden="true" className="size-5" />
+					More
+				</button>
+			</nav>
+			<Modal className="phone-more" close={() => setMore(false)} id={shellIds.phoneMore} open={more} title={shellIds.phoneMoreTitle}>
+				<div className="mb-3 flex items-center justify-between">
+					<h2 className="font-semibold" id={shellIds.phoneMoreTitle}>
+						More
+					</h2>
+					<Button onClick={() => setMore(false)} variant="ghost">
+						Close
+					</Button>
+				</div>
+				<nav aria-label="More destinations" className="grid gap-2">
+					{workspaceDestinations.slice(3).map(({ href, label, view }) => (
+						<a
+							aria-current={main.view === view ? "page" : undefined}
+							className="flex min-h-12 items-center rounded-md px-3 hover:bg-accent"
+							href={href}
+							key={view}
+						>
+							{label}
+						</a>
+					))}
+				</nav>
+			</Modal>
+		</>
+	);
+}

package/src/client/react/PrChip.tsx

@@ -0,0 +1,13 @@
+import { GitPullRequest } from "lucide-react";
+import { Badge } from "#client/react/components/ui/Badge.tsx";
+
+export function PrChip({ url }: { readonly url: string | undefined }) {
+	return url ? (
+		<a href={url}>
+			<Badge variant="outline">
+				<GitPullRequest aria-hidden="true" />
+				PR
+			</Badge>
+		</a>
+	) : null;
+}

package/src/client/react/ProjectionFrame.tsx

@@ -1,15 +1,15 @@
-import { Cause, Option } from "effect";
+import { Option } from "effect";
 import type * as AsyncResult from "effect/reactivity/AsyncResult";
 import type * as Atom from "effect/reactivity/Atom";
-import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { type ReactNode, useLayoutEffect, useRef } from "react";
 import { flushSync } from "react-dom";
-import { useQuery } from "@shivaedev/effect-react/result-state.ts";
 import { fileUrl } from "#files/url.ts";
 import type { MainLocation } from "./mainLocation.ts";
 import { projectionChanges, type RenderedProjection } from "./projectionChanges.ts";
 import type { ProjectionRoute } from "./projectionRoute.ts";
 import type { RemainingRoute } from "./remainingRoute.ts";
 import { shellIds } from "./shellIds.ts";
+import { useProjectionData } from "./useProjectionData.ts";
 
 export function ProjectionFrame<A, E>({
 	atom,
@@ -28,18 +28,7 @@ export function ProjectionFrame<A, E>({
 	readonly route: ProjectionRoute | RemainingRoute;
 	readonly url: string;
 }) {
-	const query = useQuery(atom);
-	const fresh = Option.getOrUndefined(query.data);
-	const [retained, setRetained] = useState<{ readonly data: A; readonly url: string }>();
-	useEffect(() => {
-		if (fresh !== undefined) {
-			setRetained({ data: fresh, url });
-		}
-	}, [fresh, url]);
-	const failure = Option.getOrUndefined(Option.flatMap(query.cause, Cause.findErrorOption));
-	const missing = typeof failure === "object" && failure !== null && "_tag" in failure && failure._tag === "NotFound";
-	const conflict = typeof failure === "object" && failure !== null && "_tag" in failure && failure._tag === "Conflict";
-	const data = missing || conflict ? undefined : (fresh ?? (retained?.url === url ? retained.data : undefined));
+	const { query, failure, missing, conflict, data, content } = useProjectionData(atom, route, url);
 	const main = data === undefined ? { file: "", status: failureStatus(missing, conflict), view: projectionView(route) } : location(data);
 	const expectedSource = data === undefined ? undefined : source?.(data);
 	const hostRef = useRef<HTMLElement>(null);
@@ -47,6 +36,9 @@ export function ProjectionFrame<A, E>({
 	const failed = Option.isSome(query.cause);
 	useLayoutEffect(() => {
 		const element = hostRef.current;
+		if (element && element.dataset.route !== url) {
+			delete element.dataset.route;
+		}
 		if (!element || query.pending || (data === undefined && !failed)) {
 			return;
 		}
@@ -64,7 +56,7 @@ export function ProjectionFrame<A, E>({
 				}
 				renderedRef.current = projectionChanges(mainElement, renderedRef.current, url);
 				mainElement.dataset.route = url;
-				flushSync(() => onPage({ file: main.file, view: main.view }));
+				flushSync(() => onPage({ file: main.file, title: mainElement.querySelector("h1")?.textContent?.trim(), view: main.view }));
 				document.dispatchEvent(new Event("board-page"));
 			});
 		}
@@ -73,7 +65,7 @@ export function ProjectionFrame<A, E>({
 				records.some(
 					(record) =>
 						record.target instanceof Element
-						&& (record.target.matches(".document-layout") || record.target.closest("article.doc, .item-introduction"))
+						&& (record.target.matches(".document-layout, .board[data-source]") || record.target.closest("article.doc, .item-introduction"))
 						&& !record.target.closest(".age"),
 				)
 			) {
@@ -90,7 +82,7 @@ export function ProjectionFrame<A, E>({
 	return (
 		<>
 			<main
-				className="board-view"
+				className="board-view min-w-0 p-4 md:p-8"
 				data-file={main.file}
 				data-identity={"identity" in main ? main.identity : undefined}
 				data-projection={route}
@@ -102,13 +94,14 @@ export function ProjectionFrame<A, E>({
 				ref={hostRef}
 				tabIndex={-1}
 			>
-				{data === undefined ? (
+				{data === undefined && (
 					<p className="empty" role="status">
 						{loadingMessage(query.pending, missing, failure)}
 					</p>
-				) : (
-					render(data)
 				)}
+				<div className={data === undefined ? "hidden" : "contents"} hidden={data === undefined}>
+					{content === undefined ? null : render(content)}
+				</div>
 			</main>
 			{data !== undefined && Option.isSome(query.cause) && <p role="status">Refresh failed. Your displayed view is retained.</p>}
 		</>

package/src/client/react/ProjectionMain.tsx

@@ -1,12 +1,11 @@
 import { documentSourceId } from "#client/document/layout.ts";
 import { routeQueryOptions } from "#client/page/routeQuery.ts";
 import { HomeBoard } from "./HomeBoard.tsx";
-import { InboxPage } from "./InboxPage.tsx";
 import type { MainLocation } from "./mainLocation.ts";
-import { OverviewPage } from "./OverviewPage.tsx";
 import { ProjectionFrame } from "./ProjectionFrame.tsx";
 import type { ProjectionRoute } from "./projectionRoute.ts";
 import type { ShellApi } from "./ShellApi.ts";
+import { TodayPage } from "./TodayPage.tsx";
 import { WorkPage } from "./WorkPage.tsx";
 export function ProjectionMain({
 	api,
@@ -21,6 +20,15 @@ export function ProjectionMain({
 }) {
 	const options = { onPage, route, url };
 	switch (route) {
+		case "today":
+			return (
+				<ProjectionFrame
+					{...options}
+					atom={api.inbox.query(undefined, routeQueryOptions)}
+					location={(data) => ({ file: "Today", status: data.complete ? 200 : 503, view: "today" })}
+					render={(data) => <TodayPage api={api} data={data} />}
+				/>
+			);
 		case "board":
 			return (
 				<ProjectionFrame
@@ -37,27 +45,9 @@ export function ProjectionMain({
 					{...options}
 					atom={api.work.query({ url }, routeQueryOptions)}
 					location={(data) => ({ file: "Work", status: data.validBoard ? 200 : 404, view: "work" })}
-					render={(data) => <WorkPage data={data} />}
+					render={(data) => <WorkPage api={api} data={data} />}
 					source={(data) => (data.selected ? documentSourceId(data.selected) : undefined)}
 				/>
 			);
-		case "overview":
-			return (
-				<ProjectionFrame
-					{...options}
-					atom={api.overview.query(undefined, routeQueryOptions)}
-					location={(data) => ({ file: "Overview", status: data.complete ? 200 : 503, view: "overview" })}
-					render={(data) => <OverviewPage data={data} />}
-				/>
-			);
-		case "inbox":
-			return (
-				<ProjectionFrame
-					{...options}
-					atom={api.inbox.query(undefined, routeQueryOptions)}
-					location={(data) => ({ file: "Inbox", status: data.complete ? 200 : 503, view: "inbox" })}
-					render={(data) => <InboxPage data={data} />}
-				/>
-			);
 	}
 }

package/src/client/react/PromptOption.tsx

@@ -1,4 +1,6 @@
+import { useId } from "react";
 import type { Document } from "#browser/document/schema.ts";
+import { optionLabel } from "#browser/responses/cardContext.ts";
 import type { Prompt } from "#browser/responses/Prompt.ts";
 import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
 export function PromptOption({
@@ -6,7 +8,6 @@ export function PromptOption({
 	prompt,
 	option,
 	choice,
-	index,
 	checked,
 	choose,
 }: {
@@ -14,17 +15,16 @@ export function PromptOption({
 	readonly prompt: Prompt;
 	readonly option: Prompt["options"][number];
 	readonly choice: number;
-	readonly index: number;
 	readonly checked: boolean;
 	readonly choose: (id: string, checked: boolean) => void;
 }) {
 	const source = document.metadata.options?.[choice];
-	const id = `question-${index}-${choice}`;
+	const id = useId();
 	const control = (
 		<input
 			checked={checked}
 			data-option-source={option.source}
-			hidden={Boolean(source)}
+			hidden
 			id={id}
 			name={`choice-${prompt.id}`}
 			onChange={(event) => choose(option.id, event.currentTarget.checked)}
@@ -33,24 +33,24 @@ export function PromptOption({
 			value={option.id}
 		/>
 	);
-	return source ? (
+	const label = source?.label ?? optionLabel(option.id, option.source, document.requests.find((request) => request.open)?.preview?.reason ?? "");
+	return (
 		<div>
 			{control}
-			<button aria-pressed={checked} className="question-choice" data-choice={option.id} onClick={() => choose(option.id, true)} type="button">
+			<button
+				aria-pressed={checked}
+				className="question-choice"
+				data-choice={option.id}
+				onClick={() => choose(option.id, prompt.mode !== "many" || !checked)}
+				type="button"
+			>
 				<strong>
-					{source.label}
-					{source.label === document.metadata.recommended && " · Recommended"}
+					{label}
+					{label === document.metadata.recommended && " · Recommended"}
 				</strong>
-				<small>{source.description}</small>
+				{source !== undefined && <small>{source.description}</small>}
 			</button>
-		</div>
-	) : (
-		<div className="question-option">
-			{control}
-			<div>
-				<label htmlFor={id}>Option {option.id}</label>
-				<ResponseMarkdown file={document.file} source={option.source} />
-			</div>
+			{source === undefined && <ResponseMarkdown file={document.file} source={option.source.replace(/^#{1,6}\s+.+$/mu, "")} />}
 		</div>
 	);
 }

package/src/client/react/ReadingHistory.tsx

@@ -0,0 +1,72 @@
+import { Option } from "effect";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { fileUrl } from "#files/url.ts";
+import type { Item } from "./readingLibrary.ts";
+import type { ShellApi } from "./ShellApi.ts";
+
+function LibraryList({
+	title,
+	items,
+	available,
+	current,
+	close,
+}: {
+	readonly title: string;
+	readonly items: readonly Item[];
+	readonly available: ReadonlySet<string>;
+	readonly current: string;
+	readonly close: () => void;
+}) {
+	function handleCloseLink(event: React.MouseEvent<HTMLAnchorElement>) {
+		event.currentTarget.closest("dialog")?.close("navigate");
+		close();
+	}
+
+	if (items.length === 0) {
+		return null;
+	}
+	return (
+		<>
+			<h2 className="nav-heading">{title}</h2>
+			<ul>
+				{items.map((item) => (
+					<li key={item.file}>
+						<a
+							aria-current={item.file === current ? "page" : undefined}
+							className={available.has(item.file) ? undefined : "missing"}
+							href={fileUrl(item.file)}
+							onClick={handleCloseLink}
+						>
+							{item.title}
+							{available.has(item.file) ? "" : " (missing)"}
+						</a>
+					</li>
+				))}
+			</ul>
+		</>
+	);
+}
+
+export function ReadingHistory({
+	api,
+	close,
+	current,
+	favorites,
+	recents,
+}: {
+	readonly api: ShellApi;
+	readonly close: () => void;
+	readonly current: string;
+	readonly favorites: readonly Item[];
+	readonly recents: readonly Item[];
+}) {
+	const query = useQuery(api.library.query({ showFleet: true }, { timeToLive: 0 }));
+	const data = Option.getOrUndefined(query.data);
+	const available = new Set(data ? data.files.map((file) => file.path) : [...favorites, ...recents].map((item) => item.file));
+	return (
+		<>
+			<LibraryList available={available} close={close} current={current} items={favorites} title="Favorites" />
+			<LibraryList available={available} close={close} current={current} items={recents} title="Recent documents" />
+		</>
+	);
+}

package/src/client/react/ReadingLibrary.tsx

@@ -1,20 +1,17 @@
 import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
-import type { Navigation, NavigationFolder } from "#browser/navigation/schema.ts";
-import { fileUrl } from "#files/url.ts";
 import { Modal } from "./Modal.tsx";
-import { type Item, LibraryContext, restoreLibrary } from "./readingLibrary.ts";
+import { ReadingHistory } from "./ReadingHistory.tsx";
+import { LibraryContext, restoreLibrary } from "./readingLibrary.ts";
+import type { ShellApi } from "./ShellApi.ts";
 import { shellIds } from "./shellIds.ts";
 
-function paths(folder: NavigationFolder): string[] {
-	return [...folder.files.map((file) => file.path), ...folder.folders.flatMap(paths)];
-}
 export function ReadingLibrary({
-	data,
+	api,
 	open,
 	close,
 	children,
 }: {
-	readonly data: Navigation | undefined;
+	readonly api: ShellApi;
 	readonly open: boolean;
 	readonly close: () => void;
 	readonly children: ReactNode;
@@ -46,10 +43,7 @@ export function ReadingLibrary({
 			const file = doc.dataset.file ?? "";
 			const title = doc.querySelector("h1")?.textContent?.trim() || file;
 			document.title = title ? `${title} · Work Board` : "Work Board";
-			const active = document.querySelector<HTMLAnchorElement>('#files a[aria-current="page"]');
-			if (active) {
-				active.title = title;
-			}
+
 			setCurrent(file);
 			if (file && doc.querySelector("#favorite-toggle") && visitedRef.current !== `${file}:${title}`) {
 				visitedRef.current = `${file}:${title}`;
@@ -67,11 +61,12 @@ export function ReadingLibrary({
 			document.removeEventListener("board-index-change", sync);
 		};
 	}, [save]);
-	const available = new Set(data ? [...paths(data.tree), ...data.records.files.map((file) => file.path)] : []);
+
 	return (
 		<LibraryContext.Provider
 			value={{
 				favorites: saved.favorites,
+				recents: saved.recents,
 				toggle: (file, title) =>
 					save({
 						favorites: savedRef.current.favorites.some((item) => item.file === file)
@@ -90,8 +85,7 @@ export function ReadingLibrary({
 					</button>
 				</div>
 				<div className="reading-library" id={shellIds.readingLibrary}>
-					<LibraryList available={available} close={close} current={current} items={saved.favorites} title="Favorites" />
-					<LibraryList available={available} close={close} current={current} items={saved.recents} title="Recent documents" />
+					{open ? <ReadingHistory api={api} close={close} current={current} favorites={saved.favorites} recents={saved.recents} /> : null}
 					{saved.notice !== "" && (
 						<p className="library-status" role="status">
 							{saved.notice}
@@ -103,45 +97,3 @@ export function ReadingLibrary({
 		</LibraryContext.Provider>
 	);
 }
-function LibraryList({
-	title,
-	items,
-	available,
-	current,
-	close,
-}: {
-	readonly title: string;
-	readonly items: readonly Item[];
-	readonly available: ReadonlySet<string>;
-	readonly current: string;
-	readonly close: () => void;
-}) {
-	function handleCloseLink(event: React.MouseEvent<HTMLAnchorElement>) {
-		event.currentTarget.closest("dialog")?.close("navigate");
-		close();
-	}
-
-	if (items.length === 0) {
-		return null;
-	}
-	return (
-		<>
-			<h2 className="nav-heading">{title}</h2>
-			<ul>
-				{items.map((item) => (
-					<li key={item.file}>
-						<a
-							aria-current={item.file === current ? "page" : undefined}
-							className={available.has(item.file) ? undefined : "missing"}
-							href={fileUrl(item.file)}
-							onClick={handleCloseLink}
-						>
-							{item.title}
-							{available.has(item.file) ? "" : " (missing)"}
-						</a>
-					</li>
-				))}
-			</ul>
-		</>
-	);
-}

package/src/client/react/ReadingPanel.tsx

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+import { cn } from "#client/react/lib/cn.ts";
+
+export function ReadingPanel({ className, ...props }: ComponentProps<"section">) {
+	return (
+		<section
+			className={cn(
+				"mx-auto min-w-0 max-w-4xl space-y-6 p-4 [overflow-wrap:anywhere] md:p-8 [&_a]:underline [&_a]:underline-offset-4 [&_article]:rounded-lg [&_article]:border [&_article]:p-4 [&_code]:break-all [&_dd]:text-muted-foreground [&_details]:my-4 [&_details]:rounded-lg [&_details]:border [&_details]:p-4 [&_dl]:grid [&_dl]:gap-2 [&_dt]:font-medium [&_h1]:font-semibold [&_h1]:text-2xl [&_h2]:mb-3 [&_h2]:font-semibold [&_h2]:text-xl [&_h3]:font-semibold [&_ol]:list-decimal [&_ol]:space-y-3 [&_ol]:pl-5 [&_p]:my-3 [&_pre]:my-4 [&_pre]:max-h-96 [&_pre]:overflow-auto [&_pre]:whitespace-pre-wrap [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-4 [&_pre]:text-sm [&_summary]:cursor-pointer [&_summary]:font-medium [&_ul]:list-disc [&_ul]:space-y-3 [&_ul]:pl-5",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}

package/src/client/react/Reference.tsx

@@ -1,5 +1,17 @@
 import type { Document } from "#browser/document/schema.ts";
+import { StatusChip } from "#client/react/components/ui/StatusChip.tsx";
 export function Reference({ document, target }: { readonly document: Document; readonly target: string }) {
+	const details = document.referenceDetails?.[target];
 	const href = document.references[target];
-	return href ? <a href={href}>{target}</a> : <span>{target} (unresolved, ambiguous, or unavailable)</span>;
+	return href ? (
+		<span className="inline-flex flex-wrap items-center gap-2">
+			<a href={href}>{details?.title ?? <code>{target}</code>}</a>
+			{details !== undefined && <StatusChip status={details.status} />}
+			{target.includes("#") && <code>#{target.split("#")[1]}</code>}
+		</span>
+	) : (
+		<span>
+			<code>{target}</code> (unresolved, ambiguous, or unavailable)
+		</span>
+	);
 }

package/src/client/react/RemainingMain.tsx

@@ -1,7 +1,7 @@
 import { routeQueryOptions } from "#client/page/routeQuery.ts";
-import { ChangesMain } from "./ChangesMain.tsx";
-import { DiagnosticsMain } from "./DiagnosticsMain.tsx";
+import { GoalsPage } from "./GoalsPage.tsx";
 import { HandoffPage } from "./HandoffPage.tsx";
+import { LibraryMain } from "./LibraryMain.tsx";
 import type { MainLocation } from "./mainLocation.ts";
 import { ProjectionFrame } from "./ProjectionFrame.tsx";
 import { RespondPage } from "./RespondPage.tsx";
@@ -9,6 +9,7 @@ import { ResultPage } from "./ResultPage.tsx";
 import type { RemainingRoute } from "./remainingRoute.ts";
 import type { ShellApi } from "./ShellApi.ts";
 import { StartPage } from "./StartPage.tsx";
+import { SystemMain } from "./SystemMain.tsx";
 export function RemainingMain({
 	api,
 	onPage,
@@ -22,8 +23,17 @@ export function RemainingMain({
 }) {
 	const options = { onPage, route, url };
 	switch (route) {
-		case "changes":
-			return <ChangesMain api={api} onPage={onPage} url={url} />;
+		case "library":
+			return <LibraryMain api={api} onPage={onPage} url={url} />;
+		case "goals":
+			return (
+				<ProjectionFrame
+					{...options}
+					atom={api.goals.query(undefined, routeQueryOptions)}
+					location={() => ({ file: "Goals", status: 200, view: "goals" })}
+					render={(data) => <GoalsPage data={data} />}
+				/>
+			);
 		case "start":
 			return (
 				<ProjectionFrame
@@ -33,8 +43,8 @@ export function RemainingMain({
 					render={(data) => <StartPage data={data} />}
 				/>
 			);
-		case "diagnostics":
-			return <DiagnosticsMain api={api} onPage={onPage} url={url} />;
+		case "system":
+			return <SystemMain api={api} onPage={onPage} url={url} />;
 		case "respond":
 			return (
 				<ProjectionFrame

package/src/client/react/RespondPage.tsx

@@ -1,41 +1,8 @@
 import type { RespondProjection } from "#browser/views/remaining.ts";
-import { fileUrl } from "#files/url.ts";
-import { AnswerForm } from "./AnswerForm.tsx";
-import { ResponseHistory } from "./ResponseHistory.tsx";
-import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
-export function RespondPage({ data: { document: data, request } }: { readonly data: RespondProjection }) {
-	const preview = request.preview;
-	if (!preview) {
-		return <p role="status">Response unavailable</p>;
-	}
-	const standalone = data.metadata.kind === "question";
+export function RespondPage({ data }: { readonly data: RespondProjection }) {
 	return (
-		<section className="response-panel">
-			<h1>{standalone ? "Answer this question" : `Respond to ${preview.item} / ${preview.request}`}</h1>
-			<p>{preview.reason}</p>
-			<p>
-				<a href={fileUrl(preview.source)}>Source: {preview.source}</a> · Reviewed SHA-256: <code>{preview.reviewedRevision}</code>
-			</p>
-			<p>
-				{standalone
-					? "An answer removes this question from the Inbox for this source revision."
-					: "Saved replies are authored feedback. They do not close the request or establish acceptance."}
-			</p>
-			{!standalone && (
-				<section className="response-context">
-					<ResponseMarkdown file={data.file} source={data.source} />
-				</section>
-			)}
-			<details>
-				<summary>Exact source being reviewed</summary>
-				<pre>{preview.context}</pre>
-			</details>
-			{request.unavailable || request.promptUnavailable ? (
-				<p role="status">{request.unavailable ?? request.promptUnavailable}</p>
-			) : (
-				<AnswerForm document={data} preview={preview} request={request} />
-			)}
-			{!request.unavailable && <ResponseHistory request={request} />}
-		</section>
+		<a href={`/_board/item/${encodeURIComponent(data.document.identity ?? "")}/#answer-card-${encodeURIComponent(data.request.id)}`}>
+			Open the answer card
+		</a>
 	);
 }

package/src/client/react/ResponseHistory.tsx

@@ -1,11 +1,17 @@
 import type { DocumentRequest } from "#browser/document/schema.ts";
 import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
 import { shellIds } from "./shellIds.ts";
-export function ResponseHistory({ request }: { readonly request: DocumentRequest | undefined }) {
+export function ResponseHistory({
+	request,
+	id = shellIds.responseHistory,
+}: {
+	readonly request: DocumentRequest | undefined;
+	readonly id?: string | undefined;
+}) {
 	const records = request?.responses ?? [];
 	const preview = request?.preview;
 	return (
-		<section id={shellIds.responseHistory}>
+		<section id={id}>
 			<h2>Recorded responses</h2>
 			{records.length === 0 ? (
 				<p>No response is recorded for this source revision.</p>