skills.rest
dallascrilley
dallascrilleyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

agent-observability

Streams Claude Code hook events to a real-time Vue dashboard via WebSocket.

Updated Dec 4, 2025
Search Tags:#monitoring#vue#claude code#hooks#dashboard#observability#websocket
One-click install
npx skills add https://github.com/dallascrilley/dowser --skill agent-observability-dallascrilley
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agent-observability
Source: https://github.com/dallascrilley/dowser/tree/main/skills/agent-observability
Command: npx skills add https://github.com/dallascrilley/dowser --skill agent-observability-dallascrilley

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vue, lucide-vue-next, vite, tailwindcss, typescript.

What problem does it solve? When running multiple Claude Code agents in parallel, there is no built-in way to see what each agent is doing in real time, making debugging, session tracking, and tool-usage analysis difficult. ## Core Features & Use Cases - Real-Time Event Streaming: A Bun server watches JSONL event files written by Claude Code hooks and pushes new events to a Vue 3 dashboard over WebSocket, keeping the last 1000 events in memory. - Agent Swim Lanes & Filtering: Visualize parallel agents (kai, designer, engineer) in swim lanes, filter by agent, session, or event type, and inspect tool inputs/outputs. - Filesystem-Based Storage: Events are appended to daily JSONL files under ~/.claude/history/raw-outputs/ with no database required. - Use Case: Launch several subagents with the Task tool, open the dashboard at localhost:5173, and watch PreToolUse/PostToolUse events appear live per agent to spot stuck or failing tool calls. ## Quick Start Set the PAI_DIR environment variable, merge the example hooks into ~/.claude/settings.json, then start the server and client with bun run dev and open the dashboard in a browser.

Frequently Asked Questions about agent-observability

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

FAQPage Schema
How do I monitor Claude Code agents in real time?▼

Configure the capture-all-events hook in ~/.claude/settings.json for each event type, then run the Bun server and Vue client with bun run dev. The dashboard at localhost:5173 streams PreToolUse, PostToolUse, and session events live via WebSocket.

How do I set up the agent observability dashboard?▼

Set the PAI_DIR environment variable to your .claude directory, merge the settings.json.example hooks into your Claude Code settings, run bun install in apps/server and apps/client, then start both with bun run dev.

Does this observability tool require a database?▼

No. Events are appended to daily JSONL files under ~/.claude/history/raw-outputs/ and the server keeps only the last 1000 events in memory. The JSONL files are human-readable and grep-able for later analysis.

Why are no events appearing in the dashboard?▼

Check that PAI_DIR is set, the hook script is executable, and hooks are configured in ~/.claude/settings.json. Verify JSONL files are being created under ~/.claude/history/raw-outputs/ and that the server is watching today's file.

What are the limitations of filesystem-based event streaming?▼

The in-memory buffer holds only the last 1000 events and the server does not reload historical data on startup, so old events require a restart to view. For full historical persistence and querying, a database-backed approach like SQLite is more suitable.

Related Skills

Explore More Software Engineering Skills→
robdtaylorrobdtaylor

AgentObservability

Stream Claude Code agent session events to a WebSocket dashboard.

Community
Advanced
oddshipoddship
3

session-analysis

Parse Pi session JSONL files with jq to extract metrics and tool usage.

Official
Intermediate
686f6c61686f6c61
105

monitoring-setup

Configure structured logging, Sentry error tracking, metrics, and alerts.

Community
Advanced
kortix-aikortix-ai
6

memory-context-management

Manage agent memory and persistent knowledge across sessions using SQLite and filesystem storage.

Official
Advanced