@particle-academy/agent-integrations 0.16.0 → 0.18.0

package/dist/components-shared-whiteboard.js

@@ -1,4 +1,4 @@
-import { ShareControls, AgentCursor, AgentActivityHighlight, AgentPanel } from './chunk-GJSKBUOH.js';
+import { ShareControls, AgentCursor, AgentActivityHighlight, AgentPanel } from './chunk-YEEOTIGY.js';
 import { createSessionDescriptor, attachSseRelay } from './chunk-CPNOF4HI.js';
 import { attachInProcess } from './chunk-AFUULW5E.js';
 import { registerWhiteboardBridge } from './chunk-3QJSOS7G.js';

package/dist/index.cjs

@@ -8,8 +8,13 @@ var reactDom = require('react-dom');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+var __esm = (fn, res, err) => function __init() {
+  if (err) throw err[0];
+  try {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  } catch (e) {
+    throw err = [e], e;
+  }
 };
 var __export = (target, all) => {
   for (var name in all)
@@ -2940,16 +2945,21 @@ function ShareControls({
   className,
   style
 }) {
-  const [tab, setTab] = react.useState("url");
+  const [tab, setTab] = react.useState("prompt");
   if (!session) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["fai-share fai-share--idle", className ?? ""].filter(Boolean).join(" "), style, children: [
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "fai-share__start", onClick: onStart, children: "Start shared session" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "fai-share__hint", children: "Generates a session id + secret token. Share the URL with humans, or hand the JSON config to an MCP-capable agent." })
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "fai-share__hint", children: [
+        "Generates a session id + secret token. Hand the ",
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Agent prompt" }),
+        " to an AI agent, share the URL with humans, or give the JSON config to an MCP-capable client."
+      ] })
     ] });
   }
   const url = buildShareUrl(session, shareBaseUrl);
   const config = buildShareConfig(session);
   const curl = buildCurlRecipe(session);
+  const prompt = buildAgentPrompt(url);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["fai-share fai-share--active", className ?? ""].filter(Boolean).join(" "), style, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fai-share__header", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -2970,11 +2980,20 @@ function ShareControls({
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fai-share__tabs", role: "tablist", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TabButton, { tab: "prompt", active: tab, setTab, children: "Agent prompt" }),
       /* @__PURE__ */ jsxRuntime.jsx(TabButton, { tab: "url", active: tab, setTab, children: "URL" }),
       /* @__PURE__ */ jsxRuntime.jsx(TabButton, { tab: "json", active: tab, setTab, children: "JSON" }),
       /* @__PURE__ */ jsxRuntime.jsx(TabButton, { tab: "curl", active: tab, setTab, children: "cURL recipe" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fai-share__panel", children: [
+      tab === "prompt" && /* @__PURE__ */ jsxRuntime.jsx(
+        CopyBox,
+        {
+          label: "Paste this straight into an AI agent \u2014 it connects over MCP, no browser",
+          value: prompt,
+          multiline: true
+        }
+      ),
       tab === "url" && /* @__PURE__ */ jsxRuntime.jsx(CopyBox, { label: "Open this URL in another tab to join the session", value: url }),
       tab === "json" && /* @__PURE__ */ jsxRuntime.jsx(
         CopyBox,
@@ -3025,6 +3044,33 @@ function CopyBox({ label, value, multiline }) {
     ] })
   ] });
 }
+function buildAgentPrompt(url) {
+  return [
+    `You're joining a live Human+ co-browsing session on a web app. This is an MCP`,
+    `(Model Context Protocol) session \u2014 NOT a website to visit. Do NOT open the URL`,
+    `in a browser and do NOT use any browser/Playwright tool. You drive the real,`,
+    `running app through MCP tools while a human watches and can take over.`,
+    ``,
+    `Session link (carries the session id + token \u2014 treat it as a secret):`,
+    `  ${url}`,
+    ``,
+    `Connect by running the relay client as an MCP server (zero install):`,
+    `  npx -y mcp-relay-client "${url}"`,
+    ``,
+    `That exposes the app's own tools (e.g. page_describe, page_read, nav_visit,`,
+    `page_click, page_set_field, page_submit, plus surface tools like whiteboard_*).`,
+    `Then:`,
+    `  1. Call page_describe first to see the current page and its interactive handles.`,
+    `  2. Act only on the STABLE HANDLES the tools return \u2014 never guess DOM selectors.`,
+    `  3. Navigate with nav_visit, type with page_set_field, click with page_click.`,
+    `     Submits and destructive clicks are staged for the human to confirm.`,
+    ``,
+    `If you can't register an MCP server but can run a shell, drive it directly:`,
+    `  curl -O https://raw.githubusercontent.com/Particle-Academy/mcp-relay-client/main/connect.sh`,
+    `  bash connect.sh "${url}" tools`,
+    `  bash connect.sh "${url}" call page_describe '{}'`
+  ].join("\n");
+}
 function buildCurlRecipe(session) {
   const base = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.host}` : "http://localhost";
   const inbox = `${base}/agent-relay/${session.id}/inbox?token=${session.token}`;
@@ -3438,6 +3484,76 @@ function CoBrowseCursorLayer({ active = true, zIndex = 2147483e3 }) {
   );
 }
 CoBrowseCursorLayer.displayName = "CoBrowseCursorLayer";
+function resolveCsrf(explicit) {
+  if (explicit) return explicit;
+  if (typeof document === "undefined") return void 0;
+  return document.querySelector('meta[name="csrf-token"]')?.content;
+}
+function SimulateUsersButton({
+  endpoint = "/active-users/simulate",
+  count = 10,
+  label,
+  csrfToken,
+  onTriggered,
+  onError,
+  className,
+  style
+}) {
+  const [busy, setBusy] = react.useState(false);
+  async function trigger() {
+    if (busy) return;
+    setBusy(true);
+    try {
+      const token = resolveCsrf(csrfToken);
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Requested-With": "XMLHttpRequest",
+          ...token ? { "X-CSRF-TOKEN": token } : {}
+        },
+        credentials: "same-origin",
+        body: JSON.stringify({ count })
+      });
+      if (!res.ok) throw new Error(`Simulate request failed: ${res.status}`);
+      onTriggered?.();
+    } catch (err) {
+      onError?.(err);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "data-fai-simulate-users": "",
+      className: ["fai-simulate-users", className ?? ""].filter(Boolean).join(" "),
+      onClick: trigger,
+      disabled: busy,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "8px 14px",
+        borderRadius: 8,
+        border: "1px solid rgba(139,92,246,0.4)",
+        background: busy ? "rgba(139,92,246,0.15)" : "rgba(139,92,246,0.1)",
+        color: "#7c3aed",
+        font: "inherit",
+        fontSize: 13,
+        fontWeight: 500,
+        cursor: busy ? "progress" : "pointer",
+        opacity: busy ? 0.7 : 1,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: busy ? "\u23F3" : "\u2728" }),
+        label ?? `Simulate ${count} active users`
+      ]
+    }
+  );
+}
 
 // src/presence/index.ts
 init_registry();
@@ -3581,6 +3697,7 @@ exports.MicroMcpServer = MicroMcpServer;
 exports.RelayTransport = RelayTransport;
 exports.ScreensActivityBridge = ScreensActivityBridge;
 exports.ShareControls = ShareControls;
+exports.SimulateUsersButton = SimulateUsersButton;
 exports.SseRelayTransport = SseRelayTransport;
 exports.ToolRegistry = ToolRegistry;
 exports.VscodeMark = VscodeMark;
@@ -3588,6 +3705,7 @@ exports.WrenchMark = WrenchMark;
 exports.attachInProcess = attachInProcess;
 exports.attachRelay = attachRelay;
 exports.attachSseRelay = attachSseRelay;
+exports.buildAgentPrompt = buildAgentPrompt;
 exports.buildCursorDeeplink = buildCursorDeeplink;
 exports.buildManualConfig = buildManualConfig;
 exports.buildManualConfigSnippet = buildManualConfigSnippet;