mini

` is missing. - [ ] **Step 3: Write `tools/shots.ts`** ```ts /** Frames and fps of `/` in headless Chrome with the real GPU: node --import tsx tools/shots.ts [--cpu 4] */ import { spawn } from 'node:child_process'; import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs'; import { tmpdir } from 'node:os'; import { join } from 'node:path'; const arg = (k: string, d: string) => { const i = process.argv.indexOf(k); return i > 0 ? process.argv[i + 1]! : d; }; const BASE = arg('--base', 'http://127.0.0.1:4410'), CPU = Number(arg('--cpu', '1')), OUT = arg('--out', 'shots/lobby'), W = 1440, H = 900; const CHROME = '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'; if (!existsSync(CHROME)) throw new Error('Google Chrome not found'); mkdirSync(OUT, { recursive: true }); const profile = mkdtempSync(join(tmpdir(), 'tdg-shots-')); const chrome = spawn(CHROME, ['--headless=new', '--remote-debugging-port=0', `--user-data-dir=${profile}`, '--no-first-run', '--no-default-browser-check', `--window-size=${W},${H}`, '--hide-scrollbars', '--use-angle=metal', '--enable-gpu-rasterization', '--ignore-gpu-blocklist'], { stdio: 'ignore' }); const portFile = join(profile, 'DevToolsActivePort'); for (let i = 0; i < 100 && !existsSync(portFile); i++) await new Promise(r => setTimeout(r, 100)); const port = readFileSync(portFile, 'utf8').split('\n')[0]!.trim(); const target = await (await fetch(`http://127.0.0.1:${port}/json/new?about:blank`, { method: 'PUT' })).json() as { webSocketDebuggerUrl: string }; const ws = new WebSocket(target.webSocketDebuggerUrl); await new Promise((res, rej) => { ws.addEventListener('open', () => res()); ws.addEventListener('error', rej); }); let id = 0; const waits = new Map void>(); ws.addEventListener('message', e => { const m = JSON.parse(String(e.data)); if (m.id && waits.has(m.id)) { waits.get(m.id)!(m); waits.delete(m.id); } }); const send = (method: string, params: Record = {}) => { const n = ++id; ws.send(JSON.stringify({ id: n, method, params })); return new Promise(r => waits.set(n, r)); }; const ev = async (expr: string) => (await send('Runtime.evaluate', { expression: expr, awaitPromise: true, returnByValue: true })).result?.result?.value; const shot = async (name: string) => { const r = await send('Page.captureScreenshot', { format: 'jpeg', quality: 85 }); writeFileSync(join(OUT, `${name}.jpg`), Buffer.from(r.result.data, 'base64')); }; const wait = (ms: number) => new Promise(r => setTimeout(r, ms)); await send('Page.enable'); await send('Runtime.enable'); await send('Emulation.setDeviceMetricsOverride', { width: W, height: H, deviceScaleFactor: 1, mobile: false }); await send('Emulation.setCPUThrottlingRate', { rate: CPU }); await send('Page.navigate', { url: `${BASE}/` }); await wait(1500); await shot('00-arrive'); await wait(1500); await shot('01-live'); const renderer = await ev(`(() => { const c = document.createElement('canvas'); const g = c.getContext('webgl2'); const d = g && g.getExtension('WEBGL_debug_renderer_info'); return d ? g.getParameter(d.UNMASKED_RENDERER_WEBGL) : 'no webgl2'; })()`); const live = await ev(`document.querySelector('.stage-live') !== null`); await ev(`document.querySelector('.stage-hit[data-hit="government"]').dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))`); await wait(400); await shot('02-focus-government'); const fps = await ev(`(async () => { const t0 = performance.now(); let f = 0; await new Promise(r => { const tick = () => { f++; if (performance.now() - t0 < 2000) requestAnimationFrame(tick); else r(); }; requestAnimationFrame(tick); }); return Math.round(f / ((performance.now() - t0) / 1000)); })()`); const result = { renderer, riveLive: live, cpu: CPU, fpsIdle: fps, at: new Date().toISOString() }; writeFileSync(join(OUT, `fps-${CPU}x.json`), JSON.stringify(result, null, 2)); console.log(JSON.stringify(result)); ws.close(); chrome.kill(); await new Promise(r => chrome.once('exit', r)); rmSync(profile, { recursive: true, force: true }); if (!live) { console.error('Rive did not go live in headless Chrome'); process.exit(1); } if (fps < (CPU >= 4 ? 30 : 55)) { console.error(`fps ${fps} below the bar`); process.exit(1); } ``` - [ ] **Step 4: Measure at 1× and 4×** Run: `npm run dev & sleep 4; npm run shots; npm run shots -- --cpu 4; kill %1` Expected: `riveLive: true`, `fpsIdle ≥ 55` at 1× and `≥ 30` at 4×; three JPEGs in `shots/lobby/`. If fps is below the bar, the refined scene is too heavy for the runtime: raise `DEFAULT_REFINE.tolerance` to 1.0 and `minArea` to 6, re-run `npm run refine -- --room lobby`, `npm run rive:author -- --room lobby --replace`, `npm run rive:verify`, `npm run sync`, and measure again. Record the final numbers in the commit message. - [ ] **Step 5: Commit** ```bash git add playwright.config.ts tests/browser/lobby.spec.ts tools/shots.ts git commit -m "Browser tests (nav, keyboard, axe) and headless fps measurement for the lobby" ``` --- ### Task 12: Hand-off for the owner's verdict - [ ] **Step 1: Run the full verification in order** Run: `npm test && npm run typecheck && npm run rive:verify && npm run test:browser` Expected: all green. - [ ] **Step 2: Start the dev server for Joseph and report** Run: `npm run dev` Report in chat (no report file): the URL `http://127.0.0.1:4410/`, before→after vertex counts and diff ratio from `scenes/refined/lobby/manifest.json`, `lobby.riv` size, state-machine/input names from `rive-manifest.json`, fps at 1× and 4×, the editor URL of the file, and what Plan 2 covers (three rooms, mascot rig, walk-through, contact API, prerender, release). Do not start Plan 2 until Joseph has judged the lobby in Chrome. --- ## Self-review - Spec coverage: repo layout (T1, T9), vector pipeline steps 1–6 (T3–T5), Rive authoring steps 1–7 for the lobby (T7), headless verification (T8), truth projection + owner placeholders (T9), stage with poster/Rive/hit shapes/caption, door click → trigger → navigate, reduced motion, mobile poster (T10), browser gates + fps (T11). Mascot rig, rooms 2–4, contact API, prerender, release: Plan 2 by design. - Type consistency: `RefinedManifest` (T5) is consumed by `planLobby` (T7); `Hotspot` (T10) is produced by `hotspotsFromManifest` and consumed by `SceneStage`; `rive-manifest.json` fields written in T7 are read in T8 and T10 with the same names (`file`, `artboard`, `stateMachine`, `viewModel`, `inputs`, `animations`, `doors`). - Known editor-shape uncertainty is isolated in `rive-author.ts` accessors (ids under `id`/`nodeId`/`group.id`, `properties`/`viewModelProperties`, `animations`/`linearAnimations`) and in the `@rive-app/react-webgl2` view-model hook names; both tasks say to confirm against the live tool result / package types before trusting the code.

{truth.org.name}

Registry facts to be supplied by the owner