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