Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions ARCHITECTURE.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
# Agent Dashboard - System Design and Technical Reference

Architectural overview and technical reference for the Agent Dashboard system, covering design goals, high-level architecture, data flow, server and client components, database design, WebSocket protocol, hook integration, MCP extension layer, state management, security considerations, performance characteristics, deployment modes, and technology choices.
Architectural overview and technical reference for the Agent Dashboard system, covering design goals, high-level architecture, data flow, server and client components, database design, WebSocket protocol, hook integration, MCP extension layer, Claude Code plugins & skills, state management, security considerations, performance characteristics, deployment modes, and technology choices.

![Claude Code](https://img.shields.io/badge/Claude_Code-1.0-orange?style=flat-square&logo=claude&logoColor=white)
![Claude Code](https://img.shields.io/badge/Claude_Code-orange?style=flat-square&logo=claude&logoColor=white)
![Claude Code Plugins](https://img.shields.io/badge/Claude_Code-Plugins_&_Skills-orange?style=flat-square&logo=anthropic&logoColor=white)
Comment on lines +5 to +6
Copy link

Copilot AI Apr 13, 2026

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 display orange as 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.

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The & character in the badge URL should be URL-encoded as %26 to ensure it is correctly parsed by the badge service and does not interfere with query parameters. Additionally, using the claude logo instead of anthropic would be more consistent with the main Claude Code badge above.

Suggested change
![Claude Code Plugins](https://img.shields.io/badge/Claude_Code-Plugins_&_Skills-orange?style=flat-square&logo=anthropic&logoColor=white)
![Claude Code Plugins](https://img.shields.io/badge/Claude_Code-Plugins_%26_Skills-orange?style=flat-square&logo=claude&logoColor=white)

![Node.js](https://img.shields.io/badge/Node.js-%3E%3D18-339933?style=flat-square&logo=node.js&logoColor=white)
![Express](https://img.shields.io/badge/Express-4.21-000000?style=flat-square&logo=express&logoColor=white)
![React](https://img.shields.io/badge/React-18.3-61DAFB?style=flat-square&logo=react&logoColor=white)
Expand Down
5 changes: 4 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

![Claude Code](https://img.shields.io/badge/Claude_Code-1.0-orange?style=flat-square&logo=claude&logoColor=white)
![Claude Code](https://img.shields.io/badge/Claude_Code-orange?style=flat-square&logo=claude&logoColor=white)
![Claude Code Plugins](https://img.shields.io/badge/Claude_Code-Plugins_&_Skills-orange?style=flat-square&logo=anthropic&logoColor=white)
Comment on lines +7 to +8
Copy link

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Shields.io URL .../badge/Claude_Code-orange... likely renders a badge with message text orange (since with only two segments Shields treats it as label-message, not label-color). If the intent is an orange badge with no message/version, use the empty-message form (double hyphen) or keep an explicit message segment (e.g., version) and a separate -orange color segment.

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The & character in the badge URL should be URL-encoded as %26 to ensure it is correctly parsed by the badge service and does not interfere with query parameters. Additionally, using the claude logo instead of anthropic would be more consistent with the main Claude Code badge above.

Suggested change
![Claude Code Plugins](https://img.shields.io/badge/Claude_Code-Plugins_&_Skills-orange?style=flat-square&logo=anthropic&logoColor=white)
![Claude Code Plugins](https://img.shields.io/badge/Claude_Code-Plugins_%26_Skills-orange?style=flat-square&logo=claude&logoColor=white)

![Node.js](https://img.shields.io/badge/Node.js-%3E%3D18-339933?style=flat-square&logo=node.js&logoColor=white)
![Express](https://img.shields.io/badge/Express-4.21-000000?style=flat-square&logo=express&logoColor=white)
![React](https://img.shields.io/badge/React-18.3-61DAFB?style=flat-square&logo=react&logoColor=white)
Expand Down Expand Up @@ -88,6 +89,8 @@ 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.
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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
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.
Beyond real-time monitoring, the platform includes a local MCP server implementation in mcp/ that exposes a catalog of tools for introspecting and managing the dashboard itself, facilitating direct integration of dashboard operations into your Claude Code workflows. It also features an agent extension layer providing plugins, skills, and subagents for dashboard interaction, analytics, and workflow intelligence.


### User Interface

Comes with a sleek dark theme, responsive design, and intuitive navigation to explore your agent activity:
Expand Down
Loading