rpc-agent 0.0.0-stage → 0.3.1

package/dist/cli.js

@@ -0,0 +1,175 @@
+#!/usr/bin/env node
+import { readFileSync } from 'node:fs';
+import { relative } from 'node:path';
+import { ArgError, parseCli, USAGE } from './args.js';
+import { doctor, installChromium } from './browser.js';
+import { capture } from './capture.js';
+import { CATEGORY_LABELS, CATEGORY_ORDER, DEVICE_ALIASES, DEVICES } from './devices.js';
+import { currentMode, openPath } from './term.js';
+const NO_PAINT = { ok: s => s, bad: s => s, warn: s => s };
+let paint = NO_PAINT;
+async function plainPaint() {
+    if (!currentMode().color)
+        return NO_PAINT;
+    const { default: pc } = await import('picocolors');
+    const c = pc.createColors(true);
+    return { ok: c.green, bad: c.red, warn: c.yellow };
+}
+// Loaded only for rich (interactive terminal) runs; `rpc mcp` and --json
+// never import clack.
+async function loadUi() {
+    const ui = await import('./ui.js');
+    return { ui, c: ui.colors(currentMode().color) };
+}
+async function main(argv) {
+    const cmd = parseCli(argv);
+    if (cmd.command === 'mcp') {
+        const { runMcpServer } = await import('./mcp.js');
+        await runMcpServer();
+        return -1; // keep running; stdio transport owns the process
+    }
+    const json = 'json' in cmd && cmd.json;
+    const mode = currentMode(json);
+    if (!mode.rich && !json)
+        paint = await plainPaint();
+    switch (cmd.command) {
+        case 'help': {
+            if (argv.length === 0 && mode.rich) {
+                const { ui, c } = await loadUi();
+                return ui.runInteractive(c);
+            }
+            if (!cmd.topic && !mode.rich) {
+                process.stdout.write(USAGE);
+                return 0;
+            }
+            const { commandHelp, richHelp } = await import('./help.js');
+            const { default: pc } = await import('picocolors');
+            const c = pc.createColors(mode.color);
+            process.stdout.write(cmd.topic ? commandHelp(cmd.topic, c) : richHelp(c));
+            return 0;
+        }
+        case 'version': {
+            const pkg = JSON.parse(readFileSync(new URL('../package.json', import.meta.url), 'utf8'));
+            console.log(pkg.version);
+            return 0;
+        }
+        case 'devices':
+            if (cmd.json) {
+                console.log(JSON.stringify({ devices: DEVICES, aliases: DEVICE_ALIASES }, null, 2));
+            }
+            else if (mode.rich) {
+                const { ui, c } = await loadUi();
+                ui.printDevices(c);
+            }
+            else {
+                process.stdout.write(formatDeviceTable());
+            }
+            return 0;
+        case 'doctor': {
+            if (mode.rich) {
+                const { ui, c } = await loadUi();
+                return ui.runDoctor(doctor, c);
+            }
+            const report = await doctor();
+            if (cmd.json)
+                console.log(JSON.stringify(report, null, 2));
+            else
+                printDoctor(report);
+            return report.ok ? 0 : 1;
+        }
+        case 'install': {
+            const code = await installChromium();
+            if (code !== 0)
+                return code;
+            if (mode.rich) {
+                const { ui, c } = await loadUi();
+                return ui.runDoctor(doctor, c);
+            }
+            const report = await doctor();
+            printDoctor(report);
+            return report.ok ? 0 : 1;
+        }
+        case 'shot': {
+            if (mode.rich) {
+                const { ui, c } = await loadUi();
+                return ui.runShot(cmd.options, { open: cmd.open }, c);
+            }
+            const result = await capture(cmd.options, cmd.json ? {} : { onDevice: printShot });
+            if (cmd.json)
+                console.log(JSON.stringify(result, null, 2));
+            if (cmd.open && result.shots.some(s => !s.error))
+                openPath(result.outDir);
+            return result.shots.some(s => s.error) ? 1 : 0;
+        }
+    }
+}
+function rel(p) {
+    const r = relative(process.cwd(), p);
+    return r.startsWith('..') ? p : r;
+}
+function printDoctor(r) {
+    console.log(`node        ${r.node}`);
+    console.log(`playwright  ${r.playwright}`);
+    console.log(`browsers    ${r.browsersPath}`);
+    if (r.ok) {
+        console.log(`chromium    ${paint.ok('ok')} (${r.version})`);
+        return;
+    }
+    console.log(`chromium    ${paint.bad(r.chromium)}`);
+    console.error(`rpc: ${r.error}`);
+    if (r.chromium === 'missing')
+        console.error('Run `rpc install` to download it now.');
+}
+function printShot(s) {
+    const label = `${s.device} (${s.viewport.width}x${s.viewport.height} @${s.dpr}x)`;
+    if (s.error) {
+        console.error(`${paint.bad('x')} ${label}: ${s.error}`);
+        if (s.hint)
+            console.error(`   ${paint.warn('hint:')} ${s.hint}`);
+        return;
+    }
+    const lines = [`${paint.ok('ok')} ${label}${s.status && s.status >= 400 ? ` HTTP ${s.status}` : ''}`];
+    if (s.shot) {
+        const extra = [
+            s.segments && s.segments > 1 ? `${s.segments} segments stitched` : '',
+            s.clipped ? `clipped at ${s.capturedHeight} of ${s.scrollHeight} css px` : '',
+        ].filter(Boolean);
+        lines.push(`   ${rel(s.shot.path)}  ${s.shot.width}x${s.shot.height}${extra.length ? ` (${extra.join(', ')})` : ''}`);
+    }
+    if (s.framed)
+        lines.push(`   ${rel(s.framed.path)}  ${s.framed.width}x${s.framed.height}`);
+    if (s.slices?.saved && s.slices.items[0]?.path) {
+        const first = rel(s.slices.items[0].path);
+        lines.push(`   ${first.replace(/-slice-\d+\.jpg$/, '-slice-NN.jpg')}  ${s.slices.total} slice(s), ${s.slices.items[0].width}px wide`);
+    }
+    if (s.consoleErrors?.length)
+        lines.push(`   ${s.consoleErrors.length} console error(s), first: ${s.consoleErrors[0]}`);
+    console.log(lines.join('\n'));
+}
+export function formatDeviceTable() {
+    const out = [];
+    for (const cat of CATEGORY_ORDER) {
+        out.push(CATEGORY_LABELS[cat]);
+        for (const d of DEVICES.filter(x => x.category === cat)) {
+            out.push(`  ${d.id.padEnd(20)} ${`${d.width}x${d.height}`.padEnd(10)} @${String(d.dpr).padEnd(6)} ${d.name}`);
+        }
+        out.push('');
+    }
+    out.push('Aliases');
+    for (const [alias, id] of Object.entries(DEVICE_ALIASES))
+        out.push(`  ${alias.padEnd(20)} -> ${id}`);
+    return out.join('\n') + '\n';
+}
+main(process.argv.slice(2)).then(code => {
+    if (code >= 0)
+        process.exitCode = code;
+}, err => {
+    if (err instanceof ArgError) {
+        console.error(`rpc: ${err.message}`);
+        process.exitCode = 2;
+    }
+    else {
+        console.error(`rpc: ${err.message}`);
+        process.exitCode = 1;
+    }
+});

package/dist/composite.js

@@ -0,0 +1,115 @@
+import { bezelLayoutFor, loadBezelSvg } from './bezel.js';
+/** Any origin works; requests to it never leave the process (page.route). */
+const ORIGIN = 'http://rpc-compositor.invalid';
+/** Long-side cap for framed output so 3x phones and 2x 27" displays stay sane. */
+export const MAX_FRAMED_PX = 4096;
+/**
+ * Serve `html` at ORIGIN/ and `images` at ORIGIN/shot.png (the first) and
+ * ORIGIN/img/<n>.png from a throwaway page, then run `fn`. Routing avoids
+ * stuffing multi-MB data: URLs into setContent.
+ */
+async function withStage(browser, viewport, deviceScaleFactor, html, images, fn) {
+    const list = Array.isArray(images) ? images : [images];
+    const context = await browser.newContext({ viewport, deviceScaleFactor });
+    try {
+        const page = await context.newPage();
+        await page.route(`${ORIGIN}/**`, route => {
+            const path = new URL(route.request().url()).pathname;
+            const m = /^\/img\/(\d+)\.png$/.exec(path);
+            const img = path === '/shot.png' ? list[0] : m ? list[Number(m[1])] : undefined;
+            if (img)
+                return route.fulfill({ status: 200, contentType: 'image/png', body: img });
+            if (path !== '/')
+                return route.fulfill({ status: 404 });
+            return route.fulfill({ status: 200, contentType: 'text/html', body: html });
+        });
+        await page.goto(`${ORIGIN}/`);
+        // String predicate: see the note on in-page scripts in capture.ts.
+        await page.waitForFunction(`Array.from(document.images).every(i => i.complete)`);
+        return await fn(page);
+    }
+    finally {
+        await context.close();
+    }
+}
+/** Strip the root <svg>'s fixed width/height so CSS can size it, as RPC does. */
+function prepareSvg(svg) {
+    return svg.replace(/<svg\b[^>]*>/, tag => tag.replace(/\s(width|height)="[^"]*"/g, '').replace('<svg', '<svg style="position:absolute;left:0;top:0;width:100%;height:100%"'));
+}
+/**
+ * Composite a viewport screenshot into the device bezel. Mirrors RPC's
+ * frame.ts: SVG fills the outer box underneath, the page sits on top at the
+ * screen rect with the screen's corner radius. Output has a transparent
+ * background and the device's DPR (capped by MAX_FRAMED_PX).
+ */
+export async function renderFramed(browser, device, viewportPng) {
+    const layout = bezelLayoutFor(device);
+    const { screen } = layout;
+    const scale = Math.min(device.dpr, MAX_FRAMED_PX / Math.max(layout.outerWidth, layout.outerHeight));
+    const html = `<!doctype html><html><head><style>
+  html,body{margin:0;background:transparent}
+  #frame{position:relative;width:${layout.outerWidth}px;height:${layout.outerHeight}px}
+  #bezel{position:absolute;inset:0;z-index:1}
+  #screen{position:absolute;z-index:2;display:block;left:${screen.x}px;top:${screen.y}px;
+    width:${screen.width}px;height:${screen.height}px;border-radius:${screen.radius}px;object-fit:fill}
+</style></head><body><div id="frame"><div id="bezel">${prepareSvg(loadBezelSvg(layout.src))}</div>
+<img id="screen" src="/shot.png" alt=""></div></body></html>`;
+    return withStage(browser, { width: layout.outerWidth, height: layout.outerHeight }, scale, html, viewportPng, page => page.locator('#frame').screenshot({ omitBackground: true, type: 'png' }));
+}
+/**
+ * Small JPEG for returning inline over MCP. Tall full-page shots are cropped
+ * to the top `maxAspect` region first so text is still legible after scaling.
+ */
+export async function renderPreview(browser, png, size, { maxDim = 1024, maxAspect = 3, quality = 70 } = {}) {
+    const srcH = Math.min(size.height, Math.round(size.width * maxAspect));
+    const cropped = srcH < size.height;
+    const scale = Math.min(1, maxDim / Math.max(size.width, srcH));
+    const width = Math.max(1, Math.round(size.width * scale));
+    const height = Math.max(1, Math.round(srcH * scale));
+    const html = `<!doctype html><html><head><style>
+  html,body{margin:0;background:#fff}
+  #c{width:${width}px;height:${height}px;overflow:hidden}
+  img{display:block;width:${width}px;height:auto}
+</style></head><body><div id="c"><img src="/shot.png" alt=""></div></body></html>`;
+    const data = await withStage(browser, { width, height }, 1, html, png, page => page.locator('#c').screenshot({ type: 'jpeg', quality }));
+    return { data, width, height, cropped };
+}
+/**
+ * Render review slices (JPEG) from full-page capture segments. The segments
+ * are stacked at preview scale in one compositor page and each slice is a
+ * clipped view of that stack, so neither the page nor any slice ever needs a
+ * bitmap taller than a single segment.
+ *
+ * `cssWidth` is the captured width in CSS px; `scale` is output px per CSS px.
+ */
+export async function renderSlices(browser, segments, slices, cssWidth, scale, quality = 70) {
+    if (slices.length === 0)
+        return [];
+    const width = Math.max(1, Math.round(cssWidth * scale));
+    const maxH = Math.max(...slices.map(s => Math.round(s.height * scale)));
+    const imgs = segments
+        .map((seg, i) => 
+    // Whole-pixel edges so adjacent segments meet without a blended seam row.
+    `<img src="/img/${i}.png" alt="" style="position:absolute;left:0;top:${Math.round(seg.y * scale)}px;` +
+        `width:${width}px;height:${Math.round((seg.y + seg.height) * scale) - Math.round(seg.y * scale)}px">`)
+        .join('');
+    const html = `<!doctype html><html><head><style>
+  html,body{margin:0;background:#fff}
+  #c{position:relative;width:${width}px;height:${maxH}px;overflow:hidden}
+  #s{position:absolute;left:0;top:0;width:${width}px}
+  img{display:block}
+</style></head><body><div id="c"><div id="s">${imgs}</div></div></body></html>`;
+    return withStage(browser, { width, height: maxH }, 1, html, segments.map(s => s.png), async (page) => {
+        const out = [];
+        for (const slice of slices) {
+            const pxHeight = Math.max(1, Math.round(slice.height * scale));
+            await page.evaluate(`(() => {
+            document.getElementById('c').style.height = '${pxHeight}px';
+            document.getElementById('s').style.transform = 'translateY(${-Math.round(slice.y * scale)}px)';
+          })()`);
+            const data = await page.locator('#c').screenshot({ type: 'jpeg', quality });
+            out.push({ ...slice, data, width, pxHeight });
+        }
+        return out;
+    });
+}