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

[denissellu]

See FTF-198 This PR sends WebSocket close code 4001 when the terminal component unmounts. This tells the server the user intentionally closed the panel, triggering immediate session cleanup.

other part of this - https://github.com/ably/cli-terminal-server/pull/105

---

This pull request adds unmount cleanup logic and corresponding tests to the AblyCliTerminal component. The main focus is ensuring that the WebSocket connection is properly closed with a specific code and reason when the component unmounts, and that cleanup is skipped if the socket is already closing.

Unmount cleanup and testing improvements:

• AblyCliTerminal.tsx: Updated the unmount logic to close the WebSocket with code 4001 and reason "user-closed-panel" to signal an intentional close and immediate server cleanup. The close operation is now only performed if the socket is not already closing.
• AblyCliTerminal.test.tsx: Added tests to verify that the WebSocket is closed with the correct code and reason on unmount, and that no close is attempted if the socket is already closing.

---

Note

Improves explicit session cleanup signaling on component teardown.

• Update AblyCliTerminal.tsx to close WebSocket with close(4001, "user-closed-panel") during unmount; applies to both primary and secondary sockets and only when not already closing
• Add tests in AblyCliTerminal.test.tsx to assert close code/reason on unmount and that no close is called if the socket is already in CLOSING state

^{Written by Cursor Bugbot for commit 59b61d0. This will update automatically on new commits. Configure here.}

Summary by CodeRabbit

Release Notes

• Bug Fixes

  • Improved terminal cleanup on unmount to properly signal closure to the server with clear shutdown intent.

• Tests

  • Added test suite to verify unmount cleanup behavior, including edge cases where the connection is already closing.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
cli-web-cli	Ready	Preview, Comment	Jan 9, 2026 4:18pm

[coderabbitai]

Walkthrough

Modifies AblyCliTerminal component to close WebSocket connections with code 4001 and reason "user-closed-panel" when unmounting, signaling intentional shutdown to enable server session cleanup. Adds test coverage for unmount cleanup behavior.

Changes

Cohort / File(s)	Change Summary
WebSocket close signal on unmount packages/react-web-cli/src/AblyCliTerminal.tsx	Updated WebSocket close call on component unmount to pass close code 4001 with reason "user-closed-panel" instead of plain close, with explanatory comment for server cleanup intent
Unmount cleanup test suite packages/react-web-cli/src/AblyCliTerminal.test.tsx	Added new "Unmount cleanup" test suite with two test cases: one verifying WebSocket closes with code 4001 and reason when unmounted, another verifying no close call when socket already in CLOSING state

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 When panels close and time to part,
A code four-zero-zero-one at heart,
"User-closed-panel" rings so clear,
Sessions end without a tear! 🌙✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: sending a close code when the react-web-cli panel unmounts.
Linked Issues check	✅ Passed	Changes implement the core requirement to terminate terminal sessions on panel unmount by closing WebSocket with code 4001 and reason 'user-closed-panel'.
Out of Scope Changes check	✅ Passed	All changes are directly related to the issue objective of terminating sessions on panel close; no out-of-scope modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch FTF-198-send-close-code-on-unmount

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/react-web-cli/src/AblyCliTerminal.tsx (1)

3556-3564: Add close code and reason to secondary WebSocket cleanup for consistency.

The secondary WebSocket at line 3563 closes without an explicit close code, defaulting to 1000, while the primary socket uses close code 4001 with reason "user-closed-panel" at line 2425. This inconsistency should be addressed.

Consider updating line 3563 to use an explicit close code and reason string (e.g., close(1000, "user-closed-panel") or close(4001, "user-closed-panel")) to match the pattern established for primary socket cleanup. This ensures both sockets signal their closure to the server in the same manner.

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 9b37916 and f7a6f37.

📒 Files selected for processing (2)

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

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/Development.mdc)

**/*.{ts,tsx}: Use TypeScript and follow best practice naming conventions
ESLint is used to ensure all code adheres best practices; ensure you check that all code passes the linter before concluding your work.

Files:

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

🧬 Code graph analysis (2)

packages/react-web-cli/src/AblyCliTerminal.tsx (1)

packages/react-web-cli/src/terminal-shared.ts (1)

• debugLog (311-315)

packages/react-web-cli/src/AblyCliTerminal.test.tsx (1)

packages/react-web-cli/src/AblyCliTerminal.tsx (1)

• AblyCliTerminal (3838-3841)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)

• GitHub Check: auth-tests
• GitHub Check: session-tests
• GitHub Check: ui-tests
• GitHub Check: Cursor Bugbot
• GitHub Check: e2e-cli

🔇 Additional comments (2)

packages/react-web-cli/src/AblyCliTerminal.tsx (1)

2418-2426: LGTM - Clear intent and proper cleanup.

The unmount logic correctly closes the WebSocket with code 4001 to signal intentional closure, and the guard condition properly checks for sockets that are still active (CONNECTING or OPEN states). The inline comment clearly documents the server-side cleanup behavior.

packages/react-web-cli/src/AblyCliTerminal.test.tsx (1)

2471-2514: LGTM - Comprehensive test coverage for unmount cleanup.

The test suite appropriately covers both the standard unmount case (socket open → close with 4001) and the edge case where the socket is already closing. The test structure is clear and the assertions directly verify the implementation's behavior.