vantuz 3.2.5 → 3.2.7

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.
@@ -0,0 +1,516 @@
1
+ <!DOCTYPE html>
2
+ <html lang="tr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Vantuz AI Gateway Dashboard</title>
8
+ <!-- Google Fonts: Inter & JetBrains Mono -->
9
+ <link
10
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
11
+ rel="stylesheet">
12
+ <style>
13
+ :root {
14
+ --bg-dark: #09090b;
15
+ --bg-card: #18181b;
16
+ --bg-hover: #27272a;
17
+ --border: #3f3f46;
18
+ --text-main: #fafafa;
19
+ --text-muted: #a1a1aa;
20
+ --primary: #3b82f6;
21
+ /* Blue-500 */
22
+ --primary-glow: rgba(59, 130, 246, 0.5);
23
+ --success: #10b981;
24
+ --error: #ef4444;
25
+ --warning: #f59e0b;
26
+ }
27
+
28
+ * {
29
+ box-sizing: border-box;
30
+ margin: 0;
31
+ padding: 0;
32
+ }
33
+
34
+ body {
35
+ background-color: var(--bg-dark);
36
+ color: var(--text-main);
37
+ font-family: 'Inter', sans-serif;
38
+ min-height: 100vh;
39
+ display: flex;
40
+ flex-direction: column;
41
+ }
42
+
43
+ /* Header */
44
+ header {
45
+ background-color: rgba(9, 9, 11, 0.8);
46
+ backdrop-filter: blur(12px);
47
+ border-bottom: 1px solid var(--border);
48
+ padding: 1rem 2rem;
49
+ position: sticky;
50
+ top: 0;
51
+ z-index: 50;
52
+ display: flex;
53
+ justify-content: space-between;
54
+ align-items: center;
55
+ }
56
+
57
+ .brand {
58
+ font-size: 1.25rem;
59
+ font-weight: 700;
60
+ display: flex;
61
+ align-items: center;
62
+ gap: 0.75rem;
63
+ }
64
+
65
+ .brand-icon {
66
+ font-size: 1.5rem;
67
+ }
68
+
69
+ .brand span {
70
+ background: linear-gradient(to right, #60a5fa, #a78bfa);
71
+ -webkit-background-clip: text;
72
+ background-clip: text;
73
+ -webkit-text-fill-color: transparent;
74
+ }
75
+
76
+ .gateway-status {
77
+ display: flex;
78
+ align-items: center;
79
+ gap: 0.5rem;
80
+ background: var(--bg-card);
81
+ padding: 0.35rem 0.75rem;
82
+ border-radius: 999px;
83
+ border: 1px solid var(--border);
84
+ font-size: 0.85rem;
85
+ font-weight: 500;
86
+ }
87
+
88
+ .status-indicator {
89
+ width: 8px;
90
+ height: 8px;
91
+ border-radius: 50%;
92
+ background-color: var(--text-muted);
93
+ box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
94
+ transition: all 0.3s ease;
95
+ }
96
+
97
+ .status-indicator.active {
98
+ background-color: var(--success);
99
+ box-shadow: 0 0 8px var(--success);
100
+ }
101
+
102
+ .status-indicator.error {
103
+ background-color: var(--error);
104
+ box-shadow: 0 0 8px var(--error);
105
+ }
106
+
107
+ /* Main Layout */
108
+ main {
109
+ flex: 1;
110
+ padding: 2rem;
111
+ max-width: 1400px;
112
+ width: 100%;
113
+ margin: 0 auto;
114
+ display: grid;
115
+ grid-template-columns: 280px 1fr;
116
+ gap: 2rem;
117
+ }
118
+
119
+ /* Sidebar / Stats */
120
+ .sidebar {
121
+ display: flex;
122
+ flex-direction: column;
123
+ gap: 1.5rem;
124
+ }
125
+
126
+ .stat-card {
127
+ background: var(--bg-card);
128
+ border: 1px solid var(--border);
129
+ border-radius: 12px;
130
+ padding: 1.25rem;
131
+ display: flex;
132
+ flex-direction: column;
133
+ gap: 0.5rem;
134
+ }
135
+
136
+ .stat-title {
137
+ color: var(--text-muted);
138
+ font-size: 0.85rem;
139
+ font-weight: 500;
140
+ text-transform: uppercase;
141
+ letter-spacing: 0.5px;
142
+ }
143
+
144
+ .stat-value {
145
+ font-size: 1.75rem;
146
+ font-weight: 700;
147
+ color: var(--text-main);
148
+ }
149
+
150
+ .stat-detail {
151
+ font-size: 0.8rem;
152
+ color: var(--text-muted);
153
+ display: flex;
154
+ align-items: center;
155
+ gap: 0.35rem;
156
+ }
157
+
158
+ /* Dashboard Content */
159
+ .content {
160
+ display: flex;
161
+ flex-direction: column;
162
+ gap: 2rem;
163
+ }
164
+
165
+ .section-header {
166
+ display: flex;
167
+ justify-content: space-between;
168
+ align-items: center;
169
+ margin-bottom: 1rem;
170
+ }
171
+
172
+ .section-title {
173
+ font-size: 1.1rem;
174
+ font-weight: 600;
175
+ display: flex;
176
+ align-items: center;
177
+ gap: 0.5rem;
178
+ }
179
+
180
+ /* Grid for Nodes/Platforms */
181
+ .card-grid {
182
+ display: grid;
183
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
184
+ gap: 1rem;
185
+ }
186
+
187
+ .node-card {
188
+ background: var(--bg-card);
189
+ border: 1px solid var(--border);
190
+ border-radius: 12px;
191
+ padding: 1.25rem;
192
+ transition: transform 0.2s, border-color 0.2s;
193
+ }
194
+
195
+ .node-card:hover {
196
+ border-color: var(--primary);
197
+ transform: translateY(-2px);
198
+ }
199
+
200
+ .node-header {
201
+ display: flex;
202
+ justify-content: space-between;
203
+ align-items: center;
204
+ margin-bottom: 1rem;
205
+ }
206
+
207
+ .node-name {
208
+ font-weight: 600;
209
+ font-size: 1rem;
210
+ }
211
+
212
+ .node-type {
213
+ font-size: 0.75rem;
214
+ background: #27272a;
215
+ padding: 2px 8px;
216
+ border-radius: 4px;
217
+ color: var(--text-muted);
218
+ font-family: 'JetBrains Mono', monospace;
219
+ }
220
+
221
+ .node-status {
222
+ font-size: 0.85rem;
223
+ color: var(--success);
224
+ display: flex;
225
+ align-items: center;
226
+ gap: 0.4rem;
227
+ }
228
+
229
+ .node-status.offline {
230
+ color: var(--text-muted);
231
+ }
232
+
233
+ .node-status.error {
234
+ color: var(--error);
235
+ }
236
+
237
+ /* Logs Console */
238
+ .console-container {
239
+ background: #000;
240
+ border: 1px solid var(--border);
241
+ border-radius: 12px;
242
+ overflow: hidden;
243
+ display: flex;
244
+ flex-direction: column;
245
+ height: 400px;
246
+ }
247
+
248
+ .console-header {
249
+ background: #181818;
250
+ padding: 0.75rem 1rem;
251
+ border-bottom: 1px solid var(--border);
252
+ font-size: 0.85rem;
253
+ color: var(--text-muted);
254
+ display: flex;
255
+ justify-content: space-between;
256
+ }
257
+
258
+ .console-body {
259
+ flex: 1;
260
+ padding: 1rem;
261
+ overflow-y: auto;
262
+ font-family: 'JetBrains Mono', monospace;
263
+ font-size: 0.85rem;
264
+ color: #d4d4d4;
265
+ }
266
+
267
+ .log-entry {
268
+ margin-bottom: 4px;
269
+ line-height: 1.4;
270
+ }
271
+
272
+ .log-time {
273
+ color: #6b7280;
274
+ margin-right: 8px;
275
+ font-size: 0.75rem;
276
+ }
277
+
278
+ .log-info {
279
+ color: #60a5fa;
280
+ }
281
+
282
+ .log-warn {
283
+ color: #f59e0b;
284
+ }
285
+
286
+ .log-error {
287
+ color: #ef4444;
288
+ }
289
+
290
+ .log-debug {
291
+ color: #71717a;
292
+ }
293
+
294
+ @media (max-width: 1024px) {
295
+ main {
296
+ grid-template-columns: 1fr;
297
+ }
298
+
299
+ .sidebar {
300
+ flex-direction: row;
301
+ flex-wrap: wrap;
302
+ }
303
+
304
+ .stat-card {
305
+ flex: 1;
306
+ min-width: 200px;
307
+ }
308
+ }
309
+ </style>
310
+ </head>
311
+
312
+ <body>
313
+ <header>
314
+ <div class="brand">
315
+ <div class="brand-icon">🐙</div>
316
+ <div>Vantuz <span>Gateway Dashboard</span></div>
317
+ </div>
318
+ <div class="gateway-status">
319
+ <div id="gw-indicator" class="status-indicator"></div>
320
+ <span id="gw-text">Bağlanıyor...</span>
321
+ </div>
322
+ </header>
323
+
324
+ <main>
325
+ <aside class="sidebar">
326
+ <div class="stat-card">
327
+ <div class="stat-title">Bağlı Platformlar</div>
328
+ <div class="stat-value" id="platform-count">0</div>
329
+ <div class="stat-detail">
330
+ <span class="status-indicator active" style="width:6px; height:6px;"></span>
331
+ Aktif Entegrasyon
332
+ </div>
333
+ </div>
334
+
335
+ <div class="stat-card">
336
+ <div class="stat-title">AI Modeli</div>
337
+ <div class="stat-value" id="ai-provider" style="font-size: 1.5rem;">--</div>
338
+ <div class="stat-detail">Düşünme Modu: Standart</div>
339
+ </div>
340
+
341
+ <div class="stat-card">
342
+ <div class="stat-title">Sistem Durumu</div>
343
+ <div class="stat-value" id="system-health" style="color: var(--success)">Normal</div>
344
+ <div class="stat-detail" id="system-uptime">Gateway v3.2.5</div>
345
+ </div>
346
+ </aside>
347
+
348
+ <section class="content">
349
+ <!-- Nodes Section -->
350
+ <div>
351
+ <div class="section-header">
352
+ <div class="section-title">🔌 Bağlı Node'lar ve Servisler</div>
353
+ <button onclick="fetchData()"
354
+ style="background:none; border:none; color:var(--primary); cursor:pointer;">Yenile</button>
355
+ </div>
356
+ <div class="card-grid" id="nodes-grid">
357
+ <!-- Javascript ile dolacak -->
358
+ <div class="node-card" style="opacity: 0.5;">
359
+ <div class="node-header">
360
+ <div class="node-name">Veri Bekleniyor...</div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+
366
+ <!-- Console Section -->
367
+ <div>
368
+ <div class="section-header">
369
+ <div class="section-title">📟 Canlı Terminal Logları</div>
370
+ <div style="font-size: 0.8rem; color: var(--text-muted);">Real-time stream</div>
371
+ </div>
372
+ <div class="console-container">
373
+ <div class="console-header">
374
+ <span>output.log</span>
375
+ <span>tail -f</span>
376
+ </div>
377
+ <div class="console-body" id="console-logs">
378
+ <div class="log-entry"><span class="log-time">System</span> Bağlantı kuruluyor...</div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </section>
383
+ </main>
384
+
385
+ <script>
386
+ const API_BASE = '/api';
387
+
388
+ async function fetchData() {
389
+ try {
390
+ // 1. Doctor verisi (Genel durum)
391
+ const doctorRes = await fetch(`${API_BASE}/doctor`);
392
+ const doctor = await doctorRes.json();
393
+
394
+ // 2. Status verisi (Detaylar)
395
+ const statusRes = await fetch(`${API_BASE}/status`);
396
+ const status = await statusRes.json();
397
+
398
+ updateHeader(doctor.gateway);
399
+ updateStats(status);
400
+ updateNodes(doctor.platforms, status.channels);
401
+
402
+ } catch (e) {
403
+ console.error("API hatası:", e);
404
+ document.getElementById('gw-indicator').className = 'status-indicator error';
405
+ document.getElementById('gw-text').textContent = 'Bağlantı Hatası';
406
+ }
407
+ }
408
+
409
+ function updateHeader(gateway) {
410
+ const ind = document.getElementById('gw-indicator');
411
+ const txt = document.getElementById('gw-text');
412
+
413
+ if (gateway.status === 'healthy') {
414
+ ind.className = 'status-indicator active';
415
+ txt.textContent = 'Gateway Aktif';
416
+ } else {
417
+ ind.className = 'status-indicator error';
418
+ txt.textContent = 'Gateway Pasif';
419
+ }
420
+ }
421
+
422
+ function updateStats(status) {
423
+ document.getElementById('platform-count').textContent = status.connectedCount || 0;
424
+ document.getElementById('ai-provider').textContent = (status.aiProvider || 'Bilinmiyor').toUpperCase();
425
+ document.getElementById('system-uptime').textContent = `v${status.version || '3.0'}`;
426
+ }
427
+
428
+ function updateNodes(platforms, channels) {
429
+ const grid = document.getElementById('nodes-grid');
430
+ grid.innerHTML = '';
431
+
432
+ // 1. Platformlar
433
+ Object.entries(platforms).forEach(([name, isActive]) => {
434
+ if (name === 'openclaw-gateway') return;
435
+ const card = createNodeCard(
436
+ name.charAt(0).toUpperCase() + name.slice(1),
437
+ 'MARKETPLACE',
438
+ isActive
439
+ );
440
+ grid.appendChild(card);
441
+ });
442
+
443
+ // 2. Kanallar
444
+ if (channels) {
445
+ Object.entries(channels).forEach(([name, data]) => {
446
+ const card = createNodeCard(
447
+ name.toUpperCase(),
448
+ 'CHANNEL',
449
+ data.connected
450
+ );
451
+ grid.appendChild(card);
452
+ });
453
+ }
454
+
455
+ // 3. Ekstra Araçlar (Statik şimdilik)
456
+ ['Repricer', 'Vision AI', 'CrossBorder'].forEach(tool => {
457
+ const card = createNodeCard(tool, 'TOOL', true);
458
+ grid.appendChild(card);
459
+ });
460
+ }
461
+
462
+ function createNodeCard(name, type, active) {
463
+ const div = document.createElement('div');
464
+ div.className = 'node-card';
465
+ div.innerHTML = `
466
+ <div class="node-header">
467
+ <div class="node-name">${name}</div>
468
+ <div class="node-type">${type}</div>
469
+ </div>
470
+ <div class="node-status ${active ? '' : 'offline'}">
471
+ <div class="status-indicator ${active ? 'active' : ''}" style="width:6px; height:6px;"></div>
472
+ ${active ? 'Çevrimiçi' : 'Çevrimdışı'}
473
+ </div>
474
+ `;
475
+ return div;
476
+ }
477
+
478
+ async function fetchLogs() {
479
+ try {
480
+ const res = await fetch(`${API_BASE}/logs`);
481
+ const data = await res.json();
482
+ const container = document.getElementById('console-logs');
483
+
484
+ if (data.logs) {
485
+ const logHtml = data.logs.split('\\n').filter(l => l.trim()).map(line => {
486
+ let cls = 'log-debug';
487
+ if (line.includes('[ERROR]')) cls = 'log-error';
488
+ else if (line.includes('[WARN]')) cls = 'log-warn';
489
+ else if (line.includes('[INFO]')) cls = 'log-info';
490
+
491
+ // Parse timestamp if exists [2024...]
492
+ const timeMatch = line.match(/^\[(.*?)\]/);
493
+ const time = timeMatch ? timeMatch[1].split('T')[1]?.split('.')[0] || timeMatch[1] : 'NOW';
494
+ const msg = line.replace(/^\[.*?\]/, '').trim();
495
+
496
+ return `<div class="log-entry ${cls}">
497
+ <span class="log-time">${time}</span>
498
+ ${msg}
499
+ </div>`;
500
+ }).join('');
501
+
502
+ container.innerHTML = logHtml;
503
+ container.scrollTop = container.scrollHeight;
504
+ }
505
+ } catch (e) { }
506
+ }
507
+
508
+ // Loop
509
+ fetchData();
510
+ fetchLogs();
511
+ setInterval(fetchData, 5000);
512
+ setInterval(fetchLogs, 2000);
513
+ </script>
514
+ </body>
515
+
516
+ </html>