| name | observability-dashboard |
| model | sonnet |
| description | Produces a running multi-agent observability dashboard by deploying the hook capture pipeline, SQLite WAL store, and WebSocket-streaming Vue client — then validates it with a live test session. Use when: "set up monitoring for multi-agent workflows", "debug parallel agent coordination", "audit tool call history across a session", "build visibility for a demo or review". |
| license | proprietary |
| category | system-health |
| triggers | ["set up monitoring for multi-agent workflows","debug parallel agent coordination","audit tool call history across a session","build visibility for a demo or review"] |
| tier | 1 |
| agents | ["primary"] |
| tool_dependencies | ["file_system"] |
| inputs | [{"name":"spec_path","type":"string","description":"Path to the observability dashboard specification to implement","required":false}] |
| outputs | [{"name":"dashboard","type":"string","description":"Running multi-agent observability dashboard with hook capture pipeline, SQLite WAL store, and WebSocket-streaming client deployed and validated"}] |
Observability Dashboard
I. Philosophy
Observability is the ability to answer questions about system behavior that you
did not anticipate when building the system. For multi-agent workflows, the
fundamental questions are: What happened? Why did it happen? What should I do
about it?
This skill covers the operational side -- deploying, configuring, and using the
dashboard. For designing new dashboard specs, use observability-dashboard-spec.
For the underlying hook taxonomy, use hooks-reference.
II. When to Use
- Setting up a monitoring dashboard for a multi-agent workflow for the first time.
- Debugging coordination failures between parallel agents.
- Auditing which tools were called, how often, and with what results across a session.
- Building real-time visibility into agent execution for demonstrations or reviews.
- Comparing agent behavior across sessions (before/after a CLAUDE.md change).
Do not use this skill for designing the dashboard architecture (use
observability-dashboard-spec) or for writing individual hooks (use
hooks-reference).
III. Workflow
Step 1 -- Deploy the event pipeline.
Set up the three-layer architecture:
Hook Scripts --> HTTP POST --> Bun/Node Server --> SQLite (WAL mode)
|
+--> WebSocket --> Dashboard Client
- Hook scripts: One per event type, capturing contextual data as JSON payloads.
- Server: Bun or Node.js process that validates events, persists to SQLite, and
broadcasts to WebSocket clients simultaneously.
- SQLite: WAL mode mandatory for concurrent writes from multiple agents.
Step 2 -- Configure hook capture.
Install hooks for the 12 observable event types:
PreToolUse, PostToolUse, PostToolUseFailure, PermissionRequest, Notification,
UserPromptSubmit, Stop, SubagentStart, SubagentStop, PreCompact, SessionStart,
SessionEnd.
Each hook gathers event-specific fields (tool_name, agent_id, session_id,
notification_type) and transmits via HTTP POST.
Step 3 -- Launch the dashboard.
Start the Vue 3 (or equivalent) client connecting via WebSocket to the server.
Configure the five core views:
- Timeline -- Chronological event rows with auto-scroll and dual-color coding
(app color on left border, session color on secondary border).
- Filtering -- Multi-criteria selection by app, session, event type.
- -- Canvas-based activity density with session-specific colors
and event-type visual indicators.
