GopherGate/DASHBOARD_README.md

LLM Proxy Gateway - Admin Dashboard

Overview

This is a comprehensive admin dashboard for the LLM Proxy Gateway, providing real-time monitoring, analytics, and management capabilities for the proxy service.

Features

1. Dashboard Overview

• Real-time request counters and statistics
• System health indicators
• Provider status monitoring
• Recent requests stream

2. Usage Analytics

• Time series charts for requests, tokens, and costs
• Filter by date range, client, provider, and model
• Top clients and models analysis
• Export functionality to CSV/JSON

3. Cost Management

• Cost breakdown by provider, client, and model
• Budget tracking with alerts
• Cost projections
• Pricing configuration management

4. Client Management

• List, create, revoke, and rotate API tokens
• Client-specific rate limits
• Usage statistics per client
• Token management interface

5. Provider Configuration

• Enable/disable LLM providers
• Configure API keys (masked display)
• Test provider connections
• Model availability management

6. Real-time Monitoring

• Live request stream via WebSocket
• System metrics dashboard
• Response time and error rate tracking
• Live system logs

7. System Settings

• General configuration
• Database management
• Logging settings
• Security settings

Technology Stack

Frontend

• HTML5/CSS3: Modern, responsive design with CSS Grid/Flexbox
• JavaScript (ES6+): Vanilla JavaScript with modular architecture
• Chart.js: Interactive data visualizations
• Luxon: Date/time manipulation
• WebSocket API: Real-time updates

Backend (Rust/Axum)

• Axum: Web framework with WebSocket support
• Tokio: Async runtime
• Serde: JSON serialization/deserialization
• Broadcast channels: Real-time event distribution

Installation & Setup

1. Build and Run the Server

# Build the project
cargo build --release

# Run the server
cargo run --release

2. Access the Dashboard

Once the server is running, access the dashboard at:

http://localhost:8080

3. Default Login Credentials

• Username: admin
• Password: admin123

API Endpoints

Authentication

• POST /api/auth/login - Dashboard login
• GET /api/auth/status - Authentication status

Analytics

• GET /api/usage/summary - Overall usage summary
• GET /api/usage/time-series - Time series data
• GET /api/usage/clients - Client breakdown
• GET /api/usage/providers - Provider breakdown

Clients

• GET /api/clients - List all clients
• POST /api/clients - Create new client
• DELETE /api/clients/{id} - Revoke client
• GET /api/clients/{id}/usage - Client-specific usage

Providers

• GET /api/providers - List providers and status
• PUT /api/providers/{name} - Update provider config
• POST /api/providers/{name}/test - Test provider connection

System

• GET /api/system/health - System health
• GET /api/system/logs - Recent logs
• POST /api/system/backup - Trigger backup

WebSocket

• GET /ws - WebSocket endpoint for real-time updates

Project Structure

llm-proxy/
├── src/
│   ├── dashboard/          # Dashboard backend module
│   │   └── mod.rs         # Dashboard routes and handlers
│   ├── server/            # Main proxy server
│   ├── providers/         # LLM provider implementations
│   └── ...               # Other modules
├── static/               # Frontend dashboard files
│   ├── index.html        # Main dashboard HTML
│   ├── css/
│   │   └── dashboard.css # Dashboard styles
│   ├── js/
│   │   ├── auth.js       # Authentication module
│   │   ├── dashboard.js  # Main dashboard controller
│   │   ├── websocket.js  # WebSocket manager
│   │   ├── charts.js     # Chart.js utilities
│   │   └── pages/        # Page-specific modules
│   │       ├── overview.js
│   │       ├── analytics.js
│   │       ├── costs.js
│   │       ├── clients.js
│   │       ├── providers.js
│   │       ├── monitoring.js
│   │       ├── settings.js
│   │       └── logs.js
│   ├── img/              # Images and icons
│   └── fonts/            # Font files
└── Cargo.toml           # Rust dependencies

Development

Adding New Pages

1. Create a new JavaScript module in static/js/pages/
2. Implement the page class with init() method
3. Register the page in dashboard.js
4. Add menu item in index.html

Adding New API Endpoints

1. Add route in src/dashboard/mod.rs
2. Implement handler function
3. Update frontend JavaScript to call the endpoint

Styling Guidelines

• Use CSS custom properties (variables) from :root
• Follow mobile-first responsive design
• Use BEM-like naming convention for CSS classes
• Maintain consistent spacing with CSS variables

Security Considerations

1. Authentication: Simple password-based auth for demo; replace with proper auth in production
2. API Keys: Tokens are masked in the UI (only last 4 characters shown)
3. CORS: Configure appropriate CORS headers for production
4. Rate Limiting: Implement rate limiting for API endpoints
5. HTTPS: Always use HTTPS in production

Performance Optimizations

1. Code Splitting: JavaScript modules are loaded on-demand
2. Caching: Static assets are served with cache headers
3. WebSocket: Real-time updates reduce polling overhead
4. Lazy Loading: Charts and tables load data as needed
5. Compression: Enable gzip/brotli compression for static files

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 11+
• Edge 79+

License

MIT License - See LICENSE file for details.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Support

For issues and feature requests, please use the GitHub issue tracker.