@ytspar/sweetlink 1.13.0 → 1.14.0

package/dist/cli/sweetlink.js

@@ -13,6 +13,8 @@ import { screenshotViaPlaywright } from '../playwright.js';
 import { getCardHeaderPreset, getNavigationPreset, measureViaPlaywright } from '../ruler.js';
 import { DEFAULT_WS_PORT, MAX_PORT_RETRIES, WS_PORT_OFFSET } from '../types.js';
 import { SCREENSHOT_DIR } from '../urlUtils.js';
+import { daemonRequest, ensureDaemon, getDaemonStatus, stopDaemon } from '../daemon/client.js';
+import { uploadEvidence } from '../daemon/evidence.js';
 import { emitJson, printOutputSchema } from './outputSchemas.js';
 const COMMON_APP_PORTS = [3000, 3001, 4000, 5173, 5174, 8000, 8080];
 /**
@@ -421,6 +423,54 @@ async function screenshot(options) {
             process.exit(1);
         }
     }
+    // ── HiFi / Responsive path (persistent daemon) ──
+    if (options.hifi || options.responsive) {
+        console.log(`[Sweetlink] Taking ${options.responsive ? 'responsive' : 'hifi'} screenshot via daemon...`);
+        const daemonState = await ensureDaemon(findProjectRoot(), targetUrl);
+        if (options.responsive) {
+            const resp = await daemonRequest(daemonState, 'screenshot-responsive', {
+                fullPage: options.fullPage,
+            });
+            const data = resp.data;
+            const outputDir = options.output
+                ? path.dirname(options.output)
+                : path.join(findProjectRoot(), SCREENSHOT_DIR);
+            ensureDir(path.join(outputDir, 'placeholder'));
+            const paths = [];
+            for (const shot of data.screenshots) {
+                const filename = `responsive-${shot.label}-${Date.now()}.png`;
+                const outPath = path.join(outputDir, filename);
+                fs.writeFileSync(outPath, Buffer.from(shot.screenshot, 'base64'));
+                paths.push(outPath);
+                console.log(`  ${shot.label} (${shot.width}x${shot.height}): ${getRelativePath(outPath)}`);
+            }
+            const first = data.screenshots[0];
+            return {
+                path: getRelativePath(paths[0]),
+                width: first.width,
+                height: first.height,
+                method: 'Daemon (responsive)',
+            };
+        }
+        // Single hifi screenshot
+        const resp = await daemonRequest(daemonState, 'screenshot', {
+            selector: options.selector,
+            fullPage: options.fullPage,
+            viewport: options.viewport,
+        });
+        const data = resp.data;
+        const outputPath = options.output || getDefaultScreenshotPath();
+        ensureDir(outputPath);
+        fs.writeFileSync(outputPath, Buffer.from(data.screenshot, 'base64'));
+        reportScreenshotSuccess(outputPath, data.width, data.height, 'Daemon (hifi)', options.selector);
+        return {
+            path: getRelativePath(outputPath),
+            width: data.width,
+            height: data.height,
+            method: 'Daemon (hifi)',
+            selector: options.selector,
+        };
+    }
     console.log('[Sweetlink] Taking screenshot...');
     // Warn if using /tmp/ instead of .tmp/ (project-relative path is preferred)
     if (options.output?.startsWith('/tmp/')) {
@@ -1497,6 +1547,8 @@ const COMMAND_HELP = {
       --viewport <preset|WxH>     Viewport preset for Playwright (mobile, tablet, desktop) or WIDTHxHEIGHT
       --force-cdp                 Force Playwright/CDP method
       --force-ws                  Force WebSocket/html2canvas method (default)
+      --hifi                      Pixel-perfect via persistent Playwright daemon (~150ms after startup)
+      --responsive                Screenshots at 3 breakpoints (375/768/1280px) via daemon
       --no-wait                   Skip server readiness check (use if server is already running)
       --wait-timeout <ms>         Max time to wait for server (default: 30000ms)
 
@@ -1504,6 +1556,7 @@ const COMMAND_HELP = {
       Tier 1 (WS, viewport):     ~50-300KB PNG at 0.5x scale
       Tier 1 (WS, --full-page):  ~1-5MB PNG (entire page)
       Tier 2 (Playwright):       ~200-800KB PNG at native resolution
+      Tier 3 (--hifi):           ~200-800KB PNG, persistent daemon, fastest repeat shots
 
     Examples:
       pnpm sweetlink screenshot                                            # Viewport screenshot (small)
@@ -1511,7 +1564,9 @@ const COMMAND_HELP = {
       pnpm sweetlink screenshot --selector ".company-card"                 # Element screenshot
       pnpm sweetlink screenshot --full-page                                # Full scrollable page
       pnpm sweetlink screenshot --force-cdp --viewport tablet              # Playwright at 768x1024
-      pnpm sweetlink screenshot --force-cdp --width 375 --height 667       # Playwright at iPhone SE`,
+      pnpm sweetlink screenshot --force-cdp --width 375 --height 667       # Playwright at iPhone SE
+      pnpm sweetlink screenshot --hifi                                     # Pixel-perfect via daemon
+      pnpm sweetlink screenshot --responsive                               # 3 breakpoints via daemon`,
     query: `  query --selector <css-selector> [options]
     Query DOM elements and return data
 
@@ -1717,6 +1772,77 @@ const COMMAND_HELP = {
 
     Examples:
       pnpm sweetlink setup`,
+    daemon: `  daemon [start|stop|status] [options]
+    Manage the persistent Playwright daemon process.
+    The daemon auto-starts on first --hifi command and auto-stops after 30min idle.
+
+    Subcommands:
+      start                       Start the daemon (if not already running)
+      stop                        Stop the daemon
+      status                      Show daemon status (default)
+
+    Options:
+      --url <url>                 Dev server URL (default: http://localhost:3000)
+
+    Examples:
+      pnpm sweetlink daemon                    # Show status
+      pnpm sweetlink daemon start --url http://localhost:5173
+      pnpm sweetlink daemon stop`,
+    snapshot: `  snapshot [options]
+    Capture accessibility tree snapshot with element refs (requires daemon).
+
+    Options:
+      -i, --interactive           Show only interactive elements with @e refs
+      -D, --diff                  Diff against previous snapshot
+      -a, --annotate              Annotated screenshot with ref labels
+      -o, --output <path>         Output path for annotated screenshot
+
+    Examples:
+      pnpm sweetlink snapshot -i               # List interactive elements with @refs
+      pnpm sweetlink snapshot -D               # Diff against previous snapshot
+      pnpm sweetlink snapshot -a -o /tmp/annotated.png`,
+    console: `  console [options]
+    Read console messages from daemon ring buffer (always-on capture).
+    Replaces /console-check-sweetlink with better coverage.
+
+    Options:
+      --errors                    Show only errors
+      --last <n>                  Show only last N entries
+      --url <url>                 Dev server URL (default: http://localhost:3000)
+
+    Examples:
+      pnpm sweetlink console                   # All console messages
+      pnpm sweetlink console --errors          # Errors only
+      pnpm sweetlink console --last 20         # Last 20 entries`,
+    fill: `  fill <@ref> <value> [options]
+    Fill an input element by @ref (requires daemon + snapshot).
+
+    Examples:
+      pnpm sweetlink fill @e2 "test@example.com"`,
+    proof: `  proof --pr <number> [options]
+    Upload session evidence to a GitHub PR.
+    Posts a formatted comment with action timeline and error summary.
+
+    Options:
+      --pr <number>               PR number (required)
+      --session <dir>             Session directory (default: .sweetlink)
+      --repo <owner/repo>         Repository (default: current repo)
+
+    Examples:
+      pnpm sweetlink proof --pr 123`,
+    record: `  record [start|stop|status]
+    Record browser sessions with action timeline.
+
+    Subcommands:
+      start                       Begin recording (captures screenshots at each action)
+      stop                        Stop recording and generate session manifest
+      status                      Show recording status (default)
+
+    Examples:
+      pnpm sweetlink record start
+      pnpm sweetlink snapshot -i
+      pnpm sweetlink click @e3
+      pnpm sweetlink record stop`,
 };
 // Aliases that map to canonical command names
 const COMMAND_ALIASES = {
@@ -1815,6 +1941,12 @@ if (hasFlag('--output-schema')) {
         'cleanup',
         'wait',
         'status',
+        'daemon',
+        'snapshot',
+        'fill',
+        'console',
+        'record',
+        'proof',
     ];
     const schemaCommand = knownCommands.includes(commandType)
         ? commandType === 'measure'
@@ -1932,6 +2064,8 @@ async function handleStatusCommand() {
                     fullPage: hasFlag('--full-page'),
                     forceCDP: hasFlag('--force-cdp'),
                     forceWS: hasFlag('--force-ws'),
+                    hifi: hasFlag('--hifi'),
+                    responsive: hasFlag('--responsive'),
                     a11y: hasFlag('--a11y'),
                     viewport: getArg('--viewport'),
                     width: getArg('--width') ? parseInt(getArg('--width'), 10) : undefined,
@@ -1999,18 +2133,49 @@ async function handleStatusCommand() {
                 });
                 break;
             }
-            case 'click':
-                result = await click({
-                    selector: getArg('--selector'),
-                    text: getArg('--text'),
-                    index: getArg('--index') ? parseInt(getArg('--index'), 10) : undefined,
-                });
+            case 'click': {
+                const clickTarget = getArg('--selector') ?? args[1];
+                // Route @e refs to daemon
+                if (clickTarget && /^@e\d+$/.test(clickTarget)) {
+                    const projRoot = findProjectRoot();
+                    const targetUrl = getArg('--url') ?? 'http://localhost:3000';
+                    const state = await ensureDaemon(projRoot, targetUrl);
+                    await daemonRequest(state, 'click-ref', { ref: clickTarget });
+                    console.log(`[Sweetlink] Clicked ${clickTarget}`);
+                    result = { clicked: clickTarget, found: 1, index: 0 };
+                }
+                else {
+                    result = await click({
+                        selector: clickTarget,
+                        text: getArg('--text'),
+                        index: getArg('--index') ? parseInt(getArg('--index'), 10) : undefined,
+                    });
+                }
                 break;
-            case 'network':
-                result = await getNetwork({
-                    filter: getArg('--filter'),
-                });
+            }
+            case 'network': {
+                // If --failed flag is present and daemon is running, use daemon ring buffer
+                if (hasFlag('--failed')) {
+                    const projRoot = findProjectRoot();
+                    const targetUrl = getArg('--url') ?? 'http://localhost:3000';
+                    const lastN = getArg('--last') ? parseInt(getArg('--last'), 10) : undefined;
+                    const state = await ensureDaemon(projRoot, targetUrl);
+                    const resp = await daemonRequest(state, 'network-read', {
+                        failed: true,
+                        last: lastN,
+                    });
+                    const data = resp.data;
+                    console.log(data.formatted);
+                    console.log(`\nTotal: ${data.total} | Failed: ${data.failedCount}`);
+                    result = data;
+                }
+                else {
+                    result = await getNetwork({
+                        filter: getArg('--filter'),
+                    });
+                }
                 break;
+            }
             case 'refresh':
                 result = await refresh({
                     hard: hasFlag('--hard'),
@@ -2083,6 +2248,177 @@ async function handleStatusCommand() {
                 execFileSync('node', [setupScript], { stdio: 'inherit' });
                 break;
             }
+            case 'console': {
+                // Route to daemon ring buffer when daemon is alive
+                const projRoot = findProjectRoot();
+                const targetUrl = getArg('--url') ?? 'http://localhost:3000';
+                const errorsOnly = hasFlag('--errors');
+                const lastN = getArg('--last') ? parseInt(getArg('--last'), 10) : undefined;
+                const state = await ensureDaemon(projRoot, targetUrl);
+                const resp = await daemonRequest(state, 'console-read', {
+                    errors: errorsOnly,
+                    last: lastN,
+                });
+                const data = resp.data;
+                console.log(data.formatted);
+                console.log(`\nTotal: ${data.total} | Errors: ${data.errorCount} | Warnings: ${data.warningCount}`);
+                result = data;
+                break;
+            }
+            case 'proof': {
+                const prNum = getArg('--pr');
+                if (!prNum) {
+                    console.error('[Sweetlink] Error: --pr <number> is required');
+                    process.exit(1);
+                }
+                const sessionDirArg = getArg('--session') ?? '.sweetlink';
+                // Find latest session manifest
+                const sessionFiles = fs.readdirSync(sessionDirArg)
+                    .filter((f) => f.startsWith('session-'))
+                    .sort()
+                    .reverse();
+                if (sessionFiles.length === 0) {
+                    console.error('[Sweetlink] No session found. Run `record start` and `record stop` first.');
+                    process.exit(1);
+                }
+                const latestSession = path.join(sessionDirArg, sessionFiles[0]);
+                const manifestPath = path.join(latestSession, 'sweetlink-session.json');
+                if (!fs.existsSync(manifestPath)) {
+                    console.error(`[Sweetlink] No manifest found at ${manifestPath}`);
+                    process.exit(1);
+                }
+                const manifestData = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+                try {
+                    const { commentUrl } = await uploadEvidence(manifestData, latestSession, parseInt(prNum, 10), { repo: getArg('--repo') ?? undefined });
+                    console.log(`[Sweetlink] Evidence posted: ${commentUrl}`);
+                    result = { commentUrl };
+                }
+                catch (error) {
+                    console.error('[Sweetlink] Failed to upload evidence:', error instanceof Error ? error.message : error);
+                    process.exit(1);
+                }
+                break;
+            }
+            case 'record': {
+                const projRoot = findProjectRoot();
+                const targetUrl = getArg('--url') ?? 'http://localhost:3000';
+                const subcommand = args[1];
+                const state = await ensureDaemon(projRoot, targetUrl);
+                if (subcommand === 'start') {
+                    const resp = await daemonRequest(state, 'record-start');
+                    const data = resp.data;
+                    console.log(`[Sweetlink] Recording started: ${data.sessionId}`);
+                    result = data;
+                }
+                else if (subcommand === 'stop') {
+                    const resp = await daemonRequest(state, 'record-stop');
+                    const data = resp.data;
+                    console.log('[Sweetlink] Recording stopped.');
+                    console.log(JSON.stringify(data.manifest, null, 2));
+                    result = data;
+                }
+                else {
+                    const resp = await daemonRequest(state, 'record-status');
+                    const data = resp.data;
+                    if (data.recording) {
+                        console.log(`[Sweetlink] Recording in progress: ${data.sessionId} (${Math.round(data.duration ?? 0)}s, ${data.actionCount} actions)`);
+                    }
+                    else {
+                        console.log('[Sweetlink] No recording in progress.');
+                    }
+                    result = data;
+                }
+                break;
+            }
+            case 'daemon': {
+                const subcommand = args[1];
+                const projRoot = findProjectRoot();
+                if (subcommand === 'stop') {
+                    const stopped = await stopDaemon(projRoot);
+                    console.log(stopped ? '[Sweetlink] Daemon stopped.' : '[Sweetlink] No daemon running.');
+                    result = { running: false };
+                }
+                else if (subcommand === 'start') {
+                    const targetUrl = getArg('--url') ?? 'http://localhost:3000';
+                    const state = await ensureDaemon(projRoot, targetUrl);
+                    console.log(`[Sweetlink] Daemon running on port ${state.port} (PID: ${state.pid})`);
+                    result = {
+                        running: true,
+                        pid: state.pid,
+                        port: state.port,
+                        url: state.url,
+                    };
+                }
+                else {
+                    // Default: status
+                    const status = await getDaemonStatus(projRoot);
+                    if (status.running) {
+                        console.log(`[Sweetlink] Daemon running: port=${status.port} pid=${status.pid} uptime=${status.uptime}s`);
+                    }
+                    else {
+                        console.log('[Sweetlink] No daemon running.');
+                    }
+                    result = status;
+                }
+                break;
+            }
+            case 'fill': {
+                const fillTarget = getArg('--selector') ?? args[1];
+                const fillValue = getArg('--value') ?? args[2];
+                if (!fillTarget) {
+                    console.error('[Sweetlink] Error: fill requires a target (@ref or --selector)');
+                    process.exit(1);
+                }
+                if (fillValue === undefined) {
+                    console.error('[Sweetlink] Error: fill requires a value (--value or positional arg)');
+                    process.exit(1);
+                }
+                if (/^@e\d+$/.test(fillTarget)) {
+                    const projRoot = findProjectRoot();
+                    const targetUrl = getArg('--url') ?? 'http://localhost:3000';
+                    const state = await ensureDaemon(projRoot, targetUrl);
+                    await daemonRequest(state, 'fill-ref', { ref: fillTarget, value: fillValue });
+                    console.log(`[Sweetlink] Filled ${fillTarget} with "${fillValue}"`);
+                    result = { clicked: fillTarget, found: 1, index: 0 };
+                }
+                else {
+                    console.error('[Sweetlink] Error: fill currently only supports @e refs. Run `snapshot -i` first.');
+                    process.exit(1);
+                }
+                break;
+            }
+            case 'snapshot': {
+                const projRoot = findProjectRoot();
+                const targetUrl = getArg('--url') ?? 'http://localhost:3000';
+                const interactive = hasFlag('-i') || hasFlag('--interactive');
+                const doDiff = hasFlag('-D') || hasFlag('--diff');
+                const doAnnotate = hasFlag('-a') || hasFlag('--annotate');
+                const state = await ensureDaemon(projRoot, targetUrl);
+                const resp = await daemonRequest(state, 'snapshot', {
+                    interactive,
+                    diff: doDiff,
+                    annotate: doAnnotate,
+                });
+                const data = resp.data;
+                if (doDiff && data.diff) {
+                    console.log(data.diff);
+                }
+                else if (doAnnotate && data.screenshot) {
+                    const outputPath = getArg('--output') ?? getArg('-o') ?? 'annotated-snapshot.png';
+                    fs.writeFileSync(outputPath, Buffer.from(data.screenshot, 'base64'));
+                    console.log(`[Sweetlink] Annotated screenshot saved: ${outputPath}`);
+                }
+                else {
+                    console.log(data.tree);
+                }
+                console.log(`\n${data.count} elements found`);
+                result = {
+                    tree: data.tree,
+                    refs: data.refs,
+                    diff: data.diff,
+                };
+                break;
+            }
             default:
                 console.error(`[Sweetlink] Unknown command: ${commandType}`);
                 console.log('Run "pnpm sweetlink --help" for usage information');