@shivaedev/work-board 0.13.0 → 0.14.0

package/src/browser/navigation/html.ts

@@ -1,29 +0,0 @@
-import { escapeHtml } from "#browser/escapeHtml.ts";
-import type { Navigation, NavigationFile, NavigationFolder } from "./schema.ts";
-
-function link(file: NavigationFile): string {
-	const here = file.current ? ' aria-current="page"' : "";
-	const age = `<span class="age short" data-modified="${file.modified}"></span>`;
-	return `<a href="${file.href}"${here}>${escapeHtml(file.name)}</a>${age}`;
-}
-
-function contents(folder: NavigationFolder, count?: string): string {
-	const files = folder.files.map((file) => `<li>${link(file)}</li>`).join("");
-	const folders = folder.folders
-		.map((child) => {
-			const open = child.active ? " open" : "";
-			return `<li class="file-folder"><details data-key="folder:${escapeHtml(child.path)}"${open}><summary>${escapeHtml(child.name)}/ (${child.count})</summary>${contents(child)}</details></li>`;
-		})
-		.join("");
-	return `<ul${count === undefined ? "" : ` data-inbox-count="${count}"`}>${files}${folders}</ul>`;
-}
-
-export function navigationHtml(data: Navigation): string {
-	const records = data.records;
-	const open = records.active ? " open" : "";
-	const fleet =
-		records.count === 0
-			? ""
-			: `<details data-key="fleet-records"${open}><summary>Fleet records (${records.count})</summary><ul>${records.files.map((file) => `<li>${link(file)}</li>`).join("")}</ul></details>`;
-	return contents(data.tree, String(data.inboxCount ?? "?")) + fleet;
-}

package/src/browser/navigation/schema.ts

@@ -1,27 +0,0 @@
-import { Schema } from "effect";
-
-export const NavigationFile = Schema.Struct({
-	current: Schema.Boolean,
-	href: Schema.String,
-	modified: Schema.Number,
-	name: Schema.String,
-	path: Schema.String,
-});
-export type NavigationFile = typeof NavigationFile.Type;
-
-export class NavigationFolder extends Schema.Class<NavigationFolder>("NavigationFolder")({
-	active: Schema.Boolean,
-	count: Schema.Number,
-	files: Schema.Array(NavigationFile),
-	folders: Schema.Array(Schema.suspend((): Schema.Codec<NavigationFolder> => NavigationFolder)),
-	name: Schema.String,
-	path: Schema.String,
-}) {}
-
-export const Navigation = Schema.Struct({
-	home: Schema.optional(Schema.Struct({ file: Schema.String, identity: Schema.optional(Schema.String) })),
-	inboxCount: Schema.NullOr(Schema.Number),
-	records: Schema.Struct({ active: Schema.Boolean, count: Schema.Number, files: Schema.Array(NavigationFile) }),
-	tree: NavigationFolder,
-});
-export type Navigation = typeof Navigation.Type;

package/src/client/mockups/app.ts

@@ -1,114 +0,0 @@
-import { element } from "./element.ts";
-import { names, searchEntries } from "./sampleData.ts";
-import { renderWork, selectWork } from "./work.ts";
-
-let toastTimer: ReturnType<typeof setTimeout> | undefined;
-const searchDialog = element("#search-dialog", HTMLDialogElement);
-const searchInput = element("#search-input", HTMLInputElement);
-
-function navigate() {
-	const requested = location.hash.slice(1);
-	const screen = Object.hasOwn(names, requested) ? requested : "overview";
-	for (const section of document.querySelectorAll<HTMLElement>(".screen")) {
-		section.hidden = section.id !== screen;
-	}
-	for (const link of document.querySelectorAll<HTMLAnchorElement>("nav a")) {
-		const active = link.dataset.screen === screen;
-		link.classList.toggle("active", active);
-		if (active) {
-			link.setAttribute("aria-current", "page");
-		} else {
-			link.removeAttribute("aria-current");
-		}
-	}
-	element("#breadcrumb", HTMLElement).textContent = names[screen] ?? "Overview";
-	document.title = `${names[screen]} — Work Board vision`;
-	window.scrollTo(0, 0);
-}
-function notify(message: string) {
-	const toast = element("#toast", HTMLElement);
-	clearTimeout(toastTimer);
-	toast.textContent = message;
-	toast.hidden = false;
-	toastTimer = setTimeout(() => {
-		toast.hidden = true;
-	}, 5000);
-}
-function renderSearch() {
-	const query = searchInput.value.trim().toLowerCase();
-	const matches = searchEntries.filter((entry) => `${entry.title} ${entry.detail}`.toLowerCase().includes(query));
-	element("#search-results", HTMLElement).innerHTML =
-		matches
-			.map(
-				(entry) =>
-					`<a href="#${entry.screen}" ${entry.item ? `data-search-item="${entry.item}"` : ""}>${entry.title}<small>${entry.detail}</small></a>`,
-			)
-			.join("") || '<p class="small-note">No matches. Try “decision”, “navigation”, or “Atlas”.</p>';
-}
-function openSearch() {
-	renderSearch();
-	searchDialog.showModal();
-	searchInput.focus();
-}
-function respond(revisionRequested: boolean) {
-	const text = element("#direction", HTMLTextAreaElement).value.trim();
-	if (!text) {
-		element("#direction", HTMLTextAreaElement).focus();
-		notify("Add some direction before continuing.");
-		return;
-	}
-	const status = element("#decision-status", HTMLElement);
-	status.textContent = revisionRequested ? "Revision requested · demo" : "Option A selected · demo";
-	status.className = "tag green";
-	const result = element("#decision-result", HTMLElement);
-	result.textContent = revisionRequested
-		? "Demo: your feedback would return to Atlas with proposal revision 3 attached."
-		: "Demo: this direction would be recorded against proposal revision 3 and included in Atlas’s next handoff.";
-	result.hidden = false;
-	notify("Preview updated. No source files changed and no agent was contacted.");
-}
-window.addEventListener("hashchange", navigate);
-element("#search-launch", HTMLElement).addEventListener("click", openSearch);
-element("#close-search", HTMLElement).addEventListener("click", () => searchDialog.close());
-searchInput.addEventListener("input", renderSearch);
-document.addEventListener("keydown", (event) => {
-	if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
-		event.preventDefault();
-		if (!searchDialog.open) {
-			openSearch();
-		}
-	}
-});
-element("#search-results", HTMLElement).addEventListener("click", (event) => {
-	const link = event.target instanceof Element ? event.target.closest("a") : null;
-	if (!link) {
-		return;
-	}
-	if (link.dataset.searchItem) {
-		selectWork(link.dataset.searchItem);
-	}
-	searchDialog.close();
-});
-for (const button of document.querySelectorAll<HTMLElement>("[data-artifact]")) {
-	button.addEventListener("click", () => {
-		for (const tab of document.querySelectorAll<HTMLElement>("[data-artifact]")) {
-			const active = tab === button;
-			tab.classList.toggle("selected", active);
-			tab.setAttribute("aria-selected", String(active));
-			element(`#artifact-${tab.dataset.artifact}`, HTMLElement).hidden = !active;
-		}
-	});
-}
-element("#approve", HTMLElement).addEventListener("click", () => respond(false));
-element("#revise", HTMLElement).addEventListener("click", () => respond(true));
-element("#send-feedback", HTMLElement).addEventListener("click", () => {
-	const input = element("#review-note", HTMLTextAreaElement);
-	if (!input.value.trim()) {
-		input.focus();
-		notify("Add feedback so the next pass has clear direction.");
-		return;
-	}
-	notify("Demo revision request prepared for Juniper. Nothing was sent or saved.");
-});
-renderWork();
-navigate();

package/src/client/mockups/element.ts

@@ -1,7 +0,0 @@
-export function element<E extends Element>(selector: string, kind: new () => E): E {
-	const found = document.querySelector(selector);
-	if (!(found instanceof kind)) {
-		throw new Error(`Missing prototype element: ${selector}`);
-	}
-	return found;
-}

package/src/client/mockups/sampleData.ts

@@ -1,92 +0,0 @@
-export interface Item {
-	readonly attention: boolean;
-	readonly destination: "brief" | "decision" | "evidence";
-	readonly id: string;
-	readonly next: string;
-	readonly note: string;
-	readonly owner: string;
-	readonly state: string;
-	readonly tag: string;
-	readonly title: string;
-}
-export const items: readonly Item[] = [
-	{
-		attention: true,
-		destination: "decision",
-		id: "WB–014",
-		next: "Record the scope decision",
-		note: "Two options are ready. Your direction sets the next handoff.",
-		owner: "Atlas",
-		state: "Up next",
-		tag: "Decision needed",
-		title: "Choose the first release boundary",
-	},
-	{
-		attention: false,
-		destination: "brief",
-		id: "WB–025",
-		next: "Define the read-side decision model",
-		note: "Keep the rationale connected to the work it changes.",
-		owner: "Atlas",
-		state: "Up next",
-		tag: "Planned",
-		title: "Give every decision a place",
-	},
-	{
-		attention: false,
-		destination: "brief",
-		id: "WB–018",
-		next: "Check unresolved and duplicate references",
-		note: "Link plans, decisions, and evidence without duplicating their source.",
-		owner: "Atlas",
-		state: "In progress",
-		tag: "Relationships",
-		title: "Connect the context",
-	},
-	{
-		attention: false,
-		destination: "brief",
-		id: "WB–028",
-		next: "Check focus, selection, and expanded details",
-		note: "A live update should leave the reader oriented.",
-		owner: "Juniper",
-		state: "In progress",
-		tag: "Live updates",
-		title: "Keep your place as work changes",
-	},
-	{
-		attention: true,
-		destination: "evidence",
-		id: "WB–021",
-		next: "Review clarity, focus, and contrast",
-		note: "Search across the project. Open a result beside the board. Keep its context within reach.",
-		owner: "Juniper",
-		state: "In review",
-		tag: "Review needed",
-		title: "Make work easy to find",
-	},
-	{
-		attention: false,
-		destination: "evidence",
-		id: "WB–023",
-		next: "Check the proposed artifact presentation",
-		note: "Screenshots and supporting files live beside the work they explain.",
-		owner: "Juniper",
-		state: "In review",
-		tag: "Evidence",
-		title: "A clear home for local artifacts",
-	},
-];
-export const names: Readonly<Record<string, string>> = {
-	brief: "Project brief",
-	decision: "Decisions",
-	evidence: "Evidence",
-	overview: "Overview",
-	work: "Work",
-};
-export const searchEntries: readonly { readonly detail: string; readonly item?: string; readonly screen: string; readonly title: string }[] = [
-	...items.map((item) => ({ detail: `${item.id} · ${item.state} · ${item.owner}`, item: item.id, screen: "work", title: item.title })),
-	{ detail: "Decision · Options and tradeoffs", screen: "decision", title: "Choose the shape of wave one" },
-	{ detail: "Artifacts · Keyboard · Source changes", screen: "evidence", title: "Navigation review evidence" },
-	{ detail: "Project brief · Principles · Local only", screen: "brief", title: "Work Board north star" },
-];

package/src/client/mockups/work.ts

@@ -1,84 +0,0 @@
-import { element } from "./element.ts";
-import { type Item, items } from "./sampleData.ts";
-
-let view = "board";
-let filter = "all";
-let selectedId = "WB–021";
-function tagClass(item: Item) {
-	if (item.id === "WB–014") {
-		return "amber";
-	}
-	return item.attention ? "green" : "neutral";
-}
-function card(item: Item) {
-	return `<button type="button" class="work-card ${item.id === selectedId ? "selected" : ""}" data-item="${item.id}" aria-pressed="${item.id === selectedId}"><span class="muted">${item.id}</span><strong>${item.title}</strong><p>${item.note}</p><div class="card-bottom"><span>${item.owner}</span><span class="tag ${tagClass(item)}">${item.tag}</span></div></button>`;
-}
-const destinationLabels = { brief: "Principles and direction", decision: "Scope proposal", evidence: "Supporting evidence" };
-function renderDetail() {
-	const item = items.find((entry) => entry.id === selectedId);
-	if (item === undefined) {
-		return;
-	}
-	element("#item-detail", HTMLElement).innerHTML =
-		`<p class="eyebrow">IN CONTEXT / ${item.id}</p><span class="tag ${tagClass(item)}">${item.tag}</span><h2>${item.title}</h2><p>${item.note}</p><dl class="detail-props"><div><dt>State</dt><dd>${item.state}</dd></div><div><dt>Owner</dt><dd>${item.owner}</dd></div><div><dt>Milestone</dt><dd>Wave 1</dd></div></dl><div class="detail-section"><h3>The next step</h3><p>${item.next}</p></div><div class="detail-section"><h3>Connected context</h3><a href="#brief">→ The project brief</a><a href="#${item.destination}">→ ${destinationLabels[item.destination]}</a></div><div class="detail-section"><p>Source: work/${item.id.toLowerCase().replace("–", "-")}.md</p><p class="small-note">Illustrative source path</p></div>`;
-}
-export function renderWork() {
-	const visible = items.filter((item) => filter === "all" || (filter === "attention" ? item.attention : item.owner === "Atlas"));
-	if (!visible.some((item) => item.id === selectedId)) {
-		const first = visible[0];
-		if (first === undefined) {
-			return;
-		}
-		selectedId = first.id;
-	}
-	const content = element("#work-content", HTMLElement);
-	if (view === "board") {
-		content.innerHTML = `<div class="kanban">${["Up next", "In progress", "In review"]
-			.map((state) => {
-				const group = visible.filter((item) => item.state === state);
-				return `<section class="lane" aria-label="${state}"><div class="lane-heading">${state}<span>${group.length}</span></div>${group.map(card).join("") || '<p class="empty-filter">No matching work.</p>'}</section>`;
-			})
-			.join("")}</div>`;
-	} else {
-		content.innerHTML = `<table class="work-table"><thead><tr><th>WORK ITEM</th><th>STATE</th><th>OWNER</th></tr></thead><tbody>${visible.map((item) => `<tr><td><button type="button" data-item="${item.id}" aria-pressed="${item.id === selectedId}"><span class="muted">${item.id}</span><br>${item.title}</button></td><td><span class="tag ${tagClass(item)}">${item.state}</span></td><td>${item.owner}</td></tr>`).join("")}</tbody></table>`;
-	}
-	renderDetail();
-}
-function updateChoice(kind: string, value: string) {
-	for (const button of document.querySelectorAll<HTMLElement>(`[data-${kind}]`)) {
-		const selected = button.dataset[kind] === value;
-		button.classList.toggle("selected", selected);
-		button.setAttribute("aria-pressed", String(selected));
-	}
-}
-element(".work-toolbar", HTMLElement).addEventListener("click", (event) => {
-	const button = event.target instanceof Element ? event.target.closest("button") : null;
-	if (!button) {
-		return;
-	}
-	if (button.dataset.view) {
-		view = button.dataset.view;
-		updateChoice("view", view);
-	}
-	if (button.dataset.filter) {
-		filter = button.dataset.filter;
-		updateChoice("filter", filter);
-	}
-	renderWork();
-});
-element("#work-content", HTMLElement).addEventListener("click", (event) => {
-	const button = event.target instanceof Element ? event.target.closest<HTMLButtonElement>("[data-item]") : null;
-	if (!button?.dataset.item) {
-		return;
-	}
-	selectedId = button.dataset.item;
-	renderWork();
-	element(`[data-item="${selectedId}"]`, HTMLButtonElement).focus({ preventScroll: true });
-});
-
-export function selectWork(id: string) {
-	selectedId = id;
-	filter = "all";
-	updateChoice("filter", filter);
-	renderWork();
-}

package/src/client/react/ChangesMain.tsx

@@ -1,68 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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/HistoryComparison.tsx

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