Hugging Face's logo

Spaces:
Yash030
/
claude-code-proxy
Running

App Files Community
Yash030 Claude Opus 4.7 commited on
Commit
a47c2e0
·
1 Parent(s): f56589d

Upgrade admin dashboard to terminal-style dark theme

Browse files

- GitHub-inspired dark theme with monospace fonts
- Compact summary bar: Active Sessions | Total Requests | Providers
- Sessions table with Session ID, Requests, Providers, Last Active, Req/Min
- Provider Load table with Active, Sessions, Req/Min, Status
- Green checkmark for healthy, warning icon for rate limited
- Auto-refresh every 10 seconds

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Files changed (1) hide show
  1. templates/admin.html +180 -110
templates/admin.html CHANGED
@@ -5,134 +5,204 @@
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
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
9
  <style>
10
- body { background-color: #f8f9fa; }
11
- .dashboard-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2rem 0; margin-bottom: 2rem; }
12
- .stat-card { border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
13
- .table-container { background: white; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding: 1.5rem; margin-bottom: 2rem; }
14
- .section-title { color: #495057; font-weight: 600; margin-bottom: 1rem; border-bottom: 2px solid #dee2e6; padding-bottom: 0.5rem; }
15
- .status-healthy { color: #198754; font-weight: 500; }
16
- .status-limited { color: #dc3545; font-weight: 500; }
17
- .session-id { font-family: monospace; font-size: 0.9em; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  </style>
19
  </head>
20
  <body>
21
- <div class="dashboard-header">
22
- <div class="container">
23
- <h1 class="mb-0">Claude Code Proxy - Admin Dashboard</h1>
24
- <p class="mb-0 mt-2 opacity-75">Session Monitoring & Provider Load</p>
25
- </div>
26
- </div>
27
-
28
  <div class="container">
29
- <!-- Summary Stats -->
30
- <div class="row mb-4">
31
- <div class="col-md-4">
32
- <div class="card stat-card bg-primary text-white">
33
- <div class="card-body">
34
- <h5 class="card-title">Active Sessions</h5>
35
- <h2 class="mb-0">{{ summary.active_sessions }}</h2>
36
- </div>
37
- </div>
38
- </div>
39
- <div class="col-md-4">
40
- <div class="card stat-card bg-success text-white">
41
- <div class="card-body">
42
- <h5 class="card-title">Total Requests</h5>
43
- <h2 class="mb-0">{{ summary.total_requests }}</h2>
44
- </div>
45
- </div>
46
- </div>
47
- <div class="col-md-4">
48
- <div class="card stat-card bg-info text-white">
49
- <div class="card-body">
50
- <h5 class="card-title">Providers</h5>
51
- <h2 class="mb-0">{{ summary.providers }}</h2>
52
- </div>
53
- </div>
54
  </div>
55
  </div>
56
 
57
- <!-- Sessions Table -->
58
- <div class="table-container">
59
- <h3 class="section-title">Sessions</h3>
60
  {% if sessions %}
61
- <div class="table-responsive">
62
- <table class="table table-hover">
63
- <thead class="table-light">
64
- <tr>
65
- <th>Session ID</th>
66
- <th>Requests</th>
67
- <th>Providers</th>
68
- <th>Last Active</th>
69
- <th>Req/Min</th>
70
- </tr>
71
- </thead>
72
- <tbody>
73
- {% for session in sessions %}
74
- <tr>
75
- <td class="session-id" title="{{ session.session_id }}">{{ session.session_id[:12] }}...</td>
76
- <td>{{ session.total_requests }}</td>
77
- <td>
78
- {% for provider in session.providers %}
79
- <span class="badge bg-secondary">{{ provider }}</span>
80
- {% endfor %}
81
- </td>
82
- <td>{{ session.last_activity_display }}</td>
83
- <td>{{ session.requests_per_minute }}</td>
84
- </tr>
85
- {% endfor %}
86
- </tbody>
87
- </table>
88
- </div>
89
  {% else %}
90
- <p class="text-muted">No active sessions</p>
91
  {% endif %}
92
  </div>
93
 
94
- <!-- Provider Load Table -->
95
- <div class="table-container">
96
- <h3 class="section-title">Provider Load</h3>
97
  {% if providers %}
98
- <div class="table-responsive">
99
- <table class="table table-hover">
100
- <thead class="table-light">
101
- <tr>
102
- <th>Provider</th>
103
- <th>Active</th>
104
- <th>Sessions</th>
105
- <th>Req/Min</th>
106
- <th>Status</th>
107
- </tr>
108
- </thead>
109
- <tbody>
110
- {% for provider in providers %}
111
- <tr>
112
- <td class="session-id">{{ provider.provider_id }}</td>
113
- <td>{{ provider.active_requests }}</td>
114
- <td>{{ provider.sessions_count }}</td>
115
- <td>{{ provider.requests_per_minute }}</td>
116
- <td>
117
- {% if provider.is_healthy %}
118
- <span class="status-healthy">✓ {{ provider.status }}</span>
119
- {% else %}
120
- <span class="status-limited">⚠ {{ provider.status }}</span>
121
- {% endif %}
122
- </td>
123
- </tr>
124
- {% endfor %}
125
- </tbody>
126
- </table>
127
- </div>
128
  {% else %}
129
- <p class="text-muted">No provider data</p>
130
  {% endif %}
131
  </div>
132
 
133
- <footer class="text-center text-muted py-3">
134
- <small>Auto-refreshes every 10 seconds • <a href="/api/admin/sessions">JSON API</a></small>
135
- </footer>
136
  </div>
137
  </body>
138
  </html>
 
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
+ .empty {
97
+ color: #8b949e;
98
+ font-style: italic;
99
+ }
100
+ .footer {
101
+ color: #8b949e;
102
+ font-size: 11px;
103
+ text-align: center;
104
+ margin-top: 20px;
105
+ }
106
+ .footer a {
107
+ color: #58a6ff;
108
+ text-decoration: none;
109
+ }
110
+ .footer a:hover {
111
+ text-decoration: underline;
112
+ }
113
+ .number {
114
+ color: #79c0ff;
115
+ font-weight: bold;
116
+ }
117
  </style>
118
  </head>
119
  <body>
 
 
 
 
 
 
 
120
  <div class="container">
121
+ <div class="header">Claude Code Proxy - Admin Dashboard</div>
122
+
123
+ <div class="summary">
124
+ <div class="summary-line">
125
+ Active Sessions: <span>{{ summary.active_sessions }}</span> &nbsp;|&nbsp;
126
+ Total Requests: <span>{{ summary.total_requests }}</span> &nbsp;|&nbsp;
127
+ Providers: <span>{{ summary.providers }}</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
128
  </div>
129
  </div>
130
 
131
+ <div class="section">
132
+ <div class="section-title">Sessions</div>
 
133
  {% if sessions %}
134
+ <div class="divider">─────────────────────────────────────────────────────────────</div>
135
+ <table>
136
+ <thead>
137
+ <tr>
138
+ <th>Session ID</th>
139
+ <th>Requests</th>
140
+ <th>Providers</th>
141
+ <th>Last Active</th>
142
+ <th>Req/Min</th>
143
+ </tr>
144
+ </thead>
145
+ <tbody>
146
+ {% for session in sessions %}
147
+ <tr>
148
+ <td class="session-id">{{ session.session_id[:12] }}...</td>
149
+ <td class="number">{{ session.total_requests }}</td>
150
+ <td>
151
+ {% for provider in session.providers %}
152
+ <span class="provider-badge">{{ provider }}</span>
153
+ {% endfor %}
154
+ </td>
155
+ <td>{{ session.last_activity_display }}</td>
156
+ <td class="number">{{ session.requests_per_minute }}</td>
157
+ </tr>
158
+ {% endfor %}
159
+ </tbody>
160
+ </table>
 
161
  {% else %}
162
+ <p class="empty">No active sessions</p>
163
  {% endif %}
164
  </div>
165
 
166
+ <div class="section">
167
+ <div class="section-title">Provider Load</div>
 
168
  {% if providers %}
169
+ <div class="divider">─────────────────────────────────────────────────────────────</div>
170
+ <table>
171
+ <thead>
172
+ <tr>
173
+ <th>Provider</th>
174
+ <th>Active</th>
175
+ <th>Sessions</th>
176
+ <th>Req/Min</th>
177
+ <th>Status</th>
178
+ </tr>
179
+ </thead>
180
+ <tbody>
181
+ {% for provider in providers %}
182
+ <tr>
183
+ <td class="session-id">{{ provider.provider_id }}</td>
184
+ <td class="number">{{ provider.active_requests }}</td>
185
+ <td class="number">{{ provider.sessions_count }}</td>
186
+ <td class="number">{{ provider.requests_per_minute }}</td>
187
+ <td>
188
+ {% if provider.is_healthy %}
189
+ <span class="status-healthy">&#10003; {{ provider.status }}</span>
190
+ {% else %}
191
+ <span class="status-limited">&#9888; {{ provider.status }}</span>
192
+ {% endif %}
193
+ </td>
194
+ </tr>
195
+ {% endfor %}
196
+ </tbody>
197
+ </table>
 
198
  {% else %}
199
+ <p class="empty">No provider data</p>
200
  {% endif %}
201
  </div>
202
 
203
+ <div class="footer">
204
+ Auto-refreshes every 10 seconds &bull; <a href="/api/admin/sessions">JSON API</a>
205
+ </div>
206
  </div>
207
  </body>
208
  </html>