@shivaedev/work-board 0.13.0 → 0.14.0

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

@@ -1,6 +1,7 @@
 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";
@@ -25,6 +26,7 @@ function HandoffSession({ data, source }: { readonly data: HandoffProjection; re
 				<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}
@@ -49,23 +51,23 @@ function HandoffSession({ data, source }: { readonly data: HandoffProjection; re
 					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
+				<Button
 					disabled={typeof window === "undefined" || state.created.saving}
 					id={shellIds.handoffPreview}
 					onClick={state.showPreview}
 					type="button"
 				>
 					Preview Markdown
-				</button>
+				</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">
+				<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">
+				</Button>
+				<Button disabled={typeof window === "undefined" || state.created.saving} id={shellIds.handoffClear} onClick={state.clear} type="button">
 					Clear draft
-				</button>
+				</Button>
 				<p id={shellIds.handoffStatus} role="status">
 					{data.writable ? writableStatus : `${state.status} Read-only mode. Restart with --responses to enable local writes.`}
 				</p>

package/src/client/react/HandoffPage.tsx

@@ -2,11 +2,12 @@ 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 (
-		<section className="response-panel">
+		<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
@@ -30,7 +31,7 @@ export function HandoffPage({ data }: { readonly data: HandoffProjection }) {
 					<HandoffEntry current={data.source} key={record.id} record={record} />
 				))}
 			</section>
-		</section>
+		</ReadingPanel>
 	);
 }
 
@@ -49,8 +50,8 @@ function HandoffEntry({
 				<a href={fileUrl(record.file)}>{record.id}</a> · {h.recipient}
 			</h3>
 			<p>
-				<b>Receipt: {h.state}</b>
-				{h.state === "requested" ? " — prepared; receipt not confirmed" : ""}. Execution and acceptance are not recorded by this state.
+				<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"} ·{" "}
@@ -58,7 +59,7 @@ function HandoffEntry({
 			</p>
 			{Boolean(h.by || h.note) && (
 				<p>
-					{h.by ?? "Attribution not recorded"}
+					{h.by ?? ""}
 					{h.note ? ` · ${h.note}` : ""}
 				</p>
 			)}

package/src/client/react/HandoffPrompt.tsx

@@ -1,4 +1,5 @@
 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(
@@ -20,11 +21,18 @@ export function HandoffPrompt({ id, prompt, prepared = false }: { readonly id: s
 		<div className="handoff-copy">
 			<label>
 				Prompt for your existing agent session
-				<textarea id={`handoff-prompt-${id}`} readOnly ref={ref} rows={3} value={prompt} />
+				<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">
+			<Button data-handoff-copy={`handoff-prompt-${id}`} onClick={handleCopy} type="button">
 				Copy tiny prompt
-			</button>
+			</Button>
 			<p data-copy-status role="status">
 				{status}
 			</p>

package/src/client/react/Header.tsx

@@ -1,13 +1,20 @@
+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({
@@ -30,56 +37,75 @@ export function Header({
 	readonly status: string;
 }) {
 	return (
-		<>
-			<header className="bar">
-				<button aria-controls="sidebar" aria-expanded={sidebar.open} id={shellIds.sidebarToggle} onClick={() => sidebar.toggle()} 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" id={shellIds.searchOpen} onClick={() => openSearch()} type="button">
-					Search <kbd>⌘/Ctrl K</kbd>
-				</button>
-				{live}
-				<span id={shellIds.navigationStatus} role="status">
-					{status}
-				</span>
-			</header>
-			<fieldset aria-label="Reading preferences" className="preferences">
-				<div className="preference">
-					<label htmlFor="theme">Theme</label>
-					<select id={shellIds.theme} onChange={(event) => appearance.change({ theme: event.target.value })} value={appearance.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 id={shellIds.density} onChange={(event) => appearance.change({ density: event.target.value })} value={appearance.density}>
-						<option value="comfortable">Comfortable</option>
-						<option value="compact">Compact</option>
-					</select>
-				</div>
-				{updates}
-				<span id={shellIds.preferenceStatus} role="status">
-					{appearance.notice}
-				</span>
-			</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

@@ -2,14 +2,15 @@ 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 (
-		<>
-			<DocumentContext document={data.document} />
-			<DocumentView board={data.counts} document={data.document} />
-			{data.document.metadata.kind === "question" && data.document.metadata.question === undefined && data.document.identity && (
-				<AnswerPanel document={data.document} />
-			)}
-		</>
+		<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;
+}

package/src/client/react/LibraryContents.tsx

@@ -0,0 +1,82 @@
+import { Option } from "effect";
+import { useState } from "react";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import type { Library, LibraryFile } from "#browser/navigation/library.ts";
+import { Age } from "./Age.tsx";
+import type { ShellApi } from "./ShellApi.ts";
+export function LibraryContents({
+	api,
+	data,
+	filters,
+	view,
+}: {
+	readonly api: ShellApi;
+	readonly data: Library;
+	readonly filters: Filters;
+	readonly view: string;
+}) {
+	if (view === "folders") {
+		return <FolderContents api={api} data={data} filters={filters} />;
+	}
+	const files = view === "recently changed" ? data.files.toSorted((a, b) => b.modified - a.modified || a.path.localeCompare(b.path)) : data.files;
+	return <DocumentList files={files} />;
+}
+function DocumentList({ files }: { readonly files: readonly LibraryFile[] }) {
+	return files.length === 0 ? (
+		<p className="text-muted-foreground">No documents in this view.</p>
+	) : (
+		<ul className="m-0 list-none divide-y p-0">
+			{files.map((file) => (
+				<li className="flex flex-wrap items-center justify-between gap-2 py-3" key={file.path}>
+					<div className="min-w-0">
+						<a className="break-words font-medium" href={file.href}>
+							{file.title}
+						</a>
+						<p className="m-0 text-muted-foreground text-xs">
+							{file.kind}
+							{file.status ? ` · ${file.status}` : ""}
+						</p>
+					</div>
+					<Age modified={file.modified} />
+				</li>
+			))}
+		</ul>
+	);
+}
+interface Filters {
+	readonly kind?: string;
+	readonly showFleet?: boolean;
+	readonly status?: string;
+}
+function FolderContents({ api, data, filters }: { readonly api: ShellApi; readonly data: Library; readonly filters: Filters }) {
+	return (
+		<>
+			<DocumentList files={data.files} />
+			{data.folders.map((folder) => (
+				<LazyFolder api={api} filters={filters} folder={folder} key={folder.path} />
+			))}
+		</>
+	);
+}
+function LazyFolder({ api, folder, filters }: { readonly api: ShellApi; readonly folder: Library["folders"][number]; readonly filters: Filters }) {
+	const [open, setOpen] = useState(false);
+	return (
+		<details className="my-3 border-l pl-4" onToggle={(event) => setOpen(event.currentTarget.open)} open={open}>
+			<summary className="cursor-pointer py-2">
+				{folder.name} ({folder.count})
+			</summary>
+			{open ? <ExpandedFolder api={api} filters={filters} path={folder.path} /> : null}
+		</details>
+	);
+}
+function ExpandedFolder({ api, filters, path }: { readonly api: ShellApi; readonly filters: Filters; readonly path: string }) {
+	const query = useQuery(api.library.query({ ...filters, folder: path }, { timeToLive: 0 }), { keepPreviousData: true });
+	const data = Option.getOrUndefined(query.data);
+	return (
+		<>
+			{query.pending ? <p role="status">Loading folder…</p> : null}
+			{Option.isSome(query.cause) && <p role="alert">This folder could not be loaded.</p>}
+			{data ? <FolderContents api={api} data={data} filters={filters} /> : null}
+		</>
+	);
+}

package/src/client/react/LibraryMain.tsx

@@ -0,0 +1,25 @@
+import { routeQueryOptions } from "#client/page/routeQuery.ts";
+import { LibraryPage } from "./LibraryPage.tsx";
+import type { MainLocation } from "./mainLocation.ts";
+import { ProjectionFrame } from "./ProjectionFrame.tsx";
+import type { ShellApi } from "./ShellApi.ts";
+export function LibraryMain({
+	api,
+	onPage,
+	url,
+}: {
+	readonly api: ShellApi;
+	readonly onPage: (location: MainLocation) => void;
+	readonly url: string;
+}) {
+	return (
+		<ProjectionFrame
+			atom={api.library.query({}, routeQueryOptions)}
+			location={() => ({ file: "Library", status: 200, view: "library" })}
+			onPage={onPage}
+			render={() => <LibraryPage api={api} key={url} url={url} />}
+			route="library"
+			url={url}
+		/>
+	);
+}

package/src/client/react/LibraryPage.tsx

@@ -0,0 +1,74 @@
+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 type { ShellApi } from "./ShellApi.ts";
+
+export function LibraryPage({ api, url = "/_board/library" }: { readonly api: ShellApi; readonly url?: string }) {
+	const [kind, setKind] = useState("");
+	const [status, setStatus] = useState("");
+	const [showFleet, setShowFleet] = useState(false);
+	const [view, setView] = useState(new URL(url, "http://localhost").searchParams.get("view") === "recently-changed" ? "recently changed" : "titles");
+	const filters = { ...(kind ? { kind } : {}), ...(status ? { status } : {}), ...(showFleet ? { showFleet } : {}) };
+	const query = useQuery(api.library.query({ ...filters, ...(view === "folders" ? { folder: "" } : {}) }, routeQueryOptions), {
+		keepPreviousData: true,
+	});
+	const data = Option.getOrUndefined(query.data);
+	return (
+		<div className="mx-auto max-w-5xl p-4 md:p-8">
+			<h1>Library</h1>
+			<p className="text-muted-foreground">Every document in your workspace.</p>
+			<div className="my-6 flex flex-wrap items-end gap-4">
+				<Filter label="Kind" onChange={setKind} options={data?.kinds ?? []} value={kind} />
+				<Filter label="Status" onChange={setStatus} options={data?.statuses ?? []} value={status} />
+				<Filter label="View" onChange={setView} options={["titles", "folders", "recently changed"]} value={view} />
+				<label className="flex items-center gap-2 text-sm">
+					<input checked={showFleet} onChange={(event) => setShowFleet(event.target.checked)} type="checkbox" />
+					Show Fleet records ({data?.fleetCount ?? 0})
+				</label>
+			</div>
+			{query.pending ? <p role="status">Loading Library…</p> : null}
+			{Option.isSome(query.cause) && <p role="alert">Library refresh failed. Try again.</p>}
+			{data ? <LibraryContents api={api} data={data} filters={filters} view={view} /> : null}
+		</div>
+	);
+}
+function Filter({
+	label,
+	options,
+	value,
+	onChange,
+}: {
+	readonly label: string;
+	readonly options: readonly string[];
+	readonly value: string;
+	readonly onChange: (value: string) => void;
+}) {
+	return (
+		<label className="grid gap-1 text-sm">
+			{label}
+			<select aria-label={label} className="rounded-md border bg-background p-2" onChange={(event) => onChange(event.target.value)} value={value}>
+				{label !== "View" && <option value="">All</option>}
+				{options.map((option) => (
+					<option key={option} value={option}>
+						{viewLabel(option)}
+					</option>
+				))}
+			</select>
+		</label>
+	);
+}
+
+function viewLabel(value: string) {
+	if (value === "recently changed") {
+		return "Recently changed";
+	}
+	if (value === "folders") {
+		return "Folders";
+	}
+	if (value === "titles") {
+		return "Titles";
+	}
+	return value;
+}

package/src/client/react/LiveControls.tsx

@@ -10,7 +10,6 @@ import { shellIds } from "./shellIds.ts";
 
 const opening = Atom.make({ failed: false, pending: true });
 interface Page {
-	readonly baseline: string | null;
 	readonly kind: string;
 	readonly url: string;
 }
@@ -37,7 +36,6 @@ export function LiveControls({
 				return;
 			}
 			setPage({
-				baseline: doc?.querySelector<HTMLElement>("[data-baseline]")?.dataset.baseline || null,
 				kind: doc?.dataset.projection ?? "document",
 				url: current,
 			});
@@ -46,7 +44,7 @@ export function LiveControls({
 		document.addEventListener("board-page", sync);
 		return () => document.removeEventListener("board-page", sync);
 	}, [current]);
-	const atom = useMemo(() => (page ? activeRead(client, page.kind, page.url, page.baseline) : opening), [client, page]);
+	const atom = useMemo(() => (page ? activeRead(client.api, page.kind, page.url) : opening), [client, page]);
 	const reading = useAtomValue(atom);
 	const displayed = liveStatus({
 		connection: status.connection,
@@ -71,7 +69,13 @@ export function LiveControls({
 		[client],
 	);
 	return (
-		<span className="live" data-state={displayed.state} id={shellIds.live} role="status" title={displayed.title}>
+		<span
+			className="font-mono text-muted-foreground text-xs data-[state=down]:text-destructive data-[state=stale]:text-destructive"
+			data-state={displayed.state}
+			id={shellIds.live}
+			role="status"
+			title={displayed.title}
+		>
 			{displayed.text}
 		</span>
 	);

package/src/client/react/Modal.tsx

@@ -9,7 +9,9 @@ export function Modal({
 	opener,
 	focus,
 	returnFocus,
+	className,
 }: {
+	readonly className?: string;
 	readonly id: string;
 	readonly title: string;
 	readonly open: boolean;
@@ -43,6 +45,7 @@ export function Modal({
 	return (
 		<dialog
 			aria-labelledby={title}
+			className={className}
 			id={id}
 			onCancel={() => close()}
 			onClick={(event) => {