Admin Dashboard & Web API
Relevant source files
The following files were used as context for generating this wiki page:
The Admin Dashboard and Web API provide a graphical interface and programmatic endpoints for managing the Memory Context Browser (MCB). This system allows users to monitor service health, view configuration, track background jobs, and browse indexed code collections.
Built using the Loco.rs framework and Rust, the web interface serves server-side rendered HTML while leveraging client-side utilities for theme management and asynchronous API communication. It acts as a management layer separate from the core MCP tool interactions.
Sources: crates/mcb-server/src/controllers/web/mod.rs, README.md, tests/e2e/admin-ui-routes.spec.ts:15-22
Web UI Architecture
The Web UI is structured as a series of modules under the /ui prefix. Each page is a submodule responsible for its own rendering logic, utilizing shared macros and a common layout function to ensure visual consistency.
Navigation and Routing
The application routes are defined centrally and utilize a shared page_layout function to inject global elements like the navigation bar and theme toggle.
The shared layout includes a navigation brand, links to major sections, and a theme toggle button.
Sources: crates/mcb-server/src/controllers/web/mod.rs:88-123, crates/mcb-server/src/controllers/web/mod.rs:141-149
HTML Rendering Components
The project uses Rust macros to generate standardized HTML components, reducing boilerplate and ensuring UI uniformity.
| Macro | Description | Output Example |
|---|---|---|
html_page! | Wraps body content in the global layout. | Full HTML Document |
metric_card! | Displays a dashboard metric with a title and value. | <div class="card metric-card">...</div> |
status_badge! | Renders a colored span indicating status. | <span class="status-badge running">...</span> |
data_table! | Renders a table or a "muted" message if empty. | <table class="data-table">...</table> |
Sources: crates/mcb-server/src/controllers/web/mod.rs:20-56
Client-Side Logic and Theme Management
The frontend utilizes a shared JavaScript utility (shared.js) for theme persistence and API communication.
Theme Engine
The theme engine supports "light", "dark", and "auto" (system preference) modes. It persists the selection in localStorage and applies it via a data-theme attribute on the <html> element.
API Utilities
The shared.js file provides a wrapper around the Fetch API for interacting with the backend Web API.
apiRequest(url, options): Centralized fetch handler with timeout (default 30s) and automatic JSON parsing.- HTTP Helpers: Provides
apiGet,apiPost,apiPut,apiDelete, andapiPatchfor semantic requests. - Debounce/Throttle: Includes performance utilities for handling rapid user input or scroll events.
Sources: assets/admin/ui/shared.js:115-180, assets/admin/ui/shared.js:246-270
Admin Web API Endpoints
The system exposes several JSON endpoints used by the dashboard to display real-time data.
| Endpoint | Method | Description | Data Fields |
|---|---|---|---|
/health | GET | System health status. | status |
/config | GET | Active server configuration. | port, host, provider, embedding |
/jobs | GET | Background task queue status. | total, running, queued, jobs[] |
/collections | GET | List of indexed code collections. | Array of collections |
Sources: tests/e2e/admin-functional.spec.ts:60-100
Dashboard Configuration
The dashboard visual layout and info cards are configurable via TOML files. This allows the UI to represent different categories of data like Observations, Sessions, and Indexing status.
Component Configuration
The dashboard.toml file defines the information architecture of the main landing page:
- Info Cards: Summary blocks for Observations (cross-session memory), Sessions (lifecycle tracking), and Indexing (semantic search status).
- Charts: Visualizations for time-series data such as "Observations By Month" (line chart) or "Tool Calls by Tool" (pie chart).
Sources: config/pro_admin/dashboard.toml:1-55
UI Customization
Site-level branding and menu titles are managed via config.toml.
[site.theme]
title = "MCB Admin"
logo = "/admin/favicon.ico"
[site.menu]
dashboard = { title = "Dashboard" }
raw_table = { title = "Tables" }
Sources: config/pro_admin/config.toml:1-17
Technical Summary
The Admin Dashboard & Web API provide a robust management layer for MCB. The system uses server-side Rust macros for efficient UI generation, a specialized JavaScript utility layer for theme and API management, and a configurable dashboard layout. It ensures visibility into the underlying MCP server's operations, including indexing progress, job queues, and system health.
Sources: crates/mcb-server/src/controllers/web/mod.rs, assets/admin/ui/shared.js, config/pro_admin/dashboard.toml