@bongos/core 1.21.43 → 1.21.44

package/tests/hall_street.mjs

@@ -32,6 +32,7 @@ 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'));
+require(path.join(PUB, 'street-desk.js')); // hangs GovDesk (the line rule's fit) on the global the street reads
 const read = (f) => fs.readFileSync(path.join(PUB, f), 'utf8');
 const NOW = Date.parse('2026-10-02T12:00:00.000Z'); // a Friday
 
@@ -185,17 +186,118 @@ test('every civic door is the prototype\'s door, and every door opens where its
 
 // ── 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 }));
+// task 1004569 (owner, 2026-10-04): the pins stacked on top of each other and
+// their text overlapped. Deliberate change from the prototype's drawing: ONE
+// pin per building, in the tier of its most important matter.
+test('one pin per building, never more: it carries the count of the building\'s open matters and every matter, most important first', () => {
+  const ms = [
+    matter({ id: 'blockers:0', state: 'moving' }), matter({ id: 'blockers:1', state: 'needs' }),
+    matter({ id: 'blockers:2', state: 'settled' }), matter({ id: 'blockers:3', state: 'needs', deadline: '2026-10-03T06:00:00.000Z' }),
+    matter({ id: 'board:9', building: 'charter', state: 'moving' }),
+  ];
   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(here.length, 1, 'one pin, not one per matter');
+  assert.equal(m.pins.length, 2, 'one per building that has a matter');
+  assert.equal(here[0].count, '3', 'three open (the settled one is not open)');
+  assert.deepEqual(here[0].matters, ['blockers:3', 'blockers:1', 'blockers:0', 'blockers:2'], 'urgent, needs, moving, settled: the pager\'s order');
+  assert.equal(here[0].key, 'blockers:3', 'the pin opens on its most important matter');
+  assert.equal(here[0].state, 'urgent');
+  assert.match(here[0].aria, /^3 open at planning, the first needs you within a day/);
   assert.equal(m.cols.find((c) => c.key === 'planning').state, '0 goals open', 'Planning says how many goals are open');
 });
 
+test('a building\'s pin takes the tier of its most important matter: urgent is needs-you due within 24 hours', () => {
+  const tierOf = (list) => model({ docket: docket(list) }).pins.find((p) => p.building === 'planning').state;
+  const at = (h) => new Date(NOW + h * 3600000).toISOString();
+  assert.equal(tierOf([matter({ id: 'a:1', state: 'needs', deadline: at(23) })]), 'urgent', 'due inside a day');
+  assert.equal(tierOf([matter({ id: 'a:1', state: 'needs', deadline: at(-5) })]), 'urgent', 'overdue');
+  assert.equal(tierOf([matter({ id: 'a:1', state: 'needs', deadline: at(25) })]), 'needs', 'due after a day');
+  assert.equal(tierOf([matter({ id: 'a:1', state: 'moving', deadline: at(1) })]), 'moving', 'a deadline never makes moving work urgent');
+  assert.equal(tierOf([matter({ id: 'a:1', state: 'moving' }), matter({ id: 'a:2', state: 'needs' })]), 'needs', 'needs beats moving, wherever it stands in the docket');
+  assert.equal(tierOf([matter({ id: 'a:1', state: 'settled' }), matter({ id: 'a:2', state: 'moving' })]), 'moving');
+  assert.equal(tierOf([matter({ id: 'a:1', state: 'settled' })]), 'settled');
+  assert.equal(tierOf([matter({ id: 'a:1', state: 'weird' })]), 'moving', 'an unknown state is never needs');
+});
+
+test('labels: urgent and needs-you show one short label cut by the line rule; moving waits for a hover; settled is a dot with no label and no count', () => {
+  const Desk = require(path.join(PUB, 'street-desk.js'));
+  const ms = [
+    matter({ id: 'board:1', building: 'charter', state: 'needs', short: 'a very long matter name that runs on', deadline: '2026-10-06T12:00:00.000Z' }),
+    matter({ id: 'blockers:2', building: 'automation', state: 'moving', short: 'moving work' }),
+    matter({ id: 'removal_proposals:3', building: 'treasury', state: 'settled', short: 'settled thing' }),
+  ];
+  const m = model({ docket: docket(ms), goals: [1, 2, 3, 4].map((i) => goal(i)) });
+  const by = Object.fromEntries(m.pins.map((p) => [p.building, p]));
+  assert.equal(by.charter.label, Desk.fit('a very long matter name that runs on', S.PIN_LABEL - 6) + ' · tue', 'fit() cuts the name, the deadline survives');
+  assert.ok(by.charter.label.length <= S.PIN_LABEL);
+  assert.equal(by.charter.shown, true);
+  assert.deepEqual([by.automation.label, by.automation.shown], ['moving work', false], 'moving: the label is there for hover and focus, not shown');
+  assert.deepEqual([by.treasury.label, by.treasury.count, by.treasury.shown], ['', '', false], 'settled: no label, no count');
+});
+
+// A dense docket: every civic building holds several matters in every tier,
+// with long names and deadlines, and work waits at Review.
+function denseDocket() {
+  const keys = ['charter', 'rules', 'disputes', 'people', 'planning', 'automation', 'release', 'treasury'];
+  const ms = [];
+  keys.forEach((b, i) => {
+    const day = (h) => new Date(NOW + h * 3600000).toISOString();
+    ms.push(matter({ id: `dense:${b}:1`, building: b, state: i % 3 === 2 ? 'moving' : 'needs', short: `${b} needs a long careful decision`, deadline: i % 2 ? day(6) : day(30 + i * 24) }));
+    ms.push(matter({ id: `dense:${b}:2`, building: b, state: 'needs', short: `second ${b} matter` }));
+    ms.push(matter({ id: `dense:${b}:3`, building: b, state: 'moving', short: `moving at ${b}` }));
+    ms.push(matter({ id: `dense:${b}:4`, building: b, state: 'settled', short: `settled at ${b}` }));
+  });
+  [1, 2, 3, 4].forEach((i) => ms.push(matter({ id: `criteria_uat:${i}`, source: 'criteria_uat', building: 'review', state: 'needs', title: `Criterion ${i}` })));
+  return docket(ms);
+}
+const meets = (a, b) => a.x0 < b.x1 && b.x0 < a.x1 && a.y0 < b.y1 && b.y0 < a.y1;
+function overlaps(boxes) {
+  const hits = [];
+  boxes.forEach((a, i) => boxes.slice(i + 1).forEach((b) => { if (meets(a, b)) hits.push([a.key, b.key]); }));
+  return hits;
+}
+
+test('no overlap, ever: on a dense docket the collision pass lifts or quiets labels until no two shown labels meet, both modes', () => {
+  for (const mode of ['dark', 'light']) {
+    const m = model({ mode, docket: denseDocket(), goals: [1, 2, 3, 4].map((i) => goal(i)) });
+    const shown = S.shownLabels(m.pins);
+    assert.deepEqual(overlaps(shown), [], `${mode}: no two shown labels meet`);
+    assert.ok(shown.length >= 7, 'the labels that need you show');
+    assert.equal(new Set(m.pins.map((p) => p.building)).size, m.pins.length, 'one pin per building');
+    // The street's roofs stagger the pins' heights, so its own row rarely
+    // collides. The worst case is every pin at one height (a future roof, a
+    // new building): the pass must still keep every shown label clear, lifting
+    // some and quieting the lowest tier, never a higher one over a lower one.
+    const flat = m.pins.map((p) => ({ ...p, y: 300, h: 78, shown: false, lifted: false }));
+    const naive = flat.filter((p) => ['urgent', 'needs', 'queue'].includes(p.rank)).map((p) => ({ key: p.key, ...S.labelBox(p) }));
+    assert.ok(overlaps(naive).length > 0, 'at one height, without the pass, labels would meet');
+    S.placeLabels(flat);
+    assert.deepEqual(overlaps(S.shownLabels(flat)), [], `${mode}: worst case, still no two shown labels meet`);
+    assert.ok(flat.some((p) => p.lifted), 'a label stepped up to the alternate height');
+    const T = ['urgent', 'needs', 'queue'];
+    flat.filter((p) => T.includes(p.rank) && !p.shown).forEach((q) => {
+      const at = (y) => S.labelBox({ x: q.x, y, label: q.label });
+      const blockers = flat.filter((p) => p.shown && (meets(S.labelBox(p), at(300)) || meets(S.labelBox(p), at(300 - S.PIN_STACK))));
+      assert.ok(blockers.length && blockers.every((b) => T.indexOf(b.rank) <= T.indexOf(q.rank)), `${q.key} gave way only to an equal or higher tier`);
+    });
+  }
+});
+
+test('the collision pass places in tier order: when only one of two can show, the lower tier waits for hover and keeps its count and colour', () => {
+  const pins = [
+    { key: 'lo', rank: 'needs', state: 'needs', x: 100, y: 400, h: 78, label: 'aaaaaaaaaaaaaaaa', count: '2' },
+    { key: 'hi', rank: 'urgent', state: 'urgent', x: 120, y: 400, h: 78, label: 'bbbbbbbbbbbbbbbb', count: '1' },
+    { key: 'mid', rank: 'needs', state: 'needs', x: 110, y: 400, h: 78, label: 'cccccccccccccccc', count: '3' },
+  ];
+  S.placeLabels(pins);
+  const by = Object.fromEntries(pins.map((p) => [p.key, p]));
+  assert.deepEqual([by.hi.shown, by.hi.lifted], [true, false], 'the urgent label keeps the pin\'s own height');
+  assert.deepEqual([by.lo.shown, by.lo.lifted, by.lo.y, by.lo.h], [true, true, 400 - S.PIN_STACK, 78 + S.PIN_STACK], 'the next steps up to the alternate height');
+  assert.equal(by.mid.shown, false, 'the third has nowhere to go: its label waits for hover');
+  assert.deepEqual([by.mid.state, by.mid.count], ['needs', '3'], 'its count and colour stay');
+});
+
 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);
@@ -443,8 +545,9 @@ function fakeDom() {
   return { document, byId, html, focused };
 }
 
-async function bootPage({ feeds = {}, stored = null, osDark = true, hash = '', shell = undefined } = {}) {
+async function bootPage({ feeds = {}, stored = null, osDark = true, hash = '', shell = undefined, width = 1440 } = {}) {
   const { document, byId, html, focused } = fakeDom();
+  byId.get('streetWindow').clientWidth = width;
   const store = new Map(stored ? [['hall-theme', stored]] : []);
   const calls = [];
   const listeners = {};
@@ -468,6 +571,8 @@ async function bootPage({ feeds = {}, stored = null, osDark = true, hash = '', s
   vm.runInContext(read('city-draw.js'), ctx);
   vm.runInContext(read('street-draw.js'), ctx);
   vm.runInContext(read('street-card.js'), ctx);
+  vm.runInContext(read('street-inside.js'), ctx);
+  vm.runInContext(read('street-desk.js'), ctx);
   vm.runInContext(read('street.js'), ctx);
   await window.GovStreetPage.ready;
   const key = (t, e) => (listeners[t] || []).forEach((fn) => fn(e));
@@ -482,16 +587,23 @@ const FEEDS = (ms, goals = [goal(1)], rollups = [rollup(1, { done: 2, active: 1
 });
 
 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 soon = new Date(Date.now() + 3 * 3600000).toISOString();
+  const ms = [matter({ id: 'board:1', building: 'charter', state: 'needs', deadline: soon }), matter({ id: 'blockers:2', state: 'moving' }), matter({ id: 'blockers:3', state: 'moving' }), matter({ id: 'access_requests:4', building: 'people', state: 'needs' }), matter({ id: 'override_requests:5', building: 'release', state: 'settled' })];
   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.deepEqual(pins.map((s) => s.className).sort(), ['street-pin street-pin--moving', 'street-pin street-pin--needs street-pin--shown', 'street-pin street-pin--settled', 'street-pin street-pin--urgent street-pin--shown']);
+  const pin = (k) => pins.find((s) => s.attrs['data-matter'] === k);
+  assert.equal(pin('board:1').children[1].children[0].className, 'street-pin__ring', 'only the urgent pin pulses');
+  assert.ok(!pin('access_requests:4').children[1].children.some((c) => c.className === 'street-pin__ring'), 'a needs-you pin is solid orange, no ring');
+  assert.equal(pin('blockers:2').attrs['data-matters'], 'blockers:2 blockers:3');
+  assert.deepEqual(pin('blockers:2').children[1].children.map((c) => c.className), ['', 'street-pin__badge'], 'the glyph, then the count of open matters');
+  assert.equal(pin('blockers:2').children[1].children[1].textContent, '2');
+  assert.equal(pin('override_requests:5').children[1].children.length, 0, 'a settled pin is a plain dot');
   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('hudNeeds').textContent, '2');
+  assert.equal(p.byId.get('hudMoving').textContent, '2');
   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');
@@ -515,6 +627,67 @@ test('a pin opens its short card, Escape closes it and focus goes back to the pi
   assert.equal(p.focused.el.attrs['data-matter'], 'board:1');
 });
 
+test('the card pager: a pin with several matters opens the most important with "1 of N", and previous/next reach every matter there', async () => {
+  const ms = [matter({ id: 'blockers:1', state: 'moving', title: 'Third' }), matter({ id: 'blockers:2', state: 'needs', title: 'First' }), matter({ id: 'blockers:3', state: 'needs', title: 'Second' }), matter({ id: 'blockers:4', state: 'settled', title: 'Fourth' })];
+  const p = await bootPage({ feeds: FEEDS(ms) });
+  const pin = p.byId.get('streetPins').children.find((s) => s.attrs['data-building'] === 'planning');
+  pin.fire('click');
+  const body = p.byId.get('streetCardBody');
+  const pager = () => body.children[0];
+  const btn = (dir) => pager().children.find((c) => c.attrs['data-act'] === 'page-' + dir);
+  assert.equal(p.byId.get('streetCardTitle').textContent, 'First', 'the most important matter first');
+  assert.equal(pager().className, 'mcard-pager');
+  assert.equal(pager().children[1].textContent, '1 of 4');
+  const seen = [p.byId.get('streetCardTitle').textContent];
+  for (let i = 0; i < 3; i++) { btn('next').fire('click'); seen.push(p.byId.get('streetCardTitle').textContent); }
+  assert.deepEqual(seen, ['First', 'Second', 'Third', 'Fourth'], 'next reaches every matter at the building');
+  assert.equal(pager().children[1].textContent, '4 of 4');
+  assert.equal(p.focused.el && p.focused.el.attrs['data-act'], 'page-next', 'focus stays on the arrow');
+  btn('next').fire('click');
+  assert.equal(p.byId.get('streetCardTitle').textContent, 'First', 'and wraps');
+  btn('prev').fire('click');
+  assert.equal(p.byId.get('streetCardTitle').textContent, 'Fourth', 'previous goes back, wrapping too');
+  assert.equal(p.byId.get('streetCard').hidden, false, 'all without leaving the street');
+  assert.equal(p.byId.get('streetPins').children.find((s) => s.attrs['data-building'] === 'planning').attrs['aria-expanded'], 'true', 'the pin still says its card is open');
+  p.key('keydown', { key: 'Escape', preventDefault() {} });
+  assert.equal(p.focused.el.attrs['data-building'], 'planning', 'Escape returns focus to the pin');
+  // one matter: no pager
+  const q = await bootPage({ feeds: FEEDS([matter({ id: 'board:1', building: 'charter' })]) });
+  q.byId.get('streetPins').children[0].fire('click');
+  assert.ok(!q.byId.get('streetCardBody').children.some((c) => c.className === 'mcard-pager'), 'one matter, no pager');
+});
+
+test('no two shown labels meet on a dense docket at 1440, 1024, 390 and 320 wide, as the page draws them', async () => {
+  for (const width of [1440, 1024, 390, 320]) {
+    const p = await bootPage({ feeds: { ...FEEDS([]), '/api/bongos/government/docket': denseDocket(), '/api/bongos/goals': { goals: [1, 2, 3, 4].map((i) => goal(i)) } }, width });
+    const s = Number(p.byId.get('streetBoard').style['--street-scale']);
+    assert.ok(s > 0, `${width}: the board is scaled`);
+    const pins = p.byId.get('streetPins').children;
+    assert.equal(pins.length, 9, `${width}: one pin per civic building`);
+    const shown = pins.filter((el) => /street-pin--shown/.test(el.className)).map((el) => {
+      const b = S.labelBox({ x: parseFloat(el.style.left), y: parseFloat(el.style.top), label: el.children[0].textContent });
+      return { key: el.attrs['data-matter'], x0: b.x0 * s, x1: b.x1 * s, y0: b.y0 * s, y1: b.y1 * s };
+    });
+    assert.ok(shown.length >= 5, `${width}: labels show`);
+    assert.deepEqual(overlaps(shown), [], `${width}: no two shown labels meet on screen`);
+  }
+});
+
+test('the header counts wear the pins\' colours, so they double as the legend', () => {
+  const html = read('street.html');
+  assert.match(html, /<span class="street-hud__dot" id="hudDot" aria-hidden="true"><\/span>\s*<span class="street-label">needs you<\/span>/);
+  assert.match(html, /<span class="street-hud__dot street-hud__dot--moving" aria-hidden="true"><\/span>\s*<span class="street-label">moving<\/span>/);
+  const css = read('street.css').replace(/\/\*[\s\S]*?\*\//g, '');
+  assert.match(css, /\.street-hud__dot \{[^}]*border: 1\.5px solid var\(--accent\)/, 'needs you is orange, a ring while nothing waits');
+  assert.match(css, /\.street-hud__dot--hot \{ background: var\(--accent\); \}/);
+  assert.match(css, /\.street-hud__dot--moving \{[^}]*background: var\(--ink\)/, 'moving is the moving pin\'s ink');
+  assert.match(css, /\.street-pin--moving \.street-pin__head \{[^}]*background: var\(--ink\)/);
+  assert.match(css, /\.street-pin--urgent \.street-pin__head, \.street-pin--needs \.street-pin__head \{ background: var\(--accent\)/);
+  // size carries the tier too, so it reads without colour
+  const size = (t) => Number((css.match(new RegExp(`\\.street-pin--${t} \\.street-pin__head \\{ width: (\\d+)px`)) || [])[1] || 28);
+  assert.ok(size('urgent') > size('needs') && size('needs') > size('moving') && size('moving') > size('settled'), 'urgent > needs > moving > settled');
+});
+
 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');