@bongos/core 1.24.29 → 1.24.30

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

@@ -0,0 +1,66 @@
+/* modules/hall-ui/public/home-city.css — Home's project city (task 1005054).
+   The scene card, the ladder of builders beside it and the time slider under it
+   (home-city.js; record modules/hall-ui/records/home-city.md). Every colour is a
+   hall token or a mix of one; the tower faces are drawing data in
+   home-city-draw.js. One sky for both the city and the ladder, so the two read
+   as one scene. No :root here; motion is CSS and the hall's reduced-motion rule (style.css, `prefers-reduced-motion: reduce`)
+   stops it. */
+
+.home-city { padding: 0; overflow: hidden; background: linear-gradient(var(--bg-card), var(--bg)); }
+.hc-stage { display: flex; align-items: center; gap: 4px; }
+.hc-svg { display: block; flex: 1; min-width: 0; height: auto; }
+.hc-svg .hc-wait__n { font: 700 11px var(--font-display); fill: var(--accent-on); }
+.hc-svg .hc-av__i { font: 600 13px var(--font-display); }
+.hc-svg [data-tip] { cursor: default; }
+.hc-svg .hc-tower:hover .hc-face { filter: brightness(1.3); }
+
+/* the ladder: a small face and one thin line split by craft */
+.hc-ladder { position: relative; flex: none; width: 230px; margin: 24px 28px 24px 0; }
+.hc-rung { position: absolute; left: 0; right: 0; height: 34px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; transition: top .55s cubic-bezier(.2, .7, .2, 1); }
+.hc-av { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--rule-soft); display: grid; place-items: center; overflow: hidden; font: 600 11px var(--font-display); color: var(--ink-soft); }
+.hc-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.hc-av--agent { background: color-mix(in srgb, var(--sea) 26%, var(--bg-card)); }
+.hc-av svg { width: 15px; height: 15px; }
+.hc-rung--me .hc-av { color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink-soft); }
+.hc-line { display: flex; gap: 3px; align-items: flex-end; height: 22px; transition: width .55s cubic-bezier(.2, .7, .2, 1); }
+.hc-seg { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-width: 26px; color: var(--ink-faint); }
+.hc-seg b { display: flex; align-items: center; gap: 3px; font: 600 10.5px/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.hc-seg .hc-ico { width: 11px; height: 11px; flex: none; opacity: .8; }
+.hc-seg i { display: block; height: 3px; border-radius: 2px; background: var(--rule); }
+.hc-rung--me .hc-seg { color: var(--ink-soft); }
+.hc-rung--me .hc-seg i { background: var(--ink-soft); }
+.hc-seg:hover { color: var(--ink); }
+.hc-seg:hover i { background: var(--ink); }
+
+/* the time slider */
+.hc-time { display: flex; align-items: center; gap: 16px; padding: 6px 24px 18px; background: var(--bg-card); }
+.hc-play { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
+.hc-play svg { width: 16px; height: 16px; }
+.hc-play .hc-play__off, .hc-play.is-playing .hc-play__on { display: none; }
+.hc-play.is-playing .hc-play__off { display: block; }
+.hc-play:focus-visible, .hc-slider:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
+.hc-track { flex: 1; min-width: 0; }
+.hc-slider { width: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; height: 24px; cursor: pointer; }
+.hc-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--rule-soft); }
+.hc-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--rule-soft); }
+.hc-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); margin-top: -8px; border: 3px solid var(--bg-card); }
+.hc-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg-card); }
+.hc-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
+
+.hc-tip { position: fixed; pointer-events: none; z-index: var(--z-modal); background: var(--ink); color: var(--bg-card); font-size: 12px; line-height: 1.35; padding: 8px 11px; border-radius: 9px; max-width: 260px; opacity: 0; transform: translate(-50%, calc(-100% - 12px)); }
+.hc-tip.is-on { opacity: 1; }
+.hc-tip b { display: block; font-size: 13px; }
+
+/* live, and nothing more: a crane's slab climbs, this week's ideas glow (20s+) */
+@keyframes hc-lift { 0%, 12% { transform: translateY(0); } 55%, 70% { transform: translateY(-24px); } 100% { transform: translateY(0); } }
+@keyframes hc-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
+.hc-slab { animation: hc-lift 20s ease-in-out infinite; }
+.hc-orb { animation: hc-glow 24s ease-in-out infinite; }
+
+/* a phone: the ladder runs full width under the city */
+@media (max-width: 700px) {
+  .hc-stage { flex-direction: column; align-items: stretch; }
+  .hc-svg { width: 100%; }
+  .hc-ladder { width: auto; margin: 12px 18px 4px; }
+  .hc-time { padding: 6px 16px 16px; }
+}

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

@@ -0,0 +1,223 @@
+// modules/hall-ui/public/home-city.js — Home's project city (task 1005054).
+//
+// The page half of the owner's Home redesign (docs/design/mocks/hall/home/v14.html,
+// record modules/hall-ui/records/home-city.md): the city scene, the ladder of
+// builders beside it, and the time slider under it. It asks the server for ONE
+// bounded weekly summary (GET /home/city) and never a feed it would slice — the
+// rule tests/home_bounded_reads.mjs holds Home to. The drawing is
+// home-city-draw.js (pure); this file owns the read, the DOM, the slider and hover.
+//
+// Motion stays CSS: play steps the slider a week at a time on a timer (state, not
+// animation); the ladder's rows slide and a crane's slab lifts in CSS, which the
+// hall's reduced-motion rule stops.
+(function () {
+  'use strict';
+  if (!window.OTB || typeof window.OTB.contributeHallWidget !== 'function') return;
+  const Draw = window.OTBHomeCityDraw;
+  if (!Draw) return;
+  const API = '/api/bongos';
+  const WEEKS = 10;
+  const STEP_MS = 800;
+  const RUNG = 40;
+  const CRAFTS = [
+    ['art', 'artistry', 'Art', 'pages designed'],
+    ['build', 'building', 'Build', 'shipped'],
+    ['idea', 'ideating', 'Ideas', 'ideas'],
+    ['gov', 'governing', 'Govern', 'votes and decisions'],
+  ];
+
+  let host = null, model = null, viewerId = null, week = 0, timer = null;
+  const rungs = new Map();
+
+  function mode() {
+    const t = document.documentElement.dataset.theme;
+    if (t === 'light' || t === 'dark') return t;
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  function weekName(i) {
+    if (!model || i === model.W - 1) return 'this week';
+    const w = model.weeks[i];
+    const d = w && w.start ? new Date(w.start + 'T00:00:00Z') : null;
+    return d && !isNaN(d) ? 'week of ' + d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', timeZone: 'UTC' }) : 'that week';
+  }
+
+  function craftIcon(key) {
+    const CM = window.OTBCraftMode;
+    return CM && typeof CM.iconHtml === 'function' ? CM.iconHtml(key, 'hc-ico') : '';
+  }
+
+  // ---- the scene: the drawing's shapes built as SVG nodes (city.js's split),
+  // so every name and title lands as an attribute value or text, never markup ----
+  const NS = 'http://www.w3.org/2000/svg';
+  function build(n) {
+    const e = document.createElementNS(NS, n.tag);
+    Object.keys(n.attrs).forEach((k) => e.setAttribute(k, String(n.attrs[k])));
+    if (n.text != null) e.textContent = n.text;
+    n.kids.forEach((c) => e.appendChild(build(c)));
+    return e;
+  }
+  function drawScene() {
+    const svg = host.querySelector('.hc-svg');
+    const out = Draw.citySvg(model, week, { mode: mode() });
+    svg.setAttribute('viewBox', out.viewBox);
+    svg.replaceChildren(...out.nodes.map(build));
+  }
+
+  // ---- the ladder: a small face and one line split by craft, ranked ----
+  function rungFor(row) {
+    let r = rungs.get(row.id);
+    if (r) return r;
+    r = document.createElement('div');
+    r.className = 'hc-rung';
+    const av = document.createElement('span');
+    av.className = 'hc-av' + (row.agent ? ' hc-av--agent' : '');
+    if (row.agent) av.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="8" width="14" height="11" rx="3" fill="none" stroke="currentColor" stroke-width="1.6"/><circle cx="9.5" cy="13.5" r="1.5" fill="currentColor"/><circle cx="14.5" cy="13.5" r="1.5" fill="currentColor"/><path d="M12 8V5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>';
+    else {
+      av.textContent = Draw.initial(row.name);
+      if (row.avatar && /^https:\/\//.test(row.avatar)) {
+        const img = document.createElement('img');
+        img.src = row.avatar; img.alt = ''; img.loading = 'lazy';
+        img.addEventListener('error', () => img.remove());
+        av.appendChild(img);
+      }
+    }
+    const line = document.createElement('span');
+    line.className = 'hc-line';
+    r.append(av, line);
+    host.querySelector('.hc-ladder').appendChild(r);
+    rungs.set(row.id, r);
+    return r;
+  }
+
+  function drawLadder() {
+    const rows = Draw.ladderFor(model, week, viewerId);
+    const ladder = host.querySelector('.hc-ladder');
+    ladder.style.height = (Math.max(1, rows.length) * RUNG) + 'px';
+    const top = Math.max(1, ...rows.map((r) => r.total));
+    const room = Math.max(60, ladder.clientWidth - 40);
+    const shown = new Set();
+    rows.forEach((row, n) => {
+      const r = rungFor(row);
+      shown.add(row.id);
+      r.hidden = false;
+      r.classList.toggle('hc-rung--me', row.me);
+      r.style.top = (n * RUNG) + 'px';
+      r.dataset.tip = row.name + (row.me ? ' (you)' : '') + ' · ' + row.total;
+      r.dataset.tipBody = weekName(week);
+      const line = r.querySelector('.hc-line');
+      line.textContent = '';
+      const crafts = CRAFTS.filter((c) => row.v[c[0]] > 0);
+      line.style.width = Math.max(crafts.length * 29, room * row.total / top).toFixed(1) + 'px';
+      crafts.forEach((c) => {
+        const seg = document.createElement('span');
+        seg.className = 'hc-seg';
+        seg.style.flex = row.v[c[0]] + ' 1 0';
+        seg.dataset.tip = row.name + ' · ' + c[2];
+        seg.dataset.tipBody = row.v[c[0]] + ' ' + c[3] + ' ' + weekName(week);
+        const lab = document.createElement('b');
+        lab.innerHTML = craftIcon(c[1]);
+        lab.appendChild(document.createTextNode(String(row.v[c[0]])));
+        seg.append(lab, document.createElement('i'));
+        line.appendChild(seg);
+      });
+    });
+    rungs.forEach((r, id) => { if (!shown.has(id)) r.hidden = true; });
+  }
+
+  function setWeek(i) {
+    week = Math.max(0, Math.min(model.W - 1, i));
+    const s = host.querySelector('.hc-slider');
+    s.value = String(week);
+    s.setAttribute('aria-valuetext', weekName(week));
+    drawScene();
+    drawLadder();
+  }
+
+  // ---- play: a week at a time, then stop on now ----
+  function stop() {
+    if (timer) clearTimeout(timer);
+    timer = null;
+    const b = host && host.querySelector('.hc-play');
+    if (b) { b.classList.remove('is-playing'); b.setAttribute('aria-label', 'Play the weeks from the start'); }
+  }
+  function play() {
+    if (timer) { stop(); return; }
+    const b = host.querySelector('.hc-play');
+    b.classList.add('is-playing'); b.setAttribute('aria-label', 'Pause');
+    let i = 0;
+    const step = () => { setWeek(i); if (i++ < model.W - 1) timer = setTimeout(step, STEP_MS); else stop(); };
+    step();
+  }
+
+  // ---- one tooltip for the whole widget; labels are ledger data, so text only ----
+  function wireTip() {
+    let tip = document.getElementById('hc-tip');
+    if (!tip) { tip = document.createElement('div'); tip.id = 'hc-tip'; tip.className = 'hc-tip'; tip.setAttribute('role', 'tooltip'); document.body.appendChild(tip); }
+    host.addEventListener('pointerover', (e) => {
+      const n = e.target.closest('[data-tip]');
+      if (!n || !host.contains(n)) return;
+      const r = n.getBoundingClientRect();
+      tip.textContent = '';
+      const b = document.createElement('b'); b.textContent = n.dataset.tip; tip.appendChild(b);
+      if (n.dataset.tipBody) tip.appendChild(document.createTextNode(n.dataset.tipBody));
+      tip.style.left = (r.left + r.width / 2) + 'px';
+      tip.style.top = r.top + 'px';
+      tip.classList.add('is-on');
+    });
+    host.addEventListener('pointerout', (e) => { if (e.target.closest('[data-tip]')) tip.classList.remove('is-on'); });
+  }
+
+  function ticks() {
+    const t = host.querySelector('.hc-ticks');
+    const first = model.weeks[0] && model.weeks[0].start ? new Date(model.weeks[0].start + 'T00:00:00Z') : null;
+    const mid = model.weeks[Math.floor(model.W / 2)] && model.weeks[Math.floor(model.W / 2)].start ? new Date(model.weeks[Math.floor(model.W / 2)].start + 'T00:00:00Z') : null;
+    const mon = (d) => (d && !isNaN(d) ? d.toLocaleDateString('en-GB', { month: 'short', timeZone: 'UTC' }) : '');
+    t.innerHTML = '';
+    [mon(first), mon(mid), 'Now'].forEach((s) => { const sp = document.createElement('span'); sp.textContent = s; t.appendChild(sp); });
+  }
+
+  async function load() {
+    const api = window.BongosClient && window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
+    if (!api) return;
+    let res;
+    try { res = await api.request('GET', `${API}/home/city?weeks=${WEEKS}`); } catch (_) { return; }
+    if (!res || !res.ok || !res.data) return; // signed out, gated or failed: Home keeps its other cards, never an empty plate
+    model = Draw.cityModel(res.data);
+    viewerId = res.data.viewer && res.data.viewer.id != null ? String(res.data.viewer.id) : null;
+    if (!model.W || !model.areas.length) return;
+    const s = host.querySelector('.hc-slider');
+    s.max = String(model.W - 1);
+    ticks();
+    host.hidden = false;
+    setWeek(model.W - 1);
+  }
+
+  function mount(hostEl) {
+    host = hostEl;
+    host.innerHTML =
+      '<h2 id="home-city-h" class="sr-only">The project this week</h2>' +
+      '<div class="hc-stage">' +
+        '<svg class="hc-svg" role="img" aria-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"></svg>' +
+        '<div class="hc-ladder" aria-label="This week\'s builders, ranked by what they did"></div>' +
+      '</div>' +
+      '<div class="hc-time">' +
+        '<button type="button" class="hc-play" aria-label="Play the weeks from the start">' +
+          '<svg class="hc-play__on" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2.5v11l9-5.5z" fill="currentColor"/></svg>' +
+          '<svg class="hc-play__off" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 3h3v10H4zM9 3h3v10H9z" fill="currentColor"/></svg>' +
+        '</button>' +
+        '<div class="hc-track"><input type="range" class="hc-slider" min="0" max="0" step="1" value="0" aria-label="Week"><div class="hc-ticks"></div></div>' +
+      '</div>';
+    host.querySelector('.hc-slider').addEventListener('input', (e) => { stop(); setWeek(Number(e.target.value)); });
+    host.querySelector('.hc-play').addEventListener('click', play);
+    wireTip();
+    new MutationObserver(() => { if (model) drawScene(); }).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+    window.addEventListener('resize', () => { if (model) drawLadder(); });
+    load();
+  }
+
+  window.OTB.contributeHallWidget({
+    id: 'home-city', label: 'The project', order: 15, core: true, mount,
+    view: 'home', zone: 'home-stats', sectionClass: 'scroll home-city', labelledby: 'home-city-h', hiddenByDefault: true,
+  });
+})();

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

@@ -21,6 +21,7 @@
   <link rel="stylesheet" href="/builders/style.css?v=2026-07-02-shell1">
   <link rel="stylesheet" href="/builders/welcome-boot.css?v=2026-10-23-city1">
   <link rel="stylesheet" href="/builders/hall-ask.css">
+  <link rel="stylesheet" href="/builders/home-city.css">
 </head>
 <body data-page="home">
 
@@ -138,8 +139,10 @@
 <script src="/builders/hall-widgets.js?v=2026-09-30-founding" defer></script>
 <!-- The genesis home (task 1004423): a Home banner card that renders only in founding mode. -->
 <script src="/builders/genesis-home.js?v=2026-10-01-genesis" defer></script>
-<!-- BV1.R78 (task 1694): the Goals widget registers into the same registry. -->
-<script src="/builders/goals.js?v=2026-07-01-goals" defer></script>
+<!-- task 1005054: the project city — the drawing (pure) and the widget — in the
+     home-stats zone; the Goals card (goals.js) left Home with it. -->
+<script src="/builders/home-city-draw.js" defer></script>
+<script src="/builders/home-city.js" 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. -->
@@ -159,10 +162,6 @@
      window.OTBProfileNudge; goal-inbox.js's mount() calls it once it has
      created the #attention-profile div, so load order is not load-bearing. -->
 <script src="/builders/profile-nudge.js?v=2026-08-25-profile-nudge" defer></script>
-<!-- task 1003459: the hall's ONE claim/release action (task 1003458) — the
-     Home "Next up" row's Claim button consumes it rather than a second
-     hand-rolled POST /claims. Loaded BEFORE builders.js, which wires it. -->
-<script src="/builders/claim-action.js?v=2026-09-26-claimaction1" defer></script>
 <script src="/builders/builders.js?v=2026-09-28-nextupclaim" defer></script>
 <!-- task 1004727: the ONE karma vote control every task/idea list renders -->
 <script src="/builders/vote-control.js"></script>

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

@@ -2,17 +2,82 @@
   "_": "The hall's HOME page through modules/ui-design/kit/render.js (task 1003304). Home is served at the surface root, so its page path has no last segment to name the file — run it with `--states modules/hall-ui/public/index.states.json`, not `--page`.",
   "page": "/builders/",
   "surface": "hall-ui",
-  "stub": { "prefix": "/builders/" },
+  "stub": {
+    "prefix": "/builders/"
+  },
   "modeQuery": false,
   "_feeds": "As work.states.json: the kit's stub is not the hall's feed set, so Home renders its skeletons and empty states here. The populated dashboard is the hall-preview harness.",
-  "ignoreRequests": ["/api/(gds|bongos)/me$", "/api/(gds|bongos)/me/", "/api/(gds|bongos)/tasks", "/api/(gds|bongos)/claims", "/api/(gds|bongos)/goals", "/api/(gds|bongos)/inbox", "/api/(gds|bongos)/live", "/api/(gds|bongos)/analytics/", "/api/(gds|bongos)/achievements", "/api/(gds|bongos)/versions", "/api/(gds|bongos)/leaderboard"],
-  "ignoreConsole": ["/api/(gds|bongos)/", "\\b401\\b", "\\b404\\b", "Unauthorized", "Not Found", "load failed"],
+  "ignoreRequests": [
+    "/api/(gds|bongos)/me$",
+    "/api/(gds|bongos)/me/",
+    "/api/(gds|bongos)/tasks",
+    "/api/(gds|bongos)/claims",
+    "/api/(gds|bongos)/goals",
+    "/api/(gds|bongos)/inbox",
+    "/api/(gds|bongos)/live",
+    "/api/(gds|bongos)/analytics/",
+    "/api/(gds|bongos)/achievements",
+    "/api/(gds|bongos)/versions",
+    "/api/(gds|bongos)/leaderboard",
+    "/api/(gds|bongos)/home/"
+  ],
+  "ignoreConsole": [
+    "/api/(gds|bongos)/",
+    "\\b401\\b",
+    "\\b404\\b",
+    "Unauthorized",
+    "Not Found",
+    "load failed"
+  ],
   "_1003441": "The `leaderboard` state left with the view: the Roll is the /roster page now and #leaderboard REDIRECTS there, so there is no #view-leaderboard on this page to make visible. The redirect is proven in tests/hall_nav.mjs (it asserts location.replace('/roster') fires on the index and nowhere else) rather than by a render state, because a state whose page navigates away measures the destination, not this page. `standing-karma` replaces the coverage: task 2178 made each Standing rail section addressable and none had a measured state.",
   "states": {
-    "home": { "auth": true, "expect": { "visible": ["#view-home"], "hidden": ["#view-standing"] } },
-    "standing": { "auth": true, "url": "/builders/#accomplishments", "actions": [["wait", 400]], "expect": { "visible": ["#view-standing"] } },
-    "standing-karma": { "auth": true, "url": "/builders/#standing-karma", "actions": [["wait", 400]], "expect": { "visible": ["#view-standing"] } },
-    "out": { "auth": false }
+    "home": {
+      "auth": true,
+      "expect": {
+        "visible": [
+          "#view-home"
+        ],
+        "hidden": [
+          "#view-standing"
+        ]
+      }
+    },
+    "standing": {
+      "auth": true,
+      "url": "/builders/#accomplishments",
+      "actions": [
+        [
+          "wait",
+          400
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#view-standing"
+        ]
+      }
+    },
+    "standing-karma": {
+      "auth": true,
+      "url": "/builders/#standing-karma",
+      "actions": [
+        [
+          "wait",
+          400
+        ]
+      ],
+      "expect": {
+        "visible": [
+          "#view-standing"
+        ]
+      }
+    },
+    "out": {
+      "auth": false
+    }
+  },
+  "reducedMotion": {
+    "auth": true
   },
-  "reducedMotion": { "auth": true }
+  "_1005054": "The project city (home-city.js, task 1005054) reads GET /home/city, which the kit stub does not serve: here the city stays hidden, as it does for a signed-out visitor or a failed read, and the inbox below renders as before. The populated city is measured in the hall-preview harness (scripts/hall-preview/fixtures/home__city.json) and by tests/home_city_widget.mjs."
 }

package/modules/hall-ui/records/home-city.md

@@ -0,0 +1,66 @@
+# The project city — Home's body becomes one scene: towers, a ladder of builders, a time slider (task 1005054)
+
+The owner's Home redesign of 2026-11-03, agreed over fourteen mock rounds; the approved mock is
+[`docs/design/mocks/hall/home/v14.html`](../../../docs/design/mocks/hall/home/v14.html) (v2 to v13 beside it
+are the rounds, each with its own header comment on what changed and why). The brief in the owner's words:
+"I don't want to reach, I want to see and feel", and the UI "subtle and free from overuse of text".
+
+**What people see** (agreed before drawing, round 6): who is involved, the speed of builds as a time slider,
+what is waiting on them, what is being built now, then spend, health and just shipped as small things. Not on
+Home: how close the version is to done, what is ready to go live, work to pick up. The same page for everyone.
+
+- **The scene** (`home-city-draw.js`, pure; the city's own iso palette from `city-draw.js`): one tower per
+  working area (the open, non-maintenance goals of the version being built), as tall as what has shipped
+  there; artist and ui work clads it in glass from the ground up; one hairline per floor. The sites worked in
+  the selected week carry a crane lifting a slab, scaffolding round the floor going up, that floor lit, and the
+  face of who built there (a robot face when an Autobongos runner is working it). That week's ideas are lights
+  in the sky, the week before's dimmer; one that became work drops a dotted line to its tower. A salmon dot
+  with a count sits on each tower where something waits on the viewer, on the latest week only.
+- **The ladder** beside the city: a small face and one thin line per builder, length = their week's total,
+  split into art · build · ideas · govern, each piece marked with the hall's own craft icon (`craft-mode.js`
+  `iconHtml`, never a second copy) and its count. Ranked by the total, the top seven, and the viewer appended
+  when they fall below. No rank numbers, no names, no tabs: the words are on hover. One colour, not four: four
+  craft colours from this pack fail the dataviz validator's normal-vision floor (v11's note).
+- **The slider** under the scene, with play: every part redraws for the week it is on. Play steps a week at a
+  time on a timer and stops on now — state, never animation, so no motion lives in JavaScript. The ladder's
+  rows slide and a crane's slab lifts in CSS; the hall's reduced-motion rule stops both.
+- **Placement.** The widget is `home-city` in the `home-stats` zone (budget 1), which the stats strip held.
+
+**Left Home:** the stats strip and version tab (`home-stats`, and the `/public/progress` read that only fed the
+tab), the Goals card (`goals.js` is no longer loaded by `index.html`), and Your work — Next up with its claim
+button and `GET /tasks/claimable?limit=5`, and the Recently shipped table (`home-recent`). `claim-action.js` left
+`index.html` with the claim button. **Kept:** the conditional welcome, setup, genesis and founding banners, the
+Standing chip (its Shipped figure now comes straight from the ships payload, `shipState`, not a DOM tile), and
+the Needs-your-attention inbox below the city, because it holds actions with no other home (join requests,
+invitations, triage). The `/me/recent-ships?limit=5` read stays: it feeds the chip and Accomplishments.
+
+**The data** is ONE bounded read, `GET /home/city?weeks=10` (`modules/lifecycle/home-city.js`, any signed-in
+builder): counts grouped by week in SQL, so the payload grows with areas, builders and weeks, never with the
+corpus; `tests/home_city.mjs` proves every query is bounded and selects no prose. Four things it is honest about:
+
+- **Art** is economy's credits-by-craft rule: `artist` and `ui` disciplines. Page tweaks file under each version's
+  artist-review goal, so that tower is mostly glass.
+- **An agent is a site fact, never a person.** Autobongos runs under its builder's account; a site whose task an
+  `autonomy_runner_heartbeat` row is working (seen in the last 15 minutes) is drawn with the robot face and named
+  "<builder>'s agent". `people[].agent` is always false from the server.
+- **"Waits on you" is the docket's own routing (task 1005056):** the government port's `yoursByGoal(viewer)`
+  routes the docket's goal-shaped matters (blockers, criteria awaiting sign-off, goal join requests) with
+  `modules/government/routing.js` and counts, per area, those routed to the viewer — so a seated Lead, a board
+  member or an access holder sees their own dots, not only an Archon. With government off, an older government
+  without the method, or seats it could not read, the server falls back to open blockers whose stored ask waits
+  on `owner` (or carry none), shown only to an Archon.
+- Government and autonomy are optional modules: their tables are probed with `to_regclass` first and left out
+  when absent, so a project with either switched off still gets its city.
+
+**Verifying:** the hall-preview harness serves `fixtures/home__city.json` (hand-shaped from the approved mock, ids
+from the other fixtures); `tests/home_city_widget.mjs` runs the real widget in a browser (one read, the slider
+redraws, play stops on now, a refused read leaves no empty plate, no sideways scroll at 390); the kit stub does
+not serve the read, so `index.states.json` ignores it and its renders show the city hidden, as for a visitor.
+
+## Private areas
+
+A private goal the viewer is neither a member of nor an Archon over still stands as a tower (its counts are structure), but the server sends no title for it or for the ideas tied to it; the drawing labels them "A private area" and "A private idea" (ADR 0112, as the goal map and the sky apply it). Pinned in `tests/home_city.mjs`.
+
+## Sign-off
+
+The owner chose v14 from fourteen mock rounds, approved the before and after review sheet (1280 dark and light, 390 dark) on 2026-11-02, and said "Yes, ship it".