@bongos/core 1.24.25 → 1.24.26

package/modules/hall-ui/public/settings.js

@@ -1186,6 +1186,9 @@
   function hideLayout(hide) {
     const layout = document.getElementById('settings-layout');
     if (layout) layout.hidden = !!hide;
+    // Every path past /me decides the layout here, so the page loader stops here too (task 1005043).
+    const loading = document.getElementById('settings-loading');
+    if (loading) loading.hidden = true;
   }
 
   // ---- bootstrap -----------------------------------------------------------

package/modules/hall-ui/public/studio.js

@@ -755,7 +755,7 @@
 
   function statusHtml() {
     if (!home.pages) {
-      return `<p class="st-panel__line">${home.pagesFailed ? 'The pages could not be read just now. Try again in a moment.' : 'Reading the pages…'}</p>`;
+      return home.pagesFailed ? '<p class="st-panel__line">The pages could not be read just now. Try again in a moment.</p>' : '<p class="hall-loading" role="status">Reading the pages…</p>';
     }
     const rows = lib.surfaceRows(home.pages, lib.landingHost(byId('hall-main') && byId('hall-main').getAttribute('data-apex'), window.location && window.location.host)).map((s) => `
       <li class="st-surface">
@@ -804,7 +804,7 @@
 
   function siteHtml() {
     if (!home.site) {
-      return `<p class="st-panel__line">${home.siteFailed ? SITE_FAILED : 'Reading the reviews…'}</p>`;
+      return home.siteFailed ? `<p class="st-panel__line">${SITE_FAILED}</p>` : '<p class="hall-loading" role="status">Reading the reviews…</p>';
     }
     if (!home.site.length) return `<p class="st-panel__line">${SITE_NONE}</p>`;
     const rows = home.site.map((r) => `
@@ -1178,7 +1178,7 @@
   }
 
   function siteListPage() {
-    if (!home.site) return `<p class="st-panel__line">${home.siteFailed ? SITE_FAILED : 'Reading the reviews…'}</p>`;
+    if (!home.site) return home.siteFailed ? `<p class="st-panel__line">${SITE_FAILED}</p>` : '<p class="hall-loading" role="status">Reading the reviews…</p>';
     if (!home.site.length) return `<p class="st-panel__line">${SITE_NONE}</p>`;
     return `<ul class="st-doc-list">${home.site.map((r) => `<li><a class="st-doc-list__row" href="${escapeHtml(siteHref(r.link))}">
         <span class="st-doc-list__page">${escapeHtml(r.page_title || r.page_path || r.page_id)}</span>

package/modules/hall-ui/public/style.css

@@ -4317,7 +4317,8 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .empty-state__action { display: inline-block; margin-top: 6px; font-size: 13px; }
 
 /* skeleton shimmer — standard-height placeholder rows while data loads, so
-   cards don't jump; derives from the ink/bg tokens like everything else */
+   cards don't jump; derives from the ink/bg tokens like everything else. It
+   breathes in the loader's beat (task 1005043; the keyframes sit with it). */
 .kit-skel {
   display: inline-block;
   width: 60%;
@@ -4325,9 +4326,97 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   height: 12px;
   border-radius: 2px;
   background: var(--skeleton);
+  animation: hall-loading-breathe .8s ease-in-out infinite alternate-reverse;
 }
 .kit-skel-row td { border-bottom: 1px solid var(--rule-soft); }
 
+/* ---- the loader (task 1005043) ----------------------------------------------
+   One loader for everything a hall page waits on, drawn from the Bongos mark
+   (shell.js's brand-mark SVG: the ring, the core and the accent dot). A page
+   opts in by giving its existing placeholder the class; its own words stay as
+   the caption, so no page gains markup. The ring and the dot turn together round
+   the still core and the ink breathes, after the Vibe skeleton the owner pointed
+   at (vibe.monday.com: 0.4 to 1 and back, 0.8s). Three sizes: the default for a
+   panel, --page for a page's main area, --inline for a line in a list or card.
+
+   DESIGN.md holds it: CSS only, transform and filter only (the breath and the
+   arrival are filter: opacity(), not opacity), every colour a var() or a mix of
+   one; the black in the two masks is alpha, not paint. The 20s floor is for the
+   ambient plates: a loader is the live thing on the page, so it keeps a loader's
+   tempo and the dot spends the accent. Each turn eases out of and back into the
+   logo's own pose, so the mark lands on the logo once per beat. It arrives after
+   240ms, so a read that answers faster never shows it. Under the Kill Switch
+   nothing moves and the rest frame is the logo itself. ---- */
+.hall-loading {
+  --hl-size: 40px;
+  --hl-pad: 28px;
+  --hl-beat: 1.6s;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin: 0;
+  padding: var(--hl-pad) 0;
+  font-size: 13.5px;
+  color: var(--ink-faint);
+  text-align: center;
+  animation: hall-loading-arrive 500ms cubic-bezier(.16, 1, .3, 1) 240ms both;
+}
+.hall-loading::before,
+.hall-loading::after {
+  content: "";
+  display: block;
+  flex: none;
+  width: var(--hl-size);
+  height: var(--hl-size);
+  -webkit-mask: var(--hl-shape) center / contain no-repeat;
+  mask: var(--hl-shape) center / contain no-repeat;
+  animation: hall-loading-turn var(--hl-beat) cubic-bezier(.45, .05, .55, .95) infinite;
+}
+/* the ring and the core: one ink, breathing */
+.hall-loading::before {
+  --hl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M137 31 A78 78 0 1 0 170 66' fill='none' stroke='black' stroke-width='15' stroke-linecap='round'/%3E%3Ccircle cx='100' cy='100' r='55'/%3E%3C/svg%3E");
+  background: color-mix(in srgb, var(--ink) 30%, var(--bg-card));
+  animation:
+    hall-loading-turn var(--hl-beat) cubic-bezier(.45, .05, .55, .95) infinite,
+    hall-loading-breathe calc(var(--hl-beat) / 2) ease-in-out infinite alternate-reverse;
+}
+/* the dot: the accent, laid exactly over the mark and turning with it */
+.hall-loading::after {
+  --hl-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='156' cy='46' r='12'/%3E%3C/svg%3E");
+  position: absolute;
+  top: var(--hl-pad);
+  left: calc(50% - var(--hl-size) / 2);
+  background: var(--accent);
+}
+.hall-loading--page { --hl-size: 64px; --hl-pad: 72px; gap: 16px; }
+.hall-loading--inline {
+  --hl-size: 16px;
+  --hl-pad: 0px;
+  display: inline-flex;
+  flex-direction: row;
+  gap: 8px;
+  text-align: left;
+}
+.hall-loading--inline::after { top: calc(50% - var(--hl-size) / 2); left: 0; }
+/* --wait: a page whose every section stays [hidden] until it knows who is
+   reading (the sealed/body pairs) puts one loader FIRST in its <main>. It shows
+   only while nothing after it is showing, and steps aside the moment the page
+   reveals anything (the body, the sealed notice, an error), so no page script
+   has to remember to hide it. Without :has() it never shows: today's page. */
+/* --zones: the same, for a view made of always-present, empty zones that cards
+   mount into (Home, Watch's panes): it shows while no showing zone after it
+   holds a showing child. */
+.hall-loading--wait, .hall-loading--zones { display: none; }
+@supports selector(:has(a)) {
+  .hall-loading--wait:not(:has(~ :not([hidden], script, template, style))) { display: flex; }
+  .hall-loading--zones:not(:has(~ :not([hidden]) > :not([hidden], script, template, style))) { display: flex; }
+}
+@keyframes hall-loading-arrive { from { filter: opacity(0); transform: translateY(6px); } }
+@keyframes hall-loading-turn { to { transform: rotate(1turn); } }
+@keyframes hall-loading-breathe { from { filter: opacity(.45); } }
+
 /* collapsible card body — the Work-backlog <details> idiom, generalized */
 .kit-collapse__summary {
   cursor: pointer;

package/modules/hall-ui/public/task-detail.js

@@ -413,7 +413,7 @@
     }
 
     async function renderPromote() {
-      box.innerHTML = '<p class="deeplink-card__note">Loading versions…</p>';
+      box.innerHTML = '<p class="hall-loading hall-loading--inline" role="status">Loading versions…</p>';
       // Both dead ends offer the way back through the same delegated [data-go]
       // handler the forms use — a builder must never be stranded mid-panel.
       function bail(message) {
@@ -658,7 +658,7 @@
   function bodyFor(state) {
     var nodes = [];
     var label = '#' + state.id;
-    if (state.loading) { nodes.push(h('p', 'deeplink-card__title', 'Loading ' + label + '…')); return nodes; }
+    if (state.loading) { nodes.push(h('p', 'hall-loading', 'Loading ' + label + '…')); return nodes; }
     if (state.needsAuth) {
       nodes.push(h('p', 'deeplink-card__title', label));
       nodes.push(h('p', 'deeplink-card__note', 'Sign in to the Builders’ Hall to view this record.'));

package/modules/hall-ui/public/tweak-editor.html

@@ -74,7 +74,7 @@
           <p class="tw-hint" id="tw-hint" hidden></p>
           <div class="tw-notice" id="tw-notice" role="status" hidden></div>
           <div id="tw-doc">
-            <p class="tw-loading">Reading the page…</p>
+            <p class="hall-loading hall-loading--page" role="status">Reading the page…</p>
           </div>
         </article>
 

package/modules/hall-ui/public/watch.html

@@ -34,6 +34,8 @@
       </div>
 
       <main id="hall-main">
+        <!-- task 1005043: the page loader, shown until the sealed notice or a pane has something showing. -->
+        <p class="hall-loading hall-loading--page hall-loading--zones" role="status">Loading…</p>
         <!-- Restricted notice — shown by watch.js when the viewer is below the
              floor, with the floor written in from the pack's rank label. -->
         <section class="scroll" id="sealed-scroll" aria-labelledby="sealed-h" hidden>

package/modules/hall-ui/public/watch.js

@@ -754,7 +754,7 @@
         if (!btn || !target.contains(btn)) return;
         const slug = btn.getAttribute('data-doc-open');
         const view = $('#engagement-doc-view');
-        if (view) view.innerHTML = foot('Reading…');
+        if (view) view.innerHTML = '<p class="hall-loading" role="status">Reading…</p>';
         try {
           const res = await fetchJson(`/security/docs/${encodeURIComponent(slug)}`);
           const doc = res.doc || {};

package/modules/hall-ui/public/work.html

@@ -105,7 +105,7 @@
           <p class="claim-count-line" id="claim-count" aria-live="polite"></p>
 
           <div class="task-list" id="task-list">
-            <div class="profile__placeholder">…</div>
+            <div class="hall-loading" role="status">Loading…</div>
           </div>
           <div id="ready-pager-mount"></div>
         </section>
@@ -117,7 +117,7 @@
 
           <table class="ledger" id="wip-table">
             <thead><tr><th></th><th>#</th><th>Task</th><th>Builder</th><th>For</th><th></th></tr></thead>
-            <tbody><tr><td colspan="6" class="ledger__empty">…</td></tr></tbody>
+            <tbody><tr><td colspan="6" class="ledger__empty"><span class="hall-loading" role="status">Loading…</span></td></tr></tbody>
           </table>
           <div id="wip-pager-mount"></div>
         </section>
@@ -139,7 +139,7 @@
           <div class="stat-row" id="works-summary" style="margin-bottom: 14px" hidden></div>
           <p class="scroll__lede">The most recently shipped tasks.</p>
           <div class="history" id="history-list">
-            <div class="profile__placeholder">…</div>
+            <div class="hall-loading" role="status">Loading…</div>
           </div>
           <div id="done-pager-mount"></div>
         </section>

package/modules/hall-ui/records/loader.md

@@ -0,0 +1,35 @@
+# The loader — the Bongos mark wherever a hall page waits for its data (task 1005043)
+
+Goal 1000095. Owner ask, 2026-11-03: a smooth load screen with the Bongos logo whenever the hall
+waits for data, in the spirit of monday.com's Vibe data loaders (vibe.monday.com, Skeleton: grey
+shapes breathing 0.4 to 1 and back over 0.8s, in the place the content will land).
+
+- **One component, in `style.css`: `.hall-loading`.** CSS only. `::before` is the ring and the core
+  (a mask of shell.js's brand-mark geometry, painted `--ink` at 30%), `::after` is the dot (the same
+  box, painted `--accent`). Both turn together round the still core, easing out of and back into the
+  logo's own pose every 1.6s; the ink breathes on half that beat. The element's own text is the
+  caption. It arrives 240ms late (filter: opacity), so a read that answers fast never shows it.
+  Sizes: the default (40px, a panel), `--page` (64px, a page's main area), `--inline` (16px, a line).
+- **A page opts in by putting the class on the placeholder it already had**, and gives it
+  `role="status"`. The words did not change; a bare `…` became `Loading…`. A placeholder a script
+  rewrites IN PLACE (atlas's caption, sessions' status line, the goal dependency ledes, the profile's
+  activity placeholder) keeps its plain words, because the class would stay on the finished sentence.
+- **Pages that are blank while they wait get a page loader that puts itself away.** The sealed/body
+  pages (board-room, deploy, fleet, gate, government, market-watch-settings, project-settings,
+  sessions) open their `<main>` on `.hall-loading--wait`, which shows only while every section after
+  it is `[hidden]`. Home and Watch, whose zones and panes are always present, use
+  `.hall-loading--zones`: it shows while no showing zone has a showing child. Both are `:has()`
+  rules inside `@supports`, so a browser without it simply never shows them. No page script hides
+  them. Settings' layout is never `[hidden]`, so `hideLayout()` puts its loader away.
+- **Lists that paint later carry a loader inside them**: Blockers' list (its first `renderList`
+  replaces it), Collab's three ask lists (its failure path now stops them and says why, where the page
+  used to stay blank), the table placeholder rows (the loader sits inside the `ledger__empty` cell).
+- **The skeletons breathe too.** `.kit-skel` and the goal list's `.gr-skel__ring` take the loader's
+  breath, so the Goals list's row skeleton is the Vibe pattern exactly.
+- **DESIGN.md holds.** Transform and filter only; every colour a token (the black in the masks is
+  alpha); the Kill Switch stops it all and leaves the logo. The 20s ambient floor is for the plates:
+  a loader is the live thing on the page, which is also why its dot may spend the accent.
+- **Not covered:** the apex pages (account, projects, community) and the status page run their own
+  sheets; the city, street, goal map and thinking sky draw their own worlds and kept their own lines.
+- **Look at it:** `node scripts/hall-preview/server.js --port 4630 --fixture-me --latency 5000` holds
+  every read 5s (task 1005043 added `--latency`). Tests: `tests/hall_loading.mjs`.

package/package-lock.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.25",
+  "version": "1.24.26",
   "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/release-notes.json

@@ -11071,5 +11071,15 @@
       "id": "1004593",
       "text": "A hosted project's Settings page no longer offers an unreleased version; it now offers exactly what the Upgrade page offers."
     }
+  ],
+  "1.24.26": [
+    {
+      "id": "1005043",
+      "text": "While a page in the builders' hall is waiting for its data, the Bongos logo now turns gently where the content will appear, instead of a blank space or a line of grey text."
+    },
+    {
+      "id": "1004736",
+      "text": "A hosted project's Update button no longer leads to a missing page; it opens the Upgrade page for that project."
+    }
   ]
 }

package/scripts/hall-preview/README.md

@@ -22,6 +22,7 @@ node scripts/hall-preview/server.js                 # neutral pack, port 4600
 | `--modules-off discord,provisioning` | report those modules disabled in `window.__MODULES__` — verifies `moduleOn()` gating (the Discord links, Instances/Start-a-project widgets must vanish) |
 | `--empty` | drain every array in every fixture — the empty-state screenshot pass |
 | `--fixture-me` | don't read your own account live — serve the checked-in `me.json` snapshot (see below) |
+| `--latency 3000` | hold every data read that many ms before answering, so a page's loading state (the hall's `.hall-loading` mark) stays on screen long enough to look at |
 
 Writes are not wired: any `POST/PATCH/DELETE` answers `501 preview_readonly` — except
 the canned writes in `server.js` and, since task 1004685, the five per-builder pref

package/scripts/hall-preview/server.js

@@ -65,6 +65,10 @@ const MODULES_ON = String(arg('--modules-on') || '').split(',').map((s) => s.tri
 // own account live. The screenshot matrix in the README wants a stable subject,
 // and it is the explicit way to preview the signed-out fallback (task 1003315).
 const FIXTURE_ME = process.argv.includes('--fixture-me');
+// --latency: hold every data read this many ms before answering (task 1005043),
+// so a page's loading state stays on screen long enough to be looked at. The
+// fixtures answer in a millisecond, which is why no loader had ever been seen.
+const LATENCY = Math.max(0, Number(arg('--latency')) || 0);
 const BRAND_FILE = arg('--brand') || 'config/branding.neutral.json';
 process.env.BONGOS_BRANDING_FILE = path.resolve(ROOT, BRAND_FILE);
 
@@ -295,6 +299,11 @@ function fixtureFor(apiPath, query = {}) {
 // ---- app ----------------------------------------------------------------------
 const app = express();
 
+// --latency (above): the live channel is left alone, it is a stream, not a read.
+if (LATENCY) {
+  app.use((req, res, next) => (/^\/api\//.test(req.path) && !/\/live\/?$/.test(req.path) ? setTimeout(next, LATENCY) : next()));
+}
+
 // The API stub — intercepts every /api/gds/*, /api/bongos/*, /api/bongos/v1/*
 // request BEFORE mountInternalSurfaces can reach the real routes (which would
 // touch Postgres — the harness is DB-less by design). A plain function

package/src/bongos/apex-hall-redirects.js

@@ -0,0 +1,53 @@
+'use strict';
+
+// src/bongos/apex-hall-redirects.js — the apex hands the hall's addresses to the hall's own
+// host: /builders/* (the ADR 0036 cutover) and /deploy, the deploy door every hosted
+// project's Update button names (task 1004736).
+//
+// Moved out of serve-internal.js, which sits at the 1500-line size ratchet, and mounted from
+// it at the same point in the chain. `skip(req)` is true for a module surface host and for
+// the hall's own host (on a single-host instance that is every request), so both answer only
+// on the apex. `hostOf(req)` is the request's host, lower-cased, without a port.
+
+// #739 (ADR 0036 cutover): the builder surface's canonical home is the subdomain. On the
+// apex, /builders and /builders/* go to builders.<apex>/<rest> so old links keep working.
+// 301 (permanent) — the cutover is proven live (#741; started as a 302 in #739). The URL
+// fragment (#/task/N deep-links) is preserved by the browser across the redirect; the query
+// string is carried explicitly. The target apex comes from the request host, so it stays
+// brand-agnostic.
+function buildersRedirect({ skip, hostOf }) {
+  return (req, res, next) => {
+    if (skip(req)) return next();
+    if (req.path !== '/builders' && !req.path.startsWith('/builders/')) return next();
+    const rest = req.path.replace(/^\/builders\/?/, '');            // '/builders'→'', '/builders/watch'→'watch'
+    const qs = req.url.includes('?') ? req.url.slice(req.url.indexOf('?')) : '';
+    return res.redirect(301, `https://builders.${hostOf(req)}/${rest}${qs}`);
+  };
+}
+
+// THE DEPLOY DOOR ON THE APEX (task 1004736). A hosted project's Update button is
+// `<hub origin>/deploy?project=<slug>` (routes/core-update.js hubDeployUrl, and the
+// HUB_UPGRADE_URL provisioning writes), and the hub origin is its apex, where nothing served
+// /deploy: every hosted owner who pressed Update met a 404. The page is the hall's, so the
+// apex hands the request over, query and all, and the hall decides (its page gate, or
+// Settings where no door runs). Answered here rather than by rewriting the links, because
+// those already sit in every project's web.env and core and would wait for each project's
+// core to move. 302: the apex may serve its own /deploy one day.
+const APEX_DEPLOY_RE = /^\/deploy(?:\.html)?\/?$/;
+function deployRedirect({ skip, hostOf }) {
+  return (req, res, next) => {
+    if (skip(req)) return next();
+    if (req.method !== 'GET' && req.method !== 'HEAD') return next();
+    if (!APEX_DEPLOY_RE.test(req.path)) return next();
+    const qs = req.url.includes('?') ? req.url.slice(req.url.indexOf('?')) : '';
+    return res.redirect(302, `https://builders.${hostOf(req)}/deploy${qs}`);
+  };
+}
+
+/** Mount both on `app`, in order, at the caller's point in the chain. */
+function mountApexHallRedirects(app, { skip, hostOf }) {
+  app.use(buildersRedirect({ skip, hostOf }));
+  app.use(deployRedirect({ skip, hostOf }));
+}
+
+module.exports = { mountApexHallRedirects };

package/src/bongos/serve-internal.js

@@ -34,6 +34,7 @@ const fs = require('fs');
 const express = require('express');
 
 const { buildGdsRouter } = require('./routes');
+const { mountApexHallRedirects } = require('./apex-hall-redirects');
 const { attachFail } = require('./middleware/error-envelope');
 const metrics = require('./metrics');
 const { logger } = require('./logger');
@@ -923,24 +924,8 @@ function mountInternalSurfaces(app) {
     next();
   });
 
-  // #739 (ADR 0036 cutover): the builder surface's canonical home is now the
-  // subdomain. On the apex/game host, redirect /builders and /builders/* to
-  // builders.<apex>/<rest> so old links keep working while the subdomain becomes
-  // the front door. Runs ONLY on the apex (skipped on the status + builders
-  // hosts; /api is host-agnostic and mounted earlier, and never starts /builders).
-  // 301 (permanent) — the cutover is proven live + verified end-to-end (#741;
-  // started as a 302 in #739). The URL fragment (#/task/N deep-links) is preserved
-  // by the browser across the redirect; the query string is carried explicitly.
-  // The redirect target apex is read from the request host (strip a leading
-  // "builders."/"status." if present) so it stays brand-agnostic.
-  app.use((req, res, next) => {
-    if (isModuleSurfaceHost(req) || isBuildersHost(req)) return next();
-    if (req.path !== '/builders' && !req.path.startsWith('/builders/')) return next();
-    const apex = siteOf(req).host;
-    const rest = req.path.replace(/^\/builders\/?/, '');            // '/builders'→'', '/builders/watch'→'watch'
-    const qs = req.url.includes('?') ? req.url.slice(req.url.indexOf('?')) : '';
-    return res.redirect(301, `https://builders.${apex}/${rest}${qs}`);
-  });
+  // The apex hands /builders/* (ADR 0036) and /deploy (task 1004736) to the hall's own host.
+  mountApexHallRedirects(app, { skip: (req) => isModuleSurfaceHost(req) || isBuildersHost(req), hostOf: (req) => siteOf(req).host });
 
   // The /watch monitoring page and the /gate page (task 1179) both sit behind
   // `page.view.government` — Metic and up since ADR 0157. Same server-side page

package/src/module-api.js

@@ -81,7 +81,7 @@ const { sleep } = require('./sleep');
 // MAJOR (see allowBoxScope below): passes the request through untouched.
 function deprecatedNoopMiddleware(_req, _res, next) { next(); }
 
-const CORE_VERSION = '1.24.25'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
+const CORE_VERSION = '1.24.26'; // CI auto-patch carrier (ADR 0161); changelog: docs/module-api-changelog.md
 
 // A namespaced logger so a module's log lines are attributable + consistent.
 // Usage: const log = api.logger('discord'); log.info('mounted');

package/tests/hall_loading.mjs

@@ -0,0 +1,153 @@
+// tests/hall_loading.mjs — the hall's one loader, the Bongos mark (task 1005043, goal 1000095).
+//
+// Owner ask, 2026-11-03: a smooth load screen with the Bongos logo anywhere the
+// hall waits for data, in the spirit of monday.com's Vibe data loaders. One CSS
+// component in style.css (.hall-loading) draws the mark from shell.js's
+// brand-mark geometry; a page opts in by putting the class on the placeholder it
+// already had. These cases read the real sheets and pages: the loader keeps
+// DESIGN.md's motion and colour rules, its rest frame is the logo, and no hall
+// page is left with a bare "Loading…" line or a blank wait.
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const HALL = path.join(ROOT, 'modules/hall-ui/public');
+const read = (f) => fs.readFileSync(path.join(HALL, f), 'utf8');
+const STYLE = read('style.css');
+const SHELL = read('shell.js');
+
+// The loader's section of style.css, from its banner to the next rule family.
+const START = STYLE.indexOf('/* ---- the loader (task 1005043)');
+const LOADER = STYLE.slice(START, STYLE.indexOf('/* collapsible card body', START));
+
+function keyframes(name) {
+  const m = STYLE.match(new RegExp(`@keyframes ${name} \\{`));
+  assert.ok(m, `@keyframes ${name} exists`);
+  let depth = 1, i = m.index + m[0].length;
+  for (; i < STYLE.length && depth; i++) depth += STYLE[i] === '{' ? 1 : STYLE[i] === '}' ? -1 : 0;
+  return STYLE.slice(m.index + m[0].length, i - 1);
+}
+
+test('the loader is drawn from the Bongos mark, in three sizes', () => {
+  assert.ok(START > 0 && LOADER.length > 500, 'the loader section is found in style.css');
+  for (const sel of ['.hall-loading {', '.hall-loading::before {', '.hall-loading::after {', '.hall-loading--page {', '.hall-loading--inline {']) {
+    assert.ok(LOADER.includes(sel), `${sel} is declared`);
+  }
+  // The same ring arc, core and dot the shell's brand mark draws, so the loader IS the logo.
+  const ring = SHELL.match(/<path class="mr" d="([^"]+)"/)[1];
+  assert.ok(LOADER.includes(`d='${ring}'`), 'the ring is the brand mark\'s arc');
+  assert.ok(SHELL.includes('<circle class="mp" cx="100" cy="100" r="55"'), 'the brand mark\'s core');
+  assert.ok(LOADER.includes("circle cx='100' cy='100' r='55'"), 'is the loader\'s core');
+  assert.ok(SHELL.includes('<circle cx="156" cy="46" r="12" fill="#fb9569"/>'), 'the brand mark\'s dot');
+  assert.ok(LOADER.includes("circle cx='156' cy='46' r='12'"), 'is the loader\'s dot');
+});
+
+test('it moves in CSS only, on transform and filter only, and rests on the logo', () => {
+  const frames = { 'hall-loading-arrive': keyframes('hall-loading-arrive'), 'hall-loading-turn': keyframes('hall-loading-turn'), 'hall-loading-breathe': keyframes('hall-loading-breathe') };
+  for (const [name, body] of Object.entries(frames)) {
+    const props = [...body.matchAll(/([a-z-]+)\s*:/g)].map((m) => m[1]);
+    assert.ok(props.length, `${name} animates something`);
+    for (const prop of props) assert.ok(['transform', 'filter'].includes(prop), `${name} animates ${prop}, not transform or filter`);
+  }
+  // The rest frame: the turn has no `from`, so 0deg (the logo's own pose, 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(frames['hall-loading-turn'], /^\s*to \{ transform: rotate\(1turn\); \}\s*$/);
+  assert.match(frames['hall-loading-arrive'], /^\s*from \{/);
+  assert.match(frames['hall-loading-breathe'], /^\s*from \{/);
+  // The Kill Switch stops every animation, pseudo-elements included.
+  assert.match(STYLE, /@media \(prefers-reduced-motion: reduce\) \{\s*\*, \*::before, \*::after \{\s*animation: none !important;/);
+  // No motion authored in JavaScript: nothing in the hall drives the loader from script.
+  for (const f of fs.readdirSync(HALL).filter((n) => n.endsWith('.js'))) {
+    assert.doesNotMatch(read(f), /hall-loading[^'"\n]*['"]\)?\.(animate|style)\b/, `${f} does not animate the loader`);
+  }
+});
+
+test('every colour is a token; the black in the masks is alpha, not paint', () => {
+  const css = LOADER.replace(/\/\*[\s\S]*?\*\//g, '');
+  assert.doesNotMatch(css, /#[0-9a-fA-F]{3,8}\b|rgba?\(|hsla?\(/, 'no colour literal');
+  const paints = [...css.matchAll(/(?:background|color):\s*([^;]+);/g)].map((m) => m[1].trim());
+  assert.ok(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\) \d+%, 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 = [...css.matchAll(/url\("data:image\/svg\+xml,([^"]+)"\)/g)].map((m) => decodeURIComponent(m[1]));
+  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('the page loaders step aside by themselves, and never show without :has()', () => {
+  assert.match(STYLE, /\.hall-loading--wait, \.hall-loading--zones \{ display: none; \}/);
+  assert.match(STYLE, /@supports selector\(:has\(a\)\) \{\s*\.hall-loading--wait:not\(:has\(~ :not\(\[hidden\], script, template, style\)\)\) \{ display: flex; \}\s*\.hall-loading--zones:not\(:has\(~ :not\(\[hidden\]\) > :not\(\[hidden\], script, template, style\)\)\) \{ display: flex; \}\s*\}/);
+  // A page whose sections all start [hidden] carries the --wait loader FIRST in its main.
+  for (const page of ['board-room', 'deploy', 'fleet', 'gate', 'government', 'market-watch-settings', 'project-settings', 'sessions']) {
+    const html = read(`${page}.html`);
+    const main = html.slice(html.indexOf('<main id="hall-main">'));
+    const first = main.replace(/<main id="hall-main">\s*(<!--[\s\S]*?-->\s*)*/, '');
+    assert.match(first, /^<p class="hall-loading hall-loading--page hall-loading--wait" role="status">Loading…<\/p>/, `${page} opens its main on the page loader`);
+    const after = first.slice(first.indexOf('</p>') + 4);
+    const kids = [...after.matchAll(/^ {8}<(section|div|p|nav)\b([^>]*)>/gm)];
+    assert.ok(kids.length >= 2, `${page} has sections after the loader`);
+    for (const [, tag, attrs] of kids) assert.match(attrs, /\bhidden\b/, `${page}: a <${tag}> after the loader starts hidden, or the loader would never show`);
+  }
+  assert.match(read('index.html'), /<section class="view" id="view-home"[^>]*>\s*<!--[^>]*-->\s*<p class="hall-loading hall-loading--page hall-loading--zones" role="status">Loading…<\/p>/, 'Home waits on its zones');
+  assert.match(read('watch.html'), /<main id="hall-main">\s*<!--[^>]*-->\s*<p class="hall-loading hall-loading--page hall-loading--zones" role="status">Loading…<\/p>/, 'Watch waits on its panes');
+  // Settings' layout is never [hidden] while it loads, so its loader is put away by hideLayout().
+  assert.match(read('settings.html'), /id="settings-groups"[^>]*>\s*<!--[^>]*-->\s*<p class="hall-loading hall-loading--page" id="settings-loading" role="status">/);
+  assert.match(read('settings.js'), /function hideLayout\(hide\) \{[\s\S]*?getElementById\('settings-loading'\)[\s\S]*?loading\.hidden = true;/);
+});
+
+test('no hall page waits on a bare line of text any more', () => {
+  // A placeholder an element's own script rewrites IN PLACE keeps its plain words:
+  // the class would stay behind on the finished sentence. Each is named with why.
+  const IN_PLACE = new Set([
+    'atlas.html#caption',             // the map's caption, rewritten by atlas.js
+    'sessions.html#ledger-status',    // the ledger's status line, rewritten by sessions.js
+    'goals.html#goal-deps-card-lede', // the dependency card's lede, rewritten by goals-page.js
+    'goals.html#goal-deps-lede',
+    'profile.html#activity-placeholder', // reused for the signed-out notice by profile.js
+  ]);
+  const WAIT = /<(p|div|li|span|td)\b([^>]*)>\s*(?:Loading|Reading|Opening|Checking)\b[^<]*…\s*<\/\1>|<(p|div|li|span|td)\b([^>]*)>…<\/\4>/g;
+  const misses = [];
+  for (const f of fs.readdirSync(HALL).filter((n) => n.endsWith('.html'))) {
+    for (const m of read(f).matchAll(WAIT)) {
+      const attrs = m[2] || m[5] || '';
+      if (/page-head__sub/.test(attrs)) continue; // the page head is hidden on every page but Home (task 1004836)
+      const id = (attrs.match(/\bid="([^"]+)"/) || [])[1];
+      if (id && IN_PLACE.has(`${f}#${id}`)) continue;
+      if (!/\bhall-loading\b/.test(attrs)) misses.push(`${f}: ${m[0].slice(0, 90)}`);
+    }
+  }
+  assert.deepEqual(misses, [], 'every waiting placeholder wears the loader');
+  // The table placeholder rows keep their cell, with the loader inside it.
+  assert.match(read('work.html'), /<td colspan="6" class="ledger__empty"><span class="hall-loading" role="status">Loading…<\/span><\/td>/);
+  assert.match(read('hall-widgets.js'), /<td colspan="4" class="ledger__empty"><span class="hall-loading" role="status">Loading…<\/span><\/td>/);
+});
+
+test('the placeholders the page scripts write wear it too, and a failure stops it', () => {
+  const WRITTEN = {
+    'blockers.js': '<li class="hall-loading hall-loading--page" role="status">Loading…</li>',
+    'goals.js': '<div class="hall-loading" role="status">Loading your goals…</div>',
+    'lightbulb.js': '<p class="hall-loading" role="status">Loading…</p>',
+    'task-detail.js': '<p class="hall-loading hall-loading--inline" role="status">Loading versions…</p>',
+    'criterion-uat-ui.js': '<p class="hall-loading hall-loading--inline" role="status">Loading…</p>',
+    'watch.js': '<p class="hall-loading" role="status">Reading…</p>',
+    'studio.js': '<p class="hall-loading" role="status">Reading the reviews…</p>',
+    'settings-specialities.js': '<p class="hall-loading hall-loading--inline" role="status">Loading this project’s skills…</p>',
+    'settings-software-update.js': '<p class="hall-loading hall-loading--inline" role="status">Checking for a newer version…</p>',
+    'goals-page.js': '<div class="hall-loading" role="status">Loading…</div>',
+  };
+  for (const [f, markup] of Object.entries(WRITTEN)) assert.ok(read(f).includes(markup), `${f} writes the loader`);
+  // Blockers' first paint replaces the list wholesale, so its loader cannot outlive the rows.
+  assert.match(read('blockers.js'), /listEl\.innerHTML = rows\.length/);
+  // Collab used to be blank on a failed read; with loaders in its lists it must stop them.
+  const collab = read('collab.js');
+  const failure = collab.slice(collab.lastIndexOf('load().catch('));
+  assert.match(failure, /\['for-me', 'mine', 'all'\]\.forEach\(\(k\) => \{ const host = \$\(`#cb-\$\{k\}`\); if \(host\) host\.innerHTML = ''; \}\);/);
+  // The skeleton bars and the goal list's rings breathe in the loader's beat.
+  assert.match(STYLE, /\.kit-skel \{[^}]*animation: hall-loading-breathe \.8s ease-in-out infinite alternate-reverse;/);
+  assert.match(read('goals.css'), /\.gr-skel__ring \{[^}]*animation: hall-loading-breathe \.8s ease-in-out infinite alternate-reverse;/);
+});