@particle-academy/agent-integrations 0.4.0 → 0.6.0

package/dist/components-shared-whiteboard.cjs

@@ -0,0 +1,1533 @@
+'use strict';
+
+var react = require('react');
+var fancyWhiteboard = require('@particle-academy/fancy-whiteboard');
+var jsxRuntime = require('react/jsx-runtime');
+
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/presence/registry.ts
+var registry_exports = {};
+__export(registry_exports, {
+  emitActivity: () => emitActivity,
+  onActivity: () => onActivity,
+  readActivityHistory: () => readActivityHistory,
+  resetActivityRegistry: () => resetActivityRegistry
+});
+function emitActivity(event) {
+  history.push(event);
+  if (history.length > HISTORY_CAP) history.splice(0, history.length - HISTORY_CAP);
+  for (const l of listeners) l(event);
+}
+function onActivity(listener, filter) {
+  const wrapped = filter ? (e) => {
+    if (matches(e, filter)) listener(e);
+  } : listener;
+  listeners.add(wrapped);
+  return () => listeners.delete(wrapped);
+}
+function readActivityHistory(filter) {
+  if (!filter) return history.slice();
+  return history.filter((e) => matches(e, filter));
+}
+function resetActivityRegistry() {
+  listeners.clear();
+  history.length = 0;
+}
+function matches(e, f) {
+  if (f.agentId !== void 0 && e.agentId !== f.agentId) return false;
+  if (f.screenId !== void 0 && e.target.screenId !== f.screenId) return false;
+  if (f.kind !== void 0 && e.target.kind !== f.kind) return false;
+  return true;
+}
+var HISTORY_CAP, listeners, history;
+var init_registry = __esm({
+  "src/presence/registry.ts"() {
+    HISTORY_CAP = 200;
+    listeners = /* @__PURE__ */ new Set();
+    history = [];
+  }
+});
+
+// src/mcp/types.ts
+var JSONRPC_METHOD_NOT_FOUND = -32601;
+var JSONRPC_INVALID_PARAMS = -32602;
+var JSONRPC_INTERNAL_ERROR = -32603;
+var MCP_PROTOCOL_VERSION = "2025-06-18";
+
+// src/mcp/tool-host.ts
+var ToolRegistry = class {
+  constructor() {
+    this.tools = /* @__PURE__ */ new Map();
+  }
+  registerTool(definition, handler) {
+    this.tools.set(definition.name, { definition, handler });
+    this.onToolsChanged();
+    return () => {
+      if (this.tools.delete(definition.name)) this.onToolsChanged();
+    };
+  }
+  getTool(name) {
+    return this.tools.get(name) ?? null;
+  }
+  listTools() {
+    return Array.from(this.tools.values()).map((t) => t.definition);
+  }
+  async callTool(name, args = {}) {
+    const tool = this.tools.get(name);
+    if (!tool) {
+      throw new Error(`Unknown tool: ${name}`);
+    }
+    return tool.handler(args);
+  }
+  /**
+   * Hook for subclasses (e.g. MicroMcpServer) to notify subscribers
+   * when the tool catalog changes. Default no-op.
+   */
+  onToolsChanged() {
+  }
+};
+
+// src/mcp/server.ts
+var MicroMcpServer = class extends ToolRegistry {
+  constructor(options) {
+    super();
+    this.transports = /* @__PURE__ */ new Set();
+    this.notifyListChangedScheduled = false;
+    this.info = options.info;
+    this.capabilities = options.capabilities ?? { tools: { listChanged: true } };
+    this.instructions = options.instructions;
+  }
+  attach(transport) {
+    this.transports.add(transport);
+    return () => this.detach(transport);
+  }
+  detach(transport) {
+    if (this.transports.delete(transport)) {
+      transport.close?.();
+    }
+  }
+  unregisterTool(name) {
+    if (this.tools.delete(name)) {
+      this.scheduleListChangedNotification();
+    }
+  }
+  onToolsChanged() {
+    this.scheduleListChangedNotification();
+  }
+  /**
+   * Receive a JSON-RPC frame from a client (called by the transport).
+   * The transport is responsible for sending the response back.
+   */
+  async receive(transport, message) {
+    if (!("method" in message)) return;
+    const isNotification = !("id" in message);
+    if (isNotification) {
+      return;
+    }
+    const request = message;
+    try {
+      const result = await this.handle(request);
+      transport.send({ jsonrpc: "2.0", id: request.id, result });
+    } catch (err) {
+      transport.send({
+        jsonrpc: "2.0",
+        id: request.id,
+        error: this.toRpcError(err)
+      });
+    }
+  }
+  async handle(request) {
+    const { method, params } = request;
+    switch (method) {
+      case "initialize":
+        return {
+          protocolVersion: MCP_PROTOCOL_VERSION,
+          capabilities: this.capabilities,
+          serverInfo: this.info,
+          ...this.instructions ? { instructions: this.instructions } : {}
+        };
+      case "tools/list":
+        return { tools: this.listTools() };
+      case "tools/call": {
+        const name = params?.name;
+        const args = params?.arguments ?? {};
+        if (typeof name !== "string") {
+          throw rpcError(JSONRPC_INVALID_PARAMS, "tools/call requires `name`");
+        }
+        const tool = this.tools.get(name);
+        if (!tool) {
+          throw rpcError(JSONRPC_METHOD_NOT_FOUND, `Unknown tool: ${name}`);
+        }
+        const result = await tool.handler(args);
+        return result;
+      }
+      case "ping":
+        return {};
+      default:
+        throw rpcError(JSONRPC_METHOD_NOT_FOUND, `Unsupported method: ${method}`);
+    }
+  }
+  scheduleListChangedNotification() {
+    if (this.notifyListChangedScheduled) return;
+    this.notifyListChangedScheduled = true;
+    queueMicrotask(() => {
+      this.notifyListChangedScheduled = false;
+      this.broadcast({ jsonrpc: "2.0", method: "notifications/tools/list_changed" });
+    });
+  }
+  broadcast(message) {
+    for (const t of this.transports) t.send(message);
+  }
+  toRpcError(err) {
+    if (err && typeof err === "object" && "code" in err && "message" in err) {
+      return err;
+    }
+    return {
+      code: JSONRPC_INTERNAL_ERROR,
+      message: err instanceof Error ? err.message : String(err)
+    };
+  }
+};
+function rpcError(code, message, data) {
+  return { code, message, ...{} };
+}
+function textResult(text, structured) {
+  return {
+    content: [{ type: "text", text }],
+    ...structured !== void 0 ? { structuredContent: structured } : {}
+  };
+}
+function errorResult(text) {
+  return { content: [{ type: "text", text }], isError: true };
+}
+
+// src/mcp/transports/in-process.ts
+var InProcessTransport = class {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Set();
+  }
+  /** Bind to a server. Called from the client's setup, not directly. */
+  bindServer(server) {
+    this.server = server;
+  }
+  /** Server → client (delivered to subscribed listeners). */
+  send(message) {
+    for (const l of this.listeners) l(message);
+  }
+  /** Client → server. Awaitable so callers can flush. */
+  async deliver(message) {
+    if (!this.server) throw new Error("InProcessTransport has no bound server");
+    await this.server.receive(this, message);
+  }
+  /** Subscribe to messages the server pushes to this client. */
+  onServerMessage(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  close() {
+    this.listeners.clear();
+  }
+};
+function attachInProcess(server) {
+  const transport = new InProcessTransport();
+  transport.bindServer(server);
+  server.attach(transport);
+  return transport;
+}
+
+// src/sharing/token.ts
+var TOKEN_BYTES = 24;
+function createSessionDescriptor() {
+  const id = randomId(8);
+  const token = randomToken();
+  return { id, token, display: token.slice(0, 8) };
+}
+function buildShareUrl(descriptor, baseUrl = typeof window !== "undefined" ? window.location.href.split("?")[0] : "") {
+  const u = new URL(baseUrl);
+  u.searchParams.set("session", descriptor.id);
+  u.searchParams.set("token", descriptor.token);
+  return u.toString();
+}
+function buildShareConfig(descriptor, transport = "broadcast-channel") {
+  return {
+    name: `whiteboard-${descriptor.id}`,
+    transport,
+    session: descriptor.id,
+    token: descriptor.token,
+    channel: `fai:share:${descriptor.id}`,
+    protocol_version: "2025-06-18"
+  };
+}
+function randomToken() {
+  const bytes = new Uint8Array(TOKEN_BYTES);
+  crypto.getRandomValues(bytes);
+  return base64Url(bytes);
+}
+function randomId(len) {
+  const bytes = new Uint8Array(Math.ceil(len * 3 / 4));
+  crypto.getRandomValues(bytes);
+  return base64Url(bytes).slice(0, len);
+}
+function base64Url(bytes) {
+  let s = "";
+  for (const b of bytes) s += String.fromCharCode(b);
+  return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function constantTimeEqual(a, b) {
+  if (a.length !== b.length) return false;
+  let diff = 0;
+  for (let i = 0; i < a.length; i++) diff |= a.charCodeAt(i) ^ b.charCodeAt(i);
+  return diff === 0;
+}
+
+// src/sharing/sse-relay.ts
+var SseRelayTransport = class {
+  constructor(options) {
+    this.sendQueue = [];
+    this.connected = false;
+    this.listeners = /* @__PURE__ */ new Set();
+    this.state = "idle";
+    this.opts = options;
+    this.expectedToken = options.token;
+  }
+  bindServer(server) {
+    this.server = server;
+  }
+  /** Open the SSE channel. Idempotent. */
+  start() {
+    if (this.connected || typeof window === "undefined") return;
+    const url = `${this.opts.baseUrl}/${encodeURIComponent(this.opts.sessionId)}/events?token=${encodeURIComponent(this.opts.token)}`;
+    this.setState("connecting");
+    const es = new EventSource(url, { withCredentials: false });
+    this.es = es;
+    es.addEventListener("open", () => {
+      this.connected = true;
+      this.setState("open");
+      const queued = this.sendQueue.splice(0);
+      for (const msg of queued) this.postOut(msg);
+    });
+    es.addEventListener("mcp", (ev) => {
+      const raw = ev.data;
+      this.handleInbound(raw);
+    });
+    es.addEventListener("error", () => {
+      this.setState("error");
+    });
+  }
+  send(message) {
+    if (!this.connected) {
+      this.sendQueue.push(message);
+      return;
+    }
+    this.postOut(message);
+  }
+  close() {
+    this.es?.close();
+    this.es = void 0;
+    this.connected = false;
+    this.setState("closed");
+  }
+  onStateChange(listener) {
+    this.listeners.add(listener);
+    listener(this.state);
+    return () => this.listeners.delete(listener);
+  }
+  /**
+   * 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
+   * dispatch it to the bound server.
+   */
+  async deliverFromRemote(payload, token) {
+    if (token !== void 0 && !constantTimeEqual(token, this.expectedToken)) return;
+    if (!this.server) throw new Error("SseRelayTransport has no bound server");
+    const message = typeof payload === "string" ? JSON.parse(payload) : payload;
+    await this.server.receive(this, message);
+  }
+  async postOut(message) {
+    const url = `${this.opts.baseUrl}/${encodeURIComponent(this.opts.sessionId)}/outbox?token=${encodeURIComponent(this.opts.token)}`;
+    const f = this.opts.fetch ?? fetch;
+    try {
+      await f(url, {
+        method: "POST",
+        headers: { "content-type": "application/json", "accept": "application/json" },
+        body: JSON.stringify(message)
+      });
+    } catch {
+    }
+  }
+  async handleInbound(raw) {
+    if (!this.server) return;
+    let message;
+    try {
+      message = JSON.parse(raw);
+    } catch {
+      return;
+    }
+    await this.server.receive(this, message);
+  }
+  setState(state) {
+    this.state = state;
+    for (const l of this.listeners) l(state);
+  }
+};
+function attachSseRelay(server, options) {
+  const transport = new SseRelayTransport(options);
+  transport.bindServer(server);
+  server.attach(transport);
+  transport.start();
+  Promise.resolve().then(() => (init_registry(), registry_exports)).then(({ onActivity: onActivity2 }) => {
+    const off = onActivity2((event) => {
+      transport.send({
+        jsonrpc: "2.0",
+        method: "notifications/agent_activity",
+        params: event
+      });
+    });
+    const origClose = transport.close.bind(transport);
+    transport.close = () => {
+      off();
+      origClose();
+    };
+  }).catch(() => {
+  });
+  return transport;
+}
+
+// src/presence/wrap-tool-with-activity.ts
+init_registry();
+function wrapToolWithActivity(handler, options) {
+  return async (args) => {
+    const result = await handler(args);
+    if (result.isError) return result;
+    let target;
+    if (options.resolveTarget) {
+      target = options.resolveTarget({ toolName: options.toolName, args, result });
+    } else {
+      target = { kind: options.kind, screenId: options.screenId };
+    }
+    if (!target) return result;
+    emitActivity({
+      agentId: options.agent.id,
+      agentName: options.agent.name,
+      agentColor: options.agent.color,
+      target: { ...target, kind: target.kind ?? options.kind, screenId: target.screenId ?? options.screenId },
+      action: options.toolName,
+      timestamp: Date.now(),
+      meta: extractMeta(result),
+      ttlMs: options.ttlMs
+    });
+    return result;
+  };
+}
+function extractMeta(result) {
+  const sc = result.structuredContent;
+  if (sc && typeof sc === "object" && !Array.isArray(sc)) {
+    return sc;
+  }
+  return void 0;
+}
+
+// src/undo/undo-stack.ts
+var stacks = /* @__PURE__ */ new Map();
+var CAP = 200;
+function getStack(agentId) {
+  let s = stacks.get(agentId);
+  if (!s) {
+    s = { past: [], future: [] };
+    stacks.set(agentId, s);
+  }
+  return s;
+}
+function pushUndoEntry(agentId, entry) {
+  const s = getStack(agentId);
+  s.past.push(entry);
+  if (s.past.length > CAP) s.past.splice(0, s.past.length - CAP);
+  s.future.length = 0;
+}
+async function undoOne(agentId) {
+  const s = getStack(agentId);
+  const entry = s.past.pop();
+  if (!entry) return null;
+  await entry.undo();
+  s.future.push(entry);
+  return entry;
+}
+async function redoOne(agentId) {
+  const s = getStack(agentId);
+  const entry = s.future.pop();
+  if (!entry) return null;
+  await entry.redo();
+  s.past.push(entry);
+  return entry;
+}
+function readHistory(agentId) {
+  return getStack(agentId).past.slice();
+}
+
+// src/undo/undo-tools.ts
+var installedHosts = /* @__PURE__ */ new WeakSet();
+function ensureUndoToolsRegistered(host, options = {}) {
+  if (installedHosts.has(host)) return;
+  installedHosts.add(host);
+  registerUndoTools(host, options);
+}
+function registerUndoTools(host, options = {}) {
+  const defaultAgent = options.defaultAgentId ?? "agent";
+  const disposers = [];
+  const agentOf = (args) => typeof args?.agentId === "string" ? args.agentId : defaultAgent;
+  disposers.push(
+    host.registerTool(
+      {
+        name: "agent_undo",
+        description: "Undo the most recent action on the agent's stack. Optional agentId targets a specific agent.",
+        inputSchema: {
+          type: "object",
+          properties: { agentId: { type: "string" } },
+          additionalProperties: false
+        }
+      },
+      async (args) => {
+        const entry = await undoOne(agentOf(args));
+        if (!entry) return errorResult("Nothing to undo.");
+        return textResult(`Undid: ${entry.label}`, { entry: serialize(entry) });
+      }
+    )
+  );
+  disposers.push(
+    host.registerTool(
+      {
+        name: "agent_redo",
+        description: "Redo the most recently undone action.",
+        inputSchema: {
+          type: "object",
+          properties: { agentId: { type: "string" } },
+          additionalProperties: false
+        }
+      },
+      async (args) => {
+        const entry = await redoOne(agentOf(args));
+        if (!entry) return errorResult("Nothing to redo.");
+        return textResult(`Redid: ${entry.label}`, { entry: serialize(entry) });
+      }
+    )
+  );
+  disposers.push(
+    host.registerTool(
+      {
+        name: "agent_history",
+        description: "List the agent's undo stack (oldest first). Useful for understanding what's reversible.",
+        inputSchema: {
+          type: "object",
+          properties: { agentId: { type: "string" } },
+          additionalProperties: false
+        }
+      },
+      async (args) => {
+        const history2 = readHistory(agentOf(args)).map(serialize);
+        const text = history2.map((e) => `${new Date(e.timestamp).toISOString()} ${e.bridgeId} ${e.action}: ${e.label}`).join("\n");
+        return textResult(text || "(empty)", history2);
+      }
+    )
+  );
+  return () => disposers.forEach((d) => d());
+}
+function serialize(entry) {
+  return {
+    timestamp: entry.timestamp,
+    bridgeId: entry.bridgeId,
+    action: entry.action,
+    label: entry.label
+  };
+}
+
+// src/bridges/whiteboard.ts
+var DEFAULT_AGENT = { id: "agent", name: "Agent", color: "#a855f7" };
+var VALID_SHAPES = ["rect", "rounded-rect", "ellipse", "diamond", "triangle", "line", "arrow", "text"];
+var num = (v, fallback) => typeof v === "number" && Number.isFinite(v) ? v : fallback ?? 0;
+var str = (v, fallback = "") => typeof v === "string" ? v : fallback;
+var bool = (v, fallback = false) => typeof v === "boolean" ? v : fallback;
+var newId = (prefix) => `${prefix}_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`;
+function registerWhiteboardBridge(host, options) {
+  const { adapter } = options;
+  const agent = { ...DEFAULT_AGENT, ...options.agent ?? {} };
+  const disposers = [];
+  ensureUndoToolsRegistered(host, { defaultAgentId: agent.id });
+  const wbTarget = (args, result) => ({
+    kind: "whiteboard",
+    elementId: result?.structuredContent?.id ?? args?.id
+  });
+  const reg = (name, description, inputProperties, required, handler, resolveTarget) => {
+    const wrapped = async (args) => {
+      try {
+        return await handler(args);
+      } catch (e) {
+        return errorResult(e instanceof Error ? e.message : String(e));
+      }
+    };
+    const final = resolveTarget ? wrapToolWithActivity(wrapped, {
+      toolName: name,
+      agent: { id: agent.id, name: agent.name, color: agent.color },
+      kind: "whiteboard",
+      resolveTarget: ({ args, result }) => resolveTarget(args, result)
+    }) : wrapped;
+    disposers.push(
+      host.registerTool(
+        {
+          name,
+          description,
+          inputSchema: {
+            type: "object",
+            properties: inputProperties,
+            required,
+            additionalProperties: false
+          }
+        },
+        final
+      )
+    );
+  };
+  reg("whiteboard_get_state", "Get the full board state: viewport, all items, strokes.", {}, [], () => {
+    const state = {
+      viewport: adapter.getViewport(),
+      notes: adapter.getNotes(),
+      shapes: adapter.getShapes(),
+      connectors: adapter.getConnectors(),
+      strokes: adapter.getStrokes()
+    };
+    return textResult(JSON.stringify(state, null, 2), state);
+  });
+  reg("whiteboard_list_items", "List notes, shapes, and connectors with id, kind, and bounds.", {}, [], () => {
+    const items = [];
+    for (const n of adapter.getNotes()) {
+      items.push({
+        id: n.id,
+        kind: "sticky",
+        summary: `"${(n.text ?? "").slice(0, 40)}" @(${Math.round(n.x)},${Math.round(n.y)}) ${n.width}\xD7${n.height}`
+      });
+    }
+    for (const s of adapter.getShapes()) {
+      items.push({
+        id: s.id,
+        kind: `shape:${s.shape}`,
+        summary: `${s.text ? `"${s.text}" ` : ""}@(${Math.round(s.x)},${Math.round(s.y)}) ${s.width}\xD7${s.height}`
+      });
+    }
+    for (const c of adapter.getConnectors()) {
+      items.push({ id: c.id, kind: "connector", summary: `from=${JSON.stringify(c.from)} to=${JSON.stringify(c.to)}` });
+    }
+    return textResult(items.map((i) => `${i.kind} ${i.id}: ${i.summary}`).join("\n") || "(empty board)", items);
+  });
+  reg(
+    "whiteboard_get_item",
+    "Get a single item (sticky / shape / connector) by id.",
+    { id: { type: "string" } },
+    ["id"],
+    (args) => {
+      const id = str(args.id);
+      const all = [...adapter.getNotes(), ...adapter.getShapes(), ...adapter.getConnectors()];
+      const found = all.find((x) => x.id === id);
+      if (!found) return errorResult(`No item with id ${id}`);
+      return textResult(JSON.stringify(found, null, 2), found);
+    }
+  );
+  reg(
+    "whiteboard_add_sticky",
+    "Add a sticky note. Position is in world coordinates.",
+    {
+      x: { type: "number" },
+      y: { type: "number" },
+      text: { type: "string" },
+      width: { type: "number" },
+      height: { type: "number" },
+      color: { type: "string", description: "CSS color, e.g. #fde68a" }
+    },
+    ["x", "y"],
+    async (args) => {
+      const x = num(args.x);
+      const y = num(args.y);
+      const width = num(args.width, 180);
+      const height = num(args.height, 140);
+      const note = {
+        id: newId("n"),
+        kind: "sticky",
+        x,
+        y,
+        width,
+        height,
+        text: str(args.text),
+        color: typeof args.color === "string" ? args.color : "#fde68a",
+        authorId: agent.id
+      };
+      adapter.setNotes((all) => [...all, note]);
+      pushUndoEntry(agent.id, {
+        timestamp: Date.now(),
+        bridgeId: "whiteboard",
+        action: "whiteboard_add_sticky",
+        label: `Added sticky ${note.id}`,
+        undo: () => adapter.setNotes((all) => all.filter((n) => n.id !== note.id)),
+        redo: () => adapter.setNotes((all) => [...all, note])
+      });
+      return textResult(`Added sticky ${note.id}`, note);
+    },
+    wbTarget
+  );
+  reg(
+    "whiteboard_stream_text",
+    "Type text into a sticky note character-by-character so the human can read it forming. The tool returns once streaming finishes.",
+    {
+      id: { type: "string" },
+      text: { type: "string" },
+      cps: { type: "number", description: "Characters per second. Default 25." },
+      append: { type: "boolean", description: "Append to existing text instead of replacing. Default false." }
+    },
+    ["id", "text"],
+    async (args) => {
+      const id = str(args.id);
+      const target = str(args.text);
+      const cps = Math.max(1, num(args.cps, 25));
+      const append = bool(args.append);
+      const startNote = adapter.getNotes().find((n) => n.id === id);
+      if (!startNote) return errorResult(`No sticky with id ${id}`);
+      const base = append ? startNote.text ?? "" : "";
+      const interval = Math.max(8, Math.round(1e3 / cps));
+      for (let i = 0; i <= target.length; i++) {
+        const nextText = base + target.slice(0, i);
+        adapter.setNotes((all) => all.map((n) => n.id === id ? { ...n, text: nextText } : n));
+        if (i < target.length) await new Promise((r) => setTimeout(r, interval));
+      }
+      return textResult(`Streamed ${target.length} chars to ${id}`, { id, text: base + target });
+    }
+  );
+  reg(
+    "whiteboard_update_sticky",
+    "Update fields on a sticky note. Only provided fields are changed.",
+    {
+      id: { type: "string" },
+      x: { type: "number" },
+      y: { type: "number" },
+      width: { type: "number" },
+      height: { type: "number" },
+      text: { type: "string" },
+      color: { type: "string" }
+    },
+    ["id"],
+    async (args) => {
+      const id = str(args.id);
+      const existing = adapter.getNotes().find((n) => n.id === id);
+      if (!existing) return errorResult(`No sticky with id ${id}`);
+      const nextX = args.x !== void 0 ? num(args.x) : existing.x;
+      const nextY = args.y !== void 0 ? num(args.y) : existing.y;
+      const nextW = args.width !== void 0 ? num(args.width) : existing.width;
+      const nextH = args.height !== void 0 ? num(args.height) : existing.height;
+      let updated = null;
+      adapter.setNotes(
+        (all) => all.map((n) => {
+          if (n.id !== id) return n;
+          updated = {
+            ...n,
+            x: nextX,
+            y: nextY,
+            width: nextW,
+            height: nextH,
+            ...args.text !== void 0 ? { text: str(args.text) } : {},
+            ...args.color !== void 0 ? { color: str(args.color) } : {}
+          };
+          return updated;
+        })
+      );
+      return textResult(`Updated sticky ${id}`, updated);
+    },
+    wbTarget
+  );
+  reg(
+    "whiteboard_add_shape",
+    `Add a shape. Kind must be one of: ${VALID_SHAPES.join(", ")}.`,
+    {
+      shape: { type: "string", enum: VALID_SHAPES },
+      x: { type: "number" },
+      y: { type: "number" },
+      width: { type: "number" },
+      height: { type: "number" },
+      text: { type: "string" },
+      fill: { type: "string" },
+      stroke: { type: "string" },
+      flipX: { type: "boolean" },
+      flipY: { type: "boolean" }
+    },
+    ["shape", "x", "y", "width", "height"],
+    async (args) => {
+      const kind = str(args.shape);
+      if (!VALID_SHAPES.includes(kind)) return errorResult(`Invalid shape kind: ${kind}`);
+      const x = num(args.x);
+      const y = num(args.y);
+      const width = num(args.width);
+      const height = num(args.height);
+      const shape = {
+        id: newId("s"),
+        kind: "shape",
+        shape: kind,
+        x,
+        y,
+        width,
+        height,
+        ...args.text !== void 0 ? { text: str(args.text) } : {},
+        ...args.fill !== void 0 ? { fill: str(args.fill) } : {},
+        ...args.stroke !== void 0 ? { stroke: str(args.stroke) } : {},
+        ...args.flipX !== void 0 ? { flipX: bool(args.flipX) } : {},
+        ...args.flipY !== void 0 ? { flipY: bool(args.flipY) } : {}
+      };
+      adapter.setShapes((all) => [...all, shape]);
+      return textResult(`Added ${kind} ${shape.id}`, shape);
+    },
+    wbTarget
+  );
+  reg(
+    "whiteboard_update_shape",
+    "Update fields on a shape.",
+    {
+      id: { type: "string" },
+      x: { type: "number" },
+      y: { type: "number" },
+      width: { type: "number" },
+      height: { type: "number" },
+      text: { type: "string" },
+      fill: { type: "string" },
+      stroke: { type: "string" }
+    },
+    ["id"],
+    async (args) => {
+      const id = str(args.id);
+      const existing = adapter.getShapes().find((s) => s.id === id);
+      if (!existing) return errorResult(`No shape with id ${id}`);
+      const nextX = args.x !== void 0 ? num(args.x) : existing.x;
+      const nextY = args.y !== void 0 ? num(args.y) : existing.y;
+      const nextW = args.width !== void 0 ? num(args.width) : existing.width;
+      const nextH = args.height !== void 0 ? num(args.height) : existing.height;
+      let updated = null;
+      adapter.setShapes(
+        (all) => all.map((s) => {
+          if (s.id !== id) return s;
+          updated = {
+            ...s,
+            x: nextX,
+            y: nextY,
+            width: nextW,
+            height: nextH,
+            ...args.text !== void 0 ? { text: str(args.text) } : {},
+            ...args.fill !== void 0 ? { fill: str(args.fill) } : {},
+            ...args.stroke !== void 0 ? { stroke: str(args.stroke) } : {}
+          };
+          return updated;
+        })
+      );
+      return textResult(`Updated shape ${id}`, updated);
+    },
+    wbTarget
+  );
+  reg(
+    "whiteboard_add_connector",
+    "Connect two items by id, or specify explicit world-space points.",
+    {
+      from: { description: "Item id (string) or {x,y}" },
+      to: { description: "Item id (string) or {x,y}" },
+      color: { type: "string" }
+    },
+    ["from", "to"],
+    (args) => {
+      const c = {
+        id: newId("c"),
+        kind: "connector",
+        from: args.from,
+        to: args.to,
+        ...args.color !== void 0 ? { color: str(args.color) } : {}
+      };
+      adapter.setConnectors((all) => [...all, c]);
+      return textResult(`Added connector ${c.id}`, c);
+    },
+    wbTarget
+  );
+  reg(
+    "whiteboard_add_stroke",
+    "Add a freeform pen stroke. Points are absolute screen coords (matching the Drawing layer).",
+    {
+      points: {
+        type: "array",
+        description: "Array of {x,y} points"
+      },
+      color: { type: "string" },
+      size: { type: "number" }
+    },
+    ["points"],
+    (args) => {
+      const points = (Array.isArray(args.points) ? args.points : []).map((p) => ({
+        x: num(p?.x),
+        y: num(p?.y)
+      }));
+      if (!points.length) return errorResult("Stroke requires at least one point");
+      const stroke = {
+        id: newId("st"),
+        points,
+        color: typeof args.color === "string" ? args.color : "#0f172a",
+        size: typeof args.size === "number" ? args.size : 2,
+        authorId: agent.id
+      };
+      adapter.setStrokes((all) => [...all, stroke]);
+      return textResult(`Added stroke ${stroke.id} (${points.length} points)`, stroke);
+    },
+    wbTarget
+  );
+  reg(
+    "whiteboard_delete_item",
+    "Remove any item by id (sticky / shape / connector / stroke).",
+    { id: { type: "string" } },
+    ["id"],
+    (args) => {
+      const id = str(args.id);
+      const removedNotes = adapter.getNotes().filter((x) => x.id === id);
+      const removedShapes = adapter.getShapes().filter((x) => x.id === id);
+      const removedConnectors = adapter.getConnectors().filter((x) => x.id === id);
+      const removedStrokes = adapter.getStrokes().filter((x) => x.id === id);
+      const removed = removedNotes.length + removedShapes.length + removedConnectors.length + removedStrokes.length > 0;
+      if (!removed) return errorResult(`No item with id ${id}`);
+      adapter.setNotes((all) => all.filter((x) => x.id !== id));
+      adapter.setShapes((all) => all.filter((x) => x.id !== id));
+      adapter.setConnectors((all) => all.filter((x) => x.id !== id));
+      adapter.setStrokes((all) => all.filter((x) => x.id !== id));
+      pushUndoEntry(agent.id, {
+        timestamp: Date.now(),
+        bridgeId: "whiteboard",
+        action: "whiteboard_delete_item",
+        label: `Deleted ${id}`,
+        undo: () => {
+          if (removedNotes.length) adapter.setNotes((all) => [...all, ...removedNotes]);
+          if (removedShapes.length) adapter.setShapes((all) => [...all, ...removedShapes]);
+          if (removedConnectors.length) adapter.setConnectors((all) => [...all, ...removedConnectors]);
+          if (removedStrokes.length) adapter.setStrokes((all) => [...all, ...removedStrokes]);
+        },
+        redo: () => {
+          adapter.setNotes((all) => all.filter((x) => x.id !== id));
+          adapter.setShapes((all) => all.filter((x) => x.id !== id));
+          adapter.setConnectors((all) => all.filter((x) => x.id !== id));
+          adapter.setStrokes((all) => all.filter((x) => x.id !== id));
+        }
+      });
+      return textResult(`Deleted ${id}`);
+    },
+    wbTarget
+  );
+  reg(
+    "whiteboard_set_viewport",
+    "Pan / zoom the viewport.",
+    { x: { type: "number" }, y: { type: "number" }, zoom: { type: "number" } },
+    [],
+    (args) => {
+      const v = adapter.getViewport();
+      const next = {
+        x: args.x !== void 0 ? num(args.x) : v.x,
+        y: args.y !== void 0 ? num(args.y) : v.y,
+        zoom: args.zoom !== void 0 ? num(args.zoom) : v.zoom
+      };
+      adapter.setViewport(next);
+      return textResult(`Viewport \u2192 ${JSON.stringify(next)}`, next);
+    },
+    wbTarget
+  );
+  reg(
+    "whiteboard_set_agent_cursor",
+    "Move the agent's presence cursor (or pass null to hide it).",
+    {
+      x: { type: "number" },
+      y: { type: "number" },
+      hide: { type: "boolean" }
+    },
+    [],
+    (args) => {
+      if (!adapter.setAgentCursor) return errorResult("Host did not provide setAgentCursor");
+      if (bool(args.hide)) {
+        adapter.setAgentCursor(null);
+        return textResult("Agent cursor hidden");
+      }
+      const cursor = {
+        userId: agent.id,
+        name: agent.name,
+        color: agent.color,
+        x: num(args.x),
+        y: num(args.y)
+      };
+      adapter.setAgentCursor(cursor);
+      return textResult(`Cursor \u2192 (${cursor.x}, ${cursor.y})`, cursor);
+    },
+    wbTarget
+  );
+  return {
+    id: "whiteboard",
+    title: "Whiteboard",
+    dispose: () => {
+      for (const d of disposers) d();
+      adapter.setAgentCursor?.(null);
+    }
+  };
+}
+function ShareControls({
+  session,
+  onStart,
+  onStop,
+  status,
+  shareBaseUrl,
+  className,
+  style
+}) {
+  const [tab, setTab] = react.useState("url");
+  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." })
+    ] });
+  }
+  const url = buildShareUrl(session, shareBaseUrl);
+  const config = buildShareConfig(session);
+  const curl = buildCurlRecipe(session);
+  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: [
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Sharing" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "fai-share__id", children: [
+          "session ",
+          /* @__PURE__ */ jsxRuntime.jsx("code", { children: session.id }),
+          " \xB7 token ",
+          /* @__PURE__ */ jsxRuntime.jsxs("code", { children: [
+            session.display,
+            "\u2026"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fai-share__header-actions", children: [
+        status && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fai-share__status", children: status }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "fai-share__stop", onClick: onStop, children: "Stop" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fai-share__tabs", role: "tablist", children: [
+      /* @__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 === "url" && /* @__PURE__ */ jsxRuntime.jsx(CopyBox, { label: "Open this URL in another tab to join the session", value: url }),
+      tab === "json" && /* @__PURE__ */ jsxRuntime.jsx(
+        CopyBox,
+        {
+          label: "Paste into Claude Desktop / Cline MCP server config",
+          value: JSON.stringify(config, null, 2)
+        }
+      ),
+      tab === "curl" && /* @__PURE__ */ jsxRuntime.jsx(
+        CopyBox,
+        {
+          label: "Connect from a terminal (verifies the relay is reachable)",
+          value: curl,
+          multiline: true
+        }
+      )
+    ] })
+  ] });
+}
+function TabButton({ tab, active, setTab, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": tab === active,
+      className: `fai-share__tab${tab === active ? " is-active" : ""}`,
+      onClick: () => setTab(tab),
+      children
+    }
+  );
+}
+function CopyBox({ label, value, multiline }) {
+  const [copied, setCopied] = react.useState(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fai-share__panel-label", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fai-share__copy", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { className: `fai-share__pre${multiline ? " is-multi" : ""}`, children: value }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "fai-share__copy-btn", onClick: copy, children: copied ? "Copied" : "Copy" })
+    ] })
+  ] });
+}
+function buildCurlRecipe(session) {
+  const base = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.host}` : "http://localhost";
+  const inbox = `${base}/whiteboard-share/${session.id}/inbox?token=${session.token}`;
+  const events = `${base}/whiteboard-share/${session.id}/events?token=${session.token}`;
+  return [
+    `# 1) In one terminal, subscribe to server-pushed frames (SSE)`,
+    `curl -N "${events}"`,
+    ``,
+    `# 2) In another terminal, send an initialize handshake`,
+    `curl -X POST "${inbox}" \\`,
+    `  -H 'content-type: application/json' \\`,
+    `  -d '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{}}'`,
+    ``,
+    `# 3) List the tools the bridge exposes`,
+    `curl -X POST "${inbox}" \\`,
+    `  -H 'content-type: application/json' \\`,
+    `  -d '{"jsonrpc":"2.0","id":2,"method":"tools/list"}'`,
+    ``,
+    `# 4) Add a sticky note`,
+    `curl -X POST "${inbox}" \\`,
+    `  -H 'content-type: application/json' \\`,
+    `  -d '{"jsonrpc":"2.0","id":3,"method":"tools/call","params":{"name":"whiteboard_add_sticky","arguments":{"x":300,"y":300,"text":"hello from curl"}}}'`
+  ].join("\n");
+}
+function AgentPanel({ agent, activity, onSubmit, busy, actions, className, style }) {
+  const scrollRef = react.useRef(null);
+  const inputRef = react.useRef(null);
+  react.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollTop = el.scrollHeight;
+  }, [activity.length]);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const value = inputRef.current?.value.trim();
+    if (!value || !onSubmit) return;
+    onSubmit(value);
+    if (inputRef.current) inputRef.current.value = "";
+  };
+  const color = agent?.color ?? "#a855f7";
+  const name = agent?.name ?? "Agent";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["fai-panel", className ?? ""].filter(Boolean).join(" "), style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "fai-panel__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "fai-panel__avatar",
+          style: { background: color },
+          "aria-hidden": true,
+          children: name.slice(0, 1)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fai-panel__title", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: name }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fai-panel__subtitle", children: busy ? "Working\u2026" : `${activity.length} event${activity.length === 1 ? "" : "s"}` })
+      ] }),
+      actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fai-panel__actions", children: actions })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "fai-panel__stream", children: activity.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "fai-panel__empty", children: "No activity yet." }) : activity.map((a) => /* @__PURE__ */ jsxRuntime.jsx(ActivityRow, { item: a }, a.id)) }),
+    onSubmit && /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "fai-panel__composer", onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          ref: inputRef,
+          className: "fai-panel__input",
+          placeholder: busy ? "Working\u2026" : "Ask the agent\u2026",
+          disabled: busy,
+          rows: 2,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              handleSubmit(e);
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: "fai-panel__send", disabled: busy, children: "Send" })
+    ] })
+  ] });
+}
+function ActivityRow({ item }) {
+  const time = formatTime(item.at);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `fai-row fai-row--${item.kind}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fai-row__meta", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fai-row__source", children: item.source }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fai-row__time", children: time })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fai-row__text", children: item.text }),
+    item.detail !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "fai-row__detail", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("summary", { children: "details" }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { children: safeJson(item.detail) })
+    ] })
+  ] });
+}
+function formatTime(at) {
+  const d = new Date(at);
+  const hh = d.getHours().toString().padStart(2, "0");
+  const mm = d.getMinutes().toString().padStart(2, "0");
+  const ss = d.getSeconds().toString().padStart(2, "0");
+  return `${hh}:${mm}:${ss}`;
+}
+function safeJson(v) {
+  try {
+    return JSON.stringify(v, null, 2);
+  } catch {
+    return String(v);
+  }
+}
+function AgentCursor({ x, y, name, color = "#a855f7", status, className, style }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ["fai-cursor", className ?? ""].filter(Boolean).join(" "),
+      style: {
+        position: "absolute",
+        left: x,
+        top: y,
+        pointerEvents: "none",
+        transform: "translate(-2px, -2px)",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M2 2 L2 17 L7 13 L10 19 L12 18 L9 12 L15 12 Z",
+            fill: color,
+            stroke: "white",
+            strokeWidth: "1.2"
+          }
+        ) }),
+        name && /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: "fai-cursor__tag",
+            style: { background: color },
+            children: [
+              name,
+              status ? /* @__PURE__ */ jsxRuntime.jsxs("em", { className: "fai-cursor__status", children: [
+                " \xB7 ",
+                status
+              ] }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function AgentActivityHighlight({
+  x,
+  y,
+  width,
+  height,
+  pulseKey,
+  color = "#a855f7",
+  duration = 1200,
+  className,
+  style
+}) {
+  const [visible, setVisible] = react.useState(false);
+  react.useEffect(() => {
+    if (pulseKey === void 0) return;
+    setVisible(true);
+    const t = setTimeout(() => setVisible(false), duration);
+    return () => clearTimeout(t);
+  }, [pulseKey, duration]);
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: ["fai-highlight", className ?? ""].filter(Boolean).join(" "),
+      style: {
+        position: "absolute",
+        left: x - 4,
+        top: y - 4,
+        width: width + 8,
+        height: height + 8,
+        borderRadius: 8,
+        boxShadow: `0 0 0 2px ${color}, 0 0 16px ${color}66`,
+        pointerEvents: "none",
+        animation: `fai-pulse ${duration}ms ease-out forwards`,
+        ...style
+      }
+    }
+  );
+}
+var DEFAULT_AGENT2 = { id: "agent", name: "Agent", color: "#a855f7" };
+function SharedWhiteboard({
+  initialNotes = [],
+  initialShapes = [],
+  initialConnectors = [],
+  initialStrokes = [],
+  initialViewport = { x: 0, y: 0, zoom: 1 },
+  agent = DEFAULT_AGENT2,
+  shareBaseUrl = "/whiteboard-share",
+  onRegisterSession,
+  showAgentPanel = true,
+  showShareControls = true,
+  broadcastEdits = true,
+  height = 640,
+  header,
+  className,
+  style
+}) {
+  const [notes, setNotes] = react.useState(initialNotes);
+  const [shapes, setShapes] = react.useState(initialShapes);
+  const [connectors, setConnectors] = react.useState(initialConnectors);
+  const [strokes, setStrokes] = react.useState(initialStrokes);
+  const [viewport, setViewport] = react.useState(initialViewport);
+  const [agentCursor, setAgentCursor] = react.useState(null);
+  const [activity, setActivity] = react.useState([]);
+  const [highlight, setHighlight] = react.useState(null);
+  const stateRefs = react.useRef({ notes, shapes, connectors, strokes, viewport });
+  react.useEffect(() => {
+    stateRefs.current = { notes, shapes, connectors, strokes, viewport };
+  }, [notes, shapes, connectors, strokes, viewport]);
+  const serverRef = react.useRef(null);
+  const inProcRef = react.useRef(null);
+  const bridgeRef = react.useRef(null);
+  react.useEffect(() => {
+    const server = new MicroMcpServer({
+      info: { name: "shared-whiteboard", version: "0.2.0" },
+      instructions: "Collaborative whiteboard. Use whiteboard_* tools to read or modify the board."
+    });
+    bridgeRef.current = registerWhiteboardBridge(server, {
+      adapter: {
+        getNotes: () => stateRefs.current.notes,
+        setNotes: (next) => setNotes(typeof next === "function" ? next : () => next),
+        getShapes: () => stateRefs.current.shapes,
+        setShapes: (next) => setShapes(typeof next === "function" ? next : () => next),
+        getConnectors: () => stateRefs.current.connectors,
+        setConnectors: (next) => setConnectors(typeof next === "function" ? next : () => next),
+        getStrokes: () => stateRefs.current.strokes,
+        setStrokes: (next) => setStrokes(typeof next === "function" ? next : () => next),
+        getViewport: () => stateRefs.current.viewport,
+        setViewport,
+        setAgentCursor
+      },
+      agent
+    });
+    inProcRef.current = attachInProcess(server);
+    serverRef.current = server;
+    const off = inProcRef.current.onServerMessage((msg) => {
+      if (msg?.id !== void 0 && "result" in msg && msg.result?.structuredContent?.id) {
+        const id = msg.result.structuredContent.id;
+        requestAnimationFrame(() => pulseFor(id));
+      }
+    });
+    return () => {
+      off();
+      bridgeRef.current?.dispose();
+      bridgeRef.current = null;
+      if (inProcRef.current) server.detach(inProcRef.current);
+    };
+  }, []);
+  const pulseFor = (id) => {
+    const n = stateRefs.current.notes.find((x) => x.id === id);
+    if (n) return setHighlight({ pulseKey: Date.now(), bounds: { x: n.x, y: n.y, width: n.width, height: n.height } });
+    const s = stateRefs.current.shapes.find((x) => x.id === id);
+    if (s) return setHighlight({ pulseKey: Date.now(), bounds: { x: s.x, y: s.y, width: s.width, height: s.height } });
+  };
+  const log = react.useCallback((entry) => {
+    setActivity((all) => [...all.slice(-200), { id: `a_${Date.now()}_${all.length}`, at: Date.now(), ...entry }]);
+  }, []);
+  const [session, setSession] = react.useState(null);
+  const [relayState, setRelayState] = react.useState("idle");
+  const sseRef = react.useRef(null);
+  const logEsRef = react.useRef(null);
+  const startShare = async () => {
+    if (session || !serverRef.current || !shareBaseUrl) return;
+    const desc = createSessionDescriptor();
+    try {
+      if (onRegisterSession) {
+        await onRegisterSession(desc);
+      } else {
+        const csrf = document.querySelector('meta[name="csrf-token"]')?.content ?? "";
+        const reg = await fetch(`${shareBaseUrl}/register`, {
+          method: "POST",
+          headers: { "content-type": "application/json", "x-csrf-token": csrf, accept: "application/json" },
+          body: JSON.stringify({ session: desc.id, token: desc.token })
+        });
+        if (!reg.ok) throw new Error(`registration failed (HTTP ${reg.status})`);
+      }
+    } catch (e) {
+      log({ kind: "error", source: "share", text: e instanceof Error ? e.message : String(e) });
+      return;
+    }
+    const relay = attachSseRelay(serverRef.current, {
+      baseUrl: shareBaseUrl,
+      sessionId: desc.id,
+      token: desc.token
+    });
+    sseRef.current = relay;
+    relay.onStateChange(setRelayState);
+    const es = new EventSource(`${shareBaseUrl}/${desc.id}/events?token=${desc.token}&direction=inbound`);
+    es.addEventListener("mcp", (ev) => {
+      try {
+        const frame = JSON.parse(ev.data);
+        if (frame.method === "notifications/peer_joined") {
+          setAgentCursor((c) => c ?? { userId: agent.id, name: agent.name, color: agent.color, x: 60, y: 60 });
+          log({ kind: "info", source: "presence", text: `${agent.name ?? "Agent"} connected` });
+          return;
+        }
+        if (frame.method === "notifications/peer_left") {
+          setAgentCursor(null);
+          log({ kind: "info", source: "presence", text: `${agent.name ?? "Agent"} disconnected` });
+          return;
+        }
+        if (frame.method === "notifications/agent_message") {
+          log({ kind: "message", source: agent.name ?? "Agent", text: String(frame.params?.text ?? "") });
+        } else if (frame.method === "notifications/agent_status") {
+          log({ kind: "info", source: agent.name ?? "Agent", text: String(frame.params?.text ?? "") });
+        } else if (frame.method?.startsWith("notifications/")) {
+        } else {
+          log({ kind: "tool", source: "remote", text: `\u2190 ${frame.method ?? `id:${frame.id}`}`, detail: frame });
+        }
+      } catch {
+      }
+    });
+    logEsRef.current = es;
+    setSession(desc);
+    log({ kind: "info", source: "share", text: `Sharing started \xB7 session ${desc.id}` });
+  };
+  const stopShare = async () => {
+    if (!session) return;
+    const desc = session;
+    setSession(null);
+    logEsRef.current?.close();
+    logEsRef.current = null;
+    if (sseRef.current && serverRef.current) serverRef.current.detach(sseRef.current);
+    sseRef.current = null;
+    setRelayState("closed");
+    if (shareBaseUrl) {
+      const csrf = document.querySelector('meta[name="csrf-token"]')?.content ?? "";
+      await fetch(`${shareBaseUrl}/${desc.id}/unregister?token=${encodeURIComponent(desc.token)}`, {
+        method: "POST",
+        headers: { "x-csrf-token": csrf, accept: "application/json" }
+      }).catch(() => {
+      });
+    }
+    log({ kind: "info", source: "share", text: "Sharing stopped." });
+  };
+  const lastBroadcastRef = react.useRef(0);
+  react.useEffect(() => {
+    if (!broadcastEdits || !sseRef.current || !session) return;
+    const now = Date.now();
+    if (now - lastBroadcastRef.current < 80) return;
+    lastBroadcastRef.current = now;
+    sseRef.current.send({
+      jsonrpc: "2.0",
+      method: "notifications/state_update",
+      params: { notes, shapes, connectors, viewport, ts: now }
+    });
+  }, [notes, shapes, connectors, viewport, session, broadcastEdits]);
+  const handleSubmit = (text) => {
+    if (!sseRef.current) {
+      log({ kind: "error", source: "you", text: "Start a shared session first." });
+      return;
+    }
+    sseRef.current.send({
+      jsonrpc: "2.0",
+      method: "notifications/user_message",
+      params: { text, ts: Date.now() }
+    });
+    log({ kind: "message", source: "You", text });
+  };
+  const cursors = react.useMemo(() => [], []);
+  const statusText = (() => {
+    switch (relayState) {
+      case "open":
+        return "live";
+      case "connecting":
+        return "connecting\u2026";
+      case "error":
+        return "error";
+      case "closed":
+        return "closed";
+      default:
+        return void 0;
+    }
+  })();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["fai-shared-whiteboard", className ?? ""].filter(Boolean).join(" "), style, children: [
+    header,
+    showShareControls && shareBaseUrl !== null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fai-shared-whiteboard__controls", children: /* @__PURE__ */ jsxRuntime.jsx(ShareControls, { session, onStart: startShare, onStop: stopShare, status: statusText }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "fai-shared-whiteboard__layout",
+        style: {
+          display: "grid",
+          gap: 16,
+          gridTemplateColumns: showAgentPanel ? "1fr 360px" : "1fr"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "fai-shared-whiteboard__board",
+              style: {
+                position: "relative",
+                overflow: "hidden",
+                borderRadius: 12,
+                border: "1px solid #e4e4e7",
+                background: "radial-gradient(circle at 1px 1px, rgba(0,0,0,0.07) 1px, transparent 0)",
+                backgroundSize: "20px 20px",
+                height
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsxs(fancyWhiteboard.Board, { viewport, onViewportChange: setViewport, style: { width: "100%", height: "100%" }, children: [
+                connectors.map((c) => {
+                  const a = resolveCenter(c.from, notes, shapes);
+                  const b = resolveCenter(c.to, notes, shapes);
+                  if (!a || !b) return null;
+                  return /* @__PURE__ */ jsxRuntime.jsx(fancyWhiteboard.Connector, { from: a, to: b, color: c.color ?? "#64748b" }, c.id);
+                }),
+                shapes.map((s) => /* @__PURE__ */ jsxRuntime.jsx(fancyWhiteboard.Shape, { item: s, onChange: (next) => setShapes((all) => all.map((x) => x.id === next.id ? next : x)) }, s.id)),
+                notes.map((n) => /* @__PURE__ */ jsxRuntime.jsx(fancyWhiteboard.StickyNote, { item: n, onChange: (next) => setNotes((all) => all.map((x) => x.id === next.id ? next : x)) }, n.id)),
+                /* @__PURE__ */ jsxRuntime.jsx(fancyWhiteboard.CursorLayer, { cursors }),
+                agentCursor && /* @__PURE__ */ jsxRuntime.jsx(AgentCursor, { x: agentCursor.x, y: agentCursor.y, name: agentCursor.name, color: agentCursor.color }),
+                highlight && /* @__PURE__ */ jsxRuntime.jsx(
+                  AgentActivityHighlight,
+                  {
+                    x: highlight.bounds.x,
+                    y: highlight.bounds.y,
+                    width: highlight.bounds.width,
+                    height: highlight.bounds.height,
+                    color: agent.color ?? "#a855f7",
+                    pulseKey: highlight.pulseKey
+                  }
+                )
+              ] })
+            }
+          ),
+          showAgentPanel && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            AgentPanel,
+            {
+              agent,
+              activity,
+              onSubmit: handleSubmit
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function resolveCenter(ref, notes, shapes) {
+  if (typeof ref === "string") {
+    const n = notes.find((x) => x.id === ref);
+    if (n) return { x: n.x + n.width / 2, y: n.y + n.height / 2 };
+    const s = shapes.find((x) => x.id === ref);
+    if (s) return { x: s.x + s.width / 2, y: s.y + s.height / 2 };
+    return null;
+  }
+  return ref;
+}
+
+exports.SharedWhiteboard = SharedWhiteboard;
+//# sourceMappingURL=components-shared-whiteboard.cjs.map
+//# sourceMappingURL=components-shared-whiteboard.cjs.map