feat: add Next.js metrics dashboard for real-time visualization

Add a lightweight Next.js dashboard to visualize OpenProxy metrics in real-time. The dashboard provides comprehensive insights into LLM API usage, costs, and performance.

Features:
- Real-time metrics overview (requests, tokens, costs, response times)
- Model breakdown with usage statistics
- Hourly trends visualization with charts
- Recent requests table with detailed information
- Auto-refresh every 30 seconds
- Configurable time ranges (1h, 6h, 24h, 7d)

Technical details:
- Built with Next.js 14 and React 18
- Uses Recharts for data visualization
- Connects directly to PostgreSQL database
- Runs on port 3008 by default
- TypeScript for type safety
- Minimal dependencies for lightweight deployment

The dashboard complements the proxy server by providing a user-friendly interface for monitoring and analyzing LLM API usage patterns.
This commit is contained in:
Claude
2025-11-19 00:04:28 +00:00
parent dc0c4b8600
commit b88fc8ead7
14 changed files with 1215 additions and 0 deletions
+21
View File
@@ -148,6 +148,27 @@ Monitor your API usage through the PostgreSQL logs:
- Identify usage patterns and optimize costs
- Maintain compliance with audit requirements
### Metrics Dashboard
OpenProxy includes a lightweight Next.js dashboard for real-time metrics visualization:
```bash
cd dashboard
npm install
cp .env.example .env
# Configure DATABASE_URL in .env
npm run dev
```
The dashboard (available at `http://localhost:3008`) provides:
- **Real-time Overview**: Total requests, tokens, costs, and response times
- **Model Breakdown**: Usage statistics grouped by LLM model
- **Hourly Trends**: Visual charts showing request patterns over time
- **Recent Requests**: Detailed table of recent API calls
- **Auto-refresh**: Automatic updates every 30 seconds
See [dashboard/README.md](./dashboard/README.md) for detailed setup instructions.
## 🤝 Contributing
Feel free to submit issues and enhancement requests!