path: root/tests/gallery-probes/probe.mjs

// CDP probe for the widget gallery — no playwright, Node global WebSocket/fetch.
// Usage: node probe.mjs [--shot out.png] [--size N]
import { spawn } from 'node:child_process';
import { writeFileSync } from 'node:fs';

const PORT = 9333;
const URL = 'file:///home/cjennings/code/archsetup/docs/prototypes/panel-widget-gallery.html';
const shotIdx = process.argv.indexOf('--shot');
const shotPath = shotIdx > -1 ? process.argv[shotIdx + 1] : null;

const chrome = spawn('google-chrome-stable', [
  '--headless=new', `--remote-debugging-port=${PORT}`,
  '--no-first-run', '--no-default-browser-check',
  '--window-size=1600,1200', URL,
], { stdio: 'ignore' });

const sleep = ms => new Promise(r => setTimeout(r, ms));
let ws, id = 0;
const pending = new Map();
const events = [];

async function connect() {
  for (let i = 0; i < 40; i++) {
    try {
      const list = await (await fetch(`http://127.0.0.1:${PORT}/json`)).json();
      const page = list.find(t => t.type === 'page' && t.url.startsWith('file'));
      if (page) { ws = new WebSocket(page.webSocketDebuggerUrl); break; }
    } catch { /* retry */ }
    await sleep(250);
  }
  if (!ws) throw new Error('no page target');
  await new Promise(r => ws.onopen = r);
  ws.onmessage = m => {
    const d = JSON.parse(m.data);
    if (d.id && pending.has(d.id)) { pending.get(d.id)(d); pending.delete(d.id); }
    else if (d.method) events.push(d);
  };
}
function send(method, params = {}) {
  return new Promise(res => { const i = ++id; pending.set(i, res); ws.send(JSON.stringify({ id: i, method, params })); });
}
async function evl(expr) {
  const r = await send('Runtime.evaluate', { expression: expr, returnByValue: true });
  if (r.result.exceptionDetails) throw new Error('eval failed: ' + JSON.stringify(r.result.exceptionDetails.exception?.description || r.result.exceptionDetails.text));
  return r.result.result.value;
}
async function drag(x1, y1, x2, y2) {
  await send('Input.dispatchMouseEvent', { type: 'mousePressed', x: x1, y: y1, button: 'left', clickCount: 1 });
  const steps = 8;
  for (let i = 1; i <= steps; i++)
    await send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: x1 + (x2 - x1) * i / steps, y: y1 + (y2 - y1) * i / steps, button: 'left' });
  await send('Input.dispatchMouseEvent', { type: 'mouseReleased', x: x2, y: y2, button: 'left', clickCount: 1 });
}

const fails = [];
const ok = (name, cond, detail = '') => { console.log(`${cond ? 'PASS' : 'FAIL'} ${name}${detail ? ' — ' + detail : ''}`); if (!cond) fails.push(name); };

try {
  await connect();
  await send('Runtime.enable');
  await send('Page.enable');
  await sleep(1500);

  // 0. console errors / exceptions
  const errs = events.filter(e => e.method === 'Runtime.exceptionThrown');
  ok('no exceptions on load', errs.length === 0, errs.map(e => e.params.exceptionDetails?.exception?.description).join('; ').slice(0, 200));

  // 1. defaults: size=2 (M), card count
  ok('default size 2', await evl(`document.body.dataset.size`) === '2');
  const cards = await evl(`document.querySelectorAll('.card').length`);
  ok('111 cards', cards === 111, `got ${cards}`);

  // 2. zoom actually scales: card visual width at 3x vs 1x
  await evl(`document.querySelector('.szbar .key[data-sz="3"]').click()`);
  const w3 = await evl(`document.querySelector('.card').getBoundingClientRect().width`);
  await evl(`document.querySelector('.szbar .key[data-sz="1"]').click()`);
  const w1 = await evl(`document.querySelector('.card').getBoundingClientRect().width`);
  ok('3x wider than 1x', w3 > w1 * 1.8, `w3=${Math.round(w3)} w1=${Math.round(w1)}`);
  ok('size chip flips state', await evl(`document.body.dataset.size`) === '1');

  // 3. behavioral at 3x: fader drag on card 03 (horizontal fader) changes readout
  await evl(`document.querySelector('.szbar .key[data-sz="3"]').click()`);
  await evl(`document.querySelectorAll('.card')[2].scrollIntoView({block:'center'}); ''`);
  await sleep(200);
  const fr = await evl(`(()=>{const c=document.querySelectorAll('.card')[2];const f=c.querySelector('.fader');const r=f.getBoundingClientRect();return [r.left,r.top,r.width,r.height];})()`);
  const before = await evl(`document.getElementById('rd-03').textContent`);
  await drag(fr[0] + fr[2] * 0.2, fr[1] + fr[3] / 2, fr[0] + fr[2] * 0.9, fr[1] + fr[3] / 2);
  await sleep(150);
  const after = await evl(`document.getElementById('rd-03').textContent`);
  ok('fader drag tracks at 3x', before !== after && after !== '—', `'${before}' -> '${after}'`);

  // 4. behavioral at 3x: toggle click on card 01
  await evl(`document.querySelectorAll('.card')[0].scrollIntoView({block:'center'}); ''`);
  await sleep(200);
  const sw = await evl(`(()=>{const c=document.querySelectorAll('.card')[0];const s=c.querySelector('.switch')||c.querySelector('.stagew > *');const r=s.getBoundingClientRect();return [r.left+r.width/2,r.top+r.height/2];})()`);
  const t0 = await evl(`document.getElementById('rd-01').textContent`);
  await send('Input.dispatchMouseEvent', { type: 'mousePressed', x: sw[0], y: sw[1], button: 'left', clickCount: 1 });
  await send('Input.dispatchMouseEvent', { type: 'mouseReleased', x: sw[0], y: sw[1], button: 'left', clickCount: 1 });
  await sleep(150);
  const t1 = await evl(`document.getElementById('rd-01').textContent`);
  ok('toggle click responds at 3x', t0 !== t1, `'${t0}' -> '${t1}'`);

  // 5. card 02 console keys: reading order and per-key tone. LIVE is green
  //    because --pass is what the kit means by live everywhere else; gold stays
  //    the generic engaged look. Craig's call, 2026-07-16.
  const order = await evl(`[...document.querySelectorAll('#card-02 .key')].map(b => b.textContent)`);
  ok('card 02 keys read SCAN, LIVE, MUTED',
    JSON.stringify(order) === JSON.stringify(['SCAN', 'LIVE', 'MUTED']), JSON.stringify(order));

  const engaged = await evl(`(()=>{
    const lit = [...document.querySelectorAll('#card-02 .key')].filter(b => /\\b(on|green|red)\\b/.test(b.className));
    return lit.length === 1 ? lit[0].textContent + ':' + lit[0].className.replace('key ','') : 'lit=' + lit.length;
  })()`);
  ok('card 02 engages LIVE in green by default', engaged === 'LIVE:green', engaged);

  const muted = await evl(`(()=>{
    const keys = [...document.querySelectorAll('#card-02 .key')];
    keys.find(b => b.textContent === 'MUTED').click();
    const lit = keys.filter(b => /\\b(on|green|red)\\b/.test(b.className));
    return lit.length === 1 ? lit[0].textContent + ':' + lit[0].className.replace('key ','') : 'lit=' + lit.length;
  })()`);
  ok('card 02 MUTED engages red and releases LIVE', muted === 'MUTED:red', muted);

  const rd02 = await evl(`document.getElementById('rd-02').textContent`);
  ok('card 02 readout tracks the engaged key', rd02 === 'MUTED', rd02);

  // 6. card 01 slide toggle: the new tone atoms exist. red/warn on the `on` axis
  //    let the ENGAGED state be the notable one (mute, record, airplane) — before
  //    these, red was only reachable via the `off` axis, which colours the
  //    disengaged state instead. dim offText lets an off toggle recede in a dense
  //    panel. Craig's call, 2026-07-16.
  const atoms = await evl(`(()=>{
    const S = GW.slideToggle.STYLES;
    const want = { on: ['amber','green','dark','red','warn'], onText: ['panel','cream','green'],
                   off: ['dark','red'], offText: ['white','red','black','dim'],
                   thumb: ['light','dark','chrome','brass'] };
    const missing = [];
    for (const [axis, names] of Object.entries(want))
      for (const n of names) if (!S[axis] || !S[axis][n]) missing.push(axis + '.' + n);
    return missing.length ? 'missing: ' + missing.join(', ') : 'ok';
  })()`);
  ok('slide toggle style atoms present', atoms === 'ok', atoms);

  // 7. presets name intent (a combination), not paint. Every axis a preset names
  //    must resolve in STYLES — a typo here would silently fall through to the
  //    stylesheet default and look "nearly right", which is the worst outcome.
  const presets = await evl(`(()=>{
    const P = GW.slideToggle.PRESETS, S = GW.slideToggle.STYLES;
    if (!P) return 'no PRESETS';
    const AX = GW.slideToggle.AXIS_ORDER;
    const bad = [];
    for (const [name, p] of Object.entries(P)) {
      for (const ax of AX) {
        if (!p[ax]) bad.push(name + ' missing ' + ax);
        else if (!S[ax][p[ax]]) bad.push(name + '.' + ax + '="' + p[ax] + '" not in STYLES');
      }
    }
    return bad.length ? bad.join('; ') : Object.keys(P).join(',');
  })()`);
  ok('every preset names a resolvable style on every axis',
    presets === 'panel,run,armed,caution,dark', presets);

  // 7a. the dark preset: neither state lights the pill, so the legend colour is
  //     the only thing carrying state. Both backgrounds must stay dark while the
  //     inks diverge — if either pill lights, the preset has lost its point.
  const dark = await evl(`(()=>{
    const P = GW.slideToggle.PRESETS.dark, S = GW.slideToggle.STYLES;
    const onBg = S.on[P.on].vars['--sw-on-bg'], offBg = S.off[P.off].vars['--sw-off-bg'];
    const onInk = S.onText[P.onText].vars['--sw-on-ink'], offInk = S.offText[P.offText].vars['--sw-off-ink'];
    if (onBg !== offBg) return 'pills differ: on=' + onBg + ' off=' + offBg;
    if (onInk === offInk) return 'inks identical, state unreadable: ' + onInk;
    return 'ok';
  })()`);
  ok('dark preset keeps both pills dark and the inks distinct', dark === 'ok', dark);

  // 7b. the card claims the preset it is actually in. The widget defaults to
  //     `panel`, so a preset group with nothing lit would assert "no preset
  //     active" — false, and exactly the kind of quiet mislabel this walk exists
  //     to catch. Nothing above this point touches card 01's chips (checks 2-4
  //     only toggle its switch, which does not restyle), so the default still
  //     stands here — but this must stay ABOVE checks 8/8b/9, which do mutate
  //     the chips. Insert preset-touching checks after them, not before.
  const defaultPreset = await evl(`(()=>{
    const pg = [...document.querySelectorAll('#card-01 .fgroup')]
      .find(g => g.querySelector('.lab')?.textContent === 'preset');
    if (!pg) return 'no preset group';
    const lit = [...pg.querySelectorAll('.fc')].filter(c => c.classList.contains('on'));
    return lit.length === 1 ? lit[0].title : 'lit=' + lit.length;
  })()`);
  ok('card 01 defaults to the panel preset', defaultPreset === 'panel', defaultPreset);

  // 8. a preset chip drives the widget AND re-syncs the axis chips, so the card
  //    never shows a combination the widget isn't in.
  const applied = await evl(`(()=>{
    const card = document.getElementById('card-01');
    const groups = [...card.querySelectorAll('.fgroup')];
    const pg = groups.find(g => g.querySelector('.lab')?.textContent === 'preset');
    if (!pg) return 'no preset group';
    const armed = [...pg.querySelectorAll('.fc')].find(c => c.title === 'armed');
    if (!armed) return 'no armed chip';
    armed.click();
    const onGroup = groups.find(g => g.querySelector('.lab')?.textContent === 'on');
    const lit = [...onGroup.querySelectorAll('.fc')].filter(c => c.classList.contains('on'));
    const brd = card.querySelector('.switch').style.getPropertyValue('--sw-on-brd');
    return (lit.length === 1 ? lit[0].title : 'lit=' + lit.length) + '|' + brd;
  })()`);
  ok('armed preset drives widget and syncs the on chip', applied === 'red|var(--fail)', applied);

  // 8b. axes are not independent: onText overrides the ink `on` sets, so changing
  //     `on` after picking an onText must not silently revert the legend while its
  //     chip still shows lit. Drive it in the hazardous order and check the ink.
  const orderSafe = await evl(`(()=>{
    const card = document.getElementById('card-01');
    const groups = [...card.querySelectorAll('.fgroup')];
    const grp = l => groups.find(g => g.querySelector('.lab')?.textContent === l);
    const chip = (l, t) => [...grp(l).querySelectorAll('.fc')].find(c => c.title === t);
    chip('on text', 'green').click();   // legend green
    chip('on', 'dark').click();         // then change the pill — must keep it
    const ink = card.querySelector('.switch').style.getPropertyValue('--sw-on-ink');
    const lit = [...grp('on text').querySelectorAll('.fc')].filter(c => c.classList.contains('on'));
    return ink + '|' + (lit.length === 1 ? lit[0].title : 'lit=' + lit.length);
  })()`);
  ok('changing on keeps the chosen onText (chips cannot lie)',
    orderSafe === 'var(--sevgrn)|green', orderSafe);

  // 9. diverging on one axis clears the preset — the card stops claiming a preset
  //    it is no longer in. Re-establishes its own precondition (preset lit) rather
  //    than inheriting it: the checks above already clicked axis chips, each of
  //    which clears the preset, so asserting lit===0 without re-lighting first
  //    would pass against an already-cleared group and prove nothing — including
  //    against a regression where clearing fired for onText but not for `on`.
  const diverged = await evl(`(()=>{
    const groups = [...document.querySelectorAll('#card-01 .fgroup')];
    const grp = l => groups.find(g => g.querySelector('.lab')?.textContent === l);
    const litPresets = () => [...grp('preset').querySelectorAll('.fc')].filter(c => c.classList.contains('on')).length;
    [...grp('preset').querySelectorAll('.fc')].find(c => c.title === 'run').click();
    const before = litPresets();
    [...grp('on').querySelectorAll('.fc')].find(c => c.title === 'green').click();
    return before + '->' + litPresets();
  })()`);
  ok('changing an axis clears the preset selection', diverged === '1->0', diverged);

  // 10. R57 ABC keypad — fills the taxonomy's text x alphanumeric empty cell.
  //     ABC order is the whole point: it is what industrial keypads do wherever
  //     the operator can't be assumed to touch-type, and it is what Craig's
  //     reference photos show. A QWERTY drift here would silently lose the idiom.
  const abcOrder = await evl(`(()=>{
    const letters = [...document.querySelectorAll('#card-R57 .kp-key')]
      .map(k => k.dataset.k).filter(k => /^[A-Z]$/.test(k));
    const want = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'];
    return JSON.stringify(letters) === JSON.stringify(want)
      ? 'ok' : 'got ' + letters.length + ': ' + letters.join('');
  })()`);
  ok('R57 carries A-Z in alphabetical order', abcOrder === 'ok', abcOrder);

  const abcDigits = await evl(`(()=>{
    const d = [...document.querySelectorAll('#card-R57 .kp-key')]
      .map(k => k.dataset.k).filter(k => /^[0-9]$/.test(k));
    return d.length === 10 ? 'ok' : 'got ' + d.length + ': ' + d.join('');
  })()`);
  ok('R57 carries a full 0-9 block', abcDigits === 'ok', abcDigits);

  // 10b. LAYOUT, geometrically. The A-Z check above reads DOM order, which the
  //      builder controls by push order — it would pass with every key rendered
  //      in the wrong place. This reads actual x positions instead: letters own
  //      the left columns, digits the right, and the alphabet column-aligns with
  //      itself all the way down (the discontinuity Craig caught: A-L used to
  //      start at column 3 while M-X started at column 0).
  const layout = await evl(`(()=>{
    const x = k => {
      const g = [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k);
      return g ? Math.round(g.querySelector('rect').getBBox().x) : null;
    };
    const colStarts = ['A','D','G','J','M','S','Y'].map(x);
    if (new Set(colStarts).size !== 1) return 'alphabet not column-aligned: ' + JSON.stringify(colStarts);
    if (!(x('A') < x('1'))) return 'letters not left of digits: A=' + x('A') + ' 1=' + x('1');
    if (!(x('DEL') > x('J'))) return 'DEL not in the block beside the digits: DEL=' + x('DEL') + ' J=' + x('J');
    return 'ok';
  })()`);
  ok('R57 letters left, digits right, alphabet column-aligned', layout === 'ok', layout);

  // 10c. DEL sits where the hand already is and CLR is exiled to the corner.
  //      Frequency and blast radius pull the same way: DEL is constant and costs
  //      one character, CLR is rare and costs the entry. Pinned because it is a
  //      deliberate inversion of where they started, easy to "tidy" back.
  const reach = await evl(`(()=>{
    const box = k => {
      const g = [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k);
      return g ? g.querySelector('rect').getBBox() : null;
    };
    const del = box('DEL'), clr = box('CLR'), ent = box('ENT');
    if (!del || !clr || !ent) return 'missing key';
    if (!(del.y < clr.y)) return 'DEL should sit above CLR: DEL.y=' + del.y + ' CLR.y=' + clr.y;
    if (!(Math.abs(del.y - ent.y) < 1)) return 'DEL should share the ENT row';
    return 'ok';
  })()`);
  ok('R57 DEL is in reach, CLR is in the corner', reach === 'ok', reach);

  // 10d. The three function keys are a cost ladder — DEL takes one character
  //      back, CLR throws the entry away, ENT commits — so each must read as a
  //      different key before the legend is read. Checks they are mutually
  //      distinct and all differ from a plain cap, rather than naming a gradient:
  //      the palette may be retuned, the distinction may not collapse.
  const ladder = await evl(`(()=>{
    const fill = k => {
      const g = [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k);
      return g ? g.querySelector('rect').getAttribute('fill') : null;
    };
    const f = { DEL: fill('DEL'), CLR: fill('CLR'), ENT: fill('ENT'), plain: fill('A'), digit: fill('1') };
    const fn = [f.DEL, f.CLR, f.ENT];
    if (new Set(fn).size !== 3) return 'function keys not mutually distinct: ' + JSON.stringify(f);
    if (fn.includes(f.plain) || fn.includes(f.digit)) return 'a function key wears a plain cap: ' + JSON.stringify(f);
    return 'ok';
  })()`);
  ok('R57 DEL/CLR/ENT each read as their own key', ladder === 'ok', ladder);

  // 11. typing accumulates, in order. A keypad that registers presses but drops
  //     or reorders them is the failure that matters for a password field.
  const typed = await evl(`(()=>{
    const key = k => [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k);
    key('CLR').dispatchEvent(new MouseEvent('click', {bubbles:true}));
    for (const c of ['W','I','F','I','7']) key(c).dispatchEvent(new MouseEvent('click', {bubbles:true}));
    return document.getElementById('rd-R57').textContent;
  })()`);
  ok('R57 accumulates typed characters in order', typed.includes('WIFI7'), typed);

  // 11b. DEL takes back ONE character. Without it the only way out of a typo is
  //      wiping the whole entry, which on a 20-character passphrase means
  //      starting over — so the check that matters is that DEL is not CLR.
  const del = await evl(`(()=>{
    const key = k => [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k);
    const click = k => key(k).dispatchEvent(new MouseEvent('click', {bubbles:true}));
    click('CLR');
    for (const c of ['C','A','B','S']) click(c);
    click('DEL');
    const back = document.getElementById('rd-R57').textContent;
    for (let i = 0; i < 6; i++) click('DEL');   // past empty: must not throw or wrap
    const floor = document.getElementById('rd-R57').textContent;
    return back + ' | ' + floor;
  })()`);
  //      Both halves are asserted: the earlier version computed the past-empty
  //      state and then never looked at it, so "stops at empty" was a promise in
  //      the name only — a DEL that wrapped the buffer would have passed.
  ok('R57 DEL takes back one character, and stops at empty',
    del.split(' | ')[0] === 'CAB' && del.split(' | ')[1] === 'empty', del);

  // 11c. A space must be VISIBLE in the window. The buffer is honest either way,
  //      but SVG collapses trailing whitespace, so a space rendered as a space is
  //      a keypress with no feedback: the operator presses SPACE, sees nothing,
  //      presses again, and now carries two spaces they cannot see in a
  //      passphrase they can't read back. Checked past the 13-char truncation
  //      boundary, where there are no pad dots left for a space to displace.
  const space = await evl(`(()=>{
    const key = k => [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k);
    const click = k => key(k).dispatchEvent(new MouseEvent('click', {bubbles:true}));
    const win = () => document.querySelector('#card-R57 text[font-size="14"]').textContent;
    click('CLR');
    for (let i = 0; i < 13; i++) click('A');
    const before = win();
    click('SPC');
    const after = win();
    if (before === after) return 'space produced no visible change: ' + JSON.stringify(after);
    if (/ $/.test(after)) return 'space rendered as a raw trailing space (invisible): ' + JSON.stringify(after);
    click('CLR');
    return 'ok';
  })()`);
  ok('R57 a typed space is visible in the window', space === 'ok', space);

  // 12. the two committing keys do different things: ENTER commits the buffer,
  //     CLEAR empties it. Types its own buffer rather than inheriting one from
  //     the checks above — they mutate it, so a check that assumed their leftovers
  //     would pass or fail on their behaviour instead of its own.
  const committed = await evl(`(()=>{
    const key = k => [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k);
    const click = k => key(k).dispatchEvent(new MouseEvent('click', {bubbles:true}));
    click('CLR');
    for (const c of ['N','E','T','5']) click(c);
    click('ENT');
    const after = document.getElementById('rd-R57').textContent;
    click('CLR');
    return after + ' | ' + document.getElementById('rd-R57').textContent;
  })()`);
  //     Asserts the COMMIT SIGNAL ('ENTER · ' + buf), not merely that the buffer
  //     is still readable: typing the last character already put NET5 in the
  //     readout, so /NET5/ was true before ENT was ever pressed. That check
  //     passed with the ENT branch deleted (the key falls through to buf += 'ENT'
  //     and NET5 still matches) — it could not fail.
  ok('R57 ENTER commits and CLEAR empties',
    /^ENTER · NET5$/.test(committed.split(' | ')[0]) && !/NET5/.test(committed.split(' | ')[1]), committed);

  // 13. KEYS is a declarative TABLE, not a function over a DOM event. The Emacs
  //     port installs this same table into a keymap — it never sees a keydown —
  //     so a function here would force it to re-derive the widget's intent and
  //     the two bindings would drift. (README, keyboard contract.)
  const keysTable = await evl(`(()=>{
    const K = GW.abcKeypad.KEYS;
    if (!K) return 'no KEYS';
    if (typeof K !== 'object' || Array.isArray(K)) return 'KEYS is not a plain table: ' + typeof K;
    const missing = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'].filter(c => K[c] !== c);
    if (missing.length) return 'unmapped or mis-mapped: ' + missing.join('');
    const want = { Space: 'SPC', Backspace: 'DEL', Enter: 'ENT' };
    for (const [k, v] of Object.entries(want)) if (K[k] !== v) return k + ' -> ' + K[k] + ', want ' + v;
    return 'ok';
  })()`);
  ok('R57 KEYS is a declarative table covering the plate', keysTable === 'ok', keysTable);

  // 13b. THE contract's first rule: no document-level listener. A widget that
  //      binds globally types into itself from anywhere on a 110-card page.
  //      Typing at the body with the card unfocused must do nothing at all.
  const unfocused = await evl(`(()=>{
    const key = k => [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k);
    key('CLR').dispatchEvent(new MouseEvent('click', {bubbles:true}));
    document.activeElement.blur();
    for (const c of ['A','B','C']) document.body.dispatchEvent(
      new KeyboardEvent('keydown', { key: c, bubbles: true, cancelable: true }));
    return document.getElementById('rd-R57').textContent;
  })()`);
  ok('R57 ignores keys when it does not have focus', unfocused === 'cleared', unfocused);

  // 13c. Focused, the same keys land — and land through press(), so click and key
  //      cannot drift apart.
  const typedByKey = await evl(`(()=>{
    const pad = document.querySelector('#card-R57 .kp-pad');
    const key = k => [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k);
    key('CLR').dispatchEvent(new MouseEvent('click', {bubbles:true}));
    pad.focus();
    const send = k => pad.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true }));
    ['n','e','t',' ','5'].forEach(send);   // lowercase must normalise; space must map to SPC
    const typed = document.getElementById('rd-R57').textContent;
    send('Backspace');
    const bs = document.getElementById('rd-R57').textContent;
    send('Enter');
    return typed + ' | ' + bs + ' | ' + document.getElementById('rd-R57').textContent;
  })()`);
  ok('R57 types from the keyboard when focused', typedByKey === 'NET 5 | NET  | ENTER · NET ', typedByKey);

  // 13c-2. Click and key must not drift. Both routes are supposed to land in the
  //        same press(), so the same sequence entered each way must produce an
  //        identical buffer and readout. Duplicated logic in the handler would
  //        pass every check above this one and fail here.
  const drift = await evl(`(()=>{
    const pad = document.querySelector('#card-R57 .kp-pad');
    const key = k => [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k);
    const rd = () => document.getElementById('rd-R57').textContent;
    const seq = ['A','B','SPC','7'];
    key('CLR').dispatchEvent(new MouseEvent('click', {bubbles:true}));
    seq.forEach(k => key(k).dispatchEvent(new MouseEvent('click', {bubbles:true})));
    const byClick = rd() + '/' + document.getElementById('card-R57').gw.get();
    key('CLR').dispatchEvent(new MouseEvent('click', {bubbles:true}));
    pad.focus();
    ['A','B',' ','7'].forEach(k =>
      pad.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true })));
    const byKey = rd() + '/' + document.getElementById('card-R57').gw.get();
    return byClick === byKey ? 'ok' : 'drift: click=' + byClick + ' key=' + byKey;
  })()`);
  ok('R57 click and key land in the same place', drift === 'ok', drift);

  // 13c-3. press() is the allowlist, not the keydown handler. The handler guards
  //        the web; the Emacs port installs KEYS into a keymap and calls press
  //        directly, with no handler in the stack — so a press that trusts its
  //        caller is a hole in exactly the target the table exists for.
  const pressGuard = await evl(`(()=>{
    const card = document.getElementById('card-R57');
    const h = card.gw;
    if (!h || !h.press) return 'no handle';
    const key = k => [...card.querySelectorAll('.kp-key')].find(e => e.dataset.k === k);
    key('CLR').dispatchEvent(new MouseEvent('click', {bubbles:true}));
    h.press('F1'); h.press('ArrowLeft'); h.press('');
    const junk = h.get();
    h.press('A');
    return junk === '' && h.get() === 'A' ? 'ok' : 'junk=' + JSON.stringify(junk) + ' then=' + JSON.stringify(h.get());
  })()`);
  ok('R57 press() filters junk from any caller, not just the keyboard', pressGuard === 'ok', pressGuard);

  // 13c-4. Every key the table maps must be a real plate action, or the Emacs
  //        port installs a binding that silently does nothing.
  const keysSubset = await evl(`(()=>{
    const bad = Object.entries(GW.abcKeypad.KEYS).filter(([,v]) => !GW.abcKeypad.ACTIONS.has(v));
    return bad.length ? 'KEYS maps to non-actions: ' + JSON.stringify(bad) : 'ok';
  })()`);
  ok('R57 every KEYS value is a real plate action', keysSubset === 'ok', keysSubset);

  // 13d. preventDefault is spent only where there is a default worth killing.
  //      Space scrolls and Backspace navigates back, so those are claimed; Tab is
  //      how the page is navigable and Escape belongs to the audit stepper, so a
  //      widget that swallows either breaks something it cannot see.
  const defaults = await evl(`(()=>{
    const pad = document.querySelector('#card-R57 .kp-pad');
    pad.focus();
    const fired = k => {
      const e = new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true });
      pad.dispatchEvent(e);
      return e.defaultPrevented;
    };
    const claimed = { Space: fired(' '), Backspace: fired('Backspace') };
    /* 'A' and 'Enter' are MAPPED keys that must still not be claimed — they reach
       the same code path as Space, so they are what catches a preventDefault
       moved after the lookup. Tab/Escape/F1 return before it and would stay green
       through that regression on their own. */
    const free = { A: fired('A'), Enter: fired('Enter'), Tab: fired('Tab'), Escape: fired('Escape'), F1: fired('F1') };
    if (!claimed.Space || !claimed.Backspace) return 'not claimed: ' + JSON.stringify(claimed);
    if (Object.values(free).some(Boolean)) return 'swallowed: ' + JSON.stringify(free);
    return 'ok';
  })()`);
  ok('R57 claims Space and Backspace, lets Tab/Escape through', defaults === 'ok', defaults);

  // 13e. press() is an allowlist, not a mailbox: an unmapped key must not append.
  const unmapped = await evl(`(()=>{
    const pad = document.querySelector('#card-R57 .kp-pad');
    const key = k => [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k);
    key('CLR').dispatchEvent(new MouseEvent('click', {bubbles:true}));
    pad.focus();
    ['F1','ArrowLeft','Home','é','!'].forEach(k =>
      pad.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true })));
    return document.getElementById('rd-R57').textContent;
  })()`);
  ok('R57 drops keys that are not on the plate', unmapped === 'cleared', unmapped);

  // 14. R58 index typewriter. THE check: selecting is not committing. Walking the
  //     stylus over the plate must print nothing at all — that separation IS the
  //     grammar, and it's the whole reason this card exists next to R57. If a cell
  //     click ever prints, the card has silently become a keypad with extra steps.
  //     Reads the BUFFER, not the card readout: the readout is supposed to change
  //     while hunting ("stylus over g"), and asserting on it would fail a correct
  //     widget for showing the operator where the pointer is.
  const grammar = await evl(`(()=>{
    const cell = c => document.querySelector('#card-R58 .ix-cell[data-c="' + c + '"]');
    const lever = document.querySelector('#card-R58 .ix-lever');
    const buf = () => document.getElementById('card-R58').gw.get();
    document.querySelector('#card-R58 .ix-clear').dispatchEvent(new MouseEvent('click', {bubbles:true}));
    const empty = buf();
    ['M','i','g'].forEach(c => cell(c).dispatchEvent(new MouseEvent('click', {bubbles:true})));
    const afterSelecting = buf();
    lever.dispatchEvent(new MouseEvent('click', {bubbles:true}));
    return JSON.stringify([empty, afterSelecting, buf()]);
  })()`);
  ok('R58 selecting prints nothing; only the lever commits', grammar === '["","","g"]', grammar);

  // 14b. The lever prints whatever the stylus is resting on, once per pull — the
  //      operator's two hands are two separate acts.
  const spelled = await evl(`(()=>{
    const cell = c => document.querySelector('#card-R58 .ix-cell[data-c="' + c + '"]');
    const lever = document.querySelector('#card-R58 .ix-lever');
    document.querySelector('#card-R58 .ix-clear').dispatchEvent(new MouseEvent('click', {bubbles:true}));
    for (const c of ['M','i','g','n','o','n']) {
      cell(c).dispatchEvent(new MouseEvent('click', {bubbles:true}));
      lever.dispatchEvent(new MouseEvent('click', {bubbles:true}));
    }
    return document.getElementById('rd-R58').textContent;
  })()`);
  ok('R58 stylus + lever spells a word', spelled.includes('Mignon'), spelled);

  // 14c. Pulling the lever twice prints the character twice: the selection stays
  //      put, which is what lets you type 'ss' without re-aiming.
  const repeat = await evl(`(()=>{
    const cell = c => document.querySelector('#card-R58 .ix-cell[data-c="' + c + '"]');
    const lever = document.querySelector('#card-R58 .ix-lever');
    document.querySelector('#card-R58 .ix-clear').dispatchEvent(new MouseEvent('click', {bubbles:true}));
    cell('s').dispatchEvent(new MouseEvent('click', {bubbles:true}));
    lever.dispatchEvent(new MouseEvent('click', {bubbles:true}));
    lever.dispatchEvent(new MouseEvent('click', {bubbles:true}));
    return document.getElementById('card-R58').gw.get();
  })()`);
  /* Exact, on the buffer. /ss$/ on the readout also matched 'sss', so it passed
     even if selecting printed — unable to fail on the one bug this card is about. */
  ok('R58 the lever repeats without re-aiming', repeat === 'ss', JSON.stringify(repeat));

  // 14d. The plate's whole point, per Craig: it considered the characters a
  //      keyboard skips. Both cases with no shift key, plus accents, fractions and
  //      the section mark — that coverage is the idea being preserved from the
  //      Mignon, where the key ORDER deliberately is not.
  const charset = await evl(`(()=>{
    const have = new Set([...document.querySelectorAll('#card-R58 .ix-cell')].map(c => c.dataset.c));
    const need = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ', ...'abcdefghijklmnopqrstuvwxyz',
                  ...'0123456789', 'ä','ö','ü','Ä','Ö','Ü','ß','§','½','¼'];
    const missing = need.filter(c => !have.has(c));
    return missing.length ? 'missing: ' + missing.join(' ') : 'ok';
  })()`);
  ok('R58 plate carries both cases, digits and the extended set', charset === 'ok', charset);

  // 14e. The layout is DATA, so revising the order is a table edit rather than a
  //      redraw. Craig has already said the keys will change; a layout welded into
  //      the drawing is one that never does.
  const layoutData = await evl(`(()=>{
    const L = GW.indexPlate && GW.indexPlate.LAYOUT;
    if (!L) return 'no LAYOUT';
    if (!Array.isArray(L) || !L.every(Array.isArray)) return 'LAYOUT is not a grid';
    const cells = document.querySelectorAll('#card-R58 .ix-cell').length;
    const declared = L.flat().filter(Boolean).length;
    return cells === declared ? 'ok' : 'drawn ' + cells + ' but declared ' + declared;
  })()`);
  ok('R58 layout is a declared table the plate renders', layoutData === 'ok', layoutData);

  // 14f. Nothing sits on top of the plate. The lever and CLR started life over the
  //      last column, burying characters and the PRINT legend, and every check
  //      above stayed green through it — geometry is invisible to behaviour. The
  //      gutter is sized off the layout table, so a wider plate must not slide the
  //      controls back onto the characters.
  const clear = await evl(`(()=>{
    const box = sel => { const e = document.querySelector('#card-R58 ' + sel); return e ? e.getBBox() : null; };
    const cells = [...document.querySelectorAll('#card-R58 .ix-cell')].map(c => c.getBBox());
    const right = Math.max(...cells.map(b => b.x + b.width));
    const hits = [];
    for (const sel of ['.ix-lever', '.ix-clear']) {
      const b = box(sel);
      if (!b) { hits.push(sel + ' missing'); continue; }
      if (b.x < right) hits.push(sel + ' starts at ' + Math.round(b.x) + ', left of the plate edge ' + Math.round(right));
    }
    return hits.length ? hits.join('; ') : 'ok';
  })()`);
  ok('R58 lever and CLR clear the plate', clear === 'ok', clear);

  // 14g. The gutter stack doesn't collide with itself. The x-only check above
  //      can't see this: the lever and legend are anchored to the plate's top and
  //      CLR to the viewBox, so a SHORTER layout table (five rows is a plausible
  //      edit) used to ride CLR up over the PRINT legend. Growth was always safe;
  //      shrink was the trap, which is why VH now takes a floor.
  const stack = await evl(`(()=>{
    const bb = sel => { const e = document.querySelector('#card-R58 ' + sel); return e ? e.getBBox() : null; };
    const lever = bb('.ix-lever'), clr = bb('.ix-clear');
    const legend = [...document.querySelectorAll('#card-R58 text')].find(t => t.textContent === 'PRINT');
    if (!lever || !clr || !legend) return 'missing gutter part';
    const lg = legend.getBBox();
    const overlaps = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width &&
                               a.y < b.y + b.height && b.y < a.y + a.height;
    if (overlaps(lever, clr)) return 'lever overlaps CLR';
    if (overlaps(lg, clr)) return 'PRINT legend overlaps CLR';
    if (overlaps(lg, lever)) return 'PRINT legend overlaps the lever';
    const vb = document.querySelector('#card-R58 .ix-pad').viewBox.baseVal;
    if (clr.y + clr.height > vb.height) return 'CLR falls outside the viewBox';
    return 'ok';
  })()`);
  ok('R58 gutter stack does not collide or overflow', stack === 'ok', stack);

  // 14h. The layout table has no duplicate characters. cells{} and KEYS{} are both
  //      keyed by character, so a repeat would silently keep only the last: two
  //      cells would render and both be clickable, but clicking the first would
  //      jump the stylus across the plate to the second. 14e can't see it — a
  //      duplicate inflates the drawn count and the declared count equally.
  const dupes = await evl(`(()=>{
    const flat = GW.indexPlate.LAYOUT.flat().filter(Boolean);
    const seen = new Set(), dup = new Set();
    for (const c of flat) (seen.has(c) ? dup : seen).add(c);
    return dup.size ? 'duplicated on the plate: ' + [...dup].join(' ') : 'ok';
  })()`);
  ok('R58 layout has no duplicate characters', dupes === 'ok', dupes);

  // 14i. press() is the allowlist for R58 too. R57 has this check; without it,
  //      press('F1') reaching select() unfiltered would ship green.
  const ixPress = await evl(`(()=>{
    const h = document.getElementById('card-R58').gw;
    h.press('CLR');
    ['F1', 'PRINT ', '', 'constructor', 'ZZ'].forEach(k => h.press(k));
    return JSON.stringify([h.get(), h.selected()]);
  })()`);
  ok('R58 press() filters junk from any caller', ixPress.startsWith('[""'), ixPress);

  // 15. R58's keymap comes OUT of the layout table rather than beside it, so
  //     relaying the plate can't leave a keybinding pointing at a character the
  //     plate no longer carries. Enter is the lever.
  const ixKeys = await evl(`(()=>{
    const K = GW.indexPlate.KEYS, L = GW.indexPlate.LAYOUT;
    if (!K) return 'no KEYS';
    const chars = L.flat().filter(Boolean);
    const missing = chars.filter(c => K[c] !== c);
    if (missing.length) return 'plate chars not mapped: ' + missing.join(' ');
    if (K.Enter !== 'PRINT') return 'Enter -> ' + K.Enter + ', want PRINT';
    const extra = Object.keys(K).filter(k => k !== 'Enter' && !chars.includes(k));
    return extra.length ? 'maps keys not on the plate: ' + extra.join(' ') : 'ok';
  })()`);
  ok('R58 keymap is derived from the layout, Enter is the lever', ixKeys === 'ok', ixKeys);

  // 15b. THE grammar again, now through the keyboard. Typing a letter must move
  //      the stylus and print NOTHING. If a keypress ever prints, the card has
  //      quietly become R57 with a nicer plate, and the one thing it exists to
  //      demonstrate is gone.
  const ixType = await evl(`(()=>{
    const pad = document.querySelector('#card-R58 .ix-pad');
    const h = document.getElementById('card-R58').gw;
    const send = k => pad.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true }));
    document.querySelector('#card-R58 .ix-clear').dispatchEvent(new MouseEvent('click', {bubbles:true}));
    pad.focus();
    ['M','i','g'].forEach(send);
    const afterTyping = h.get();
    const resting = h.selected();
    send('Enter');
    return JSON.stringify([afterTyping, resting, h.get()]);
  })()`);
  ok('R58 typing selects, Enter prints', ixType === '["","g","g"]', ixType);

  // 15c. The plate holds both cases, so nothing is uppercased on the way in:
  //      Shift picks the case because 'a' and 'A' are different cells. R57 has to
  //      uppercase; this one must not, and that difference is the plate's whole
  //      argument for having no shift key.
  const ixCase = await evl(`(()=>{
    const pad = document.querySelector('#card-R58 .ix-pad');
    const h = document.getElementById('card-R58').gw;
    const send = k => pad.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true }));
    document.querySelector('#card-R58 .ix-clear').dispatchEvent(new MouseEvent('click', {bubbles:true}));
    pad.focus();
    send('a'); send('Enter');
    send('A'); send('Enter');
    return h.get();
  })()`);
  ok('R58 keeps case: a and A are different cells', ixCase === 'aA', ixCase);

  // 15d. Space isn't on the plate, so it isn't ours: it must scroll the page like
  //      always. (The missing space cell is a known gap — the real Mignon has a
  //      separate space key.)
  const ixSpace = await evl(`(()=>{
    const pad = document.querySelector('#card-R58 .ix-pad');
    pad.focus();
    const e = new KeyboardEvent('keydown', { key: ' ', bubbles: true, cancelable: true });
    pad.dispatchEvent(e);
    return e.defaultPrevented ? 'swallowed space' : 'ok';
  })()`);
  ok('R58 leaves Space alone (not on the plate)', ixSpace === 'ok', ixSpace);

  // 15e. Unfocused, it hears nothing — the contract's first rule, on the second
  //      widget to take keys.
  //      Asserts nothing CHANGED, rather than expecting a cleared selection: CLR
  //      is fresh paper, and fresh paper doesn't move the operator's hand, so the
  //      stylus legitimately stays where the previous check left it.
  const ixBlur = await evl(`(()=>{
    const h = document.getElementById('card-R58').gw;
    document.querySelector('#card-R58 .ix-clear').dispatchEvent(new MouseEvent('click', {bubbles:true}));
    document.activeElement.blur();
    const before = JSON.stringify([h.get(), h.selected()]);
    ['Q','Z'].forEach(k => document.body.dispatchEvent(
      new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true })));
    const after = JSON.stringify([h.get(), h.selected()]);
    return before === after ? 'ok' : before + ' -> ' + after;
  })()`);
  ok('R58 ignores keys when unfocused', ixBlur === 'ok', ixBlur);

  // late exceptions from interactions
  const errs2 = events.filter(e => e.method === 'Runtime.exceptionThrown');
  ok('no exceptions after interaction', errs2.length === 0);

  if (shotPath) {
    await evl(`window.scrollTo(0,0)`);
    await sleep(300);
    const shot = await send('Page.captureScreenshot', { format: 'png' });
    writeFileSync(shotPath, Buffer.from(shot.result.data, 'base64'));
    console.log('shot: ' + shotPath);
  }
} catch (e) {
  console.error('PROBE ERROR: ' + e.message);
  fails.push('probe-error');
} finally {
  chrome.kill();
}
process.exit(fails.length ? 1 : 0);