@shivaedev/work-board 0.4.0 → 0.5.0

package/dist/rpc/server.js

@@ -0,0 +1,32 @@
+import { Clock, Effect, Layer, Ref } from "effect";
+import { HttpIncomingMessage, HttpServerResponse } from "effect/unstable/http";
+import { RpcSerialization, RpcServer } from "effect/unstable/rpc";
+import { MAX_BYTES } from "#history/limits.ts";
+import { historyResponse } from "#history/response.ts";
+import { HEADERS } from "#http/respond.ts";
+import { navHtml } from "#page/nav.ts";
+import { searchMatch } from "#search/match.ts";
+import { ReadFailed, workRpcs } from "./contract.js";
+import { hints } from "./hints.js";
+export const server = Effect.fn("WorkBoard.server")(function* ({ changes, home, index, page }) {
+    const handlers = workRpcs.toLayer({
+        "work-board.history": ({ action, baseline }) => Effect.gen(function* () {
+            const now = yield* Clock.currentTimeMillis;
+            const snapshot = action === "check" ? undefined : yield* index;
+            return historyResponse(baseline, now, snapshot);
+        }).pipe(Effect.catch(() => Effect.fail(new ReadFailed({ operation: "history", status: 500 })))),
+        "work-board.navigation": () => Effect.map(changes.files, (files) => navHtml(files, "", home)).pipe(Effect.catch(() => Effect.fail(new ReadFailed({ operation: "navigation", status: 500 })))),
+        "work-board.page": ({ url }) => page(url).pipe(Effect.flatMap((response) => {
+            if (response.status >= 500 || response.body._tag !== "Uint8Array") {
+                return Effect.fail(new ReadFailed({ operation: "page", status: response.status }));
+            }
+            return Effect.succeed({ html: new TextDecoder().decode(response.body.body), status: response.status });
+        }), Effect.catch((error) => Effect.fail(error instanceof ReadFailed ? error : new ReadFailed({ operation: "page", status: 500 })))),
+        "work-board.search": ({ query }) => Effect.map(index, (snapshot) => ({ ...searchMatch(snapshot.entries, query), unavailable: snapshot.unavailable })).pipe(Effect.catch(() => Effect.fail(new ReadFailed({ operation: "search", status: 500 })))),
+        "work-board.subscribe": () => hints(changes, index),
+        "work-board.watcher": () => Effect.map(Ref.get(changes.watching), (watching) => ({ watching })),
+    });
+    const handler = yield* RpcServer.toHttpEffect(workRpcs).pipe(Effect.provide(Layer.merge(handlers, RpcSerialization.layerNdjson)));
+    return handler.pipe(Effect.provideService(HttpIncomingMessage.MaxBodySize, BigInt(4 * MAX_BYTES + 4096)), Effect.map((response) => HttpServerResponse.setHeaders(response, HEADERS)));
+});
+//# sourceMappingURL=server.js.map

package/dist/rpc/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../../src/rpc/server.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shivaedev/work-board",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Serve a folder of markdown files as a live local page that updates in place when a file changes",
   "homepage": "https://github.com/ShivaeDev/platform/tree/main/packages/work-board#readme",
   "bugs": {
@@ -37,6 +37,7 @@
   "files": [
     "dist",
     "src",
+    "assets",
     "!src/**/*.test.ts",
     "!src/**/*.spec.ts",
     "!src/**/test-support",
@@ -44,6 +45,7 @@
     "README.md"
   ],
   "dependencies": {
+    "@shivaedev/effect-contract": "0.4.0",
     "mermaid": "11.16.1",
     "satteri": "0.9.5",
     "shiki": "4.4.2",
@@ -52,12 +54,13 @@
   "devDependencies": {
     "@effect/platform-node": "4.0.0-rc.112",
     "@effect/platform-node-shared": "4.0.0-rc.112",
-    "@shivaedev/quality": "0.14.0",
+    "@shivaedev/quality": "0.16.0",
     "@types/hast": "3.0.5",
     "@types/mdast": "4.0.4",
     "@types/node": "24.10.1",
     "@typescript/native": "npm:typescript@7.0.2",
     "effect": "4.0.0-rc.112",
+    "esbuild": "0.28.1",
     "happy-dom": "20.11.2",
     "typescript": "npm:@typescript/typescript6@6.0.2",
     "vitest": "4.1.11"
@@ -75,9 +78,11 @@
     "provenance": true
   },
   "scripts": {
-    "build": "node --eval \"import('node:fs').then(({ rmSync }) => rmSync('dist', { force: true, recursive: true }))\" && tsc6 --project tsconfig.build.json",
+    "build": "node --eval \"import('node:fs').then(({ rmSync }) => rmSync('dist', { force: true, recursive: true }))\" && tsc6 --project tsconfig.build.json && pnpm build:browser",
+    "build:browser": "esbuild src/browser/session.ts --bundle --platform=browser --format=esm --conditions=source --minify --outfile=assets/native.js",
     "ready": "pnpm typecheck && pnpm test && pnpm build",
-    "test": "vitest run",
+    "test": "pnpm test:prepare && vitest run",
+    "test:prepare": "pnpm build:browser",
     "typecheck": "tsc --noEmit"
   }
 }

package/src/board.ts

@@ -1,8 +1,8 @@
-import { Effect, type FileSystem, Layer, type Path, type PlatformError } from "effect";
-import { HttpRouter, type HttpServerRequest, type HttpServerResponse } from "effect/unstable/http";
+import { Context, Effect, FileSystem, Layer, Path, type PlatformError, type Scope } from "effect";
+import { HttpRouter, HttpServerRequest, type HttpServerResponse } from "effect/unstable/http";
 import { watchChanges } from "#files/changes.ts";
 import { type HomeMissing, homeIn } from "#files/home.ts";
-import { ASSETS, MERMAID_ROUTE, type MermaidMissing, mermaidFile, mermaidRoot } from "#http/assets.ts";
+import { ASSETS, MERMAID_ROUTE, type MermaidMissing, mermaidFile, mermaidRoot, NATIVE_ROUTE, nativeAsset } from "#http/assets.ts";
 import { events } from "#http/events.ts";
 import { changesPage, history } from "#http/history.ts";
 import { identity } from "#http/identity.ts";
@@ -10,10 +10,12 @@ import { loopbackOnly } from "#http/loopback.ts";
 import { overview } from "#http/overview.ts";
 import { page } from "#http/page.ts";
 import { respond } from "#http/respond.ts";
+import { sameOrigin } from "#http/sameOrigin.ts";
 import { search } from "#http/search.ts";
 import { work } from "#http/work.ts";
 import type { RenderFailed } from "#render/failed.ts";
 import { Highlighter } from "#render/highlighter.ts";
+import { server } from "#rpc/server.ts";
 import { searchSnapshot } from "#search/snapshot.ts";
 
 export interface BoardOptions {
@@ -22,7 +24,7 @@ export interface BoardOptions {
 }
 
 type Services = Highlighter | FileSystem.FileSystem | Path.Path;
-type Handler<E> = (request: HttpServerRequest.HttpServerRequest) => Effect.Effect<HttpServerResponse.HttpServerResponse, E, Services>;
+type Handler<E> = (request: HttpServerRequest.HttpServerRequest) => Effect.Effect<HttpServerResponse.HttpServerResponse, E, Services | Scope.Scope>;
 
 const routes = (options: BoardOptions) =>
 	HttpRouter.use((router) =>
@@ -30,7 +32,7 @@ const routes = (options: BoardOptions) =>
 			const home = yield* homeIn(options.root, options.home);
 			const mermaid = yield* mermaidRoot();
 			const changes = yield* watchChanges(options.root);
-			const context = yield* Effect.context<Services>();
+			const context = (yield* Effect.context<Services>()).pipe(Context.pick(Highlighter, FileSystem.FileSystem, Path.Path));
 			const serve = <E>(route: HttpRouter.PathInput, handler: Handler<E>, method: "GET" | "POST" = "GET") =>
 				router.add(
 					method,
@@ -40,16 +42,49 @@ const routes = (options: BoardOptions) =>
 			yield* serve("/events", events(changes));
 			const index = yield* searchSnapshot(options.root, home, changes);
 			yield* serve("/_board/search", search(index));
-			yield* serve("/_board/work", work(index, changes, home));
-			yield* serve("/_board/overview", overview(index, changes, home));
-			yield* serve("/_board/changes", changesPage(changes, home));
+			const workPage = work(index, changes, home);
+			const overviewPage = overview(index, changes, home);
+			const historyPage = changesPage(changes, home);
+			yield* serve("/_board/work", workPage);
+			yield* serve("/_board/overview", overviewPage);
+			yield* serve("/_board/changes", historyPage);
 			yield* serve("/_board/history", history(index), "POST");
 			for (const [route, body, contentType] of ASSETS) {
 				yield* serve(route, () => Effect.succeed(respond(body, contentType)));
 			}
 			yield* serve(MERMAID_ROUTE, mermaidFile(mermaid));
+			yield* serve(NATIVE_ROUTE, nativeAsset);
 			const pages = page({ home, root: options.root }, changes, index);
-			yield* serve("/_board/item/*", identity(index, pages, changes, home));
+			const items = identity(index, pages, changes, home);
+			yield* serve("/_board/item/*", items);
+			function readPage(url: string) {
+				const request = HttpServerRequest.fromWeb(new Request(`http://127.0.0.1${url}`));
+				const pathname = new URL(url, "http://127.0.0.1").pathname;
+				let selected: ReturnType<typeof pages>;
+				switch (pathname) {
+					case "/_board/work":
+						selected = workPage(request);
+						break;
+					case "/_board/overview":
+						selected = overviewPage();
+						break;
+					case "/_board/changes":
+						selected = historyPage();
+						break;
+					default:
+						selected = pathname.startsWith("/_board/item/") ? items(request) : pages(request);
+				}
+				return Effect.provideContext(selected, context);
+			}
+			const rpc = yield* server({ changes, home, index: Effect.provideContext(index, context), page: readPage });
+			yield* serve(
+				"/_board/rpc",
+				(request) =>
+					sameOrigin(request)
+						? rpc.pipe(Effect.provideService(HttpServerRequest.HttpServerRequest, request))
+						: Effect.succeed(respond("Local same-origin requests only", "text/plain", 403)),
+				"POST",
+			);
 			yield* serve("/", pages);
 			yield* serve("/*", pages);
 		}),

package/src/browser/client.ts

@@ -0,0 +1,59 @@
+import { Effect, Layer, Stream } from "effect";
+import { FetchHttpClient } from "effect/unstable/http";
+import type * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
+import type * as Atom from "effect/unstable/reactivity/Atom";
+import * as AtomRegistry from "effect/unstable/reactivity/AtomRegistry";
+import * as AtomRpc from "effect/unstable/reactivity/AtomRpc";
+import { RpcClient, RpcSerialization } from "effect/unstable/rpc";
+import { bind } from "@shivaedev/effect-contract/bind.ts";
+import { live } from "@shivaedev/effect-contract/live.ts";
+import { type ResumeOptions, resumeSignal } from "@shivaedev/effect-contract/resume.ts";
+import { workContract, workRpcs } from "#rpc/contract.ts";
+import { workspace } from "#rpc/keys.ts";
+
+export interface Reader {
+	readonly reader: unique symbol;
+}
+
+export function browserClient(url: string, options: ResumeOptions = {}) {
+	class Client extends AtomRpc.Service<Reader>()("WorkBoard/Reader", {
+		group: workRpcs,
+		protocol: RpcClient.layerProtocolHttp({ url: `${url}/_board/rpc` }).pipe(Layer.provide([FetchHttpClient.layer, RpcSerialization.layerNdjson])),
+	}) {}
+	const api = bind(workContract, Client);
+	const registry = AtomRegistry.make({ "defaultIdleTTL": 0, timeoutResolution: 1 });
+	const updates = live(Client.runtime, {
+		resume: resumeSignal(options),
+		resyncKeys: [workspace.list],
+		stream: Stream.unwrap(Client.use((client) => Effect.succeed(client("work-board.subscribe", undefined)))),
+	});
+	registry.mount(updates.connection);
+	async function read<A, E>(atom: Atom.Atom<AsyncResult.AsyncResult<A, E>>, signal?: AbortSignal) {
+		try {
+			return await Effect.runPromise(AtomRegistry.getResult(registry, atom, { suspendOnWaiting: true }), { signal });
+		} catch (error) {
+			if (signal?.aborted) {
+				const canceled = new Error("Reading canceled", { cause: error });
+				canceled.name = "AbortError";
+				throw canceled;
+			}
+			throw error;
+		}
+	}
+	async function run<A, E>(effect: Effect.Effect<A, E, Reader>, signal?: AbortSignal) {
+		try {
+			return await Effect.runPromise(
+				Effect.flatMap(AtomRegistry.getResult(registry, Client.runtime), (context) => Effect.provideContext(effect, context)),
+				{ signal },
+			);
+		} catch (error) {
+			if (signal?.aborted) {
+				const canceled = new Error("Reading canceled", { cause: error });
+				canceled.name = "AbortError";
+				throw canceled;
+			}
+			throw error;
+		}
+	}
+	return { api, read, registry, run, updates };
+}

package/src/browser/session.ts

@@ -0,0 +1,26 @@
+import type { ResumeWindow } from "@shivaedev/effect-contract/resume.ts";
+import { browserClient } from "./client.ts";
+
+type BrowserEnvironment = ResumeWindow & {
+	readonly location: { readonly origin: string };
+	readonly addEventListener: (type: "pagehide", listener: () => void) => void;
+	readonly removeEventListener: (type: "pagehide", listener: () => void) => void;
+};
+const sessions = new WeakMap<BrowserEnvironment, ReturnType<typeof browserClient>>();
+export function session(environment: BrowserEnvironment) {
+	let client = sessions.get(environment);
+	if (client === undefined) {
+		client = browserClient(environment.location.origin, { window: environment });
+		sessions.set(environment, client);
+		const owned = client;
+		function dispose() {
+			owned.registry.dispose();
+			if (sessions.get(environment) === owned) {
+				sessions.delete(environment);
+			}
+			environment.removeEventListener("pagehide", dispose);
+		}
+		environment.addEventListener("pagehide", dispose);
+	}
+	return client;
+}

package/src/cli.ts

@@ -4,7 +4,7 @@ import { Effect, Layer, Option, Path } from "effect";
 import { Argument, Command, Flag } from "effect/unstable/cli";
 import { HOST, serveBoard } from "./serve.ts";
 
-const VERSION = "0.4.0";
+const VERSION = "0.5.0";
 
 const serve = Effect.fn("WorkBoard.serve")(function* (input: { readonly dir: string; readonly port: number; readonly home: Option.Option<string> }) {
 	const path = yield* Path.Path;

package/src/files/changes.ts

@@ -2,13 +2,16 @@ import { Deferred, Effect, FileSystem, Option, Path, type PlatformError, PubSub,
 import { listMarkdown, type MarkdownFile } from "./list.ts";
 import { watchDirectories } from "./watchDirectories.ts";
 
-export type Change = { readonly _tag: "Changed"; readonly paths: readonly string[] } | { readonly _tag: "Watching"; readonly watching: boolean };
+export type Change = ({ readonly _tag: "Changed"; readonly paths: readonly string[] } | { readonly _tag: "Watching"; readonly watching: boolean }) & {
+	readonly sequence?: number;
+};
 
 export interface Changes {
 	readonly events: PubSub.PubSub<Change>;
 	readonly files: Effect.Effect<readonly MarkdownFile[], PlatformError.PlatformError>;
 	readonly realRoot: string;
 	readonly revision: Effect.Effect<number>;
+	readonly sequence?: Effect.Effect<number>;
 	readonly watching: Ref.Ref<boolean>;
 }
 
@@ -27,17 +30,24 @@ export const watchChanges = Effect.fn("WorkBoard.watchChanges")(function* (root:
 	const events = yield* Effect.acquireRelease(PubSub.sliding<Change>(BACKLOG), PubSub.shutdown);
 	const watching = yield* Ref.make(false);
 	const generation = yield* Ref.make(0);
+	const sequence = yield* Ref.make(0);
+	function publish(change: Change) {
+		return Effect.flatMap(
+			Ref.updateAndGet(sequence, (value) => value + 1),
+			(value) => PubSub.publish(events, { ...change, sequence: value }),
+		);
+	}
 	const cached = yield* Ref.make(Option.none<Cached>());
 	const settled = yield* Deferred.make<void>();
 	const stale = Ref.update(generation, (count) => count + 1);
 	const setWatching = (now: boolean) =>
 		Effect.andThen(
 			Effect.flatMap(Ref.getAndSet(watching, now), (was) =>
-				was === now ? Effect.void : Effect.andThen(stale, PubSub.publish(events, { _tag: "Watching", watching: now })),
+				was === now ? Effect.void : Effect.andThen(stale, publish({ _tag: "Watching", watching: now })),
 			),
 			Deferred.succeed(settled, undefined),
 		);
-	const attempt = watchDirectories(root, realRoot, stale, setWatching, (paths) => PubSub.publish(events, { _tag: "Changed", paths }));
+	const attempt = watchDirectories(root, realRoot, stale, setWatching, (paths) => publish({ _tag: "Changed", paths }));
 	yield* attempt.pipe(
 		Effect.sandbox,
 		Effect.tapError((cause) => Effect.andThen(setWatching(false), Effect.logWarning("Watching the folder failed; retrying", cause))),
@@ -55,6 +65,6 @@ export const watchChanges = Effect.fn("WorkBoard.watchChanges")(function* (root:
 		yield* Ref.set(cached, Option.some({ files: listed, generation: now }));
 		return listed;
 	});
-	const changes: Changes = { events, files, realRoot, revision: Ref.get(generation), watching };
+	const changes: Changes = { events, files, realRoot, revision: Ref.get(generation), sequence: Ref.get(sequence), watching };
 	return changes;
 });

package/src/files/list.ts

@@ -1,13 +1,14 @@
 import { Effect, FileSystem, Option, Path, type PlatformError } from "effect";
+import { isMarkdown as markdown } from "#path/isMarkdown.ts";
 
 export interface MarkdownFile {
 	readonly modified: number;
 	readonly path: string;
 }
 
-const skipped = (segment: string): boolean => segment.startsWith(".") || segment === "node_modules";
-
-export const isMarkdown = (path: string): boolean => path.endsWith(".md") && !path.split("/").some(skipped);
+export function isMarkdown(path: string): boolean {
+	return markdown(path);
+}
 
 export const within = (realRoot: string, separator: string, real: string): boolean => real === realRoot || real.startsWith(`${realRoot}${separator}`);
 
@@ -52,7 +53,7 @@ export const scanMarkdown = Effect.fn("WorkBoard.scanMarkdown")(function* (root:
 			const branch = new Set([...ancestors, real]);
 			const names = yield* fs.readDirectory(real);
 			const found = yield* Effect.forEach(
-				names.filter((name) => !skipped(name)),
+				names.filter((name) => !name.startsWith(".") && name !== "node_modules"),
 				(name) => entry(relative === "" ? name : `${relative}/${name}`, boundary, branch, real),
 			);
 			return found.flat();

package/src/history/schema.ts

@@ -1,5 +1,5 @@
 import { Schema } from "effect";
-import { isMarkdown } from "#files/list.ts";
+import { isMarkdown } from "#path/isMarkdown.ts";
 
 const File = Schema.String.check(
 	Schema.makeFilter(

package/src/history/script.ts

@@ -2,12 +2,14 @@ export function historyScript(): string {
 	return `
 import { swap, remember } from "/_board/swap.js";
 import { captureReading, restoreReading } from "/_board/reading-state.js";
+import { session } from "/_board/native.js";
 const key = "work-board:changes:" + document.documentElement.dataset.workspace;
 let memory;
 let storageNotice = "";
 let unavailableHtml = "";
 let generation = 0;
 let controller;
+let observing = null;
 const baseline = () => {
  if (memory !== undefined) return memory;
  try { return localStorage.getItem(key); }
@@ -52,22 +54,23 @@ const query = async (action) => {
  controller?.abort();
  controller = new AbortController();
  const raw = baseline();
- const response = await fetch("/_board/history", {
-  method: "POST", headers: { "content-type": "application/json" },
-  body: JSON.stringify({ action, baseline: raw }), signal: controller.signal, cache: "no-store",
- });
- if (!response.ok) throw new Error("History query failed");
- const result = await response.json();
+ const native = session(window);
+ const payload = { action, baseline: raw };
+ const atom = native.api.history.query(payload);
+ if (action !== "observe") native.registry.refresh(atom);
+ const result = action === "observe" ? await native.run(native.api.history.run(payload), controller.signal) : await native.read(atom, controller.signal);
  if (mine !== generation) return null;
  if (result.discardBaseline && baseline() === raw) { forget(); unavailableHtml = result.html; }
  return result;
 };
-const refresh = async () => {
- const visible = document.getElementById("doc")?.dataset.view === "changes";
+const refresh = async (manual = false) => {
+ if (observing !== null) return;
+ const paused = session(window).registry.get(session(window).updates.paused) && manual !== true;
+ const visible = document.getElementById("doc")?.dataset.view === "changes" && !paused;
  try {
   const result = await query(visible ? "compare" : "check");
   if (!result) return;
-  if (visible && document.getElementById("doc")?.dataset.view === "changes") {
+  if ((visible || result.discardBaseline) && document.getElementById("doc")?.dataset.view === "changes") {
    render(baseline() === null && unavailableHtml ? unavailableHtml : result.html);
    controls(result.snapshot !== null);
   }
@@ -81,13 +84,17 @@ const refresh = async () => {
 };
 document.addEventListener("click", async (event) => {
  if (event.target.closest?.("#history-clear")) {
+  observing = null;
   ++generation;
   controller?.abort();
   forget();
   unavailableHtml = "";
-  await refresh();
+  await refresh(true);
  }
  if (event.target.closest?.("#history-mark")) {
+  if (observing !== null) return;
+  const mine = generation + 1;
+  observing = mine;
   controls(false, true);
   try {
    const result = await query("observe");
@@ -95,16 +102,24 @@ document.addEventListener("click", async (event) => {
    if (result.snapshot === null) { render(result.html); controls(false); return; }
    keep(result.snapshot);
    unavailableHtml = "";
-   await refresh();
   } catch (error) {
    if (error.name !== "AbortError") { render("<p>Could not remember the current observation. Your previous baseline is preserved.</p>"); controls(false); }
-  }
+   return;
+  } finally { if (observing === mine) observing = null; }
+  await refresh(true);
  }
 });
+window.addEventListener("pagehide", () => { ++generation; observing = null; controller?.abort(); });
 document.addEventListener("board-page", refresh);
+document.addEventListener("board-updates-resumed", refresh);
 document.addEventListener("visibilitychange", () => { if (!document.hidden) refresh(); });
 window.addEventListener("storage", (event) => {
- if (event.key === key || event.key === null) { memory = undefined; storageNotice = ""; unavailableHtml = ""; refresh(); }
+ if (event.key === key || event.key === null) {
+  observing = null;
+  ++generation;
+  controller?.abort();
+  memory = undefined; storageNotice = ""; unavailableHtml = ""; refresh(true);
+ }
 });
 setInterval(() => { if (baseline() !== null) refresh(); }, 60000);
 refresh();

package/src/http/assets.ts

@@ -2,6 +2,7 @@ import { createRequire } from "node:module";
 import { Data, Effect, FileSystem, Path } from "effect";
 import type { HttpRouter, HttpServerRequest } from "effect/unstable/http";
 import { historyScript } from "#history/script.ts";
+import { ageScript } from "#page/ageScript.ts";
 import { client, preferences } from "#page/client.ts";
 import { diagrams } from "#page/diagrams.ts";
 import { libraryScript } from "#page/libraryScript.ts";
@@ -19,6 +20,7 @@ export const ASSETS: ReadonlyArray<readonly [HttpRouter.PathInput, string, strin
 	["/_board/style.css", style, "text/css"],
 	["/_board/saved-views.js", savedScript(), "text/javascript"],
 	["/_board/client.js", client, "text/javascript"],
+	["/_board/ages.js", ageScript(), "text/javascript"],
 	["/_board/history.js", historyScript(), "text/javascript"],
 	["/_board/preferences.js", preferences, "text/javascript"],
 	["/_board/search.js", searchScript(), "text/javascript"],
@@ -53,3 +55,12 @@ export const mermaidFile = (mermaidRoot: string) =>
 	});
 
 export const MERMAID_ROUTE: HttpRouter.PathInput = `${MERMAID}*`;
+
+export const NATIVE_ROUTE: HttpRouter.PathInput = "/_board/native.js";
+export const nativeAsset = Effect.fn("WorkBoard.nativeAsset")(function* () {
+	const fs = yield* FileSystem.FileSystem;
+	const path = yield* Path.Path;
+	const module = yield* path.fromFileUrl(new URL(import.meta.url)).pipe(Effect.orDie);
+	const asset = path.resolve(path.dirname(module), "../../assets/native.js");
+	return respond(yield* fs.readFile(asset), "text/javascript");
+});

package/src/http/history.ts

@@ -9,6 +9,7 @@ import { navHtml } from "#page/nav.ts";
 import { shell } from "#page/shell.ts";
 import type { searchSnapshot } from "#search/snapshot.ts";
 import { respond } from "./respond.ts";
+import { sameOrigin } from "./sameOrigin.ts";
 
 export function changesPage(changes: Changes, home: string | undefined) {
 	return Effect.fn("WorkBoard.changesPage")(function* () {
@@ -16,18 +17,6 @@ export function changesPage(changes: Changes, home: string | undefined) {
 		return respond(shell("Changes", nav, changesHtml(), changes.realRoot, true, undefined, "changes"), "text/html");
 	});
 }
-function sameOrigin(request: HttpServerRequest.HttpServerRequest): boolean {
-	const origin = request.headers.origin;
-	if (origin === undefined) {
-		return true;
-	}
-	try {
-		const url = new URL(origin);
-		return url.protocol === "http:" && url.host === request.headers.host;
-	} catch {
-		return false;
-	}
-}
 export function history(index: Effect.Success<ReturnType<typeof searchSnapshot>>) {
 	return Effect.fn("WorkBoard.history")(function* (request: HttpServerRequest.HttpServerRequest) {
 		if (!sameOrigin(request)) {

package/src/http/sameOrigin.ts

@@ -0,0 +1,14 @@
+import type { HttpServerRequest } from "effect/unstable/http";
+
+export function sameOrigin(request: HttpServerRequest.HttpServerRequest): boolean {
+	const origin = request.headers.origin;
+	if (origin === undefined) {
+		return true;
+	}
+	try {
+		const url = new URL(origin);
+		return url.protocol === "http:" && url.host === request.headers.host;
+	} catch {
+		return false;
+	}
+}

package/src/page/ageScript.ts

@@ -0,0 +1,22 @@
+export function ageScript() {
+	return `
+const since = (modified) => {
+  const seconds = Math.max(0, Math.round((Date.now() - modified) / 1000));
+  if (seconds < 60) return seconds + "s";
+  if (seconds < 3600) return Math.round(seconds / 60) + "m";
+  if (seconds < 172800) return Math.round(seconds / 3600) + "h";
+  return Math.round(seconds / 86400) + "d";
+};
+
+export const tick = () => {
+  for (const age of document.querySelectorAll("[data-modified]")) {
+    const ago = since(Number(age.dataset.modified));
+    age.textContent = age.classList.contains("short") ? ago : "updated " + ago + " ago";
+  }
+};
+
+document.addEventListener("board-page", tick);
+tick();
+setInterval(tick, 5000);
+`;
+}