2026-03-22Active
Agent Space
Claude Code, Codex CLI, Gemini CLI를 한 화면에서 띄우고, 세션 상태를 보며 입력까지 보낼 수 있는 로컬 작업 공간. 매일 여러 에이전트를 함께 쓰면서 늘어나는 터미널 창을 정리하려고 직접 만든 도구로, 브라우저와 Electron 데스크톱 앱 모두 지원.
Some parts of this project were developed with the assistance of AI tools.
Node.jsTypeScriptReactElectronWebSocket
Summary
여러 CLI 에이전트를 터미널 창 여러 개 대신 한 화면에서 띄워두고 쓰려고 만든 개인 도구
Why I Built It
- 에이전트마다 터미널 창이 늘어나, 어떤 세션이 작업 중이고 어떤 세션이 입력 대기인지 파악 불가
- 같은 지시를 여러 에이전트에 보내거나 결과를 비교할 때마다 창 전환 필요
Approach
- node-pty로 에이전트 세션을 만들고 WebSocket으로 출력을 스트리밍
- React와 xterm.js로 터미널 화면을 그리고, 세션 상태를 도트 아바타로 표시
- 같은 화면을 브라우저와 Electron 앱에서 모두 사용
Key Features
- Claude Code, Codex CLI, Gemini CLI, Bash 세션 생성, 종료, 재연결
- WebSocket 실시간 출력 스트리밍
- 여러 세션 동시 실행과 브로드캐스트 입력
- 세션별 working/idle 상태를 도트 아바타로 표시
- 세로 정렬, 좌우 분할 레이아웃 전환과 Ctrl + 숫자 단축키로 세션 이동
- 브라우저와 Electron 데스크톱 앱(macOS) 지원
Tech Stack
Node.jsExpresswsnode-ptyReactViteElectronTailwind CSS