pi-roundtable-web 0.22.5 → 0.23.1

package/src/push/vapid.ts

@@ -0,0 +1,124 @@
+import type { webcrypto } from "node:crypto";
+import { chmodSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname } from "node:path";
+import { SignJWT } from "jose";
+
+/** How long a VAPID token is valid; push services accept up to 24 hours. */
+const TOKEN_LIFE_SECONDS = 12 * 3600;
+const ES256 = { name: "ECDSA", namedCurve: "P-256" } as const;
+
+/** The server's VAPID identity (RFC 8292): the public key browsers subscribe against, and the key that signs for it. */
+export interface Vapid {
+	/** The uncompressed P-256 point, base64url: the `applicationServerKey` and the `k=` of the header. */
+	publicKey: string;
+	privateKey: CryptoKey;
+}
+
+interface Stored {
+	publicKey: string;
+	privateKey: webcrypto.JsonWebKey;
+}
+
+function parse(raw: string, path: string): Stored {
+	let value: unknown;
+	try {
+		value = JSON.parse(raw);
+	} catch {
+		throw new Error(
+			`${path} is not JSON; delete it to make a new VAPID key (every device must subscribe again)`,
+		);
+	}
+	const stored = value as Partial<Stored> | null;
+	if (
+		typeof stored?.publicKey !== "string" ||
+		typeof stored.privateKey?.d !== "string"
+	)
+		throw new Error(
+			`${path} is not a VAPID key file; delete it to make a new one (every device must subscribe again)`,
+		);
+	return stored as Stored;
+}
+
+async function importStored(stored: Stored, path: string): Promise<Vapid> {
+	let privateKey: CryptoKey;
+	try {
+		privateKey = await crypto.subtle.importKey(
+			"jwk",
+			stored.privateKey,
+			ES256,
+			false,
+			["sign"],
+		);
+	} catch {
+		throw new Error(
+			`${path} does not hold a P-256 key; delete it to make a new one (every device must subscribe again)`,
+		);
+	}
+	// The header's `k=` must be the key that signs, or every push service refuses the token.
+	const { x, y } = stored.privateKey;
+	const point =
+		typeof x === "string" && typeof y === "string"
+			? Buffer.concat([
+					Buffer.from([4]),
+					Buffer.from(x, "base64url"),
+					Buffer.from(y, "base64url"),
+				]).toString("base64url")
+			: undefined;
+	if (point !== stored.publicKey)
+		throw new Error(
+			`${path} holds a public key that does not belong to its private key; delete it to make a new one (every device must subscribe again)`,
+		);
+	return { publicKey: stored.publicKey, privateKey };
+}
+
+/**
+ * The VAPID keys in `path`, made on first use with WebCrypto and kept readable by this user
+ * alone. Subscriptions are bound to the public key, so the file must outlive a restart; a file
+ * that cannot be read stops startup rather than being replaced.
+ */
+export async function loadVapid(path: string): Promise<Vapid> {
+	let raw: string | undefined;
+	try {
+		raw = readFileSync(path, "utf8");
+	} catch (error) {
+		if ((error as NodeJS.ErrnoException).code !== "ENOENT") throw error;
+	}
+	if (raw !== undefined) return importStored(parse(raw, path), path);
+	const pair = await crypto.subtle.generateKey(ES256, true, ["sign", "verify"]);
+	const stored: Stored = {
+		publicKey: Buffer.from(
+			await crypto.subtle.exportKey("raw", pair.publicKey),
+		).toString("base64url"),
+		privateKey: await crypto.subtle.exportKey("jwk", pair.privateKey),
+	};
+	mkdirSync(dirname(path), { recursive: true, mode: 0o700 });
+	try {
+		// `wx`: a second starter that lost the race reads the winner's file instead of replacing it.
+		writeFileSync(path, `${JSON.stringify(stored)}\n`, {
+			flag: "wx",
+			mode: 0o600,
+		});
+	} catch (error) {
+		if ((error as NodeJS.ErrnoException).code !== "EEXIST") throw error;
+		return importStored(parse(readFileSync(path, "utf8"), path), path);
+	}
+	chmodSync(path, 0o600);
+	return importStored(stored, path);
+}
+
+/** The `Authorization` header value for a push to an endpoint (RFC 8292): a token for its origin, signed by the key. */
+export async function vapidAuthorization(
+	vapid: Vapid,
+	endpoint: string,
+	subject: string,
+	now: Date = new Date(),
+): Promise<string> {
+	const issued = Math.floor(now.getTime() / 1000);
+	const token = await new SignJWT({})
+		.setProtectedHeader({ alg: "ES256", typ: "JWT" })
+		.setAudience(new URL(endpoint).origin)
+		.setSubject(subject)
+		.setExpirationTime(issued + TOKEN_LIFE_SECONDS)
+		.sign(vapid.privateKey);
+	return `vapid t=${token}, k=${vapid.publicKey}`;
+}

package/src/pwa.ts

@@ -0,0 +1,130 @@
+import { readFileSync } from "node:fs";
+import { basename, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import type { AssetBundle } from "./assets.ts";
+import { PAGE_COLORS } from "./page-colors.ts";
+
+/** The manifest's splash colours under each look; modern keeps the page's own. */
+const LOOK_COLORS = {
+	modern: {
+		theme: PAGE_COLORS.modern.light,
+		background: PAGE_COLORS.modern.light,
+	},
+	camelot: {
+		theme: PAGE_COLORS.camelot.light,
+		background: PAGE_COLORS.camelot.dark,
+	},
+} as const;
+
+/**
+ * Applies the stored look and colour scheme before the page paints. It is a file of its own, not
+ * an inline script, because the page's policy allows scripts from itself only; the page loads it
+ * in the head, where it blocks the first paint for the few bytes it is. It does what `initLook`
+ * and `initTheme` do once the bundle runs (`rt-look` and `rt-theme`, in `web/lib`): the device's
+ * own look wins over the host's, and the toolbar colour follows the look and the scheme.
+ */
+export const themeInitScript = (host: "modern" | "camelot"): string =>
+	`(function(){try{var C=${JSON.stringify(PAGE_COLORS)};var l=localStorage.getItem("rt-look");if(l!=="modern"&&l!=="camelot")l="${host}";var t=localStorage.getItem("rt-theme");var r=document.documentElement;r.dataset.look=l;var x=t==="light"||t==="dark";if(x)r.dataset.theme=t;var m=document.querySelectorAll('meta[name="theme-color"]');for(var i=0;i<m.length;i++){var s=x?t:(m[i].getAttribute("media")||"").indexOf("dark")>-1?"dark":"light";m[i].setAttribute("content",C[l][s])}}catch(e){}})();\n`;
+
+/** The script for a modern host. */
+export const THEME_INIT_SCRIPT = themeInitScript("modern");
+
+/** The icons this package ships, which `options.icons.dir` replaces. */
+export const DEFAULT_ICONS_DIR = fileURLToPath(
+	new URL("../assets/icons/", import.meta.url),
+);
+
+const ICON_FILE = /^[A-Za-z0-9-]+\.png$/;
+
+export interface PwaOptions {
+	mount: string;
+	title: string;
+	assets: AssetBundle;
+	iconsDir?: string;
+	look?: "modern" | "camelot";
+}
+
+/** The web app manifest for a console served under `mount`; its icon URLs are relative to it. */
+function manifestFor(
+	mount: string,
+	title: string,
+	look: "modern" | "camelot" = "modern",
+): string {
+	const base = `${mount}/`;
+	return JSON.stringify({
+		id: base,
+		start_url: base,
+		scope: base,
+		name: title,
+		short_name: title,
+		display: "standalone",
+		// A manifest has one colour for the splash; the light page is the one most owners see.
+		theme_color: LOOK_COLORS[look].theme,
+		background_color: LOOK_COLORS[look].background,
+		icons: [
+			{ src: "icons/192.png", sizes: "192x192", type: "image/png" },
+			{ src: "icons/512.png", sizes: "512x512", type: "image/png" },
+			{
+				src: "icons/maskable-512.png",
+				sizes: "512x512",
+				type: "image/png",
+				purpose: "maskable",
+			},
+		],
+	});
+}
+
+/**
+ * The installability files under the mount: the manifest, the service worker and the icons. A
+ * path that is none of them returns undefined. The caller has already admitted the request.
+ */
+export function servePwa(
+	rest: string,
+	options: PwaOptions,
+): Response | undefined {
+	if (rest === "manifest.webmanifest")
+		return new Response(
+			manifestFor(options.mount, options.title, options.look),
+			{
+				headers: {
+					"content-type": "application/manifest+json;charset=utf-8",
+					"cache-control": "no-cache",
+				},
+			},
+		);
+	if (rest === "theme-init.js")
+		return new Response(themeInitScript(options.look ?? "modern"), {
+			headers: {
+				"content-type": "text/javascript;charset=utf-8",
+				"cache-control": "no-cache",
+			},
+		});
+	if (rest === "sw.js") {
+		const worker = options.assets.get("sw.js");
+		if (!worker) return undefined;
+		return new Response(new Uint8Array(worker.body), {
+			headers: {
+				"content-type": "text/javascript;charset=utf-8",
+				"cache-control": "no-cache",
+			},
+		});
+	}
+	if (rest.startsWith("icons/")) {
+		const name = rest.slice("icons/".length);
+		if (!ICON_FILE.test(name) || basename(name) !== name) return undefined;
+		try {
+			const body = readFileSync(
+				join(options.iconsDir ?? DEFAULT_ICONS_DIR, name),
+			);
+			return new Response(new Uint8Array(body), {
+				headers: {
+					"content-type": "image/png",
+					"cache-control": "private, max-age=86400",
+				},
+			});
+		} catch {
+			return undefined;
+		}
+	}
+	return undefined;
+}

package/src/request-body.ts

@@ -0,0 +1,20 @@
+/**
+ * A request's whole body, read in chunks so one past `limit` bytes is refused without being held
+ * whole: by its declared length first, then by the bytes that arrive. Undefined when it is over.
+ */
+export async function readLimited(
+	request: Request,
+	limit: number,
+): Promise<Buffer | undefined> {
+	if (Number(request.headers.get("content-length") ?? 0) > limit)
+		return undefined;
+	const chunks: Uint8Array[] = [];
+	let size = 0;
+	if (request.body)
+		for await (const chunk of request.body) {
+			size += chunk.byteLength;
+			if (size > limit) return undefined;
+			chunks.push(chunk);
+		}
+	return Buffer.concat(chunks);
+}

package/src/verifier.ts

@@ -10,6 +10,11 @@ export type Verdict =
 			 * owner's, as before 0.9, and the console warns once.
 			 */
 			actor?: ActorFacts;
+			/**
+			 * When the proxy's assertion lapses, such as the `exp` of a Cloudflare Access token. A
+			 * connection that outlives requests, such as a WebSocket, ends then and signs in again.
+			 */
+			expiresAt?: Date;
 	  }
 	| {
 			admitted: false;
@@ -30,9 +35,10 @@ export type RequestVerifier = (request: Request) => Verdict | Promise<Verdict>;
 /** Admits the request without saying who it is from, as a verifier before 0.9 did. */
 export const admit = (): Verdict => ({ admitted: true });
 /** Admits the request as coming from the person these facts describe. */
-export const admitAs = (actor: ActorFacts): Verdict => ({
+export const admitAs = (actor: ActorFacts, expiresAt?: Date): Verdict => ({
 	admitted: true,
 	actor,
+	...(expiresAt ? { expiresAt } : {}),
 });
 export const refuse = (reason: string): Verdict => ({
 	admitted: false,

package/src/web-plugin.ts

@@ -1,13 +1,23 @@
+import { join } from "node:path";
 import {
 	AGENTS,
 	CONVERSATIONS,
 	definePlugin,
 	IDENTITY,
 	MEMORY,
+	MODES,
 	type RoundtablePlugin,
+	SCHEDULES,
 } from "pi-roundtable";
 import { DISCORD } from "pi-roundtable/discord";
+import { APP_MIGRATIONS, OwnerApp } from "./app/app.ts";
+import { APP_PROTOCOL } from "./app/protocol.ts";
+import { UPLOAD_FRAMING_BYTES } from "./app/uploads.ts";
 import { loadAssets } from "./assets.ts";
+import {
+	createAuthenticator,
+	WEB_CONSOLE_IDENTITY,
+} from "./auth/authenticator.ts";
 import { ConsoleApi } from "./console-api.ts";
 import { ConsoleServer } from "./console-server.ts";
 import {
@@ -15,21 +25,43 @@ import {
 	resolveOptions,
 	type WebConsoleOptions,
 } from "./options.ts";
+import { loadVapid } from "./push/vapid.ts";
 import { consoleVisitors } from "./visitors.ts";
 
+/** The longest a WebSocket stays open under `password` auth: the session cookie is looked at again after this. */
+const PASSWORD_SOCKET_LIFE_MS = 3_600_000;
+
 /**
  * The owners' web console: conversations, transcripts, memory notes, and the agent team, served
- * on a route of the host's listener and updated live. Every request needs the verifier to vouch
- * for the person and `IDENTITY` to name them an owner. The options are checked here, so a missing
- * verifier or a bad setting throws when the config is loaded.
+ * on a route of the host's listener and updated live. Every request needs the configured `auth`
+ * to vouch for the person and `IDENTITY` to name them an owner. The options are checked here, so
+ * missing authentication or a bad setting throws when the config is loaded; whether `none` fits
+ * the listener and whether the password is long enough are checked when the host sets up.
  */
 export function webConsole(options: WebConsoleOptions): RoundtablePlugin {
 	const settings = resolveOptions(options);
+	const { auth } = settings;
+	const rooms = settings.panes.includes("rooms");
+	const schedules = settings.panes.includes("schedules");
 	return definePlugin({
 		name: "web-console",
+		...(rooms ? { migrations: APP_MIGRATIONS } : {}),
+		// `none` and `password` speak for one principal through this identity; a verifier brings its own.
+		...(auth.mode === "verifier"
+			? {}
+			: {
+					identities: [
+						{
+							identity: WEB_CONSOLE_IDENTITY,
+							...(auth.principal ? { principal: auth.principal } : {}),
+						},
+					],
+				}),
 		requires: [
 			IDENTITY,
-			...(settings.panes.includes("overview") ? [AGENTS] : []),
+			...(settings.panes.includes("overview") || rooms ? [AGENTS] : []),
+			...(rooms ? [MODES] : []),
+			...(schedules ? [SCHEDULES] : []),
 			...(settings.panes.includes("notes") ? [MEMORY] : []),
 		],
 		setup: (context) => build(settings, context),
@@ -48,6 +80,7 @@ async function build(settings: ResolvedOptions, context: Context) {
 		if (settings.panes.includes(pane) && !features?.[pane])
 			throw new Error(`web-console: the ${pane} pane needs its feature port`);
 	}
+	const rooms = settings.panes.includes("rooms");
 	const team = services.find(AGENTS)?.team;
 	const connection = services.find(DISCORD)?.connection;
 	// Absent on a host without the registry: the console then lists conversations found by name only.
@@ -82,21 +115,87 @@ async function build(settings: ResolvedOptions, context: Context) {
 		changed,
 		logger,
 		...(features ? { features } : {}),
+		look: settings.look,
 		...(settings.routing === "path" ? { mountPath: settings.mount } : {}),
+		...(rooms
+			? { app: { surface: settings.surface, protocol: APP_PROTOCOL } }
+			: {}),
 		...(settings.presentation ? { presentation: settings.presentation } : {}),
 	});
-	const server = new ConsoleServer({
-		mount: settings.mount,
-		assets,
-		verifier: settings.verifier,
+	const authenticator = createAuthenticator({
+		auth: settings.auth,
 		identify: consoleVisitors(identity, {
 			logger,
 			...(settings.ownerId ? { ownerId: settings.ownerId } : {}),
 		}),
 		origin: settings.origin,
+		mount: settings.mount,
+		title: settings.title,
+		...(settings.presentation ? { presentation: settings.presentation } : {}),
+		logger,
+		dataDir: settings.dataDir,
+		listener: {
+			id: settings.listener,
+			address: context.listener(settings.listener),
+		},
+	});
+	if (rooms && !settings.push.subject)
+		logger.warn(
+			"web push is off: the origin is not https, so set push.subject to a mailto: or https: contact",
+		);
+	const vapid = rooms
+		? await loadVapid(join(settings.dataDir, "web", "vapid.json"))
+		: undefined;
+	const app =
+		rooms && vapid
+			? new OwnerApp({
+					push: {
+						vapid,
+						subject: settings.push.subject,
+						preview: settings.push.preview,
+						endpointHosts: settings.push.endpointHosts,
+						...(settings.push.fetch ? { fetch: settings.push.fetch } : {}),
+						urlOf: (room) =>
+							settings.routing === "path"
+								? `${settings.mount}/room/${encodeURIComponent(room)}`
+								: `${settings.mount}/#/room/${encodeURIComponent(room)}`,
+					},
+					surface: settings.surface,
+					mount: settings.mount,
+					origin: settings.origin,
+					dataDir: settings.dataDir,
+					cardGraceSeconds: settings.cardGraceSeconds,
+					uploadMaxBytes: settings.uploadMaxBytes,
+					authenticator,
+					authMode: settings.auth.mode,
+					// A password session outlives a logout or a new password on an open socket, so the socket is capped.
+					...(settings.auth.mode === "password"
+						? { socketLifeMs: PASSWORD_SOCKET_LIFE_MS }
+						: {}),
+					database: context.database(),
+					agents: services.get(AGENTS),
+					modes: services.get(MODES),
+					identity,
+					...(settings.panes.includes("schedules")
+						? { schedules: services.get(SCHEDULES) }
+						: {}),
+					conversations: context.conversations,
+					changed,
+					logger,
+				})
+			: undefined;
+	if (app) listeners.push(() => app.changed());
+	const server = new ConsoleServer({
+		mount: settings.mount,
+		assets,
+		authenticator,
 		pathRouting: settings.routing === "path",
+		title: settings.title,
+		...(settings.iconsDir ? { iconsDir: settings.iconsDir } : {}),
+		look: settings.look,
 		...(settings.presentation ? { presentation: settings.presentation } : {}),
 		api,
+		...(app ? { app } : {}),
 		subscribe: (listener) => {
 			listeners.push(listener);
 			queue.onChange(listener);
@@ -108,11 +207,24 @@ async function build(settings: ResolvedOptions, context: Context) {
 		services: [
 			{
 				name: "web-console",
-				start: () => server.start(),
-				stop: () => server.stop(),
+				start: () => {
+					server.start();
+					app?.start();
+				},
+				stop: () => {
+					app?.stop();
+					server.stop();
+				},
 			},
 		],
-		http: server.routes(settings.listener),
+		...(app
+			? { surfaces: [app.surface], directChannels: [app.directChannel] }
+			: {}),
+		// An upload is a form with one file in it: the limit of the file and its framing.
+		http: server.routes(
+			settings.listener,
+			rooms ? settings.uploadMaxBytes + UPLOAD_FRAMING_BYTES : undefined,
+		),
 		dashboard: [`Web console: ${settings.origin}${settings.mount}/`],
 	};
 }