Show HN: Real-time dashboard for Claude Code agent teams
hackernews
|
|
📦 오픈소스
#claude
#claude code
#review
#show hn
#대시보드
#멀티에이전트
#옵저버빌리티
원문 출처: hackernews · Genesis Park에서 요약 및 분석
요약
해당 글은 클로드 코드 에이전트 팀을 위한 실시간 대시보드를 소개하는 내용입니다. 개발자들은 이 대시보드를 통해 여러 에이전트의 작업 상태를 실시간으로 한눈에 모니터링하고 관리할 수 있습니다. 이를 통해 복잡한 팀 협업 과정에서 발생할 수 있는 작업 현황 파악의 어려움을 줄이고 효율성을 높일 수 있습니다.
본문
Real-time observability dashboard for Claude Code agents. Includes powerful filtering, searching, and visualization of multi-agent sessions. The server and dashboard run locally or remotely, allowing multiple Claude Code instances to log full session data using hooks. Hooks are used instead of OTEL to capture the full picture of agent actions. - Add the marketplace: claude plugin marketplace add simple10/agents-observe - Install the plugin: claude plugin install agents-observe - Restart Claude Code. That's it. On your next session, the server auto-starts as a Docker container and hooks begin capturing events. Open http://localhost:4981 to see the dashboard. | Skill | Description | |---|---| /observe | Open the dashboard URL and check if the server is running | /observe status | Check server health and show dashboard URL | When Claude Code runs autonomously — spawning subagents, calling tools, reading files, executing commands — you have no visibility into what's actually happening. The terminal shows a fraction of the activity. Subagents are invisible. Tool calls blur together. And when something goes wrong three agents deep in a parallel execution, you're left reading through logs after the fact. Claude Observe captures every hook event as it happens and streams it to a live dashboard. You see exactly what each agent is doing, which tools it's calling, what files it's touching, and how subagents relate to their parents. In real time. This matters because: - Multi-agent work is opaque. A coordinator spawns a code reviewer, a test runner, and a documentation agent in parallel. Without observability, you only see the final result. With it, you watch each agent work and catch problems as they happen. - Tool calls are the ground truth. The assistant's text output is a summary. The actual tool calls — the Bash commands, file reads, edits, grep patterns — tell you what Claude is really doing. Claude Observe shows you both. - Debugging is time travel. When a subagent makes a bad edit or runs a destructive command, you need to trace back through the exact sequence of events. The event stream gives you that timeline with full payloads. - Sessions are ephemeral, but patterns aren't. By capturing events across sessions, you can see how agents behave over time, which tools they favor, and where they get stuck. - Watch tool calls stream in as they happen (PreToolUse → PostToolUse with results) - See the full agent hierarchy — which subagent was spawned by which parent - Filter by agent, tool type, or search across all events - Expand any event to see the full payload, command, and result - Click timeline icons to jump to specific events in the stream - Browse historical sessions with human-readable names (e.g., "twinkly-hugging-dragon") Claude Code Hooks → observe_cli.mjs → API Server (SQLite) → React Dashboard (dumb pipe) (HTTP POST) (parse + store) (WebSocket live) The hook script is a dumb pipe — it reads the raw event from stdin, adds the project name, and POSTs it to the server. The server parses events, stores agent metadata (name, type, parentage), and forwards events to subscribed WebSocket clients. The React dashboard derives all agent state (status, event counts, timing) from the event stream — the server is a dumb store. For development or running without the plugin. If you installed via the plugin above, skip this section. git clone https://github.com/simple10/agents-observe.git agents-observe cd agents-observe # Install just if needed brew install just # Start the docker container just start # Or start local dev servers just install just dev See justfile for additional commands. Generate the hooks config for your project: just setup-hooks my-project This prints a JSON snippet with all paths pre-filled. Copy it into your Claude Code settings at either: - Project-level (recommended): .claude/settings.json in your project root - User-level (all projects): ~/.claude/settings.json Environment variables set in the config: | Variable | Default | Description | |---|---|---| AGENTS_OBSERVE_PROJECT_SLUG | (auto-detected) | Project slug shown in the dashboard URL. If not set, derived from the session transcript path. | AGENTS_OBSERVE_API_BASE_URL | http://127.0.0.1:4981/api | Full URL for the events endpoint | # Check the server is running just health # Send a test event just test-event Navigate to http://localhost:5174 (dev) or http://localhost:4981 (Docker). You should see the test event appear. Start a Claude Code session in your configured project and events will stream in automatically. If you have just installed: # Local Dev Commands: just install # Install all dependencies just dev # Start server + client in dev mode (hot reload) just dev-server # Start only the server just dev-client # Start only the client just dev-client-build # Build the client for production just test # Run all tests (server + client) just test-event # Send a test event to the server just fmt # Format all source files # Docker Container Co
Genesis Park 편집팀이 AI를 활용하여 작성한 분석입니다. 원문은 출처 링크를 통해 확인할 수 있습니다.
공유