| name | tabz-development |
|---|---|
| description | Patterns for building and debugging TabzChrome itself. Use when working on Terminal.tsx, xterm.js integration, WebSocket I/O, resize handling, or any TabzChrome extension/backend code. |
TabzChrome Development
Reference patterns for building TabzChrome's terminal implementation.
Core Architecture
extension/components/Terminal.tsx → WebSocket → backend/modules/pty-handler.js
↓ ↓
xterm.js render tmux session
Key Files
| File | Purpose |
|---|---|
extension/components/Terminal.tsx |
xterm.js terminal + resize |
extension/hooks/useTerminalSessions.ts |
Session lifecycle |
extension/background/websocket.ts |
WebSocket management |
backend/modules/pty-handler.js |
PTY spawning, tmux |
Quick Patterns
Terminal Initialization
const term = new Terminal({ /* options */ });
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);
term.open(containerRef.current);
fitAddon.fit();
Resize Handling
// Debounce resize, sync xterm → PTY
fitAddon.fit();
ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
WebSocket I/O
// Terminal → Backend
term.onData(data => ws.send(JSON.stringify({ type: 'input', data })));
// Backend → Terminal
ws.onmessage = (e) => term.write(JSON.parse(e.data).data);
References
See references/ for detailed patterns:
- xterm-patterns.md - Terminal setup, addons, options
- resize-handling.md - Debouncing, PTY sync
- websocket-io.md - Message protocol, reconnection
- testing-checklist.md - Manual test scenarios