@bongos/core 1.24.52 → 1.24.53

package/modules/discord/webhook.js

@@ -71,16 +71,36 @@ function capContent(text) {
   return String(text).slice(0, 2000);
 }
 
+// THE BRAND ON A POST (task 1005091). A broadcast goes out as an EMBED, not as bare
+// message text: the same words as the embed's description, with the pack's accent as
+// the embed's colour bar, so every post in a channel reads as the product's. The
+// description cap is 4096 (an embed's own limit). Mentions inside an embed never ring,
+// which is #871's rule anyway; allowed_mentions stays parse:[] belt-and-braces.
+// The pack's accent as Discord's integer colour, or null (no bar) when it is not a hex.
+function brandColor(brand) {
+  let accent = '';
+  try { accent = ((brand || api.clientBranding()).theme || {}).colors.accent || ''; } catch { accent = ''; }
+  const m = /^#([0-9a-f]{6})$/i.exec(String(accent).trim());
+  return m ? parseInt(m[1], 16) : null;
+}
+// The body of a broadcast post: one embed carrying the text, coloured with the accent.
+function embedBody(text, brand) {
+  const embed = { description: String(text).slice(0, 4096) };
+  const color = brandColor(brand);
+  if (color !== null) embed.color = color;
+  return { embeds: [embed], allowed_mentions: { parse: [] } };
+}
+
 // R22 (the board mirror) needs the id of the message it just posted so the close
 // can be edited onto it, so the POST asks for the created message back
 // (`?wait=true` — Discord then answers 200 + the message JSON instead of 204 with
 // no body). The extra field is additive: every existing caller ignores the return.
-async function postCore(channel, text, allowedMentions) {
+async function postCore(channel, body) {
   const url = resolveWebhookUrl(channel);
   const res = await fetch(`${url}${url.includes('?') ? '&' : '?'}wait=true`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ content: capContent(text), allowed_mentions: allowedMentions }),
+    body: JSON.stringify(body),
   });
   if (!res.ok) {
     const body = await res.text().catch(() => '');
@@ -96,7 +116,7 @@ async function postCore(channel, text, allowedMentions) {
 // attacker-influenceable; allowed_mentions:{parse:[]} renders text verbatim but
 // fires zero notifications. (Discord defaults to parsing mentions when omitted.)
 async function postWebhook(channel, text) {
-  return postCore(channel, text, { parse: [] });
+  return postCore(channel, embedBody(text));
 }
 
 // postWebhookMentions — the ONE sanctioned exception to #871's blanket mention
@@ -104,10 +124,12 @@ async function postWebhook(channel, text) {
 // notice"). Still parse:[] — nothing typed INTO the content can ever ping — but
 // an explicit `users` allowlist lets exactly the named ids ring. The ids must
 // come from the board-membership resolve (server data), NEVER from message
-// text; the cap of 20 is a sanity bound far above any real board.
+// text; the cap of 20 is a sanity bound far above any real board. It stays
+// MESSAGE TEXT, not an embed: a mention inside an embed never rings, and ringing
+// is this post's whole job (R22's edit rewrites the same text in place).
 async function postWebhookMentions(channel, text, userIds = []) {
   const users = [...new Set(userIds.filter((u) => /^\d+$/.test(String(u))))].slice(0, 20).map(String);
-  return postCore(channel, text, { parse: [], users });
+  return postCore(channel, { content: capContent(text), allowed_mentions: { parse: [], users } });
 }
 
 // editWebhook — rewrite a message this webhook already posted, in place (R22 of
@@ -149,5 +171,5 @@ function hasWebhook(channel) {
 
 module.exports = {
   CHANNELS, WEBHOOKS_PATH, loadWebhooks, resolveWebhookUrl, hasWebhook,
-  postWebhook, postWebhookMentions, editWebhook,
+  postWebhook, postWebhookMentions, editWebhook, embedBody,
 };

package/modules/public-landing/public/index.html

@@ -320,10 +320,10 @@ h2{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,3.1vw,42
 .figline:empty ~ .meter,.figline:empty ~ .sub{display:none}
 .rows:empty{display:none}
 
-/* verro labs: medallion, wordmark, one paragraph, no frame */
+/* the maker's band (the pack's company): medallion, wordmark, one paragraph, no frame */
 .verro{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4vw,58px);align-items:start}
 .verro img{width:clamp(92px,9vw,124px);height:auto}
-.wordmark{font-family:var(--font-mono);font-size:13px;letter-spacing:.3em;color:var(--ink)}
+.wordmark{font-family:var(--font-mono);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink)}
 .verro p.body{margin-top:18px;font-size:17.5px;line-height:1.55;color:var(--ink-soft);max-width:62ch}
 
 /* the basics: two columns, never three */
@@ -781,7 +781,7 @@ composition A; landing composition v3, picked by the owner 2026-08-27. No roll,
   <section class="band">
     <div class="wrap">
       <h2>Built on Bongos.</h2>
-      <p class="sub">At present, all Bongos projects are held by Verro Labs or its pilot clients.</p>
+      <!--brand-if:companyName--><p class="sub">At present, all Bongos projects are held by {{companyName}} or its pilot clients.</p><!--/brand-if:companyName-->
       <ul class="orbs" data-orbs>
         <li class="orb-item o1">
           <span class="orb-bead" aria-hidden="true"></span>
@@ -885,16 +885,19 @@ composition A; landing composition v3, picked by the owner 2026-08-27. No roll,
   </section>
 
 <!--apex-only:start-->
-  <section class="band">
+  <!-- The maker's band (task 1005091): the company is the pack's (identity.company), never
+       a name written into the portable landing, and the band drops whole when the pack
+       names none. The medallion is the hub's own asset. -->
+  <!--brand-if:companyName--><section class="band">
     <div class="wrap verro">
       <img src="/assets/verro-medallion.png" width="384" height="384" loading="lazy" decoding="async"
-           alt="The Verro Labs mark: a galaxy and constellation above a river valley threaded with circuitry">
+           alt="The {{companyName}} mark">
       <div>
-        <p class="wordmark">VERRO LABS</p>
-        <p class="body">Built by Verro Labs, Cloud Bongos is our way of making AI co-building usable by entire project groups, whether that's a 5,000-person company, a 100-person department, a college research project, or a solo dev.</p>
+        <p class="wordmark">{{companyName}}</p>
+        <p class="body">Built by {{companyName}}, {{productName}} is our way of making AI co-building usable by entire project groups, whether that's a 5,000-person company, a 100-person department, a college research project, or a solo dev.</p>
       </div>
     </div>
-  </section>
+  </section><!--/brand-if:companyName-->
 <!--apex-only:end-->
 
 <!--apex-only:start-->

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.52",
+  "version": "1.24.53",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bongos/core",
-      "version": "1.24.52",
+      "version": "1.24.53",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "express": "^4.21.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.52",
+  "version": "1.24.53",
   "description": "Cloud Bongos — the AI-first build platform core (GDS + platform surfaces + module system), installed as a versioned dependency (ADR 0108).",
   "license": "AGPL-3.0-or-later",
   "main": "src/platform-server.js",

package/public-docs/index.html

@@ -5,31 +5,126 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>{{productName}} — API docs</title>
   <meta name="description" content="{{productName}} API reference (OpenAPI 3.1)." />
+  <link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
+  <!-- The brand (task 1005091): the shared scales, and — spliced by the server at the end
+       of <head> — the pack's colours, its font links and its favicon. Redoc paints the
+       reference below with the same tokens, read once at load in whichever mode the
+       reader is in (the script at the foot). No CDN: Redoc and the spec are served here. -->
+  <link rel="stylesheet" href="/modules/ui-design/public/tokens.css">
   <style>
-    /* Self-contained: no external fonts/CSS. Redoc paints the rest. */
-    html, body { margin: 0; padding: 0; }
+    /* The fallback contract tier at zero specificity: the pack's spliced :root wins. */
+    :where(html) {
+      --bg: #edecee; --bg-card: #fbfafc; --bg-deep: #e2e1e4; --ink: #17181a; --ink-soft: #55565a;
+      --ink-faint: #65656a; --rule: #c6c6c8; --rule-soft: #dcdbdd; --accent: #fb9569;
+      --accent-deep: #a3481a; --sea: #5b6fd0;
+      --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
+      --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
+    }
+    html {
+      color-scheme: light;
+      --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
+      --accent-ink: color-mix(in srgb, var(--accent) 45%, #240e00);
+      --focus: color-mix(in srgb, var(--accent-deep) 82%, #3a1400);
+      --code-bg: color-mix(in srgb, var(--ink) 5%, var(--bg-card));
+    }
+    /* dark: written twice, byte-identical (the hall's pair) */
+    html[data-theme="dark"] {
+      color-scheme: dark;
+      --bg: #000000; --bg-card: #101012; --bg-deep: #000000; --ink: #ffffff; --ink-soft: #c0c0c0;
+      --ink-faint: #a8a8a8; --rule: rgba(255, 255, 255, .16); --rule-soft: rgba(255, 255, 255, .08);
+      --accent-ink: var(--accent); --focus: var(--accent);
+      --code-bg: color-mix(in srgb, var(--ink) 8%, var(--bg-card));
+    }
+    @media (prefers-color-scheme: dark) {
+      html:not([data-theme]) {
+        color-scheme: dark;
+        --bg: #000000; --bg-card: #101012; --bg-deep: #000000; --ink: #ffffff; --ink-soft: #c0c0c0;
+        --ink-faint: #a8a8a8; --rule: rgba(255, 255, 255, .16); --rule-soft: rgba(255, 255, 255, .08);
+        --accent-ink: var(--accent); --focus: var(--accent);
+        --code-bg: color-mix(in srgb, var(--ink) 8%, var(--bg-card));
+      }
+    }
+    html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
+    body { font-family: var(--font-body); }
     #topbar {
-      display: flex; align-items: center; gap: 16px;
-      padding: 10px 20px; font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
-      border-bottom: 1px solid rgba(0,0,0,0.1); background: #fff; color: #1a1a1a;
+      display: flex; align-items: center; gap: var(--ds-space-sm);
+      min-height: 56px; padding: 0 var(--ds-space-gutter-narrow);
+      border-bottom: var(--ds-line) solid var(--rule-soft); background: var(--bg);
+      font-size: var(--ds-text-md);
+    }
+    #topbar .mark { width: 28px; height: 28px; flex-shrink: 0; --mark-ink: var(--ink); }
+    #topbar strong { font-family: var(--font-display); font-size: var(--ds-text-xl); font-weight: 500; }
+    #topbar .muted {
+      font-family: var(--font-mono); font-size: var(--ds-text-2xs); letter-spacing: .12em;
+      text-transform: uppercase; color: var(--ink-soft);
     }
-    #topbar strong { font-size: 15px; }
-    #topbar a { color: #2b6cb0; text-decoration: none; }
-    #topbar a:hover { text-decoration: underline; }
     #topbar .spacer { flex: 1; }
-    #topbar .muted { color: #666; }
+    #topbar a {
+      display: inline-flex; align-items: center; min-height: 24px;
+      color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px;
+      text-decoration-color: color-mix(in srgb, var(--accent-ink) 45%, transparent);
+    }
+    #topbar a:hover { text-decoration-color: currentColor; }
+    a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 8px var(--bg); }
+    @media (max-width: 640px) { #topbar .muted, #topbar .origin { display: none; } }
   </style>
 </head>
 <body>
   <div id="topbar">
+    <svg class="mark" viewBox="0 0 200 200" aria-hidden="true"><use href="/modules/ui-design/public/brand/mark.svg#mark"/></svg>
     <strong>{{productName}} — API</strong>
     <span class="muted">OpenAPI 3.1</span>
     <span class="spacer"></span>
     <a href="/docs/openapi.json" download>Download spec</a>
-    <a href="{{publicOrigin}}">{{publicOrigin}}</a>
+    <a class="origin" href="{{publicOrigin}}">{{publicOrigin}}</a>
   </div>
-  <!-- Redoc renders the whole spec below. spec-url is same-origin (served by /docs/openapi.json). -->
-  <redoc spec-url="/docs/openapi.json" expand-responses="200,201" required-props-first="true"></redoc>
+  <!-- Redoc renders the whole spec below. The spec is same-origin (served by /docs/openapi.json). -->
+  <div id="redoc"></div>
   <script src="/docs/redoc.standalone.js"></script>
+  <script>
+    (function () {
+      // Redoc takes a theme object, not CSS variables, so the page's tokens are read once
+      // here, resolved in the reader's mode (task 1005091). An unset token reads '' and
+      // Redoc keeps its own default for it. Redoc's colour maths reads only plain colours,
+      // and a token can be a color-mix(), so each colour is painted onto a one-pixel canvas
+      // and read back as rgba(); a face is passed as written.
+      var cs = getComputedStyle(document.documentElement);
+      var raw = function (n) { return cs.getPropertyValue(n).trim(); };
+      var ctx = document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+      var probe = document.createElement('span');
+      document.body.appendChild(probe);
+      var t = function (n) {
+        var v = raw(n);
+        if (!v || !ctx) return undefined;
+        if (/font/.test(n)) return v;
+        probe.style.color = v;
+        ctx.clearRect(0, 0, 1, 1);
+        ctx.fillStyle = getComputedStyle(probe).color;
+        ctx.fillRect(0, 0, 1, 1);
+        var p = ctx.getImageData(0, 0, 1, 1).data;
+        return 'rgba(' + p[0] + ', ' + p[1] + ', ' + p[2] + ', ' + Math.round((p[3] / 255) * 100) / 100 + ')';
+      };
+      var theme = {
+        colors: {
+          primary: { main: t('--accent-ink') },
+          text: { primary: t('--ink'), secondary: t('--ink-soft') },
+          border: { dark: t('--rule'), light: t('--rule-soft') },
+        },
+        typography: {
+          fontFamily: t('--font-body'),
+          headings: { fontFamily: t('--font-display'), fontWeight: '400' },
+          code: { fontFamily: t('--font-mono'), color: t('--ink'), backgroundColor: t('--code-bg') },
+          links: { color: t('--accent-ink'), visited: t('--accent-ink'), hover: t('--ink') },
+        },
+        sidebar: { backgroundColor: t('--bg-card'), textColor: t('--ink'), activeTextColor: t('--accent-ink') },
+        rightPanel: { backgroundColor: t('--bg-deep'), textColor: t('--ink') },
+        schema: { nestedBackground: t('--bg-card'), typeNameColor: t('--ink-soft'), linesColor: t('--rule') },
+      };
+      probe.remove();
+      if (window.Redoc) {
+        window.Redoc.init('/docs/openapi.json', { expandResponses: '200,201', requiredPropsFirst: true, theme: theme }, document.getElementById('redoc'));
+      }
+    })();
+  </script>
 </body>
 </html>

package/release-notes.json

@@ -11283,5 +11283,11 @@
       "id": "1005085",
       "text": "The hall's pop-up questions now use one Cloud Bongos dialog instead of the browser's grey box: every 'are you sure?' says plainly what will happen, and the six home-made pop-ups on different pages now share one look and the sa"
     }
+  ],
+  "1.24.53": [
+    {
+      "id": "1005091",
+      "text": "The API docs, error pages, shared links and Discord posts now carry the Cloud Bongos look: brand fonts and colours in light and dark, a proper 'page not found' screen, a branded preview card when a link is pasted into a chat,"
+    }
   ]
 }

package/scripts/bongos/gen-brand.js

@@ -14,18 +14,21 @@
 //   mark-dot.svg     the moon only, one ink               the ring breathes, the moon turns)
 //   favicon.svg      the small cut, Ink by day and the Night ink by night
 //   apple-touch-icon.png  180x180, the light mark on the pack's ground (--png; needs a browser)
+//   og-card.png      1200x630, the link-preview card every public page names (task 1005091):
+//                    the dark mark and the lowercase wordmark on the void (--png; needs a browser)
 //
 // Deterministic text, so `--check` is a clean gate (tests/brand_mark.mjs runs it). The PNG is
 // rendered by the system browser and only written with --png.
 //
 // Usage:
 //   node scripts/bongos/gen-brand.js          # write the SVG variants
-//   node scripts/bongos/gen-brand.js --png    # … and render apple-touch-icon.png
+//   node scripts/bongos/gen-brand.js --png    # … and render apple-touch-icon.png + og-card.png
 //   node scripts/bongos/gen-brand.js --check  # write nothing; exit 2 if a variant is stale
 
 const fs = require('node:fs');
 const path = require('node:path');
 const { NIGHT_INK, readMarkSource, markParts, markFile, faviconSvg } = require('../../src/brand-mark');
+const { escapeHtml } = require('../../src/html-escape');
 
 const ROOT = path.resolve(__dirname, '..', '..');
 
@@ -38,9 +41,40 @@ function brandDir() {
   return hit;
 }
 
+function readPack() {
+  return JSON.parse(fs.readFileSync(path.join(ROOT, 'config', 'branding.neutral.json'), 'utf8'));
+}
 function packColors() {
-  const pack = JSON.parse(fs.readFileSync(path.join(ROOT, 'config', 'branding.neutral.json'), 'utf8'));
-  return pack.theme.ui.colors;
+  return readPack().theme.ui.colors;
+}
+
+// The link-preview card's page: the void, the dark mark, the product name as the wordmark
+// (lowercase, the display voice — DESIGN.md "Naming") in the pack's display face. Pure.
+function ogCardHtml({ markSvg, name, fontLinks = [], fontFamily = 'sans-serif' }) {
+  const esc = escapeHtml;
+  return '<html><head>' + fontLinks.map((h) => `<link rel="stylesheet" href="${esc(h)}">`).join('') +
+    '</head><body style="margin:0;width:1200px;height:630px;background:#000000;display:flex;align-items:center;justify-content:center;gap:56px">' +
+    `<img src="data:image/svg+xml;base64,${Buffer.from(markSvg).toString('base64')}" style="width:220px;height:220px">` +
+    `<span style="font-family:${esc(fontFamily)};font-weight:300;font-size:132px;letter-spacing:-0.042em;line-height:1;color:#ffffff;text-transform:lowercase">${esc(name)}</span>` +
+    '</body></html>';
+}
+
+async function renderOgCard(dir) {
+  const { launchBrowser } = require('../../modules/ui-design/kit/lib'); // eslint-disable-line global-require
+  const pack = readPack();
+  const browser = await launchBrowser();
+  try {
+    const page = await browser.newPage({ viewport: { width: 1200, height: 630 }, deviceScaleFactor: 1 });
+    await page.setContent(ogCardHtml({
+      markSvg: fs.readFileSync(path.join(dir, 'mark-dark.svg'), 'utf8'),
+      name: pack.identity.productName,
+      fontLinks: pack.theme.ui.fonts.links,
+      fontFamily: pack.theme.ui.fonts.display,
+    }));
+    await page.waitForLoadState('networkidle');
+    await page.evaluate(() => document.fonts.ready);
+    await page.screenshot({ path: path.join(dir, 'og-card.png'), omitBackground: false });
+  } finally { await browser.close(); }
 }
 
 // { filename: text } for every SVG variant. Pure given the source and the colours.
@@ -90,10 +124,10 @@ async function main() {
     process.stdout.write('gen-brand: the logo and favicon set match mark.svg\n');
     return;
   }
-  if (args.includes('--png')) await renderTouchIcon(dir, colors);
-  process.stdout.write(`gen-brand: ${stale.length ? `wrote ${stale.join(', ')}` : 'nothing to write'}${args.includes('--png') ? ' + apple-touch-icon.png' : ''}\n`);
+  if (args.includes('--png')) { await renderTouchIcon(dir, colors); await renderOgCard(dir); }
+  process.stdout.write(`gen-brand: ${stale.length ? `wrote ${stale.join(', ')}` : 'nothing to write'}${args.includes('--png') ? ' + apple-touch-icon.png + og-card.png' : ''}\n`);
 }
 
 if (require.main === module) main().catch((e) => { process.stderr.write(`${e.message}\n`); process.exit(1); });
 
-module.exports = { brandFiles, packColors };
+module.exports = { brandFiles, packColors, ogCardHtml };

package/scripts/discord/lib.js

@@ -47,6 +47,19 @@ function loadWebhooks() {
   return cfg;
 }
 
+// THE BRAND ON A POST (task 1005091). A broadcast goes out as an EMBED, not as bare
+// message text: the same words as the embed's description, with the pack's accent as
+// the embed's colour bar, so every post in a channel reads as the product's. The
+// description cap is 4096 (an embed's own limit). Mentions inside an embed never ring,
+// which is #871's rule anyway; allowed_mentions stays parse:[] belt-and-braces.
+// KEEP IN SYNC with modules/discord/webhook.js embedBody.
+function brandColor() {
+  let accent = '';
+  try { accent = (require('../../src/branding').clientBranding().theme || {}).colors.accent || ''; } catch { accent = ''; } // eslint-disable-line global-require
+  const m = /^#([0-9a-f]{6})$/i.exec(String(accent).trim());
+  return m ? parseInt(m[1], 16) : null;
+}
+
 async function postWebhook(channel, text) {
   if (!CHANNELS.has(channel)) {
     throw new Error(`Unknown Discord channel '${channel}'. Known: ${[...CHANNELS].join(', ')}`);
@@ -58,8 +71,9 @@ async function postWebhook(channel, text) {
       `or env DISCORD_${channel.toUpperCase()}_WEBHOOK. See scripts/discord/README.md.`
     );
   }
-  // Discord hard-caps message content at 2000 chars.
-  const content = String(text).slice(0, 2000);
+  const embed = { description: String(text).slice(0, 4096) };
+  const color = brandColor();
+  if (color !== null) embed.color = color;
   // SECURITY (#871): suppress ALL mention pings. The content is DB-sourced (a
   // task value_summary, an idea, etc.) and attacker-influenceable, so without
   // this a crafted message containing @everyone / @here / <@&role> would ping the
@@ -68,7 +82,7 @@ async function postWebhook(channel, text) {
   const res = await fetch(url, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ content, allowed_mentions: { parse: [] } }),
+    body: JSON.stringify({ embeds: [embed], allowed_mentions: { parse: [] } }),
   });
   if (!res.ok) {
     const body = await res.text().catch(() => '');

package/scripts/status-mirror-sync.js

@@ -57,6 +57,7 @@ const { stampHtml } = require('../src/asset-version');
 // The server's own serving transforms: the mirror is built with them, not with a
 // copy of them, so the off-box page and the live page are one page (task 1005089).
 const { applyBrandTokens, themeMarkup } = require('../src/bongos/serve-internal');
+const { linkPreviewTags } = require('../src/link-preview');
 
 // The shared files the page links from other modules, published at the SAME paths
 // so the page's root-absolute hrefs resolve on the mirror's host as on the server.
@@ -146,16 +147,19 @@ function buildMirrorIndex({ srcHtml, apiBase, statusDataUrl, brand }) {
   if (html.includes('offbox-status')) {
     throw new Error('modules/status-ui/public/index.html already contains offbox markup — the source should be the droplet (no-banner) copy. Aborting.');
   }
-  // The off-box globals, then the pack's theme exactly as the server splices it —
-  // last in <head>, after the page's own sheets, so the pack wins here as it does live.
-  html = injectOnce(html, '</head>', headInject(apiBase) + brandingInject(brand) + themeMarkup((brand || {}).theme), 'before');
+  // Stamp the instance branding tokens FIRST — the Pages host won't run the server's
+  // injection, so the mirror must resolve {{worldName}}/{{currency}}/… itself, and the
+  // link-preview card reads the stamped title as the server's does.
+  html = brandTokens(html, brand, apiBase);
+  // The off-box globals, then the link-preview card and the pack's theme exactly as the
+  // server splices them — last in <head>, after the page's own sheets, so the pack wins
+  // here as it does live (task 1005091 added the card).
+  html = injectOnce(html, '</head>', headInject(apiBase) + brandingInject(brand) +
+    linkPreviewTags(html, brand || {}, apiBase) + themeMarkup((brand || {}).theme), 'before');
   html = injectOnce(html, '<body>', BANNER_DIV, 'after');
   // Insert the driver right before the main status.js script tag.
   const scriptAnchor = '<script src="/status.js';
-  html = injectOnce(html, scriptAnchor, bannerDriver(statusDataUrl, siteLabel(apiBase)), 'before');
-  // Stamp the instance branding tokens LAST — the Pages host won't run the server's
-  // injection, so the mirror must resolve {{worldName}}/{{currency}}/… itself.
-  return brandTokens(html, brand, apiBase);
+  return injectOnce(html, scriptAnchor, bannerDriver(statusDataUrl, siteLabel(apiBase)), 'before');
 }
 
 // ---- CLI -------------------------------------------------------------------

package/src/bongos/serve-internal.js

@@ -45,6 +45,7 @@ const { buildInfo } = require('../build-info');
 const { buildBongosDownloads, installScriptReader } = require('../bongos-downloads');
 const { clientBranding, branding, applyBrandConditionals } = require('../branding');
 const { nightTintCss } = require('../night-tint');
+const { linkPreviewTags } = require('../link-preview');
 const { prelaunchGate } = require('./prelaunch-gate');
 const { platformVisibilityGate } = require('./platform-visibility-gate');
 const { schemaPending } = require('./schema-lag');
@@ -189,9 +190,9 @@ function injectBrandingGlobal(html, brand = clientBranding(), mods = clientModul
   // window.__MODULES__ — the enabled feature-module set (R54 task 1193, ADR 0062
   // §4), injected the same way as __BRANDING__ so hall/status scripts can hide
   // UI sections for off modules synchronously (no fetch, no race). R60 wires the
-  // actual section-hiding; this exposes the data.
+  // actual section-hiding; this exposes the data. The link-preview card (task 1005091) rides along.
   const stamped = applyBrandTokens(html, brand);
-  const tag = `${clientBundleScriptTag()}<script>window.__BRANDING__=${jsonForScript(brand)};window.__MODULES__=${jsonForScript(mods)};</script>${themeMarkup(brand.theme)}`;
+  const tag = `${clientBundleScriptTag()}<script>window.__BRANDING__=${jsonForScript(brand)};window.__MODULES__=${jsonForScript(mods)};</script>${linkPreviewTags(stamped, brand, safePublicOrigin())}${themeMarkup(brand.theme)}`;
   return stamped.includes('</head>') ? stamped.replace('</head>', `${tag}</head>`) : tag + stamped;
 }
 

package/src/error-page.js

@@ -0,0 +1,120 @@
+// src/error-page.js — the branded 404 and 500 pages (task 1005091, goal 1000138).
+//
+// A person who mistypes an address, or lands on a page that broke, used to get a bare
+// "404 — not found" in plain text: the one screen of the product with no product on it.
+// This is that screen in the chrome world: the shared mark, the product name, a heading,
+// one sentence and a way back, on the pack's colours and faces in both modes.
+//
+// WHO GETS IT: a browser asking for a page. An API-shaped path keeps its JSON (the
+// self-describing 404 of api-path-404.js; the trailing error net answers the R01
+// envelope), and a client that does not accept HTML keeps plain text — a page is for a
+// person, never a substitute for an error a program has to parse.
+//
+// THE PAGE is a template stamped by the server's own branding transform (passed in as
+// `brandHtml`, serve-internal's injectBrandingGlobal), so the product name, the pack's
+// palette and font links and the favicon come from the one place every page gets them.
+// The words for "not found" are the pack's own (`copy.notFound`). Rendered once per
+// status and kept: the pack is a boot-time singleton.
+
+'use strict';
+
+const { escapeHtml } = require('./html-escape');
+
+const COPY = {
+  404: {
+    label: '404',
+    sub: 'The address may be mistyped, or the page has moved.',
+  },
+  500: {
+    label: '500',
+    heading: 'Something went wrong on our side.',
+    sub: 'Try again in a moment. If it keeps happening, it has been logged.',
+  },
+};
+
+/** The unbranded page for a status: tokens ({{productName}}) are stamped by brandHtml. Pure. */
+function errorPageTemplate(status, { notFound = 'Page not found.' } = {}) {
+  const c = COPY[status === 404 ? 404 : 500];
+  const heading = status === 404 ? notFound : c.heading;
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex">
+<title>${escapeHtml(heading)} · {{productName}}</title>
+<link rel="icon" href="/modules/ui-design/public/brand/favicon.svg" type="image/svg+xml">
+<link rel="stylesheet" href="/modules/ui-design/public/tokens.css">
+<style>
+/* The fallback contract tier at zero specificity: the pack's spliced :root always wins. */
+:where(html){--bg:#edecee;--bg-card:#fbfafc;--ink:#17181a;--ink-soft:#55565a;--ink-faint:#65656a;--rule-soft:#dcdbdd;--accent:#fb9569;--accent-deep:#a3481a;--font-display:"Manrope","Segoe UI",system-ui,sans-serif;--font-body:"Manrope","Segoe UI",system-ui,sans-serif}
+html{color-scheme:light;--accent-ink:color-mix(in srgb,var(--accent) 45%,#240e00);--focus:color-mix(in srgb,var(--accent-deep) 82%,#3a1400)}
+html[data-theme="dark"]{color-scheme:dark;--bg:#000000;--bg-card:#101012;--ink:#ffffff;--ink-soft:#c0c0c0;--ink-faint:#a8a8a8;--rule-soft:rgba(255,255,255,.08);--accent-ink:var(--accent);--focus:var(--accent)}
+@media (prefers-color-scheme:dark){html:not([data-theme]){color-scheme:dark;--bg:#000000;--bg-card:#101012;--ink:#ffffff;--ink-soft:#c0c0c0;--ink-faint:#a8a8a8;--rule-soft:rgba(255,255,255,.08);--accent-ink:var(--accent);--focus:var(--accent)}}
+*{box-sizing:border-box}
+body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--ds-text-2xl,17px);line-height:1.5}
+header{display:flex;align-items:center;gap:var(--ds-space-xs,10px);min-height:56px;padding:0 var(--ds-space-gutter-narrow,20px);border-bottom:var(--ds-line,1px) solid var(--rule-soft)}
+.mark{width:28px;height:28px;--mark-ink:var(--ink)}
+.name{font-family:var(--font-display);font-size:var(--ds-text-xl,16px);font-weight:500;color:var(--ink);text-decoration:none}
+main{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--ds-space-xl,52px) var(--ds-space-gutter-narrow,20px)}
+.card{max-width:34rem}
+.code{margin:0 0 var(--ds-space-sm,14px);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:var(--ds-text-2xs,11px);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
+h1{margin:0 0 var(--ds-space-sm,14px);font-family:var(--font-display);font-size:var(--ds-text-headline,clamp(26px,3.1vw,42px));font-weight:300;line-height:1.06;letter-spacing:-.035em}
+p.sub{margin:0 0 var(--ds-space-md,22px);color:var(--ink-soft)}
+a.back{display:inline-flex;align-items:center;min-height:46px;padding:0 var(--ds-space-md,22px);border-radius:var(--ds-radius-pill,999px);background:var(--accent);color:#2a1305;font-weight:500;text-decoration:none}
+a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 8px var(--bg)}
+</style>
+</head>
+<body>
+<header>
+  <svg class="mark" viewBox="0 0 200 200" aria-hidden="true"><use href="/modules/ui-design/public/brand/mark.svg#mark"/></svg>
+  <a class="name" href="/">{{productName}}</a>
+</header>
+<main>
+  <div class="card">
+    <p class="code">${c.label}</p>
+    <h1>${escapeHtml(heading)}</h1>
+    <p class="sub">${escapeHtml(c.sub)}</p>
+    <a class="back" href="/">Go to the front page</a>
+  </div>
+</main>
+</body>
+</html>
+`;
+}
+
+/** Does this request want a page? A browser GET/HEAD that accepts HTML. */
+function wantsHtml(req) {
+  return (req.method === 'GET' || req.method === 'HEAD') && !!req.accepts('html') && req.accepts(['json', 'html']) === 'html';
+}
+
+/**
+ * The two handlers a server mounts last: notFound (the 404 tail) and onError (the 4-arg
+ * net). Everything they depend on is injected so a test drives them with no server.
+ */
+function errorHandlers({ brandHtml, notFoundCopy, isApiShapedPath, apiNotFoundBody, log }) {
+  const pages = {};
+  const page = (status) => {
+    if (!pages[status]) pages[status] = brandHtml(errorPageTemplate(status, { notFound: notFoundCopy() }));
+    return pages[status];
+  };
+  function notFound(req, res) {
+    res.status(404);
+    if (isApiShapedPath(req.path)) return res.json(apiNotFoundBody(req.path));
+    if (wantsHtml(req)) return res.type('html').send(page(404));
+    return res.type('text/plain').send('404 — not found');
+  }
+  // eslint-disable-next-line no-unused-vars
+  function onError(err, req, res, next) {
+    if (res.headersSent) return next(err);
+    const status = Number.isInteger(err && err.status) && err.status >= 400 && err.status < 600 ? err.status : 500;
+    if (status >= 500) log(err, req);
+    res.status(status);
+    if (isApiShapedPath(req.path) || /^\/api(\/|$)/.test(req.path)) return res.json({ error: { code: status >= 500 ? 'internal_error' : 'bad_request', message: status >= 500 ? 'internal_error' : 'bad_request' } });
+    if (wantsHtml(req)) return res.type('html').send(page(status === 404 ? 404 : 500));
+    return res.type('text/plain').send(`${status} — ${status >= 500 ? 'server error' : 'error'}`);
+  }
+  return { notFound, onError };
+}
+
+module.exports = { errorPageTemplate, errorHandlers };