@shivaedev/work-board 0.12.0 → 0.13.0

package/src/client/react/activeRead.ts

@@ -0,0 +1,15 @@
+import type { Cause } from "effect";
+import * as Atom from "effect/reactivity/Atom";
+import type { BrowserClient } from "#client/client.ts";
+import { resolvedDocumentFailure } from "#client/page/resolvedDocumentFailure.ts";
+import { pageQuery } from "./pageQuery.ts";
+
+function health(value: { readonly _tag: string; readonly waiting: boolean; readonly cause?: Cause.Cause<unknown> }) {
+	return {
+		failed: value._tag === "Failure" && !(value.cause && resolvedDocumentFailure(value.cause)),
+		pending: value.waiting || value._tag === "Initial",
+	};
+}
+export function activeRead(client: BrowserClient, kind: string, url: string, baseline: string | null) {
+	return pageQuery(client.api, kind, url, baseline).pipe(Atom.map(health));
+}

package/src/client/react/createResponse.ts

@@ -0,0 +1,40 @@
+import { Effect, Equal } from "effect";
+import type { QuestionPreview } from "#browser/responses/schema.ts";
+import { session } from "#client/entry.ts";
+import { responseFailure } from "#client/responses/failure.ts";
+import type { ResponseInput, ResponseSubmission } from "#client/responses/formSchema.ts";
+
+export function createResponse(
+	source: QuestionPreview,
+	submission: ResponseSubmission,
+	current: () => ResponseInput | undefined,
+	setOutcome: (outcome: string) => void,
+	setStatus: (status: string) => void,
+) {
+	return Effect.tryPromise({
+		catch: (error) => error,
+		try: async () => {
+			const native = session(window);
+			setOutcome("pending");
+			setStatus("Pending: registering reviewed context, then recording response…");
+			try {
+				const question = await native.mutate(
+					native.responses.registerQuestion.run({ item: source.item, request: source.request, revision: submission.revision }),
+				);
+				const { answerContext: _answerContext, recovery: _recovery, ...input } = submission;
+				await native.mutate(native.responses.recordResponse.run({ ...input, question: question.id }));
+				const newer = !Equal.equals(current(), submission);
+				setOutcome("saved");
+				setStatus(
+					`Saved: responses/${submission.id}.md. This records feedback, not acceptance.${newer ? " Your current draft remains unsaved." : ""}`,
+				);
+				return submission;
+			} catch (error) {
+				const failure = responseFailure(error);
+				setOutcome(failure.outcome);
+				setStatus(failure.text);
+				throw error;
+			}
+		},
+	});
+}

package/src/client/react/diagnosticsValues.tsx

@@ -0,0 +1,103 @@
+import type { CodexLimits, GithubLimits, UsageWindow } from "#browser/diagnostics/schema.ts";
+import { resetLabel } from "#diagnostics/resetLabel.ts";
+export function ObservedTime({ at }: { readonly at: number | null }) {
+	return at === null ? (
+		"Not reported"
+	) : (
+		<time dateTime={new Date(at).toISOString()}>
+			{new Date(at)
+				.toISOString()
+				.replace("T", " ")
+				.replace(/\.\d{3}Z$/u, " UTC")}
+		</time>
+	);
+}
+function Reset({ at, now }: { readonly at: number | null; readonly now: number }) {
+	return at === null ? (
+		"Not reported"
+	) : (
+		<time data-reset dateTime={new Date(at).toISOString()}>
+			{resetLabel(at, now)}
+		</time>
+	);
+}
+function windowLabel(name: string, minutes: number | null) {
+	if (minutes === null) {
+		return `${name} — duration not reported`;
+	}
+	if (minutes === 10_080) {
+		return "Weekly";
+	}
+	for (const [duration, unit] of [
+		[1440, "day"],
+		[60, "hour"],
+	] as const) {
+		if (minutes % duration === 0) {
+			return `${minutes / duration}-${unit}`;
+		}
+	}
+	return `${minutes}-minute`;
+}
+function Usage({ name, window, now }: { readonly name: string; readonly window: UsageWindow | null; readonly now: number }) {
+	if (!window) {
+		return (
+			<li>
+				<h3>{name}</h3>
+				<p>Window not reported</p>
+			</li>
+		);
+	}
+	const label = windowLabel(name, window.windowDurationMins);
+	return (
+		<li>
+			<h3>{label}</h3>
+			<p>
+				<strong>{window.usedPercent}% used</strong>
+			</p>
+			<meter aria-label={`${label} percent used`} max={100} min={0} value={Math.min(window.usedPercent, 100)}>
+				{window.usedPercent}%
+			</meter>
+			<p>
+				Resets <Reset at={window.resetsAt === null ? null : window.resetsAt * 1000} now={now} />
+			</p>
+		</li>
+	);
+}
+export function DiagnosticsWindows({ value, now }: { readonly value: CodexLimits; readonly now: number }) {
+	return (
+		<ul className="diagnostics-windows">
+			<Usage name="Primary" now={now} window={value.primary} />
+			<Usage name="Secondary" now={now} window={value.secondary} />
+		</ul>
+	);
+}
+export function DiagnosticsGithub({ value, now }: { readonly value: GithubLimits; readonly now: number }) {
+	const windows = (
+		[
+			["REST", value.core],
+			["GraphQL", value.graphql],
+		] as const
+	).map(([name, window]) => <GithubWindow key={name} name={name} now={now} window={window} />);
+	return (
+		<>
+			<dl className="diagnostics-metrics">{windows}</dl>
+			<p className="diagnostics-freshness">Cached for one minute across all tabs.</p>
+		</>
+	);
+}
+function GithubWindow({ name, window, now }: { readonly name: string; readonly window: GithubLimits["core"]; readonly now: number }) {
+	return (
+		<div>
+			<dt>{name}</dt>
+			<dd>
+				<strong>
+					{window.remaining} / {window.limit}
+				</strong>{" "}
+				remaining
+			</dd>
+			<dd>
+				Resets <Reset at={window.reset * 1000} now={now} />
+			</dd>
+		</div>
+	);
+}

package/src/client/react/entry.css

@@ -78,3 +78,23 @@
 		@apply bg-background text-foreground;
 	}
 }
+
+.history-controls {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.6rem;
+	align-items: center;
+}
+.history-change {
+	padding: 1rem 0;
+	border-top: 1px solid var(--border);
+}
+.history-source {
+	max-height: 32rem;
+	overflow: auto;
+	overflow-wrap: anywhere;
+	white-space: pre-wrap;
+}
+.history h2 {
+	overflow-wrap: anywhere;
+}

package/src/client/react/entry.tsx

@@ -1,7 +1,7 @@
 import { RegistryContext } from "@effect/atom-react";
 import { RouterProvider } from "@tanstack/react-router";
 import { createRoot } from "react-dom/client";
-import { legacyRuntime, session } from "#client/entry.ts";
+import { session } from "#client/entry.ts";
 import { boardRouter } from "./boardRouter.ts";
 import "#client/react/entry.css";
 
@@ -10,9 +10,6 @@ const bootstrap = document.querySelector<HTMLTemplateElement>("#board-legacy-pag
 if (container && bootstrap) {
 	document.querySelector("[data-board-fallback]")?.remove();
 	const initial = bootstrap.innerHTML;
-	for (const dialog of bootstrap.content.querySelectorAll("dialog")) {
-		document.body.append(dialog.cloneNode(true));
-	}
 	bootstrap.remove();
 	const root = createRoot(container);
 	let native = session(window);
@@ -22,22 +19,11 @@ if (container && bootstrap) {
 			return;
 		}
 		started = true;
-		void legacyRuntime().then(({ connectRouter }) => {
-			connectRouter({
-				before: (listener) => {
-					router.subscribe("onBeforeNavigate", listener);
-				},
-				navigate: (url) =>
-					url === location.pathname + location.search + location.hash ? router.navigate({ state: true, to: url }) : router.navigate({ to: url }),
-				subscribe: (listener) => {
-					router.subscribe("onResolved", listener);
-				},
-			});
-			document.documentElement.dataset.boardReady = "true";
-		});
+		document.documentElement.dataset.boardReady = "true";
+		document.documentElement.dataset.js = "true";
 	}
 	const reading = history.state?.workBoard;
-	const router = boardRouter({ api: native.api, initial, ready, registry: native.registry });
+	const router = boardRouter({ api: native.api, client: native, initial, reading, ready, registry: native.registry });
 	if (reading) {
 		history.replaceState({ ...history.state, workBoard: reading }, "");
 	}
@@ -54,7 +40,8 @@ if (container && bootstrap) {
 			return;
 		}
 		native = session(window);
-		router.update({ context: { shell: { api: native.api, initial, ready, registry: native.registry } } });
+		router.update({ context: { shell: { api: native.api, client: native, initial, reading, ready, registry: native.registry } } });
+		void router.invalidate();
 		render();
 	});
 }

package/src/client/react/historyStore.ts

@@ -0,0 +1,56 @@
+const stores = new WeakMap<Document, Map<string, ReturnType<typeof createStore>>>();
+export function historyStore() {
+	const key = `work-board:changes:${document.documentElement.dataset.workspace}`;
+	let workspace = stores.get(document);
+	if (!workspace) {
+		workspace = new Map();
+		stores.set(document, workspace);
+	}
+	let store = workspace.get(key);
+	if (!store) {
+		store = createStore(key);
+		workspace.set(key, store);
+	}
+	return store;
+}
+function createStore(key: string) {
+	let memory: string | null | undefined;
+	let notice = "";
+	function read() {
+		if (memory !== undefined) {
+			return memory;
+		}
+		try {
+			return window.localStorage.getItem(key);
+		} catch {
+			memory = null;
+			notice = "Browser storage unavailable; history applies to this page only.";
+			return memory;
+		}
+	}
+	function write(raw: string | null) {
+		memory = raw;
+		try {
+			if (raw === null) {
+				window.localStorage.removeItem(key);
+			} else {
+				window.localStorage.setItem(key, raw);
+			}
+			memory = undefined;
+			notice = "";
+		} catch {
+			notice =
+				raw === null
+					? "Cleared for this page, but browser storage could not be cleared. Reload may restore older data."
+					: "Snapshot remembered for this page only; browser storage is unavailable.";
+			if (raw !== null) {
+				try {
+					window.localStorage.removeItem(key);
+				} catch {
+					notice += " Reload may restore older data.";
+				}
+			}
+		}
+	}
+	return { key, notice: () => notice, read, write };
+}

package/src/client/react/liveStatus.ts

@@ -0,0 +1,52 @@
+interface LiveState {
+	readonly connection: string;
+	readonly failed: boolean;
+	readonly navigationFailed: boolean;
+	readonly paused: boolean;
+	readonly pending: number;
+	readonly waiting: boolean;
+	readonly watching: boolean;
+}
+export function liveStatus(value: LiveState) {
+	const failure = failureText(value.failed, value.navigationFailed);
+	const state = connectionState(value, failure);
+	return {
+		state,
+		text:
+			state === "paused" ? `updates paused · ${value.pending}${value.pending === 256 ? "+" : ""} pending updates` : failure || connectionText(state),
+		title: `Connection: ${value.connection}; last observed source watcher: ${value.watching ? "watching" : "unavailable"}; ${readStatus(value, failure)}`,
+	};
+}
+function failureText(failed: boolean, navigationFailed: boolean) {
+	if (failed) {
+		return "refresh failed";
+	}
+	if (navigationFailed) {
+		return "navigation refresh failed";
+	}
+	return "";
+}
+function connectionState(value: LiveState, failure: string) {
+	if (value.paused) {
+		return "paused";
+	}
+	if (failure) {
+		return "stale";
+	}
+	if (!value.watching || value.connection !== "live") {
+		return "down";
+	}
+	return value.waiting ? "refreshing" : "live";
+}
+function connectionText(state: string) {
+	return state === "down" ? "reconnecting" : state;
+}
+function readStatus(value: LiveState, failure: string) {
+	if (value.paused) {
+		return "automatic reads paused";
+	}
+	if (value.waiting) {
+		return "reads pending";
+	}
+	return failure ? "showing retained source" : "reads settled";
+}

package/src/client/react/loadBoardPage.ts

@@ -1,10 +1,14 @@
 import type { LoaderFnContext } from "@tanstack/react-router";
 import { Predicate } from "effect";
-import type * as AtomRegistry from "effect/unstable/reactivity/AtomRegistry";
+import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
 import { loadQuery } from "@shivaedev/effect-react/router.ts";
-import { documentQuery, pageQuery } from "#client/page/routeQuery.ts";
+import { documentQuery } from "#client/page/routeQuery.ts";
 import type { ShellOptions } from "./BoardShell.tsx";
 import { documentRoute } from "./documentRoute.ts";
+import { loadProjection } from "./loadProjection.ts";
+import { loadRemaining } from "./loadRemaining.ts";
+import { projectionRoute } from "./projectionRoute.ts";
+import { remainingRoute } from "./remainingRoute.ts";
 
 export type RouterShell = ShellOptions & { readonly registry: AtomRegistry.AtomRegistry };
 
@@ -20,19 +24,25 @@ export async function loadBoardPage({
 	const url = location.pathname + location.searchStr;
 	try {
 		const navigation = await loadQuery(registry, api.navigation.query({ current: "" }), { abortController });
+		const projection = projectionRoute(location.pathname, navigation.home);
+		if (projection) {
+			await loadProjection(registry, api, projection, url, abortController);
+			return undefined;
+		}
 		if (documentRoute(location.pathname, navigation.home)) {
 			try {
 				const data = await loadQuery(registry, documentQuery(api, url), { abortController });
-				if (!data.reading?.board) {
-					return undefined;
+				if (data.reading?.board) {
+					await loadProjection(registry, api, "board", url, abortController);
 				}
+				return undefined;
 			} catch (error) {
 				if (!(location.pathname === "/" && Predicate.isTagged(error, "NotFound"))) {
 					throw error;
 				}
 			}
 		}
-		await loadQuery(registry, pageQuery(api, url), { abortController });
+		await loadRemaining(registry, api, remainingRoute(location.pathname) ?? "start", url, abortController);
 		return undefined;
 	} catch (error) {
 		if (abortController.signal.aborted) {

package/src/client/react/loadProjection.ts

@@ -0,0 +1,23 @@
+import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
+import { loadQuery } from "@shivaedev/effect-react/router.ts";
+import { routeQueryOptions } from "#client/page/routeQuery.ts";
+import type { ProjectionRoute } from "./projectionRoute.ts";
+import type { ShellApi } from "./ShellApi.ts";
+export function loadProjection(
+	registry: AtomRegistry.AtomRegistry,
+	api: ShellApi,
+	route: ProjectionRoute,
+	url: string,
+	abortController: AbortController,
+) {
+	switch (route) {
+		case "board":
+			return loadQuery(registry, api.board.query({ url }, routeQueryOptions), { abortController });
+		case "work":
+			return loadQuery(registry, api.work.query({ url }, routeQueryOptions), { abortController });
+		case "overview":
+			return loadQuery(registry, api.overview.query(undefined, routeQueryOptions), { abortController });
+		case "inbox":
+			return loadQuery(registry, api.inbox.query(undefined, routeQueryOptions), { abortController });
+	}
+}

package/src/client/react/loadRemaining.ts

@@ -0,0 +1,27 @@
+import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
+import { loadQuery } from "@shivaedev/effect-react/router.ts";
+import { routeQueryOptions } from "#client/page/routeQuery.ts";
+import type { RemainingRoute } from "./remainingRoute.ts";
+import type { ShellApi } from "./ShellApi.ts";
+export function loadRemaining(
+	registry: AtomRegistry.AtomRegistry,
+	api: ShellApi,
+	route: RemainingRoute,
+	url: string,
+	abortController: AbortController,
+) {
+	switch (route) {
+		case "changes":
+			return undefined;
+		case "start":
+			return loadQuery(registry, api.start.query(undefined, routeQueryOptions), { abortController });
+		case "diagnostics":
+			return loadQuery(registry, api.diagnostics.query(undefined, routeQueryOptions), { abortController });
+		case "respond":
+			return loadQuery(registry, api.respond.query({ url }, routeQueryOptions), { abortController });
+		case "handoff":
+			return loadQuery(registry, api.handoff.query({ url }, routeQueryOptions), { abortController });
+		case "result":
+			return loadQuery(registry, api.result.query({ url }, routeQueryOptions), { abortController });
+	}
+}

package/src/client/react/mainLocation.ts

@@ -0,0 +1,12 @@
+export interface MainLocation {
+	readonly file: string;
+	readonly view: string;
+}
+export function bootstrapPage(html: string): Document {
+	const page = new DOMParser().parseFromString(/<body[^>]*>(?<body>[\s\S]*)<\/body>/iu.exec(html)?.groups?.body ?? html, "text/html");
+	const template = page.querySelector<HTMLTemplateElement>("#board-legacy-page");
+	if (template) {
+		page.body.replaceChildren(template.content.cloneNode(true));
+	}
+	return page;
+}

package/src/client/react/navigationLocation.ts

@@ -0,0 +1,27 @@
+import { readingEntry } from "./readingHistory.ts";
+
+export function navigationFailure(status: string | undefined) {
+	const code = Number(status ?? 200);
+	if (code < 400) {
+		return "";
+	}
+	return code === 404 ? "This document is missing or was renamed." : "Could not open this document. Retry the link or reload the page.";
+}
+export function currentEntry(state: object, displayed: string, initial: ReturnType<typeof readingEntry>) {
+	const current = readingEntry(Reflect.get(state, "workBoard"));
+	return current ?? (displayed === "" ? initial : undefined);
+}
+
+export function readingKey(key: string, entry: { readonly id: string } | undefined, aliases: Map<string, string>) {
+	if (entry) {
+		aliases.set(key, entry.id);
+	}
+	return aliases.get(key) ?? key;
+}
+
+export function sameReadingLocation(
+	previous: { readonly route: string; readonly id: string; readonly hash: string },
+	next: { readonly route: string; readonly id: string; readonly hash: string },
+) {
+	return previous.route === next.route && previous.id === next.id && previous.hash === next.hash;
+}

package/src/client/react/pageQuery.ts

@@ -0,0 +1,38 @@
+import type * as AsyncResult from "effect/reactivity/AsyncResult";
+import type * as Atom from "effect/reactivity/Atom";
+import { routeQueryOptions } from "#client/page/routeQuery.ts";
+import type { ShellApi } from "./ShellApi.ts";
+
+export function pageQuery(api: ShellApi, kind: string, url: string, baseline: string | null): Atom.Atom<AsyncResult.AsyncResult<unknown, unknown>> {
+	if (kind === "changes") {
+		return api.history.query({ action: "compare", baseline });
+	}
+	if (kind === "overview") {
+		return api.overview.query(undefined, routeQueryOptions);
+	}
+	if (kind === "inbox") {
+		return api.inbox.query(undefined, routeQueryOptions);
+	}
+	if (kind === "start") {
+		return api.start.query(undefined, routeQueryOptions);
+	}
+	if (kind === "diagnostics") {
+		return api.diagnostics.query(undefined, routeQueryOptions);
+	}
+	if (kind === "work") {
+		return api.work.query({ url }, routeQueryOptions);
+	}
+	if (kind === "board") {
+		return api.board.query({ url }, routeQueryOptions);
+	}
+	if (kind === "respond") {
+		return api.respond.query({ url }, routeQueryOptions);
+	}
+	if (kind === "handoff") {
+		return api.handoff.query({ url }, routeQueryOptions);
+	}
+	if (kind === "result") {
+		return api.result.query({ url }, routeQueryOptions);
+	}
+	return api.document.query({ url }, routeQueryOptions);
+}

package/src/client/react/projectionChanges.ts

@@ -0,0 +1,21 @@
+import { matches } from "#client/reconcile/matches.ts";
+import { flash, normalized } from "#client/reconcile/normalized.ts";
+export interface RenderedProjection {
+	readonly signatures: readonly string[];
+	readonly url: string;
+}
+export function projectionChanges(main: HTMLElement, previous: RenderedProjection | undefined, url: string): RenderedProjection {
+	const blocks = [...main.querySelectorAll("article.doc :is(p,li,pre,blockquote,h1,h2,h3,h4,h5,h6), .work-card :is(p,h3)")].filter(
+		(element) => !(element.matches("[data-modified]") || element.querySelector("[data-modified]")),
+	);
+	const signatures = blocks.map(normalized);
+	if (previous?.url === url) {
+		const kept = new Set(matches(previous.signatures, signatures).map(([, index]) => index));
+		for (const [index, element] of blocks.entries()) {
+			if (!kept.has(index)) {
+				flash(element);
+			}
+		}
+	}
+	return { signatures, url };
+}

package/src/client/react/projectionRoute.ts

@@ -0,0 +1,21 @@
+import type { Navigation } from "#browser/navigation/schema.ts";
+import { fileUrl } from "#files/url.ts";
+export function projectionRoute(pathname: string, home: Navigation["home"]) {
+	if (pathname === "/_board/work") {
+		return "work";
+	}
+	if (pathname === "/_board/overview") {
+		return "overview";
+	}
+	if (pathname === "/_board/inbox") {
+		return "inbox";
+	}
+	if (
+		home
+		&& (pathname === "/" || pathname === fileUrl(home.file) || (home.identity && pathname === `/_board/item/${encodeURIComponent(home.identity)}/`))
+	) {
+		return "board";
+	}
+	return undefined;
+}
+export type ProjectionRoute = NonNullable<ReturnType<typeof projectionRoute>>;

package/src/client/react/readerLink.ts

@@ -0,0 +1,9 @@
+export function readerLink(target: URL) {
+	return (
+		target.origin === location.origin
+		&& (target.pathname === "/"
+			|| /^\/_board\/(?:diagnostics|handoff|result|respond|start|changes|inbox|overview|work)$/u.test(target.pathname)
+			|| target.pathname.startsWith("/_board/item/")
+			|| /\.md$/iu.test(target.pathname))
+	);
+}

package/src/client/react/readingHistory.ts

@@ -0,0 +1,31 @@
+import { Option, Schema } from "effect";
+import { ReadingState } from "./readingState.ts";
+
+const Entries = Schema.Record(Schema.String, ReadingState);
+const Entry = Schema.Struct({ id: Schema.String, reading: Schema.optional(Schema.NullOr(ReadingState)) });
+export function readingEntry(value: unknown) {
+	return Option.getOrUndefined(Schema.decodeUnknownOption(Entry)(value));
+}
+export function readingHistory() {
+	const key = `work-board:reading:${document.documentElement.dataset.workspace}`;
+	let entries: Record<string, ReadingState>;
+	try {
+		entries = Option.getOrElse(Schema.decodeUnknownOption(Entries)(JSON.parse(sessionStorage.getItem(key) ?? "{}")), () => ({}));
+	} catch {
+		entries = {};
+	}
+	return {
+		get: (id: string) => entries[id],
+		save: (id: string, reading: ReadingState) => {
+			delete entries[id];
+			entries[id] = reading;
+			entries = Object.fromEntries(Object.entries(entries).slice(-30));
+			try {
+				sessionStorage.setItem(key, JSON.stringify(entries));
+				return true;
+			} catch {
+				return false;
+			}
+		},
+	};
+}

package/src/client/react/readingLibrary.ts

@@ -0,0 +1,22 @@
+import { Option, Schema } from "effect";
+import { createContext } from "react";
+
+const Item = Schema.Struct({ file: Schema.NonEmptyString, title: Schema.String });
+export type Item = typeof Item.Type;
+const Saved = Schema.Struct({ favorites: Schema.optional(Schema.Unknown), recents: Schema.optional(Schema.Unknown) });
+function valid(value: unknown): Item[] {
+	return Array.isArray(value) ? value.flatMap((entry) => Option.toArray(Schema.decodeUnknownOption(Item)(entry))) : [];
+}
+export function restoreLibrary(key: string) {
+	try {
+		const saved = Option.getOrUndefined(Schema.decodeUnknownOption(Saved)(JSON.parse(localStorage.getItem(key) ?? "{}")));
+		return { favorites: valid(saved?.favorites), notice: "", recents: valid(saved?.recents) };
+	} catch {
+		return { favorites: [], notice: "Reading history applies to this page only.", recents: [] };
+	}
+}
+interface LibraryState {
+	readonly favorites: readonly Item[];
+	readonly toggle: (file: string, title: string) => void;
+}
+export const LibraryContext = createContext<LibraryState>({ favorites: [], toggle: () => undefined });