@bongos/core 1.24.51 → 1.24.52

package/tests/hall_dialog.mjs

@@ -0,0 +1,401 @@
+// tests/hall_dialog.mjs — the hall's ONE dialog and its branded confirm (task 1005085, goal 1000138).
+//
+// WHY. The UI audit found six dialog builds (attn, cd, mw, aq, ov, st) and fourteen window.confirm()
+// calls. modules/hall-ui/public/hall-dialog.js replaces both. This proves three things:
+//   1. the component, in a real browser: role + aria-modal + labelled by its title, focus trapped,
+//      Escape closes the TOP dialog only and hands focus back to the trigger, the scrim closes, the
+//      confirm resolves true only on its confirm button, and it wears the shared layer, shadow and
+//      panel corner (skips when the machine has no system Edge or Chrome, as ui_design_kit_fit does);
+//   2. every replaced confirm flow: the REAL function, lifted out of its page script, asks the
+//      branded confirm (what will happen, in words) and runs its write only when the answer is yes;
+//   3. the guards: no window.confirm anywhere in modules/hall-ui, and each of the six builds now
+//      runs on OTBDialog with no scrim/backdrop rule of its own.
+import assert from 'node:assert/strict';
+import { test, after } from 'node:test';
+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';
+
+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(path.join(ROOT, 'modules', 'ui-design', 'kit', 'lib.js'));
+
+// ── the source helpers ──────────────────────────────────────────────────────
+
+// Comments out, strings kept: a mention of window.confirm in a comment is history, not a call.
+function stripComments(src) {
+  return src
+    .replace(/<!--[\s\S]*?-->/g, '')
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/(^|[^:'"`\\])\/\/[^\n]*/g, '$1');
+}
+
+// The source of `function name(...) { ... }` (async or not), by brace matching. The flows below
+// hold no unbalanced brace in a string, and the vm compile is the check that the cut is whole.
+function extractFn(src, name) {
+  const m = new RegExp(`(?:async\\s+)?function\\s+${name}\\s*\\(`).exec(src);
+  assert.ok(m, `function ${name} is in the source`);
+  let i = src.indexOf('{', src.indexOf(')', m.index + m[0].length - 1));
+  let depth = 0;
+  for (let j = i; j < src.length; j++) {
+    if (src[j] === '{') depth++;
+    else if (src[j] === '}') { depth--; if (depth === 0) return src.slice(m.index, j + 1); }
+  }
+  throw new Error(`unbalanced function ${name}`);
+}
+
+// Run one real flow function with its page's free names stubbed. `answer` is what the branded
+// confirm returns. Reports the confirms asked and the writes sent.
+async function runFlow(file, name, args, { answer, globals = {} } = {}) {
+  const asked = [];
+  const writes = [];
+  const record = (m, u, b) => { writes.push({ method: m, url: String(u), body: b }); return { ok: true, status: 200, data: { permission_count: 3 } }; };
+  const window = {
+    OTBDialog: { confirm: async (o) => { asked.push(o); return answer; } },
+    location: { assign() {} },
+    confirm: () => { throw new Error('window.confirm was called'); },
+  };
+  const ctx = vm.createContext({
+    window,
+    API: '/api/bongos',
+    api: { request: async (m, u, o) => record(m, u, o && o.body) },
+    postJSON: async (u, b) => record('POST', u, b),
+    sendJson: async (m, u) => record(m, u),
+    claimAction: {
+      release: async (c, t) => { record('POST', `/claims/${c}/resolve`, { task: t }); return { ok: true }; },
+      releaseMany: async (e) => { record('POST', '/claims/batch/release', e); return { ok: true }; },
+    },
+    toast() {}, render: async () => {}, reloadRanks: async () => {}, toAuth() {}, curLabel: () => 'credits',
+    fail: (r) => new Error(String(r.status)), deleteRefusal: () => '',
+    renderArtKeyCard() {}, wireArtKeyCard() {},
+    $: () => null,
+    console,
+    ...globals,
+  });
+  const fn = vm.runInContext(`(${extractFn(read(file), name)})`, ctx);
+  await fn(...args);
+  return { asked, writes };
+}
+
+const fakeBtn = () => ({ disabled: false, textContent: '' });
+
+// Every replaced window.confirm, as { file, fn, args, globals, write: what the yes sends }.
+const FLOWS = [
+  { flow: 'end the session you are using', file: 'settings-sessions.js', fn: 'endOne',
+    args: () => [{ closest: () => ({ getAttribute: () => 's1', querySelector: () => ({}) }), disabled: false }],
+    write: /me\/sessions\/revoke$/ },
+  { flow: 'sign out everywhere', file: 'settings-sessions.js', fn: 'endAll',
+    args: () => [], globals: { $: () => fakeBtn() }, write: /revoke-all/ },
+  { flow: 'remove a passkey card', file: 'settings-passkeys.js', fn: 'remove', args: () => ['cred-1'], write: /passkeys\/remove/ },
+  { flow: 'remove an AI studio key', file: 'settings-ai-keys.js', fn: 'removeKey', args: () => ['openai', 'OpenAI'], write: /ai-studio\/keys\/openai/ },
+  { flow: 'remove the image-generation key', file: 'settings.js', fn: 'removeArtKey', args: () => [], write: /art-key\/own/ },
+  { flow: 'reset a rank to its defaults', file: 'government.js', fn: 'resetRank',
+    args: () => [{ rank_key: 'metic', label: 'Metic' }, fakeBtn()], write: /ranks\/metic\/reset/ },
+  { flow: 'delete a rank', file: 'government.js', fn: 'deleteRank',
+    args: () => [{ rank_key: 'scribe', label: 'Scribe' }, fakeBtn()], write: /ranks\/scribe$/ },
+  { flow: 'release a claim on /work', file: 'work.js', fn: 'doRelease',
+    args: () => [11, 1001, fakeBtn()], globals: { pending: new Set() }, write: /claims\/11\/resolve/ },
+  { flow: 'release a claim on a goal', file: 'goals-page.js', fn: 'doGoalRelease',
+    args: () => [12, 1002, fakeBtn()], globals: { pendingClaims: new Set() }, write: /claims\/12\/resolve/ },
+  { flow: 'confirm a verify task', file: 'task.js', fn: 'confirmTask',
+    args: () => [{ id: 1003, kind: 'verify' }, fakeBtn()],
+    globals: { runLifecycle: (b, u, body) => ({ __w: true, u, body }) }, write: /tasks\/1003\/confirm/, lifecycle: true },
+  { flow: 'retire a task', file: 'task.js', fn: 'retireTask',
+    args: () => [{ id: 1004 }, fakeBtn(), 'superseded by 1005'],
+    globals: { runWrite: async (b, fn) => fn(), abandonOpen: true }, write: /tasks\/1004\/abandon/ },
+  { flow: 'delete a saved view', file: 'hall-kit.js', fn: 'deleteView',
+    args: () => [{ id: 5, name: 'Mine' }],
+    globals: { act: (fn) => fn(), call: (m, u) => ({ m, u }), pageQ: 'page=work' }, write: /\/5\?page=work/, viewCall: true },
+];
+
+for (const f of FLOWS) {
+  test(`${f.flow}: the branded confirm says what happens, and the write runs only on yes`, async () => {
+    const extra = { ...(f.globals || {}) };
+    // task.js hands the write to runLifecycle; the saved-view menu hands it to call(). Record both.
+    let sent = [];
+    if (f.lifecycle) extra.runLifecycle = (b, u, body) => { sent.push({ url: u, body }); };
+    if (f.viewCall) extra.call = (m, u) => { sent.push({ url: u, method: m }); };
+    const no = await runFlow(f.file, f.fn, f.args(), { answer: false, globals: extra });
+    const noSent = sent; sent = [];
+    assert.equal(no.asked.length, 1, 'the confirm is shown once');
+    const o = no.asked[0];
+    assert.ok(o.title && o.title.length > 3, 'it has a title');
+    assert.ok(o.body && o.body.length > 10, 'its body says what will happen');
+    assert.ok(o.confirmLabel, 'the confirm button names the act');
+    assert.equal(no.writes.filter((w) => f.write.test(w.url)).length + noSent.filter((w) => f.write.test(w.url)).length, 0,
+      'Cancel sends nothing');
+    const yes = await runFlow(f.file, f.fn, f.args(), { answer: true, globals: extra });
+    assert.equal(yes.asked.length, 1);
+    assert.equal(yes.writes.filter((w) => f.write.test(w.url)).length + sent.filter((w) => f.write.test(w.url)).length, 1,
+      'the yes sends the write, once');
+  });
+}
+
+test('a verify-kind confirm attests the verification; any other kind asks nothing', async () => {
+  const sent = [];
+  const runLifecycle = (b, u, body) => sent.push({ u, body });
+  const plain = await runFlow('task.js', 'confirmTask', [{ id: 9, kind: 'build' }, fakeBtn()], { answer: false, globals: { runLifecycle } });
+  assert.equal(plain.asked.length, 0, 'no confirm for a non-verify task');
+  assert.equal(JSON.stringify(sent.map((s) => s.body)), "[{}]");
+  await runFlow('task.js', 'confirmTask', [{ id: 9, kind: 'verify' }, fakeBtn()], { answer: true, globals: { runLifecycle } });
+  assert.equal(JSON.stringify(sent[1].body), JSON.stringify({ verified: true }));
+});
+
+test('ending a session that is not this one asks nothing', async () => {
+  const btn = { closest: () => ({ getAttribute: () => 's2', querySelector: () => null }), disabled: false };
+  const r = await runFlow('settings-sessions.js', 'endOne', [btn], { answer: false });
+  assert.equal(r.asked.length, 0);
+  assert.equal(r.writes.length, 1);
+});
+
+test('the bulk release on the shared toolbar asks first, and releases only on yes', async () => {
+  const { makeBulkToolbar } = require(path.join(PUB, 'bulk-toolbar.js'));
+  for (const answer of [false, true]) {
+    const asked = [];
+    const els = {};
+    for (const id of ['bar', 'count', 'claim', 'release', 'parallel', 'sequential', 'clear']) {
+      els[id] = { hidden: true, disabled: false, textContent: '', listeners: {}, addEventListener(t, fn) { this.listeners[t] = fn; } };
+    }
+    globalThis.document = { getElementById: (id) => els[id] || null };
+    globalThis.window = { OTBDialog: { confirm: async (o) => { asked.push(o); return answer; } }, confirm: () => { throw new Error('window.confirm'); } };
+    const released = [];
+    const selection = { claim: new Set(), release: new Map([['77', '9'], ['78', '10']]) };
+    const bar = makeBulkToolbar({
+      ids: { bar: 'bar', count: 'count', claim: 'claim', release: 'release', parallel: 'parallel', sequential: 'sequential', clear: 'clear' },
+      selection, findTask: () => null,
+      claimAction: { validateMany: async () => ({ ok: true, byId: new Map() }), claimMany: async () => ({ ok: true }), releaseMany: async (e) => { released.push(e); return { ok: true }; } },
+      getJSON: async () => ({}), API: '/api/bongos', copyText: async () => true, toast() {}, curLabel: () => 'credits',
+      describeReason: (r) => r, onClear() {},
+    });
+    bar.wire();
+    await els.release.listeners.click();
+    assert.equal(asked.length, 1);
+    assert.match(asked[0].title, /Release 2 tasks\?/);
+    assert.match(asked[0].body, /return to the queue/);
+    assert.equal(released.length, answer ? 1 : 0, answer ? 'yes releases' : 'cancel releases nothing');
+  }
+});
+
+// ── the guards ──────────────────────────────────────────────────────────────
+
+function hallFiles() {
+  const out = [];
+  const walk = (d) => {
+    for (const e of fs.readdirSync(d, { withFileTypes: true })) {
+      const p = path.join(d, e.name);
+      if (e.isDirectory()) walk(p);
+      else if (/\.(js|html|mjs|cjs)$/.test(e.name)) out.push(p);
+    }
+  };
+  walk(path.join(ROOT, 'modules', 'hall-ui'));
+  return out;
+}
+
+test('no window.confirm anywhere in modules/hall-ui (comments stripped)', () => {
+  const hits = [];
+  for (const f of hallFiles()) {
+    const src = stripComments(fs.readFileSync(f, 'utf8'));
+    // a call to the browser's box: window.confirm, or a bare confirm( that is not a method or a definition
+    if (/\bwindow\s*\.\s*confirm\b/.test(src) || /(^|[^.\w$])(?<!function\s)confirm\s*\(/m.test(src.replace(/function\s+confirm\s*\(/g, ''))) {
+      hits.push(path.relative(ROOT, f));
+    }
+  }
+  assert.deepEqual(hits, [], 'use OTBDialog.confirm (hall-dialog.js) instead of the browser confirm');
+});
+
+test('the guard catches a window.confirm when one comes back', () => {
+  const src = stripComments("// window.confirm('old') is history\nif (!window.confirm('Delete?')) return;");
+  assert.ok(/\bwindow\s*\.\s*confirm\b/.test(src));
+  assert.ok(!/\bwindow\s*\.\s*confirm\b/.test(stripComments('/* window.confirm() was here */ OTBDialog.confirm({})')));
+});
+
+test('every hall page loads the shared dialog right after the shell, deferred alike', () => {
+  for (const f of fs.readdirSync(PUB).filter((n) => n.endsWith('.html'))) {
+    const html = read(f);
+    const shell = html.match(/<script src="\/builders\/shell\.js[^"]*"( defer)?><\/script>\n<script src="\/builders\/hall-dialog\.js"( defer)?><\/script>/);
+    if (!/\/builders\/shell\.js/.test(html)) continue;
+    assert.ok(shell, `${f} loads hall-dialog.js right after shell.js`);
+    assert.equal(shell[1], shell[2], `${f}: deferred alike`);
+  }
+});
+
+test('the six dialog builds run on OTBDialog, with no scrim, layer or backdrop of their own', () => {
+  // attn — Home's attention window
+  const inbox = read('goal-inbox.js');
+  assert.match(inbox, /<dialog class="hall-dialog hall-dialog--wide" id="attention-dialog"/);
+  assert.match(inbox, /OTBDialog\.bind\(/);
+  // cd — the copy desk's three dialogs
+  const cdHtml = read('copy-desk.html');
+  assert.equal((cdHtml.match(/<dialog id="cd-[a-z-]+" class="hall-dialog cd-dialog" aria-labelledby="[a-z-]+">/g) || []).length, 3);
+  assert.match(read('copy-desk.js'), /OTBDialog\.bind\(/);
+  // mw — the market watch's propose dialog
+  assert.match(read('market-watch-lib.js'), /OTBDialog\.bind\(/);
+  for (const p of ['market-watch.html', 'market-watch-item.html']) assert.match(read(p), /<dialog class="hall-dialog mw-dialog" id="mw-propose"/);
+  // aq — the approval queue's glass
+  assert.match(read('approval-queue.js'), /OTBDialog\.bind\(/);
+  // st — the studio's two glass panels
+  assert.equal((read('studio.js').match(/OTBDialog\.bind\(/g) || []).length, 2);
+  // ov — the oversight family's confirm modal is gone; copy-desk was its last user
+  assert.doesNotMatch(read('oversight.css'), /\.ov-modal/);
+  // nobody but controls.css draws a dialog backdrop or a dialog's own z layer
+  for (const f of fs.readdirSync(PUB).filter((n) => n.endsWith('.css') && n !== 'controls.css')) {
+    assert.doesNotMatch(stripComments(read(f)), /::backdrop/, `${f} draws no backdrop of its own`);
+  }
+  // the div overlays take the shared .hall-scrim (its layer and placement) and keep no layer of their own
+  assert.match(read('approval-queue.js'), /scrim\.className = 'hall-scrim aq-overlay'/);
+  assert.match(read('studio.html'), /class="hall-scrim st-overlay" id="st-panel"/);
+  assert.match(read('studio.html'), /class="hall-scrim st-reviews" id="st-reviews"/);
+  assert.match(read('studio.html'), /class="hall-dialog hall-dialog--wide st-reviews__dialog"/);
+  for (const [f, sel] of [['approval-queue.css', '.aq-overlay'], ['studio.css', '.st-overlay'], ['studio.css', '.st-reviews']]) {
+    const css = stripComments(read(f));
+    const at = css.indexOf(`\n${sel} {`);
+    assert.ok(at !== -1, `${sel} rule`);
+    const rule = css.slice(at, css.indexOf('}', at));
+    assert.doesNotMatch(rule, /z-index|position:/, `${sel} keeps no layer of its own`);
+  }
+  // the glass keeps its rim but floats on the one shared shadow
+  assert.match(read('approval-queue.css'), /box-shadow: inset 0 1px 0 var\(--aq-glass-rim\), var\(--ds-shadow-pop\);/);
+  assert.match(read('studio.css'), /box-shadow: inset 0 1px 0 var\(--st-panel-rim\), var\(--ds-shadow-pop\);/);
+});
+
+test('the dialog look lives once, in controls.css, on the shared tokens', () => {
+  const css = stripComments(read('controls.css'));
+  const rule = css.slice(css.indexOf('.hall-dialog {'), css.indexOf('}', css.indexOf('.hall-dialog {')));
+  for (const want of [/background: var\(--bg-card\)/, /border-radius: var\(--ds-radius-panel\)/, /box-shadow: var\(--ds-shadow-pop\)/, /z-index: var\(--ds-z-modal\)/]) {
+    assert.match(rule, want);
+  }
+  assert.match(css, /\.hall-dialog::backdrop \{ background: var\(--scrim\); \}/);
+  assert.match(css, /\.hall-scrim \{[^}]*z-index: var\(--ds-z-modal\)[^}]*background: var\(--scrim\)/);
+});
+
+// ── the component, in a real browser ────────────────────────────────────────
+
+let browser = null;
+try { browser = await lib.launchBrowser(); } catch (e) { if (!(e instanceof lib.NoBrowserError)) throw e; }
+after(() => browser && browser.close());
+const skip = !browser && 'no system Edge or Chrome';
+
+const SHEETS = [path.join(ROOT, 'modules', 'ui-design', 'public', 'tokens.css'), path.join(PUB, 'controls.css')]
+  .map((f) => fs.readFileSync(f, 'utf8')).join('\n');
+const PAGE = `<!doctype html><html><head><style>:root{--bg-card:#fff;--ink:#111;--rule:#ccc;--line:1px;--scrim:rgba(0,0,0,.55);--danger:#b3261e;--radius-pill:999px}</style></head>
+<body><main><button id="go">Delete</button><button id="other">Other</button>
+<div class="hall-scrim" id="ov" hidden><div class="panel" role="dialog" aria-labelledby="ov-t"><h2 id="ov-t">Overlay</h2><button id="ov-a">a</button><button id="ov-b">b</button></div></div>
+</main></body></html>`;
+
+async function boot() {
+  const ctx = await browser.newContext({ viewport: { width: 1000, height: 700 } });
+  const page = await ctx.newPage();
+  await page.setContent(PAGE);
+  await page.addStyleTag({ content: SHEETS });
+  await page.addScriptTag({ content: read('dom-utils.js') }); // the shared escaper, first as on every page
+  await page.addScriptTag({ content: read('hall-dialog.js') });
+  return { ctx, page };
+}
+
+test('the confirm: a labelled modal on the shared layer, shadow and corner; Cancel first when it is destructive', { skip }, async () => {
+  const { ctx, page } = await boot();
+  await page.focus('#go');
+  await page.evaluate(() => { window.__r = window.OTBDialog.confirm({ title: 'Delete the Scribe rank?', body: 'Its permissions go with it.\n\nThis cannot be undone.', confirmLabel: 'Delete rank', danger: true }); });
+  const s = await page.evaluate(() => {
+    const d = document.querySelector('dialog.hall-dialog');
+    const cs = getComputedStyle(d);
+    const lab = document.getElementById(d.getAttribute('aria-labelledby'));
+    return {
+      open: d.open, modal: d.matches(':modal'), role: d.getAttribute('role'), ariaModal: d.getAttribute('aria-modal'),
+      name: lab && lab.textContent, paras: d.querySelectorAll('.hall-dialog__body p').length,
+      shadow: cs.boxShadow, radius: cs.borderTopLeftRadius, z: cs.zIndex,
+      focus: document.activeElement.textContent, danger: !!d.querySelector('.btn.btn--danger'), ghost: !!d.querySelector('.btn.btn--ghost'),
+    };
+  });
+  assert.equal(s.open, true);
+  assert.equal(s.modal, true, 'opened with showModal: the page behind is inert');
+  assert.equal(s.role, 'dialog');
+  assert.equal(s.ariaModal, 'true');
+  assert.equal(s.name, 'Delete the Scribe rank?', 'labelled by its title');
+  assert.equal(s.paras, 2, 'a blank line starts a paragraph');
+  assert.match(s.shadow, /rgba\(0, 0, 0, 0\.28\)/, 'the one floating shadow');
+  assert.equal(s.radius, '16px', 'the panel corner');
+  assert.equal(s.z, '160', 'the modal layer');
+  assert.equal(s.focus, 'Cancel', 'a destructive confirm starts on Cancel');
+  assert.ok(s.danger && s.ghost);
+  await page.keyboard.press('Enter');
+  assert.equal(await page.evaluate(() => window.__r), false, 'Enter on Cancel says no');
+  await ctx.close();
+});
+
+test('the confirm resolves true only on its confirm button, and is gone after', { skip }, async () => {
+  const { ctx, page } = await boot();
+  await page.evaluate(() => { window.__r = window.OTBDialog.confirm({ title: 'Release task 7?', body: 'It goes back to the queue.', confirmLabel: 'Release' }); });
+  await page.click('dialog.hall-dialog .btn:not(.btn--ghost)');
+  assert.equal(await page.evaluate(() => window.__r), true);
+  assert.equal(await page.evaluate(() => document.querySelectorAll('dialog').length), 0, 'removed on close');
+  await ctx.close();
+});
+
+test('focus is trapped: Tab and Shift+Tab wrap inside the dialog', { skip }, async () => {
+  const { ctx, page } = await boot();
+  await page.focus('#go');
+  await page.evaluate(() => { window.OTBDialog.confirm({ title: 'T', body: 'what happens', confirmLabel: 'Yes' }); });
+  const seen = [];
+  for (let i = 0; i < 5; i++) {
+    await page.keyboard.press('Tab');
+    seen.push(await page.evaluate(() => !!document.activeElement.closest('dialog')));
+  }
+  await page.keyboard.press('Shift+Tab');
+  seen.push(await page.evaluate(() => !!document.activeElement.closest('dialog')));
+  assert.deepEqual(seen, seen.map(() => true), 'focus never leaves the dialog');
+  await ctx.close();
+});
+
+test('Escape closes, says no, and hands focus back to the trigger', { skip }, async () => {
+  const { ctx, page } = await boot();
+  await page.focus('#go');
+  await page.evaluate(() => { window.__r = window.OTBDialog.confirm({ title: 'T', body: 'what happens', confirmLabel: 'Yes' }); });
+  await page.keyboard.press('Escape');
+  assert.equal(await page.evaluate(() => window.__r), false);
+  assert.equal(await page.evaluate(() => document.activeElement.id), 'go');
+  await ctx.close();
+});
+
+test('a click on the scrim says no', { skip }, async () => {
+  const { ctx, page } = await boot();
+  await page.evaluate(() => { window.__r = window.OTBDialog.confirm({ title: 'T', body: 'what happens', confirmLabel: 'Yes' }); });
+  await page.mouse.click(10, 10);
+  assert.equal(await page.evaluate(() => window.__r), false);
+  await ctx.close();
+});
+
+test('a confirm over a bound overlay: Escape closes the confirm only, then the overlay, and focus walks back', { skip }, async () => {
+  const { ctx, page } = await boot();
+  await page.focus('#other');
+  await page.evaluate(() => {
+    const ov = document.getElementById('ov');
+    window.__h = window.OTBDialog.bind(ov, { panel: ov.querySelector('.panel') });
+    window.__h.open();
+  });
+  assert.equal(await page.evaluate(() => document.getElementById('ov').hidden), false);
+  assert.equal(await page.evaluate(() => document.activeElement.id), 'ov-a', 'focus moves in');
+  await page.evaluate(() => { window.__r = window.OTBDialog.confirm({ title: 'T', body: 'what happens', confirmLabel: 'Yes' }); });
+  await page.keyboard.press('Escape');
+  assert.equal(await page.evaluate(() => window.__r), false);
+  assert.equal(await page.evaluate(() => document.getElementById('ov').hidden), false, 'the overlay stays');
+  assert.equal(await page.evaluate(() => document.activeElement.id), 'ov-a', 'focus returns into the overlay');
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('Tab');
+  assert.equal(await page.evaluate(() => document.activeElement.id), 'ov-a', 'the overlay traps Tab too');
+  await page.keyboard.press('Escape');
+  assert.equal(await page.evaluate(() => document.getElementById('ov').hidden), true);
+  assert.equal(await page.evaluate(() => document.activeElement.id), 'other', 'and back to the trigger');
+  const ov = await page.evaluate(() => {
+    const cs = getComputedStyle(document.getElementById('ov'));
+    const p = document.querySelector('#ov .panel');
+    return { z: cs.zIndex, modal: p.getAttribute('aria-modal') };
+  });
+  assert.equal(ov.z, '160');
+  assert.equal(ov.modal, 'true');
+  await ctx.close();
+});

package/tests/hall_error_envelope.mjs

@@ -185,7 +185,7 @@ async function bootTaskPage({ task, failWith }) {
     location: { hostname: 'builders.example.com', pathname: `/task/${task.id}`, href: '', assign() {} },
     window: {
       OTBBranding: { taskCreditValue: () => null, taskCreditLabel: () => 'credits' },
-      confirm: () => true,
+      OTBDialog: { confirm: async () => true }, // the hall's branded confirm (task 1005085)
       location: { hostname: 'builders.example.com', pathname: `/task/${task.id}`, assign() {} },
       // The generated typed client's result mode: { status, ok, data }.
       BongosClient: {

package/tests/hall_oversight_world.mjs

@@ -45,7 +45,7 @@ test('the family sheet spends only the fifteen: no literal colour', () => {
 test('the row is the family\'s archetype, and every page renders it', () => {
   const css = read('oversight.css');
   for (const cls of ['.ov-row', '.ov-row__title', '.ov-row__sub', '.ov-row__facts', '.ov-row__right',
-    '.ov-group__head', '.ov-figs', '.ov-modal', '.ov-form', '.ov-toggle', '.ov-lines', '.ov-prose']) {
+    '.ov-group__head', '.ov-figs', '.ov-form', '.ov-toggle', '.ov-lines', '.ov-prose']) {
     assert.ok(new RegExp(`^${cls.replace(/[.]/g, '\\.')}[\\s,{]`, 'm').test(css), `oversight.css defines ${cls}`);
   }
   for (const p of PAGES) assert.match(read(`${p}.js`), /class="ov-row/, `${p}.js renders .ov-row`);
@@ -90,12 +90,14 @@ test('Gate carries no coloured band: state is a pill', () => {
   }
 });
 
-test('the shared confirm modal sits on --z-modal, closed by one hairline and no shadow', () => {
-  const css = read('oversight.css');
-  const bg = css.slice(css.indexOf('.ov-modal-bg {'), css.indexOf('.ov-modal {'));
-  assert.match(bg, /z-index: var\(--z-modal\)/, 'the shell layer, not a guessed number');
-  const modal = css.slice(css.indexOf('.ov-modal {'), css.indexOf('.ov-modal .scroll__h'));
-  assert.ok(!/box-shadow/.test(modal), 'no shadow under the dialog');
+test('the family keeps no confirm modal: it is the hall\'s one dialog, on the modal layer with one hairline', () => {
+  // task 1005085: the family's .ov-modal (copy desk its last user) became controls.css's
+  // .hall-dialog. It floats over a scrim, so it spends the one shadow DESIGN.md allows.
+  assert.doesNotMatch(read('oversight.css'), /\.ov-modal/, 'oversight.css draws no modal of its own');
+  const css = read('controls.css');
+  const modal = css.slice(css.indexOf('.hall-dialog {'), css.indexOf('}', css.indexOf('.hall-dialog {')));
+  assert.match(modal, /z-index: var\(--ds-z-modal\)/, 'the shell layer, not a guessed number');
+  assert.match(modal, /box-shadow: var\(--ds-shadow-pop\)/, 'the one floating shadow');
   assert.match(modal, /border: var\(--line\) solid var\(--rule\)/, 'one rule hairline');
   // task 1004829 made the Gate's approve an ask card with no modal; task 1004859
   // removed the approve altogether. The page still opens no modal — and styles none.

package/tests/hall_record_world.mjs

@@ -412,7 +412,7 @@ function renderTask(task, { lastClaim = null, viewer = null, goal = null, goalsL
     },
     location: { hostname: 'builders.cloudbongos.com', pathname: `/task/${task && task.id ? task.id : '1'}`, search, origin: 'https://builders.cloudbongos.com', assign() {} },
     addEventListener() {},
-    confirm: () => true,
+    OTBDialog: { confirm: async () => true }, // the hall's branded confirm (task 1005085)
     navigator: { clipboard: { writeText: async () => {} } },
   };
   // task 1004477: the shell is what fills a [data-shell-exit] link. `shell: true`

package/tests/hall_street.mjs

@@ -489,7 +489,7 @@ test('the page holds the prototype\'s header, the street, the readings and the c
   assert.match(html, /<a class="street-mark" id="streetHome" href="\/builders\/city"[^>]*>\{\{productName\}\}</);
   for (const id of ['hudNeeds', 'hudMoving', 'hudShare', 'streetMode', 'streetSigns', 'streetPins', 'streetDoors', 'streetCard']) assert.match(html, new RegExp(`id="${id}"`), id);
   const scripts = [...html.matchAll(/<script src="\/builders\/([a-z-]+)\.js/g)].map((m) => m[1]);
-  assert.deepEqual(scripts.filter((s) => !/^street-(deck|office)$/.test(s)), ['dom-utils', 'shell-trail', 'craft-mode', 'shell', 'palette', 'gov-living', 'gov-feeds', 'city-draw', 'street-draw', 'street-card', 'street-inside', 'street-depth', 'street-desk', 'street-amend', 'street'], 'the hall shell (task 1004544), the living model and its one reader (task 1004685: city-draw.js counts with it, so it loads first), the shared kit, then the card (task 1004528), the interiors (task 1004526), the living street\'s exterior (street-depth.js), the floor desk (task 1004558) and the drafted amendment (task 1004530); the deck rides beside them');
+  assert.deepEqual(scripts.filter((s) => !/^street-(deck|office)$/.test(s)), ['dom-utils', 'shell-trail', 'craft-mode', 'shell', 'hall-dialog', 'palette', 'gov-living', 'gov-feeds', 'city-draw', 'street-draw', 'street-card', 'street-inside', 'street-depth', 'street-desk', 'street-amend', 'street'], 'the hall shell (task 1004544), the living model and its one reader (task 1004685: city-draw.js counts with it, so it loads first), the shared kit, then the card (task 1004528), the interiors (task 1004526), the living street\'s exterior (street-depth.js), the floor desk (task 1004558) and the drafted amendment (task 1004530); the deck rides beside them');
   assert.equal(City.STREET_HREF, '/builders/street', 'the city\'s door is this page');
 });
 

package/tests/hall_studio_home.mjs

@@ -88,7 +88,7 @@ const RESUME_READ = { ok: true, counter: { changed: 12, total: 38 } };
 // ── the mini-DOM over the page's own markup ─────────────────────────────────
 const HTML = read('studio.html');
 const BODY = /<body[^>]*>([\s\S]*)<\/body>/.exec(HTML)[1].replace(/<script[\s\S]*?<\/script>/g, '');
-const SOURCES = ['dom-utils.js', 'tweak-editor-lib.js', 'studio-lib.js', 'studio.js'].map((f) => [f, read(f)]);
+const SOURCES = ['dom-utils.js', 'hall-dialog.js', 'tweak-editor-lib.js', 'studio-lib.js', 'studio.js'].map((f) => [f, read(f)]);
 let boot = null;
 
 function augment(el) {

package/tests/home_attention_cards.mjs

@@ -17,6 +17,7 @@ const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const lib = require(path.join(ROOT, 'modules', 'ui-design', 'kit', 'lib.js'));
 const GOAL_INBOX = fs.readFileSync(path.join(ROOT, 'modules', 'hall-ui', 'public', 'goal-inbox.js'), 'utf8');
 const HALL_ASK = fs.readFileSync(path.join(ROOT, 'modules', 'hall-ui', 'public', 'hall-ask.js'), 'utf8');
+const HALL_DIALOG = fs.readFileSync(path.join(ROOT, 'modules', 'hall-ui', 'public', 'hall-dialog.js'), 'utf8');
 
 let browser = null;
 try { browser = await lib.launchBrowser(); } catch (e) { if (!(e instanceof lib.NoBrowserError)) throw e; }
@@ -50,6 +51,7 @@ async function bootInbox() {
   await page.setContent(PAGE);
   await page.addScriptTag({ content: STUBS });
   await page.addScriptTag({ content: HALL_ASK }); // task 1004820: the rows are OTBAsk cards
+  await page.addScriptTag({ content: HALL_DIALOG }); // the window is the hall's one dialog (task 1005085)
   await page.addScriptTag({ content: GOAL_INBOX });
   await page.evaluate(() => window.__widget.mount(document.getElementById('attention-scroll')));
   await page.waitForFunction(() => document.querySelectorAll('.attn-card').length === 2);

package/tests/kind_axis_unset.mjs

@@ -126,7 +126,7 @@ const USES = {
   'task.js': {
     src: scanned(taskJs),
     nonRender: {
-      "if (t.kind === 'verify' && !window.confirm(": 'a BRANCH on the value — gates a confirm prompt, renders nothing',
+      "if (t.kind === 'verify' && !(await window.OTBDialog.confirm({": 'a BRANCH on the value — gates a confirm prompt, renders nothing',
       "const body = t.kind === 'verify' ? { verified: true } : {};": 'a REQUEST body — sent to the route, never displayed',
     },
   },

package/tests/market_watch_pages.mjs

@@ -213,7 +213,7 @@ test('a corrected entry reads corrected on the item page; one marked wrong is no
 // task 1005018: the dialog's screen-reader name follows the action that opened it.
 test('the propose dialog is named by its own title: propose a change, stop tracking or send a new scout', () => {
   const titleOf = (html) => {
-    const all = [...html.matchAll(/<span[^>]*id="mw-propose-title"[^>]*>([^<]*)<\/span>/g)];
+    const all = [...html.matchAll(/<h2[^>]*id="mw-propose-title"[^>]*>([^<]*)<\/h2>/g)];
     assert.equal(all.length, 1, 'exactly one title to point at');
     return all[0][1];
   };
@@ -232,6 +232,8 @@ test('the propose dialog is named by its own title: propose a change, stop track
       querySelector: (s) => (s === 'form' ? form : stub()), querySelectorAll: () => [], showModal() {}, close() {},
     };
     const saved = globalThis.document;
+    // the hall's one dialog (hall-dialog.js, task 1005085) opens it; a stand-in records the open
+    globalThis.OTBDialog = { bind: () => ({ open() {}, close() {} }) };
     globalThis.document = { getElementById: (id) => (id === 'mw-propose' ? dlg : null) };
     try { MW.openPropose(mode, { item, dimensions: [], entries: [] }, () => {}); } finally { globalThis.document = saved; }
     assert.equal(attrs.has('aria-label'), false, `${mode}: no fixed label left to override the title`);