@bongos/core 1.25.31 → 1.25.33

package/modules/autonomy/runner-health.js

@@ -30,6 +30,9 @@
 //     it carries the fix as `remedy`. The runner decides the grace and says
 //     `config_idle:<code>` on its heartbeat; only a code config-idle.js knows is
 //     honoured, so the owner's kill switch and pause can never read as an alarm.
+//   · cannot_fetch — alive, but it has failed to reach the project several times
+//     in a row (task 1005202), so it is pinned to the code it has. NOT ok, and it
+//     carries the fix as `remedy`, like idle_config.
 //   · stopped — alive, and its builder pressed Stop on this device (task
 //     1005094). Not an alarm and not "running": the device is doing what it was
 //     told, and its card shows Run. Only a runner that is still checking in can
@@ -56,6 +59,11 @@ const RESTART_S = 10 * 60;
 
 const configIdle = require('./config-idle.js');
 
+// The fix for `cannot_fetch` (task 1005202). Seen on a real Mac: the GitHub
+// account git was using could not see the project. The runner's own log names
+// that account; this is the step to take on the device.
+const CANNOT_FETCH_REMEDY = 'On that device, git cannot reach this project on GitHub — usually it is signed in to a GitHub account that cannot see it. Run  gh auth switch  there to pick one that can (or  gh auth login  to add it); the runner\'s log names the account it is using. It picks up new code by itself once it can.';
+
 const SHA_RE = /^[0-9a-f]{40}$/;
 const sha = (v) => (typeof v === 'string' && SHA_RE.test(v) ? v : null);
 
@@ -141,6 +149,17 @@ function describeRunner(heartbeat, { nowMs = Date.now(), aliveS = ALIVE_S, lateS
     holdUntil: Number.isFinite(holdMs) && holdMs > nowMs ? new Date(holdMs).toISOString() : null,
   };
 
+  // Talking, but it cannot reach the project to fetch new code (task 1005202), so
+  // it works forever on the code it has. NOT ok, and it carries the fix. Only
+  // while it is still checking in: past that, silence is the truth.
+  if (heartbeat.last_event === 'cannot_fetch' && age <= aliveS) {
+    return {
+      state: 'cannot_fetch', ok: false, ageS: age, age: humanAge(age), ...ident,
+      why: 'it cannot fetch new code from GitHub', remedy: CANNOT_FETCH_REMEDY,
+      detail: `running old code${where} — it cannot fetch new code from GitHub`,
+    };
+  }
+
   if (heartbeat.last_event === 'upgrade_exit') {
     if (age <= RESTART_S) {
       return {

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

@@ -99,8 +99,10 @@
   // stopped (task 1005094): checking in, and its builder pressed Stop on that
   // device in Settings. Connected, not an alarm, and not the one to describe
   // while another device is working.
-  const HEALTH_RANK = { alive: 0, late: 1, idle_config: 2, restarting: 3, stopped: 4, dead: 5, never_seen: 6 };
-  const HEALTH_DOT = { alive: 'ok', late: 'ok', idle_config: 'warn', restarting: 'info', stopped: 'info', dead: 'danger', never_seen: 'info' };
+  // cannot_fetch (task 1005202): talking, but stuck on old code because it cannot
+  // reach the project on GitHub. A warning with its fix, like idle_config.
+  const HEALTH_RANK = { alive: 0, late: 1, idle_config: 2, cannot_fetch: 2, restarting: 3, stopped: 4, dead: 5, never_seen: 6 };
+  const HEALTH_DOT = { alive: 'ok', late: 'ok', idle_config: 'warn', cannot_fetch: 'warn', restarting: 'info', stopped: 'info', dead: 'danger', never_seen: 'info' };
 
   // The panel is drawn from both reads at once; each is kept so a write that only
   // reloads one of them redraws with the other's last answer.
@@ -124,7 +126,7 @@
   // `project`, and then there is no second layer to check.
   function readiness(runner, fence, mine) {
     const h = (runner && runner.health) || {};
-    const connected = ['alive', 'late', 'restarting', 'idle_config', 'stopped'].includes(h.state);
+    const connected = ['alive', 'late', 'restarting', 'idle_config', 'cannot_fetch', 'stopped'].includes(h.state);
     const goals = (fence && fence.goals) || [];
     const items = [];
     if (!runner) {
@@ -138,7 +140,9 @@
     }
     if (!connected) items.push({ key: 'claude', state: 'wait', text: 'Claude signed in' });
     else if (h.account) items.push({ key: 'claude', state: 'ok', text: 'Claude signed in' });
-    if (connected && h.code && h.code.behind === true) {
+    if (h.state === 'cannot_fetch') {
+      items.push({ key: 'code', state: 'todo', text: 'Cannot fetch new code', hint: h.remedy || '' });
+    } else if (connected && h.code && h.code.behind === true) {
       items.push({ key: 'code', state: 'wait', text: 'Updating to the latest code', hint: 'It does this by itself.' });
     } else if (connected && h.code) {
       items.push({ key: 'code', state: 'ok', text: 'Up to date' });
@@ -388,7 +392,7 @@
       : 'has picked no goals, so their runner takes no work';
     const beats = (b.runners || []).map((r) => {
       const h = r.health || {};
-      const label = { dead: 'not checking in', late: 'quiet', alive: 'checking in', restarting: 'restarting', stopped: 'stopped on that device', idle_config: `idle on a setting — ${h.remedy || 'see Settings'}` }[h.state] || 'unknown';
+      const label = { dead: 'not checking in', late: 'quiet', alive: 'checking in', restarting: 'restarting', stopped: 'stopped on that device', idle_config: `idle on a setting — ${h.remedy || 'see Settings'}`, cannot_fetch: 'stuck on old code — it cannot fetch from GitHub' }[h.state] || 'unknown';
       return `<span class="ov-fact"><span class="rn-dot rn-dot--sm rn-dot--${HEALTH_DOT[h.state] || 'info'}" aria-hidden="true"></span> ${escapeHtml(h.host || r.host || '')} ${escapeHtml(label)}</span>`;
     }).join('');
     const paused = b.owner_paused === true;

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

@@ -20,8 +20,8 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="/builders/style.css?v=2026-11-11-helm4d">
   <link rel="stylesheet" href="/builders/visor.css?v=2026-11-14-world">
-  <link rel="stylesheet" href="/builders/welcome-boot.css?v=2026-11-07-brand-mark">
-  <link rel="stylesheet" href="/builders/shell-game.css?v=2026-11-11-view2">
+  <link rel="stylesheet" href="/builders/welcome-boot.css?v=2026-11-14-cloud">
+  <link rel="stylesheet" href="/builders/shell-game.css?v=2026-11-14-cloud">
   <link rel="stylesheet" href="/builders/hall-ask.css">
   <link rel="stylesheet" href="/builders/home-city.css?v=2026-11-14-world">
   <link rel="stylesheet" href="/builders/home-gallery.css">
@@ -102,8 +102,8 @@
      BEFORE builders.js so the chrome ids exist when events are wired. -->
 <!-- task 1004785: the first-visit-of-the-day welcome (the tower). Before shell.js, which asks it
      before the craft picker so the two never stack. Home only. -->
-<script src="/builders/welcome-boot.js?v=2026-11-07-brand-mark" defer></script>
-<script src="/builders/shell-game.js?v=2026-11-11-view2" defer></script>
+<script src="/builders/welcome-boot.js?v=2026-11-14-cloud" defer></script>
+<script src="/builders/shell-game.js?v=2026-11-14-cloud" defer></script>
 <script src="/builders/shell-trail.js?v=2026-11-05-numbers" defer></script>
 <script src="/builders/craft-mode.js?v=2026-11-10-visor" defer></script>
 <script src="/builders/shell.js?v=2026-11-13-founding" defer></script>

package/modules/hall-ui/public/runner-button.js

@@ -126,6 +126,13 @@
         sub: `It is on, but ${hold}.` };
     }
 
+    // Checking in, but pinned to the code it has: it cannot reach the project on
+    // GitHub (task 1005202). Said the way "off or asleep" is, with the fix under it.
+    if (h.state === 'cannot_fetch') {
+      return { status: 'Stuck on old code', act: 'stop', label: 'Stop', tone: 'warn', busy: false, alt: null,
+        sub: `It is on, but it cannot fetch new code from GitHub. ${h.remedy || ''}`.trim() };
+    }
+
     if (h.state === 'idle_config') {
       return { status: 'Ready', act: 'stop', label: 'Stop', tone: 'warn', busy: false, alt: null,
         sub: `It is on, but idle because ${h.why || 'of a setting'}. ${h.remedy || ''}`.trim() };

package/modules/hall-ui/public/shell-game.css

@@ -1,5 +1,5 @@
 /* shell-game.css — the game's start screen and load screen (task 1005143; shell-game.js start()),
-   in the Helm look (task 1005192, ADR 0402). Both stand over the welcome's painting. The start
+   in the Helm look (task 1005192, ADR 0402). Both stand over the city in the clouds (task 1005308). The start
    screen is one full-height night panel on the left, closed left and right by an ice hairline:
    the mark and the project's name in the name voice, the five choices as full-width rows, one
    line at the foot. The load screen is the same panel language, centred: the week in the name
@@ -18,11 +18,10 @@ html.gs-open { overflow: hidden; }
 .gs--leaving { opacity: 0; pointer-events: none; }
 .gs--load { align-items: center; justify-content: center; padding: var(--ds-space-lg) var(--ds-space-gutter-narrow); }
 
-/* the still: the painting, covering the screen. The start screen leaves it bare (the panel is
+/* the still: the city in the clouds (.cloud-scene, welcome-boot.css), covering the screen. The start screen leaves it bare (the panel is
    its own ground); the load screen lays the scrim over it so the centred panel reads anywhere. */
 .gs__art { position: absolute; inset: 0; }
 .gs--load .gs__art::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
-.gs__img { width: 100%; height: 100%; object-fit: cover; display: block; }
 
 /* the two panels: night over the art, an ice hairline left and right, no corner, no shadow */
 .gs__menu, .gs__load {

package/modules/hall-ui/public/shell-game.js

@@ -87,9 +87,9 @@
 
   // ---------- the start screen and the load screen (task 1005143, BONGOS-V3 R03) ----------
   // A fresh sign-in opens on the start screen: Start, Options, Achievements, Extras, Quit over a
-  // still. Start turns game mode on and passes through the load screen, where the project city
+  // the city in the clouds (task 1005308; the painting before it is retired). Start turns game mode on and passes through the load screen, where the project city
   // builds itself up week by week under a tip, and then the world is there. welcome-boot.js calls
-  // start() on Home (where a sign-in lands) and hands in the still; this file draws both screens.
+  // start() on Home (where a sign-in lands) and hands in the scene's painter; this file draws both screens.
   // Rules are in modules/hall-ui/records/start-screen.md.
   var MENU = [
     { id: 'start', label: 'Start' },
@@ -155,7 +155,7 @@
   }
   // The Helm panel (task 1005192, ADR 0402): the mark and the name, the choices, one line at the foot.
   function screenHtml(o) {
-    return '<div class="gs__art" aria-hidden="true">' + (o.art ? '<img class="gs__img" alt="" src="' + esc(o.art) + '" decoding="async">' : '') + '</div>' +
+    return '<div class="gs__art" aria-hidden="true"></div>' +
       '<div class="gs__menu">' +
         '<div class="gs__top">' +
           '<div class="gs__head">' + markHtml() +
@@ -369,8 +369,8 @@
     return v === 'game' || v === 'classic' ? v : null;
   }
 
-  // Put the start screen up. `o`: { name, art, done, signIn } — the project's name, the still to
-  // stand behind both screens, what to do once the world is showing, and (signed out) how to sign
+  // Put the start screen up. `o`: { name, scene, done, signIn } — the project's name, the painter of
+  // the city that stands behind both screens (scene(host), welcome-boot.js paintScene), what to do once the world is showing, and (signed out) how to sign
   // in once a view is picked. True when it is up; false for a classic pick made before sign-in,
   // which goes straight to the hall.
   function start(o) {
@@ -387,6 +387,7 @@
     root.setAttribute('aria-modal', 'true');
     root.setAttribute('aria-labelledby', 'gs-title');
     root.innerHTML = screenHtml(opts);
+    if (typeof opts.scene === 'function') { try { opts.scene(root.querySelector('.gs__art')); } catch (_) { /* the ground stands */ } }
     root.addEventListener('click', onClick);
     document.addEventListener('keydown', onKey, true);
     document.body.appendChild(root);

package/modules/hall-ui/public/welcome-boot.css

@@ -1,7 +1,8 @@
 /* welcome-boot.css — the first-visit-of-the-day welcome (tasks 1004785, 1004818; welcome-boot.js).
-   The scene is the owner's painting of a circuit city (welcome-day.webp / welcome-night.webp) with
-   motion laid over it. Its palette is the painting's, by time of day rather than by hall theme, so its
-   ink is fixed here rather than --ink (which flips with the theme). */
+   The scene is the city in the clouds, drawn in the hour's sky (task 1005308; the circuit-city
+   painting it replaced is retired). Its ink follows day or night rather than the hall theme, so it
+   is fixed here rather than --ink. .cloud-scene is also the ground of the game's start and load
+   screens (shell-game.js), which this sheet shares the page with. */
 html.wb-open { overflow: hidden; }
 .wb {
   position: fixed; inset: 0; z-index: 1000; overflow: hidden;
@@ -10,35 +11,21 @@ html.wb-open { overflow: hidden; }
 }
 .wb--day { color: #14161c; background: linear-gradient(180deg, #a9d6dc 0%, #f1d9d0 55%, #e9cfc6 100%); }
 
-/* the painting: covers the screen at its own 1024x572 shape, so the motion layer stays on its marks */
+/* the scene: the city in the clouds (welcome-boot.js paintScene), on the hour's sky. It covers the
+   screen; the city stands on the bottom edge, so a tall screen shows more sky and a wide one crops it. */
 .wb__art {
-  position: absolute; left: 50%; top: 50%; z-index: 1;
-  width: max(100vw, calc(100vh * 1024 / 572)); aspect-ratio: 1024 / 572;
-  transform: translate(-50%, -50%);
+  position: absolute; inset: 0; z-index: 1;
   transition: transform 2.2s cubic-bezier(.45, 0, .25, 1);
 }
-.wb__pan { position: absolute; inset: 0; transform-origin: 62% 42%; animation: wb-pan 40s ease-in-out infinite alternate; }
-@keyframes wb-pan { from { transform: scale(1); } to { transform: scale(1.07) translateX(-1.2%); } }
-.wb__img, .wb__fx, .wb-motion { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
-.wb__img { object-fit: cover; }
-.wb__img[hidden] { display: none; }
-
-/* the motion: pulses climb the circuit towers, cars cross, and at night the lights blink */
-.wb-pulses { opacity: 0; transition: opacity 1.6s ease-out; }
-.wb--live .wb-pulses { opacity: 1; }
-.wb-pulse { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 7 100; stroke-dashoffset: 7; animation: wb-climb linear infinite; }
-@keyframes wb-climb { to { stroke-dashoffset: -100; } }
-.wb--night .wb-pulse { filter: drop-shadow(0 0 3px currentColor); }
-.wb--day .wb-pulse { opacity: .8; stroke-width: 1.8; }
-.wb-car { animation: wb-car linear infinite; }
-@keyframes wb-car {
-  0% { transform: translate(0, 0); opacity: 0; }
-  10%, 88% { opacity: 1; }
-  100% { transform: translate(var(--wb-dx), var(--wb-dy)); opacity: 0; }
+.wb__pan { position: absolute; inset: 0; transform-origin: 50% 70%; animation: wb-pan 40s ease-in-out infinite alternate; }
+@keyframes wb-pan { from { transform: scale(1); } to { transform: scale(1.05) translateX(-1%); } }
+.cloud-scene { background: linear-gradient(to bottom, var(--sky-now-top), var(--sky-now-mid) 46%, var(--sky-now-haze)); }
+.cloud-scene__svg {
+  position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
+  background: radial-gradient(ellipse 70% 60% at 50% 72%, var(--sky-now-cloud), var(--sky-now-base) 30%, var(--sky-now-haze) 62%, transparent);
 }
-.wb-star { opacity: .6; }
-.wb-moon { animation: wb-moon 6s ease-in-out infinite alternate; filter: blur(6px); }
-@keyframes wb-moon { from { opacity: .35; } to { opacity: .8; } }
+.cloud-scene__svg .hc-stars { opacity: var(--sky-now-stars); }
+
 .wb__cloud { position: absolute; z-index: 2; border-radius: 50%; background: rgba(255, 255, 255, .06); filter: blur(30px); animation: wb-drift linear infinite; pointer-events: none; }
 .wb--day .wb__cloud { background: rgba(255, 255, 255, .35); filter: blur(28px); }
 .wb__cloud--a { top: 8vh; width: 40vw; height: 7vh; animation-duration: 80s; animation-delay: -20s; }
@@ -71,7 +58,7 @@ html.wb-open { overflow: hidden; }
   font-family: var(--font-display); font-size: clamp(18px, 2.6vw, 26px); font-weight: 300;
   letter-spacing: -.01em; text-transform: lowercase; white-space: nowrap;
 }
-/* the mark's ink follows the painting: pale by night, dark by day; the moon stays salmon */
+/* the mark's ink follows the hour: pale by night, dark by day; the moon stays salmon */
 .wb__mark { --mark-ink: rgba(255, 255, 255, .88); }
 .wb__planet { transform-box: fill-box; transform-origin: center; }
 .wb__moonlet { transform-box: view-box; transform-origin: 100px 100px; }
@@ -137,7 +124,7 @@ html.wb-open { overflow: hidden; }
 .wb__role small { display: block; margin-top: 3px; }
 .wb__role i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
 
-/* the veil: white by day, black by night, lifting slowly once the painting is in */
+/* the veil: white by day, black by night, lifting slowly once the scene is painted */
 .wb__veil { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: #000; opacity: 1; transition: opacity 1.6s ease-out; }
 .wb--day .wb__veil { background: #fff; }
 .wb--lit .wb__veil { opacity: 0; }
@@ -145,7 +132,7 @@ html.wb-open { overflow: hidden; }
 /* the way out: the view sinks past the rooftops and the welcome fades into the hall underneath;
    bound for another room, the veil comes back instead */
 .wb--leaving { pointer-events: none; }
-.wb--leaving .wb__art { transform: translate(-50%, calc(-50% - 30vh)) scale(1.12); }
+.wb--leaving .wb__art { transform: translateY(-30vh) scale(1.12); }
 .wb--leaving .wb__banner { transform: translate(-50%, -40vh); }
 .wb--done.wb--leaving .wb__after { opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .5s; }
 .wb--leaving:not(.wb--to-room) { opacity: 0; transition: opacity 1.8s ease-in .5s; }

package/modules/hall-ui/public/welcome-boot.js

@@ -1,13 +1,16 @@
 // welcome-boot.js — the welcome on a builder's first visit of the day (tasks 1004785, 1004818; idea 1001262).
 //
-// Home only. The scene is the owner's own painting of a circuit city (welcome-day.webp and
-// welcome-night.webp, 2026-10-23), brought to life: a slow drift across the skyline, data pulses
-// climbing the circuit towers, hover cars crossing, and by night blinking aircraft lights, a breathing
-// moon and twinkling stars. The banner at the top is the logo, animated, and a "Built on
-// cloudbongos.com" credit sits in the bottom-right corner (task 1004953). The picture follows the local time of day: the day painting from 06:00 to 17:59, the
-// night one otherwise. It opens from a white (day) or black (night) veil, then "Good morning, <name>"
-// comes up with two choices. The way out is slow: the view sinks past the rooftops and fades into the
-// hall underneath.
+// Home only. The scene is the city in the clouds (task 1005196), drawn by home-city-draw.js and
+// city-draw.js in the hour's sky (sky-time.js): the Cloud Bongos core and the museum standing in
+// cloud, with a slow drift. It replaced the owner's circuit-city painting (a day and a
+// night WebP still), retired everywhere by task 1005308 (owner, 2026-11-14), and with it the
+// lights that were pinned to the painting's pixels. paintScene() is also what the game's start and
+// load screens stand on (shell-game.js), so every screen before the hall shows the same city.
+// The banner at the top is the logo, animated, and a "Built on cloudbongos.com" credit sits in the
+// bottom-right corner (task 1004953). The ink follows the local time of day: day from 06:00 to
+// 17:59, night otherwise. It opens from a white (day) or black (night) veil, then
+// "Good morning, <name>" comes up with two choices. The way out is slow: the view sinks past the
+// rooftops and fades into the hall underneath.
 //
 // Rules:
 //   - A signed-in builder sees it once per LOCAL day. A fresh sign-in (the sign-in click leaves a
@@ -22,10 +25,11 @@
 //     picker asked (OTBCraftMode.markAsked), so the two never stack.
 //   - Picking a role also sets the hall's craft mode. Governing is a seat (craft-mode.js), so the
 //     Owner role shows only when OTBCraftMode offers it.
-//   - A painting that will not load leaves the sky gradient behind it, and the welcome works the same.
-//   - prefers-reduced-motion: no motion; the still painting and the greeting at once, leaving is immediate.
+//   - Without the city's painters (a page that does not load them) the hour's sky gradient stands alone,
+//     and the welcome works the same.
+//   - prefers-reduced-motion: no motion; the still city and the greeting at once, leaving is immediate.
 //
-// The pure parts (the day rule, the logo, the roles, the motion layout) are exported for
+// The pure parts (the day rule, the logo, the roles, the scene's node rewrite) are exported for
 // tests/welcome_boot.mjs; tests/welcome_boot_browser.mjs runs the overlay itself in a real browser.
 (function () {
   'use strict';
@@ -33,8 +37,7 @@
   var DAY_KEY = 'hall-welcome-day:';
   var SIGNIN_KEY = 'hall-welcome-signin';
   var SIGNIN_HREF = '/api/bongos/auth/web/start';
-  var ART = { day: '/builders/welcome-day.webp', night: '/builders/welcome-night.webp' };
-  var ART_WAIT = 1500;       // the veil lifts once the painting is in, or after this long
+  var ART_WAIT = 1500;       // the veil lifts once the scene is painted, or after this long
   var RUN_MS = 3400;         // the city powering up before the greeting
   var LEAVE_MS = 2400;       // the way down into the hall
 
@@ -46,9 +49,9 @@
     var h = now.getHours();
     return h < 12 ? 'Good morning' : h < 18 ? 'Good afternoon' : 'Good evening';
   }
-  // Day is 06:00 to 17:59 local: a white veil and the day painting. Night: a black veil and the night one.
+  // Day is 06:00 to 17:59 local: a white veil and dark ink. Night: a black veil and pale ink.
+  // (The scene's own colours follow the hour more finely: sky-time.js.)
   function timeOfDay(now) { var h = now.getHours(); return h >= 6 && h < 18 ? 'day' : 'night'; }
-  function artFor(when) { return when === 'day' ? ART.day : ART.night; }
   function nameOf(builder) {
     return String((builder && (builder.display_name || builder.github_login)) || 'builder');
   }
@@ -88,73 +91,61 @@
   }
   function roleById(id) { return ROLES.filter(function (r) { return r.id === id; })[0] || null; }
 
-  // ---------- the motion, laid over the painting ----------
-  // In the painting's own pixels (1024x572; both paintings share one layout), so every light sits on
-  // the thing it belongs to however the picture is cropped to the screen.
-  var AW = 1024, AH = 572;
-  // The circuit towers: a box each, and the colour its traces glow in the night painting.
-  var TOWERS = [
-    { x: 140, y: 168, w: 62, h: 118, glow: '#60a5fa' },
-    { x: 280, y: 150, w: 58, h: 200, glow: '#22d3ee' },
-    { x: 184, y: 296, w: 100, h: 196, glow: 'var(--accent)' },
-    { x: 636, y: 222, w: 42, h: 140, glow: 'color-mix(in srgb, var(--sea) 55%, #ffffff)' },
-    { x: 702, y: 212, w: 84, h: 190, glow: 'color-mix(in srgb, var(--sea) 55%, #ffffff)' },
-    { x: 2, y: 196, w: 52, h: 150, glow: 'color-mix(in srgb, var(--sea) 55%, #ffffff)' },
-    { x: 910, y: 410, w: 110, h: 160, glow: '#22d3ee' },
-  ];
-  // The hover-car lanes on the right (the masts' blinking lights went in task 1005087).
-  var LANES = [
-    { x1: 770, y1: 350, x2: 1040, y2: 362, dur: 5.5 },
-    { x1: 1040, y1: 340, x2: 760, y2: 352, dur: 7 },
-    { x1: 820, y1: 258, x2: 1040, y2: 254, dur: 6.5 },
-  ];
-  var MOON = [665, 82];
-  function seeded(s) { return function () { s = (s * 16807) % 2147483647; return (s - 1) / 2147483646; }; }
-  // Where each data pulse climbs: a vertical run inside a tower, bottom to top. Pure, so it is testable.
-  function pulseRuns(towers, perTower, seed) {
-    var rnd = seeded(seed || 7), out = [];
-    towers.forEach(function (t, ti) {
-      for (var i = 0; i < perTower; i++) {
-        var x = Math.round((t.x + 6 + rnd() * (t.w - 12)) * 10) / 10;
-        var y1 = Math.round((t.y + t.h * (0.75 + rnd() * 0.25)) * 10) / 10;
-        var y0 = Math.round((t.y + t.h * rnd() * 0.3) * 10) / 10;
-        out.push({ tower: ti, x: x, y0: y0, y1: y1, glow: t.glow, dur: Math.round((2.2 + rnd() * 2.4) * 100) / 100, delay: Math.round(rnd() * 400) / 100 });
-      }
-    });
-    return out;
-  }
-
+  // ---------- the scene: the city in the clouds (task 1005308) ----------
+  // Home's own painters draw it (window.OTBHomeCityDraw + window.GovCity), from an empty week: the
+  // Cloud Bongos core and the museum, standing in cloud, in the hour's --sky-now-* tokens. It is a
+  // backdrop, so every door the city carries on Home (a link, a tooltip, a goal) becomes a plain
+  // group, nothing in it takes focus, and its ids are prefixed so they never meet Home's own city's.
   var NS = 'http://www.w3.org/2000/svg';
-  function el(t, a, p) { var e = document.createElementNS(NS, t); for (var k in a) e.setAttribute(k, a[k]); if (p) p.appendChild(e); return e; }
-
-  function drawMotion(host, when) {
-    var night = when !== 'day';
-    var rnd = seeded(11);
-    var svg = el('svg', { viewBox: '0 0 ' + AW + ' ' + AH, preserveAspectRatio: 'none', 'class': 'wb-motion' }, host);
-    if (night) {
-      // the moon breathes; the stars stand still (task 1005087: no twinkle, no beacons)
-      el('circle', { 'class': 'wb-moon', cx: MOON[0], cy: MOON[1], r: 26, fill: 'rgba(226,232,255,.25)' }, svg);
-      for (var i = 0; i < 40; i++) {
-        var sx = rnd() * AW, sy = rnd() * 140;
-        if (Math.abs(sx - MOON[0]) < 50 && Math.abs(sy - MOON[1]) < 50) continue;
-        el('circle', { 'class': 'wb-star', cx: sx.toFixed(1), cy: sy.toFixed(1), r: (0.6 + rnd() * 0.9).toFixed(2), fill: '#e0e7ff' }, svg);
-        rnd(); rnd(); // the two draws the twinkle timing took, so every star keeps its place
-      }
-    }
-    // data pulses climbing the circuit towers (the whole set brightens as the city powers up)
-    var pulses = el('g', { 'class': 'wb-pulses' }, svg);
-    pulseRuns(TOWERS, 3, 7).forEach(function (r) {
-      el('line', { 'class': 'wb-pulse', x1: r.x, y1: r.y1, x2: r.x, y2: r.y0, pathLength: 100, stroke: night ? r.glow : '#ffffff',
-        style: 'color:' + r.glow + ';animation-duration:' + r.dur + 's;animation-delay:' + (-r.delay) + 's' }, pulses);
-    });
-    // hover cars, each a light with a short trail, crossing on its lane
-    LANES.forEach(function (l, i) {
-      var g = el('g', { 'class': 'wb-car', style: '--wb-dx:' + (l.x2 - l.x1) + 'px;--wb-dy:' + (l.y2 - l.y1) + 'px;animation-duration:' + l.dur + 's;animation-delay:' + (-i * 1.7) + 's' }, svg);
-      var dir = l.x2 > l.x1 ? -1 : 1;
-      el('line', { x1: l.x1, y1: l.y1, x2: l.x1 + dir * 26, y2: l.y1, stroke: night ? 'rgba(125,211,252,.55)' : 'rgba(255,255,255,.7)', 'stroke-width': 2, 'stroke-linecap': 'round' }, g);
-      el('circle', { cx: l.x1, cy: l.y1, r: 2.4, fill: night ? '#e0f2fe' : '#ffffff' }, g);
+  var SCENE_ID = 'cs-';
+  var DOOR_ATTRS = /^(href|tabindex|aria-label|data-tip|data-tip-body|data-goal|data-group|data-building|data-craft-door)$/;
+  var QUIET_RE = /\bhc-quiet\b/g, SPACES_RE = /\s+/g, URL_REF_RE = /url\(#/g;
+  // One shape node rewritten for the backdrop: { tag, attrs, kids, text } -> the same, door-free. Pure.
+  function sceneShape(n) {
+    var attrs = {};
+    Object.keys(n.attrs || {}).forEach(function (k) {
+      if (DOOR_ATTRS.test(k)) return;
+      var v = String(n.attrs[k]);
+      if (k === 'id') v = SCENE_ID + v;
+      else if (k === 'class') v = v.replace(QUIET_RE, '').replace(SPACES_RE, ' ').trim();
+      else v = v.replace(URL_REF_RE, 'url(#' + SCENE_ID);
+      if (k === 'class' && !v) return;
+      attrs[k] = v;
     });
-    return svg;
+    return { tag: n.tag === 'a' ? 'g' : n.tag, attrs: attrs, kids: (n.kids || []).map(sceneShape), text: n.text == null ? null : n.text };
+  }
+  // The scene as shapes, or null when the painters are not on the page. Pure given the painters.
+  function sceneShapes(Draw, Gov) {
+    if (!Draw || typeof Draw.citySvg !== 'function' || typeof Draw.cityModel !== 'function') return null;
+    var out = Draw.citySvg(Draw.cityModel({ weeks: [{}] }), 0, { gov: Gov || null });
+    return { viewBox: out.viewBox, nodes: out.nodes.map(sceneShape) };
+  }
+  function build(n) {
+    var e = document.createElementNS(NS, n.tag);
+    Object.keys(n.attrs).forEach(function (k) { e.setAttribute(k, n.attrs[k]); });
+    if (n.text != null) e.textContent = n.text;
+    n.kids.forEach(function (c) { e.appendChild(build(c)); });
+    return e;
+  }
+  // Paint the city into host (it covers it; the host's class gives it the hour's sky). True when
+  // the city is drawn; false leaves the sky alone, which is still the right picture.
+  function paintScene(host) {
+    if (!host || typeof document === 'undefined') return false;
+    host.classList.add('cloud-scene');
+    var sky = window.OTBSkyTime;
+    if (sky && typeof sky.apply === 'function') { try { sky.apply(document); } catch (_) { /* the tokens' night default stands */ } }
+    var shapes;
+    try { shapes = sceneShapes(window.OTBHomeCityDraw, window.GovCity); } catch (_) { shapes = null; }
+    if (!shapes) return false;
+    var svg = document.createElementNS(NS, 'svg');
+    svg.setAttribute('class', 'cloud-scene__svg');
+    svg.setAttribute('viewBox', shapes.viewBox);
+    svg.setAttribute('preserveAspectRatio', 'xMidYMax slice');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('focusable', 'false');
+    shapes.nodes.forEach(function (n) { svg.appendChild(build(n)); });
+    host.appendChild(svg);
+    return true;
   }
 
   // ---------- the overlay ----------
@@ -170,10 +161,7 @@
 
   function bannerTag(builder) { return builder ? 'div' : 'header'; }
   function overlayHtml(builder, now, when) {
-    return '<div class="wb__art" aria-hidden="true"><div class="wb__pan">' +
-        '<img class="wb__img" alt="" src="' + artFor(when) + '" decoding="async">' +
-        '<div class="wb__fx" id="wb-fx"></div>' +
-      '</div></div>' +
+    return '<div class="wb__art" aria-hidden="true"><div class="wb__pan" id="wb-clouds"></div></div>' +
       '<div class="wb__cloud wb__cloud--a" aria-hidden="true"></div><div class="wb__cloud wb__cloud--b" aria-hidden="true"></div>' +
       // For a visitor the welcome IS the page (the shell draws no header for them), so its logo
       // banner is the page's one <header>; over a signed-in hall the shell's header stands, and the
@@ -224,7 +212,7 @@
     if (first && first.focus) first.focus();
   }
 
-  // The veil lifts once the painting is in (or after ART_WAIT), then the city powers up.
+  // The veil lifts once the scene is painted (or after ART_WAIT), then the city powers up.
   function begin() {
     if (!root || root.classList.contains('wb--lit')) return;
     root.classList.add('wb--lit');
@@ -324,13 +312,9 @@
     document.addEventListener('keydown', onKey, true);
     document.body.appendChild(root);
     document.documentElement.classList.add('wb-open');
-    drawMotion(root.querySelector('#wb-fx'), when);
-    var img = root.querySelector('.wb__img');
-    // A painting that fails to load is hidden, leaving the sky gradient; the welcome goes on regardless.
-    var go1 = function () { if (window.requestAnimationFrame) window.requestAnimationFrame(function () { window.requestAnimationFrame(begin); }); else begin(); };
-    img.addEventListener('load', go1);
-    img.addEventListener('error', function () { img.hidden = true; if (root) root.classList.add('wb--bare'); go1(); });
-    if (img.complete && img.naturalWidth) go1();
+    // No city painters on the page: the hour's sky stands alone; the welcome goes on regardless.
+    if (!paintScene(root.querySelector('#wb-clouds'))) root.classList.add('wb--bare');
+    if (window.requestAnimationFrame) window.requestAnimationFrame(function () { window.requestAnimationFrame(begin); });
     at(ART_WAIT, begin);
     var skip = root.querySelector('[data-wb-skip]');
     if (skip && skip.focus) skip.focus();
@@ -378,7 +362,7 @@
       // The hall's front opens on Game or Classic (task 1005219): the pick is kept, the visitor
       // signs in, and comes back to that menu (shell-game.js). Without that file, the welcome.
       if (canChoose && game.start({
-        name: projectName(window.__BRANDING__), art: artFor(timeOfDay(new Date())),
+        name: projectName(window.__BRANDING__), scene: paintScene,
         signIn: function () { markSigningIn(); go(SIGNIN_HREF); },
       })) return true;
       show(null);
@@ -398,11 +382,11 @@
     shown = true;
     var c = craft();
     // A fresh sign-in, or a new visit to Home, opens on the game's start screen instead (tasks
-    // 1005143, 1005219; shell-game.js): the same still behind it, and the craft picker asked once
+    // 1005143, 1005219; shell-game.js): the same city behind it, and the craft picker asked once
     // the world is showing. Classic picked before signing in: no screen, straight to the hall.
     if ((fresh || ask) && canChoose) {
       if (game.start({
-        name: projectName(window.__BRANDING__), art: artFor(timeOfDay(now)),
+        name: projectName(window.__BRANDING__), scene: paintScene,
         done: function () { if (c && typeof c.onAccess === 'function') c.onAccess(access, builder); },
       })) return true;
       if (fresh) return false;
@@ -413,9 +397,9 @@
   }
 
   var api = {
-    DAY_KEY: DAY_KEY, SIGNIN_KEY: SIGNIN_KEY, ROLES: ROLES, ART: ART, TOWERS: TOWERS, LANES: LANES, AW: AW, AH: AH,
+    DAY_KEY: DAY_KEY, SIGNIN_KEY: SIGNIN_KEY, ROLES: ROLES, SCENE_ID: SCENE_ID,
     localDay: localDay, firstVisitToday: firstVisitToday, greetingFor: greetingFor, nameOf: nameOf, timeOfDay: timeOfDay,
-    artFor: artFor, projectName: projectName, logoHtml: logoHtml, BUILT_ON: BUILT_ON, rolesFor: rolesFor, pulseRuns: pulseRuns,
+    projectName: projectName, logoHtml: logoHtml, BUILT_ON: BUILT_ON, rolesFor: rolesFor, sceneShape: sceneShape, sceneShapes: sceneShapes, paintScene: paintScene,
     onAccess: onAccess, finish: finish, close: close,
   };
   if (typeof window !== 'undefined') { window.OTBWelcome = api; watchSignInLinks(); }

package/modules/hall-ui/records/start-screen.md

@@ -4,23 +4,23 @@ Covers: Home (`shell-game.js` `start()`, `shell-game.css`, the hand-off in `welc
 
 ## What it settled
 
-- **A fresh sign-in opens on the start screen, on Home.** Home is where a sign-in lands (`postLoginLanding`), and `welcome-boot.js` already knows a fresh sign-in from a return visit (the flag the sign-in click leaves). On one, `OTBWelcome.onAccess` calls `OTBShellGame.start({ name, art, done })` in place of its own greeting. The day's first visit without a sign-in keeps the welcome; a signed-out visitor keeps the welcome. A sign-in that returns to a deep link or another page goes straight there, as the welcome always did. `shell.js` is untouched.
+- **A fresh sign-in opens on the start screen, on Home.** Home is where a sign-in lands (`postLoginLanding`), and `welcome-boot.js` already knows a fresh sign-in from a return visit (the flag the sign-in click leaves). On one, `OTBWelcome.onAccess` calls `OTBShellGame.start({ name, scene, done })` in place of its own greeting. The day's first visit without a sign-in keeps the welcome; a signed-out visitor keeps the welcome. A sign-in that returns to a deep link or another page goes straight there, as the welcome always did. `shell.js` is untouched.
 - **Five choices, one column: Start, Options, Achievements, Extras, Quit.** Start is the one filled pill. Options is a link to `/settings`, which IS the one options menu since task 1005144 (`records/options-menu.md`); Achievements is `/profile`. Extras opens three links under the menu (the thinking sky, the atlas, the docs). Quit calls `window.close()`; a browser only closes a tab a script opened, so when the tab is still there 300ms later the screen says "Close it to quit" instead of doing nothing.
 - **Start turns game mode on** (`set(true)`), then shows the load screen. Nothing else in the hall's interface sets it.
-- **The load screen is the still, a tip, and the city building up.** The still is the welcome's painting for the time of day, handed in by `welcome-boot.js` (this file names no picture). In a card of the hall's own tokens, the project city is drawn by `home-city-draw.js` `citySvg` from the one bounded read Home already uses (`GET /home/city?weeks=10`), at 31 stops from the oldest week to now, about three seconds, with "The city, N weeks ago" under it. Each stop is a whole drawing set as state; nothing animates in JavaScript. With reduced motion it is the finished city at once. With no city to draw (the read failed, the scripts are missing) the still and the tip stand for 1.4s. Either way the world opens.
+- **The load screen is the still, a tip, and the city building up.** The still is the city in the clouds in the hour's sky, painted by `welcome-boot.js` `paintScene`, which is handed in as `scene` (this file draws no city of its own for it; task 1005308). In a card of the hall's own tokens, the project city is drawn by `home-city-draw.js` `citySvg` from the one bounded read Home already uses (`GET /home/city?weeks=10`), at 31 stops from the oldest week to now, about three seconds, with "The city, N weeks ago" under it. Each stop is a whole drawing set as state; nothing animates in JavaScript. With reduced motion it is the finished city at once. With no city to draw (the read failed, the scripts are missing) the still and the tip stand for 1.4s. Either way the world opens.
 - **Tips rotate** (`localStorage 'hall-game-tip'` counts them), so each load shows the next one. A tip must be true of the hall today; the first one is the Escape rule from `game-mode.md` (rewritten by task 1005144, and again by task 1005250: Escape opens the game menu).
 - **The craft picker waits for the world.** While the start screen is up the shell asks no picker (`onAccess` returned true). `done` runs once the screen is gone and asks `OTBCraftMode.onAccess` then.
 - **Keys.** While either screen is up it keeps every key: the arrows and Tab walk the menu, Escape folds Extras away and does nothing else, so the shell's Escape cannot flip the bars underneath. Once the world shows, the last Escape opens the game menu (task 1005250; the options menu until then); the screen's capture listener calls `preventDefault`, so the menu never opens from under it.
-- **The look is Helm (task 1005192, [ADR 0402](../../../docs/adr/0402-helm-is-the-halls-look-and-the-hall-is-dark-only.md)).** The start screen is one full-height night panel over the painting (`--night-glass`, an ice hairline left and right at `--line-strong`), `--helm-panel-w` wide. On a desk it stands off the left edge by `--helm-inset`; that token is a `clamp`, so on a phone the panel is the whole width and the sheet still has no `@media`. In it: the mark (the project's logo when it has one) over the name in the name voice; Start as a full-width accent bar under `--accent-on` that names its key ("Enter", drawn by CSS so the choice's own text stays "Start"); the other four as quiet rows on `--rule-soft` hairlines; and at the foot, over the strong hairline, the tip the load screen will show next (`#gs-line`), with the Quit note under it when the browser keeps the tab. The rows are list rows in a panel, so they are bars, not cut buttons. A row's focus is the inset two-tone ring (`--press-focus`), which is what makes focus visible on the accent bar.
-- **The load screen is the same panel, centred** over the painting under the hall's `--scrim`: the week in the name voice (`#gs-when`), one segment per week of the history (`#gs-segs`, the shared `.segs` / `.seg`; filled up to the week being shown, counted the way the sentence words it, and hidden from a screen reader because the sentence says the same), the city, and the tip under a hairline. With no city there are no segments.
+- **The look is Helm (task 1005192, [ADR 0402](../../../docs/adr/0402-helm-is-the-halls-look-and-the-hall-is-dark-only.md)).** The start screen is one full-height night panel over the city in the clouds (`--night-glass`, an ice hairline left and right at `--line-strong`), `--helm-panel-w` wide. On a desk it stands off the left edge by `--helm-inset`; that token is a `clamp`, so on a phone the panel is the whole width and the sheet still has no `@media`. In it: the mark (the project's logo when it has one) over the name in the name voice; Start as a full-width accent bar under `--accent-on` that names its key ("Enter", drawn by CSS so the choice's own text stays "Start"); the other four as quiet rows on `--rule-soft` hairlines; and at the foot, over the strong hairline, the tip the load screen will show next (`#gs-line`), with the Quit note under it when the browser keeps the tab. The rows are list rows in a panel, so they are bars, not cut buttons. A row's focus is the inset two-tone ring (`--press-focus`), which is what makes focus visible on the accent bar.
+- **The load screen is the same panel, centred** over the city in the clouds under the hall's `--scrim`: the week in the name voice (`#gs-when`), one segment per week of the history (`#gs-segs`, the shared `.segs` / `.seg`; filled up to the week being shown, counted the way the sentence words it, and hidden from a screen reader because the sentence says the same), the city, and the tip under a hairline. With no city there are no segments.
 - **The literal floor is zero.** Every colour, size, corner, shadow, face and measure in `shell-game.css` is a hall-tier token (`style.css`); `tests/hall_start_screen.mjs` fails on a typed one. The fade into the world is one CSS opacity transition, stopped by the hall's reduced-motion rule.
 
 ## For the tasks after this one
 
 - R04 (task 1005144): point Options at the options menu and move Achievements/Extras targets if those pages lose their interfaces. Escape on the start screen is free for the menu to use.
-- `shell-game.js` is loaded on every hall page but only Home calls `start()`; `shell-game.css` is linked on Home only. A second page that wants the start screen links the sheet and calls `start()` with its own still.
+- `shell-game.js` is loaded on every hall page but only Home calls `start()`; `shell-game.css` is linked on Home only. A second page that wants the start screen links the sheet and calls `start()` with its own `scene` painter.
 
-- New art for the start screen (the city in the clouds) is task 1005196; `welcome-boot.js` still hands in the welcome's painting.
+- Since task 1005308 (owner, 2026-11-14) both screens stand on the city in the clouds from task 1005196; the circuit-city painting is retired everywhere.
 
 Tests: `tests/hall_start_screen.mjs` (the hand-off and pure parts in a vm; both screens, the panel's place at desk and phone widths, the segments, Quit, the no-city and reduced-motion paths in a real browser).