@hasna/browser 0.4.0 → 0.4.1

package/dist/cli/index.js

@@ -28807,6 +28807,40 @@ function register6(server) {
       return err(e);
     }
   });
+  server.tool("browser_diff", "Visual diff between two URLs or a URL and a gallery entry. Screenshots both, returns a pixel diff image highlighting changes in red.", {
+    session_id: exports_external2.string().optional(),
+    url1: exports_external2.string().describe("First URL to screenshot"),
+    url2: exports_external2.string().describe("Second URL to screenshot"),
+    threshold: exports_external2.number().optional().default(10).describe("Pixel difference threshold (0-255, default 10)"),
+    wait_ms: exports_external2.number().optional().default(1000).describe("Wait time after navigation before screenshot (ms)")
+  }, async ({ session_id, url1, url2, threshold, wait_ms }) => {
+    try {
+      const sid = resolveSessionId(session_id);
+      const page = getSessionPage(sid);
+      await page.goto(url1, { waitUntil: "domcontentloaded" });
+      await new Promise((r) => setTimeout(r, wait_ms));
+      const ss1 = await takeScreenshot(page, { maxWidth: 1280, compress: true, track: false });
+      await page.goto(url2, { waitUntil: "domcontentloaded" });
+      await new Promise((r) => setTimeout(r, wait_ms));
+      const ss2 = await takeScreenshot(page, { maxWidth: 1280, compress: true, track: false });
+      const { diffImages: diffImages2 } = await Promise.resolve().then(() => (init_gallery_diff(), exports_gallery_diff));
+      const diff = await diffImages2(ss1.path, ss2.path);
+      logEvent(sid, "diff", { url1, url2, changed_percent: diff.changed_percent });
+      return json({
+        url1,
+        url2,
+        changed_pixels: diff.changed_pixels,
+        total_pixels: diff.total_pixels,
+        changed_percent: Math.round(diff.changed_percent * 100) / 100,
+        diff_path: diff.diff_path,
+        diff_base64: diff.diff_base64.length > 50000 ? undefined : diff.diff_base64,
+        screenshot1_path: ss1.path,
+        screenshot2_path: ss2.path
+      });
+    } catch (e) {
+      return err(e);
+    }
+  });
 }
 var init_capture = __esm(() => {
   init_helpers();
@@ -31942,6 +31976,53 @@ function register7(server) {
       return err(e);
     }
   });
+  server.tool("browser_performance_budget", "Check page performance against a budget. Set thresholds for LCP, FCP, CLS, TTFB, DOM complete, and load event. Returns pass/fail per metric with actual values.", {
+    session_id: exports_external2.string().optional(),
+    lcp_ms: exports_external2.number().optional().describe("Largest Contentful Paint budget in ms (good: <2500)"),
+    fcp_ms: exports_external2.number().optional().describe("First Contentful Paint budget in ms (good: <1800)"),
+    cls: exports_external2.number().optional().describe("Cumulative Layout Shift budget (good: <0.1)"),
+    ttfb_ms: exports_external2.number().optional().describe("Time to First Byte budget in ms (good: <800)"),
+    dom_complete_ms: exports_external2.number().optional().describe("DOM complete budget in ms"),
+    load_event_ms: exports_external2.number().optional().describe("Load event budget in ms"),
+    js_heap_mb: exports_external2.number().optional().describe("JS heap size budget in MB")
+  }, async ({ session_id, lcp_ms, fcp_ms, cls, ttfb_ms, dom_complete_ms, load_event_ms, js_heap_mb }) => {
+    try {
+      const sid = resolveSessionId(session_id);
+      const page = getSessionPage(sid);
+      const metrics = await getPerformanceMetrics(page);
+      const checks = [];
+      let allPassed = true;
+      const check = (name, budget, actual) => {
+        if (budget === undefined)
+          return;
+        const passed = actual !== undefined && actual <= budget;
+        if (!passed)
+          allPassed = false;
+        checks.push({ metric: name, budget, actual, passed });
+      };
+      check("lcp", lcp_ms, metrics.lcp);
+      check("fcp", fcp_ms, metrics.fcp);
+      check("cls", cls, metrics.cls);
+      check("ttfb", ttfb_ms, metrics.ttfb);
+      check("dom_complete", dom_complete_ms, metrics.dom_complete);
+      check("load_event", load_event_ms, metrics.load_event);
+      if (js_heap_mb !== undefined && metrics.js_heap_size_used !== undefined) {
+        const heapMb = metrics.js_heap_size_used / (1024 * 1024);
+        const passed = heapMb <= js_heap_mb;
+        if (!passed)
+          allPassed = false;
+        checks.push({ metric: "js_heap_mb", budget: js_heap_mb, actual: Math.round(heapMb * 100) / 100, passed });
+      }
+      return json({
+        passed: allPassed,
+        checks,
+        metrics,
+        url: page.url()
+      });
+    } catch (e) {
+      return err(e);
+    }
+  });
 }
 var init_network2 = __esm(() => {
   init_helpers();
@@ -32390,6 +32471,19 @@ function register8(server) {
       return err(e);
     }
   });
+  server.tool("browser_record_export", "Export a recording as a Playwright test (.spec.ts), Puppeteer script, or JSON. Returns the generated code as text.", {
+    recording_id: exports_external2.string().describe("ID of the recording to export"),
+    format: exports_external2.enum(["playwright", "puppeteer", "json"]).optional().default("playwright").describe("Export format")
+  }, async ({ recording_id, format }) => {
+    try {
+      const { exportRecording: exportRecording2 } = await Promise.resolve().then(() => (init_recorder(), exports_recorder));
+      const code = exportRecording2(recording_id, format);
+      const ext = format === "json" ? ".json" : format === "playwright" ? ".spec.ts" : ".js";
+      return json({ format, filename: `recording-${recording_id}${ext}`, code });
+    } catch (e) {
+      return err(e);
+    }
+  });
 }
 var init_recordings2 = __esm(() => {
   init_helpers();
@@ -47967,7 +48061,8 @@ function register10(server) {
           { tool: "browser_screenshot", description: "Take a screenshot (PNG/JPEG/WebP, annotate=true for labels)" },
           { tool: "browser_pdf", description: "Generate a PDF of the page" },
           { tool: "browser_scroll_and_screenshot", description: "Scroll then screenshot in one call" },
-          { tool: "browser_scroll_to_element", description: "Scroll element into view + screenshot" }
+          { tool: "browser_scroll_to_element", description: "Scroll element into view + screenshot" },
+          { tool: "browser_diff", description: "Visual diff between two URLs \u2014 highlights changes in red" }
         ],
         Storage: [
           { tool: "browser_cookies_get", description: "Get cookies" },
@@ -47992,7 +48087,8 @@ function register10(server) {
           { tool: "browser_intercept_clear", description: "Remove all response intercepts" }
         ],
         Performance: [
-          { tool: "browser_performance", description: "Get performance metrics" }
+          { tool: "browser_performance", description: "Get performance metrics" },
+          { tool: "browser_performance_budget", description: "Check perf against budget thresholds (LCP, FCP, CLS, TTFB)" }
         ],
         Console: [
           { tool: "browser_console_log", description: "Get console messages" },
@@ -48005,6 +48101,7 @@ function register10(server) {
           { tool: "browser_record_step", description: "Add a step to recording" },
           { tool: "browser_record_stop", description: "Stop and save recording" },
           { tool: "browser_record_replay", description: "Replay a recorded sequence" },
+          { tool: "browser_record_export", description: "Export recording as Playwright test, Puppeteer script, or JSON" },
           { tool: "browser_recordings_list", description: "List all recordings" }
         ],
         Auth: [

package/dist/mcp/capture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"capture.d.ts","sourceRoot":"","sources":["../../src/mcp/capture.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AA6BzE,wBAAgB,QAAQ,CAAC,MAAM,EAAE,SAAS,QAodzC"}
+{"version":3,"file":"capture.d.ts","sourceRoot":"","sources":["../../src/mcp/capture.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AA6BzE,wBAAgB,QAAQ,CAAC,MAAM,EAAE,SAAS,QAogBzC"}

package/dist/mcp/index.js

@@ -19493,6 +19493,63 @@ var init_agents2 = __esm(() => {
   init_agents();
 });
 
+// src/lib/gallery-diff.ts
+var exports_gallery_diff = {};
+__export(exports_gallery_diff, {
+  diffImages: () => diffImages
+});
+import { join as join11 } from "path";
+import { mkdirSync as mkdirSync9 } from "fs";
+async function diffImages(path1, path2) {
+  const img1 = import_sharp2.default(path1);
+  const img2 = import_sharp2.default(path2);
+  const [meta1, meta2] = await Promise.all([img1.metadata(), img2.metadata()]);
+  const w = Math.min(meta1.width ?? 1280, meta2.width ?? 1280);
+  const h = Math.min(meta1.height ?? 720, meta2.height ?? 720);
+  const [raw1, raw2] = await Promise.all([
+    import_sharp2.default(path1).resize(w, h, { fit: "fill" }).raw().toBuffer(),
+    import_sharp2.default(path2).resize(w, h, { fit: "fill" }).raw().toBuffer()
+  ]);
+  const totalPixels = w * h;
+  const channels = 3;
+  const diffBuffer = Buffer.alloc(raw1.length);
+  let changedPixels = 0;
+  for (let i = 0;i < raw1.length; i += channels) {
+    const dr = Math.abs(raw1[i] - raw2[i]);
+    const dg = Math.abs(raw1[i + 1] - raw2[i + 1]);
+    const db = Math.abs(raw1[i + 2] - raw2[i + 2]);
+    const diff = (dr + dg + db) / 3;
+    if (diff > 10) {
+      changedPixels++;
+      diffBuffer[i] = 255;
+      diffBuffer[i + 1] = 0;
+      diffBuffer[i + 2] = 0;
+    } else {
+      diffBuffer[i] = Math.round(raw1[i] * 0.4);
+      diffBuffer[i + 1] = Math.round(raw1[i + 1] * 0.4);
+      diffBuffer[i + 2] = Math.round(raw1[i + 2] * 0.4);
+    }
+  }
+  const dataDir = getDataDir2();
+  const diffDir = join11(dataDir, "diffs");
+  mkdirSync9(diffDir, { recursive: true });
+  const diffPath = join11(diffDir, `diff-${Date.now()}.webp`);
+  const diffImageBuffer = await import_sharp2.default(diffBuffer, { raw: { width: w, height: h, channels } }).webp({ quality: 85 }).toBuffer();
+  await Bun.write(diffPath, diffImageBuffer);
+  return {
+    diff_path: diffPath,
+    diff_base64: diffImageBuffer.toString("base64"),
+    changed_pixels: changedPixels,
+    total_pixels: totalPixels,
+    changed_percent: changedPixels / totalPixels * 100
+  };
+}
+var import_sharp2;
+var init_gallery_diff = __esm(() => {
+  init_schema();
+  import_sharp2 = __toESM(require_lib3(), 1);
+});
+
 // src/lib/profiles.ts
 var exports_profiles = {};
 __export(exports_profiles, {
@@ -43580,57 +43637,9 @@ function detectType(filename) {
   };
   return map[ext] ?? "file";
 }
-// src/lib/gallery-diff.ts
-init_schema();
-var import_sharp2 = __toESM(require_lib3(), 1);
-import { join as join11 } from "path";
-import { mkdirSync as mkdirSync9 } from "fs";
-async function diffImages(path1, path2) {
-  const img1 = import_sharp2.default(path1);
-  const img2 = import_sharp2.default(path2);
-  const [meta1, meta2] = await Promise.all([img1.metadata(), img2.metadata()]);
-  const w = Math.min(meta1.width ?? 1280, meta2.width ?? 1280);
-  const h = Math.min(meta1.height ?? 720, meta2.height ?? 720);
-  const [raw1, raw2] = await Promise.all([
-    import_sharp2.default(path1).resize(w, h, { fit: "fill" }).raw().toBuffer(),
-    import_sharp2.default(path2).resize(w, h, { fit: "fill" }).raw().toBuffer()
-  ]);
-  const totalPixels = w * h;
-  const channels = 3;
-  const diffBuffer = Buffer.alloc(raw1.length);
-  let changedPixels = 0;
-  for (let i = 0;i < raw1.length; i += channels) {
-    const dr = Math.abs(raw1[i] - raw2[i]);
-    const dg = Math.abs(raw1[i + 1] - raw2[i + 1]);
-    const db = Math.abs(raw1[i + 2] - raw2[i + 2]);
-    const diff = (dr + dg + db) / 3;
-    if (diff > 10) {
-      changedPixels++;
-      diffBuffer[i] = 255;
-      diffBuffer[i + 1] = 0;
-      diffBuffer[i + 2] = 0;
-    } else {
-      diffBuffer[i] = Math.round(raw1[i] * 0.4);
-      diffBuffer[i + 1] = Math.round(raw1[i + 1] * 0.4);
-      diffBuffer[i + 2] = Math.round(raw1[i + 2] * 0.4);
-    }
-  }
-  const dataDir = getDataDir2();
-  const diffDir = join11(dataDir, "diffs");
-  mkdirSync9(diffDir, { recursive: true });
-  const diffPath = join11(diffDir, `diff-${Date.now()}.webp`);
-  const diffImageBuffer = await import_sharp2.default(diffBuffer, { raw: { width: w, height: h, channels } }).webp({ quality: 85 }).toBuffer();
-  await Bun.write(diffPath, diffImageBuffer);
-  return {
-    diff_path: diffPath,
-    diff_base64: diffImageBuffer.toString("base64"),
-    changed_pixels: changedPixels,
-    total_pixels: totalPixels,
-    changed_percent: changedPixels / totalPixels * 100
-  };
-}
 
 // src/mcp/helpers.ts
+init_gallery_diff();
 init_snapshot();
 
 // src/lib/files-integration.ts
@@ -44879,6 +44888,40 @@ function register3(server) {
       return err(e);
     }
   });
+  server.tool("browser_diff", "Visual diff between two URLs or a URL and a gallery entry. Screenshots both, returns a pixel diff image highlighting changes in red.", {
+    session_id: exports_external.string().optional(),
+    url1: exports_external.string().describe("First URL to screenshot"),
+    url2: exports_external.string().describe("Second URL to screenshot"),
+    threshold: exports_external.number().optional().default(10).describe("Pixel difference threshold (0-255, default 10)"),
+    wait_ms: exports_external.number().optional().default(1000).describe("Wait time after navigation before screenshot (ms)")
+  }, async ({ session_id, url1, url2, threshold, wait_ms }) => {
+    try {
+      const sid = resolveSessionId(session_id);
+      const page = getSessionPage(sid);
+      await page.goto(url1, { waitUntil: "domcontentloaded" });
+      await new Promise((r) => setTimeout(r, wait_ms));
+      const ss1 = await takeScreenshot(page, { maxWidth: 1280, compress: true, track: false });
+      await page.goto(url2, { waitUntil: "domcontentloaded" });
+      await new Promise((r) => setTimeout(r, wait_ms));
+      const ss2 = await takeScreenshot(page, { maxWidth: 1280, compress: true, track: false });
+      const { diffImages: diffImages2 } = await Promise.resolve().then(() => (init_gallery_diff(), exports_gallery_diff));
+      const diff = await diffImages2(ss1.path, ss2.path);
+      logEvent(sid, "diff", { url1, url2, changed_percent: diff.changed_percent });
+      return json({
+        url1,
+        url2,
+        changed_pixels: diff.changed_pixels,
+        total_pixels: diff.total_pixels,
+        changed_percent: Math.round(diff.changed_percent * 100) / 100,
+        diff_path: diff.diff_path,
+        diff_base64: diff.diff_base64.length > 50000 ? undefined : diff.diff_base64,
+        screenshot1_path: ss1.path,
+        screenshot2_path: ss2.path
+      });
+    } catch (e) {
+      return err(e);
+    }
+  });
 }
 
 // src/mcp/network.ts
@@ -45223,6 +45266,53 @@ function register4(server) {
       return err(e);
     }
   });
+  server.tool("browser_performance_budget", "Check page performance against a budget. Set thresholds for LCP, FCP, CLS, TTFB, DOM complete, and load event. Returns pass/fail per metric with actual values.", {
+    session_id: exports_external.string().optional(),
+    lcp_ms: exports_external.number().optional().describe("Largest Contentful Paint budget in ms (good: <2500)"),
+    fcp_ms: exports_external.number().optional().describe("First Contentful Paint budget in ms (good: <1800)"),
+    cls: exports_external.number().optional().describe("Cumulative Layout Shift budget (good: <0.1)"),
+    ttfb_ms: exports_external.number().optional().describe("Time to First Byte budget in ms (good: <800)"),
+    dom_complete_ms: exports_external.number().optional().describe("DOM complete budget in ms"),
+    load_event_ms: exports_external.number().optional().describe("Load event budget in ms"),
+    js_heap_mb: exports_external.number().optional().describe("JS heap size budget in MB")
+  }, async ({ session_id, lcp_ms, fcp_ms, cls, ttfb_ms, dom_complete_ms, load_event_ms, js_heap_mb }) => {
+    try {
+      const sid = resolveSessionId(session_id);
+      const page = getSessionPage(sid);
+      const metrics = await getPerformanceMetrics(page);
+      const checks = [];
+      let allPassed = true;
+      const check = (name, budget, actual) => {
+        if (budget === undefined)
+          return;
+        const passed = actual !== undefined && actual <= budget;
+        if (!passed)
+          allPassed = false;
+        checks.push({ metric: name, budget, actual, passed });
+      };
+      check("lcp", lcp_ms, metrics.lcp);
+      check("fcp", fcp_ms, metrics.fcp);
+      check("cls", cls, metrics.cls);
+      check("ttfb", ttfb_ms, metrics.ttfb);
+      check("dom_complete", dom_complete_ms, metrics.dom_complete);
+      check("load_event", load_event_ms, metrics.load_event);
+      if (js_heap_mb !== undefined && metrics.js_heap_size_used !== undefined) {
+        const heapMb = metrics.js_heap_size_used / (1024 * 1024);
+        const passed = heapMb <= js_heap_mb;
+        if (!passed)
+          allPassed = false;
+        checks.push({ metric: "js_heap_mb", budget: js_heap_mb, actual: Math.round(heapMb * 100) / 100, passed });
+      }
+      return json({
+        passed: allPassed,
+        checks,
+        metrics,
+        url: page.url()
+      });
+    } catch (e) {
+      return err(e);
+    }
+  });
 }
 
 // src/mcp/recordings.ts
@@ -45397,6 +45487,19 @@ function register5(server) {
       return err(e);
     }
   });
+  server.tool("browser_record_export", "Export a recording as a Playwright test (.spec.ts), Puppeteer script, or JSON. Returns the generated code as text.", {
+    recording_id: exports_external.string().describe("ID of the recording to export"),
+    format: exports_external.enum(["playwright", "puppeteer", "json"]).optional().default("playwright").describe("Export format")
+  }, async ({ recording_id, format }) => {
+    try {
+      const { exportRecording: exportRecording2 } = await Promise.resolve().then(() => (init_recorder(), exports_recorder));
+      const code = exportRecording2(recording_id, format);
+      const ext = format === "json" ? ".json" : format === "playwright" ? ".spec.ts" : ".js";
+      return json({ format, filename: `recording-${recording_id}${ext}`, code });
+    } catch (e) {
+      return err(e);
+    }
+  });
 }
 
 // src/mcp/scripts.ts
@@ -45809,7 +45912,8 @@ function register7(server) {
           { tool: "browser_screenshot", description: "Take a screenshot (PNG/JPEG/WebP, annotate=true for labels)" },
           { tool: "browser_pdf", description: "Generate a PDF of the page" },
           { tool: "browser_scroll_and_screenshot", description: "Scroll then screenshot in one call" },
-          { tool: "browser_scroll_to_element", description: "Scroll element into view + screenshot" }
+          { tool: "browser_scroll_to_element", description: "Scroll element into view + screenshot" },
+          { tool: "browser_diff", description: "Visual diff between two URLs \u2014 highlights changes in red" }
         ],
         Storage: [
           { tool: "browser_cookies_get", description: "Get cookies" },
@@ -45834,7 +45938,8 @@ function register7(server) {
           { tool: "browser_intercept_clear", description: "Remove all response intercepts" }
         ],
         Performance: [
-          { tool: "browser_performance", description: "Get performance metrics" }
+          { tool: "browser_performance", description: "Get performance metrics" },
+          { tool: "browser_performance_budget", description: "Check perf against budget thresholds (LCP, FCP, CLS, TTFB)" }
         ],
         Console: [
           { tool: "browser_console_log", description: "Get console messages" },
@@ -45847,6 +45952,7 @@ function register7(server) {
           { tool: "browser_record_step", description: "Add a step to recording" },
           { tool: "browser_record_stop", description: "Stop and save recording" },
           { tool: "browser_record_replay", description: "Replay a recorded sequence" },
+          { tool: "browser_record_export", description: "Export recording as Playwright test, Puppeteer script, or JSON" },
           { tool: "browser_recordings_list", description: "List all recordings" }
         ],
         Auth: [

package/dist/mcp/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/mcp/meta.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AA8CzE,wBAAgB,QAAQ,CAAC,MAAM,EAAE,SAAS,QAk7BzC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/mcp/meta.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AA8CzE,wBAAgB,QAAQ,CAAC,MAAM,EAAE,SAAS,QAq7BzC"}

package/dist/mcp/network.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"network.d.ts","sourceRoot":"","sources":["../../src/mcp/network.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAiCzE,wBAAgB,QAAQ,CAAC,MAAM,EAAE,SAAS,QA6czC"}
+{"version":3,"file":"network.d.ts","sourceRoot":"","sources":["../../src/mcp/network.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAiCzE,wBAAgB,QAAQ,CAAC,MAAM,EAAE,SAAS,QAmgBzC"}

package/dist/mcp/recordings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"recordings.d.ts","sourceRoot":"","sources":["../../src/mcp/recordings.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAkBzE,wBAAgB,QAAQ,CAAC,MAAM,EAAE,SAAS,QA8OzC"}
+{"version":3,"file":"recordings.d.ts","sourceRoot":"","sources":["../../src/mcp/recordings.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAkBzE,wBAAgB,QAAQ,CAAC,MAAM,EAAE,SAAS,QAiQzC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hasna/browser",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "General-purpose browser agent toolkit — Playwright, Chrome DevTools Protocol, Lightpanda with auto engine selection. CLI + MCP + REST + SDK.",
   "type": "module",
   "main": "dist/index.js",