Made of little things.

// Probe 3: instrumented wind cost (software raster, HiDPI, 6x CPU throttle)
import { createServer } from 'node:http';
import { readFile } from 'node:fs/promises';
import { join, extname } from 'node:path';
import { chromium } from 'playwright';

const dist = '/mnt/Mirror/Projects/Hermes/minesweeper-dx/dist';
const MIME = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css' };
async function serveDist() {
  const server = createServer(async (req, res) => {
    const p = req.url === '/' ? '/index.html' : req.url.split('?')[0];
    try {
      const body = await readFile(join(dist, p.slice(1)));
      res.writeHead(200, { 'content-type': MIME[extname(p)] ?? 'application/octet-stream' });
      res.end(body);
    } catch { res.writeHead(403).end('denied'); }
  });
  await new Promise((ok) => server.listen(0, '127.0.0.1', ok));
  return { url: `http://127.0.0.1:${server.address().port}/`, close: () => server.close() };
}
const svc = await serveDist();
const browser = await chromium.launch({ args: ['--disable-gpu', '--disable-accelerated-2d-canvas'] });
const page = await browser.newPage({ viewport: { width: 1600, height: 1000 }, deviceScaleFactor: 2 });
const errors = [];
page.on('pageerror', (e) => errors.push(String(e).slice(0, 160)));
await page.goto(svc.url, { waitUntil: 'load' });
await page.waitForFunction(() => window.minesweeperDx !== undefined);

// instrument canvas 2D calls + board getBoundingClientRect BEFORE play
await page.evaluate(() => {
  const app = window.minesweeperDx;
  const fx = app.fx;
  const ctx = document.getElementById('fx').getContext('2d');
  window.__i = { clears: 0, clearArea: 0, grads: 0, clips: 0, strokes: 0, boardGBCR: 0, frames: 0 };
  const on = (name, fn) => { const o = ctx[name].bind(ctx); ctx[name] = (...a) => { fn(a); return o(...a); }; };
  on('clearRect', (a) => { window.__i.clears++; window.__i.clearArea += (a[2] || 0) * (a[3] || 0); });
  on('createLinearGradient', () => window.__i.grads++);
  on('createRadialGradient', () => window.__i.grads++);
  on('clip', () => window.__i.clips++);
  on('stroke', () => window.__i.strokes++);
  const og = Element.prototype.getBoundingClientRect;
  Element.prototype.getBoundingClientRect = function () { if (this.classList?.contains('board')) window.__i.boardGBCR++; return og.call(this); };
  const origDraw = fx.draw.bind(fx);
  fx.draw = (...a) => { window.__i.frames++; return origDraw(...a); };
});

await page.click('#startRunBtn');
for (let d = 0; d < 6; d++) {
  await page.evaluate(() => {
    const g = window.minesweeperDx; const eng = g.board.game;
    for (const t of eng.world.tiles) if (!t.hasMine && t.state === 'HIDDEN') eng.reveal(t.coord[0], t.coord[1]);
    g.board.refresh(); g.sync(eng);
  });
  await page.click('#continueBtn');
}
await page.evaluate(() => { const m = document.querySelector('#shifterIntro'); if (m && !m.hidden) document.querySelector('#shifterIntroOk').click(); });
const cdp = await page.context().newCDPSession(page);
await cdp.send('Emulation.setCPUThrottlingRate', { rate: 6 });
await page.waitForTimeout(600);

async function sample(label, turns) {
  await page.evaluate(() => { for (const k in window.__i) window.__i[k] = 0; });
  const t0 = Date.now();
  const a = page.locator('.cell[data-x="0"][data-y="0"]');
  const b = page.locator('.cell[data-x="1"][data-y="0"]');
  for (let i = 0; i < turns; i++) await (i % 2 ? a : b).click({ button: 'right' });
  await page.waitForTimeout(900);
  const el = Date.now() - t0;
  const s = await page.evaluate(() => ({ ...window.__i, wind: !!window.minesweeperDx.fx.telegraphWind, drawCalls: 0 }));
  const dt = await page.evaluate(() => new Promise((res) => {
    const ts = []; let last = performance.now(); let n = 0;
    const tick = (t) => { ts.push(t - last); last = t; if (++n < 40) requestAnimationFrame(tick); else { ts.sort((x, y) => x - y); res({ med: ts[20], p95: ts[38], over: ts.filter((x) => x > 33).length }); } };
    requestAnimationFrame(tick);
  }));
  console.log(label, 'elapsed', el, JSON.stringify(s), 'rAF', JSON.stringify(dt));
}

// idle wind: 6 turns (countdown far from beat); then a full warning+shift window: 32 turns
await sample('wind-idle  ', 6);
await sample('shift-window', 32);
// context-loss check: does the canvas still accept pixel ops?
// NOTE: draw() leaves a dpr setTransform active (CSS-pixel paint space), so
// the probe fill/read must run in identity space — a device-space fillRect
// at dpr2 landed under the scaled transform and read a transparent pixel,
// reporting CANVAS-DEAD on healthy canvases (bug present since 929a5e9;
// first caught by the audit's after-the-fact pixel forensics).
const alive = await page.evaluate(() => {
  const c = document.getElementById('fx');
  const ctx = c.getContext('2d');
  ctx.save();
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.fillStyle = 'red'; ctx.fillRect(2, 2, 6, 6);
  const d = ctx.getImageData(3, 3, 1, 1).data;
  ctx.clearRect(0, 0, 12, 12);
  ctx.restore();
  return d[0] === 255 ? 'canvas-alive' : 'CANVAS-DEAD';
});
console.log('canvas:', alive, '| errors:', errors.length ? errors : 'none');
await browser.close();
svc.close();