@nolag/chat 0.1.3 → 1.0.0

package/dist/index.mjs

@@ -1,5 +1,3 @@
-import { NoLag } from '@nolag/js-sdk';
-
 /**
  * Tiny typed event emitter — framework-agnostic base for NoLagChat and ChatRoom.
  *
@@ -111,6 +109,15 @@ class MessageStore {
     has(id) {
         return this._ids.has(id);
     }
+    /**
+     * Get a message by ID. Returns the live reference (mutating it mutates the
+     * stored message), or undefined if not present.
+     */
+    get(id) {
+        if (!this._ids.has(id))
+            return undefined;
+        return this._messages.find((m) => m.id === id);
+    }
     /**
      * Clear all messages.
      */
@@ -340,6 +347,29 @@ function createLogger(prefix, enabled) {
         console.log(`[${prefix}]`, ...args);
     };
 }
+// ============ Wrapper registry ============
+// One wrapper instance per (client, appName): two wrappers sharing an app on
+// one connection would collide on topics, presence and the online lobby.
+// Warn (not throw): HMR and tests legitimately construct before disposing.
+const wrapperRegistry = new WeakMap();
+/** Register a wrapper against a client + appName; warns on collision. */
+function registerWrapper(client, appName, wrapperName) {
+    let apps = wrapperRegistry.get(client);
+    if (!apps) {
+        apps = new Map();
+        wrapperRegistry.set(client, apps);
+    }
+    const existing = apps.get(appName);
+    if (existing) {
+        console.warn(`[${wrapperName}] Another wrapper (${existing}) is already attached to this client for app "${appName}". ` +
+            `Use one wrapper per (client, app) — detach the other instance first.`);
+    }
+    apps.set(appName, wrapperName);
+}
+/** Release a wrapper's (client, appName) registration on detach. */
+function releaseWrapper(client, appName) {
+    wrapperRegistry.get(client)?.delete(appName);
+}
 
 /** Default app name for room topic prefixes */
 const DEFAULT_APP_NAME = 'chat';
@@ -351,8 +381,90 @@ const DEFAULT_MAX_MESSAGE_CACHE = 500;
 const TOPIC_MESSAGES = 'messages';
 /** Topic name for typing indicators within a room */
 const TOPIC_TYPING = '_typing';
+/** Topic name for live streamed message chunks within a room (ephemeral) */
+const TOPIC_STREAM = '_stream';
+/** Default coalesce/flush interval for streamed token chunks (ms) */
+const DEFAULT_STREAM_FLUSH_MS = 60;
 /** Lobby ID for global online presence */
 const LOBBY_ID = 'online';
+/** Delay before the post-setup lobby presence refetch (catches simultaneous joiners) */
+const LOBBY_REFRESH_DELAY_MS = 2000;
+
+/**
+ * Producer-side controller for an outgoing streamed message.
+ *
+ * `append()` updates the local message immediately and buffers the token; a
+ * timer flushes buffered tokens as a single network delta at most every
+ * `flushIntervalMs`, so a token-per-character source doesn't flood the broker.
+ */
+class MessageStreamController {
+    constructor(message, _flushIntervalMs, _hooks) {
+        this._flushIntervalMs = _flushIntervalMs;
+        this._hooks = _hooks;
+        this._buffer = '';
+        this._flushTimer = null;
+        this._closed = false;
+        this.message = message;
+        // Announce the stream so receivers can render a live placeholder at once.
+        this._hooks.publishStream({
+            type: 'start',
+            id: message.id,
+            userId: message.userId,
+            username: message.username,
+            avatar: message.avatar,
+            timestamp: message.timestamp,
+        });
+        this._hooks.emitStart(message);
+    }
+    append(text) {
+        if (this._closed || !text)
+            return;
+        this.message.text += text;
+        this._buffer += text;
+        this._hooks.emitChunk(this.message, text);
+        if (!this._flushTimer) {
+            this._flushTimer = setTimeout(() => this._flush(), this._flushIntervalMs);
+        }
+    }
+    complete() {
+        if (this._closed)
+            return this.message;
+        this._flush(); // send any buffered tokens
+        this._closed = true;
+        this._clearTimer();
+        this.message.status = 'sent';
+        this._hooks.publishFinal(this.message); // persisted final → finalizes receivers
+        this._hooks.emitEnd(this.message);
+        return this.message;
+    }
+    abort(error) {
+        if (this._closed)
+            return;
+        this._closed = true;
+        this._clearTimer();
+        this._buffer = '';
+        this.message.status = 'aborted';
+        this._hooks.publishStream({ type: 'abort', id: this.message.id, error });
+        this._hooks.emitAbort(this.message, error);
+    }
+    _flush() {
+        this._clearTimer();
+        if (this._buffer) {
+            this._hooks.publishStream({
+                type: 'delta',
+                id: this.message.id,
+                text: this._buffer,
+            });
+            this._buffer = '';
+        }
+    }
+    _clearTimer() {
+        if (this._flushTimer) {
+            clearTimeout(this._flushTimer);
+            this._flushTimer = null;
+        }
+    }
+}
 
 /**
  * ChatRoom — a single chat room with messages, users, and typing indicators.
@@ -361,15 +473,21 @@ const LOBBY_ID = 'online';
  */
 class ChatRoom extends EventEmitter {
     /** @internal */
-    constructor(name, roomContext, localUser, options, log) {
+    constructor(name, roomContext, localUser, options, log, isConnected) {
         super();
         this._unreadCount = 0;
         this._active = false;
+        // Stored topic handler refs — cleanup removes exactly these, never all
+        // handlers for a topic (the client may be shared with other consumers).
+        this._onMessagesRef = null;
+        this._onTypingRef = null;
+        this._onStreamRef = null;
         this.name = name;
         this._roomContext = roomContext;
         this._localUser = localUser;
         this._options = options;
         this._log = log;
+        this._isConnected = isConnected;
         this._presenceManager = new PresenceManager(localUser.actorTokenId);
         this._typingManager = new TypingManager(options.typingTimeout);
         this._messageStore = new MessageStore(options.maxMessageCache);
@@ -440,6 +558,76 @@ class ChatRoom extends EventEmitter {
         this._messageStore.add(message);
         this.emit('messageSent', message);
         // Publish to room (echo: false prevents duplicate)
+        this._publishFinalMessage(message);
+        // Mark as sent
+        message.status = 'sent';
+        // Stop typing on send
+        this._typingManager.stopTyping();
+        return message;
+    }
+    // ============ Streaming ============
+    /**
+     * Begin a streamed message (e.g. an AI response). Returns a handle you append
+     * tokens to. Receivers see the message appear and grow live; on `complete()`
+     * the full message is persisted like a normal message.
+     *
+     * @example
+     * ```ts
+     * const stream = room.startStream();
+     * for await (const token of llm) stream.append(token);
+     * stream.complete();
+     * ```
+     */
+    startStream(options) {
+        const message = {
+            id: generateId(),
+            userId: this._localUser.userId,
+            username: this._localUser.username,
+            avatar: this._localUser.avatar,
+            text: '',
+            data: options?.data,
+            timestamp: Date.now(),
+            status: 'streaming',
+            isReplay: false,
+        };
+        // Optimistic: appears in room.messages and grows as tokens arrive.
+        this._messageStore.add(message);
+        this._typingManager.stopTyping();
+        return new MessageStreamController(message, options?.flushIntervalMs ?? DEFAULT_STREAM_FLUSH_MS, {
+            publishStream: (payload) => this._roomContext.emit(TOPIC_STREAM, payload, { echo: false }),
+            publishFinal: (m) => this._publishFinalMessage(m),
+            emitStart: (m) => this.emit('streamStart', m),
+            emitChunk: (m, delta) => this.emit('streamChunk', { message: m, delta }),
+            emitEnd: (m) => this.emit('streamEnd', m),
+            emitAbort: (m, error) => this.emit('streamAbort', { message: m, error }),
+        });
+    }
+    /**
+     * Stream a message from a token source (sync or async iterable) — drops in
+     * for an LLM stream. Appends each chunk, finalizes on completion, and aborts
+     * (re-throwing) if the source errors.
+     *
+     * @example
+     * ```ts
+     * // OpenAI / Anthropic style streams yield text chunks
+     * await room.streamMessage(tokenIterable);
+     * ```
+     */
+    async streamMessage(source, options) {
+        const stream = this.startStream(options);
+        try {
+            for await (const chunk of source) {
+                stream.append(chunk);
+            }
+            return stream.complete();
+        }
+        catch (err) {
+            stream.abort(err instanceof Error ? err.message : String(err));
+            throw err;
+        }
+    }
+    /** @internal Publish a final message on the persisted `messages` topic. */
+    _publishFinalMessage(message) {
         this._roomContext.emit(TOPIC_MESSAGES, {
             id: message.id,
             userId: message.userId,
@@ -449,11 +637,6 @@ class ChatRoom extends EventEmitter {
             data: message.data,
             timestamp: message.timestamp,
         }, { echo: false });
-        // Mark as sent
-        message.status = 'sent';
-        // Stop typing on send
-        this._typingManager.stopTyping();
-        return message;
     }
     /**
      * Get all messages (alias for the messages getter).
@@ -494,17 +677,25 @@ class ChatRoom extends EventEmitter {
         // Subscribe to topics
         this._roomContext.subscribe(TOPIC_MESSAGES);
         this._roomContext.subscribe(TOPIC_TYPING);
-        // Listen for messages
-        this._roomContext.on(TOPIC_MESSAGES, (data, meta) => {
+        this._roomContext.subscribe(TOPIC_STREAM);
+        // Listen for messages (refs stored for handler-specific removal)
+        this._onMessagesRef = (data, meta) => {
             this._handleIncomingMessage(data, meta);
-        });
+        };
+        this._roomContext.on(TOPIC_MESSAGES, this._onMessagesRef);
         // Listen for typing
-        this._roomContext.on(TOPIC_TYPING, (data) => {
+        this._onTypingRef = (data) => {
             const { userId, typing } = data;
             if (userId !== this._localUser.userId) {
                 this._typingManager.handleRemote(userId, typing);
             }
-        });
+        };
+        this._roomContext.on(TOPIC_TYPING, this._onTypingRef);
+        // Listen for live streamed messages (start / delta / abort)
+        this._onStreamRef = (data) => {
+            this._handleStreamEvent(data);
+        };
+        this._roomContext.on(TOPIC_STREAM, this._onStreamRef);
     }
     /** @internal Set presence and fetch room members (active room only) */
     _activate() {
@@ -571,10 +762,24 @@ class ChatRoom extends EventEmitter {
     /** @internal Unsubscribe and clean up */
     _cleanup() {
         this._log('Room cleanup:', this.name);
-        this._roomContext.unsubscribe(TOPIC_MESSAGES);
-        this._roomContext.unsubscribe(TOPIC_TYPING);
-        this._roomContext.off(TOPIC_MESSAGES);
-        this._roomContext.off(TOPIC_TYPING);
+        // Server unsubscribes need a live socket; skip when disconnected
+        // (best-effort — the core would no-op with an error callback anyway).
+        if (this._isConnected()) {
+            this._roomContext.unsubscribe(TOPIC_MESSAGES);
+            this._roomContext.unsubscribe(TOPIC_TYPING);
+            this._roomContext.unsubscribe(TOPIC_STREAM);
+        }
+        // Handler-specific removal only: the client may be shared, and a bare
+        // off(topic) would strip other consumers' handlers too.
+        if (this._onMessagesRef)
+            this._roomContext.off(TOPIC_MESSAGES, this._onMessagesRef);
+        if (this._onTypingRef)
+            this._roomContext.off(TOPIC_TYPING, this._onTypingRef);
+        if (this._onStreamRef)
+            this._roomContext.off(TOPIC_STREAM, this._onStreamRef);
+        this._onMessagesRef = null;
+        this._onTypingRef = null;
+        this._onStreamRef = null;
         this._typingManager.dispose();
         this._messageStore.clear();
         this._presenceManager.clear();
@@ -583,8 +788,25 @@ class ChatRoom extends EventEmitter {
     // ============ Private ============
     _handleIncomingMessage(data, meta) {
         const msg = data;
+        const id = msg.id;
+        // If this is the persisted final for a message we streamed live, finalize
+        // the existing placeholder in place (authoritative text) rather than adding
+        // a duplicate. This also catches a late delta race — the final wins.
+        const streaming = this._messageStore.get(id);
+        if (streaming && streaming.status === 'streaming') {
+            streaming.text = msg.text;
+            streaming.data = msg.data;
+            streaming.status = 'delivered';
+            this.emit('streamEnd', streaming);
+            this.emit('message', streaming);
+            if (!this._active && !streaming.isReplay) {
+                this._unreadCount++;
+                this.emit('unreadChanged', { room: this.name, count: this._unreadCount });
+            }
+            return;
+        }
         const chatMessage = {
-            id: msg.id,
+            id,
             userId: msg.userId,
             username: msg.username,
             avatar: msg.avatar,
@@ -603,6 +825,49 @@ class ChatRoom extends EventEmitter {
             }
         }
     }
+    /** Handle an incoming live stream control payload (start / delta / abort). */
+    _handleStreamEvent(data) {
+        const evt = data;
+        if (!evt || !evt.id)
+            return;
+        switch (evt.type) {
+            case 'start': {
+                // Ignore our own (echo:false should prevent it, but be safe).
+                if (evt.userId === this._localUser.userId)
+                    return;
+                const message = {
+                    id: evt.id,
+                    userId: evt.userId,
+                    username: evt.username,
+                    avatar: evt.avatar,
+                    text: '',
+                    timestamp: evt.timestamp,
+                    status: 'streaming',
+                    isReplay: false,
+                };
+                if (this._messageStore.add(message)) {
+                    this.emit('streamStart', message);
+                }
+                break;
+            }
+            case 'delta': {
+                const message = this._messageStore.get(evt.id);
+                if (message && message.status === 'streaming') {
+                    message.text += evt.text;
+                    this.emit('streamChunk', { message, delta: evt.text });
+                }
+                break;
+            }
+            case 'abort': {
+                const message = this._messageStore.get(evt.id);
+                if (message && message.status === 'streaming') {
+                    message.status = 'aborted';
+                    this.emit('streamAbort', { message, error: evt.error });
+                }
+                break;
+            }
+        }
+    }
     _markRead() {
         if (this._unreadCount !== 0) {
             this._unreadCount = 0;
@@ -616,6 +881,9 @@ class ChatRoom extends EventEmitter {
             avatar: this._localUser.avatar,
             status: this._localUser.status,
             metadata: this._localUser.metadata,
+            // Scope tag: on a shared client, other apps' wrappers filter our
+            // presence out by this (and we filter theirs).
+            __scope: this._options.appName,
         };
         this._roomContext.setPresence(presenceData);
     }
@@ -627,54 +895,134 @@ class ChatRoom extends EventEmitter {
  * Provides multi-room chat, presence (who's online), typing indicators,
  * message replay, and user mapping — all framework-agnostic via events.
  *
+ * The wrapper NEVER manages the connection. The app owns one core NoLag
+ * client (shared by any number of wrappers on distinct apps) and the
+ * wrapper attaches to it at construction and releases it via `detach()`.
+ *
  * @example
  * ```typescript
+ * import { NoLag } from '@nolag/js-sdk';
  * import { NoLagChat } from '@nolag/chat';
  *
- * const chat = new NoLagChat(token, { username: 'Alice' });
+ * const client = NoLag(async () => (await (await fetch('/api/nolag-token')).json()).token);
+ * const chat = new NoLagChat({ client, appName: 'my-chat', username: 'Alice' });
  *
- * chat.on('connected', () => console.log('Connected!'));
  * chat.on('userOnline', (user) => console.log(user.username, 'is online'));
  *
- * await chat.connect();
+ * await client.connect();   // the app owns the connection
+ * await chat.ready();       // wrapper setup done (identity, lobby, rooms)
  *
  * const room = chat.joinRoom('general');
  * room.on('message', (msg) => console.log(msg.username + ':', msg.text));
  * room.sendMessage('Hello!');
+ *
+ * chat.detach();            // wrapper releases its handlers and topics
+ * client.disconnect();      // the app closes the socket
  * ```
  */
 class NoLagChat extends EventEmitter {
-    constructor(token, options) {
+    constructor(options) {
         super();
-        this._client = null;
         this._localUser = null;
         this._rooms = new Map();
         this._lobby = null;
         this._onlineUsers = new Map();
         this._actorToUserId = new Map();
         this._activeRoom = null;
-        this._token = token;
+        // Lifecycle: one setup run per connection epoch; detach is terminal.
+        this._epoch = 0;
+        this._detached = false;
+        this._isReady = false;
+        this._lobbyRefreshTimer = null;
+        // Stored client handler refs. INVARIANT: every client.on() below has a
+        // matching client.off() in detach() — never bare off(event), never inline
+        // closures on the client.
+        this._onConnectRef = () => this._onConnect();
+        this._onDisconnectRef = (reason) => {
+            this._log('Disconnected:', reason);
+            this.emit('disconnected', reason);
+        };
+        this._onReconnectRef = () => {
+            this._log('Reconnecting...');
+            this.emit('reconnecting');
+        };
+        this._onErrorRef = (error) => {
+            this._log('Error:', error);
+            this.emit('error', error);
+        };
+        this._onReplayStartRef = (data) => {
+            const event = data;
+            for (const room of this._rooms.values()) {
+                room._handleReplayStart(event.count);
+            }
+        };
+        this._onReplayEndRef = (data) => {
+            const event = data;
+            for (const room of this._rooms.values()) {
+                room._handleReplayEnd(event.replayed);
+            }
+        };
+        this._onPresenceJoinRef = (data) => this._handleRoomPresenceJoin(data);
+        this._onPresenceLeaveRef = (data) => this._handleRoomPresenceLeave(data);
+        this._onPresenceUpdateRef = (data) => this._handleRoomPresenceUpdate(data);
+        this._onLobbyJoinRef = (data) => this._handleLobbyJoin(data);
+        this._onLobbyLeaveRef = (data) => this._handleLobbyLeave(data);
+        this._onLobbyUpdateRef = (data) => this._handleLobbyUpdate(data);
+        if (!options?.client) {
+            throw new TypeError('NoLagChat requires an injected NoLag client: new NoLagChat({ client, username, ... })');
+        }
+        this._client = options.client;
         this._userId = generateId();
         this._options = {
             username: options.username,
             avatar: options.avatar,
             metadata: options.metadata,
             appName: options.appName ?? DEFAULT_APP_NAME,
-            url: options.url,
             typingTimeout: options.typingTimeout ?? DEFAULT_TYPING_TIMEOUT,
             maxMessageCache: options.maxMessageCache ?? DEFAULT_MAX_MESSAGE_CACHE,
             debug: options.debug ?? false,
-            reconnect: options.reconnect ?? true,
             rooms: options.rooms ?? [],
         };
         this._log = createLogger('NoLagChat', this._options.debug);
+        this._readyPromise = new Promise((resolve, reject) => {
+            this._readyResolve = resolve;
+            this._readyReject = reject;
+        });
+        // ready() rejection is only meaningful to callers that await it
+        this._readyPromise.catch(() => { });
+        registerWrapper(this._client, this._options.appName, 'NoLagChat');
+        // Construction = attach: wire everything now, with stored refs.
+        this._client.on('connect', this._onConnectRef);
+        this._client.on('disconnect', this._onDisconnectRef);
+        this._client.on('reconnect', this._onReconnectRef);
+        this._client.on('error', this._onErrorRef);
+        this._client.on('replay:start', this._onReplayStartRef);
+        this._client.on('replay:end', this._onReplayEndRef);
+        this._client.on('presence:join', this._onPresenceJoinRef);
+        this._client.on('presence:leave', this._onPresenceLeaveRef);
+        this._client.on('presence:update', this._onPresenceUpdateRef);
+        this._client.on('lobbyPresence:join', this._onLobbyJoinRef);
+        this._client.on('lobbyPresence:leave', this._onLobbyLeaveRef);
+        this._client.on('lobbyPresence:update', this._onLobbyUpdateRef);
+        // Attach-to-connected: if the client is already authenticated, run setup.
+        // The microtask lets the caller wire wrapper event handlers synchronously
+        // first; a racing real 'connect' event wins via the epoch guard.
+        queueMicrotask(() => {
+            if (this._epoch === 0 && !this._detached && this._client.connected) {
+                this._onConnect();
+            }
+        });
     }
     // ============ Public Properties ============
-    /** Whether the underlying connection is established */
+    /** Whether the underlying connection is established (connected ≠ ready) */
     get connected() {
-        return this._client?.connected ?? false;
+        return !this._detached && this._client.connected;
+    }
+    /** The injected core client (owned by the app, not the wrapper) */
+    get client() {
+        return this._client;
     }
-    /** The local user's info (available after connect) */
+    /** The local user's info (available after ready) */
     get localUser() {
         return this._localUser;
     }
@@ -684,121 +1032,161 @@ class NoLagChat extends EventEmitter {
     }
     // ============ Lifecycle ============
     /**
-     * Connect to NoLag and set up global presence.
+     * Resolves once the wrapper's first setup completed (identity, lobby and
+     * configured rooms ready — equivalently, once 'connected' has fired).
+     * Rejects only if detach() is called before that. Client auth failures
+     * surface via the app's own `await client.connect()`, not here.
      */
-    async connect() {
-        this._log('Connecting...');
-        const clientOptions = {
-            debug: this._options.debug,
-            reconnect: this._options.reconnect,
-        };
-        if (this._options.url) {
-            clientOptions.url = this._options.url;
-        }
-        this._client = NoLag(this._token, clientOptions);
-        // Wire client lifecycle events
-        // Note: we emit 'connected' after _localUser and lobby are ready (below),
-        // not here, so that joinRoom() works inside the connected handler.
-        this._client.on('connect', () => {
-            this._log('Connected');
-            // On reconnect, the SDK fires 'connect' after the connection is
-            // re-established.  Restore rooms here (not in 'reconnect') so that
-            // presence updates and lobby fetches go over a live socket.
-            if (this._rooms.size > 0) {
-                this._log('Reconnected — restoring rooms...');
-                this._restoreRooms();
-                this.emit('reconnected');
-            }
-        });
-        this._client.on('disconnect', (reason) => {
-            this._log('Disconnected:', reason);
-            this.emit('disconnected', reason);
-        });
-        this._client.on('reconnect', () => {
-            this._log('Reconnecting...');
-        });
-        this._client.on('error', (error) => {
-            this._log('Error:', error);
-            this.emit('error', error);
-        });
-        // Wire replay events
-        this._client.on('replay:start', (data) => {
-            const event = data;
-            for (const room of this._rooms.values()) {
-                room._handleReplayStart(event.count);
-            }
-        });
-        this._client.on('replay:end', (data) => {
-            const event = data;
-            for (const room of this._rooms.values()) {
-                room._handleReplayEnd(event.replayed);
-            }
-        });
-        // Connect
-        await this._client.connect();
-        // Wire room-level presence events (these arrive as client-level events)
-        this._client.on('presence:join', (data) => {
-            this._handleRoomPresenceJoin(data);
-        });
-        this._client.on('presence:leave', (data) => {
-            this._handleRoomPresenceLeave(data);
-        });
-        this._client.on('presence:update', (data) => {
-            this._handleRoomPresenceUpdate(data);
-        });
-        // Create local user
-        this._localUser = {
-            userId: this._userId,
-            actorTokenId: this._client.actorId,
-            username: this._options.username,
-            avatar: this._options.avatar,
-            metadata: this._options.metadata,
-            status: 'online',
-            joinedAt: Date.now(),
-            isLocal: true,
-        };
-        this._log('Local user:', this._localUser.userId, '→', this._localUser.actorTokenId);
-        // Set up lobby for global presence
-        await this._setupLobby();
-        // Pre-subscribe to all configured rooms (messages only, no presence)
-        for (const roomName of this._options.rooms) {
-            this._subscribeRoom(roomName);
-        }
-        // Emit connected now that _localUser and lobby are ready,
-        // so handlers can safely call joinRoom().
-        this.emit('connected');
-        // Deferred lobby refetch: the initial lobby snapshot is taken before
-        // rooms are joined and presence is set.  When multiple tabs connect
-        // simultaneously, one tab may get its snapshot before the other has
-        // set presence — causing a missed user.  A short-delay refetch
-        // catches anyone who joined during the setup window.
-        setTimeout(() => {
-            if (this._lobby && this._client?.connected) {
-                this._lobby.fetchPresence().then((state) => {
-                    this._hydrateOnlineUsers(state);
-                }).catch(() => { });
-            }
-        }, 2000);
+    ready() {
+        return this._readyPromise;
     }
     /**
-     * Disconnect from NoLag and clean up all rooms.
+     * Detach from the client: remove every handler this wrapper added,
+     * unsubscribe its topics and lobby (when connected), clear state.
+     * Terminal and idempotent; never touches the socket. To use chat again,
+     * construct a new instance.
      */
-    disconnect() {
-        this._log('Disconnecting...');
-        // Clean up rooms
+    detach() {
+        if (this._detached)
+            return;
+        this._log('Detaching...');
+        this._detached = true;
+        this._epoch++; // aborts any in-flight setup at its next checkpoint
+        if (this._lobbyRefreshTimer) {
+            clearTimeout(this._lobbyRefreshTimer);
+            this._lobbyRefreshTimer = null;
+        }
+        // Remove all client handlers by stored ref
+        this._client.off('connect', this._onConnectRef);
+        this._client.off('disconnect', this._onDisconnectRef);
+        this._client.off('reconnect', this._onReconnectRef);
+        this._client.off('error', this._onErrorRef);
+        this._client.off('replay:start', this._onReplayStartRef);
+        this._client.off('replay:end', this._onReplayEndRef);
+        this._client.off('presence:join', this._onPresenceJoinRef);
+        this._client.off('presence:leave', this._onPresenceLeaveRef);
+        this._client.off('presence:update', this._onPresenceUpdateRef);
+        this._client.off('lobbyPresence:join', this._onLobbyJoinRef);
+        this._client.off('lobbyPresence:leave', this._onLobbyLeaveRef);
+        this._client.off('lobbyPresence:update', this._onLobbyUpdateRef);
+        // Rooms: handler-specific off + connected-gated server unsubscribe
         for (const name of [...this._rooms.keys()]) {
-            this.leaveRoom(name);
+            this._rooms.get(name)._cleanup();
+            this._rooms.delete(name);
+        }
+        this._activeRoom = null;
+        // Lobby: server unsubscribe is best-effort and needs a live socket
+        if (this._lobby && this._client.connected) {
+            try {
+                this._lobby.unsubscribe();
+            }
+            catch {
+                /* best-effort */
+            }
         }
-        // Unsubscribe from lobby
-        this._lobby?.unsubscribe();
         this._lobby = null;
-        // Disconnect client
-        this._client?.disconnect();
-        this._client = null;
-        // Clear state
         this._onlineUsers.clear();
         this._actorToUserId.clear();
         this._localUser = null;
+        releaseWrapper(this._client, this._options.appName);
+        if (!this._isReady) {
+            this._readyReject(new Error('NoLagChat detached before ready'));
+        }
+    }
+    // ============ Private: Epoch Setup ============
+    _onConnect() {
+        this._epoch++;
+        void this._runSetup(this._epoch);
+    }
+    /**
+     * One setup pass per connection epoch. Serves both initial setup (epoch 1)
+     * and reconnect restore (epoch > 1). Aborts silently whenever a newer
+     * epoch started or the wrapper detached — checked after every await.
+     */
+    async _runSetup(epoch) {
+        const stale = () => epoch !== this._epoch || this._detached;
+        this._log(this._isReady ? 'Restoring after reconnect...' : 'Setting up...');
+        // Identity (client.actorId is guaranteed post-auth)
+        if (!this._localUser) {
+            this._localUser = {
+                userId: this._userId,
+                actorTokenId: this._client.actorId,
+                username: this._options.username,
+                avatar: this._options.avatar,
+                metadata: this._options.metadata,
+                status: 'online',
+                joinedAt: Date.now(),
+                isLocal: true,
+            };
+            this._log('Local user:', this._localUser.userId, '→', this._localUser.actorTokenId);
+        }
+        else {
+            this._localUser.actorTokenId = this._client.actorId;
+        }
+        // Lobby: subscribe every epoch (idempotent server-side) and diff-hydrate
+        // from the returned snapshot — one path for setup and restore.
+        if (!this._lobby) {
+            this._lobby = this._client.setApp(this._options.appName).setLobby(LOBBY_ID);
+        }
+        try {
+            const state = await this._lobby.subscribe();
+            if (stale())
+                return;
+            this._diffHydrateOnlineUsers(state);
+            this._log('Lobby subscribed, online users:', this._onlineUsers.size);
+        }
+        catch (err) {
+            if (stale())
+                return;
+            this._log('Lobby subscription failed:', err);
+        }
+        if (!this._isReady) {
+            // First successful setup: pre-subscribe configured rooms
+            // (messages only, no presence)
+            for (const roomName of this._options.rooms) {
+                this._subscribeRoomInternal(roomName);
+            }
+        }
+        else if (this._activeRoom) {
+            // Server auto-restored topic subscriptions; only room-scoped presence
+            // needs re-applying (the core does not restore it).
+            this._rooms.get(this._activeRoom)?._updateLocalPresence();
+        }
+        if (stale())
+            return;
+        // Ready keys on the first setup that COMPLETES, not on epoch 1: an
+        // epoch aborted by a racing reconnect must not strand ready().
+        if (!this._isReady) {
+            this._isReady = true;
+            this._readyResolve();
+            this.emit('connected');
+        }
+        else {
+            this.emit('reconnected');
+        }
+        // Deferred lobby refetch: catches users who joined during the setup
+        // window (e.g. simultaneous multi-tab connects).
+        this._scheduleLobbyRefresh(epoch);
+    }
+    _scheduleLobbyRefresh(epoch) {
+        if (this._lobbyRefreshTimer)
+            clearTimeout(this._lobbyRefreshTimer);
+        this._lobbyRefreshTimer = setTimeout(() => {
+            this._lobbyRefreshTimer = null;
+            if (epoch !== this._epoch || this._detached || !this._client.connected || !this._lobby) {
+                return;
+            }
+            this._lobby
+                .fetchPresence()
+                .then((state) => {
+                if (epoch !== this._epoch || this._detached)
+                    return;
+                this._diffHydrateOnlineUsers(state);
+            })
+                .catch(() => {
+                /* best-effort */
+            });
+        }, LOBBY_REFRESH_DELAY_MS);
     }
     // ============ Room Management ============
     /**
@@ -807,9 +1195,7 @@ class NoLagChat extends EventEmitter {
      * Otherwise creates, subscribes, and activates it.
      */
     joinRoom(name) {
-        if (!this._client || !this._localUser) {
-            throw new Error('Not connected — call connect() first');
-        }
+        this._assertUsable();
         // Deactivate the current active room
         if (this._activeRoom && this._activeRoom !== name) {
             const prev = this._rooms.get(this._activeRoom);
@@ -819,7 +1205,7 @@ class NoLagChat extends EventEmitter {
         // Get or create the room
         let room = this._rooms.get(name);
         if (!room) {
-            room = this._subscribeRoom(name);
+            room = this._subscribeRoomInternal(name);
         }
         this._activeRoom = name;
         room._activate();
@@ -892,24 +1278,41 @@ class NoLagChat extends EventEmitter {
                 activeRoom._updateLocalPresence();
         }
     }
-    // ============ Private: Room Setup ============
-    _subscribeRoom(name) {
-        if (!this._client || !this._localUser) {
-            throw new Error('Not connected — call connect() first');
+    // ============ Private: Guards ============
+    _assertUsable() {
+        if (this._detached) {
+            throw new Error('NoLagChat has been detached — construct a new instance');
+        }
+        if (!this._isReady || !this._localUser) {
+            throw new Error('NoLagChat not ready — await ready() or the "connected" event');
         }
+    }
+    // ============ Private: Room Setup ============
+    _subscribeRoomInternal(name) {
         this._log('Subscribing room:', name);
         const roomContext = this._client.setApp(this._options.appName).setRoom(name);
-        const room = new ChatRoom(name, roomContext, this._localUser, this._options, createLogger(`ChatRoom:${name}`, this._options.debug));
+        const room = new ChatRoom(name, roomContext, this._localUser, this._options, createLogger(`ChatRoom:${name}`, this._options.debug), () => this._client.connected);
         this._rooms.set(name, room);
         room._subscribe();
         return room;
     }
+    // ============ Private: Scope Filtering ============
+    /**
+     * On a shared client, presence events from other apps' wrappers arrive on
+     * the same connection-level events. Wrappers stamp their presence with a
+     * `__scope` (their appName); a mismatched tag means another app's data.
+     * Untagged presence is accepted (older peers in this same app).
+     */
+    _foreignScope(data) {
+        const scope = data?.__scope;
+        return typeof scope === 'string' && scope !== this._options.appName;
+    }
     // ============ Private: Room Presence → Active Room ============
     _handleRoomPresenceJoin(data) {
         if (data.actorTokenId === this._localUser?.actorTokenId)
             return;
         const presenceData = data.presence;
-        if (!presenceData?.userId)
+        if (!presenceData?.userId || this._foreignScope(presenceData))
             return;
         // Track as online user
         const user = this._presenceToUser(data.actorTokenId, presenceData);
@@ -937,7 +1340,7 @@ class NoLagChat extends EventEmitter {
         if (data.actorTokenId === this._localUser?.actorTokenId)
             return;
         const presenceData = data.presence;
-        if (!presenceData?.userId)
+        if (!presenceData?.userId || this._foreignScope(presenceData))
             return;
         // Update online user info if we already track them
         if (this._onlineUsers.has(presenceData.userId)) {
@@ -951,41 +1354,12 @@ class NoLagChat extends EventEmitter {
         }
     }
     // ============ Private: Lobby ============
-    async _setupLobby() {
-        if (!this._client)
-            return;
-        this._lobby = this._client.setApp(this._options.appName).setLobby(LOBBY_ID);
-        // Register on the client's generic lobby events (lobbyPresence:join/leave/update)
-        // instead of lobby.on(), because the server sends presence events with the
-        // server-assigned lobby UUID, while lobby.on() listens on the client-provided
-        // lobby name — the keys never match.
-        const lobbyHandler = (type) => (data) => {
-            const event = data;
-            if (type === 'join')
-                this._handleLobbyJoin(event);
-            else if (type === 'leave')
-                this._handleLobbyLeave(event);
-            else
-                this._handleLobbyUpdate(event);
-        };
-        this._client.on('lobbyPresence:join', lobbyHandler('join'));
-        this._client.on('lobbyPresence:leave', lobbyHandler('leave'));
-        this._client.on('lobbyPresence:update', lobbyHandler('update'));
-        try {
-            const initialState = await this._lobby.subscribe();
-            this._hydrateOnlineUsers(initialState);
-            this._log('Lobby subscribed, online users:', this._onlineUsers.size);
-        }
-        catch (err) {
-            this._log('Lobby subscription failed:', err);
-        }
-    }
     _handleLobbyJoin(event) {
         const { actorId, data } = event;
         if (actorId === this._localUser?.actorTokenId)
             return;
         const presenceData = data;
-        if (!presenceData.userId)
+        if (!presenceData.userId || this._foreignScope(presenceData))
             return;
         const user = this._presenceToUser(actorId, presenceData);
         this._actorToUserId.set(actorId, user.userId);
@@ -999,6 +1373,8 @@ class NoLagChat extends EventEmitter {
         if (actorId === this._localUser?.actorTokenId)
             return;
         const presenceData = data;
+        if (this._foreignScope(presenceData))
+            return;
         const userId = presenceData?.userId
             || this._actorToUserId.get(actorId)
             || this._findUserIdByActorId(actorId);
@@ -1016,15 +1392,22 @@ class NoLagChat extends EventEmitter {
         if (actorId === this._localUser?.actorTokenId)
             return;
         const presenceData = data;
-        if (!presenceData.userId)
+        if (!presenceData.userId || this._foreignScope(presenceData))
             return;
         const user = this._presenceToUser(actorId, presenceData);
         this._onlineUsers.set(user.userId, user);
         this.emit('userUpdated', user);
     }
-    _hydrateOnlineUsers(state) {
-        // state = { roomId: { actorId: actorRecord } }
-        // actorRecord from the server is { actorTokenId, presence: ChatPresenceData, joinedAt }
+    /**
+     * Reconcile the online-user map against a fresh lobby snapshot, emitting
+     * only the deltas (userOffline for vanished, userOnline for new,
+     * userUpdated for changed). One path for initial hydration, reconnect
+     * restore, and the deferred refetch.
+     */
+    _diffHydrateOnlineUsers(state) {
+        // Build the fresh user set from the snapshot
+        const fresh = new Map();
+        const freshActors = new Map();
         for (const roomId of Object.keys(state)) {
             const roomPresence = state[roomId];
             for (const actorId of Object.keys(roomPresence)) {
@@ -1033,16 +1416,42 @@ class NoLagChat extends EventEmitter {
                 const raw = roomPresence[actorId];
                 // Server returns full actor records with presence nested under .presence
                 const presenceData = (raw?.presence ?? raw);
-                if (presenceData?.userId) {
-                    const user = this._presenceToUser(actorId, presenceData);
-                    this._actorToUserId.set(actorId, user.userId);
-                    if (!this._onlineUsers.has(user.userId)) {
-                        this._onlineUsers.set(user.userId, user);
-                        this.emit('userOnline', user);
+                if (presenceData?.userId && !this._foreignScope(presenceData)) {
+                    if (!fresh.has(presenceData.userId)) {
+                        fresh.set(presenceData.userId, this._presenceToUser(actorId, presenceData));
                     }
+                    freshActors.set(actorId, presenceData.userId);
+                }
+            }
+        }
+        // Vanished users
+        for (const [userId, user] of [...this._onlineUsers]) {
+            if (!fresh.has(userId)) {
+                this._onlineUsers.delete(userId);
+                for (const [actorId, mappedUserId] of [...this._actorToUserId]) {
+                    if (mappedUserId === userId)
+                        this._actorToUserId.delete(actorId);
                 }
+                this.emit('userOffline', user);
             }
         }
+        // New and changed users
+        for (const [userId, user] of fresh) {
+            const prev = this._onlineUsers.get(userId);
+            if (!prev) {
+                this._onlineUsers.set(userId, user);
+                this.emit('userOnline', user);
+            }
+            else if (prev.username !== user.username ||
+                prev.avatar !== user.avatar ||
+                prev.status !== user.status) {
+                this._onlineUsers.set(userId, user);
+                this.emit('userUpdated', user);
+            }
+        }
+        for (const [actorId, userId] of freshActors) {
+            this._actorToUserId.set(actorId, userId);
+        }
     }
     // ============ Private: Helpers ============
     _presenceToUser(actorTokenId, data) {
@@ -1064,23 +1473,6 @@ class NoLagChat extends EventEmitter {
         }
         return undefined;
     }
-    _restoreRooms() {
-        // On reconnect, js-sdk auto-restores subscriptions.
-        // Re-set presence only on the active room.
-        if (this._activeRoom) {
-            const activeRoom = this._rooms.get(this._activeRoom);
-            if (activeRoom)
-                activeRoom._updateLocalPresence();
-        }
-        // Re-fetch lobby presence
-        this._lobby?.fetchPresence().then((state) => {
-            this._onlineUsers.clear();
-            this._actorToUserId.clear();
-            this._hydrateOnlineUsers(state);
-        }).catch((err) => {
-            this._log('Failed to re-fetch lobby presence:', err);
-        });
-    }
 }
 
 export { ChatRoom, EventEmitter, NoLagChat };