claude-browser-bridge 4.0.4 → 4.1.1

package/index.js

@@ -289,8 +289,9 @@ Bug Investigation:
 Performance Audit:
   batch([performance_trace, get_load_timeline, heap_snapshot_summary])
 
-Page Interaction:
-  diagnose → fill({ref:"ref_3", value:"..."}) → click({ref:"ref_0"}) → wait_for({text:"Success"})
+Page Interaction (with observe mode — Claude sees every action's result automatically):
+  observe_mode({enabled:true}) → diagnose → fill({ref:"ref_3"}) → click({ref:"ref_0"})
+  Every interaction returns a screenshot — no separate screenshot calls needed.
 
 Multi-tab Research:
   select_tab(app) → new_tab(docs) → get_page_text → close_tab → continue on app
@@ -316,8 +317,15 @@ Cross-Product Comparison:
 State Management Testing:
   set_storage({key:"cache", action:"remove"}) → reload → verify fresh state
 
-## ALL 65 TOOLS BY CATEGORY:
-Core: diagnose, batch, select_tab, snapshot, eval, screenshot, full_page_screenshot, get_page_text, get_html, get_page_info, browser_bridge_help
+## COMMON BUG PATTERNS (check these before investigating):
+- Stale session: clear with eval({code:"sessionStorage.clear();['session','cache','config'].forEach(p=>{for(let i=localStorage.length-1;i>=0;i--){const k=localStorage.key(i);if(k.includes(p))localStorage.removeItem(k)}})"}) + reload
+- React state unreadable (prod): don't rely on class names. Use get_styles, get_element_rect, eval with data-testid or global store
+- Login expired: get_network shows empty/{} responses → re-authenticate with the platform CLI
+- Visual change not visible: wait 3s for HMR, use inject_css to test live, get_styles to verify computed value
+- Font/asset mismatch: get_grouped_console → look for repeated warnings with API vs resolved values
+
+## ALL 66 TOOLS BY CATEGORY:
+Core: diagnose, batch, select_tab, snapshot, eval, screenshot, full_page_screenshot, get_page_text, get_html, get_page_info, browser_bridge_help, observe_mode
 Interaction: click, fill, hover, scroll, press_key, select_option, upload_file, highlight_element
 Navigation: navigate, new_tab, close_tab, go_back, go_forward, reload, list_tabs, wait_for
 Debugging: get_console, get_grouped_console, get_network, search_network_bodies, get_styles, get_cookies, get_storage, get_clipboard, watch_dom_changes, generate_selector
@@ -328,6 +336,8 @@ Testing: visual_diff, inject_css, mock_network, record_actions, replay_actions,
 Productivity: save_form_profile, load_form_profile, save_tab_session, restore_tab_session, edit_cookie, export_pdf
 Visual Debugging: inspect_pixel, get_element_rect, compare_tabs, annotate, clear_annotations, capture_canvas
 Storage: set_storage
+Visual Debugging: inspect_pixel, get_element_rect, compare_tabs, annotate, clear_annotations, capture_canvas
+Storage: set_storage
 `;
 
 const BATCH_TOOL = {
@@ -354,6 +364,19 @@ const BATCH_TOOL = {
   },
 };
 
+const OBSERVE_TOOL = {
+  name: "observe_mode",
+  description:
+    "Toggle observe mode ON/OFF. When ON, every interaction tool (click, fill, hover, scroll, navigate) automatically captures and returns a screenshot in its response — Claude sees the visual result of every action without separate screenshot calls. Turn ON at session start for visual debugging workflows. Turn OFF for speed when you don't need visual feedback.",
+  inputSchema: {
+    type: "object",
+    properties: {
+      enabled: { type: "boolean", description: "true to enable, false to disable" },
+    },
+    required: ["enabled"],
+  },
+};
+
 const TAB_ID = {
   tab_id: {
     type: "number",
@@ -1007,7 +1030,7 @@ const server = new Server(
   { capabilities: { tools: {} } }
 );
 
-server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: [HELP_TOOL, BATCH_TOOL, ...TOOLS] }));
+server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: [HELP_TOOL, OBSERVE_TOOL, BATCH_TOOL, ...TOOLS] }));
 
 function formatResult(name, result) {
   if ((name === "screenshot" || name === "full_page_screenshot") && result?.dataUrl) {
@@ -1048,6 +1071,17 @@ function formatResult(name, result) {
       ],
     };
   }
+  // Observe mode: if the response includes an auto-captured screenshot, return it as an image
+  if (result?.__screenshot) {
+    const base64 = result.__screenshot.replace(/^data:image\/png;base64,/, "");
+    const { __screenshot, ...rest } = result;
+    return {
+      content: [
+        { type: "text", text: JSON.stringify(rest, null, 2) },
+        { type: "image", data: base64, mimeType: "image/png" },
+      ],
+    };
+  }
   return { content: [{ type: "text", text: JSON.stringify(result, null, 2) }] };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-browser-bridge",
-  "version": "4.0.4",
+  "version": "4.1.1",
   "description": "Connect your live Chrome tabs to Claude Code — 65 tools for debugging, performance, accessibility, visual inspection, and browser automation.",
   "type": "module",
   "bin": {