@shivaedev/work-board 0.12.0 → 0.14.0

package/src/client/react/GoalProgressHeader.tsx

@@ -0,0 +1,35 @@
+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 type { ShellApi } from "./ShellApi.ts";
+
+export function GoalProgressHeader({ api, document }: { readonly api: ShellApi; readonly document: Document }) {
+	const headingId = useId();
+	const progress = useQuery(api.goals.query(undefined, routeQueryOptions), { keepPreviousData: true });
+	const data = Option.getOrUndefined(progress.data);
+	const goal = data?.goals.find((entry) => entry.id === document.identity) ?? data?.closedGoals.find((entry) => entry.id === document.identity);
+	return (
+		<section aria-labelledby={headingId} className="document-lead col-span-full max-w-[68ch] space-y-4" data-goal-section="progress">
+			<h2 className="font-semibold text-xl" id={headingId}>
+				Progress
+			</h2>
+			{goal ? (
+				<>
+					<p>
+						{goal.linked} linked items ·{" "}
+						<span data-goal-open-asks>
+							{goal.openAsks} open {goal.openAsks === 1 ? "ask" : "asks"}
+						</span>
+					</p>
+					<GoalProgressSummary bar counts={goal.counts} />
+				</>
+			) : (
+				<p role="status">{progress.pending ? "Loading goal progress…" : "Progress is available for uniquely identified projects."}</p>
+			)}
+			{Option.isSome(progress.cause) && <p role="status">Goal progress refresh failed.</p>}
+		</section>
+	);
+}

package/src/client/react/GoalProgressSummary.tsx

@@ -0,0 +1,13 @@
+import { SegmentedBar } from "#client/react/components/ui/SegmentedBar.tsx";
+
+export function GoalProgressSummary({ counts, bar = false }: { readonly counts: Readonly<Record<string, number>>; readonly bar?: boolean }) {
+	return bar ? (
+		<SegmentedBar counts={counts} label="Linked work progress" size="large" />
+	) : (
+		<p className="text-muted-foreground text-sm" data-criterion-progress>
+			{Object.entries(counts)
+				.map(([status, count]) => `${count} ${status}`)
+				.join(" · ")}
+		</p>
+	);
+}

package/src/client/react/GoalWorkTable.tsx

@@ -0,0 +1,82 @@
+import { useContext, useId } from "react";
+import { goalState } from "#browser/views/goalWorkState.ts";
+import { StatusChip } from "#client/react/components/ui/StatusChip.tsx";
+import { FleetItemsContext } from "./FleetItemsContext.ts";
+import { type GoalWorkItem, goalGroup, goalGroups, goalRun } from "./goalWork.ts";
+
+export function GoalWorkTable({ items }: { readonly items: readonly GoalWorkItem[] }) {
+	const headingId = useId();
+	const fleet = useContext(FleetItemsContext);
+	return (
+		<section aria-labelledby={headingId} data-goal-section="work">
+			<h2 id={headingId}>Linked work</h2>
+			{goalGroups.map((group) => {
+				const work = items.filter((item) => goalGroup(item, goalRun(item, fleet)) === group);
+				if (work.length === 0) {
+					return null;
+				}
+				const table = <WorkGroup group={group} items={work} key={group} />;
+				return group === "Done" ? (
+					<details data-goal-group={group} key={group}>
+						<summary>Done ({work.length})</summary>
+						{table}
+					</details>
+				) : (
+					<section data-goal-group={group} key={group}>
+						<h3>
+							{group} ({work.length})
+						</h3>
+						{table}
+					</section>
+				);
+			})}
+		</section>
+	);
+}
+function WorkGroup({ group, items }: { readonly group: string; readonly items: readonly GoalWorkItem[] }) {
+	return (
+		<div className="min-w-0 overflow-x-auto">
+			<table className="w-full text-sm">
+				<caption className="sr-only">{group} linked work</caption>
+				<thead>
+					<tr>
+						<th scope="col">Work</th>
+						<th scope="col">State</th>
+						<th className="whitespace-nowrap" scope="col">
+							PR
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					{items.map((item) => (
+						<WorkRow item={item} key={item.id} />
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+function WorkRow({ item }: { readonly item: GoalWorkItem }) {
+	const fleet = useContext(FleetItemsContext);
+	const run = goalRun(item, fleet);
+	return (
+		<tr data-goal-item={item.id}>
+			<th scope="row">
+				<GoalWorkLink item={item} />
+			</th>
+			<td>
+				<GoalWorkStatus item={item} />
+			</td>
+			<td className="whitespace-nowrap">{run?.prUrl ? <a href={run.prUrl}>PR</a> : null}</td>
+		</tr>
+	);
+}
+export function GoalWorkLink({ item }: { readonly item: GoalWorkItem }) {
+	return <a href={`/_board/item/${encodeURIComponent(item.id)}/`}>{item.title}</a>;
+}
+export function GoalWorkStatus({ item }: { readonly item: GoalWorkItem }) {
+	const fleet = useContext(FleetItemsContext);
+	const run = goalRun(item, fleet);
+	const state = goalState(item.metadata.status, run?.stage);
+	return state ? <StatusChip className="whitespace-nowrap" status={state} /> : null;
+}

package/src/client/react/GoalsPage.tsx

@@ -0,0 +1,30 @@
+import type { GoalsProjection } from "#browser/views/GoalsProjection.ts";
+import { GoalOverviewCard } from "./GoalOverviewCard.tsx";
+
+export function GoalsPage({ data }: { readonly data: GoalsProjection }) {
+	return (
+		<div className="mx-auto max-w-5xl space-y-4 p-4 sm:p-6">
+			<h1 className="m-0 font-semibold text-2xl">Goals</h1>
+			{data.goals.length === 0 && <p className="text-muted-foreground text-sm">No active goals.</p>}
+			<GoalCards goals={data.goals} />
+			{data.closedGoals.length > 0 && (
+				<details>
+					<summary className="cursor-pointer text-muted-foreground text-sm">Closed goals</summary>
+					<div className="mt-3">
+						<GoalCards goals={data.closedGoals} />
+					</div>
+				</details>
+			)}
+		</div>
+	);
+}
+
+function GoalCards({ goals }: { readonly goals: GoalsProjection["goals"] }) {
+	return (
+		<div className="grid min-w-0 gap-3 md:grid-cols-2">
+			{goals.map((goal) => (
+				<GoalOverviewCard goal={goal} key={goal.id} />
+			))}
+		</div>
+	);
+}

package/src/client/react/HandoffForm.tsx

@@ -0,0 +1,80 @@
+import { Option } from "effect";
+import type { HandoffPreview } from "#browser/handoffs/schema.ts";
+import type { HandoffProjection } from "#browser/views/remaining.ts";
+import { Button } from "#client/react/components/ui/Button.tsx";
+import { FormField } from "./FormField.tsx";
+import { HandoffPrompt } from "./HandoffPrompt.tsx";
+import { shellIds } from "./shellIds.ts";
+import { useFormFocus } from "./useFormFocus.ts";
+import { useHandoffForm } from "./useHandoffForm.ts";
+export function HandoffForm({ data }: { readonly data: HandoffProjection }) {
+	const source = data.source;
+	if (!source) {
+		return <p role="status">Source unavailable: {data.unavailable}. Existing handoffs remain readable.</p>;
+	}
+	return <HandoffSession data={data} key={source.item} source={source} />;
+}
+function HandoffSession({ data, source }: { readonly data: HandoffProjection; readonly source: HandoffPreview }) {
+	const state = useHandoffForm(data, source);
+	const focus = useFormFocus(state.draft.key);
+	const saved = Option.getOrUndefined(state.created.created);
+	const writableStatus = typeof window === "undefined" ? "JavaScript is required to prepare a handoff." : state.status;
+	return (
+		<>
+			<details>
+				<summary>Exact source being reviewed</summary>
+				<pre>{source.context}</pre>
+			</details>
+			<form
+				className="space-y-4 [&_button]:mr-2 [&_button]:mb-2"
+				{...focus}
+				data-item={source.item}
+				data-question={source.id}
+				data-revision={source.reviewedRevision}
+				data-source={source.source}
+				data-writable={data.writable}
+				id={shellIds.handoffForm}
+				noValidate
+				onInput={state.edit}
+				onSubmit={(event) => {
+					event.preventDefault();
+					if (data.writable && state.preview && state.valid && !state.created.saving) {
+						state.created.save();
+					}
+				}}
+			>
+				<FormField form={state.form} label="Recipient — local agent label" maxLength={200} name="recipient" required />
+				<FormField form={state.form} label="Goal" maxLength={8192} name="goal" required rows={3} />
+				<FormField form={state.form} label="Constraints (optional)" maxLength={8192} name="constraints" rows={4} />
+				<FormField form={state.form} label="Next action" maxLength={8192} name="nextAction" required rows={3} />
+				<p>
+					The file includes the full reviewed source and its declared acceptance criteria. Preparing it does not change the item or start an agent.
+					Drafts stay in this browser for seven days after the last edit, with a 256 KiB limit per draft.
+				</p>
+				<Button
+					disabled={typeof window === "undefined" || state.created.saving}
+					id={shellIds.handoffPreview}
+					onClick={state.showPreview}
+					type="button"
+				>
+					Preview Markdown
+				</Button>
+				<pre hidden={!state.preview} id={shellIds.handoffPreviewContent}>
+					{state.preview}
+				</pre>
+				<Button disabled={!(data.writable && state.preview && state.valid) || state.created.saving} id={shellIds.handoffSubmit} type="submit">
+					Prepare handoff
+				</Button>
+				<Button disabled={typeof window === "undefined" || state.created.saving} id={shellIds.handoffClear} onClick={state.clear} type="button">
+					Clear draft
+				</Button>
+				<p id={shellIds.handoffStatus} role="status">
+					{data.writable ? writableStatus : `${state.status} Read-only mode. Restart with --responses to enable local writes.`}
+				</p>
+				<section hidden={!saved} id={shellIds.handoffPrepared}>
+					{saved && <HandoffPrompt id={saved.id} prepared prompt={saved.prompt} />}
+				</section>
+			</form>
+		</>
+	);
+}

package/src/client/react/HandoffPage.tsx

@@ -0,0 +1,79 @@
+import type { HandoffProjection } from "#browser/views/remaining.ts";
+import { fileUrl } from "#files/url.ts";
+import { HandoffForm } from "./HandoffForm.tsx";
+import { HandoffPrompt } from "./HandoffPrompt.tsx";
+import { ReadingPanel } from "./ReadingPanel.tsx";
+import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
+import { shellIds } from "./shellIds.ts";
+export function HandoffPage({ data }: { readonly data: HandoffProjection }) {
+	return (
+		<ReadingPanel className="response-panel">
+			<h1>Agent handoff · {data.item}</h1>
+			<p>
+				Prepare a Markdown file, then copy a tiny prompt into your existing agent session. Sessions may poll or wait for human answers. Agents record
+				receipt with ordinary file edits.
+			</p>
+			{Boolean(data.source) && (
+				<section className="response-context">
+					<ResponseMarkdown file={data.source?.source ?? ""} source={data.background} />
+				</section>
+			)}
+			<HandoffForm data={data} />
+			<section id={shellIds.handoffHistory}>
+				<h2>Prepared handoffs</h2>
+				{data.reading.unknown.length > 0 && (
+					<p role="status">
+						Some handoff history is unavailable: {data.reading.unknown.join(", ")}. Missing records do not establish that no receipt exists.
+					</p>
+				)}
+				{data.reading.records.length === 0 && <p>No readable handoff is recorded for this item.</p>}
+				{data.reading.records.map((record) => (
+					<HandoffEntry current={data.source} key={record.id} record={record} />
+				))}
+			</section>
+		</ReadingPanel>
+	);
+}
+
+function HandoffEntry({
+	record,
+	current,
+}: {
+	readonly record: HandoffProjection["reading"]["records"][number];
+	readonly current: HandoffProjection["source"];
+}) {
+	const h = record.handoff;
+	const same = current?.reviewedRevision === h.reviewedRevision && current.source === h.source;
+	return (
+		<article id={record.id}>
+			<h3>
+				<a href={fileUrl(record.file)}>{record.id}</a> · {h.recipient}
+			</h3>
+			<p>
+				<b title="Receipt state does not establish execution or acceptance.">Receipt: {h.state}</b>
+				{h.state === "requested" ? " — prepared; receipt not confirmed" : ""}
+			</p>
+			<p>
+				{same ? "Current reviewed source" : "Earlier or unavailable reviewed source; recheck before acting"} ·{" "}
+				<a href={fileUrl(h.source)}>{h.source}</a> · <code>{h.reviewedRevision}</code>
+			</p>
+			{Boolean(h.by || h.note) && (
+				<p>
+					{h.by ?? ""}
+					{h.note ? ` · ${h.note}` : ""}
+				</p>
+			)}
+			<h4>Goal</h4>
+			<ResponseMarkdown file={h.source} source={h.goal} />
+			<h4>Constraints</h4>
+			{h.constraints ? <ResponseMarkdown file={h.source} source={h.constraints} /> : <p>None recorded.</p>}
+			<h4>Next action</h4>
+			<ResponseMarkdown file={h.source} source={h.nextAction} />
+			<HandoffPrompt id={record.id} prompt={record.prompt} />
+			<details>
+				<summary>Exact reviewed source snapshot</summary>
+				<pre>{record.context}</pre>
+			</details>
+		</article>
+	);
+}

package/src/client/react/HandoffPrompt.tsx

@@ -0,0 +1,41 @@
+import { useRef, useState } from "react";
+import { Button } from "#client/react/components/ui/Button.tsx";
+export function HandoffPrompt({ id, prompt, prepared = false }: { readonly id: string; readonly prompt: string; readonly prepared?: boolean }) {
+	const ref = useRef<HTMLTextAreaElement>(null);
+	const [status, setStatus] = useState(
+		prepared
+			? "Prepared; receipt not confirmed. Copy the prompt to your agent."
+			: "Copy and paste this into your agent session. Preparing a file does not notify an agent.",
+	);
+	async function handleCopy() {
+		try {
+			await navigator.clipboard.writeText(prompt);
+			setStatus("Prompt copied. Paste it into your existing agent session.");
+		} catch {
+			ref.current?.focus();
+			ref.current?.select();
+			setStatus("Clipboard unavailable. The prompt is selected; copy it manually.");
+		}
+	}
+	return (
+		<div className="handoff-copy">
+			<label>
+				Prompt for your existing agent session
+				<textarea
+					className="mt-2 w-full rounded-md border bg-background p-3 font-mono text-sm"
+					id={`handoff-prompt-${id}`}
+					readOnly
+					ref={ref}
+					rows={3}
+					value={prompt}
+				/>
+			</label>
+			<Button data-handoff-copy={`handoff-prompt-${id}`} onClick={handleCopy} type="button">
+				Copy tiny prompt
+			</Button>
+			<p data-copy-status role="status">
+				{status}
+			</p>
+		</div>
+	);
+}

package/src/client/react/Header.tsx

@@ -1,64 +1,111 @@
-import type { MainLocation } from "./legacyPage.ts";
+import { AlertCircle, Inbox, PanelLeft, Search } from "lucide-react";
+import type { ReactNode } from "react";
+import { Badge } from "#client/react/components/ui/Badge.tsx";
+import { Button } from "#client/react/components/ui/Button.tsx";
+import { buttonVariants } from "#client/react/components/ui/buttonVariants.ts";
+import { cn } from "#client/react/lib/cn.ts";
+import { KeyboardHints } from "./KeyboardHints.tsx";
+import type { MainLocation } from "./mainLocation.ts";
+import { SettingsPopover } from "./SettingsPopover.tsx";
 import { shellIds } from "./shellIds.ts";
+import type { AppearanceControls } from "./useAppearance.ts";
+import type { SidebarControls } from "./useSidebar.ts";
 export function InboxCount({ count, id }: { readonly count: number | null; readonly id: string }) {
 	return (
-		<span aria-label={`${count ?? "?"} waiting`} className="inbox-count" id={id} role="status">
+		<Badge aria-label={`${count ?? "?"} waiting`} id={id} role="status">
 			{count ?? "?"}
-		</span>
+		</Badge>
 	);
 }
-export function Header({ main, count }: { readonly main: MainLocation; readonly count: number | null }) {
+export function Header({
+	main,
+	count,
+	appearance,
+	sidebar,
+	openSearch,
+	live,
+	updates,
+	status,
+}: {
+	readonly main: MainLocation;
+	readonly count: number | null;
+	readonly appearance: AppearanceControls;
+	readonly sidebar: SidebarControls;
+	readonly openSearch: () => void;
+	readonly live: ReactNode;
+	readonly updates: ReactNode;
+	readonly status: string;
+}) {
 	return (
-		<>
-			<header className="bar">
-				<button aria-controls="sidebar" aria-expanded="true" id={shellIds.sidebarToggle} type="button">
-					Files
-				</button>
-				<Breadcrumbs file={main.file} />
-				<a aria-current={main.view === "inbox" ? "page" : undefined} className="inbox-link work-open" href="/_board/inbox" id={shellIds.inboxTopbar}>
-					Inbox <InboxCount count={count} id={shellIds.inboxTopbarCount} />
-				</a>
-				<button aria-controls="search-dialog" aria-haspopup="dialog" disabled id={shellIds.searchOpen} type="button">
-					Search <kbd>⌘/Ctrl K</kbd>
-				</button>
-				<span className="live" id={shellIds.live} role="status">
-					connecting
-				</span>
-				<span id={shellIds.navigationStatus} role="status" />
-			</header>
-			<fieldset aria-label="Reading preferences" className="preferences">
-				<div className="preference">
-					<label htmlFor="theme">Theme</label>
-					<select defaultValue="system" id={shellIds.theme}>
-						<option value="system">System</option>
-						<option value="light">Light</option>
-						<option value="dark">Dark</option>
-					</select>
-				</div>
-				<div className="preference">
-					<label htmlFor="density">Density</label>
-					<select defaultValue="comfortable" id={shellIds.density}>
-						<option value="comfortable">Comfortable</option>
-						<option value="compact">Compact</option>
-					</select>
-				</div>
-				<button aria-pressed="false" disabled id={shellIds.updatesToggle} type="button">
-					Pause updates
-				</button>
-				<span id={shellIds.preferenceStatus} role="status" />
-			</fieldset>
-		</>
+		<header
+			className="sticky top-0 z-20 flex h-12 min-w-0 items-center gap-2 border-b bg-background px-3 text-sm md:static md:h-14 md:px-6 print:hidden"
+			data-workspace-header
+		>
+			<Button
+				aria-controls="sidebar"
+				aria-expanded={sidebar.open}
+				aria-label="Files"
+				id={shellIds.sidebarToggle}
+				onClick={() => sidebar.toggle()}
+				size="sm"
+				variant="ghost"
+			>
+				<PanelLeft aria-hidden="true" />
+				<span className="hidden sm:inline">Files</span>
+			</Button>
+			<span className="min-w-0 flex-1 truncate font-medium md:hidden">{main.title ?? main.file}</span>
+			<Breadcrumbs file={main.title ?? main.file} />
+			<a
+				aria-current={main.view === "today" ? "page" : undefined}
+				aria-label="Today"
+				className={cn(buttonVariants({ size: "sm", variant: "ghost" }), "hidden md:inline-flex")}
+				href="/"
+				id={shellIds.inboxTopbar}
+			>
+				<Inbox aria-hidden="true" />
+				<span className="hidden sm:inline">Today</span>
+				<InboxCount count={count} id={shellIds.inboxTopbarCount} />
+			</a>
+			<Button
+				aria-controls="search-dialog"
+				aria-haspopup="dialog"
+				aria-label="Search"
+				className="hidden md:inline-flex"
+				id={shellIds.searchOpen}
+				onClick={() => openSearch()}
+				size="sm"
+				variant="ghost"
+			>
+				<Search aria-hidden="true" />
+				<span className="hidden sm:inline">Search</span>
+				<KeyboardHints>
+					<kbd className="hidden text-muted-foreground text-xs lg:inline">⌘/Ctrl K</kbd>
+				</KeyboardHints>
+			</Button>
+			<div className="hidden shrink-0 md:block">{live}</div>
+			<span className="shrink-0 text-destructive" id={shellIds.navigationStatus} role="status" title={status}>
+				{Boolean(status) && <AlertCircle aria-hidden="true" className="size-4" />}
+				<span className="sr-only">{status}</span>
+			</span>
+			<SettingsPopover appearance={appearance} updates={updates} />
+		</header>
 	);
 }
 
 function Breadcrumbs({ file }: { readonly file: string }) {
 	const parts = file.split("/");
 	return (
-		<nav aria-label="File location" className="breadcrumbs" id={shellIds.breadcrumbs}>
-			<a href="/">Workspace</a>
+		<nav
+			aria-label="File location"
+			className="hidden min-w-0 flex-1 items-center gap-2 overflow-hidden whitespace-nowrap text-muted-foreground text-xs md:flex"
+			id={shellIds.breadcrumbs}
+		>
+			<a className="shrink-0 text-foreground" href="/">
+				Workspace
+			</a>
 			{parts.map((part, index) => (
-				<span key={parts.slice(0, index + 1).join("/")}>
-					<span className="separator">/</span> {part}
+				<span className="truncate" key={parts.slice(0, index + 1).join("/")}>
+					<span className="text-muted-foreground">/</span> {part}
 				</span>
 			))}
 		</nav>

package/src/client/react/HomeBoard.tsx

@@ -0,0 +1,16 @@
+import type { BoardProjection } from "#browser/views/schema.ts";
+import { DocumentView } from "#client/document/View.ts";
+import { AnswerPanel } from "./AnswerPanel.tsx";
+import { DocumentContext } from "./DocumentContext.tsx";
+import { ItemSummary } from "./ItemSummary.tsx";
+export function HomeBoard({ data }: { readonly data: BoardProjection }) {
+	return (
+		<DocumentView
+			answer={<AnswerPanel document={data.document} />}
+			board={data.counts}
+			context={<DocumentContext document={data.document} />}
+			document={data.document}
+			introduction={<ItemSummary document={data.document} />}
+		/>
+	);
+}

package/src/client/react/ItemSummary.tsx

@@ -0,0 +1,80 @@
+import { ClipboardList, FileText, Flag, MessageCircle, PanelsTopLeft } from "lucide-react";
+import { useContext } from "react";
+import type { Document } from "#browser/document/schema.ts";
+import { Badge } from "#client/react/components/ui/Badge.tsx";
+import { StatusChip } from "#client/react/components/ui/StatusChip.tsx";
+import { Favorite } from "./Favorite.tsx";
+import { FleetItemsContext } from "./FleetItemsContext.ts";
+import { PrChip } from "./PrChip.tsx";
+
+const icons = { board: PanelsTopLeft, goal: Flag, project: Flag, question: MessageCircle, report: FileText, result: FileText, task: ClipboardList };
+function kindIcon(kind: string) {
+	return Object.entries(icons).find(([name]) => name === kind)?.[1] ?? FileText;
+}
+function visibleIdentity(id: string | undefined) {
+	return Boolean(id) && !/[a-f\d]{64}/iu.test(id ?? "");
+}
+export function ItemSummary({ document }: { readonly document: Document }) {
+	const fleet = useContext(FleetItemsContext);
+	const fields = document.metadata;
+	const item = fleet?.state === "ready" ? [...fleet.items, ...fleet.completed].find((entry) => entry.workId === document.identity) : undefined;
+	const answering = fields.kind === "decision" || fields.kind === "question";
+	const Icon = kindIcon(fields.kind ?? "document");
+	return (
+		<section aria-label="Item overview" className="item-summary space-y-3">
+			<div className="flex flex-wrap items-center gap-2">
+				<Icon aria-hidden="true" className="size-4" />
+				<span>{fields.kind ?? "Document"}</span>
+				{visibleIdentity(fields.id) && (
+					<a className="font-mono text-xs" href={document.identity ? `/_board/item/${encodeURIComponent(document.identity)}/` : undefined}>
+						{fields.id}
+					</a>
+				)}
+				<ItemStatus answering={answering} document={document} />
+				{item !== undefined && <Badge variant="outline">Fleet · {item.stage}</Badge>}
+				{item !== undefined && <PrChip url={item.prUrl} />}
+			</div>
+			<ItemFields fields={fields} />
+			<div className="flex flex-wrap items-center gap-3 text-sm">
+				<Favorite file={document.file} title={document.file} />
+				{document.identity && !["question", "response", "handoff"].includes(fields.kind ?? "") && (
+					<a href={`/_board/handoff?item=${encodeURIComponent(document.identity)}`}>Prepare an agent handoff</a>
+				)}
+				{document.identity && fields.kind === "board" && (
+					<a href={`/_board/work?view=board&board=${encodeURIComponent(document.identity)}`}>View this board</a>
+				)}
+				{document.identity && fields.kind === "result" && (
+					<a href={`/_board/result?item=${encodeURIComponent(document.identity)}`}>Review returned result</a>
+				)}
+			</div>
+		</section>
+	);
+}
+
+function ItemFields({ fields }: { readonly fields: Document["metadata"] }) {
+	if (!fields.id) {
+		return null;
+	}
+	const owner = fields.owner;
+	const next = fields.nextAction;
+	if (!(owner || next)) {
+		return null;
+	}
+	return (
+		<p>
+			{Boolean(owner) && <span>Owner: {owner}</span>}
+			{Boolean(owner && next) && " · "}
+			{Boolean(next) && <span>Next action: {next}</span>}
+		</p>
+	);
+}
+
+function ItemStatus({ document, answering }: { readonly document: Document; readonly answering: boolean }) {
+	const fields = document.metadata;
+	const requestState = document.requests.some(
+		(request) => request.open || (request.id === "answer" && request.sourceOpen && fields.kind === "question" && fields.question === undefined),
+	)
+		? "needs-you"
+		: fields.status;
+	return fields.id && (!answering || requestState !== undefined) ? <StatusChip status={answering ? requestState : fields.status} /> : null;
+}

package/src/client/react/KeyboardHints.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import { useMedia } from "./useMedia.ts";
+
+export function KeyboardHints({ children }: { readonly children: ReactNode }) {
+	const touch = useMedia("(any-pointer: coarse)");
+	return touch || navigator.maxTouchPoints > 0 ? null : children;
+}