# I Can SEE EVERYTHING: Claude Code Hooks for Multi Agent Observability

Source: https://www.youtube.com/watch?v=9ijnN985O_c
Recap page: https://rapidrecap.app/video/9ijnN985O_c
Generated: 2025-07-14T17:06:33.98+00:00

---
## Quick Overview

A multi-agent observability system for Claude Code agents provides real-time monitoring and visualization of agent behavior, enabling users to track events, filter by source, session, and type, and understand agent actions across multiple instances and codebases. This system facilitates scaling up agentic workflows by offering comprehensive insight into parallel operations, tool usage, and user interactions, ensuring engineers can effectively manage and debug complex AI systems.

**Key Points:**
- The system provides real-time monitoring and visualization of Claude Code agent events through a live dashboard.
- It uses Claude Code hooks to send event data to a Bun server, which stores it in an SQLite database and streams it to a Vue client via WebSockets.
- Users can filter events by source application, session ID, and event type for granular insights into agent activities.
- The system summarizes complex tool usage with a small, fast language model, offering quick, high-level understanding of agent actions.
- Full chat transcripts are available for stopped agent sessions, providing complete context for debugging and analysis.
- This multi-agent observability is crucial for scaling agentic engineering efforts, allowing for effective management and understanding of specialized, concurrent AI agents.

**Context:** This video demonstrates a multi-agent observability system built using Claude Code hooks, designed to provide real-time monitoring and insights into the behavior of multiple AI agents. The system addresses the challenge of tracking and understanding complex, concurrent operations performed by generative AI agents, which becomes crucial as agentic workflows scale up.

## Detailed Analysis

The video introduces a multi-agent observability system designed to address the complexity of managing numerous Claude Code agents. When scaling up agentic workflows, tracking individual agent actions becomes challenging. This system provides real-time monitoring and visualization of Claude Code agent behavior by capturing, storing, and displaying hook events. The architecture involves multiple Claude Code agents firing their respective hooks, which send events via HTTP POST to a Bun server. This server then stores the data in an SQLite database for persistence and simultaneously streams these events to a Vue client dashboard using WebSockets. The live dashboard displays an 'Agent Event Stream' where users can see every action, including sub-tasks, planning, building, web scraping, and API calls. The system allows filtering events by source application, session ID, and event type, providing granular control over the displayed information. A 'Live Activity Pulse' visually represents event frequency over time. Crucially, the system uses a small, fast language model (like Haiku) to generate concise summaries of complex tool uses, allowing for quick understanding without deep diving into raw payloads. It also provides access to full chat transcripts for stopped agent sessions, offering complete context. This one-way data flow architecture simplifies monitoring, enabling engineers to understand agent performance, identify issues, and scale their agentic engineering efforts effectively across different codebases and devices.

### The Problem with Scaling Agents

- Running a single Claude Code agent is just the beginning, but scaling up to multiple agents creates a massive problem of too much to keep track of, highlighting the critical need for observability in multi-agent systems.

### Multi-Agent Observability System Architecture

- Claude Code hooks send events via HTTP POST to a Bun server, which stores data in an SQLite database for persistence and streams real-time updates to a Vue client dashboard via WebSockets, allowing users to see every agent action.

### Live Dashboard Features

- The dashboard displays an 'Agent Event Stream' with a 'Live Activity Pulse' showing real-time event frequency, offering filters by source application, session ID, and event type (e.g., Notification, PreToolUse, PostToolUse, Stop, SubagentStop, PreCompact).

### Event Tracking and Summarization

- Every tool call, hook, and event type is tracked and traced, with a small, fast language model (like Haiku) generating concise summaries of tool usage for quick understanding, and full chat transcripts available for stopped agent sessions.

### Codebase Structure and Implementation

- The system's codebase includes a '.claude/hooks' directory with Python scripts (e.g., 'send_event.py') that send event data to the Bun server, which then processes, stores, and broadcasts these events to the Vue client via WebSockets.

### Benefits for Agentic Engineering

- This observability system allows engineers to monitor, control, and understand their agents' behavior, enabling effective scaling of agentic workflows, specialization of agents for specific tasks, and cross-application usage, ultimately improving engineering efficiency and impact.

![Screenshot at 0:03: Overhead view of hands typing on a laptop with code windows overlayed, showing the initial setup of Claude Code agents](https://ss.rapidrecap.app/screens/9ijnN985O_c/00-00-03.png)
![Screenshot at 0:24: Screenshot of the 'Multi-Agent Observability' web dashboard displaying a live stream of agent events and activity pulse](https://ss.rapidrecap.app/screens/9ijnN985O_c/00-00-24.png)
![Screenshot at 0:57: Terminal window showing 'Task (Generate iteration)' sub-tasks, with arrows indicating 'Sub-Tasks', 'Planning', and 'Building' processes](https://ss.rapidrecap.app/screens/9ijnN985O_c/00-00-57.png)
![Screenshot at 1:14: Diagram illustrating the multi-agent observability architecture: multiple agents sending hooks to a Bun server, which connects to SQLite and a live dashboard via WebSockets](https://ss.rapidrecap.app/screens/9ijnN985O_c/00-01-14.png)
![Screenshot at 1:41: Agent Event Stream showing different applications ('infinite-agentic-loop', 'cc-hook-multi-agent-obvs') streaming events with distinct session IDs](https://ss.rapidrecap.app/screens/9ijnN985O_c/00-01-41.png)
![Screenshot at 2:17: Animated diagram showing 10 Claude Code Agents, some active, some ready, streaming events (pre-tool, post-tool, notification, sub-agent) to a Bun server, then to SQLite and a Live Dashboard](https://ss.rapidrecap.app/screens/9ijnN985O_c/00-02-17.png)
![Screenshot at 3:00: Dropdown menu on the dashboard showing 'Source App' filter options, including 'All Sources', 'cc-hook-multi-agent-obvs', and 'infinite-agentic-loop'](https://ss.rapidrecap.app/screens/9ijnN985O_c/00-03-00.png)
![Screenshot at 5:41: Text overlay 'SMALL + FAST MODEL' on a black screen, emphasizing the use of efficient AI models for summarization](https://ss.rapidrecap.app/screens/9ijnN985O_c/00-05-41.png)
![Screenshot at 11:53: VS Code showing the project directory structure with 'README.md' open, highlighting the 'Multi-Agent Observability System' overview and architecture](https://ss.rapidrecap.app/screens/9ijnN985O_c/00-11-53.png)
![Screenshot at 12:05: VS Code showing 'settings.json' with 'hooks' configuration, detailing 'PreToolUse', 'PostToolUse', 'Notification', 'Stop', 'SubagentStop', and 'PreCompact' event types](https://ss.rapidrecap.app/screens/9ijnN985O_c/00-12-05.png)