Skip to content

Add integrated terminal panel with xterm.js and node-pty#881

Open
bobicloudvision wants to merge 4 commits into
BabylonJS:masterfrom
bobicloudvision:feat/terminal-panel
Open

Add integrated terminal panel with xterm.js and node-pty#881
bobicloudvision wants to merge 4 commits into
BabylonJS:masterfrom
bobicloudvision:feat/terminal-panel

Conversation

@bobicloudvision

@bobicloudvision bobicloudvision commented Jun 18, 2026

Copy link
Copy Markdown

Summary

This pull request introduces a built-in terminal panel to the editor layout. It uses xterm.js with fit and webgl addons for rendering and node-pty for an interactive shell. The terminal automatically initializes when a project is open, follows the project’s working directory, resizes responsively, and restarts when the project path changes.

Changes Made

Terminal integration

  • Implemented EditorTerminal component rendering an embedded terminal panel with a sticky header.
  • Added xterm.js with FitAddon and optional WebglAddon for high-quality rendering and auto-fit behavior.
  • Wired node-pty via execNodePty to provide an interactive shell session.

Project-awareness and lifecycle

  • Terminal visibility is gated by projectConfiguration.path and updates via onProjectConfigurationChangedObservable.
  • Shell cwd is set relative to the current project path and re-initialized when the project changes.
  • Clean disposal of addons, terminal, and PTY on unmount; safe restart logic on project changes.

Responsiveness and UX

  • ResizeObserver triggers fit() for responsive sizing.
  • Terminal resizes on layout changes and forwards size to PTY.
  • Theming configured for editor look-and-feel with readable defaults and selection styling.

Benefits

  • Improves productivity by enabling command execution without leaving the editor.
  • Responsive and performant terminal rendering (WebGL fallback to canvas).
  • Project-aware shell sessions reduce friction (correct cwd, auto-restart on project switch).
  • Clean lifecycle management reduces leaks and ensures stability.

bobicloudvision and others added 4 commits November 3, 2025 16:56
Add an integrated terminal as a dockable panel in the editor layout,
backed by node-pty and rendered with xterm.js (fit + webgl addons).

- editor/src/editor/layout/terminal.tsx: terminal panel component
- editor/src/editor/layout.{tsx,json}: register the terminal tab
- editor/src/electron/node-pty.ts, src/tools/node-pty.ts, src/export.ts: pty backend wiring
- Bump layout version (5.0.0-alpha.2 -> 5.0.0-alpha.3) so existing users,
  whose saved layout predates the Terminal tab, reset to the default layout
  that now includes it.
- Guard FitAddon.fit() against invalid (NaN/Infinity/zero) dimensions, which
  occur when an inactive flexlayout tab is mounted at 0x0 and corrupted the
  rendered terminal on resize.
- Track the ResizeObserver and disconnect it on dispose to avoid leaking /
  stacking duplicate observers across re-inits.
@bobicloudvision bobicloudvision changed the title feat/terminal panel Add integrated terminal panel with xterm.js and node-pty Jun 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant