feat: Cosmo Studio plan — пиксельный офис агентов
This commit is contained in:
Cosmo
202
Dev/Cosmo Studio.md
Normal file
202
Dev/Cosmo Studio.md
Normal file
@@ -0,0 +1,202 @@
|
||||
# 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*
|
||||
Reference in New Issue
Block a user