@shivaedev/work-board 0.12.0 → 0.13.0

package/src/client/react/Modal.tsx

@@ -0,0 +1,92 @@
+import { type ReactNode, useEffect, useRef } from "react";
+
+export function Modal({
+	id,
+	title,
+	open,
+	close,
+	children,
+	opener,
+	focus,
+	returnFocus,
+}: {
+	readonly id: string;
+	readonly title: string;
+	readonly open: boolean;
+	readonly close: () => void;
+	readonly children: ReactNode;
+	readonly opener?: string;
+	readonly focus?: string;
+	readonly returnFocus?: HTMLElement | undefined;
+}) {
+	const ref = useRef<HTMLDialogElement>(null);
+	const previousRef = useRef<Element | null>(null);
+	const selectionRef = useRef<ReturnType<typeof textSelection>>(undefined);
+	useEffect(() => {
+		const dialog = ref.current;
+		if (!dialog) {
+			return;
+		}
+		if (open && !dialog.open) {
+			const previous = returnFocus ?? (opener ? document.getElementById(opener) : document.activeElement);
+			previousRef.current = previous;
+			selectionRef.current = textSelection(previous);
+			dialog.returnValue = "";
+			dialog.showModal();
+			if (focus) {
+				document.getElementById(focus)?.focus();
+			}
+		} else if (!open && dialog.open) {
+			dialog.close();
+		}
+	}, [open, opener, focus, returnFocus]);
+	return (
+		<dialog
+			aria-labelledby={title}
+			id={id}
+			onCancel={() => close()}
+			onClick={(event) => {
+				if (event.target !== event.currentTarget) {
+					return;
+				}
+				const bounds = event.currentTarget.getBoundingClientRect();
+				if (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom) {
+					close();
+				}
+			}}
+			onClose={() => {
+				close();
+				const target = returnFocus ?? previousRef.current;
+				if (ref.current?.returnValue !== "navigate" && target instanceof HTMLElement) {
+					target.focus({ preventScroll: true });
+					const selection = selectionRef.current;
+					const control = textControl(target);
+					if (selection && control) {
+						control.setSelectionRange(selection.start, selection.end, selection.direction);
+					}
+				}
+			}}
+			onKeyDown={(event) => {
+				if (event.key === "Escape") {
+					event.preventDefault();
+					close();
+				}
+			}}
+			ref={ref}
+		>
+			{children}
+		</dialog>
+	);
+}
+
+function textControl(element: Element | null) {
+	return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement ? element : undefined;
+}
+
+function textSelection(element: Element | null) {
+	const control = textControl(element);
+	if (!control || control.selectionStart === null || control.selectionEnd === null) {
+		return undefined;
+	}
+	return { direction: control.selectionDirection ?? "none", end: control.selectionEnd, start: control.selectionStart };
+}

package/src/client/react/NavigationTree.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from "react";
 import type { Navigation, NavigationFile, NavigationFolder } from "#browser/navigation/schema.ts";
+import { Age } from "./Age.tsx";
 
 function Files({ files, current }: { readonly files: readonly NavigationFile[]; readonly current: string }) {
 	return files.map((file) => (
@@ -7,7 +8,7 @@ function Files({ files, current }: { readonly files: readonly NavigationFile[];
 			<a aria-current={file.path === current ? "page" : undefined} href={file.href}>
 				{file.name}
 			</a>
-			<span className="age short" data-modified={file.modified} />
+			<Age modified={file.modified} short />
 		</li>
 	));
 }

package/src/client/react/OverviewGroups.tsx

@@ -0,0 +1,61 @@
+import type { OverviewProjection } from "#browser/views/schema.ts";
+import { fileUrl } from "#files/url.ts";
+
+const groups = [
+	{ empty: "No open decision requests.", kind: "decision", title: "Decisions" },
+	{ empty: "No open review requests.", kind: "review", title: "Reviews" },
+	{ empty: "No open blocker requests.", kind: "blocker", title: "Blockers" },
+];
+export function OverviewGroups({ entries }: { readonly entries: OverviewProjection["entries"] }) {
+	return (
+		<div className="attention-groups">
+			{groups.map((group) => (
+				<Group entries={entries.filter((entry) => entry.kind === group.kind)} group={group} key={group.kind} />
+			))}
+		</div>
+	);
+}
+function Group({ entries, group }: { readonly entries: OverviewProjection["entries"]; readonly group: (typeof groups)[number] }) {
+	return (
+		<section aria-labelledby={`attention-${group.kind}`} className="attention-group">
+			<h2 id={`attention-${group.kind}`} tabIndex={-1}>
+				{group.title}
+				<span>{entries.length}</span>
+			</h2>
+			{entries.length === 0 ? (
+				<p className="empty">{group.empty}</p>
+			) : (
+				entries.map((entry) => <Card entry={entry} key={`${entry.itemId}:${entry.id}`} />)
+			)}
+		</section>
+	);
+}
+function Card({ entry }: { readonly entry: OverviewProjection["entries"][number] }) {
+	const links = entry.unblocks.map((link, index) => (
+		<span key={link.label}>
+			{index > 0 && ", "}
+			{link.href ? <a href={link.href}>{link.label}</a> : link.label}
+		</span>
+	));
+	return (
+		<article className="attention-card" data-attention-item={entry.itemId} data-request={entry.id}>
+			<p className="work-kind">{entry.kind} request</p>
+			<h3>
+				<a href={entry.href}>{entry.title}</a>
+			</h3>
+			<p className="work-id">
+				{entry.itemId} / {entry.id}
+			</p>
+			<p className="attention-reason">{entry.reason}</p>
+			<dl>
+				<dt>Response needed from</dt>
+				<dd>{entry.responseFrom.join(", ")}</dd>
+				<dt>Recorded to unblock</dt>
+				<dd>{links}</dd>
+			</dl>
+			<a className="attention-source" href={`${fileUrl(entry.file)}#attention-request-${encodeURIComponent(entry.id)}`}>
+				Source: {entry.file}:{entry.line}
+			</a>
+		</article>
+	);
+}

package/src/client/react/OverviewPage.tsx

@@ -0,0 +1,68 @@
+import type { OverviewProjection } from "#browser/views/schema.ts";
+import { fileUrl } from "#files/url.ts";
+import { keyed } from "./keyed.ts";
+import { OverviewGroups } from "./OverviewGroups.tsx";
+
+export function OverviewPage({ data }: { readonly data: OverviewProjection }) {
+	let summary = data.inboxCount > 0 ? "No explicit open attention requests recorded." : "All quiet — no explicit open requests recorded.";
+	if (data.entries.length > 0) {
+		summary = `${data.entries.length} validated open request${data.entries.length === 1 ? "" : "s"}`;
+	} else if (data.issues.length > 0) {
+		summary = "No validated open requests. Check unresolved source issues before treating this workspace as quiet.";
+	}
+	const issues = data.issues.length > 0 && (
+		<details className="view-issues">
+			<summary>Unclassified requests and source issues ({data.issues.length})</summary>
+			<p>Ambiguous or invalid requests stay outside the queues. Read their original sources.</p>
+			<ul>
+				{keyed(data.issues, (issue) => `${issue.file}:${issue.line}:${issue.message}`).map(({ key, value: issue }) => (
+					<li key={key}>
+						<a href={fileUrl(issue.file)}>
+							{issue.file}:{issue.line}
+						</a>{" "}
+						— {issue.message}
+					</li>
+				))}
+			</ul>
+		</details>
+	);
+	return (
+		<>
+			<header className="work-head">
+				<p className="work-eyebrow">WORKSPACE · OVERVIEW</p>
+				<h1>What needs a response?</h1>
+				<p>Choose a recorded request to read its context, reasoning and evidence.</p>
+				<a href="/_board/work?view=board">Browse all work</a>
+			</header>
+			{data.complete ? (
+				<>
+					<section aria-label="Inbox summary">
+						<h2>Inbox</h2>
+						<p>
+							{data.inboxCount} waiting · <a href="/_board/inbox">Open Inbox</a>
+						</p>
+					</section>
+					<p className="attention-total" role="status">
+						{summary}
+					</p>
+					<p className="attention-order">
+						Decisions, reviews, then blockers. Within each group: source title, item ID, request ID. Recipients are recorded labels.
+					</p>
+					{issues}
+					<OverviewGroups entries={data.entries} />
+					<p className="attention-footnote">
+						These are authored requests. Closing one does not verify evidence or record an answer. The Inbox also shows human-owned next actions and
+						questions; file activity and finished runs do not create requests.
+					</p>
+				</>
+			) : (
+				<>
+					<p className="attention-incomplete" role="status">
+						Workspace incomplete. Could not read {data.unavailable.join(", ")}. Requests are not counted or classified until the index is complete.
+					</p>
+					{issues}
+				</>
+			)}
+		</>
+	);
+}

package/src/client/react/ProjectionFrame.tsx

@@ -0,0 +1,140 @@
+import { Cause, Option } from "effect";
+import type * as AsyncResult from "effect/reactivity/AsyncResult";
+import type * as Atom from "effect/reactivity/Atom";
+import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { fileUrl } from "#files/url.ts";
+import type { MainLocation } from "./mainLocation.ts";
+import { projectionChanges, type RenderedProjection } from "./projectionChanges.ts";
+import type { ProjectionRoute } from "./projectionRoute.ts";
+import type { RemainingRoute } from "./remainingRoute.ts";
+import { shellIds } from "./shellIds.ts";
+
+export function ProjectionFrame<A, E>({
+	atom,
+	location,
+	onPage,
+	render,
+	source,
+	route,
+	url,
+}: {
+	readonly atom: Atom.Atom<AsyncResult.AsyncResult<A, E>>;
+	readonly location: (data: A) => MainLocation & { readonly identity?: string | undefined; readonly status: number };
+	readonly onPage: (location: MainLocation) => void;
+	readonly render: (data: A) => ReactNode;
+	readonly source?: (data: A) => string | undefined;
+	readonly route: ProjectionRoute | RemainingRoute;
+	readonly url: string;
+}) {
+	const query = useQuery(atom);
+	const fresh = Option.getOrUndefined(query.data);
+	const [retained, setRetained] = useState<{ readonly data: A; readonly url: string }>();
+	useEffect(() => {
+		if (fresh !== undefined) {
+			setRetained({ data: fresh, url });
+		}
+	}, [fresh, url]);
+	const failure = Option.getOrUndefined(Option.flatMap(query.cause, Cause.findErrorOption));
+	const missing = typeof failure === "object" && failure !== null && "_tag" in failure && failure._tag === "NotFound";
+	const conflict = typeof failure === "object" && failure !== null && "_tag" in failure && failure._tag === "Conflict";
+	const data = missing || conflict ? undefined : (fresh ?? (retained?.url === url ? retained.data : undefined));
+	const main = data === undefined ? { file: "", status: failureStatus(missing, conflict), view: projectionView(route) } : location(data);
+	const expectedSource = data === undefined ? undefined : source?.(data);
+	const hostRef = useRef<HTMLElement>(null);
+	const renderedRef = useRef<RenderedProjection | undefined>(undefined);
+	const failed = Option.isSome(query.cause);
+	useLayoutEffect(() => {
+		const element = hostRef.current;
+		if (!element || query.pending || (data === undefined && !failed)) {
+			return;
+		}
+		const mainElement = element;
+		let active = true;
+		function announce() {
+			queueMicrotask(() => {
+				if (
+					!active
+					|| (expectedSource !== undefined
+						&& mainElement.querySelector<HTMLElement>(".board[data-source], .document-layout > article.doc[data-source]")?.dataset.source
+							!== expectedSource)
+				) {
+					return;
+				}
+				renderedRef.current = projectionChanges(mainElement, renderedRef.current, url);
+				mainElement.dataset.route = url;
+				flushSync(() => onPage({ file: main.file, view: main.view }));
+				document.dispatchEvent(new Event("board-page"));
+			});
+		}
+		const observer = new MutationObserver((records) => {
+			if (
+				records.some(
+					(record) =>
+						record.target instanceof Element
+						&& (record.target.matches(".document-layout") || record.target.closest("article.doc, .item-introduction"))
+						&& !record.target.closest(".age"),
+				)
+			) {
+				announce();
+			}
+		});
+		observer.observe(element, { attributeFilter: ["data-source"], attributes: true, childList: true, subtree: true });
+		announce();
+		return () => {
+			active = false;
+			observer.disconnect();
+		};
+	}, [data, failed, query.pending, expectedSource, main.file, main.view, onPage, url]);
+	return (
+		<>
+			<main
+				className="board-view"
+				data-file={main.file}
+				data-identity={"identity" in main ? main.identity : undefined}
+				data-projection={route}
+				data-react-projection
+				data-status={main.status}
+				data-url={route === "board" ? fileUrl(main.file) : url}
+				data-view={main.view}
+				id={shellIds.doc}
+				ref={hostRef}
+				tabIndex={-1}
+			>
+				{data === undefined ? (
+					<p className="empty" role="status">
+						{loadingMessage(query.pending, missing, failure)}
+					</p>
+				) : (
+					render(data)
+				)}
+			</main>
+			{data !== undefined && Option.isSome(query.cause) && <p role="status">Refresh failed. Your displayed view is retained.</p>}
+		</>
+	);
+}
+
+function loadingMessage(pending: boolean, missing: boolean, failure: unknown) {
+	if (pending) {
+		return "Opening view…";
+	}
+	if (typeof failure === "object" && failure !== null && "message" in failure && typeof failure.message === "string") {
+		return failure.message;
+	}
+	return missing ? "The board source is missing." : "This view could not be opened. Retry the link or reload the page.";
+}
+
+function projectionView(route: ProjectionRoute | RemainingRoute) {
+	if (route === "board") {
+		return "";
+	}
+	return route === "respond" ? "response" : route;
+}
+
+function failureStatus(missing: boolean, conflict: boolean) {
+	if (missing) {
+		return 404;
+	}
+	return conflict ? 409 : 503;
+}

package/src/client/react/ProjectionMain.tsx

@@ -0,0 +1,63 @@
+import { documentSourceId } from "#client/document/layout.ts";
+import { routeQueryOptions } from "#client/page/routeQuery.ts";
+import { HomeBoard } from "./HomeBoard.tsx";
+import { InboxPage } from "./InboxPage.tsx";
+import type { MainLocation } from "./mainLocation.ts";
+import { OverviewPage } from "./OverviewPage.tsx";
+import { ProjectionFrame } from "./ProjectionFrame.tsx";
+import type { ProjectionRoute } from "./projectionRoute.ts";
+import type { ShellApi } from "./ShellApi.ts";
+import { WorkPage } from "./WorkPage.tsx";
+export function ProjectionMain({
+	api,
+	route,
+	url,
+	onPage,
+}: {
+	readonly api: ShellApi;
+	readonly route: ProjectionRoute;
+	readonly url: string;
+	readonly onPage: (location: MainLocation) => void;
+}) {
+	const options = { onPage, route, url };
+	switch (route) {
+		case "board":
+			return (
+				<ProjectionFrame
+					{...options}
+					atom={api.board.query({ url }, routeQueryOptions)}
+					location={(data) => ({ file: data.document.file, identity: data.document.identity, status: 200, view: "" })}
+					render={(data) => <HomeBoard data={data} />}
+					source={(data) => documentSourceId(data.document)}
+				/>
+			);
+		case "work":
+			return (
+				<ProjectionFrame
+					{...options}
+					atom={api.work.query({ url }, routeQueryOptions)}
+					location={(data) => ({ file: "Work", status: data.validBoard ? 200 : 404, view: "work" })}
+					render={(data) => <WorkPage data={data} />}
+					source={(data) => (data.selected ? documentSourceId(data.selected) : undefined)}
+				/>
+			);
+		case "overview":
+			return (
+				<ProjectionFrame
+					{...options}
+					atom={api.overview.query(undefined, routeQueryOptions)}
+					location={(data) => ({ file: "Overview", status: data.complete ? 200 : 503, view: "overview" })}
+					render={(data) => <OverviewPage data={data} />}
+				/>
+			);
+		case "inbox":
+			return (
+				<ProjectionFrame
+					{...options}
+					atom={api.inbox.query(undefined, routeQueryOptions)}
+					location={(data) => ({ file: "Inbox", status: data.complete ? 200 : 503, view: "inbox" })}
+					render={(data) => <InboxPage data={data} />}
+				/>
+			);
+	}
+}

package/src/client/react/PromptOption.tsx

@@ -0,0 +1,56 @@
+import type { Document } from "#browser/document/schema.ts";
+import type { Prompt } from "#browser/responses/Prompt.ts";
+import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
+export function PromptOption({
+	document,
+	prompt,
+	option,
+	choice,
+	index,
+	checked,
+	choose,
+}: {
+	readonly document: Document;
+	readonly prompt: Prompt;
+	readonly option: Prompt["options"][number];
+	readonly choice: number;
+	readonly index: number;
+	readonly checked: boolean;
+	readonly choose: (id: string, checked: boolean) => void;
+}) {
+	const source = document.metadata.options?.[choice];
+	const id = `question-${index}-${choice}`;
+	const control = (
+		<input
+			checked={checked}
+			data-option-source={option.source}
+			hidden={Boolean(source)}
+			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}
+		/>
+	);
+	return source ? (
+		<div>
+			{control}
+			<button aria-pressed={checked} className="question-choice" data-choice={option.id} onClick={() => choose(option.id, true)} type="button">
+				<strong>
+					{source.label}
+					{source.label === document.metadata.recommended && " · Recommended"}
+				</strong>
+				<small>{source.description}</small>
+			</button>
+		</div>
+	) : (
+		<div className="question-option">
+			{control}
+			<div>
+				<label htmlFor={id}>Option {option.id}</label>
+				<ResponseMarkdown file={document.file} source={option.source} />
+			</div>
+		</div>
+	);
+}

package/src/client/react/ReadingLibrary.tsx

@@ -0,0 +1,147 @@
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import type { Navigation, NavigationFolder } from "#browser/navigation/schema.ts";
+import { fileUrl } from "#files/url.ts";
+import { Modal } from "./Modal.tsx";
+import { type Item, LibraryContext, restoreLibrary } from "./readingLibrary.ts";
+import { shellIds } from "./shellIds.ts";
+
+function paths(folder: NavigationFolder): string[] {
+	return [...folder.files.map((file) => file.path), ...folder.folders.flatMap(paths)];
+}
+export function ReadingLibrary({
+	data,
+	open,
+	close,
+	children,
+}: {
+	readonly data: Navigation | undefined;
+	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";
+			const active = document.querySelector<HTMLAnchorElement>('#files a[aria-current="page"]');
+			if (active) {
+				active.title = title;
+			}
+			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]);
+	const available = new Set(data ? [...paths(data.tree), ...data.records.files.map((file) => file.path)] : []);
+	return (
+		<LibraryContext.Provider
+			value={{
+				favorites: saved.favorites,
+				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}>
+					<LibraryList available={available} close={close} current={current} items={saved.favorites} title="Favorites" />
+					<LibraryList available={available} close={close} current={current} items={saved.recents} title="Recent documents" />
+					{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>
+	);
+}
+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>
+		</>
+	);
+}