diff --git a/Dev/Cosmo Studio.md b/Dev/Cosmo Studio.md new file mode 100644 index 0000000..dc6a8ec --- /dev/null +++ b/Dev/Cosmo Studio.md @@ -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*