Dashboard & Accounts UI
Relevant source files
The following files were used as context for generating this wiki page:
The Dashboard and Accounts user interface provides a centralized web-based management console for the e-zer0 bridge. This system allows administrators to monitor instance health, view real-time audit logs of AI agent activities, and configure the OAuth connections required for Gmail and Microsoft 365 integration.
The UI is built using a server-side rendering (SSR) architecture via Hono JSX, running on the Cloudflare Workers platform. It prioritizes security through PII redaction and audit logging, ensuring that all interactions between AI agents and email providers are transparent and controlled.
Sources: AGENTS.md:12-25, src/views/layout.tsx:1-100, src/app.ts:50-70
Architecture and UI Components
The interface utilizes a shared layout system that provides a consistent application shell, including a sidebar for navigation and a main content area. The application distinguishes between authenticated and unauthenticated states, rendering different "shells" based on the presence of a session.
Sources: src/views/layout.tsx:15-115
Core Layout Components
The system employs several reusable Hono JSX components to maintain visual consistency:
| Component | Description |
|---|---|
Layout | Main wrapper providing the HTML head, sidebar navigation, and auth/app shell logic. |
Card | A container for grouping related content with an optional title. |
StatCard | Displays a key metric with a label, value, and icon. |
Alert | Provides feedback messages (success, error, warning, info). |
EmptyState | Shown when no data is available in a section. |
| Sources: src/views/layout.tsx:117-155 |
Navigation structure
The application shell provides access to the following primary modules:
- Dashboard: High-level metrics and recent activity.
- Email Accounts: Management of connected provider accounts.
- Agents: Configuration of MCP client credentials and permissions.
- Audit Log: Full history of tool executions.
- Settings: OAuth application credential configuration.
Sources: src/views/layout.tsx:43-65
Dashboard Functionality
The Dashboard serves as the entry point for administrators, displaying system-wide statistics aggregated from the Cloudflare D1 database. It renders three primary StatCard components and a "Recent Activity" table.
Sources: src/routes/dashboard.tsx:10-25
Data Flow for Metrics
The dashboard route executes parallel SQL queries to retrieve:
- The total count of connected email accounts.
- The count of active MCP agents.
- The total volume of audit events.
- The five most recent audit log entries.
Sources: src/routes/dashboard.tsx:13-20
The diagram shows the parallel data retrieval process used to populate dashboard metrics.
Sources: src/routes/dashboard.tsx:10-30
Email Account and Provider Configuration
Configuration is divided into two phases: setting up the global OAuth application credentials and connecting individual user mailboxes.
Provider Settings
Before connecting accounts, the administrator must enter the Client ID and Client Secret for Google and/or Microsoft. These credentials are encrypted at rest using AES-256-GCM before being stored in the app_settings table.
Sources: src/routes/settings.tsx:10-40, AGENTS.md:50-55
Audit and Activity Monitoring
Every action taken by an AI agent through the MCP server is recorded in the audit_logs table. The Audit UI displays these events with specific details:
- Timestamp: When the action occurred.
- Agent: The identity of the MCP client.
- Action: The specific tool called (e.g.,
read_recent_emails). - Target: The specific account or message affected.
- Status: Visual indicator of success (✅) or failure (❌).
Sources: src/routes/audit.tsx:15-60, src/routes/dashboard.tsx:50-80
This diagram illustrates how agent actions flow into the audit system and are subsequently displayed in the UI.
Sources: src/mcp/tools.ts:40-60, src/routes/dashboard.tsx:17-20
Security Implementation in UI
The UI enforces several security measures to protect the self-hosted instance:
- CSRF Protection: All mutation routes (e.g.,
/settings/*,/accounts/*) use CSRF middleware. - Security Headers: The application applies standard secure headers to all responses.
- Bot Protection: Login and setup pages are protected by Cloudflare Turnstile.
- Robots Exclusion: A
robots.txtfile is served to prevent search engine indexing of the instance.
Sources: src/app.ts:35-45, src/app.ts:130-135, src/routes/login.tsx:15-30
Summary
The Dashboard & Accounts UI provides the management layer for e-zer0, enabling secure configuration of email providers and transparent auditing of AI agent behavior. By leveraging Cloudflare's edge compute and D1 database, it delivers a responsive, server-rendered administration experience without the overhead of client-side frameworks.