@bongos/core 1.25.27 → 1.25.29

package/docs/recipes/platform-sandbox.md

@@ -0,0 +1,54 @@
+# Cloud Bongos's own sandbox — sandbox.cloudbongos.com
+
+> Task [task 1005292](https://cloudbongos.com/builders#/task/1005292), under [ADR 0406](../adr/0406-every-project-gets-a-sandbox-that-follows-main-and-live-moves-only-when-a-person-promotes.md) §7. Stood up 2026-11-14.
+
+The same rule every project follows, one level up: **every published core release reaches the sandbox first; the live hub moves only when a person promotes.** For Cloud Bongos, "main" is the published release (ADR 0161), so the sandbox follows releases and the hub holds a pin.
+
+## Where it runs (owner's choices, 2026-11-14)
+
+| | Sandbox | Live hub |
+|---|---|---|
+| Address | `https://sandbox.cloudbongos.com` (one host: projects page and hall) | `cloudbongos.com`, `builders.`, `status.` |
+| Box | DigitalOcean `cloudbongos-sandbox` (IP in the DigitalOcean console; reached with the control-plane key `cloudbongos_ed25519`), `s-1vcpu-2gb`, **NYC1**, $12/mo, tag `cloudbongos-sandbox` (NYC3 had no `s-1vcpu-2gb` left) | `cloudbongos`, NYC3 |
+| Takes releases | **every one, as published** — `cloudbongos-sandbox-update.timer`, every 15 min, roster entry `follow: candidates`, `channel: minor`, `pinMode: local-commit` | **never by itself** — its row's update rule is `pinned` (set 2026-11-14) |
+| Moves when | a release is published | a person presses the move on **Hall → Deploy** (`/deploy`) |
+| Data | its own empty `cloudbongos` database | the real one |
+
+The owner chose a separate server over the hub's box (which every project hall shares and which sits near its memory limit), and chose that patch releases stop going live by themselves once the sandbox exists.
+
+## What makes it a sandbox
+
+- `BONGOS_SANDBOX=1` in `/etc/cloudbongos/web.env`. The hub server installs `src/sandbox` (`src/platform-server.js`), so every page carries the yellow band and sends, charges and writes to known providers (Discord, GitHub's API, Stripe, mail) are refused and logged as `[bongos-sandbox] refused …` in `journalctl -u cloudbongos-sandbox`. The band appears once a release carrying task 1005292 is installed.
+- **One named exception:** `BONGOS_SANDBOX_ALLOW=github-repo-create`, so a test project's creation can make its (free) GitHub repository. Every other GitHub change stays refused (owner's choice, 2026-11-14; `src/sandbox/gate.js` `ALLOWANCES`).
+- **No outside credentials in its environment:** no push token, no box-source token, no Discord, no Cloudflare or DigitalOcean token. Its `web.env` copies only the hub's look and behaviour settings.
+- Its own GitHub sign-in app ("Cloud Bongos sandbox", callback `https://sandbox.cloudbongos.com/api/gds/auth/web/callback`). Session cookies are host-only, and `cookieDomain` is `sandbox.cloudbongos.com`, so signing in on one site never touches the other. `firstAdmin` is `willHermesLines` (Will O'Brien, who started the goal): his first sign-in seats the sandbox's owner. The creation walk is task 1005314.
+- `config/branding.json` addresses all point at `sandbox.cloudbongos.com` (committed locally in the sandbox checkout; it has no remote, so nothing reaches the hub's instance repo).
+
+## Test projects
+
+Projects created on the sandbox live at `<slug>.sandbox.cloudbongos.com`. The wildcard `*.sandbox.cloudbongos.com` is one grey-cloud Cloudflare record pointing at the sandbox, so the sandbox needs no Cloudflare token (`BOX_DNS_HOOK` unset, the runner skips the DNS step). Caddy gives each one a certificate on demand, through the same `on_demand_tls` ask as the hub. A test project (`modules/provisioning/test-project.js`) is archon-only and never shows on the public map. Created projects are built by `sandbox-provision-intent-runner.timer` (every 2 minutes; the live hub's twin is `selfhost-provision-intent-runner`), which carries no `box.env`, so it holds no Cloudflare or DigitalOcean token.
+
+## Box layout
+
+- Checkout `/home/lars/cloudbongos-instance` (a copy of the hub's instance repo with the `origin` remote removed). Service `cloudbongos-sandbox.service`, port 3002, user `lars`.
+- Caddy `/etc/caddy/Caddyfile`: the hub's global block (Cloudflare trusted proxies, `on_demand_tls`), `import /etc/caddy/sites/*.caddy`, and the `sandbox.cloudbongos.com` site on the `*.cloudbongos.com` origin cert (proxied, orange cloud).
+- 2 GB swap, `vm.swappiness=10`, ufw allowing 22/80/443.
+- `/usr/local/sbin/sandbox-set-github` stores the sign-in app's id and secret (one per line on stdin) and restarts the service.
+
+## Checks
+
+```bash
+curl -s https://sandbox.cloudbongos.com/version
+```
+
+```bash
+ssh -i ~/.ssh/cloudbongos_ed25519 root@<sandbox droplet IP> 'systemctl list-timers | grep sandbox; journalctl -u cloudbongos-sandbox-update -n 20 --no-pager'
+```
+
+The hub's own sweep must keep printing `cloudbongos: pinned — skipped`.
+
+## Gotchas found standing it up
+
+- The hub's Cloudflare token is locked to the hub's IPv4 address: call the API with `curl -4`, or it answers 9109 "Cannot use the access token from location".
+- `@bongos/core` is public on npm, so the sandbox needs no registry token (`docs/recipes/core-release-pipeline.md` still describes an `NPM_TOKEN` file on the hub, which no longer exists there).
+- The Claude terminal panel shows what is typed even at a hidden (`read -s`) prompt. Never have a person paste a secret into it; read it from the clipboard (`pbpaste`) without reading the keyboard at all.

package/modules/hall-ui/public/home-camera.js

@@ -0,0 +1,188 @@
+// modules/hall-ui/public/home-camera.js — the camera over Home's city in game mode (task 1005305).
+//
+// WHY. In game mode the builder's Home is only the city (owner, 2026-11-14): no page scroll,
+// the city a world larger than the view, moved the way a base-building game is moved. This
+// file is that movement and nothing else: the arrow keys, a drag, and the cursor resting at an
+// edge of the screen all pan the world; the page never scrolls. The scene owns its camera
+// (ADR 0399 §2.2: the visor owns none), so this is Home's, attached by home-city.js.
+//
+// The world is the city's own <svg>, sized past the view on both axes and moved with a
+// transform, so the drawing (home-city-draw.js) and every hover and tap on it are unchanged.
+// The maths (worldSize, clamp, edgePush) is pure and exported for the tests.
+(function (root) {
+  'use strict';
+
+  var OVER = 1.35;     // the world is this many views wide and tall, at least
+  var EDGE = 56;       // px from an edge of the view where the cursor starts to push
+  var KEY_SPEED = 900; // px a second while an arrow key is held
+  var EDGE_SPEED = 1000; // px a second with the cursor on the very edge
+  var DRAG_SLOP = 5;   // px a press may wander and still be a tap
+  var KEYS = { ArrowLeft: [1, 0], ArrowRight: [-1, 0], ArrowUp: [0, 1], ArrowDown: [0, -1] };
+
+  // The world's size in px for a view and the drawing's own proportions (its viewBox): the
+  // smallest size that keeps the drawing's shape and is at least OVER views on both axes.
+  function worldSize(vw, vh, bw, bh) {
+    if (!(vw > 0 && vh > 0 && bw > 0 && bh > 0)) return { w: 0, h: 0 };
+    var s = OVER * Math.max(vw / bw, vh / bh);
+    return { w: Math.round(bw * s), h: Math.round(bh * s) };
+  }
+  // The camera is the world's offset in the view: 0 shows its left/top edge, view − world its
+  // right/bottom. It never shows past an edge.
+  function clamp(v, view, world) { return Math.min(0, Math.max(view - world, v)); }
+  // How hard the cursor pushes on one axis, −1…1: nothing until it is within EDGE of a side,
+  // then more the closer it is. Positive moves the world right/down (the view goes left/up).
+  function edgePush(p, view) {
+    if (!(view > 0) || p == null) return 0;
+    if (p < EDGE) return Math.min(1, (EDGE - Math.max(0, p)) / EDGE);
+    if (p > view - EDGE) return -Math.min(1, (Math.min(view, p) - (view - EDGE)) / EDGE);
+    return 0;
+  }
+
+  // Something above the scene has the keyboard or the pointer: a dialog, the game's windows,
+  // the character picker, the start screen, the visor's sheet.
+  // Asked on every frame of a pan, so the page is searched at most a few times a second.
+  var coverAt = 0, coverWas = false;
+  function covered() {
+    var now = Date.now();
+    if (now - coverAt < 200) return coverWas;
+    coverAt = now;
+    return (coverWas = isCovered());
+  }
+  function isCovered() {
+    var html = document.documentElement, c = html.classList;
+    if (c && (c.contains('craft-picker-open') || c.contains('gs-open') || c.contains('opt-window-open') || c.contains('game-menu-open'))) return true;
+    if (root.OTBVisor && typeof root.OTBVisor.isOpen === 'function' && root.OTBVisor.isOpen()) return true;
+    var up = document.querySelectorAll('dialog[open], [aria-modal="true"]');
+    for (var i = 0; i < up.length; i++) if (!up[i].closest('[hidden]')) return true;
+    return false;
+  }
+  function inField(el) {
+    var tag = el && el.tagName ? String(el.tagName).toLowerCase() : '';
+    return tag === 'input' || tag === 'textarea' || tag === 'select' || !!(el && (el.isContentEditable || (el.closest && el.closest('[role="slider"]'))));
+  }
+
+  // attach(stage, world): `stage` is the element that fills the view, `world` the drawing moved
+  // inside it. Returns { set(on), fit(), centre(), at() }. Off, it holds no listener and
+  // leaves no style behind.
+  function attach(stage, world) {
+    var on = false, x = 0, y = 0, size = { w: 0, h: 0 }, placed = false;
+    var held = {}, mouse = null, raf = null, last = 0, drag = null, ate = false;
+
+    function view() { return { w: stage.clientWidth || root.innerWidth || 0, h: stage.clientHeight || root.innerHeight || 0 }; }
+    function box() {
+      var b = String(world.getAttribute('viewBox') || '').split(/[\s,]+/).map(Number);
+      return b.length === 4 && b[2] > 0 && b[3] > 0 ? { w: b[2], h: b[3] } : null;
+    }
+    function paint() { world.style.transform = 'translate3d(' + Math.round(x) + 'px,' + Math.round(y) + 'px,0)'; }
+    function move(nx, ny) {
+      var v = view();
+      x = clamp(nx, v.w, size.w); y = clamp(ny, v.h, size.h);
+      paint();
+    }
+    // Size the world for this view; the first time, and whenever asked, look at its middle.
+    function fit(recentre) {
+      if (!on) return;
+      var v = view(), b = box();
+      if (!b) return;
+      var was = size, cx = placed && was.w ? (v.w / 2 - x) / was.w : 0.5, cy = placed && was.h ? (v.h / 2 - y) / was.h : 0.5;
+      size = worldSize(v.w, v.h, b.w, b.h);
+      world.style.width = size.w + 'px';
+      world.style.height = size.h + 'px';
+      if (recentre || !placed) { cx = 0.5; cy = 0.5; }
+      placed = true;
+      move(v.w / 2 - cx * size.w, v.h / 2 - cy * size.h);
+    }
+
+    function pushing() {
+      var dx = 0, dy = 0, k;
+      for (k in held) if (held[k] && KEYS[k]) { dx += KEYS[k][0]; dy += KEYS[k][1]; }
+      var ex = 0, ey = 0;
+      if (mouse && !drag) { var v = view(); ex = edgePush(mouse.x, v.w); ey = edgePush(mouse.y, v.h); }
+      return { x: dx * KEY_SPEED + ex * EDGE_SPEED, y: dy * KEY_SPEED + ey * EDGE_SPEED };
+    }
+    function frame(now) {
+      raf = null;
+      if (!on) return;
+      var p = covered() ? { x: 0, y: 0 } : pushing();
+      var dt = Math.min(0.05, last ? (now - last) / 1000 : 0.016);
+      last = now;
+      if (!p.x && !p.y) { last = 0; return; }
+      move(x + p.x * dt, y + p.y * dt);
+      raf = root.requestAnimationFrame(frame);
+    }
+    function wake() { if (on && !raf) raf = root.requestAnimationFrame(frame); }
+
+    function onKeyDown(e) {
+      if (!KEYS[e.key] || e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey || inField(e.target) || covered()) return;
+      e.preventDefault(); // the arrows move the city; the page never scrolls
+      held[e.key] = true;
+      wake();
+    }
+    function onKeyUp(e) { if (KEYS[e.key]) held[e.key] = false; }
+    function onBlur() { held = {}; mouse = null; }
+    // The cursor pushes only from the scene: over the glass's own controls, or anything drawn
+    // above the stage, resting near an edge is reaching for a button, not for the city.
+    function onPointerMove(e) {
+      if (drag) {
+        var mx = e.clientX - drag.px, my = e.clientY - drag.py;
+        if (!drag.moved && Math.abs(mx) + Math.abs(my) < DRAG_SLOP) return;
+        drag.moved = true;
+        stage.classList.add('is-dragging');
+        move(drag.x + mx, drag.y + my);
+        return;
+      }
+      if (e.pointerType && e.pointerType !== 'mouse') return;
+      // the visor's time band lies over the top of the view; resting there still pushes up
+      var el = e.target && e.target.nodeType === 1 ? e.target : null;
+      var over = !!el && (stage.contains(el) || !!(el.closest && el.closest('[data-visor-scrub]')));
+      mouse = over ? { x: e.clientX, y: e.clientY } : null;
+      if (mouse) wake();
+    }
+    function onPointerLeave() { mouse = null; }
+    function onPointerDown(e) {
+      if (e.button !== 0 || !stage.contains(e.target) || covered()) return;
+      drag = { px: e.clientX, py: e.clientY, x: x, y: y, moved: false };
+    }
+    function onPointerUp() {
+      if (!drag) return;
+      ate = drag.moved; // the click that ends a drag is not a tap on a tower
+      drag = null;
+      stage.classList.remove('is-dragging');
+      if (ate) root.setTimeout(function () { ate = false; }, 0);
+    }
+    // Capture on window, so it runs before every tap handler on the page (home-runner.js
+    // listens in capture on document).
+    function onClick(e) {
+      if (!ate) return;
+      ate = false;
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    function onResize() { fit(false); }
+    // A plain wheel has nowhere to scroll to; held so a trackpad cannot rubber-band the page.
+    function onWheel(e) { if (!e.ctrlKey && stage.contains(e.target)) e.preventDefault(); }
+
+    var wired = [
+      [root, 'keydown', onKeyDown], [root, 'keyup', onKeyUp], [root, 'blur', onBlur], [root, 'resize', onResize],
+      [root, 'pointermove', onPointerMove], [root, 'pointerdown', onPointerDown], [root, 'pointerup', onPointerUp],
+      [root, 'pointercancel', onPointerUp], [root, 'click', onClick, true],
+      [document.documentElement, 'pointerleave', onPointerLeave], [stage, 'wheel', onWheel, { passive: false }],
+    ];
+    function set(next) {
+      next = !!next;
+      if (next === on) { if (on) fit(false); return; }
+      on = next;
+      wired.forEach(function (w) { w[0][on ? 'addEventListener' : 'removeEventListener'](w[1], w[2], w[3] || false); });
+      if (on) { placed = false; fit(true); return; }
+      if (raf) root.cancelAnimationFrame(raf);
+      raf = null; held = {}; mouse = null; drag = null; last = 0;
+      world.style.transform = ''; world.style.width = ''; world.style.height = '';
+      stage.classList.remove('is-dragging');
+    }
+    return { set: set, fit: function () { fit(false); }, centre: function () { fit(true); }, at: function () { return { x: x, y: y, w: size.w, h: size.h, on: on }; } };
+  }
+
+  var api = { attach: attach, worldSize: worldSize, clamp: clamp, edgePush: edgePush, EDGE: EDGE, OVER: OVER };
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+  if (root) root.OTBHomeCamera = api;
+})(typeof window !== 'undefined' ? window : null);

package/modules/hall-ui/public/home-city.css

@@ -137,3 +137,17 @@ html[data-theme="dark"] .home-city.hc-is-sky { background: linear-gradient(color
   .hc-ladder { width: auto; margin: 12px 18px 4px; }
   .hc-time { padding: 6px 16px 16px; }
 }
+
+/* GAME MODE: THE CITY IS THE WHOLE VIEW (task 1005305, owner 2026-11-14). Where Home shows the
+   city in game mode (html.hc-world, set by home-city.js) the page does not scroll and holds
+   nothing but the city: the greeting, the cards under it, the ladder, the slider and the foot
+   are off the scene (time is on the visor, ADR 0403). The city is a world larger than the view,
+   sized and moved by home-camera.js: the arrow keys, a drag, or the cursor at an edge. Classic
+   mode, and the artist's gallery, are untouched. */
+html.hc-world, html.hc-world body { overflow: hidden; overscroll-behavior: none; }
+html.hc-world .page-head--hall, html.hc-world .app-foot, html.hc-world #zone-home-banner,
+html.hc-world #zone-home-band, html.hc-world #zone-home-main, html.hc-world .hc-ladder, html.hc-world .hc-time { display: none; }
+html.hc-world .home-city { position: fixed; inset: 0; z-index: 0; margin: 0; border-radius: 0; }
+html.hc-world .hc-stage { position: absolute; inset: 0; display: block; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
+html.hc-world .hc-svg { position: absolute; left: 0; top: 0; flex: none; max-width: none; will-change: transform; }
+html.hc-world .hc-stage.is-dragging .hc-svg a { pointer-events: none; }

package/modules/hall-ui/public/home-city.js

@@ -26,6 +26,12 @@
 // The governor's Home is the street (task 1005064; the v16 round's v16-governing.html):
 // choosing Governing on Home, or opening Home with it chosen, goes to the street page
 // (GovCity.STREET_HREF), which is never redrawn here.
+//
+// In game mode the city is the whole view (task 1005305, owner 2026-11-14): the page does
+// not scroll, the cards under the city, the ladder and the slider are off the scene, and the
+// city is a world moved by the arrow keys, a drag, or the cursor at an edge of the screen
+// (home-camera.js). Time is the visor's there (ADR 0403): this file hands OTBVisor.timeline
+// the week it is on and what a drag, play, the speed and Back to live do.
 (function () {
   'use strict';
   if (!window.OTB || typeof window.OTB.contributeHallWidget !== 'function') return;
@@ -37,6 +43,7 @@
   // the player's speeds, in weeks per frame at 60 fps: rewind and fast forward cross the
   // whole slider in about five and four seconds; play is about a week every 1.6 s
   const SPEED = { rw: -1 / 34, play: 1 / 96, ff: 1 / 26 };
+  const RATES = [1, 2, 4]; // how fast play runs on the visor (game mode): 1×, 2×, 4×
   const STILL = () => !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
   const CRAFTS = [
     ['art', 'artist', 'Art', 'pages designed'],
@@ -57,7 +64,7 @@
   const SKY_LABEL = 'The project\'s ideas as a night sky over the city\'s real skyline, with this week\'s ideators ranked beside it';
   const CITY_LABEL = 'The project as a city: one tower per working area, as tall as what has shipped there, with the builders of the week beside it';
 
-  let host = null, model = null, viewerId = null, t = 0, target = 0, raf = null, run = null, lastWeek = -1, shown = false, gallery = null, ideaBox = null;
+  let host = null, model = null, viewerId = null, t = 0, target = 0, raf = null, run = null, lastWeek = -1, shown = false, gallery = null, ideaBox = null, camera = null, rate = 1, rowsWere = '';
   const rungs = new Map();
 
   function mode() {
@@ -109,8 +116,10 @@
     host.classList.toggle('hc-is-sky', sky);
     svg.setAttribute('aria-label', sky ? SKY_LABEL : CITY_LABEL);
     host.querySelector('#home-city-h').textContent = sky ? 'The project\'s ideas this week' : 'The project this week';
+    const boxWas = svg.getAttribute('viewBox');
     svg.setAttribute('viewBox', out.viewBox);
     svg.replaceChildren(...out.nodes.map(build));
+    if (camera && boxWas !== out.viewBox) camera.fit();
   }
 
   // ---- the ladder: a small face and one line split by craft, ranked ----
@@ -202,6 +211,22 @@
     if (w !== lastWeek) { lastWeek = w; drawLadder(); }
     buttons();
   }
+  // ---- game mode: time is on the visor (task 1005305). The strip under the top arc is the
+  // slider; back in time the glass shows the date, play, the speed and Back to live. ----
+  function timeline() {
+    const V = window.OTBVisor;
+    if (!V || typeof V.timeline !== 'function') return;
+    if (!model || !world()) { V.timeline(null); return; }
+    const end = Math.max(1, model.W - 1);
+    V.timeline({
+      value: t / end, live: atLive(t), label: when(t), playing: run === 'play', speed: rate + '×',
+      seek: (f) => glideTo(f * end), play: () => press('play'), faster, toLive: () => glideTo(model.W - 1),
+    });
+    // the scene's rows change only with play, the speed or live: never on a frame of a glide
+    const rows = (run === 'play') + '|' + rate + '|' + atLive(t);
+    if (rows !== rowsWere) { rowsWere = rows; registerScene(); }
+  }
+  function faster() { rate = RATES[(RATES.indexOf(rate) + 1) % RATES.length]; buttons(); }
   function buttons() {
     const b = (k) => host.querySelector(`.hc-p-${k}`);
     b('play').classList.toggle('is-playing', run === 'play');
@@ -209,12 +234,13 @@
     ['rw', 'play', 'ff'].forEach((k) => b(k).setAttribute('aria-pressed', String(run === k)));
     b('rw').disabled = t <= 1e-3 && run !== 'rw';
     b('ff').disabled = atLive(t) && run !== 'ff';
+    timeline();
   }
   function halt() { if (raf) cancelAnimationFrame(raf); raf = null; run = null; target = t; if (host) buttons(); }
   function tick() {
     raf = requestAnimationFrame(() => {
       let v;
-      if (run) { v = t + SPEED[run]; if (v <= 0 || v >= model.W - 1) { v = Math.max(0, Math.min(model.W - 1, v)); run = null; } target = v; }
+      if (run) { v = t + SPEED[run] * (run === 'play' ? rate : 1); if (v <= 0 || v >= model.W - 1) { v = Math.max(0, Math.min(model.W - 1, v)); run = null; } target = v; }
       else { v = t + (target - t) * 0.16; if (Math.abs(target - v) < 0.004) v = target; }
       setT(v);
       if (run || v !== target) tick(); else { raf = null; buttons(); }
@@ -307,6 +333,25 @@
     if (gallery) gallery.show(art);
     if (ideaBox) ideaBox.show(idea);
     host.hidden = !(art || idea || shown);
+    worldMode();
+  }
+
+  // ---- game mode: the city is the whole view (task 1005305) ----
+  // Only where the city is what Home shows: in the gallery (the artist's Home) nothing changes.
+  function world() {
+    return document.documentElement.dataset.game === 'on' && shown && !!host && !host.classList.contains('hc--gallery');
+  }
+  function worldMode() {
+    if (!host) return;
+    const on = world(), html = document.documentElement;
+    if (html.classList.contains('hc-world') !== on) {
+      html.classList.toggle('hc-world', on);
+      if (on) window.scrollTo(0, 0);
+    }
+    if (!camera && on && window.OTBHomeCamera) camera = window.OTBHomeCamera.attach(host.querySelector('.hc-stage'), host.querySelector('.hc-svg'));
+    if (camera) camera.set(on);
+    timeline();
+    registerScene();
   }
 
   // ---- the governor's Home is the street; tests swap the hop for a recorder ----
@@ -353,6 +398,7 @@
     document.addEventListener('otb:craft', craftHome);
     craftHome();
     new MutationObserver(() => { if (model) drawScene(); }).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+    new MutationObserver(worldMode).observe(document.documentElement, { attributes: true, attributeFilter: ['data-game'] });
     document.addEventListener('otb:craft', () => { if (model) { drawScene(); drawLadder(); } });
     window.addEventListener('resize', () => { if (model) drawLadder(); });
     document.addEventListener('otb:home-runner', () => { if (model) drawScene(); });
@@ -364,11 +410,20 @@
   // the gallery's own rows (home-gallery.js visorActions), registered again when they change.
   let sceneSig = null;
   function registerScene() {
-    const actions = gallery && gallery.visorActions ? gallery.visorActions() : [];
-    const sig = actions.map((a) => a.label + '|' + (a.key || '')).join('\n');
+    // task 1005305: in the city the scene's rows are its time (play, the speed, back to live)
+    // and the way back to its middle; its keys line says how to move; the sight is the cursor.
+    const city = world();
+    const actions = city ? [
+      { label: run === 'play' ? 'Pause the city' : 'Play the city over time', key: 'p', bind: true, run: () => press('play') },
+      { label: 'Speed · ' + rate + '×', key: 's', bind: true, run: faster },
+      ...(atLive(t) ? [] : [{ label: 'Back to live', key: 'l', bind: true, run: () => glideTo(model.W - 1) }]),
+      { label: 'Back to the middle of the city', key: 'h', bind: true, run: () => { if (camera) camera.centre(); } },
+    ] : (gallery && gallery.visorActions ? gallery.visorActions() : []);
+    const keys = city ? [{ label: 'Move around the city', key: 'Arrows' }] : [];
+    const sig = (city ? 'city\n' : '') + actions.map((a) => a.label + '|' + (a.key || '')).join('\n');
     if (sig === sceneSig && window.__visorScene) return;
     sceneSig = sig;
-    window.__visorScene = { name: 'home', place: 'Home', actions };
+    window.__visorScene = { name: 'home', place: 'Home', actions, keys, aim: city };
     if (window.OTBVisor) window.OTBVisor.scene(window.__visorScene);
   }
 

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

@@ -19,11 +19,11 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <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-12-runner">
+  <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/hall-ask.css">
-  <link rel="stylesheet" href="/builders/home-city.css?v=2026-11-12-runner">
+  <link rel="stylesheet" href="/builders/home-city.css?v=2026-11-14-world">
   <link rel="stylesheet" href="/builders/home-gallery.css">
   <link rel="stylesheet" href="/builders/home-idea-box.css">
 </head>
@@ -109,7 +109,7 @@
 <script src="/builders/shell.js?v=2026-11-13-founding" defer></script>
 <script src="/builders/hall-dialog.js" defer></script>
 <!-- task 1005148: the visor (glass over the scene, game mode only; ADR 0399), after the shell and hall-dialog.js -->
-<script src="/builders/visor.js?v=2026-11-12-runner" defer></script>
+<script src="/builders/visor.js?v=2026-11-14-world" defer></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <!-- task 2166: the shared component kit (window.OTBKit) — pager/ledger/rail.
@@ -138,7 +138,9 @@
 <!-- task 1005243: your runner on Home's towers (game mode; the visor carries its card and button) -->
 <script src="/builders/runner-button.js" defer></script>
 <script src="/builders/home-runner.js" defer></script>
-<script src="/builders/home-city.js?v=2026-11-12-runner" defer></script>
+<!-- task 1005305: the camera over the city in game mode (arrow keys, a drag, the cursor at an edge) -->
+<script src="/builders/home-camera.js" defer></script>
+<script src="/builders/home-city.js?v=2026-11-14-world" defer></script>
 <!-- task 1003455: the shared blocker-row renderer (window.OTBBlockersLib), read by
      both goal-inbox.js's attention-inbox slice below and the /blockers page.
      Loaded BEFORE goal-inbox.js, which calls it while rendering. -->

package/modules/hall-ui/public/sky-time.js

@@ -179,7 +179,8 @@
     if (!p) return null;
     const el = d.documentElement;
     Object.keys(p).forEach((name) => el.style.setProperty('--sky-now-' + name, String(p[name])));
-    el.setAttribute('data-sky-hour', String(Math.round(h * 10) / 10));
+    // rounded to a tenth, 23:57 to 23:59 would say 24, which is no hour: wrap after rounding (task 1005299)
+    el.setAttribute('data-sky-hour', String(wrap(Math.round(h * 10) / 10)));
     lastHour = h;
     return p;
   }

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

@@ -301,3 +301,40 @@ html.visor-on.game-menu-open .visor > :not(.visor__frame, .visor__notch) { opaci
 
 /* a phone (640px and narrower): the rules live in style.css’s shared phone block, so the
    visor adds no breakpoint of its own (the design-count ratchet). */
+
+/* THE SIGHT IS THE CURSOR (task 1005305, owner 2026-11-14). In a scene that asks for it (Home's
+   city) the sight follows the mouse and the arrow is not drawn over the scene, so what you point
+   with is the crosshair. Over the glass's own controls, a window or a field the arrow is back
+   and the sight steps aside; before the mouse moves, and on touch, it rests at the centre. */
+.visor__sight { left: var(--sight-x, 50%); top: var(--sight-y, 50%); }
+html.visor-aim, html.visor-aim body, html.visor-aim body * { cursor: none !important; }
+.visor[data-aim="ui"] .visor__sight { visibility: hidden; }
+
+/* THE SCENE'S TIME ON THE GLASS (task 1005305): the top arc, which reads the version's progress,
+   is also a slider you drag to go back through the weeks. The band that takes the drag is the
+   arc's own box, and the mark rides the curve where you are in time. Back in time, the date and
+   the player (play or pause, the speed, Live) stand on the top line beside the place. The band
+   and the three buttons are the only parts here that take a pointer. */
+.visor__scrub { pointer-events: auto; cursor: ew-resize; touch-action: none; }
+.visor__scrub-at {
+  position: absolute; left: var(--scrub-x, 92.4%); top: var(--scrub-y, 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px;
+  box-sizing: border-box; background: var(--ink); border: var(--line-strong) solid var(--bg); transform: rotate(45deg); pointer-events: none;
+  transition: opacity var(--ds-dur-base) var(--ds-ease);
+}
+.visor--rest .visor__scrub-at { opacity: 0; }
+.visor__scrub:focus-visible { outline: 0; }
+.visor__scrub:focus-visible .visor__scrub-at { box-shadow: var(--press-focus); }
+.visor__progress--time { gap: var(--ds-space-hair); }
+.visor__when { color: var(--ink); font-variant-numeric: tabular-nums; }
+.visor__time { display: flex; align-items: center; gap: var(--ds-space-hair); }
+.visor__tbtn {
+  pointer-events: auto; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+  min-width: 28px; height: 24px; padding: 0 var(--ds-space-hair); border: var(--line-strong) solid currentColor; background: var(--bg);
+  color: var(--ink-soft); font-family: var(--name-face); font-weight: var(--name-weight); text-transform: var(--name-case);
+  font-size: var(--ds-text-xs); letter-spacing: var(--name-space); line-height: 1; cursor: pointer;
+}
+.visor__tbtn:hover { color: var(--ink); }
+.visor__tbtn:focus-visible { outline: 0; box-shadow: var(--press-focus); }
+.visor__tbtn svg { width: 12px; height: 12px; fill: currentColor; }
+.visor__tbtn--play .visor__tpause, .visor__tbtn--play.is-playing .visor__tplay { display: none; }
+.visor__tbtn--play.is-playing .visor__tpause { display: block; }