@bongos/core 1.24.28 → 1.24.30

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

@@ -0,0 +1,275 @@
+// modules/hall-ui/public/home-city-draw.js — Home's project city, as data (task 1005054).
+//
+// WHAT THIS IS. The drawing half of Home's city (the owner's v14 mock,
+// docs/design/mocks/hall/home/v14.html): one isometric tower per working area,
+// as tall as what has shipped there; artist work clads it in glass; the sites
+// worked in a week carry a crane and the face of who built there; that week's
+// ideas are lights in the sky; a salmon dot marks where something waits on the
+// viewer. Beside it, the ladder: each builder's week as one line split by craft.
+// home-city.js owns the page half (the read, the slider, the ladder's DOM,
+// hover); this file only turns the weekly summary into shapes and rows.
+//
+// PURE. No DOM, no fetch, no clock: the same summary and week give the same
+// shapes, so tests run it in node (the roadmap-timeline.js precedent). The scene
+// comes back as a tree of plain shape objects, never markup (see citySvg).
+//
+// THE PALETTE is the city's own drawing data (city-draw.js isoTheme, trimmed to
+// what this scene spends: the dark blocks in the black, the white paper model in
+// light). Everything around the drawing takes the hall's tokens; salmon
+// (var(--accent)) is spent only on what waits on the viewer.
+(function (root) {
+  'use strict';
+
+  const FOOT = 1.8;          // a tower's footprint, in tiles
+  const PER_ROW = 5;         // towers per row; rows run back (tallest) to front
+  const ROW_GAP = 4.2;       // tiles between rows
+  const COL_GAP = 3.0;       // tiles between towers in a row
+  const MAX_AREAS = 15;      // three rows; the rest are reported, not drawn
+  const TOWER_PX = 170;      // the tallest tower at the latest week
+  const TW = 56, TH = 28;    // iso tile, in viewBox units
+  const LADDER_ROWS = 7;
+
+  const r1 = (n) => Math.round(n * 10) / 10;
+  const num = (v) => (Number.isFinite(Number(v)) ? Number(v) : 0);
+  const sum = (a) => (Array.isArray(a) ? a.reduce((s, v) => s + num(v), 0) : 0);
+
+  function theme(mode) {
+    if (mode === 'light') {
+      return {
+        work: { t: '#f6f5f8', l: '#e6e5e9', r: '#d2d1d6', s: 'rgba(23,24,26,0.22)' },
+        plinth: { t: '#efeef1', l: '#e2e1e5', r: '#cfced3', s: 'rgba(23,24,26,0.22)' },
+        glassL: 'rgba(91,111,208,0.30)', glassR: 'rgba(91,111,208,0.42)', glassT: 'rgba(91,111,208,0.22)',
+        floor: 'rgba(23,24,26,0.10)', steel: 'rgba(23,24,26,0.62)', scaffold: 'rgba(23,24,26,0.40)', lit: 'rgba(226,150,90,0.55)',
+        slab: { t: '#d9d8dd', l: '#c4c3c9', r: '#b2b1b8', s: 'rgba(23,24,26,0.4)' },
+        ground: 'rgba(23,24,26,0.035)', groundLine: 'rgba(23,24,26,0.08)',
+        orb: '#d98a4e', orbGlow: 'rgba(217,138,78,0.30)', ideaLine: 'rgba(217,138,78,0.55)',
+        av: '#e4e3e7', avAgent: '#d3d8f2', avInk: '#17181a',
+      };
+    }
+    return {
+      work: { t: '#34343a', l: '#1c1c20', r: '#111114', s: 'rgba(255,255,255,0.12)' },
+      plinth: { t: '#27272c', l: '#141417', r: '#0b0b0d', s: 'rgba(255,255,255,0.08)' },
+      glassL: 'rgba(110,130,230,0.30)', glassR: 'rgba(110,130,230,0.20)', glassT: 'rgba(150,170,255,0.30)',
+      floor: 'rgba(255,255,255,0.06)', steel: 'rgba(255,255,255,0.70)', scaffold: 'rgba(255,255,255,0.40)', lit: 'rgba(255,200,150,0.55)',
+      slab: { t: '#5a5a62', l: '#3a3a40', r: '#2a2a2f', s: 'rgba(255,255,255,0.2)' },
+      ground: 'rgba(255,255,255,0.018)', groundLine: 'rgba(255,255,255,0.05)',
+      orb: '#ffe2c2', orbGlow: 'rgba(255,214,170,0.35)', ideaLine: 'rgba(255,214,170,0.45)',
+      av: '#2c2c32', avAgent: '#2b3157', avInk: '#ffffff',
+    };
+  }
+
+  // The summary as the drawing needs it: areas placed on the ground (tallest at
+  // the back), one shared height scale, people by id. A summary the server could
+  // not fill (no version being built, no areas) gives a model with no areas and
+  // the page renders nothing rather than an empty plate.
+  function cityModel(data) {
+    const d = data || {};
+    const weeks = Array.isArray(d.weeks) ? d.weeks : [];
+    const W = weeks.length;
+    const all = (Array.isArray(d.areas) ? d.areas : []).map((a) => {
+      const build = Array.from({ length: W }, (_, i) => num(a.build && a.build[i]));
+      const art = Array.from({ length: W }, (_, i) => num(a.art && a.art[i]));
+      const lead = Array.from({ length: W }, (_, i) => (a.lead && a.lead[i] != null ? String(a.lead[i]) : null));
+      return { id: String(a.goal_id), title: a.title == null ? 'A private area' : String(a.title), baseBuild: num(a.base_build), baseArt: num(a.base_art), build, art, lead };
+    });
+    all.forEach((a) => { a.total = a.baseBuild + a.baseArt + sum(a.build) + sum(a.art); });
+    all.sort((p, q) => q.total - p.total || p.id.localeCompare(q.id));
+    const areas = all.slice(0, MAX_AREAS);
+    const rows = Math.max(1, Math.ceil(areas.length / PER_ROW));
+    areas.forEach((a, n) => {
+      const row = Math.floor(n / PER_ROW), col = n % PER_ROW;
+      a.x = 0.8 + col * COL_GAP + (row % 2 ? 1.5 : 0);
+      a.y = 0.8 + row * ROW_GAP;
+    });
+    const tallest = Math.max(1, ...areas.map((a) => a.total));
+    const people = {};
+    (Array.isArray(d.people) ? d.people : []).forEach((p) => {
+      const row = (k) => Array.from({ length: W }, (_, i) => num(p[k] && p[k][i]));
+      people[String(p.id)] = { id: String(p.id), login: p.login || '', name: p.name || p.login || 'Builder', avatar: p.avatar_url || null, agent: !!p.agent, build: row('build'), art: row('art'), idea: row('idea'), gov: row('gov') };
+    });
+    const now = d.now || {};
+    const sites = {};
+    (Array.isArray(now.sites) ? now.sites : []).forEach((s) => { if (s && s.goal_id != null && s.builder_id != null) sites[String(s.goal_id)] = { builder: String(s.builder_id), agent: !!s.agent }; });
+    const waiting = {};
+    (Array.isArray(now.waiting) ? now.waiting : []).forEach((w) => { if (w && w.goal_id != null && num(w.count) > 0) waiting[String(w.goal_id)] = num(w.count); });
+    const ideas = (Array.isArray(d.ideas) ? d.ideas : []).map((x) => ({ id: String(x.id), week: num(x.week), by: x.by != null ? String(x.by) : null, title: x.title == null ? 'A private idea' : String(x.title), goal: x.goal_id != null ? String(x.goal_id) : null }));
+    return {
+      weeks, W, areas, rows, unplaced: all.length - areas.length,
+      px: TOWER_PX / tallest, people, sites, waiting, ideas,
+      width: 16.2, depth: rows * ROW_GAP - 0.6,
+    };
+  }
+
+  // What an area has built by the end of week i (the week's own ships included).
+  function doneAt(a, i) {
+    let build = a.baseBuild, art = a.baseArt;
+    for (let w = 0; w <= i && w < a.build.length; w++) { build += a.build[w]; art += a.art[w]; }
+    return { build, art };
+  }
+
+  // The sites worked in week i, goal → { builder, agent }: the latest week shows
+  // who is on each site now (open claims; an Autobongos runner working one makes it
+  // an agent's site); an earlier week shows its four busiest areas and the builder
+  // who shipped most there.
+  function sitesFor(m, i) {
+    if (i === m.W - 1 && Object.keys(m.sites).length) return Object.assign({}, m.sites);
+    const out = {};
+    m.areas.map((a) => ({ a, n: a.build[i] + a.art[i] }))
+      .filter((x) => x.n > 0 && x.a.lead[i])
+      .sort((p, q) => q.n - p.n || p.a.id.localeCompare(q.a.id))
+      .slice(0, 4)
+      .forEach((x) => { out[x.a.id] = { builder: x.a.lead[i], agent: false }; });
+    return out;
+  }
+
+  // The ladder for week i: builders by what they did that week, the top seven,
+  // and the viewer appended when they fall below (a phone leaderboard's "you").
+  function ladderFor(m, i, viewerId) {
+    const rows = Object.values(m.people).map((p) => {
+      const v = { art: p.art[i] || 0, build: p.build[i] || 0, idea: p.idea[i] || 0, gov: p.gov[i] || 0 };
+      return { id: p.id, name: p.name, avatar: p.avatar, agent: p.agent, me: viewerId != null && p.id === String(viewerId), v, total: v.art + v.build + v.idea + v.gov };
+    }).filter((r) => r.total > 0 || r.me)
+      .sort((p, q) => q.total - p.total || p.name.localeCompare(q.name));
+    const top = rows.slice(0, LADDER_ROWS);
+    const me = rows.find((r) => r.me);
+    if (me && !top.includes(me)) top.push(me);
+    return top;
+  }
+
+  // The scene's viewBox for a model: the ground and the tallest tower plus room
+  // for its crane and face, trimmed so no empty sky stands above it.
+  function viewBoxOf(m) {
+    const OY = TOWER_PX + 110, h = OY + (m.width + m.depth) * TH / 2 + 24;
+    return { w: 1000, h: Math.round(h), OX: 500 - (m.width - m.depth) * TW / 4, OY };
+  }
+
+  // The scene for week i as SHAPES, never markup: a tree of { tag, attrs, kids,
+  // text } that home-city.js turns into SVG nodes with createElementNS and
+  // setAttribute (city-draw.js's split exactly — "city.js only turns the lists into
+  // SVG nodes"). So no ledger string is ever parsed as markup: a title is an
+  // attribute value or a text node, which is also why this file needs no escaper.
+  function citySvg(m, i, opts) {
+    const o = opts || {};
+    const I = theme(o.mode);
+    const vb = viewBoxOf(m);
+    const latest = i === m.W - 1;
+    const P = (x, y, z) => [vb.OX + (x - y) * TW / 2, vb.OY + (x + y) * TH / 2 - (z || 0)];
+    const pts = (a) => 'M' + a.map((p) => r1(p[0]) + ' ' + r1(p[1])).join('L') + 'Z';
+    const node = (tag, attrs, kids, text) => ({ tag, attrs: attrs || {}, kids: kids || [], text: text == null ? null : String(text) });
+    const face = (a, fill, stroke) => node('path', { d: pts(a), fill, stroke: stroke || 'none', 'stroke-width': 1, 'stroke-linejoin': 'round', class: 'hc-face' });
+    const line = (a, b, s, w, dash) => node('line', Object.assign({ x1: r1(a[0]), y1: r1(a[1]), x2: r1(b[0]), y2: r1(b[1]), stroke: s, 'stroke-width': w || 1, 'stroke-linecap': 'round' }, dash ? { 'stroke-dasharray': dash } : {}));
+    const circle = (cx, cy, r, attrs) => node('circle', Object.assign({ cx: r1(cx), cy: r1(cy), r }, attrs));
+    const box = (x0, y0, x1, y1, z0, h, t) => {
+      const z1 = z0 + h;
+      return [
+        face([P(x0, y1, z1), P(x1, y1, z1), P(x1, y1, z0), P(x0, y1, z0)], t.l, t.s),
+        face([P(x1, y1, z1), P(x1, y0, z1), P(x1, y0, z0), P(x1, y1, z0)], t.r, t.s),
+        face([P(x0, y0, z1), P(x1, y0, z1), P(x1, y1, z1), P(x0, y1, z1)], t.t, t.s),
+      ];
+    };
+
+    const out = [
+      node('defs', {}, [node('radialGradient', { id: 'hc-orb' }, [node('stop', { offset: 0, 'stop-color': I.orbGlow }), node('stop', { offset: 1, 'stop-color': 'transparent' })])]),
+      face([P(0, 0), P(m.width, 0), P(m.width, m.depth), P(0, m.depth)], I.ground, I.groundLine),
+    ];
+
+    const sites = sitesFor(m, i);
+    const tops = {}, over = [];
+    m.areas.slice().sort((p, q) => (p.x + p.y) - (q.x + q.y)).forEach((a) => {
+      const x0 = a.x, y0 = a.y, x1 = x0 + FOOT, y1 = y0 + FOOT, base = 4;
+      const d = doneAt(a, i), built = Math.max(2, (d.build + d.art) * m.px), clad = d.art * m.px;
+      const site = sites[a.id], who = site ? m.people[site.builder] : null, agent = !!(site && (site.agent || (who && who.agent)));
+      const wait = latest ? (m.waiting[a.id] || 0) : 0;
+      const g = [];
+      g.push(...box(x0 - 0.12, y0 - 0.12, x1 + 0.12, y1 + 0.12, 0, base, I.plinth));
+      g.push(...box(x0, y0, x1, y1, base, built, I.work));
+      if (clad > 1) {
+        const c = base + Math.min(clad, built);
+        g.push(face([P(x0, y1, c), P(x1, y1, c), P(x1, y1, base), P(x0, y1, base)], I.glassL));
+        g.push(face([P(x1, y1, c), P(x1, y0, c), P(x1, y0, base), P(x1, y1, base)], I.glassR));
+        if (clad >= built - 0.5) g.push(face([P(x0, y0, base + built), P(x1, y0, base + built), P(x1, y1, base + built), P(x0, y1, base + built)], I.glassT));
+      }
+      for (let z = base + 16; z < base + built - 2; z += 16) g.push(line(P(x0, y1, z), P(x1, y1, z), I.floor), line(P(x1, y1, z), P(x1, y0, z), I.floor));
+      const top = base + built;
+      tops[a.id] = P((x0 + x1) / 2, (y0 + y1) / 2, top);
+      if (site) {
+        // the floor going up: lit, wrapped in scaffolding, a crane lifting the next slab
+        if (built > 14) {
+          const zt = top - 9, zb = top - 3;
+          g.push(face([P(x0 + 0.15, y1, zb), P(x1 - 0.15, y1, zb), P(x1 - 0.15, y1, zt), P(x0 + 0.15, y1, zt)], I.lit));
+          g.push(face([P(x1, y1 - 0.15, zb), P(x1, y0 + 0.15, zb), P(x1, y0 + 0.15, zt), P(x1, y1 - 0.15, zt)], I.lit));
+        }
+        const ov = 0.14, s0 = Math.max(base, top - 12), s1 = top + 22;
+        [x0 - ov, (x0 + x1) / 2, x1 + ov].forEach((x) => g.push(line(P(x, y1 + ov, s0), P(x, y1 + ov, s1), I.scaffold)));
+        [y1 + ov, (y0 + y1) / 2, y0 - ov].forEach((y) => g.push(line(P(x1 + ov, y, s0), P(x1 + ov, y, s1), I.scaffold)));
+        for (let zz = s0; zz <= s1 + 0.1; zz += 11) g.push(line(P(x0 - ov, y1 + ov, zz), P(x1 + ov, y1 + ov, zz), I.scaffold), line(P(x1 + ov, y1 + ov, zz), P(x1 + ov, y0 - ov, zz), I.scaffold));
+        const mx = x0 + 0.5, my = y0 + 0.5, ct = top + 56;
+        g.push(line(P(mx - 0.08, my, top), P(mx - 0.08, my, ct), I.steel, 1.3), line(P(mx + 0.08, my, top), P(mx + 0.08, my, ct), I.steel, 1.3));
+        for (let zc = top, k = 0; zc + 8 <= ct; zc += 8, k++) g.push(line(P(mx + (k % 2 ? 0.08 : -0.08), my, zc), P(mx + (k % 2 ? -0.08 : 0.08), my, zc + 8), I.steel, 0.8));
+        g.push(line(P(mx - 0.9, my, ct), P(mx + 2.2, my, ct), I.steel, 1.5));
+        g.push(line(P(mx, my, ct + 11), P(mx + 2.2, my, ct), I.steel, 0.9), line(P(mx, my, ct + 11), P(mx - 0.9, my, ct), I.steel, 0.9));
+        g.push(...box(mx - 0.95, my - 0.12, mx - 0.6, my + 0.12, ct - 8, 8, I.slab));
+        const hx = mx + 1.8;
+        g.push(line(P(hx, my, ct), P(hx, my, top - 6), I.steel, 1));
+        g.push(node('g', { class: 'hc-slab' }, box(hx - 0.3, my - 0.2, hx + 0.3, my + 0.2, top - 38, 3, I.slab)));
+        if (who) over.push({ k: 'face', p: P(mx + 0.9, my, ct + 30), who, agent, a });
+      }
+      if (wait) over.push({ k: 'dot', p: P((x0 + x1) / 2, (y0 + y1) / 2, top + (site ? 12 : 22)), a, n: wait });
+      const tip = `${d.build + d.art} shipped${d.art ? ` · ${d.art} by artists` : ''}${who ? ` · ${agent ? `${who.name}'s agent` : who.name} on site` : ''}`;
+      out.push(node('g', { class: 'hc-tower', 'data-tip': a.title, 'data-tip-body': tip }, g));
+    });
+
+    // the sky: the week's ideas bright, the week before dim; one that became work
+    // drops a line to the tower it went into
+    m.ideas.forEach((x) => {
+      const age = i - x.week;
+      if (age < 0 || age > 1) return;
+      const h = hash(x.id), bright = age === 0;
+      const cx = vb.OX + 40 + (h % 1000) / 1000 * 300, cy = 40 + (Math.floor(h / 1000) % 1000) / 1000 * 150;
+      const by = x.by && m.people[x.by] ? m.people[x.by].name : '';
+      const g = [];
+      if (bright && x.goal && tops[x.goal]) g.push(line([cx, cy], tops[x.goal], I.ideaLine, 1, '2 4'));
+      g.push(circle(cx, cy, bright ? 14 : 9, Object.assign({ fill: 'url(#hc-orb)' }, bright ? { class: 'hc-orb' } : {})));
+      g.push(circle(cx, cy, bright ? 4 : 2.6, Object.assign({ fill: I.orb }, bright ? {} : { opacity: 0.45 })));
+      g.push(circle(cx, cy, 12, { fill: 'transparent' }));
+      out.push(node('g', { class: 'hc-idea', 'data-tip': x.title, 'data-tip-body': by ? `idea · ${by}` : 'idea' }, g));
+    });
+
+    over.forEach((v, n) => {
+      if (v.k === 'face') { out.push(avatarNode(v.p, v.who, v.agent, v.a, I, n, node, line, circle)); return; }
+      const cx = v.p[0] - 30, cy = v.p[1];
+      out.push(node('g', { class: 'hc-wait', 'data-tip': v.a.title, 'data-tip-body': `${v.n} waiting on you` }, [
+        circle(cx, cy, 11, { fill: 'var(--accent)', stroke: 'var(--bg-card)', 'stroke-width': 2.5 }),
+        node('text', { x: r1(cx), y: r1(cy + 4), 'text-anchor': 'middle', class: 'hc-wait__n' }, [], v.n),
+      ]));
+    });
+    return { viewBox: `0 0 ${vb.w} ${vb.h}`, nodes: out };
+  }
+
+  // A face over a crane: the builder's avatar clipped to a circle over their
+  // initial (so a picture that fails to load still leaves a face), or the robot
+  // glyph when an agent is building the site.
+  function avatarNode(p, who, agent, a, I, n, node, line, circle) {
+    const x = p[0], y = p[1], id = `hc-av-${n}`;
+    const g = [line([x, y + 16], [x, y + 28], I.steel, 1), circle(x, y, 16, { fill: agent ? I.avAgent : I.av, stroke: 'var(--bg-card)', 'stroke-width': 3 })];
+    if (agent) {
+      g.push(node('rect', { x: r1(x - 7), y: r1(y - 5), width: 14, height: 11, rx: 3, fill: 'none', stroke: I.avInk, 'stroke-width': 1.5 }));
+      g.push(circle(x - 3, y + 0.5, 1.5, { fill: I.avInk }), circle(x + 3, y + 0.5, 1.5, { fill: I.avInk }));
+    } else {
+      g.push(node('text', { x: r1(x), y: r1(y + 5), 'text-anchor': 'middle', fill: I.avInk, class: 'hc-av__i' }, [], initial(who.name)));
+      if (who.avatar && /^https:\/\//.test(who.avatar)) {
+        g.push(node('clipPath', { id }, [circle(x, y, 14.5, {})]));
+        g.push(node('image', { href: who.avatar, x: r1(x - 14.5), y: r1(y - 14.5), width: 29, height: 29, 'clip-path': `url(#${id})`, preserveAspectRatio: 'xMidYMid slice' }));
+      }
+    }
+    return node('g', { class: 'hc-face-pin', 'data-tip': agent ? `${who.name}'s agent` : who.name, 'data-tip-body': a.title }, g);
+  }
+
+  function initial(name) { const s = String(name || '').trim(); return s ? s[0].toUpperCase() : '?'; }
+  // a stable spread for an idea's place in the sky (FNV-1a over its id)
+  function hash(s) { let h = 2166136261; for (const c of String(s)) { h ^= c.charCodeAt(0); h = Math.imul(h, 16777619); } return Math.abs(h); }
+
+  const api = { cityModel, doneAt, sitesFor, ladderFor, citySvg, viewBoxOf, theme, initial, LADDER_ROWS, MAX_AREAS };
+  if (typeof module === 'object' && module.exports) module.exports = api;
+  if (root) root.OTBHomeCityDraw = api;
+})(typeof window !== 'undefined' ? window : null);

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>