| | <!DOCTYPE html> |
| | <html lang="en"> |
| |
|
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>LLM Proxy Dashboard</title> |
| | <style> |
| | :root { |
| | --bg-primary: #0d1117; |
| | --bg-secondary: #161b22; |
| | --bg-tertiary: #21262d; |
| | --text-primary: #f0f6fc; |
| | --text-secondary: #8b949e; |
| | --accent-blue: #58a6ff; |
| | --accent-green: #3fb950; |
| | --accent-yellow: #d29922; |
| | --accent-red: #f85149; |
| | --accent-purple: #a371f7; |
| | --border-color: #30363d; |
| | } |
| | |
| | * { |
| | margin: 0; |
| | padding: 0; |
| | box-sizing: border-box; |
| | } |
| | |
| | body { |
| | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; |
| | background: var(--bg-primary); |
| | color: var(--text-primary); |
| | min-height: 100vh; |
| | padding: 20px; |
| | } |
| | |
| | .container { |
| | max-width: 1200px; |
| | margin: 0 auto; |
| | } |
| | |
| | header { |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | margin-bottom: 24px; |
| | padding-bottom: 16px; |
| | border-bottom: 1px solid var(--border-color); |
| | } |
| | |
| | h1 { |
| | font-size: 1.5rem; |
| | display: flex; |
| | align-items: center; |
| | gap: 10px; |
| | } |
| | |
| | .header-right { |
| | display: flex; |
| | align-items: center; |
| | gap: 16px; |
| | } |
| | |
| | .refresh-info { |
| | color: var(--text-secondary); |
| | font-size: 0.85rem; |
| | } |
| | |
| | .refresh-btn { |
| | background: var(--accent-blue); |
| | color: white; |
| | border: none; |
| | padding: 8px 16px; |
| | border-radius: 6px; |
| | cursor: pointer; |
| | font-size: 0.9rem; |
| | display: flex; |
| | align-items: center; |
| | gap: 6px; |
| | transition: opacity 0.2s; |
| | } |
| | |
| | .refresh-btn:hover { |
| | opacity: 0.9; |
| | } |
| | |
| | .refresh-btn:disabled { |
| | opacity: 0.5; |
| | cursor: not-allowed; |
| | } |
| | |
| | .summary-card { |
| | background: linear-gradient(135deg, #1a1f35 0%, #141824 100%); |
| | border: 1px solid var(--border-color); |
| | border-radius: 12px; |
| | padding: 24px; |
| | margin-bottom: 24px; |
| | } |
| | |
| | .summary-title { |
| | font-size: 1rem; |
| | color: var(--text-secondary); |
| | margin-bottom: 16px; |
| | display: flex; |
| | align-items: center; |
| | gap: 8px; |
| | } |
| | |
| | .summary-grid { |
| | display: grid; |
| | grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
| | gap: 20px; |
| | } |
| | |
| | .stat-box { |
| | text-align: center; |
| | } |
| | |
| | .stat-value { |
| | font-size: 2rem; |
| | font-weight: bold; |
| | color: var(--accent-blue); |
| | } |
| | |
| | .stat-label { |
| | font-size: 0.8rem; |
| | color: var(--text-secondary); |
| | margin-top: 4px; |
| | } |
| | |
| | .accounts-section { |
| | display: grid; |
| | gap: 16px; |
| | } |
| | |
| | .account-card { |
| | background: var(--bg-secondary); |
| | border: 1px solid var(--border-color); |
| | border-radius: 12px; |
| | overflow: hidden; |
| | } |
| | |
| | .account-header { |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
| | padding: 16px 20px; |
| | background: var(--bg-tertiary); |
| | border-bottom: 1px solid var(--border-color); |
| | } |
| | |
| | .account-name { |
| | font-weight: 600; |
| | display: flex; |
| | align-items: center; |
| | gap: 8px; |
| | } |
| | |
| | .account-tier { |
| | font-size: 0.75rem; |
| | padding: 2px 8px; |
| | border-radius: 12px; |
| | background: var(--accent-purple); |
| | color: white; |
| | } |
| | |
| | .account-status { |
| | display: flex; |
| | align-items: center; |
| | gap: 6px; |
| | font-size: 0.85rem; |
| | } |
| | |
| | .status-dot { |
| | width: 8px; |
| | height: 8px; |
| | border-radius: 50%; |
| | } |
| | |
| | .status-active { |
| | background: var(--accent-green); |
| | } |
| | |
| | .status-cooldown { |
| | background: var(--accent-yellow); |
| | } |
| | |
| | .status-exhausted { |
| | background: var(--accent-red); |
| | } |
| | |
| | .account-body { |
| | padding: 16px 20px; |
| | } |
| | |
| | .account-stats { |
| | display: grid; |
| | grid-template-columns: repeat(4, 1fr); |
| | gap: 12px; |
| | margin-bottom: 16px; |
| | padding-bottom: 16px; |
| | border-bottom: 1px solid var(--border-color); |
| | } |
| | |
| | .mini-stat { |
| | text-align: center; |
| | } |
| | |
| | .mini-stat-value { |
| | font-size: 1.2rem; |
| | font-weight: bold; |
| | color: var(--text-primary); |
| | } |
| | |
| | .mini-stat-label { |
| | font-size: 0.7rem; |
| | color: var(--text-secondary); |
| | } |
| | |
| | .models-list { |
| | display: flex; |
| | flex-direction: column; |
| | gap: 12px; |
| | } |
| | |
| | .model-row { |
| | display: grid; |
| | grid-template-columns: 200px 1fr 100px 100px; |
| | gap: 12px; |
| | align-items: center; |
| | } |
| | |
| | .model-name { |
| | font-size: 0.85rem; |
| | color: var(--text-primary); |
| | white-space: nowrap; |
| | overflow: hidden; |
| | text-overflow: ellipsis; |
| | } |
| | |
| | .progress-bar { |
| | height: 8px; |
| | background: var(--bg-tertiary); |
| | border-radius: 4px; |
| | overflow: hidden; |
| | } |
| | |
| | .progress-fill { |
| | height: 100%; |
| | border-radius: 4px; |
| | transition: width 0.3s ease; |
| | } |
| | |
| | .progress-green { |
| | background: var(--accent-green); |
| | } |
| | |
| | .progress-yellow { |
| | background: var(--accent-yellow); |
| | } |
| | |
| | .progress-red { |
| | background: var(--accent-red); |
| | } |
| | |
| | .quota-text { |
| | font-size: 0.8rem; |
| | color: var(--text-secondary); |
| | text-align: right; |
| | } |
| | |
| | .reset-time { |
| | font-size: 0.75rem; |
| | color: var(--accent-yellow); |
| | text-align: right; |
| | } |
| | |
| | .loading { |
| | text-align: center; |
| | padding: 60px; |
| | color: var(--text-secondary); |
| | } |
| | |
| | .error-message { |
| | background: rgba(248, 81, 73, 0.1); |
| | border: 1px solid var(--accent-red); |
| | color: var(--accent-red); |
| | padding: 16px; |
| | border-radius: 8px; |
| | margin-bottom: 16px; |
| | } |
| | |
| | @media (max-width: 768px) { |
| | .model-row { |
| | grid-template-columns: 1fr; |
| | gap: 4px; |
| | } |
| | |
| | .account-stats { |
| | grid-template-columns: repeat(2, 1fr); |
| | } |
| | |
| | .summary-grid { |
| | grid-template-columns: repeat(2, 1fr); |
| | } |
| | } |
| | </style> |
| | </head> |
| |
|
| | <body> |
| | <div class="container"> |
| | <header> |
| | <h1>🛡️ LLM Proxy Dashboard</h1> |
| | <div class="header-right"> |
| | <span class="refresh-info"> |
| | Last updated: <span id="lastUpdate">--:--:--</span> • |
| | Auto-refresh in <span id="countdown">10</span>s |
| | </span> |
| | <button class="refresh-btn" onclick="fetchData()" id="refreshBtn"> |
| | 🔄 Refresh |
| | </button> |
| | </div> |
| | </header> |
| |
|
| | <div id="content"> |
| | <div class="loading">Loading dashboard data...</div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | const API_KEY = 'sk-antigravity-proxy-123'; |
| | let countdown = 10; |
| | let countdownInterval; |
| | |
| | function formatTime(date) { |
| | return date.toLocaleTimeString('en-US', { hour12: false }); |
| | } |
| | |
| | function formatResetTime(timestamp) { |
| | if (!timestamp) return '--'; |
| | const resetDate = new Date(timestamp * 1000); |
| | const now = new Date(); |
| | const diffMs = resetDate - now; |
| | |
| | if (diffMs <= 0) return 'Now'; |
| | |
| | const hours = Math.floor(diffMs / (1000 * 60 * 60)); |
| | const mins = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60)); |
| | |
| | if (hours > 24) { |
| | const days = Math.floor(hours / 24); |
| | return `${days}d ${hours % 24}h`; |
| | } |
| | return hours > 0 ? `${hours}h ${mins}m` : `${mins}m`; |
| | } |
| | |
| | function getProgressColor(used, max) { |
| | const pct = (used / max) * 100; |
| | if (pct >= 80) return 'progress-red'; |
| | if (pct >= 50) return 'progress-yellow'; |
| | return 'progress-green'; |
| | } |
| | |
| | function getStatusClass(status) { |
| | if (status === 'active') return 'status-active'; |
| | if (status === 'cooldown') return 'status-cooldown'; |
| | return 'status-exhausted'; |
| | } |
| | |
| | async function fetchData() { |
| | const btn = document.getElementById('refreshBtn'); |
| | btn.disabled = true; |
| | btn.innerHTML = '⏳ Loading...'; |
| | |
| | try { |
| | // Fetch stats for ALL providers (removed ?provider=antigravity) |
| | const response = await fetch('/v1/quota-stats', { |
| | headers: { |
| | 'Authorization': `Bearer ${API_KEY}` |
| | } |
| | }); |
| | |
| | if (!response.ok) throw new Error(`HTTP ${response.status}`); |
| | |
| | const data = await response.json(); |
| | renderDashboard(data); |
| | document.getElementById('lastUpdate').textContent = formatTime(new Date()); |
| | countdown = 10; |
| | |
| | } catch (error) { |
| | document.getElementById('content').innerHTML = ` |
| | <div class="error-message"> |
| | ❌ Failed to fetch data: ${error.message}<br> |
| | <small>Make sure the proxy is running and API key is correct.</small> |
| | </div> |
| | `; |
| | } finally { |
| | btn.disabled = false; |
| | btn.innerHTML = '🔄 Refresh'; |
| | } |
| | } |
| | |
| | function renderDashboard(data) { |
| | const providers = data.providers || {}; |
| | |
| | if (Object.keys(providers).length === 0) { |
| | document.getElementById('content').innerHTML = '<div class="loading">No provider data available</div>'; |
| | return; |
| | } |
| | |
| | let html = ''; |
| | // Render each provider in its own section |
| | for (const [name, stats] of Object.entries(providers)) { |
| | html += renderProviderSection(name, stats); |
| | } |
| | document.getElementById('content').innerHTML = html; |
| | } |
| | |
| | function renderProviderSection(providerName, provider) { |
| | const tokens = provider.tokens || {}; |
| | const totalTokens = (tokens.input_uncached || 0) + (tokens.input_cached || 0) + (tokens.output || 0); |
| | |
| | // Format provider name nicely (e.g., "gemini_cli" -> "Gemini CLI") |
| | const displayName = providerName.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' '); |
| | |
| | let html = ` |
| | <h2 style="margin-top: 30px; margin-bottom: 15px; border-bottom: 2px solid var(--border-color); padding-bottom: 10px;"> |
| | 🤖 ${displayName} |
| | </h2> |
| | <div class="summary-card"> |
| | <div class="summary-title">📊 TOTAL USAGE - ${displayName.toUpperCase()}</div> |
| | <div class="summary-grid"> |
| | <div class="stat-box"> |
| | <div class="stat-value">${provider.total_requests || 0}</div> |
| | <div class="stat-label">Requests</div> |
| | </div> |
| | <div class="stat-box"> |
| | <div class="stat-value">${tokens.input_uncached || 0}</div> |
| | <div class="stat-label">Input Tokens</div> |
| | </div> |
| | <div class="stat-box"> |
| | <div class="stat-value">${tokens.input_cached || 0}</div> |
| | <div class="stat-label">Cached Tokens</div> |
| | </div> |
| | <div class="stat-box"> |
| | <div class="stat-value">${tokens.output || 0}</div> |
| | <div class="stat-label">Output Tokens</div> |
| | </div> |
| | <div class="stat-box"> |
| | <div class="stat-value">${totalTokens}</div> |
| | <div class="stat-label">Total Tokens</div> |
| | </div> |
| | <div class="stat-box"> |
| | <div class="stat-value">${provider.credential_count || 0}</div> |
| | <div class="stat-label">Accounts</div> |
| | </div> |
| | <div class="stat-box"> |
| | <div class="stat-value" style="color: var(--accent-green)">${provider.active_count || 0}</div> |
| | <div class="stat-label">Active</div> |
| | </div> |
| | <div class="stat-box"> |
| | <div class="stat-value" style="color: var(--accent-red)">${provider.exhausted_count || 0}</div> |
| | <div class="stat-label">Exhausted</div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="accounts-section"> |
| | `; |
| | |
| | // Masked email patterns based on credential index |
| | const maskedEmails = [ |
| | 'cr******68@gmail.com', |
| | 'ow******88@gmail.com', |
| | 'ba******92@gmail.com' |
| | ]; |
| | |
| | const credentials = provider.credentials || []; |
| | if (credentials.length === 0) { |
| | html += '<div style="color: var(--text-secondary); padding: 20px; text-align: center;">No credentials configured</div>'; |
| | } |
| | |
| | credentials.forEach((cred, index) => { |
| | const credTokens = cred.tokens || {}; |
| | const credTotalTokens = (credTokens.input_uncached || 0) + (credTokens.input_cached || 0) + (credTokens.output || 0); |
| | // Use built-in masked email if available, else fallback |
| | const maskedEmail = maskedEmails[index] || `Account #${index + 1}`; |
| | |
| | html += ` |
| | <div class="account-card"> |
| | <div class="account-header"> |
| | <div class="account-name"> |
| | 👤 ${maskedEmail} |
| | <span class="account-tier">${cred.tier || 'unknown'}</span> |
| | </div> |
| | <div class="account-status"> |
| | <span class="status-dot ${getStatusClass(cred.status)}"></span> |
| | ${cred.status || 'unknown'} |
| | </div> |
| | </div> |
| | <div class="account-body"> |
| | <div class="account-stats"> |
| | <div class="mini-stat"> |
| | <div class="mini-stat-value">${cred.requests || 0}</div> |
| | <div class="mini-stat-label">Requests</div> |
| | </div> |
| | <div class="mini-stat"> |
| | <div class="mini-stat-value">${credTokens.input_uncached || 0}</div> |
| | <div class="mini-stat-label">Input</div> |
| | </div> |
| | <div class="mini-stat"> |
| | <div class="mini-stat-value">${credTokens.output || 0}</div> |
| | <div class="mini-stat-label">Output</div> |
| | </div> |
| | <div class="mini-stat"> |
| | <div class="mini-stat-value">${credTotalTokens}</div> |
| | <div class="mini-stat-label">Total</div> |
| | </div> |
| | </div> |
| | <div class="models-list"> |
| | `; |
| | |
| | // Show individual models from cred.models |
| | const models = cred.models || {}; |
| | const modelEntries = Object.entries(models).sort((a, b) => { |
| | // Sort by usage (most used first) |
| | return (b[1].request_count || 0) - (a[1].request_count || 0); |
| | }); |
| | |
| | modelEntries.forEach(([modelName, modelStats]) => { |
| | // Remove provider prefix for cleaner display |
| | const shortName = modelName.replace(`${providerName}/`, ''); |
| | const used = modelStats.request_count || 0; |
| | const max = modelStats.quota_max_requests || 0; |
| | const pct = max > 0 ? (used / max) * 100 : 0; |
| | const resetTime = modelStats.quota_reset_ts; |
| | |
| | html += ` |
| | <div class="model-row"> |
| | <div class="model-name" title="${modelName}">${shortName}</div> |
| | <div class="progress-bar"> |
| | <div class="progress-fill ${getProgressColor(used, max || 1)}" style="width: ${pct}%"></div> |
| | </div> |
| | <div class="quota-text">${used}/${max}</div> |
| | <div class="reset-time">${formatResetTime(resetTime)}</div> |
| | </div> |
| | `; |
| | }); |
| | |
| | // If no models, show placeholder |
| | if (modelEntries.length === 0) { |
| | html += '<div style="color: var(--text-secondary); font-size: 0.85rem;">No usage data yet</div>'; |
| | } |
| | |
| | html += ` |
| | </div> |
| | </div> |
| | </div> |
| | `; |
| | }); |
| | |
| | html += '</div>'; |
| | return html; |
| | } |
| | |
| | function startCountdown() { |
| | countdownInterval = setInterval(() => { |
| | countdown--; |
| | document.getElementById('countdown').textContent = countdown; |
| | |
| | if (countdown <= 0) { |
| | countdown = 10; |
| | fetchData(); |
| | } |
| | }, 1000); |
| | } |
| | |
| | // Initial load |
| | fetchData(); |
| | startCountdown(); |
| | </script> |
| | </body> |
| |
|
| | </html> |
