203 lines
8.1 KiB
Markdown
203 lines
8.1 KiB
Markdown
# Cosmo Studio — Пиксельный офис агентов
|
||
|
||
> Веб-дашборд в реальном времени: Cosmo, Люся и Claude Coding как пиксельные персонажи в виртуальном офисе.
|
||
|
||
## Концепция
|
||
|
||
Открываешь браузер → видишь офис. Я пишу тебе ответ → мой персонаж печатает за компьютером. Агент закончил работу → идёт на диван в зону отдыха. Люся думает → её персонаж чешет голову.
|
||
|
||
**Стек:**
|
||
- Frontend: React + Canvas 2D (пиксель-арт офис)
|
||
- Backend: Node.js + WebSocket (мост между OpenClaw и браузером)
|
||
- Хостинг: VM Сервисы → `studio.digital-home.site`
|
||
- Спрайты: из репозитория AgentRoom (MIT лицензия)
|
||
|
||
---
|
||
|
||
## Этапы
|
||
|
||
### Этап 0 — Подготовка (1-2 дня)
|
||
|
||
**0.1 Открыть OpenClaw API для VM Сервисов**
|
||
- Сейчас `gateway.bind = "lan"` — уже слушает на LAN интерфейсе (192.168.31.103:18789)
|
||
- VM Сервисы (192.168.31.60) должна быть в той же сети → проверить пинг
|
||
- Если не достучаться: включить `gateway.bind = "lan"` явно + проверить firewall
|
||
- Аутентификация: токен уже настроен в конфиге
|
||
|
||
**0.2 Скачать спрайты из AgentRoom**
|
||
Репозиторий: https://github.com/liuyixin-louis/agentroom
|
||
Нужные файлы:
|
||
- `agentroom-visual/public/assets/` — тайлсеты офиса (SkyOffice: FloorAndGround, Modern_Office)
|
||
- `agentroom-visual/public/assets/characters/` — спрайты персонажей (JIK-A-4 Metro City)
|
||
- Каждый персонаж: 4 направления × 3 кадра = 12 спрайтов (idle, walk, type)
|
||
|
||
**0.3 Назначить персонажей агентам**
|
||
| Агент | Персонаж | Цвет |
|
||
|-------|----------|------|
|
||
| Cosmo (main) | Синий character | #3B82F6 |
|
||
| Люся (wife) | Розовый character | #EC4899 |
|
||
| Claude Coding | Зелёный character | #10B981 |
|
||
| Claude Research | Фиолетовый character | #8B5CF6 |
|
||
|
||
---
|
||
|
||
### Этап 1 — OpenClaw Bridge (2-3 дня)
|
||
|
||
**Задача:** Node.js сервис на VM Сервисы, который подключается к OpenClaw WebSocket API и транслирует события агентов.
|
||
|
||
**Структура:** `/opt/digital-home/cosmo-studio/bridge/`
|
||
|
||
```
|
||
bridge/
|
||
├── index.js # WebSocket клиент к OpenClaw
|
||
├── state.js # Состояние всех агентов
|
||
├── server.js # WebSocket сервер → браузер
|
||
└── parser.js # Разбор JSONL событий
|
||
```
|
||
|
||
**Логика определения состояния агента:**
|
||
|
||
OpenClaw sessions API: `GET http://192.168.31.103:18789/sessions`
|
||
WebSocket events: `ws://192.168.31.103:18789`
|
||
|
||
Из JSONL событий:
|
||
```
|
||
toolCall → agent = "typing" (пишет)
|
||
toolResult → agent = "reading" (читает/думает)
|
||
text block → agent = "sending" (отправляет)
|
||
session idle → agent = "idle" (свободен)
|
||
session running → agent = "working"
|
||
```
|
||
|
||
**Состояния персонажа:**
|
||
- `idle` → сидит за столом, анимация дыхания
|
||
- `typing` → руки на клавиатуре, быстрая анимация
|
||
- `thinking` → смотрит в экран, медленная анимация
|
||
- `walking` → движется по офису (BFS pathfinding)
|
||
- `break` → на диване в Break Room
|
||
- `waiting` → speech bubble "⏳"
|
||
|
||
---
|
||
|
||
### Этап 2 — Офисный движок (3-4 дня)
|
||
|
||
**Задача:** React + Canvas 2D рендерер с тайлсетами и персонажами.
|
||
|
||
**Структура:** `/opt/digital-home/cosmo-studio/frontend/`
|
||
|
||
```
|
||
src/
|
||
├── engine/
|
||
│ ├── Renderer.ts # Canvas 2D loop (requestAnimationFrame)
|
||
│ ├── TilesetManager.ts # Загрузка и рендер тайлов
|
||
│ ├── Character.ts # Спрайт + анимация + позиция
|
||
│ ├── Pathfinding.ts # BFS по офисной сетке
|
||
│ └── OfficeLayout.ts # Карта офиса (столы, диваны, зоны)
|
||
├── components/
|
||
│ ├── Office.tsx # Основной Canvas компонент
|
||
│ ├── AgentCard.tsx # Карточка агента (статус, токены)
|
||
│ └── EventFeed.tsx # Лента событий (последние действия)
|
||
├── hooks/
|
||
│ └── useAgentEvents.ts # WebSocket → состояния агентов
|
||
└── App.tsx
|
||
```
|
||
|
||
**Офисная карта (32×24 тайла, каждый 32px = 1024×768px):**
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ [💻 Desk Cosmo] [💻 Desk Люся] │ ← Work Room
|
||
│ [💻 Desk Coding] [💻 Desk Res] │
|
||
├─────────────────────────────────┤
|
||
│ [🛋️ Couch] [🌱 Plant] [TV] │ ← Break Room
|
||
└─────────────────────────────────┘
|
||
```
|
||
|
||
**Логика переходов:**
|
||
- Агент стал `working` → персонаж идёт к своему столу (BFS)
|
||
- Агент стал `idle` → персонаж идёт в Break Room
|
||
- Агент `typing` → анимация печати
|
||
- Два агента встретились → speech bubble "👋"
|
||
|
||
---
|
||
|
||
### Этап 3 — UI панели (1-2 дня)
|
||
|
||
**Боковая панель:**
|
||
- Список агентов: имя + статус + текущее действие
|
||
- Токены: потрачено сегодня, неделя
|
||
- Последнее сообщение (первые 60 символов)
|
||
|
||
**Нижняя панель — лента событий:**
|
||
```
|
||
17:42 Cosmo → отвечает Даниилу (telegram)
|
||
17:41 Coding → читает файл main.go
|
||
17:40 Люся → обрабатывает heartbeat
|
||
```
|
||
|
||
**Верхняя панель:**
|
||
- Дата/время
|
||
- Кнопка "Open in Telegram" → deep link
|
||
- Индикатор здоровья системы
|
||
|
||
---
|
||
|
||
### Этап 4 — Деплой (1 день)
|
||
|
||
```yaml
|
||
# /opt/digital-home/cosmo-studio/docker-compose.yml
|
||
services:
|
||
cosmo-studio:
|
||
build: .
|
||
ports:
|
||
- "3400:3400"
|
||
environment:
|
||
- OPENCLAW_URL=ws://192.168.31.103:18789
|
||
- OPENCLAW_TOKEN=${OPENCLAW_TOKEN}
|
||
networks:
|
||
- services_proxy
|
||
restart: unless-stopped
|
||
|
||
networks:
|
||
services_proxy:
|
||
external: true
|
||
```
|
||
|
||
NPM proxy host: `studio.digital-home.site` → `cosmo-studio:3400`
|
||
|
||
---
|
||
|
||
## Что нужно решить заранее
|
||
|
||
1. **OpenClaw WebSocket API** — какие именно события транслирует, нужно изучить документацию `/home/daniil/.npm-global/lib/node_modules/openclaw/docs`
|
||
|
||
2. **Firewall между VPS и VM Сервисы** — сейчас VM Сервисы не видит gateway. Вариант: открыть порт 18789 в ufw на VPS, или использовать SSH tunnel.
|
||
|
||
3. **Спрайты** — нужно клонировать репо и выбрать конкретные файлы из `agentroom-visual/public/assets/`
|
||
|
||
4. **Аутентификация дашборда** — добавить basic auth через NPM или JWT
|
||
|
||
---
|
||
|
||
## Оценка времени
|
||
|
||
| Этап | Работа |
|
||
|------|--------|
|
||
| 0. Подготовка | 1-2 дня |
|
||
| 1. Bridge сервис | 2-3 дня |
|
||
| 2. Офисный движок | 3-4 дня |
|
||
| 3. UI панели | 1-2 дня |
|
||
| 4. Деплой | 1 день |
|
||
| **Итого** | **~2 недели** |
|
||
|
||
---
|
||
|
||
## Статус
|
||
|
||
- [ ] Этап 0: Подготовка
|
||
- [ ] Этап 1: Bridge сервис
|
||
- [ ] Этап 2: Офисный движок
|
||
- [ ] Этап 3: UI панели
|
||
- [ ] Этап 4: Деплой
|
||
|
||
*Создано: 2026-03-27*
|