Pokémon-дашборд для Claude Code: управляем роем агентов

Когда пяти терминалов уже не хватает

Представьте: понедельник, вы запустили восемь параллельных Claude Code-сессий. Одна пишет API, другая — тесты, третья правит документацию, четвёртая занимается базой данных. Вы переключаетесь между вкладками терминала и внезапно понимаете — вы понятия не имеете, которая из них уже зависла, а которая всё ещё работает.

Продуктивность от параллельных агентов реальна, но хаос не заставил себя ждать: когда таких сессий становится пять-десять, раскиданных по нескольким машинам и веткам, всё быстро выходит из-под контроля. Сессии забываются, потерянная работа обнаруживается спустя часы.

Именно в этот момент один разработчик решил построить не просто очередной менеджер процессов — а дашборд в стиле Pokémon. Карточки агентов, как покемоны в Pokédex, визуальные статусы и возможность управлять всем роем с одного экрана. Это звучит как безумие — и именно поэтому работает.

Зачем вообще нужен дашборд для Claude Code?

Проблема когнитивной нагрузки

Самым большим узким местом в AI-параллельной разработке является не сам ИИ — это человек. Когда оркестрируешь несколько агентов, переключение контекста между сессиями становится главным ограничением.

Какой агент работал над чем? Та сессия завершилась или зависла? Агент ждёт моего ввода? Каждый раз, когда приходится отвечать на эти вопросы вручную через терминалы, платишь «налог на переключение контекста», который съедает весь прирост продуктивности.

Что не так с существующими решениями

Существующие инструменты решают только часть проблемы: tmux и терминальные мультиплексоры прекрасно работают на одной машине, но не охватывают несколько устройств. IDE-решения привязаны к конкретному редактору. Нужен был инструмент, агрегирующий информацию со всех машин в единый real-time вид.

Как устроена архитектура Pokémon-дашборда

Проект, который взорвал сообщество, называется Octogent — open-source оркестрационный дашборд для Claude Code. Hesam Sheikh выпустил Octogent — open-source оркестрационный дашборд, который сидит поверх Claude Code и даёт единое представление по всем параллельно запущенным AI-агентам. Репозиторий под MIT-лицензией набрал 472 звезды и 79 форков уже к началу мая 2026 года.

Концепция «щупалец» (Tentacles)

Центральная идея — сущность, называемая «tentacle» (щупальце). Каждое щупальце — это ограниченный контейнер задачи, сохранённый в .octogent/tentacles/<tentacle-id>/ и содержащий CONTEXT.md, todo.md и опциональные файлы заметок. Вместо одной огромной истории чата на агента каждый рабочий поток получает свой собственный, устойчивый мозг на диске.

Именно это делает дашборд «Pokémon-like»: каждый агент — это отдельная карточка со своим статусом, задачей и «здоровьем» (использованием контекстного окна). Визуально — как Pokédex, функционально — как диспетчерская.

graph TD
    A[🎮 Pokémon Dashboard UI] --> B[Tentacle Manager]
    B --> C[Агент: API-разработчик]
    B --> D[Агент: Тест-инженер]
    B --> E[Агент: Документалист]
    B --> F[Агент: DB-архитектор]
    C --> G[CONTEXT.md]
    C --> H[todo.md]
    D --> I[CONTEXT.md]
    D --> J[todo.md]
    G --> K[Claude Code Session]
    H --> K
    I --> L[Claude Code Session]
    J --> L
    K --> M[Hook Events → Dashboard API]
    L --> M
    M --> A

Система хуков — сердце мониторинга

Система работает по модели heartbeat: каждая сессия кодирующего агента регулярно отправляет своё состояние в бэкенд дашборда. Этот отчёт включает информацию о проекте, статус git, использование контекста, активные MCP-серверы и текущую задачу агента.

Данные heartbeat собираются через хуки кодирующего агента. В случае Claude Code — это notification-хуки, срабатывающие при переходе агента между состояниями (working, idle, awaiting permission). Хуки выполняют лёгкий скрипт, отправляющий состояние сессии в API дашборда.

{
  "hooks": {
    "PreToolUse": [{
      "matcher": "",
      "hooks": [{
        "type": "command",
        "command": "uv run .claude/hooks/send_event.py --event-type PreToolUse --summarize"
      }]
    }],
    "PostToolUse": [{
      "matcher": "",
      "hooks": [{
        "type": "command",
        "command": "uv run .claude/hooks/send_event.py --event-type PostToolUse --summarize"
      }]
    }],
    "Stop": [{"hooks": [{"type": "command", "command": "uv run .claude/hooks/send_event.py --event-type Stop"}]}]
  }
}

Функции дашборда: что вы видите и чем управляете

Полноценный мониторинг-дашборд для агентов Claude Code строится на SQLite3, Node.js, Express, React, Vite, TailwindCSS и WebSockets. Он отслеживает сессии, активность агентов, использование инструментов и оркестрацию субагентов через хуки Claude Code.

Ключевые возможности

Дашборд обеспечивает живую аналитику, Kanban-доску статусов, уведомления и интерактивный веб-интерфейс.

Можно трассировать каждый вызов инструмента по всем агентам в реальном времени, фильтровать по «swim lane» агента, отслеживать жизненный цикл задач, замечать сбои заблаговременно, а также измерять пропускную способность через живой пульс-чарт активности всего флота агентов.

Запуск агентов прямо из UI

Прямо из дашборда можно запустить новую Claude Code-сессию на любом из зарегистрированных устройств. Выбираешь устройство, выбираешь проект из доступных репозиториев — и свежая агентская сессия поднимается в новом tmux-окне на той машине. Дашборд подхватывает её немедленно и начинает трекинг. Это значит, что можно запустить агентские сессии в поездке, а потом сесть и проверить результаты.

Мульти-агентная архитектура Claude Code: официальный взгляд

Чтобы понять, почему такие дашборды вообще нужны, важно разобраться в том, как Claude Code организует команды агентов.

Agent Teams позволяют координировать несколько экземпляров Claude Code, работающих вместе. Одна сессия выступает тимлидом — координирует работу, назначает задачи, синтезирует результаты. Тиммейты работают независимо, каждый в своём контекстном окне, и общаются напрямую друг с другом. В отличие от субагентов, которые работают в рамках одной сессии и могут отчитываться только главному агенту, с тиммейтами можно взаимодействовать напрямую.

Когда использовать агентные команды

Агентные команды наиболее эффективны для задач, где параллельное исследование даёт реальную ценность. Сильнейшие сценарии использования: исследование и ревью (несколько тиммейтов изучают разные аспекты проблемы одновременно), новые модули или функции (каждый тиммейт владеет своим куском без конфликтов), отладка с конкурирующими гипотезами (тиммейты параллельно проверяют разные теории), кросс-слойная координация (изменения, охватывающие frontend, backend и тесты).

Мульти-агентная оркестрация позволяет одному агенту координировать других для выполнения сложной работы. Агенты могут действовать параллельно, каждый в собственном изолированном контексте, что помогает улучшить качество вывода и сократить время выполнения.

Экосистема инструментов: что ещё существует

Конкуренция за решение проблемы оркестрации уже разворачивается: инструменты Gas Town, Vibe Kanban, Nimbalyst и Conductor все гонятся за одной и той же задачей.

Conductor — самый быстрый способ начать мульти-агентную оркестрацию на Mac. Он запускает несколько Claude Code и Codex-агентов параллельно, каждый в своём git worktree, с визуальным дашбордом и diff-first review UI.

Для тех, кто хочет наблюдаемость без полноценного оркестратора, существует более лёгкий вариант:

Когда Claude Code работает автономно — порождая субагентов, вызывая инструменты, читая файлы, выполняя команды — у вас нет никакой видимости происходящего. Claude Observe захватывает каждое хук-событие по мере его возникновения и стримит его на живой дашборд. Вы видите в точности, что делает каждый агент, какие инструменты вызывает, какие файлы трогает.

Сравнение подходов к оркестрации

Модель «conductor» даёт одного агента, синхронного, с контекстным окном как жёстким потолком. Модель «orchestrator» даёт несколько агентов с их собственными контекстными окнами, работающих асинхронно, пока вы планируете и проверяете результаты. Ключевой ментальный сдвиг — разница между парным программированием и управлением командой.

Как построить свой дашборд: практическое руководство

Шаг 1: Настройка хуков в Claude Code

Создайте файл .claude/settings.json в корне проекта:

{
  "hooks": {
    "PreToolUse": [{
      "matcher": "",
      "hooks": [{
        "type": "command",
        "command": "curl -X POST http://localhost:3001/events -H 'Content-Type: application/json' -d '{\"type\": \"PreToolUse\", \"session\": \"$CLAUDE_SESSION_ID\"}'"
      }]
    }],
    "Stop": [{
      "hooks": [{
        "type": "command",
        "command": "curl -X POST http://localhost:3001/events -d '{\"type\": \"Stop\"}'"
      }]
    }]
  }
}

Шаг 2: Бэкенд-сервер для сбора событий

// server.js — минимальный коллектор событий
const express = require('express');
const { WebSocketServer } = require('ws');
const Database = require('better-sqlite3');

const app = express();
const db = new Database('agents.db');
const wss = new WebSocketServer({ port: 3002 });

// Инициализация таблицы
db.exec(`CREATE TABLE IF NOT EXISTS events (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  session_id TEXT,
  type TEXT,
  payload TEXT,
  timestamp DATETIME DEFAULT CURRENT_TIMESTAMP
)`);

app.use(express.json());

app.post('/events', (req, res) => {
  const { type, session, ...payload } = req.body;
  db.prepare('INSERT INTO events (session_id, type, payload) VALUES (?, ?, ?)')
    .run(session, type, JSON.stringify(payload));
  
  // Бродкаст всем подключённым клиентам дашборда
  wss.clients.forEach(client => {
    if (client.readyState === 1) {
      client.send(JSON.stringify({ type, session, ...payload }));
    }
  });
  
  res.json({ ok: true });
});

app.listen(3001, () => console.log('Agent event collector running on :3001'));

Шаг 3: Фронтенд — Pokémon-карточки агентов

// AgentCard.jsx — карточка агента в стиле Pokémon
const AgentCard = ({ agent }) => {
  const statusColor = {
    working: '#4CAF50',
    idle: '#9E9E9E',
    awaiting_permission: '#FF9800',
    error: '#F44336'
  }[agent.status] || '#9E9E9E';

  return (
    <div className="agent-card" style={{ borderColor: statusColor }}>
      <div className="agent-header">
        <span className="agent-id">#{agent.id.slice(-4).toUpperCase()}</span>
        <span className="status-badge" style={{ background: statusColor }}>
          {agent.status}
        </span>
      </div>
      <div className="agent-name">{agent.project}</div>
      <div className="agent-branch">🌿 {agent.branch}</div>
      <div className="context-bar">
        <div 
          className="context-fill" 
          style={{ width: `${agent.contextUsage}%` }}
        />
      </div>
      <div className="current-task">{agent.currentTask}</div>
    </div>
  );
};

git clone https://github.com/hesamsheikh/octogent
cd octogent
pnpm install
pnpm dev

Стоимость и ограничения: о чём нельзя молчать

Мульти-агентные рабочие процессы — это не серебряная пуля. Это мощный молоток, которым легко промахнуться.

Мульти-агентные рабочие процессы подходят не всем и не имеют смысла для 95% задач AI-разработки. Прямо сейчас это дорогой и экспериментальный способ выполнять крупные проекты. Будьте готовы очень быстро исчерпать лимиты использования.

Расходы на токены масштабируются линейно: у каждого тиммейта есть своё контекстное окно, и он потребляет токены независимо.

В отличие от обычного режима CC, возможностей перенаправить агента при неправильной интерпретации задачи значительно меньше. И объём кода для проверки гораздо выше. Тщательно прорабатывайте начальные промпты — иначе агенты могут потратить часы вычислений впустую.

Когда мульти-агентный подход оправдан

Агентные команды наиболее эффективны для задач, где параллельное исследование реально добавляет ценность. Они лучше всего работают, когда тиммейты могут действовать независимо. Для последовательных задач, правок в одних и тех же файлах или работы со множеством зависимостей одна сессия или субагенты эффективнее.

Выводы: будущее за оркестраторами

Идея Pokémon-дашборда — это не просто красивый UI-трюк. Это симптом фундаментального сдвига в разработке программного обеспечения.

Большинство разработчиков в 2026 году будут использовать все три уровня: Tier 1 для интерактивной работы, Tier 2 для параллельных спринтов, Tier 3 для очистки бэклога за ночь.

В модели оркестратора вы координируете целый ансамбль: несколько агентов, каждый со своим контекстным окном, работающих асинхронно. Вы планируете работу, назначаете её и периодически проверяете результаты.

Pokémon-дашборд — это не игрушка. Это пример того, как правильный UX-фрейм позволяет управлять сложными системами интуитивно. Каждый агент — это отдельный «покемон» с характеристиками, статусом и задачей. Вы — тренер, который видит всю картину целиком.

Ожидайте появления ещё более лёгких оркестраторов для Claude Code в ближайшее время — мульти-агентный паттерн поглощает одно-сессионное кодирование.

А пока — клонируйте Octogent, настройте хуки и попробуйте запустить первые три параллельные сессии с единым дашбордом. Хаос превращается в порядок быстрее, чем кажется.