@shivaedev/work-board 0.12.0 → 0.13.0

package/src/client/react/AnswerPrompts.tsx

@@ -1,80 +1,93 @@
+import { useAtomValue } from "@effect/atom-react";
+import { useLayoutEffect, useRef } from "react";
 import type { Document } from "#browser/document/schema.ts";
 import type { Prompt } from "#browser/responses/Prompt.ts";
+import type { PromptAnswer } from "#browser/responses/schema.ts";
+import { PromptOption } from "./PromptOption.tsx";
 import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
-export function AnswerPrompts({ document, prompts }: { readonly document: Document; readonly prompts: readonly Prompt[] }) {
-	return prompts.map((prompt, index) => <PromptField document={document} index={index} key={prompt.id} prompt={prompt} />);
+import type { useResponseForm } from "./useResponseForm.ts";
+
+type Model = ReturnType<typeof useResponseForm>["form"];
+interface PromptProps {
+	readonly answers: readonly PromptAnswer[];
+	readonly document: Document;
+	readonly form: Model;
+	readonly onEdit: (index: number, answer: PromptAnswer) => void;
+	readonly prompts: readonly Prompt[];
+}
+export function AnswerPrompts(props: PromptProps) {
+	return props.prompts.map((prompt, index) => <PromptField {...props} index={index} key={prompt.id} prompt={prompt} />);
 }
-function PromptField({ document, prompt, index }: { readonly document: Document; readonly prompt: Prompt; readonly index: number }) {
+function PromptField({ document, prompt, index, answers, form, onEdit }: PromptProps & { readonly prompt: Prompt; readonly index: number }) {
+	const answer = answers[index] ?? { prompt: prompt.id, selected: [], text: "" };
+	const error = useAtomValue(form.errorAt(["answers", index, "text"]));
+	const ref = useRef<HTMLTextAreaElement>(null);
+	useLayoutEffect(() => ref.current?.setCustomValidity(error ?? ""), [error]);
 	const choices = document.metadata.options;
+
 	let guidance = "Answer in your own words.";
 	if (choices) {
 		guidance = "Choose an option or write another answer.";
 	} else if (prompt.mode !== "text") {
 		guidance = `${prompt.mode === "one" ? "Choose one option" : "Choose any combination"}, or answer in your own words.`;
 	}
-	const options = prompt.options.map((option, choice) => (
-		<PromptOption choice={choice} document={document} index={index} key={option.id} option={option} prompt={prompt} />
-	));
+	function change(next: PromptAnswer) {
+		onEdit(index, next);
+	}
+
+	function choose(id: string, checked: boolean) {
+		let selected: readonly string[] = [];
+		if (prompt.mode === "one") {
+			selected = checked ? [id] : [];
+		} else {
+			selected = checked ? [...new Set([...answer.selected, id])] : answer.selected.filter((entry) => entry !== id);
+		}
+		change({ ...answer, selected });
+	}
+	let message = error;
+	if (error && answer.selected.length === 0 && !answer.text.trim()) {
+		message = `Unanswered: Question ${index + 1} · ${prompt.id}. Choose an option or answer in your own words.`;
+	}
 	return (
 		<fieldset data-mode={prompt.mode} data-prompt={prompt.id} data-source={prompt.source}>
 			<legend>{choices ? "Your answer" : `Question ${index + 1} · ${prompt.id}`}</legend>
 			{choices === undefined && <ResponseMarkdown file={document.file} source={prompt.source} />}
 			<p>{guidance} Nothing is selected for you.</p>
-			<div className={choices ? "question-choices" : undefined}>{options}</div>
+			<div className={choices ? "question-choices" : undefined}>
+				{prompt.options.map((option, choice) => (
+					<PromptOption
+						checked={answer.selected.includes(option.id)}
+						choice={choice}
+						choose={choose}
+						document={document}
+						index={index}
+						key={option.id}
+						option={option}
+						prompt={prompt}
+					/>
+				))}
+			</div>
 			{prompt.mode !== "text" && (
-				<button data-clear-choices type="button">
+				<button data-clear-choices onClick={() => change({ ...answer, selected: [] })} type="button">
 					Clear selections
 				</button>
 			)}
 			<label>
 				{choices ? "Another answer / additional text" : "Additional text / another answer"}
-				<textarea data-answer-text maxLength={8192} rows={choices ? 4 : 3} />
+				<textarea
+					aria-describedby={`answer-${index}-error`}
+					aria-invalid={Boolean(error)}
+					data-answer-text
+					maxLength={8192}
+					onInput={(event) => change({ ...answer, text: event.currentTarget.value })}
+					ref={ref}
+					rows={choices ? 4 : 3}
+					value={answer.text}
+				/>
+				<span className="response-field-error" hidden={!error} id={`answer-${index}-error`}>
+					{message}
+				</span>
 			</label>
 		</fieldset>
 	);
 }
-function PromptOption({
-	document,
-	prompt,
-	option,
-	choice,
-	index,
-}: {
-	readonly document: Document;
-	readonly prompt: Prompt;
-	readonly option: Prompt["options"][number];
-	readonly choice: number;
-	readonly index: number;
-}) {
-	const source = document.metadata.options?.[choice];
-	if (source) {
-		return (
-			<div>
-				<input data-option-source={option.source} hidden name={`choice-${prompt.id}`} type="radio" value={option.id} />
-				<button aria-pressed="false" className="question-choice" data-choice={option.id} type="button">
-					<strong>
-						{source.label}
-						{source.label === document.metadata.recommended && " · Recommended"}
-					</strong>
-					<small>{source.description}</small>
-				</button>
-			</div>
-		);
-	}
-	const id = `question-${index}-${choice}`;
-	return (
-		<div className="question-option">
-			<input
-				data-option-source={option.source}
-				id={id}
-				name={`choice-${prompt.id}`}
-				type={prompt.mode === "one" ? "radio" : "checkbox"}
-				value={option.id}
-			/>
-			<div>
-				<label htmlFor={id}>Option {option.id}</label>
-				<ResponseMarkdown file={document.file} source={option.source} />
-			</div>
-		</div>
-	);
-}

package/src/client/react/BoardMain.tsx

@@ -0,0 +1,30 @@
+import type { Navigation } from "#browser/navigation/schema.ts";
+import { DocumentMain } from "./DocumentMain.tsx";
+import { documentRoute } from "./documentRoute.ts";
+import type { MainLocation } from "./mainLocation.ts";
+import { ProjectionMain } from "./ProjectionMain.tsx";
+import { projectionRoute } from "./projectionRoute.ts";
+import { RemainingMain } from "./RemainingMain.tsx";
+import { remainingRoute } from "./remainingRoute.ts";
+import type { ShellApi } from "./ShellApi.ts";
+export function BoardMain({
+	api,
+	home,
+	onPage,
+	url,
+}: {
+	readonly api: ShellApi;
+	readonly home: Navigation["home"];
+	readonly onPage: (location: MainLocation) => void;
+	readonly url: string;
+}) {
+	const pathname = new URL(url, "http://127.0.0.1").pathname;
+	const projection = projectionRoute(pathname, home);
+	if (projection) {
+		return <ProjectionMain api={api} onPage={onPage} route={projection} url={url} />;
+	}
+	if (documentRoute(pathname, home)) {
+		return <DocumentMain api={api} onPage={onPage} url={url} />;
+	}
+	return <RemainingMain api={api} onPage={onPage} route={remainingRoute(pathname) ?? "start"} url={url} />;
+}

package/src/client/react/BoardShell.tsx

@@ -1,28 +1,48 @@
 import { useRouterState } from "@tanstack/react-router";
 import { Option } from "effect";
+import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
 import { useCallback, useEffect, useState } from "react";
 import { useQuery } from "@shivaedev/effect-react/result-state.ts";
-import { DocumentMain } from "./DocumentMain.tsx";
-import { documentRoute } from "./documentRoute.ts";
+import type { BrowserClient } from "#client/client.ts";
+import { AgeTicker } from "./Age.tsx";
+import { BoardMain } from "./BoardMain.tsx";
 import { Header } from "./Header.tsx";
-import { LegacyMain } from "./LegacyMain.tsx";
-import { legacyPage, type MainLocation } from "./legacyPage.ts";
+import { HistoryRetention } from "./HistoryRetention.tsx";
+import { LiveControls } from "./LiveControls.tsx";
+import { bootstrapPage, type MainLocation } from "./mainLocation.ts";
+import { ReadingLibrary } from "./ReadingLibrary.tsx";
+import { SearchDialog } from "./SearchDialog.tsx";
 import type { ShellApi } from "./ShellApi.ts";
 import { Sidebar } from "./Sidebar.tsx";
 import { shellIds } from "./shellIds.ts";
+import { UpdatesToggle } from "./UpdatesToggle.tsx";
+import { useAppearance } from "./useAppearance.ts";
+import { useBoardNavigation } from "./useBoardNavigation.ts";
+import { useSearchDialog } from "./useSearchDialog.ts";
+import { useSidebar } from "./useSidebar.ts";
+import { VisualInspection } from "./VisualInspection.tsx";
 export interface ShellOptions {
 	readonly api: ShellApi;
+	readonly client?: BrowserClient;
 	readonly initial: string;
+	readonly reading?: unknown;
 	readonly ready?: () => void;
+	readonly registry: AtomRegistry.AtomRegistry;
 }
-export function BoardShell({ api, initial, ready }: ShellOptions) {
+export function BoardShell(options: ShellOptions) {
+	const { api, initial, ready, client } = options;
+	const appearance = useAppearance();
+	const sidebar = useSidebar(appearance);
+	const status = useBoardNavigation(options);
+	const search = useSearchDialog();
+	const [libraryOpen, setLibraryOpen] = useState(false);
 	const location = useRouterState({ select: (state) => state.resolvedLocation ?? state.location });
 	const [main, setMain] = useState<MainLocation>(() => {
-		const doc = legacyPage(initial).getElementById("doc");
+		const doc = bootstrapPage(initial).getElementById("doc");
 		return { file: doc?.dataset.file ?? "", view: doc?.dataset.view ?? "" };
 	});
 	const [bootstrapHome] = useState(() => {
-		const doc = legacyPage(initial).getElementById("doc");
+		const doc = bootstrapPage(initial).getElementById("doc");
 		return doc?.classList.contains("board-view") ? { file: doc.dataset.file ?? "", identity: doc.dataset.identity } : undefined;
 	});
 	const query = useQuery(api.navigation.query({ current: main.view ? "" : main.file }), { keepPreviousData: true });
@@ -33,14 +53,20 @@ export function BoardShell({ api, initial, ready }: ShellOptions) {
 	);
 	useEffect(() => {
 		function start() {
-			if (document.getElementById("doc")?.dataset.route) {
+			const doc = document.getElementById("doc");
+			const context = doc?.querySelector<HTMLElement>(".item-context");
+			if (data && doc?.dataset.route && (!context || context.dataset.readingReady === "true")) {
 				ready?.();
 			}
 		}
 		start();
 		document.addEventListener("board-page", start);
-		return () => document.removeEventListener("board-page", start);
-	}, [ready]);
+		document.addEventListener("board-reading-ready", start);
+		return () => {
+			document.removeEventListener("board-page", start);
+			document.removeEventListener("board-reading-ready", start);
+		};
+	}, [ready, data]);
 	useEffect(() => {
 		function sync() {
 			const doc = document.getElementById("doc");
@@ -56,24 +82,60 @@ export function BoardShell({ api, initial, ready }: ShellOptions) {
 			document.dispatchEvent(new Event("board-index-change"));
 		}
 	}, [data]);
+	const live = client ? (
+		<LiveControls
+			client={client}
+			current={location.pathname + location.searchStr}
+			navigationFailed={Option.isSome(query.cause)}
+			navigationPending={query.pending}
+		/>
+	) : (
+		<span className="live" id={shellIds.live} role="status">
+			connecting
+		</span>
+	);
 	return (
-		<>
-			<a className="skip" href="#doc">
-				Skip to content
-			</a>
-			<div className="workspace">
-				<Sidebar data={data} home={location.pathname === "/"} main={main} />
-				<div className="sidebar-backdrop" hidden id={shellIds.sidebarBackdrop} />
-				<div className="page">
-					<Header count={data?.inboxCount ?? null} main={main} />
-					{documentRoute(location.pathname, data ? data.home : bootstrapHome) ? (
-						<DocumentMain api={api} initial={initial} onPage={onPage} url={location.pathname + location.searchStr} />
-					) : (
-						<LegacyMain api={api} initial={initial} onPage={onPage} url={location.pathname + location.searchStr} />
-					)}
+		<AgeTicker>
+			<ReadingLibrary close={() => setLibraryOpen(false)} data={data} open={libraryOpen}>
+				<a className="skip" href="#doc">
+					Skip to content
+				</a>
+				<div className="workspace">
+					<Sidebar controls={sidebar} data={data} home={location.pathname === "/"} main={main} openLibrary={() => setLibraryOpen(true)} />
+					<button
+						aria-label="Close files"
+						className="sidebar-backdrop"
+						hidden={!(sidebar.narrow && sidebar.open)}
+						id={shellIds.sidebarBackdrop}
+						onClick={() => sidebar.close()}
+						type="button"
+					/>
+					<div className="page" inert={sidebar.narrow && sidebar.open}>
+						<Header
+							appearance={appearance}
+							count={data?.inboxCount ?? null}
+							live={live}
+							main={main}
+							openSearch={search.show}
+							sidebar={sidebar}
+							status={status}
+							updates={client ? <UpdatesToggle client={client} /> : null}
+						/>
+						<BoardMain api={api} home={data ? data.home : bootstrapHome} onPage={onPage} url={location.pathname + location.searchStr} />
+					</div>
 				</div>
-			</div>
-			{Option.isSome(query.cause) && <p role="status">Navigation refresh failed. Your displayed files are retained.</p>}
-		</>
+				{Option.isSome(query.cause) && <p role="status">Navigation refresh failed. Your displayed files are retained.</p>}
+				{main.view !== "changes" && <HistoryRetention api={api} />}
+				<VisualInspection />
+				<SearchDialog
+					api={api}
+					appearance={appearance}
+					close={search.close}
+					open={search.open}
+					returnFocus={search.returnFocus}
+					toggleSidebar={sidebar.toggle}
+				/>
+			</ReadingLibrary>
+		</AgeTicker>
 	);
 }

package/src/client/react/ChangesMain.tsx

@@ -0,0 +1,68 @@
+import type { HistoryOutput } from "#history/schema.ts";
+import { HistoryComparison } from "./HistoryComparison.tsx";
+import type { MainLocation } from "./mainLocation.ts";
+import { ProjectionFrame } from "./ProjectionFrame.tsx";
+import type { ShellApi } from "./ShellApi.ts";
+import { shellIds } from "./shellIds.ts";
+import { useHistoryComparison } from "./useHistoryComparison.ts";
+export function ChangesMain({
+	api,
+	onPage,
+	url,
+}: {
+	readonly api: ShellApi;
+	readonly onPage: (location: MainLocation) => void;
+	readonly url: string;
+}) {
+	const history = useHistoryComparison(api);
+	return (
+		<ProjectionFrame
+			atom={history.atom}
+			location={() => ({ file: "Changes", status: 200, view: "changes" })}
+			onPage={onPage}
+			render={(result) => <ChangesPage history={history} result={result} />}
+			route="changes"
+			url={url}
+		/>
+	);
+}
+function ChangesPage({ history, result }: { readonly history: ReturnType<typeof useHistoryComparison>; readonly result: HistoryOutput }) {
+	const { baseline, busy, clear: handleClear, message, notice, observe, available } = history;
+	let content = <p>{result.reason}</p>;
+	if (result.comparison) {
+		content = <HistoryComparison data={result.comparison} />;
+	}
+	if (message) {
+		content = <p role="status">{message}</p>;
+	}
+	function handleObserve() {
+		void observe();
+	}
+	return (
+		<section className="history" data-baseline={baseline ?? ""}>
+			<h1>Changes since seen</h1>
+			<p>
+				Compare current Markdown with one observation you explicitly remember in this browser. This is an observed source comparison, not an event
+				journal, Git history, authorship, or verified acceptance.
+			</p>
+			<p>
+				Remembered source can include old or deleted content. One snapshot per workspace, up to 2 MiB, expires after 30 days and is removed on your
+				next workspace visit. Mark seen replaces it; Clear forgets it. No source writes or cloud storage.
+			</p>
+			<div className="history-controls">
+				<button disabled={busy || result.snapshot === null || !available} id={shellIds.historyMark} onClick={handleObserve} type="button">
+					{baseline ? "Mark current workspace seen" : "Start remembering changes"}
+				</button>
+				<button disabled={busy || !baseline} id={shellIds.historyClear} onClick={handleClear} type="button">
+					Clear remembered history
+				</button>
+				<span id={shellIds.historyStorage} role="status">
+					{notice}
+				</span>
+			</div>
+			<div aria-live="polite" id={shellIds.changesContent}>
+				{content}
+			</div>
+		</section>
+	);
+}

package/src/client/react/DiagnosticsFleet.tsx

@@ -0,0 +1,64 @@
+import type { FleetHealth } from "#diagnostics/health.ts";
+import { ObservedTime } from "./diagnosticsValues.tsx";
+export function DiagnosticsFleet({ value, now }: { readonly value: FleetHealth; readonly now: number }) {
+	let freshness = "Current snapshot";
+	if (now < value.observedAt) {
+		freshness = "Publisher clock is ahead";
+	} else if (now - value.observedAt > value.staleAfterMs) {
+		freshness = "Stale snapshot — Fleet has not refreshed its health";
+	}
+
+	return (
+		<>
+			<p className="diagnostics-freshness">{freshness}</p>
+			<dl className="diagnostics-metrics">
+				<div>
+					<dt>Running / concurrency cap</dt>
+					<dd>
+						<strong>
+							{value.running} / {value.concurrency}
+						</strong>
+					</dd>
+				</div>
+				<div>
+					<dt>Queued</dt>
+					<dd>
+						<strong>{value.queued}</strong>
+					</dd>
+				</div>
+				{Object.entries(value.waiting).map(([owner, count]) => (
+					<div key={owner}>
+						<dt>Waiting on {owner}</dt>
+						<dd>
+							<strong>{count}</strong>
+						</dd>
+					</div>
+				))}
+				<div>
+					<dt>Last scheduler pass</dt>
+					<dd>
+						<ObservedTime at={value.lastSchedulerPass} />
+					</dd>
+				</div>
+				<div>
+					<dt>Last provider capacity rejection</dt>
+					<dd>
+						<CapacityRejection value={value.lastCapacityRejection} />
+					</dd>
+				</div>
+			</dl>
+		</>
+	);
+}
+
+function CapacityRejection({ value }: { readonly value: FleetHealth["lastCapacityRejection"] }) {
+	return value === null ? (
+		"None observed"
+	) : (
+		<>
+			{value.cause}
+			<br />
+			<ObservedTime at={value.at} />
+		</>
+	);
+}

package/src/client/react/DiagnosticsMain.tsx

@@ -0,0 +1,29 @@
+import { routeQueryOptions } from "#client/page/routeQuery.ts";
+import { DiagnosticsPage } from "./DiagnosticsPage.tsx";
+import type { MainLocation } from "./mainLocation.ts";
+import { ProjectionFrame } from "./ProjectionFrame.tsx";
+import type { ShellApi } from "./ShellApi.ts";
+import { useDiagnosticsPolling } from "./useDiagnosticsPolling.ts";
+
+export function DiagnosticsMain({
+	api,
+	onPage,
+	url,
+}: {
+	readonly api: ShellApi;
+	readonly onPage: (location: MainLocation) => void;
+	readonly url: string;
+}) {
+	const atom = api.diagnostics.query(undefined, routeQueryOptions);
+	useDiagnosticsPolling(atom);
+	return (
+		<ProjectionFrame
+			atom={atom}
+			location={() => ({ file: "Diagnostics", status: 200, view: "diagnostics" })}
+			onPage={onPage}
+			render={(data) => <DiagnosticsPage data={data} />}
+			route="diagnostics"
+			url={url}
+		/>
+	);
+}

package/src/client/react/DiagnosticsPage.tsx

@@ -0,0 +1,77 @@
+import type { ReactNode } from "react";
+import type { Observation } from "#browser/diagnostics/schema.ts";
+import type { DiagnosticsProjection } from "#browser/views/remaining.ts";
+import { DiagnosticsFleet } from "./DiagnosticsFleet.tsx";
+import { DiagnosticsGithub, DiagnosticsWindows, ObservedTime } from "./diagnosticsValues.tsx";
+export function DiagnosticsPage({ data: { sources: data, now } }: { readonly data: DiagnosticsProjection }) {
+	const fleet = data.fleet.state === "ready" ? { ...data.fleet, observedAt: data.fleet.value.observedAt } : data.fleet;
+	return (
+		<div className="diagnostics">
+			<h1>Diagnostics</h1>
+			<p>Agent usage and Fleet health. Refreshes every 15 seconds while this view is visible; Pause updates holds the current view.</p>
+			<div className="diagnostics-grid">
+				<Card
+					attention={
+						data.codex.state === "ready"
+						&& [data.codex.value.primary, data.codex.value.secondary].some((window) => window !== null && window.usedPercent >= 90)
+					}
+					name="Codex"
+					render={(value) => <DiagnosticsWindows now={now} value={value} />}
+					source={data.codex}
+				/>
+				<Card
+					attention={data.github.state === "ready" && [data.github.value.core, data.github.value.graphql].some((window) => window.remaining === 0)}
+					name="GitHub"
+					render={(value) => <DiagnosticsGithub now={now} value={value} />}
+					source={data.github}
+				/>
+				<Card
+					attention={
+						fleet.state === "ready"
+						&& (fleet.value.running >= fleet.value.concurrency
+							|| Object.values(fleet.value.waiting).some((count) => count > 0)
+							|| now < fleet.value.observedAt)
+					}
+					name="Fleet"
+					render={(value) => <DiagnosticsFleet now={now} value={value} />}
+					source={fleet}
+					stale={fleet.state === "ready" && now - fleet.value.observedAt > fleet.value.staleAfterMs}
+				/>
+			</div>
+		</div>
+	);
+}
+function Card<A>({
+	name,
+	source,
+	attention,
+	stale,
+	render,
+}: {
+	readonly name: string;
+	readonly source: Observation<A>;
+	readonly attention: boolean;
+	readonly stale?: boolean;
+	readonly render: (value: A) => ReactNode;
+}) {
+	let state: Observation<A>["state"] | "attention" | "stale" = source.state;
+	if (source.state === "ready" && attention) {
+		state = "attention";
+	}
+	if (source.state === "ready" && stale) {
+		state = "stale";
+	}
+	const label = { attention: "Needs attention", error: "Unavailable", "not-configured": "Not configured", ready: "Available", stale: "Stale" }[state];
+	return (
+		<section aria-labelledby={`diagnostics-${name.toLowerCase()}`} className="diagnostics-card" data-source={name.toLowerCase()} data-state={state}>
+			<header>
+				<h2 id={`diagnostics-${name.toLowerCase()}`}>{name}</h2>
+				<span className="diagnostics-status">{label}</span>
+			</header>
+			{source.state === "ready" ? render(source.value) : <p role="status">{source.cause}</p>}
+			<p className="diagnostics-freshness">
+				Observed <ObservedTime at={source.observedAt} />
+			</p>
+		</section>
+	);
+}

package/src/client/react/DocumentContext.tsx

@@ -1,11 +1,19 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import type { Document } from "#browser/document/schema.ts";
+import { Age } from "./Age.tsx";
 import { DocumentMetadata } from "./DocumentMetadata.tsx";
-import { shellIds } from "./shellIds.ts";
+import { Favorite } from "./Favorite.tsx";
+import { useMedia } from "./useMedia.ts";
 
 export function DocumentContext({ document: data }: { readonly document: Document }) {
 	const [headings, setHeadings] = useState<readonly { readonly id: string; readonly title: string; readonly depth: number }[]>([]);
 	const contextRef = useRef<HTMLDetailsElement>(null);
+	const wide = useMedia("(min-width: 1100px)");
+	useLayoutEffect(() => {
+		if (contextRef.current) {
+			contextRef.current.open = wide;
+		}
+	}, [wide]);
 	useEffect(() => {
 		function outline() {
 			const entries = [
@@ -19,21 +27,29 @@ export function DocumentContext({ document: data }: { readonly document: Documen
 		outline();
 		return () => document.removeEventListener("board-page", outline);
 	}, []);
+
+	useLayoutEffect(() => {
+		const context = contextRef.current;
+		if (!context) {
+			return;
+		}
+		const count = context.closest("main")?.querySelectorAll(".item-introduction h1[id], article.doc :is(h1,h2,h3,h4,h5,h6)[id]").length ?? 0;
+		if (count !== headings.length) {
+			return;
+		}
+		context.dataset.readingReady = "true";
+		document.dispatchEvent(new Event("board-reading-ready"));
+	}, [headings]);
 	return (
 		<details className="item-context" data-key="item-context" ref={contextRef}>
 			<summary>Context and tools</summary>
 			<div className="context-content">
 				<p className="meta">
-					Source: {data.file} ·{" "}
-					<span className="age" data-modified={data.modified}>
-						updated
-					</span>
+					Source: {data.file} · <Age modified={data.modified} />
 				</p>
 				<DocumentMetadata document={data} />
 				<div className="reading-tools">
-					<button aria-pressed="false" disabled id={shellIds.favoriteToggle} type="button">
-						Save favorite
-					</button>
+					<Favorite file={data.file} title={headings.find((heading) => heading.depth === 1)?.title || data.file} />
 					<Outline headings={headings} />
 				</div>
 			</div>