@ulpi/browse 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulpi/browse",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/ulpi-io/browse"

package/skill/SKILL.md

@@ -1,19 +1,19 @@
 ---
 name: browse
-version: 2.0.0
+version: 2.3.0
 description: |
-  Fast web browsing for Claude Code via persistent headless Chromium daemon. Navigate to any URL,
+  Fast web browsing for AI coding agents via persistent headless Chromium daemon. Navigate to any URL,
   read page content, click elements, fill forms, run JavaScript, take screenshots,
   inspect CSS/DOM, capture console/network logs, and more. ~100ms per command after
-  first call. Use when you need to check a website, verify a deployment, read docs,
-  or interact with any web page. No MCP, no Chrome extension — just fast CLI.
+  first call. Works with Claude Code, Cursor, Cline, Windsurf, and any agent that can run Bash.
+  No MCP, no Chrome extension — just fast CLI.
 allowed-tools:
   - Bash
   - Read
 
 ---
 
-# browse: Persistent Browser for Claude Code
+# browse: Persistent Browser for AI Coding Agents
 
 Persistent headless Chromium daemon. First call auto-starts the server (~3s).
 Every subsequent call: ~100-200ms. Auto-shuts down after 30 min idle.
@@ -74,7 +74,7 @@ If the file is missing or does not contain browse permission rules in `permissio
 "Bash(browse newtab:*)", "Bash(browse closetab:*)",
 "Bash(browse frame:*)",
 "Bash(browse sessions:*)", "Bash(browse session-close:*)",
-"Bash(browse state:*)", "Bash(browse auth:*)", "Bash(browse har:*)",
+"Bash(browse state:*)", "Bash(browse auth:*)", "Bash(browse har:*)", "Bash(browse video:*)",
 "Bash(browse route:*)", "Bash(browse offline:*)",
 "Bash(browse status:*)", "Bash(browse stop:*)", "Bash(browse restart:*)",
 "Bash(browse cookie:*)", "Bash(browse header:*)",
@@ -197,6 +197,12 @@ browse har start
 browse goto https://example.com
 browse har stop ./recording.har
 
+# Video recording
+browse video start ./videos
+browse goto https://example.com
+browse click @e3
+browse video stop
+
 # Device emulation
 browse emulate iphone
 browse emulate reset
@@ -325,7 +331,8 @@ browse clipboard write <text>  Write text to system clipboard
 
 ### Visual
 ```
-browse screenshot [path]              Screenshot (default: .browse/sessions/{id}/screenshot.png)
+browse screenshot [path]              Viewport screenshot (default: .browse/sessions/{id}/screenshot.png)
+browse screenshot --full [path]       Full-page screenshot (entire scrollable page)
 browse screenshot --annotate [path]   Screenshot with numbered badges + legend
 browse pdf [path]                     Save as PDF
 browse responsive [prefix]            Screenshots at mobile/tablet/desktop
@@ -394,6 +401,13 @@ browse har start               Start recording network traffic
 browse har stop [path]         Stop and save HAR file
 ```
 
+### Video recording
+```
+browse video start [dir]       Start recording video (WebM, compositor-level)
+browse video stop              Stop recording and save video files
+browse video status            Check if recording is active
+```
+
 ### Server management
 ```
 browse status                  Server health, uptime, session count
@@ -454,6 +468,7 @@ browse inspect                 Open DevTools (requires BROWSE_DEBUG_PORT)
 | Save/restore session | `state save mysite` / `state load mysite` |
 | Auto-login | `auth save gh https://github.com/login user pass` → `auth login gh` |
 | Record network | `har start` → browse around → `har stop ./out.har` |
+| Record video | `video start ./vids` → browse around → `video stop` |
 | Parallel agents | `--session agent-a <cmd>` / `--session agent-b <cmd>` |
 | Multi-step flow | `echo '[...]' \| browse chain` |
 | Secure browsing | `--allowed-domains example.com goto https://example.com` |

package/src/cli.ts

@@ -605,7 +605,7 @@ Inspection:     js <expr> | eval <file> | css <sel> <prop> | attrs <sel>
                 element-state <sel> | console [--clear] | network [--clear]
                 cookies | storage [set <k> <v>] | perf
                 value <sel> | count <sel> | clipboard [write <text>]
-Visual:         screenshot [path] | pdf [path] | responsive [prefix]
+Visual:         screenshot [path] [--full] [--annotate] | pdf [path] | responsive [prefix]
 Snapshot:       snapshot [-i] [-c] [-C] [-d N] [-s sel]
 Find:           find role|text|label|placeholder|testid <query> [name]
 Compare:        diff <url1> <url2> | screenshot-diff <baseline> [current]

package/src/commands/meta.ts

@@ -218,7 +218,8 @@ export async function handleMetaCommand(
     case 'screenshot': {
       const page = bm.getPage();
       const annotate = args.includes('--annotate');
-      const filteredArgs = args.filter(a => a !== '--annotate');
+      const isFullPage = args.includes('--full');
+      const filteredArgs = args.filter(a => a !== '--annotate' && a !== '--full');
       const screenshotPath = filteredArgs[0] || (currentSession ? `${currentSession.outputDir}/screenshot.png` : `${LOCAL_DIR}/browse-screenshot.png`);
 
       if (annotate) {
@@ -278,7 +279,7 @@ export async function handleMetaCommand(
             document.body.appendChild(container);
           }, badges);
 
-          await page.screenshot({ path: screenshotPath, fullPage: true });
+          await page.screenshot({ path: screenshotPath, fullPage: isFullPage });
         } finally {
           await page.evaluate(() => {
             document.getElementById('__browse_annotate__')?.remove();
@@ -288,7 +289,7 @@ export async function handleMetaCommand(
         return `Screenshot saved: ${screenshotPath}\n\nLegend:\n${legend.join('\n')}`;
       }
 
-      await page.screenshot({ path: screenshotPath, fullPage: true });
+      await page.screenshot({ path: screenshotPath, fullPage: isFullPage });
       return `Screenshot saved: ${screenshotPath}`;
     }
 
@@ -481,14 +482,16 @@ export async function handleMetaCommand(
 
     // ─── Screenshot Diff ──────────────────────────────
     case 'screenshot-diff': {
-      const baseline = args[0];
-      if (!baseline) throw new Error('Usage: browse screenshot-diff <baseline> [current] [--threshold 0.1]');
+      const isFullPageDiff = args.includes('--full');
+      const diffArgs = args.filter(a => a !== '--full');
+      const baseline = diffArgs[0];
+      if (!baseline) throw new Error('Usage: browse screenshot-diff <baseline> [current] [--threshold 0.1] [--full]');
       if (!fs.existsSync(baseline)) throw new Error(`Baseline file not found: ${baseline}`);
 
       let thresholdPct = 0.1;
-      const threshIdx = args.indexOf('--threshold');
-      if (threshIdx !== -1 && args[threshIdx + 1]) {
-        thresholdPct = parseFloat(args[threshIdx + 1]);
+      const threshIdx = diffArgs.indexOf('--threshold');
+      if (threshIdx !== -1 && diffArgs[threshIdx + 1]) {
+        thresholdPct = parseFloat(diffArgs[threshIdx + 1]);
       }
 
       const baselineBuffer = fs.readFileSync(baseline);
@@ -496,16 +499,16 @@ export async function handleMetaCommand(
       // Find optional current image path: any non-flag arg after baseline
       let currentBuffer: Buffer;
       let currentPath: string | undefined;
-      for (let i = 1; i < args.length; i++) {
-        if (args[i] === '--threshold') { i++; continue; }
-        if (!args[i].startsWith('--')) { currentPath = args[i]; break; }
+      for (let i = 1; i < diffArgs.length; i++) {
+        if (diffArgs[i] === '--threshold') { i++; continue; }
+        if (!diffArgs[i].startsWith('--')) { currentPath = diffArgs[i]; break; }
       }
       if (currentPath) {
         if (!fs.existsSync(currentPath)) throw new Error(`Current screenshot not found: ${currentPath}`);
         currentBuffer = fs.readFileSync(currentPath);
       } else {
         const page = bm.getPage();
-        currentBuffer = await page.screenshot({ fullPage: true }) as Buffer;
+        currentBuffer = await page.screenshot({ fullPage: isFullPageDiff }) as Buffer;
       }
 
       const { compareScreenshots } = await import('../png-compare');