pi-roundtable-web 0.25.0 → 0.26.1

package/src/page-presentation.ts

@@ -2,7 +2,7 @@ import type { ConsolePresentation } from "./features.ts";
 import { escapeHtml } from "./http.ts";
 import { PAGE_COLORS } from "./page-colors.ts";
 
-/** The tags that make the page installable; the URLs resolve against the page, so the mount does not matter. */
+/** The tags that make the page installable; their URLs resolve against the base, so they follow it. */
 const pwaTags = (look: "modern" | "camelot"): string =>
 	'<link rel="manifest" href="./manifest.webmanifest" crossorigin="use-credentials">' +
 	`<meta name="theme-color" content="${PAGE_COLORS[look].light}" media="(prefers-color-scheme: light)">` +
@@ -10,21 +10,66 @@ const pwaTags = (look: "modern" | "camelot"): string =>
 	'<link rel="apple-touch-icon" href="./icons/apple-180.png">' +
 	'<meta name="apple-mobile-web-app-capable" content="yes">';
 
+/**
+ * The icon links of a page served under `mount`: the round-table mark as an SVG when the icon
+ * directory has one, and the 192 px PNG every icon directory has (the manifest names it). Without
+ * them a browser asks the site root for `/favicon.ico`, which is not this app's.
+ */
+export const iconLinks = (mount: string, svg: boolean): string => {
+	const base = escapeHtml(mount);
+	const mark = svg
+		? `<link rel="icon" href="${base}/icons/mark.svg" type="image/svg+xml" sizes="any">`
+		: "";
+	return `${mark}<link rel="icon" href="${base}/icons/192.png" type="image/png">`;
+};
+
+/** What a page says about itself to a tab, a search result and a link preview. */
+export interface PageMeta {
+	title: string;
+	description: string;
+	/** The console's origin, so `og:image` is an absolute URL. */
+	origin: string;
+	/** The path the console is served under. */
+	mount: string;
+	/** Whether the icon directory has `mark.svg`. */
+	svg: boolean;
+}
+
+/** The text a host that sets no `description` gets. */
+export const defaultDescription = (title: string): string =>
+	`Chat with your agent team in ${title}.`;
+
+const metaTags = (meta: PageMeta): string =>
+	`<meta name="description" content="${escapeHtml(meta.description)}">` +
+	`<meta property="og:title" content="${escapeHtml(meta.title)}">` +
+	`<meta property="og:description" content="${escapeHtml(meta.description)}">` +
+	`<meta property="og:image" content="${escapeHtml(`${meta.origin}${meta.mount}/icons/512.png`)}">`;
+
 /** Authenticated, inert bootstrap data localizes even a failed first API request without inline scripts. */
 export function presentPage(
 	body: Uint8Array,
 	mount: string | undefined,
 	presentation: ConsolePresentation | undefined,
 	look: "modern" | "camelot" = "modern",
+	meta?: PageMeta,
 ): Uint8Array<ArrayBuffer> | string {
 	// Not in web/index.html: the bundler would try to resolve and rewrite these URLs.
-	let head = `<head>${pwaTags(look)}`;
+	// The base comes first: under path routing a relative link before it resolves against a deep URL.
+	let head = "<head>";
 	if (mount) head += `<base href="${escapeHtml(`${mount}/`)}">`;
+	head += pwaTags(look);
+	if (meta) head += iconLinks(meta.mount, meta.svg) + metaTags(meta);
 	if (presentation)
 		head += `<meta name="roundtable-console-presentation" content="${escapeHtml(JSON.stringify(presentation))}">`;
 	// After the base, so it resolves under the mount; a script of the page's own origin, which its policy allows.
 	head += '<script src="./theme-init.js"></script>';
 	let html = new TextDecoder().decode(body).replace("<head>", () => head);
+	// web/index.html ships a placeholder: the page is not rendered until the bundle sets the title.
+	if (meta)
+		html = html.replace(
+			/<title>[^<]*<\/title>/,
+			() => `<title>${escapeHtml(meta.title)}</title>`,
+		);
 	if (presentation?.locale)
 		html = html.replace(
 			/(<html[^>]*lang=")[^"]*(")/,

package/src/profile/api.ts

@@ -0,0 +1,175 @@
+import {
+	IdentityError,
+	type IdentityService,
+	type PersonProfiles,
+} from "pi-roundtable";
+import type { ProfileView } from "../api-types.ts";
+import type { Gate } from "../gate.ts";
+import { ConsoleHttpError as HttpError, json } from "../http.ts";
+import { readLimited } from "../request-body.ts";
+import type { RouteArea, Viewer } from "../web-app.ts";
+import { LinkRefused, type LinkService } from "./links.ts";
+
+const MAX_BODY_BYTES = 4 * 1024;
+
+async function bodyOf(request: Request): Promise<Record<string, unknown>> {
+	const raw = await readLimited(request, MAX_BODY_BYTES);
+	if (!raw) throw new HttpError(413, "The body is too large.");
+	let value: unknown;
+	try {
+		value = JSON.parse(raw.toString("utf8"));
+	} catch {
+		throw new HttpError(400, "The body is not JSON.");
+	}
+	if (typeof value !== "object" || value === null || Array.isArray(value))
+		throw new HttpError(400, "The body is not an object.");
+	return value as Record<string, unknown>;
+}
+
+/** Turns what a handler throws into the response a person reads; anything else is a bug and rethrown. */
+function answer(error: unknown): Response {
+	if (error instanceof HttpError)
+		return json({ error: error.message }, error.status);
+	if (error instanceof LinkRefused)
+		return json({ error: error.message }, error.status);
+	if (error instanceof IdentityError)
+		return json({ error: error.message }, 400);
+	throw error;
+}
+
+export interface ProfileAreaOptions {
+	profiles: PersonProfiles;
+	identity: Pick<IdentityService, "identities">;
+	/**
+	 * What the account the person signed in with is called when it is not a registered source: a
+	 * sign-in reports its name to `PROFILES.observed`, so it can name the person without a fetch.
+	 */
+	sessionLabel: string;
+}
+
+/** `GET api/profile` and `PUT api/profile/source`: how the person is shown and which account names them. */
+export function profileArea(options: ProfileAreaOptions): RouteArea {
+	const view = async (viewer: Viewer, sessionProvider: string | undefined) => {
+		const { profiles, identity } = options;
+		const [display, linked] = await Promise.all([
+			profiles.of(viewer.principalId),
+			identity.identities(viewer.principalId),
+		]);
+		const linkedProviders = new Set(linked.map((link) => link.provider));
+		const sources: ProfileView["sources"] = profiles
+			.sources()
+			.filter((source) => linkedProviders.has(source.provider))
+			.map((source) => ({ provider: source.provider, label: source.label }));
+		if (
+			sessionProvider &&
+			linkedProviders.has(sessionProvider) &&
+			!sources.some((source) => source.provider === sessionProvider)
+		)
+			sources.push({ provider: sessionProvider, label: options.sessionLabel });
+		return {
+			name: display.name,
+			...(display.source ? { source: display.source } : {}),
+			picture: display.picture,
+			principal: viewer.principalId,
+			tier: viewer.tier,
+			sources,
+		} satisfies ProfileView;
+	};
+	return {
+		area: "profile",
+		async handle(request, parts, { viewer, visitor }) {
+			try {
+				const provider = visitor.speakerId.split(":").slice(0, -1).join(":");
+				if (parts.length === 0 && request.method === "GET")
+					return json(await view(viewer, provider || undefined));
+				if (parts.length === 1 && parts[0] === "source") {
+					if (request.method !== "PUT")
+						throw new HttpError(405, "Method not allowed.");
+					const body = await bodyOf(request);
+					const chosen = body.provider;
+					if (chosen !== null && typeof chosen !== "string")
+						throw new HttpError(
+							400,
+							"Send provider: the account's provider, or null for the default.",
+						);
+					await options.profiles.choose(viewer.principalId, chosen);
+					return json(await view(viewer, provider || undefined));
+				}
+				throw new HttpError(404, "There is no such API.");
+			} catch (error) {
+				return answer(error);
+			}
+		},
+	};
+}
+
+/**
+ * `GET api/people/<principal>/picture`: the person's picture through the picture proxy. Anyone past
+ * the gate may fetch another person's picture; a person still at the gate only their own.
+ */
+export function peopleArea(options: {
+	profiles: Pick<PersonProfiles, "picture">;
+	gate: Pick<Gate, "required">;
+}): RouteArea {
+	return {
+		area: "people",
+		async handle(request, parts, { viewer }) {
+			try {
+				const [id, what] = parts;
+				if (id === undefined || what !== "picture" || parts.length !== 2)
+					throw new HttpError(404, "There is no such API.");
+				if (request.method !== "GET" && request.method !== "HEAD")
+					throw new HttpError(405, "Method not allowed.");
+				if (
+					id !== viewer.principalId &&
+					(await options.gate.required(viewer)).length > 0
+				)
+					throw new HttpError(403, "Finish setting up first.");
+				const picture = await options.profiles.picture(id);
+				if (!picture) throw new HttpError(404, "There is no picture.");
+				return picture;
+			} catch (error) {
+				return answer(error);
+			}
+		},
+	};
+}
+
+/** `GET api/links`, `POST api/links/<provider>/issue|confirm|cancel` and `DELETE api/links/<provider>`. */
+export function linksArea(links: LinkService): RouteArea {
+	return {
+		area: "links",
+		async handle(request, parts, { viewer }) {
+			try {
+				const me = viewer.principalId;
+				const [provider, action] = parts;
+				const { method } = request;
+				if (provider === undefined && method === "GET")
+					return json(await links.list(me));
+				if (provider !== undefined && action === undefined) {
+					if (method === "GET") return json(await links.one(provider, me));
+					if (method === "DELETE")
+						return json(await links.unlink(provider, me));
+					throw new HttpError(405, "Method not allowed.");
+				}
+				if (provider !== undefined && parts.length === 2 && method === "POST") {
+					if (action === "issue") return json(await links.issue(provider, me));
+					if (action === "cancel")
+						return json(await links.cancel(provider, me));
+					if (action === "confirm") {
+						const { request: ref } = await bodyOf(request);
+						if (typeof ref !== "string" || ref.length === 0 || ref.length > 200)
+							throw new HttpError(
+								400,
+								"Send request: the id the code came with.",
+							);
+						return json(await links.confirm(provider, me, ref));
+					}
+				}
+				throw new HttpError(404, "There is no such API.");
+			} catch (error) {
+				return answer(error);
+			}
+		},
+	};
+}

package/src/profile/links.ts

@@ -0,0 +1,162 @@
+import type { IdentityService, Logger } from "pi-roundtable";
+import type { LinksView, LinkView } from "../api-types.ts";
+import type { Gate } from "../gate.ts";
+import type { LinkProver, WebAppRegistry } from "../web-app.ts";
+
+/** Why a link request was refused, in words the page shows. `status` is the HTTP status. */
+export class LinkRefused extends Error {
+	readonly status: number;
+	constructor(message: string, status = 409) {
+		super(message);
+		this.name = "LinkRefused";
+		this.status = status;
+	}
+}
+
+export interface LinkServiceOptions {
+	registry: Pick<WebAppRegistry, "provers" | "prover">;
+	/** `onboarding.links`: which providers are required or only nudged. */
+	steps: Readonly<Record<string, "required" | "nudge">>;
+	identity: Pick<IdentityService, "identities">;
+	gate: Pick<Gate, "changed">;
+	logger: Logger;
+}
+
+/** Link sources that the configuration, the CLI or a plugin made, which a person cannot remove. */
+const LOCKED = new Set(["config", "cli", "plugin"]);
+
+/**
+ * The accounts a person can link and how they stand. Every call to a prover carries the session's
+ * principal, never one a request names; a prover's `requires` must be linked first, and a link
+ * the configuration, CLI or a plugin made is never unlinked here.
+ */
+export class LinkService {
+	readonly #options: LinkServiceOptions;
+
+	constructor(options: LinkServiceOptions) {
+		this.#options = options;
+	}
+
+	prover(provider: string): LinkProver {
+		const found = this.#options.registry.prover(provider);
+		if (!found) throw new LinkRefused("There is no such account to link.", 404);
+		return found;
+	}
+
+	async list(principalId: string): Promise<LinksView> {
+		const links = await Promise.all(
+			this.#options.registry
+				.provers()
+				.map((prover) => this.#view(prover, principalId)),
+		);
+		return { links };
+	}
+
+	async one(provider: string, principalId: string): Promise<LinkView> {
+		return this.#view(this.prover(provider), principalId);
+	}
+
+	async issue(provider: string, principalId: string) {
+		const prover = this.prover(provider);
+		const blocked = await this.#blockedBy(prover, principalId);
+		if (blocked.length > 0)
+			throw new LinkRefused(
+				`Link ${blocked.map((p) => this.#options.registry.prover(p)?.label ?? p).join(" and ")} first.`,
+			);
+		if ((await prover.status(principalId)).linked)
+			throw new LinkRefused("That account is already linked.");
+		const issued = await prover.issue(principalId);
+		return {
+			code: issued.code,
+			request: issued.request,
+			expiresAt: issued.expiresAt.toISOString(),
+			instructions: issued.instructions,
+		};
+	}
+
+	async confirm(provider: string, principalId: string, request: string) {
+		const prover = this.prover(provider);
+		await prover.confirm(principalId, request);
+		this.#options.gate.changed(principalId);
+		return this.#view(prover, principalId);
+	}
+
+	async cancel(provider: string, principalId: string): Promise<LinkView> {
+		const prover = this.prover(provider);
+		await prover.cancel(principalId);
+		return this.#view(prover, principalId);
+	}
+
+	async unlink(provider: string, principalId: string): Promise<LinkView> {
+		const prover = this.prover(provider);
+		const locked = (await this.#options.identity.identities(principalId)).some(
+			(link) => link.provider === provider && LOCKED.has(link.source),
+		);
+		if (locked)
+			throw new LinkRefused(
+				"That account was linked by the host's configuration, so it cannot be removed here.",
+			);
+		await prover.unlink(principalId);
+		this.#options.gate.changed(principalId);
+		return this.#view(prover, principalId);
+	}
+
+	/** The providers `prover` requires that the person has not linked. */
+	async #blockedBy(prover: LinkProver, principalId: string): Promise<string[]> {
+		const blocked: string[] = [];
+		for (const needed of prover.requires ?? []) {
+			const other = this.#options.registry.prover(needed);
+			const linked = other
+				? Boolean((await other.status(principalId)).linked)
+				: false;
+			const known = (await this.#options.identity.identities(principalId)).some(
+				(link) => link.provider === needed,
+			);
+			if (!linked && !known) blocked.push(needed);
+		}
+		return blocked;
+	}
+
+	async #view(prover: LinkProver, principalId: string): Promise<LinkView> {
+		const [state, identities, blocked] = await Promise.all([
+			prover.status(principalId),
+			this.#options.identity.identities(principalId),
+			this.#blockedBy(prover, principalId),
+		]);
+		const own = identities.find((link) => link.provider === prover.provider);
+		const linked = state.linked
+			? {
+					...(state.linked.displayName
+						? { displayName: state.linked.displayName }
+						: {}),
+					linkedAt: state.linked.linkedAt.toISOString(),
+					...(own && LOCKED.has(own.source) ? { locked: true as const } : {}),
+				}
+			: own
+				? {
+						linkedAt: own.linkedAt.toISOString(),
+						...(LOCKED.has(own.source) ? { locked: true as const } : {}),
+					}
+				: undefined;
+		const step = this.#options.steps[prover.provider];
+		return {
+			provider: prover.provider,
+			label: prover.label,
+			...(step ? { step } : {}),
+			requires: [...(prover.requires ?? [])],
+			blockedBy: blocked,
+			...(linked ? { linked } : {}),
+			...(state.pending && !linked
+				? {
+						pending: {
+							request: state.pending.request,
+							expiresAt: state.pending.expiresAt.toISOString(),
+							...(state.pending.redeemedBy
+								? { redeemedBy: state.pending.redeemedBy }
+								: {}),
+						},
+					}
+				: {}),
+		};
+	}
+}