Dashboard UI Views
Relevant source files
The following files were used as context for generating this wiki page:
The Honmoon Dashboard is a React-based Single Page Application (SPA) designed to provide a management interface for the Honmoon security gateway. It is built using React 19, Vite, and Tailwind CSS, and is served directly by the Rust-based management API (honmoon-mgmt) via rust-embed. The dashboard allows operators to observe agent activity, review audit logs, inspect active policies, and manage requests held for human approval.
The UI is organized as a tabbed shell that polls the management API to maintain a live view of the system state. It emphasizes data density and clarity, supporting both light and dark modes to align with modern developer toolchain aesthetics.
Sources: apps/dashboard/AGENTS.md:3-10, wiki/deep-dive/control-plane.md:46-51
Architecture and Data Flow
The dashboard operates as a consumer of the honmoon-mgmt API. It uses a custom usePolling hook to fetch data at regular intervals, ensuring the UI reflects the current state of the data plane without requiring manual refreshes.
The diagram shows the polling mechanism and view routing within the Dashboard SPA.
Sources: apps/dashboard/src/App.tsx:9-62, wiki/deep-dive/control-plane.md:15-25
Key UI Components and Views
The application is divided into four primary views, accessible via a sidebar navigation.
| View | Purpose | Data Source |
|---|---|---|
| Overview | Summary of decision counts and recent activity. | /api/audit |
| Audit Log | Chronological record of all policy decisions (Allow/Deny/Pause). | /api/audit |
| Policies | Read-only view of the active YAML policy configuration. | /api/policy |
| Approvals | Queue for requests held in a pause state awaiting human resolution. | /api/approvals |
Sources: apps/dashboard/src/App.tsx:11-12, wiki/deep-dive/control-plane.md:54-60
View Details
App Shell and Navigation
The root App component manages the navigation state and provides a sidebar badge that displays the number of pending approvals. This count is updated via a 1500ms polling interval.
Sources: apps/dashboard/src/App.tsx:15-18
Approvals View
The Approvals view is the primary operational interface for resolving "Pause" verdicts. It displays a list of PendingApproval objects and provides interactive controls to resolve them.
The sequence shows the human-in-the-loop approval workflow from the UI to the data plane.
Sources: apps/dashboard/src/components/Approvals.tsx:7-71, wiki/deep-dive/control-plane.md:62-75
Audit Log View
The Audit Log provides a historical view of agent requests. It displays critical facts such as the domain, endpoint, protocol (SQL, K8s, HTTP), and the final decision reached by the engine.
Sources: apps/dashboard/src/components/AuditLog.tsx:5-20, wiki/deep-dive/control-plane.md:56
Policy View
This view presents the active policy being enforced by the gateway. In the current implementation, it uses Prism for syntax highlighting to display the YAML configuration.
Sources: apps/dashboard/AGENTS.md:5-7, wiki/deep-dive/control-plane.md:58
Integration and Deployment
The dashboard is built into a dist/ directory and then embedded into the Rust management binary.
- Vite Proxy: During development, Vite is configured to proxy
/apirequests to127.0.0.1:8444, allowing the UI to interact with a runninghonmoon gatewayinstance. - Rust-Embed: The
honmoon-mgmtcrate usesrust-embedto serve the static assets. If thedist/folder is missing during a Rust build, abuild.rsscript generates a placeholderindex.htmlto prevent compilation failure.
Sources: apps/dashboard/AGENTS.md:14-16, wiki/deep-dive/control-plane.md:46-51
Conclusion
The Dashboard UI Views provide a critical observation and control layer for the Honmoon project. By centralizing audit trails and approval workflows into a single, light-weight SPA, Honmoon enables operators to manage AI agent security with high visibility and direct intervention capabilities.