agent-observability

Visualize Claude Code agent interactions from JSONL logs via WebSocket streaming.

1|Updated Nov 23, 2025
One-click install
npx skills add https://github.com/zmre/nix-pai --skill agent-observability-zmre
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: agent-observability
Source: https://github.com/zmre/nix-pai/tree/main/claude/skills/agent-observability
Command: npx skills add https://github.com/zmre/nix-pai --skill agent-observability-zmre

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vue, chart.js, tailwindcss, vite, express, ws, sqlite3, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solves?

Debugging and understanding the behavior of complex multi-agent systems can be incredibly difficult without proper visibility. This skill provides real-time observability tools to visualize agent interactions, track events, and analyze performance, simplifying the debugging process and saving development time.

Core Features & Use Cases

  • Real-time Event Timeline: Visualize agent events and interactions in a chronological timeline for quick analysis.
  • Performance Metrics: Track and analyze key performance indicators for multi-agent workflows to identify bottlenecks.
  • Debugging & Analysis: Identify bottlenecks, errors, and unexpected agent behaviors quickly, accelerating problem resolution.
  • Use Case: You've deployed a multi-agent system, and it's not performing as expected. Use this skill to monitor the agents' interactions in real-time, pinpoint where communication breaks down, and identify the root cause of the issue.

Quick Start

Use the agent-observability skill to start monitoring a multi-agent system and display its event timeline.

Frequently Asked Questions about agent-observability

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

FAQPage Schema
How do I monitor multi-agent systems in real-time?

Real-time monitoring of multi-agent systems visualizes agent interactions, tool usage, and session flows through a live event timeline. This skill streams events via WebSocket to a dashboard displaying agent swim lanes, performance metrics, and event filtering for quick bottleneck identification.

Can I debug Claude Code agent interactions without a database?

Yes. This skill uses a zero-database design with filesystem-based JSONL logs and in-memory retention of the last 1000 events, eliminating setup overhead while preserving daily log archives for historical analysis and debugging.

What's the best way to identify performance bottlenecks in multi-agent workflows?

Track key performance indicators across agent interactions using real-time event visualization and live charts. Filter events by agent, tool, or session to pinpoint communication breakdowns and unexpected behaviors accelerating root-cause analysis.

Does this work with subagent lifecycles and tool usage tracking?

Yes. The skill applies to multi-agent Claude Code sessions, tracking subagent lifecycles, individual tool invocations, session flows, and their performance metrics through chronological event timelines and swim lane visualization.

How do I visualize agent events across multiple concurrent sessions?

The event timeline displays agent interactions chronologically with swim lanes separating concurrent sessions and subagents. WebSocket streaming delivers live updates while event filtering lets you isolate specific agents or sessions for focused analysis.

What infrastructure do I need to stream agent events live?

The skill uses Express and WebSocket for server-side event streaming, Vue and Chart.js for client-side visualization, Tailwind CSS for styling, and Vite for build tooling. Events are sourced from filesystem JSONL logs with no external database required.