feat: xterm.js + node-pty architecture for Claude CLI web terminal

Complete rewrite from tmux + JSONL parsing to a clean PTY-based approach.
The proxy spawns Claude CLI in a pseudo-terminal via node-pty and relays
terminal I/O as binary WebSocket frames to the simple-chat backend,
which forwards them to the browser where xterm.js renders a full terminal.

- node-pty PTY manager with 50KB replay buffer per session
- Binary frame protocol with chatId multiplexing
- WebSocket client with auto-reconnection and heartbeat
- Directory listing and session listing for the web UI
- README with setup instructions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-22 00:24:29 +03:00
commit 4a91896732
17 changed files with 6146 additions and 0 deletions

118
README.md Normal file
View File

@ -0,0 +1,118 @@
# Claude CLI Proxy
Локальное приложение, которое позволяет управлять [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) через веб-браузер. Терминал Claude Code отображается прямо в браузере с помощью xterm.js — полноценный терминал с цветами, автокомплитом и интерактивным UI.
Работает в связке с [simple-chat](https://git.vigdorov.ru/vigdorov/simple-chat) — веб-приложением для чатов с AI.
## Как это работает
```
Браузер (xterm.js) ←──WebSocket──→ simple-chat (backend) ←──WebSocket──→ claude-cli-proxy (local)
node-pty
Claude Code CLI
```
1. **claude-cli-proxy** запускается на вашем компьютере рядом с Claude Code CLI
2. Прокси подключается к бэкенду simple-chat через WebSocket
3. При создании чата в веб-интерфейсе, прокси запускает Claude CLI в псевдо-терминале (PTY)
4. Ввод/вывод терминала транслируется через WebSocket в браузер
5. Браузер отображает полноценный терминал через xterm.js
## Требования
- **Node.js** 18+ (рекомендуется 20+)
- **Claude Code CLI** установлен и доступен в PATH (`claude` команда)
- Работающий инстанс **simple-chat** (бэкенд + фронтенд)
## Установка
### 1. Настройте simple-chat
Прокси работает только вместе с simple-chat. Убедитесь что simple-chat бэкенд запущен.
### 2. Создайте устройство в simple-chat
Откройте simple-chat в браузере, перейдите в **Настройки → Устройство** и создайте новое устройство. Скопируйте **токен** — он понадобится для подключения прокси.
### 3. Установите зависимости
```bash
git clone https://git.vigdorov.ru/vigdorov/claude-cli-proxy.git
cd claude-cli-proxy
npm install
```
### 4. Создайте файл `.env`
```bash
cp .env.example .env
```
Отредактируйте `.env`:
```env
# Токен устройства из настроек simple-chat
PROXY_TOKEN=ваш_токен_из_шага_2
# URL бэкенда simple-chat
# Для локальной разработки:
SERVER_URL=ws://localhost:3000/ws/agent-proxy
# Для продакшена:
# SERVER_URL=wss://ai-chat.vigdorov.ru/ws/agent-proxy
```
### 5. Запустите
```bash
npm start
```
В консоли должно появиться:
```
[proxy] Starting claude-cli-proxy (xterm mode)...
[proxy] Running. Press Ctrl+C to stop.
[WS] Connected to server
[proxy] Connected to server, waiting for sync...
```
## Использование
1. Откройте simple-chat в браузере
2. В сайдбаре нажмите **Claude Agent**
3. Нажмите **+** чтобы создать новый чат
4. Выберите рабочую директорию (проект)
5. Терминал Claude Code откроется прямо в браузере
### Мобильные устройства
На мобиле и планшете внизу экрана отображаются кнопки управления:
- **Горячие клавиши:** Esc, Tab, ↑, ↓, y, n, Enter, Ctrl+C, Ctrl+O, ⇧Tab
- **Быстрые команды:** /compact, /clear, /model, /help
На десктопе кнопки скрыты — для показа нажмите иконку клавиатуры в правом нижнем углу.
## Конфигурация
| Переменная | Описание | По умолчанию |
|-----------|----------|--------------|
| `PROXY_TOKEN` | Токен устройства из настроек simple-chat | — (обязательно) |
| `SERVER_URL` | WebSocket URL бэкенда | `wss://ai-chat.vigdorov.ru/ws/agent-proxy` |
Файл `.env` можно также разместить в `~/.claude-proxy/.env` — он будет загружен первым.
## Безопасность
- Прокси подключается к бэкенду **исходящим** соединением (не открывает порты)
- Аутентификация по токену устройства
- Терминальные данные передаются через бинарные WebSocket-фреймы
- При использовании через интернет рекомендуется WSS (TLS)
## Технологии
- **Node.js + TypeScript** — runtime
- **node-pty** — псевдо-терминал для запуска Claude CLI
- **ws** — WebSocket клиент
- **xterm.js** — терминал в браузере (на стороне simple-chat)