feat(chat): multi-tab coordination via BroadcastChannel

Author: ericallam

packages/trigger-sdk/src/v3/chat-react.ts

@@ -103,9 +103,72 @@ export function useTriggerChatTransport<TTask extends AnyTask = AnyTask>(
     ref.current?.setTriggerTask(triggerTask);
   }, [triggerTask]);
 
+  // Note: dispose() is NOT called in effect cleanup because React strict mode
+  // runs cleanup+re-setup, but the transport lives in a ref and isn't recreated.
+  // Calling dispose() would permanently close the BroadcastChannel.
+  // The coordinator's beforeunload handler handles tab close cleanup instead.
+
   return ref.current;
 }
 
+/**
+ * Sync chat messages across browser tabs.
+ *
+ * Requires `multiTab: true` on the transport. Handles:
+ * - Tracking read-only state (`isReadOnly`) when another tab is active
+ * - Broadcasting messages from the active tab to other tabs
+ * - Receiving messages from other tabs and updating local state via `setMessages`
+ *
+ * @example
+ * ```tsx
+ * const transport = useTriggerChatTransport({ task: "my-chat", multiTab: true, accessToken });
+ * const { messages, setMessages } = useChat({ id: chatId, transport });
+ * const { isReadOnly } = useMultiTabChat(transport, chatId, messages, setMessages);
+ *
+ * <input disabled={isReadOnly} placeholder={isReadOnly ? "Active in another tab" : "Type a message..."} />
+ * ```
+ */
+export function useMultiTabChat<T = unknown>(
+  transport: TriggerChatTransport,
+  chatId: string,
+  messages: T[],
+  setMessages: (messages: T[]) => void
+): { isReadOnly: boolean } {
+  const [isReadOnly, setIsReadOnly] = useState(() => transport.isReadOnly(chatId));
+
+  // Track read-only state
+  useEffect(() => {
+    const listener = (id: string, readOnly: boolean) => {
+      if (id === chatId) setIsReadOnly(readOnly);
+    };
+    transport.addReadOnlyListener(listener);
+    setIsReadOnly(transport.isReadOnly(chatId));
+    return () => transport.removeReadOnlyListener(listener);
+  }, [transport, chatId]);
+
+  // Active tab: broadcast messages to other tabs on change.
+  // Only broadcast when THIS tab holds the claim (is the current sender).
+  // Using !isReadOnly alone causes a feedback loop when both tabs are idle.
+  useEffect(() => {
+    if (transport.hasClaim(chatId) && messages.length > 0) {
+      transport.broadcastMessages(chatId, messages as unknown[]);
+    }
+  }, [transport, chatId, messages]);
+
+  // Read-only tab: receive messages from the active tab
+  useEffect(() => {
+    const listener = (id: string, msgs: unknown[]) => {
+      if (id === chatId) {
+        setMessages(msgs as T[]);
+      }
+    };
+    transport.addMessagesListener(listener);
+    return () => transport.removeMessagesListener(listener);
+  }, [transport, chatId, setMessages]);
+
+  return { isReadOnly };
+}
+
 // ---------------------------------------------------------------------------
 // usePendingMessages — manage steering messages during streaming
 // ---------------------------------------------------------------------------

packages/trigger-sdk/src/v3/chat-tab-coordinator.test.ts

@@ -0,0 +1,176 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { ChatTabCoordinator } from "./chat-tab-coordinator.js";
+
+// Mock BroadcastChannel for testing
+class MockBroadcastChannel {
+  static instances: MockBroadcastChannel[] = [];
+  onmessage: ((event: MessageEvent) => void) | null = null;
+  closed = false;
+
+  constructor(public name: string) {
+    MockBroadcastChannel.instances.push(this);
+  }
+
+  postMessage(data: unknown): void {
+    if (this.closed) return;
+    // Deliver to all OTHER instances on the same channel
+    for (const instance of MockBroadcastChannel.instances) {
+      if (instance !== this && instance.name === this.name && !instance.closed) {
+        instance.onmessage?.({ data } as MessageEvent);
+      }
+    }
+  }
+
+  close(): void {
+    this.closed = true;
+    MockBroadcastChannel.instances = MockBroadcastChannel.instances.filter((i) => i !== this);
+  }
+}
+
+describe("ChatTabCoordinator", () => {
+  beforeEach(() => {
+    MockBroadcastChannel.instances = [];
+    vi.stubGlobal("BroadcastChannel", MockBroadcastChannel);
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  it("tab A claims, tab B sees isReadOnly", () => {
+    const a = new ChatTabCoordinator();
+    const b = new ChatTabCoordinator();
+
+    expect(b.isReadOnly("chat-1")).toBe(false);
+
+    a.claim("chat-1");
+
+    expect(b.isReadOnly("chat-1")).toBe(true);
+    expect(a.isReadOnly("chat-1")).toBe(false); // Owner is not read-only
+
+    a.dispose();
+    b.dispose();
+  });
+
+  it("tab A releases, tab B sees isReadOnly = false", () => {
+    const a = new ChatTabCoordinator();
+    const b = new ChatTabCoordinator();
+
+    a.claim("chat-1");
+    expect(b.isReadOnly("chat-1")).toBe(true);
+
+    a.release("chat-1");
+    expect(b.isReadOnly("chat-1")).toBe(false);
+
+    a.dispose();
+    b.dispose();
+  });
+
+  it("fires listener on claim and release", () => {
+    const a = new ChatTabCoordinator();
+    const b = new ChatTabCoordinator();
+    const listener = vi.fn();
+    b.addListener(listener);
+
+    a.claim("chat-1");
+    expect(listener).toHaveBeenCalledWith("chat-1", true);
+
+    a.release("chat-1");
+    expect(listener).toHaveBeenCalledWith("chat-1", false);
+
+    a.dispose();
+    b.dispose();
+  });
+
+  it("removeListener stops notifications", () => {
+    const a = new ChatTabCoordinator();
+    const b = new ChatTabCoordinator();
+    const listener = vi.fn();
+    b.addListener(listener);
+    b.removeListener(listener);
+
+    a.claim("chat-1");
+    expect(listener).not.toHaveBeenCalled();
+
+    a.dispose();
+    b.dispose();
+  });
+
+  it("claim returns false when another tab holds the chatId", () => {
+    const a = new ChatTabCoordinator();
+    const b = new ChatTabCoordinator();
+
+    expect(a.claim("chat-1")).toBe(true);
+    expect(b.claim("chat-1")).toBe(false);
+
+    a.dispose();
+    b.dispose();
+  });
+
+  it("supports multiple independent chatIds", () => {
+    const a = new ChatTabCoordinator();
+    const b = new ChatTabCoordinator();
+
+    a.claim("chat-1");
+    b.claim("chat-2");
+
+    expect(a.isReadOnly("chat-1")).toBe(false);
+    expect(a.isReadOnly("chat-2")).toBe(true);
+    expect(b.isReadOnly("chat-1")).toBe(true);
+    expect(b.isReadOnly("chat-2")).toBe(false);
+
+    a.dispose();
+    b.dispose();
+  });
+
+  it("heartbeat timeout clears stale claim from crashed tab", () => {
+    const a = new ChatTabCoordinator();
+    const b = new ChatTabCoordinator();
+    const listener = vi.fn();
+    b.addListener(listener);
+
+    a.claim("chat-1");
+    expect(b.isReadOnly("chat-1")).toBe(true);
+
+    // Simulate tab A crashing (close its channel, stop heartbeats)
+    a.dispose();
+
+    // Advance past heartbeat timeout (10s)
+    vi.advanceTimersByTime(11_000);
+
+    expect(b.isReadOnly("chat-1")).toBe(false);
+    expect(listener).toHaveBeenCalledWith("chat-1", false);
+
+    b.dispose();
+  });
+
+  it("dispose releases all claims", () => {
+    const a = new ChatTabCoordinator();
+    const b = new ChatTabCoordinator();
+
+    a.claim("chat-1");
+    a.claim("chat-2");
+    expect(b.isReadOnly("chat-1")).toBe(true);
+    expect(b.isReadOnly("chat-2")).toBe(true);
+
+    a.dispose();
+    expect(b.isReadOnly("chat-1")).toBe(false);
+    expect(b.isReadOnly("chat-2")).toBe(false);
+
+    b.dispose();
+  });
+
+  it("gracefully degrades when BroadcastChannel is unavailable", () => {
+    vi.stubGlobal("BroadcastChannel", undefined);
+
+    const coord = new ChatTabCoordinator();
+
+    // All operations are no-ops
+    expect(coord.claim("chat-1")).toBe(true);
+    expect(coord.isReadOnly("chat-1")).toBe(false);
+    coord.release("chat-1"); // No error
+    coord.dispose(); // No error
+  });
+});