Fix terminal disconnect when toggling split pane mode#745
Merged
Conversation
The split pane feature (d94223b) moved terminalElement between different positions in the React tree (inside ResizablePanelGroup vs. a plain div), causing React to unmount/remount TerminalPane. The unmount destroyed the xterm surface and closed the WebSocket, and the stale-nonce guard prevented reconnection — resulting in a blank screen. Fix: render terminalElement via createPortal into a stable container div (created once, never replaced). A useLayoutEffect moves that container between slot divs using DOM appendChild when split mode changes. Since the portal target never changes identity, React never unmounts the terminal component. Co-Authored-By: Claude Opus 4.6 <[email protected]>
Detach the stable portal container from its current parent when the effect re-runs or unmounts, ensuring it's always in a known state rather than potentially orphaned in a stale DOM node. Co-Authored-By: Claude Opus 4.6 <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
terminalElementbetween different React tree positions, causing unmount/remount which destroyed the xterm surface and WebSocket connectioncreatePortalinto a stable container div (created once, never replaced), and useuseLayoutEffectto move that container between slot divs using DOMappendChild— the portal target never changes identity, so React never unmounts the terminalTest plan
pnpm run check)pnpm run finalize:web)