@shivaedev/work-board 0.12.0 → 0.13.0

package/src/client/react/DocumentMain.tsx

@@ -4,8 +4,9 @@ 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 { LegacyMain } from "./LegacyMain.tsx";
-import type { MainLocation } from "./legacyPage.ts";
+import type { MainLocation } from "./mainLocation.ts";
+import { ProjectionMain } from "./ProjectionMain.tsx";
+import { RemainingMain } from "./RemainingMain.tsx";
 import type { ShellApi } from "./ShellApi.ts";
 import { shellIds } from "./shellIds.ts";
 import { useDocumentPage } from "./useDocumentPage.ts";
@@ -14,11 +15,9 @@ export function DocumentMain({
 	api,
 	url,
 	onPage,
-	initial,
 }: {
 	readonly api: ShellApi;
 	readonly url: string;
-	readonly initial: string;
 	readonly onPage: (location: MainLocation) => void;
 }) {
 	const query = useQuery(documentQuery(api, url));
@@ -34,8 +33,11 @@ export function DocumentMain({
 	const data = terminal ? undefined : (fresh ?? retained);
 	const status = readStatus(failure?._tag, Option.isSome(query.cause));
 	const hostRef = useDocumentPage({ data, onPage, pending: query.pending, status, url });
-	if (data?.reading?.board || (url === "/" && failure?._tag === "NotFound")) {
-		return <LegacyMain api={api} initial={initial} onPage={onPage} url={url} />;
+	if (data?.reading?.board) {
+		return <ProjectionMain api={api} onPage={onPage} route="board" url={url} />;
+	}
+	if (url === "/" && failure?._tag === "NotFound") {
+		return <RemainingMain api={api} onPage={onPage} route="start" url={url} />;
 	}
 	return (
 		<>

package/src/client/react/Favorite.tsx

@@ -0,0 +1,17 @@
+import { useContext } from "react";
+import { LibraryContext } from "./readingLibrary.ts";
+import { shellIds } from "./shellIds.ts";
+export function Favorite({ file, title }: { readonly file: string; readonly title: string }) {
+	const library = useContext(LibraryContext);
+	const saved = library.favorites.some((item) => item.file === file);
+	return (
+		<button
+			aria-pressed={saved}
+			id={shellIds.favoriteToggle}
+			onClick={() => library.toggle(file, document.getElementById("doc")?.querySelector("h1")?.textContent?.trim() || title)}
+			type="button"
+		>
+			{saved ? "Remove favorite" : "Save favorite"}
+		</button>
+	);
+}

package/src/client/react/FormField.tsx

@@ -0,0 +1,68 @@
+import { type ReactNode, useId, useLayoutEffect, useRef } from "react";
+import { useField } from "@shivaedev/effect-form/react.ts";
+import type { Fields, Form, Name } from "@shivaedev/effect-form/shape.ts";
+
+type Control = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+export function FormField<TFields extends Fields, A, E, TRuntimeError>({
+	form,
+	name,
+	label,
+	maxLength,
+	required,
+	rows,
+	children,
+	autoComplete,
+}: {
+	readonly form: Form<TFields, A, E, TRuntimeError>;
+	readonly name: Name<TFields>;
+	readonly label: string;
+	readonly maxLength?: number;
+	readonly required?: boolean;
+	readonly rows?: number;
+	readonly children?: ReactNode;
+	readonly autoComplete?: string;
+}) {
+	const field = useField(form, name);
+	const ref = useRef<Control | null>(null);
+	const id = useId();
+	const value = typeof field.value === "string" ? field.value : "";
+	const error = name === "author" && !value.trim() ? "Add your local author label." : field.error;
+	useLayoutEffect(() => ref.current?.setCustomValidity(error ?? ""), [error]);
+	const props = {
+		"aria-describedby": `${id}-error`,
+		"aria-invalid": Boolean(error),
+		id,
+		name,
+		onBlur: field.onBlur,
+		ref: (element: Control | null) => {
+			ref.current = element;
+		},
+		required,
+		value,
+	};
+	function change(next: string) {
+		form.values.set({ ...form.values.value, [name]: next || (name === "supersedes" ? undefined : "") });
+		form.blur(name);
+	}
+	let control: ReactNode;
+	if (children) {
+		control = (
+			<select {...props} onChange={(event) => change(event.currentTarget.value)} onInput={(event) => change(event.currentTarget.value)}>
+				{children}
+			</select>
+		);
+	} else if (rows) {
+		control = <textarea {...props} maxLength={maxLength} onInput={(event) => change(event.currentTarget.value)} rows={rows} />;
+	} else {
+		control = <input {...props} autoComplete={autoComplete} maxLength={maxLength} onInput={(event) => change(event.currentTarget.value)} />;
+	}
+	return (
+		<label htmlFor={id}>
+			{label}
+			{control}
+			<span className="response-field-error" hidden={!error} id={`${id}-error`}>
+				{error}
+			</span>
+		</label>
+	);
+}

package/src/client/react/HandoffForm.tsx

@@ -0,0 +1,78 @@
+import { Option } from "effect";
+import type { HandoffPreview } from "#browser/handoffs/schema.ts";
+import type { HandoffProjection } from "#browser/views/remaining.ts";
+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
+				{...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,78 @@
+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 { ResponseMarkdown } from "./ResponseMarkdown.tsx";
+import { shellIds } from "./shellIds.ts";
+export function HandoffPage({ data }: { readonly data: HandoffProjection }) {
+	return (
+		<section 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>
+		</section>
+	);
+}
+
+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>Receipt: {h.state}</b>
+				{h.state === "requested" ? " — prepared; receipt not confirmed" : ""}. Execution and acceptance are not recorded by this state.
+			</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 ?? "Attribution not recorded"}
+					{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,33 @@
+import { useRef, useState } from "react";
+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 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,5 +1,8 @@
-import type { MainLocation } from "./legacyPage.ts";
+import type { ReactNode } from "react";
+import type { MainLocation } from "./mainLocation.ts";
 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">
@@ -7,29 +10,47 @@ export function InboxCount({ count, id }: { readonly count: number | null; reado
 		</span>
 	);
 }
-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">
+				<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" disabled id={shellIds.searchOpen} type="button">
+				<button aria-controls="search-dialog" aria-haspopup="dialog" id={shellIds.searchOpen} onClick={() => openSearch()} type="button">
 					Search <kbd>⌘/Ctrl K</kbd>
 				</button>
-				<span className="live" id={shellIds.live} role="status">
-					connecting
+				{live}
+				<span id={shellIds.navigationStatus} role="status">
+					{status}
 				</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}>
+					<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>
@@ -37,15 +58,15 @@ export function Header({ main, count }: { readonly main: MainLocation; readonly
 				</div>
 				<div className="preference">
 					<label htmlFor="density">Density</label>
-					<select defaultValue="comfortable" id={shellIds.density}>
+					<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>
-				<button aria-pressed="false" disabled id={shellIds.updatesToggle} type="button">
-					Pause updates
-				</button>
-				<span id={shellIds.preferenceStatus} role="status" />
+				{updates}
+				<span id={shellIds.preferenceStatus} role="status">
+					{appearance.notice}
+				</span>
 			</fieldset>
 		</>
 	);

package/src/client/react/HistoryComparison.tsx

@@ -0,0 +1,60 @@
+import { fileUrl } from "#files/url.ts";
+import type { HistoryComparison as Comparison } from "#history/schema.ts";
+export function HistoryComparison({ data }: { readonly data: Comparison }) {
+	const counts = (["added", "removed", "changed"] as const)
+		.map((kind) => `${data.changes.filter((change) => change.kind === kind).length} ${kind}`)
+		.join(" · ");
+	return (
+		<>
+			<p>
+				Compared with your observation at <time>{data.recordedAt}</time>.
+			</p>
+			<p role="status">{counts}</p>
+			{data.changes.length === 0 && <p>No source changes since that observation.</p>}
+			{data.issues.length > 0 && (
+				<aside aria-label="Identity limitations">
+					<ul>
+						{data.issues.map((issue) => (
+							<li key={issue}>{issue}</li>
+						))}
+					</ul>
+					<p>Ambiguous identities are compared by source path only.</p>
+				</aside>
+			)}
+			{data.changes.map((change) => (
+				<HistoryChange change={change} key={change.before?.file ?? change.after?.file} />
+			))}
+		</>
+	);
+}
+
+function HistoryChange({ change }: { readonly change: Comparison["changes"][number] }) {
+	const file = change.after?.file ?? change.before?.file ?? "";
+	const key = change.before ? `before:${change.before.file}` : `added:${file}`;
+	return (
+		<article className="history-change" data-key={key}>
+			<h2>
+				{change.kind}: {file}
+			</h2>
+			{change.before && change.after && change.before.file !== file && <p>Previously {change.before.file}</p>}
+			<ul>
+				{change.reasons.map((reason) => (
+					<li key={reason}>{reason}</li>
+				))}
+			</ul>
+			{change.after ? <a href={fileUrl(change.after.file)}>Read current source</a> : <p>Removed source; no current document link.</p>}
+			{Boolean(change.before) && (
+				<details data-history-source="remembered" data-key={`${key}:Remembered`}>
+					<summary>Remembered source (plain text)</summary>
+					<pre className="history-source">{change.before?.source}</pre>
+				</details>
+			)}
+			{Boolean(change.after) && (
+				<details data-history-source="current" data-key={`${key}:Current`}>
+					<summary>Current source (plain text)</summary>
+					<pre className="history-source">{change.after?.source}</pre>
+				</details>
+			)}
+		</article>
+	);
+}

package/src/client/react/HistoryRetention.tsx

@@ -0,0 +1,29 @@
+import { Option } from "effect";
+import { useEffect, useState } from "react";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { historyStore } from "./historyStore.ts";
+import type { ShellApi } from "./ShellApi.ts";
+
+export function HistoryRetention({ api }: { readonly api: ShellApi }) {
+	const [store] = useState(historyStore);
+	const [baseline, setBaseline] = useState(store.read);
+	const query = useQuery(api.history.query({ action: "check", baseline }));
+	const data = Option.getOrUndefined(query.data);
+	useEffect(() => {
+		if (data?.discardBaseline && store.read() === baseline) {
+			store.write(null);
+			setBaseline(null);
+			document.documentElement.dataset.historyNotice = data.reason;
+		}
+	}, [baseline, data, store]);
+	useEffect(() => {
+		function sync(event: StorageEvent) {
+			if (event.key === store.key || event.key === null) {
+				setBaseline(store.read());
+			}
+		}
+		window.addEventListener("storage", sync);
+		return () => window.removeEventListener("storage", sync);
+	}, [store]);
+	return null;
+}

package/src/client/react/HomeBoard.tsx

@@ -0,0 +1,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";
+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} />
+			)}
+		</>
+	);
+}

package/src/client/react/InboxPage.tsx

@@ -0,0 +1,51 @@
+import type { InboxProjection } from "#browser/views/schema.ts";
+import { Age } from "./Age.tsx";
+export function InboxPage({ data }: { readonly data: InboxProjection }) {
+	return (
+		<>
+			<header className="work-head">
+				<p className="work-eyebrow">WORKSPACE · INBOX</p>
+				<h1>Inbox</h1>
+				<p>Questions and work waiting on a person. Oldest changed source first.</p>
+			</header>
+			<p className="work-total" role="status">
+				{data.complete ? `${data.items.length} waiting` : "Count unavailable"}
+			</p>
+			<section aria-label="Waiting on you" className="inbox-list">
+				<h2>Waiting on you</h2>
+				<InboxContent data={data} />
+			</section>
+		</>
+	);
+}
+function InboxContent({ data }: { readonly data: InboxProjection }) {
+	if (!data.complete) {
+		return <p role="status">Workspace incomplete. Inbox membership and count are unavailable.</p>;
+	}
+	if (data.items.length === 0) {
+		return (
+			<p className="empty">
+				{data.sourceIssues ? "No classified waiting items. Check source issues in Overview." : "All quiet — nothing is waiting on a person."}
+			</p>
+		);
+	}
+	return data.items.map((item) => <InboxRow item={item} key={item.file} />);
+}
+function InboxRow({ item }: { readonly item: InboxProjection["items"][number] }) {
+	return (
+		<article className="inbox-row">
+			<div>
+				<h3>
+					<a href={item.href}>{item.title}</a>
+				</h3>
+				<p>{item.reason}</p>
+				{Boolean(item.problem) && (
+					<p className="inbox-problem" role="status">
+						{item.problem} — open the source to resolve it.
+					</p>
+				)}
+			</div>
+			<p className="inbox-age">{item.modified === undefined ? "Age unavailable" : <Age modified={item.modified} />}</p>
+		</article>
+	);
+}

package/src/client/react/LiveControls.tsx

@@ -0,0 +1,78 @@
+import { useAtomValue } from "@effect/atom-react";
+import { Option } from "effect";
+import * as Atom from "effect/reactivity/Atom";
+import { useEffect, useMemo, useState } from "react";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import type { BrowserClient } from "#client/client.ts";
+import { activeRead } from "./activeRead.ts";
+import { liveStatus } from "./liveStatus.ts";
+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;
+}
+export function LiveControls({
+	client,
+	current,
+	navigationPending,
+	navigationFailed,
+}: {
+	readonly client: BrowserClient;
+	readonly current: string;
+	readonly navigationPending: boolean;
+	readonly navigationFailed: boolean;
+}) {
+	const status = useAtomValue(client.updates.status);
+	const paused = useAtomValue(client.updates.paused);
+	const watcher = useQuery(client.api.watcher.query());
+	const watching = Option.getOrUndefined(watcher.data)?.watching === true;
+	const [page, setPage] = useState<Page>();
+	useEffect(() => {
+		function sync() {
+			const doc = document.getElementById("doc");
+			if (doc?.dataset.route !== current) {
+				return;
+			}
+			setPage({
+				baseline: doc?.querySelector<HTMLElement>("[data-baseline]")?.dataset.baseline || null,
+				kind: doc?.dataset.projection ?? "document",
+				url: current,
+			});
+		}
+		sync();
+		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 reading = useAtomValue(atom);
+	const displayed = liveStatus({
+		connection: status.connection,
+		failed: reading.failed,
+		navigationFailed,
+		paused,
+		pending: status.pending,
+		waiting: navigationPending || reading.pending,
+		watching,
+	});
+	useEffect(
+		() =>
+			client.registry.subscribe(
+				client.updates.paused,
+				(value) => {
+					if (!value) {
+						document.dispatchEvent(new Event("board-updates-resumed"));
+					}
+				},
+				{ immediate: true },
+			),
+		[client],
+	);
+	return (
+		<span className="live" data-state={displayed.state} id={shellIds.live} role="status" title={displayed.title}>
+			{displayed.text}
+		</span>
+	);
+}