@halilertekin/claude-code-router-config 2.0.1 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/README.md +4 -3
- package/cli/commands.js +3 -2
- package/logging/health-monitor.js +11 -3
- package/package.json +1 -1
- package/router/config.js +53 -4
- package/web-dashboard/public/css/dashboard.css +216 -435
- package/web-dashboard/public/index.html +178 -289
- package/web-dashboard/public/js/dashboard.js +311 -414
|
@@ -1,308 +1,197 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="
|
|
2
|
+
<html lang="tr">
|
|
3
3
|
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Claude Code Router UI</title>
|
|
7
|
+
<link rel="stylesheet" href="css/dashboard.css">
|
|
8
|
+
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>R</text></svg>">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
11
|
+
<div class="shell">
|
|
12
|
+
<header class="topbar">
|
|
13
|
+
<div class="brand">
|
|
14
|
+
<div class="logo">CCR</div>
|
|
15
|
+
<div>
|
|
16
|
+
<h1 data-i18n="appTitle">Claude Code Router</h1>
|
|
17
|
+
<p data-i18n="appSubtitle">Birleşik yönlendirici panosu</p>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="top-actions">
|
|
21
|
+
<button class="btn" id="refresh-btn" data-i18n="refresh">Yenile</button>
|
|
22
|
+
<span id="connection-status" class="pill status-ok" data-i18n="connected">Bağlı</span>
|
|
23
|
+
<div class="lang-switch">
|
|
24
|
+
<button class="lang-btn" data-lang="tr">TR</button>
|
|
25
|
+
<button class="lang-btn" data-lang="nl">NL</button>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
</header>
|
|
29
|
+
|
|
30
|
+
<main class="content">
|
|
31
|
+
<section class="panel">
|
|
32
|
+
<div class="panel-header">
|
|
33
|
+
<h2 data-i18n="overview">Genel Bakış</h2>
|
|
34
|
+
<span id="last-updated" class="muted" data-i18n="lastUpdated">Son güncelleme: -</span>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="grid stats">
|
|
37
|
+
<div class="stat-card">
|
|
38
|
+
<span class="stat-label" data-i18n="requests">İstekler</span>
|
|
39
|
+
<span class="stat-value" id="today-requests">0</span>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="stat-card">
|
|
42
|
+
<span class="stat-label" data-i18n="tokens">Token</span>
|
|
43
|
+
<span class="stat-value" id="today-tokens">0</span>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="stat-card">
|
|
46
|
+
<span class="stat-label" data-i18n="cost">Maliyet</span>
|
|
47
|
+
<span class="stat-value" id="today-cost">$0.00</span>
|
|
48
|
+
</div>
|
|
49
|
+
<div class="stat-card">
|
|
50
|
+
<span class="stat-label" data-i18n="avgLatency">Ort. Gecikme</span>
|
|
51
|
+
<span class="stat-value" id="today-latency">0ms</span>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="grid two">
|
|
55
|
+
<div class="card">
|
|
56
|
+
<div class="card-header">
|
|
57
|
+
<h3 data-i18n="providers">Sağlayıcılar</h3>
|
|
22
58
|
</div>
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<!-- Navigation -->
|
|
26
|
-
<nav class="nav">
|
|
27
|
-
<button class="nav-item active" data-tab="overview">📊 Overview</button>
|
|
28
|
-
<button class="nav-item" data-tab="analytics">📈 Analytics</button>
|
|
29
|
-
<button class="nav-item" data-tab="health">🏥 Health</button>
|
|
30
|
-
<button class="nav-item" data-tab="config">⚙️ Config</button>
|
|
31
|
-
</nav>
|
|
32
|
-
|
|
33
|
-
<!-- Main Content -->
|
|
34
|
-
<main class="main">
|
|
35
|
-
<!-- Overview Tab -->
|
|
36
|
-
<div id="overview" class="tab-content active">
|
|
37
|
-
<div class="overview-grid">
|
|
38
|
-
<div class="card">
|
|
39
|
-
<div class="card-header">
|
|
40
|
-
<h3>📊 Today's Stats</h3>
|
|
41
|
-
</div>
|
|
42
|
-
<div class="card-body">
|
|
43
|
-
<div class="metric">
|
|
44
|
-
<span class="label">Requests</span>
|
|
45
|
-
<span class="value" id="today-requests">0</span>
|
|
46
|
-
</div>
|
|
47
|
-
<div class="metric">
|
|
48
|
-
<span class="label">Tokens Used</span>
|
|
49
|
-
<span class="value" id="today-tokens">0</span>
|
|
50
|
-
</div>
|
|
51
|
-
<div class="metric">
|
|
52
|
-
<span class="label">Cost</span>
|
|
53
|
-
<span class="value" id="today-cost">$0.00</span>
|
|
54
|
-
</div>
|
|
55
|
-
<div class="metric">
|
|
56
|
-
<span class="label">Avg Latency</span>
|
|
57
|
-
<span class="value" id="today-latency">0ms</span>
|
|
58
|
-
</div>
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
61
|
-
|
|
62
|
-
<div class="card">
|
|
63
|
-
<div class="card-header">
|
|
64
|
-
<h3>🏭 Provider Status</h3>
|
|
65
|
-
</div>
|
|
66
|
-
<div class="card-body">
|
|
67
|
-
<div id="provider-status-grid" class="provider-grid">
|
|
68
|
-
<!-- Provider status will be populated here -->
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
71
|
-
</div>
|
|
72
|
-
|
|
73
|
-
<div class="card card-wide">
|
|
74
|
-
<div class="card-header">
|
|
75
|
-
<h3>⚡ Quick Actions</h3>
|
|
76
|
-
</div>
|
|
77
|
-
<div class="card-body">
|
|
78
|
-
<button class="action-btn" onclick="testAllProviders()">
|
|
79
|
-
🧪 Test All Providers
|
|
80
|
-
</button>
|
|
81
|
-
<button class="action-btn" onclick="openConfig()">
|
|
82
|
-
⚙️ Edit Configuration
|
|
83
|
-
</button>
|
|
84
|
-
<button class="action-btn" onclick="viewLogs()">
|
|
85
|
-
📝 View Logs
|
|
86
|
-
</button>
|
|
87
|
-
<button class="action-btn" onclick="exportAnalytics()">
|
|
88
|
-
📊 Export Analytics
|
|
89
|
-
</button>
|
|
90
|
-
</div>
|
|
91
|
-
</div>
|
|
92
|
-
</div>
|
|
59
|
+
<div class="card-body">
|
|
60
|
+
<div id="provider-status-list" class="list"></div>
|
|
93
61
|
</div>
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
<div
|
|
97
|
-
|
|
98
|
-
<select id="analytics-period" class="select">
|
|
99
|
-
<option value="today">Today</option>
|
|
100
|
-
<option value="week" selected>Last Week</option>
|
|
101
|
-
<option value="month">Last Month</option>
|
|
102
|
-
<option value="quarter">Last Quarter</option>
|
|
103
|
-
</select>
|
|
104
|
-
<div class="checkbox-group">
|
|
105
|
-
<label>
|
|
106
|
-
<input type="checkbox" id="show-detailed">
|
|
107
|
-
Show Detailed
|
|
108
|
-
</label>
|
|
109
|
-
</div>
|
|
110
|
-
<div class="checkbox-group">
|
|
111
|
-
<label>
|
|
112
|
-
<input type="checkbox" id="show-costs">
|
|
113
|
-
Show Costs
|
|
114
|
-
</label>
|
|
115
|
-
</div>
|
|
116
|
-
</div>
|
|
117
|
-
|
|
118
|
-
<div class="analytics-grid">
|
|
119
|
-
<div class="card">
|
|
120
|
-
<div class="card-header">
|
|
121
|
-
<h3>📈 Usage Trends</h3>
|
|
122
|
-
<div class="chart-controls">
|
|
123
|
-
<button class="btn btn-small btn-outline">📅</button>
|
|
124
|
-
<button class="btn btn-small btn-outline">📊</button>
|
|
125
|
-
</div>
|
|
126
|
-
</div>
|
|
127
|
-
<div class="card-body">
|
|
128
|
-
<div class="chart">
|
|
129
|
-
📊 Usage chart will be displayed here
|
|
130
|
-
</div>
|
|
131
|
-
</div>
|
|
132
|
-
</div>
|
|
133
|
-
|
|
134
|
-
<div class="card">
|
|
135
|
-
<div class="card-header">
|
|
136
|
-
<h3>💰 Cost Analysis</h3>
|
|
137
|
-
<div class="chart-controls">
|
|
138
|
-
<button class="btn btn-small btn-outline">💵</button>
|
|
139
|
-
<button class="btn btn-small btn-outline">📉</button>
|
|
140
|
-
</div>
|
|
141
|
-
</div>
|
|
142
|
-
<div class="card-body">
|
|
143
|
-
<div class="chart">
|
|
144
|
-
💰 Cost chart will be displayed here
|
|
145
|
-
</div>
|
|
146
|
-
</div>
|
|
147
|
-
</div>
|
|
148
|
-
|
|
149
|
-
<div class="card card-wide">
|
|
150
|
-
<div class="card-header">
|
|
151
|
-
<h3>📊 Detailed Statistics</h3>
|
|
152
|
-
</div>
|
|
153
|
-
<div class="card-body">
|
|
154
|
-
<div id="detailed-stats">
|
|
155
|
-
<!-- Detailed stats will be populated here -->
|
|
156
|
-
</div>
|
|
157
|
-
</div>
|
|
158
|
-
</div>
|
|
159
|
-
</div>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="card">
|
|
64
|
+
<div class="card-header">
|
|
65
|
+
<h3 data-i18n="quickActions">Hızlı İşlemler</h3>
|
|
160
66
|
</div>
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
<div class="health-controls">
|
|
165
|
-
<button class="btn btn-primary" onclick="refreshHealthStatus()">
|
|
166
|
-
🔄 Refresh Status
|
|
167
|
-
</button>
|
|
168
|
-
<button class="btn btn-secondary" onclick="runHealthChecks()">
|
|
169
|
-
🔍 Run Health Checks
|
|
170
|
-
</button>
|
|
171
|
-
</div>
|
|
172
|
-
|
|
173
|
-
<div class="health-grid">
|
|
174
|
-
<div class="card">
|
|
175
|
-
<div class="card-header">
|
|
176
|
-
<h3>🏭 Provider Health</h3>
|
|
177
|
-
</div>
|
|
178
|
-
<div class="card-body">
|
|
179
|
-
<div id="health-providers">
|
|
180
|
-
<!-- Provider health details will be populated here -->
|
|
181
|
-
</div>
|
|
182
|
-
</div>
|
|
183
|
-
</div>
|
|
184
|
-
|
|
185
|
-
<div class="card">
|
|
186
|
-
<div class="card-header">
|
|
187
|
-
<h3>💻 System Health</h3>
|
|
188
|
-
</div>
|
|
189
|
-
<div class="card-body">
|
|
190
|
-
<div class="metric">
|
|
191
|
-
<span class="label">Uptime</span>
|
|
192
|
-
<span class="value" id="system-uptime">0s</span>
|
|
193
|
-
</div>
|
|
194
|
-
<div class="metric">
|
|
195
|
-
<span class="label">Memory Usage</span>
|
|
196
|
-
<span class="value" id="system-memory">0MB</span>
|
|
197
|
-
</div>
|
|
198
|
-
<div class="metric">
|
|
199
|
-
<span class="label">Node Version</span>
|
|
200
|
-
<span class="value" id="system-node">-</span>
|
|
201
|
-
</div>
|
|
202
|
-
</div>
|
|
203
|
-
</div>
|
|
204
|
-
|
|
205
|
-
<div class="card card-wide">
|
|
206
|
-
<div class="card-header">
|
|
207
|
-
<h3>⚠️ Recent Issues</h3>
|
|
208
|
-
</div>
|
|
209
|
-
<div class="card-body">
|
|
210
|
-
<div id="recent-issues">
|
|
211
|
-
<p class="text-small">No recent issues reported</p>
|
|
212
|
-
</div>
|
|
213
|
-
</div>
|
|
214
|
-
</div>
|
|
215
|
-
</div>
|
|
67
|
+
<div class="card-body actions">
|
|
68
|
+
<button class="btn ghost" id="export-btn" data-i18n="export">Dışa aktar</button>
|
|
69
|
+
<button class="btn ghost" id="refresh-health" data-i18n="refreshHealth">Sağlığı yenile</button>
|
|
216
70
|
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</section>
|
|
74
|
+
|
|
75
|
+
<section class="panel">
|
|
76
|
+
<div class="panel-header">
|
|
77
|
+
<h2 data-i18n="analytics">Analitik</h2>
|
|
78
|
+
<div class="controls">
|
|
79
|
+
<label class="muted" data-i18n="periodLabel" for="analytics-period">Dönem</label>
|
|
80
|
+
<select id="analytics-period" class="select">
|
|
81
|
+
<option value="today" data-i18n="periodToday">Bugün</option>
|
|
82
|
+
<option value="week" data-i18n="periodWeek" selected>Son 7 gün</option>
|
|
83
|
+
<option value="month" data-i18n="periodMonth">Son 30 gün</option>
|
|
84
|
+
</select>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="grid stats">
|
|
88
|
+
<div class="stat-card">
|
|
89
|
+
<span class="stat-label" data-i18n="totalRequests">Toplam İstek</span>
|
|
90
|
+
<span class="stat-value" id="summary-requests">0</span>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="stat-card">
|
|
93
|
+
<span class="stat-label" data-i18n="totalTokens">Toplam Token</span>
|
|
94
|
+
<span class="stat-value" id="summary-tokens">0</span>
|
|
95
|
+
</div>
|
|
96
|
+
<div class="stat-card">
|
|
97
|
+
<span class="stat-label" data-i18n="totalCost">Toplam Maliyet</span>
|
|
98
|
+
<span class="stat-value" id="summary-cost">$0.00</span>
|
|
99
|
+
</div>
|
|
100
|
+
<div class="stat-card">
|
|
101
|
+
<span class="stat-label" data-i18n="avgLatency">Ort. Gecikme</span>
|
|
102
|
+
<span class="stat-value" id="summary-latency">0ms</span>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="card">
|
|
106
|
+
<div class="card-header">
|
|
107
|
+
<h3 data-i18n="topProviders">En Çok Kullanılanlar</h3>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="card-body">
|
|
110
|
+
<div id="top-providers" class="list"></div>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
</section>
|
|
217
114
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
<option value="cost-optimized">💰 Cost Optimized</option>
|
|
227
|
-
<option value="quality-focused">🎯 Quality Focused</option>
|
|
228
|
-
<option value="development">🛠️ Development</option>
|
|
229
|
-
<option value="balanced">⚖️ Balanced</option>
|
|
230
|
-
</select>
|
|
231
|
-
<button class="btn btn-primary" onclick="applyTemplate()">Apply</button>
|
|
232
|
-
</div>
|
|
233
|
-
<button class="btn btn-secondary" onclick="backupConfig()">📥 Backup</button>
|
|
234
|
-
<button class="btn btn-secondary" onclick="validateConfig()">✅ Validate</button>
|
|
235
|
-
</div>
|
|
236
|
-
|
|
237
|
-
<div class="config-grid">
|
|
238
|
-
<div class="card card-wide">
|
|
239
|
-
<div class="card-header">
|
|
240
|
-
<h3>📝 Current Configuration</h3>
|
|
241
|
-
<div class="chart-controls">
|
|
242
|
-
<button class="btn btn-small btn-outline" onclick="editConfig()">✏️ Edit</button>
|
|
243
|
-
<button class="btn btn-small btn-outline" onclick="reloadConfig()">🔄 Reload</button>
|
|
244
|
-
</div>
|
|
245
|
-
</div>
|
|
246
|
-
<div class="card-body">
|
|
247
|
-
<div id="config-display">
|
|
248
|
-
<!-- Configuration will be displayed here -->
|
|
249
|
-
</div>
|
|
250
|
-
</div>
|
|
251
|
-
</div>
|
|
252
|
-
|
|
253
|
-
<div class="card">
|
|
254
|
-
<div class="card-header">
|
|
255
|
-
<h3>🏭 Provider Configuration</h3>
|
|
256
|
-
</div>
|
|
257
|
-
<div class="card-body">
|
|
258
|
-
<div id="provider-config">
|
|
259
|
-
<!-- Provider configuration will be displayed here -->
|
|
260
|
-
</div>
|
|
261
|
-
</div>
|
|
262
|
-
</div>
|
|
263
|
-
|
|
264
|
-
<div class="card">
|
|
265
|
-
<div class="card-header">
|
|
266
|
-
<h3>🔧 Router Settings</h3>
|
|
267
|
-
</div>
|
|
268
|
-
<div class="card-body">
|
|
269
|
-
<div id="router-config">
|
|
270
|
-
<!-- Router configuration will be displayed here -->
|
|
271
|
-
</div>
|
|
272
|
-
</div>
|
|
273
|
-
</div>
|
|
274
|
-
</div>
|
|
115
|
+
<section class="panel">
|
|
116
|
+
<div class="panel-header">
|
|
117
|
+
<h2 data-i18n="health">Sağlık</h2>
|
|
118
|
+
</div>
|
|
119
|
+
<div class="grid two">
|
|
120
|
+
<div class="card">
|
|
121
|
+
<div class="card-header">
|
|
122
|
+
<h3 data-i18n="providers">Sağlayıcılar</h3>
|
|
275
123
|
</div>
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
<!-- Status Bar -->
|
|
279
|
-
<footer class="status-bar">
|
|
280
|
-
<div class="status-left">
|
|
281
|
-
<span id="last-updated">Last updated: Never</span>
|
|
124
|
+
<div class="card-body">
|
|
125
|
+
<div id="health-providers" class="list"></div>
|
|
282
126
|
</div>
|
|
283
|
-
|
|
284
|
-
|
|
127
|
+
</div>
|
|
128
|
+
<div class="card">
|
|
129
|
+
<div class="card-header">
|
|
130
|
+
<h3 data-i18n="system">Sistem</h3>
|
|
285
131
|
</div>
|
|
286
|
-
|
|
287
|
-
|
|
132
|
+
<div class="card-body">
|
|
133
|
+
<div class="metric">
|
|
134
|
+
<span class="label" data-i18n="uptime">Çalışma Süresi</span>
|
|
135
|
+
<span class="value" id="system-uptime">-</span>
|
|
136
|
+
</div>
|
|
137
|
+
<div class="metric">
|
|
138
|
+
<span class="label" data-i18n="memory">Bellek</span>
|
|
139
|
+
<span class="value" id="system-memory">-</span>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="metric">
|
|
142
|
+
<span class="label" data-i18n="cpu">CPU</span>
|
|
143
|
+
<span class="value" id="system-cpu">-</span>
|
|
144
|
+
</div>
|
|
145
|
+
<div class="metric">
|
|
146
|
+
<span class="label" data-i18n="node">Node Sürümü</span>
|
|
147
|
+
<span class="value" id="system-node">-</span>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</section>
|
|
288
153
|
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
154
|
+
<section class="panel">
|
|
155
|
+
<div class="panel-header">
|
|
156
|
+
<h2 data-i18n="config">Yapılandırma</h2>
|
|
157
|
+
</div>
|
|
158
|
+
<div class="grid two">
|
|
159
|
+
<div class="card">
|
|
160
|
+
<div class="card-header">
|
|
161
|
+
<h3 data-i18n="configSummary">Özet</h3>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="card-body">
|
|
164
|
+
<div class="metric">
|
|
165
|
+
<span class="label" data-i18n="providerCount">Sağlayıcı sayısı</span>
|
|
166
|
+
<span class="value" id="config-providers">0</span>
|
|
167
|
+
</div>
|
|
168
|
+
<div class="metric">
|
|
169
|
+
<span class="label" data-i18n="defaultRoute">Varsayılan rota</span>
|
|
170
|
+
<span class="value" id="config-default">-</span>
|
|
171
|
+
</div>
|
|
172
|
+
<div class="metric">
|
|
173
|
+
<span class="label" data-i18n="logging">Loglama</span>
|
|
174
|
+
<span class="value" id="config-logging">-</span>
|
|
175
|
+
</div>
|
|
295
176
|
</div>
|
|
296
|
-
|
|
297
|
-
|
|
177
|
+
</div>
|
|
178
|
+
<div class="card">
|
|
179
|
+
<div class="card-header">
|
|
180
|
+
<h3 data-i18n="configJson">Konfigürasyon</h3>
|
|
298
181
|
</div>
|
|
299
|
-
<div class="
|
|
300
|
-
|
|
301
|
-
<button class="btn btn-primary" id="modal-action">Action</button>
|
|
182
|
+
<div class="card-body">
|
|
183
|
+
<pre id="config-display" class="config-view">{}</pre>
|
|
302
184
|
</div>
|
|
185
|
+
</div>
|
|
303
186
|
</div>
|
|
304
|
-
|
|
187
|
+
</section>
|
|
188
|
+
</main>
|
|
189
|
+
|
|
190
|
+
<footer class="footer">
|
|
191
|
+
<span id="version">v2</span>
|
|
192
|
+
</footer>
|
|
193
|
+
</div>
|
|
305
194
|
|
|
306
|
-
|
|
195
|
+
<script src="js/dashboard.js"></script>
|
|
307
196
|
</body>
|
|
308
|
-
</html>
|
|
197
|
+
</html>
|