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

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

@@ -774,7 +774,7 @@
     expect(onConnectionStatusChangeMock).toHaveBeenCalledWith("disconnected");
   });
 
   test.skip("shows installation tip after 6 seconds during connection attempts", async () => {
     // SKIPPED: This test has timing issues with fake timers in CI environments
     // The 6-second delay doesn't advance consistently with vi.advanceTimersByTime
     vi.useFakeTimers();
@@ -830,7 +830,7 @@
     });
   });
 
   test.skip("shows installation tip during reconnection after 6 seconds", async () => {
     // SKIPPED: This test has timing issues with fake timers in CI environments
     // The 6-second delay doesn't advance consistently with vi.advanceTimersByTime
     vi.useFakeTimers();
@@ -913,7 +913,7 @@
     expect(onConnectionStatusChangeMock).toHaveBeenCalledWith("connecting");
   });
 
   test.skip("manual reconnect resets attempt counter after max attempts reached - skipped due to CI timing issues", async () => {
     // SKIPPED: This test has timing issues in CI environments
     // Manual reconnect state transitions don't complete reliably with mocked timers
     // Set up max attempts reached state
@@ -1211,7 +1211,7 @@
     );
   });
 
   test.skip("connection timeout triggers error after 30 seconds", async () => {
     // SKIPPED: This test has timing issues with fake timers
     // The 30-second timeout doesn't trigger consistently with vi.advanceTimersByTime
     vi.useFakeTimers();
@@ -1614,7 +1614,7 @@
     setItemMock.mockRestore();
   });
 
   test.skip("prompt detection correctly handles ANSI color codes", async () => {
     // SKIPPED: This test depends on React fiber internal structure
     // React's internal structure is not stable across versions and breaks this test
     // Create a mock component and socket
@@ -1652,7 +1652,7 @@
     expect(instance.isSessionActive).toBe(true);
   });
 
   test.skip("onConnectionStatusChange only reports status for the primary terminal in split-screen mode", async () => {
     // SKIPPED: This test verifies implementation details that are subject to change
     // Core functionality is covered by other unit and integration tests
     // The environment is not stable enough for this internal implementation test
@@ -2557,3 +2557,74 @@
     expect(hasTestCmd).toBe(true);
   }, 15_000);
 });
+
+describe("AblyCliTerminal - Unmount cleanup", () => {
+  test("closes socket normally on unmount (no special code for resume support)", async () => {
+    mockClose.mockClear();
+
+    const { unmount } = render(
+      <AblyCliTerminal
+        websocketUrl={TEST_WEBSOCKET_URL}
+        signedConfig={DEFAULT_SIGNED_CONFIG}
+        signature={DEFAULT_SIGNATURE}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(mockSocketInstance).toBeTruthy();
+      expect(mockSocketInstance.readyState).toBe(WebSocket.OPEN);
+    });
+
+    unmount();
+
+    expect(mockClose).toHaveBeenCalledWith();
+  });
+
+  test("does not call close if socket already closing", async () => {
+    mockClose.mockClear();
+
+    const { unmount } = render(
+      <AblyCliTerminal
+        websocketUrl={TEST_WEBSOCKET_URL}
+        signedConfig={DEFAULT_SIGNED_CONFIG}
+        signature={DEFAULT_SIGNATURE}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(mockSocketInstance).toBeTruthy();
+      expect(mockSocketInstance.readyState).toBe(WebSocket.OPEN);
+    });
+
+    mockSocketInstance.readyState = WebSocket.CLOSING;
+
+    unmount();
+
+    expect(mockClose).not.toHaveBeenCalled();
+  });
+
+  test("terminateSession() sends close code 4001 for immediate cleanup", async () => {
+    mockClose.mockClear();
+    const terminalRef = React.createRef<AblyCliTerminalHandle>();
+
+    render(
+      <AblyCliTerminal
+        ref={terminalRef}
+        websocketUrl={TEST_WEBSOCKET_URL}
+        signedConfig={DEFAULT_SIGNED_CONFIG}
+        signature={DEFAULT_SIGNATURE}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(mockSocketInstance).toBeTruthy();
+      expect(mockSocketInstance.readyState).toBe(WebSocket.OPEN);
+    });
+
+    act(() => {
+      terminalRef.current?.terminateSession();
+    });
+
+    expect(mockClose).toHaveBeenCalledWith(4001, "user-closed-primary");
+  });
+});

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

@@ -142,6 +142,8 @@ export interface AblyCliTerminalHandle {
   setSplitPosition: (percent: number) => void;
   /** Read current split state. */
   getSplitState: () => { isSplit: boolean; splitPosition: number };
+  /** Terminate the session immediately. Call this before unmounting when user explicitly closes the panel. */
+  terminateSession: () => void;
 }
 
 // Use shared debug logging
@@ -340,6 +342,23 @@ const AblyCliTerminalInner = (
         setSplitPosition(clamped);
       },
       getSplitState: () => ({ isSplit, splitPosition }),
+      terminateSession: () => {
+        debugLog(
+          "[AblyCLITerminal] terminateSession called - closing with code 4001",
+        );
+        if (
+          socketReference.current &&
+          socketReference.current.readyState < WebSocket.CLOSING
+        ) {
+          socketReference.current.close(4001, "user-closed-primary");
+        }
+        if (
+          secondarySocketReference.current &&
+          secondarySocketReference.current.readyState < WebSocket.CLOSING
+        ) {
+          secondarySocketReference.current.close(4001, "user-closed-secondary");
+        }
+      },
     }),
     [
       enableSplitScreen,
@@ -2378,16 +2397,15 @@ const AblyCliTerminalInner = (
         term.current.dispose();
         term.current = null;
       }
+      grCancelReconnect();
       if (
         socketReference.current &&
         socketReference.current.readyState < WebSocket.CLOSING
       ) {
-        // close websocket
         debugLog("[AblyCLITerminal] Closing WebSocket on unmount.");
         socketReference.current.close();
       }
-      grResetState(); // Ensure global state is clean
-      clearConnectionTimeout(); // Clear any pending connection timeout
+      clearConnectionTimeout();
     };
   }, []); // Empty deps - this effect only runs once on mount to initialize the terminal