safari-mcp 2.10.5 → 2.10.7

package/README.md

@@ -18,6 +18,7 @@
 [![Glama AAA](https://img.shields.io/badge/Glama-AAA_Score-22c55e?logo=ai)](https://glama.ai/mcp/servers/@achiya-automation/safari-mcp)
 [![MCP Registry](https://img.shields.io/badge/MCP_Registry-Verified-2563eb)](https://registry.modelcontextprotocol.io/v0/servers?search=achiya-automation)
 [![Smithery](https://img.shields.io/badge/Smithery-Listed-7c3aed)](https://smithery.ai/server/@achiya-automation/safari-mcp)
+[![MCP Score](https://mcpscoreboard.com/badge/05977769-8762-4e89-aff3-a0c5776843bb.svg)](https://mcpscoreboard.com/server/05977769-8762-4e89-aff3-a0c5776843bb/)
 
 <a href="vscode:mcp/install?%7B%22safari-mcp%22%3A%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22safari-mcp%22%5D%7D%7D"><img src="https://img.shields.io/badge/VS_Code-Install_Server-0078d4?logo=visual-studio-code&logoColor=white" alt="Install in VS Code"></a>
 <a href="https://insiders.vscode.dev/redirect?url=vscode-insiders:mcp/install?%7B%22safari-mcp%22%3A%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22safari-mcp%22%5D%7D%7D"><img src="https://img.shields.io/badge/VS_Code_Insiders-Install_Server-24bfa5?logo=visual-studio-code&logoColor=white" alt="Install in VS Code Insiders"></a>
@@ -777,7 +778,7 @@ If Safari MCP saves you from Chrome overhead, **a star helps others discover it:
 
 ## Listed On
 
-[![Glama](https://glama.ai/mcp/servers/achiya-automation/safari-mcp/badges/score.svg)](https://glama.ai/mcp/servers/achiya-automation/safari-mcp) [![MCP Registry](https://img.shields.io/badge/MCP-Registry-purple)](https://registry.modelcontextprotocol.io/) [![CI](https://github.com/achiya-automation/safari-mcp/actions/workflows/ci.yml/badge.svg)](https://github.com/achiya-automation/safari-mcp/actions/workflows/ci.yml)
+[![Glama](https://glama.ai/mcp/servers/achiya-automation/safari-mcp/badges/score.svg)](https://glama.ai/mcp/servers/achiya-automation/safari-mcp) [![MCP Registry](https://img.shields.io/badge/MCP-Registry-purple)](https://registry.modelcontextprotocol.io/) [![MCP Scoreboard](https://mcpscoreboard.com/badge/05977769-8762-4e89-aff3-a0c5776843bb.svg)](https://mcpscoreboard.com/server/05977769-8762-4e89-aff3-a0c5776843bb/) [![CI](https://github.com/achiya-automation/safari-mcp/actions/workflows/ci.yml/badge.svg)](https://github.com/achiya-automation/safari-mcp/actions/workflows/ci.yml)
 
 ---
 

package/index.js

@@ -1106,6 +1106,33 @@ server.tool(
   }
 );
 
+server.tool(
+  "safari_react_select_set",
+  "Set a value in a react-select v5 dropdown by walking React fiber to find the Select component and invoking onChange directly — bypasses the menu UI entirely. Use when safari_click on the chevron or option keeps failing (Cloudflare custom token forms after a few rows, portal-rendered selects that intercept synthetic events). Returns JSON {ok, selected} on success, or {ok:false, error, available:[…]} listing up to 30 option labels on miss. Match is by label, value, or case-insensitive label. Either ref or selector required. NOTE: For Permissions-levels combos that are disabled until a Permission is selected, set the Permissions value first — the level combo becomes enabled and its props.options populate.",
+  {
+    selector: z.string().optional().describe("CSS selector — typically input[name=...] or the .react-select__control container"),
+    ref: z.string().optional().describe("Ref ID from safari_snapshot"),
+    value: z.string().describe("Option label (or value) to select — case-insensitive fallback"),
+  },
+  async (args) => {
+    const result = await safari.reactSelectSet(args);
+    return { content: [{ type: "text", text: typeof result === 'string' ? result : JSON.stringify(result) }] };
+  }
+);
+
+server.tool(
+  "safari_react_select_list_options",
+  "List available options of a react-select v5 dropdown without opening the menu. Returns JSON {ok, total, options:[{label,value}…]}. Useful when safari_react_select_set returns 'option not found' and you need to see exact labels (e.g. 'Email Routing Rules' vs 'Email Routing'). Either ref or selector required.",
+  {
+    selector: z.string().optional().describe("CSS selector"),
+    ref: z.string().optional().describe("Ref ID from safari_snapshot"),
+  },
+  async (args) => {
+    const result = await safari.reactSelectListOptions(args);
+    return { content: [{ type: "text", text: typeof result === 'string' ? result : JSON.stringify(result) }] };
+  }
+);
+
 server.tool(
   "safari_fill_form",
   "Fill multiple form fields at once",

package/mcp-helpers.js

@@ -3,8 +3,8 @@
 // It is also used by the extension's execInTab for the AppleScript fallback path.
 // IMPORTANT: Keep compatible with all browsers — no ES6+ modules, use var where possible.
 
-if (window.__mcpVersion !== 5) {
-  window.__mcpVersion = 5;
+if (window.__mcpVersion !== 6) {
+  window.__mcpVersion = 6;
   window.__mcpRefs = window.__mcpRefs || {};
   window.__mcpCachedRoots = null;
   window.__mcpRootsDirty = true;
@@ -166,6 +166,18 @@ if (window.__mcpVersion !== 5) {
       }
     } catch (e) {}
     target.dispatchEvent(new MouseEvent('click', { ...s, buttons: 0 }));
+    // Vue v-model / Lit @change / framework-agnostic toggle sync — for checkbox/radio,
+    // Vue 3 listens for `change` via v-model; some Vue components subscribe to `input` instead.
+    // Native target.click() fires both, but in production-stripped Vue apps (no fiber/proxy
+    // visible), the reactivity sometimes misses the events when fired in the same microtask
+    // as a synthetic click. Belt-and-suspenders: re-dispatch input+change with composed:true
+    // and reset React's _valueTracker so subsequent submits see the new value.
+    if (target.tagName === 'INPUT' && (target.type === 'checkbox' || target.type === 'radio')) {
+      try { if (target._valueTracker && typeof target._valueTracker.setValue === 'function') target._valueTracker.setValue(''); } catch (_e) {}
+      var toggleOpts = { bubbles: true, cancelable: true, composed: true };
+      target.dispatchEvent(new Event('input', toggleOpts));
+      target.dispatchEvent(new Event('change', toggleOpts));
+    }
     if (href && href !== beforeUrl) {
       location.href = href;
     }
@@ -328,4 +340,90 @@ if (window.__mcpVersion !== 5) {
     }
     return best;
   };
+  // React-Select v5 / Radix-style controlled-select bypass: walks fiber up from the
+  // target element to find a Select component (props.options + props.onChange), then
+  // invokes onChange directly with the matching option. Avoids menu UI entirely —
+  // critical for Cloudflare custom-token forms where the dropdown indicator stops
+  // responding to dispatched clicks after a few rows.
+  window.mcpReactSelectFindInstance = function(el) {
+    if (!el) return null;
+    var node = el;
+    for (var d = 0; d < 25 && node; d++) {
+      var keys = Object.keys(node);
+      var fk;
+      for (var ki = 0; ki < keys.length; ki++) {
+        if (keys[ki].indexOf('__reactFiber$') === 0 || keys[ki].indexOf('__reactInternalInstance$') === 0) { fk = keys[ki]; break; }
+      }
+      if (fk) {
+        var fiber = node[fk], hops = 0;
+        while (fiber && hops < 60) {
+          var p = fiber.memoizedProps || fiber.pendingProps || (fiber.stateNode && fiber.stateNode.props);
+          if (p && Array.isArray(p.options) && typeof p.onChange === 'function') {
+            return { props: p, fiber: fiber };
+          }
+          fiber = fiber.return;
+          hops++;
+        }
+      }
+      node = node.parentElement;
+    }
+    return null;
+  };
+  window.mcpReactSelectFlatten = function(options) {
+    var flat = [];
+    for (var i = 0; i < options.length; i++) {
+      var o = options[i];
+      if (o && Array.isArray(o.options)) {
+        for (var j = 0; j < o.options.length; j++) flat.push(o.options[j]);
+      } else if (o) {
+        flat.push(o);
+      }
+    }
+    return flat;
+  };
+  window.mcpReactSelectSet = function(el, optionLabel) {
+    var found = window.mcpReactSelectFindInstance(el);
+    if (!found) return JSON.stringify({ ok: false, error: 'no react-select Select component found in fiber tree' });
+    var p = found.props;
+    var flat = window.mcpReactSelectFlatten(p.options);
+    if (!flat.length) return JSON.stringify({ ok: false, error: 'Select component has no options (try opening the menu first to populate)' });
+    var needle = String(optionLabel);
+    var target = null;
+    for (var i = 0; i < flat.length; i++) {
+      if (flat[i] && (flat[i].label === needle || flat[i].value === needle)) { target = flat[i]; break; }
+    }
+    if (!target) {
+      var lcNeedle = needle.toLowerCase();
+      for (var k = 0; k < flat.length; k++) {
+        var lab = String(flat[k] && (flat[k].label !== undefined ? flat[k].label : flat[k].value) || '').toLowerCase();
+        if (lab === lcNeedle) { target = flat[k]; break; }
+      }
+    }
+    if (!target) {
+      return JSON.stringify({
+        ok: false,
+        error: 'option not found',
+        searched: needle,
+        total: flat.length,
+        available: flat.slice(0, 30).map(function(o) { return o && (o.label !== undefined ? o.label : o.value); })
+      });
+    }
+    var action = { action: 'select-option', option: target, name: p.name };
+    try {
+      p.onChange(target, action);
+      return JSON.stringify({ ok: true, selected: target.label !== undefined ? target.label : target.value });
+    } catch (e) {
+      return JSON.stringify({ ok: false, error: 'onChange threw: ' + e.message });
+    }
+  };
+  window.mcpReactSelectListOptions = function(el) {
+    var found = window.mcpReactSelectFindInstance(el);
+    if (!found) return JSON.stringify({ ok: false, error: 'no react-select Select component found' });
+    var flat = window.mcpReactSelectFlatten(found.props.options);
+    return JSON.stringify({
+      ok: true,
+      total: flat.length,
+      options: flat.map(function(o) { return { label: o && o.label, value: o && o.value }; })
+    });
+  };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "safari-mcp",
-  "version": "2.10.5",
+  "version": "2.10.7",
   "mcpName": "io.github.achiya-automation/safari-mcp",
   "description": "Safari browser automation for AI agents — native macOS, zero Chrome overhead. 80 tools via AppleScript + JavaScript.",
   "type": "module",

package/safari.js

@@ -1070,7 +1070,7 @@ async function ensureHelpers() {
   if (_activeTabURL && _helpersInjectedForUrl === _activeTabURL && (now - _helpersInjectedAt) < HELPERS_CACHE_MS) return;
 
   // Check if helpers are actually present (not just version flag)
-  const check = await runJS("(typeof mcpClickWithReact==='function'&&typeof mcpFindText==='function')?'ok':'missing'").catch(() => 'missing');
+  const check = await runJS("(typeof mcpClickWithReact==='function'&&typeof mcpFindText==='function'&&typeof mcpReactSelectSet==='function')?'ok':'missing'").catch(() => 'missing');
   if (check === 'ok') {
     _helpersInjectedForUrl = _activeTabURL;
     _helpersInjectedAt = now;
@@ -1708,6 +1708,45 @@ export async function selectOption({ selector, value }) {
   );
 }
 
+// React-Select v5 / Radix-style controlled-select bypass.
+// Walks React fiber up from the target element to find a Select component
+// (props.options + props.onChange) and calls onChange directly — no menu UI.
+// Use when safari_click on the chevron/option fails (Cloudflare token form,
+// portal-rendered selects that intercept synthetic events).
+export async function reactSelectSet({ selector, ref, value }) {
+  await ensureHelpers();
+  if (value === undefined || value === null) throw new Error("reactSelectSet requires 'value' (option label)");
+  let finder;
+  if (ref) {
+    const safeRef = String(ref).replace(/'/g, "\\'");
+    finder = `mcpFindRef('${safeRef}')`;
+  } else if (selector) {
+    const sel = selector.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+    finder = `mcpQuerySelectorDeep('${sel}')`;
+  } else {
+    throw new Error("reactSelectSet requires 'ref' or 'selector'");
+  }
+  const safeValue = String(value).replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+  const js = `(function(){var el=${finder};if(!el)return JSON.stringify({ok:false,error:'element not found'});return window.mcpReactSelectSet(el,'${safeValue}');})()`;
+  return runJS(js);
+}
+
+export async function reactSelectListOptions({ selector, ref }) {
+  await ensureHelpers();
+  let finder;
+  if (ref) {
+    const safeRef = String(ref).replace(/'/g, "\\'");
+    finder = `mcpFindRef('${safeRef}')`;
+  } else if (selector) {
+    const sel = selector.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+    finder = `mcpQuerySelectorDeep('${sel}')`;
+  } else {
+    throw new Error("reactSelectListOptions requires 'ref' or 'selector'");
+  }
+  const js = `(function(){var el=${finder};if(!el)return JSON.stringify({ok:false,error:'element not found'});return window.mcpReactSelectListOptions(el);})()`;
+  return runJS(js);
+}
+
 export async function fillForm({ fields }) {
   // Single JS call for ALL fields (instead of N separate osascript calls).
   // Same React-state-sync logic as `fill`: _valueTracker reset, prototype-correct setter,