@particle-academy/agent-integrations 0.34.0 → 0.35.0

package/dist/components-shared-whiteboard.js

@@ -1,5 +1,5 @@
-import { ShareControls, AgentCursor, AgentActivityHighlight, AgentPanel } from './chunk-SJTLTITO.js';
-import { createSessionDescriptor, attachSseRelay } from './chunk-N6RLSLOF.js';
+import { ShareControls, AgentCursor, AgentActivityHighlight, AgentPanel } from './chunk-ABP2THQV.js';
+import { createSessionDescriptor, attachSseRelay } from './chunk-JDCB2NMM.js';
 import { attachInProcess } from './chunk-AFUULW5E.js';
 import { registerWhiteboardBridge } from './chunk-2U5JB6ZA.js';
 import './chunk-CT3LRNH7.js';

package/dist/index.cjs

@@ -4457,6 +4457,7 @@ var SseRelayTransport = class {
     this.listeners = /* @__PURE__ */ new Set();
     this.state = "idle";
     this.peers = /* @__PURE__ */ new Set();
+    this.peerListeners = /* @__PURE__ */ new Set();
     this.opts = options;
     this.expectedToken = options.token;
   }
@@ -4517,6 +4518,8 @@ var SseRelayTransport = class {
     this.es?.close();
     this.es = void 0;
     this.connected = false;
+    this.peers.clear();
+    this.notifyPeers();
     this.setState("closed");
   }
   onStateChange(listener) {
@@ -4524,6 +4527,28 @@ var SseRelayTransport = class {
     listener(this.state);
     return () => this.listeners.delete(listener);
   }
+  /** How many remote peers (agents) are currently attached to this session. */
+  peerCount() {
+    return this.peers.size;
+  }
+  /**
+   * Subscribe to peer arrivals/departures. Fires immediately with the current
+   * count.
+   *
+   * This is the ONLY honest answer to "is an agent actually here?".
+   * `onStateChange` reports the BROWSER's own channel to the relay, which opens
+   * the instant sharing starts — so a UI keyed on it announces "Agent is
+   * driving" to a human who has not yet handed the link to anybody, and can
+   * never tell them when one really arrives.
+   */
+  onPeersChange(listener) {
+    this.peerListeners.add(listener);
+    listener(this.peers.size);
+    return () => this.peerListeners.delete(listener);
+  }
+  notifyPeers() {
+    for (const l of this.peerListeners) l(this.peers.size);
+  }
   /**
    * For relays that wrap each frame with auth metadata: hosts can call this
    * directly when a frame arrives via a non-SSE path. The transport will
@@ -4558,6 +4583,7 @@ var SseRelayTransport = class {
     if ("method" in message && message.method === "notifications/peer_joined") {
       const subscriberId = String(message.params?.subscriberId ?? "peer");
       this.peers.add(subscriberId);
+      this.notifyPeers();
       fancyAutoCommon.emitActivity({
         agentId: "agent",
         agentName: "Agent",
@@ -4572,6 +4598,7 @@ var SseRelayTransport = class {
     if ("method" in message && message.method === "notifications/peer_left") {
       const subscriberId = String(message.params?.subscriberId ?? "peer");
       this.peers.delete(subscriberId);
+      this.notifyPeers();
       if (this.peers.size === 0) {
         fancyAutoCommon.emitActivity({
           agentId: "agent",
@@ -4629,6 +4656,7 @@ function useCoBrowseSession(options) {
   const disposeBridge = react.useRef(null);
   const [session, setSession] = react.useState(null);
   const [relayState, setRelayState] = react.useState("idle");
+  const [agentCount, setAgentCount] = react.useState(0);
   react.useEffect(() => {
     const server = new MicroMcpServer({
       info: options.info ?? { name: "fancy-co-browse", version: "0.1.0" },
@@ -4663,6 +4691,7 @@ function useCoBrowseSession(options) {
     }
     const relay = attachSseRelay(server, { baseUrl: relayBaseUrl, sessionId: descriptor.id, token: descriptor.token });
     relay.onStateChange(setRelayState);
+    relay.onPeersChange(setAgentCount);
     relayRef.current = relay;
     setSession(descriptor);
   }, [relayBaseUrl, options]);
@@ -4671,6 +4700,7 @@ function useCoBrowseSession(options) {
     relayRef.current?.close();
     relayRef.current = null;
     setRelayState("idle");
+    setAgentCount(0);
     setSession(null);
     if (current) {
       const csrf = options.csrfToken?.() ?? "";
@@ -4693,7 +4723,16 @@ function useCoBrowseSession(options) {
       meta: event
     });
   }, []);
-  return { server: serverRef.current, session, relayState, startShare, stopShare, observeUser };
+  return {
+    server: serverRef.current,
+    session,
+    relayState,
+    agentConnected: agentCount > 0,
+    agentCount,
+    startShare,
+    stopShare,
+    observeUser
+  };
 }
 function AgentPanel({ agent, activity, onSubmit, busy, actions, className, style }) {
   const scrollRef = react.useRef(null);
@@ -5416,10 +5455,12 @@ function ManualPopover({
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "fai-connect__copy-btn", onClick: onCopy, children: copied ? "Copied" : "Copy snippet" })
   ] });
 }
+var LIFECYCLE_ACTIONS = /* @__PURE__ */ new Set(["agent_connected", "agent_disconnected"]);
 function CoBrowsePresence({ session, connectUrl, shareBaseUrl, className }) {
   const { events } = useAgentActivity(void 0, { capacity: 40 });
-  const lastAgentAction = [...events].reverse().find((e) => (e.source ?? "agent") !== "user");
-  const connected = session.relayState === "open";
+  const lastAgentAction = [...events].reverse().find((e) => (e.source ?? "agent") !== "user" && !LIFECYCLE_ACTIONS.has(e.action));
+  const connected = session.agentConnected;
+  const activity = react.useMemo(() => events.map(toPanelActivity), [events]);
   if (!session.session) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-co-browse-presence": "idle", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => void session.startShare(), "data-co-browse-start": true, children: "Let an agent drive" }) });
   }
@@ -5437,12 +5478,25 @@ function CoBrowsePresence({ session, connectUrl, shareBaseUrl, className }) {
         onStart: () => void session.startShare(),
         onStop: session.stopShare,
         status: session.relayState,
+        agentConnected: connected,
+        activity,
         shareBaseUrl
       }
     ),
     connectUrl && /* @__PURE__ */ jsxRuntime.jsx(ConnectorButtons, { serverName: "Fancy UI co-browse", mcpUrl: connectUrl })
   ] });
 }
+function toPanelActivity(event) {
+  const who = (event.source ?? "agent") === "user" ? "You" : event.agentName ?? "Agent";
+  return {
+    id: `${event.timestamp}-${event.action}-${event.target?.elementId ?? event.target?.label ?? ""}`,
+    at: event.timestamp,
+    kind: LIFECYCLE_ACTIONS.has(event.action) ? "info" : "tool",
+    source: who,
+    text: event.target?.label ?? event.action,
+    detail: event.meta
+  };
+}
 CoBrowsePresence.displayName = "CoBrowsePresence";
 var CURSOR_EDGE_INSET = 24;
 var FLUID_CURSOR_SPEED_PX_PER_SECOND = 1050;
@@ -5461,19 +5515,26 @@ function fluidGlideDuration(from, to) {
   const distance = Math.hypot(to.x - from.x, to.y - from.y);
   return Math.round(Math.min(MAX_GLIDE_MS, Math.max(MIN_GLIDE_MS, distance / FLUID_CURSOR_SPEED_PX_PER_SECOND * 1e3)));
 }
-function CoBrowseCursorLayer({ active = true, zIndex = 2147483e3 }) {
+var LIFECYCLE_ACTIONS2 = /* @__PURE__ */ new Set(["agent_connected", "agent_disconnected"]);
+function CoBrowseCursorLayer({
+  active = true,
+  zIndex = 2147483e3,
+  idleAfterMs = 15e3
+}) {
   const { latest } = useAgentActivity(void 0, { capacity: 12 });
   const [cursor, setCursor] = react.useState(
     null
   );
   const [pulse, setPulse] = react.useState(null);
+  const [lastActionAt, setLastActionAt] = react.useState(0);
   react.useEffect(() => {
     if (!latest || (latest.source ?? "agent") === "user") return;
-    if (latest.action === "agent_disconnected") {
-      setCursor((prev) => prev ? { ...prev, status: "Standing by", glideMs: 0 } : prev);
+    if (LIFECYCLE_ACTIONS2.has(latest.action)) {
+      setCursor((prev) => prev ? { ...prev, status: "Standing by", glideMs: 0 } : null);
       setPulse(null);
       return;
     }
+    setLastActionAt(latest.timestamp);
     const color = latest.agentColor ?? "#a855f7";
     const name = latest.agentName ?? "Agent";
     const status = latest.target?.label ?? latest.action;
@@ -5495,6 +5556,14 @@ function CoBrowseCursorLayer({ active = true, zIndex = 2147483e3 }) {
       );
     }
   }, [latest?.timestamp]);
+  react.useEffect(() => {
+    if (!idleAfterMs || !lastActionAt) return;
+    const timer = setTimeout(() => {
+      setCursor(null);
+      setPulse(null);
+    }, idleAfterMs);
+    return () => clearTimeout(timer);
+  }, [lastActionAt, idleAfterMs]);
   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: [