@particle-academy/agent-integrations 0.15.0 → 0.17.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

@@ -4,6 +4,7 @@ var fancyAutoCommon = require('@particle-academy/fancy-auto-common');
 var react = require('react');
 var fancySlides = require('@particle-academy/fancy-slides');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -2342,12 +2343,13 @@ function registerNavigationBridge(host, options) {
     },
     [],
     (args) => {
+      const handle = typeof args.handle === "string" ? args.handle : void 0;
       adapter.scrollTo({
-        handle: typeof args.handle === "string" ? args.handle : void 0,
+        handle,
         x: typeof args.x === "number" ? args.x : void 0,
         y: typeof args.y === "number" ? args.y : void 0
       });
-      return textResult("Scrolled");
+      return textResult("Scrolled", handle ? { handle, rect: adapter.rectFor?.(handle) ?? void 0 } : void 0);
     },
     () => target("Scroll")
   );
@@ -2374,7 +2376,7 @@ function registerNavigationBridge(host, options) {
       const handle = String(args.handle ?? "");
       const res = adapter.setField(handle, args.value);
       if (!res.ok) return errorResult(res.error ?? `Could not set ${handle}`);
-      return textResult(`${handle} \u2190 ${JSON.stringify(args.value)}`, { handle, value: args.value });
+      return textResult(`${handle} \u2190 ${JSON.stringify(args.value)}`, { handle, value: args.value, rect: adapter.rectFor?.(handle) ?? void 0 });
     },
     (args) => target(`Set ${String(args.handle ?? "")}`, String(args.handle ?? ""))
   );
@@ -2386,13 +2388,14 @@ function registerNavigationBridge(host, options) {
     async (args) => {
       const handle = String(args.handle ?? "");
       const action = adapter.describe().actions.find((a) => a.handle === handle);
+      const rect = adapter.rectFor?.(handle) ?? void 0;
       if (pendingMode && action?.destructive && adapter.confirm) {
         const ok = await adapter.confirm({ action: "click", handle, label: action.label });
         if (!ok) return errorResult("Declined by user");
       }
       const res = adapter.click(handle);
       if (!res.ok) return errorResult(res.error ?? `Could not click ${handle}`);
-      return textResult(`Clicked ${handle}`, { handle });
+      return textResult(`Clicked ${handle}`, { handle, rect });
     },
     (args) => target(`Click ${String(args.handle ?? "")}`, String(args.handle ?? ""))
   );
@@ -2403,13 +2406,14 @@ function registerNavigationBridge(host, options) {
     ["handle"],
     async (args) => {
       const handle = String(args.handle ?? "");
+      const rect = adapter.rectFor?.(handle) ?? void 0;
       if (pendingMode && adapter.confirm) {
         const ok = await adapter.confirm({ action: "submit", handle, label: handle });
         if (!ok) return errorResult("Declined by user");
       }
       const res = await adapter.submit(handle);
       if (!res.ok) return errorResult(res.error ?? "Submit failed");
-      return textResult(`Submitted ${handle}`, { handle });
+      return textResult(`Submitted ${handle}`, { handle, rect });
     },
     (args) => target(`Submit ${String(args.handle ?? "")}`, String(args.handle ?? ""))
   );
@@ -2936,16 +2940,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: [
@@ -2966,11 +2975,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,
@@ -3021,6 +3039,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}`;
@@ -3383,6 +3428,57 @@ function CoBrowsePresence({ session, connectUrl, shareBaseUrl, className }) {
   ] });
 }
 CoBrowsePresence.displayName = "CoBrowsePresence";
+function CoBrowseCursorLayer({ active = true, zIndex = 2147483e3 }) {
+  const { latest } = useAgentActivity(void 0, { capacity: 12 });
+  const [cursor, setCursor] = react.useState(
+    null
+  );
+  const [pulse, setPulse] = react.useState(null);
+  react.useEffect(() => {
+    if (!latest || (latest.source ?? "agent") === "user") return;
+    const color = latest.agentColor ?? "#a855f7";
+    const name = latest.agentName ?? "Agent";
+    const status = latest.target?.label ?? latest.action;
+    const rect = latest.meta?.rect;
+    if (rect) {
+      setCursor({ x: rect.x + rect.width / 2, y: rect.y + rect.height / 2, name, color, status });
+      setPulse({ rect, color, key: latest.timestamp });
+    } else {
+      setCursor(
+        (prev) => prev ? { ...prev, status, name, color } : { x: window.innerWidth / 2, y: window.innerHeight / 2, name, color, status }
+      );
+    }
+  }, [latest?.timestamp]);
+  if (!active || !cursor || typeof document === "undefined") return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-co-browse-cursor-layer": "", style: { position: "fixed", inset: 0, pointerEvents: "none", zIndex }, children: [
+      pulse && /* @__PURE__ */ jsxRuntime.jsx(
+        AgentActivityHighlight,
+        {
+          x: pulse.rect.x,
+          y: pulse.rect.y,
+          width: pulse.rect.width,
+          height: pulse.rect.height,
+          color: pulse.color,
+          pulseKey: pulse.key
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AgentCursor,
+        {
+          x: cursor.x,
+          y: cursor.y,
+          name: cursor.name,
+          color: cursor.color,
+          status: cursor.status,
+          style: { transition: "left .35s cubic-bezier(.22,.61,.36,1), top .35s cubic-bezier(.22,.61,.36,1)" }
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+CoBrowseCursorLayer.displayName = "CoBrowseCursorLayer";
 
 // src/presence/index.ts
 init_registry();
@@ -3512,6 +3608,7 @@ exports.CLAUDE_CONNECTORS_URL = CLAUDE_CONNECTORS_URL;
 exports.CONNECTOR_GLYPHS = CONNECTOR_GLYPHS;
 exports.CONNECTOR_TARGETS = CONNECTOR_TARGETS;
 exports.ClaudeMark = ClaudeMark;
+exports.CoBrowseCursorLayer = CoBrowseCursorLayer;
 exports.CoBrowsePresence = CoBrowsePresence;
 exports.ConnectorButtons = ConnectorButtons;
 exports.CursorMark = CursorMark;
@@ -3532,6 +3629,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;