@particle-academy/agent-integrations 0.15.0 → 0.16.0

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 ?? ""))
   );
@@ -3383,6 +3387,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 +3567,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;