feat(web): implement multi-session terminal tab management #520

jason.woltje · 2026-02-26T03:18:27Z

jason.woltje commented

2026-02-26 03:18:27 +00:00

Summary

Create useTerminalSessions hook for multi-session management over single WebSocket
Refactor XTerminal to prop-driven API (sessionId, sendInput, resize, closeSession)
Rewrite TerminalPanel with real multi-tab session management
Add + button for new tabs, per-tab close buttons, inline double-click rename
Keep all XTerminal instances mounted (hidden) for scrollback preservation
Auto-create first session on connect, auto-select next on close
Connection error banner and session status tracking
76 new unit tests (41 hook, 14 XTerminal, 43 TerminalPanel)

Test plan

41 useTerminalSessions hook tests
14 XTerminal component tests (refactored for new prop API)
43 TerminalPanel integration tests
1332 total web tests pass
TypeScript typecheck clean
Lint clean

Relates to #509

## Summary - Create useTerminalSessions hook for multi-session management over single WebSocket - Refactor XTerminal to prop-driven API (sessionId, sendInput, resize, closeSession) - Rewrite TerminalPanel with real multi-tab session management - Add + button for new tabs, per-tab close buttons, inline double-click rename - Keep all XTerminal instances mounted (hidden) for scrollback preservation - Auto-create first session on connect, auto-select next on close - Connection error banner and session status tracking - 76 new unit tests (41 hook, 14 XTerminal, 43 TerminalPanel) ## Test plan - [x] 41 useTerminalSessions hook tests - [x] 14 XTerminal component tests (refactored for new prop API) - [x] 43 TerminalPanel integration tests - [x] 1332 total web tests pass - [x] TypeScript typecheck clean - [x] Lint clean Relates to #509

jason.woltje added 1 commit 2026-02-26 03:18:27 +00:00

feat(web): implement multi-session terminal tab management (CT-TERM-004)

ci/woodpecker/push/web Pipeline was successful

Details

fa9a6a169a

Transforms the single-session terminal into a full multi-tab system:

- Add useTerminalSessions hook: manages multiple PTY sessions over a
  single Socket.IO connection to /terminal namespace. Per-session output
  multiplexing via callback registry (registerOutputCallback). Sessions
  tracked in a Map with status (active/exited) and auto-selection of
  the first available session when active is closed.

- Refactor XTerminal: remove internal useTerminal usage; accept sessionId
  and control functions (sendInput, resize, closeSession, registerOutputCallback)
  as props from parent. Registers its own output callback on mount and
  unregisters on unmount. Exit overlay shows restart button using onRestart
  callback.

- Refactor TerminalPanel: fully internally managed tabs via
  useTerminalSessions. Real tab bar rendered from sessions Map. Features:
  "+" button for new tabs, per-tab close buttons, double-click inline tab
  rename (Enter/Escape/blur), connection error banner, auto-create first
  session on connect, and XTerminal instances kept mounted (display:none)
  for scrollback preservation when switching tabs.

- Add comprehensive test suite: 41 tests for useTerminalSessions, 14 for
  updated XTerminal, 43 for updated TerminalPanel (76 total). All pass.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

jason.woltje merged commit 859dcfc4b7 into main

2026-02-26 03:18:35 +00:00

jason.woltje referenced this issue from a commit

2026-02-26 03:18:36 +00:00

feat(web): implement multi-session terminal tab management (#520)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: mosaic/stack#520