@ulpi/browse 0.3.0 → 0.4.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Ciprian Hacman
+Copyright (c) 2026 Open Growth Group INC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -116,6 +116,7 @@ Every detected element gets a ref. `browse click @e3` just works.
 | State persistence | Not available | `state save\|load` |
 | Credential vault | Not available | `auth save\|login\|list` |
 | HAR recording | Not available | `har start\|stop` |
+| Video recording | Not available | `video start [dir]\|stop\|status` |
 | Clipboard access | Not available | `clipboard [write <text>]` |
 | Element finding | Not available | `find role\|text\|label\|placeholder\|testid` |
 | DevTools inspect | Not available | `inspect` |
@@ -291,7 +292,7 @@ echo '[["goto","https://example.com"],["text"]]' | browse chain
 `state save [name]` | `state load [name]` | `state list` | `state show [name]` | `auth save <name> <url> <user> <pass>` | `auth login <name>` | `auth list` | `auth delete <name>`
 
 ### Recording
-`har start` | `har stop [path]`
+`har start` | `har stop [path]` | `video start [dir]` | `video stop` | `video status`
 
 ### Debug
 `inspect` — open DevTools debugger (requires `BROWSE_DEBUG_PORT`).
@@ -384,6 +385,7 @@ Inspired by and originally derived from the `/browse` skill in [gstack](https://
 - `offline on/off` — offline mode toggle
 - `state save/load` — persist and restore cookies + localStorage (all origins)
 - `har start/stop` — HAR recording and export
+- `video start/stop/status` — video recording (WebM, compositor-level, works with remote CDP)
 - `screenshot-diff` — pixel-level visual regression testing
 - `find role/text/label/placeholder/testid` — semantic element locators
 

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@ulpi/browse",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/ulpi-io/browse"
   },
   "dependencies": {
+    "@ulpi/browse": "^0.3.0",
     "diff": "^7.0.0",
     "playwright": "^1.58.2"
   },
@@ -38,7 +39,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "bun build --compile --external electron --external chromium-bidi src/cli.ts --outfile dist/browse",
+    "build": "bun build --compile --external electron --external chromium-bidi src/cli.ts --outfile dist/browse && rm -f .*.bun-build",
     "build:all": "bash scripts/build-all.sh",
     "dev": "bun run src/cli.ts",
     "server": "bun run src/server.ts",

package/src/browser-manager.ts

@@ -167,6 +167,9 @@ export class BrowserManager {
   // ─── HAR Recording ────────────────────────────────────────
   private harRecording: HarRecording | null = null;
 
+  // ─── Video Recording ────────────────────────────────────────
+  private videoRecording: { dir: string; startedAt: number } | null = null;
+
   // ─── Init Script (domain filter JS injection) ─────────────
   private initScript: string | null = null;
 
@@ -553,6 +556,17 @@ export class BrowserManager {
   private async recreateContext(contextOptions: Record<string, any>): Promise<void> {
     if (!this.browser) return;
 
+    // Auto-inject recordVideo when video recording is active (so emulateDevice/applyUserAgent pass it through)
+    if (this.videoRecording && !contextOptions.recordVideo) {
+      contextOptions = {
+        ...contextOptions,
+        recordVideo: {
+          dir: this.videoRecording.dir,
+          size: contextOptions.viewport || this.currentDevice?.viewport || { width: 1920, height: 1080 },
+        },
+      };
+    }
+
     // Save all tab URLs and which tab was active
     const tabUrls: Array<{ id: number; url: string; active: boolean }> = [];
     for (const [id, page] of this.pages) {
@@ -766,6 +780,67 @@ export class BrowserManager {
     return this.harRecording;
   }
 
+  // ─── Video Recording ──────────────────────────────────────
+
+  async startVideoRecording(dir: string): Promise<void> {
+    if (this.videoRecording) throw new Error('Video recording already active');
+    const fs = await import('fs');
+    fs.mkdirSync(dir, { recursive: true });
+
+    this.videoRecording = { dir, startedAt: Date.now() };
+    const viewport = this.currentDevice?.viewport || { width: 1920, height: 1080 };
+    await this.recreateContext({
+      viewport,
+      ...(this.customUserAgent ? { userAgent: this.customUserAgent } : {}),
+      ...(this.currentDevice ? {
+        deviceScaleFactor: this.currentDevice.deviceScaleFactor,
+        isMobile: this.currentDevice.isMobile,
+        hasTouch: this.currentDevice.hasTouch,
+      } : {}),
+      recordVideo: { dir, size: viewport },
+    });
+  }
+
+  async stopVideoRecording(): Promise<{ dir: string; startedAt: number; paths: string[] } | null> {
+    if (!this.videoRecording) return null;
+
+    const recording = this.videoRecording;
+    // Collect video objects before pages are closed by recreateContext
+    const videos: Array<{ video: any; tabId: number }> = [];
+    for (const [id, page] of this.pages) {
+      const video = page.video();
+      if (video) videos.push({ video, tabId: id });
+    }
+
+    // Clear state BEFORE recreateContext so auto-injection doesn't add recordVideo
+    this.videoRecording = null;
+
+    const viewport = this.currentDevice?.viewport || { width: 1920, height: 1080 };
+    await this.recreateContext({
+      viewport,
+      ...(this.customUserAgent ? { userAgent: this.customUserAgent } : {}),
+      ...(this.currentDevice ? {
+        deviceScaleFactor: this.currentDevice.deviceScaleFactor,
+        isMobile: this.currentDevice.isMobile,
+        hasTouch: this.currentDevice.hasTouch,
+      } : {}),
+    });
+
+    // Save videos with predictable names (saveAs works for both local and remote CDP)
+    const paths: string[] = [];
+    for (const { video, tabId } of videos) {
+      const target = `${recording.dir}/tab-${tabId}.webm`;
+      await video.saveAs(target);
+      paths.push(target);
+    }
+
+    return { dir: recording.dir, startedAt: recording.startedAt, paths };
+  }
+
+  getVideoRecording(): { dir: string; startedAt: number } | null {
+    return this.videoRecording;
+  }
+
   // ─── Init Script ───────────────────────────────────────────
   setInitScript(script: string): void {
     this.initScript = script;

package/src/cli.ts

@@ -612,6 +612,7 @@ Compare:        diff <url1> <url2> | screenshot-diff <baseline> [current]
 Multi-step:     chain (reads JSON from stdin)
 Network:        offline [on|off] | route <pattern> block|fulfill
 Recording:      har start | har stop [path]
+                video start [dir] | video stop | video status
 Tabs:           tabs | tab <id> | newtab [url] | closetab [id]
 Frames:         frame <sel> | frame main
 Sessions:       sessions | session-close <id>

package/src/commands/meta.ts

@@ -619,6 +619,36 @@ export async function handleMetaCommand(
       throw new Error('Usage: browse har start | browse har stop [path]');
     }
 
+    // ─── Video Recording ─────────────────────────────────
+    case 'video': {
+      const subcommand = args[0];
+      if (!subcommand) throw new Error('Usage: browse video start [dir] | browse video stop | browse video status');
+
+      if (subcommand === 'start') {
+        const dir = args[1] || (currentSession
+          ? `${currentSession.outputDir}`
+          : `${LOCAL_DIR}`);
+        await bm.startVideoRecording(dir);
+        return `Video recording started — output dir: ${dir}`;
+      }
+
+      if (subcommand === 'stop') {
+        const result = await bm.stopVideoRecording();
+        if (!result) throw new Error('No active video recording. Run "browse video start" first.');
+        const duration = ((Date.now() - result.startedAt) / 1000).toFixed(1);
+        return `Video saved: ${result.paths.join(', ')} (${duration}s)`;
+      }
+
+      if (subcommand === 'status') {
+        const recording = bm.getVideoRecording();
+        if (!recording) return 'No active video recording';
+        const duration = ((Date.now() - recording.startedAt) / 1000).toFixed(1);
+        return `Video recording active — dir: ${recording.dir}, duration: ${duration}s`;
+      }
+
+      throw new Error('Usage: browse video start [dir] | browse video stop | browse video status');
+    }
+
     // ─── Semantic Locator ──────────────────────────────
     case 'find': {
       const root = bm.getLocatorRoot();

package/src/server.ts

@@ -129,7 +129,7 @@ const META_COMMANDS = new Set([
   'url', 'snapshot', 'snapshot-diff', 'screenshot-diff',
   'sessions', 'session-close',
   'frame', 'state', 'find',
-  'auth', 'har', 'inspect',
+  'auth', 'har', 'video', 'inspect',
 ]);
 
 // Probe if a port is free using net.createServer (not Bun.serve which fatally crashes on EADDRINUSE)