@bongos/core 1.24.26 → 1.24.27

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

@@ -1057,7 +1057,7 @@ summary{min-height:24px;padding:3px 0;}
       <!-- signed-in: the list -->
       <section id="mine" hidden>
         <div class="alert" id="pageAlert" role="alert"></div>
-        <div class="loading" id="loading">Reading your projects…</div>
+        <div class="loading loading-mark loading-mark--page" id="loading" role="status">Reading your projects…</div>
 
         <!-- search + state filter. The filter GROUPS the chip outcomes; it never
              relabels them: "Live" holds both `live` and `live?` because neither is
@@ -1152,7 +1152,7 @@ summary{min-height:24px;padding:3px 0;}
     </section>
 
     <div class="alert" id="mAlert" role="alert"></div>
-    <div class="loading" id="mLoading">Reading the project…</div>
+    <div class="loading loading-mark loading-mark--page" id="mLoading" role="status">Reading the project…</div>
 
     <section id="mMain" hidden>
       <!-- the ledger of facts (task 1003345): each fact keeps its id and fills
@@ -1237,7 +1237,7 @@ summary{min-height:24px;padding:3px 0;}
 
       <div class="card mSec" id="mPublish" hidden>
         <h2>On the public map</h2>
-        <div id="mPub"><p class="finePrint">Reading the project…</p></div>
+        <div id="mPub"><p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project…</p></div>
         <details class="finePrint" id="mPubWhat">
           <summary>What puts a project on the map</summary>
           <p>Two things, and only two: a name — this project already has one — and a description of what it is. Modules, artwork, a finished setup interview: none of them are required, because the bar is there to keep empty shells off the map, not to make you finish anything. Until it is met the project is not listed publicly and nobody can ask to join it; the project itself runs exactly the same either way. Adding a description puts it on the map, and clearing one takes it back off.</p>
@@ -1251,7 +1251,7 @@ summary{min-height:24px;padding:3px 0;}
            project) — the same call the card's fold used to make. -->
       <div class="card mSec" id="mAddress" hidden>
         <h2>Its address</h2>
-        <div id="mDom"><p class="finePrint">Reading the project…</p></div>
+        <div id="mDom"><p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project…</p></div>
         <details class="finePrint" id="mDomWhat">
           <summary>Where an address comes from</summary>
           <p>Every project gets one on this platform, at its own handle. You can point a domain you already own at it instead: type the name here, then add a DNS record for it at your registrar. The platform holds the address for this project and wires the secure connection once the name resolves. Changing it later lets the old address go, and nothing on the project restarts for it.</p>
@@ -1265,7 +1265,7 @@ summary{min-height:24px;padding:3px 0;}
            (walk finding N4, ADR 0176). -->
       <div class="card mSec" id="mRepoVisibility">
         <h2>Repository visibility</h2>
-        <div id="mRepoVis"><p class="finePrint">Checking the repository on GitHub…</p></div>
+        <div id="mRepoVis"><p class="finePrint loading-mark loading-mark--inline" role="status">Checking the repository on GitHub…</p></div>
         <details class="finePrint" id="mRepoVisWhy">
           <summary>What making it private does</summary>
           <p>The platform first gives this project its own read-only deploy key and switches its deploys over to it, and only then makes the repository private — in that order, so no deploy ever tries to read a private repository with a key that can’t. The change is made with your connected GitHub account, so that account needs admin rights on the repository. It works for a project on a Cloud host; a project on your own host is yours to change on GitHub directly. You can make it public again from here at any time.</p>
@@ -1281,7 +1281,7 @@ summary{min-height:24px;padding:3px 0;}
            #mRepoVisWhy shape) so no re-render can drop it. -->
       <div class="card mSec" id="mVisibility">
         <h2>Who can see it</h2>
-        <div id="mVis"><p class="finePrint">Reading the project’s settings…</p></div>
+        <div id="mVis"><p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project’s settings…</p></div>
         <details class="finePrint" id="mVisWhat">
           <summary>What “only signed-in members” changes</summary>
           <p>Visitors who aren’t signed in meet a sign-in door instead of the project’s pages — its front page, its status page, and its hall. The door itself stays open, so members can always get in, and members see everything either way. It is separate from the repository’s visibility above: the code on GitHub is its own setting. Changing it restarts the project to pick it up — the line under the choice says what the project is running right now.</p>
@@ -1296,7 +1296,7 @@ summary{min-height:24px;padding:3px 0;}
            fold is a SIBLING of the volatile slot so no re-render can drop it. -->
       <div class="card mSec" id="mJoinability">
         <h2>How people join</h2>
-        <div id="mJoin"><p class="finePrint">Reading the project’s settings…</p></div>
+        <div id="mJoin"><p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project’s settings…</p></div>
         <details class="finePrint" id="mJoinWhat">
           <summary>What each choice changes</summary>
           <p><b>Anyone can join</b> — whoever signs in with GitHub becomes a member at once, at the newcomer rank. <b>Apply to join</b> — people ask from the project’s hall, you approve each one from the hall’s Watch page, and then they sign in. <b>Invite only</b> — no one can apply: the project’s hall and its sign-in say so, and you invite people by GitHub username from the hall’s Watch page; only an invited person’s sign-in gets in — and people who asked before you switched stay in your queue, to approve or dismiss. Whichever you pick, people who are already members stay members. Changing it restarts the project to pick it up — the line under the choice says what the project is running right now.</p>
@@ -1315,7 +1315,7 @@ summary{min-height:24px;padding:3px 0;}
            slot so no re-render can drop it. -->
       <div class="card mSec" id="mDoorState">
         <h2>On the map</h2>
-        <div id="mDoor"><p class="finePrint">Reading the project’s settings…</p></div>
+        <div id="mDoor"><p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project’s settings…</p></div>
         <details class="finePrint" id="mDoorWhat">
           <summary>What each choice changes</summary>
           <p><b>Public</b> — the project is on the map under its name, and anyone who finds it can join. <b>Private</b> — it is on the map under its name, but nobody joins on their own: people ask, and you decide. <b>Stealth</b> — the map shows only that something is there; its name, and everything else about it, stay yours, and nobody can ask to join. Switching to Stealth is itself visible: someone comparing the map before and after can tell which project went quiet. Whichever you pick, a project reaches the map only once it has a name and a description. This is separate from “Who can see it” above — that one is the door on the project’s own pages. Changing it restarts the project to pick it up.</p>
@@ -1337,7 +1337,7 @@ summary{min-height:24px;padding:3px 0;}
            SIBLING of the volatile slot so no re-render can drop it. -->
       <div class="card mSec" id="mKind">
         <h2>Its kind</h2>
-        <div id="mKindPick"><p class="finePrint">Reading the project…</p></div>
+        <div id="mKindPick"><p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project…</p></div>
         <details class="finePrint" id="mKindWhat">
           <summary>What the choice changes</summary>
           <p>How this project is listed — the kind shown beside its name on the map, in the table and on its card. It is a declaration about the project, not a setting the project obeys: nothing is pushed to it and nothing restarts. One thing does follow the kind: if you never picked your extras yourself, they are the set this kind suggests, so changing the kind changes them too — you will be told when that happens. Extras you picked for yourself are stored and never move. Not Sure is a real answer, and it is the way back if you would rather not say.</p>
@@ -1357,7 +1357,7 @@ summary{min-height:24px;padding:3px 0;}
            is a SIBLING of the volatile slot so no re-render can drop it. -->
       <div class="card mSec" id="mModules">
         <h2>Its extras</h2>
-        <div id="mMods"><p class="finePrint">Reading the project…</p></div>
+        <div id="mMods"><p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project…</p></div>
         <details class="finePrint" id="mModsWhat">
           <summary>What an extra is — and what is always on</summary>
           <p>Extras are the optional parts a project can run — extra AI agents, a Discord mirror, and the rest. You picked a set when you created the project, or took the suggested set by skipping that step; this is where you change your mind. Switching one on or off saves straight away and changes nothing that is already running: nothing restarts, and no work is lost either way. The parts every project runs — the platform itself, the way it tracks work, the builders’ hall — were never part of the choice, so they are not listed here and cannot be switched off.</p>
@@ -1372,7 +1372,7 @@ summary{min-height:24px;padding:3px 0;}
            environment variables with no value box is otherwise read as unfinished. -->
       <div class="card mSec" id="mEnvVars">
         <h2>Its environment variables</h2>
-        <div id="mEnv"><p class="finePrint">Reading the project…</p></div>
+        <div id="mEnv"><p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project…</p></div>
         <details class="finePrint" id="mEnvWhat">
           <summary>Why there is nowhere to type the value</summary>
           <p>This is a list of which variables your project needs and what each one is for — not the secrets themselves. The values belong wherever your project actually runs (Vercel, Netlify, Render, or your own machine): that is where the running app reads them, and it already keeps them encrypted, logs who touched them and lets you rotate them. Keeping a second copy here would make this platform the keeper of your credentials and buy you nothing.</p>
@@ -1425,7 +1425,7 @@ summary{min-height:24px;padding:3px 0;}
            can drop it. -->
       <div class="card mSec" id="mPlanetPick">
         <h2>Its planet</h2>
-        <div id="mPick"><p class="finePrint">Reading the project…</p></div>
+        <div id="mPick"><p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project…</p></div>
         <details class="finePrint" id="mPickWhat">
           <summary>What the choice changes</summary>
           <p>How this project is drawn: on the sky, in your list, at the top of this page and on its card. A planet is a <b>shape</b> (the blob, the bongo pair, the bead), a <b>material</b> (chrome, frost, gold, obsidian), a <b>style</b> (tinted: the colour replaces the material’s own; washed: the material lit by the colour; plain: as it is) and a <b>colour</b>, one of the world’s five. Until you choose, the platform picks one for it. Saving here changes nothing on the project itself: no restart, nothing to apply.</p>
@@ -1437,7 +1437,7 @@ summary{min-height:24px;padding:3px 0;}
            like it: nothing is pushed to the project and nothing restarts. -->
       <div class="card mSec" id="mCard">
         <h2>Its card</h2>
-        <div id="mCardPick"><p class="finePrint">Reading the project…</p></div>
+        <div id="mCardPick"><p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project…</p></div>
         <details class="finePrint" id="mCardWhat">
           <summary>What the choice changes</summary>
           <p>The backdrop behind this project’s name on its card — the panel that opens when someone picks it out of the map. Four plates the platform drew, or the project’s own picture if you have given it one. Saving here changes nothing on the project itself: no restart, nothing to apply.</p>
@@ -1452,7 +1452,7 @@ summary{min-height:24px;padding:3px 0;}
       <div class="card mSec" id="mLook">
         <h2>Its look</h2>
         <div id="mLookBody">
-          <div id="mLookPick"><p class="finePrint">Reading the project…</p></div>
+          <div id="mLookPick"><p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project…</p></div>
           <div class="actions" id="mLookActions" hidden><button type="button" class="btn small" id="mLookSave">Save the look</button></div>
           <div class="projMsg" id="mLookMsg" role="status" aria-live="polite"></div>
         </div>
@@ -1472,7 +1472,7 @@ summary{min-height:24px;padding:3px 0;}
            something, and the card's one-click confirm is too light for it. -->
       <div class="card mSec" id="mDelete">
         <h2>Take it offline</h2>
-        <div id="mDel"><p class="finePrint">Reading the project…</p></div>
+        <div id="mDel"><p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project…</p></div>
         <!-- the teardown-vs-delete distinction, stated once as a SIBLING of the
              volatile slot (the #mRepoVisWhy shape) so no re-render can drop it.
              Nothing on this page erases a project, and the copy says so rather
@@ -1488,7 +1488,7 @@ summary{min-height:24px;padding:3px 0;}
            #mDelWhat, so no re-render can drop what it promises. -->
       <div class="card mSec" id="mDisconnect">
         <h2>Disconnect from Bongos entirely</h2>
-        <div id="mDisc"><p class="finePrint">Reading the project…</p></div>
+        <div id="mDisc"><p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project…</p></div>
         <details class="finePrint" id="mDiscWhat">
           <summary>What this erases — and what it keeps</summary>
           <p><b>Erased for good:</b> the project’s server, its database and every nightly backup of it, its settings, its place on the map and the list of its members. Its name and web address are released, so another project can take them.</p>
@@ -1767,7 +1767,7 @@ summary{min-height:24px;padding:3px 0;}
                              missing token is fetched by one automatic GitHub round-trip. Only when
                              that hop could not help does this line show, above the manual fields. -->
                         <div id="ghNoAccess" class="hint" hidden>We couldn’t read your GitHub repositories just now, so enter the repo by hand below.</div>
-                        <div id="ghBusy" class="hint" hidden>Reading your GitHub repositories…</div>
+                        <div id="ghBusy" class="hint loading-mark loading-mark--inline" role="status" hidden>Reading your GitHub repositories…</div>
                         <div id="ghAdopt" class="wizField" hidden>
                           <span>Pick one of your repositories</span>
                           <input type="text" id="ghSearch" placeholder="Search your repos…" autocomplete="off" aria-label="Search your repositories">
@@ -9836,7 +9836,7 @@ summary{min-height:24px;padding:3px 0;}
       repoVisMsg('<p class="finePrint">No repository is linked to this project.</p>');
       return;
     }
-    repoVisMsg('<p class="finePrint">Checking the repository on GitHub…</p>');
+    repoVisMsg('<p class="finePrint loading-mark loading-mark--inline" role="status">Checking the repository on GitHub…</p>');
     var asked = manageId; /* a stale answer must never describe a newer project */
     fetch(API + '/github/repo?repo=' + encodeURIComponent(inst.target_ref), { credentials: 'same-origin' })
       .then(function (res) {
@@ -10169,7 +10169,7 @@ summary{min-height:24px;padding:3px 0;}
   function loadVisRuns(inst) {
     if (!inst || inst.status !== 'active' || !addressReady(inst)) { visRuns(''); return; }   /* the browser's own lookup waits for the name too (task 1004505) */
     var asked = manageId;
-    visRuns('Checking what the project is running…');
+    visRuns('<span class="loading-mark loading-mark--inline" role="status">Checking what the project is running…</span>');
     ensureManifest(inst.domain).then(function (ans) {
       if (asked !== manageId) return;
       if (!ans.ok) {
@@ -10232,7 +10232,7 @@ summary{min-height:24px;padding:3px 0;}
 
   function loadVisibility(inst) {
     mVisSettings = null; mVisRunsHtml = ''; mVisPushSeen = false;
-    visMsg('<p class="finePrint">Reading the project’s settings…</p>');
+    visMsg('<p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project’s settings…</p>');
     var asked = manageId; /* a stale answer must never describe a newer project */
     ensureSettings()
       .then(function (ans) {
@@ -10348,7 +10348,7 @@ summary{min-height:24px;padding:3px 0;}
     $('mLookActions').hidden = true;
     $('mLookMsg').textContent = ''; $('mLookMsg').className = 'projMsg';
     while (host.firstChild) host.removeChild(host.firstChild);
-    var wait = document.createElement('p'); wait.className = 'finePrint'; wait.textContent = 'Reading the project…';
+    var wait = document.createElement('p'); wait.className = 'finePrint loading-mark loading-mark--inline'; wait.setAttribute('role', 'status'); wait.textContent = 'Reading the project…';
     host.appendChild(wait);
     var forId = inst.id;
     fetch(API + '/provisioning/instances/' + encodeURIComponent(inst.id) + '/look', { credentials: 'same-origin' })
@@ -10622,7 +10622,7 @@ summary{min-height:24px;padding:3px 0;}
   function loadJoinRuns(inst) {
     if (!inst || inst.status !== 'active' || !addressReady(inst)) { joinRuns(''); return; }   /* the browser's own lookup waits for the name too (task 1004505) */
     var asked = manageId;
-    joinRuns('Checking what the project is running…');
+    joinRuns('<span class="loading-mark loading-mark--inline" role="status">Checking what the project is running…</span>');
     ensureManifest(inst.domain).then(function (ans) {
       if (asked !== manageId) return;
       if (!ans.ok) {
@@ -10648,7 +10648,7 @@ summary{min-height:24px;padding:3px 0;}
 
   function loadJoinability(inst) {
     mJoinSettings = null; mJoinRunsHtml = ''; mJoinPushSeen = false;
-    joinMsg('<p class="finePrint">Reading the project’s settings…</p>');
+    joinMsg('<p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project’s settings…</p>');
     var asked = manageId; /* a stale answer must never describe a newer project */
     ensureSettings()
       .then(function (ans) {
@@ -10854,7 +10854,7 @@ summary{min-height:24px;padding:3px 0;}
          gets the clause, so a slow network never reports a break that isn't */
       modsSlot(modsFailed
         ? '<p class="finePrint">We couldn’t load the list of extras just now — refresh in a moment. Nothing about your project has changed.</p>'
-        : '<p class="finePrint">Reading the project…</p>');
+        : '<p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project…</p>');
       return;
     }
     var on = modsSelected(inst);
@@ -10957,7 +10957,7 @@ summary{min-height:24px;padding:3px 0;}
 
   function loadDoor() {
     mDoorSettings = null;
-    doorMsg('<p class="finePrint">Reading the project’s settings…</p>');
+    doorMsg('<p class="finePrint loading-mark loading-mark--inline" role="status">Reading the project’s settings…</p>');
     var asked = manageId; /* a stale answer must never describe a newer project */
     ensureSettings()
       .then(function (ans) {
@@ -11177,7 +11177,7 @@ summary{min-height:24px;padding:3px 0;}
     if (mEnvSlug === inst.slug && mEnvVars && (mEnvAdding || mEnvEditing)) return;
     if (mEnvSlug === inst.slug && mEnvVars) { renderEnvManifest(); return; }
     mEnvSlug = inst.slug; mEnvVars = null; mEnvAdding = false; mEnvEditing = null;
-    envMsg('<p class="finePrint">Reading the list…</p>');
+    envMsg('<p class="finePrint loading-mark loading-mark--inline" role="status">Reading the list…</p>');
     fetch(API + '/provisioning/instances/' + encodeURIComponent(inst.id) + '/env-manifest', { credentials: 'same-origin' })
       .then(function (res) {
         return jsonOrEmpty(res).then(function (data) {

package/modules/status-ui/public/index.html

@@ -207,7 +207,7 @@
       </div>
     </div>
     <div id="versions" class="versions">
-      <p class="empty">The masons are at their tools…</p>
+      <p class="empty loading-mark" role="status">The masons are at their tools…</p>
     </div>
   </section>
 
@@ -307,7 +307,7 @@
       </div>
     </div>
     <div id="world-snapshot" class="world-snapshot">
-      <p class="empty">The cartographers are still at their survey…</p>
+      <p class="empty loading-mark" role="status">The cartographers are still at their survey…</p>
     </div>
     <!-- #409: snapshot history collapsed behind a toggle. The latest snapshot
          above is the prime view; the timeline of older snapshots is reference

package/modules/status-ui/public/index.states.json

@@ -0,0 +1,12 @@
+{
+  "_": "The status page's states for modules/ui-design/kit/render.js (task 1005053, its first): the ledger once its reads have answered, from the stub's public fixtures. The status sheet has no dark rules, so `modes` names light alone and there is no query to walk. The stub ships no world snapshots, so the World tablet keeps its still line: its loader stopped when the snapshot list 404'd, which is the failure path this state pictures. The waiting state itself is looked at with the stub's LATENCY=<ms> (serve.js).",
+  "page": "/",
+  "surface": "status-ui",
+  "modes": ["light"],
+  "modeQuery": false,
+  "ignoreRequests": ["/snapshots/manifest\\.json$", "/api/(gds|bongos)/public/(grades|analytics/ecosystem)", "cdn\\.jsdelivr\\.net"],
+  "ignoreConsole": ["status of 404", "snapshots", "ecosystem", "Failed to load resource"],
+  "states": {
+    "loaded": { "auth": false, "actions": [["wait", 600]], "expect": { "visible": ["#versions", "#world-snapshot"], "count": [["#versions .loading-mark", 0], ["#world-snapshot .loading-mark", 0]] } }
+  }
+}

package/modules/status-ui/public/status.js

@@ -77,6 +77,13 @@ function clear(el) {
   while (el.firstChild) el.removeChild(el.firstChild);
 }
 
+// The loader (task 1005053) on a tablet whose read failed or found nothing:
+// it stops turning and its words stay as they were, so a tablet never spins
+// for ever. A later refresh that answers replaces the placeholder anyway.
+function stopWaiting(el) {
+  if (el) for (const wait of el.querySelectorAll('.loading-mark')) wait.classList.remove('loading-mark');
+}
+
 async function fetchJson(path) {
   const res = await fetch(`${API}${path}`, { cache: 'no-store' });
   if (!res.ok) throw new Error(`${path} → ${res.status}`);
@@ -262,6 +269,7 @@ async function loadWorldSnapshots() {
     if (!res.ok) throw new Error(`${res.status}`);
     manifest = await res.json();
   } catch (_) {
+    stopWaiting(els.worldSnapshot);
     return;
   }
 
@@ -276,7 +284,7 @@ async function loadWorldSnapshots() {
       image: `${d}.png`,
     }));
   }
-  if (snapshots.length === 0) return;
+  if (snapshots.length === 0) { stopWaiting(els.worldSnapshot); return; }
 
   // Oldest → newest already from server; reverse to put newest first in strip.
   snapshots.sort((a, b) => (a.timestamp || '').localeCompare(b.timestamp || ''));
@@ -1114,7 +1122,7 @@ async function refresh() {
   const tasks = [
     loadHeadline().catch((e) => console.error('headline', e)),
     loadWorldSnapshots().catch((e) => console.error('snapshots', e)),
-    loadVersions().catch((e) => console.error('versions', e)),
+    loadVersions().catch((e) => { stopWaiting(els.versions); console.error('versions', e); }),
     loadCosts().catch((e) => console.error('costs', e)),
     loadShipped().catch((e) => console.error('shipped', e)),
     loadLeaderboard().catch((e) => console.error('leaderboard', e)),

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

@@ -320,6 +320,55 @@ main {
   font-size: 1rem;
 }
 
+/* ---------- The loader (task 1005053; the hall's, task 1005043) ----------
+   The Bongos mark while a tablet waits for its data: the ring, the core and
+   the accent dot as two masks on the placeholder the tablet already had, whose
+   words stay as its caption. The ring and the dot turn together round the still
+   core, easing out of and back into the logo's pose each beat, and the ink
+   breathes. CSS only, on transform and filter only; every colour a token (the
+   black in the masks is alpha, not paint). It arrives after 240ms, so a read that
+   answers faster never shows it, and the Kill Switch at the foot of this sheet
+   leaves the still logo. A grid, so the dot shares the ring's cell whatever
+   padding the placeholder has. status.js takes the class off a placeholder whose
+   read failed or found nothing, so a tablet never spins for ever. */
+.loading-mark {
+  --lm-size: 40px;
+  display: grid;
+  justify-items: center;
+  align-items: center;
+  gap: 12px;
+  padding: 28px 0;
+  text-align: center;
+  color: var(--ink-faint);
+  animation: loading-mark-arrive 500ms cubic-bezier(.16, 1, .3, 1) 240ms both;
+}
+.loading-mark::before,
+.loading-mark::after {
+  content: "";
+  grid-area: 1 / 1;
+  width: var(--lm-size);
+  height: var(--lm-size);
+  -webkit-mask: var(--lm-shape) center / contain no-repeat;
+  mask: var(--lm-shape) center / contain no-repeat;
+  animation: loading-mark-turn 1.6s cubic-bezier(.45, .05, .55, .95) infinite;
+}
+/* the ring and the core: one ink, breathing */
+.loading-mark::before {
+  --lm-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:
+    loading-mark-turn 1.6s cubic-bezier(.45, .05, .55, .95) infinite,
+    loading-mark-breathe .8s ease-in-out infinite alternate-reverse;
+}
+/* the dot: the accent, laid exactly over the mark and turning with it */
+.loading-mark::after {
+  --lm-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");
+  background: var(--accent);
+}
+@keyframes loading-mark-arrive { from { filter: opacity(0); transform: translateY(6px); } }
+@keyframes loading-mark-turn { to { transform: rotate(1turn); } }
+@keyframes loading-mark-breathe { from { filter: opacity(.45); } }
+
 /* ---------- Versions / Works in Progress ---------- */
 
 .versions {
@@ -1249,3 +1298,11 @@ main {
   font-variant-numeric: tabular-nums;
   line-height: 1;
 }
+
+/* ---------- The Kill Switch (task 1005053) ----------
+   The platform floor (DESIGN.md, the Kill Switch Rule): under reduced motion
+   nothing moves — the loader stands still as the logo, and every transition
+   lands at once. Last in the sheet, so nothing after it can outrank it. */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation: none !important; transition: none !important; }
+}

package/modules/ui-design/kit/README.md

@@ -3,7 +3,7 @@
 The stub, the renderer/auditor, the interaction probes, the mock checker and the contrast probe any builder points at any surface of any instance ([task 1003320](https://cloudbongos.com/builders#/task/1003320), [ADR 0197](../../../docs/adr/0197-the-ui-design-module.md)). Plain Node; the browser is the system Edge or Chrome via `playwright-core` (a devDependency — nothing is downloaded).
 
 ```
-node modules/ui-design/kit/serve.js                     # the stub (SURFACE, PREFIX, AUTH=1, CHILD=1, LIVE=…, FAIL=…, STYLE=<look>, STUB_PORT)
+node modules/ui-design/kit/serve.js                     # the stub (SURFACE, PREFIX, AUTH=1, CHILD=1, LIVE=…, FAIL=…, STYLE=<look>, LATENCY=<ms>, STUB_PORT)
 node modules/ui-design/kit/render.js --page /projects   # every state × 1440/390/320 × dark/light, audited against the floors (--style <look>)
 node modules/ui-design/kit/probe.js  --page /projects   # the interaction contract as PASS/FAIL lines (--style <look>)
 node modules/ui-design/kit/check-mock.js --file docs/design/mocks/hub/v2.html          # (--pack <look> for a style's own mock)

package/modules/ui-design/kit/serve.js

@@ -23,6 +23,8 @@
 //   FAIL=<feed,feed>              those feeds answer 500 (the names in FEEDS below)
 //   STYLE=<name | pack.json>      serve under a look from the style library (modules/ui-design/
 //                                 styles/<name>/pack.json laid over the instance's pack; task 1003323)
+//   LATENCY=<ms>                  hold every /api/ read that long before answering, so a page's
+//                                 waiting state (the loader, task 1005053) can be looked at
 //
 // Exit 2 on a surface that does not resolve. Prints ONE line when listening
 // ("stub on http://…") — render.js and probe.js wait for it.
@@ -43,6 +45,7 @@ const CHILD = process.env.CHILD === '1';
 const LIVE = process.env.LIVE || '';
 const FAIL = new Set(String(process.env.FAIL || '').split(',').map((s) => s.trim()).filter(Boolean));
 const STYLE = process.env.STYLE || '';
+const LATENCY = Math.max(0, Number(process.env.LATENCY) || 0);
 // a states file may point a fixture NAME at another FILE (stub.fixtures, task 1003345) — the
 // way the mine view's empty state is rendered without a second stub shape
 const ALIAS = JSON.parse(process.env.FIXTURE_ALIAS || '{}');
@@ -792,6 +795,10 @@ function scoutingRead(res, origin) {
 }
 
 const server = http.createServer((req, res) => {
+  if (LATENCY && /^\/api\//.test(req.url)) return void setTimeout(() => answer(req, res), LATENCY);
+  return answer(req, res);
+});
+function answer(req, res) {
   const u = new URL(req.url, 'http://x');
   const p = u.pathname;
   const origin = `http://127.0.0.1:${server.address().port}`;
@@ -965,7 +972,7 @@ const server = http.createServer((req, res) => {
     catch (e) { res.writeHead(500, { 'content-type': 'text/plain' }); return res.end('render failed: ' + e.stack); }
   }
   res.writeHead(404, { 'content-type': 'text/plain' }); res.end('404 ' + p);
-});
+}
 server.listen(PORT, '127.0.0.1', () => {
   const port = server.address().port;
   process.stdout.write(`stub on http://127.0.0.1:${port}${PREFIX}  surface=${path.relative(ROOT, DIR) || '.'} auth=${AUTH} child=${CHILD} live=${LIVE || '-'} fail=${[...FAIL].join(',') || '-'} style=${style ? style.name : '-'}\n`);

package/package-lock.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bongos/core",
-  "version": "1.24.26",
+  "version": "1.24.27",
   "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

@@ -11081,5 +11081,19 @@
       "id": "1004736",
       "text": "A hosted project's Update button no longer leads to a missing page; it opens the Upgrade page for that project."
     }
+  ],
+  "1.24.27": [
+    {
+      "id": "1005041",
+      "text": "Updating Bongos from a project's hall is now one button: a small Update pill in the top bar updates the project right there, shows progress, and says Reload when it is done."
+    },
+    {
+      "id": "1004546",
+      "text": "The unattended AI builder can no longer change its own safety rules or off switch: it skips that work, refuses to hand it in, and the server turns it away if it tries."
+    },
+    {
+      "id": "1005053",
+      "text": "The account, projects, community and status pages now show the Bongos logo turning while they wait for data, instead of a plain \"Reading…\" line."
+    }
   ]
 }

package/scripts/bongos/autobongos-loop.js

@@ -101,6 +101,10 @@ function buildWorkerPrompt({ task, packPath = 'docs/packs/engineer.md' } = {}) {
     '',
     'If the "feature" itself is to weaken a gate, change permissions, or touch the deploy or methodology core, STOP and return cannot_complete: those are human-only.',
     '',
+    // task 1004546: the server refuses a runner pull request that changes a protected
+    // file, and a session-log file makes the ship regenerate the protected CLAUDE.md.
+    'Do not add a session-log file under docs/session-logs/: the run log and your ship notes are the record, and the server refuses a runner change that touches a protected file such as CLAUDE.md. If the work needs a protected file or one of the runner\'s own files, ship.js will refuse; return cannot_complete and name the files.',
+    '',
     'Ship it yourself when the work is done and verified: `node scripts/bongos/ship.js <id> --no-surprise --notes \"...\" --summary \"...\"`. Do NOT pass --skip-grade and do not force any gate; if the grader or the merge refuses, that is the system protecting main — return cannot_complete and say so.',
     '',
     // task 1004536: stated here so the worker does not waste a session trying —

package/scripts/bongos/autobongos-run.js

@@ -51,6 +51,9 @@ const tweakLane = require('./autobongos-tweak-lane.js');
 // where it would not be inside modules/ — which is exactly why fence.js takes the
 // hits as an argument instead of matching them itself.
 const { matchProtected } = require('../../src/bongos/permission-path-check');
+// The runner's OWN files (task 1004546): one list, read here before the claim,
+// by ship.js inside the worker, and by the server at publish.
+const runnerSelf = require('../../modules/lifecycle/runner-self.js');
 const { resolveEnv, envPrefix, LEGACY_ENV_PREFIXES } = require('../../src/instance-config');
 const cadence = require('../../modules/autonomy/cadence.js');
 const configIdle = require('../../modules/autonomy/config-idle.js');
@@ -215,8 +218,17 @@ async function pickTask(goals, deps = {}) {
     // reason. It is decided here and not in sequence.js's matrix because the
     // matrix also serves /builder-sequence, where the builder may well hold the
     // host access an unattended runner never has.
+    //
+    // So is work on the runner's own files (task 1004546), for the same reason and
+    // one more: decideTask below refuses it too, but a refusal there returns from
+    // the iteration, and the picker would hand back the same task next time.
     const hostSkipped = [];
     const open = unexcluded.filter((t) => {
+      const self = runnerSelf.matchRunnerSelf(t.touches || []);
+      if (self.length) {
+        hostSkipped.push({ id: t.id, title: t.title, reasons: [{ code: 'self_modification', detail: `${fence.REFUSALS.self_modification} (${self.map((h) => h.file).join(', ')})` }] });
+        return false;
+      }
       const host = fence.needsHostAccess(t);
       if (!host.needs) return true;
       hostSkipped.push({ id: t.id, title: t.title, reasons: [{ code: 'needs_host_access', detail: `${fence.REFUSALS.needs_host_access} (${host.signals.join('; ')})` }] });
@@ -275,7 +287,9 @@ function workerEnv(source = process.env, extra = {}) {
   // An operator can widen this deliberately and visibly, never by accident.
   const widen = String(source.AUTOBONGOS_WORKER_ENV_EXTRA || '').split(',').map((x) => x.trim()).filter(Boolean);
   for (const k of widen) if (source[k] !== undefined) out[k] = source[k];
-  return { ...out, OTB_SUBAGENT: '1', ...extra };
+  // AUTOBONGOS_WORKER tells ship.js it runs unattended, so it refuses a diff on
+  // the runner's own files before spending a grade (task 1004546).
+  return { ...out, OTB_SUBAGENT: '1', [runnerSelf.RUNNER_WORKER_ENV]: '1', ...extra };
 }
 
 const MAX_WORKER_OUTPUT = 8 * 1024 * 1024;   // a misbehaving worker must not grow memory until the timeout
@@ -642,9 +656,10 @@ async function iteration(opts, deps = {}) {
     // OUTER of three layers and would not be as the only one.
     const taskGate = fence.decideTask({
       task: candidate, goals: gate.goals, protectedHits: matchProtected(candidate.touches || []),
+      selfHits: runnerSelf.matchRunnerSelf(candidate.touches || []),
     });
     if (!taskGate.go) {
-      return log({ event: 'fenced', code: taskGate.code, reason: taskGate.reason, task_id: candidate.id, goal_id: got.goalId, ...pickedFrom(got.goalId, gate), globs: taskGate.globs || [] });
+      return log({ event: 'fenced', code: taskGate.code, reason: taskGate.reason, task_id: candidate.id, goal_id: got.goalId, ...pickedFrom(got.goalId, gate), globs: taskGate.globs || [], ...(taskGate.files ? { files: taskGate.files } : {}) });
     }
 
     if (opts.dryRun) return log({ event: 'dry_run', task_id: candidate.id, title: candidate.title, goal_id: got.goalId, ...pickedFrom(got.goalId, gate) });
@@ -786,9 +801,11 @@ async function iteration(opts, deps = {}) {
 //
 // Derived FROM worktreeName so the two cannot drift: change the name format and
 // this regex is what stops the next reconciliation from quietly matching nothing.
+// It lives in modules/lifecycle/runner-self.js (task 1004546), because the server
+// reads the same shape to tell a runner's claim at publish, and three copies of one
+// regex was a grade finding on task 1004540.
 const CLAIM_PREFIX = 'autobongos-';
-const RUNNER_TREE_RE = /^autobongos-\d+-[0-9a-f]{6}$/;
-const isRunnerTree = (name) => RUNNER_TREE_RE.test(String(name || ''));
+const { RUNNER_TREE_RE, isRunnerTree } = runnerSelf;
 
 // ── the heartbeat, and why reconciliation needs one ──────────────────────────
 //

package/scripts/bongos/autobongos-tweak-lane.js

@@ -34,9 +34,10 @@ const LANE_RANK_FLOOR = 'metic';
 // D6.2, the same number the server refuses a third marked claim at.
 const MAX_AUTO_APPLIES_PER_ROUND = 2;
 const MAX_ROUNDS_READ_PER_PASS = 10;
-// The runner's own tree names (autobongos-run.js worktreeName). Restated rather
-// than required: requiring the runner here would be a cycle.
-const RUNNER_TREE_RE = /^autobongos-\d+-[0-9a-f]{6}$/;
+// The runner's own tree names (autobongos-run.js worktreeName). Read from the one
+// spelling in modules/lifecycle/runner-self.js, which requires nothing, so there is
+// no cycle back to the runner (task 1004546).
+const { RUNNER_TREE_RE, matchRunnerSelf } = require('../../modules/lifecycle/runner-self.js');
 // The fence refusals that are about the goal allowlist and nothing else: the lane
 // runs past them (D3). The kill switch, a paused builder and the grader stop do not.
 const GOAL_ONLY_CODES = new Set(['goal_not_allowlisted', 'no_allowlist', 'no_builder_scope']);
@@ -92,6 +93,7 @@ function decideRound({ task, claims, files, failedAt, matchProtected }) {
     task: { ...task, touches: files },
     goals: task.goal_id == null ? [] : [task.goal_id],
     protectedHits: matchProtected(files),
+    selfHits: matchRunnerSelf(files), // a page's files are never the runner's own, but the gate asks anyway (task 1004546)
   });
 }
 

package/scripts/bongos/ship-flow.js

@@ -38,6 +38,24 @@ const { noteServerReward } = require('./ship-state.js');
 const { recordGradeOutcome } = require('./autobongos-grade-cap.js');
 // task 1004631: on a Manual project an AI session asks before it ships (ADR 0369).
 const manualShip = require('./ship-mode-manual.js');
+// task 1004546: an Autobongos worker never ships a change to the runner's own files.
+const runnerSelf = require('../../modules/lifecycle/runner-self.js');
+const { matchProtected } = require('../../src/bongos/permission-path-check');
+
+// refuseRunnerSelfEdit(files) — inside an Autobongos worker (the supervisor sets
+// AUTOBONGOS_WORKER), refuse a committed diff that touches the runner's own
+// supervisor, safety checks or kill switch, or an ADR 0043 protected file (task
+// 1004546). It runs on the real diff before the grade, so a refused task spends no
+// grade and keeps its claim for the supervisor to release. The server refuses the
+// same diff at publish, so a worker that unsets the variable gains nothing.
+// Outside a worker it does nothing.
+function refuseRunnerSelfEdit(files) {
+  const refusal = runnerSelf.selfEditRefusal({ files, matchProtected });
+  if (!refusal) return;
+  console.error(`Ship refused (${refusal.code}): ${runnerSelf.selfEditMessage(refusal)}`);
+  console.error('Do not work around this. Return cannot_complete and name the files; your claim is still active.');
+  process.exit(1);
+}
 
 // stopForManualApproval(args, taskId) — Manual ship mode (task 1004631, ADR 0369). Every path
 // that can LAND work calls this first: a fresh ship, a resumed merge, and a re-grade (whose pass
@@ -303,6 +321,7 @@ async function shipMain() {
   // claim ACTIVE so the builder can commit + re-run.
   const graderBaseline = computeGraderBaseline(ac);
   const committedFiles = computeChangedFiles(graderBaseline);
+  refuseRunnerSelfEdit(committedFiles);
   if (committedFiles.length === 0) {
     const verdict = classifyEmptyShip(gitOk('git status --porcelain'), { allowEmpty });
     if (verdict.reason === 'uncommitted-work') {
@@ -1020,6 +1039,7 @@ async function regradeMain(opts = {}) {
   // ---- Empty-diff guard (the grader reads committed history) ----
   const graderBaseline = computeGraderBaseline(claimLike);
   const committedFiles = computeChangedFiles(graderBaseline);
+  refuseRunnerSelfEdit(committedFiles);
   if (committedFiles.length === 0) {
     // task 1003147: a DELIBERATELY artifact-free task used to dead-end here.
     // shipMain routes every 'completed' task to this re-grade BEFORE reading any