Real-time observability dashboard for Claude Code agents. Captures every hook event and streams it to a live dashboard.
claude plugin marketplace add simple10/agents-observe
claude plugin install agents-observeRestart Claude Code. The server auto-starts as a Docker container and the dashboard is at http://localhost:4981.
| Command | Description |
|---|---|
/observe |
Open the dashboard |
/observe status |
Server health and config |
/observe start |
Start the server |
/observe stop |
Stop the server |
/observe restart |
Restart the server |
/observe logs |
Show recent container logs |
/observe debug |
Diagnose server issues |
Requires just, Node.js, and Docker.
git clone https://github.com/simple10/agents-observe.git
cd agents-observe
just install # install dependencies
just start # start server via DockerDashboard: http://localhost:4981
For dev mode with hot reload: just dev (client at http://localhost:5174, API at http://localhost:4981).
| Problem | Fix |
|---|---|
| Server not running | Run /observe start or restart Claude Code |
| Docker not running | Start Docker Desktop, then /observe start |
| Port conflict | Set AGENTS_OBSERVE_SERVER_PORT=<port> in .env |
| Need diagnostics | Run /observe debug |
| Database issues | Run just db-reset |
Before developing features or modifying code, read docs/DEVELOPMENT.md. It covers architecture, project structure, commands (just dev, just test, etc.), environment variables, worktree setup, code style, and testing.
Key points:
- Use
just devfor hot-reload development - Run
just checkbefore every commit — runs all tests + formatting - Use
justcommands for all dev tasks (notnpmdirectly) — seejust --list - Worktrees need a
.envwith unique ports (see DEVELOPMENT.md § Worktrees) - All env vars are centralized in
hooks/scripts/lib/config.mjs— never readprocess.envelsewhere - TypeScript throughout, kebab-case file names
Use Conventional Commits for all commit messages. The release script uses git log to generate CHANGELOG.md entries via Claude, and consistent prefixes help it categorize changes accurately.
Format: <type>: <description>
| Prefix | Use for |
|---|---|
feat: |
New features or capabilities |
fix: |
Bug fixes |
docs: |
Documentation changes |
style: |
CSS, formatting, visual changes (no logic change) |
refactor: |
Code restructuring (no behavior change) |
test: |
Adding or updating tests |
chore: |
Build scripts, tooling, dependencies, config |
release: |
Version bumps (used by scripts/release.sh) |
Examples:
feat: add X button to clear search query
fix: timeline dots animating at different speeds
style: add cursor-pointer to clickable sidebar elements
refactor: replace per-dot transitions with container animation
chore: update release script with changelog generation
docs: document fresh install test harness usage
Breaking changes: add ! after the type (e.g., feat!: rename config namespace).