@nextclaw/ui 0.24.2 → 0.25.0

package/src/shared/lib/transport/local-transport.service.ts

@@ -1,5 +1,6 @@
 import { systemStatusManager } from '@/features/system-status';
 import type { AppEvent, AppTransport, RequestInput, StreamInput, StreamSession } from './transport.types';
+import { BrowserRealtimeRecoveryService } from './browser-realtime-recovery.service';
 import { requestRawApiResponse } from './request-raw-api-response.utils';
 import { readSseStreamResult } from './sse-stream.utils';
 import { resolveTransportWebSocketUrl } from './transport-websocket-url.utils';
@@ -53,13 +54,18 @@ class LocalRealtimeGateway {
   private socket: WebSocket | null = null;
   private reconnectTimer: number | null = null;
   private manualClose = false;
+  private replacingAfterBrowserRecovery = false;
   private subscribers = new Set<EventHandler>();
+  private readonly browserRecovery = new BrowserRealtimeRecoveryService(() => {
+    this.replaceSocket();
+  });
 
   constructor(private readonly wsUrl: string) {}
 
   subscribe = (handler: EventHandler): () => void => {
     this.subscribers.add(handler);
     if (this.subscribers.size === 1) {
+      this.browserRecovery.start();
       this.connect();
     } else if (this.socket?.readyState === WebSocket.OPEN) {
       handler({ type: 'connection.open', payload: {} });
@@ -68,6 +74,7 @@ class LocalRealtimeGateway {
     return () => {
       this.subscribers.delete(handler);
       if (this.subscribers.size === 0) {
+        this.browserRecovery.stop();
         this.disconnect();
       }
     };
@@ -88,6 +95,7 @@ class LocalRealtimeGateway {
     this.socket = socket;
 
     socket.onopen = () => {
+      this.replacingAfterBrowserRecovery = false;
       this.emit({ type: 'connection.open', payload: {} });
     };
 
@@ -105,6 +113,7 @@ class LocalRealtimeGateway {
     };
 
     socket.onclose = () => {
+      this.replacingAfterBrowserRecovery = false;
       this.emit({ type: 'connection.close', payload: {} });
       this.socket = null;
       if (!this.manualClose && this.subscribers.size > 0) {
@@ -123,8 +132,31 @@ class LocalRealtimeGateway {
     }, 3_000);
   };
 
+  private replaceSocket = (): void => {
+    if (this.subscribers.size === 0 || this.replacingAfterBrowserRecovery) {
+      return;
+    }
+    this.replacingAfterBrowserRecovery = true;
+    if (this.reconnectTimer !== null) {
+      window.clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    const staleSocket = this.socket;
+    this.socket = null;
+    if (staleSocket) {
+      staleSocket.onopen = null;
+      staleSocket.onmessage = null;
+      staleSocket.onerror = null;
+      staleSocket.onclose = null;
+      staleSocket.close();
+      this.emit({ type: 'connection.close', payload: {} });
+    }
+    this.connect();
+  };
+
   private disconnect = (): void => {
     this.manualClose = true;
+    this.replacingAfterBrowserRecovery = false;
     if (this.reconnectTimer !== null) {
       window.clearTimeout(this.reconnectTimer);
       this.reconnectTimer = null;

package/src/shared/lib/transport/remote-transport.service.ts

@@ -1,5 +1,6 @@
 import type { ApiError } from '@nextclaw/client-sdk';
 import type { AppEvent, AppTransport, RemoteRuntimeInfo, RequestInput, StreamInput, StreamSession } from './transport.types';
+import { BrowserRealtimeRecoveryService } from './browser-realtime-recovery.service';
 import { resolveTransportWebSocketUrl } from './transport-websocket-url.utils';
 
 type RemoteTarget = {
@@ -95,6 +96,9 @@ export class RemoteSessionMultiplexTransport implements AppTransport {
   private subscribers = new Set<(event: AppEvent) => void>();
   private pendingRequests = new Map<string, PendingRequest>();
   private pendingStreams = new Map<string, PendingStream>();
+  private readonly browserRecovery = new BrowserRealtimeRecoveryService(() => {
+    this.replaceSocket();
+  });
 
   constructor(
     private readonly runtime: RemoteRuntimeInfo,
@@ -215,6 +219,7 @@ export class RemoteSessionMultiplexTransport implements AppTransport {
 
   subscribe = (handler: (event: AppEvent) => void): () => void => {
     this.subscribers.add(handler);
+    this.browserRecovery.start();
     void this.ensureSocket().catch((error) => {
       handler({
         type: 'connection.error',
@@ -223,6 +228,9 @@ export class RemoteSessionMultiplexTransport implements AppTransport {
     });
     return () => {
       this.subscribers.delete(handler);
+      if (this.subscribers.size === 0) {
+        this.browserRecovery.stop();
+      }
     };
   }
 
@@ -321,6 +329,28 @@ export class RemoteSessionMultiplexTransport implements AppTransport {
     }, 3_000);
   }
 
+  private replaceSocket = (): void => {
+    if (this.subscribers.size === 0 || this.connectPromise !== null) {
+      return;
+    }
+    if (this.reconnectTimer !== null) {
+      window.clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    const staleSocket = this.socket;
+    this.socket = null;
+    if (staleSocket) {
+      staleSocket.onopen = null;
+      staleSocket.onmessage = null;
+      staleSocket.onerror = null;
+      staleSocket.onclose = null;
+      staleSocket.close();
+      this.failPendingWork(new Error('Remote transport connection replaced after browser recovery.'));
+      this.emit({ type: 'connection.close', payload: {} });
+    }
+    void this.ensureSocket().catch(() => undefined);
+  }
+
   private failPendingWork = (error: Error): void => {
     for (const pending of this.pendingRequests.values()) {
       window.clearTimeout(pending.timeoutId);