expo-openclaw-chat 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-openclaw-chat",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Minimal chat SDK for Expo apps to connect to OpenClaw gateway",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -20,11 +20,22 @@
     "@noble/hashes": "^2.0.0"
   },
   "peerDependencies": {
+    "@expo/vector-icons": ">=14.0.0",
+    "expo-image-manipulator": ">=12.0.0",
+    "expo-image-picker": ">=14.0.0",
     "expo-secure-store": ">=13.0.0",
     "react": ">=18.0.0",
-    "react-native": ">=0.72.0"
+    "react-native": ">=0.72.0",
+    "react-native-keyboard-controller": ">=1.12.0",
+    "react-native-safe-area-context": ">=4.0.0"
   },
   "peerDependenciesMeta": {
+    "expo-image-manipulator": {
+      "optional": true
+    },
+    "expo-image-picker": {
+      "optional": true
+    },
     "expo-secure-store": {
       "optional": true
     }

package/src/chat/engine.ts

@@ -199,10 +199,19 @@ export class ChatEngine {
         idempotencyKey: generateIdempotencyKey(),
       });
 
+      // Skip the placeholder if delta/complete events for this runId already
+      // arrived over the WS while we were awaiting chatSend — otherwise we'd
+      // append an empty bubble next to the already-rendered reply.
+      const alreadyHandled = this._messages.some(
+        (m) => m.runId === response.runId && m.role === "assistant",
+      );
+      if (alreadyHandled) {
+        return;
+      }
+
       this._activeRunId = response.runId;
       this._isStreaming = true;
 
-      // Add streaming placeholder
       const placeholder: UIMessage = {
         id: `asst-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`,
         role: "assistant",

package/src/core/client.ts

@@ -65,6 +65,8 @@ export interface GatewayClientOptions {
   platform?: string;
   /** Client ID for gateway registration (default: openclaw-ios) */
   clientId?: string;
+  /** Extra headers to include in the WebSocket upgrade request (React Native only) */
+  headers?: Record<string, string>;
 }
 
 // ─── Event Listener Types ───────────────────────────────────────────────────────
@@ -154,9 +156,14 @@ export class GatewayClient {
   // Sequence tracking
   private lastSeq = -1;
 
-  // Handshake
-  private connectPromiseResolve: ((value: HelloOk) => void) | null = null;
-  private connectPromiseReject: ((reason: Error) => void) | null = null;
+  // Handshake — every overlapping connect() call pushes its own resolver pair
+  // here. Settled atomically (drain + clear) on hello-ok, connect failure, or
+  // close so callers can't be silently dropped if a later attempt overwrites
+  // the slot.
+  private connectPromisePending: Array<{
+    resolve: (value: HelloOk) => void;
+    reject: (reason: Error) => void;
+  }> = [];
   private challengeNonce: string | null = null;
   private helloOk: HelloOk | null = null;
 
@@ -166,6 +173,10 @@ export class GatewayClient {
   // Pairing flow state
   private awaitingPairing = false;
 
+  // Connection protection: when true, disconnect() is a no-op.
+  // Set during connect(), cleared on hello-ok or connect failure.
+  private _connectInFlight = false;
+
   constructor(url: string, options: GatewayClientOptions = {}) {
     this.url = url;
     this.options = {
@@ -207,22 +218,41 @@ export class GatewayClient {
    * Connect to the gateway. Resolves with HelloOk on successful handshake.
    */
   async connect(): Promise<HelloOk> {
+    if (this._connectionState === "connected" && this.helloOk) {
+      return this.helloOk;
+    }
+
+    // If already connecting or reconnecting, attach to the in-flight handshake
+    // instead of starting another one. This prevents the autoConnect effect
+    // from creating duplicate connection attempts during React lifecycle
+    // re-runs (e.g. when clientOptions or token deps change mid-handshake).
     if (
-      this._connectionState === "connected" ||
-      this._connectionState === "connecting"
+      this._connectionState === "connecting" ||
+      this._connectionState === "reconnecting"
     ) {
-      throw new Error(`Already ${this._connectionState}`);
+      return new Promise<HelloOk>((resolve, reject) => {
+        this.connectPromisePending.push({ resolve, reject });
+      });
     }
 
     this.intentionalClose = false;
+    this._connectInFlight = true;
     this.setConnectionState("connecting");
 
-    // Load device identity before opening WebSocket
-    await this.ensureIdentity();
+    // Load device identity before opening WebSocket. If this throws, any
+    // overlapping connect() callers that queued themselves during the await
+    // would otherwise hang forever and wedge the state machine at
+    // "connecting" — drain them with the same error.
+    try {
+      await this.ensureIdentity();
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      this.handleConnectFailure(error);
+      throw error;
+    }
 
     return new Promise<HelloOk>((resolve, reject) => {
-      this.connectPromiseResolve = resolve;
-      this.connectPromiseReject = reject;
+      this.connectPromisePending.push({ resolve, reject });
       this.openWebSocket();
     });
   }
@@ -231,6 +261,10 @@ export class GatewayClient {
    * Cleanly disconnect from the gateway.
    */
   disconnect(): void {
+    // Don't kill a connection that's mid-handshake (race with React effect cleanup)
+    if (this._connectInFlight) {
+      return;
+    }
     this.intentionalClose = true;
     this.awaitingPairing = false;
     this.clearReconnectTimer();
@@ -253,6 +287,13 @@ export class GatewayClient {
       this.ws = null;
     }
 
+    // Drain any callers that queued via connect() while we were
+    // reconnecting — without this they hang on a connection that's
+    // intentionally going away.
+    if (this.connectPromisePending.length > 0) {
+      this.drainConnectPending((p) => p.reject(new Error("Client disconnected")));
+    }
+
     this.setConnectionState("disconnected");
   }
 
@@ -274,24 +315,29 @@ export class GatewayClient {
         if (this.options.autoReconnect !== false && this._connectionState !== "disconnected") {
           const waitTimeout = 5000;
           let settled = false;
+          // Capture the timer so the listener path can clear it; otherwise
+          // each settled-by-listener request still pins a 5s timer + closure
+          // until it fires, which compounds badly during fan-out reconnects.
+          const waitTimer = setTimeout(() => {
+            if (settled) return;
+            settled = true;
+            unsub();
+            reject(new Error("Not connected"));
+          }, waitTimeout);
           const unsub = this.onConnectionStateChange((state) => {
             if (settled) return;
             if (state === "connected") {
               settled = true;
+              clearTimeout(waitTimer);
               unsub();
               this.request<T>(method, params, timeoutMs).then(resolve, reject);
             } else if (state === "disconnected") {
               settled = true;
+              clearTimeout(waitTimer);
               unsub();
               reject(new Error("Not connected"));
             }
           });
-          setTimeout(() => {
-            if (settled) return;
-            settled = true;
-            unsub();
-            reject(new Error("Not connected"));
-          }, waitTimeout);
           return;
         }
         return reject(new Error("Not connected"));
@@ -526,6 +572,17 @@ export class GatewayClient {
   // ─── Private: WebSocket Lifecycle ──────────────────────────────────────────
 
   private openWebSocket(): void {
+    // Don't open a new WebSocket if we already have a live one. The React
+    // lifecycle can race with reconnect attempts, leading to multiple
+    // overlapping connect frames and orphaned sockets.
+    if (
+      this.ws &&
+      (this.ws.readyState === WebSocket.OPEN ||
+        this.ws.readyState === WebSocket.CONNECTING)
+    ) {
+      return;
+    }
+
     // Auto-add wss:// if protocol is missing
     let url = this.url;
     if (!url.startsWith("wss://") && !url.startsWith("ws://")) {
@@ -533,18 +590,31 @@ export class GatewayClient {
     }
 
     try {
-      this.ws = new WebSocket(url);
+      const wsHeaders = this.options.headers;
+      if (wsHeaders && Object.keys(wsHeaders).length > 0) {
+        // React Native WebSocket accepts a 3rd argument for headers.
+        // Standard browser WebSocket does not, so we use a cast here.
+        const WS = WebSocket as unknown as new (
+          url: string,
+          protocols: null,
+          options: { headers: Record<string, string> },
+        ) => WebSocket;
+        this.ws = new WS(url, null, { headers: wsHeaders });
+      } else {
+        this.ws = new WebSocket(url);
+      }
     } catch (err) {
       this.handleConnectFailure(err as Error);
       return;
     }
 
     this.ws.onopen = () => {
-      // Wait for either connect.challenge or send connect immediately
-      // The server may or may not send a challenge; set a small timeout
-      // to send connect if no challenge arrives
+      // Wait briefly for an optional connect.challenge from the server. If a
+      // challenge arrives, handleChallenge() sends the connect frame with its
+      // nonce; otherwise we send with a self-generated nonce after the timeout.
+      // The React-lifecycle race that previously killed the WS during this
+      // window is now blocked by the _connectInFlight guard in disconnect().
       this.challengeNonce = null;
-      // Give 2s for an optional challenge, then connect anyway
       setTimeout(() => {
         if (this._connectionState === "connecting" && !this.challengeNonce) {
           this.sendConnectFrame();
@@ -637,7 +707,6 @@ export class GatewayClient {
 
   private handleEvent(frame: EventFrame): void {
     const { event, payload, seq } = frame;
-
     // Sequence gap detection
     if (seq != null) {
       if (this.lastSeq >= 0 && seq > this.lastSeq + 1) {
@@ -668,15 +737,17 @@ export class GatewayClient {
         });
         break;
 
-      case GatewayEvents.CHAT:
+      case GatewayEvents.CHAT: {
+        const chatPayload = payload as ChatEventPayload;
         this.chatEventListeners.forEach((cb) => {
           try {
-            cb(payload as ChatEventPayload);
+            cb(chatPayload);
           } catch {
             // Ignore listener errors to avoid breaking event dispatch
           }
         });
         break;
+      }
 
       case GatewayEvents.AGENT:
         this.agentEventListeners.forEach((cb) => {
@@ -724,8 +795,14 @@ export class GatewayClient {
     this.awaitingPairing = false;
 
     if (payload.decision === "approved") {
-      // Retry connect now that we're approved
-      this.sendConnectFrame();
+      // If the WS is still open we can re-handshake immediately. If it's
+      // already closed (the gateway typically closes with 1008 before
+      // approval lands), let the auto-reconnect cycle that's already in
+      // flight do the next attempt — the device is now approved on the
+      // server, so the next connect will succeed.
+      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+        this.sendConnectFrame();
+      }
     } else {
       // Rejected - fail the connection
       this.handleConnectFailure(new Error("Device pairing was denied"));
@@ -742,6 +819,9 @@ export class GatewayClient {
     this.helloOk = helloOk;
     this.reconnectAttempt = 0;
     this.lastSeq = -1;
+    // Clear any pending reconnect timer — a stale timer from a prior
+    // failed attempt could otherwise stomp on this fresh connection.
+    this.clearReconnectTimer();
 
     // Configure tick interval from policy
     if (helloOk.policy?.tickIntervalMs) {
@@ -751,11 +831,27 @@ export class GatewayClient {
     this.startTickMonitor();
     this.setConnectionState("connected");
 
-    // Resolve the connect() promise
-    if (this.connectPromiseResolve) {
-      this.connectPromiseResolve(helloOk);
-      this.connectPromiseResolve = null;
-      this.connectPromiseReject = null;
+    this.drainConnectPending((p) => p.resolve(helloOk));
+  }
+
+  /**
+   * Settle every pending connect() caller atomically. Captures the queue,
+   * clears it, then invokes each callback with throws isolated so one bad
+   * listener can't strand the others. Called from hello-ok (resolve), connect
+   * failure (reject), and close (reject).
+   */
+  private drainConnectPending(
+    settle: (p: { resolve: (v: HelloOk) => void; reject: (e: Error) => void }) => void,
+  ): void {
+    this._connectInFlight = false;
+    const pending = this.connectPromisePending;
+    this.connectPromisePending = [];
+    for (const p of pending) {
+      try {
+        settle(p);
+      } catch {
+        // Ignore listener throws — other callers must still be settled.
+      }
     }
   }
 
@@ -795,9 +891,17 @@ export class GatewayClient {
       const signedAtMs = Date.now();
       const authToken = (auth.token as string) ?? (auth.deviceToken as string);
 
+      // Generate a random nonce if no challenge was received from the gateway.
+      // OpenClaw 2026.3.x requires the nonce field in all device connect params.
+      const nonce =
+        this.challengeNonce ??
+        Array.from(crypto.getRandomValues(new Uint8Array(16)))
+          .map((b) => b.toString(16).padStart(2, "0"))
+          .join("");
+
       // Build signature payload (matches Swift implementation)
       const payload = buildSignaturePayload({
-        nonce: this.challengeNonce ?? undefined,
+        nonce,
         deviceId: identity.deviceId,
         clientId,
         clientMode,
@@ -816,7 +920,7 @@ export class GatewayClient {
           publicKey,
           signature,
           signedAt: signedAtMs,
-          nonce: this.challengeNonce ?? undefined,
+          nonce,
         };
       }
     }
@@ -876,12 +980,7 @@ export class GatewayClient {
   }
 
   private handleConnectFailure(error: Error): void {
-    if (this.connectPromiseReject) {
-      this.connectPromiseReject(error);
-      this.connectPromiseResolve = null;
-      this.connectPromiseReject = null;
-    }
-
+    this.drainConnectPending((p) => p.reject(error));
     this.setConnectionState("disconnected");
   }
 
@@ -902,7 +1001,11 @@ export class GatewayClient {
       return;
     }
 
-    // Gateway closed with 1008 "pairing required" — treat like NOT_PAIRED
+    // Gateway closed with 1008 "pairing required" — emit event for UI and
+    // fall through to auto-reconnect. On hosted gateways the server runs a
+    // background loop that approves new devices within a few seconds, so a
+    // backoff retry will succeed once approval lands. On self-hosted gateways
+    // the user approves manually; auto-reconnect keeps trying in the meantime.
     if (
       code === 1008 &&
       reason.toLowerCase().includes("pairing") &&
@@ -912,18 +1015,19 @@ export class GatewayClient {
       this.emitEvent("pairing.required", {
         deviceId: this.deviceIdentity?.deviceId,
       });
-      // Don't reject connect promise — wait for user to get approved,
-      // then the UI will retry the connection
-      return;
+      // Don't return — let auto-reconnect schedule the retry below.
     }
 
-    // If we were still in the initial connect(), reject it
-    if (this.connectPromiseReject) {
-      // Don't reject — we'll try reconnecting
+    // Reject any in-flight connect() promises so callers don't hang. The
+    // auto-reconnect path will create fresh promises on the next attempt —
+    // this just unblocks anything queued against the dying socket.
+    if (this.connectPromisePending.length > 0) {
+      const closeError = new Error(
+        `WebSocket closed during connect: ${code} ${reason}`,
+      );
+      this.drainConnectPending((p) => p.reject(closeError));
       if (!this.options.autoReconnect) {
-        this.handleConnectFailure(
-          new Error(`WebSocket closed during connect: ${code} ${reason}`),
-        );
+        this.setConnectionState("disconnected");
         return;
       }
     }
@@ -966,20 +1070,19 @@ export class GatewayClient {
     this.setConnectionState("connecting");
     this.challengeNonce = null;
 
-    // Wrap the reconnect in its own promise tracking
-    const prevResolve = this.connectPromiseResolve;
-
-    // Keep original promise callbacks if we're reconnecting from a failed initial connect
-    if (!prevResolve) {
-      // Just reconnecting after a successful session that dropped
-      this.connectPromiseResolve = () => {}; // no-op, state already updated in handleHelloOk
-      this.connectPromiseReject = () => {
-        // Reconnect failure — try again
-        if (!this.intentionalClose && this.options.autoReconnect) {
-          this.setConnectionState("reconnecting");
-          this.scheduleReconnect();
-        }
-      };
+    // If no caller is waiting on a connect() (we're just reconnecting after a
+    // dropped session), seed an internal pending entry whose reject schedules
+    // another retry. handleHelloOk will drain it as a no-op resolve.
+    if (this.connectPromisePending.length === 0) {
+      this.connectPromisePending.push({
+        resolve: () => {},
+        reject: () => {
+          if (!this.intentionalClose && this.options.autoReconnect) {
+            this.setConnectionState("reconnecting");
+            this.scheduleReconnect();
+          }
+        },
+      });
     }
 
     this.openWebSocket();