@shivaedev/work-board 0.12.0 → 0.14.0

package/src/client/react/PromptOption.tsx

@@ -0,0 +1,56 @@
+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({
+	document,
+	prompt,
+	option,
+	choice,
+	checked,
+	choose,
+}: {
+	readonly document: Document;
+	readonly prompt: Prompt;
+	readonly option: Prompt["options"][number];
+	readonly choice: number;
+	readonly checked: boolean;
+	readonly choose: (id: string, checked: boolean) => void;
+}) {
+	const source = document.metadata.options?.[choice];
+	const id = useId();
+	const control = (
+		<input
+			checked={checked}
+			data-option-source={option.source}
+			hidden
+			id={id}
+			name={`choice-${prompt.id}`}
+			onChange={(event) => choose(option.id, event.currentTarget.checked)}
+			onInput={(event) => choose(option.id, event.currentTarget.checked)}
+			type={prompt.mode === "one" ? "radio" : "checkbox"}
+			value={option.id}
+		/>
+	);
+	const label = source?.label ?? optionLabel(option.id, option.source, document.requests.find((request) => request.open)?.preview?.reason ?? "");
+	return (
+		<div>
+			{control}
+			<button
+				aria-pressed={checked}
+				className="question-choice"
+				data-choice={option.id}
+				onClick={() => choose(option.id, prompt.mode !== "many" || !checked)}
+				type="button"
+			>
+				<strong>
+					{label}
+					{label === document.metadata.recommended && " · Recommended"}
+				</strong>
+				{source !== undefined && <small>{source.description}</small>}
+			</button>
+			{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

@@ -0,0 +1,99 @@
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { Modal } from "./Modal.tsx";
+import { ReadingHistory } from "./ReadingHistory.tsx";
+import { LibraryContext, restoreLibrary } from "./readingLibrary.ts";
+import type { ShellApi } from "./ShellApi.ts";
+import { shellIds } from "./shellIds.ts";
+
+export function ReadingLibrary({
+	api,
+	open,
+	close,
+	children,
+}: {
+	readonly api: ShellApi;
+	readonly open: boolean;
+	readonly close: () => void;
+	readonly children: ReactNode;
+}) {
+	const key = `work-board:library:${document.documentElement.dataset.workspace}`;
+	const [saved, setSaved] = useState(() => restoreLibrary(key));
+	const [current, setCurrent] = useState("");
+	const savedRef = useRef(saved);
+	const visitedRef = useRef("");
+	const save = useCallback(
+		(next: Pick<typeof saved, "favorites" | "recents">) => {
+			let notice = "";
+			try {
+				localStorage.setItem(key, JSON.stringify(next));
+			} catch {
+				notice = "Reading history applies to this page only.";
+			}
+			savedRef.current = { ...next, notice };
+			setSaved(savedRef.current);
+		},
+		[key],
+	);
+	useEffect(() => {
+		function sync() {
+			const doc = document.getElementById("doc");
+			if (!doc?.dataset.route) {
+				return;
+			}
+			const file = doc.dataset.file ?? "";
+			const title = doc.querySelector("h1")?.textContent?.trim() || file;
+			document.title = title ? `${title} · Work Board` : "Work Board";
+
+			setCurrent(file);
+			if (file && doc.querySelector("#favorite-toggle") && visitedRef.current !== `${file}:${title}`) {
+				visitedRef.current = `${file}:${title}`;
+				save({
+					favorites: savedRef.current.favorites,
+					recents: [{ file, title }, ...savedRef.current.recents.filter((item) => item.file !== file)].slice(0, 10),
+				});
+			}
+		}
+		sync();
+		document.addEventListener("board-page", sync);
+		document.addEventListener("board-index-change", sync);
+		return () => {
+			document.removeEventListener("board-page", sync);
+			document.removeEventListener("board-index-change", sync);
+		};
+	}, [save]);
+
+	return (
+		<LibraryContext.Provider
+			value={{
+				favorites: saved.favorites,
+				recents: saved.recents,
+				toggle: (file, title) =>
+					save({
+						favorites: savedRef.current.favorites.some((item) => item.file === file)
+							? savedRef.current.favorites.filter((item) => item.file !== file)
+							: [...savedRef.current.favorites, { file, title }],
+						recents: savedRef.current.recents,
+					}),
+			}}
+		>
+			{children}
+			<Modal close={close} id={shellIds.libraryDialog} open={open} opener="library-open" title="library-title">
+				<div className="search-header">
+					<h2 id={shellIds.libraryTitle}>Reading history</h2>
+					<button id={shellIds.libraryClose} onClick={() => close()} type="button">
+						Close
+					</button>
+				</div>
+				<div className="reading-library" id={shellIds.readingLibrary}>
+					{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}
+						</p>
+					)}
+					{saved.notice === "" && saved.favorites.length + saved.recents.length === 0 && "No recent documents yet."}
+				</div>
+			</Modal>
+		</LibraryContext.Provider>
+	);
+}

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

@@ -0,0 +1,76 @@
+import { routeQueryOptions } from "#client/page/routeQuery.ts";
+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";
+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,
+	route,
+	url,
+}: {
+	readonly api: ShellApi;
+	readonly onPage: (location: MainLocation) => void;
+	readonly route: RemainingRoute;
+	readonly url: string;
+}) {
+	const options = { onPage, route, url };
+	switch (route) {
+		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
+					{...options}
+					atom={api.start.query(undefined, routeQueryOptions)}
+					location={() => ({ file: "Getting started", status: 200, view: "start" })}
+					render={(data) => <StartPage data={data} />}
+				/>
+			);
+		case "system":
+			return <SystemMain api={api} onPage={onPage} url={url} />;
+		case "respond":
+			return (
+				<ProjectionFrame
+					{...options}
+					atom={api.respond.query({ url }, routeQueryOptions)}
+					location={() => ({ file: "Respond", status: 200, view: "response" })}
+					render={(data) => <RespondPage data={data} />}
+				/>
+			);
+		case "handoff":
+			return (
+				<ProjectionFrame
+					{...options}
+					atom={api.handoff.query({ url }, routeQueryOptions)}
+					location={(data) => ({ file: "Handoff", status: data.source || data.reading.records.length > 0 ? 200 : 409, view: "handoff" })}
+					render={(data) => <HandoffPage data={data} />}
+				/>
+			);
+		case "result":
+			return (
+				<ProjectionFrame
+					{...options}
+					atom={api.result.query({ url }, routeQueryOptions)}
+					location={() => ({ file: "Result review", status: 200, view: "result" })}
+					render={(data) => <ResultPage data={data} />}
+				/>
+			);
+	}
+}

package/src/client/react/RespondPage.tsx

@@ -0,0 +1,8 @@
+import type { RespondProjection } from "#browser/views/remaining.ts";
+export function RespondPage({ data }: { readonly data: RespondProjection }) {
+	return (
+		<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>

package/src/client/react/ResponseMarkdown.tsx

@@ -1,11 +1,41 @@
+import type { Components } from "react-markdown";
 import Markdown from "react-markdown";
-import remarkGfm from "remark-gfm";
+import { Mermaid } from "#client/document/Mermaid.ts";
 import { documentLinks } from "#render/documentLinks.ts";
+import { documentPlugins } from "#render/documentPlugins.ts";
 
 export function ResponseMarkdown({ source, file }: { readonly source: string; readonly file: string }) {
 	return (
-		<Markdown rehypePlugins={[documentLinks(file, {})]} remarkPlugins={[remarkGfm]} skipHtml>
+		<Markdown components={components} rehypePlugins={[documentLinks(file, {})]} remarkPlugins={documentPlugins()} skipHtml>
 			{source}
 		</Markdown>
 	);
 }
+
+const components: Components = {
+	code: ({ node: _node, className, children, ...props }) => {
+		if (!className?.split(" ").includes("language-mermaid")) {
+			return (
+				<code {...props} className={className}>
+					{children}
+				</code>
+			);
+		}
+		const source = String(children);
+		return typeof document === "undefined" ? (
+			<figure className="diagram">
+				<pre className="diagram-source">{source}</pre>
+			</figure>
+		) : (
+			<Mermaid source={source} />
+		);
+	},
+	pre: ({ node, children, ...props }) => {
+		const code = node?.children[0];
+		return code?.type === "element" && Array.isArray(code.properties.className) && code.properties.className.includes("language-mermaid") ? (
+			children
+		) : (
+			<pre {...props}>{children}</pre>
+		);
+	},
+};

package/src/client/react/ResultCriteria.tsx

@@ -0,0 +1,77 @@
+import { Fragment, type ReactNode } from "react";
+import type { ResultProjection } from "#browser/views/ResultProjection.ts";
+import { keyed } from "./keyed.ts";
+import { shellIds } from "./shellIds.ts";
+
+type Target = ResultProjection["targets"][number];
+type Criterion = Target["criteria"][number];
+type Claim = Criterion["claims"][number];
+export function ResultCriteria({ data }: { readonly data: ResultProjection }) {
+	const targets = data.targets.map((target) => <TargetRow key={target.link.label} target={target} />);
+	return (
+		<section id={shellIds.resultCriteria}>
+			<h2 title="Only explicit relationships and criterion references are associated. Git revisions are authored records; Work Board does not compare them with the current checkout. Evidence freshness is unknown. This result does not change the linked work’s status.">
+				Criteria and this result’s claims
+			</h2>
+			{targets.length > 0 ? <ul>{targets}</ul> : <p>No explicitly linked work or criteria.</p>}
+		</section>
+	);
+}
+function TargetRow({ target }: { readonly target: Target }) {
+	const criteria = keyed(target.criteria, (entry) => entry.link.label).map(({ key, value }) => <CriterionRow criterion={value} key={key} />);
+	return (
+		<li>
+			<a href={target.link.href}>{target.link.label}</a>
+			{target.available ? (
+				<>
+					{Boolean(target.status) && <span> · source status: {target.status}</span>}
+					{criteria.length > 0 ? <ul>{criteria}</ul> : <p>No criteria declared in this source.</p>}
+				</>
+			) : (
+				" — criteria unavailable."
+			)}
+		</li>
+	);
+}
+function CriterionRow({ criterion }: { readonly criterion: Criterion }) {
+	let evidence: ReactNode = null;
+	if (!criterion.link.href) {
+		evidence = <p>This criterion identity is ambiguous; evidence association unavailable.</p>;
+	} else if (criterion.claims.length > 0) {
+		const claims = keyed(criterion.claims, (entry) => entry.source.label).map(({ key, value }) => <ClaimRow claim={value} key={key} />);
+		evidence = (
+			<>
+				<p title="Recorded claims do not establish verified acceptance.">
+					{criterion.claims.length} recorded {criterion.claims.length === 1 ? "claim" : "claims"}
+				</p>
+				<ul>{claims}</ul>
+			</>
+		);
+	}
+	return (
+		<li>
+			<a href={criterion.link.href}>{criterion.text}</a>
+			{evidence}
+		</li>
+	);
+}
+function ClaimRow({ claim }: { readonly claim: Claim }) {
+	const details = [
+		["Checked Git revision (reported)", claim.checkedRevision],
+		["Method", claim.method],
+		["Outcome (reported)", claim.outcome],
+		["Observed time", claim.observedAt],
+	].map(([label, value]) => (
+		<Fragment key={label}>
+			<dt>{label}</dt>
+			<dd>{value ?? ""}</dd>
+		</Fragment>
+	));
+	return (
+		<li>
+			<a href={claim.source.href}>{claim.source.label}</a>
+			{claim.problem}
+			<dl>{details}</dl>
+		</li>
+	);
+}

package/src/client/react/ResultFeedback.tsx

@@ -0,0 +1,67 @@
+import type { ResultProjection } from "#browser/views/ResultProjection.ts";
+import { fileUrl } from "#files/url.ts";
+import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
+import { shellIds } from "./shellIds.ts";
+export function ResultFeedback({ data }: { readonly data: ResultProjection }) {
+	return (
+		<section id={shellIds.resultFeedback}>
+			<h2>Recorded human feedback</h2>
+			{data.feedbackUnknown ? (
+				<p role="status">
+					Response history is unknown or ambiguous. Unreadable records do not establish that no feedback exists. Read the source files before relying
+					on it.
+				</p>
+			) : (
+				<>
+					<p>
+						Human direction is pinned to its reviewed report. Option IDs and authored acceptance text are not a computed verified-acceptance state.
+						Completing a run or receiving feedback does not change work status.
+					</p>
+					{data.feedback.length === 0 && <p>No readable response is recorded for this result.</p>}
+					{data.feedback.map((entry) => (
+						<FeedbackEntry entry={entry} key={entry.response.id} />
+					))}
+				</>
+			)}
+		</section>
+	);
+}
+
+function FeedbackEntry({ entry }: { readonly entry: ResultProjection["feedback"][number] }) {
+	const { response, question, responseFile, questionFile, supersedesFile, matching } = entry;
+	return (
+		<article id={response.id}>
+			<h3>
+				{response.response.author} · {response.response.type}
+			</h3>
+			<p>
+				<b>
+					{matching ? "Feedback on this exact result revision" : "Earlier or moved result context — does not apply automatically to this revision"}
+				</b>
+			</p>
+			<p>
+				Reviewed source: {question.question.source} · SHA-256 <code>{question.question.reviewedRevision}</code>
+			</p>
+			{Boolean(response.response.answers) && (
+				<p>
+					Recorded option IDs:{" "}
+					{response.response.answers?.map((answer) => `${answer.prompt}: ${answer.selected.join(", ") || "text only"}`).join("; ")}. Labels and
+					reasoning are recorded below.
+				</p>
+			)}
+			{Boolean(response.response.supersedes) && (
+				<p>
+					Explicitly supersedes <a href={fileUrl(supersedesFile ?? "")}>{response.response.supersedes}</a>.
+				</p>
+			)}
+			<ResponseMarkdown file={responseFile} source={response.body} />
+			<p>
+				<a href={fileUrl(responseFile)}>Response source</a> · <a href={fileUrl(questionFile)}>Registered reviewed context</a>
+			</p>
+			<details>
+				<summary>Exact reviewed result source</summary>
+				<pre>{question.context}</pre>
+			</details>
+		</article>
+	);
+}

package/src/client/react/ResultPage.tsx

@@ -0,0 +1,52 @@
+import type { ResultProjection } from "#browser/views/ResultProjection.ts";
+import { fileUrl } from "#files/url.ts";
+import { DocumentMetadata } from "./DocumentMetadata.tsx";
+import { ReadingPanel } from "./ReadingPanel.tsx";
+import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
+import { ResultCriteria } from "./ResultCriteria.tsx";
+import { ResultFeedback } from "./ResultFeedback.tsx";
+import { shellIds } from "./shellIds.ts";
+export function ResultPage({ data }: { readonly data: ResultProjection }) {
+	const document = data.document;
+	const requests = document.metadata.attention ?? [];
+	const actions = requests.filter(
+		(entry) => entry.kind === "review" && entry.state === "open" && requests.filter((other) => other.id === entry.id).length === 1,
+	);
+	const links = actions.map((entry) => (
+		<li key={entry.id}>
+			<a href={`/_board/respond?item=${encodeURIComponent(document.identity ?? "")}&request=${encodeURIComponent(entry.id)}`}>Review {entry.id}</a> —{" "}
+			{entry.reason}
+		</li>
+	));
+	return (
+		<ReadingPanel className="response-panel">
+			<h1>Review returned result · {document.identity}</h1>
+			<p>
+				<span title="A supplied claim does not establish execution or work acceptance.">
+					Result status: <b>{document.metadata.status}</b>
+				</span>
+			</p>
+			<p>
+				Current report SHA-256: <code>{data.revision}</code> · <a href={fileUrl(document.file)}>Read source</a>
+			</p>
+			<DocumentMetadata document={document} />
+			<section id={shellIds.resultActions}>
+				<h2>Respond to this report</h2>
+				{actions.length > 0 ? (
+					<ul>{links}</ul>
+				) : (
+					<p>
+						No unique open review request is declared. The agent can add an explicit attention review and Markdown question packet with ordinary file
+						editing. Work Board does not infer one from status.
+					</p>
+				)}
+			</section>
+			<ResultCriteria data={data} />
+			<section id={shellIds.resultReport}>
+				<h2>Report, evidence and limitations</h2>
+				<ResponseMarkdown file={document.file} source={document.source} />
+			</section>
+			<ResultFeedback data={data} />
+		</ReadingPanel>
+	);
+}

package/src/client/react/SavedViews.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { useSavedViews } from "./savedViews.ts";
+import { shellIds } from "./shellIds.ts";
+
+export function SavedViews({ url }: { readonly url: string }) {
+	const views = useSavedViews();
+	const [name, setName] = useState("");
+	const chosen = views.views.find((view) => view.name === views.selected);
+	return (
+		<section aria-label="Saved local views" className="saved-work-views" data-url={url} id={shellIds.savedWorkViews}>
+			<form
+				id={shellIds.saveWorkView}
+				onSubmit={(event) => {
+					event.preventDefault();
+					const field = event.currentTarget.querySelector("input");
+					views.save((field?.value ?? name).trim().slice(0, 60), url);
+				}}
+			>
+				<label htmlFor="view-name">View name</label>
+				<input
+					id={shellIds.viewName}
+					maxLength={60}
+					onInput={(event) => setName(event.currentTarget.value)}
+					placeholder="Name this view"
+					required
+					value={name}
+				/>
+				<button type="submit">Save view</button>
+			</form>
+			<div className="view-picker">
+				<label htmlFor="saved-view">Saved views</label>
+				<select
+					disabled={views.views.length === 0}
+					id={shellIds.savedView}
+					onChange={(event) => views.select(event.target.value)}
+					value={views.selected}
+				>
+					<option value="">{views.views.length > 0 ? "Choose a saved view" : "No saved views"}</option>
+					{views.views.map((view) => (
+						<option key={view.name} value={view.name}>
+							{view.name}
+						</option>
+					))}
+				</select>
+				<a hidden={!chosen} href={chosen?.url} id={shellIds.openSavedView}>
+					Open
+				</a>
+				<button disabled={!chosen} id={shellIds.removeSavedView} onClick={views.remove} type="button">
+					Remove
+				</button>
+				<button disabled={views.views.length === 0} id={shellIds.clearSavedViews} onClick={views.clear} type="button">
+					Clear all
+				</button>
+			</div>
+			<p id={shellIds.savedViewStatus} role="status">
+				{views.notice
+					|| "Save board, filters, sort, and layout locally. Up to 10 named views; saving the same name updates it. Item selection stays in the URL."}
+			</p>
+		</section>
+	);
+}