Web Dashboard
Relevant source files
The following files were used as context for generating this wiki page:
The Serena Web Dashboard is a browser-based monitoring and management interface for the Serena MCP server. It provides developers and users with real-time visibility into the agent's operations, including configuration status, tool usage statistics, execution queues, and system logs. Sources: src/serena/resources/dashboard/index.html, README.md:144-150
The dashboard serves as a central hub for managing project-specific settings, such as adding or removing programming languages and managing "memories"—durable information stores used by agents across sessions. It supports theme customization (dark/light modes) and can be accessed locally via port 24282 by default. Sources: src/serena/resources/dashboard/dashboard.js:1062-1085, DOCKER.md:38-40
Architecture and Components
The dashboard is built as a Single Page Application (SPA) using HTML5, jQuery, and Chart.js for data visualization. It communicates with the Serena backend through a series of REST API endpoints. Sources: src/serena/resources/dashboard/index.html:20-24, src/serena/resources/dashboard/dashboard.js:250-280
Frontend Structure
The UI is divided into several main views, toggled through the header navigation:
- Overview: Displays configuration, registered projects, tool usage summaries, and execution queues.
- Logs: Provides a real-time stream of server logs with filtering and export capabilities.
- Advanced Stats: Visualizes token consumption and tool call frequency using interactive charts.
Sources: src/serena/resources/dashboard/index.html:56-60, src/serena/resources/dashboard/dashboard.js:460-485
Component Relationship
The following diagram illustrates the relationship between the Dashboard controller and its sub-components.
Core Functionalities
Configuration and Project Management
The dashboard allows users to view and modify global and project-specific configurations. Users can dynamically add or remove programming languages from the active project, which triggers the backend to initialize or shutdown corresponding Language Servers. Sources: src/serena/resources/dashboard/dashboard.js:847-873, src/serena/resources/dashboard/dashboard.js:985-1025
| Feature | Description | File Reference |
|---|---|---|
| Global Config | Edit serena_config.yml directly from a modal. | dashboard.js:1255 |
| Project Listing | View all registered projects and their paths. | index.html:86 |
| Language Control | Add/Remove LSP support for specific languages. | dashboard.js:875 |
| Theme Toggle | Switch between Light and Dark themes (persisted in localStorage). | dashboard.js:810 |
Execution Monitoring
The dashboard tracks the lifecycle of task executions. It differentiates between queued, running, and finished tasks. Users have the authority to cancel queued executions or abandon running ones if they become stuck. Sources: src/serena/resources/dashboard/dashboard.js:615-650
Memory Management
Memories are managed through a dedicated interface allowing for the creation, renaming, and editing of persistent knowledge files. This system supports a hierarchical structure using slashes (e.g., architecture/api_design). Sources: src/serena/resources/dashboard/index.html:167-185, src/serena/resources/dashboard/dashboard.js:1145-1180
API Interaction
The dashboard relies on a standard set of backend endpoints to fetch data and commit changes.
| Endpoint | Method | Purpose |
|---|---|---|
/get_config_overview | GET | Fetches project status, active tools, and modes. |
/get_log_messages | POST | Retrieves log segments based on start_idx. |
/get_tool_stats | GET | Returns tool call counts and token usage. |
/save_memory | POST | Commits text content to a memory file. |
/shutdown | PUT | Terminates the Serena server. |
| Sources: src/serena/resources/dashboard/dashboard.js:495, src/serena/resources/dashboard/dashboard.js:770, src/serena/resources/dashboard/dashboard.js:1030, src/serena/resources/dashboard/dashboard.js:1295 |
Statistics and Visualization
Advanced statistics are visualized using four primary charts to help users understand agent resource consumption. Sources: src/serena/resources/dashboard/dashboard.js:520-560
- Tool Calls: A pie chart showing the distribution of calls across different tools.
- Input Tokens: Distribution of tokens sent to the LLM per tool.
- Output Tokens: Distribution of tokens generated by the LLM per tool.
- Input vs Output: A combined bar chart comparing input and output volume.
Sources: src/serena/resources/dashboard/index.html:130-145, src/serena/resources/dashboard/dashboard.js:540-580
Server Configuration
The dashboard's network behavior is controlled by the SerenaConfig class. By default, it listens on 127.0.0.1 but can be configured to listen on all interfaces (e.g., for Docker environments). Sources: src/serena/config/serena_config.py:530-535, DOCKER.md:25-30
- Default Port: 24282 (0x5EDA).
- Trusted Hosts: Configurable list (default:
127.0.0.1,localhost). - Auto-launch: Controlled by
web_dashboard_open_on_launch.
Sources: src/serena/config/serena_config.py:532-536, DOCKER.md:38
Conclusion
The Web Dashboard is an essential diagnostic tool for Serena, bridging the gap between a headless MCP server and the user. It provides critical transparency into how an agent utilizes tools and manages project context, while offering direct controls for server lifecycle and project configuration. Sources: README.md:144-150, src/serena/resources/dashboard/dashboard.js:1290-1310