@bongos/core 1.19.387 → 1.19.388

package/tests/landing_page.mjs

@@ -1,21 +1,32 @@
-// tests/landing_page.mjs — the apex landing page (task 1002748, goal 1000061).
+// tests/landing_page.mjs — the apex landing page in the chrome world
+// (task 1003298, goal 1000080; rewritten from the task 1002748 original).
 //
-// Contract: docs/design/landing-page-direction.md + docs/design/mocks/landing-page-mock.html.
-// These lock the four properties the direction calls load-bearing, each of which
-// fails SILENTLY in a browser and so cannot be caught by looking at the page:
+// Contract: docs/design/landing-page-direction-v2.md + the approved composition
+// docs/design/mocks/landing/v3.html, built on public-landing/assets/world.css.
+// The composition itself is graded by eye and by browser probes; what THIS file
+// locks are the properties that fail SILENTLY — nothing about the page looks
+// wrong in a browser when any of them breaks:
 //
 //   * the apex conditional — public-landing/ ships wholesale to every instance,
-//     so the platform-only sections must be REMOVED (not hidden) off the hub;
+//     so the platform's claims AND the platform's numbers must be REMOVED (not
+//     hidden) off the hub, while the portable spine still reads as a landing;
 //   * the server-stamped head — social tags are read before JS runs, so they
 //     cannot be client-filled, and they must not be baked to one instance;
 //   * the branding cascade — a page-local :root silently outranks the pack's
-//     injected theme and defeats re-branding (direction C1);
-//   * no hardcoded apex — the file is portable or it lies to child instances.
+//     injected theme and defeats re-branding (direction C1), and a dark rule
+//     written once only works for half of users (C2);
+//   * the motion kill switch — the hero breathes by default, so reduced motion
+//     is an accessibility constraint nobody sees fail; it holds through a
+//     cross-FILE dependency (world.css carries ONE universal switch rather than
+//     every page repeating it), which is the right shape but an invisible one;
+//   * the live-data contract — every figure and row on the page is baked real
+//     and then refreshed from five public feeds, with third-party strings in
+//     the payload; the no-JS state, the XSS discipline and the definitions of
+//     the figures are all invisible to a passing render.
 //
-// Deliberately NOT asserted here: that GET / returns the page. It does not — the
-// apex still 302s into the gate until the hub exists (task 1002743 part 3), which
-// is why tests/platform_boot.mjs stays parked in run-unit-tests KNOWN_FAILING.
-// This file tests the artifact that flip will serve.
+// Deliberately NOT asserted here: that GET / returns the page (tests/platform_boot.mjs
+// owns that), and nothing about geometry or colour — the world's token layer is
+// measured by tests/world_tokens.mjs.
 
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
@@ -27,17 +38,33 @@ import { createRequire } from 'node:module';
 const require = createRequire(import.meta.url);
 const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const HTML = fs.readFileSync(path.join(ROOT, 'public-landing', 'index.html'), 'utf8');
+const WORLD = fs.readFileSync(path.join(ROOT, 'public-landing', 'assets', 'world.css'), 'utf8');
 
 const { stripApexOnly } = require('../src/platform-server.js');
 const { applyBrandTokens } = require('../src/bongos/serve-internal.js');
 
-// ── the apex conditional ───────────────────────────────────────────────────
+// The page's one <style> element, and the same minus its comments. Several
+// assertions below rule out shapes the comments deliberately QUOTE, so they read
+// the stripped copy; the rest read the source so a value inside a comment still
+// counts as documentation, not as a declaration.
+const PAGE_STYLES = [...HTML.matchAll(/<style>([\s\S]*?)<\/style>/g)].map((m) => m[1]).join('\n');
+const PAGE_CSS = PAGE_STYLES.replace(/\/\*[\s\S]*?\*\//g, '');
+// The page script minus its comments — these assertions are about what the code
+// DOES, and the comments quote the very shapes being ruled out.
+const CODE = HTML.split('<script>').pop().replace(/\/\*[\s\S]*?\*\//g, '');
+// The pre-paint mode script, which is the FIRST <script> in <head>.
+const PREPAINT = HTML.split('<script>')[1].split('</script>')[0];
+
+// ── (1) the apex conditional ───────────────────────────────────────────────
 
 test('the apex-only sentinels are balanced and each one wraps content', () => {
   const starts = HTML.match(/<!--apex-only:start-->/g) || [];
   const ends = HTML.match(/<!--apex-only:end-->/g) || [];
   assert.equal(starts.length, ends.length, 'every apex-only:start needs its end');
-  assert.ok(starts.length >= 4, 'the direction marks four apex-only regions');
+  // four sections plus every baked apex FIGURE (task 1003298: the page bakes real
+  // numbers as its no-JS state, and a child must show an empty figure, not the
+  // platform's count, until its own feed answers)
+  assert.ok(starts.length >= 4, 'the direction marks at least four apex-only regions');
   // no start after an unclosed start — a nested pair would make the non-greedy
   // strip close on the wrong sentinel and leak the platform's claims.
   let depth = 0;
@@ -55,24 +82,60 @@ test('the hub keeps every apex-only section', () => {
 test('a child instance is served none of the platform-only claims', () => {
   const child = stripApexOnly(HTML, false);
   assert.doesNotMatch(child, /<!--apex-only:(start|end)-->/, 'no sentinel survives the strip');
-  // the apex-only regions, by their load-bearing content (task 1002934: the
-  // Verro Labs strip + The Basics replaced the beats / What-you-own era)
-  assert.doesNotMatch(child, /capture-resistant commons/, 'the commons claim is the platform\'s, not a child\'s');
-  assert.doesNotMatch(child, /Built on Cloud Bongos/, 'a child has no catalog of other instances');
-  assert.doesNotMatch(child, /Verro Labs/, 'a child instance is not built by Verro Labs');
-  assert.doesNotMatch(child, /Bongos Managed/, 'the commercial offer is the platform\'s, not a child\'s');
-  assert.doesNotMatch(child, /thousands of builders/, 'a child has no hub builder pool to promise');
+  for (const claim of [
+    ['Verro Labs', 'a child instance is not built by Verro Labs'],
+    ['Built on Cloud Bongos', 'a child has no catalog of other instances'],
+    ['Bongos Managed', "the commercial offer is the platform's, not a child's"],
+    ['capture-resistant commons', "the commons claim is the platform's, not a child's"],
+  ]) {
+    assert.ok(!child.includes(claim[0]), claim[1]);
+  }
+});
+
+test("a child instance is served none of the platform's NUMBERS either", () => {
+  // The v3 composition puts real ledger values in the markup as the no-JS state.
+  // A claim is obvious when it leaks; a number is not — a fresh child instance
+  // would silently advertise the hub's 2,107 shipped tasks and its V1 progress
+  // line until its own feeds answered. Both are apex-only for exactly that reason.
+  // the MARKUP only: the page script names every one of these hooks in a
+  // querySelector, so scanning the whole file would match its own selectors.
+  const child = stripApexOnly(HTML, false)
+    .split('<body>')[1].split('<script>')[0]
+    .replace(/<!--[\s\S]*?-->/g, '');
+  assert.deepEqual(
+    [...child.matchAll(/\d,\d{3}/g)].map((m) => m[0]), [],
+    'a thousands-separated figure survived the strip',
+  );
+  for (const [what, re, expected] of [
+    ['the three hero figures', /data-fig="[a-z]+"[^>]*>([\s\S]*?)<\/span>/g, 3],
+    ['the ledger line', /data-ledger="line"[^>]*>([\s\S]*?)<\/p>/g, 1],
+    ['the ledger meter', /data-ledger="meter"[^>]*>([\s\S]*?)<\/div>/g, 1],
+  ]) {
+    const found = [...child.matchAll(re)];
+    assert.equal(found.length, expected, `${what}: hook missing from the child page`);
+    for (const m of found) {
+      assert.equal(m[1].trim(), '', `${what} still carries a baked apex value: ${m[1].trim()}`);
+    }
+  }
+  const rows = child.match(/data-rows[^>]*>([\s\S]*?)<\/ol>/);
+  assert.ok(rows, 'the ledger list survives on a child instance');
+  assert.equal(rows[1].trim(), '', 'the baked ledger rows are the apex\'s own shipped tasks');
 });
 
 test('a child instance keeps the whole portable spine', () => {
   const child = stripApexOnly(HTML, false);
   for (const portable of [
-    'Building Digitally, as simple as', // the hero tagline (task 1002934)
-    'A project as a codebase', // S4 heading (task 1002934 rewording)
-    'A laddered beat progresses all tasks', // S4 subtitle
-    'Start a Project', 'Find a Project', // S7, the closing pair (buttons since 1002934)
-    'Built by agents, on Cloud', // the portable half of the footer
-    'id="who"', // the identity chip
+    'Building Digitally,',                    // the tagline, first half
+    'as simple as Bongos.',                   // the tagline, second half
+    'A project as a codebase',                // the lifecycle heading
+    'A laddered beat progresses all tasks',   // its subtitle
+    'Start a project', 'Find a project',      // the closing pair
+    'Built by agents, on Cloud',              // the portable half of the footer
+    'id="who"',                               // the identity slot
+    'The six most recent, straight from the ledger.', // the ledger's own sub-line
+    // the live hooks: a child's OWN feeds fill these, so the shells must survive
+    'data-fig="shipped"', 'data-fig="value"', 'data-fig="builders"',
+    'data-ledger="line"', 'data-ledger="meter"', 'data-rows',
   ]) {
     assert.ok(child.includes(portable), `a child instance lost "${portable}"`);
   }
@@ -80,23 +143,25 @@ test('a child instance keeps the whole portable spine', () => {
 
 test('the footer keeps its attribution half and loses only the commons half', () => {
   const child = stripApexOnly(HTML, false);
-  const foot = child.match(/<div class="foot">([\s\S]*?)<\/div>/);
+  const foot = child.match(/<div class="footrow">([\s\S]*?)<\/div>/);
   assert.ok(foot, 'the footer survives on a child instance');
   assert.doesNotMatch(foot[1], /non-profit/);
   assert.match(foot[1], /Built by agents/);
 });
 
-// ── the server-stamped head ────────────────────────────────────────────────
+// ── (2) the server-stamped head ────────────────────────────────────────────
 
 const BRAND = {
   identity: { productName: 'Spike Harbor', worldName: 'Spike Harbor' },
   copy: { tagline: 'A different beat entirely.' },
 };
+const stamp = (html = HTML, origin = 'https://spike-harbor.example', hall = 'https://builders.spike-harbor.example') =>
+  applyBrandTokens(html, BRAND, origin, hall);
 
 test('every head tag a crawler reads is stamped, and no token survives', () => {
-  const out = applyBrandTokens(HTML, BRAND, 'https://spike-harbor.example', 'https://builders.spike-harbor.example');
+  const out = stamp();
   assert.doesNotMatch(out, /\{\{[a-zA-Z]+\}\}/, 'an unstamped {{token}} would render literally');
-  assert.match(out, /<title>Spike Harbor — A different beat entirely\.<\/title>/);
+  assert.match(out, /<title>Spike Harbor: A different beat entirely\.<\/title>/);
   assert.match(out, /<link rel="canonical" href="https:\/\/spike-harbor\.example\/">/);
   for (const prop of ['og:type', 'og:site_name', 'og:url', 'og:title', 'og:description', 'og:image']) {
     assert.match(out, new RegExp(`property="${prop}"`), `missing ${prop}`);
@@ -108,12 +173,30 @@ test('every head tag a crawler reads is stamped, and no token survives', () => {
   assert.doesNotMatch(out.split('</head>')[0], /cloudbongos\.com/);
 });
 
+test('the social card is the world card, stamped onto THIS instance', () => {
+  // og:image is the one head tag whose value is a PATH, so it is the one that
+  // silently rots: the retired figure buddha.png outlived two redesigns as the
+  // page's social image. It must be the card captured from the built page, and
+  // it must be origin-stamped or every child's share preview loads from whoever
+  // authored the file.
+  const out = stamp();
+  assert.doesNotMatch(HTML, /buddha\.png/, 'the retired hero figure is not this page\'s social card');
+  for (const attr of ['og:image', 'twitter:image']) {
+    const m = out.match(new RegExp(`(?:property|name)="${attr}" content="([^"]*)"`));
+    assert.ok(m, `missing ${attr}`);
+    assert.equal(m[1], 'https://spike-harbor.example/assets/world/og-card.jpg');
+  }
+  assert.ok(
+    fs.existsSync(path.join(ROOT, 'public-landing', 'assets', 'world', 'og-card.jpg')),
+    'the og card the head names must exist under public-landing/',
+  );
+});
+
 test('every cross-host link is stamped to THIS instance, never the platform', () => {
-  const out = applyBrandTokens(HTML, BRAND, 'https://spike-harbor.example', 'https://builders.spike-harbor.example');
+  const out = stamp();
   const halls = [...out.matchAll(/data-link-hall href="([^"]*)"/g)].map((m) => m[1]);
-  // task 1002934: the S7 door cards (which carried the second hall link) became
-  // two bare project buttons — the header Hall entry is the one that remains.
-  assert.ok(halls.length >= 1, 'the header Hall entry points at the hall');
+  // the header nav pill and the footer entry
+  assert.ok(halls.length >= 2, 'the header and the footer both point at the hall');
   for (const href of halls) assert.equal(href, 'https://builders.spike-harbor.example');
   // C6: this is the bug the stamping fixes — clientBranding() omits domains, so a
   // client fill can never re-point these and every child sent visitors to the platform.
@@ -121,27 +204,10 @@ test('every cross-host link is stamped to THIS instance, never the platform', ()
 });
 
 test('a pack with no hall of its own falls back to its own apex, not the platform', () => {
-  const out = applyBrandTokens(HTML, BRAND, 'https://spike-harbor.example', '');
+  const out = stamp(HTML, 'https://spike-harbor.example', '');
   assert.match(out, /data-link-hall href="https:\/\/spike-harbor\.example"/);
 });
 
-test('no repo path is baked into the page', () => {
-  // task 1002934 removed the "What you own" section and with it the page's only
-  // {{sourceRepoUrl}} link (owner-accepted). What must still hold: no HARDCODED
-  // owner/name — a baked one would point every instance at whoever authored
-  // this file, and the authorship audit fails it.
-  assert.doesNotMatch(HTML, /github\.com\/[a-z0-9-]+\/[a-z0-9-]+/i, 'no baked repo path');
-});
-
-test('an unstamped link is removed, not left dangling', () => {
-  // the page keeps its empty-href scrubber so ANY future unstamped token link
-  // (the header hall entry today) is dropped rather than rendered dead.
-  const out = applyBrandTokens(HTML, BRAND, 'https://o.example', '');
-  assert.match(CODE, /a\[href=""\]/, 'the page drops empty-href links');
-  assert.match(CODE, /\.remove\(\)/);
-  assert.ok(out.length > 0);
-});
-
 test('a pack with NO domains drops the hall pill server-side rather than stamping href="" (task 1003242)', () => {
   // the hub has no client scrubber, so an empty token must never reach it as a dead link
   const HUB = fs.readFileSync(path.join(ROOT, 'public-landing', 'projects.html'), 'utf8');
@@ -152,64 +218,91 @@ test('a pack with NO domains drops the hall pill server-side rather than stampin
   assert.doesNotMatch(none, /\{\{[a-zA-Z]+\}\}/, 'every other token still stamps');
   const apexOnly = applyBrandTokens(HUB, BRAND, 'https://spike-harbor.example', '');
   assert.match(apexOnly, /data-link-hall href="https:\/\/spike-harbor\.example"/, 'an apex alone keeps the pill, pointed at the apex');
-  const both = applyBrandTokens(HUB, BRAND, 'https://spike-harbor.example', 'https://builders.spike-harbor.example');
-  assert.match(both, /data-link-hall href="https:\/\/builders\.spike-harbor\.example"/);
   // the landing page too — its client-side scrubber is no longer the only guard
   assert.doesNotMatch(applyBrandTokens(HTML, BRAND, '', ''), /<a\b[^>]*href=""/);
   // a token INSIDE a longer href is a relative path once stamped empty, not a dead link — left alone
   assert.equal(applyBrandTokens('<a href="{{publicOrigin}}/docs">Docs</a>', BRAND, '', ''), '<a href="/docs">Docs</a>');
 });
 
-// ── the branding cascade + portability ─────────────────────────────────────
+test('an unstamped link is removed, not left dangling', () => {
+  // the page keeps its empty-href scrubber so ANY future unstamped token link
+  // is dropped client-side rather than rendered dead.
+  assert.match(CODE, /a\[href=""\]/, 'the page drops empty-href links');
+  assert.match(CODE, /\.remove\(\)/);
+});
+
+test('no repo path is baked into the page', () => {
+  // A hardcoded owner/name would point every instance at whoever authored this
+  // file, and the authorship audit fails it. The AGPL link is to gnu.org, which
+  // is the licence, not a repo.
+  assert.doesNotMatch(HTML, /github\.com\/[a-z0-9-]+\/[a-z0-9-]+/i, 'no baked repo path');
+});
+
+// ── (3) the branding cascade + portability ─────────────────────────────────
 
 test('the page declares no :root — a page-local one defeats re-branding (C1)', () => {
-  const styles = [...HTML.matchAll(/<style>([\s\S]*?)<\/style>/g)].map((m) => m[1]).join('\n');
-  assert.ok(styles.length > 0, 'the page ships a local stylesheet');
-  // :root[data-mode="dark"] .bongos{…} is a DESCENDANT rule, not a :root declaration
-  // block — it scopes component tokens and cannot outrank the pack's own :root.
-  assert.doesNotMatch(styles, /:root\s*\{/, 'a bare :root{ } block outranks the injected pack');
-  assert.doesNotMatch(styles, /:root\[data-mode="dark"\]\s*\{/, 'same, for the dark tier');
+  assert.ok(PAGE_STYLES.length > 0, 'the page ships a local stylesheet');
+  // :root[data-mode="dark"] body{…} and :root[data-mode="dark"] .sun{…} are
+  // DESCENDANT rules, not :root declaration blocks — they scope page-local tokens
+  // and cannot outrank the pack's own :root.
+  assert.doesNotMatch(PAGE_CSS, /:root\s*\{/, 'a bare :root{ } block outranks the injected pack');
+  assert.doesNotMatch(PAGE_CSS, /:root\[data-mode="dark"\]\s*\{/, 'same, for the dark tier');
 });
 
 test('every dark-mode rule is written twice — the block and its media twin (C2)', () => {
-  const styles = [...HTML.matchAll(/<style>([\s\S]*?)<\/style>/g)].map((m) => m[1]).join('\n');
-  const explicit = (styles.match(/:root\[data-mode="dark"\]/g) || []).length;
-  const media = (styles.match(/:root:not\(\[data-mode="light"\]\)/g) || []).length;
+  const explicit = (PAGE_CSS.match(/:root\[data-mode="dark"\]/g) || []).length;
+  const media = (PAGE_CSS.match(/:root:not\(\[data-mode="light"\]\)/g) || []).length;
   assert.equal(explicit, media, 'a dark rule with no prefers-color-scheme twin only half-works');
-  assert.ok(explicit >= 2, 'the drum skin and the hero glow both flip');
+  // the shipped page writes four: the mode-toggle icon swap (.sun and .moon are
+  // one selector list each), the wide plate/geometry token block, and the two
+  // narrow ones. The floor is the count observed at the build, so deleting a
+  // twin fails even when the pair stays balanced.
+  assert.ok(explicit >= 4, `expected at least 4 dark rules, found ${explicit}`);
+});
+
+test('the page links world.css root-absolute, and does not fork the hub sheet', () => {
+  // root-absolute so landingPage()'s ?v= content stamp applies: the relative
+  // assets/cosmos.css link this page used to carry was never stamped, and a
+  // four-hour browser cache then styled new markup with an old sheet (task 1002766).
+  assert.match(HTML, /<link rel="stylesheet" href="\/assets\/world\.css">/);
+  // cosmos.css is the HUB's component layer (/projects + the legal pages). The
+  // landing lives in the world's token layer alone; linking both would give the
+  // page two competing derived tiers.
+  assert.doesNotMatch(HTML, /cosmos\.css/, 'the landing does not link the hub sheet');
 });
 
-test('the drum head never inherits a card colour — it would turn black in dark', () => {
-  const styles = [...HTML.matchAll(/<style>([\s\S]*?)<\/style>/g)].map((m) => m[1]).join('\n');
-  const skin = styles.match(/\.bongos\{[^}]*\}/);
-  assert.ok(skin, '.bongos carries its own skin tokens');
-  assert.match(skin[0], /--skin-hi:/);
-  assert.doesNotMatch(styles, /--skin-[a-z]+:\s*var\(--bg-card\)/);
+test('nothing about the platform is hardcoded — the file is portable (C5)', () => {
+  assert.doesNotMatch(HTML, /cloudbongos\.com/);
 });
 
-test('the page ships the .sky layer the pack backdrop would otherwise show through (C3)', () => {
-  assert.match(HTML, /<div class="sky"/);
+test('the page reads without JavaScript: the spine is markup, not script-built', () => {
+  const body = HTML.split('<body>')[1].split('<script>')[0];
+  for (const copy of [
+    'Building Digitally,',                              // the hero, first half
+    'as simple as Bongos.',                             // the hero, second half
+    'A project as a codebase',                          // the lifecycle heading
+    'Start a project', 'Find a project',                // the closing pair
+    'The six most recent, straight from the ledger.',   // the ledger's baked sub-line
+    'Skip to content',
+  ]) {
+    assert.ok(body.includes(copy), `"${copy}" is only reachable with scripting on`);
+  }
+  // the sign-in door is markup; the script only UPGRADES it to the signed-in chip
+  assert.match(body, /class="pill signin" href="\/api\/bongos\/auth\/web\/start\?return=\/">Sign in</);
 });
 
-// ── the static pose under reduced motion (direction §7) ───────────────────
+// ── (4) the motion kill switch ─────────────────────────────────────────────
 // The hero animates by default, so this is an accessibility constraint that
 // fails SILENTLY — nothing about the page looks wrong to a developer who does
-// not have the OS setting on. It holds via a cross-FILE dependency (cosmos.css
-// carries one global motion kill switch rather than every page repeating it),
-// which is the right shape but an invisible one, so both halves are locked here.
-// Verified in a real browser with reducedMotion emulation: every hero element
-// computes animation-name:none, and the ripples additionally display:none.
-
-const COSMOS = fs.readFileSync(path.join(ROOT, 'public-landing', 'assets', 'cosmos.css'), 'utf8');
-const PAGE_STYLES = [...HTML.matchAll(/<style>([\s\S]*?)<\/style>/g)].map((m) => m[1]).join('\n');
-// declarations only — the comments quote the very shapes these tests rule out
-const PAGE_CSS = PAGE_STYLES.replace(/\/\*[\s\S]*?\*\//g, '');
+// not have the OS setting on. It holds via a cross-FILE dependency (world.css
+// carries one global switch rather than every page repeating it), which is the
+// right shape but an invisible one, so both halves are locked here.
 
-test('cosmos.css still carries the global motion kill switch the hero relies on', () => {
-  const block = COSMOS.match(/@media\s*\(prefers-reduced-motion:\s*reduce\)\s*\{([\s\S]*?)\n\}/);
-  assert.ok(block, 'cosmos.css must keep a prefers-reduced-motion block');
+test('world.css still carries the global motion kill switch the hero relies on', () => {
+  const block = WORLD.match(/@media\s*\(prefers-reduced-motion:\s*reduce\)\s*\{([\s\S]*?)\n\}/);
+  assert.ok(block, 'world.css must keep a prefers-reduced-motion block');
   assert.match(block[1], /\*[^{]*\{[^}]*animation:\s*none\s*!important/,
-    'the universal selector + !important is what stops the hero; without it the drums keep beating');
+    'the universal selector + !important is what stops the sculpture; without it the blob keeps breathing');
 });
 
 test('nothing on the page marks an animation !important and escapes that switch', () => {
@@ -218,109 +311,145 @@ test('nothing on the page marks an animation !important and escapes that switch'
     'an !important animation here would outrank the global kill switch');
 });
 
-test('the hero animations are plain declarations, so the switch reaches them', () => {
-  // every animated part of the drum kit, as the mock defines the beat
-  for (const cls of ['drumBig', 'drumSml', 'headBig', 'headSml', 'glow', 'bshadow', 'ring']) {
-    assert.match(PAGE_STYLES, new RegExp(`\\.bongos\\s+\\.${cls}\\s*\\{[^}]*animation:`),
-      `.${cls} should be animated in the default (non-reduced) case`);
+test('the signature animations are plain declarations, so the switch reaches them', () => {
+  for (const name of [
+    'breathe', 'sheen', 'orbit',                                  // the breath
+    'arrive-form', 'arrive-orb', 'arrive-bead', 'arrive-mark',    // the authored moment
+  ]) {
+    assert.match(PAGE_CSS, new RegExp(`@keyframes\\s+${name}\\s*\\{`), `@keyframes ${name} is gone`);
+    assert.match(PAGE_CSS, new RegExp(`animation:[^;}]*\\b${name}\\b`), `nothing runs ${name}`);
   }
 });
 
-test('the ripples are hidden under reduced motion — they rest at full stroke', () => {
-  const reduced = PAGE_STYLES.match(/@media\s*\(prefers-reduced-motion:reduce\)\{([^}]*\})*/);
-  assert.ok(reduced, 'the page carries its own reduced-motion block');
-  assert.match(reduced[0], /\.bongos\s+\.ring\s*\{\s*display:none/);
-});
-
-test('the self-typing eyebrow degrades to real text, not an empty span', () => {
-  // the script only decorates; markup must already carry the whole sentence
-  assert.match(HTML, /type <b>bongos<\/b> in <span class="typed" id="typed">any AI<\/span>/);
-  assert.match(CODE, /matchMedia\('\(prefers-reduced-motion: reduce\)'\)/);
-  assert.match(CODE, /if \(!reduce\) \{/, 'the typing loop is skipped under reduced motion');
-});
-
-test('the eyebrow types the ASSISTANT, never the word you type (task 1002743)', () => {
-  // "bongos" is the constant — it is the word a person types — and the
-  // assistant is what varies. Cycling the first slot produced "type claude in
-  // any AI", which nobody does and which inverts the claim the line makes.
-  assert.doesNotMatch(HTML, /type <span class="typed"/, 'the typed span must not hold the typed-word slot');
-  const words = CODE.match(/words\s*=\s*\[([^\]]*)\]/);
-  assert.ok(words, 'the eyebrow word list must be findable');
-  assert.doesNotMatch(words[1], /'bongos'/, 'bongos is fixed copy, never a cycled word');
-  for (const ai of ['Claude', 'ChatGPT', 'Gemini']) {
-    assert.match(words[1], new RegExp(`'${ai}'`), `${ai} must be one of the cycled assistants`);
+test('the breath stays slow and the arrival stays brief', () => {
+  // The signature is meant to be almost subliminal — a period a reader notices
+  // is a distraction, and a fast one is a moving-content accessibility problem
+  // (WCAG 2.2.2 territory). The floors are well under the shipped values, so
+  // this catches a period being retuned by an order of magnitude, not a nudge.
+  const period = (name, unit) => {
+    const m = PAGE_CSS.match(new RegExp(`\\b${name}\\s+([\\d.]+)${unit}\\b`));
+    assert.ok(m, `${name}'s period is no longer findable — update this test`);
+    return Number(m[1]);
+  };
+  assert.ok(period('breathe', 's') >= 30, 'the blob breathes at 32s; under 30s it reads as a pulse');
+  assert.ok(period('sheen', 's') >= 30, 'the hue drift is 40s; under 30s the iridescence shimmers');
+  assert.ok(period('orbit', 's') >= 60, 'the bead walks its circle in 60s');
+  for (const arrive of ['arrive-form', 'arrive-orb', 'arrive-bead', 'arrive-mark']) {
+    assert.ok(period(arrive, 'ms') <= 800, `${arrive} holds the first paint too long`);
   }
 });
 
-test('nothing about the platform is hardcoded — the file is portable (C5)', () => {
-  // the source repo link is a real, deliberate attribution; every OTHER mention
-  // of an origin must be a token.
-  const withoutSource = HTML.replace(/https:\/\/github\.com\/[^"]*/g, '');
-  assert.doesNotMatch(withoutSource, /cloudbongos\.com/);
-});
-
-test('the page reads without JavaScript: the spine is markup, not script-built', () => {
-  const body = HTML.split('<body>')[1].split('<script>')[0];
-  for (const copy of [
-    'Building Digitally, as simple as', // hero (task 1002934)
-    'Built by Verro Labs',              // the Verro strip
-    'A project as a codebase',          // S4 heading
-    'Explore Bongo Projects',           // the hero CTA
-    'Start a Project',                  // the closing pair
-    'Find a Project',
+// ── the live-data contract ─────────────────────────────────────────────────
+// Five public feeds fill the page after it has already rendered a real, baked
+// state. Everything here is invisible to a passing render: a feed renamed, an
+// innerHTML crept in with third-party titles in it, a figure quietly redefined.
+
+test('the script reads the five public feeds the head comment documents', () => {
+  for (const feed of [
+    '/public/progress',                 // the shipped figure + the ledger line
+    '/public/cost-summary',             // the value figure
+    '/public/leaderboard',              // the builders figure
+    '/public/recent-shipped?limit=6',   // the ledger rows
+    '/projects/featured',               // living proof
   ]) {
-    assert.ok(body.includes(copy), `"${copy}" is only reachable with scripting on`);
+    assert.ok(CODE.includes(feed), `the page no longer reads ${feed}`);
   }
 });
 
-test('the proof band ships hidden so a failed or empty feed leaves no orphan heading', () => {
-  assert.match(HTML, /<section class="band" id="proof" hidden>/);
-  // and it is only ever revealed on a non-empty 200
-  assert.match(HTML, /if \(!list\.length\) return;/);
-  assert.match(HTML, /band\.hidden = false;/);
+test('feed values are never interpolated as HTML, and hrefs are scheme-checked', () => {
+  // every string in these payloads is third-party: task titles, builder names,
+  // project names and origins, all written by someone other than this page.
+  assert.doesNotMatch(CODE, /innerHTML/, 'the feeds carry third-party strings');
+  assert.doesNotMatch(CODE, /document\.write/);
+  assert.match(CODE, /createElement\(/, 'the DOM is built, not concatenated');
+  assert.match(CODE, /textContent\s*=/);
+  assert.match(CODE, /u\.protocol === 'https:' \|\| u\.protocol === 'http:'/);
+  assert.match(CODE, /rel = 'noopener'/, 'an outbound project link opens without handing over the opener');
 });
 
-// The page script minus its comments — these assertions are about what the code
-// DOES, and the comments deliberately quote the shapes being ruled out.
-const CODE = HTML.split('<script>').pop().replace(/\/\*[\s\S]*?\*\//g, '');
+test('a live task title is normalised to the front door\'s own punctuation', () => {
+  // Task titles are write-once quoted data and the ledger hands the page
+  // punctuation the taste pre-flight bans (an em dash, a trailing parenthetical
+  // like "(owner decision 2026-08-24)"). The rule is applied at RENDER time, so
+  // it is invisible until a title with a dash ships.
+  const rules = CODE.match(/\.replace\([^\n]*/g) || [];
+  const has = (frag) => rules.some((r) => r.includes(frag));
+  assert.ok(has('[—–]'), 'em and en dashes become a comma');
+  assert.ok(has("', '"), 'and a comma is what they become');
+  assert.ok(has('\\([^()]*\\)\\s*$'), 'a trailing parenthetical is dropped');
+  assert.ok(has('/,\\s*,/g'), 'the comma a dash leaves beside one collapses');
+});
 
-test('the catalog claims no liveness the public feed cannot back', () => {
-  // listFeaturedProjects projects {origin, name, tagline, art_url, created_at}
-  // plus self-reported stats — still no status, so a verification chip here
-  // would be a claim nothing checked.
-  assert.doesNotMatch(CODE, /chip (live|maybe|down)/);
-  assert.doesNotMatch(CODE, /ago/);
+test('each figure is defined the way the head comment says it is', () => {
+  // A figure whose definition drifts still renders a plausible number, so the
+  // page would lie without ever looking wrong. These are the three definitions.
+  assert.match(CODE, /total \+= Number\(r\.shipped_count\)/, 'shipped = the SUM over every progress row');
+  assert.match(CODE, /setFig\('shipped'/);
+  assert.match(CODE, /data\.total_value_credits/, 'value = total_value_credits from the cost summary');
+  assert.match(CODE, /setFig\('value'/);
+  assert.match(CODE, /Number\(r\.total_credits\) > 0/, 'builders = leaderboard entries HOLDING credits');
+  assert.match(CODE, /setFig\('builders'/);
+  // the ledger line + meter come off the first `building` row
+  assert.match(CODE, /r\.status === 'building'/);
+  assert.match(CODE, /' shipped on '/);
+  // numbers are grouped, so the live value matches the baked one's shape
+  assert.match(CODE, /toLocaleString\('en-US'\)/);
 });
 
-test('catalog values are never interpolated as HTML, and hrefs are scheme-checked', () => {
-  assert.doesNotMatch(CODE, /innerHTML/, 'the feed carries third-party strings');
-  assert.match(CODE, /u\.protocol === 'https:' \|\| u\.protocol === 'http:'/);
+test('a failed or empty feed leaves the baked state standing', () => {
+  // The page has no empty state to fall back to — the baked values ARE the
+  // fallback, so every handler must bail rather than blank its target.
+  assert.match(CODE, /if \(!rows\.length\) return;/);
+  assert.match(CODE, /if \(!tasks\.length \|\| !list\) return;/);
+  assert.match(CODE, /if \(!list\.length \|\| !host\) return;/);
+  // and a non-2xx or a dropped connection resolves to null rather than throwing
+  assert.match(CODE, /res\.ok \? res\.json\(\) : null/);
+  assert.match(CODE, /\.catch\(function \(\) \{ return null; \}\)/);
 });
 
-// ── the shared layer gained the primitives, and the page did not fork it ───
+test('sign out POSTs, and expires both cookies in both Domain forms', () => {
+  // The logout endpoint is POST + cookie-gated, so a plain-anchor GET would 404
+  // and leave the session live (the hall bug of task 1002245). And a Max-Age=0
+  // only matches the cookie whose Domain attribute it names, so the host-only
+  // and apex-scoped forms must BOTH be expired (#726).
+  assert.match(CODE, /fetch\(API \+ '\/auth\/logout', \{ method: 'POST', credentials: 'same-origin' \}\)/);
+  assert.match(CODE, /\['gds_session', 'pms_session'\]/);
+  assert.match(CODE, /name \+ '=; Max-Age=0; path=\/';/);
+  assert.match(CODE, /name \+ '=; Max-Age=0; path=\/; Domain=\.' \+ apex/);
+  // it runs whether the POST lands or not
+  assert.match(CODE, /\.then\(finish, finish\)/);
+});
 
-test('the landing links cosmos.css and does not fork the design system', () => {
-  assert.match(HTML, /<link rel="stylesheet" href="assets\/cosmos\.css">/);
+test('the tagline is one server-stamped string, split for the composition only', () => {
+  // The h1 is {{tagline}}. The composition wants it on two lines, so the neutral
+  // halves are BAKED as two spans (the page reads correctly standalone and on
+  // the apex) — and a host whose tagline is not those halves must get it back
+  // whole rather than a headline cut in the wrong place.
+  assert.match(HTML, /<h1 data-brand-tagline>/);
+  assert.match(HTML, /<span class="l1">Building Digitally,<\/span><span class="l2">as simple as Bongos\.<\/span>/);
+  assert.match(CODE, /window\.__BRANDING__/);
+  assert.match(CODE, /brand\.copy && brand\.copy\.tagline/);
+  assert.match(CODE, /line !== baked\.join\(' '\)/, 'the rejoin is what decides a host tagline differs');
+  assert.match(PAGE_CSS, /h1 \.whole\{[^}]*white-space:normal/, 'the whole-tagline fallback must wrap');
 });
 
-test('the five primitives graduated into cosmos.css, not the page (§6)', () => {
-  const css = fs.readFileSync(path.join(ROOT, 'public-landing', 'assets', 'cosmos.css'), 'utf8');
-  assert.match(css, /^\.wrap\{/m, 'the page container');
-  assert.match(css, /^h2\.sec-h\{/m, 'the type scale below h1');
-  assert.match(css, /--pad-xl:/, 'the spacing scale');
-  assert.match(css, /^\.grid\{/m, 'the grid primitive');
-  assert.match(css, /@media \(max-width:900px\)/, 'the mid breakpoint');
-  // and the page must not re-declare them locally
-  const styles = [...HTML.matchAll(/<style>([\s\S]*?)<\/style>/g)].map((m) => m[1]).join('\n');
-  assert.doesNotMatch(styles, /^\.wrap\{/m, '.wrap belongs to the shared layer');
-  assert.doesNotMatch(styles, /^\.grid\{/m, '.grid belongs to the shared layer');
+test('the mode is resolved before first paint, and ?mode= wins', () => {
+  // A stored dark choice applied by the deferred script flashes the light page
+  // first; and ?mode= is how a reviewer walks both modes on one URL, which the
+  // render probes depend on.
+  assert.match(PREPAINT, /URLSearchParams\(location\.search\)\.get\('mode'\)/);
+  assert.match(PREPAINT, /localStorage\.getItem\('cb-color-mode'\)/);
+  assert.match(PREPAINT, /setAttribute\('data-mode'/);
+  // it is in <head>, ahead of the stylesheet link and the body
+  assert.ok(HTML.indexOf('cb-color-mode') < HTML.indexOf('<body>'));
+  assert.match(CODE, /localStorage\.setItem\('cb-color-mode', next\)/, 'the toggle persists the choice');
 });
 
-// ── the assertion tests/platform_boot.mjs will make once the apex flips ────
+// ── the assertions tests/platform_boot.mjs will make once the apex flips ───
 
 test('the page satisfies the parked platform_boot assertions', () => {
   assert.match(HTML, /id="who"/);
-  assert.match(HTML, /Find a Project/); // the landing marker since task 1002934
+  assert.match(HTML, /Find a project/); // the landing marker
   // an ORG-level action that lives only on the gate — asserted absent there
   assert.doesNotMatch(HTML, /Create a project/);
 });