chromeflow 0.1.38 → 0.1.40

package/CLAUDE.md

@@ -155,14 +155,31 @@ screenshot to check what happened.
 
 **React Select / custom styled dropdowns** (e.g. "Select..." components on DataAnnotation):
 `click_element` and `fill_input` do NOT work on these — they intercept native events. Use
-`execute_script` directly:
+`execute_script` with the hidden combobox input approach (most reliable):
 
 ```js
-// 1. Open the menu — click the control div (filter by pageY if multiple)
+// 1. Find the hidden combobox input (each React Select has one: input[id*="react-select-N-input"])
+var input = document.querySelector('input[id*="react-select-3-input"]');
+input.focus();
+
+// 2. Set value via native setter to trigger React's onChange
+var setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
+setter.call(input, 'Target Option');
+input.dispatchEvent(new Event('input', {bubbles: true}));
+
+// 3. Wait 300ms for the dropdown to filter, then click the first matching option
+// (run this as a separate execute_script call after a brief pause)
+var option = document.querySelector('[id*="react-select-3-option-0"]');
+if (option) option.click();
+
+// 4. Verify — the control div should show the selected value
+document.querySelector('[class*="singleValue"]').textContent.trim();
+```
+
+Fallback if the combobox approach doesn't work (older React Select versions):
+```js
 var controls = document.querySelectorAll('[class*="control"]');
 controls[N].click();
-
-// 2. Pick an option by exact text
 var allEls = document.querySelectorAll('*');
 for (var i = 0; i < allEls.length; i++) {
   if (allEls[i].textContent.trim() === 'Target Option' && allEls[i].children.length === 0) {
@@ -171,9 +188,6 @@ for (var i = 0; i < allEls.length; i++) {
     break;
   }
 }
-
-// 3. Verify
-controls[N].textContent.trim(); // should show selected value
 ```
 
 **Page text with large embedded content** (e.g. uploaded log files previewed inline): full-page `get_page_text()` pagination becomes unwieldy. Scope to a specific section instead:

package/dist/setup.js

@@ -169,7 +169,11 @@ const CHROMEFLOW_TOOLS = [
   // v0.1.32+
   "fill_form",
   // v0.1.36+
-  "set_file_input"
+  "set_file_input",
+  // v0.1.39+
+  "get_console_logs",
+  // v0.1.40+
+  "capture_terminal"
 ].map((t) => `mcp__chromeflow__${t}`);
 function patchSettingsLocalJson(cwd) {
   const claudeDir = join(cwd, ".claude");

package/dist/tools/browser.js

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { writeFileSync, copyFileSync } from "fs";
+import { writeFileSync, copyFileSync, readFileSync } from "fs";
 import { tmpdir, homedir } from "os";
 import { join } from "path";
 import { execSync } from "child_process";
@@ -106,6 +106,69 @@ save_to controls where the PNG is saved: "downloads" (default) saves to ~/Downlo
       };
     }
   );
+  server.tool(
+    "capture_terminal",
+    `Capture a screenshot of the terminal window (Terminal, iTerm2, Warp, VS Code, Ghostty, etc.) and save it as a PNG.
+Use this when you need a screenshot of terminal output \u2014 e.g. test results, build logs, or command output \u2014 to upload to a form via set_file_input.
+Auto-detects the terminal app. Returns the image to Claude AND saves the PNG file.
+The saved file path can be passed directly to set_file_input(hint, file_path) to upload it.`,
+    {
+      save_to: z.enum(["downloads", "cwd"]).optional().describe('Where to save the PNG: "downloads" (~/Downloads, default) or "cwd" (working directory)')
+    },
+    async ({ save_to = "downloads" }) => {
+      const timestamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, 19);
+      const filename = `terminal-${timestamp}.png`;
+      const savePath = save_to === "cwd" ? join(process.cwd(), filename) : join(homedir(), "Downloads", filename);
+      let captured = false;
+      try {
+        const bounds = execSync(`osascript -e '
+          tell application "System Events"
+            set termApps to {"Terminal", "iTerm2", "Warp", "kitty", "Alacritty", "Ghostty", "Code", "Cursor", "Windsurf"}
+            repeat with appName in termApps
+              if exists process (contents of appName) then
+                tell process (contents of appName)
+                  if (count of windows) > 0 then
+                    set win to window 1
+                    set pos to position of win
+                    set sz to size of win
+                    return (item 1 of pos as text) & "," & (item 2 of pos as text) & "," & (item 1 of sz as text) & "," & (item 2 of sz as text)
+                  end if
+                end tell
+              end if
+            end repeat
+            error "No terminal window found"
+          end tell
+        '`, { timeout: 5e3 }).toString().trim();
+        execSync(`screencapture -x -R${bounds} "${savePath}"`, { timeout: 5e3 });
+        captured = true;
+      } catch {
+        try {
+          execSync(`screencapture -x "${savePath}"`, { timeout: 5e3 });
+          captured = true;
+        } catch {
+        }
+      }
+      if (!captured) {
+        return {
+          content: [{ type: "text", text: "Failed to capture terminal. Ensure Screen Recording permission is granted to your terminal app in System Settings > Privacy & Security > Screen Recording." }]
+        };
+      }
+      const imageBuffer = readFileSync(savePath);
+      const base64 = imageBuffer.toString("base64");
+      let clipboardNote = "";
+      try {
+        execSync(`osascript -e 'set the clipboard to (read (POSIX file "${savePath}") as \xABclass PNGf\xBB)'`);
+        clipboardNote = "Copied to clipboard. ";
+      } catch {
+      }
+      return {
+        content: [
+          { type: "image", data: base64, mimeType: "image/png" },
+          { type: "text", text: `${clipboardNote}Saved to ${savePath}` }
+        ]
+      };
+    }
+  );
   server.tool(
     "clear_overlays",
     "Remove all highlights and callout annotations from the current page. Does NOT remove the guide panel \u2014 the guide panel persists until the next flow starts.",

package/dist/tools/capture.js

@@ -12,10 +12,11 @@ DO NOT use for: email address, password, payment/billing info, phone number \u20
 After filling, call wait_for_click only if the user needs to review/confirm; otherwise proceed directly to the next step.`,
     {
       textHint: z.string().describe("The label, placeholder, or nearby text identifying the input (e.g. 'Product name', 'Amount', 'Description')"),
-      value: z.string().describe("The value to fill in")
+      value: z.string().describe("The value to fill in"),
+      nth: z.number().int().min(1).optional().describe("Which match to fill when multiple inputs share the same label (1 = first/topmost, default 1)")
     },
-    async ({ textHint, value }) => {
-      const response = await bridge.request({ type: "fill_input", textHint, value });
+    async ({ textHint, value, nth }) => {
+      const response = await bridge.request({ type: "fill_input", textHint, value, nth });
       if (response.type !== "fill_response") throw new Error("Unexpected response");
       const r = response;
       return {
@@ -117,6 +118,36 @@ The snapshot is read from the local temp file written by save_page_state.`,
       };
     }
   );
+  server.tool(
+    "get_console_logs",
+    `Read the browser console output (log, warn, error, info) captured since the page loaded.
+Returns the last 200 messages with their level and timestamp.
+Use this to check for JavaScript errors, debug React issues, or verify that an action produced the expected console output.
+Pass level="error" to see only errors, or omit to see all levels.`,
+    {
+      level: z.enum(["log", "warn", "error", "info"]).optional().describe('Filter by log level (e.g. "error" to see only errors). Omit for all levels.')
+    },
+    async ({ level }) => {
+      const response = await bridge.request({ type: "execute_script", code: `JSON.stringify(window._consoleLogs || [])` });
+      if (response.type !== "script_response") throw new Error("Unexpected response");
+      let logs;
+      try {
+        logs = JSON.parse(response.result);
+      } catch {
+        return { content: [{ type: "text", text: "No console logs captured (console capture may not be injected on this page yet \u2014 navigate first)." }] };
+      }
+      if (level) logs = logs.filter((l) => l.level === level);
+      if (logs.length === 0) {
+        return { content: [{ type: "text", text: level ? `No ${level}-level console messages.` : "No console messages captured." }] };
+      }
+      const lines = logs.map((l) => {
+        const time = new Date(l.time).toISOString().slice(11, 23);
+        return `[${time}] ${l.level.toUpperCase()}: ${l.message.slice(0, 500)}`;
+      });
+      return { content: [{ type: "text", text: `Console logs (${logs.length} entries):
+${lines.join("\n")}` }] };
+    }
+  );
   server.tool(
     "write_to_env",
     "Write a key=value pair to a .env file. Use this after capturing an API key or ID from the page.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chromeflow",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "description": "Browser guidance MCP server for Claude Code — highlights, clicks, fills, and captures from the web so you don't have to.",
   "type": "module",
   "bin": {