obsidian/Dev/Cosmo Studio.md

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 день)

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