@bongos/core 1.24.25 → 1.24.27

package/tests/loading_mark.mjs

@@ -0,0 +1,203 @@
+// tests/loading_mark.mjs — the Bongos-mark loader on the apex pages and the status page
+// (task 1005053, goal 1000095; the hall's own is task 1005043).
+//
+// Owner ask, 2026-11-03: a smooth load screen with the Bongos logo anywhere the
+// software waits for data, in the spirit of monday.com's Vibe data loaders. The
+// apex pages (cosmos.css) and the status page (its own sheet) each carry the same
+// CSS component, .loading-mark, in their own tokens; a page opts in by putting the
+// class on the placeholder it already had, whose words stay as the caption. These
+// cases read the real sheets and pages, per surface: the loader keeps DESIGN.md's
+// motion and colour rules, its rest frame is the logo, and no waiting placeholder
+// is left as a bare line of text.
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import fs from 'node:fs';
+import path from 'node:path';
+import vm from 'node:vm';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const LANDING = path.join(ROOT, 'modules', 'public-landing', 'public');
+const STATUS = path.join(ROOT, 'modules', 'status-ui', 'public');
+const read = (dir, f) => fs.readFileSync(path.join(dir, f), 'utf8').replace(/\r\n/g, '\n');
+
+const COSMOS = read(LANDING, 'assets/cosmos.css');
+const STATUS_CSS = read(STATUS, 'style.css');
+const APEX_PAGES = ['account', 'community', 'connections', 'guild', 'invitations', 'projects'];
+
+// The loader's section of a sheet: from its banner to the last of its keyframes.
+function section(css, banner) {
+  const start = css.indexOf(banner);
+  assert.ok(start > -1, `the loader's banner is in the sheet: ${banner}`);
+  const end = css.indexOf('@keyframes loading-mark-breathe', start);
+  assert.ok(end > start, 'the loader section ends on its breath');
+  return css.slice(start, css.indexOf('}', css.indexOf('}', end) + 1) + 1);
+}
+const SURFACES = {
+  apex: { css: COSMOS, loader: section(COSMOS, '/* ── the loader (task 1005053') },
+  status: { css: STATUS_CSS, loader: section(STATUS_CSS, '/* ---------- The loader (task 1005053') },
+};
+const flat = (s) => s.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\s+/g, ' ');
+const masksOf = (css) => [...css.matchAll(/url\("data:image\/svg\+xml,([^"]+)"\)/g)].map((m) => decodeURIComponent(m[1]));
+function keyframes(css, name) {
+  const m = css.match(new RegExp(`@keyframes ${name} ?\\{`));
+  assert.ok(m, `@keyframes ${name} exists`);
+  let depth = 1, i = m.index + m[0].length;
+  for (; i < css.length && depth; i++) depth += css[i] === '{' ? 1 : css[i] === '}' ? -1 : 0;
+  return css.slice(m.index + m[0].length, i - 1);
+}
+
+test('the apex loader is the bar\'s own Bongos mark, and the status loader is the same mark', () => {
+  // The apex bar draws the mark inline (account.html's .bongosMark); the loader's
+  // two masks carry exactly its arc, core and dot, so the loader IS the logo.
+  const bar = read(LANDING, 'account.html');
+  const arc = bar.match(/<path class="mr" d="([^"]+)"/)[1];
+  assert.match(bar, /<circle class="mp" cx="100" cy="100" r="55"/);
+  assert.match(bar, /<circle cx="156" cy="46" r="12" style="fill:var\(--accent\)"\/>/);
+  const [ring, dot] = masksOf(SURFACES.apex.loader);
+  assert.ok(ring.includes(`d='${arc}'`), 'the ring is the bar mark\'s arc');
+  assert.ok(ring.includes("<circle cx='100' cy='100' r='55'/>"), 'the core is the bar mark\'s core');
+  assert.ok(dot.includes("<circle cx='156' cy='46' r='12'/>"), 'the dot is the bar mark\'s dot');
+  // The status page has no Bongos mark of its own: its loader carries the apex's two
+  // masks byte for byte, so the two surfaces cannot drift into two logos.
+  assert.deepEqual(masksOf(SURFACES.status.loader), masksOf(SURFACES.apex.loader));
+});
+
+for (const [name, { css, loader }] of Object.entries(SURFACES)) {
+  test(`${name}: it moves in CSS only, on transform and filter only, and rests on the logo`, () => {
+    for (const frame of ['loading-mark-arrive', 'loading-mark-turn', 'loading-mark-breathe']) {
+      const body = keyframes(css, frame);
+      const props = [...body.matchAll(/([a-z-]+)\s*:/g)].map((m) => m[1]);
+      assert.ok(props.length, `${frame} animates something`);
+      for (const p of props) assert.ok(['transform', 'filter'].includes(p), `${frame} animates ${p}, not transform or filter`);
+    }
+    // The turn has no `from`, so 0deg (the logo's own pose, the dot top right) is where
+    // it starts and where the Kill Switch leaves it; the arrival and the breath have no
+    // `to`, so their resting value is the element as styled, fully shown.
+    assert.match(keyframes(css, 'loading-mark-turn'), /^\s*to ?\{ ?transform: ?rotate\(1turn\); ?\}\s*$/);
+    assert.match(keyframes(css, 'loading-mark-arrive'), /^\s*from ?\{/);
+    assert.match(keyframes(css, 'loading-mark-breathe'), /^\s*from ?\{/);
+    // It arrives 240ms late, so a read that answers faster never shows it.
+    assert.match(flat(loader), /\.loading-mark ?\{[^}]*animation: ?loading-mark-arrive 500ms cubic-bezier\(\.16, ?1, ?\.3, ?1\) 240ms both;/);
+    // The Kill Switch stops every animation, the pseudo-elements included.
+    assert.match(flat(css), /@media \(prefers-reduced-motion: ?reduce\) ?\{ ?\*, ?\*::before, ?\*::after ?\{ ?animation: ?none !important; ?transition: ?none !important; ?\} ?\}/);
+  });
+
+  test(`${name}: every colour is a token; the black in the masks is alpha, not paint`, () => {
+    const css = flat(loader);
+    assert.doesNotMatch(css, /#[0-9a-fA-F]{3,8}\b|rgba?\(|hsla?\(/, 'no colour literal');
+    const paints = [...css.matchAll(/(?:background|color): ?([^;]+);/g)].map((m) => m[1].trim());
+    assert.equal(paints.length, 3, 'the ink, the dot and the caption are painted');
+    for (const p of paints) assert.match(p, /^(var\(--[a-z-]+\)|color-mix\(in srgb, ?var\(--ink\) 30%, ?var\(--bg-card\)\))$/, `${p} is a token or a mix of one`);
+    // The one accent is the dot: the live thing on a waiting page (the One Warm Thing Rule).
+    assert.equal((css.match(/var\(--accent\)/g) || []).length, 1, 'the accent paints the dot alone');
+    const masks = masksOf(loader);
+    assert.equal(masks.length, 2, 'two masks: the ring and core, and the dot');
+    for (const m of masks) assert.doesNotMatch(m.replace(/stroke='black'|fill='none'/g, ''), /fill='|stroke='|#/, 'a mask carries no colour of its own');
+  });
+
+  test(`${name}: the dot shares the ring's grid cell, so no page padding can knock it off`, () => {
+    const css = flat(loader);
+    assert.match(css, /\.loading-mark ?\{[^}]*display: ?grid;/);
+    assert.match(css, /\.loading-mark::before, ?\.loading-mark::after ?\{[^}]*grid-area: ?1 ?\/ ?1;/);
+    assert.doesNotMatch(css, /position: ?absolute|top: ?|left: ?/, 'nothing is positioned by hand');
+  });
+}
+
+test('apex: three sizes, and a hidden placeholder stays hidden', () => {
+  const css = flat(SURFACES.apex.loader);
+  assert.match(css, /\.loading-mark--page ?\{[^}]*--lm-size: ?64px;/);
+  assert.match(css, /\.loading-mark--inline ?\{[^}]*--lm-size: ?16px;[^}]*grid-template-columns: ?var\(--lm-size\) minmax\(0, ?1fr\);/);
+  // The loader is display: grid, which outranks the browser's own [hidden]; the
+  // apex pages put a placeholder away with .hidden, so cosmos's rule must win.
+  assert.match(COSMOS, /\[hidden\]\{display:none !important;\}/);
+});
+
+test('apex: every waiting placeholder wears the loader, in the markup and as the scripts write it', () => {
+  // A status line rewritten IN PLACE (its words become the answer) keeps its plain
+  // words: the loader belongs to a placeholder that is hidden or replaced when the
+  // data lands. Each one is named here with why.
+  const IN_PLACE = new Set([
+    "community.html:say('Searching…')",                                   // the search's status line, rewritten with the count
+    "projects.html:hint('h-renderKey', 'Checking with Render…')",         // the Render key's hint, rewritten with the answer
+    "projects.html:say('Reading your organisations from GitHub…')",       // the org picker's status line
+    "projects.html:say('Checking with GitHub…')",                         // the same line
+    "projects.html:inviteSay(id, 'Finding your project’s invite page…'", // the invite box's message, after a press
+    "projects.html:inviteSay(id, 'Finding the guild’s members…'",        // the same, for a guild
+  ]);
+  const WAIT_WORD = '(?:Loading|Reading|Opening|Checking|Finding|Searching|Looking|Fetching)';
+  const ELEMENT = new RegExp(`<(p|div|li|span|td)\\b([^>]*)>\\s*${WAIT_WORD}\\b[^<]*…\\s*<\\/\\1>`, 'g');
+  const LITERAL = new RegExp(`[a-zA-Z]+\\((?:id, )?'${WAIT_WORD}[^']*…'`, 'g');
+  const misses = [];
+  for (const page of APEX_PAGES) {
+    const html = read(LANDING, `${page}.html`);
+    for (const m of html.matchAll(ELEMENT)) {
+      if (!/\bloading-mark\b/.test(m[2])) misses.push(`${page}.html: ${m[0].slice(0, 100)}`);
+    }
+    for (const line of html.split('\n')) {
+      for (const m of line.matchAll(LITERAL)) {
+        if (/loading-mark/.test(line) || /pickNote\('[^']*', true\)/.test(line)) continue;
+        const key = `${page}.html:${m[0]}`;
+        if (!IN_PLACE.has(key) && !IN_PLACE.has(`${key})`)) misses.push(key);
+      }
+    }
+  }
+  assert.deepEqual(misses, [], 'every waiting placeholder wears the loader');
+});
+
+test('apex: each page waits with the size that fits it', () => {
+  const html = Object.fromEntries(APEX_PAGES.map((p) => [p, read(LANDING, `${p}.html`)]));
+  // a page with nothing else to show yet: the page size
+  for (const [page, words] of [['account', 'Reading your account…'], ['connections', 'Reading your connections…'], ['guild', 'Reading this guild…'], ['invitations', 'Reading your invitations…']]) {
+    assert.ok(html[page].includes(`<p class="loading loading-mark loading-mark--page" id="loading" role="status">${words}</p>`), `${page} waits on the page loader`);
+  }
+  assert.ok(html.projects.includes('<div class="loading loading-mark loading-mark--page" id="loading" role="status">Reading your projects…</div>'));
+  assert.ok(html.projects.includes('<div class="loading loading-mark loading-mark--page" id="mLoading" role="status">Reading the project…</div>'));
+  // a section of a page: the default
+  for (const id of ['homeLoading', 'boardLoading', 'weekLoading', 'recruitLoading']) {
+    assert.match(html.community, new RegExp(`<p class="commMsg loading-mark" id="${id}" role="status">`), `community's ${id}`);
+  }
+  // a line in a band or a list: inline. The manage page's thirteen sections each wait on
+  // their own read, so a mark the height of the line keeps the page from jumping.
+  assert.equal((html.projects.match(/><p class="finePrint loading-mark loading-mark--inline" role="status">(?:Reading the project…|Reading the project’s settings…|Checking the repository on GitHub…)<\/p><\/div>/g) || []).length, 14);
+  assert.ok(html.account.includes('<p class="aWhat loading-mark loading-mark--inline" id="waysLoading" role="status">'));
+  assert.ok(html.account.includes('<p class="aWhat loading-mark loading-mark--inline" id="buildingLoading" role="status">'));
+  assert.ok(html.projects.includes('<div id="ghBusy" class="hint loading-mark loading-mark--inline" role="status" hidden>'));
+  // the scripts write them back the same way, and the picker's first open wears it too
+  for (const call of ['repoVisMsg(', 'visMsg(', 'joinMsg(', 'doorMsg(', 'envMsg(']) {
+    assert.ok(html.projects.includes(`${call}'<p class="finePrint loading-mark loading-mark--inline" role="status">`), `${call} writes the loader`);
+  }
+  for (const call of ['visRuns(', 'joinRuns(']) {
+    assert.ok(html.projects.includes(`${call}'<span class="loading-mark loading-mark--inline" role="status">Checking what the project is running…</span>');`), `${call} writes the loader`);
+  }
+  assert.match(html.projects, /wait\.className = 'finePrint loading-mark loading-mark--inline'; wait\.setAttribute\('role', 'status'\);/);
+  assert.match(html.invitations, /li\.className = 'joinList__note' \+ \(waiting \? ' loading-mark loading-mark--inline' : ''\);/);
+});
+
+test('status: its two waiting tablets wear the loader, and a failed or empty read stops it', () => {
+  const html = read(STATUS, 'index.html');
+  assert.ok(html.includes('<div id="versions" class="versions">\n      <p class="empty loading-mark" role="status">The masons are at their tools…</p>'));
+  assert.ok(html.includes('<div id="world-snapshot" class="world-snapshot">\n      <p class="empty loading-mark" role="status">The cartographers are still at their survey…</p>'));
+  // the header's "Tablet being consulted…" is rewritten in place before any read
+  // starts (stampRefreshTime), so it is never a wait and keeps its plain words
+  assert.match(html, /<span class="herm__updated" id="last-updated">Tablet being consulted…<\/span>/);
+  // The Kill Switch is the last thing in the status sheet, so nothing can outrank it.
+  assert.match(STATUS_CSS.trimEnd(), /@media \(prefers-reduced-motion: reduce\) \{\n {2}\*, \*::before, \*::after \{ animation: none !important; transition: none !important; \}\n\}$/);
+
+  const js = read(STATUS, 'status.js');
+  // the three ways a tablet can end its wait without data each stop the loader
+  assert.match(js, /\} catch \(_\) \{\n {4}stopWaiting\(els\.worldSnapshot\);\n {4}return;\n {2}\}/);
+  assert.match(js, /if \(snapshots\.length === 0\) \{ stopWaiting\(els\.worldSnapshot\); return; \}/);
+  assert.match(js, /loadVersions\(\)\.catch\(\(e\) => \{ stopWaiting\(els\.versions\); console\.error\('versions', e\); \}\)/);
+  // ...and stopWaiting itself, run: it takes the class off and leaves the words alone.
+  const src = js.match(/function stopWaiting\(el\) \{[\s\S]*?\n\}/)[0];
+  const removed = [];
+  const wait = { textContent: 'The masons are at their tools…', classList: { remove: (c) => removed.push(c) } };
+  const host = { querySelectorAll: (sel) => (sel === '.loading-mark' ? [wait] : []) };
+  const ctx = vm.createContext({});
+  vm.runInContext(`${src}; this.stopWaiting = stopWaiting;`, ctx);
+  ctx.stopWaiting(host);
+  ctx.stopWaiting(null);
+  assert.deepEqual(removed, ['loading-mark']);
+  assert.equal(wait.textContent, 'The masons are at their tools…');
+});

package/tests/nav_permission_atoms.mjs

@@ -93,8 +93,9 @@ test('the hall-preview fixture carries every atom /me resolves', () => {
 // says a held core version was tried and rolled back; task 1004731: the one-time
 // "Upgraded to core X" notice after a move; task 1004826: Standing is Accomplishments;
 // task 1004846: the new logo (its bump landed late, in task 1004852); task 1004938: the
-// Market Watch settings nav item and its fuel glyph.
-const SHELL_SHA = '1a23b1cf13567eff';
+// Market Watch settings nav item and its fuel glyph; task 1005041: the Update pill replaced the
+// core-update banner.
+const SHELL_SHA = '9e32caf8aa17dd36';
 
 test('shell.js has not changed without its cache-bust being bumped', () => {
   const actual = crypto.createHash('sha256').update(SHELL).digest('hex').slice(0, 16);

package/tests/software_update.mjs

@@ -345,11 +345,15 @@ test('read only when its group opens — most visits to Settings are for somethi
 
 const answerWith = (over) => ok({ ...FIXTURE, ...over, update: { ...FIXTURE.update, ...(over.update || {}) } });
 
+// task 1005041: the button runs the Update pill's in-place flow, so it no longer reads as a
+// trip off-site; its href stays the hub's door only for a page whose pill script did not load,
+// and the hint names the hub whose small window opens for a moment.
 test('a hosted project\'s button names the hub it opens; a self-hosted one names the command', async () => {
   const hub = bootPanel(() => answerWith({ door: { kind: 'hub', url: 'https://cloudbongos.com/deploy?project=mercury' } }));
   await hub.settle();
-  assert.match(hub.body(), /href="https:\/\/cloudbongos\.com\/deploy\?project=mercury">Update to [\d.]+ ↗</);
-  assert.match(hub.body(), /on cloudbongos\.com:/);
+  assert.match(hub.body(), /href="https:\/\/cloudbongos\.com\/deploy\?project=mercury">Update to [\d.]+</);
+  assert.doesNotMatch(hub.body(), /↗/, 'it updates in place; it is not a link off-site any more');
+  assert.match(hub.body(), /A small window from cloudbongos\.com opens for a moment/);
 
   const cli = bootPanel(() => answerWith({ door: { kind: 'cli', url: null } }));
   await cli.settle();
@@ -504,6 +508,39 @@ test('the platform, which runs the door, keeps /deploy behind its own page gate'
   assert.match(String(r.location), /auth|sign/i, 'and is sent to sign in, as before');
 });
 
+// ── the door on the hub's apex (task 1004736) ─────────────────────────────────
+//
+// Every hosted project's Update button is `<hub origin>/deploy?project=<slug>` — the IdP
+// origin, or HUB_UPGRADE_URL built from the hub's public origin — and on cloudbongos.com
+// that origin is the apex, where /deploy was a 404 (2026-10-14). The page is the hall's,
+// on builders.<apex>. The hub answers the apex address with the hall's, so every link
+// already written into a project's web.env works without that project moving its core.
+
+function getOn(port, p, host) {
+  return new Promise((resolve, reject) => {
+    const req = http.request({ host: '127.0.0.1', port, path: p, headers: { Host: host } }, (res) => { res.resume(); res.on('end', () => resolve({ status: res.statusCode, location: res.headers.location })); });
+    req.on('error', reject);
+    req.end();
+  });
+}
+
+test('the apex /deploy sends the owner to the hall\'s door for the same project (task 1004736)', async () => {
+  const port = await startServer({ [MODULE_ENV]: '1' });
+  for (const p of ['/deploy?project=toast', '/deploy.html?project=toast', '/deploy/?project=toast']) {
+    const r = await getOn(port, p, 'hall.test');
+    assert.equal(r.status, 302, p);
+    assert.equal(r.location, 'https://builders.hall.test/deploy?project=toast', `${p}: the project is carried, so the door opens on it`);
+  }
+  const bare = await getOn(port, '/deploy', 'hall.test');
+  assert.equal(bare.location, 'https://builders.hall.test/deploy', 'no project → the door itself');
+  for (const p of ['/deployments', '/deploy/x', '/api/deploy']) {
+    const r = await getOn(port, p, 'hall.test');
+    assert.notEqual(String(r.location || '').includes('builders.hall.test/deploy'), true, `${p} is not the door`);
+  }
+  const onHall = await getOn(port, '/deploy?project=toast', 'builders.hall.test');
+  assert.doesNotMatch(String(onHall.location || ''), /^https:\/\/builders\./, 'on the hall itself the page is served, not bounced');
+});
+
 // ── the project's OWN update rule reaches the offer (task 1004535) ────────────
 //
 // The live defect, 2026-10-02: cloudbongos's rule on /deploy is `minor` and the sweep