@lanes-sh/link 0.2.1 → 0.3.0

package/src/cli/argv.ts

@@ -1,5 +1,6 @@
 import type { GlobalFlags } from './runtime.ts';
 import type { OwnerFlags } from './commands/owner.ts';
+import type { KnowledgeFlags } from './commands/knowledge.ts';
 
 /**
  * Turning argv into a command path and a flag bag.
@@ -63,6 +64,32 @@ export function text(flags: Flags, name: string): string | undefined {
   return typeof value === 'string' ? value : undefined;
 }
 
+/**
+ * Every value given for a flag, in order.
+ *
+ * `profile add --target local --target cloud` is the one command where a flag
+ * legitimately repeats: it is declaring a list, not selecting one thing. The
+ * parser keeps the last value in `flags`, so this re-reads argv rather than
+ * changing that shape for every other flag's sake.
+ */
+export function all(argv: readonly string[], name: string): string[] {
+  const values: string[] = [];
+
+  for (let i = 0; i < argv.length; i++) {
+    const token = argv[i]!;
+    if (token === `--${name}`) {
+      const next = argv[i + 1];
+      if (next !== undefined && !next.startsWith('--')) values.push(next);
+      continue;
+    }
+    if (token.startsWith(`--${name}=`)) values.push(token.slice(name.length + 3));
+  }
+
+  // Comma-separated is the other spelling people reach for, and refusing it
+  // would be a refusal with no reason behind it.
+  return values.flatMap((value) => value.split(',').map((part) => part.trim())).filter(Boolean);
+}
+
 /** The flags every command accepts. */
 export function globalFlags(flags: Flags): GlobalFlags {
   return {
@@ -92,3 +119,26 @@ export function ownerFlags(flags: Flags): OwnerFlags {
     yes: flags['yes'] === true,
   };
 }
+
+/**
+ * `lanes link knowledge`'s flags.
+ *
+ * Here for the reason `ownerFlags` is: the kebab-case spellings belong in the
+ * one place that parses argv, so `--allow-public` is written once rather than
+ * once per reader.
+ */
+export function knowledgeFlags(flags: Flags): KnowledgeFlags {
+  return {
+    ...globalFlags(flags),
+    repo: text(flags, 'repo'),
+    branch: text(flags, 'branch'),
+    path: text(flags, 'path'),
+    // `--migrate`, `--no-migrate`, or neither — see `KnowledgeFlags.migrate`.
+    migrate: flags['migrate'] === true ? true : flags['no-migrate'] === true ? false : undefined,
+    keep: flags['keep'] === true,
+    allowPublic: flags['allow-public'] === true,
+    replace: flags['replace'] === true,
+    yes: flags['yes'] === true,
+    json: flags['json'] === true,
+  };
+}

package/src/cli/brand.ts

@@ -0,0 +1,178 @@
+/**
+ * The Lanes design tokens, and the pieces every page this repository serves is
+ * built from.
+ *
+ * Three surfaces render HTML — the authorization consent screen, the page a
+ * connect flow lands on, and the dashboard — and until this file existed each
+ * carried its own approximation of the brand. They had drifted: two greens and
+ * two ambers that are not tokens at all, nine different alphas standing in for
+ * one border colour, a destructive red with a dark variant the token does not
+ * have, and the system font stack where Geist belongs.
+ *
+ * Values are transcribed from https://lanes.sh/design/foundations. The rules
+ * they express, which the CSS below encodes rather than restates:
+ *
+ * - **Gold is the only accent.** "Gold for positive, neutral tokens otherwise."
+ *   That is why there is no green here: a connection that works is `positive`,
+ *   which is gold, and everything else is one of two neutrals. `--destructive`
+ *   is for errors, not for a state that merely needs attention.
+ * - **Two weights, 400 and 500.** Nothing else is available in the loaded faces,
+ *   so a heavier rule would silently synthesise.
+ * - **Lora heads, Geist speaks, Geist Mono for code and eyebrow labels.**
+ *
+ * `--border`, `--accent-gold` and `--destructive` are constant across themes.
+ * Only the five neutrals swap, which is why the dark block below is five lines
+ * rather than a second stylesheet.
+ */
+
+/**
+ * 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.
+ *
+ * Load-bearing: these pages render a provider's `manifest.name`, and a custom
+ * provider supplies that from a YAML file of its own.
+ */
+export function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+/**
+ * One request for all three faces.
+ *
+ * `preconnect` to both hosts because the stylesheet and the font files it names
+ * are served from different origins, and the second lookup is otherwise not
+ * started until the first has parsed.
+ */
+export const FONTS =
+  '<link rel="preconnect" href="https://fonts.googleapis.com">\n' +
+  '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\n' +
+  '<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500' +
+  '&amp;family=Geist:wght@400;500&amp;family=Lora:wght@400;500&amp;display=swap" rel="stylesheet">';
+
+/** The one-row footer, identical to the one the Lanes API's own pages carry. */
+export const FOOTER =
+  '<div class="footer"><p>Your unfair advantage in parallel AI coding. ' +
+  '<a href="https://lanes.sh/">lanes.sh</a></p></div>';
+
+/**
+ * The tokens, and the base every page shares.
+ *
+ * The background is **painted**, which reverses what these pages used to do.
+ * The old note read "nothing is painted" — a transparent body under
+ * `color-scheme: light dark` so the browser supplied its own canvas — and it
+ * was written to fix a hardcoded `#0d1117` that showed as a black rectangle on
+ * a light machine. The design system settles that differently: it names a
+ * background for each mode, so the fix is to paint the right one rather than
+ * none. `color-scheme` stays, because form controls and scrollbars still need
+ * to know which mode they are in.
+ */
+export const TOKENS = `
+:root {
+  color-scheme: light dark;
+  --background: #EBEAE7;
+  --card: #F0EFEC;
+  --muted: #E2E1DD;
+  --foreground: #171717;
+  --muted-foreground: #202329;
+  --border: rgba(120,113,108,0.2);
+  --accent-gold: #A1845A;
+  --destructive: #A06060;
+  /* The two tints the badge variants need. Spelled as rgba rather than
+     color-mix because the consent screen opens in whatever browser a phone
+     happens to use, and both accents are constant across themes anyway. */
+  --gold-fill: rgba(161,132,90,0.1);
+  --gold-ring: rgba(161,132,90,0.25);
+  --destructive-fill: rgba(160,96,96,0.1);
+  --destructive-ring: rgba(160,96,96,0.25);
+  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --serif: "Lora", Georgia, "Times New Roman", serif;
+  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #171717;
+    --card: #292524;
+    --muted: #202329;
+    --foreground: #EBEAE7;
+    --muted-foreground: #A8A29E;
+  }
+}
+* { box-sizing: border-box; }
+body { margin: 0; font-family: var(--sans); font-weight: 400;
+       background: var(--background); color: var(--foreground); }
+h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; margin: 0; }
+h1 { font-size: 28px; line-height: 1.3; }
+code, .mono { font-family: var(--mono); }
+a { color: inherit; }
+
+/* Eyebrow: 11px, uppercase, wide tracking, muted — and mono, which is where the
+   design system puts label type. */
+.eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 400;
+           letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-foreground);
+           opacity: 0.75; }
+
+/* Surfaces are dashed and 10px; controls are 6px; pills are round. */
+.surface { background: var(--card); border: 1px dashed var(--border); border-radius: 10px; }
+
+/* The four badge variants, as the design system defines them: gold for
+   positive, neutral tokens otherwise, destructive for an error only. The ring
+   is an inset shadow so it costs no layout, exactly as \`ring-inset\` does. */
+.pill { display: inline-flex; align-items: center; flex: none; white-space: nowrap;
+        font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
+        padding: 2px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border); }
+.pill.positive { background: var(--gold-fill); color: var(--accent-gold);
+                 box-shadow: inset 0 0 0 1px var(--gold-ring); }
+.pill.neutral { background: var(--muted); color: var(--muted-foreground); }
+.pill.quiet { background: transparent; color: var(--muted-foreground); opacity: 0.7; }
+.pill.negative { background: var(--destructive-fill); color: var(--destructive);
+                 box-shadow: inset 0 0 0 1px var(--destructive-ring); }
+
+/* Ghost is the variant every button on these pages is: muted until it is
+   wanted, and never gold, because gold is reserved for saying a thing is good. */
+.btn { font: inherit; font-size: 12px; font-weight: 500; line-height: 1;
+       padding: 6px 9px; border-radius: 6px; cursor: pointer;
+       background: transparent; color: var(--muted-foreground);
+       border: 1px solid var(--border); }
+.btn:hover, .btn:focus-visible { color: var(--foreground); background: var(--muted); }
+
+.footer { margin: 40px 0 0; text-align: center; }
+.footer p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted-foreground); opacity: 0.75; }
+.footer a { text-decoration: underline; }
+`.trim();
+
+/**
+ * What every page these modules serve loads, and nothing else.
+ *
+ * The font stylesheet and the faces it names are the only two origins any of
+ * them reaches; `default-src 'none'` closes the rest. No `script-src`, because
+ * these pages have no script — the dashboard, which has one listener, extends
+ * this rather than replacing it.
+ */
+export const PAGE_CSP =
+  "frame-ancestors 'none'; default-src 'none'; " +
+  "style-src 'unsafe-inline' https://fonts.googleapis.com; " +
+  'font-src https://fonts.gstatic.com';
+
+/**
+ * Headers every page here answers with.
+ *
+ * `frame-ancestors` in both spellings: one of these pages asks for the endpoint
+ * token and another lists the owner's accounts, and framing either is the cheap
+ * half of a UI-redress attack. The URLs carry a `client_id`, a `redirect_uri`,
+ * or a one-time key, none of which belongs in a Referer.
+ */
+export const PAGE_HEADERS: Readonly<Record<string, string>> = {
+  'content-type': 'text/html; charset=utf-8',
+  'content-security-policy': PAGE_CSP,
+  'x-frame-options': 'DENY',
+  'referrer-policy': 'no-referrer',
+};

package/src/cli/callback-page.ts

@@ -1,32 +1,33 @@
 /**
- * The page the browser lands on when a connect flow ends.
+ * The two pages a browser reaches on its way through an authorization.
  *
- * 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.
+ * `approvalPage` is the consent screen a remote MCP client stops at;
+ * `completionPage` is where a provider connect flow lands. For a few seconds
+ * each of them is the whole product, so both are the product's own page: the
+ * dashed card, the Lora heading, and the shared one-row footer that the Lanes
+ * API serves after a workspace invite or an email verification.
  *
- * Two decisions are worth keeping:
+ * Everything visual now comes from `brand.ts`. Two decisions this file used to
+ * record have been settled the other way by the design system, and are worth
+ * naming because both look like regressions otherwise:
  *
- * - **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.
+ * - **The canvas is painted.** This used to be transparent under
+ *   `color-scheme: light dark`, so the browser supplied its own — a fix for a
+ *   hardcoded `#0d1117` that read as a black rectangle on a light machine. The
+ *   system names a background per mode, so the fix is now to paint the right
+ *   one. `color-scheme` stays, for form controls and scrollbars.
+ * - **The success mark is gold, not green.** It was lucide's `check` at
+ *   `#059669`, chosen to match the tick the Lanes app puts against a connected
+ *   integration. The design system is explicit that gold is the only accent and
+ *   "gold for positive, neutral tokens otherwise", so the green was the odd one
+ *   out rather than the match it was meant to be.
  *
- * 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.
+ * What has not changed is that colour is reserved for status and spent nowhere
+ * else — not on emphasis, and not on the heading.
  */
 
+import { escapeHtml, FONTS, FOOTER, PAGE_CSP, PAGE_HEADERS, TOKENS } from './brand.ts';
+
 export interface CallbackPage {
   /** The focal line, set in Lora. A provider name, or the outcome itself. */
   readonly heading: string;
@@ -38,69 +39,29 @@ export interface CallbackPage {
 }
 
 /**
- * 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.
+ * The card, centred. Everything else is `brand.ts`.
  */
 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; }
+body { display: flex; align-items: center; justify-content: center;
+       min-height: 100vh; 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; }
-}
+.card { padding: 48px 36px; }
+.label { margin: 0 0 6px; font-size: 15px; font-weight: 500; color: var(--muted-foreground); }
+h1 { margin: 0 0 18px; }
+.detail { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted-foreground); }
+.icon { display: block; margin: 0 auto 18px; color: var(--accent-gold); }
+.err h1 { color: var(--destructive); }
 `.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.
+ * lucide's `check`, in `--accent-gold` — which is what "gold for positive"
+ * means when the positive thing is a connection that now works. It carries no
+ * colour of its own; `.icon` sets it, so it follows the token if the token moves.
  *
- * `aria-hidden` because the word underneath is the announcement; a screen
- * reader hearing "Connected" does not also need to hear about a tick.
+ * `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" ' +
@@ -158,49 +119,70 @@ ${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>`;
+<p class="small"><code>lanes link outputs --show --target ${escapeHtml(page.target)}</code></p>`;
 
-  return page.retry ? shell(body, 'Authorise', 401) : shell(body, 'Authorise', 200);
+  return shell(body, 'Authorise', page.retry ? 401 : 200, '', SUBMIT_SPINNER);
 }
 
-function shell(inner: string, title: string, status: number): Response {
+/**
+ * What runs while the approval is in flight.
+ *
+ * Approving is a round trip to an authorization server, and until it returns the
+ * page looks exactly as it did before the click — so the honest reading is that
+ * nothing happened, and the second click is the one that produces a duplicated
+ * request. The button disables itself, which is the part that matters; the
+ * spinner is what says why.
+ *
+ * The cost is real and worth naming: this is the one page that asks for the
+ * endpoint token, and an inline listener means its policy admits inline script.
+ * It is the minimum that does the job — one listener, no interpolation, nothing
+ * read from the page — and the alternative, a static file, is an asset pipeline
+ * this repository does not have.
+ */
+const SUBMIT_SPINNER = `
+document.querySelector('form').addEventListener('submit', function (event) {
+  var button = event.currentTarget.querySelector('.go');
+  button.classList.add('busy');
+  button.disabled = true;
+});
+`.trim();
+
+function shell(
+  inner: string,
+  title: string,
+  status: number,
+  cardClass = '',
+  script = '',
+): 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">
+${FONTS}
 <title>${escapeHtml(title)}</title>
 <style>
+${TOKENS}
 ${STYLE}
 ${FORM_STYLE}
 </style>
 </head>
 <body>
 <div class="wrap">
-<div class="card">
+<div class="card surface${cardClass}">
 ${inner}
 </div>
 ${FOOTER}
 </div>
+${script ? `<script>\n${script}\n</script>` : ''}
 </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',
+        ...PAGE_HEADERS,
+        ...(script ? { 'content-security-policy': `${PAGE_CSP}; script-src 'unsafe-inline'` } : {}),
       },
     },
   );
@@ -208,17 +190,30 @@ ${FOOTER}
 
 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); }
+         color: inherit; background: var(--background); border: 1px solid var(--border);
+         border-radius: 6px; }
+.field:focus { outline: none; border-color: var(--accent-gold); }
 .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; }
+      color: var(--foreground); background: transparent; border: 1px solid var(--border);
+      border-radius: 6px; cursor: pointer; }
+.go:hover { background: var(--muted); }
+.small { margin-top: 16px; font-size: 12px; color: var(--muted-foreground); opacity: 0.8; }
 .small code { font-size: 12px; }
-.err-text { color: #A06060; opacity: 1; }
-@media (prefers-color-scheme: dark) { .err-text { color: #C08080; } }
+.err-text { color: var(--destructive); }
+
+/* The button, mid-flight. The label goes transparent rather than away, so the
+   button keeps the width it had and the card does not reflow under the cursor. */
+.go.busy { color: transparent; position: relative; pointer-events: none; }
+.go.busy::after { content: ''; position: absolute; inset: 0; margin: auto;
+                  width: 15px; height: 15px; border-radius: 50%;
+                  border: 2px solid var(--border); border-top-color: var(--foreground);
+                  animation: spin 0.6s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+/* Monochrome deliberately: gold says a thing turned out well, and a request in
+   flight has not turned out yet. */
+@media (prefers-reduced-motion: reduce) {
+  .go.busy::after { animation-duration: 2.4s; }
+}
 `.trim();
 
 export function completionPage(page: CallbackPage): Response {
@@ -226,31 +221,16 @@ export function completionPage(page: CallbackPage): Response {
 
   // 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);
+  const title = 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' } },
-  );
+  const body =
+    `${ok ? `${ICON}\n` : ''}` +
+    `${label ? `<p class="label">${escapeHtml(label)}</p>\n` : ''}` +
+    `<h1>${escapeHtml(heading)}</h1>` +
+    `<p class="detail">${escapeHtml(detail)}</p>`;
+
+  // Through the same shell as the consent screen, rather than a second copy of
+  // the document. They were already meant to be one page; only the error class
+  // on the card differs.
+  return shell(body, title, ok ? 200 : 400, ok ? '' : ' err');
 }

package/src/cli/commands/connect/accounts.ts

@@ -92,3 +92,8 @@ export async function moveCredential(
   await credentials.set(to, value);
   await credentials.delete(from);
 }
+
+/** What a spec that named an account rather than a provider turned out to mean. */
+export function familyNote(providerId: string, family: readonly string[]): string {
+  return `${providerId} is ${family.length} services on one account: ${family.join(', ')}`;
+}