Dashboard & Core Views
Relevant source files
The following files were used as context for generating this wiki page:
The Dashboard & Core Views in CodeBot serve as the primary interface for users to manage their stored code snippets and for administrators to monitor the health, configuration, and performance of the overall system. The web application utilizes a glassmorphism dark theme consistent across all core views, providing a modern and accessible UI for interacting with the backend services.
The system centralizes real-time metrics, system health checks, and user-specific data into modular components. For administrators, it offers specialized inspection tools for environment configurations and Redis cache management, while standard users utilize the dashboard for activity tracking and preference management.
Sources: GUIDES/ARCHITECTURE.md:278-285, webapp/templates/dashboard.html, webapp/templates/admin_config_inspector.html
1. Main User Dashboard
The user dashboard provides a high-level summary of a user's code repository. It visualizes statistics such as total file count, storage size, and the most frequently used programming languages.
Dashboard Components
- Stats Overview: A set of cards displaying total snippets, cumulative character count (total size), and language distribution.
- Activity Timeline: A feed showing recent operations such as file creation, updates, and bookmarks.
- Recent Files: A list for non-admin users to quickly access their latest snippets.
- Admin Commit Block: A specialized view for administrators that replaces "Recent Files" with the latest repository changes retrieved via
GitMirrorService.
The diagram above illustrates how the dashboard aggregates data from MongoDB (user snippets/activity) and the GitMirrorService (admin commit history).
Sources: webapp/templates/dashboard.html:5-65, GUIDES/DASHBOARD_LAST_COMMIT_FILES_GUIDE.md:8-35
Admin Last Commit View
Administrators see a "Last Commit" card instead of "Recent Files." This view displays the short SHA, commit message, author, and date. It includes a list of files that were added, modified, or deleted in that specific commit.
| Field | Description | Source |
|---|---|---|
| sha_short | 7-character commit hash | Git log |
| files | List of objects containing path, status, and file_icon | Git show --name-status |
| sync_time | The last time the local mirror was updated | repo_metadata |
Sources: GUIDES/DASHBOARD_LAST_COMMIT_FILES_GUIDE.md:55-80, webapp/templates/dashboard.html:110-140
2. Admin Infrastructure Inspection
CodeBot provides two critical views for system maintenance: the Config Inspector and the Cache Inspector. These views enable live auditing of the production environment.
Config Inspector
This view audits environment variables across multiple services (Webapp, Bot, MCP). Variables are categorized (e.g., Database, API, Logging) and assigned a status:
- Modified: Value differs from the default.
- Set: Defined in the environment but no default provided.
- Missing: Required variable not found.
- Default: Using the built-in fallback value.
The Config Inspector ensures sensitive data like API keys are masked while allowing administrators to copy .env formatted lines directly to the clipboard.
Sources: webapp/templates/admin_config_inspector.html:200-280, webapp/templates/admin_config_inspector.html:610-640
Cache Inspector
The Cache Inspector provides real-time visibility into the Redis instance. It supports pattern-based searching (e.g., user:*) and displays Time-to-Live (TTL) badges for each key.
- Stats Cards: Displays used memory, hit rate, and total keys.
- Key Table: Shows key names, value previews (masked if sensitive), TTL, and data types.
- Actions: Allows for individual key deletion or clearing the entire cache.
Sources: webapp/templates/admin_cache_inspector.html:310-380, webapp/templates/admin_cache_inspector.html:430-465
3. Real-time Data Architecture
The dashboard and admin views rely on a centralized aggregation pipeline to ensure low-latency updates and consistent data representation.
Data flow involves fetching raw metrics from PostgreSQL or MongoDB, checking Redis for cached statuses, and querying the GitHub API for rate limits.
Sources: GUIDES/ARCHITECTURE.md:278-310
4. User Preferences & Settings
The settings view allows users to customize their experience and manage account security.
View Features
- Account Details: Displays Telegram ID, username, and account status (Admin/Premium).
- UI Customization: Scales the font size and switches between themes (Classic, Nebula, High-Contrast).
- Session Management: Toggle for persistent login (up to a defined number of days) and a "Logout from all devices" feature.
- Backup & Restore: Personal ZIP backup generation and restoration tools, including automatic Google Drive sync configuration.
Sources: webapp/templates/settings.html:10-100, webapp/templates/settings.html:245-285
5. Global Navigation & Search
The system utilizes a base layout (base.html) that provides persistent navigation components.
- Sidebar: Links to Dashboard, Snippets, Collections, and Admin Tools.
- Global Search: A search bar accessible via
Ctrl+Kthat triggers a glassmorphism overlay. The search interface supports filtering by tags (#tag) or programming languages.
Sources: webapp/templates/base.html:300-350, webapp/static/css/global_search.css:1-50
The Dashboard & Core Views represent the intersection of user management and system observability, providing clear data visualizations through the glassmorphism UI while maintaining robust security and administrative control.
Sources: GUIDES/ARCHITECTURE.md, webapp/templates/dashboard.html