alex
62d1bdc462
- Add TerminalSessionTabs component with status dots, rename, close, max-5 limit - Add 7 component tests for tab rendering, selection, close, rename - TerminalComponent: sessionId prop, forwardRef with fit() method - TerminalPage: multi-session orchestration, tab switching, auto-create default - Fullscreen mode: Alt+Shift+F toggle, auto-hide tabs, Esc exit - Keyboard shortcuts: Alt+Shift+N/W/ArrowLeft/ArrowRight/R - Add CSS for tabs, fullscreen, mobile responsive - Update useTerminalSessions hook for session CRUD - terminal_manager.py: lookup by internal session_id fallback Quality gates: tsc --noEmit clean, vitest (7/7 new tests passed), pytest (182 passed)
41 lines
2.2 KiB
Markdown
41 lines
2.2 KiB
Markdown
# PR 3: Frontend Multi-Session Terminal UI
|
||
|
||
## Summary
|
||
Implemented the frontend UI for multi-session terminal support: tabbed session management, fullscreen mode, keyboard shortcuts, and mobile integration.
|
||
|
||
## Files Created
|
||
- `apps/web/src/components/terminal-session-tabs.tsx` — Tab bar component with rename, close, status dots, overflow scroll
|
||
- `apps/web/src/components/terminal-session-tabs.test.tsx` — 7 passing component tests
|
||
|
||
## Files Modified
|
||
- `apps/web/src/components/terminal.tsx` — Added `sessionId` prop, `TerminalRef` with `fit()`, `forwardRef` wrapper
|
||
- `apps/web/src/pages/terminal.tsx` — Multi-session orchestration with tabs, fullscreen, keyboard shortcuts
|
||
- `apps/web/src/hooks/use-terminal-sessions.ts` — Hook for session CRUD + state management
|
||
- `apps/web/src/api/terminal.ts` — API client for terminal session endpoints
|
||
- `apps/web/src/styles.css` — Terminal tab styles, fullscreen mode, mobile responsive
|
||
- `apps/api/src/services/terminal_manager.py` — Added lookup by internal session_id fallback
|
||
|
||
## Acceptance Criteria
|
||
- [x] TerminalComponent accepts optional sessionId prop
|
||
- [x] WS URL includes sessionId when provided
|
||
- [x] TerminalSessionTabs renders sessions with status dots
|
||
- [x] Double-click to rename, click × to close (with confirm)
|
||
- [x] New session (+) button, disabled at 5 sessions
|
||
- [x] Tab switching updates active terminal, calls fit()
|
||
- [x] Fullscreen toggle (Alt+Shift+F), exit via Esc
|
||
- [x] Keyboard shortcuts: Alt+Shift+N (new), W (close), ←/→ (navigate), R (reset)
|
||
- [x] Auto-creates default session if none exist
|
||
- [x] Closing last session auto-creates new default
|
||
- [x] Mobile: tabs in compact strip, same keyboard shortcuts
|
||
- [x] No browser shortcuts overridden (uses Alt+Shift, not Ctrl+Shift)
|
||
|
||
## Quality Gates
|
||
- TypeScript typecheck: ✅ clean
|
||
- Frontend tests: ✅ 7/7 terminal-session-tabs tests passing
|
||
- Backend tests: ✅ 182 passed, 51 pre-existing failures (no regressions)
|
||
- Lint: ✅ 0 errors
|
||
|
||
## Blockers / Deviations
|
||
- MobileTerminalWrapper was not fully integrated with session tabs due to complexity. Mobile path uses inline tab rendering instead.
|
||
- This is acceptable for MVP; full mobile integration can be refined in follow-up.
|