[FTF-198] Send close code on react-web-cli panel unmount

packages/react-web-cli/src/AblyCliTerminal.test.tsx

@@ -754,7 +754,7 @@
     expect(onConnectionStatusChangeMock).toHaveBeenCalledWith("disconnected");
   });
 
   test.skip("shows installation tip after 6 seconds during connection attempts", async () => {
     vi.useFakeTimers();
 
     try {
@@ -808,7 +808,7 @@
     });
   });
 
   test.skip("shows installation tip during reconnection after 6 seconds", async () => {
     vi.useFakeTimers();
 
     try {
@@ -889,7 +889,7 @@
     expect(onConnectionStatusChangeMock).toHaveBeenCalledWith("connecting");
   });
 
   test.skip("manual reconnect resets attempt counter after max attempts reached - skipped due to CI timing issues", async () => {
     // Set up max attempts reached state
     vi.mocked(GlobalReconnect.isMaxAttemptsReached).mockReturnValue(true);
     vi.mocked(GlobalReconnect.getMaxAttempts).mockReturnValue(5);
@@ -1143,7 +1143,7 @@
     );
   });
 
   test.skip("connection timeout triggers error after 30 seconds", async () => {
     // Skip this test for now due to timing issues with fake timers
     vi.useFakeTimers();
 
@@ -1545,7 +1545,7 @@
     setItemMock.mockRestore();
   });
 
   test.skip("prompt detection correctly handles ANSI color codes", async () => {
     // Skip this test due to React fiber internal structure changes that are not stable
 
     // Create a mock component and socket
@@ -1583,7 +1583,7 @@
     expect(instance.isSessionActive).toBe(true);
   });
 
   test.skip("onConnectionStatusChange only reports status for the primary terminal in split-screen mode", async () => {
     // Skip this test if the environment is not stable enough
     // This test verifies implementation details that are subject to change
     // The core functionality is tested through proper unit and integration tests
@@ -2467,3 +2467,48 @@
     expect(hasTestCmd).toBe(true);
   }, 15_000);
 });
+
+describe("AblyCliTerminal - Unmount cleanup", () => {
+  test("sends close code 4001 (user-closed-panel) on unmount", async () => {
+    mockClose.mockClear();
+
+    const { unmount } = render(
+      <AblyCliTerminal
+        websocketUrl="wss://test.ably.com"
+        ablyApiKey="test-key"
+      />,
+    );
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    expect(mockSocketInstance).toBeTruthy();
+    expect(mockSocketInstance.readyState).toBe(WebSocket.OPEN);
+
+    unmount();
+
+    expect(mockClose).toHaveBeenCalledWith(4001, "user-closed-panel");
+  });
+
+  test("does not call close if socket already closing", async () => {
+    mockClose.mockClear();
+
+    const { unmount } = render(
+      <AblyCliTerminal
+        websocketUrl="wss://test.ably.com"
+        ablyApiKey="test-key"
+      />,
+    );
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+
+    mockSocketInstance.readyState = WebSocket.CLOSING;
+
+    unmount();
+
+    expect(mockClose).not.toHaveBeenCalled();
+  });
+});

packages/react-web-cli/src/AblyCliTerminal.tsx

@@ -2419,9 +2419,10 @@ const AblyCliTerminalInner = (
         socketReference.current &&
         socketReference.current.readyState < WebSocket.CLOSING
       ) {
-        // close websocket
+        // close websocket with code 4001 to signal intentional close
+        // This tells the server to cleanup immediately (no grace period)
         debugLog("[AblyCLITerminal] Closing WebSocket on unmount.");
-        socketReference.current.close();
+        socketReference.current.close(4001, "user-closed-panel");
       }
       grResetState(); // Ensure global state is clean
       clearConnectionTimeout(); // Clear any pending connection timeout
@@ -3559,7 +3560,7 @@ const AblyCliTerminalInner = (
         debugLog(
           "[AblyCLITerminal] Closing secondary WebSocket on terminal cleanup.",
         );
-        secondarySocketReference.current.close();
+        secondarySocketReference.current.close(4001, "user-closed-panel");
         secondarySocketReference.current = null;
       }