@ably/ai-transport 0.0.1 → 0.1.0

package/src/errors.ts

@@ -33,7 +33,7 @@ export enum ErrorCode {
   CancelListenerError = 104002,
 
   /**
-   * A turn lifecycle event (turn-start or turn-end) failed to publish.
+   * A publish within a turn failed (lifecycle event, message, or event).
    */
   TurnLifecycleError = 104003,
 
@@ -46,6 +46,26 @@ export enum ErrorCode {
    * The HTTP POST to the server endpoint failed (network error or non-2xx response).
    */
   TransportSendFailed = 104005,
+
+  /**
+   * The Ably channel lost message continuity — the channel entered FAILED,
+   * SUSPENDED, or DETACHED, or re-attached with `resumed: false`. Active
+   * streams can no longer be guaranteed to receive all events.
+   */
+  ChannelContinuityLost = 104006,
+
+  /**
+   * An operation was attempted but the channel is not in a usable state
+   * (not ATTACHED or ATTACHING).
+   */
+  ChannelNotReady = 104007,
+
+  /**
+   * An error occurred while piping a response stream to the channel — either
+   * the source event stream threw (e.g. LLM provider rate limit, model error,
+   * network failure) or an underlying publish failed mid-stream.
+   */
+  StreamError = 104008,
 }
 
 /**

package/src/index.ts

@@ -8,21 +8,26 @@ export type {
   ClientTransport,
   ClientTransportOptions,
   CloseOptions,
-  ConversationNode,
-  ConversationTree,
-  LoadHistoryOptions,
-  MessageWithHeaders,
+  EventsNode,
+  MessageNode,
   NewTurnOptions,
-  PaginatedMessages,
   SendOptions,
   ServerTransport,
   ServerTransportOptions,
   StreamResponseOptions,
   StreamResult,
+  Tree,
   Turn,
   TurnEndReason,
   TurnLifecycleEvent,
+  View,
 } from './core/transport/index.js';
+
+// Deprecated aliases — intentional re-export of deprecated types for backwards compatibility.
+// eslint-disable-next-line @typescript-eslint/no-deprecated
+export type { EventNode } from './core/transport/index.js';
+// eslint-disable-next-line @typescript-eslint/no-deprecated
+export type { TreeNode } from './core/transport/index.js';
 export { buildTransportHeaders, createClientTransport, createServerTransport } from './core/transport/index.js';
 
 // Core codec

package/src/react/contexts/transport-context.ts

@@ -0,0 +1,37 @@
+import type * as Ably from 'ably';
+import { createContext } from 'react';
+
+import type { ClientTransport } from '../../core/transport/types.js';
+
+/**
+ * A single entry in the transport registry, holding the transport and any
+ * error that occurred during its construction.
+ *
+ * `transport` is `undefined` when construction failed.
+ * `error` is set when `createClientTransport` threw during provider render.
+ */
+export interface TransportSlot {
+  /** The constructed transport, or `undefined` if construction failed. */
+  transport: ClientTransport<unknown, unknown> | undefined;
+  /** Construction error from `createClientTransport`, or `undefined` on success. */
+  error: Ably.ErrorInfo | undefined;
+}
+
+/** The shape of the TransportContext value — a record of channelName → slot. */
+export type TransportContextValue = Readonly<Record<string, TransportSlot>>;
+
+/**
+ * Context that holds the registered {@link ClientTransport} slots, keyed by channelName.
+ * Each slot contains the transport (or `undefined` on construction failure) and any error.
+ * Populated by {@link TransportProvider}; read by {@link useClientTransport}.
+ */
+export const TransportContext = createContext<TransportContextValue>({});
+
+/**
+ * Context that holds the nearest (innermost) transport slot.
+ * Each {@link TransportProvider} sets this to its own slot, so descendants
+ * can access the nearest transport without knowing its channel name.
+ * `undefined` when no provider is present.
+ * Read by hooks whose `transport` argument is omitted.
+ */
+export const NearestTransportContext = createContext<TransportSlot | undefined>(undefined);

package/src/react/contexts/transport-provider.tsx

@@ -0,0 +1,164 @@
+/**
+ * TransportProvider: creates a ClientTransport and makes it available to
+ * descendants via TransportContext.
+ *
+ * Wraps children with Ably's ChannelProvider so the underlying channel
+ * lifecycle is managed in one place. An inner component calls useChannel
+ * to get the stable channel reference and creates the transport once on
+ * first render (via useRef).
+ *
+ * If createClientTransport throws, the error is stored in the TransportSlot
+ * (alongside an undefined transport) so that useClientTransport can surface it
+ * as transportError without crashing the component tree.
+ *
+ * The transport is closed when the provider truly unmounts. The close is
+ * scheduled as a microtask so that React Strict Mode's synchronous
+ * remount cycle (mount → fake-unmount → remount) can cancel it before it
+ * fires, avoiding unnecessary transport teardown in development.
+ *
+ * Multiple TransportProviders can be nested using distinct channelNames.
+ * Each provider merges its slot into the parent record so descendants
+ * can access all registered transports via useClientTransport(channelName).
+ */
+
+import * as Ably from 'ably';
+import { ChannelProvider, useChannel } from 'ably/react';
+import { type PropsWithChildren, type ReactNode, useContext, useEffect, useMemo, useRef } from 'react';
+
+import { createClientTransport } from '../../core/transport/client-transport.js';
+import type { ClientTransport, ClientTransportOptions } from '../../core/transport/types.js';
+import { ErrorCode } from '../../errors.js';
+import type { TransportSlot } from '../contexts/transport-context.js';
+import { NearestTransportContext, TransportContext } from '../contexts/transport-context.js';
+
+/**
+ * Props for {@link TransportProvider}.
+ *
+ * All {@link ClientTransportOptions} except `channel` (managed internally) plus `channelName`.
+ */
+export interface TransportProviderProps<TEvent, TMessage>
+  extends Omit<ClientTransportOptions<TEvent, TMessage>, 'channel'>, PropsWithChildren {
+  /** The Ably channel name to subscribe to. Also used as the context registry key. */
+  channelName: string;
+}
+
+// Inner component: rendered inside ChannelProvider so useChannel resolves to
+// the channel created by the outer wrapper.
+const TransportProviderInner = <TEvent, TMessage>({
+  channelName,
+  children,
+  ...transportOptions
+}: TransportProviderProps<TEvent, TMessage>) => {
+  const { channel } = useChannel({ channelName });
+  const transportRef = useRef<ClientTransport<TEvent, TMessage> | undefined>(undefined);
+  const transportChannelRef = useRef<string>(channelName);
+  const transportsToDisposeRef = useRef<ClientTransport<unknown, unknown>[]>([]);
+  const pendingCloseRef = useRef(false);
+  const constructionErrorRef = useRef<Ably.ErrorInfo | undefined>(undefined);
+
+  const alreadyCreatedOrFailed = !!transportRef.current || !!constructionErrorRef.current;
+
+  if (!alreadyCreatedOrFailed || transportChannelRef.current !== channelName) {
+    transportChannelRef.current = channelName;
+    if (transportRef.current) transportsToDisposeRef.current.push(transportRef.current);
+    try {
+      transportRef.current = createClientTransport({ ...transportOptions, channel });
+      constructionErrorRef.current = undefined;
+    } catch (error) {
+      transportRef.current = undefined;
+      constructionErrorRef.current =
+        error instanceof Ably.ErrorInfo
+          ? error
+          : new Ably.ErrorInfo('Unknown error while creating transport', ErrorCode.BadRequest, 400);
+    }
+  }
+
+  const parentMap = useContext(TransportContext);
+
+  // Capture ref values as locals so useMemo deps track changes correctly.
+  // CAST: TransportContext stores transports with erased generics.
+  // The generic types are fixed at the TransportProvider<TEvent, TMessage> boundary.
+  const currentTransport = transportRef.current as ClientTransport<unknown, unknown> | undefined;
+  const currentError = constructionErrorRef.current;
+
+  const slot = useMemo<TransportSlot>(
+    () => ({ transport: currentTransport, error: currentError }),
+    [currentTransport, currentError],
+  );
+
+  const contextValue = useMemo(() => ({ ...parentMap, [channelName]: slot }), [channelName, parentMap, slot]);
+
+  useEffect(
+    () => () => {
+      for (const transport of transportsToDisposeRef.current) void transport.close();
+    },
+    [channelName],
+  );
+
+  // Close the transport when the component truly unmounts. The close is
+  // scheduled as a microtask: in React Strict Mode (dev) the component
+  // remounts synchronously before any microtask can drain, so the remount's
+  // effect setup resets pendingCloseRef.current = false and cancels the
+  // close. On a real unmount no remount follows, the microtask fires, and
+  // the transport is closed.
+  useEffect(() => {
+    pendingCloseRef.current = false;
+    return () => {
+      pendingCloseRef.current = true;
+      void Promise.resolve().then(() => {
+        if (pendingCloseRef.current) {
+          void transportRef.current?.close();
+        }
+      });
+    };
+  }, []);
+
+  return (
+    <TransportContext.Provider value={contextValue}>
+      <NearestTransportContext.Provider value={slot}>{children}</NearestTransportContext.Provider>
+    </TransportContext.Provider>
+  );
+};
+
+/**
+ * Provide a {@link ClientTransport} to descendant components.
+ *
+ * Wraps children with Ably's `ChannelProvider` using `channelName`, creates a
+ * transport from the resolved channel and the remaining options, and registers it
+ * in `TransportContext` under `channelName`. Descendants call
+ * {@link useClientTransport} with the same `channelName` to access the transport.
+ *
+ * If `createClientTransport` throws during construction, the error is surfaced
+ * through `useClientTransport` as `transportError` — the component tree does not
+ * crash and children are still rendered.
+ *
+ * ```tsx
+ * <TransportProvider channelName="ai:demo" codec={UIMessageCodec}>
+ *   <Chat />
+ * </TransportProvider>
+ *
+ * // Inside Chat:
+ * const { transport, transportError } = useClientTransport({ channelName: 'ai:demo' });
+ * ```
+ *
+ * For multiple transports, nest providers with distinct channelNames:
+ *
+ * ```tsx
+ * <TransportProvider channelName="ai:main" codec={UIMessageCodec}>
+ *   <TransportProvider channelName="ai:aux" codec={UIMessageCodec}>
+ *     <App />
+ *   </TransportProvider>
+ * </TransportProvider>
+ *
+ * // Inside App:
+ * const { transport: main } = useClientTransport({ channelName: 'ai:main' });
+ * const { transport: aux }  = useClientTransport({ channelName: 'ai:aux' });
+ * ```
+ * @param props - Provider configuration including `channelName`, `codec`, and all other {@link ClientTransportOptions}.
+ * @returns A React element wrapping children with ChannelProvider and TransportContext.
+ */
+export const TransportProvider = <TEvent, TMessage>(props: TransportProviderProps<TEvent, TMessage>): ReactNode => (
+  <ChannelProvider channelName={props.channelName}>
+    <TransportProviderInner {...props} />
+  </ChannelProvider>
+);

package/src/react/create-transport-hooks.ts

@@ -0,0 +1,144 @@
+/**
+ * createTransportHooks: factory that captures TEvent and TMessage once and returns
+ * a bundle of type-safe hooks + TransportProvider. Hook call sites need no type
+ * parameters at every use — just call the hooks directly.
+ * @example
+ * // Once per app (e.g. in a shared transport.ts):
+ * export const {
+ *   TransportProvider,
+ *   useClientTransport,
+ *   useView,
+ *   useActiveTurns,
+ * } = createTransportHooks<UIMessageChunk, UIMessage>();
+ *
+ * // In page:
+ * <TransportProvider channelName="ai:demo" codec={UIMessageCodec}>
+ *   <Chat />
+ * </TransportProvider>
+ *
+ * // In Chat — no type params needed, transport is implicit from nearest provider:
+ * const { nodes } = useView({ limit: 30 });
+ * const turns = useActiveTurns();
+ */
+
+import type * as Ably from 'ably';
+import type { ComponentType } from 'react';
+
+import type { ClientTransport, View } from '../core/transport/types.js';
+import type { TransportProviderProps } from './contexts/transport-provider.js';
+import { TransportProvider as _TransportProvider } from './contexts/transport-provider.js';
+import { useAblyMessages as _useAblyMessages } from './use-ably-messages.js';
+import { useActiveTurns as _useActiveTurns } from './use-active-turns.js';
+import type { ClientTransportHandle } from './use-client-transport.js';
+import { useClientTransport as _useClientTransport } from './use-client-transport.js';
+import { useCreateView as _useCreateView } from './use-create-view.js';
+import type { TreeHandle } from './use-tree.js';
+import { useTree as _useTree } from './use-tree.js';
+import type { ViewHandle } from './use-view.js';
+import { useView as _useView } from './use-view.js';
+
+/**
+ * Bundle of type-safe hooks and provider returned by {@link createTransportHooks}.
+ *
+ * `TEvent` and `TMessage` are baked in at factory creation time so no type params
+ * are needed at hook call sites.
+ */
+export interface TransportHooks<TEvent, TMessage> {
+  /**
+   * `TransportProvider` narrowed to `TEvent`/`TMessage`. No JSX type params needed.
+   */
+  TransportProvider: ComponentType<TransportProviderProps<TEvent, TMessage>>;
+  /**
+   * Read the transport from context. No type params needed.
+   *
+   * Returns `{ transport, transportError }`. When no provider is found,
+   * `transportError` is set and `transport` is a stub that throws on access —
+   * the hook never throws during render.
+   *
+   * Pass `onError` to subscribe to post-construction transport errors
+   * (e.g. send failures, channel continuity loss) without wiring
+   * `transport.on('error', …)` manually.
+   */
+  useClientTransport: (props?: {
+    /** Channel name to look up; omit to use the nearest {@link TransportProvider}. */
+    channelName?: string;
+    /** When `true`, return a stub transport that throws on any access. */
+    skip?: boolean;
+    /** Called whenever the resolved transport emits an error event. */
+    onError?: (error: Ably.ErrorInfo) => void;
+  }) => ClientTransportHandle<TEvent, TMessage>;
+  /**
+   * Subscribe to the nearest transport's view and return the visible node list with pagination.
+   * Pass `transport` to use a transport's default view, `view` to subscribe to a specific view
+   * directly. Pass `limit` to auto-load on mount. Pass `skip: true` for an empty handle.
+   */
+  useView: (props?: {
+    /** Client transport whose default view to subscribe to; defaults to the nearest {@link TransportProvider}. */
+    transport?: ClientTransport<TEvent, TMessage> | null;
+    /** A specific {@link View} to subscribe to directly. Takes priority over `transport`. */
+    view?: View<TEvent, TMessage> | null;
+    /** When provided, auto-loads the first page on mount. */
+    limit?: number;
+    /** When `true`, skip all subscriptions and return an empty handle. */
+    skip?: boolean;
+  }) => ViewHandle<TEvent, TMessage>;
+  /**
+   * Track active turns across all clients on the channel.
+   * Pass `transport` to override; defaults to the nearest {@link TransportProvider}.
+   */
+  useActiveTurns: (props?: {
+    /** Override transport; defaults to the nearest {@link TransportProvider}. */
+    transport?: ClientTransport<TEvent, TMessage> | null;
+  }) => Map<string, Set<string>>;
+  /**
+   * Navigate conversation branches in the transport tree.
+   * Pass `transport` to override; defaults to the nearest {@link TransportProvider}.
+   */
+  useTree: (props?: {
+    /** Override transport; defaults to the nearest {@link TransportProvider}. */
+    transport?: ClientTransport<TEvent, TMessage>;
+  }) => TreeHandle<TMessage>;
+  /**
+   * Subscribe to raw Ably messages on the transport channel.
+   * Pass `transport` to override; defaults to the nearest {@link TransportProvider}.
+   * Pass `skip: true` to return an empty array without subscribing.
+   */
+  useAblyMessages: (props?: {
+    /** Override transport; defaults to the nearest {@link TransportProvider}. */
+    transport?: ClientTransport<TEvent, TMessage>;
+    /** When `true`, skip all subscriptions and return an empty array. */
+    skip?: boolean;
+  }) => Ably.InboundMessage[];
+  /**
+   * Create an independent view over the same tree.
+   * Pass `transport` to override; defaults to the nearest {@link TransportProvider}.
+   * Pass `skip: true` to return an empty handle without creating a view.
+   */
+  useCreateView: (props?: {
+    /** Override transport; defaults to the nearest {@link TransportProvider}. */
+    transport?: ClientTransport<TEvent, TMessage> | null;
+    /** When provided, auto-loads the first page on mount. */
+    limit?: number;
+    /** When `true`, skip view creation and return an empty handle. */
+    skip?: boolean;
+  }) => ViewHandle<TEvent, TMessage>;
+}
+
+/**
+ * Create a bundle of type-safe hooks and provider for a given `TEvent`/`TMessage` pair.
+ *
+ * `TEvent` and `TMessage` are captured at factory creation time; hook call sites need
+ * no type parameters. The returned hooks are thin wrappers around the standalone hooks
+ * with the types resolved.
+ * @returns A {@link TransportHooks} bundle.
+ */
+export const createTransportHooks = <TEvent, TMessage>(): TransportHooks<TEvent, TMessage> => ({
+  // CAST: TransportProvider is generic; factory narrows it to TEvent/TMessage.
+  TransportProvider: _TransportProvider as ComponentType<TransportProviderProps<TEvent, TMessage>>,
+  useClientTransport: (props) => _useClientTransport<TEvent, TMessage>(props ?? {}),
+  useView: (props) => _useView<TEvent, TMessage>(props ?? {}),
+  useActiveTurns: (props) => _useActiveTurns<TEvent, TMessage>(props ?? {}),
+  useTree: (props) => _useTree<TEvent, TMessage>(props ?? {}),
+  useAblyMessages: (props) => _useAblyMessages<TEvent, TMessage>(props ?? {}),
+  useCreateView: (props) => _useCreateView<TEvent, TMessage>(props ?? {}),
+});

package/src/react/index.ts

@@ -1,11 +1,18 @@
+export type { EventsNode, MessageNode } from '../core/transport/types.js';
+export type { TransportSlot } from './contexts/transport-context.js';
+export { NearestTransportContext } from './contexts/transport-context.js';
+export type { TransportProviderProps } from './contexts/transport-provider.js';
+export { TransportProvider } from './contexts/transport-provider.js';
+export type { TransportHooks } from './create-transport-hooks.js';
+export { createTransportHooks } from './create-transport-hooks.js';
+// eslint-disable-next-line @typescript-eslint/no-deprecated -- intentional re-export for backwards compatibility
+export type { EventNode, TreeNode } from '../core/transport/types.js';
 export { useAblyMessages } from './use-ably-messages.js';
 export { useActiveTurns } from './use-active-turns.js';
+export type { ClientTransportHandle } from './use-client-transport.js';
 export { useClientTransport } from './use-client-transport.js';
-export type { ConversationTreeHandle } from './use-conversation-tree.js';
-export { useConversationTree } from './use-conversation-tree.js';
-export { useEdit } from './use-edit.js';
-export type { HistoryHandle } from './use-history.js';
-export { useHistory } from './use-history.js';
-export { useMessages } from './use-messages.js';
-export { useRegenerate } from './use-regenerate.js';
-export { useSend } from './use-send.js';
+export { useCreateView } from './use-create-view.js';
+export type { TreeHandle } from './use-tree.js';
+export { useTree } from './use-tree.js';
+export type { UseViewOptions, ViewHandle } from './use-view.js';
+export { useView } from './use-view.js';

package/src/react/use-ably-messages.ts

@@ -1,37 +1,55 @@
 /**
  * useAblyMessages — reactive raw Ably message log from a ClientTransport.
  *
- * Returns the accumulated raw Ably InboundMessages in chronological order,
- * including both live messages (from the channel subscription) and
- * history-loaded messages (from transport.history() calls).
+ * Accumulates raw Ably InboundMessages from the transport's tree
+ * 'ably-message' event. Messages are appended in arrival order.
  *
- * Subscribes to the transport's "ably-message" event and re-reads the
- * list on each update.
+ * When `transport` is omitted, defaults to the nearest
+ * {@link TransportProvider}'s transport via context.
+ * Pass `skip: true` to bypass all subscriptions and return an empty array.
  */
 
 import type * as Ably from 'ably';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 
 import type { ClientTransport } from '../core/transport/types.js';
+import { NearestTransportContext } from './contexts/transport-context.js';
 
 /**
- * Subscribe to raw Ably message updates from a client transport.
- * @param transport - The client transport to observe.
+ * Subscribe to raw Ably message updates from a client transport's tree.
+ * When `transport` is omitted, uses the nearest {@link TransportProvider}'s transport via context.
+ * @param props - Options including optional `transport` and `skip`.
+ * @param props.transport - Transport to subscribe to; defaults to the nearest provider.
+ * @param props.skip - When `true`, skip all subscriptions and return an empty array.
  * @returns The accumulated raw Ably messages in chronological order.
  */
-export const useAblyMessages = <TEvent, TMessage>(
-  transport: ClientTransport<TEvent, TMessage>,
-): Ably.InboundMessage[] => {
-  const [messages, setMessages] = useState<Ably.InboundMessage[]>(() => transport.getAblyMessages());
+export const useAblyMessages = <TEvent, TMessage>({
+  transport,
+  skip,
+}: { transport?: ClientTransport<TEvent, TMessage>; skip?: boolean } = {}): Ably.InboundMessage[] => {
+  const nearestSlot = useContext(NearestTransportContext);
+  // CAST: NearestTransportContext stores transport with erased generics; types fixed at call site.
+  const resolved = skip
+    ? undefined
+    : ((transport ?? nearestSlot?.transport) as ClientTransport<TEvent, TMessage> | undefined);
+
+  const [messages, setMessages] = useState<Ably.InboundMessage[]>([]);
+  const messagesRef = useRef<Ably.InboundMessage[]>([]);
 
   useEffect(() => {
-    setMessages(transport.getAblyMessages());
+    // Reset on transport change
+    messagesRef.current = [];
+    setMessages([]);
+
+    if (!resolved) return;
 
-    const unsub = transport.on('ably-message', () => {
-      setMessages(transport.getAblyMessages());
+    const unsub = resolved.tree.on('ably-message', (msg: Ably.InboundMessage) => {
+      const next = [...messagesRef.current, msg];
+      messagesRef.current = next;
+      setMessages(next);
     });
     return unsub;
-  }, [transport]);
+  }, [resolved]);
 
   return messages;
 };

package/src/react/use-active-turns.ts

@@ -2,50 +2,61 @@
  * useActiveTurns: reactive view of active turns on the channel,
  * keyed by clientId.
  *
- * Subscribes to transport turn lifecycle events and maintains a
+ * Subscribes to transport tree turn lifecycle events and maintains a
  * Map<clientId, Set<turnId>> that updates on every turn start/end.
  *
+ * Uses tree (not view) so that all turns are tracked — including remote
+ * turns whose messages haven't arrived yet.
+ *
  * Generic — works with any codec, not tied to Vercel types.
  */
 
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
 import { EVENT_TURN_START } from '../constants.js';
 import type { ClientTransport, TurnLifecycleEvent } from '../core/transport/types.js';
+import { NearestTransportContext } from './contexts/transport-context.js';
 
 /**
  * Returns a reactive Map of all active turns on the channel, keyed by clientId.
- * Updates when turns start or end.
- * @param transport - The client transport to observe, or null/undefined if not yet available.
+ * Updates when turns start or end. When `transport` is omitted, uses the nearest
+ * {@link TransportProvider}'s transport via context.
+ * @param props - Options including optional `transport`.
+ * @param props.transport - Transport to track turns for; defaults to the nearest provider.
  * @returns A Map where keys are clientIds and values are Sets of active turnIds.
  */
-export const useActiveTurns = <TEvent, TMessage>(
-  transport: ClientTransport<TEvent, TMessage> | null | undefined,
-): Map<string, Set<string>> => {
+export const useActiveTurns = <TEvent, TMessage>({
+  transport,
+}: { transport?: ClientTransport<TEvent, TMessage> | null } = {}): Map<string, Set<string>> => {
+  const nearestSlot = useContext(NearestTransportContext);
+  // CAST: NearestTransportContext stores transport with erased generics; types fixed at call site.
+  const resolved = (transport ?? nearestSlot?.transport) as ClientTransport<TEvent, TMessage> | undefined;
+
   const [turns, setTurns] = useState<Map<string, Set<string>>>(() => new Map());
 
   useEffect(() => {
-    if (!transport) return;
+    if (!resolved) return;
 
     // Initialize from current state
-    setTurns(transport.getActiveTurnIds());
+    setTurns(resolved.tree.getActiveTurnIds());
 
-    const unsubscribe = transport.on('turn', (event: TurnLifecycleEvent) => {
+    const unsubscribe = resolved.tree.on('turn', (event: TurnLifecycleEvent) => {
       setTurns((prev) => {
         const next = new Map(prev);
 
         if (event.type === EVENT_TURN_START) {
-          const set = new Set(next.get(event.clientId) ?? []);
+          const set = new Set(next.get(event.clientId));
           set.add(event.turnId);
           next.set(event.clientId, set);
         } else {
-          const set = next.get(event.clientId);
-          if (set) {
-            set.delete(event.turnId);
-            if (set.size === 0) {
+          const existing = next.get(event.clientId);
+          if (existing) {
+            const updated = new Set(existing);
+            updated.delete(event.turnId);
+            if (updated.size === 0) {
               next.delete(event.clientId);
             } else {
-              next.set(event.clientId, new Set(set));
+              next.set(event.clientId, updated);
             }
           }
         }
@@ -55,7 +66,7 @@ export const useActiveTurns = <TEvent, TMessage>(
     });
 
     return unsubscribe;
-  }, [transport]);
+  }, [resolved]);
 
   return turns;
 };