pi-browser-harness 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to pi-browser-harness will be documented in this file.
 
+## 0.3.2 — 2026-05-05
+
+### Added
+
+- **Parallel tool execution with automatic mutation serialization.** Observation tools (`browser_screenshot`, `browser_page_info`, `browser_execute_js`, `browser_list_tabs`, `browser_http_get` etc.) can now run in parallel with each other and with mutation tools. Mutation tools (`browser_click`, `browser_type`, `browser_scroll`, `browser_navigate`, `browser_switch_tab`, etc.) are automatically serialized through a shared async mutex so they never race on shared CDP session/page state. LLMs can emit independent operations in the same turn for better latency.
+- **New `src/util/mutex.ts`** — lightweight async mutex (~25 LOC) with FIFO queue. `serialized?: boolean` flag added to `BrowserToolDefinition`; `mutationMutex()` exposed on `BrowserClient`.
+- **Prompt and SKILL.md** updated with parallel-execution guidance and safe-parallel-call examples.
+
+### Fixed
+
+- **Scroll tool deltaY sign convention corrected.** Previously `deltaY` was documented as positive=up (inverted vs W3C wheel events). Now follows the W3C convention: positive=down, negative=up. Default changed from `-300` to `300` (scroll down). Prompt snippets, tool descriptions, and guidelines all updated.
+- **Scroll tool now calls `Page.bringToFront`** before dispatching mouse events, preventing silent-drop when the target page is not the active browser tab. Mouse events now include explicit `button:"none"`, `buttons:0`, `pointerType:"mouse"`.
+- **Screenshot TUI render no longer crashes the host on long file paths.** The `Image` text-fallback render did not respect terminal width, so a long path could overflow and crash the host TUI. Each rendered line is now truncated with `truncateToWidth` to fit the available width.
+
 ## 0.3.1 — 2026-05-02
 
 ### Bug fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-browser-harness",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Browser control extension for pi — navigate, click, type, screenshot, and extract data from real Chrome via CDP",
   "keywords": [
     "pi-package",

package/skills/pi-browser-harness/SKILL.md

@@ -32,6 +32,50 @@ browser_screenshot() → browser_click(x, y) → browser_screenshot()
 Compositor-level clicks (`Input.dispatchMouseEvent`) work through iframes, shadow DOM,
 and cross-origin content. No selectors needed.
 
+## Parallelization
+
+**Always parallelize when possible.** The harness automatically serializes mutation tools so they never race on shared state. Emit independent tools in the same turn for better performance.
+
+### What can run in parallel
+
+- **Observation tools** (`browser_screenshot`, `browser_page_info`, `browser_execute_js`, `browser_list_tabs`, `browser_current_tab`, `browser_http_get`, `browser_print_to_pdf`) can run in parallel with each other and with mutation tools.
+
+- **Opening result pages:** Use `browser_open_urls` to open multiple URLs in parallel tabs. After opening, use `browser_list_tabs` to see the new tabs and `browser_switch_tab` to visit each one.
+
+- **API calls:** `browser_http_get` calls are independent of browser state — fire multiple GETs in parallel.
+
+- **Read + browser tools:** Use `read` and `browser_*` tools in the same turn — reading files or previous results is independent of browser actions.
+
+### What must be sequential (harness enforces this)
+
+- **Mutation tools** (`click`, `type`, `scroll`, `navigate`, `switch_tab`, `press_key`, `drag_and_drop`, `upload_file`, `go_back`, `go_forward`, `reload`, `handle_dialog`, `viewport_resize`, `wait_for_load`, `download`) are automatically queued through a mutex. Even if you emit them in parallel, they execute serially in FIFO order. You do not need to worry about race conditions.
+
+- **Tab switching then acting:** `browser_switch_tab` must complete before acting on the switched-to tab. This is enforced automatically.
+
+### Pattern: Parallel research across tabs
+
+```
+# Step 1: Open all result pages at once
+browser_open_urls(["url1", "url2", "url3"])
+
+# Step 2: Wait for them to load, then extract in parallel
+browser_list_tabs()  # get targetIds
+
+# Step 3: Extract data from each tab (parallel)
+browser_switch_tab(targetId1) → browser_screenshot()   # These are sequential per tab
+browser_switch_tab(targetId2) → browser_execute_js(...) # but you batch switch+act
+```
+
+### Pattern: Parallel observation + mutation
+
+```
+# Fire observation tools while a mutation is in progress
+browser_click(x, y)                           # mutation (queued)
+browser_screenshot()                            # observation (runs immediately in parallel)
+browser_page_info()                             # observation (runs immediately in parallel)
+browser_http_get("https://api.example.com")    # external (runs immediately in parallel)
+```
+
 ## Available Tools
 
 ### Navigation
@@ -49,7 +93,7 @@ and cross-origin content. No selectors needed.
 - `browser_scroll` — scroll the page at coordinates
 
 ### Visual
-- `browser_screenshot` — capture PNG screenshot
+- `browser_screenshot` — capture PNG or JPEG screenshot (rendered inline in the TUI)
 
 ### Data Extraction
 - `browser_execute_js` — execute JavaScript and return result
@@ -86,8 +130,9 @@ browser_http_get("https://api.example.com/data")
 
 ### Scrolling
 ```
-browser_screenshot() → browser_scroll({ deltaY: -500 }) → browser_screenshot()
+browser_screenshot() → browser_scroll({ deltaY: 500 }) → browser_screenshot()
 ```
+Note: deltaY follows W3C wheel-event convention: positive=down, negative=up. Default deltaY=300 scrolls down.
 
 ### Research (search engine + browser_open_urls)
 ```

package/src/client.ts

@@ -1,5 +1,6 @@
 import { type Result, err, ok } from "./util/result";
 import { safeJs } from "./util/js-template";
+import { type Mutex, createMutex } from "./util/mutex";
 import { discoverWsUrl } from "./cdp/discovery";
 import { type CdpError, cdpError } from "./cdp/errors";
 import type { CdpTransport } from "./cdp/transport";
@@ -27,6 +28,9 @@ export type BrowserClient = {
   current(): { readonly sessionId: string; readonly targetId: string } | null;
   session(): CdpSession;
   transport(): CdpTransport;
+  /** Returns the shared async mutex that serialized browser tools must acquire
+   *  before performing mutations. Observation tools should not use this. */
+  mutationMutex(): Mutex;
 };
 
 const HEALTH_TTL_MS = 30_000;
@@ -63,6 +67,7 @@ const parsePageInfoPayload = (v: unknown): Result<PageInfo, CdpError> => {
 export const createBrowserClient = (opts: BrowserClientOptions): BrowserClient => {
   const transport = createCdpTransport();
   const session = createCdpSession(transport);
+  const mutationMutex = createMutex();
   let lastHealth = 0;
   let pageCache: { readonly info: PageInfo; readonly at: number } | null = null;
   let remote: BrowserClientOptions["remote"] | null = opts.remote ?? null;
@@ -228,5 +233,6 @@ export const createBrowserClient = (opts: BrowserClientOptions): BrowserClient =
     current: () => session.current(),
     session: () => session,
     transport: () => transport,
+    mutationMutex: () => mutationMutex,
   };
 };

package/src/domains/screenshot.ts

@@ -1,5 +1,7 @@
+import { readFileSync } from "node:fs";
 import { writeFile, rename } from "node:fs/promises";
 import { Type } from "typebox";
+import { Image, type ImageTheme, Text, truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
 import type { BrowserClient } from "../client";
 import { type Result, err, ok } from "../util/result";
 import { defineBrowserTool, type ToolErr, type ToolOk } from "../util/tool";
@@ -82,6 +84,40 @@ export const screenshotTool = defineBrowserTool({
       details: { path: cap.data.path, format: cap.data.format, attached: false },
     });
   },
+
+  renderResult(result, _expanded, theme) {
+    const details = result.details as { path?: string; format?: string } | undefined;
+    const filePath = details?.path;
+    if (!filePath) {
+      return new Text(theme.fg("error", "Screenshot path missing"), 0, 0);
+    }
+    try {
+      const buf = readFileSync(filePath);
+      const b64 = buf.toString("base64");
+      const mimeType = details?.format === "jpeg" ? "image/jpeg" : "image/png";
+      const imageTheme: ImageTheme = {
+        fallbackColor: (str: string) => theme.fg("dim", str),
+      };
+      const image = new Image(b64, mimeType, imageTheme, {
+        maxWidthCells: 80,
+        maxHeightCells: 24,
+        filename: filePath,
+      });
+      // Image's text fallback (when terminal lacks inline-image support) does
+      // not respect the rendered width, so a long file path can blow past the
+      // terminal width and crash the host TUI. Wrap the component to truncate
+      // each rendered line to fit.
+      return {
+        invalidate: () => image.invalidate(),
+        render: (width: number) =>
+          image.render(width).map((line) =>
+            visibleWidth(line) > width ? truncateToWidth(line, width) : line,
+          ),
+      };
+    } catch {
+      return new Text(theme.fg("warning", `Screenshot saved: ${filePath}`), 0, 0);
+    }
+  },
 });
 
 export const captureWithCrosshair = async (

package/src/domains/scroll.ts

@@ -7,8 +7,8 @@ const ScrollArgs = Type.Object({
   y: Type.Optional(Type.Number({ description: "Y coordinate where to scroll. Default: viewport center" })),
   deltaX: Type.Optional(Type.Number({ default: 0, description: "Horizontal scroll delta (CSS pixels). Positive = right." })),
   deltaY: Type.Optional(Type.Number({
-    default: -300,
-    description: "Vertical scroll delta (CSS pixels). Positive = up (matches W3C wheel events). Default: -300 (scroll down).",
+    default: 300,
+    description: "Vertical scroll delta (CSS pixels). Positive = down, negative = up (W3C wheel-event convention). Default: 300 (scroll down).",
   })),
 });
 
@@ -16,10 +16,10 @@ export const scrollTool = defineBrowserTool({
   name: "browser_scroll",
   label: "Browser Scroll",
   description:
-    "Scroll the page at given coordinates. deltaY follows W3C wheel-event convention: positive = scroll up, negative = scroll down. Default scrolls down (deltaY = -300).",
-  promptSnippet: "Scroll the page (deltaY positive=up, negative=down)",
+    "Scroll the page at given coordinates. deltaY follows W3C wheel-event convention: positive = scroll down, negative = scroll up. Default scrolls down (deltaY = 300).",
+  promptSnippet: "Scroll the page (deltaY positive=down, negative=up)",
   promptGuidelines: [
-    "Default behavior scrolls down 300px (deltaY=-300). Pass a positive deltaY to scroll up.",
+    "Default behavior scrolls down 300px (deltaY=300). Pass a negative deltaY to scroll up.",
     "Pass x/y to target a specific scrollable region (e.g., a div with overflow); otherwise scrolls the page at viewport center.",
   ],
   parameters: ScrollArgs,
@@ -35,14 +35,21 @@ export const scrollTool = defineBrowserTool({
     const cx = args.x ?? Math.round(info.data.width / 2);
     const cy = args.y ?? Math.round(info.data.height / 2);
     const dx = args.deltaX ?? 0;
-    const dy = args.deltaY ?? -300;
+    const dy = args.deltaY ?? 300;
+    // The page target must be focused or Input events are dropped silently
+    // (mouseWheel hangs; synthesizeScrollGesture returns ok but no scroll).
+    // Page.bringToFront makes the target the active one in the browser.
+    const front = await client.session().call("Page.bringToFront", {});
+    if (!front.success) return err({ kind: "cdp_error", message: front.error.message });
     // Establish compositor mouse position before mouseWheel; without this,
-    // CDP sometimes drops the wheel event with a timeout. Fix preserved
-    // from v0.2.0.
-    const moved = await client.session().call("Input.dispatchMouseEvent", { type: "mouseMoved", x: cx, y: cy });
+    // CDP sometimes drops the wheel event with a timeout.
+    const moved = await client.session().call("Input.dispatchMouseEvent", {
+      type: "mouseMoved", x: cx, y: cy, button: "none", buttons: 0,
+    });
     if (!moved.success) return err({ kind: "cdp_error", message: moved.error.message });
     const wheel = await client.session().call("Input.dispatchMouseEvent", {
       type: "mouseWheel", x: cx, y: cy, deltaX: dx, deltaY: dy,
+      button: "none", buttons: 0, pointerType: "mouse",
     });
     if (!wheel.success) return err({ kind: "cdp_error", message: wheel.error.message });
     return ok({

package/src/prompt.ts

@@ -21,7 +21,7 @@ to interact with pages visually, and other tools alongside them.
 
 | Tool | Purpose |
 |------|---------|
-| browser_screenshot | Capture a PNG screenshot of the current page (result details include path and attached: false — the LLM reads the image via the saved file path) |
+| browser_screenshot | Capture a PNG or JPEG screenshot of the current page (rendered inline in the TUI; the LLM reads the image via the saved file path) |
 | browser_click | Click at viewport coordinates |
 | browser_type | Type text into the focused element |
 | browser_press_key | Press a keyboard key (Enter, Tab, Escape, arrows, etc.) |
@@ -63,6 +63,16 @@ browser_run_script("/tmp/scrape-pages.js", { urls: [...] })
 
 Script bindings: params, daemon, require, signal, onUpdate, ctx, console, fetch, JSON, Buffer, setTimeout, clearTimeout.
 
+### Parallel Execution
+
+Observation tools (browser_screenshot, browser_page_info, browser_execute_js, browser_list_tabs, browser_http_get, etc.) can run in parallel with each other and with mutation tools. The harness automatically serializes mutation tools (click, type, scroll, navigate, switch_tab, etc.) so they never race on shared state. When operations are independent, emit them in the same turn for better performance.
+
+**Examples of safe parallel calls:**
+\`\`\`
+browser_screenshot() + browser_page_info() + browser_execute_js("document.title")
+browser_http_get("https://api.example.com/data") + browser_click(x, y)
+\`\`\`
+
 ### Common Patterns
 
 **Navigation:**
@@ -85,9 +95,9 @@ browser_http_get("https://api.example.com/data")
 
 **Scrolling:**
 \`\`\`
-browser_screenshot() → browser_scroll({ deltaY: -500 }) → browser_screenshot()
+browser_screenshot() → browser_scroll({ deltaY: 500 }) → browser_screenshot()
 \`\`\`
-Note: deltaY follows W3C wheel-event convention: positive=up, negative=down. Default deltaY=-300 scrolls down.
+Note: deltaY follows W3C wheel-event convention: positive=down, negative=up. Default deltaY=300 scrolls down.
 
 **Research Workflow (search + browser):**
 \`\`\`

package/src/registry.ts

@@ -16,31 +16,34 @@ import { dragAndDropTool } from "./domains/drag";
 import { httpGetTool, getNetworkLogTool } from "./domains/network";
 import { executeJsTool, runScriptTool } from "./domains/js";
 
+// Mutation tools that modify page / browser state are marked `serialized: true`
+// so they run through a shared async mutex.  Observation / read-only tools are
+// left unmarked and can execute in parallel.
 const TOOLS: ReadonlyArray<AnyBrowserToolDefinition> = [
-  clickTool,
-  typeTool,
-  pressKeyTool,
-  dispatchKeyTool,
-  scrollTool,
+  { ...clickTool, serialized: true },
+  { ...typeTool, serialized: true },
+  { ...pressKeyTool, serialized: true },
+  { ...dispatchKeyTool, serialized: true },
+  { ...scrollTool, serialized: true },
   pageInfoTool,
   waitTool,
-  waitForLoadTool,
-  handleDialogTool,
+  { ...waitForLoadTool, serialized: true },
+  { ...handleDialogTool, serialized: true },
   screenshotTool,
-  navigateTool,
-  openUrlsTool,
-  goBackTool,
-  goForwardTool,
-  reloadTool,
+  { ...navigateTool, serialized: true },
+  { ...openUrlsTool, serialized: true },
+  { ...goBackTool, serialized: true },
+  { ...goForwardTool, serialized: true },
+  { ...reloadTool, serialized: true },
   listTabsTool,
   currentTabTool,
-  switchTabTool,
-  newTabTool,
-  uploadFileTool,
-  downloadTool,
-  printToPdfTool,
-  viewportResizeTool,
-  dragAndDropTool,
+  { ...switchTabTool, serialized: true },
+  { ...newTabTool, serialized: true },
+  { ...uploadFileTool, serialized: true },
+  { ...downloadTool, serialized: true },
+  { ...printToPdfTool, serialized: true },
+  { ...viewportResizeTool, serialized: true },
+  { ...dragAndDropTool, serialized: true },
   httpGetTool,
   getNetworkLogTool,
   executeJsTool,

package/src/setup.ts

@@ -23,7 +23,7 @@ async function runSetup(ctx: ExtensionContext, client: BrowserClient): Promise<v
   const chromeRunning = checkChromeRunning();
   if (!chromeRunning) {
     ctx.ui.notify(
-      "Chrome/Chromium/Edge not detected. Please start your browser and retry /browser-setup.",
+      "No browser instance running. Please open your browser and then run /browser-setup.",
       "error",
     );
     return;
@@ -80,11 +80,29 @@ async function runSetup(ctx: ExtensionContext, client: BrowserClient): Promise<v
 
 function checkChromeRunning(): boolean {
   try {
-    if (process.platform === "darwin" || process.platform === "linux") {
+    if (process.platform === "darwin") {
+      // Exact line matching — excludes "Google Chrome Helper" etc.
+      // that linger after the user quits the browser.
       const out = execSync("ps -A -o comm=", { timeout: 5000 }).toString().toLowerCase();
-      return ["google chrome", "chrome", "chromium", "microsoft edge", "msedge"].some(
-        (n) => out.includes(n),
-      );
+      const lines = out.split("\n").map((l) => l.trim()).filter(Boolean);
+      const browserProcesses = ["google chrome", "chromium", "microsoft edge"];
+      return lines.some((l) => {
+        if (l.includes("helper") || l.includes("renderer")) return false;
+        return browserProcesses.includes(l);
+      });
+    } else if (process.platform === "linux") {
+      // Use args to distinguish the main browser process from sub-processes
+      // (GPU, renderer, utility, etc.) which carry --type= flags.
+      const out = execSync("ps -A -o comm=,args=", { timeout: 5000 }).toString().toLowerCase();
+      const lines = out.split("\n").map((l) => l.trim()).filter(Boolean);
+      const browserComms = ["chrome", "chromium", "chromium-browser", "msedge", "microsoft-edge", "google-chrome"];
+      return lines.some((line) => {
+        const parts = line.split(/\s+/);
+        const comm = parts[0] ?? "";
+        if (!comm || !browserComms.includes(comm)) return false;
+        const isSubprocess = line.includes("--type=") && !line.includes("--type=browser");
+        return !isSubprocess;
+      });
     } else if (process.platform === "win32") {
       const out = execSync("tasklist", { timeout: 5000 }).toString().toLowerCase();
       return ["chrome.exe", "msedge.exe"].some((n) => out.includes(n));

package/src/util/mutex.ts

@@ -0,0 +1,25 @@
+/**
+ * Lightweight async mutex (~10 lines). Acquire returns a release function.
+ * When the mutex is free, acquire() resolves immediately. When held,
+ * callers are queued and execute serially in FIFO order.
+ */
+export type Mutex = {
+  acquire(): Promise<() => void>;
+};
+
+export const createMutex = (): Mutex => {
+  let queue = Promise.resolve<unknown>(undefined);
+
+  return {
+    async acquire(): Promise<() => void> {
+      let release = () => {};
+      const next = new Promise<void>((resolve) => {
+        release = resolve;
+      });
+      const prev = queue;
+      queue = prev.then(() => next);
+      await prev;
+      return release;
+    },
+  };
+};

package/src/util/tool.ts

@@ -53,6 +53,10 @@ export type BrowserToolDefinition<S extends TSchema> = {
   readonly handler: ToolHandler<S>;
   readonly renderCall?: (args: Static<S>, theme: Theme) => Component;
   readonly renderResult?: (result: AgentToolResult<unknown>, expanded: boolean, theme: Theme) => Component;
+  /** If true, the tool acquires the client's mutation mutex before executing.
+   *  This ensures that two serialized tools never run concurrently,
+   *  preventing race conditions on shared CDP session/page state. */
+  readonly serialized?: boolean;
   readonly ensureAlive?: boolean;
 };
 
@@ -146,23 +150,43 @@ export const registerBrowserTool = (
           );
         }
       }
-      const result = await def.handler(args, {
-        client,
-        signal,
-        onUpdate: (u) => {
-          if (onUpdate) {
-            // AgentToolUpdateCallback expects AgentToolResult<TDetails>; we use unknown for TDetails.
-            const update: AgentToolResult<OkDetails> = {
-              content: [{ type: "text", text: u.text }],
-              details: { ok: true, ...(u.details ?? {}) },
-            };
-            // Cast needed: onUpdate is AgentToolUpdateCallback<unknown> (generic TDetails).
-            (onUpdate as AgentToolUpdateCallback<OkDetails>)(update);
-          }
-        },
-        extensionCtx,
-      });
-      return toToolResult(result, def.name);
+      // Serialized tools acquire the client's mutation mutex so that only one
+      // mutation tool runs at a time. Observation tools skip this and run freely
+      // in parallel. AbortSignal is checked after acquiring the lock so that a
+      // cancelled task doesn't hold the mutex forever.
+      let release: (() => void) | undefined;
+      if (def.serialized) {
+        const acquire = await client.mutationMutex().acquire();
+        release = acquire;
+        if (signal?.aborted) {
+          release();
+          return toToolResult(
+            { success: false, error: { kind: "invalid_state", message: "Tool execution aborted before entering serialized lane" } },
+            def.name,
+          );
+        }
+      }
+      try {
+        const result = await def.handler(args, {
+          client,
+          signal,
+          onUpdate: (u) => {
+            if (onUpdate) {
+              // AgentToolUpdateCallback expects AgentToolResult<TDetails>; we use unknown for TDetails.
+              const update: AgentToolResult<OkDetails> = {
+                content: [{ type: "text", text: u.text }],
+                details: { ok: true, ...(u.details ?? {}) },
+              };
+              // Cast needed: onUpdate is AgentToolUpdateCallback<unknown> (generic TDetails).
+              (onUpdate as AgentToolUpdateCallback<OkDetails>)(update);
+            }
+          },
+          extensionCtx,
+        });
+        return toToolResult(result, def.name);
+      } finally {
+        release?.();
+      }
     },
   };
   pi.registerTool(td);