@shivaedev/work-board 0.12.0 → 0.13.0

package/src/client/react/RemainingMain.tsx

@@ -0,0 +1,66 @@
+import { routeQueryOptions } from "#client/page/routeQuery.ts";
+import { ChangesMain } from "./ChangesMain.tsx";
+import { DiagnosticsMain } from "./DiagnosticsMain.tsx";
+import { HandoffPage } from "./HandoffPage.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";
+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 "changes":
+			return <ChangesMain api={api} onPage={onPage} url={url} />;
+		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 "diagnostics":
+			return <DiagnosticsMain 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,41 @@
+import type { RespondProjection } from "#browser/views/remaining.ts";
+import { fileUrl } from "#files/url.ts";
+import { AnswerForm } from "./AnswerForm.tsx";
+import { ResponseHistory } from "./ResponseHistory.tsx";
+import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
+export function RespondPage({ data: { document: data, request } }: { readonly data: RespondProjection }) {
+	const preview = request.preview;
+	if (!preview) {
+		return <p role="status">Response unavailable</p>;
+	}
+	const standalone = data.metadata.kind === "question";
+	return (
+		<section className="response-panel">
+			<h1>{standalone ? "Answer this question" : `Respond to ${preview.item} / ${preview.request}`}</h1>
+			<p>{preview.reason}</p>
+			<p>
+				<a href={fileUrl(preview.source)}>Source: {preview.source}</a> · Reviewed SHA-256: <code>{preview.reviewedRevision}</code>
+			</p>
+			<p>
+				{standalone
+					? "An answer removes this question from the Inbox for this source revision."
+					: "Saved replies are authored feedback. They do not close the request or establish acceptance."}
+			</p>
+			{!standalone && (
+				<section className="response-context">
+					<ResponseMarkdown file={data.file} source={data.source} />
+				</section>
+			)}
+			<details>
+				<summary>Exact source being reviewed</summary>
+				<pre>{preview.context}</pre>
+			</details>
+			{request.unavailable || request.promptUnavailable ? (
+				<p role="status">{request.unavailable ?? request.promptUnavailable}</p>
+			) : (
+				<AnswerForm document={data} preview={preview} request={request} />
+			)}
+			{!request.unavailable && <ResponseHistory request={request} />}
+		</section>
+	);
+}

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,78 @@
+import { Fragment } 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>Criteria and this result’s claims</h2>
+			<p>
+				Only explicit relationships and criterion references are associated. Missing provenance stays missing. Git revisions are authored records;
+				Work Board does not compare them with the current checkout. Evidence freshness is unknown.
+			</p>
+			{targets.length > 0 ? <ul>{targets}</ul> : <p>No explicitly linked work or criteria.</p>}
+			<p>{data.document.file} does not change the linked work’s status.</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 ? (
+				<>
+					<span> · source status: {target.status ?? "Not recorded"}</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 = <p>No recorded evidence in this result naming this criterion. Acceptance is not established.</p>;
+	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>{criterion.claims.length} recorded claim(s) in this result; not verified acceptance.</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 ?? "Not recorded"}</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,50 @@
+import type { ResultProjection } from "#browser/views/ResultProjection.ts";
+import { fileUrl } from "#files/url.ts";
+import { DocumentMetadata } from "./DocumentMetadata.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 (
+		<section className="response-panel">
+			<h1>Review returned result · {document.identity}</h1>
+			<p>
+				Result status (source): <b>{document.metadata.status ?? "Not recorded"}</b>. This is a supplied claim, not an execution receipt or work
+				acceptance.
+			</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} />
+		</section>
+	);
+}

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>
+	);
+}

package/src/client/react/SearchDialog.tsx

@@ -0,0 +1,136 @@
+import { Option } from "effect";
+import { useEffect, useRef, useState } from "react";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { Modal } from "#client/react/Modal.tsx";
+import { SearchResults } from "#client/react/SearchResults.tsx";
+import type { ShellApi } from "#client/react/ShellApi.ts";
+import { type SearchItem, searchCommands } from "#client/react/searchCommands.ts";
+import { searchStatus } from "#client/react/searchStatus.ts";
+import { shellIds } from "#client/react/shellIds.ts";
+import type { AppearanceControls } from "#client/react/useAppearance.ts";
+
+export function SearchDialog({
+	api,
+	open,
+	close,
+	appearance,
+	toggleSidebar,
+	returnFocus,
+}: {
+	readonly api: ShellApi;
+	readonly open: boolean;
+	readonly close: () => void;
+	readonly appearance: AppearanceControls;
+	readonly toggleSidebar: () => void;
+	readonly returnFocus?: HTMLElement | undefined;
+}) {
+	const [input, setInput] = useState("");
+	return (
+		<Modal close={close} focus="search-query" id={shellIds.searchDialog} open={open} returnFocus={returnFocus} title="search-title">
+			<div className="search-header">
+				<h2 id={shellIds.searchTitle}>Find work</h2>
+				<button aria-label="Close search" id={shellIds.searchClose} onClick={() => close()} type="button">
+					Close
+				</button>
+			</div>
+			{open ? <Search api={api} appearance={appearance} close={close} input={input} setInput={setInput} toggleSidebar={toggleSidebar} /> : null}
+		</Modal>
+	);
+}
+function Search({
+	api,
+	close,
+	appearance,
+	toggleSidebar,
+	input,
+	setInput,
+}: {
+	readonly api: ShellApi;
+	readonly close: () => void;
+	readonly appearance: AppearanceControls;
+	readonly toggleSidebar: () => void;
+	readonly input: string;
+	readonly setInput: (input: string) => void;
+}) {
+	const [text, setText] = useState(() => input.trim());
+	const [selected, setSelected] = useState(0);
+	const ref = useRef<HTMLInputElement>(null);
+	const query = useQuery(api.search.query({ query: text }));
+	const data = Option.getOrUndefined(query.data);
+	const commands = searchCommands.filter((item) => item.title.toLowerCase().includes(text.toLowerCase()));
+	const editing = input.trim() !== text;
+	const items = editing ? [] : [...commands, ...(text && data ? data.results : [])];
+	useEffect(() => {
+		setSelected((current) => Math.min(current, Math.max(0, items.length - 1)));
+	}, [items.length]);
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setText(input.trim());
+			setSelected(0);
+		}, 150);
+		return () => clearTimeout(timer);
+	}, [input]);
+	useEffect(() => {
+		document.getElementById(`search-result-${selected}`)?.scrollIntoView({ block: "nearest" });
+	}, [selected]);
+	function activate(item: SearchItem) {
+		if (item.command === "sidebar-toggle") {
+			toggleSidebar();
+		}
+		if (item.command === "density") {
+			appearance.change({ density: appearance.density === "compact" ? "comfortable" : "compact" });
+		}
+		if (item.command === "theme") {
+			appearance.change({ theme: appearance.theme === "dark" ? "light" : "dark" });
+		}
+		if (!item.command) {
+			ref.current?.closest("dialog")?.close("navigate");
+		}
+		close();
+	}
+	const status = searchStatus(text, query.pending || editing, Option.isSome(query.cause), data);
+	return (
+		<>
+			<form
+				id={shellIds.searchForm}
+				onSubmit={(event) => {
+					event.preventDefault();
+					setText(input.trim());
+					query.refresh();
+				}}
+			>
+				<label htmlFor="search-query">Search documents, headings, and passages</label>
+				<input
+					aria-activedescendant={items[selected] ? `search-result-${selected}` : undefined}
+					aria-autocomplete="list"
+					aria-controls="search-results"
+					aria-expanded="true"
+					autoComplete="off"
+					id={shellIds.searchQuery}
+					maxLength={200}
+					onInput={(event) => setInput(event.currentTarget.value)}
+					onKeyDown={(event) => {
+						if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+							event.preventDefault();
+							setSelected((current) => (items.length > 0 ? (current + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length : 0));
+						}
+						if (event.key === "Enter" && items[selected]) {
+							event.preventDefault();
+							document.getElementById(`search-result-${selected}`)?.click();
+						}
+					}}
+					ref={ref}
+					role="combobox"
+					type="search"
+					value={input}
+				/>
+				<button type="submit">Search</button>
+			</form>
+			<p className="search-help">Ctrl/Cmd+K to open · ↑/↓ to choose · Enter to open · Escape to close</p>
+			<p id={shellIds.searchStatus} role="status">
+				{status}
+			</p>
+			<SearchResults activate={activate} items={items} selected={selected} />
+		</>
+	);
+}

package/src/client/react/SearchResults.tsx

@@ -0,0 +1,48 @@
+import type { SearchItem } from "./searchCommands.ts";
+import { shellIds } from "./shellIds.ts";
+export function SearchResults({
+	items,
+	selected,
+	activate,
+}: {
+	readonly items: readonly SearchItem[];
+	readonly selected: number;
+	readonly activate: (item: SearchItem) => void;
+}) {
+	const occurrences = new Map<string, number>();
+	function resultKey(item: SearchItem) {
+		const identity = JSON.stringify([item.command, item.href, item.file, item.kind, item.line, item.snippet, item.title]);
+		const occurrence = occurrences.get(identity) ?? 0;
+		occurrences.set(identity, occurrence + 1);
+		return `${identity}:${occurrence}`;
+	}
+	function choose(event: React.MouseEvent<HTMLAnchorElement>, item: SearchItem) {
+		if (item.command) {
+			event.preventDefault();
+		}
+		activate(item);
+	}
+	return (
+		<div aria-label="Search results" id={shellIds.searchResults} role="listbox">
+			{items.map((item, index) => (
+				<div key={resultKey(item)} role="presentation">
+					<a
+						aria-selected={index === selected}
+						data-command={item.command}
+						href={item.href ?? "#"}
+						id={`search-result-${index}`}
+						onClick={(event) => choose(event, item)}
+						role="option"
+					>
+						<strong>{item.title}</strong>
+						<small>
+							{item.kind}
+							{item.file ? ` · ${item.file}${item.line ? `:${item.line}` : ""}` : ""}
+						</small>
+						{Boolean(item.snippet) && <p>{item.snippet}</p>}
+					</a>
+				</div>
+			))}
+		</div>
+	);
+}

package/src/client/react/ShellApi.ts

@@ -1,6 +1,16 @@
 import type { BrowserClient } from "#client/client.ts";
 export interface ShellApi {
+	readonly board: Pick<BrowserClient["api"]["board"], "query">;
+	readonly diagnostics: Pick<BrowserClient["api"]["diagnostics"], "query">;
 	readonly document: Pick<BrowserClient["api"]["document"], "query">;
+	readonly handoff: Pick<BrowserClient["api"]["handoff"], "query">;
+	readonly history: Pick<BrowserClient["api"]["history"], "query">;
+	readonly inbox: Pick<BrowserClient["api"]["inbox"], "query">;
 	readonly navigation: Pick<BrowserClient["api"]["navigation"], "query">;
-	readonly page: Pick<BrowserClient["api"]["page"], "query">;
+	readonly overview: Pick<BrowserClient["api"]["overview"], "query">;
+	readonly respond: Pick<BrowserClient["api"]["respond"], "query">;
+	readonly result: Pick<BrowserClient["api"]["result"], "query">;
+	readonly search: Pick<BrowserClient["api"]["search"], "query">;
+	readonly start: Pick<BrowserClient["api"]["start"], "query">;
+	readonly work: Pick<BrowserClient["api"]["work"], "query">;
 }