Web Dashboard & UI
Relevant source files
The following files were used as context for generating this wiki page:
The Web Dashboard & UI provides the primary graphical interface for interacting with the Hermes Agent. It manages user chat sessions, displays agent-generated artifacts, and allows for the configuration of specialized agents and design systems. The UI serves as a hosted environment for executing tools like claude-design and visualizing structured data through design-md specifications.
Core Application Architecture
The application uses React as the primary frontend framework and react-router-dom for navigation. The entry point defines a routing structure that separates the dashboard into functional views for messaging, agent management, and settings.
Routing and Navigation
The App.tsx file defines the top-level routes for the application. It maps specific URL paths to page components, ensuring a single-page application (SPA) experience.
Sources: web/src/App.tsx
Chat Interface and User Interaction
The ChatPage component handles the core interaction loop between the user and the agent. It manages the message history state and renders responses from the LLM, including specialized tool outputs and UI artifacts.
Message Processing Flow
When a user sends a message, the ChatPage dispatches the request to the agent backend. The agent may return text, execute tools, or generate visual artifacts that the UI renders inline or as standalone components.
Design System and Artifact Generation
The UI consumes design-md specifications to maintain visual consistency. It also serves as the runtime for "designed artifacts" generated by the claude-design skill. These artifacts include landing pages, dashboards, and prototypes created as self-contained HTML/CSS/JS files.
Design Token Implementation
The system follows the Google DESIGN.md specification to define machine-readable tokens. These tokens control colors, typography, and spacing across generated UI components.
| Token Category | Properties | Usage |
|---|---|---|
| Colors | primary, secondary, tertiary, neutral | Defines the theme palette |
| Typography | fontFamily, fontSize, fontWeight, lineHeight | Sets global text styles |
| Rounded | sm, md, lg | Controls border radii for components |
| Spacing | sm, md, lg | Defines padding and margin scales |
| Components | backgroundColor, textColor, rounded | maps tokens to specific UI elements |
Sources: skills/creative/design-md/SKILL.md:40-75
Surface Archetypes
Generated artifacts are classified into specific archetypes to ensure compositional accuracy. The UI renders these based on the intended user goal.
- Monitor: Focuses on data density and glanceable hierarchy for dashboards.
- Operate: Prioritizes action affordances and selection states for admin panels.
- Compare: Aligns columns and parity of structure for pricing or spec tables.
- Command / Inspect: Optimizes for speed and keyboard driving in inspectors or command bars.
Sources: skills/creative/claude-design/SKILL.md:140-165
Agent Management
The dashboard provides views to inspect and select specialized agents. These agents are defined by metadata including versioning, authorship, and platform compatibility.
Agent Metadata Structure
Agents are categorized by tags and related skills, which the UI uses for filtering and discovery.
| Field | Description |
|---|---|
| name | Unique identifier for the agent |
| version | Semantic versioning of the agent skill |
| tags | Labels for discovery (e.g., Documentation, Mermaid) |
| related_skills | Dependencies or complementary skills |
Sources: web/AGENTS.md, optional-skills/software-development/code-wiki/SKILL.md:5-15
Documentation and Visualization
The UI integrates Mermaid.js to render complex architectural diagrams and workflows generated by the code-wiki and system-atlas skills.
Visualization Workflow
- The agent scans codebase structures or system architectures.
- It generates Mermaid markdown (e.g.,
flowchart TD,sequenceDiagram). - The Web UI detects the mermaid blocks and renders them as interactive SVG diagrams.
Sources: optional-skills/software-development/code-wiki/SKILL.md:120-150
Summary
The Web Dashboard & UI serves as the central hub for the Hermes Agent. It coordinates React-based page components, manages real-time chat state, and renders high-fidelity HTML artifacts. By implementing the DESIGN.md token system and supporting specialized surface archetypes, the UI ensures that agent-generated content remains accessible and visually consistent with the project's architectural standards.