claude-code-hooks-multi-agent-observability

Multi-Agent Observability System

Real-time monitoring and visualization for Claude Code agents through comprehensive hook event tracking. Watch the [latest deep dive on multi-agent orchestration with Opus 4.6 here](https://youtu.be/RpUTF_U4kiw). With Claude Opus 4.6 and multi-agent orchestration, you can now spin up teams of specialized agents that work in parallel, and this observability system lets you trace every tool call, task handoff, and agent lifecycle event across the entire swarm.

🎯 Overview

This system provides complete observability into Claude Code agent behavior by capturing, storing, and visualizing Claude Code [Hook events](https://docs.anthropic.com/en/docs/claude-code/hooks) in real-time. It enables monitoring of multiple concurrent agents with session tracking, event filtering, and live updates.

🏗️ Architecture

Claude Agents → Hook Scripts → HTTP POST → Bun Server → SQLite → WebSocket → Vue Client

📋 Setup Requirements

Before getting started, ensure you have the following installed:

• Claude Code - Anthropic's official CLI for Claude
• Astral uv - Fast Python package manager (required for hook scripts)
• Bun, npm, or yarn - For running the server and client
• just (optional) - Command runner for project recipes
• Anthropic API Key - Set as ANTHROPIC_API_KEY environment variable
• OpenAI API Key (optional) - For multi-model support with just-prompt MCP tool
• ElevenLabs API Key (optional) - For audio features
• Firecrawl API Key (optional) - For web scraping features

Configure .claude Directory

To setup observability in your repo,we need to copy the .claude directory to your project root.

To integrate the observability hooks into your projects:

1. Copy the entire .claude directory to your project root:

...