@halilertekin/claude-code-router-config 2.0.1 → 2.0.2

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +3 -0
  2. package/README.md +3 -3
  3. package/package.json +1 -1
  4. package/web-dashboard/public/css/dashboard.css +216 -435
  5. package/web-dashboard/public/index.html +178 -289
  6. package/web-dashboard/public/js/dashboard.js +311 -414
package/web-dashboard/public/css/dashboard.css CHANGED
@@ -1,575 +1,356 @@
1
- /* Modern Dashboard Styles */
1
+ @import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@600&family=Space+Grotesk:wght@400;500;600&display=swap');
2
+
2
3
  :root {
3
- --primary-color: #6366f1;
4
- --success-color: #10b981;
5
- --warning-color: #f59e0b;
6
- --error-color: #ef4444;
7
- --background: #f9fafb;
8
- --surface: #ffffff;
9
- --text-primary: #111827;
10
- --text-secondary: #6b7280;
11
- --border-color: #e5e7eb;
12
- --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
13
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
14
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
15
- --radius: 8px;
16
- --radius-lg: 12px;
4
+ --bg: #f4f1eb;
5
+ --bg-alt: #eef3f8;
6
+ --card: #ffffff;
7
+ --ink: #1f1e1b;
8
+ --muted: #6b655c;
9
+ --accent: #1e6bf1;
10
+ --accent-2: #f2b450;
11
+ --border: #ded6cb;
12
+ --shadow: 0 20px 40px -32px rgba(0, 0, 0, 0.3);
13
+ --radius: 18px;
17
14
  }
18
15
 
19
16
  * {
20
- margin: 0;
21
- padding: 0;
22
17
  box-sizing: border-box;
23
18
  }
24
19
 
25
20
  body {
26
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
27
- background: var(--background);
28
- color: var(--text-primary);
29
- line-height: 1.6;
30
- }
31
-
32
- .app {
21
+ margin: 0;
22
+ font-family: 'Space Grotesk', 'Manrope', 'Sora', sans-serif;
23
+ color: var(--ink);
24
+ background: radial-gradient(circle at 10% 10%, #fef7e5 0%, transparent 45%),
25
+ radial-gradient(circle at 90% 15%, #e6f1ff 0%, transparent 40%),
26
+ linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
33
27
  min-height: 100vh;
34
- display: flex;
35
- flex-direction: column;
36
28
  }
37
29
 
38
- /* Header */
39
- .header {
40
- background: var(--surface);
41
- border-bottom: 1px solid var(--border-color);
42
- padding: 1rem 0;
43
- box-shadow: var(--shadow-sm);
30
+ body::before {
31
+ content: '';
32
+ position: fixed;
33
+ inset: 0;
34
+ background-image: linear-gradient(rgba(31, 30, 27, 0.03) 1px, transparent 1px),
35
+ linear-gradient(90deg, rgba(31, 30, 27, 0.03) 1px, transparent 1px);
36
+ background-size: 40px 40px;
37
+ pointer-events: none;
38
+ z-index: 0;
44
39
  }
45
40
 
46
- .header-content {
41
+ .shell {
42
+ position: relative;
43
+ z-index: 1;
47
44
  max-width: 1200px;
48
45
  margin: 0 auto;
49
- padding: 0 1rem;
50
- display: flex;
51
- justify-content: space-between;
52
- align-items: center;
46
+ padding: 32px 24px 40px;
53
47
  }
54
48
 
55
- .title {
56
- font-size: 1.5rem;
57
- font-weight: 600;
58
- color: var(--text-primary);
59
- }
60
-
61
- .header-actions {
49
+ .topbar {
62
50
  display: flex;
63
- gap: 0.5rem;
51
+ flex-wrap: wrap;
52
+ gap: 20px;
64
53
  align-items: center;
54
+ justify-content: space-between;
55
+ margin-bottom: 28px;
65
56
  }
66
57
 
67
- /* Navigation */
68
- .nav {
69
- background: var(--surface);
70
- border-bottom: 1px solid var(--border-color);
71
- padding: 0;
58
+ .brand {
72
59
  display: flex;
73
- overflow-x: auto;
74
- }
75
-
76
- .nav-item {
77
- padding: 1rem 1.5rem;
78
- border: none;
79
- background: none;
80
- color: var(--text-secondary);
81
- font-weight: 500;
82
- cursor: pointer;
83
- white-space: nowrap;
84
- transition: all 0.2s;
85
- border-bottom: 3px solid transparent;
86
- }
87
-
88
- .nav-item:hover {
89
- color: var(--primary-color);
90
- background: rgba(99, 102, 241, 0.05);
91
- }
92
-
93
- .nav-item.active {
94
- color: var(--primary-color);
95
- border-bottom-color: var(--primary-color);
96
- background: rgba(99, 102, 241, 0.05);
97
- }
98
-
99
- /* Main Content */
100
- .main {
101
- flex: 1;
102
- max-width: 1200px;
103
- margin: 0 auto;
104
- padding: 1.5rem;
105
- width: 100%;
106
- }
107
-
108
- /* Tab Content */
109
- .tab-content {
110
- display: none;
60
+ gap: 16px;
61
+ align-items: center;
111
62
  }
112
63
 
113
- .tab-content.active {
114
- display: block;
64
+ .logo {
65
+ width: 54px;
66
+ height: 54px;
67
+ border-radius: 16px;
68
+ background: linear-gradient(140deg, var(--accent), #0b3f9b);
69
+ color: #fff;
70
+ display: grid;
71
+ place-items: center;
72
+ font-weight: 600;
73
+ letter-spacing: 1px;
74
+ box-shadow: var(--shadow);
115
75
  }
116
76
 
117
- /* Cards */
118
- .card {
119
- background: var(--surface);
120
- border-radius: var(--radius-lg);
121
- box-shadow: var(--shadow-sm);
122
- overflow: hidden;
123
- transition: box-shadow 0.2s;
77
+ .brand h1 {
78
+ margin: 0;
79
+ font-family: 'Fraunces', serif;
80
+ font-size: 28px;
124
81
  }
125
82
 
126
- .card:hover {
127
- box-shadow: var(--shadow-md);
83
+ .brand p {
84
+ margin: 4px 0 0;
85
+ color: var(--muted);
128
86
  }
129
87
 
130
- .card-header {
131
- padding: 1rem 1.5rem;
132
- border-bottom: 1px solid var(--border-color);
88
+ .top-actions {
133
89
  display: flex;
134
- justify-content: space-between;
135
90
  align-items: center;
91
+ gap: 12px;
92
+ flex-wrap: wrap;
136
93
  }
137
94
 
138
- .card-header h3 {
139
- font-size: 1.125rem;
140
- font-weight: 600;
141
- color: var(--text-primary);
142
- }
143
-
144
- .card-body {
145
- padding: 1.5rem;
146
- }
147
-
148
- .card-wide {
149
- grid-column: span 2;
150
- }
151
-
152
- /* Buttons */
153
95
  .btn {
154
- padding: 0.5rem 1rem;
155
- border-radius: var(--radius);
96
+ border: 1px solid var(--border);
97
+ background: var(--card);
98
+ color: var(--ink);
99
+ padding: 10px 16px;
100
+ border-radius: 999px;
156
101
  font-weight: 500;
157
- font-size: 0.875rem;
158
- border: 1px solid transparent;
159
102
  cursor: pointer;
160
- transition: all 0.2s;
161
- display: inline-flex;
162
- align-items: center;
163
- gap: 0.5rem;
164
- }
165
-
166
- .btn-primary {
167
- background: var(--primary-color);
168
- color: white;
169
- border-color: var(--primary-color);
170
- }
171
-
172
- .btn-primary:hover {
173
- background: #5558e3;
174
- border-color: #5558e3;
175
- }
176
-
177
- .btn-secondary {
178
- background: var(--text-secondary);
179
- color: white;
180
- border-color: var(--text-secondary);
103
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
181
104
  }
182
105
 
183
- .btn-secondary:hover {
184
- background: #4b5563;
185
- border-color: #4b5563;
106
+ .btn:hover {
107
+ transform: translateY(-1px);
108
+ box-shadow: 0 10px 20px -18px rgba(0, 0, 0, 0.4);
186
109
  }
187
110
 
188
- .btn-outline {
111
+ .btn.ghost {
189
112
  background: transparent;
190
- color: var(--text-secondary);
191
- border-color: var(--border-color);
113
+ border-style: dashed;
192
114
  }
193
115
 
194
- .btn-outline:hover {
195
- background: var(--background);
196
- border-color: var(--text-secondary);
197
- }
198
-
199
- .btn-small {
200
- padding: 0.25rem 0.5rem;
201
- font-size: 0.75rem;
202
- }
203
-
204
- /* Status Badge */
205
- .status-badge {
206
- padding: 0.25rem 0.75rem;
207
- border-radius: 9999px;
208
- font-size: 0.75rem;
116
+ .pill {
117
+ padding: 8px 14px;
118
+ border-radius: 999px;
119
+ background: #e1f4e8;
120
+ color: #0f6a33;
209
121
  font-weight: 600;
210
- text-transform: uppercase;
211
122
  }
212
123
 
213
- .status-healthy {
214
- background: rgba(16, 185, 129, 0.1);
215
- color: var(--success-color);
124
+ .status-ok {
125
+ background: #e1f4e8;
126
+ color: #0f6a33;
216
127
  }
217
128
 
218
- .status-unhealthy {
219
- background: rgba(239, 68, 68, 0.1);
220
- color: var(--error-color);
129
+ .status-warn {
130
+ background: #fff1cc;
131
+ color: #8a5d00;
221
132
  }
222
133
 
223
- .status-warning {
224
- background: rgba(245, 158, 11, 0.1);
225
- color: var(--warning-color);
134
+ .status-down {
135
+ background: #ffe0e0;
136
+ color: #9a1f1f;
226
137
  }
227
138
 
228
- /* Metrics */
229
- .metric {
139
+ .lang-switch {
230
140
  display: flex;
231
- justify-content: space-between;
232
- align-items: center;
233
- padding: 0.75rem 0;
234
- border-bottom: 1px solid var(--border-color);
235
- }
236
-
237
- .metric:last-child {
238
- border-bottom: none;
141
+ gap: 6px;
142
+ padding: 4px;
143
+ background: rgba(255, 255, 255, 0.7);
144
+ border-radius: 999px;
145
+ border: 1px solid var(--border);
239
146
  }
240
147
 
241
- .metric .label {
242
- font-size: 0.875rem;
243
- color: var(--text-secondary);
244
- }
245
-
246
- .metric .value {
247
- font-size: 1rem;
148
+ .lang-btn {
149
+ border: none;
150
+ background: transparent;
151
+ padding: 6px 10px;
152
+ border-radius: 999px;
153
+ cursor: pointer;
248
154
  font-weight: 600;
249
- color: var(--text-primary);
250
- }
251
-
252
- /* Grid Layouts */
253
- .overview-grid {
254
- display: grid;
255
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
256
- gap: 1.5rem;
155
+ color: var(--muted);
257
156
  }
258
157
 
259
- .analytics-grid {
260
- display: grid;
261
- grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
262
- gap: 1.5rem;
263
- }
264
-
265
- .health-grid,
266
- .config-grid {
267
- display: grid;
268
- grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
269
- gap: 1.5rem;
158
+ .lang-btn.active {
159
+ background: var(--ink);
160
+ color: #fff;
270
161
  }
271
162
 
272
- /* Provider Grid */
273
- .provider-grid {
163
+ .content {
274
164
  display: grid;
275
- grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
276
- gap: 1rem;
165
+ gap: 24px;
277
166
  }
278
167
 
279
- .provider-status {
280
- padding: 1rem;
168
+ .panel {
169
+ background: rgba(255, 255, 255, 0.72);
170
+ border: 1px solid var(--border);
281
171
  border-radius: var(--radius);
282
- border: 1px solid var(--border-color);
283
- text-align: center;
172
+ padding: 20px;
173
+ box-shadow: var(--shadow);
174
+ backdrop-filter: blur(6px);
284
175
  }
285
176
 
286
- .provider-status.healthy {
287
- border-color: var(--success-color);
288
- background: rgba(16, 185, 129, 0.05);
289
- }
290
-
291
- .provider-status.unhealthy {
292
- border-color: var(--error-color);
293
- background: rgba(239, 68, 68, 0.05);
294
- }
295
-
296
- /* Charts */
297
- .chart {
298
- height: 300px;
177
+ .panel-header {
299
178
  display: flex;
300
179
  align-items: center;
301
- justify-content: center;
302
- background: var(--background);
303
- border-radius: var(--radius);
304
- border: 1px solid var(--border-color);
305
- color: var(--text-secondary);
180
+ justify-content: space-between;
181
+ gap: 12px;
182
+ margin-bottom: 18px;
306
183
  }
307
184
 
308
- .chart-controls {
309
- display: flex;
310
- gap: 0.25rem;
185
+ .panel-header h2 {
186
+ margin: 0;
187
+ font-size: 22px;
311
188
  }
312
189
 
313
- /* Controls */
314
- .analytics-controls,
315
- .config-controls,
316
- .health-controls {
190
+ .controls {
317
191
  display: flex;
318
- gap: 1rem;
319
192
  align-items: center;
320
- margin-bottom: 1.5rem;
321
- flex-wrap: wrap;
193
+ gap: 10px;
322
194
  }
323
195
 
324
196
  .select {
325
- padding: 0.5rem 1rem;
326
- border-radius: var(--radius);
327
- border: 1px solid var(--border-color);
328
- background: var(--surface);
329
- color: var(--text-primary);
330
- font-size: 0.875rem;
197
+ border: 1px solid var(--border);
198
+ border-radius: 10px;
199
+ padding: 8px 12px;
200
+ background: #fff;
331
201
  }
332
202
 
333
- .checkbox-group {
334
- display: flex;
335
- align-items: center;
336
- gap: 0.5rem;
203
+ .grid {
204
+ display: grid;
205
+ gap: 16px;
337
206
  }
338
207
 
339
- .checkbox-group label {
340
- display: flex;
341
- align-items: center;
342
- gap: 0.5rem;
343
- font-size: 0.875rem;
344
- cursor: pointer;
208
+ .grid.stats {
209
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
345
210
  }
346
211
 
347
- /* Template Selector */
348
- .template-selector {
349
- display: flex;
350
- align-items: center;
351
- gap: 0.5rem;
212
+ .grid.two {
213
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
352
214
  }
353
215
 
354
- /* Action Buttons */
355
- .action-btn {
356
- width: 100%;
357
- padding: 1rem;
358
- margin-bottom: 0.5rem;
359
- background: var(--surface);
360
- border: 1px solid var(--border-color);
361
- border-radius: var(--radius);
362
- color: var(--text-primary);
363
- font-weight: 500;
364
- cursor: pointer;
365
- transition: all 0.2s;
366
- text-align: left;
216
+ .card {
217
+ background: var(--card);
218
+ border: 1px solid var(--border);
219
+ border-radius: 14px;
220
+ padding: 16px;
367
221
  }
368
222
 
369
- .action-btn:hover {
370
- background: var(--primary-color);
371
- color: white;
372
- border-color: var(--primary-color);
223
+ .card-header h3 {
224
+ margin: 0 0 12px;
373
225
  }
374
226
 
375
- /* Status Bar */
376
- .status-bar {
377
- background: var(--surface);
378
- border-top: 1px solid var(--border-color);
379
- padding: 0.75rem 1.5rem;
380
- display: flex;
381
- justify-content: space-between;
382
- align-items: center;
383
- font-size: 0.875rem;
384
- color: var(--text-secondary);
227
+ .card-body {
228
+ display: grid;
229
+ gap: 12px;
385
230
  }
386
231
 
387
- .status-left,
388
- .status-right {
389
- display: flex;
390
- align-items: center;
391
- gap: 1rem;
232
+ .stat-card {
233
+ background: var(--card);
234
+ border: 1px solid var(--border);
235
+ border-radius: 14px;
236
+ padding: 16px;
237
+ display: grid;
238
+ gap: 8px;
392
239
  }
393
240
 
394
- /* Modal */
395
- .modal {
396
- position: fixed;
397
- top: 0;
398
- left: 0;
399
- right: 0;
400
- bottom: 0;
401
- background: rgba(0, 0, 0, 0.5);
402
- display: flex;
403
- align-items: center;
404
- justify-content: center;
405
- z-index: 1000;
241
+ .stat-label {
242
+ font-size: 13px;
243
+ text-transform: uppercase;
244
+ letter-spacing: 0.08em;
245
+ color: var(--muted);
406
246
  }
407
247
 
408
- .modal.hidden {
409
- display: none;
248
+ .stat-value {
249
+ font-size: 22px;
250
+ font-weight: 600;
410
251
  }
411
252
 
412
- .modal-content {
413
- background: var(--surface);
414
- border-radius: var(--radius-lg);
415
- max-width: 500px;
416
- width: 90%;
417
- max-height: 80vh;
418
- overflow-y: auto;
253
+ .list {
254
+ display: grid;
255
+ gap: 10px;
419
256
  }
420
257
 
421
- .modal-header {
422
- padding: 1.5rem;
423
- border-bottom: 1px solid var(--border-color);
258
+ .list-item {
424
259
  display: flex;
425
- justify-content: space-between;
426
260
  align-items: center;
261
+ justify-content: space-between;
262
+ padding: 10px 12px;
263
+ border-radius: 10px;
264
+ background: #f8f6f2;
265
+ border: 1px solid rgba(0, 0, 0, 0.04);
427
266
  }
428
267
 
429
- .modal-header h3 {
430
- font-size: 1.25rem;
431
- font-weight: 600;
432
- }
433
-
434
- .modal-close {
435
- background: none;
436
- border: none;
437
- font-size: 1.5rem;
438
- cursor: pointer;
439
- color: var(--text-secondary);
440
- width: 2rem;
441
- height: 2rem;
268
+ .list-left {
442
269
  display: flex;
443
270
  align-items: center;
444
- justify-content: center;
445
- border-radius: var(--radius);
446
- transition: background 0.2s;
447
- }
448
-
449
- .modal-close:hover {
450
- background: var(--background);
451
- }
452
-
453
- .modal-body {
454
- padding: 1.5rem;
271
+ gap: 8px;
455
272
  }
456
273
 
457
- .modal-footer {
458
- padding: 1rem 1.5rem;
459
- border-top: 1px solid var(--border-color);
460
- display: flex;
461
- justify-content: flex-end;
462
- gap: 0.5rem;
274
+ .dot {
275
+ width: 10px;
276
+ height: 10px;
277
+ border-radius: 50%;
278
+ background: var(--accent);
463
279
  }
464
280
 
465
- /* Stats Display */
466
- .provider-stats,
467
- .model-stats {
468
- display: flex;
469
- flex-direction: column;
470
- gap: 1rem;
471
- }
281
+ .dot.ok { background: #1a9b4a; }
282
+ .dot.warn { background: #f2b450; }
283
+ .dot.down { background: #d64545; }
284
+ .dot.unknown { background: #9b9b9b; }
472
285
 
473
- .stat-item {
286
+ .metric {
474
287
  display: flex;
475
- justify-content: space-between;
476
288
  align-items: center;
477
- padding: 0.5rem;
478
- border-radius: var(--radius);
479
- background: var(--background);
289
+ justify-content: space-between;
290
+ font-size: 14px;
480
291
  }
481
292
 
482
- .stat-name {
483
- font-weight: 500;
293
+ .metric .label {
294
+ color: var(--muted);
484
295
  }
485
296
 
486
- .stat-value {
297
+ .metric .value {
487
298
  font-weight: 600;
488
- color: var(--primary-color);
489
299
  }
490
300
 
491
- /* Text Small */
492
- .text-small {
493
- font-size: 0.75rem;
494
- color: var(--text-secondary);
495
- }
496
-
497
- /* Loading State */
498
- .loading {
301
+ .actions {
499
302
  display: flex;
500
- align-items: center;
501
- justify-content: center;
502
- padding: 2rem;
503
- color: var(--text-secondary);
303
+ gap: 10px;
304
+ flex-wrap: wrap;
504
305
  }
505
306
 
506
- .loading::after {
507
- content: '';
508
- width: 1rem;
509
- height: 1rem;
510
- margin-left: 0.5rem;
511
- border: 2px solid var(--border-color);
512
- border-top-color: var(--primary-color);
513
- border-radius: 50%;
514
- animation: spin 1s linear infinite;
307
+ .config-view {
308
+ max-height: 260px;
309
+ overflow: auto;
310
+ padding: 12px;
311
+ background: #111827;
312
+ color: #f9fafb;
313
+ border-radius: 10px;
314
+ font-size: 12px;
515
315
  }
516
316
 
517
- @keyframes spin {
518
- to { transform: rotate(360deg); }
317
+ .footer {
318
+ margin-top: 24px;
319
+ color: var(--muted);
320
+ text-align: right;
519
321
  }
520
322
 
521
- /* Responsive Design */
522
- @media (max-width: 768px) {
523
- .header-content {
524
- flex-direction: column;
525
- gap: 1rem;
526
- text-align: center;
527
- }
528
-
529
- .nav {
530
- overflow-x: auto;
531
- -webkit-overflow-scrolling: touch;
532
- }
533
-
534
- .main {
535
- padding: 1rem;
536
- }
323
+ .muted {
324
+ color: var(--muted);
325
+ font-size: 13px;
326
+ }
537
327
 
538
- .overview-grid,
539
- .analytics-grid {
540
- grid-template-columns: 1fr;
328
+ @media (max-width: 720px) {
329
+ .topbar {
330
+ align-items: flex-start;
541
331
  }
542
332
 
543
- .card-wide {
544
- grid-column: span 1;
333
+ .brand h1 {
334
+ font-size: 22px;
545
335
  }
546
336
 
547
- .analytics-controls,
548
- .config-controls,
549
- .health-controls {
550
- flex-direction: column;
551
- align-items: stretch;
337
+ .panel {
338
+ padding: 16px;
552
339
  }
553
340
 
554
- .template-selector {
555
- flex-direction: column;
556
- align-items: stretch;
341
+ .controls {
342
+ width: 100%;
343
+ justify-content: space-between;
557
344
  }
558
345
  }
559
346
 
560
- @media (max-width: 480px) {
561
- .nav-item {
562
- padding: 0.75rem 1rem;
563
- font-size: 0.875rem;
347
+ @media (max-width: 520px) {
348
+ .top-actions {
349
+ width: 100%;
350
+ justify-content: space-between;
564
351
  }
565
352
 
566
- .metric {
567
- flex-direction: column;
568
- align-items: flex-start;
569
- gap: 0.25rem;
570
- }
571
-
572
- .provider-grid {
573
- grid-template-columns: 1fr;
353
+ .stat-value {
354
+ font-size: 18px;
574
355
  }
575
- }
356
+ }