@ytspar/sweetlink 1.13.0 → 1.15.0

package/README.md

@@ -24,6 +24,12 @@ Sweetlink enables Claude AI agents to autonomously debug, test, and iterate on w
 - **🎯 Token Efficient** - ~1000 tokens/screenshot vs ~5000 for MCP tools
 - **📝 LLM-Optimized Output** - Summary format with deduplication for context efficiency
 - **🚀 Zero Setup** - Works immediately with any web app
+- **🖥️ Persistent Daemon** - Playwright daemon stays alive between commands (~150ms screenshots)
+- **🏷️ @Ref System** - Accessibility tree refs for click/fill without CSS selectors
+- **📊 Ring Buffers** - Always-on console/network/dialog capture (50K entries)
+- **🎬 Session Recording** - Record actions with screenshots, generate interactive viewer
+- **🔍 Snapshot Diffing** - Text diff of accessibility tree after actions
+- **📱 Device Emulation** - Named presets (iPhone 14, Pixel 7, iPad Pro) for batch screenshots
 
 ## Screenshot Button
 
@@ -86,22 +92,30 @@ That's it! The plugin automatically:
 - Detects Vite's port and configures everything
 - DevBar connects automatically
 
-### For Next.js
+### For Next.js (Recommended)
 
-Use the `instrumentation.ts` hook to start the server once on startup:
+Wrap your Next.js config - zero configuration needed:
 
-```typescript
-// src/instrumentation.ts (or instrumentation.ts at root)
-export async function register() {
-  if (process.env.NEXT_RUNTIME === 'nodejs') {
-    if (process.env.NODE_ENV === 'development') {
-      import('@ytspar/sweetlink/auto');
-    }
-  }
-}
+```javascript
+// next.config.mjs
+import { withSweetlink } from '@ytspar/sweetlink/next';
+
+const nextConfig = { /* your config */ };
+export default withSweetlink(nextConfig);
 ```
 
-This runs once when the Next.js server starts and auto-configures the WebSocket port based on the app port (3000 → 9223).
+That's it! The plugin automatically:
+- Detects the port from `--port` argv (e.g., `next dev --port 3002`)
+- Falls back to `process.env.PORT`, then `3000`
+- Starts the WebSocket server on `appPort + 6223`
+- No-ops in production
+
+Works with other wrappers too:
+
+```javascript
+// With Sentry, MDX, etc.
+export default withSentryConfig(withSweetlink(withMDX(nextConfig)), sentryOptions);
+```
 
 ### For Any Node.js App (Express, Remix, etc.)
 
@@ -167,7 +181,7 @@ pnpm sweetlink query --selector "h1"
 ### Screenshots
 
 ```bash
-# Full page screenshot
+# Full page screenshot (html2canvas, fast)
 pnpm sweetlink screenshot
 
 # Element screenshot
@@ -176,8 +190,23 @@ pnpm sweetlink screenshot --selector ".company-card"
 # Full page with custom output
 pnpm sweetlink screenshot --full-page --output page.png
 
-# Force CDP method (requires Chrome debugging)
-pnpm sweetlink screenshot --force-cdp
+# Navigate to URL before capturing
+pnpm sweetlink screenshot --url http://localhost:3000/about
+
+# Custom viewport dimensions
+pnpm sweetlink screenshot --force-cdp --width 375 --height 667
+pnpm sweetlink screenshot --force-cdp --viewport mobile
+
+# Pixel-perfect via daemon (see Persistent Daemon section)
+pnpm sweetlink screenshot --hifi
+pnpm sweetlink screenshot --responsive
+
+# Skip server readiness check
+pnpm sweetlink screenshot --no-wait
+
+# Force specific method
+pnpm sweetlink screenshot --force-cdp   # Playwright/CDP
+pnpm sweetlink screenshot --force-ws    # WebSocket/html2canvas
 ```
 
 ### DOM Queries
@@ -292,14 +321,206 @@ pnpm sweetlink click --selector ".tab" --index 2
 
 **Debugging:** Use `DEBUG=1 pnpm sweetlink click ...` to see generated JavaScript.
 
-### Network Requests (CDP Required)
+### Network Requests
 
 ```bash
-# Get all network requests
+# Get all network requests (via WebSocket bridge)
 pnpm sweetlink network
 
 # Filter by URL
 pnpm sweetlink network --filter "/api/"
+
+# Failed requests only (via daemon ring buffer)
+pnpm sweetlink network --failed
+pnpm sweetlink network --failed --last 10
+```
+
+### Schema, Outline, Accessibility
+
+```bash
+# Page schema (JSON-LD, meta tags, Open Graph)
+pnpm sweetlink schema
+
+# Document outline (heading structure)
+pnpm sweetlink outline
+
+# Accessibility audit (axe-core)
+pnpm sweetlink a11y
+
+# Web Vitals (FCP, LCP, CLS, INP)
+pnpm sweetlink vitals
+```
+
+### Server Management
+
+```bash
+# Wait for dev server to be ready (useful in scripts)
+pnpm sweetlink wait --url http://localhost:3000
+pnpm sweetlink wait --url http://localhost:3000 --wait-timeout 60000
+
+# Check server health
+pnpm sweetlink status
+
+# Clean up Sweetlink processes
+pnpm sweetlink cleanup
+pnpm sweetlink cleanup --force
+
+# Target specific app in monorepo (by branch or app name)
+pnpm sweetlink screenshot --app my-app
+```
+
+### Persistent Daemon (v2)
+
+Sweetlink v2 adds a persistent Playwright daemon for high-fidelity operations. The daemon auto-starts on first use and auto-stops after 30min idle.
+
+#### Auto-Start with Vite
+
+Add `daemon: true` to your Vite plugin config — the daemon starts/stops with your dev server:
+
+```typescript
+// vite.config.ts
+import { sweetlink } from '@ytspar/sweetlink/vite';
+
+export default defineConfig({
+  plugins: [sweetlink({ daemon: true })]
+  // Or with visible browser: sweetlink({ daemon: true, headed: true })
+});
+```
+
+#### Auto-Start with Dev Script
+
+Add a `dev` script that starts both your app and the daemon:
+
+```json
+{
+  "scripts": {
+    "dev": "vite",
+    "dev:daemon": "concurrently 'vite' 'sweetlink daemon start --url http://localhost:5173'"
+  }
+}
+```
+
+#### Multiple Apps (Monorepo)
+
+Each daemon is scoped by app port. Running two apps on different ports creates separate daemons:
+
+```bash
+# Terminal 1: App A on port 3000
+sweetlink daemon start --url http://localhost:3000
+# State: .sweetlink/daemon-3000.json
+
+# Terminal 2: App B on port 5173
+sweetlink daemon start --url http://localhost:5173
+# State: .sweetlink/daemon-5173.json
+
+# Commands target specific apps via --url
+sweetlink screenshot --hifi --url http://localhost:3000
+sweetlink screenshot --hifi --url http://localhost:5173
+```
+
+#### Manual Lifecycle
+
+```bash
+# Start manually (auto-starts on first --hifi command if not running)
+pnpm sweetlink daemon start --url http://localhost:5173
+pnpm sweetlink daemon start --url http://localhost:5173 --headed  # visible browser
+
+# Check status
+pnpm sweetlink daemon status
+
+# Stop (or wait for 30min idle auto-stop)
+pnpm sweetlink daemon stop
+```
+
+#### CLI Quick Reference
+
+```bash
+# Pixel-perfect screenshot via persistent daemon (~150ms after startup)
+pnpm sweetlink screenshot --hifi
+
+# Responsive screenshots at 3 breakpoints (375/768/1280)
+pnpm sweetlink screenshot --responsive
+```
+
+### Accessibility Snapshots & Refs
+
+```bash
+# List interactive elements with @refs
+pnpm sweetlink snapshot -i
+#   @e1 [link] "Home"
+#   @e2 [button] "Submit"
+#   @e3 [textbox] "Email"
+
+# Click/fill by ref (no CSS selector needed)
+pnpm sweetlink click @e2
+pnpm sweetlink fill @e3 "user@example.com"
+
+# Diff against previous snapshot
+pnpm sweetlink snapshot -D
+
+# Annotated screenshot with red ref labels
+pnpm sweetlink snapshot -a -o annotated.png
+```
+
+### Console & Network (Ring Buffers)
+
+Always-on capture from daemon start — no "start watching" needed.
+
+```bash
+# Console messages (captured since daemon start)
+pnpm sweetlink console
+pnpm sweetlink console --errors
+pnpm sweetlink console --last 20
+
+# Failed network requests
+pnpm sweetlink network --failed
+```
+
+### Session Recording
+
+```bash
+pnpm sweetlink record start
+# ... do actions (click, fill, snapshot) ...
+pnpm sweetlink record stop
+# Generates .sweetlink/<session-id>/viewer.html
+```
+
+### Demo Documents
+
+Build a Markdown tutorial/proof document step-by-step (inspired by [Showboat](https://simonwillison.net/2026/Feb/10/showboat-and-rodney/)):
+
+```bash
+# Start a new demo
+pnpm sweetlink demo init "How to use the search feature"
+
+# Add narrative prose
+pnpm sweetlink demo note "First, run the tests to see them pass."
+
+# Run a command and capture output inline
+pnpm sweetlink demo exec "pnpm test -- --grep search"
+
+# Take a screenshot and embed it
+pnpm sweetlink demo screenshot --url http://localhost:5173 --caption "Search results"
+
+# Capture accessibility tree
+pnpm sweetlink demo snapshot --url http://localhost:5173
+
+# Remove last section if it's wrong
+pnpm sweetlink demo pop
+
+# Re-run all commands to verify outputs haven't changed
+pnpm sweetlink demo verify
+
+# Check status
+pnpm sweetlink demo status
+```
+
+Result: a `DEMO.md` with embedded command outputs and screenshots that serves as both documentation and a regression test.
+
+### PR Evidence
+
+```bash
+pnpm sweetlink proof --pr 123
 ```
 
 ## Chrome DevTools Protocol (CDP) Setup
@@ -485,19 +706,53 @@ This 15x token savings enables 10+ autonomous iterations within Claude's budget.
 
 ## Comparison with Alternatives
 
-| Feature | Sweetlink | Playwright MCP | Manual Screenshots |
-|---------|-----------|----------------|-------------------|
-| Setup Time | < 1 min | 5-10 min | N/A |
-| Token Cost | ~1,000 | ~5,000 | N/A |
-| Auto Reconnect | ✅ | ❌ | N/A |
-| Console Logs | ✅ | ✅ | ❌ |
-| Network Requests | ✅ (CDP) | ✅ | ❌ |
-| DOM Queries | ✅ | ✅ | ❌ |
-| JS Execution | ✅ | ✅ | ❌ |
-| Click Elements | ✅ | ✅ | ❌ |
-| Element Screenshots | ✅ | ✅ | ❌ |
-| Full Page Screenshots | ✅ | ✅ | ✅ |
-| Autonomous Loops | ✅ (10+) | Limited (2-3) | ❌ |
+### Screenshot & Interaction
+
+| Feature | Sweetlink | Playwright CLI | Chrome DevTools MCP | agent-browser |
+|---------|-----------|----------------|--------------------|--------------|
+| Setup | Vite/Next plugin | npm install | Chrome flag | npm install |
+| Token cost/screenshot | ~1,000 | ~5,000 | ~5,000 | ~3,000 |
+| Fast screenshots (html2canvas) | ✅ | ❌ | ❌ | ❌ |
+| Pixel-perfect screenshots | ✅ (`--hifi`) | ✅ | ✅ | ✅ |
+| Responsive (multi-viewport) | ✅ (`--responsive`) | Manual | ❌ | ❌ |
+| Device emulation (iPhone, Pixel) | ✅ (named presets) | ✅ | ❌ | ✅ |
+| @ref element interaction | ✅ (accessibility tree) | ❌ (CSS selectors) | ❌ | ✅ (Stagehand AI) |
+| DOM queries | ✅ | ✅ | ✅ | ❌ |
+| JS execution | ✅ | ✅ | ✅ | ❌ |
+| Persistent browser sessions | ✅ (daemon) | ❌ (per-run) | ✅ | ✅ |
+
+### Evidence & Reporting
+
+| Feature | Sweetlink | ProofShot | Proof | Playwright |
+|---------|-----------|-----------|-------|------------|
+| Video recording (WebM) | ✅ | ✅ | ✅ | ✅ (trace) |
+| Interactive HTML viewer | ✅ (video + overlays) | ✅ | ✅ | ✅ (trace viewer) |
+| Click ripple overlays | ✅ (canvas) | ✅ | ✅ (FFmpeg) | ❌ |
+| Console ring buffer | ✅ (always-on, 50K) | ✅ | ❌ | ❌ |
+| Network ring buffer | ✅ (always-on, 50K) | ❌ | ❌ | ✅ (HAR) |
+| Multi-language error detection | ✅ (10+ languages) | ✅ | ❌ | ❌ |
+| Snapshot diffing (a11y tree) | ✅ | ❌ | ❌ | ❌ |
+| Annotated screenshots | ✅ (@ref labels) | ✅ | ❌ | ❌ |
+| SUMMARY.md report | ✅ | ✅ | ✅ (3 formats) | ❌ |
+| Demo documents (Showboat-style) | ✅ | ❌ | ❌ | ❌ |
+| PR evidence upload | ✅ (`proof --pr`) | ✅ | ❌ | ❌ |
+| Webhook sharing | ✅ (any URL) | ❌ | ❌ | ❌ |
+| Self-contained viewer (offline) | ✅ (base64 video) | ✅ | ✅ | ✅ |
+
+### Developer Experience
+
+| Feature | Sweetlink | ProofShot | Chrome DevTools MCP |
+|---------|-----------|-----------|---------------------|
+| Devbar toolbar UI | ✅ | ❌ | ❌ |
+| Record button in browser | ✅ | ❌ | ❌ |
+| Viewer auto-opens on stop | ✅ | ❌ | ❌ |
+| Copy Report to clipboard | ✅ (CLI + viewer) | ❌ | ❌ |
+| Serve viewer on network | ✅ (`report --serve`) | ❌ | ❌ |
+| Multi-instance (monorepo) | ✅ (per-port daemon) | ❌ | ❌ |
+| Vite/Next.js auto-start | ✅ (plugin option) | ❌ | ❌ |
+| Accessibility audit (axe-core) | ✅ | ❌ | ❌ |
+| Web Vitals | ✅ | ❌ | ❌ |
+| Ruler/measurement tool | ✅ | ❌ | ❌ |
 
 ## When to Use Alternatives
 
@@ -506,22 +761,21 @@ This 15x token savings enables 10+ autonomous iterations within Claude's budget.
 **Use Sweetlink when:**
 - You're debugging/iterating on a running dev server
 - You need lightweight, token-efficient screenshots (~1000 tokens vs ~5000)
-- You want real-time console log capture
-- Your app is already running and you just need to inspect it
+- You want always-on console/network capture without "start watching"
+- You need session recording with interactive video viewer
+- You want demo documents that serve as both tutorials and regression tests
 - You're doing autonomous UI development loops (10+ iterations)
+- You want a toolbar UI in the browser for visual debugging
 
 **Use [Agent Browser](https://github.com/vercel-labs/agent-browser) when:**
-- You need full browser automation (navigation, form filling, multi-page flows)
-- You're testing production sites or external URLs
-- Sweetlink isn't integrated into the target application
+- You're testing production sites or external URLs where Sweetlink isn't installed
 - You need Stagehand's AI-powered element selection
 - You're building autonomous agents that interact with arbitrary websites
 
-**Use Playwright MCP when:**
-- You need precise, programmatic browser control
-- You're running E2E tests with assertions
-- You need browser contexts, multiple tabs, or complex scenarios
-- You require network interception or request mocking
+**Use Playwright directly when:**
+- You're writing structured E2E test suites with assertions
+- You need network interception, request mocking, or multiple browser contexts
+- You want trace viewer for debugging test failures
 
 ### Agent Browser Quick Start
 

package/claude-skills/screenshot/SKILL.md

@@ -17,12 +17,17 @@ Sweetlink (`@ytspar/sweetlink`) is a WebSocket-based bridge that enables Claude
 ### Architecture
 
 ```
-CLI (pnpm sweetlink) <--> WebSocket (port 9223) <--> Browser (SweetlinkBridge component)
-                                                        |
-                                                   html2canvas (screenshots)
+CLI (pnpm sweetlink)
+  |
+  ├─ Fast path (WebSocket) ──> Browser (SweetlinkBridge) ──> html2canvas
+  |     screenshot, logs, exec, query, click, refresh
+  |
+  └─ HiFi path (HTTP) ──> Daemon (persistent Playwright) ──> Headless Chromium
+        screenshot --hifi, --responsive, snapshot, click @ref, fill @ref,
+        console, network --failed, record, proof
 ```
 
-Optionally, if Chrome is launched with `--remote-debugging-port=9222`, Sweetlink uses CDP (Puppeteer) for higher quality screenshots and network inspection.
+The daemon auto-starts on first `--hifi`/`snapshot` command and auto-stops after 30min idle. State file at `.sweetlink/daemon-{port}.json` (scoped per app port for multi-instance support).
 
 ### Prerequisites
 
@@ -122,17 +127,49 @@ Need screenshot or browser interaction?
             --> Use Agent-Browser (better for sequential multi-step flows)
 ```
 
+### Sweetlink v2 Daemon — Persistent Browser (Preferred for Multi-Step)
+
+Sweetlink v2 adds a persistent Playwright daemon that keeps a browser alive between commands, solving the statefulness problem. **Use daemon mode for multi-step workflows instead of Agent-Browser.**
+
+```bash
+# Pixel-perfect screenshot via persistent daemon (~150ms)
+pnpm sweetlink screenshot --hifi --url http://localhost:3000 --output .tmp/screenshots/page.png
+
+# Responsive screenshots at 3 breakpoints
+pnpm sweetlink screenshot --responsive --url http://localhost:3000
+
+# Get interactive element refs
+pnpm sweetlink snapshot -i --url http://localhost:3000
+
+# Click/fill by ref (stateful — same browser session!)
+pnpm sweetlink click @e3
+pnpm sweetlink fill @e5 "test@example.com"
+
+# Take screenshot after interaction (same browser, state preserved)
+pnpm sweetlink screenshot --hifi --output .tmp/screenshots/after-click.png
+
+# Check console errors (ring buffer — captured since daemon start)
+pnpm sweetlink console --errors
+
+# Diff accessibility tree after actions
+pnpm sweetlink snapshot -D
+
+# Annotated screenshot with ref labels
+pnpm sweetlink snapshot -a -o .tmp/screenshots/annotated.png
+
+# Stop daemon when done (or it auto-stops after 30min idle)
+pnpm sweetlink daemon stop
+```
+
 ### Known Sweetlink Limitations — Use Agent-Browser Instead
 
-These scenarios require multi-step browser state that Sweetlink cannot maintain across commands (each Sweetlink CLI call may open a fresh page):
+With the v2 daemon, most statefulness issues are resolved. These remain:
 
 | Scenario | Why Sweetlink fails | Agent-Browser approach |
 |----------|--------------------|-----------------------|
-| **Scroll then screenshot** | `exec` (scroll) and `screenshot` are separate page loads in Playwright fallback — scroll state is lost | `open` -> `scroll down` -> `screenshot` (single session) |
-| **Click then screenshot** (when click triggers navigation/animation) | Same statefulness issue — click and screenshot may not share the same page | `open` -> `click` -> `screenshot` |
-| **Multi-step interactions** (type + submit + wait for result) | Each command is stateless | `open` -> `type` -> `press Enter` -> `screenshot` |
-| **Custom viewport dimensions** (not `mobile`/`tablet` presets) | `--viewport` only supports named presets | `agent-browser open --viewport 1600x900` or use Sweetlink `--force-cdp` with preset |
-| **Verifying SVG content** (colors, icons, shapes) | html2canvas does not render SVG elements — they appear blank/missing. Fine for layout checks where SVG content doesn't matter, but wrong when the SVGs themselves are what you're verifying (e.g., icon colors, logo accuracy) | Use Sweetlink with `--force-cdp`, or `agent-browser open` -> `screenshot` |
+| **Verifying SVG content** (colors, icons, shapes) | html2canvas (fast path) does not render SVG elements — use `--hifi` or `--force-cdp` instead | Use Sweetlink with `--hifi`, or `agent-browser open` -> `screenshot` |
+| **Non-dev-server URLs** | Sweetlink requires the app to have the bridge installed | `agent-browser open` any URL |
+| **AI-powered element selection** | Sweetlink uses CSS selectors or @refs | Agent-Browser has Stagehand AI selection |
 
 > **Self-updating rule:** When you encounter a NEW Sweetlink failure mode not listed above — i.e., you try Sweetlink, it fails or produces incorrect results for a reason that would apply generally (not a transient network/server issue) — you MUST append a new row to this table before continuing with the Agent-Browser fallback. This keeps the list exhaustive and prevents future sessions from repeating the same mistake.
 
@@ -159,6 +196,8 @@ All commands use `pnpm sweetlink <command> [options]`.
 | `--viewport <size>` | Emulate viewport: `mobile`, `tablet` (requires `--force-cdp`) |
 | `--hover` | Capture hover state (requires `--selector`) |
 | `--force-cdp` | Force Chrome DevTools Protocol method (higher quality, more tokens) |
+| `--hifi` | Pixel-perfect via persistent Playwright daemon (~150ms after startup) |
+| `--responsive` | Screenshots at 3 breakpoints (375/768/1280px) via daemon |
 
 ```bash
 pnpm sweetlink screenshot --output .tmp/screenshots/full.png
@@ -246,6 +285,88 @@ pnpm sweetlink network                       # All requests
 pnpm sweetlink network --filter "/api/"      # Filter by URL pattern
 ```
 
+### snapshot — Accessibility tree with @refs (daemon)
+
+| Option | Description |
+|--------|-------------|
+| `-i`, `--interactive` | Show only interactive elements with @e refs |
+| `-D`, `--diff` | Diff against previous snapshot |
+| `-a`, `--annotate` | Annotated screenshot with ref labels |
+| `-o <path>` | Output path for annotated screenshot |
+
+```bash
+pnpm sweetlink snapshot -i --url http://localhost:3000
+pnpm sweetlink snapshot -D
+pnpm sweetlink snapshot -a -o .tmp/screenshots/annotated.png
+```
+
+### click — Click elements (supports @refs)
+
+```bash
+pnpm sweetlink click @e3                            # Click by ref (daemon)
+pnpm sweetlink click --selector "button.submit"     # Click by CSS selector (WS)
+```
+
+### fill — Fill inputs by @ref (daemon)
+
+```bash
+pnpm sweetlink fill @e5 "user@example.com"
+```
+
+### console — Console messages from ring buffer (daemon)
+
+| Option | Description |
+|--------|-------------|
+| `--errors` | Show only errors |
+| `--last <n>` | Show only last N entries |
+
+```bash
+pnpm sweetlink console --errors
+pnpm sweetlink console --last 20
+```
+
+### network --failed — Failed requests from ring buffer (daemon)
+
+```bash
+pnpm sweetlink network --failed
+```
+
+### record — Session recording (daemon)
+
+```bash
+pnpm sweetlink record start
+pnpm sweetlink record stop         # Generates viewer.html
+pnpm sweetlink record status
+```
+
+### daemon — Daemon lifecycle
+
+```bash
+pnpm sweetlink daemon status
+pnpm sweetlink daemon start --url http://localhost:3000
+pnpm sweetlink daemon start --url http://localhost:3000 --headed  # visible browser
+pnpm sweetlink daemon stop
+```
+
+### proof — Upload session evidence to GitHub PR
+
+```bash
+pnpm sweetlink proof --pr 123
+pnpm sweetlink proof --pr 123 --repo owner/repo
+```
+
+### Other useful commands
+
+```bash
+pnpm sweetlink wait --url http://localhost:3000   # Wait for server ready
+pnpm sweetlink status                              # Check server health
+pnpm sweetlink vitals                               # Get Web Vitals
+pnpm sweetlink a11y                                 # Accessibility audit
+pnpm sweetlink schema                               # Page schema (meta, OG, JSON-LD)
+pnpm sweetlink outline                              # Document heading structure
+pnpm sweetlink cleanup --force                      # Clean up Sweetlink processes
+```
+
 ## Agent-Browser Commands
 
 ### Basic Usage
@@ -336,18 +457,18 @@ pnpm sweetlink screenshot --selector ".fixed-component" --output .tmp/screenshot
 
 | Scenario | Tool | Notes |
 |----------|------|-------|
-| Screenshot of dev server page | Sweetlink (`--url`) | Single-command, preferred |
-| Screenshot after scrolling | **Agent-Browser** | Sweetlink loses scroll state between commands |
-| Check console logs | Sweetlink (`logs`) | |
+| Screenshot of dev server page | Sweetlink (`--url`) | Fast path, preferred |
+| Pixel-perfect screenshot | Sweetlink (`--hifi`) | Persistent daemon, ~150ms |
+| Responsive screenshots | Sweetlink (`--responsive`) | 3 breakpoints via daemon |
+| Click then screenshot same page | Sweetlink daemon (`click @ref` + `screenshot --hifi`) | Daemon preserves state |
+| Multi-step form interactions | Sweetlink daemon (`snapshot -i` + `fill @ref` + `click @ref`) | Refs make this easy |
+| Check console logs | Sweetlink (`console --errors`) | Ring buffer, always-on |
 | DOM queries | Sweetlink (`query`) | |
-| Click then screenshot same page | **Agent-Browser** | Sweetlink can't guarantee state between commands |
 | Navigate to specific page | Sweetlink (`--url` flag) | |
-| Verifying SVG content (icons, colors) | Sweetlink (`--force-cdp`) or **Agent-Browser** | html2canvas can't render SVGs; only matters when SVG content is what you're checking |
-| Viewport testing (mobile/tablet) | Sweetlink (`--force-cdp --viewport`) | |
-| Custom viewport dimensions | **Agent-Browser** | Sweetlink only supports named presets |
-| Non-dev-server URL | Agent-Browser | |
-| Complex multi-step form flows | Agent-Browser | |
-| Sequential type + submit + wait | Agent-Browser | |
+| Verifying SVG content (icons, colors) | Sweetlink (`--hifi`) | Daemon renders SVGs correctly |
+| Viewport testing (mobile/tablet) | Sweetlink (`--responsive` or `--hifi --viewport`) | |
+| Non-dev-server URL | Agent-Browser | Sweetlink requires bridge |
+| AI-powered element selection | Agent-Browser | Stagehand AI |
 
 ## Troubleshooting
 

package/dist/cli/outputSchemas.d.ts

@@ -89,6 +89,22 @@ export interface StatusData {
     running: boolean;
     statusCode?: number;
 }
+export interface DaemonStatusData {
+    running: boolean;
+    pid?: number;
+    port?: number;
+    url?: string;
+    uptime?: number;
+}
+export interface SnapshotData {
+    tree: string;
+    refs?: Array<{
+        ref: string;
+        role: string;
+        name: string;
+    }>;
+    diff?: string;
+}
 export declare const SCHEMAS: Record<string, string>;
 /**
  * Write a JSON envelope to stdout. Used in --json mode.

package/dist/cli/outputSchemas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"outputSchemas.d.ts","sourceRoot":"","sources":["../../src/cli/outputSchemas.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"outputSchemas.d.ts","sourceRoot":"","sources":["../../src/cli/outputSchemas.ts"],"names":[],"mappings":"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"}

package/dist/cli/outputSchemas.js

@@ -88,6 +88,39 @@ export const SCHEMAS = {
   url: string;
   running: boolean;
   statusCode?: number;
+}`,
+    daemon: `interface DaemonStatusData {
+  running: boolean;
+  pid?: number;
+  port?: number;
+  url?: string;
+  uptime?: number;
+}`,
+    snapshot: `interface SnapshotData {
+  tree: string;
+  refs?: Array<{ ref: string; role: string; name: string }>;
+  diff?: string;
+}`,
+    console: `interface ConsoleData {
+  formatted: string;
+  total: number;
+  errorCount: number;
+  warningCount: number;
+  entries: unknown[];
+}`,
+    fill: `interface FillData {
+  filled: string;
+  value: string;
+}`,
+    proof: `interface ProofData {
+  commentUrl: string;
+}`,
+    record: `interface RecordData {
+  recording: boolean;
+  sessionId?: string;
+  duration?: number;
+  actionCount?: number;
+  manifest?: unknown;
 }`,
 };
 // ============================================================================