rpc-agent 0.3.1 → 0.5.0

package/dist/options.js

@@ -24,6 +24,20 @@ export function defaultShotOptions(url) {
         sliceWidth: DEFAULT_SLICE_WIDTH,
     };
 }
+export const FAIL_ON = ['error', 'warn'];
+export function defaultCheckOptions(url) {
+    return {
+        url: normalizeUrl(url),
+        devices: [...DEFAULT_DEVICES],
+        outDir: DEFAULT_OUT_DIR,
+        waitMs: 0,
+        timeoutMs: DEFAULT_TIMEOUT_MS,
+        emulate: true,
+        reducedMotion: false,
+        shots: false,
+        failOn: 'error',
+    };
+}
 /**
  * Accept what an agent is likely to type:
  *   http(s)://…, file://…  -> unchanged

package/dist/png.js

@@ -8,6 +8,53 @@ export function pngSize(buf) {
     const view = new DataView(buf.buffer, buf.byteOffset, buf.byteLength);
     return { width: view.getUint32(16), height: view.getUint32(20) };
 }
+/** Width/height of a PNG, JPEG, GIF or WebP from its header; undefined for anything else. */
+export function imageSize(buf) {
+    const view = new DataView(buf.buffer, buf.byteOffset, buf.byteLength);
+    const ascii = (at, len) => String.fromCharCode(...buf.subarray(at, at + len));
+    try {
+        if (buf.length >= 24 && SIGNATURE.every((b, i) => buf[i] === b))
+            return pngSize(buf);
+        if (ascii(0, 4) === 'GIF8' && buf.length >= 10) {
+            return { width: view.getUint16(6, true), height: view.getUint16(8, true) };
+        }
+        if (ascii(0, 4) === 'RIFF' && ascii(8, 4) === 'WEBP') {
+            const kind = ascii(12, 4);
+            if (kind === 'VP8 ')
+                return { width: view.getUint16(26, true) & 0x3fff, height: view.getUint16(28, true) & 0x3fff };
+            if (kind === 'VP8L') {
+                const bits = view.getUint32(21, true);
+                return { width: (bits & 0x3fff) + 1, height: ((bits >> 14) & 0x3fff) + 1 };
+            }
+            if (kind === 'VP8X') {
+                const u24 = (at) => buf[at] | (buf[at + 1] << 8) | (buf[at + 2] << 16);
+                return { width: u24(24) + 1, height: u24(27) + 1 };
+            }
+            return undefined;
+        }
+        if (buf[0] === 0xff && buf[1] === 0xd8) {
+            // Walk the JPEG segments to the first start-of-frame marker.
+            for (let at = 2; at + 9 < buf.length;) {
+                if (buf[at] !== 0xff)
+                    return undefined;
+                const marker = buf[at + 1];
+                if (marker === 0xff) {
+                    at++;
+                    continue;
+                }
+                const len = view.getUint16(at + 2);
+                if (marker >= 0xc0 && marker <= 0xcf && marker !== 0xc4 && marker !== 0xc8 && marker !== 0xcc) {
+                    return { width: view.getUint16(at + 7), height: view.getUint16(at + 5) };
+                }
+                at += 2 + len;
+            }
+        }
+    }
+    catch {
+        // Truncated header.
+    }
+    return undefined;
+}
 /**
  * Decode an 8-bit RGB/RGBA non-interlaced PNG, which is what Chromium
  * screenshots are. Anything else throws: this is not a general decoder.

package/dist/term.js

@@ -44,3 +44,23 @@ export function openPath(path) {
         return false;
     }
 }
+/**
+ * Resolve when a line (Enter) arrives on stdin. EOF never resolves it, so a
+ * caller can race it against something else (the login window closing).
+ */
+export function waitForEnter(input = process.stdin) {
+    let onData = () => { };
+    const promise = new Promise(res => {
+        onData = chunk => {
+            if (/[\r\n]/.test(String(chunk)))
+                res();
+        };
+        input.on('data', onData);
+        input.resume();
+    });
+    const stop = () => {
+        input.off('data', onData);
+        input.pause();
+    };
+    return { promise, stop };
+}

package/dist/ui.js

@@ -6,11 +6,14 @@ import { connect } from 'node:net';
 import { relative } from 'node:path';
 import * as p from '@clack/prompts';
 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 { defaultShotOptions, normalizeUrl } from './options.js';
-import { openCommand, openPath } from './term.js';
+import { openCommand, openPath, waitForEnter } from './term.js';
 export function colors(enabled) {
     return pc.createColors(enabled);
 }
@@ -174,7 +177,7 @@ export function printDevices(c) {
 }
 // ------------------------------------------------------------------ shot
 /** Lines for the "Capture Summary" box. */
-export function summaryLines(o, c) {
+export function summaryLines(o, c, auth) {
     const yes = (b) => (b ? c.green('yes') : c.dim('no'));
     const rows = [
         ['devices', formatList(o.devices.map(d => c.cyan(d)))],
@@ -188,10 +191,34 @@ export function summaryLines(o, c) {
         rows.push(['wait for', o.waitFor]);
     if (!o.emulate)
         rows.push(['emulation', c.yellow('viewport + DPR only')]);
+    if (auth)
+        rows.push(...authRows(auth, c));
     rows.push(['output', `${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}`)];
 }
+/** Auth rows for the summary box: names only, values masked. */
+export function authRows(a, c) {
+    const rows = [];
+    if (a.session) {
+        const saved = a.session.savedAt ? c.dim(` saved ${localTime(a.session.savedAt)}`) : '';
+        if (a.session.loaded)
+            rows.push(['session', `${c.green(a.session.origin)}${saved}`]);
+        else if (a.session.expired)
+            rows.push(['session', c.yellow(`${a.session.origin} expired, not loaded`)]);
+        else
+            rows.push(['session', c.dim(`${a.session.origin} skipped (--no-session)`)]);
+    }
+    if (a.storageState)
+        rows.push(['storage state', rel(a.storageState)]);
+    if (a.cookies?.length)
+        rows.push(['cookies', formatList(a.cookies.map(x => `${x.name}=${c.dim(MASK)}`))]);
+    if (a.headers)
+        rows.push(['headers', formatList(Object.keys(a.headers).map(h => `${h}: ${c.dim(MASK)}`))]);
+    if (a.allowOrigins?.length)
+        rows.push(['also allowed', formatList(a.allowOrigins)]);
+    return rows;
+}
 function statusCell(s, c) {
     if (s.error)
         return c.red(s.code ?? 'error');
@@ -279,10 +306,11 @@ export function capturedLines(result, c) {
     return out;
 }
 export async function runShot(options, run, c) {
+    const auth = resolveAuth(options.url, options.auth ?? {});
     if (!run.continued) {
         printBanner(c);
         intro(c);
-        p.note(summaryLines(options, c).join('\n'), 'Capture Summary');
+        p.note(summaryLines(options, c, auth.summary).join('\n'), 'Capture Summary');
     }
     const s = p.spinner();
     s.start('Starting Chromium');
@@ -313,6 +341,7 @@ export async function runShot(options, run, c) {
     try {
         result = await capture(options, {
             browser,
+            auth,
             onDeviceStart: (d) => {
                 started = performance.now();
                 current = p.spinner();
@@ -362,6 +391,110 @@ export async function runShot(options, run, c) {
         p.outro(`${c.green('Done!')}  ${c.dim(advice)}`);
     return failed > 0 ? 1 : 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];
@@ -466,6 +599,90 @@ export async function runInteractive(c) {
     }
     return runShot(options, { open: false, continued: true, showCommand: true }, c);
 }
+// ------------------------------------------------------------------ login
+export async function runLogin(cmd, c) {
+    intro(c);
+    const { formLogin, interactiveLogin, HeadedBrowserMissingError } = await import('./login.js');
+    const s = p.spinner();
+    let spinning = false;
+    try {
+        let result;
+        if (cmd.form) {
+            s.start(`Signing in at ${c.cyan(cmd.url)} ${c.dim('(headless, form)')}`);
+            spinning = true;
+            result = await formLogin(cmd, cmd.form);
+            spinning = false;
+            s.stop(`Signed in ${c.dim(`now at ${result.finalUrl}`)}`);
+        }
+        else {
+            s.start('Opening Chromium');
+            spinning = true;
+            const enter = waitForEnter();
+            try {
+                result = await interactiveLogin(cmd, enter.promise, () => {
+                    spinning = false;
+                    s.stop(`Opened ${c.cyan(cmd.url)}`);
+                    p.log.info(`Sign in in the browser window, then press ${c.bold('Enter')} here ${c.dim('(or close the window)')}`);
+                });
+            }
+            finally {
+                enter.stop();
+            }
+        }
+        if (result.stillOnLogin) {
+            p.log.warn(c.yellow(`The page was still on a login URL (${result.finalUrl}). The sign-in may not have finished.`));
+        }
+        p.note([
+            `${c.dim('origin:')}       ${c.cyan(result.origin)}`,
+            `${c.dim('file:')}         ${rel(result.path)} ${c.dim('(mode 0600)')}`,
+            `${c.dim('cookies:')}      ${result.cookies}`,
+            `${c.dim('localStorage:')} ${result.localStorage} origin(s)`,
+        ].join('\n'), 'Saved session');
+        const next = cmd.save ? `rpc shot <url> --storage-state ${quote(rel(result.path))}` : `rpc shot ${result.origin}/…`;
+        p.outro(`${c.green('Done!')}  ${c.dim(`Next: ${next}`)}`);
+        return 0;
+    }
+    catch (err) {
+        const msg = err.message;
+        if (spinning)
+            s.error(c.red(err instanceof HeadedBrowserMissingError || err instanceof BrowserMissingError ? 'No browser to open' : 'Sign-in failed'));
+        if (err instanceof HeadedBrowserMissingError || err instanceof BrowserMissingError) {
+            p.note(wrap(msg.replace(/^Fix: /, ''), textWidth()).join('\n'), c.yellow('Fix'));
+        }
+        else {
+            p.log.error(wrap(msg, textWidth()).join('\n'));
+        }
+        p.outro(c.red('No session saved.'));
+        return 1;
+    }
+}
+export async function runSessions(action, origin, c) {
+    intro(c);
+    if (action === 'clear') {
+        const gone = await clearSessions(origin);
+        if (gone.length === 0)
+            p.log.info(origin ? `No saved session for ${c.cyan(origin)}` : 'No saved sessions');
+        for (const o of gone)
+            p.log.success(`Removed ${c.cyan(o)}`);
+        p.outro(c.dim(`${gone.length} removed`));
+        return 0;
+    }
+    const list = await listSessions();
+    if (list.length === 0) {
+        p.log.info(`No saved sessions in ${c.dim(sessionsDir())}`);
+        p.outro(c.dim('Create one with: rpc login <url>'));
+        return 0;
+    }
+    const when = localTime;
+    const originW = Math.max(...list.map(s => s.origin.length));
+    const lines = list.map(s => {
+        const exp = s.expired ? c.red(`expired ${when(s.expires)}`) : s.expires ? c.dim(`expires ${when(s.expires)}`) : c.dim('no expiry');
+        return `${c.cyan(s.origin.padEnd(originW))}  ${String(s.cookies).padStart(2)} cookie${s.cookies === 1 ? ' ' : 's'}  ${c.dim(`saved ${when(s.savedAt)}`)}  ${exp}`;
+    });
+    p.note(lines.join('\n'), `${list.length} saved session${list.length === 1 ? '' : 's'}`);
+    p.outro(c.dim(sessionsDir()));
+    return 0;
+}
 // ------------------------------------------------------------------ doctor
 export async function runDoctor(check, c) {
     intro(c);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rpc-agent",
-  "version": "0.3.1",
-  "description": "Screenshot a URL at device viewports, optionally framed in device bezels. CLI and MCP server for AI coding agents.",
+  "version": "0.5.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",
@@ -55,6 +55,7 @@
     "zod": "^4.6.7"
   },
   "devDependencies": {
+    "@fontsource/ibm-plex-mono": "^5.3.0",
     "@types/node": "^22.20.5",
     "@xterm/headless": "^5.5.0",
     "tsx": "^4.23.15",