# 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*