@bongos/core 1.21.6 → 1.21.8

package/tests/hall_street.mjs

@@ -0,0 +1,521 @@
+// tests/hall_street.mjs — THE STREET (task 1004525, goal 1000125).
+//
+// WHAT IT GUARDS. The page is the street view of the reference design
+// (docs/design/mocks/governor-city/Street.dc.html) built over the governor
+// docket (task 1004523), the open goals' task rollups and the viewer's
+// earnings. What can go wrong:
+//   * the drawing drifts from the prototype (a civic recipe, the road, a
+//     district's work, the spacing of the row, a pin, a door, a crate) —
+//     pinned by running the PROTOTYPE'S OWN Component class beside
+//     street-draw.js and comparing what they emit, in both modes;
+//   * the street out of the order work moves, a group bracket over the wrong
+//     buildings, a goal with no door, or more districts than the row can hold;
+//   * a pin, a reading's orange dot or a state line saying something the
+//     docket does not (invented data, or a reading that is off drawn as live);
+//   * a door or a reading opening anywhere but where its interior will live;
+//   * the card reaching innerHTML, or opening an off-site link from the docket;
+//   * the switch not using the hall's own preference; motion that escapes the
+//     Kill Switch.
+//
+// Run:  node tests/hall_street.mjs
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import path from 'node:path';
+import vm from 'node:vm';
+import { createRequire } from 'node:module';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const PUB = path.join(ROOT, 'modules/hall-ui/public');
+const require = createRequire(import.meta.url);
+const City = require(path.join(PUB, 'city-draw.js'));
+const S = require(path.join(PUB, 'street-draw.js'));
+const read = (f) => fs.readFileSync(path.join(PUB, f), 'utf8');
+const NOW = Date.parse('2026-10-02T12:00:00.000Z'); // a Friday
+
+// The prototype's Component class, run under a stub DCLogic: the reference
+// the port is held equal to.
+function prototype() {
+  const src = fs.readFileSync(path.join(ROOT, 'docs/design/mocks/governor-city/Street.dc.html'), 'utf8');
+  const script = src.split('data-dc-script')[1].split('>').slice(1).join('>').split('</script>')[0];
+  const DCLogic = class { constructor(p) { this.props = p || {}; this.state = {}; } setState() {} };
+  return new Function('DCLogic', `${script}\nreturn Component;`)(DCLogic);
+}
+const Proto = prototype();
+function protoStreet(mode, st = {}) {
+  const p = new Proto({ mode });
+  p.state = Object.assign(p.initial(), { view: 'street' }, st);
+  return { p, v: p.renderVals() };
+}
+
+// A docket in the route's own shape (modules/government/docket.js buildDocket).
+function matter(over = {}) {
+  return { id: 'blockers:1', source: 'blockers', building: 'planning', rule: 'majority', state: 'needs', title: 'A matter', short: 'a matter', where: 'Planning', opened_at: null, deadline: null, proposer: null, tally: null, href: null, ref: null, ...over };
+}
+const BUILDINGS = [['charter', 'how we decide'], ['rules', 'how we decide'], ['disputes', 'how we decide'], ['people', 'who and what'], ['planning', 'who and what'], ['automation', 'the work'], ['review', 'checks and going live'], ['release', 'checks and going live'], ['treasury', 'money']];
+const READINGS = [['flow', 'flow', 'review'], ['promises', 'promises', 'planning'], ['money', 'money', 'treasury'], ['people', 'people', 'people'], ['fairness', 'fairness', 'disputes'], ['rules', 'rules at work', 'rules']];
+function docket(matters = [], over = {}) {
+  const counts = { needs: 0, moving: 0, settled: 0 };
+  matters.forEach((m) => { counts[m.state] += 1; });
+  const buildings = BUILDINGS.map(([key, group]) => {
+    const here = matters.filter((m) => m.building === key);
+    const c = { needs: 0, moving: 0, settled: 0 };
+    here.forEach((m) => { c[m.state] += 1; });
+    return { key, name: key[0].toUpperCase() + key.slice(1), group, counts: c, matter_ids: here.map((m) => m.id) };
+  });
+  const readings = READINGS.map(([key, label, building]) => ({ key, label, building, status: 'off', value: null, figure: null, line: null, hot: false, reason: 'The module that holds this is not enabled here.' }));
+  const sources = [{ source: 'criteria_uat', building: 'review', label: 'criteria awaiting UAT', status: 'live', count: 0, reason: null }];
+  return { viewer: { id: '95' }, generated_at: '2026-10-02T00:00:00.000Z', counts, line: `${counts.needs} matters wait on you`, matters, buildings, sources, readings, vocabulary: {}, ...over };
+}
+const goal = (id, status = 'open', title = `Goal ${id}`) => ({ id: String(id), title, status });
+const rollup = (id, c) => ({ goal_id: String(id), done: 0, active: 0, ready: 0, blocked: 0, backlog: 0, cut: 0, ...c });
+const model = (over = {}) => S.streetModel({ docket: docket(), goals: [], rollups: [], mode: 'dark', now: NOW, ...over });
+
+// ── the drawing is the prototype's ───────────────────────────────────────────
+
+test('the street palette is the prototype theme() (less the iso half city-draw.js carries), both modes', () => {
+  for (const mode of ['dark', 'light']) {
+    const t = new Proto({ mode }).theme(mode);
+    delete t.iso;
+    assert.deepEqual(S.theme(mode), t, mode);
+    assert.deepEqual(City.isoTheme(mode), new Proto({ mode }).theme(mode).iso, 'and the iso half is still city-draw.js\'s');
+  }
+});
+
+test('the nine civic recipes draw exactly the prototype paths and roof heights, in every state, both modes', () => {
+  for (const mode of ['dark', 'light']) {
+    const p = new Proto({ mode });
+    const T = p.theme(mode);
+    for (const st of [{ evening: false, reviewHeld: true, fixes: false }, { evening: true, reviewHeld: false, fixes: true }]) {
+      for (const [kind, w] of [['charter', 84], ['rules', 96], ['disputes', 80], ['people', 80], ['planning', 80], ['automation', 80], ['review', 86], ['release', 92], ['treasury', 84]]) {
+        const a = []; const b = [];
+        const ra = p.civic(a, T, kind, 100, 556, w, st);
+        const rb = S.civic(b, S.theme(mode), kind, 100, 556, w, st);
+        assert.deepEqual(b, a, `${mode} ${kind} ${JSON.stringify(st)}`);
+        assert.equal(rb, ra, `${mode} ${kind} roof`);
+      }
+    }
+  }
+});
+
+test('every district kind the prototype draws is drawn the same way, lit and unlit', () => {
+  for (const mode of ['dark', 'light']) {
+    const p = new Proto({ mode });
+    for (const lit of [false, true]) {
+      for (const kind of ['tower', 'setback', 'shed', 'scaffold', 'trees']) {
+        const a = []; const b = [];
+        p.work(a, p.theme(mode), kind, 660, 556, 19, 84, lit);
+        S.work(b, S.theme(mode), kind, 660, 556, 19, 84, lit);
+        assert.deepEqual(b, a, `${mode} ${kind} lit=${lit}`);
+      }
+    }
+  }
+});
+
+test('a task not started is the prototype\'s workItem "ready" slab, and the more-goals lot its "backlog" stakes', () => {
+  const p = new Proto({ mode: 'dark' });
+  const T = p.theme('dark');
+  const a = []; const b = [];
+  p.workItem(a, T, 'engineer', 'ready', 660, 19, 0);
+  S.work(b, S.theme('dark'), 'slab', 660, 0, 19, 6, false);
+  assert.deepEqual(b, a, 'the slab, at a base of 0 as workItem draws it');
+  const c = []; const d = [];
+  p.workItem(c, T, 'engineer', 'backlog', 660, 40, 0);
+  S.work(d, S.theme('dark'), 'stakes', 660, 0, 40, 0, false);
+  assert.deepEqual(d, c, 'the stakes');
+});
+
+test('the road, its line and its lanes are the prototype\'s, and light adds its contact shadows', () => {
+  for (const mode of ['dark', 'light']) {
+    const { v } = protoStreet(mode);
+    const m = model({ mode, goals: [1, 2, 3, 4].map((i) => goal(i)) });
+    assert.deepEqual(m.flat.slice(0, 3), v.flat.slice(0, 3), mode);
+    assert.equal(m.flat.length, v.flat.length, `${mode}: one shadow per building or district, as the prototype`);
+  }
+});
+
+test('with four goals the row is the prototype\'s: the same x for every civic building and the same group brackets', () => {
+  const { v } = protoStreet('dark');
+  const m = model({ goals: [1, 2, 3, 4].map((i) => goal(i)) });
+  assert.equal(m.width, 1440);
+  const civicX = (cols) => cols.filter((c) => S.CIVIC_KEYS.includes(c.key)).map((c) => [c.key, c.x, c.w]);
+  assert.deepEqual(civicX(m.cols), civicX(v.cols));
+  assert.deepEqual(m.groups.map((g) => [g.name, g.x, g.w]), v.groups.map((g) => [g.name, g.x, g.w]));
+  // the districts stand where the prototype's four stood
+  const dx = m.cols.filter((c) => c.key.startsWith('d:')).map((c) => c.x + 4);
+  assert.deepEqual(dx, v.cols.filter((c) => ['onboarding', 'payments', 'hall', 'modules'].includes(c.key)).map((c) => c.x + 10));
+});
+
+test('the street is in the order work moves, under the five group names', () => {
+  const m = model({ goals: [goal(7), goal(8)] });
+  assert.deepEqual(m.cols.map((c) => c.key), ['charter', 'rules', 'disputes', 'people', 'planning', 'automation', 'd:7', 'd:8', 'review', 'release', 'treasury']);
+  assert.deepEqual(m.groups.map((g) => g.name), ['how we decide', 'who and what', 'the work', 'checks and going live', 'money']);
+  const xs = m.cols.map((c) => c.x);
+  assert.deepEqual(xs, [...xs].sort((a, b) => a - b), 'left to right');
+});
+
+test('a pin over a civic building stands where the prototype stands its pin, with its label', () => {
+  const { v } = protoStreet('dark');
+  const proto = (key) => v.pins.find((p) => p.key === key);
+  const m = model({ docket: docket([
+    matter({ id: 'board:1', building: 'charter', state: 'needs', rule: 'unanimous', short: 'review seat', deadline: '2026-10-06T12:00:00.000Z' }),
+    matter({ id: 'override_requests:2', building: 'release', state: 'settled', rule: 'decide', short: 'new sign-up' }),
+  ]), goals: [1, 2, 3, 4].map((i) => goal(i)) });
+  const charter = m.pins.find((p) => p.building === 'charter');
+  assert.deepEqual([charter.x, charter.y, charter.h], [proto('review').x, proto('review').y, proto('review').h]);
+  assert.equal(charter.label, 'review seat · tue', 'the short label, then the deadline in the prototype\'s words');
+  const release = m.pins.find((p) => p.building === 'release');
+  assert.deepEqual([release.x, release.y], [proto('release').x, proto('release').y], 'the release pin keeps its 4 px nudge');
+  const g = City.glyph('unanimous', 9, 9, 16);
+  assert.deepEqual([charter.gf, charter.gl], [g.fill, g.line], 'the glyph is the matter\'s rule');
+});
+
+test('every civic door is the prototype\'s door, and every door opens where its interior will live', () => {
+  const { v } = protoStreet('dark', { reviewHeld: true }); // this project's Review is held
+  const m = model({ goals: [1, 2, 3, 4].map((i) => goal(i)) });
+  for (const k of S.CIVIC_KEYS) {
+    const a = v.doors.find((d) => d.key === k); const b = m.doors.find((d) => d.key === k);
+    assert.deepEqual([b.x, b.y, b.w, b.h], [a.x, a.y, a.w, a.h], k);
+    assert.equal(b.href, `/builders/street#building=${k}`);
+  }
+  assert.deepEqual(m.doors.filter((d) => d.key.startsWith('d:')).map((d) => d.href), [1, 2, 3, 4].map((i) => `/builders/street#district=${i}`));
+});
+
+// ── what the street says comes from the docket, and only from it ───────────
+
+test('a pin per open matter at its building, in its state, up to three stacked, needs first as the docket ordered them', () => {
+  const ms = ['needs', 'needs', 'moving', 'settled'].map((state, i) => matter({ id: `blockers:${i}`, state }));
+  const m = model({ docket: docket(ms) });
+  const here = m.pins.filter((p) => p.building === 'planning');
+  assert.equal(here.length, S.MAX_PINS_PER_BUILDING);
+  assert.deepEqual(here.map((p) => p.state), ['needs', 'needs', 'moving']);
+  assert.equal(new Set(here.map((p) => p.y)).size, 3, 'stacked, one label above the other');
+  assert.ok(here.every((p) => p.x === here[0].x));
+  assert.equal(m.cols.find((c) => c.key === 'planning').state, '0 goals open', 'Planning says how many goals are open');
+});
+
+test('no docket: no pins, the readings say so, and nothing is invented', () => {
+  const m = S.streetModel({ docket: null, goals: [goal(1)], rollups: [], mode: 'dark', now: NOW });
+  assert.equal(m.pins.length, 0);
+  assert.equal(m.crates.length, 0);
+  assert.ok(m.signs.every((s) => s.figure === '—' && !s.hot && s.line === S.FALLBACK_LINE));
+  assert.deepEqual([m.hud.needs, m.hud.moving, m.hud.share], ['—', '—', '—']);
+  assert.ok(m.cols.filter((c) => S.CIVIC_KEYS.includes(c.key)).every((c) => c.state === ''));
+  assert.equal(m.evening, false, 'an unread docket is not an empty one');
+  assert.equal(m.reviewHeld, true, 'nor does it empty Review');
+});
+
+test('a reading that is off is drawn as off: a dash and its reason, never a figure', () => {
+  const d = docket();
+  d.readings[3] = { ...d.readings[3], status: 'live', figure: '12 builders', line: 'the council casts 31 votes each a month', value: 12 };
+  d.readings[1] = { ...d.readings[1], status: 'not_yours', reason: null };
+  const m = model({ docket: d });
+  const by = Object.fromEntries(m.signs.map((s) => [s.key, s]));
+  assert.deepEqual(m.signs.map((s) => [s.key, s.label]), READINGS.map(([k, l]) => [k, l]));
+  assert.deepEqual([by.people.figure, by.people.line], ['12 builders', 'the council casts 31 votes each a month']);
+  assert.deepEqual([by.money.figure, by.money.line], ['—', 'The module that holds this is not enabled here.']);
+  assert.equal(by.promises.line, 'not yours to read here');
+  assert.equal(m.cols.find((c) => c.key === 'people').state, '12 builders', 'a live reading is its building\'s state line');
+  assert.deepEqual(m.signs.map((s) => s.href), READINGS.map(([, , b]) => `/builders/street#building=${b}`), 'each reading opens its building');
+});
+
+test('a reading\'s dot is orange when the reading is hot or its building has a matter that needs you', () => {
+  const d = docket([matter({ id: 'access_requests:1', building: 'people', state: 'needs' }), matter({ id: 'core_update:core', building: 'treasury', state: 'moving' })]);
+  d.readings[4] = { ...d.readings[4], status: 'live', figure: '1 open', line: 'oldest 2 days', hot: true };
+  const by = Object.fromEntries(model({ docket: d }).signs.map((s) => [s.key, s.hot]));
+  assert.deepEqual(by, { flow: false, promises: false, money: false, people: true, fairness: true, rules: false });
+});
+
+test('state lines count a building\'s matters when no reading speaks for it', () => {
+  const d = docket([matter({ id: 'a:1', building: 'release', state: 'moving' }), matter({ id: 'a:2', building: 'release', state: 'moving' }), matter({ id: 'a:3', building: 'charter', state: 'needs' })]);
+  const st = Object.fromEntries(model({ docket: d }).cols.map((c) => [c.key, c.state]));
+  assert.equal(st.release, '2 moving');
+  assert.equal(st.charter, '1 needs you');
+  assert.equal(st.automation, 'nothing open');
+  assert.equal(st.review, 'nothing waiting');
+});
+
+test('work waiting at Review is crates outside its door and the prototype\'s count pin, not a pin each', () => {
+  const { v } = protoStreet('dark');
+  const ms = [1, 2, 3, 4].map((i) => matter({ id: `criteria_uat:${i}`, source: 'criteria_uat', building: 'review', state: 'needs', title: `Criterion ${i}` }));
+  const m = model({ docket: docket(ms), goals: [1, 2, 3, 4].map((i) => goal(i)) });
+  assert.deepEqual(m.crates.map((c) => [c.x, c.y]), v.crates.map((c) => [c.x, c.y]), 'three crates where the prototype stands them');
+  const q = m.pins.filter((p) => p.building === 'review');
+  assert.equal(q.length, 1);
+  const pq = v.pins.find((p) => p.key === 'queue');
+  assert.deepEqual([q[0].isCount, q[0].count, q[0].label, q[0].x, q[0].y, q[0].h], [true, '4', 'waiting for a tester', pq.x, pq.y, pq.h]);
+  assert.equal(m.cols.find((c) => c.key === 'review').state, '4 waiting');
+  const card = S.cardFor(docket(ms), 'queue', NOW);
+  assert.deepEqual(card.lines, ['Criterion 1', 'Criterion 2', 'Criterion 3', 'Criterion 4']);
+});
+
+test('Review is the empty seat only when no source that stands in it can be read', () => {
+  const off = docket([], { sources: [{ source: 'criteria_uat', building: 'review', status: 'off', count: 0 }] });
+  const m = model({ docket: off });
+  assert.equal(m.reviewHeld, false);
+  assert.equal(m.cols.find((c) => c.key === 'review').state, 'empty seat');
+  assert.equal(m.cols.find((c) => c.key === 'review').strong, true, 'the empty seat\'s name is in ink, as the prototype');
+  const rv = m.cols.find((c) => c.key === 'review');
+  const ghost = []; S.civic(ghost, S.theme('dark'), 'review', rv.x + 10, S.G, 86, { reviewHeld: false });
+  assert.deepEqual(m.blds.find((b) => b.key === 'review').polys, ghost, 'drawn as the prototype\'s vacant lot');
+  assert.equal(model({ docket: docket() }).reviewHeld, true, 'a live source holds the seat');
+  assert.equal(model({ docket: docket([], { sources: [{ source: 'criteria_uat', building: 'review', status: 'not_yours' }] }) }).reviewHeld, true, 'one the viewer cannot see still holds it');
+});
+
+test('Rules lights its band when a standing rule is at work, on the street and in the city', () => {
+  const d = docket();
+  d.readings[5] = { ...d.readings[5], status: 'live', value: 1, figure: '1 rule', line: 'settled 3 things this month' };
+  assert.equal(City.rulesAtWork(d), true);
+  assert.equal(City.rulesAtWork(docket()), false);
+  assert.equal(City.rulesAtWork(null), false);
+  const band = (m) => m.blds.find((b) => b.key === 'rules').polys.length;
+  assert.equal(band(model({ docket: d })), band(model()) + 1, 'the street draws the lit band');
+  const cityRules = (dk) => City.cityModel({ docket: dk, mode: 'dark' }).blds.find((b) => b.key === 'rules').polys;
+  assert.notDeepEqual(cityRules(d), cityRules(docket()), 'and so does the city');
+});
+
+test('the windows light (evening) only when the docket was read and nothing needs you', () => {
+  assert.equal(model({ docket: docket([matter({ state: 'moving' })]) }).evening, true);
+  assert.equal(model({ docket: docket([matter({ state: 'needs' })]) }).evening, false);
+  const m = model({ docket: docket([matter({ state: 'moving' }), matter({ id: 'x:2', state: 'settled' })]), earnings: { days: [{ day: '2026-10-01', credits: 24 }] } });
+  assert.equal(m.hint, '', 'the hint gives way to the evening');
+  assert.equal(m.eveningLine, 'this month · 1 moving · 1 settled · $24 to your share');
+  assert.equal(model({ docket: docket([matter()]) }).hint, S.HINT);
+});
+
+// ── districts: one door per open goal ───────────────────────────────────────
+
+test('one district per OPEN goal; achieved and archived goals build nothing', () => {
+  const m = model({ goals: [goal(1), goal(2, 'achieved'), goal(3), goal(4, 'archived')] });
+  assert.deepEqual(m.cols.filter((c) => c.key.startsWith('d:')).map((c) => c.key), ['d:1', 'd:3']);
+});
+
+test('past eight open goals the first seven stand and the eighth plot is the rest, a door to the goals page', () => {
+  const goals = Array.from({ length: 20 }, (_, i) => goal(i + 1));
+  const m = model({ goals });
+  const ds = m.cols.filter((c) => c.key.startsWith('d:'));
+  assert.equal(ds.length, S.MAX_DISTRICTS);
+  assert.deepEqual(ds.map((c) => c.key).slice(0, 7), goals.slice(0, 7).map((g) => `d:${g.id}`));
+  assert.equal(ds[7].name, '13 more goals');
+  assert.equal(m.doors.find((d) => d.key === 'd:more').href, S.GOALS_HREF);
+  assert.ok(m.width < 1600, 'the row stays near the artboard');
+  const xs = m.cols.map((c) => c.x);
+  for (let i = 1; i < m.cols.length; i++) assert.ok(m.cols[i].x >= m.cols[i - 1].x + (m.cols[i - 1].key.startsWith('d:') ? m.cols[i - 1].w : 0) - 1, `no two names overlap at ${m.cols[i].key}`);
+  assert.equal(xs.length, m.doors.length);
+});
+
+test('a goal\'s work: built, being built and not started, in proportion; nothing yet is trees', () => {
+  const kinds = (r) => S.districtItems('7', 90, r).map((i) => i.kind);
+  assert.deepEqual(kinds(rollup(7, {})), ['trees']);
+  const k = kinds(rollup(7, { done: 6, active: 1, ready: 1 }));
+  assert.equal(k.length, 4, 'a 90 px plot holds the prototype\'s four');
+  assert.ok(k.filter((x) => ['tower', 'setback', 'shed'].includes(x)).length >= 2);
+  assert.equal(k.filter((x) => x === 'scaffold').length, 1);
+  assert.equal(k.filter((x) => x === 'slab').length, 1);
+  assert.deepEqual(kinds(rollup(7, { backlog: 9 })), ['slab', 'slab', 'slab', 'slab']);
+  assert.equal(S.districtLine(rollup(7, { done: 4, active: 1 })), '4 built', 'the prototype\'s line');
+  assert.equal(S.districtLine(rollup(7, { active: 2 })), '2 being built');
+  assert.equal(S.districtLine(rollup(7, {})), 'no work yet');
+  const m = model({ goals: [goal(7)], rollups: [rollup(7, { done: 6, active: 1, ready: 1 })] });
+  assert.ok(m.blds.filter((b) => b.key.startsWith('d:7:')).length === 4, 'all four stand on the plot');
+});
+
+test('the drawing is deterministic: the same feeds give the same street', () => {
+  const input = { docket: docket([matter()]), goals: [goal(1), goal(2)], rollups: [rollup(1, { done: 5 }), rollup(2, { active: 2 })], mode: 'light', now: NOW };
+  assert.deepEqual(S.streetModel(input), S.streetModel(input));
+});
+
+// ── the small words ─────────────────────────────────────────────────────────
+
+test('deadlines read the prototype\'s way: today, a weekday inside the week, else a date', () => {
+  assert.equal(S.whenWord('2026-10-02T20:00:00.000Z', NOW), 'today');
+  assert.equal(S.whenWord('2026-10-04T09:00:00.000Z', NOW), 'sun');
+  assert.equal(S.whenWord('2026-10-20T09:00:00.000Z', NOW), 'oct 20');
+  assert.equal(S.whenWord(null, NOW), '');
+  assert.equal(S.whenWord('nonsense', NOW), '');
+});
+
+test('your share this month sums only this month\'s earnings, in dollars at the peg', () => {
+  const e = { days: [{ day: '2026-09-29', credits: 120 }, { day: '2026-10-01', credits: 40 }, { day: '2026-10-02', credits: 1200 }] };
+  assert.equal(S.monthShare(e, NOW), 1240);
+  assert.equal(S.money(1240), '$1,240');
+  assert.equal(S.monthShare(null, NOW), null);
+  assert.equal(S.money(null), '—');
+  assert.equal(model({ earnings: e }).hud.share, '$1,240');
+});
+
+test('the address names a building or a district, and nothing else', () => {
+  assert.deepEqual(S.parseHash('#building=charter'), { kind: 'building', key: 'charter' });
+  assert.deepEqual(S.parseHash('#district=1000125'), { kind: 'district', key: '1000125' });
+  assert.equal(S.parseHash('#building=nowhere'), null);
+  assert.equal(S.parseHash('#/task/5'), null);
+  assert.equal(S.parseHash('#district=%E0%A4%A'), null, 'a malformed escape is no address');
+  const m = model({ here: { kind: 'building', key: 'disputes' } });
+  assert.deepEqual(m.doors.filter((d) => d.here).map((d) => d.key), ['disputes']);
+  assert.deepEqual(m.signs.filter((s) => s.here).map((s) => s.key), ['fairness']);
+});
+
+test('the short card: where, when, title, who raised it, the tally and its state; only an on-site link', () => {
+  const d = docket([matter({ id: 'board:9', building: 'charter', where: 'Charter · amendment', state: 'needs', title: 'Give Review a seat', deadline: '2026-10-03T09:00:00.000Z', proposer: { id: '4', login: 'ana', name: 'Ana' }, tally: { for: 4, against: 1, open: 0, needs: 'needs everyone who votes' }, href: '/builders/board-room#s9' }), matter({ id: 'x:1', href: 'https://evil.example/' })]);
+  const c = S.cardFor(d, 'board:9', NOW);
+  assert.deepEqual([c.where, c.when, c.title, c.proposer, c.tally, c.href], ['charter · amendment', 'sat', 'Give Review a seat', 'raised by Ana', '4 for · 1 against · needs everyone who votes', '/builders/board-room#s9']);
+  assert.equal(c.result, 'This waits on you.');
+  assert.equal(S.cardFor(d, 'x:1', NOW).href, null, 'an off-site href is never offered');
+  assert.equal(S.cardFor(d, 'nope', NOW), null);
+});
+
+// ── the page ────────────────────────────────────────────────────────────────
+
+test('the page holds the prototype\'s header, the street, the readings and the card; nothing else', () => {
+  const html = read('street.html').replace(/<!--[\s\S]*?-->/g, '');
+  assert.equal((html.match(/<header\b/g) || []).length, 1);
+  assert.equal((html.match(/<main\b/g) || []).length, 1);
+  assert.equal((html.match(/<h1\b/g) || []).length, 1);
+  assert.match(html, /<a class="street-mark" id="streetHome" href="\/builders\/city"[^>]*>\{\{productName\}\}</);
+  for (const id of ['hudNeeds', 'hudMoving', 'hudShare', 'streetMode', 'streetSigns', 'streetPins', 'streetDoors', 'streetCard']) assert.match(html, new RegExp(`id="${id}"`), id);
+  assert.doesNotMatch(html, /app-sidebar|shell\.js/, 'no hall chrome, as the city');
+  const scripts = [...html.matchAll(/<script src="\/builders\/([a-z-]+)\.js/g)].map((m) => m[1]);
+  assert.deepEqual(scripts, ['city-draw', 'street-draw', 'street'], 'the shared kit loads first');
+  assert.equal(City.STREET_HREF, '/builders/street', 'the city\'s door is this page');
+});
+
+test('motion is CSS only and dies under reduced motion; no page :root; no innerHTML', () => {
+  const css = read('street.css').replace(/\/\*[\s\S]*?\*\//g, '');
+  assert.doesNotMatch(css, /:root/);
+  assert.match(css, /@media \(prefers-reduced-motion: reduce\) \{[^}]*animation: none !important; transition: none !important;/);
+  for (const k of ['street-ring', 'street-enter']) assert.match(css, new RegExp(`@keyframes ${k} `));
+  assert.doesNotMatch(css, /#fb9569/i, 'the accent is the token, never a literal');
+  const js = (read('street.js') + read('street-draw.js')).replace(/^\s*\/\/.*$/gm, '');
+  assert.doesNotMatch(js, /innerHTML|insertAdjacentHTML|requestAnimationFrame|setInterval/);
+});
+
+test('the two dark blocks are byte-identical twins', () => {
+  const css = read('street.css');
+  const a = css.match(/html\[data-theme="dark"\] body\[data-page="street"\] \{([^}]*)\}/)[1];
+  const b = css.match(/html:not\(\[data-theme\]\) body\[data-page="street"\] \{([^}]*)\}/)[1];
+  assert.equal(a.replace(/\s+/g, ' ').trim(), b.replace(/\s+/g, ' ').trim());
+});
+
+// A small DOM, enough for street.js: ids, elements, SVG elements, attributes.
+function fakeDom() {
+  const byId = new Map();
+  const mk = (tag) => {
+    const el = {
+      tagName: tag, attrs: {}, children: [], style: { setProperty(k, v) { this[k] = v; } }, className: '', listeners: {}, _text: '', hidden: false,
+      clientWidth: 1440, clientHeight: 708, offsetLeft: 0, scrollLeft: 0, parentNode: null,
+      get firstChild() { return this.children[0] || null; },
+      setAttribute(k, v) { this.attrs[k] = String(v); if (k === 'id') byId.set(String(v), this); },
+      getAttribute(k) { return k in this.attrs ? this.attrs[k] : null; },
+      appendChild(c) { this.children.push(c); c.parentNode = this; return c; },
+      removeChild(c) { this.children = this.children.filter((x) => x !== c); return c; },
+      addEventListener(t, fn) { (this.listeners[t] = this.listeners[t] || []).push(fn); },
+      fire(t, e = {}) { (this.listeners[t] || []).forEach((fn) => fn({ type: t, preventDefault() { e.prevented = true; }, ...e })); },
+      focus() { focused.el = this; },
+      set textContent(v) { this._text = String(v); this.children = []; },
+      get textContent() { return this._text; },
+      get innerHTML() { throw new Error('street.js must not read innerHTML'); },
+      set innerHTML(v) { throw new Error('street.js must not write innerHTML'); },
+    };
+    return el;
+  };
+  const focused = { el: null };
+  const html = mk('html');
+  const ids = ['streetMode', 'streetModeIcon', 'streetModeWord', 'streetWindow', 'streetSizer', 'streetBoard', 'streetSvg', 'streetFlat', 'streetBlds', 'streetCrates', 'streetCols', 'streetGroups', 'streetDoors', 'streetPins', 'streetSigns', 'streetHint', 'streetEvening', 'streetEveningLine', 'hudNeeds', 'hudMoving', 'hudShare', 'hudDot', 'streetHome', 'streetCard', 'streetCardWhere', 'streetCardWhen', 'streetCardTitle', 'streetCardMeta', 'streetCardLines', 'streetCardResult', 'streetCardOpen', 'streetCardClose'];
+  for (const id of ids) mk('x').setAttribute('id', id);
+  const document = { documentElement: html, getElementById: (id) => byId.get(id) || null, createElement: (t) => mk(t), createElementNS: (_ns, t) => mk(t) };
+  return { document, byId, html, focused };
+}
+
+async function bootPage({ feeds = {}, stored = null, osDark = true, hash = '' } = {}) {
+  const { document, byId, html, focused } = fakeDom();
+  const store = new Map(stored ? [['hall-theme', stored]] : []);
+  const calls = [];
+  const listeners = {};
+  const window = {
+    innerWidth: 1440, innerHeight: 900, location: { hash },
+    localStorage: { getItem: (k) => (store.has(k) ? store.get(k) : null), setItem: (k, v) => store.set(k, String(v)) },
+    matchMedia: () => ({ matches: osDark, addEventListener() {} }),
+    addEventListener(t, fn) { (listeners[t] = listeners[t] || []).push(fn); },
+  };
+  const fetch = (url) => {
+    calls.push(url);
+    const body = feeds[url];
+    return Promise.resolve(body === undefined ? { ok: false, json: async () => ({}) } : { ok: true, json: async () => body });
+  };
+  const ctx = vm.createContext({ window, document, fetch, Promise, Math, String, Number, Array, Object, JSON, Date, console, encodeURIComponent, decodeURIComponent, isNaN });
+  ctx.globalThis = ctx;
+  // each file hangs its api on `window`, as the browser loads them
+  vm.runInContext(read('city-draw.js'), ctx);
+  vm.runInContext(read('street-draw.js'), ctx);
+  vm.runInContext(read('street.js'), ctx);
+  await window.GovStreetPage.ready;
+  const key = (t, e) => (listeners[t] || []).forEach((fn) => fn(e));
+  return { window, byId, html, store, calls, key, focused };
+}
+
+const FEEDS = (ms, goals = [goal(1)], rollups = [rollup(1, { done: 2, active: 1 })]) => ({
+  '/api/bongos/government/docket': docket(ms),
+  '/api/bongos/goals': { goals },
+  '/api/bongos/goals/rollups': { rollups },
+  '/api/bongos/builders/95/earnings': { builder_id: 95, days: [{ day: new Date().toISOString().slice(0, 10), kind: 'task', credits: 24 }], totals: {}, total: 24 },
+});
+
+test('the page reads the four feeds and draws the docket\'s pins, the readings and the header', async () => {
+  const ms = [matter({ id: 'board:1', building: 'charter', state: 'needs' }), matter({ id: 'blockers:2', state: 'moving' })];
+  const p = await bootPage({ feeds: FEEDS(ms) });
+  assert.deepEqual([...p.calls].sort(), ['/api/bongos/builders/95/earnings', '/api/bongos/goals', '/api/bongos/goals/rollups', '/api/bongos/government/docket']);
+  const pins = p.byId.get('streetPins').children;
+  assert.deepEqual(pins.map((s) => s.className).sort(), ['street-pin street-pin--moving', 'street-pin street-pin--needs']);
+  assert.equal(pins.find((s) => s.attrs['data-matter'] === 'board:1').children[1].children[0].className, 'street-pin__ring', 'a needs pin pulses');
+  assert.equal(p.byId.get('streetSigns').children.length, 6);
+  assert.ok(p.byId.get('streetSigns').children.every((a) => /^\/builders\/street#building=/.test(a.attrs.href)));
+  assert.equal(p.byId.get('hudNeeds').textContent, '1');
+  assert.equal(p.byId.get('hudMoving').textContent, '1');
+  assert.equal(p.byId.get('hudShare').textContent, '$24');
+  assert.equal(p.byId.get('hudDot').className, 'street-hud__dot street-hud__dot--hot');
+  assert.equal(p.byId.get('streetDoors').children.length, 10, 'nine buildings and one district, each a door');
+  assert.equal(p.byId.get('streetHome').attrs.href, '/builders/city');
+});
+
+test('a pin opens its short card, Escape closes it and focus goes back to the pin', async () => {
+  const p = await bootPage({ feeds: FEEDS([matter({ id: 'board:1', building: 'charter', title: '<img src=x onerror=alert(1)>', href: '/builders/board-room' })]) });
+  const pin = p.byId.get('streetPins').children[0];
+  pin.fire('click');
+  const card = p.byId.get('streetCard');
+  assert.equal(card.hidden, false);
+  assert.equal(p.byId.get('streetCardTitle').textContent, '<img src=x onerror=alert(1)>', 'docket text lands as text');
+  assert.equal(p.byId.get('streetCardOpen').attrs.href, '/builders/board-room');
+  assert.equal(p.focused.el, p.byId.get('streetCardClose'));
+  assert.equal(p.byId.get('streetPins').children[0].attrs['aria-expanded'], 'true');
+  const e = { key: 'Escape', prevented: false, preventDefault() { this.prevented = true; } };
+  p.key('keydown', e);
+  assert.equal(card.hidden, true);
+  assert.equal(e.prevented, true, 'the press is used, so nothing else answers it');
+  assert.equal(p.focused.el.attrs['data-matter'], 'board:1');
+});
+
+test('the switch reads and writes the hall\'s own theme preference and redraws the street', async () => {
+  const p = await bootPage({ feeds: FEEDS([]), stored: 'light', osDark: true });
+  assert.equal(p.html.attrs['data-theme'], 'light', 'the stored hall choice beats the OS');
+  assert.equal(p.byId.get('streetMode').attrs['aria-label'], 'Switch to dark mode');
+  assert.equal(p.byId.get('streetModeWord').textContent, 'dark');
+  const before = JSON.stringify(p.byId.get('streetBlds').children[0].children[0].attrs);
+  p.byId.get('streetMode').fire('click');
+  assert.equal(p.store.get('hall-theme'), 'dark');
+  assert.equal(p.html.attrs['data-theme'], 'dark');
+  assert.notEqual(JSON.stringify(p.byId.get('streetBlds').children[0].children[0].attrs), before, 'the street redraws in the new mode');
+});
+
+test('arriving through a door marks that building, and a failed docket says so', async () => {
+  const p = await bootPage({ feeds: FEEDS([]), hash: '#building=treasury' });
+  const here = p.byId.get('streetDoors').children.filter((a) => a.attrs['aria-current'] === 'location');
+  assert.deepEqual(here.map((a) => a.attrs['data-door']), ['treasury']);
+  const feeds = FEEDS([]);
+  delete feeds['/api/bongos/government/docket'];
+  const q = await bootPage({ feeds });
+  assert.equal(q.byId.get('streetPins').children.length, 0);
+  assert.ok(!q.calls.some((c) => /earnings/.test(c)), 'no viewer, no earnings read');
+  assert.equal(q.byId.get('hudShare').textContent, '—');
+});

package/tests/project_invite_ui.mjs

@@ -474,11 +474,69 @@ test('the two mounts keep their own lines — an invite on one is not drawn on t
 // in" and "is this their project" — are answered by the caller, which hands over
 // a slug or nothing. So the pins are on the calls.
 
-test('the wizard opens the step only for a signed-in owner of a project that already exists', () => {
-  assert.match(SCRIPT, /setInviteSlug\('wizInvite', \(me && created && created\.id && created\.slug\) \? created\.slug : ''\);/,
-    'the created record IS the proof: no /me, no created id, no slug ⇒ no step');
-  assert.ok(SCRIPT.indexOf("setInviteSlug('wizInvite'") > SCRIPT.indexOf('function renderDone()'),
-    'and it is the done panel that opens it — the panel that only exists after Create');
+// The wizard's invite step waits for the hall (task 1004503): a second account cannot join a
+// project whose hall is not up, so the box opens only on the done panel's verified Live. The
+// gate is RUN here: demoTeam, paintInviteGate and paintDemoTeam sliced out of the script.
+const GATE_START = '    function demoTeam() {';
+function gateSlice() {
+  const a = SCRIPT.indexOf(GATE_START);
+  const b = SCRIPT.indexOf('\n    }\n', SCRIPT.indexOf('    function paintDemoTeam() {'));
+  return a > -1 && b > a ? SCRIPT.slice(a, b + 6) : '';
+}
+function bootGate({ me = { github_login: 'kestrel' }, created = { id: 7, slug: 'moonbase' }, demo = null } = {}) {
+  const els = {};
+  const $ = (id) => (els[id] = els[id] || { id, hidden: false, textContent: '', innerHTML: '', value: '' });
+  const calls = { slug: [], sugg: [] };
+  const sandbox = {
+    $, me, state: { demo },
+    createdRecord: () => created,
+    setInviteSlug: (id, slug) => calls.slug.push([id, slug]),
+    loadInviteSuggestions: (id, iid) => calls.sugg.push([id, iid]),
+    projectPageLink: (label) => '<a href="?view=manage">' + label + '</a>',
+  };
+  vm.createContext(sandbox);
+  vm.runInContext(gateSlice(), sandbox);
+  return { run: (c) => vm.runInContext(c, sandbox), $, calls };
+}
+
+test('the wizard opens the invite step only once the hall is up, and only for a signed-in owner of a project that exists (tasks 1002346, 1004503)', () => {
+  assert.ok(gateSlice().includes('function paintInviteGate(live)'), 'the gate slice is found');
+  assert.match(SCRIPT, /function renderDone\(\) \{[\s\S]*?paintInviteGate\(false\);/, 'the done panel paints the gate shut');
+  assert.match(SCRIPT, /if \(inst\.last_verified_up\) \{[\s\S]{0,400}paintInviteGate\(true\);/, 'and opens it only on the verified Live');
+  assert.equal((SCRIPT.match(/setInviteSlug\('wizInvite'/g) || []).length, 2, 'the gate is the only caller: shut, or open on Live');
+
+  const before = bootGate();
+  before.run('paintInviteGate(false)');
+  assert.deepEqual(before.calls.slug, [['wizInvite', '']], 'before the hall is up: no invite control');
+  assert.deepEqual(before.calls.sugg, [], 'and no suggestions asked for');
+  assert.equal(before.$('wizInviteLater').textContent, 'You can invite builders once its hall is up.', 'one plain line says when');
+
+  const live = bootGate();
+  live.run('paintInviteGate(true)');
+  live.run('paintInviteGate(true)');
+  assert.deepEqual(live.calls.slug, [['wizInvite', 'moonbase']], 'on Live: the box opens on the created project, once');
+  assert.deepEqual(live.calls.sugg, [['wizInvite', 7]], 'and the suggestions are asked for once, not on every tick');
+  assert.match(live.$('wizInviteLater').innerHTML, /any time from <a href="\?view=manage">the project’s own page<\/a>/);
+
+  for (const [label, opts] of [['signed out', { me: null }], ['no created id', { created: { slug: 'moonbase' } }], ['no slug', { created: { id: 7 } }]]) {
+    const g = bootGate(opts);
+    g.run('paintInviteGate(true)');
+    assert.deepEqual(g.calls.slug, [['wizInvite', '']], label + ': the created record IS the proof — no step');
+  }
+});
+
+test('a demo\'s teammates are kept until the hall is up, then offered in the box (task 1004503)', () => {
+  const before = bootGate({ demo: { invites: ['ava', 'jo'] } });
+  before.run('paintInviteGate(false)');
+  assert.equal(before.$('wizInviteLater').textContent, 'You can invite @ava, @jo once its hall is up.', 'named while they wait');
+  assert.equal(before.$('wizDemoTeam').hidden, true, 'no invite prompt before the hall is up');
+  // a reload before the hall is up: the draft is gone, the created record still carries the names
+  const reloaded = bootGate({ created: { id: 7, slug: 'moonbase', demo_invites: ['ava'] } });
+  reloaded.run('paintInviteGate(true)');
+  assert.equal(reloaded.$('wizDemoTeam').hidden, false, 'on Live the teammates line shows');
+  assert.equal(reloaded.$('wizDemoTeam').textContent, 'Your demo teammates: @ava. Invite each one here.');
+  assert.equal(reloaded.$('wizInviteWho').value, 'ava', 'and the first is ready in the box');
+  assert.match(SCRIPT, /demo_invites: state\.demo && state\.demo\.invites && state\.demo\.invites\.length \? state\.demo\.invites\.slice\(\) : undefined/, 'the created record carries them');
 });
 
 test('the project page opens the step from its own manage read, which the API already own-scopes', () => {
@@ -643,8 +701,8 @@ test('a suggestion never renders a github_id, and its name goes through the esca
 test('the suggestion surface is mounted on BOTH the wizard and the project page', () => {
   assert.match(HUB, /<ul class="suggList" id="wizInviteSugg"><\/ul>/, 'the wizard mount');
   assert.match(HUB, /<ul class="suggList" id="mInviteSugg"><\/ul>/, 'and the project page mount');
-  assert.match(SCRIPT, /loadInviteSuggestions\('wizInvite', \(me && created && created\.slug\) \? created\.id : ''\)/,
-    'the wizard asks keyed on the SAME created record the slug comes from (ADR 0249 §1)');
+  assert.match(SCRIPT, /setInviteSlug\('wizInvite', created\.slug\);\n\s*paintDemoTeam\(\);\n\s*loadInviteSuggestions\('wizInvite', created\.id\);/,
+    'the wizard asks keyed on the SAME created record the slug comes from (ADR 0249 §1), and only once the gate opens (task 1004503)');
   assert.match(SCRIPT, /loadInviteSuggestions\('mInvite', inst\.slug \? inst\.id : ''\)/,
     'and the manage page asks with the id whose read already proved ownership');
   assert.match(COSMOS, /\.suggList\{/, 'styled in cosmos.css like its sibling list');