@bongos/core 1.19.1064 → 1.19.1065

package/tests/hall_approval_queue.mjs

@@ -0,0 +1,327 @@
+// tests/hall_approval_queue.mjs — the Approval queue panel (task 1004323 /
+// BV2.TW12, ADR 0341 D7; docs/design/mocks/tweak-mode/Main.dc.html).
+//
+// Boots the REAL panel: approval-queue-lib.js and approval-queue.js in a vm
+// over a mini-DOM, against a stub client. What the client answers for the
+// queue is built by the REAL composer (page-status.js composeApprovals) over
+// round descriptions the REAL pages.js wrote, so the panel is tested on the
+// route's own shape, never a hand-written literal of it.
+//
+// The done-when, as far as a panel can prove it: open the queue from the studio
+// (1 of 2), flip before and after over the applied page's renders, approve and
+// ship (the page's next status and the next page named), send one back with a
+// note, with no terminal.
+
+import { strict as assert } from 'node:assert';
+import { createRequire } from 'node:module';
+import fs from 'node:fs';
+import path from 'node:path';
+import vm from 'node:vm';
+import { fileURLToPath } from 'node:url';
+import { makeRunner, makeEl, walk, settle } from './helpers.mjs';
+
+const require = createRequire(import.meta.url);
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const PUB = path.join(ROOT, 'modules/hall-ui/public');
+const read = (f) => fs.readFileSync(path.join(PUB, f), 'utf8');
+const lib = require('../modules/hall-ui/public/approval-queue-lib.js');
+const pages = require('../modules/copy-desk/pages.js');
+const pageStatus = require('../modules/copy-desk/page-status.js');
+
+const { test, summary } = makeRunner();
+
+// ── the queue, through the real composer ───────────────────────────────────
+const INVENTORY = {
+  pages: [
+    { id: 'landing:index', surface: 'landing', title: '{{productName}}: {{tagline}}', path: '/' },
+    { id: 'landing:projects', surface: 'landing', title: 'Projects', path: '/projects' },
+  ],
+};
+const ME = '7';
+function round({ id, pageId, n, lines, refused = [], appliedAt, artist = ME }) {
+  const description = [
+    `Page tweak round ${n}.`,
+    pages.composeBatchBlock({ page_id: pageId, reading_hash: 'h', submitted_at: '2026-09-19T00:00:00Z', lines: lines.map((l) => ({ ...l, placement: 'placed', file: 'x.html', line: 1, string_id: 'a' })) }),
+    pages.composeAppliedBlock({ page_id: pageId, applied_at: appliedAt, reading_hash_after: 'h2', lines_after: lines.map((l) => l.after), refused }),
+  ].join('\n\n');
+  return { id, status: 'completed', grade_passed: true, description, source_ref: pages.roundSourceRef(pageId, n), holder_id: null, artist_id: artist, artist_login: 'me' };
+}
+const TASKS = [
+  { id: 40, status: 'shipped', description: '', source_ref: pages.roundSourceRef('landing:index', 1), shipped_at: '2026-09-01T00:00:00Z' },
+  round({
+    id: 41, pageId: 'landing:index', n: 2, appliedAt: '2026-09-21T00:00:00Z',
+    lines: [
+      { key: 'L0003', section: 'hero', before: 'AI agents claim tasks and ship the code.', after: 'Agents write the code.' },
+      { key: 'L0004', section: 'hero', before: '<img src=x onerror="window.pwned=1">', after: 'safe' },
+    ],
+    refused: [{ key: 'L0004', code: 'target_gone' }],
+  }),
+  round({ id: 42, pageId: 'landing:projects', n: 1, appliedAt: '2026-09-22T00:00:00Z', lines: [{ key: 'L0002', section: 'list', before: 'Every project', after: 'All the projects' }] }),
+];
+const queueFor = ({ crafts = ['artist'], tasks = TASKS } = {}) => ({ ok: true, ...pageStatus.composeApprovals({ inventory: INVENTORY, tasks, builderId: ME, crafts }) });
+const url = (task, slot) => `/api/bongos/task-visuals/task-${task}-${String(slot.length).padStart(2, '0')}${'ab'.repeat(7)}.jpg`;
+const slotsFor = (task, only = lib.PHASES.flatMap((p) => lib.DEVICES.flatMap((d) => lib.MODES.map((m) => lib.slotName(p, d, m))))) =>
+  ({ ok: true, task_id: String(task), slots: only.map((slot) => ({ slot, visual_url: url(task, slot), visual_alt: slot })) });
+
+// vm-born objects fail a strict deepEqual on their prototype, so what the panel
+// sent is compared through JSON.
+// ── the mini-DOM ────────────────────────────────────────────────────────────
+function augment(el) {
+  if (el._aug) return el;
+  el._aug = true;
+  Object.defineProperty(el, 'hidden', { get() { return 'hidden' in el.attrs; }, set(v) { if (v) el.attrs.hidden = ''; else delete el.attrs.hidden; }, configurable: true });
+  el.focus = () => { boot.focused = el; };
+  return el;
+}
+let boot = null;
+
+function bootPanel({ answers = {}, writes = null, mode = 'light' } = {}) {
+  const body = augment(makeEl('body', {}));
+  const classes = new Set();
+  const requests = [];
+  const counts = [];
+  const byId = (id) => walk(body, (c) => (c.id === id ? c : null));
+  const documentObj = {
+    body,
+    documentElement: {
+      getAttribute: (k) => (k === 'data-theme' ? mode : null),
+      classList: { add: (c) => classes.add(c), remove: (c) => classes.delete(c), contains: (c) => classes.has(c) },
+    },
+    getElementById: byId,
+    createElement: (tag) => augment(makeEl(tag, {})),
+    get activeElement() { return boot.focused || null; },
+  };
+  const api = {
+    async request(method, u, reqBody) {
+      requests.push({ method, url: u, body: reqBody });
+      const key = `${method} ${u}`;
+      const hit = answers[key];
+      const val = typeof hit === 'function' ? hit(reqBody) : hit;
+      if (val === undefined) return { ok: false, status: 404, data: { error: { code: 'no_answer', message: key } } };
+      return val.__status ? { ok: false, status: val.__status, data: val.data } : { ok: true, status: 200, data: val };
+    },
+  };
+  const win = { matchMedia: () => ({ matches: false }) };
+  const ctx = vm.createContext({ window: win, document: documentObj, console, setTimeout, clearTimeout, encodeURIComponent });
+  win.window = win;
+  vm.runInContext(read('approval-queue-lib.js'), ctx, { filename: 'approval-queue-lib.js' });
+  vm.runInContext(read('approval-queue.js'), ctx, { filename: 'approval-queue.js' });
+  const panel = win.OTBApprovalQueue.mount({
+    api,
+    apiBase: '/api/bongos',
+    writes: writes || {
+      approve: (p) => `/api/bongos/copy-desk/pages/${p}/approve`,
+      sendBack: (p) => `/api/bongos/copy-desk/pages/${p}/send-back`,
+    },
+    onCount: (n) => counts.push(n),
+  });
+  const scrim = body.children[0];
+  const q = (sel) => scrim.querySelector(sel);
+  const qa = (sel) => scrim.querySelectorAll(sel);
+  const click = async (el) => { assert.ok(el, 'the control exists'); scrim.fire('click', { target: el }); await settle(); await settle(); };
+  boot = { body, scrim, q, qa, click, requests, counts, panel, classes, win, focused: null };
+  return boot;
+}
+
+const APPROVALS = 'GET /api/bongos/copy-desk/approvals';
+const vis = (id) => `GET /api/bongos/tasks/${id}/visuals`;
+const text = (el) => (el ? el.textContent.replace(/\s+/g, ' ').trim() : null);
+
+// ── the pure rules: every word the panel says ──────────────────────────────
+
+await test('lib: the artboard\'s words, from the route\'s own shape', () => {
+  const [home, projects] = queueFor().queue;
+  assert.equal(lib.eyebrow(home), 'approval queue · 1 of 2');
+  assert.equal(lib.eyebrow(projects), 'approval queue · 2 of 2');
+  assert.equal(lib.displayTitle(home), 'Home', 'an apex template title is Home, the artboard\'s own word');
+  assert.equal(lib.subLine(home), '· landing · 1 line rewritten, applied · 1 not applied');
+  assert.equal(lib.subLine(projects), '· landing · 1 line rewritten, applied');
+  assert.equal(lib.doorDetail(2), '2 pages applied, waiting for you');
+  assert.equal(lib.doorDetail(1), '1 page applied, waiting for you');
+  assert.equal(lib.doorDetail(0), 'nothing waiting for you');
+  assert.equal(lib.approvedLine(home, { status_after: 'Text tweaked 3x', next: { page: { title: 'Contact' } } }),
+    'Approved. It ships now, and Home reads text tweaked 3x. Next in the queue: Contact.', 'the artboard line, word for word');
+  assert.equal(lib.approvedLine(home, { status_after: 'Text tweaked 2x', next: { page: null } }), 'Approved. It ships now, and Home reads text tweaked 2x. Nothing else is waiting.');
+  assert.equal(lib.sentBackLine(), 'Sent back with your note. It comes back to the queue once it is re-applied.');
+  assert.equal(lib.noteProblem('too long'), 'Say what needs changing in at least 10 characters.');
+  assert.equal(lib.noteProblem('The hero line is too long on a phone.'), null);
+});
+
+await test('lib: renders are picked by view, fall back to the nearest, and only server-minted URLs are kept', () => {
+  const idx = lib.renderIndex([
+    { slot: 'after-desktop-dark', visual_url: url(41, 'after-desktop-dark') },
+    { slot: 'after-phone-light', visual_url: url(41, 'after-phone-light') },
+    { slot: 'before-desktop-light', visual_url: 'https://evil.example/x.jpg' },
+    { slot: 'not-a-render', visual_url: url(41, 'not-a-render') },
+  ]);
+  assert.deepEqual(Object.keys(idx).sort(), ['after-desktop-dark', 'after-phone-light'], 'a foreign URL and an unknown slot are dropped');
+  const light = lib.pickRender(idx, { phase: 'after', device: 'desktop', mode: 'light' });
+  assert.equal(light.slot, 'after-desktop-dark');
+  assert.equal(light.exact, false, 'the other colour mode first, and it says so');
+  assert.equal(lib.pickRender(idx, { phase: 'after', device: 'phone', mode: 'light' }).exact, true);
+  assert.equal(lib.pickRender(idx, { phase: 'before', device: 'desktop', mode: 'light' }), null);
+});
+
+await test('lib: a changed line is marked after, and plain before; a refused line says why', () => {
+  const [home] = queueFor().queue;
+  const [ok, refused] = home.lines;
+  assert.deepEqual(lib.lineRow(ok, 'after'), { key: 'L0003', section: 'hero', text: 'Agents write the code.', marked: true, aside: 'was: AI agents claim tasks and ship the code.', refused: false });
+  assert.deepEqual(lib.lineRow(ok, 'before'), { key: 'L0003', section: 'hero', text: 'AI agents claim tasks and ship the code.', marked: false, aside: 'becomes: Agents write the code.', refused: false });
+  const r = lib.lineRow(refused, 'after');
+  assert.equal(r.marked, false, 'a refused line never looks applied');
+  assert.equal(r.aside, 'not applied: the page no longer shows it');
+});
+
+// ── the panel ───────────────────────────────────────────────────────────────
+
+await test('open: the queue\'s head, the applied page\'s render, and the words beside it', async () => {
+  const b = bootPanel({ answers: { [APPROVALS]: queueFor(), [vis(41)]: slotsFor(41) } });
+  assert.equal(b.scrim.hidden, true, 'closed until opened');
+  await b.panel.open();
+  await settle(); await settle();
+  assert.equal(b.scrim.hidden, false);
+  assert.ok(b.classes.has('aq-open'), 'the page behind stops scrolling');
+  assert.equal(text(b.q('.aq-eyebrow')), 'approval queue · 1 of 2');
+  assert.equal(text(b.q('.aq-title')), 'Home · landing · 1 line rewritten, applied · 1 not applied');
+  const img = b.q('img');
+  assert.equal(img.attrs.src, url(41, 'after-desktop-light'), 'the AFTER render, desktop, in the hall\'s own mode');
+  assert.equal(img.attrs.alt, 'Home, after, desktop, light');
+  assert.deepEqual(b.qa('[data-phase]').map((x) => [text(x), x.attrs['aria-pressed']]), [['before', 'false'], ['after', 'true']]);
+  assert.equal(b.qa('mark').length, 1, 'one applied line carries the mark');
+  assert.equal(text(b.q('mark')), 'Agents write the code.');
+  assert.match(text(b.q('.aq-line--refused')), /not applied: the page no longer shows it/);
+  assert.equal(b.body.querySelectorAll('img').length, 1, 'a hostile line is text, never markup');
+  assert.equal(b.win.pwned, undefined);
+  assert.equal(text(b.q('.aq-hint')), 'highlighted: the words you changed');
+  assert.deepEqual(b.counts, [2], 'the door hears how many wait');
+  assert.ok(!b.requests.some((r) => r.method !== 'GET'), 'opening writes nothing');
+});
+
+await test('the switches: before and after, desktop and phone, light and dark, each a render of the applied branch', async () => {
+  const b = bootPanel({ answers: { [APPROVALS]: queueFor(), [vis(41)]: slotsFor(41) } });
+  await b.panel.open(); await settle(); await settle();
+  await b.click(b.q('[data-phase="before"]'));
+  assert.equal(b.q('img').attrs.src, url(41, 'before-desktop-light'));
+  assert.equal(b.qa('mark').length, 0, 'before is the page as it was: nothing marked');
+  await b.click(b.q('[data-device="phone"]'));
+  assert.equal(b.q('img').attrs.src, url(41, 'before-phone-light'));
+  assert.match(b.q('img').attrs.class, /aq-render--phone/);
+  await b.click(b.q('[data-mode="dark"]'));
+  assert.equal(b.q('img').attrs.src, url(41, 'before-phone-dark'));
+  assert.equal(b.requests.filter((r) => r.url.endsWith('/visuals')).length, 1, 'the renders are read once per round');
+});
+
+await test('a missing render says what it shows instead; no renders at all means nothing to approve from', async () => {
+  const b = bootPanel({ answers: { [APPROVALS]: queueFor(), [vis(41)]: slotsFor(41, ['after-desktop-dark']) } });
+  await b.panel.open(); await settle(); await settle();
+  assert.equal(b.q('img').attrs.src, url(41, 'after-desktop-dark'));
+  assert.equal(text(b.q('.aq-frame__swap')), 'No desktop light render; showing desktop dark.');
+  const none = bootPanel({ answers: { [APPROVALS]: queueFor(), [vis(41)]: slotsFor(41, []) } });
+  await none.panel.open(); await settle(); await settle();
+  assert.equal(none.q('img'), null);
+  assert.match(text(none.q('.aq-frame__note')), /No render is attached/);
+  assert.ok(none.q('[data-approve]').disabled, 'approve waits for a picture of the page');
+  assert.ok(!none.q('[data-open-note]').disabled, 'sending it back does not');
+});
+
+await test('approve and ship: one POST through the host\'s write, then the artboard\'s line and the next page', async () => {
+  const b = bootPanel({
+    answers: {
+      [APPROVALS]: queueFor(),
+      [vis(41)]: slotsFor(41),
+      'POST /api/bongos/copy-desk/pages/landing:index/approve': { ok: true, outcome: 'approved', status_after: 'Text tweaked 2x', next: { count: 1, page: { page_id: 'landing:projects', title: 'Projects', path: '/projects' } } },
+    },
+  });
+  await b.panel.open(); await settle(); await settle();
+  await b.click(b.q('[data-approve]'));
+  const posts = JSON.parse(JSON.stringify(b.requests.filter((r) => r.method === 'POST')));
+  assert.deepEqual(posts, [{ method: 'POST', url: '/api/bongos/copy-desk/pages/landing:index/approve', body: { task_id: '41' } }], 'the round the artist looked at is pinned');
+  assert.equal(text(b.q('.aq-outcome')), 'Approved. It ships now, and Home reads text tweaked 2x. Next in the queue: Projects.');
+  assert.equal(b.q('[data-approve]'), null, 'decided: the buttons are gone');
+  assert.deepEqual(b.counts, [2, 1]);
+  await b.click(b.q('[data-next]'));
+  assert.equal(text(b.q('.aq-eyebrow')), 'approval queue · 2 of 2');
+  assert.equal(text(b.q('.aq-title')).startsWith('Projects'), true);
+});
+
+await test('send it back: the note opens in place, a short one is refused here, a real one is sent', async () => {
+  const b = bootPanel({
+    answers: {
+      [APPROVALS]: queueFor(),
+      [vis(41)]: slotsFor(41),
+      'POST /api/bongos/copy-desk/pages/landing:index/send-back': (body) => ({ ok: true, outcome: 'sent_back', sent_back: { note: body.note }, next: { count: 1, page: null } }),
+    },
+  });
+  await b.panel.open(); await settle(); await settle();
+  await b.click(b.q('[data-open-note]'));
+  const input = b.q('#aq-note');
+  assert.ok(input, 'the note field opens');
+  assert.equal(input.attrs.placeholder, 'The hero line is too long on a phone.');
+  assert.equal(b.q('[data-open-note]'), null, 'send it back gives way to the note and send');
+  input.value = 'too long';
+  await b.click(b.q('[data-send]'));
+  assert.equal(b.requests.filter((r) => r.method === 'POST').length, 0, 'a short note never leaves the panel');
+  assert.equal(text(b.q('.aq-error')), 'Say what needs changing in at least 10 characters.');
+  b.q('#aq-note').value = '  The hero line is   too long on a phone. ';
+  await b.click(b.q('[data-send]'));
+  const posts = JSON.parse(JSON.stringify(b.requests.filter((r) => r.method === 'POST')));
+  assert.deepEqual(posts.map((p) => [p.url, p.body]), [['/api/bongos/copy-desk/pages/landing:index/send-back', { task_id: '41', note: 'The hero line is too long on a phone.' }]]);
+  assert.equal(text(b.q('.aq-outcome')), 'Sent back with your note. It comes back to the queue once it is re-applied.');
+});
+
+await test('a refusal is the server\'s words, and nothing is marked decided', async () => {
+  const b = bootPanel({
+    answers: {
+      [APPROVALS]: queueFor(),
+      [vis(41)]: slotsFor(41),
+      'POST /api/bongos/copy-desk/pages/landing:index/approve': { __status: 409, data: { error: { code: 'round_moved', details: { what_this_means: 'The page waiting now is a different round.' } } } },
+    },
+  });
+  await b.panel.open(); await settle(); await settle();
+  await b.click(b.q('[data-approve]'));
+  assert.equal(text(b.q('.aq-error')), 'The page waiting now is a different round.');
+  assert.ok(b.q('[data-approve]'), 'still deciding');
+  assert.deepEqual(b.counts, [2]);
+});
+
+await test('a builder who may not decide reads the queue with a sentence, not two dead buttons', async () => {
+  const b = bootPanel({ answers: { [APPROVALS]: queueFor({ crafts: ['engineer'], tasks: TASKS.map((t) => ({ ...t, artist_id: '99' })) }), [vis(41)]: slotsFor(41) } });
+  await b.panel.open(); await settle(); await settle();
+  assert.equal(b.q('[data-approve]'), null);
+  assert.equal(b.q('[data-open-note]'), null);
+  assert.match(text(b.q('.aq-sealed')), /Only the artist who wrote this page, or another artist/);
+});
+
+await test('empty, closed with Escape, and focus goes back where it was', async () => {
+  const b = bootPanel({ answers: { [APPROVALS]: queueFor({ tasks: [] }) } });
+  const opener = { focus() { boot.focused = opener; } };
+  b.focused = opener;
+  await b.panel.open(); await settle();
+  assert.equal(text(b.q('.aq-title')), 'Nothing waiting');
+  assert.match(text(b.q('.aq-frame__note')), /Nothing is waiting for you/);
+  b.scrim.fire('keydown', { key: 'Escape', preventDefault() {}, target: b.scrim });
+  assert.equal(b.scrim.hidden, true);
+  assert.equal(b.focused, opener);
+  assert.ok(!b.classes.has('aq-open'));
+  assert.deepEqual(b.counts, [0]);
+});
+
+// ── the writes: only the host's, and the host's are the studio's allowlist ──
+
+await test('the panel writes only through the writes it is handed; the studio hands it its own WRITE_ROUTES', () => {
+  const src = read('approval-queue.js').replace(/^\s*\/\/.*$/gm, '');
+  const sites = [...src.matchAll(/\.request\(\s*'(POST|PATCH|PUT|DELETE)'\s*,\s*([^,)]+)/g)].map((m) => [m[1], m[2].trim()]);
+  assert.deepEqual(sites, [['POST', 'url']], 'exactly one write site');
+  assert.match(src, /const url = kind === 'approved' \? writes\.approve\(item\.page_id\) : writes\.sendBack\(item\.page_id\);/);
+  assert.equal(/copy-desk\/pages|\/visual\b|\/confirm\b|\/ship\b|\/claims\b|proposals/.test(src.replace(/\/copy-desk\/approvals|\/visuals`/g, '')), false,
+    'no route is named here but the two reads');
+  const studio = read('studio.js');
+  assert.match(studio, /approve: \(pageId\) => `\$\{API\}\/copy-desk\/pages\/\$\{pageId\}\/approve`,/);
+  assert.match(studio, /sendBack: \(pageId\) => `\$\{API\}\/copy-desk\/pages\/\$\{pageId\}\/send-back`,/);
+  assert.match(studio, /writes: \{ approve: WRITE_ROUTES\.approve, sendBack: WRITE_ROUTES\.sendBack \}/);
+  const html = read('studio.html');
+  assert.ok(html.indexOf('approval-queue-lib.js') < html.indexOf('approval-queue.js"') && html.indexOf('approval-queue.js"') < html.indexOf('studio.js?'), 'the lib, the panel, then the studio');
+  assert.match(html, /id="studio-approvals"[^>]*aria-haspopup="dialog"/);
+});
+
+summary();

package/tests/hall_audit.mjs

@@ -429,6 +429,10 @@ const LITERAL_EXEMPT = {
   // studio, the glass bar, and a sheet of PAPER that stays paper in both modes,
   // so its palette cannot be the hall's mode-flipping tier. The sky precedent.
   'tweak-editor.css': 'the tweak editor\'s stage is the artboard\'s own palette (task 1004321, the pixel contract: paper in both modes)',
+  // The Approval queue (task 1004323 / BV2.TW12): the glass dialog of
+  // docs/design/mocks/tweak-mode/Main.dc.html, built 1:1. Glass over the night
+  // studio in both modes, so its palette sits on the panel's own root.
+  'approval-queue.css': 'the Approval queue\'s glass is the artboard\'s own palette (task 1004323, the pixel contract: night glass in both modes)',
 };
 const COLOUR_PROPS = 'color|background|background-color|border|border-color|border-top-color|border-bottom-color|fill|stroke|outline|outline-color|box-shadow|text-shadow';
 const colourLiteralRe = () =>