Yash030/claude-code-proxy
2
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <meta http-equiv="refresh" content="10">7 <title>Claude Code Proxy - Admin Dashboard</title>8 <style>9 * { box-sizing: border-box; }10 body {11 background-color: #0d1117;12 color: #c9d1d9;13 font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;14 font-size: 13px;15 line-height: 1.5;16 margin: 0;17 padding: 20px;18 }19 .container { max-width: 1200px; margin: 0 auto; }20 .header {21 color: #58a6ff;22 font-size: 18px;23 font-weight: bold;24 margin-bottom: 20px;25 }26 .summary {27 background: #161b22;28 border: 1px solid #30363d;29 border-radius: 6px;30 padding: 12px 16px;31 margin-bottom: 20px;32 font-size: 14px;33 }34 .summary-line {35 color: #8b949e;36 }37 .summary-line span {38 color: #58a6ff;39 font-weight: bold;40 }41 .section {42 background: #161b22;43 border: 1px solid #30363d;44 border-radius: 6px;45 padding: 12px 16px;46 margin-bottom: 20px;47 }48 .section-title {49 color: #58a6ff;50 font-weight: bold;51 margin-bottom: 12px;52 font-size: 14px;53 }54 .divider {55 color: #30363d;56 margin: 8px 0;57 }58 table {59 width: 100%;60 border-collapse: collapse;61 }62 th {63 text-align: left;64 color: #8b949e;65 font-weight: normal;66 padding: 6px 8px;67 border-bottom: 1px solid #30363d;68 font-size: 12px;69 }70 td {71 padding: 6px 8px;72 border-bottom: 1px solid #21262d;73 }74 tr:last-child td {75 border-bottom: none;76 }77 .session-id {78 color: #f0883e;79 font-family: monospace;80 }81 .provider-badge {82 display: inline-block;83 background: #1f6feb;84 color: #ffffff;85 padding: 2px 6px;86 border-radius: 3px;87 font-size: 11px;88 margin-right: 4px;89 }90 .status-healthy {91 color: #3fb950;92 }93 .status-limited {94 color: #f85149;95 }96 .status-active {97 color: #3fb950;98 }99 .status-idle {100 color: #8b949e;101 }102 .empty {103 color: #8b949e;104 font-style: italic;105 }106 .footer {107 color: #8b949e;108 font-size: 11px;109 text-align: center;110 margin-top: 20px;111 }112 .footer a {113 color: #58a6ff;114 text-decoration: none;115 }116 .footer a:hover {117 text-decoration: underline;118 }119 .number {120 color: #79c0ff;121 font-weight: bold;122 }123 </style>124</head>125<body>126 <div class="container">127 <div class="header">Claude Code Proxy - Admin Dashboard</div>128 129 <div class="summary">130 <div class="summary-line">131 Active Sessions: <span>{{ summary.active_sessions }}</span> | 132 Total Requests: <span>{{ summary.total_requests }}</span> | 133 Providers: <span>{{ summary.providers }}</span>134 </div>135 </div>136 137 <div class="section">138 <div class="section-title">Sessions</div>139 {% if sessions %}140 <div class="divider">─────────────────────────────────────────────────────────────</div>141 <table>142 <thead>143 <tr>144 <th>Session ID</th>145 <th>Requests</th>146 <th>Providers</th>147 <th>Last Active</th>148 <th>Req/Min</th>149 <th>Status</th>150 </tr>151 </thead>152 <tbody>153 {% for session in sessions %}154 <tr>155 <td class="session-id">{{ session.session_id[:12] }}...</td>156 <td class="number">{{ session.total_requests }}</td>157 <td>158 {% for provider in session.providers %}159 <span class="provider-badge">{{ provider }}</span>160 {% endfor %}161 </td>162 <td>{{ session.last_activity_display }}</td>163 <td class="number">{{ session.requests_per_minute }}</td>164 <td class="{{ session.status_class }}">{{ session.status }}</td>165 </tr>166 {% endfor %}167 </tbody>168 </table>169 {% else %}170 <p class="empty">No active sessions</p>171 {% endif %}172 </div>173 174 <div class="section">175 <div class="section-title">Provider Load</div>176 {% if providers %}177 <div class="divider">─────────────────────────────────────────────────────────────</div>178 <table>179 <thead>180 <tr>181 <th>Provider</th>182 <th>Active</th>183 <th>Sessions</th>184 <th>Req/Min</th>185 <th>Status</th>186 </tr>187 </thead>188 <tbody>189 {% for provider in providers %}190 <tr>191 <td class="session-id">{{ provider.provider_id }}</td>192 <td class="number">{{ provider.active_requests }}</td>193 <td class="number">{{ provider.sessions_count }}</td>194 <td class="number">{{ provider.requests_per_minute }}</td>195 <td>196 {% if provider.is_healthy %}197 <span class="status-healthy">✓ {{ provider.status }}</span>198 {% else %}199 <span class="status-limited">⚠ {{ provider.status }}</span>200 {% endif %}201 </td>202 </tr>203 {% endfor %}204 </tbody>205 </table>206 {% else %}207 <p class="empty">No provider data</p>208 {% endif %}209 </div>210 211 <div class="footer">212 Auto-refreshes every 10 seconds • <a href="/api/admin/sessions">JSON API</a>213 </div>214 </div>215</body>216</html>