agent-observability

Collect and visualize Claude Code agent hook events via a WebSocket dashboard.

7|3|Updated Jan 15, 2026
One-click install
npx skills add https://github.com/Zpankz/mcp-skillset --skill agent-observability-zpankz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: agent-observability
Source: https://github.com/Zpankz/mcp-skillset/tree/main/agent-observability
Command: npx skills add https://github.com/Zpankz/mcp-skillset --skill agent-observability-zpankz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Claude Code users often struggle to understand agent behavior across multiple tools and sessions. This skill provides a real-time observability dashboard to visualize agent interactions, tool usage, and session flows.

Core Features & Use Cases

  • Real-time event streaming via a WebSocket dashboard for Claude Code agent activity.
  • Agent swim lanes that display parallel agent execution and session tracking.
  • Event filtering by agent, session, and event type for focused debugging.
  • Live charts and in-memory streaming with JSONL logs for offline analysis.
  • Zero-database approach that stores events as human-readable JSONL files. Use Case: Monitor a complex Claude Code workflow with kai and designer running in parallel, and quickly identify bottlenecks or failing tools.

Quick Start

Install and launch the dashboard, configure Claude Code hooks to point to the PAI_DIR, then open http://localhost:3000 to view live observability.

Frequently Asked Questions about agent-observability

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I monitor real-time Claude Code agent sessions and visualize hook events?

Real-time Claude Code agent observability is achieved by capturing deterministic hook events and streaming them in-memory to a WebSocket-based frontend dashboard for live visualization. The dashboard provides swim lanes, session tracking, and live charts to monitor parallel agent execution.

What is the best way to debug multiple Claude Code agents running in parallel?

Debugging parallel Claude Code agents is best handled by using a real-time observability dashboard with swim lanes to display concurrent session flows. You can filter events by specific agent, session, or event type to quickly identify bottlenecks or failing tools across multi-agent workflows.

Does Claude Code observability require a database to store agent logs?

Claude Code observability does not require a database; this approach uses a zero-database architecture that stores events as human-readable JSONL files. This allows for offline analysis of agent behavior while maintaining low-latency, in-memory streaming for the live dashboard.

How do I configure Claude Code hooks for session tracking and event capture?

To configure Claude Code hooks for session tracking, you launch the dashboard and point your hook configurations to the specified PAI_DIR directory. This setup captures deterministic agent events and streams them to the frontend at localhost:3000.

Can I filter agent events by session or event type for focused debugging?

Yes, you can filter agent events by specific agent, session, and event type for focused debugging. The observability dashboard provides event filtering capabilities to isolate individual session flows and tool interactions within complex multi-agent workflows.