@bongos/core 1.19.481 → 1.19.483

package/tests/hall_board_world.mjs

@@ -220,3 +220,202 @@ test('the link a list writes carries WHERE it was opened from — path, query an
   sandbox.location.hash = '#backlog';
   assert.equal(api.href('7'), '/task/7?from=%2Fwork%23backlog', 'on the builders host the hall is mounted at /');
 });
+
+// ---- 8. Home matches its board mock (task 1003464) ---------------------------
+//
+// The owner compared live Home against docs/design/mocks/hall/board/v3.html and
+// found four gaps the floors cannot see: the greeting was never built (the page
+// opened cold on a row of numbers, its h1 sr-only), the band ended ragged
+// (`align-items: start` let Standing shrink under Goals), the Standing card had
+// no fact ledger, and the system banners stacked inside it against the
+// placement rule. A floor measures overflow and contrast; none compares a page
+// to the mock it was built from — so these pins do, statically and then by
+// RUNNING hall-render.js against a stub DOM.
+
+const indexHtml = read('index.html');
+const hallRenderJs = read('hall-render.js');
+const buildersJs = read('builders.js');
+const goalInboxJs = read('goal-inbox.js');
+
+test('the greeting IS the page\'s one h1, in the board\'s label voice, with a sub-line beside it', () => {
+  const h1s = indexHtml.match(/<h1\b/g) || [];
+  assert.equal(h1s.length, 1, 'one-header-main-h1: the greeting must BECOME the h1, never add a second');
+  assert.match(indexHtml, /<div class="page-head page-head--board page-head--hall">\s*<h1 id="hall-h1" class="page-head__h">Builders' Hall<\/h1>\s*<p id="hall-sub" class="page-head__sub" hidden><\/p>/,
+    'the h1 is visible (no sr-only), keeps the id brand-apply.js writes into, and the sub-line ships hidden');
+  assert.doesNotMatch(indexHtml, /id="hall-h1" class="sr-only"/, 'the sr-only h1 is gone');
+});
+
+test('the band ends level: no align-items on the grid, so the two cards stretch', () => {
+  const band = rule(styleCss, '.view-zone--band');
+  assert.ok(band, '.view-zone--band has a rule');
+  assert.doesNotMatch(band, /align-items/, 'the mock\'s .band declares none — stretch is what makes Standing end where Goals ends');
+  assert.match(styleCss.replace(/\/\*[\s\S]*?\*\//g, ''), /@media \(max-width:\s*768px\)[\s\S]*?\.view-zone--band \{ grid-template-columns: 1fr; \}/,
+    'and the single-column fallback still exists below 768px (the task text said 860; the sheet says 768)');
+});
+
+test('the Standing card is the mock\'s: an identity line and a three-row fact ledger, no banner', () => {
+  const block = hallRenderJs.match(/const homeStanding = document\.getElementById\('home-standing-body'\);[\s\S]*?renderSystemNotices\(/);
+  assert.ok(block, 'the Home card render is where it was');
+  assert.match(block[0], /class="home-who"/, 'the identity line');
+  assert.match(block[0], /<dt>\$\{escapeHtml\(curLabel\(true\)\)\}<\/dt>/,
+    'the currency row takes its label from the branding contract at render time — a data-currency-label attribute is rebranded once at load, before this row exists');
+  for (const label of ['On the board', 'Preferred work']) {
+    assert.match(block[0], new RegExp(`<dt>${label}</dt>`), `the ledger row: ${label}`);
+  }
+  assert.match(block[0], /: PREFS_EMPTY\}/, 'the empty-preference copy is the one string both Standing surfaces share');
+  assert.doesNotMatch(block[0], /Banner\}/, 'no banner is stacked into the card any more');
+  for (const sel of ['.home-who', '.home-facts', '.home-facts dt', '.home-facts dd']) {
+    assert.ok(rule(styleCss, sel), `style.css styles ${sel}`);
+  }
+  assert.match(rule(styleCss, '.home-who__avatar') || '', /var\(--skeleton\)/, 'the avatar placeholder is the skeleton tone, not --bg-deep (pure black in dark)');
+});
+
+test('the system notices are inbox LINES, first in the card, and counted by its refresh()', () => {
+  const mount = goalInboxJs.match(/host\.innerHTML =([\s\S]*?);/);
+  assert.ok(mount, 'the inbox mounts its slices');
+  const sys = mount[1].indexOf('id="attention-system"');
+  const goals = mount[1].indexOf('id="attention-goals"');
+  assert.ok(sys > -1 && sys < goals, '#attention-system is a slice, ahead of the goals slice');
+  assert.match(hallRenderJs, /function renderSystemNotices\(/, 'hall-render.js renders them from the /me state it already holds');
+  const fn = hallRenderJs.match(/function renderSystemNotices\([\s\S]*?\n  \}\n/);
+  assert.ok(fn, 'renderSystemNotices is a whole function');
+  assert.match(fn[0], /class="ginbox__item ginbox__item--/, 'rows carry .ginbox__item, so OTBAttention.refresh() counts them');
+  assert.match(fn[0], /OTBAttention[\s\S]*refresh\(\)/, 'and the renderer asks the card to re-decide its visibility');
+  assert.doesNotMatch(fn[0], /covered/, 'a "we cover it" note is information, not an action, and does not land in the inbox');
+  // the rebase-owed line carries task refs as links in prose; a 13.5px link
+  // with no compensation sits under the 24px floor, and the kit stub renders
+  // no notices, so this is pinned in the sheet rather than left to a render
+  for (const sel of ['.ginbox__line a', '.ginbox__goal, .triage-inbox__link, .next-up__title']) {
+    const r = rule(styleCss, sel) || '';
+    assert.match(r, /min-height:\s*24px/, `${sel} clears the floor`);
+    assert.match(r, /padding:\s*3px 0/, `${sel} buys it with the row recipe`);
+  }
+});
+
+test('the greeting reads /me, the public progress and the claimable feed, and builders.js feeds all three', () => {
+  assert.match(buildersJs, /getJSON\(`\$\{API\}\/public\/progress`\)/, 'Home fetches the public progress once');
+  assert.match(buildersJs, /lastClaimableCount = resp && Array\.isArray\(resp\.claimable\) \? resp\.claimable\.length : null;/,
+    'the claimable feed Home already fetches for Next-up answers the count');
+  assert.match(buildersJs, /get lastProgressState\(\)/, 'the renderer reads progress through a getter, so it cannot freeze at boot');
+  assert.match(buildersJs, /get lastClaimableCount\(\)/, 'and the count the same way');
+  assert.equal((buildersJs.match(/renderGreeting\(\)/g) || []).length, 3, 'rendered after /me, after progress and after the claimable feed — each half as it lands');
+});
+
+// Boot hall-render.js against a stub DOM and a ctx of getters (the way
+// builders.js builds it) and read what the greeting and the card actually say.
+function bootHallRender({ me, progress = null, claimable = null, leaderboard = [] }) {
+  const els = new Map();
+  const makeEl = () => ({
+    dataset: {}, style: {}, textContent: '', hidden: false, _html: '', innerHTML: '',
+    classList: { add() {}, remove() {}, toggle() { return false; }, contains() { return false; } },
+    setAttribute() {}, getAttribute() { return null; }, addEventListener() {},
+    querySelector() { return makeEl(); }, querySelectorAll() { return []; }, appendChild() {}, remove() {},
+  });
+  const documentObj = {
+    getElementById(id) { if (!els.has(id)) els.set(id, makeEl()); return els.get(id); },
+    querySelector(sel) { return this.getElementById(String(sel).replace(/^#/, '')); },
+    querySelectorAll() { return []; },
+    createElement() { return makeEl(); },
+    addEventListener() {},
+    body: { dataset: {} }, documentElement: { dataset: {} },
+  };
+  const escapeHtml = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  const windowObj = {
+    OTB: { escapeHtml, $: (sel) => documentObj.querySelector(sel), fmtNum: (n) => Number(n || 0).toLocaleString('en-US'), moduleOn: () => false },
+    // the factory builds the Standing ships pager + rail at creation
+    OTBKit: { makePager: () => ({ page: 1, perPage: 10 }), makeSectionRail: () => ({ render() {}, refresh() {} }), paginate: (rows) => rows, shipVisualThumbHtml: () => '' },
+    OTBTaskDetail: { href: (id) => `/task/${id}?from=%2F` },
+    location: { hostname: 'builders.example.com', pathname: '/', hash: '', href: 'https://builders.example.com/' },
+    localStorage: { getItem() { return null; }, setItem() {}, removeItem() {} },
+    addEventListener() {},
+  };
+  const sandbox = { window: windowObj, document: documentObj, location: windowObj.location, localStorage: windowObj.localStorage, console, setTimeout, clearTimeout, Date, URL };
+  sandbox.globalThis = sandbox;
+  vm.createContext(sandbox);
+  vm.runInContext(read('hall-render.js'), sandbox, { filename: 'hall-render.js' });
+  const ctx = {
+    API: '/api/gds', RANK_ORDER: ['xenos', 'thetes', 'metic', 'archon'], api: {}, brandWorld: () => 'Cloud Bongos',
+    curLabel: (caps) => (caps ? 'Credits' : 'credits'), emptyRow: () => '', fmtDate: (d) => String(d).slice(0, 10),
+    mins: (m) => `${m}m`, normalizeRank: (r) => String(r || '').toLowerCase(), pct: (n) => `${n}%`, postJSON: async () => ({}),
+    rankLabel: (r) => r, rankWeight: () => 0, signClasses: () => '', toast() {}, usd: (n) => `$${n}`,
+    instanceRepo: null, newcomerGated: false,
+    get lastMeState() { return me; }, get lastCostState() { return me.cost || null; }, get lastKarmaState() { return me.karma || null; },
+    get lastNeedsState() { return me.needs || null; }, get lastRebaseState() { return me.needs_rebase_tasks || null; },
+    get lastProgressState() { return progress; }, get lastClaimableCount() { return claimable; },
+  };
+  const api = windowObj.OTBHallRender(ctx);
+  api.lbState.rows = leaderboard;
+  return { api, el: (id) => documentObj.getElementById(id) };
+}
+
+const ME = {
+  builder: { id: 7, display_name: 'Percy Jackson', github_login: 'percy', rank: 'metic', total_credits: 14441, karma: 96, preferred_disciplines: [], created_at: '2026-01-01T00:00:00Z' },
+  needs: { items: [{ state: 'action_needed', title: 'Image-generation key', message: 'Your free art coverage has ended.', action: { href: '/settings#art', label: 'Add your key' } }] },
+  cost: { level: 'warn', spend_mtd_usd: 80, budget_mtd_usd: 100, pct_used: 80 },
+  needs_rebase_tasks: [{ id: 1003460 }],
+};
+const LEADERBOARD = [{ github_login: 'a', total_credits: 20000 }, { github_login: 'percy', total_credits: 14441 }, { github_login: 'b', total_credits: 3 }, { github_login: 'c', total_credits: 1 }];
+const PROGRESS = { progress: [{ version_id: 'BONGOS-V1', status: 'building', total_count: 605, percent_complete: 75 }, { version_id: 'V2', status: 'planning', total_count: 9000, percent_complete: 0 }] };
+
+test('RUN: the greeting names the builder, and the sub-line says how far the version is and what is claimable', () => {
+  const { api, el } = bootHallRender({ me: ME, progress: PROGRESS, claimable: 5 });
+  api.renderGreeting();
+  assert.match(el('hall-h1').textContent, /^Good (morning|afternoon|evening), Percy Jackson$/);
+  assert.equal(el('hall-sub').textContent, 'BONGOS-V1 is 75 percent shipped. Five tasks are claimable right now.');
+  assert.equal(el('hall-sub').hidden, false);
+});
+
+test('RUN: each half of the sentence renders as its data lands, and the line hides with neither', () => {
+  const none = bootHallRender({ me: ME });
+  none.api.renderGreeting();
+  assert.equal(none.el('hall-sub').hidden, true, 'nothing to say yet');
+  const onlyProgress = bootHallRender({ me: ME, progress: PROGRESS });
+  onlyProgress.api.renderGreeting();
+  assert.equal(onlyProgress.el('hall-sub').textContent, 'BONGOS-V1 is 75 percent shipped.');
+  const zero = bootHallRender({ me: ME, progress: PROGRESS, claimable: 0 });
+  zero.api.renderGreeting();
+  assert.match(zero.el('hall-sub').textContent, /Nothing is claimable right now\.$/);
+  const one = bootHallRender({ me: ME, claimable: 1 });
+  one.api.renderGreeting();
+  assert.equal(one.el('hall-sub').textContent, 'One task is claimable right now.');
+  const many = bootHallRender({ me: ME, claimable: 63 });
+  many.api.renderGreeting();
+  assert.equal(many.el('hall-sub').textContent, '63 tasks are claimable right now.');
+});
+
+test('RUN: the Standing card carries the three facts, the place as "2nd of 4", and no banner', () => {
+  const { api, el } = bootHallRender({ me: ME, leaderboard: LEADERBOARD });
+  api.renderProfile(ME.builder);
+  const html = el('home-standing-body').innerHTML;
+  assert.match(html, /<p class="home-who__name">Percy Jackson<\/p>/);
+  assert.match(html, /<p class="home-who__handle">@percy<\/p>/);
+  // written from curLabel(true), not a data-currency-label attribute: brand-apply
+  // rebrands those once at load, and this row is stamped after /me answers
+  assert.match(html, /<dt>Credits<\/dt><dd>14,441<\/dd>/);
+  assert.match(html, /<dt>On the board<\/dt><dd>2nd of 4<\/dd>/);
+  assert.match(html, /<dt>Preferred work<\/dt><dd>Not set yet<\/dd>/, 'the mock\'s copy for an empty preference');
+  assert.doesNotMatch(html, /profile__(needs|budget|rebase)/, 'the banners are not in the card');
+  const withPrefs = bootHallRender({ me: ME, leaderboard: [] });
+  withPrefs.api.renderProfile({ ...ME.builder, preferred_disciplines: ['engineer', 'ui'] });
+  assert.match(withPrefs.el('home-standing-body').innerHTML, /<dd>engineer, ui<\/dd>/);
+  assert.match(withPrefs.el('home-standing-body').innerHTML, /<dt>On the board<\/dt><dd>—<\/dd>/, 'no roll yet: a dash, not a wrong place');
+});
+
+test('RUN: the three notices are inbox lines with a kind, a line and — where one exists — a door', () => {
+  const { api, el } = bootHallRender({ me: ME });
+  api.renderProfile(ME.builder);
+  const html = el('attention-system').innerHTML;
+  assert.match(html, /<h3 class="ginbox__sec-h">From the system<\/h3>/);
+  assert.equal((html.match(/class="ginbox__item /g) || []).length, 3, 'rebase, the needed input, the budget');
+  assert.match(html, /ginbox__item--danger"><div class="ginbox__body"><span class="ginbox__kind">Rebase owed<\/span>/);
+  assert.match(html, /<a href="\/task\/1003460\?from=%2F">task 1003460<\/a>/, 'a task ref is a door through OTBTaskDetail.href, never a bare #N');
+  assert.match(html, /ginbox__item--warn"><div class="ginbox__body"><span class="ginbox__kind">Image-generation key<\/span>/);
+  assert.match(html, /<a class="btn-ghost" href="\/settings#art">Add your key<\/a>/);
+  assert.match(html, /<span class="ginbox__kind">Approaching monthly budget<\/span>/);
+  const quiet = bootHallRender({ me: { builder: ME.builder } });
+  quiet.api.renderProfile(ME.builder);
+  assert.equal(quiet.el('attention-system').innerHTML, '', 'nothing owed, nothing rendered');
+  const covered = bootHallRender({ me: { builder: ME.builder, needs: { items: [{ state: 'covered', title: 'Art', message: 'We cover it.' }] } } });
+  covered.api.renderProfile(ME.builder);
+  assert.equal(covered.el('attention-system').innerHTML, '', 'a covered need is not an action');
+});

package/tests/hall_reading_world.mjs

@@ -408,6 +408,18 @@ test('it slugs h2s the way the table of contents and the in-doc anchors expect',
     'the anchor in the markup and the id the TOC links to come from one call, so they cannot drift');
 });
 
+test('a code span round-trips & < > " \' to exactly ONE entity each', () => {
+  // renderInline receives text the block pass has already escaped and lifted
+  // each span into a placeholder; restoring it through escapeHtml again showed
+  // `a && b` as "a &amp;&amp; b" (idea 1000889, folded into task 1003465).
+  const MD = loadReader();
+  const { html } = MD.parseMarkdown('use `a && b < c > "d" \'e\'` here\n', (h) => h);
+  assert.match(html, /<code>a &amp;&amp; b &lt; c &gt; &quot;d&quot; &#39;e&#39;<\/code>/);
+  assert.doesNotMatch(html, /&amp;(amp|lt|gt|quot|#39);/, 'no entity is encoded twice');
+  const li = MD.parseMarkdown('- run `x & y`\n', (h) => h).html;
+  assert.match(li, /<li>run <code>x &amp; y<\/code><\/li>/, 'and the same inside a list item');
+});
+
 test('the primer\'s link resolver sends a repo-relative doc to GitHub and leaves the rest alone', () => {
   const MD = loadReader();
   const resolve = MD.makeResolveLinkHref({

package/tests/hall_record_world.mjs

@@ -258,8 +258,11 @@ test('the preview harness can reach both record pages', () => {
 // string-building, so this exercises the real render path rather than a
 // re-implementation of it.
 const TASK_SRC = read('task.js');
+// task.html loads md-reader.js ahead of task.js (task 1003465), so the sandbox
+// does the same: the description renders through it.
+const MD_SRC = read('md-reader.js');
 
-function renderTask(task, { lastClaim = null, viewer = null, goal = null, status = 200, search = '', referrer = '' } = {}) {
+function renderTask(task, { lastClaim = null, viewer = null, goal = null, status = 200, search = '', referrer = '', withReader = true } = {}) {
   const els = new Map();
   const makeEl = () => ({
     dataset: {}, style: {}, textContent: '', hidden: false, disabled: false, _html: '',
@@ -311,6 +314,7 @@ function renderTask(task, { lastClaim = null, viewer = null, goal = null, status
   const sandbox = { window: windowObj, document: documentObj, location: windowObj.location, console, setTimeout, clearTimeout, Date, URL, URLSearchParams };
   sandbox.globalThis = sandbox;
   vm.createContext(sandbox);
+  if (withReader) vm.runInContext(MD_SRC, sandbox, { filename: 'md-reader.js' });
   vm.runInContext(TASK_SRC, sandbox, { filename: 'task.js' });
   assert.ok(onReady, 'task.js registers its DOMContentLoaded boot');
   return {
@@ -489,3 +493,79 @@ test('the crumb is an element task.js can point, with its label apart from the i
   assert.match(taskHtml, /<a class="rec-back" id="task-back" href="\/work">/, 'the static href is the fallback the page ships with');
   assert.match(taskHtml, /<span id="task-back-label">Back to tasks<\/span>/, 'the label is its own node, so the icon survives a relabel');
 });
+
+// ---- 11. the description is markdown, and renders as it (task 1003465) --------
+//
+// The owner's screenshot: ## headings, **bold**, `code` and - bullets as literal
+// characters, in a column where every line wrapped twice. The description was
+// escaped into a <p> under white-space: pre-wrap; the DB hard-wraps at ~78
+// columns and the re-skin's --measure (~60) broke each line again. It renders
+// through md-reader.js now, on both record pages, and pre-wrap is gone.
+
+test('both record pages load the shared reader BEFORE their page script', () => {
+  for (const [name, html, page] of [['task.html', taskHtml, 'task.js'], ['idea.html', ideaHtml, 'idea.js']]) {
+    const reader = html.indexOf('<script src="/builders/md-reader.js" defer>');
+    const script = html.indexOf(`<script src="/builders/${page}`);
+    assert.ok(reader > -1, `${name} loads md-reader.js`);
+    assert.ok(script > reader, `${name}: both deferred, so document order is execution order — the reader comes first`);
+  }
+});
+
+test('neither prose container is pre-wrap any more — rendered paragraphs wrap themselves', () => {
+  assert.doesNotMatch(rule(recordCss, '.rec-desc') || '', /white-space:\s*pre-wrap/, '.rec-desc: pre-wrap is exactly what fought the measure');
+  assert.doesNotMatch(rule(ideaCss, '.ig-body') || '', /white-space:\s*pre-wrap/, '.ig-body: the idea body renders the same way');
+  assert.match(rule(recordCss, '.rec-desc') || '', /max-width:\s*var\(--measure\)/, 'the measure stays — it is correct once the source wrap is gone');
+  for (const sel of ['.rec-md p', '.rec-md code', '.rec-md ul, .rec-md ol']) {
+    assert.ok(rule(recordCss, sel), `record.css styles what the parser emits: ${sel}`);
+  }
+});
+
+const MD_DESC = [
+  '## What is wrong',
+  '',
+  'The **description** shows `a && b < c` as text, and folds ideas #1000891',
+  'and #1000889 — a bare hash that would autolink to a GitHub issue.',
+  '',
+  '- one bullet',
+  '- [a doc](docs/adr/0229-the-way-out.md) and [a trap](javascript:alert(1))',
+].join('\n');
+
+test('the description renders as markup: headings, bold, code, bullets — not their characters', async () => {
+  const r = renderTask({ ...BASE_TASK, description: MD_DESC });
+  await r.boot(); await settle();
+  const html = r.html();
+  const m = html.match(/<div class="rec-desc rec-md">([\s\S]*?)<\/div><\/section>/);
+  assert.ok(m, 'the description is a block container, not a <p> — a paragraph cannot hold a heading or a list');
+  const desc = m[1];
+  assert.match(desc, /<h2 id="what-is-wrong">What is wrong<\/h2>/, 'the heading is a heading');
+  assert.match(desc, /<strong>description<\/strong>/, 'bold is bold');
+  assert.match(desc, /<code>a &amp;&amp; b &lt; c<\/code>/, 'a code span with & and < round-trips to ONE entity each');
+  assert.match(desc, /<li>one bullet<\/li>/, 'the bullet is a list item');
+  assert.doesNotMatch(desc, /##|\*\*|`/, 'no markdown character survives as text');
+  assert.doesNotMatch(desc, /white-space/, 'nothing is inlined to fake the old wrap');
+});
+
+test('the rendered path drops the hash from a bare #NNN, as the copied prompt already did', async () => {
+  const r = renderTask({ ...BASE_TASK, description: MD_DESC });
+  await r.boot(); await settle();
+  const desc = r.html().match(/<div class="rec-desc rec-md">([\s\S]*?)<\/div><\/section>/)[1];
+  assert.match(desc, /folds ideas 1000891\s+and 1000889/, 'the ids read as ids');
+  assert.doesNotMatch(desc, /#10008/, 'no bare #NNN reaches the page');
+});
+
+test('a description\'s links resolve repo-root-relative, and a hostile target is text', async () => {
+  const r = renderTask({ ...BASE_TASK, description: MD_DESC });
+  await r.boot(); await settle();
+  const desc = r.html().match(/<div class="rec-desc rec-md">([\s\S]*?)<\/div><\/section>/)[1];
+  assert.match(desc, /<a href="docs\/adr\/0229-the-way-out\.md">a doc<\/a>/,
+    'no docs/onboarding/ base: a task path is repo-root-relative, and without the repo bases it passes through');
+  assert.doesNotMatch(desc, /javascript:/, 'the reader\'s allowlist (task 1003482) holds on the record page too');
+  assert.match(desc, /a trap/, 'the label survives as text');
+});
+
+test('the description still reads when the reader is absent', async () => {
+  const r = renderTask({ ...BASE_TASK, description: 'plain <b>text</b>' }, { withReader: false });
+  await r.boot(); await settle();
+  assert.match(r.html(), /<div class="rec-desc rec-md"><p>plain &lt;b&gt;text&lt;\/b&gt;<\/p><\/div>/,
+    'escaped into one paragraph — a missing script must never blank the record');
+});