rpc-agent 0.4.0 → 0.6.0

package/dist/record.js

@@ -0,0 +1,333 @@
+// `rpc record`: a short video of a page, or of one element on it. Frames
+// come from a screenshot loop on the element's box (device pixels, cropped
+// exactly), and ffmpeg (Playwright's own build, or one on PATH) turns them
+// into a VP9 webm at a constant frame rate. See docs/plan.md, v0.6.
+import { spawn } from 'node:child_process';
+import { mkdir, mkdtemp, readdir, readFile, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join, resolve } from 'node:path';
+import { applyHeaders, AuthRequiredError, redact, redirectedToLogin, resolveAuth, } from './auth.js';
+import { findFfmpeg, h264Encoder, launchBrowser, systemFfmpeg } from './browser.js';
+import { describeFailure, fileStem, newDeviceContext, settle } from './capture.js';
+import { resolveDevice } from './devices.js';
+import { plainText } from './errors.js';
+import { buildPalette, gifWriter } from './gif.js';
+import { settleMotion } from './motion.js';
+import { decodePng, imageSize, pngSize } from './png.js';
+/** Output frame rate of the webm. */
+export const RECORD_FPS = 25;
+/** GIF frame rate and width cap. */
+export const GIF_FPS = 10;
+export const GIF_MAX_WIDTH = 640;
+/** Frames sampled (evenly) for the GIF's shared palette. */
+const GIF_PALETTE_FRAMES = 12;
+/** A failure with its own code and hint (no element, no ffmpeg). */
+export class RecordError extends Error {
+    code;
+    hint;
+    name = 'RecordError';
+    constructor(code, message, hint) {
+        super(message);
+        this.code = code;
+        this.hint = hint;
+    }
+}
+export async function record(opts, hooks = {}) {
+    const device = resolveDevice(opts.device);
+    const outDir = resolve(opts.outDir);
+    const auth = hooks.auth ?? resolveAuth(opts.url, opts.auth ?? {});
+    if (auth.summary)
+        hooks.onAuth?.(auth.summary);
+    const result = {
+        url: opts.url,
+        outDir,
+        device: device.id,
+        name: device.name,
+        viewport: { width: device.width, height: device.height },
+        dpr: device.dpr,
+        ...(opts.selector ? { selector: opts.selector } : {}),
+        ...(auth.summary ? { auth: auth.summary } : {}),
+    };
+    const ffmpeg = hooks.ffmpeg ?? findFfmpeg();
+    if (!ffmpeg) {
+        return {
+            ...result,
+            code: 'FFMPEG_MISSING',
+            error: 'No ffmpeg to encode the video with',
+            hint: 'Run `npx rpc-agent install` (Playwright downloads its ffmpeg next to Chromium), or put ffmpeg on PATH.',
+        };
+    }
+    result.ffmpeg = ffmpeg.source;
+    await mkdir(outDir, { recursive: true });
+    const browser = hooks.browser ?? (await launchBrowser());
+    const errors = new Set();
+    try {
+        await recordDevice(browser, device, opts, auth, ffmpeg, result, errors, hooks);
+    }
+    catch (err) {
+        if (err instanceof RecordError)
+            Object.assign(result, { code: err.code, error: redact(err.message, auth.secrets), ...(err.hint ? { hint: err.hint } : {}) });
+        else
+            Object.assign(result, describeFailure(err, opts, auth));
+    }
+    finally {
+        result.consoleErrors = [...errors].slice(0, 20).map(l => redact(l, auth.secrets));
+        if (!hooks.browser)
+            await browser.close();
+    }
+    return result;
+}
+async function recordDevice(browser, device, opts, auth, ffmpeg, result, errors, hooks) {
+    const context = await newDeviceContext(browser, device, opts, auth);
+    try {
+        const page = await context.newPage();
+        await applyHeaders(context, page, auth);
+        page.on('pageerror', e => errors.add(plainText(`pageerror: ${e.message}`)));
+        page.on('console', m => {
+            if (m.type() === 'error')
+                errors.add(plainText(`console: ${m.text()}`));
+        });
+        const response = await page.goto(opts.url, { waitUntil: 'load', timeout: opts.timeoutMs });
+        result.status = response?.status() ?? null;
+        await settle(page, opts.timeoutMs);
+        const checkLogin = () => {
+            if (redirectedToLogin(opts.url, page.url()))
+                throw new AuthRequiredError(opts.url, page.url(), result.status ?? null);
+        };
+        checkLogin();
+        if (opts.waitFor)
+            await page.waitForSelector(opts.waitFor, { state: 'visible', timeout: opts.timeoutMs });
+        let clip = { x: 0, y: 0, width: device.width, height: device.height };
+        if (opts.selector) {
+            const el = page.locator(opts.selector).first();
+            try {
+                await el.waitFor({ state: 'visible', timeout: Math.min(opts.timeoutMs, 10_000) });
+            }
+            catch {
+                checkLogin();
+                throw new RecordError('SELECTOR_NOT_FOUND', `No visible element matches "${opts.selector}"`, 'Check the selector in the browser devtools (document.querySelector), or wait for it with --wait-for.');
+            }
+            await el.scrollIntoViewIfNeeded();
+            // Let scroll-triggered reveals around it finish, so the video shows the element itself.
+            await settleMotion(page);
+            const box = await el.boundingBox();
+            if (!box)
+                throw new RecordError('SELECTOR_NOT_FOUND', `"${opts.selector}" has no box to record`, 'The element is not rendered (display: none or detached).');
+            const x0 = Math.max(0, Math.floor(box.x));
+            const y0 = Math.max(0, Math.floor(box.y));
+            const x1 = Math.min(device.width, Math.ceil(box.x + box.width));
+            const y1 = Math.min(device.height, Math.ceil(box.y + box.height));
+            if (x1 - x0 < 2 || y1 - y0 < 2)
+                throw new RecordError('SELECTOR_NOT_FOUND', `"${opts.selector}" is outside the viewport`, 'Record a smaller element, or pick a device with a larger viewport.');
+            clip = { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
+            if (box.width > clip.width + 1 || box.height > clip.height + 1) {
+                result.clipped = true;
+                (result.warnings ??= []).push(`"${opts.selector}" is ${Math.round(box.width)}x${Math.round(box.height)} CSS px, larger than the ${device.width}x${device.height} viewport; only the visible part was recorded.`);
+            }
+        }
+        if (opts.waitMs > 0)
+            await page.waitForTimeout(opts.waitMs);
+        checkLogin();
+        result.finalUrl = page.url();
+        result.title = await page.title();
+        result.clip = clip;
+        const stem = recordStem(opts.url, device.id, opts.selector);
+        const posterPng = await page.screenshot({ clip, type: 'png', animations: 'allow', caret: 'initial' });
+        result.poster = { path: resolve(result.outDir, `${stem}-poster.png`), ...pngSize(posterPng) };
+        await writeFile(result.poster.path, posterPng);
+        hooks.onRecording?.(opts.duration);
+        const webm = resolve(result.outDir, `${stem}.webm`);
+        let captured;
+        try {
+            captured = await encodeFrames(ffmpeg.path, webm, opts.duration, () => page.screenshot({ clip, type: 'jpeg', quality: 90, animations: 'allow', caret: 'initial' }));
+        }
+        catch (err) {
+            // No video: don't leave its poster behind next to an error result.
+            await rm(result.poster.path, { force: true });
+            delete result.poster;
+            throw err;
+        }
+        result.video = { ...(await probeVideo(ffmpeg.path, webm)), path: webm, fps: RECORD_FPS, captured };
+        if (opts.gif)
+            result.gif = await writeGif(ffmpeg.path, webm, resolve(result.outDir, `${stem}.gif`), result.video);
+        if (opts.mp4) {
+            const mp4 = await writeMp4(webm, resolve(result.outDir, `${stem}.mp4`));
+            if ('path' in mp4)
+                result.mp4 = mp4;
+            else
+                (result.warnings ??= []).push(mp4.skipped);
+        }
+    }
+    finally {
+        await context.close();
+    }
+}
+/** `<host>[-<path>]-<device>[-<selector>]`, e.g. `localhost-3000-desktop-1440-carousel`. */
+export function recordStem(url, deviceId, selector) {
+    const base = fileStem(url, deviceId);
+    if (!selector)
+        return base;
+    const slug = selector.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 40).replace(/-+$/, '');
+    return slug ? `${base}-${slug}` : base;
+}
+/**
+ * Take frames for `seconds` and pipe them to ffmpeg as MJPEG at RECORD_FPS.
+ * Each frame is repeated until the next one's timestamp (the middle of its
+ * screenshot call), and the last fills the remainder, so the video is
+ * exactly `seconds` long whatever the capture rate. Returns the number of
+ * screenshots taken. If ffmpeg can't start or dies, or a screenshot fails,
+ * the child is stopped and the partial file removed.
+ */
+export async function encodeFrames(ffmpeg, out, seconds, shot) {
+    const total = Math.round(seconds * RECORD_FPS);
+    const child = spawn(ffmpeg, [
+        '-loglevel', 'error', '-y',
+        '-f', 'image2pipe', '-c:v', 'mjpeg', '-framerate', String(RECORD_FPS), '-i', 'pipe:0',
+        '-an', '-c:v', 'libvpx-vp9', '-deadline', 'realtime', '-cpu-used', '8', '-crf', '30', '-b:v', '0',
+        '-pix_fmt', 'yuv420p', out,
+    ], { stdio: ['pipe', 'ignore', 'pipe'] });
+    let stderr = '';
+    child.stderr.on('data', d => (stderr += d));
+    // Settles once, on exit or on a spawn failure; never rejects, so a failed
+    // spawn can't become an unhandled rejection while frames are being taken.
+    let spawnError;
+    let dead = false;
+    const exited = new Promise(res => {
+        child.once('error', err => {
+            spawnError = err;
+            res(-1);
+        });
+        child.once('close', code => res(code ?? 1));
+    }).finally(() => {
+        dead = true;
+    });
+    // A dead ffmpeg makes writes fail (EPIPE); the exit code and stderr say why.
+    child.stdin.on('error', () => {
+        dead = true;
+    });
+    // Wait for room in the pipe, or for ffmpeg to go away ('drain' never comes then).
+    const write = (buf) => dead || child.stdin.destroyed
+        ? Promise.resolve()
+        : new Promise(res => {
+            if (child.stdin.write(buf))
+                return res();
+            const done = () => {
+                child.stdin.off('drain', done);
+                child.stdin.off('close', done);
+                res();
+            };
+            child.stdin.once('drain', done);
+            child.stdin.once('close', done);
+            void exited.then(done);
+        });
+    let written = 0;
+    let last;
+    let captured = 0;
+    const fill = async (upTo) => {
+        for (; written < Math.min(upTo, total) && last && !dead; written++)
+            await write(last);
+    };
+    try {
+        const t0 = performance.now();
+        while (performance.now() - t0 < seconds * 1000 && !dead) {
+            const before = performance.now();
+            const buf = await shot();
+            const at = ((before + performance.now()) / 2 - t0) / 1000;
+            captured++;
+            await fill(Math.round(at * RECORD_FPS));
+            last = buf;
+        }
+        await fill(total);
+    }
+    catch (err) {
+        child.kill('SIGKILL');
+        await exited;
+        await rm(out, { force: true });
+        throw err;
+    }
+    child.stdin.end();
+    const code = await exited;
+    if (spawnError)
+        throw new RecordError('ENCODE_FAILED', `Could not run ffmpeg: ${spawnError.message}`, `ffmpeg: ${ffmpeg}`);
+    if (code !== 0) {
+        await rm(out, { force: true });
+        throw new RecordError('ENCODE_FAILED', `ffmpeg failed (exit ${code}): ${stderr.trim().split('\n').pop() ?? ''}`, `ffmpeg: ${ffmpeg}`);
+    }
+    return captured;
+}
+/** Run ffmpeg to completion; stderr in the error. */
+function run(ffmpeg, args) {
+    return new Promise((res, rej) => {
+        const child = spawn(ffmpeg, args, { stdio: ['ignore', 'ignore', 'pipe'] });
+        let stderr = '';
+        child.stderr.on('data', d => (stderr += d));
+        child.on('error', rej);
+        child.on('close', code => (code === 0 ? res(stderr) : rej(new RecordError('ENCODE_FAILED', `ffmpeg failed (exit ${code}): ${stderr.trim().split('\n').pop() ?? ''}`))));
+    });
+}
+/** Size and duration of a video, from `ffmpeg -i` (which exits 1 without an output; that's expected). */
+export async function probeVideo(ffmpeg, path) {
+    const info = await new Promise((res, rej) => {
+        const child = spawn(ffmpeg, ['-hide_banner', '-i', path], { stdio: ['ignore', 'ignore', 'pipe'] });
+        let stderr = '';
+        child.stderr.on('data', d => (stderr += d));
+        child.on('error', rej);
+        child.on('close', () => res(stderr));
+    });
+    const size = /Video: .*?\b(\d{1,5})x(\d{1,5})\b/.exec(info);
+    const dur = /Duration: (\d+):(\d+):(\d+(?:\.\d+)?)/.exec(info);
+    if (!size || !dur)
+        throw new RecordError('ENCODE_FAILED', `Could not read the video ffmpeg wrote: ${path}`);
+    return {
+        width: Number(size[1]),
+        height: Number(size[2]),
+        duration: Math.round((Number(dur[1]) * 3600 + Number(dur[2]) * 60 + Number(dur[3])) * 100) / 100,
+    };
+}
+/**
+ * Decode the webm to PNG frames at GIF_FPS (Playwright's ffmpeg can), then
+ * encode them in gif.ts: the palette from a sample of frames, then one frame
+ * decoded and encoded at a time, so memory stays at about one frame.
+ */
+async function writeGif(ffmpeg, webm, out, video) {
+    const width = Math.min(video.width, GIF_MAX_WIDTH);
+    const height = Math.max(1, Math.round((video.height * width) / video.width));
+    // `-r` alone pads a frame or two at the edges; cap at the video's length.
+    const count = Math.max(1, Math.round(video.duration * GIF_FPS));
+    const dir = await mkdtemp(join(tmpdir(), 'rpc-gif-'));
+    try {
+        await run(ffmpeg, ['-loglevel', 'error', '-y', '-i', webm, '-r', String(GIF_FPS), '-frames:v', String(count), '-vf', `scale=${width}:${height}`, '-f', 'image2', join(dir, 'f-%04d.png')]);
+        const files = (await readdir(dir)).filter(f => f.endsWith('.png')).sort();
+        if (!files.length)
+            throw new RecordError('ENCODE_FAILED', 'ffmpeg wrote no GIF frames');
+        const frame = async (f) => decodePng(await readFile(join(dir, f)));
+        const step = Math.max(1, Math.ceil(files.length / GIF_PALETTE_FRAMES));
+        const sample = [];
+        for (let i = 0; i < files.length; i += step)
+            sample.push(await frame(files[i]));
+        const gif = gifWriter(width, height, buildPalette(sample), Math.round(100 / GIF_FPS));
+        sample.length = 0;
+        for (const f of files)
+            gif.add(await frame(f));
+        const data = gif.end();
+        await writeFile(out, data);
+        return { path: out, ...imageSize(data), frames: files.length };
+    }
+    finally {
+        await rm(dir, { recursive: true, force: true });
+    }
+}
+/** mp4 needs an H.264 encoder, which Playwright's ffmpeg doesn't have: use a system ffmpeg when there is one. */
+async function writeMp4(webm, out) {
+    const sys = systemFfmpeg();
+    const encoder = sys ? h264Encoder(sys) : undefined;
+    if (!sys || !encoder) {
+        return { skipped: 'mp4 skipped: it needs an ffmpeg with an H.264 encoder on PATH (e.g. `brew install ffmpeg`); the webm was written.' };
+    }
+    const quality = encoder === 'h264_videotoolbox' ? ['-b:v', '8M'] : encoder === 'libx264' ? ['-crf', '20', '-preset', 'veryfast'] : [];
+    await run(sys, [
+        '-loglevel', 'error', '-y', '-i', webm,
+        '-c:v', encoder, ...quality, '-pix_fmt', 'yuv420p', '-vf', 'pad=ceil(iw/2)*2:ceil(ih/2)*2', '-movflags', '+faststart', out,
+    ]);
+    return { path: out, encoder };
+}

package/dist/ui.js

@@ -9,7 +9,11 @@ import pc from 'picocolors';
 import { clearSessions, listSessions, localTime, MASK, resolveAuth, sessionsDir, } from './auth.js';
 import { BrowserMissingError, installHint, launchBrowser } from './browser.js';
 import { capture } from './capture.js';
+import { checkExitCode, runCheck as audit, summaryLine } from './check.js';
+import { countsPhrase, groupFindings, groupLines } from './check-format.js';
 import { CATEGORY_ORDER, DEVICE_ALIASES, DEVICES, } from './devices.js';
+import { unpinnedLines, warningWhere } from './motion.js';
+import { record } from './record.js';
 import { defaultShotOptions, normalizeUrl } from './options.js';
 import { openCommand, openPath, waitForEnter } from './term.js';
 export function colors(enabled) {
@@ -99,6 +103,10 @@ export function shotCommand(o) {
         parts.push('--color-scheme', o.colorScheme);
     if (o.reducedMotion)
         parts.push('--reduced-motion');
+    if (o.finishAnimations)
+        parts.push('--finish-animations');
+    if (o.fullPage && !o.unpin)
+        parts.push('--no-unpin');
     if (o.outDir !== base.outDir)
         parts.push('-o', quote(o.outDir));
     return parts.join(' ');
@@ -185,6 +193,10 @@ export function summaryLines(o, c, auth) {
     ];
     if (o.reducedMotion)
         rows.push(['reduced motion', c.green('yes')]);
+    if (o.finishAnimations)
+        rows.push(['finish animations', c.green('yes')]);
+    if (o.fullPage && !o.unpin)
+        rows.push(['unpin', c.yellow('no')]);
     if (o.waitFor)
         rows.push(['wait for', o.waitFor]);
     if (!o.emulate)
@@ -288,6 +300,12 @@ export function capturedLines(result, c) {
             const msg = s.consoleErrors[0].length > width - 20 ? `${s.consoleErrors[0].slice(0, width - 21)}…` : s.consoleErrors[0];
             out.push(`    ${c.yellow('console:')} ${c.dim(msg)}`);
         }
+        for (const u of unpinnedLines(s.motion?.unpinned))
+            out.push(`    ${c.cyan('unpinned')} ${c.dim(u)}`);
+        for (const w of s.warnings ?? []) {
+            const where = warningWhere(w);
+            out.push(`    ${c.yellow('▲')} ${w.message}${where ? `  ${c.dim(where)}` : ''}`);
+        }
     }
     for (const group of failures.values()) {
         const first = group[0];
@@ -389,6 +407,182 @@ export async function runShot(options, run, c) {
         p.outro(`${c.green('Done!')}  ${c.dim(advice)}`);
     return failed > 0 ? 1 : 0;
 }
+// ------------------------------------------------------------------ record
+/** Lines for the final "Recorded" box. */
+export function recordedLines(r, c) {
+    const out = [];
+    const file = (path, meta) => out.push(`${c.green('✓')} ${c.cyan(rel(path))}  ${c.dim(meta)}`);
+    if (r.video)
+        file(r.video.path, `${r.video.width}×${r.video.height} · ${r.video.duration}s · ${r.video.fps} fps · ${size(r.video.path)}`);
+    if (r.poster)
+        file(r.poster.path, `${r.poster.width}×${r.poster.height} · poster`);
+    if (r.gif)
+        file(r.gif.path, `${r.gif.width}×${r.gif.height} · ${r.gif.frames} frames · ${size(r.gif.path)}`);
+    if (r.mp4)
+        file(r.mp4.path, `${r.mp4.encoder} · ${size(r.mp4.path)}`);
+    for (const w of r.warnings ?? [])
+        for (const [i, l] of wrap(w, textWidth() - 4).entries())
+            out.push(`${i ? '  ' : c.yellow('▲ ')}${c.dim(l)}`);
+    return out;
+}
+export async function runRecord(options, run, c) {
+    const auth = resolveAuth(options.url, options.auth ?? {});
+    printBanner(c);
+    intro(c);
+    const rows = [
+        ['device', c.cyan(options.device)],
+        ['element', options.selector ?? c.dim('whole viewport')],
+        ['duration', `${options.duration}s`],
+        ['also', [options.gif ? 'gif' : '', options.mp4 ? 'mp4' : ''].filter(Boolean).join(', ') || c.dim('webm only')],
+    ];
+    if (options.reducedMotion)
+        rows.push(['reduced motion', c.green('yes')]);
+    if (auth.summary)
+        rows.push(...authRows(auth.summary, c));
+    rows.push(['output', `${rel(options.outDir)}/`]);
+    const w = Math.max(...rows.map(([k]) => k.length)) + 1;
+    p.note([c.cyan(options.url), ...rows.map(([k, v]) => `  ${c.dim(`${k}:`.padEnd(w))} ${v}`)].join('\n'), 'Record Summary');
+    const s = p.spinner();
+    s.start('Starting Chromium');
+    let browser;
+    try {
+        browser = await launchBrowser();
+    }
+    catch (err) {
+        s.error(c.red(err instanceof BrowserMissingError ? "Playwright's Chromium is not installed" : `Chromium did not start: ${err.message.split('\n')[0]}`));
+        if (err instanceof BrowserMissingError)
+            p.note(wrap(installHint().replace(/^Fix: /, ''), textWidth()).join('\n'), c.yellow('Fix'));
+        p.outro(c.red('Nothing recorded.'));
+        return 1;
+    }
+    s.message(`Loading ${c.cyan(options.url)}`);
+    let result;
+    try {
+        result = await record(options, { browser, auth, onRecording: secs => s.message(`Recording ${secs}s`) });
+    }
+    finally {
+        await browser.close().catch(() => { });
+    }
+    if (result.error) {
+        s.error(c.red(result.error));
+        if (result.hint)
+            p.note(wrap(result.hint, textWidth()).join('\n'), c.yellow('Hint'));
+        p.outro(c.red('Nothing recorded.'));
+        return 1;
+    }
+    s.stop(`Recorded ${result.video?.duration ?? options.duration}s on ${result.device}`);
+    p.note(recordedLines(result, c).join('\n'), c.green('Recorded'));
+    const dir = rel(result.outDir);
+    let advice = `Open with: ${openCommand().cmd} ${dir}`;
+    if (run.open)
+        advice = openPath(result.outDir) ? `Opened ${dir}` : advice;
+    p.outro(`${c.green('Done!')}  ${c.dim(advice)}`);
+    return 0;
+}
+// ------------------------------------------------------------------ check
+/** Lines for the "Check Summary" box. */
+export function checkSummaryLines(o, c, auth) {
+    const rows = [
+        ['devices', formatList(o.devices.map(d => c.cyan(d)))],
+        ['fail on', o.failOn === 'warn' ? c.yellow('errors and warnings') : 'errors'],
+    ];
+    if (o.colorScheme)
+        rows.push(['colour scheme', o.colorScheme]);
+    if (o.waitFor)
+        rows.push(['wait for', o.waitFor]);
+    if (auth)
+        rows.push(...authRows(auth, c));
+    if (o.shots)
+        rows.push(['shots', `${rel(o.outDir)}/`]);
+    const w = Math.max(...rows.map(([k]) => k.length)) + 1;
+    return [c.cyan(o.url), ...rows.map(([k, v]) => `  ${c.dim(`${k}:`.padEnd(w))} ${v}`)];
+}
+/** The spinner line once a device is done: status, CLS, time. */
+function checkDeviceLine(d, ms, label, c) {
+    if (d.error)
+        return `${label}  ${c.red(d.code ?? 'error')}  ${c.dim(formatMs(ms))}`;
+    const status = d.status == null ? c.dim('--') : d.status >= 400 ? c.red(String(d.status)) : c.green(String(d.status));
+    const cls = d.cls === undefined ? '' : d.cls > 0.25 ? c.red(d.cls.toFixed(3)) : d.cls > 0.1 ? c.yellow(d.cls.toFixed(3)) : c.green(d.cls.toFixed(3));
+    return `${label}  ${status}  ${c.dim('CLS')} ${cls}  ${c.dim(formatMs(ms))}`;
+}
+/** One box per check that found something, titled with its counts. */
+export function checkBoxes(report, c) {
+    const all = report.devices.map(d => d.device);
+    return groupFindings(report).map(g => {
+        const counts = countsPhrase(g.findings);
+        const tint = g.findings.some(f => f.severity === 'error') ? c.red : g.findings.some(f => f.severity === 'warn') ? c.yellow : c.cyan;
+        return { title: `${g.title} ${c.dim('·')} ${tint(counts)}`, lines: groupLines(g, all, c, { icons: true, width: textWidth() }) };
+    });
+}
+export async function runCheck(options, c) {
+    const auth = resolveAuth(options.url, options.auth ?? {});
+    intro(c);
+    p.note(checkSummaryLines(options, c, auth.summary).join('\n'), 'Check Summary');
+    const s = p.spinner();
+    s.start('Starting Chromium');
+    let browser;
+    try {
+        browser = await launchBrowser();
+    }
+    catch (err) {
+        if (err instanceof BrowserMissingError) {
+            s.error(c.red("Playwright's Chromium is not installed"));
+            p.note(wrap(installHint().replace(/^Fix: /, ''), textWidth()).join('\n'), c.yellow('Fix'));
+            p.outro(`${c.red('Nothing checked.')}  ${c.dim('Run: rpc install')}`);
+            return 1;
+        }
+        s.error(c.red(`Chromium did not start: ${err.message.split('\n')[0]}`));
+        p.outro(c.red('Nothing checked.'));
+        return 1;
+    }
+    s.stop(`Chromium ${c.dim(browser.version())}`);
+    let current;
+    let started = 0;
+    let report;
+    const picked = options.devices.map(id => DEVICES.find(d => d.id === id)).filter((d) => Boolean(d));
+    const idW = Math.max(0, ...picked.map(d => d.id.length));
+    const vpW = Math.max(0, ...picked.map(d => viewport(d).length));
+    const label = (id, vp) => `${id.padEnd(idW)}  ${c.dim(vp.padEnd(vpW))}`;
+    try {
+        report = await audit(options, {
+            browser,
+            auth,
+            onDeviceStart: (d) => {
+                started = performance.now();
+                current = p.spinner();
+                current.start(label(d.id, viewport(d)));
+            },
+            onDevice: d => {
+                const line = checkDeviceLine(d, performance.now() - started, label(d.device, viewport({ ...d.viewport, dpr: d.dpr })), c);
+                if (d.error)
+                    current?.error(line);
+                else
+                    current?.stop(line);
+                current = undefined;
+            },
+        });
+    }
+    catch (err) {
+        current?.error(c.red(err.message));
+        p.outro(c.red('Check failed.'));
+        return 1;
+    }
+    finally {
+        await browser.close().catch(() => { });
+    }
+    for (const box of checkBoxes(report, c))
+        p.note(box.lines.join('\n'), box.title);
+    const code = checkExitCode(report, options.failOn);
+    const line = summaryLine(report.summary);
+    const sum = report.summary;
+    if (sum.errors)
+        p.outro(`${c.red(line)}  ${c.dim('Exit code 1.')}`);
+    else if (sum.warnings)
+        p.outro(`${c.yellow(line)}  ${c.dim(code ? 'Exit code 1 (--fail-on warn).' : 'No errors.')}`);
+    else
+        p.outro(`${c.green(line)}  ${c.dim('Ready to ship.')}`);
+    return code;
+}
 // ------------------------------------------------------------------ interactive
 const PRESELECT = ['iphone-15-pro', 'ipad-air-11', 'desktop-1440'];
 const DEV_PORTS = [3000, 5173, 4321, 8080];
@@ -586,6 +780,11 @@ export async function runDoctor(check, c) {
     s.stop(`Node ${c.dim(r.node)}`);
     p.log.step(`Playwright ${c.dim(r.playwright)}`);
     p.log.step(`Browsers ${c.dim(r.browsersPath)}`);
+    if (r.ffmpeg.source === 'missing')
+        p.log.warn(`ffmpeg ${c.yellow('missing')} ${c.dim('(only rpc record needs it; rpc install fetches it)')}`);
+    else
+        p.log.step(`ffmpeg ${c.dim(`${r.ffmpeg.source} · ${r.ffmpeg.path}`)}`);
+    p.log.step(`mp4 ${r.mp4.ok ? c.dim(r.mp4.encoder ?? '') : c.dim('no (optional: ffmpeg with H.264 on PATH)')}`);
     if (r.ok) {
         p.log.success(`Chromium ${c.green('launches')} ${c.dim(r.version ?? '')}`);
         p.outro(`${c.green('Ready.')}  ${c.dim('Try: rpc shot localhost:3000 --bezels')}`);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rpc-agent",
-  "version": "0.4.0",
-  "description": "Screenshot a URL at device viewports, optionally framed in device bezels, signed in or not. CLI and MCP server for AI coding agents.",
+  "version": "0.6.0",
+  "description": "Screenshot a URL at device viewports, optionally framed in device bezels, signed in or not, and audit it before launch. CLI and MCP server for AI coding agents.",
   "keywords": [
     "mcp",
     "mcp-server",