reelson 0.7.0

package/skills/reelson-record/scripts/cursor-overlay.js

@@ -0,0 +1,111 @@
+/**
+ * Injected into every page before load. Playwright's synthetic mouse never
+ * moves the OS cursor, and screen/video capture never shows it either, so we
+ * draw our own: a large macOS-style black arrow that follows `mousemove`, a
+ * press "squash" and an accent-coloured expanding ring on `mousedown`. Position survives
+ * navigations via sessionStorage.
+ *
+ * With `report`, every move and press in the top window is also sent to the recorder
+ * (the CURSOR_BINDING binding) with the page's clock: the cursor layer is drawn from that
+ * log. With `draw: false` nothing is drawn — the video draws the cursor instead.
+ */
+export const CURSOR_BINDING = '__reelsonCursor';
+export function cursorOverlayScript(accent = '#dc2626', options = {}) {
+    const { draw = true, report = false } = options;
+    return `
+(() => {
+    if (window.__demoCursor) return;
+    window.__demoCursor = true;
+
+    const REPORT = ${JSON.stringify(report)} && window.top === window;
+    const send = (type, e) => {
+        if (!REPORT) return;
+        const t = Date.now();
+        try { window[${JSON.stringify(CURSOR_BINDING)}]({ type, x: e.clientX, y: e.clientY, t }); } catch {}
+    };
+    document.addEventListener('mousemove', (e) => send('move', e), true);
+    document.addEventListener('mousedown', (e) => send('down', e), true);
+    document.addEventListener('mouseup', (e) => send('up', e), true);
+    if (!${JSON.stringify(draw)}) return;
+
+    const SIZE = 44;          // px
+    const ACCENT = ${JSON.stringify(accent)};
+    // Arrow tip in the 24-unit viewBox is (5.5, 2.5); this is where the pointer actually is.
+    const TIP_X = 5.5 / 24 * SIZE;
+    const TIP_Y = 2.5 / 24 * SIZE;
+    const style = document.createElement('style');
+    style.textContent = \`
+        #__demo-cursor { position: fixed; left: 0; top: 0; width: \${SIZE}px; height: \${SIZE}px; z-index: 2147483647;
+            pointer-events: none; will-change: transform;
+            filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)) drop-shadow(0 8px 16px rgba(0,0,0,.25)); }
+        /* The press squash scales the SVG child about the arrow tip. Never scale the
+           container: its scale composes outside the positioning translate and drags the
+           cursor toward the page origin while it animates. */
+        #__demo-cursor svg { display: block; transform-origin: \${TIP_X}px \${TIP_Y}px; }
+        #__demo-cursor.pressed svg { animation: __demo-press .22s ease-out; }
+        @keyframes __demo-press { 0% { transform: scale(1) } 40% { transform: scale(.82) } 100% { transform: scale(1) } }
+        #__demo-ripple, #__demo-ripple2 { position: fixed; border-radius: 50%; z-index: 2147483646; pointer-events: none;
+            transform: translate(-50%, -50%) scale(.2); opacity: 0; }
+        #__demo-ripple { width: 84px; height: 84px; border: 4px solid \${ACCENT}; background: color-mix(in srgb, \${ACCENT} 22%, transparent); }
+        #__demo-ripple2 { width: 84px; height: 84px; border: 2px solid color-mix(in srgb, \${ACCENT} 90%, transparent); }
+        #__demo-ripple.go { animation: __demo-ripple .55s cubic-bezier(.2,.7,.3,1) forwards; }
+        #__demo-ripple2.go { animation: __demo-ripple .8s .08s cubic-bezier(.2,.7,.3,1) forwards; }
+        @keyframes __demo-ripple { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 1 }
+            100% { transform: translate(-50%,-50%) scale(1.25); opacity: 0 } }
+    \`;
+
+    const cursor = document.createElement('div');
+    cursor.id = '__demo-cursor';
+    cursor.innerHTML = '<svg viewBox="0 0 24 24" width="' + SIZE + '" height="' + SIZE + '">'
+        + '<path d="M5.5 2.5v17.4l4.6-4.4 2.9 6.5 3-1.3-2.9-6.4h6.4z" fill="#111" stroke="#fff" stroke-width="1.6" stroke-linejoin="round"/></svg>';
+    const ripple = document.createElement('div');
+    ripple.id = '__demo-ripple';
+    const ripple2 = document.createElement('div');
+    ripple2.id = '__demo-ripple2';
+
+    let saved = { x: -100, y: -100 };
+    try { saved = JSON.parse(sessionStorage.getItem('__demoCursorPos') || 'null') || saved; } catch {}
+
+    const place = (x, y) => {
+        cursor.style.transform = 'translate(' + (x - TIP_X) + 'px,' + (y - TIP_Y) + 'px)';
+        try { sessionStorage.setItem('__demoCursorPos', JSON.stringify({ x, y })); } catch {}
+    };
+
+    const mount = () => {
+        const host = document.documentElement;
+        host.appendChild(style); host.appendChild(ripple2); host.appendChild(ripple); host.appendChild(cursor);
+        place(saved.x, saved.y);
+    };
+    if (document.documentElement) mount(); else document.addEventListener('DOMContentLoaded', mount);
+
+    document.addEventListener('mousemove', (e) => place(e.clientX, e.clientY), true);
+    document.addEventListener('mousedown', (e) => {
+        for (const r of [ripple, ripple2]) {
+            r.style.left = e.clientX + 'px'; r.style.top = e.clientY + 'px';
+            r.classList.remove('go'); void r.offsetWidth; r.classList.add('go');
+        }
+        cursor.classList.remove('pressed'); void cursor.offsetWidth; cursor.classList.add('pressed');
+    }, true);
+})();
+`;
+}
+/**
+ * Hides local-only UI (debug toolbars, environment badges, dev-login buttons)
+ * in every recorded page. Selectors come from COMMON_DEV_CHROME plus the
+ * project's `record.hideSelectors` in demo.config.json.
+ */
+export function hideDevChromeScript(selectors) {
+    if (selectors.length === 0) {
+        return '';
+    }
+    // One rule per selector: an invalid selector in a list drops the whole rule.
+    const css = selectors.map((s) => `${s} { display: none !important; }`).join('\n');
+    return `
+(() => {
+    const style = document.createElement('style');
+    style.textContent = ${JSON.stringify(css)};
+    const mount = () => document.head.appendChild(style);
+    if (document.head) mount(); else document.addEventListener('DOMContentLoaded', mount);
+})();
+`;
+}

package/skills/reelson-record/scripts/cursor-overlay.ts

@@ -0,0 +1,122 @@
+/**
+ * Injected into every page before load. Playwright's synthetic mouse never
+ * moves the OS cursor, and screen/video capture never shows it either, so we
+ * draw our own: a large macOS-style black arrow that follows `mousemove`, a
+ * press "squash" and an accent-coloured expanding ring on `mousedown`. Position survives
+ * navigations via sessionStorage.
+ *
+ * With `report`, every move and press in the top window is also sent to the recorder
+ * (the CURSOR_BINDING binding) with the page's clock: the cursor layer is drawn from that
+ * log. With `draw: false` nothing is drawn — the video draws the cursor instead.
+ */
+export const CURSOR_BINDING = '__reelsonCursor'
+
+export interface CursorEvent {
+    type: 'move' | 'down' | 'up'
+    x: number
+    y: number
+    /** Date.now() in the page when the event was handled. */
+    t: number
+}
+
+export function cursorOverlayScript(accent: string = '#dc2626', options: { draw?: boolean; report?: boolean } = {}): string {
+    const { draw = true, report = false } = options
+    return `
+(() => {
+    if (window.__demoCursor) return;
+    window.__demoCursor = true;
+
+    const REPORT = ${JSON.stringify(report)} && window.top === window;
+    const send = (type, e) => {
+        if (!REPORT) return;
+        const t = Date.now();
+        try { window[${JSON.stringify(CURSOR_BINDING)}]({ type, x: e.clientX, y: e.clientY, t }); } catch {}
+    };
+    document.addEventListener('mousemove', (e) => send('move', e), true);
+    document.addEventListener('mousedown', (e) => send('down', e), true);
+    document.addEventListener('mouseup', (e) => send('up', e), true);
+    if (!${JSON.stringify(draw)}) return;
+
+    const SIZE = 44;          // px
+    const ACCENT = ${JSON.stringify(accent)};
+    // Arrow tip in the 24-unit viewBox is (5.5, 2.5); this is where the pointer actually is.
+    const TIP_X = 5.5 / 24 * SIZE;
+    const TIP_Y = 2.5 / 24 * SIZE;
+    const style = document.createElement('style');
+    style.textContent = \`
+        #__demo-cursor { position: fixed; left: 0; top: 0; width: \${SIZE}px; height: \${SIZE}px; z-index: 2147483647;
+            pointer-events: none; will-change: transform;
+            filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)) drop-shadow(0 8px 16px rgba(0,0,0,.25)); }
+        /* The press squash scales the SVG child about the arrow tip. Never scale the
+           container: its scale composes outside the positioning translate and drags the
+           cursor toward the page origin while it animates. */
+        #__demo-cursor svg { display: block; transform-origin: \${TIP_X}px \${TIP_Y}px; }
+        #__demo-cursor.pressed svg { animation: __demo-press .22s ease-out; }
+        @keyframes __demo-press { 0% { transform: scale(1) } 40% { transform: scale(.82) } 100% { transform: scale(1) } }
+        #__demo-ripple, #__demo-ripple2 { position: fixed; border-radius: 50%; z-index: 2147483646; pointer-events: none;
+            transform: translate(-50%, -50%) scale(.2); opacity: 0; }
+        #__demo-ripple { width: 84px; height: 84px; border: 4px solid \${ACCENT}; background: color-mix(in srgb, \${ACCENT} 22%, transparent); }
+        #__demo-ripple2 { width: 84px; height: 84px; border: 2px solid color-mix(in srgb, \${ACCENT} 90%, transparent); }
+        #__demo-ripple.go { animation: __demo-ripple .55s cubic-bezier(.2,.7,.3,1) forwards; }
+        #__demo-ripple2.go { animation: __demo-ripple .8s .08s cubic-bezier(.2,.7,.3,1) forwards; }
+        @keyframes __demo-ripple { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 1 }
+            100% { transform: translate(-50%,-50%) scale(1.25); opacity: 0 } }
+    \`;
+
+    const cursor = document.createElement('div');
+    cursor.id = '__demo-cursor';
+    cursor.innerHTML = '<svg viewBox="0 0 24 24" width="' + SIZE + '" height="' + SIZE + '">'
+        + '<path d="M5.5 2.5v17.4l4.6-4.4 2.9 6.5 3-1.3-2.9-6.4h6.4z" fill="#111" stroke="#fff" stroke-width="1.6" stroke-linejoin="round"/></svg>';
+    const ripple = document.createElement('div');
+    ripple.id = '__demo-ripple';
+    const ripple2 = document.createElement('div');
+    ripple2.id = '__demo-ripple2';
+
+    let saved = { x: -100, y: -100 };
+    try { saved = JSON.parse(sessionStorage.getItem('__demoCursorPos') || 'null') || saved; } catch {}
+
+    const place = (x, y) => {
+        cursor.style.transform = 'translate(' + (x - TIP_X) + 'px,' + (y - TIP_Y) + 'px)';
+        try { sessionStorage.setItem('__demoCursorPos', JSON.stringify({ x, y })); } catch {}
+    };
+
+    const mount = () => {
+        const host = document.documentElement;
+        host.appendChild(style); host.appendChild(ripple2); host.appendChild(ripple); host.appendChild(cursor);
+        place(saved.x, saved.y);
+    };
+    if (document.documentElement) mount(); else document.addEventListener('DOMContentLoaded', mount);
+
+    document.addEventListener('mousemove', (e) => place(e.clientX, e.clientY), true);
+    document.addEventListener('mousedown', (e) => {
+        for (const r of [ripple, ripple2]) {
+            r.style.left = e.clientX + 'px'; r.style.top = e.clientY + 'px';
+            r.classList.remove('go'); void r.offsetWidth; r.classList.add('go');
+        }
+        cursor.classList.remove('pressed'); void cursor.offsetWidth; cursor.classList.add('pressed');
+    }, true);
+})();
+`
+}
+
+/**
+ * Hides local-only UI (debug toolbars, environment badges, dev-login buttons)
+ * in every recorded page. Selectors come from COMMON_DEV_CHROME plus the
+ * project's `record.hideSelectors` in demo.config.json.
+ */
+export function hideDevChromeScript(selectors: string[]): string {
+    if (selectors.length === 0) {
+        return ''
+    }
+    // One rule per selector: an invalid selector in a list drops the whole rule.
+    const css = selectors.map((s) => `${s} { display: none !important; }`).join('\n')
+
+    return `
+(() => {
+    const style = document.createElement('style');
+    style.textContent = ${JSON.stringify(css)};
+    const mount = () => document.head.appendChild(style);
+    if (document.head) mount(); else document.addEventListener('DOMContentLoaded', mount);
+})();
+`
+}

package/skills/reelson-record/scripts/doctor.js

@@ -0,0 +1,128 @@
+/**
+ * `reelson doctor`: is this machine ready to record and render, and does the cursor layer
+ * line up with the footage here? Checks the tools, then films a local test page the way
+ * `reelson record` does (screencast + the page's cursor log) with a magenta dot drawn at the
+ * pointer, finds the dot in every frame and measures how far the logged cursor is from it.
+ */
+import { spawnSync } from 'node:child_process';
+import { mkdtempSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join, resolve } from 'node:path';
+import { startScreencast } from "./capture.js";
+import { CURSOR_BINDING, cursorOverlayScript } from "./cursor-overlay.js";
+export async function doctor(log = console.log) {
+    let problems = 0;
+    const check = (ok, good, bad) => {
+        log(`${ok ? '✓' : '✗'} ${ok ? good : bad}`);
+        if (!ok)
+            problems++;
+    };
+    const [major, minor] = process.versions.node.split('.').map(Number);
+    check(major > 22 || (major === 22 && minor >= 18), `Node ${process.versions.node}`, `Node ${process.versions.node} — reelson needs 22.18+`);
+    for (const tool of ['ffmpeg', 'ffprobe']) {
+        const found = spawnSync(tool, ['-version'], { encoding: 'utf8' });
+        check(found.status === 0, `${found.stdout.split('\n')[0]}`, `${tool} not found — brew install ffmpeg`);
+    }
+    try {
+        const { hyperframesDist, HYPERFRAMES_VERSION } = await import("../../reelson-compose/scripts/hyperframes.js");
+        hyperframesDist();
+        check(true, `HyperFrames ${HYPERFRAMES_VERSION}`, '');
+    }
+    catch (error) {
+        check(false, '', `HyperFrames: ${error.message}`);
+    }
+    try {
+        const sync = await measureCursorSync();
+        check(sync.fps >= 30, `screencast: ${sync.fps.toFixed(0)} fps at 2x`, `screencast only ${sync.fps.toFixed(0)} fps — footage will stutter; try record.capture "playwright"`);
+        check(Math.abs(sync.lagMs) <= 34 && sync.errorPx <= 3, `cursor layer lines up with the footage: offset ${sync.lagMs} ms, ${sync.errorPx.toFixed(1)} px (${sync.frames} frames)`, `cursor layer is off by ${sync.lagMs} ms / ${sync.errorPx.toFixed(1)} px on this machine — use record.cursor "recorded", and report it`);
+    }
+    catch (error) {
+        check(false, '', `could not film a test page: ${error.message} — npx playwright install chromium`);
+    }
+    log(problems ? `\n${problems} problem(s)` : '\nready to record and render');
+    return problems;
+}
+const PAGE = `<body style="margin:0;background:#fff"><div id="dot" style="position:fixed;left:0;top:0;width:8px;height:8px;background:#f0f;transform:translate(-99px,-99px)"></div>
+<script>document.addEventListener('mousemove', (e) => { dot.style.transform = 'translate(' + (e.clientX - 4) + 'px,' + (e.clientY - 4) + 'px)' }, true)</script></body>`;
+/** Films a local page with a pointer moving over it; see the file comment. */
+export async function measureCursorSync() {
+    const { chromium } = await import('@playwright/test');
+    const dir = mkdtempSync(join(tmpdir(), 'reelson-doctor-'));
+    const viewport = { width: 1440, height: 900 };
+    const browser = await chromium.launch({ args: ['--force-device-scale-factor=2'] });
+    try {
+        const context = await browser.newContext({ viewport, deviceScaleFactor: 2 });
+        const events = [];
+        await context.exposeBinding(CURSOR_BINDING, (_source, event) => {
+            events.push(event);
+        });
+        await context.addInitScript(cursorOverlayScript('#6366f1', { draw: false, report: true }));
+        const page = await context.newPage();
+        // A real navigation (setContent would replace the document the cursor log listens on).
+        await page.route('https://reelson.doctor/', (route) => route.fulfill({ contentType: 'text/html', body: PAGE }));
+        await page.goto('https://reelson.doctor/');
+        const filming = await startScreencast(context, page, dir);
+        await page.mouse.move(200, 200);
+        for (let i = 0; i < 150; i++) {
+            const u = i / 150;
+            await page.mouse.move(200 + 1000 * u, 200 + 400 * Math.sin(u * Math.PI * 2) * 0.5 + 200 * u);
+            await page.waitForTimeout(16);
+        }
+        const frames = await filming.stop();
+        return analyse(frames, events.filter((e) => e.type === 'move'), viewport);
+    }
+    finally {
+        await browser.close();
+        rmSync(dir, { recursive: true, force: true });
+    }
+}
+function analyse(frames, moves, viewport) {
+    const { width: w, height: h } = viewport;
+    // Decode every frame at CSS size in one ffmpeg run, then find the magenta dot in each.
+    const decoded = spawnSync('ffmpeg', ['-loglevel', 'error', '-i', resolve(frames[0].file, '..', 'f%06d.jpg'), '-vf', `scale=${w}:${h}`, '-f', 'rawvideo', '-pix_fmt', 'rgb24', '-'], { maxBuffer: w * h * 3 * (frames.length + 1) });
+    const size = w * h * 3;
+    const dots = [];
+    frames.forEach((frame, i) => {
+        const px = decoded.stdout.subarray(i * size, (i + 1) * size);
+        let sx = 0;
+        let sy = 0;
+        let n = 0;
+        for (let p = 0; p + 2 < px.length; p += 3) {
+            if (px[p] > 180 && px[p + 2] > 180 && px[p + 1] < 90) {
+                const k = p / 3;
+                sx += k % w;
+                sy += Math.floor(k / w);
+                n++;
+            }
+        }
+        if (n >= 12) {
+            dots.push({ t: frame.t, x: sx / n, y: sy / n });
+        }
+    });
+    const at = (t) => {
+        let last;
+        for (const m of moves) {
+            if (m.t <= t)
+                last = m;
+            else
+                break;
+        }
+        return last;
+    };
+    const errorAt = (lag) => {
+        const errors = dots.flatMap((d) => {
+            const m = at(d.t - lag);
+            return m ? [Math.hypot(d.x - m.x, d.y - m.y)] : [];
+        });
+        errors.sort((a, b) => a - b);
+        return errors.length ? errors[errors.length >> 1] : Infinity;
+    };
+    let best = { lag: 0, error: errorAt(0) };
+    for (let lag = -100; lag <= 100; lag += 4) {
+        const error = errorAt(lag);
+        if (error < best.error - 0.05)
+            best = { lag, error };
+    }
+    const span = (frames.at(-1).t - frames[0].t) / 1000;
+    return { fps: frames.length / Math.max(span, 0.001), lagMs: best.lag, errorPx: best.error, frames: dots.length };
+}

package/skills/reelson-record/scripts/doctor.ts

@@ -0,0 +1,147 @@
+/**
+ * `reelson doctor`: is this machine ready to record and render, and does the cursor layer
+ * line up with the footage here? Checks the tools, then films a local test page the way
+ * `reelson record` does (screencast + the page's cursor log) with a magenta dot drawn at the
+ * pointer, finds the dot in every frame and measures how far the logged cursor is from it.
+ */
+import { spawnSync } from 'node:child_process'
+import { mkdtempSync, rmSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join, resolve } from 'node:path'
+import { startScreencast, type Frame } from './capture.ts'
+import { CURSOR_BINDING, cursorOverlayScript, type CursorEvent } from './cursor-overlay.ts'
+
+export interface SyncResult {
+    /** Frames per second while the page moves. */
+    fps: number
+    /** Video time − logged time that fits best (ms); ~0 means the layer sits on the footage. */
+    lagMs: number
+    /** Median distance (CSS px) between the logged cursor and the drawn dot at that lag. */
+    errorPx: number
+    frames: number
+}
+
+type Log = (line: string) => void
+
+export async function doctor(log: Log = console.log): Promise<number> {
+    let problems = 0
+    const check = (ok: boolean, good: string, bad: string): void => {
+        log(`${ok ? '✓' : '✗'} ${ok ? good : bad}`)
+        if (!ok) problems++
+    }
+    const [major, minor] = process.versions.node.split('.').map(Number)
+    check(major > 22 || (major === 22 && minor >= 18), `Node ${process.versions.node}`, `Node ${process.versions.node} — reelson needs 22.18+`)
+    for (const tool of ['ffmpeg', 'ffprobe']) {
+        const found = spawnSync(tool, ['-version'], { encoding: 'utf8' })
+        check(found.status === 0, `${found.stdout.split('\n')[0]}`, `${tool} not found — brew install ffmpeg`)
+    }
+    try {
+        const { hyperframesDist, HYPERFRAMES_VERSION } = await import('../../reelson-compose/scripts/hyperframes.ts')
+        hyperframesDist()
+        check(true, `HyperFrames ${HYPERFRAMES_VERSION}`, '')
+    } catch (error) {
+        check(false, '', `HyperFrames: ${(error as Error).message}`)
+    }
+    try {
+        const sync = await measureCursorSync()
+        check(sync.fps >= 30, `screencast: ${sync.fps.toFixed(0)} fps at 2x`, `screencast only ${sync.fps.toFixed(0)} fps — footage will stutter; try record.capture "playwright"`)
+        check(
+            Math.abs(sync.lagMs) <= 34 && sync.errorPx <= 3,
+            `cursor layer lines up with the footage: offset ${sync.lagMs} ms, ${sync.errorPx.toFixed(1)} px (${sync.frames} frames)`,
+            `cursor layer is off by ${sync.lagMs} ms / ${sync.errorPx.toFixed(1)} px on this machine — use record.cursor "recorded", and report it`,
+        )
+    } catch (error) {
+        check(false, '', `could not film a test page: ${(error as Error).message} — npx playwright install chromium`)
+    }
+    log(problems ? `\n${problems} problem(s)` : '\nready to record and render')
+    return problems
+}
+
+const PAGE = `<body style="margin:0;background:#fff"><div id="dot" style="position:fixed;left:0;top:0;width:8px;height:8px;background:#f0f;transform:translate(-99px,-99px)"></div>
+<script>document.addEventListener('mousemove', (e) => { dot.style.transform = 'translate(' + (e.clientX - 4) + 'px,' + (e.clientY - 4) + 'px)' }, true)</script></body>`
+
+/** Films a local page with a pointer moving over it; see the file comment. */
+export async function measureCursorSync(): Promise<SyncResult> {
+    const { chromium } = await import('@playwright/test')
+    const dir = mkdtempSync(join(tmpdir(), 'reelson-doctor-'))
+    const viewport = { width: 1440, height: 900 }
+    const browser = await chromium.launch({ args: ['--force-device-scale-factor=2'] })
+    try {
+        const context = await browser.newContext({ viewport, deviceScaleFactor: 2 })
+        const events: CursorEvent[] = []
+        await context.exposeBinding(CURSOR_BINDING, (_source, event: CursorEvent) => {
+            events.push(event)
+        })
+        await context.addInitScript(cursorOverlayScript('#6366f1', { draw: false, report: true }))
+        const page = await context.newPage()
+        // A real navigation (setContent would replace the document the cursor log listens on).
+        await page.route('https://reelson.doctor/', (route) => route.fulfill({ contentType: 'text/html', body: PAGE }))
+        await page.goto('https://reelson.doctor/')
+        const filming = await startScreencast(context, page, dir)
+
+        await page.mouse.move(200, 200)
+        for (let i = 0; i < 150; i++) {
+            const u = i / 150
+            await page.mouse.move(200 + 1000 * u, 200 + 400 * Math.sin(u * Math.PI * 2) * 0.5 + 200 * u)
+            await page.waitForTimeout(16)
+        }
+        const frames = await filming.stop()
+        return analyse(frames, events.filter((e) => e.type === 'move'), viewport)
+    } finally {
+        await browser.close()
+        rmSync(dir, { recursive: true, force: true })
+    }
+}
+
+function analyse(frames: Frame[], moves: CursorEvent[], viewport: { width: number; height: number }): SyncResult {
+    const { width: w, height: h } = viewport
+    // Decode every frame at CSS size in one ffmpeg run, then find the magenta dot in each.
+    const decoded = spawnSync(
+        'ffmpeg',
+        ['-loglevel', 'error', '-i', resolve(frames[0].file, '..', 'f%06d.jpg'), '-vf', `scale=${w}:${h}`, '-f', 'rawvideo', '-pix_fmt', 'rgb24', '-'],
+        { maxBuffer: w * h * 3 * (frames.length + 1) },
+    )
+    const size = w * h * 3
+    const dots: { t: number; x: number; y: number }[] = []
+    frames.forEach((frame, i) => {
+        const px = decoded.stdout.subarray(i * size, (i + 1) * size)
+        let sx = 0
+        let sy = 0
+        let n = 0
+        for (let p = 0; p + 2 < px.length; p += 3) {
+            if (px[p] > 180 && px[p + 2] > 180 && px[p + 1] < 90) {
+                const k = p / 3
+                sx += k % w
+                sy += Math.floor(k / w)
+                n++
+            }
+        }
+        if (n >= 12) {
+            dots.push({ t: frame.t, x: sx / n, y: sy / n })
+        }
+    })
+    const at = (t: number): CursorEvent | undefined => {
+        let last: CursorEvent | undefined
+        for (const m of moves) {
+            if (m.t <= t) last = m
+            else break
+        }
+        return last
+    }
+    const errorAt = (lag: number): number => {
+        const errors = dots.flatMap((d) => {
+            const m = at(d.t - lag)
+            return m ? [Math.hypot(d.x - m.x, d.y - m.y)] : []
+        })
+        errors.sort((a, b) => a - b)
+        return errors.length ? errors[errors.length >> 1] : Infinity
+    }
+    let best = { lag: 0, error: errorAt(0) }
+    for (let lag = -100; lag <= 100; lag += 4) {
+        const error = errorAt(lag)
+        if (error < best.error - 0.05) best = { lag, error }
+    }
+    const span = (frames.at(-1)!.t - frames[0].t) / 1000
+
+    return { fps: frames.length / Math.max(span, 0.001), lagMs: best.lag, errorPx: best.error, frames: dots.length }
+}

package/skills/reelson-record/scripts/languages.js

@@ -0,0 +1,29 @@
+const table = (recapTitle, steps, seconds) => ({
+    recapTitle,
+    stepsLabel: steps,
+    secondsLabel: seconds,
+});
+export const LANGUAGE_STRINGS = {
+    en: table('In short', { one: 'step', other: 'steps' }, { one: 'second', other: 'seconds' }),
+    ro: table('Pe scurt', { one: 'pas', few: 'pași', other: 'de pași' }, { one: 'secundă', few: 'secunde', other: 'de secunde' }),
+    de: table('Kurz gesagt', { one: 'Schritt', other: 'Schritte' }, { one: 'Sekunde', other: 'Sekunden' }),
+    fr: table('En bref', { one: 'étape', other: 'étapes' }, { one: 'seconde', other: 'secondes' }),
+    es: table('En resumen', { one: 'paso', other: 'pasos' }, { one: 'segundo', other: 'segundos' }),
+    it: table('In breve', { one: 'passaggio', other: 'passaggi' }, { one: 'secondo', other: 'secondi' }),
+    pt: table('Em resumo', { one: 'passo', other: 'passos' }, { one: 'segundo', other: 'segundos' }),
+    nl: table('Kort gezegd', { one: 'stap', other: 'stappen' }, { one: 'seconde', other: 'seconden' }),
+    pl: table('W skrócie', { one: 'krok', few: 'kroki', many: 'kroków', other: 'kroku' }, { one: 'sekunda', few: 'sekundy', many: 'sekund', other: 'sekundy' }),
+    ru: table('Коротко', { one: 'шаг', few: 'шага', many: 'шагов', other: 'шага' }, { one: 'секунда', few: 'секунды', many: 'секунд', other: 'секунды' }),
+    uk: table('Коротко', { one: 'крок', few: 'кроки', many: 'кроків', other: 'кроку' }, { one: 'секунда', few: 'секунди', many: 'секунд', other: 'секунди' }),
+    cs: table('Ve zkratce', { one: 'krok', few: 'kroky', many: 'kroku', other: 'kroků' }, { one: 'sekunda', few: 'sekundy', many: 'sekundy', other: 'sekund' }),
+    sv: table('I korthet', { one: 'steg', other: 'steg' }, { one: 'sekund', other: 'sekunder' }),
+    da: table('Kort fortalt', { one: 'trin', other: 'trin' }, { one: 'sekund', other: 'sekunder' }),
+    nb: table('Kort oppsummert', { one: 'steg', other: 'steg' }, { one: 'sekund', other: 'sekunder' }),
+    fi: table('Lyhyesti', { one: 'vaihe', other: 'vaihetta' }, { one: 'sekunti', other: 'sekuntia' }),
+    hu: table('Röviden', { one: 'lépés', other: 'lépés' }, { one: 'másodperc', other: 'másodperc' }),
+    tr: table('Kısaca', { one: 'adım', other: 'adım' }, { one: 'saniye', other: 'saniye' }),
+};
+/** The built-in strings for `language` ("pt-BR" falls back to "pt"), or English. */
+export function stringsFor(language) {
+    return LANGUAGE_STRINGS[language] ?? LANGUAGE_STRINGS[language.split('-')[0]] ?? LANGUAGE_STRINGS.en;
+}

package/skills/reelson-record/scripts/languages.ts

@@ -0,0 +1,41 @@
+/**
+ * On-card text per UI language: the recap title and the plural forms of the cover chip
+ * ("4 steps · 27 seconds"), keyed by Intl.PluralRules category. demo.config.json `language`
+ * picks one; `strings` in demo.config.json still overrides any of it. Forms are the ones
+ * used right after a number (Hungarian and Turkish keep the singular, Finnish the partitive).
+ */
+import type { DemoConfig } from './config.ts'
+
+type Strings = DemoConfig['strings']
+
+const table = (recapTitle: string, steps: Record<string, string>, seconds: Record<string, string>): Strings => ({
+    recapTitle,
+    stepsLabel: steps as Strings['stepsLabel'],
+    secondsLabel: seconds as Strings['secondsLabel'],
+})
+
+export const LANGUAGE_STRINGS: Record<string, Strings> = {
+    en: table('In short', { one: 'step', other: 'steps' }, { one: 'second', other: 'seconds' }),
+    ro: table('Pe scurt', { one: 'pas', few: 'pași', other: 'de pași' }, { one: 'secundă', few: 'secunde', other: 'de secunde' }),
+    de: table('Kurz gesagt', { one: 'Schritt', other: 'Schritte' }, { one: 'Sekunde', other: 'Sekunden' }),
+    fr: table('En bref', { one: 'étape', other: 'étapes' }, { one: 'seconde', other: 'secondes' }),
+    es: table('En resumen', { one: 'paso', other: 'pasos' }, { one: 'segundo', other: 'segundos' }),
+    it: table('In breve', { one: 'passaggio', other: 'passaggi' }, { one: 'secondo', other: 'secondi' }),
+    pt: table('Em resumo', { one: 'passo', other: 'passos' }, { one: 'segundo', other: 'segundos' }),
+    nl: table('Kort gezegd', { one: 'stap', other: 'stappen' }, { one: 'seconde', other: 'seconden' }),
+    pl: table('W skrócie', { one: 'krok', few: 'kroki', many: 'kroków', other: 'kroku' }, { one: 'sekunda', few: 'sekundy', many: 'sekund', other: 'sekundy' }),
+    ru: table('Коротко', { one: 'шаг', few: 'шага', many: 'шагов', other: 'шага' }, { one: 'секунда', few: 'секунды', many: 'секунд', other: 'секунды' }),
+    uk: table('Коротко', { one: 'крок', few: 'кроки', many: 'кроків', other: 'кроку' }, { one: 'секунда', few: 'секунди', many: 'секунд', other: 'секунди' }),
+    cs: table('Ve zkratce', { one: 'krok', few: 'kroky', many: 'kroku', other: 'kroků' }, { one: 'sekunda', few: 'sekundy', many: 'sekundy', other: 'sekund' }),
+    sv: table('I korthet', { one: 'steg', other: 'steg' }, { one: 'sekund', other: 'sekunder' }),
+    da: table('Kort fortalt', { one: 'trin', other: 'trin' }, { one: 'sekund', other: 'sekunder' }),
+    nb: table('Kort oppsummert', { one: 'steg', other: 'steg' }, { one: 'sekund', other: 'sekunder' }),
+    fi: table('Lyhyesti', { one: 'vaihe', other: 'vaihetta' }, { one: 'sekunti', other: 'sekuntia' }),
+    hu: table('Röviden', { one: 'lépés', other: 'lépés' }, { one: 'másodperc', other: 'másodperc' }),
+    tr: table('Kısaca', { one: 'adım', other: 'adım' }, { one: 'saniye', other: 'saniye' }),
+}
+
+/** The built-in strings for `language` ("pt-BR" falls back to "pt"), or English. */
+export function stringsFor(language: string): Strings {
+    return LANGUAGE_STRINGS[language] ?? LANGUAGE_STRINGS[language.split('-')[0]] ?? LANGUAGE_STRINGS.en
+}