AI MCP Gateway

# Changelog - Admin Dashboard ## [2.0.0] - December 1, 2025 ### 🎉 Major Release - Complete Feature Overhaul ### ✨ New Pages - **Analytics** (`/analytics`) - Time-range selector (1h, 24h, 7d, 30d) - Interactive request timeline chart - Model usage breakdown with progress bars - Cost analysis by layer - Top errors tracking - Trending metrics with % changes - **Alerts** (`/alerts`) - Create custom alerts (cost, latency, errors, uptime) - Multi-channel notifications (email, Slack, webhook) - Enable/disable alerts - Flexible conditions (>, <, =) - Visual alert management UI ### 🚀 Enhanced Features #### Providers Page **Before**: Read-only status display **After**: Full CRUD operations - ✅ Enable/disable providers with toggle button - ✅ Edit API keys with show/hide password - ✅ Configure base URLs for OpenRouter and OSS Local - ✅ Save configuration per provider - ✅ Real-time health status - ✅ Expandable settings panel #### Models Page **Before**: Static model list **After**: Dynamic model management - ✅ Enable/disable entire layers (L0-L3) - ✅ Add new models to layers with inline form - ✅ Remove models with hover actions - ✅ Edit mode toggle - ✅ Real-time feedback notifications - ✅ Model count badges ### 🎨 UI/UX Improvements - Added 2 new navigation items (Analytics, Alerts) - Improved color-coding system - Better responsive layouts - Enhanced feedback messages - Smooth transitions and animations - Consistent card-based design ### 🔧 Technical Changes - Updated navigation with BarChart3 and Bell icons - Added 2 new route definitions - Removed unused imports for cleaner build - Fixed TypeScript strict mode warnings - Optimized bundle size: 323.55 kB (99.69 kB gzipped) ### 📊 Dashboard Research Studied and incorporated best practices from: - **Grafana**: Time-range selectors, interactive charts, panel layouts - **Datadog**: Real-time metrics, trend indicators, cost tracking - **Vercel**: Clean dark theme, card layouts, smooth animations - **Stripe**: Financial metrics, API key management, alert configs ### 🐛 Bug Fixes - Fixed unused variable warnings in TypeScript - Removed unnecessary dependencies - Cleaned up import statements --- ## [1.0.0] - November 30, 2025 ### 🎉 Initial Release ### Core Pages - **Dashboard** - Real-time system monitoring - Total requests, cost, tokens, latency metrics - Layer status (L0-L3) - Service health (database, Redis, providers) - Auto-refresh every 5 seconds - **Gateway Tokens** - API token management - Create new tokens with auto-generation - Show/hide token visibility - Copy to clipboard - Delete with confirmation - Usage examples with curl - **Docker Logs** - Real-time log viewer - Container filtering - Search functionality - Pause/resume streaming - Auto-scroll toggle - Download logs - Color-coded log levels - **Providers** - AI provider status - Health check display - Provider metadata - Auto-refresh every 10 seconds - **Models** - Layer and model overview - Layer status display - Model listings per layer - Provider associations - **Settings** - System configuration - General settings (log level, default layer) - Routing features (cross-check, auto-escalate) - Cost management - Layer control toggles - Task-specific models ### Tech Stack - React 19.2.0 - TypeScript 5.9.3 - Vite 7.2.5 (Rolldown) - Tailwind CSS 3.4.0 - React Router 7 - Axios for HTTP - Lucide React for icons ### Infrastructure - Docker multi-stage build - Nginx Alpine for production - Port mapping: 5173 → 80 - Health check endpoint ### Design System - Dark theme (slate-900 background) - Card-based layouts - Responsive mobile menu - Badge components for status - Custom utility classes --- ## Migration Guide ### From 1.0.0 to 2.0.0 **New Routes**: ```typescript // Add to navigation <Route path="/analytics" element={<Analytics />} /> <Route path="/alerts" element={<Alerts />} /> ``` **Updated Navigation**: ```typescript // Layout.tsx - Add new items { name: 'Analytics', href: '/analytics', icon: BarChart3 }, { name: 'Alerts', href: '/alerts', icon: Bell }, ``` **New Imports**: ```typescript import { BarChart3, Bell } from 'lucide-react'; import Analytics from './pages/Analytics'; import Alerts from './pages/Alerts'; ``` **Breaking Changes**: - None - fully backward compatible **Deprecated**: - None --- ## Roadmap ### Version 2.1.0 (Planned) - [ ] Backend API integration for CRUD operations - [ ] WebSocket for real-time logs - [ ] Server-Sent Events for metrics - [ ] Real-time notifications ### Version 2.2.0 (Planned) - [ ] Custom date range picker - [ ] Export reports (PDF/CSV) - [ ] Cost forecasting - [ ] Model performance comparison charts ### Version 3.0.0 (Future) - [ ] Multi-user support - [ ] Role-based access control (RBAC) - [ ] Audit logs - [ ] API usage quotas per user - [ ] Team collaboration features --- **Note**: All features are currently frontend-only with mock data. Backend API endpoints are planned for version 2.1.0.