@nextclaw/ui 0.26.0 → 0.26.2

package/src/shared/lib/transport/__tests__/remote.transport.test.ts

@@ -185,6 +185,7 @@ describe('RemoteSessionMultiplexTransport request path', () => {
     await pendingFailure;
     await Promise.resolve();
     expect(replacementSocket?.sent).toHaveLength(0);
+    vi.advanceTimersByTime(250);
     window.dispatchEvent(new Event('online'));
     const secondReplacement = MockWebSocket.instances[2];
     secondReplacement?.open();
@@ -197,4 +198,29 @@ describe('RemoteSessionMultiplexTransport request path', () => {
     expect(MockWebSocket.instances).toHaveLength(3);
     unsubscribe();
   });
+
+  it('abandons a frozen connecting socket immediately when the page is shown again', async () => {
+    vi.spyOn(document, 'visibilityState', 'get').mockReturnValue('visible');
+    const transport = new RemoteSessionMultiplexTransport({
+      mode: 'remote',
+      protocolVersion: 1,
+      wsPath: '/_remote/ws'
+    }, 'https://remote.claw.cool');
+
+    const handler = vi.fn();
+    const unsubscribe = transport.subscribe(handler);
+    const frozenSocket = MockWebSocket.instances[0];
+
+    window.dispatchEvent(new PageTransitionEvent('pageshow', { persisted: true }));
+    await Promise.resolve();
+
+    expect(frozenSocket?.readyState).toBe(MockWebSocket.CLOSED);
+    expect(MockWebSocket.instances).toHaveLength(2);
+    expect(handler).toHaveBeenCalledWith({ type: 'connection.close', payload: {} });
+
+    MockWebSocket.instances[1]?.open();
+    await Promise.resolve();
+    expect(handler).toHaveBeenLastCalledWith({ type: 'connection.open', payload: {} });
+    unsubscribe();
+  });
 });

package/src/shared/lib/transport/browser-realtime-recovery.service.ts

@@ -1,5 +1,8 @@
+const RECOVERY_SIGNAL_COOLDOWN_MS = 250;
+
 export class BrowserRealtimeRecoveryService {
   private started = false;
+  private recoveryCooldownId: number | null = null;
 
   constructor(private readonly requestRecovery: () => void) {}
 
@@ -10,6 +13,8 @@ export class BrowserRealtimeRecoveryService {
     this.started = true;
     document.addEventListener('visibilitychange', this.handleVisibilityChange);
     window.addEventListener('online', this.handleOnline);
+    window.addEventListener('pageshow', this.handlePageShow);
+    window.addEventListener('focus', this.handleForegroundSignal);
   };
 
   stop = (): void => {
@@ -19,17 +24,39 @@ export class BrowserRealtimeRecoveryService {
     this.started = false;
     document.removeEventListener('visibilitychange', this.handleVisibilityChange);
     window.removeEventListener('online', this.handleOnline);
+    window.removeEventListener('pageshow', this.handlePageShow);
+    window.removeEventListener('focus', this.handleForegroundSignal);
+    if (this.recoveryCooldownId !== null) {
+      window.clearTimeout(this.recoveryCooldownId);
+      this.recoveryCooldownId = null;
+    }
   };
 
   private readonly handleVisibilityChange = (): void => {
-    if (document.visibilityState === 'visible') {
-      this.requestRecovery();
-    }
+    this.requestRecoveryIfVisible();
   };
 
   private readonly handleOnline = (): void => {
-    if (document.visibilityState === 'visible') {
-      this.requestRecovery();
+    this.requestRecoveryIfVisible();
+  };
+
+  private readonly handleForegroundSignal = (): void => {
+    this.requestRecoveryIfVisible();
+  };
+
+  private readonly handlePageShow = (event: PageTransitionEvent): void => {
+    if (event.persisted) {
+      this.requestRecoveryIfVisible();
+    }
+  };
+
+  private readonly requestRecoveryIfVisible = (): void => {
+    if (document.visibilityState !== 'visible' || this.recoveryCooldownId !== null) {
+      return;
     }
+    this.requestRecovery();
+    this.recoveryCooldownId = window.setTimeout(() => {
+      this.recoveryCooldownId = null;
+    }, RECOVERY_SIGNAL_COOLDOWN_MS);
   };
 }

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

@@ -54,7 +54,6 @@ 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();
@@ -95,7 +94,6 @@ class LocalRealtimeGateway {
     this.socket = socket;
 
     socket.onopen = () => {
-      this.replacingAfterBrowserRecovery = false;
       this.emit({ type: 'connection.open', payload: {} });
     };
 
@@ -113,7 +111,6 @@ class LocalRealtimeGateway {
     };
 
     socket.onclose = () => {
-      this.replacingAfterBrowserRecovery = false;
       this.emit({ type: 'connection.close', payload: {} });
       this.socket = null;
       if (!this.manualClose && this.subscribers.size > 0) {
@@ -133,10 +130,9 @@ class LocalRealtimeGateway {
   };
 
   private replaceSocket = (): void => {
-    if (this.subscribers.size === 0 || this.replacingAfterBrowserRecovery) {
+    if (this.subscribers.size === 0) {
       return;
     }
-    this.replacingAfterBrowserRecovery = true;
     if (this.reconnectTimer !== null) {
       window.clearTimeout(this.reconnectTimer);
       this.reconnectTimer = null;
@@ -156,7 +152,6 @@ class LocalRealtimeGateway {
 
   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

@@ -87,9 +87,16 @@ function createId(prefix: string): string {
 
 const REMOTE_REQUEST_TIMEOUT_MS = 15_000;
 
+class RemoteBrowserRecoveryReplacementError extends Error {
+  constructor() {
+    super('Remote transport connection replaced after browser recovery.');
+  }
+}
+
 export class RemoteSessionMultiplexTransport implements AppTransport {
   private socket: WebSocket | null = null;
   private connectPromise: Promise<void> | null = null;
+  private rejectConnect: ((error: Error) => void) | null = null;
   private connectTimeoutId: number | null = null;
   private reconnectTimer: number | null = null;
   private manualClose = false;
@@ -221,6 +228,9 @@ export class RemoteSessionMultiplexTransport implements AppTransport {
     this.subscribers.add(handler);
     this.browserRecovery.start();
     void this.ensureSocket().catch((error) => {
+      if (error instanceof RemoteBrowserRecoveryReplacementError) {
+        return;
+      }
       handler({
         type: 'connection.error',
         payload: { message: error instanceof Error ? error.message : String(error) }
@@ -258,6 +268,7 @@ export class RemoteSessionMultiplexTransport implements AppTransport {
     const wsUrl = resolveTransportWebSocketUrl(this.apiBase, this.runtime.wsPath);
     this.manualClose = false;
     this.connectPromise = new Promise<void>((innerResolve, innerReject) => {
+        this.rejectConnect = innerReject;
         const socket = new WebSocket(wsUrl);
         this.socket = socket;
         let connectionOpened = false;
@@ -279,6 +290,7 @@ export class RemoteSessionMultiplexTransport implements AppTransport {
           connectionOpened = true;
           clearConnectTimeout();
           this.connectPromise = null;
+          this.rejectConnect = null;
           innerResolve();
           this.emit({ type: 'connection.open', payload: {} });
         };
@@ -304,6 +316,7 @@ export class RemoteSessionMultiplexTransport implements AppTransport {
           const wasConnecting = this.connectPromise !== null;
           this.socket = null;
           this.connectPromise = null;
+          this.rejectConnect = null;
           this.failPendingWork(new Error('Remote transport connection closed.'));
           this.emit({ type: 'connection.close', payload: {} });
           if (wasConnecting && !connectionOpened) {
@@ -330,21 +343,29 @@ export class RemoteSessionMultiplexTransport implements AppTransport {
   }
 
   private replaceSocket = (): void => {
-    if (this.subscribers.size === 0 || this.connectPromise !== null) {
+    if (this.subscribers.size === 0) {
       return;
     }
     if (this.reconnectTimer !== null) {
       window.clearTimeout(this.reconnectTimer);
       this.reconnectTimer = null;
     }
+    if (this.connectTimeoutId !== null) {
+      window.clearTimeout(this.connectTimeoutId);
+      this.connectTimeoutId = null;
+    }
     const staleSocket = this.socket;
+    const rejectStaleConnect = this.rejectConnect;
     this.socket = null;
+    this.connectPromise = null;
+    this.rejectConnect = null;
     if (staleSocket) {
       staleSocket.onopen = null;
       staleSocket.onmessage = null;
       staleSocket.onerror = null;
       staleSocket.onclose = null;
       staleSocket.close();
+      rejectStaleConnect?.(new RemoteBrowserRecoveryReplacementError());
       this.failPendingWork(new Error('Remote transport connection replaced after browser recovery.'));
       this.emit({ type: 'connection.close', payload: {} });
     }