Agent Skills: TabzChrome Development

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