@bongos/core 1.24.52 → 1.24.54

package/tests/hall_status_pill.mjs

@@ -0,0 +1,251 @@
+// tests/hall_status_pill.mjs — the hall's one status pill, one status→tone map, one toast,
+// one view toggle, and the components specimen (task 1005086, goal 1000138).
+//
+// The UI audit found a task's status drawn three ways (a mono outline .fact-pill, a filled
+// .rec-pill, plain text) with the colour decided per page, a toast whose hold time drifted per
+// page and that printed whatever a failed fetch said (server addresses included), and a view
+// toggle that lived in one page's sheet. This keeps each one ONE:
+//   * THE MAP — every task status the database allows maps to one tone, in dom-utils.js, and
+//     every hall script that shows a task's status goes through OTB.statusPill;
+//   * THE PILL — controls.css holds the one rule; the older names join it; every tone clears
+//     AA in both modes, measured from the real sheets' tokens (the hall_controls.mjs resolver);
+//   * THE TOAST — a duration per kind, failures read as errors, and plainMessage() strips URLs,
+//     hosts and IPs (watched go red with the sanitiser removed);
+//   * THE SPECIMEN — modules/hall-ui/specimens/components.html shows every component in every
+//     tone, and the kit's states file for it is valid.
+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';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.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 decomment = (css) => css.replace(/\/\*[\s\S]*?\*\//g, '');
+const OTB = require(path.join(HALL, 'dom-utils.js'));
+
+// ── 1. the map ──────────────────────────────────────────────────────────────
+
+// Every status the tasks table allows, read from the migration that set the constraint last.
+function dbStatuses() {
+  const dirs = [path.join(ROOT, 'migrations'), ...fs.readdirSync(path.join(ROOT, 'modules')).map((m) => path.join(ROOT, 'modules', m, 'migrations'))];
+  let last = null;
+  for (const d of dirs) {
+    if (!fs.existsSync(d)) continue;
+    for (const f of fs.readdirSync(d).filter((n) => n.endsWith('.sql')).sort()) {
+      const sql = fs.readFileSync(path.join(d, f), 'utf8');
+      const m = sql.match(/ADD CONSTRAINT tasks_status_check\s+CHECK\s*\(\s*status\s+IN\s*\(([^)]*)\)/i);
+      if (m) last = m[1];
+    }
+  }
+  assert.ok(last, 'found the tasks_status_check constraint');
+  return [...last.matchAll(/'([a-z_]+)'/g)].map((m) => m[1]);
+}
+
+test('every task status the database allows maps to exactly one tone, from the six', () => {
+  const statuses = dbStatuses();
+  assert.ok(statuses.length >= 8, `read ${statuses.length} statuses`);
+  for (const s of statuses) {
+    assert.ok(Object.prototype.hasOwnProperty.call(OTB.STATUS_TONE, s), `${s} has a tone in STATUS_TONE`);
+    assert.ok(OTB.STATUS_TONES.includes(OTB.statusTone(s)), `${s} → a known tone`);
+  }
+  assert.deepEqual(Object.keys(OTB.STATUS_TONE).sort(), [...statuses].sort(), 'the map names no status the database does not have');
+  assert.equal(OTB.statusTone('shipped'), 'ok');
+  assert.equal(OTB.statusTone('blocked'), 'warn');
+  assert.equal(OTB.statusTone('backlog'), 'neutral', 'not scheduled is not a problem: backlog is never amber');
+  assert.equal(OTB.statusTone('no such status'), 'neutral');
+  assert.equal(OTB.statusTone(' Shipped '), 'ok', 'case and spacing do not change the tone');
+});
+
+test('the pill markup: one class, one tone, the word escaped', () => {
+  assert.equal(OTB.statusPill('active'), '<span class="status-pill status-pill--info">active</span>');
+  assert.equal(OTB.statusPill('shipped', { small: true, extraClass: 'x' }), '<span class="status-pill status-pill--ok status-pill--sm x">shipped</span>');
+  assert.equal(OTB.statusPill('feed unavailable', { tone: 'danger' }), '<span class="status-pill status-pill--danger">feed unavailable</span>');
+  assert.match(OTB.statusPill('<b>'), /&lt;b&gt;/);
+  assert.match(OTB.statusPill('ready', { label: 'claimable' }), />claimable</);
+});
+
+test('a task status looks the same on every page: each page that shows one asks the one map', () => {
+  // the pages that render a task's lifecycle status as a word
+  const sites = {
+    'task.js': /OTB\.statusPill\(|window\.OTB\.statusPill\(/,
+    'goal-forest-render.js': /statusPill\(r\.status/,
+    'genesis-home.js': /statusPill\(t\.status/,
+    'idea.js': /statusPill\(row\.status/,
+  };
+  for (const [f, re] of Object.entries(sites)) assert.match(read(f), re, `${f} draws a task status through OTB.statusPill`);
+  // no hall script keeps a private status → tone table any more
+  const hits = [];
+  for (const f of fs.readdirSync(HALL).filter((n) => n.endsWith('.js') && n !== 'dom-utils.js')) {
+    const src = read(f).replace(/\/\/[^\n]*/g, '');
+    if (/\{\s*shipped:\s*'(ok|info|warn|danger)'\s*,\s*confirmed:/.test(src)) hits.push(f);
+  }
+  assert.deepEqual(hits, [], 'a page-local status → tone map would drift from the one in dom-utils.js');
+});
+
+// ── 2. the pill ─────────────────────────────────────────────────────────────
+
+const controls = decomment(read('controls.css'));
+const rulesOf = (css) => [...decomment(css).matchAll(/([^{}]+)\{([^{}]*)\}/g)].map((m) => ({
+  sels: m[1].trim().split(/,(?![^(]*\))/).map((s) => s.trim().replace(/\s+/g, ' ')).filter(Boolean), body: m[2],
+}));
+const prop = (body, name) => { const m = body.match(new RegExp(`(?:^|;)\\s*${name}\\s*:\\s*([^;]+)`)); return m ? m[1].trim() : null; };
+const ruleFor = (sel) => { const r = rulesOf(controls).filter((x) => x.sels.includes(sel)); assert.ok(r.length, `controls.css has ${sel}`); return r; };
+const lastWith = (sel, name) => { const r = ruleFor(sel).filter((x) => prop(x.body, name) !== null); assert.ok(r.length, `${sel} sets ${name}`); return prop(r[r.length - 1].body, name); };
+
+test('the one pill: DESIGN.md\'s chip shape, lowercase, and the older names join it', () => {
+  const base = ruleFor('.status-pill')[0];
+  for (const alias of ['.rec-pill', '.fact-pill', '.gov-pill', '.gate-pill', '.badge']) assert.ok(base.sels.includes(alias), `${alias} is the same pill`);
+  assert.equal(prop(base.body, 'min-height'), '26px');
+  assert.equal(prop(base.body, 'border-radius'), 'var(--radius-pill)');
+  assert.equal(prop(base.body, 'text-transform'), 'lowercase');
+  // the old modifiers land on the shared tones
+  const same = [['.rec-pill--ok', '.status-pill--ok'], ['.fact-pill--achieved', '.status-pill--ok'], ['.fact-pill--blocked', '.status-pill--warn'],
+    ['.fact-pill--open', '.status-pill--info'], ['.fact-pill--archived', '.status-pill--neutral'], ['.rec-pill--danger', '.status-pill--danger']];
+  for (const [a, b] of same) assert.equal(lastWith(a, 'color'), lastWith(b, 'color'), `${a} is ${b}`);
+  // and nobody else draws them any more
+  for (const f of ['style.css', 'record.css']) {
+    const sheet = rulesOf(read(f));
+    const own = sheet.filter((r) => r.sels.some((s) => /^\.(fact-pill|rec-pill)(--[a-z]+)?$/.test(s)) && /(^|;)\s*(color|background|min-height|font-size)\s*:/.test(r.body));
+    assert.deepEqual(own.map((r) => r.sels.join(', ')), [], `${f} re-draws no status pill`);
+  }
+});
+
+// The token resolver from tests/hall_controls.mjs (a test file is not a module).
+const styleSrc = read('style.css');
+const bodyAt = (src, open) => { let d = 0; for (let i = open; i < src.length; i++) { if (src[i] === '{') d++; else if (src[i] === '}' && --d === 0) return src.slice(open + 1, i); } throw new Error('unbalanced'); };
+const declarations = (body) => Object.fromEntries([...decomment(body).matchAll(/(--[\w-]+)\s*:\s*([^;]+);/g)].map((m) => [m[1], m[2].replace(/\s+/g, ' ').trim()]));
+const blockAfter = (src, marker) => { const at = src.indexOf(marker); assert.notEqual(at, -1, marker); return declarations(bodyAt(src, src.indexOf('{', at))); };
+const tokensSrc = fs.readFileSync(path.join(ROOT, 'modules', 'ui-design', 'public', 'tokens.css'), 'utf8');
+const camelToVar = (k) => '--' + k.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
+const PACK = Object.fromEntries(Object.entries(JSON.parse(fs.readFileSync(path.join(ROOT, 'config', 'branding.neutral.json'), 'utf8')).theme.ui.colors).map(([k, v]) => [camelToVar(k), v]));
+const root = blockAfter(styleSrc, '\n:root {');
+const RAW = {
+  light: { ...blockAfter(tokensSrc, ':root {'), ...root, ...PACK },
+  dark: { ...blockAfter(tokensSrc, ':root {'), ...root, ...PACK, ...blockAfter(styleSrc, 'html[data-theme="dark"] {') },
+};
+function resolve(expr, mode, seen = new Set()) {
+  const e = String(expr).trim();
+  if (e === 'transparent') return [0, 0, 0, 0];
+  let m = e.match(/^#([0-9a-f]{6})$/i);
+  if (m) { const n = parseInt(m[1], 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255, 1]; }
+  m = e.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/);
+  if (m) return [+m[1], +m[2], +m[3], m[4] === undefined ? 1 : +m[4]];
+  m = e.match(/^var\(\s*(--[\w-]+)\s*(?:,([\s\S]+))?\)$/);
+  if (m) { const next = RAW[mode][m[1]] ?? m[2]; assert.ok(next !== undefined && !seen.has(m[1]), `${m[1]} in ${mode}`); return resolve(next, mode, new Set([...seen, m[1]])); }
+  m = e.match(/^color-mix\(\s*in\s+srgb\s*,\s*([\s\S]+?)\s+([\d.]+)%\s*,\s*([\s\S]+?)\s*\)$/);
+  if (m) {
+    const p = +m[2] / 100, a = resolve(m[1], mode, seen), b = resolve(m[3], mode, seen);
+    const alpha = a[3] * p + b[3] * (1 - p);
+    return alpha === 0 ? [0, 0, 0, 0] : [0, 1, 2].map((i) => (a[i] * a[3] * p + b[i] * b[3] * (1 - p)) / alpha).concat(alpha);
+  }
+  throw new Error(`cannot resolve ${e}`);
+}
+const kit = require('../modules/ui-design/kit/lib.js');
+
+for (const mode of ['light', 'dark']) {
+  test(`${mode}: every tone's word clears AA on its own fill, on both grounds`, () => {
+    for (const tone of OTB.STATUS_TONES) {
+      const sel = `.status-pill--${tone}`;
+      const fg = lastWith(sel, 'color');
+      const fill = lastWith(sel, 'background');
+      for (const groundExpr of ['var(--bg)', 'var(--bg-card)']) {
+        const ground = resolve(groundExpr, mode);
+        const bg = kit.composite(resolve(fill, mode), ground);
+        const r = kit.contrastRatio(kit.composite(resolve(fg, mode), bg), bg);
+        assert.ok(r >= 4.5, `${mode} ${tone} on ${groundExpr}: ${r.toFixed(2)}:1`);
+      }
+    }
+  });
+}
+
+test('the view toggle is shared: controls.css holds it, goals.css no longer does', () => {
+  ruleFor('.viewtoggle');
+  ruleFor('.viewtoggle__btn');
+  assert.doesNotMatch(decomment(read('goals.css')), /\.viewtoggle\s*\{/, 'goals.css keeps no copy');
+  assert.match(read('goals.html'), /class="viewtoggle"/);
+});
+
+test('the panel is one rule: the card ground, the panel corner, no shadow', () => {
+  const panel = rulesOf(styleSrc).find((r) => r.sels.includes('.scroll') && r.sels.includes('.panel'));
+  assert.ok(panel, '.panel and .scroll are one rule');
+  assert.equal(prop(panel.body, 'background'), 'var(--bg-card)');
+  assert.equal(prop(panel.body, 'border-radius'), 'var(--ds-radius-panel)');
+  assert.equal(prop(panel.body, 'box-shadow'), null, 'a panel never lifts');
+});
+
+// ── 3. the toast ────────────────────────────────────────────────────────────
+
+test('error toasts never show a server address', () => {
+  const cases = [
+    ['Could not reach https://10.0.0.5:8443/api/bongos/claims: try again', /^Could not reach the server: try again$/],
+    ['request to http://localhost:4600/api failed', /^request to the server failed$/],
+    ['connect ECONNREFUSED 127.0.0.1:5432', /^connect ECONNREFUSED the server$/],
+    ['Failed at [2001:db8::1]:443 just now', /^Failed at the server just now$/],
+    ['Could not load builders.cloudbongos.com/api/me', /^Could not load the server$/],
+    ['getaddrinfo ENOTFOUND db.internal', /^getaddrinfo ENOTFOUND the server$/],
+  ];
+  for (const [raw, want] of cases) {
+    const out = OTB.plainMessage(raw);
+    assert.match(out, want, raw);
+    assert.doesNotMatch(out, /\d+\.\d+\.\d+\.\d+|https?:|:\d{2,5}\b|\.com|\.internal/, `${raw} → ${out}`);
+  }
+  // a plain sentence is left alone, file names and versions included
+  for (const s of ['Task 1005086 claimed.', 'Saved work.js and goals.css.', 'Core 1.24.50 is out.', 'Could not save your key. Try again.']) {
+    assert.equal(OTB.plainMessage(s), s);
+  }
+});
+
+test('one toast, a duration per kind; a failure reads as an error even unlabelled', () => {
+  const ms = OTB.TOAST_MS;
+  assert.ok(ms.error > ms.warn && ms.warn > ms.info && ms.info > ms.ok, 'an error stays longest, a confirmation shortest');
+  assert.equal(OTB.toastKind('Could not end that session: HTTP 500'), 'error');
+  assert.equal(OTB.toastKind('That did not go through (409). Try again.'), 'error');
+  assert.equal(OTB.toastKind('Session ended.'), 'info');
+  assert.equal(OTB.toastKind('Session ended.', 'ok'), 'ok');
+  // the live toast: the element shows the plain message, carries the kind, and holds for the kind's time
+  const el = { textContent: '', dataset: {} };
+  const timers = [];
+  const ctx = vm.createContext({ window: {}, document: { querySelector: (s) => (s === '#toast' ? el : null) }, setTimeout: (fn, t) => { timers.push(t); return 1; }, clearTimeout() {}, console });
+  ctx.module = { exports: {} };
+  vm.runInContext(read('dom-utils.js'), ctx);
+  ctx.window.OTB.toast('Could not reach https://10.1.2.3:9000/x');
+  assert.equal(el.textContent, 'Could not reach the server');
+  assert.equal(el.dataset.kind, 'error');
+  assert.equal(el.dataset.visible, '1');
+  assert.equal(timers.pop(), ms.error);
+  ctx.window.OTB.toast('Saved.', { kind: 'ok' });
+  assert.equal(timers.pop(), ms.ok);
+  ctx.window.OTB.toast('Saved.', { duration: 1234 });
+  assert.equal(timers.pop(), 1234, 'an explicit duration still wins');
+});
+
+test('an error toast reads as one: the danger ground with the card ink, in both modes', () => {
+  const r = rulesOf(styleSrc).find((x) => x.sels.includes('.toast[data-kind="error"]'));
+  assert.ok(r, 'style.css styles the error toast');
+  for (const mode of ['light', 'dark']) {
+    const bg = resolve(prop(r.body, 'background'), mode);
+    const ratio = kit.contrastRatio(kit.composite(resolve(prop(r.body, 'color'), mode), bg), bg);
+    assert.ok(ratio >= 4.5, `${mode}: ${ratio.toFixed(2)}:1`);
+  }
+});
+
+// ── 4. the specimen ─────────────────────────────────────────────────────────
+
+test('the components specimen shows every component, every tone, and the kit can render it', () => {
+  const dir = path.join(ROOT, 'modules', 'hall-ui', 'specimens');
+  const html = fs.readFileSync(path.join(dir, 'components.html'), 'utf8');
+  for (const tone of OTB.STATUS_TONES) assert.match(html, new RegExp(`status-pill--${tone}\\b`), `the ${tone} tone`);
+  for (const part of ['class="scroll', 'class="empty-state"', 'class="hall-loading"', 'id="spec-toasts"', 'class="kit-tabs"', 'class="viewtoggle"', 'class="btn"', 'class="hall-dialog"', 'id="spec-task-statuses"']) {
+    assert.ok(html.includes(part), `the specimen shows ${part}`);
+  }
+  assert.match(html, /href="\/modules\/hall-ui\/public\/style\.css"/, 'it draws with the hall\'s own sheet');
+  const states = JSON.parse(fs.readFileSync(path.join(dir, 'components.states.json'), 'utf8'));
+  const v = kit.validateStatesFile(states);
+  assert.ok(v.ok, (v.errors || []).join('; '));
+  assert.equal(states.surface, 'modules/hall-ui/specimens');
+});

package/tests/helpers.mjs

@@ -636,6 +636,7 @@ export function bootProfilePage({ signedIn = true, trail = [], roles = ['ideator
       roleIsUnset: (d) => !d || d === 'unclassified',
       ROLE_UNSET: 'unclassified',
       escapeHtml: realOTB().escapeHtml, // the real one (task 1004876)
+      statusPill: realOTB().statusPill, // the one status pill (task 1005086)
       $: (sel) => documentObj.querySelector(sel),
       fmtNum: (n) => String(n ?? 0),
       fmtDate: (iso) => String(iso ?? '').slice(0, 10),
@@ -750,6 +751,7 @@ export function bootIdeaPage({ idea = null, status = 200, template = null, viewe
     BongosClient: { createClient: () => client },
     OTB: {
       escapeHtml: realOTB().escapeHtml, // the real one (task 1004876)
+      statusPill: realOTB().statusPill, // the one status pill (task 1005086)
       $: (sel) => documentObj.querySelector(sel),
       fmtDate: (iso) => String(iso ?? '').slice(0, 10),
       toast() {},

package/tests/idea_descent_surface.mjs

@@ -115,7 +115,8 @@ function rowsOf(html) {
       id,
       mark: m[1],
       depth: Number(m[2]),
-      meta: (/<span class="ig-desc__meta">([\s\S]*?)<\/span>/.exec(body) || [])[1] || '',
+      // to the meta's own line end: it holds a status pill (a span of its own) since task 1005086
+      meta: (/<span class="ig-desc__meta">([^\n]*)<\/span>\n/.exec(body) || [])[1] || '',
       title: (/<a class="ig-desc__title"[^>]*>([\s\S]*?)<\/a>/.exec(body) || [])[1] || '',
       href: (/<a class="ig-desc__title" href="([^"]+)"/.exec(body) || [])[1] || '',
     });