@bongos/core 1.19.448 → 1.19.450

package/tests/hall_record_world.mjs

@@ -0,0 +1,412 @@
+// tests/hall_record_world.mjs — the task record, the idea record and the idea
+// composer in the chrome world (task 1003305, goal 1000081).
+//
+// tests/hall_tokens.mjs pins the TIER these three pages spend and
+// tests/hall_board_world.mjs pins how the board spends it; this is the same job
+// for the record family. Everything here is a fact that is SILENT in a browser:
+// the page still renders, it just renders wrong, or it renders right here and
+// fails a floor on the reviewer's machine.
+//
+// What it locks:
+//   * THE SHELL OVERRIDE STAYS GONE. ideas.css set `.app-content > main
+//     { padding-right: 20rem }` and pinned its meter at a hand-copied `6.5rem`
+//     topbar height. A page reaching into shell layout is invisible from the
+//     shell, and the copy silently desyncs the moment --topbar-h moves. The
+//     reserve and the panel now live in style.css as .app-content--railed +
+//     .app-rail, and the page opts in from its markup.
+//   * `.btn` AND `.btn--ghost` HAVE A RULE. They had none anywhere in the
+//     surface — six pages were rendering browser-default buttons on a surface
+//     whose every other shape is a pill. The class names are spelled into markup
+//     and into tests/idea_spark_hall.mjs, so they are made to SAY the same thing
+//     as .btn-accent/.btn-ghost rather than renamed.
+//   * WHITE ON THE SALMON. `.td-btn--primary` carried a literal `#fff` on
+//     var(--accent) — the pairing DESIGN.md bans outright because it fails AA.
+//     It is the single most likely thing to be pasted back.
+//   * THE ONE h1, IN EVERY STATE. All three pages had none at load, and the two
+//     records had none at all when the fetch failed — one-header-main-h1
+//     measures the rendered DOM, not the happy path.
+//   * THE INLINE <style> IS GONE. task.html's 27-line block was the hall's last
+//     substantive one and sat at its hall_audit ratchet with zero headroom.
+//   * THE COMPAT ALIASES. Each sheet's removal list. The aliases still EXIST for
+//     the pages nobody has re-skinned, so spending one here is legal CSS that
+//     quietly opts the sheet back out of the world.
+//   * `--measure` IS THE BODY MEASURE. Spent on a 34px display heading it caps
+//     at ~950px and the title runs the panel's width; the title's cap is its own
+//     em-based one. The inverse mistake — fresh `ch` arithmetic in body prose —
+//     is what idea.css's old `70ch` was.
+//
+// Reproduce the renders these came from (the RECORD pages need a loaded record,
+// which the kit's own stub has no feed for — so they run against the hall's
+// fixture harness):
+//   node scripts/hall-preview/server.js --port 4612 --fixture-me
+//   node modules/ui-design/kit/render.js --states modules/hall-ui/public/task.states.json \
+//     --base-in http://builders.localhost:4612 --base-out http://builders.localhost:4612
+//   (likewise idea.states.json and ideas.states.json)
+
+// §9 leaves static analysis behind and RUNS task.js: the three data transforms
+// the re-skin introduced (the figure band's drop rule, the lifecycle rail's
+// status→beat mapping, the status pill's tone lookup) are branching logic, and a
+// render floor only proves the page did not fall over — not that it lit the
+// right beat.
+
+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 { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const HALL = path.join(ROOT, 'modules', 'hall-ui', 'public');
+const read = (f) => fs.readFileSync(path.join(HALL, f), 'utf8');
+
+const styleCss = read('style.css');
+const recordCss = read('record.css');
+const taskCss = read('task.css');
+const ideaCss = read('idea.css');
+const ideasCss = read('ideas.css');
+const taskHtml = read('task.html');
+const ideaHtml = read('idea.html');
+const ideasHtml = read('ideas.html');
+
+// The body of the first rule matching `selector {`, comments stripped. Naive on
+// purpose: these are flat declaration blocks, not nested at-rules. Takes a PLAIN
+// selector and escapes it here — pass a pre-escaped one and it is escaped twice.
+const rule = (css, selector) => {
+  const esc = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const re = new RegExp(`(^|[},])\\s*${esc}\\s*\\{([^}]*)\\}`, 'm');
+  const m = css.replace(/\/\*[\s\S]*?\*\//g, '').match(re);
+  return m ? m[2] : null;
+};
+const decomment = (css) => css.replace(/\/\*[\s\S]*?\*\//g, '');
+
+// ---- 1. the right rail belongs to the shell --------------------------------
+
+test('no page sheet reaches into .app-content > main any more', () => {
+  for (const [name, css] of [['ideas.css', ideasCss], ['idea.css', ideaCss], ['task.css', taskCss], ['record.css', recordCss]]) {
+    assert.doesNotMatch(decomment(css), /\.app-content\s*>\s*main/,
+      `${name} overrides shell layout — ask the shell for the room with .app-content--railed instead`);
+  }
+});
+
+test('the shell owns BOTH halves of the rail, measured from one value', () => {
+  const reserve = rule(styleCss, '.app-content--railed > main');
+  assert.ok(reserve, 'style.css reserves the room on the content column');
+  assert.match(reserve, /--rail-right-w/, 'the reserve is measured from the rail token, not a literal');
+  const rail = decomment(styleCss).match(/\.app-rail\s*\{[^}]*\}\s*$|\.app-rail\s*\{([^}]*)\}[\s\S]*?position:\s*fixed/);
+  assert.ok(rail, '.app-rail has a rule');
+  const fixed = decomment(styleCss).match(/@media \(min-width: 62rem\)\s*\{([\s\S]*?)\n\}/);
+  assert.ok(fixed, 'the rail opens at a declared breakpoint');
+  assert.match(fixed[1], /top:\s*calc\(var\(--topbar-h\)/,
+    'the panel is placed from --topbar-h; ideas.css hand-copied it as 6.5rem and nothing kept the two in step');
+});
+
+test('the ideas composer OPTS IN from its markup', () => {
+  assert.match(ideasHtml, /class="app-content app-content--railed"/, 'the content column reserves the room');
+  assert.match(ideasHtml, /class="fi-meter app-rail"/, 'and the meter takes the shell\'s rail frame');
+});
+
+// ---- 2. the button vocabulary that had no rule -----------------------------
+
+test('.btn and .btn--ghost are defined, and say what .btn-accent / .btn-ghost say', () => {
+  const btn = rule(styleCss, '.btn');
+  assert.ok(btn, '.btn has a rule — six pages rendered browser-default buttons without one');
+  assert.match(btn, /background:\s*var\(--accent\)/, '.btn is the accent door');
+  assert.match(btn, /color:\s*var\(--accent-on\)/, '--accent-on is the dark ink for the salmon');
+  assert.match(btn, /border-radius:\s*var\(--radius-pill\)/, 'pill or nothing (DESIGN.md, Shapes)');
+  // collab.css's .btn--quiet sets only a border-COLOUR; a modifier cannot paint
+  // an edge that was never reserved, so the base has to carry a transparent one.
+  assert.match(btn, /border:\s*var\(--line\)\s+solid\s+transparent/,
+    'the edge is reserved so a modifier that sets only border-color still draws');
+  const ghost = rule(styleCss, '.btn--ghost');
+  assert.ok(ghost, '.btn--ghost has a rule');
+  assert.match(ghost, /background:\s*none/, 'the quiet sibling is a hairline pill, not a fill');
+  assert.match(ghost, /border-color:\s*var\(--rule\)/, 'and it takes the reserved edge');
+});
+
+// ---- 3. the world's own bans ------------------------------------------------
+
+test('nothing in the record family paints text white on the accent', () => {
+  const primary = rule(styleCss, '.td-btn--primary');
+  assert.ok(primary, '.td-btn--primary has a rule');
+  assert.match(primary, /color:\s*var\(--accent-on\)/, 'the dark ink, not white');
+  // Match white as a VALUE, not anywhere in the block: `white-space: nowrap` is
+  // a property name and would be read as a colour by a bare /\bwhite\b/.
+  for (const [name, css] of [['style.css .td-btn--primary', primary], ['record.css', decomment(recordCss)],
+    ['task.css', decomment(taskCss)], ['idea.css', decomment(ideaCss)], ['ideas.css', decomment(ideasCss)]]) {
+    assert.doesNotMatch(css, /(background|color):\s*(#fff\b|#ffffff\b|white\b)/i,
+      `${name} paints a white literal — DESIGN.md bans white on the salmon, and every other ground has a token`);
+  }
+});
+
+test('the three re-skinned sheets spend no compat alias', () => {
+  const aliases = ['--surface', '--surface-2', '--border', '--border-strong', '--accent-weak', '--accent-text'];
+  for (const [name, css] of [['record.css', recordCss], ['task.css', taskCss], ['idea.css', ideaCss], ['ideas.css', ideasCss]]) {
+    const spent = aliases.filter((a) => new RegExp(`var\\(\\s*${a}\\s*[,)]`).test(decomment(css)));
+    assert.deepEqual(spent, [], `${name} still spends an alias — that was this sheet's removal list`);
+  }
+});
+
+test('--line is spent as a WIDTH in the new sheets, never as a colour', () => {
+  for (const [name, css] of [['record.css', recordCss], ['task.css', taskCss], ['idea.css', ideaCss], ['ideas.css', ideasCss]]) {
+    assert.doesNotMatch(decomment(css), /(border-color|color|background):[^;]*var\(--line\)/,
+      `${name} spends --line as a colour; the hairline's colour is --rule / --rule-soft`);
+  }
+});
+
+// ---- 4. the reading measure, spent on the right thing -----------------------
+
+test('the record title caps on its OWN em measure, not the body --measure', () => {
+  const title = rule(recordCss, '.rec-title');
+  assert.ok(title, '.rec-title has a rule');
+  assert.doesNotMatch(title, /max-width:\s*var\(--measure\)/,
+    '--measure is 48ch at the BODY size (~60 characters); on a 34px display face it caps at ~950px and the title runs the panel');
+  assert.match(title, /max-width:\s*24ch/, 'the mock\'s own cap, measured on the display face');
+});
+
+test('body prose takes --measure rather than fresh ch arithmetic', () => {
+  for (const sel of ['.rec-body', '.rec-desc']) {
+    assert.match(rule(recordCss, sel) || '', /max-width:\s*var\(--measure\)/, `${sel} reads at the measured width`);
+  }
+  assert.match(rule(ideaCss, '.ig-answer__a') || '', /max-width:\s*var\(--measure\)/,
+    'idea.css\'s old 70ch rendered ~88 characters — a ch is the zero glyph\'s width, not a character');
+});
+
+// ---- 5. the landmark floor, in every state ---------------------------------
+
+for (const [file, html] of [['task.html', taskHtml], ['idea.html', ideaHtml], ['ideas.html', ideasHtml]]) {
+  test(`${file} has exactly one h1, present before any fetch lands`, () => {
+    // Strip HTML comments first: the comment above each heading names <h1>, and
+    // counting it reads 2 on a page that has one.
+    const h1s = html.replace(/<!--[\s\S]*?-->/g, '').match(/<h1\b/g) || [];
+    assert.equal(h1s.length, 1, 'all three pages had none until task 1003305');
+  });
+}
+
+test('the record pages keep their h1 in the not-found and error renders', () => {
+  const taskJs = read('task.js');
+  const ideaJs = read('idea.js');
+  for (const fn of ['renderNotFound', 'renderError']) {
+    const body = taskJs.slice(taskJs.indexOf(`function ${fn}`), taskJs.indexOf(`function ${fn}`) + 900);
+    assert.match(body, /<h1 class="rec-big" id="task-h">/, `task.js ${fn} renders a real h1, not a styled <p>`);
+  }
+  const fail = ideaJs.slice(ideaJs.indexOf('function fail'), ideaJs.indexOf('function fail') + 600);
+  assert.match(fail, /<h1 class="rec-big" id="idea-h">/, 'idea.js fail() renders a real h1');
+});
+
+// ---- 6. the inline style is gone -------------------------------------------
+
+test('task.html carries no inline <style> at all', () => {
+  const blocks = [...taskHtml.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/g)].filter((m) => m[1].trim());
+  assert.deepEqual(blocks.map((m) => m[1].trim().split('\n').length), [],
+    'the 27-line task-751 block was the hall\'s last substantive one; it is task.css + record.css now');
+  assert.match(taskHtml, /href="\/builders\/record\.css"/, 'and the page loads the archetype');
+  assert.match(taskHtml, /href="\/builders\/task\.css"/, 'and its own two shapes');
+});
+
+test('hall_audit no longer grants task.html an inline-style exception', () => {
+  const audit = fs.readFileSync(path.join(ROOT, 'tests', 'hall_audit.mjs'), 'utf8');
+  const map = audit.slice(audit.indexOf('const INLINE_STYLE_BUDGET'), audit.indexOf('const DEFAULT_INLINE_BUDGET'));
+  assert.doesNotMatch(map, /^\s*'task\.html':/m, 'the exception retires with the block it covered');
+});
+
+// ---- 7. the record archetype is ONE sheet, shared ---------------------------
+
+test('both record pages load record.css, so the composition cannot drift', () => {
+  for (const [file, html] of [['task.html', taskHtml], ['idea.html', ideaHtml]]) {
+    assert.match(html, /href="\/builders\/record\.css"/, `${file} loads the shared archetype`);
+  }
+  // The composer is a form beside a readout, not a record — it must NOT pull the
+  // record sheet in just because it is next door.
+  assert.doesNotMatch(ideasHtml, /record\.css/, 'the composer is not a record and does not load the archetype');
+});
+
+test('the retired idea classes are gone from the sheet as well as the markup', () => {
+  for (const c of ['idea-detail__back', 'ig-head', 'ig-title']) {
+    assert.doesNotMatch(decomment(ideaCss), new RegExp('\\.' + c + '(?![\\w-])'),
+      `.${c} was replaced by the archetype's own class and its rule should have gone with it`);
+  }
+});
+
+// ---- 8. the floors are reproducible ----------------------------------------
+
+test('all three pages have a states file that names its surface and its harness', () => {
+  for (const f of ['task.states.json', 'idea.states.json', 'ideas.states.json']) {
+    const json = JSON.parse(read(f));
+    assert.equal(json.surface, 'hall-ui', `${f} names its surface`);
+    assert.ok(Object.keys(json.states).length >= 2, `${f} renders more than one state`);
+    assert.match(json._, /hall-preview/,
+      `${f} must say WHICH harness its states need — the kit's own stub carries no hall feed, so a record renders "no such task" against it`);
+  }
+});
+
+test('the preview harness can reach both record pages', () => {
+  const server = fs.readFileSync(path.join(ROOT, 'scripts', 'hall-preview', 'server.js'), 'utf8');
+  assert.match(server, /\/\^\\\/task\\\/\\d\+\$\//, 'the harness serves /task/:id');
+  assert.match(server, /\/\^\\\/idea\\\/\\d\+\$\//,
+    'and /idea/:id — it was missing, so the idea record fell through to the real gate and 302d to sign-in');
+  for (const f of ['inbox__template.json', 'inbox__sparks.json']) {
+    assert.ok(fs.existsSync(path.join(ROOT, 'scripts', 'hall-preview', 'fixtures', f)),
+      `${f} — without it the composer renders "could not load the idea template" and its five fields are never seen`);
+  }
+});
+
+// ---- 9. the record's data transforms, RUN ----------------------------------
+
+// Boot task.js against a stub DOM + a stub client (the tests/idea_detail_page.mjs
+// pattern) and return the HTML it wrote into #task-body. The page renders by
+// string-building, so this exercises the real render path rather than a
+// re-implementation of it.
+const TASK_SRC = read('task.js');
+
+function renderTask(task, { lastClaim = null, viewer = null, goal = null, status = 200 } = {}) {
+  const els = new Map();
+  const makeEl = () => ({
+    dataset: {}, style: {}, textContent: '', hidden: false, disabled: false, _html: '',
+    classList: { add() {}, remove() {}, toggle() { return false; }, contains() { return false; } },
+    setAttribute() {}, getAttribute() { return null; },
+    _handlers: {},
+    addEventListener(type, fn) { this._handlers[type] = fn; },
+    querySelector() { return makeEl(); }, querySelectorAll() { return []; }, appendChild() {}, remove() {},
+    set innerHTML(v) { this._html = String(v); }, get innerHTML() { return this._html; },
+  });
+  let onReady = null;
+  const documentObj = {
+    title: 'Task — Cloud Bongos',
+    body: { dataset: { page: 'task' } },
+    documentElement: { dataset: {}, style: {}, classList: { add() {}, remove() {} } },
+    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(type, fn) { if (type === 'DOMContentLoaded') onReady = fn; },
+  };
+  const client = {
+    request: async (method, p) => {
+      if (/\/tasks\/\d+/.test(p)) return { status, ok: status === 200, data: status === 200 ? { task, last_claim: lastClaim } : null };
+      if (/\/me$/.test(p)) return { status: 200, ok: true, data: { builder: viewer } };
+      if (/\/goals\//.test(p)) return { status: 200, ok: true, data: { goal } };
+      return { status: 404, ok: false, data: null };
+    },
+  };
+  const escapeHtml = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  const windowObj = {
+    __BRANDING__: { currency: { label: 'credits' } }, __MODULES__: { enabled: {} },
+    BongosClient: { createClient: () => client },
+    OTB: {
+      escapeHtml,
+      $: (sel) => documentObj.querySelector(sel),
+      fmtDate: (iso) => String(iso).slice(0, 10),
+      errCode: (d) => (d && d.error && d.error.code) || null,
+      errMessage: (d) => (d && d.error && d.error.message) || null,
+      categoryChip: () => '',
+      toast() {},
+    },
+    location: { hostname: 'builders.cloudbongos.com', pathname: `/task/${task && task.id ? task.id : '1'}`, origin: 'https://builders.cloudbongos.com', assign() {} },
+    addEventListener() {},
+    confirm: () => true,
+    navigator: { clipboard: { writeText: async () => {} } },
+  };
+  const sandbox = { window: windowObj, document: documentObj, location: windowObj.location, console, setTimeout, clearTimeout, Date };
+  sandbox.globalThis = sandbox;
+  vm.createContext(sandbox);
+  vm.runInContext(TASK_SRC, sandbox, { filename: 'task.js' });
+  assert.ok(onReady, 'task.js registers its DOMContentLoaded boot');
+  return { boot: onReady, html: () => documentObj.getElementById('task-body').innerHTML, sub: () => documentObj.getElementById('task-sub').textContent };
+}
+
+const settle = () => new Promise((r) => setTimeout(r, 0));
+
+const BASE_TASK = {
+  id: '1003305', title: 'A record in the world', status: 'shipped', version_id: 'BONGOS-V1',
+  kind: 'feature', discipline: 'engineer', priority: 1, requires_rank: 'metic',
+  credits_reward: 60, est_minutes: 240, actual_minutes: 37,
+  created_at: '2026-08-28T00:00:00Z', description: 'the description', touches: ['a.js', 'b.js'],
+  dependencies: [], dependents: [],
+};
+
+// The lit beat is the whole point of the component: one of five, and the six GDS
+// statuses fold into it. A mapping that quietly falls back to 0 would light
+// "Claim" on a shipped task and nothing would error.
+test('the lifecycle rail lights exactly one beat, and the right one', async () => {
+  const expected = {
+    backlog: 'Claim', blocked: 'Claim', ready: 'Claim',
+    active: 'Build', completed: 'Grade', confirmed: 'Ship', shipped: 'Credit',
+  };
+  for (const [status, beat] of Object.entries(expected)) {
+    const r = renderTask({ ...BASE_TASK, status });
+    await r.boot(); await settle();
+    const html = r.html();
+    const lit = [...html.matchAll(/<li class="tk-step" aria-current="step">[\s\S]*?<span class="tk-step__n">([^<]+)</g)].map((m) => m[1]);
+    assert.deepEqual(lit, [beat], `status "${status}" lights ${beat}, and only it`);
+    assert.equal((html.match(/aria-current="step"/g) || []).length, 1, `status "${status}" lights exactly one beat`);
+  }
+});
+
+// The first beat's caption is what keeps the rail honest for the three statuses
+// that share it — without it, a `ready` task reads as already claimed.
+test('the first beat says WHICH of the three unclaimed states it is', async () => {
+  const captions = {
+    backlog: /not ready to be claimed yet/,
+    blocked: /waiting on another task/,
+    ready: /waiting for a builder/,
+    active: /one builder, one worktree/,
+  };
+  for (const [status, re] of Object.entries(captions)) {
+    const r = renderTask({ ...BASE_TASK, status });
+    await r.boot(); await settle();
+    assert.match(r.html(), re, `status "${status}" names its own reason`);
+  }
+});
+
+test('the figure band drops absent figures rather than drawing a dash', async () => {
+  const r = renderTask({ ...BASE_TASK, actual_minutes: null });
+  await r.boot(); await settle();
+  const labels = [...r.html().matchAll(/<span class="rec-fig__l">([^<]+)</g)].map((m) => m[1]);
+  assert.ok(!labels.includes('Actual'), 'a task with no recorded actual must not render an empty Actual figure');
+  assert.deepEqual(labels, ['credits', 'Estimated', 'Priority'], 'the figures it DOES carry are all drawn, in order');
+});
+
+test('under two figures there is no band at all — one figure is not a row', async () => {
+  const r = renderTask({ ...BASE_TASK, credits_reward: null, est_minutes: null, actual_minutes: null });
+  await r.boot(); await settle();
+  assert.doesNotMatch(r.html(), /rec-figs/, 'a single figure renders no band');
+});
+
+// The status pill is the one place a lifecycle state is coloured, and it must
+// take the status vocabulary rather than the accent (DESIGN.md §Reuse).
+test('the status pill takes the state vocabulary, and backlog is deliberately neutral', async () => {
+  const tones = {
+    shipped: 'rec-pill--ok', confirmed: 'rec-pill--ok',
+    active: 'rec-pill--info', completed: 'rec-pill--info', ready: 'rec-pill--info',
+    blocked: 'rec-pill--warn',
+  };
+  for (const [status, cls] of Object.entries(tones)) {
+    const r = renderTask({ ...BASE_TASK, status });
+    await r.boot(); await settle();
+    assert.match(r.html(), new RegExp(`class="rec-pill ${cls}">${status}<`), `${status} takes ${cls}`);
+  }
+  const r = renderTask({ ...BASE_TASK, status: 'backlog' });
+  await r.boot(); await settle();
+  assert.match(r.html(), /class="rec-pill">backlog</,
+    'backlog is the NEUTRAL pill: the retired inline block painted it amber like blocked, and "not scheduled yet" is not "something is wrong here"');
+  assert.doesNotMatch(r.html(), /rec-pill--\w+">backlog/, 'and it takes no state tone at all');
+});
+
+test('an open rank floor is said as the absence of one, not "min rank any rank"', async () => {
+  const open = renderTask({ ...BASE_TASK, requires_rank: 'xenos' });
+  await open.boot(); await settle();
+  assert.match(open.html(), /open to any rank/);
+  assert.doesNotMatch(open.html(), /min rank any rank/, 'the label prefix read as a minimum that is not one');
+  const floored = renderTask({ ...BASE_TASK, requires_rank: 'metic' });
+  await floored.boot(); await settle();
+  assert.match(floored.html(), /min rank Metic\+/);
+});
+
+test('the idea grade badge IS the archetype pill, not a private copy of it', () => {
+  const ideaJs = read('idea.js');
+  assert.match(ideaJs, /class="rec-pill rec-pill--\$\{escapeHtml\(GRADE_TONE\[g\]\)\}"/,
+    'gradeBadge() spends the shared component');
+  assert.doesNotMatch(decomment(ideaCss), /\.ig-grade(?![\w-])/,
+    'idea.css carried a near-verbatim copy of .rec-pill down to the token triples — a hundred lines waiting to drift');
+});