Update architecture and README for Claude Code plugins and skills #68
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -4,7 +4,8 @@ | |||||
|
|
||||||
| A professional dashboard to track and visualize your Claude Code agent sessions, tool usage, and subagent orchestration in real-time. Built with Node.js, Express, React, and SQLite, it integrates directly with Claude Code via its native hook system for seamless session tracking and analytics. | ||||||
|
|
||||||
|  | ||||||
|  | ||||||
|
Comment on lines
+7
to
+8
There was a problem hiding this comment. The Shields.io URL There was a problem hiding this comment. The
Suggested change
|
||||||
|  | ||||||
|  | ||||||
|  | ||||||
|
|
@@ -88,6 +89,16 @@ graph LR | |||||
| style D fill:#10b981,stroke:#34d399,color:#fff | ||||||
| ``` | ||||||
|
|
||||||
| In addition to the real-time monitoring dashboard, it also includes a local MCP server implementation in `mcp/` that exposes a catalog of tools for introspecting and managing the dashboard itself, making it easy to integrate dashboard operations directly into your Claude Code workflows. There is also an agent extension layer, which provides Claude Code plugins, skills, and subagents for dashboard interaction, analytics, and workflow intelligence. | ||||||
|
There was a problem hiding this comment. The phrasing 'In addition to the real-time monitoring dashboard, it also includes...' is slightly redundant and ambiguous, as 'it' refers back to the dashboard mentioned in the same sentence. A more direct phrasing would improve clarity.
Suggested change
|
||||||
|
|
||||||
| <a href="https://www.star-history.com/?repos=hoangsonww%2FClaude-Code-Agent-Monitor&type=date&legend=top-left"> | ||||||
| <picture> | ||||||
| <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=hoangsonww/Claude-Code-Agent-Monitor&type=date&theme=dark&legend=top-left" /> | ||||||
| <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=hoangsonww/Claude-Code-Agent-Monitor&type=date&legend=top-left" /> | ||||||
| <img alt="Star History Chart" src="https://api.star-history.com/chart?repos=hoangsonww/Claude-Code-Agent-Monitor&type=date&legend=top-left" /> | ||||||
| </picture> | ||||||
| </a> | ||||||
|
|
||||||
| ### User Interface | ||||||
|
|
||||||
| Comes with a sleek dark theme, responsive design, and intuitive navigation to explore your agent activity: | ||||||
|
|
@@ -306,6 +317,9 @@ sequenceDiagram | |||||
| Note over WS,UI: ~0ms latency,<br/>no polling | ||||||
| ``` | ||||||
|
|
||||||
| > [!IMPORTANT] | ||||||
| > See [ARCHITECTURE.md](./ARCHITECTURE.md) for a deep dive into the server architecture, database schema, API routes, WebSocket design, client routing, hook handler flow, deployment modes, and detailed lifecycle diagrams for sessions and agents. | ||||||
|
|
||||||
| ### Hook Lifecycle | ||||||
|
|
||||||
| 1. **Claude Code** fires a hook on session start, tool use, turn end, subagent completion, and session exit | ||||||
|
|
@@ -323,7 +337,7 @@ sequenceDiagram | |||||
| - Extracts API errors (`isApiErrorMessage` entries: quota limits, rate limits, invalid_request) and raw `type: "error"` responses from JSONL transcripts, stored as `APIError` events. Turn durations (`system` subtype `turn_duration`) are stored as `TurnDuration` events. Tool result errors (`toolUseResult.is_error`) are tracked as `ToolError` events | ||||||
| - A periodic server sweep (every 2 min) catches abandoned sessions and new compactions that slipped past event-based detection (e.g., `/compact` fires no hook, `/resume` within seconds of session creation). The sweep shares the transcript cache with the hook handler, avoiding duplicate I/O. Abandoned session cleanup also evicts the transcript cache entry to bound memory | ||||||
| 4. **WebSocket** broadcasts the change to all connected clients | ||||||
| 5. **UI** receives the update and re-renders the affected components in real-time with no polling. | ||||||
|
|
||||||
| ### Agent State Machine | ||||||
|
|
||||||
|
|
@@ -767,7 +781,7 @@ The dashboard supports native browser notifications for real-time alerts when yo | |||||
|
|
||||||
| Additionally, any `Notification` hook event from Claude Code triggers a browser notification regardless of the per-event toggles (as long as the master toggle is enabled). | ||||||
|
|
||||||
| ### Notifications Architecture | ||||||
|
|
||||||
| - **Preferences** are stored in `localStorage` under the key `agent-monitor-notifications` | ||||||
| - **`useNotifications` hook** subscribes to the WebSocket event bus at the app root level (`App.tsx`) and fires `new Notification()` calls based on the saved preferences | ||||||
|
|
||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same Shields.io formatting issue as in README:
.../badge/Claude_Code-orange...will likely displayorangeas the badge message rather than setting the color to orange. Consider using the empty-message syntax (label--color) or providing an explicit message and color segment.