Function useCollaboration

web/hooks/useCollaboration.ts:34–348

({
  sessionId,
  currentUser,
  wsUrl,
}: UseCollaborationOptions)

// ─── Hook ─────────────────────────────────────────────────────────────────────

export function useCollaboration({
  sessionId,
  currentUser,
  wsUrl,
}: UseCollaborationOptions) {
  const socketRef = useRef<CollabSocket | null>(null);
  const [state, setState] = useState<CollaborationState>({
    isConnected: false,
    myRole: null,
    pendingToolUses: [],
    annotations: {},
    toolApprovalPolicy: "any-collaborator",
  });

  const effectiveWsUrl =
    wsUrl ??
    (typeof process !== "undefined"
      ? process.env.NEXT_PUBLIC_WS_URL ?? "ws://localhost:3001"
      : "ws://localhost:3001");

  useEffect(() => {
    const socket = new CollabSocket(sessionId, currentUser.id);
    socketRef.current = socket;

    socket.onConnectionChange = (connected) => {
      setState((s) => ({ ...s, isConnected: connected }));
    };

    const cleanup: Array<() => void> = [];

    cleanup.push(
      socket.on("session_state", (e) => {
        const me = e.users.find((u) => u.id === currentUser.id);
        setState((s) => ({
          ...s,
          myRole: me?.role ?? null,
          toolApprovalPolicy: e.toolApprovalPolicy,
        }));
      })
    );

    cleanup.push(
      socket.on("tool_use_pending", (e: ToolUsePendingEvent) => {
        const entry: PendingToolUse = {
          id: e.toolUseId,
          name: e.toolName,
          input: e.toolInput,
          messageId: e.messageId,
          requestedAt: e.timestamp,
        };
        setState((s) => ({
          ...s,
          pendingToolUses: [...s.pendingToolUses, entry],
        }));
      })
    );

    cleanup.push(