@shivaedev/work-board 0.12.0 → 0.14.0

package/src/client/react/SystemMain.tsx

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

package/src/client/react/SystemPage.tsx

@@ -0,0 +1,89 @@
+import { type ReactNode, useContext } from "react";
+import type { Observation } from "#browser/diagnostics/schema.ts";
+import type { DiagnosticsProjection } from "#browser/views/remaining.ts";
+import { Card as Surface } from "#client/react/components/ui/Card.tsx";
+import { DiagnosticsGithub, DiagnosticsWindows, ObservedTime } from "./diagnosticsValues.tsx";
+import { FleetItemsContext } from "./FleetItemsContext.ts";
+import { SystemFleetLane } from "./SystemFleetLane.tsx";
+import { SystemHealth } from "./SystemHealth.tsx";
+export function SystemPage({ data: { sources: data, now } }: { readonly data: DiagnosticsProjection }) {
+	const items = useContext(FleetItemsContext);
+	const fleet = data.fleet.state === "ready" ? { ...data.fleet, observedAt: data.fleet.value.observedAt } : data.fleet;
+	return (
+		<div className="space-y-6">
+			<h1 className="font-semibold text-2xl">System</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="grid gap-4 lg:grid-cols-2">
+				<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) => <SystemHealth now={now} value={value} />}
+					source={fleet}
+					stale={fleet.state === "ready" && now - fleet.value.observedAt > fleet.value.staleAfterMs}
+				/>
+			</div>
+			<SystemFleetLane data={items} />
+		</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 (
+		<Surface
+			aria-labelledby={`diagnostics-${name.toLowerCase()}`}
+			className="min-w-0 space-y-4 [overflow-wrap:anywhere]"
+			data-source={name.toLowerCase()}
+			data-state={state}
+		>
+			<header className="flex flex-wrap items-center justify-between gap-2">
+				<h2 className="font-semibold text-lg" id={`diagnostics-${name.toLowerCase()}`}>
+					{name}
+				</h2>
+				<span className="rounded-full bg-muted px-2 py-1 text-xs">{label}</span>
+			</header>
+			{source.state === "ready" ? render(source.value) : <p role="status">{source.cause}</p>}
+			<p className="text-muted-foreground text-xs">
+				Observed <ObservedTime at={source.observedAt} />
+			</p>
+		</Surface>
+	);
+}

package/src/client/react/TodayGoals.tsx

@@ -0,0 +1,52 @@
+import type { GoalsProjection } from "#browser/views/GoalsProjection.ts";
+import { GoalProgress } from "./GoalProgress.tsx";
+
+export function TodayGoals({ data }: { readonly data: GoalsProjection }) {
+	return data.goals.length > 0 ? (
+		<div className="space-y-3">
+			{data.goals.map((goal) => (
+				<GoalCard goal={goal} key={goal.id} />
+			))}
+		</div>
+	) : (
+		<p className="text-muted-foreground text-sm">No active goals.</p>
+	);
+}
+function GoalCard({ goal }: { readonly goal: GoalsProjection["goals"][number] }) {
+	return (
+		<article className="today-goal rounded-lg border border-border bg-card p-3" data-goal-id={goal.id}>
+			<h3 className="m-0 font-semibold text-sm">
+				<a href={`/_board/item/${encodeURIComponent(goal.id)}/`}>{goal.title}</a>
+			</h3>
+			{goal.nextAction ? (
+				<p className="m-0 mt-1 line-clamp-2 text-muted-foreground text-xs" data-goal-next-action="" title={goal.nextAction}>
+					{goal.nextAction}
+				</p>
+			) : null}
+			<GoalProgress counts={goal.counts} title={goal.title} />
+			<details className="mt-2">
+				<summary className="cursor-pointer text-muted-foreground text-xs">Criteria</summary>
+				<ul aria-label={`Criteria for ${goal.title}`} className="m-0 mt-3 list-none space-y-2 p-0 text-sm">
+					{goal.criteria.map((criterion) => (
+						<CriterionRow criterion={criterion} goal={goal.id} key={criterion.id} />
+					))}
+				</ul>
+			</details>
+		</article>
+	);
+}
+function CriterionRow({ criterion, goal }: { readonly criterion: GoalsProjection["goals"][number]["criteria"][number]; readonly goal: string }) {
+	return (
+		<li className="flex items-start gap-2">
+			<span aria-label={criterion.evidence > 0 ? "Evidence recorded" : "No evidence recorded"} className="text-muted-foreground" role="img">
+				{criterion.evidence > 0 ? "☑" : "☐"}
+			</span>
+			<div className="min-w-0">
+				<a href={`/_board/item/${encodeURIComponent(goal)}/#criterion-${encodeURIComponent(criterion.id)}`}>{criterion.text}</a>
+				<p className="m-0 text-muted-foreground text-xs tabular-nums">
+					{criterion.linked} linked · {criterion.evidence} with evidence
+				</p>
+			</div>
+		</li>
+	);
+}

package/src/client/react/TodayNeeds.tsx

@@ -0,0 +1,54 @@
+import type { InboxProjection } from "#browser/views/schema.ts";
+import { StatusChip } from "#client/react/components/ui/StatusChip.tsx";
+import { Age } from "./Age.tsx";
+import type { ShellApi } from "./ShellApi.ts";
+import { TodayOptions } from "./TodayOptions.tsx";
+
+type Item = InboxProjection["you"][number];
+export function TodayNeeds({ api, data }: { readonly api: ShellApi; readonly data: InboxProjection }) {
+	if (!data.complete) {
+		return <p role="status">Workspace incomplete. Needs-you membership and counts are unavailable.</p>;
+	}
+	return data.you.length > 0 ? (
+		<ul aria-label="Needs you" className="m-0 list-none divide-y rounded-lg border border-border p-0">
+			{data.you.map((item) => (
+				<li className="h-12 max-h-12" data-attention-id={item.id} key={`${item.file}:${item.href}`}>
+					<TodayRow api={api} item={item} />
+				</li>
+			))}
+		</ul>
+	) : (
+		<p className="text-muted-foreground text-sm">All quiet — nothing needs you.</p>
+	);
+}
+
+function TodayRow({ api, item }: { readonly api: ShellApi; readonly item: Item }) {
+	return (
+		<div className="today-row flex h-full min-w-0 items-center gap-2 px-2" data-attention-row>
+			<StatusChip
+				aria-label="Needs you"
+				className="shrink-0 max-sm:size-6 max-sm:justify-center max-sm:gap-0 max-sm:px-1 max-sm:text-[0px] max-sm:[&_svg]:shrink-0"
+				status="needs-you"
+			/>
+			<div className="min-w-0 flex-1">
+				<div className="flex min-w-0 items-baseline gap-2">
+					<a className="truncate font-medium text-sm" href={item.href} title={item.title}>
+						{item.title}
+					</a>
+					<span className="shrink-0 font-mono text-[10px] text-muted-foreground max-sm:hidden">{item.id}</span>
+				</div>
+				<p className="m-0 truncate text-muted-foreground text-xs" title={item.problem ?? item.reason}>
+					<span className="inline-block max-w-24 truncate align-bottom font-mono text-[10px] sm:hidden" title={item.id}>
+						{item.id}
+					</span>
+					<span className="sm:hidden"> · </span>
+					{item.problem ?? item.reason}
+				</p>
+			</div>
+			<span className="shrink-0 text-[10px] text-muted-foreground tabular-nums">
+				{item.modified === undefined ? "Age ?" : <Age modified={item.modified} short />}
+			</span>
+			<TodayOptions api={api} item={item} />
+		</div>
+	);
+}

package/src/client/react/TodayOptions.tsx

@@ -0,0 +1,116 @@
+import { RegistryContext } from "@effect/atom-react";
+import { Effect, Option } from "effect";
+import * as Atom from "effect/reactivity/Atom";
+import { useContext, useMemo, useState } from "react";
+import { useAction, useQuery } from "@shivaedev/effect-react/result-state.ts";
+import type { Document, DocumentRequest } from "#browser/document/schema.ts";
+import { answerBody } from "#browser/responses/answerBody.ts";
+import { optionLabel } from "#browser/responses/cardContext.ts";
+import type { InboxProjection } from "#browser/views/schema.ts";
+import { documentQuery, navigationQuery, routeQueryOptions } from "#client/page/routeQuery.ts";
+import { Button } from "#client/react/components/ui/Button.tsx";
+import { Popover } from "#client/react/components/ui/Popover.tsx";
+import { authorLabel } from "#client/responses/authorLabel.ts";
+import { fileUrl } from "#files/url.ts";
+import { createResponse } from "./createResponse.ts";
+import type { ShellApi } from "./ShellApi.ts";
+
+export function TodayOptions({ api, item }: { readonly api: ShellApi; readonly item: InboxProjection["you"][number] }) {
+	const query = useQuery(documentQuery(api, fileUrl(item.file)), { keepPreviousData: true });
+	const data = Option.getOrUndefined(query.data);
+	const requestId = new URL(item.href, "http://127.0.0.1").searchParams.get("request");
+	const request = data?.requests.find((entry) => entry.id === requestId && entry.open);
+	return data
+		&& !item.problem
+		&& request?.preview
+		&& !request.unavailable
+		&& !request.promptUnavailable
+		&& request.prompts?.length === 1
+		&& request.prompts[0]?.mode === "one" ? (
+		<Popover label={`Answer ${item.title}`} trigger="Answer" triggerClassName="h-8 w-auto px-1 text-xs">
+			<a className="mb-3 block text-xs" href={item.href}>
+				Open full question
+			</a>
+			<InlineOptions api={api} document={data} key={request.preview.reviewedRevision} request={request} />
+		</Popover>
+	) : (
+		<a aria-label={`Answer ${item.title}`} className="shrink-0 text-xs" href={item.href}>
+			Answer
+		</a>
+	);
+}
+
+function InlineOptions({ api, document: data, request }: { readonly api: ShellApi; readonly document: Document; readonly request: DocumentRequest }) {
+	const registry = useContext(RegistryContext);
+	const [status, setStatus] = useState("");
+	const [outcome, setOutcome] = useState("");
+	const [label] = useState(() => authorLabel(() => localStorage, document.documentElement.dataset.workspace));
+	const [author, setAuthor] = useState(() => label.read("") || "maintainer");
+	const actionAtom = useMemo(
+		() =>
+			Atom.fn<string>()((choice) => {
+				const preview = request.preview;
+				const prompt = request.prompts?.[0];
+				if (!(preview && prompt && author.trim())) {
+					return Effect.fail("Add your local author label.");
+				}
+				const answers = [{ prompt: prompt.id, selected: [choice], text: "" }];
+				const submission = {
+					answers,
+					author: author.trim(),
+					body: answerBody([prompt], answers, ""),
+					id: `response.${crypto.randomUUID()}`,
+					question: preview.id,
+					revision: preview.reviewedRevision,
+					type: "answer" as const,
+				};
+				return createResponse(preview, submission, () => submission, setOutcome, setStatus).pipe(
+					Effect.tap(() =>
+						Effect.sync(() => {
+							label.save(author);
+							registry.refresh(api.inbox.query(undefined, routeQueryOptions));
+							registry.refresh(navigationQuery(api));
+							registry.refresh(documentQuery(api, fileUrl(data.file)));
+						}),
+					),
+				);
+			}),
+		[api, registry, request, author, data.file, label.save],
+	);
+	const action = useAction(actionAtom);
+	const prompt = request.prompts?.[0];
+	return (
+		<fieldset aria-label={`Options for ${data.identity}`} className="m-0 min-w-0 space-y-2 border-0 px-2 pb-2">
+			<div className="flex flex-wrap gap-2">
+				{prompt?.options.map((option, index) => {
+					const text = data.metadata.options?.[index]?.label ?? optionLabel(option.id, option.source, request.preview?.reason ?? "");
+					return (
+						<Button
+							disabled={!(data.writable && author.trim()) || action.pending || outcome === "pending" || outcome === "saved"}
+							key={option.id}
+							onClick={() => action.dispatch(option.id)}
+							size="sm"
+							variant="outline"
+						>
+							{text}
+							{data.metadata.recommended === text && " · Recommended"}
+						</Button>
+					);
+				})}
+			</div>
+			<details className="text-muted-foreground text-xs">
+				<summary className="cursor-pointer">Answer as {author || "…"}</summary>
+				<label>
+					Local author label{" "}
+					<input className="rounded border px-2 py-1" maxLength={200} onChange={(event) => setAuthor(event.currentTarget.value)} value={author} />
+				</label>
+			</details>
+			{!data.writable && <p className="m-0 text-muted-foreground text-xs">Read-only. Enable responses to record an answer.</p>}
+			{Boolean(status) && (
+				<p className="m-0 text-xs" role="status">
+					{status}
+				</p>
+			)}
+		</fieldset>
+	);
+}

package/src/client/react/TodayPage.tsx

@@ -0,0 +1,69 @@
+import { Option } from "effect";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import type { InboxProjection } from "#browser/views/schema.ts";
+import { navigationQuery, routeQueryOptions } from "#client/page/routeQuery.ts";
+import { fileUrl } from "#files/url.ts";
+import { inProgressItems } from "./inProgressItems.ts";
+import type { ShellApi } from "./ShellApi.ts";
+import { TodayGoals } from "./TodayGoals.tsx";
+import { TodayNeeds } from "./TodayNeeds.tsx";
+import { TodayProgress } from "./TodayProgress.tsx";
+
+const todayIds = { goals: "today-goals", needs: "needs-you", progress: "in-progress" };
+
+export function TodayPage({ api, data }: { readonly api: ShellApi; readonly data: InboxProjection }) {
+	const query = useQuery(api.goals.query(undefined, routeQueryOptions), { keepPreviousData: true });
+	const goals = Option.getOrUndefined(query.data);
+	const fleetQuery = useQuery(api.fleetItems.query(undefined, routeQueryOptions), { keepPreviousData: true });
+	const fleet = Option.getOrUndefined(fleetQuery.data);
+	const progress = inProgressItems(fleet);
+	const navigation = useQuery(navigationQuery(api), { keepPreviousData: true });
+	const home = Option.getOrUndefined(navigation.data)?.home;
+	return (
+		<div className="today-page min-w-0 space-y-3 md:space-y-6">
+			<header className="flex items-center justify-between gap-3">
+				<h1 className="m-0 font-semibold text-2xl">Today</h1>
+				{home !== undefined && (
+					<a className="text-sm" href={fileUrl(home.file)}>
+						Workspace notes
+					</a>
+				)}
+			</header>
+			<nav aria-label="Today summary" className="today-strip flex items-center gap-1 whitespace-nowrap text-xs tabular-nums sm:gap-2 sm:text-sm">
+				<a href={`#${todayIds.needs}`}>{data.complete ? data.you.length : "?"} need you</a>
+				<span aria-hidden="true">·</span>
+				<a href={`#${todayIds.progress}`}>{progress?.length ?? "?"} in progress</a>
+				<span aria-hidden="true">·</span>
+				<a href={`#${todayIds.goals}`}>{goals?.goals.length ?? "?"} active goals</a>
+			</nav>
+			<div className="today-grid grid min-w-0 gap-6 xl:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
+				<div className="min-w-0 space-y-6">
+					<NeedsYou api={api} data={data} />
+					<section className="min-w-0" id={todayIds.progress}>
+						<h2 className="mt-0 mb-3 font-semibold text-lg">In progress</h2>
+						<TodayProgress data={fleet} failed={Option.isSome(fleetQuery.cause)} />
+					</section>
+				</div>
+				<section className="min-w-0" id={todayIds.goals}>
+					<h2 className="mt-0 mb-3 font-semibold text-lg">Goals</h2>
+					{goals ? <TodayGoals data={goals} /> : <p role="status">{Option.isSome(query.cause) ? "Goals unavailable." : "Loading goals…"}</p>}
+					{goals && Option.isSome(query.cause) && <p role="status">Goal refresh failed. Displayed goals are retained.</p>}
+				</section>
+			</div>
+		</div>
+	);
+}
+
+function NeedsYou({ api, data }: { readonly api: ShellApi; readonly data: InboxProjection }) {
+	return (
+		<section className="min-w-0" id={todayIds.needs}>
+			<h2 className="mt-0 mb-3 font-semibold text-lg">Needs you</h2>
+			<TodayNeeds api={api} data={data} />
+			{data.complete && data.you.length === 0 && (
+				<a className="text-sm" href="/_board/start">
+					Getting started
+				</a>
+			)}
+		</section>
+	);
+}

package/src/client/react/TodayProgress.tsx

@@ -0,0 +1,58 @@
+import type { FleetItemsProjection } from "#browser/views/FleetItemsProjection.ts";
+import { Badge } from "#client/react/components/ui/Badge.tsx";
+import { inProgressItems } from "./inProgressItems.ts";
+
+export function TodayProgress({ data, failed }: { readonly data: FleetItemsProjection | undefined; readonly failed: boolean }) {
+	const items = inProgressItems(data);
+	return (
+		<div className="space-y-3">
+			{items === undefined && (
+				<p className="text-muted-foreground text-sm" role="status">
+					{unavailable(data, failed)}
+				</p>
+			)}
+			{items?.length === 0 && <p className="text-muted-foreground text-sm">Fleet holds no work in progress.</p>}
+			{items !== undefined && items.length > 0 && (
+				<ul aria-label="In progress" className="m-0 list-none divide-y rounded-lg border border-border p-0">
+					{items.slice(0, 8).map((item) => (
+						<ProgressRow item={item} key={item.workId} />
+					))}
+				</ul>
+			)}
+			{items !== undefined && failed && (
+				<p className="text-sm" role="status">
+					Fleet refresh failed. Displayed work is retained.
+				</p>
+			)}
+			<a className="inline-block text-sm" href="/_board/work">
+				All in Now →
+			</a>
+		</div>
+	);
+}
+
+function ProgressRow({ item }: { readonly item: NonNullable<ReturnType<typeof inProgressItems>>[number] }) {
+	const title = item.document?.title ?? item.workId;
+	return (
+		<li className="flex h-10 min-w-0 items-center gap-2 px-2" data-progress-id={item.workId}>
+			<a className="min-w-0 flex-1 truncate text-sm" href={`/_board/item/${encodeURIComponent(item.workId)}/`} title={title}>
+				{title}
+			</a>
+			<Badge className="shrink-0 border-agent-working/25 bg-agent-working/10 text-agent-working text-xs" variant="outline">
+				Fleet · {item.stage}
+			</Badge>
+			{item.prUrl ? (
+				<a aria-label={`Pull request for ${title}`} className="shrink-0 text-xs" href={item.prUrl}>
+					PR ↗
+				</a>
+			) : null}
+		</li>
+	);
+}
+
+function unavailable(data: FleetItemsProjection | undefined, failed: boolean) {
+	if (data?.state === "unavailable") {
+		return `Fleet unavailable. ${data.reason}`;
+	}
+	return failed ? "Fleet work unavailable." : "Loading Fleet work…";
+}

package/src/client/react/UpdatesToggle.tsx

@@ -0,0 +1,16 @@
+import { useAtomSet, useAtomValue } from "@effect/atom-react";
+import { Pause, Play } from "lucide-react";
+import type { BrowserClient } from "#client/client.ts";
+import { Button } from "#client/react/components/ui/Button.tsx";
+import { shellIds } from "./shellIds.ts";
+
+export function UpdatesToggle({ client }: { readonly client: { readonly updates: Pick<BrowserClient["updates"], "paused"> } }) {
+	const paused = useAtomValue(client.updates.paused);
+	const setPaused = useAtomSet(client.updates.paused);
+	return (
+		<Button aria-pressed={paused} id={shellIds.updatesToggle} onClick={() => setPaused((value) => !value)} type="button" variant="outline">
+			{paused ? <Play aria-hidden="true" /> : <Pause aria-hidden="true" />}
+			{paused ? "Resume updates" : "Pause updates"}
+		</Button>
+	);
+}

package/src/client/react/VisualControls.tsx

@@ -0,0 +1,59 @@
+import { shellIds } from "./shellIds.ts";
+
+interface ControlsProps {
+	readonly baseWidth: number;
+	readonly count: number;
+	readonly filename: string;
+	readonly href: string | undefined;
+	readonly image: boolean;
+	readonly onActual: () => void;
+	readonly onFit: () => void;
+	readonly onFullscreen: () => void;
+	readonly onMove: (offset: number) => void;
+	readonly onZoom: (scale: number) => void;
+	readonly scale: number;
+	readonly selected: number;
+}
+export function VisualControls({
+	selected,
+	count,
+	image,
+	scale,
+	baseWidth,
+	href,
+	filename,
+	onMove,
+	onZoom,
+	onFit,
+	onActual,
+	onFullscreen,
+}: ControlsProps) {
+	return (
+		<fieldset aria-label="Visual controls" className="visual-bar">
+			<button disabled={selected <= 0} hidden={!image} id={shellIds.visualPrevious} onClick={() => onMove(-1)} type="button">
+				Previous image
+			</button>
+			<button disabled={selected >= count - 1} hidden={!image} id={shellIds.visualNext} onClick={() => onMove(1)} type="button">
+				Next image
+			</button>
+			<button aria-label="Zoom out" id={shellIds.visualOut} onClick={() => onZoom(Math.max(25, scale / 1.5))} type="button">
+				−
+			</button>
+			<button id={shellIds.visualFit} onClick={onFit} type="button">
+				{scale === 100 && !baseWidth ? "Fit" : `${Math.round(scale)}% · Fit`}
+			</button>
+			<button aria-pressed={Boolean(baseWidth)} id={shellIds.visualActual} onClick={onActual} type="button">
+				Actual size
+			</button>
+			<button aria-label="Zoom in" id={shellIds.visualIn} onClick={() => onZoom(Math.min(800, scale * 1.5))} type="button">
+				+
+			</button>
+			<button id={shellIds.visualFullscreen} onClick={onFullscreen} type="button">
+				Fullscreen
+			</button>
+			<a aria-disabled={!href} download={filename} href={href} id={shellIds.visualDownload}>
+				Save locally
+			</a>
+		</fieldset>
+	);
+}

package/src/client/react/VisualInspection.tsx

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Modal } from "./Modal.tsx";
+import { shellIds } from "./shellIds.ts";
+import { VisualViewer } from "./VisualViewer.tsx";
+import { useVisualSources, type VisualSelection } from "./visualSources.ts";
+
+export function VisualInspection() {
+	const [selection, setSelection] = useState<VisualSelection>();
+	const originRef = useRef<HTMLElement | undefined>(undefined);
+	const inspect = useCallback((next: VisualSelection) => {
+		originRef.current = next.origin;
+		setSelection(next);
+	}, []);
+	useVisualSources(inspect);
+	const close = useCallback(() => {
+		setSelection(undefined);
+		const origin = originRef.current;
+		(origin?.isConnected ? origin : document.getElementById("doc"))?.focus();
+	}, []);
+	useEffect(() => {
+		window.addEventListener("pagehide", close);
+		return () => window.removeEventListener("pagehide", close);
+	}, [close]);
+	return (
+		<Modal
+			close={close}
+			id={shellIds.visualDialog}
+			open={selection !== undefined}
+			returnFocus={originRef.current?.isConnected ? originRef.current : (document.getElementById("doc") ?? undefined)}
+			title="visual-title"
+		>
+			{selection ? <VisualViewer close={close} key={selection.origin.dataset.localImage ?? "drawing"} selection={selection} /> : null}
+		</Modal>
+	);
+}