@lanes-sh/link 0.1.0

package/src/auth/oidc.ts

@@ -0,0 +1,206 @@
+import { hashToken } from './oauth/store.ts';
+
+/**
+ * Verifying a token an issuer you already run handed out.
+ *
+ * The alternative to this endpoint issuing its own. Named for the protocol and
+ * not for any vendor, on the same reasoning that makes the database adapter
+ * `s3` and not `supabase` (ADR-013): the issuer is a URL, so pointing this
+ * at a different provider is an edit to a config file rather than a branch in
+ * the code.
+ *
+ * Three checks, and dropping any of them makes the other two decorative:
+ *
+ *  - **Audience.** The token must name this application. Without it, a token the
+ *    same issuer minted for any *other* application it serves would open this
+ *    endpoint — the confused-deputy case the MCP authorization spec calls out.
+ *    Every large issuer serves many applications, so this is the check that
+ *    matters most and the one most easily left out, because everything works
+ *    without it.
+ *  - **Expiry**, so a token that has been revoked by lapsing actually stops.
+ *  - **Subject**, against an allowlist. The issuer will happily vouch for every
+ *    account it has; which of them is *you* is not something it knows.
+ */
+
+export type FetchLike = (input: string | URL, init?: RequestInit) => Promise<Response>;
+
+export interface OidcVerifierOptions {
+  readonly issuer: string;
+  /** The audience a token must name — this application's client id at the issuer. */
+  readonly audience: string;
+  readonly allowedSubjects: readonly string[];
+  /**
+   * Where to ask about a token, when the issuer's metadata does not say.
+   *
+   * Access tokens are frequently opaque, so validating one means asking the
+   * issuer. RFC 7662 standardised that as `introspection_endpoint` in the
+   * discovery document — and several large issuers ship an equivalent without
+   * advertising one, so this is the escape hatch for those. A URL in config, not
+   * a case in a switch.
+   */
+  readonly introspectionEndpoint?: string | undefined;
+  /**
+   * Narrower than `typeof fetch` on purpose.
+   *
+   * The runtime's own type carries extensions — `preconnect` among them — that
+   * nothing here calls, and requiring them would mean every test stub had to
+   * implement them to be assignable.
+   */
+  readonly fetch?: FetchLike;
+  readonly now?: () => number;
+  /** How long a positive answer is reused. Zero disables the cache. */
+  readonly cacheTtlMs?: number;
+}
+
+export interface VerifiedSubject {
+  readonly subject: string;
+  readonly expiresAt: number;
+}
+
+interface Introspection {
+  readonly active: boolean;
+  readonly audiences: readonly string[];
+  readonly subjects: readonly string[];
+  readonly expiresAt: number | null;
+}
+
+/** A minute. Long enough to spare a round trip per call, short enough to notice. */
+const DEFAULT_CACHE_TTL_MS = 60_000;
+
+export class OidcVerifier {
+  readonly #options: OidcVerifierOptions;
+  readonly #fetch: FetchLike;
+  readonly #now: () => number;
+  readonly #cache = new Map<string, VerifiedSubject>();
+  #discovered: Promise<Record<string, unknown>> | null = null;
+
+  constructor(options: OidcVerifierOptions) {
+    this.#options = options;
+    this.#fetch = options.fetch ?? fetch;
+    this.#now = options.now ?? Date.now;
+  }
+
+  /** The subject this token belongs to, or null if it does not open this endpoint. */
+  async verify(token: string): Promise<VerifiedSubject | null> {
+    const key = hashToken(token);
+    const cached = this.#cache.get(key);
+    if (cached && cached.expiresAt > this.#now()) return cached;
+    this.#cache.delete(key);
+
+    const introspection = await this.#introspect(token);
+    if (!introspection?.active) return null;
+
+    if (!introspection.audiences.includes(this.#options.audience)) return null;
+    if (introspection.expiresAt !== null && introspection.expiresAt <= this.#now()) return null;
+
+    const subject = introspection.subjects.find((candidate) =>
+      this.#options.allowedSubjects.includes(candidate),
+    );
+    if (!subject) return null;
+
+    const ttl = this.#options.cacheTtlMs ?? DEFAULT_CACHE_TTL_MS;
+    const verified: VerifiedSubject = {
+      subject,
+      // Never cached past the token's own expiry, however generous the TTL.
+      expiresAt: Math.min(this.#now() + ttl, introspection.expiresAt ?? Infinity),
+    };
+    if (ttl > 0) this.#cache.set(key, verified);
+    return verified;
+  }
+
+  async #endpoint(): Promise<string | null> {
+    if (this.#options.introspectionEndpoint) return this.#options.introspectionEndpoint;
+
+    this.#discovered ??= this.#fetch(
+      `${this.#options.issuer.replace(/\/$/, '')}/.well-known/openid-configuration`,
+      { signal: AbortSignal.timeout(5_000) },
+    )
+      .then((response) => (response.ok ? response.json() : {}))
+      .catch(() => ({}));
+
+    const metadata = await this.#discovered;
+    const endpoint = metadata['introspection_endpoint'];
+    return typeof endpoint === 'string' ? endpoint : null;
+  }
+
+  /**
+   * Two request shapes, because two are in the wild.
+   *
+   * RFC 7662 is a form POST of `token`. The other common spelling is a GET with
+   * the token in the query string, which several issuers ship instead. Trying
+   * the standard one first and the other on failure covers both without either
+   * being named in a conditional.
+   */
+  async #introspect(token: string): Promise<Introspection | null> {
+    const endpoint = await this.#endpoint();
+    if (!endpoint) {
+      // Fail closed and say why. Falling back to a check that cannot see the
+      // audience would leave the confused-deputy hole open while looking like
+      // it verified something.
+      throw new Error(
+        `The issuer ${this.#options.issuer} publishes no introspection_endpoint. ` +
+          'Set auth.authorization.introspection_endpoint to the URL that answers ' +
+          'questions about a token, or this endpoint cannot check who a token was issued to.',
+      );
+    }
+
+    const posted = await this.#ask(endpoint, {
+      method: 'POST',
+      headers: { 'content-type': 'application/x-www-form-urlencoded' },
+      body: new URLSearchParams({ token }).toString(),
+    });
+    if (posted) return posted;
+
+    const url = new URL(endpoint);
+    url.searchParams.set('access_token', token);
+    return this.#ask(url.toString(), { method: 'GET' });
+  }
+
+  async #ask(url: string, init: RequestInit): Promise<Introspection | null> {
+    try {
+      const response = await this.#fetch(url, { ...init, signal: AbortSignal.timeout(5_000) });
+      if (!response.ok) return null;
+      return normalise((await response.json()) as Record<string, unknown>, this.#now());
+    } catch {
+      return null;
+    }
+  }
+}
+
+/**
+ * One shape out of several spellings of the same three facts.
+ *
+ * `aud` may be a string or an array, and some issuers put the client id in
+ * `azp` instead. Expiry arrives as an absolute `exp` in seconds or as a relative
+ * `expires_in`. Identity is `sub`, and an issuer that also asserts a *verified*
+ * email is asserting something an operator would rather write in an allowlist
+ * than a numeric id — so both are offered, and an unverified one never is.
+ */
+function normalise(body: Record<string, unknown>, now: number): Introspection {
+  const strings = (value: unknown): string[] =>
+    typeof value === 'string' ? [value] : Array.isArray(value) ? value.filter((v) => typeof v === 'string') : [];
+
+  const expiresAt =
+    typeof body['exp'] === 'number'
+      ? body['exp'] * 1000
+      : typeof body['expires_in'] === 'number'
+        ? now + body['expires_in'] * 1000
+        : typeof body['expires_in'] === 'string' && /^\d+$/.test(body['expires_in'])
+          ? now + Number(body['expires_in']) * 1000
+          : null;
+
+  const emailVerified = body['email_verified'];
+  const verified = emailVerified === true || emailVerified === 'true';
+
+  return {
+    // RFC 7662 says `active`. A 200 from an endpoint that does not use the field
+    // is itself the answer, so its absence is not treated as inactive.
+    active: body['active'] !== false,
+    audiences: [...strings(body['aud']), ...strings(body['azp'])],
+    subjects: [
+      ...strings(body['sub']),
+      ...(verified ? strings(body['email']) : []),
+    ],
+    expiresAt,
+  };
+}

package/src/auth/remote.ts

@@ -0,0 +1,72 @@
+import { ownerPrincipal, parseBearer, type AuthOutcome, type Authenticator } from './index.ts';
+import type { OAuthStore } from './oauth/store.ts';
+import type { OidcVerifier } from './oidc.ts';
+
+/**
+ * The two ways a remote client's token becomes a principal.
+ *
+ * Both resolve to the **owner** principal, and that is a deliberate limit rather
+ * than an omission. There is one person behind this endpoint; what a caller may
+ * do is decided by the profile's policy per capability per call, not by which
+ * credential opened the door. Delegated principals are additive later — the
+ * dispatch path already takes a principal rather than assuming the owner — and
+ * inventing a second kind now would mean inventing the policy axis to go with
+ * it before anything needed one.
+ *
+ * Neither of these ever reports `missing` for a credential it simply does not
+ * recognise. That is what the chain's ranking is for: a token this link cannot
+ * place is `invalid` from its point of view and `missing` only if no link saw
+ * anything at all.
+ */
+
+/** A token this endpoint issued through its own authorization flow. */
+export class IssuedTokenAuthenticator implements Authenticator {
+  readonly #store: OAuthStore;
+  readonly #profile: string;
+
+  constructor(store: OAuthStore, profile: string) {
+    this.#store = store;
+    this.#profile = profile;
+  }
+
+  async authenticate(header: string | null | undefined): Promise<AuthOutcome> {
+    const presented = parseBearer(header);
+    if (presented === null) return { ok: false, reason: header ? 'malformed' : 'missing' };
+
+    const record = await this.#store.token(presented);
+    // `kind` matters: a refresh token is a credential for the token endpoint and
+    // must not open the resource. They are indistinguishable as strings, so the
+    // check is the only thing separating them.
+    if (!record || record.kind !== 'access') return { ok: false, reason: 'invalid' };
+
+    return { ok: true, principal: ownerPrincipal(this.#profile) };
+  }
+}
+
+/** A token an external issuer minted, verified against that issuer. */
+export class OidcAuthenticator implements Authenticator {
+  readonly #verifier: OidcVerifier;
+  readonly #profile: string;
+
+  constructor(verifier: OidcVerifier, profile: string) {
+    this.#verifier = verifier;
+    this.#profile = profile;
+  }
+
+  async authenticate(header: string | null | undefined): Promise<AuthOutcome> {
+    const presented = parseBearer(header);
+    if (presented === null) return { ok: false, reason: header ? 'malformed' : 'missing' };
+
+    try {
+      const verified = await this.#verifier.verify(presented);
+      return verified
+        ? { ok: true, principal: ownerPrincipal(this.#profile) }
+        : { ok: false, reason: 'invalid' };
+    } catch {
+      // The issuer being unreachable, or misconfigured, is not an authorisation.
+      // Failing closed here means an outage at the identity provider closes the
+      // endpoint rather than opening it.
+      return { ok: false, reason: 'invalid' };
+    }
+  }
+}

package/src/cli/argv.ts

@@ -0,0 +1,94 @@
+import type { GlobalFlags } from './runtime.ts';
+import type { OwnerFlags } from './commands/owner.ts';
+
+/**
+ * Turning argv into a command path and a flag bag.
+ *
+ * Hand-rolled rather than delegated to a framework: the grammar is small, and a
+ * dependency that parses argv in a process that also holds credential-store
+ * keys is not worth the convenience.
+ *
+ * Separate from `main.ts` so it can be tested. While the parser lived inside
+ * the bin entry it was unreachable — importing the module ran the CLI.
+ */
+
+export type Flags = Record<string, string | boolean>;
+
+export interface Parsed {
+  readonly command: string[];
+  readonly flags: Flags;
+}
+
+export function parseArgv(argv: readonly string[]): Parsed {
+  const command: string[] = [];
+  const flags: Flags = {};
+
+  for (let index = 0; index < argv.length; index++) {
+    const argument = argv[index]!;
+
+    if (!argument.startsWith('--')) {
+      command.push(argument);
+      continue;
+    }
+
+    const body = argument.slice(2);
+    const equals = body.indexOf('=');
+
+    if (equals !== -1) {
+      flags[body.slice(0, equals)] = body.slice(equals + 1);
+      continue;
+    }
+
+    const next = argv[index + 1];
+    if (next !== undefined && !next.startsWith('--')) {
+      flags[body] = next;
+      index++;
+    } else {
+      flags[body] = true;
+    }
+  }
+
+  return { command, flags };
+}
+
+/**
+ * A flag's value, when it was given one.
+ *
+ * `--profile` with nothing after it parses to `true`, which is not a profile
+ * name — so every string-valued flag has to check, and this is that check
+ * written once.
+ */
+export function text(flags: Flags, name: string): string | undefined {
+  const value = flags[name];
+  return typeof value === 'string' ? value : undefined;
+}
+
+/** The flags every command accepts. */
+export function globalFlags(flags: Flags): GlobalFlags {
+  return {
+    profile: text(flags, 'profile'),
+    target: text(flags, 'target'),
+    quiet: flags['quiet'] === true,
+  };
+}
+
+/**
+ * The owner layer's flags — the global set plus what `memory`, `skills` and
+ * `vault` add.
+ *
+ * The kebab-case spellings live here and nowhere else, so the one place that
+ * knows `--display-name` is the one place that parses argv.
+ */
+export function ownerFlags(flags: Flags): OwnerFlags {
+  return {
+    ...globalFlags(flags),
+    show: flags['show'] === true,
+    raw: flags['raw'] === true,
+    connection: text(flags, 'connection'),
+    title: text(flags, 'title'),
+    tag: text(flags, 'tag'),
+    description: text(flags, 'description'),
+    file: text(flags, 'file'),
+    yes: flags['yes'] === true,
+  };
+}

package/src/cli/callback-page.ts

@@ -0,0 +1,256 @@
+/**
+ * The page the browser lands on when a connect flow ends.
+ *
+ * It is the only HTML this repository serves to a human, and for a few seconds
+ * it is the whole product — so it is the product's own page rather than a
+ * bespoke one. The design is lifted from the pages the Lanes API serves after
+ * someone authorises something (the workspace invite and the email
+ * verification): an outline-only card, a Lora heading, native text softened
+ * with opacity, and the shared one-row footer.
+ *
+ * Two decisions are worth keeping:
+ *
+ * - **Nothing is painted.** `color-scheme: light dark` plus a transparent
+ *   background means the browser supplies its own canvas, so the page is
+ *   correct in either mode without a theme switch, a media query per colour, or
+ *   a preference to read. It replaced a hardcoded `#0d1117`, which was a black
+ *   rectangle on a light machine.
+ * - **Colour is reserved for status.** Not for emphasis, and not for the
+ *   heading — a green *word* said nothing the word "Connected" did not, and
+ *   that is why it went. A check is different: it is the glyph the Lanes app
+ *   already puts against a connected integration, so a reader arriving from the
+ *   app meets the mark they left it with. Both outcomes carry one now, the
+ *   check on success and the red heading on failure, and nothing else does.
+ *
+ * Lora is fetched from Google Fonts, as the API pages do; the fallback stack
+ * carries the page on a machine with no network, which is the state a failed
+ * authorisation is sometimes in.
+ */
+
+export interface CallbackPage {
+  /** The focal line, set in Lora. A provider name, or the outcome itself. */
+  readonly heading: string;
+  /** The small line above it — "Connected" over the name of what was. */
+  readonly label?: string;
+  /** What the reader should do next. */
+  readonly detail: string;
+  readonly ok: boolean;
+}
+
+/**
+ * Escape text for an HTML body.
+ *
+ * `escapeXml` in `connectivity/transports/dav/xml.ts` would do, and `cli` is
+ * allowed to import `connectivity` — but a page renderer reaching into a DAV
+ * transport for a string function is a dependency nobody would defend. Five
+ * lines is cheaper than the coupling.
+ *
+ * This is load-bearing: `heading` carries a provider's `manifest.name`, and a
+ * custom provider supplies that from a YAML file of its own.
+ */
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+/**
+ * Harmonised with the Lanes API's public pages, which are themselves harmonised
+ * with the transactional emails — same dashed card, same Lora, same footer, so
+ * the end of a connect flow reads as the same product as the invite that
+ * preceded it.
+ */
+const STYLE = `
+:root { color-scheme: light dark; }
+* { box-sizing: border-box; }
+body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+       display: flex; align-items: center; justify-content: center;
+       min-height: 100vh; margin: 0; background: transparent; padding: 24px; }
+.wrap { width: 100%; max-width: 460px; text-align: center; }
+.card { background: transparent; border: 1px dashed rgba(120,113,108,0.35); border-radius: 10px;
+        padding: 48px 36px; }
+.label { margin: 0 0 6px; font-size: 15px; font-weight: 500; letter-spacing: 0.01em; opacity: 0.6; }
+h1 { font-family: "Lora", Georgia, "Times New Roman", serif; font-size: 28px; font-weight: 500;
+     letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 18px; }
+.detail { margin: 0; font-size: 15px; line-height: 1.6; opacity: 0.75; }
+.icon { display: block; margin: 0 auto 18px; color: #059669; }
+.footer { margin: 24px 0 0; }
+.footer p { margin: 0; font-size: 12px; line-height: 1.5; opacity: 0.5; }
+.footer a { color: inherit; text-decoration: underline; }
+.err h1 { color: #A06060; }
+@media (prefers-color-scheme: dark) {
+  .err h1 { color: #C08080; }
+  .icon { color: #34D399; }
+}
+`.trim();
+
+/** The one-row footer below the card, identical to the one the API pages carry. */
+const FOOTER =
+  '<div class="footer"><p>Your unfair advantage in parallel AI coding. ' +
+  '<a href="https://lanes.sh/">lanes.sh</a></p></div>';
+
+/**
+ * The success mark, above the label.
+ *
+ * The glyph and the emerald are the Lanes app's, so a connected provider looks
+ * the same wherever it is reported — lucide's `check` at #059669, lightened to
+ * #34D399 on a dark canvas because the darker green does not survive it.
+ *
+ * `aria-hidden` because the word underneath is the announcement; a screen
+ * reader hearing "Connected" does not also need to hear about a tick.
+ */
+const ICON =
+  '<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="28" height="28" ' +
+  'viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" ' +
+  'stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+  '<path d="M20 6 9 17l-5-5"/></svg>';
+
+export interface ApprovalPage {
+  /** What is asking. A client's self-reported name, or a stand-in. */
+  readonly client: string;
+  /** Where the code would be sent. The part of the request that cannot be faked. */
+  readonly redirectHost: string;
+  /** Hidden fields carrying the authorization request through the POST. */
+  readonly fields: Readonly<Record<string, string>>;
+  readonly action: string;
+  /** A previous attempt presented the wrong token. */
+  readonly retry: boolean;
+  /** The target this endpoint runs as, so the hint below names the right store. */
+  readonly target: string;
+}
+
+/**
+ * The one screen a remote client's authorization stops at.
+ *
+ * Same card as the page above, because it is the same product and the reader
+ * arrived here from a connector rather than from a terminal. What it asks for is
+ * the endpoint token — the string `lanes link outputs` prints — because that is
+ * already the proof of being the owner and inventing a second one would mean
+ * inventing a password to go with it.
+ *
+ * The hint names the target rather than leaving it out. Credentials are
+ * per-target, and the reader runs that command in a shell resolving a target of
+ * its own — `local` by default, which is the one store a deployed endpoint's
+ * token is never in. Omitting it sends them to fetch the wrong secret, and
+ * `outputs` mints a fresh one when that store is empty rather than saying so.
+ *
+ * `autocomplete="off"` and `type="password"` are not theatre: this form is
+ * submitted in whatever browser the phone opened, and a token remembered by a
+ * shared browser is a token in the hands of whoever borrows the phone.
+ */
+export function approvalPage(page: ApprovalPage): Response {
+  const hidden = Object.entries(page.fields)
+    .map(([name, value]) => `<input type="hidden" name="${escapeHtml(name)}" value="${escapeHtml(value)}">`)
+    .join('\n');
+
+  // The name is self-reported and the host is not, so the host is what the
+  // reader is asked to recognise. Registration is open by design, which means
+  // anything can call itself anything — but an impostor still has to nominate
+  // somewhere for the code to go, and that is on the screen.
+  const body = `
+${page.retry ? '<p class="label err-text">That token was not accepted.</p>\n' : ''}<h1>Authorise ${escapeHtml(page.client)}?</h1>
+<p class="detail">It will be sent back to <strong>${escapeHtml(page.redirectHost)}</strong>, and will be able to reach every profile this endpoint serves, within the policy each one declares.</p>
+<form method="post" action="${escapeHtml(page.action)}">
+${hidden}
+<input class="field" type="password" name="token" placeholder="Endpoint token" autocomplete="off" autofocus required>
+<button class="go" type="submit">Approve</button>
+</form>
+<p class="detail small">Printed by <code>lanes link outputs --show --target ${escapeHtml(page.target)}</code>.</p>`;
+
+  return page.retry ? shell(body, 'Authorise', 401) : shell(body, 'Authorise', 200);
+}
+
+function shell(inner: string, title: string, status: number): Response {
+  return new Response(
+    `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500&amp;display=swap" rel="stylesheet">
+<title>${escapeHtml(title)}</title>
+<style>
+${STYLE}
+${FORM_STYLE}
+</style>
+</head>
+<body>
+<div class="wrap">
+<div class="card">
+${inner}
+</div>
+${FOOTER}
+</div>
+</body>
+</html>`,
+    {
+      status,
+      headers: {
+        'content-type': 'text/html; charset=utf-8',
+        // One of these pages asks for the endpoint token in a password field.
+        // Framing it is the cheap half of a UI-redress attack, and nothing here
+        // is ever meant to be embedded — so refuse it in both spellings, since
+        // `frame-ancestors` is the one that is actually specified and
+        // `X-Frame-Options` is the one older browsers obey.
+        'content-security-policy': "frame-ancestors 'none'",
+        'x-frame-options': 'DENY',
+        // The URL carries a `client_id` and a `redirect_uri`; neither belongs in
+        // a Referer sent to whatever the page links out to.
+        'referrer-policy': 'no-referrer',
+      },
+    },
+  );
+}
+
+const FORM_STYLE = `
+.field { width: 100%; margin: 20px 0 12px; padding: 11px 13px; font: inherit; font-size: 15px;
+         color: inherit; background: transparent; border: 1px solid rgba(120,113,108,0.45);
+         border-radius: 7px; }
+.field:focus { outline: none; border-color: rgba(120,113,108,0.9); }
+.go { width: 100%; padding: 11px 13px; font: inherit; font-size: 15px; font-weight: 500;
+      color: inherit; background: transparent; border: 1px solid rgba(120,113,108,0.55);
+      border-radius: 7px; cursor: pointer; }
+.go:hover { border-color: rgba(120,113,108,0.95); }
+.small { margin-top: 14px; font-size: 12px; opacity: 0.55; }
+.small code { font-size: 12px; }
+.err-text { color: #A06060; opacity: 1; }
+@media (prefers-color-scheme: dark) { .err-text { color: #C08080; } }
+`.trim();
+
+export function completionPage(page: CallbackPage): Response {
+  const { heading, label, detail, ok } = page;
+
+  // The tab strip truncates to a few characters, and the word that has to
+  // survive that is the outcome — not the name of what was connected.
+  const title = escapeHtml(label ?? heading);
+
+  return new Response(
+    `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500&amp;display=swap" rel="stylesheet">
+<title>${title}</title>
+<style>
+${STYLE}
+</style>
+</head>
+<body>
+<div class="wrap">
+<div class="card${ok ? '' : ' err'}">
+${ok ? `${ICON}\n` : ''}${label ? `<p class="label">${escapeHtml(label)}</p>\n` : ''}<h1>${escapeHtml(heading)}</h1>
+<p class="detail">${escapeHtml(detail)}</p>
+</div>
+${FOOTER}
+</div>
+</body>
+</html>`,
+    { status: ok ? 200 : 400, headers: { 'content-type': 'text/html; charset=utf-8' } },
+  );
+}