apexbot 1.0.1 → 1.0.4

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.
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  /**
3
- * ApexBot Dashboard - Professional Web UI like Clawdbot
3
+ * ApexBot Dashboard - Clean web UI
4
4
  */
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.getDashboardHtml = getDashboardHtml;
@@ -10,7 +10,7 @@ function getDashboardHtml() {
10
10
  <head>
11
11
  <meta charset="UTF-8">
12
12
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
13
- <title>ApexBot Dashboard</title>
13
+ <title>ApexBot</title>
14
14
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
15
15
  <style>
16
16
  :root {
@@ -41,7 +41,7 @@ function getDashboardHtml() {
41
41
 
42
42
  /* Sidebar */
43
43
  .sidebar {
44
- width: 240px;
44
+ width: 220px;
45
45
  background: var(--bg-secondary);
46
46
  border-right: 1px solid var(--border);
47
47
  display: flex;
@@ -61,20 +61,30 @@ function getDashboardHtml() {
61
61
  }
62
62
 
63
63
  .sidebar-logo {
64
- font-size: 1.25rem;
64
+ width: 28px;
65
+ height: 28px;
66
+ background: var(--accent);
67
+ border-radius: 6px;
68
+ display: flex;
69
+ align-items: center;
70
+ justify-content: center;
71
+ font-weight: 700;
72
+ color: #000;
73
+ font-size: 14px;
65
74
  }
66
75
 
67
76
  .sidebar-title {
68
77
  font-weight: 600;
69
- font-size: 1.1rem;
78
+ font-size: 1rem;
70
79
  }
71
80
 
72
81
  .sidebar-version {
73
- font-size: 0.7rem;
82
+ font-size: 0.65rem;
74
83
  color: var(--text-muted);
75
84
  background: var(--bg-tertiary);
76
85
  padding: 0.15rem 0.4rem;
77
86
  border-radius: 0.25rem;
87
+ margin-left: auto;
78
88
  }
79
89
 
80
90
  .sidebar-nav {
@@ -84,30 +94,32 @@ function getDashboardHtml() {
84
94
  }
85
95
 
86
96
  .nav-section {
87
- padding: 0.5rem 1rem;
88
- margin-top: 0.5rem;
97
+ padding: 0.5rem 0.75rem;
98
+ margin-top: 0.25rem;
89
99
  }
90
100
 
91
101
  .nav-section-title {
92
- font-size: 0.7rem;
102
+ font-size: 0.65rem;
93
103
  font-weight: 600;
94
104
  text-transform: uppercase;
95
105
  letter-spacing: 0.05em;
96
106
  color: var(--text-muted);
97
- margin-bottom: 0.5rem;
107
+ margin-bottom: 0.4rem;
108
+ padding-left: 0.5rem;
98
109
  }
99
110
 
100
111
  .nav-item {
101
112
  display: flex;
102
113
  align-items: center;
103
- gap: 0.75rem;
104
- padding: 0.6rem 1rem;
114
+ gap: 0.6rem;
115
+ padding: 0.5rem 0.75rem;
105
116
  color: var(--text-secondary);
106
117
  text-decoration: none;
107
- border-radius: 0.5rem;
108
- margin: 0.15rem 0.5rem;
118
+ border-radius: 0.375rem;
119
+ margin: 0.1rem 0;
109
120
  cursor: pointer;
110
121
  transition: all 0.15s;
122
+ font-size: 0.875rem;
111
123
  }
112
124
 
113
125
  .nav-item:hover {
@@ -121,64 +133,71 @@ function getDashboardHtml() {
121
133
  }
122
134
 
123
135
  .nav-icon {
124
- font-size: 1.1rem;
125
- width: 1.5rem;
136
+ font-size: 0.875rem;
137
+ width: 1.25rem;
126
138
  text-align: center;
139
+ opacity: 0.8;
127
140
  }
128
141
 
129
142
  .sidebar-footer {
130
- padding: 1rem;
143
+ padding: 0.75rem 1rem;
131
144
  border-top: 1px solid var(--border);
132
- font-size: 0.8rem;
145
+ font-size: 0.75rem;
133
146
  color: var(--text-muted);
134
147
  }
135
148
 
149
+ .status-dot {
150
+ display: inline-block;
151
+ width: 6px;
152
+ height: 6px;
153
+ border-radius: 50%;
154
+ margin-right: 6px;
155
+ }
156
+
157
+ .status-dot.connected { background: var(--accent); }
158
+ .status-dot.disconnected { background: var(--danger); }
159
+
136
160
  /* Main Content */
137
161
  .main {
138
162
  flex: 1;
139
- margin-left: 240px;
163
+ margin-left: 220px;
140
164
  display: flex;
141
165
  flex-direction: column;
142
166
  height: 100vh;
143
167
  }
144
168
 
145
169
  .header {
146
- padding: 1.5rem 2rem;
170
+ padding: 1.25rem 1.5rem;
147
171
  border-bottom: 1px solid var(--border);
148
172
  background: var(--bg-secondary);
149
173
  }
150
174
 
151
175
  .header-title {
152
- font-size: 1.5rem;
176
+ font-size: 1.25rem;
153
177
  font-weight: 600;
154
178
  }
155
179
 
156
180
  .header-subtitle {
157
- font-size: 0.85rem;
181
+ font-size: 0.8rem;
158
182
  color: var(--text-secondary);
159
- margin-top: 0.25rem;
183
+ margin-top: 0.2rem;
160
184
  }
161
185
 
162
186
  .content {
163
187
  flex: 1;
164
188
  overflow-y: auto;
165
- padding: 2rem;
189
+ padding: 1.5rem;
166
190
  }
167
191
 
168
192
  /* Pages */
169
- .page {
170
- display: none;
171
- }
172
-
173
- .page.active {
174
- display: block;
175
- }
193
+ .page { display: none; }
194
+ .page.active { display: block; }
176
195
 
177
196
  /* Chat Page */
178
197
  .chat-container {
179
198
  display: flex;
180
199
  flex-direction: column;
181
- height: calc(100vh - 180px);
200
+ height: calc(100vh - 140px);
182
201
  }
183
202
 
184
203
  .messages {
@@ -187,13 +206,13 @@ function getDashboardHtml() {
187
206
  padding: 1rem;
188
207
  display: flex;
189
208
  flex-direction: column;
190
- gap: 1rem;
209
+ gap: 0.75rem;
191
210
  }
192
211
 
193
212
  .message {
194
213
  display: flex;
195
- gap: 0.75rem;
196
- max-width: 80%;
214
+ gap: 0.6rem;
215
+ max-width: 75%;
197
216
  }
198
217
 
199
218
  .message.user {
@@ -202,25 +221,33 @@ function getDashboardHtml() {
202
221
  }
203
222
 
204
223
  .message-avatar {
205
- width: 36px;
206
- height: 36px;
224
+ width: 32px;
225
+ height: 32px;
207
226
  border-radius: 50%;
208
227
  background: var(--bg-tertiary);
209
228
  display: flex;
210
229
  align-items: center;
211
230
  justify-content: center;
212
231
  flex-shrink: 0;
213
- font-size: 1rem;
232
+ font-size: 0.75rem;
233
+ font-weight: 600;
234
+ color: var(--text-secondary);
214
235
  }
215
236
 
216
237
  .message.user .message-avatar {
217
238
  background: var(--accent-dim);
239
+ color: var(--accent);
240
+ }
241
+
242
+ .message.bot .message-avatar {
243
+ background: var(--bg-tertiary);
244
+ color: var(--text-primary);
218
245
  }
219
246
 
220
247
  .message-content {
221
248
  background: var(--bg-tertiary);
222
- padding: 0.75rem 1rem;
223
- border-radius: 1rem;
249
+ padding: 0.6rem 0.9rem;
250
+ border-radius: 0.75rem;
224
251
  }
225
252
 
226
253
  .message.user .message-content {
@@ -229,44 +256,43 @@ function getDashboardHtml() {
229
256
 
230
257
  .message-text {
231
258
  line-height: 1.5;
259
+ font-size: 0.9rem;
232
260
  }
233
261
 
234
262
  .message-time {
235
- font-size: 0.7rem;
263
+ font-size: 0.65rem;
236
264
  color: var(--text-muted);
237
- margin-top: 0.25rem;
265
+ margin-top: 0.2rem;
238
266
  }
239
267
 
240
268
  .tool-call {
241
269
  background: var(--bg-hover);
242
270
  border: 1px solid var(--border);
243
- border-radius: 0.5rem;
244
- padding: 0.75rem;
245
- margin-top: 0.5rem;
246
- font-size: 0.85rem;
271
+ border-radius: 0.375rem;
272
+ padding: 0.5rem;
273
+ margin-top: 0.4rem;
274
+ font-size: 0.8rem;
247
275
  }
248
276
 
249
277
  .tool-call-header {
250
- display: flex;
251
- align-items: center;
252
- gap: 0.5rem;
253
- color: var(--accent);
278
+ color: var(--info);
254
279
  font-weight: 500;
280
+ font-size: 0.75rem;
255
281
  }
256
282
 
257
283
  .tool-call-result {
258
284
  color: var(--text-secondary);
259
- margin-top: 0.25rem;
285
+ margin-top: 0.2rem;
260
286
  font-family: monospace;
261
- font-size: 0.8rem;
287
+ font-size: 0.75rem;
262
288
  }
263
289
 
264
290
  .chat-input-area {
265
- padding: 1rem;
291
+ padding: 0.75rem 1rem;
266
292
  background: var(--bg-secondary);
267
293
  border-top: 1px solid var(--border);
268
294
  display: flex;
269
- gap: 0.75rem;
295
+ gap: 0.6rem;
270
296
  align-items: center;
271
297
  }
272
298
 
@@ -274,10 +300,10 @@ function getDashboardHtml() {
274
300
  flex: 1;
275
301
  background: var(--bg-tertiary);
276
302
  border: 1px solid var(--border);
277
- border-radius: 0.75rem;
278
- padding: 0.75rem 1rem;
303
+ border-radius: 0.5rem;
304
+ padding: 0.6rem 0.9rem;
279
305
  color: var(--text-primary);
280
- font-size: 0.95rem;
306
+ font-size: 0.875rem;
281
307
  outline: none;
282
308
  transition: border-color 0.15s;
283
309
  }
@@ -291,13 +317,13 @@ function getDashboardHtml() {
291
317
  }
292
318
 
293
319
  .btn {
294
- padding: 0.75rem 1.5rem;
320
+ padding: 0.6rem 1rem;
295
321
  border: none;
296
- border-radius: 0.75rem;
322
+ border-radius: 0.5rem;
297
323
  font-weight: 500;
298
324
  cursor: pointer;
299
325
  transition: all 0.15s;
300
- font-size: 0.9rem;
326
+ font-size: 0.8rem;
301
327
  }
302
328
 
303
329
  .btn-primary {
@@ -319,29 +345,29 @@ function getDashboardHtml() {
319
345
  background: var(--bg-hover);
320
346
  }
321
347
 
322
- /* Overview Page */
348
+ /* Stats Grid */
323
349
  .stats-grid {
324
350
  display: grid;
325
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
326
- gap: 1.5rem;
327
- margin-bottom: 2rem;
351
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
352
+ gap: 1rem;
353
+ margin-bottom: 1.5rem;
328
354
  }
329
355
 
330
356
  .stat-card {
331
357
  background: var(--bg-secondary);
332
358
  border: 1px solid var(--border);
333
- border-radius: 0.75rem;
334
- padding: 1.5rem;
359
+ border-radius: 0.5rem;
360
+ padding: 1.25rem;
335
361
  }
336
362
 
337
363
  .stat-label {
338
- font-size: 0.85rem;
364
+ font-size: 0.75rem;
339
365
  color: var(--text-secondary);
340
- margin-bottom: 0.5rem;
366
+ margin-bottom: 0.4rem;
341
367
  }
342
368
 
343
369
  .stat-value {
344
- font-size: 2rem;
370
+ font-size: 1.5rem;
345
371
  font-weight: 600;
346
372
  }
347
373
 
@@ -350,18 +376,19 @@ function getDashboardHtml() {
350
376
  .stat-value.danger { color: var(--danger); }
351
377
  .stat-value.info { color: var(--info); }
352
378
 
353
- /* Sessions Table */
379
+ /* Tables */
354
380
  .table-container {
355
381
  background: var(--bg-secondary);
356
382
  border: 1px solid var(--border);
357
- border-radius: 0.75rem;
383
+ border-radius: 0.5rem;
358
384
  overflow: hidden;
359
385
  }
360
386
 
361
387
  .table-header {
362
- padding: 1rem 1.5rem;
388
+ padding: 0.75rem 1rem;
363
389
  border-bottom: 1px solid var(--border);
364
390
  font-weight: 600;
391
+ font-size: 0.875rem;
365
392
  }
366
393
 
367
394
  table {
@@ -370,12 +397,13 @@ function getDashboardHtml() {
370
397
  }
371
398
 
372
399
  th, td {
373
- padding: 0.75rem 1.5rem;
400
+ padding: 0.6rem 1rem;
374
401
  text-align: left;
402
+ font-size: 0.8rem;
375
403
  }
376
404
 
377
405
  th {
378
- font-size: 0.75rem;
406
+ font-size: 0.7rem;
379
407
  font-weight: 600;
380
408
  text-transform: uppercase;
381
409
  letter-spacing: 0.05em;
@@ -387,19 +415,14 @@ function getDashboardHtml() {
387
415
  border-bottom: 1px solid var(--border);
388
416
  }
389
417
 
390
- tr:last-child {
391
- border-bottom: none;
392
- }
393
-
394
- tr:hover {
395
- background: var(--bg-hover);
396
- }
418
+ tr:last-child { border-bottom: none; }
419
+ tr:hover { background: var(--bg-hover); }
397
420
 
398
421
  .badge {
399
422
  display: inline-block;
400
- padding: 0.25rem 0.5rem;
423
+ padding: 0.2rem 0.4rem;
401
424
  border-radius: 0.25rem;
402
- font-size: 0.75rem;
425
+ font-size: 0.7rem;
403
426
  font-weight: 500;
404
427
  }
405
428
 
@@ -407,34 +430,31 @@ function getDashboardHtml() {
407
430
  .badge-warning { background: #fbbf2433; color: var(--warning); }
408
431
  .badge-info { background: #38bdf833; color: var(--info); }
409
432
 
410
- /* Config Page */
433
+ /* Config Section */
411
434
  .config-section {
412
435
  background: var(--bg-secondary);
413
436
  border: 1px solid var(--border);
414
- border-radius: 0.75rem;
415
- padding: 1.5rem;
416
- margin-bottom: 1.5rem;
437
+ border-radius: 0.5rem;
438
+ padding: 1.25rem;
439
+ margin-bottom: 1rem;
417
440
  }
418
441
 
419
442
  .config-section-title {
420
443
  font-weight: 600;
421
- margin-bottom: 1rem;
422
- display: flex;
423
- align-items: center;
424
- gap: 0.5rem;
444
+ margin-bottom: 0.75rem;
445
+ font-size: 0.9rem;
425
446
  }
426
447
 
427
448
  .config-item {
428
449
  display: flex;
429
450
  justify-content: space-between;
430
451
  align-items: center;
431
- padding: 0.75rem 0;
452
+ padding: 0.5rem 0;
432
453
  border-bottom: 1px solid var(--border);
454
+ font-size: 0.8rem;
433
455
  }
434
456
 
435
- .config-item:last-child {
436
- border-bottom: none;
437
- }
457
+ .config-item:last-child { border-bottom: none; }
438
458
 
439
459
  .config-key {
440
460
  color: var(--text-secondary);
@@ -446,22 +466,22 @@ function getDashboardHtml() {
446
466
  font-family: monospace;
447
467
  }
448
468
 
449
- /* Logs Page */
469
+ /* Logs */
450
470
  .logs-container {
451
471
  background: var(--bg-secondary);
452
472
  border: 1px solid var(--border);
453
- border-radius: 0.75rem;
454
- padding: 1rem;
455
- font-family: 'Fira Code', monospace;
456
- font-size: 0.8rem;
457
- max-height: 600px;
473
+ border-radius: 0.5rem;
474
+ padding: 0.75rem;
475
+ font-family: 'Fira Code', 'Consolas', monospace;
476
+ font-size: 0.75rem;
477
+ max-height: 500px;
458
478
  overflow-y: auto;
459
479
  }
460
480
 
461
481
  .log-entry {
462
- padding: 0.25rem 0;
482
+ padding: 0.15rem 0;
463
483
  display: flex;
464
- gap: 1rem;
484
+ gap: 0.75rem;
465
485
  }
466
486
 
467
487
  .log-time {
@@ -470,8 +490,9 @@ function getDashboardHtml() {
470
490
  }
471
491
 
472
492
  .log-level {
473
- width: 50px;
493
+ width: 45px;
474
494
  flex-shrink: 0;
495
+ text-transform: uppercase;
475
496
  }
476
497
 
477
498
  .log-level.info { color: var(--info); }
@@ -479,50 +500,19 @@ function getDashboardHtml() {
479
500
  .log-level.warn { color: var(--warning); }
480
501
  .log-level.error { color: var(--danger); }
481
502
 
482
- /* New Session Button */
483
- .chat-actions {
484
- display: flex;
485
- gap: 0.5rem;
486
- }
487
-
488
- .emoji-btn {
489
- background: var(--bg-tertiary);
490
- border: 1px solid var(--border);
491
- width: 40px;
492
- height: 40px;
493
- border-radius: 50%;
494
- cursor: pointer;
495
- font-size: 1.1rem;
496
- transition: all 0.15s;
497
- }
498
-
499
- .emoji-btn:hover {
500
- background: var(--bg-hover);
501
- }
502
-
503
503
  /* Responsive */
504
504
  @media (max-width: 768px) {
505
- .sidebar {
506
- width: 60px;
507
- }
508
- .sidebar-title, .sidebar-version, .nav-section-title, .nav-item span {
509
- display: none;
510
- }
511
- .nav-item {
512
- justify-content: center;
513
- padding: 0.75rem;
514
- }
515
- .main {
516
- margin-left: 60px;
517
- }
505
+ .sidebar { width: 56px; }
506
+ .sidebar-title, .sidebar-version, .nav-section-title, .nav-item span { display: none; }
507
+ .nav-item { justify-content: center; padding: 0.6rem; }
508
+ .main { margin-left: 56px; }
518
509
  }
519
510
  </style>
520
511
  </head>
521
512
  <body>
522
- <!-- Sidebar -->
523
513
  <aside class="sidebar">
524
514
  <div class="sidebar-header">
525
- <span class="sidebar-logo">🦊</span>
515
+ <div class="sidebar-logo">A</div>
526
516
  <span class="sidebar-title">ApexBot</span>
527
517
  <span class="sidebar-version">v1.0</span>
528
518
  </div>
@@ -531,7 +521,7 @@ function getDashboardHtml() {
531
521
  <div class="nav-section">
532
522
  <div class="nav-section-title">Chat</div>
533
523
  <a class="nav-item active" data-page="chat">
534
- <span class="nav-icon">💬</span>
524
+ <span class="nav-icon">></span>
535
525
  <span>Chat</span>
536
526
  </a>
537
527
  </div>
@@ -539,66 +529,50 @@ function getDashboardHtml() {
539
529
  <div class="nav-section">
540
530
  <div class="nav-section-title">Control</div>
541
531
  <a class="nav-item" data-page="overview">
542
- <span class="nav-icon">📊</span>
532
+ <span class="nav-icon">#</span>
543
533
  <span>Overview</span>
544
534
  </a>
545
535
  <a class="nav-item" data-page="channels">
546
- <span class="nav-icon">🔗</span>
536
+ <span class="nav-icon">@</span>
547
537
  <span>Channels</span>
548
538
  </a>
549
539
  <a class="nav-item" data-page="sessions">
550
- <span class="nav-icon">👥</span>
540
+ <span class="nav-icon">=</span>
551
541
  <span>Sessions</span>
552
542
  </a>
553
543
  </div>
554
544
 
555
- <div class="nav-section">
556
- <div class="nav-section-title">Agent</div>
557
- <a class="nav-item" data-page="skills">
558
- <span class="nav-icon">⚡</span>
559
- <span>Skills</span>
560
- </a>
561
- <a class="nav-item" data-page="model">
562
- <span class="nav-icon">🧠</span>
563
- <span>Model</span>
564
- </a>
565
- </div>
566
-
567
545
  <div class="nav-section">
568
546
  <div class="nav-section-title">Settings</div>
569
547
  <a class="nav-item" data-page="config">
570
- <span class="nav-icon">⚙️</span>
548
+ <span class="nav-icon">*</span>
571
549
  <span>Config</span>
572
550
  </a>
573
551
  <a class="nav-item" data-page="logs">
574
- <span class="nav-icon">📜</span>
552
+ <span class="nav-icon">~</span>
575
553
  <span>Logs</span>
576
554
  </a>
577
555
  </div>
578
556
  </nav>
579
557
 
580
558
  <div class="sidebar-footer">
581
- <span id="connection-status">● Connecting...</span>
559
+ <span class="status-dot" id="status-dot"></span>
560
+ <span id="connection-status">Connecting...</span>
582
561
  </div>
583
562
  </aside>
584
563
 
585
- <!-- Main Content -->
586
564
  <main class="main">
587
565
  <!-- Chat Page -->
588
566
  <div class="page active" id="page-chat">
589
567
  <div class="header">
590
568
  <h1 class="header-title">Chat</h1>
591
- <p class="header-subtitle">Direct gateway chat session for quick interactions.</p>
569
+ <p class="header-subtitle">Direct gateway session</p>
592
570
  </div>
593
571
  <div class="chat-container">
594
572
  <div class="messages" id="messages"></div>
595
573
  <div class="chat-input-area">
596
- <input type="text" class="chat-input" id="chat-input" placeholder="Message (⏎ to send, Shift+⏎ for line breaks)">
597
- <div class="chat-actions">
598
- <button class="emoji-btn" title="Emoji">😀</button>
599
- <button class="emoji-btn" title="Attach">📎</button>
600
- </div>
601
- <button class="btn btn-secondary" onclick="newSession()">New session</button>
574
+ <input type="text" class="chat-input" id="chat-input" placeholder="Type a message...">
575
+ <button class="btn btn-secondary" onclick="newSession()">New</button>
602
576
  <button class="btn btn-primary" onclick="sendMessage()">Send</button>
603
577
  </div>
604
578
  </div>
@@ -608,7 +582,7 @@ function getDashboardHtml() {
608
582
  <div class="page" id="page-overview">
609
583
  <div class="header">
610
584
  <h1 class="header-title">Overview</h1>
611
- <p class="header-subtitle">System status and metrics</p>
585
+ <p class="header-subtitle">System status</p>
612
586
  </div>
613
587
  <div class="content">
614
588
  <div class="stats-grid">
@@ -621,7 +595,7 @@ function getDashboardHtml() {
621
595
  <div class="stat-value info" id="stat-uptime">0s</div>
622
596
  </div>
623
597
  <div class="stat-card">
624
- <div class="stat-label">Active Sessions</div>
598
+ <div class="stat-label">Sessions</div>
625
599
  <div class="stat-value" id="stat-sessions">0</div>
626
600
  </div>
627
601
  <div class="stat-card">
@@ -636,7 +610,7 @@ function getDashboardHtml() {
636
610
  <div class="page" id="page-channels">
637
611
  <div class="header">
638
612
  <h1 class="header-title">Channels</h1>
639
- <p class="header-subtitle">Connected messaging platforms</p>
613
+ <p class="header-subtitle">Connected platforms</p>
640
614
  </div>
641
615
  <div class="content">
642
616
  <div class="table-container">
@@ -647,15 +621,13 @@ function getDashboardHtml() {
647
621
  <th>Channel</th>
648
622
  <th>Status</th>
649
623
  <th>Messages</th>
650
- <th>Connected</th>
651
624
  </tr>
652
625
  </thead>
653
626
  <tbody id="channels-table">
654
627
  <tr>
655
- <td>🌐 WebChat</td>
628
+ <td>WebChat</td>
656
629
  <td><span class="badge badge-success">Connected</span></td>
657
630
  <td>0</td>
658
- <td>Just now</td>
659
631
  </tr>
660
632
  </tbody>
661
633
  </table>
@@ -667,7 +639,7 @@ function getDashboardHtml() {
667
639
  <div class="page" id="page-sessions">
668
640
  <div class="header">
669
641
  <h1 class="header-title">Sessions</h1>
670
- <p class="header-subtitle">Active chat sessions</p>
642
+ <p class="header-subtitle">Active conversations</p>
671
643
  </div>
672
644
  <div class="content">
673
645
  <div class="table-container">
@@ -679,85 +651,41 @@ function getDashboardHtml() {
679
651
  <th>Channel</th>
680
652
  <th>Peer</th>
681
653
  <th>Messages</th>
682
- <th>Created</th>
683
654
  </tr>
684
655
  </thead>
685
- <tbody id="sessions-table">
686
- </tbody>
656
+ <tbody id="sessions-table"></tbody>
687
657
  </table>
688
658
  </div>
689
659
  </div>
690
660
  </div>
691
661
 
692
- <!-- Skills Page -->
693
- <div class="page" id="page-skills">
694
- <div class="header">
695
- <h1 class="header-title">Skills</h1>
696
- <p class="header-subtitle">Agent capabilities and tools</p>
697
- </div>
698
- <div class="content">
699
- <div class="stats-grid">
700
- <div class="stat-card">
701
- <div class="stat-label">📝 File Write</div>
702
- <div class="stat-value info">Enabled</div>
703
- </div>
704
- <div class="stat-card">
705
- <div class="stat-label">🔍 Web Search</div>
706
- <div class="stat-value success">Enabled</div>
707
- </div>
708
- <div class="stat-card">
709
- <div class="stat-label">📊 Data Analysis</div>
710
- <div class="stat-value success">Enabled</div>
711
- </div>
712
- <div class="stat-card">
713
- <div class="stat-label">🎯 Task Planning</div>
714
- <div class="stat-value success">Enabled</div>
715
- </div>
716
- </div>
717
- </div>
718
- </div>
719
-
720
- <!-- Model Page -->
721
- <div class="page" id="page-model">
662
+ <!-- Config Page -->
663
+ <div class="page" id="page-config">
722
664
  <div class="header">
723
- <h1 class="header-title">Model</h1>
724
- <p class="header-subtitle">AI model configuration</p>
665
+ <h1 class="header-title">Configuration</h1>
666
+ <p class="header-subtitle">System settings</p>
725
667
  </div>
726
668
  <div class="content">
727
669
  <div class="config-section">
728
- <div class="config-section-title">🧠 Current Model</div>
729
- <div class="config-item">
730
- <span class="config-key">Provider</span>
731
- <span class="config-value" id="model-provider">ollama</span>
732
- </div>
670
+ <div class="config-section-title">Gateway</div>
733
671
  <div class="config-item">
734
- <span class="config-key">Model</span>
735
- <span class="config-value" id="model-name">llama3.2:latest</span>
672
+ <span class="config-key">host</span>
673
+ <span class="config-value">127.0.0.1</span>
736
674
  </div>
737
675
  <div class="config-item">
738
- <span class="config-key">API URL</span>
739
- <span class="config-value" id="model-url">http://localhost:11434</span>
676
+ <span class="config-key">port</span>
677
+ <span class="config-value" id="config-port">18789</span>
740
678
  </div>
741
679
  </div>
742
- </div>
743
- </div>
744
-
745
- <!-- Config Page -->
746
- <div class="page" id="page-config">
747
- <div class="header">
748
- <h1 class="header-title">Config</h1>
749
- <p class="header-subtitle">System configuration</p>
750
- </div>
751
- <div class="content">
752
680
  <div class="config-section">
753
- <div class="config-section-title">🚀 Gateway</div>
681
+ <div class="config-section-title">Agent</div>
754
682
  <div class="config-item">
755
- <span class="config-key">Host</span>
756
- <span class="config-value">127.0.0.1</span>
683
+ <span class="config-key">provider</span>
684
+ <span class="config-value" id="model-provider">ollama</span>
757
685
  </div>
758
686
  <div class="config-item">
759
- <span class="config-key">Port</span>
760
- <span class="config-value" id="config-port">18789</span>
687
+ <span class="config-key">model</span>
688
+ <span class="config-value" id="model-name">llama3.2</span>
761
689
  </div>
762
690
  </div>
763
691
  </div>
@@ -767,13 +695,13 @@ function getDashboardHtml() {
767
695
  <div class="page" id="page-logs">
768
696
  <div class="header">
769
697
  <h1 class="header-title">Logs</h1>
770
- <p class="header-subtitle">System logs and events</p>
698
+ <p class="header-subtitle">System events</p>
771
699
  </div>
772
700
  <div class="content">
773
701
  <div class="logs-container" id="logs-container">
774
702
  <div class="log-entry">
775
- <span class="log-time">${new Date().toLocaleTimeString()}</span>
776
- <span class="log-level info">INFO</span>
703
+ <span class="log-time">\${new Date().toLocaleTimeString()}</span>
704
+ <span class="log-level info">info</span>
777
705
  <span>Dashboard loaded</span>
778
706
  </div>
779
707
  </div>
@@ -782,15 +710,14 @@ function getDashboardHtml() {
782
710
  </main>
783
711
 
784
712
  <script>
785
- // State
786
713
  let ws = null;
787
714
  const logs = [];
788
715
  let sessionId = null;
789
716
 
790
- // DOM
791
717
  const messagesEl = document.getElementById('messages');
792
718
  const chatInput = document.getElementById('chat-input');
793
719
  const connectionStatus = document.getElementById('connection-status');
720
+ const statusDot = document.getElementById('status-dot');
794
721
 
795
722
  // Navigation
796
723
  document.querySelectorAll('.nav-item').forEach(item => {
@@ -815,20 +742,20 @@ function getDashboardHtml() {
815
742
  ws = new WebSocket('ws://' + location.host);
816
743
 
817
744
  ws.onopen = () => {
818
- connectionStatus.textContent = 'Connected';
819
- connectionStatus.style.color = '#4ade80';
745
+ connectionStatus.textContent = 'Connected';
746
+ statusDot.className = 'status-dot connected';
820
747
  addLog('Connected to gateway', 'success');
821
748
  };
822
749
 
823
750
  ws.onclose = () => {
824
- connectionStatus.textContent = 'Disconnected';
825
- connectionStatus.style.color = '#f87171';
826
- addLog('Disconnected from gateway', 'error');
751
+ connectionStatus.textContent = 'Disconnected';
752
+ statusDot.className = 'status-dot disconnected';
753
+ addLog('Disconnected', 'error');
827
754
  setTimeout(connect, 3000);
828
755
  };
829
756
 
830
757
  ws.onerror = () => {
831
- addLog('WebSocket error', 'error');
758
+ addLog('Connection error', 'error');
832
759
  };
833
760
 
834
761
  ws.onmessage = (e) => {
@@ -841,7 +768,7 @@ function getDashboardHtml() {
841
768
  switch (msg.type) {
842
769
  case 'connected':
843
770
  sessionId = msg.clientId;
844
- addLog('Session ID: ' + sessionId, 'info');
771
+ addLog('Session: ' + sessionId, 'info');
845
772
  break;
846
773
  case 'response':
847
774
  case 'chat':
@@ -856,12 +783,11 @@ function getDashboardHtml() {
856
783
  }
857
784
  }
858
785
 
859
- // Chat
860
786
  function addChatMessage(text, type) {
861
787
  const div = document.createElement('div');
862
788
  div.className = 'message ' + type;
863
789
  div.innerHTML = \`
864
- <div class="message-avatar">\${type === 'user' ? '👤' : '🦊'}</div>
790
+ <div class="message-avatar">\${type === 'user' ? 'U' : 'A'}</div>
865
791
  <div class="message-content">
866
792
  <div class="message-text">\${formatText(text)}</div>
867
793
  <div class="message-time">\${new Date().toLocaleTimeString()}</div>
@@ -878,7 +804,7 @@ function getDashboardHtml() {
878
804
  const toolDiv = document.createElement('div');
879
805
  toolDiv.className = 'tool-call';
880
806
  toolDiv.innerHTML = \`
881
- <div class="tool-call-header">📝 \${msg.name || 'Tool'}</div>
807
+ <div class="tool-call-header">\${msg.name || 'Tool'}</div>
882
808
  <div class="tool-call-result">\${msg.result || ''}</div>
883
809
  \`;
884
810
  content.appendChild(toolDiv);
@@ -890,7 +816,7 @@ function getDashboardHtml() {
890
816
  return text
891
817
  .replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>')
892
818
  .replace(/\\*(.+?)\\*/g, '<em>$1</em>')
893
- .replace(/\`(.+?)\`/g, '<code>$1</code>')
819
+ .replace(/\\\`(.+?)\\\`/g, '<code>$1</code>')
894
820
  .replace(/\\n/g, '<br>');
895
821
  }
896
822
 
@@ -901,12 +827,12 @@ function getDashboardHtml() {
901
827
  addChatMessage(text, 'user');
902
828
  ws.send(JSON.stringify({ type: 'chat', text, id: Date.now().toString() }));
903
829
  chatInput.value = '';
904
- addLog('Sent message: ' + text.slice(0, 50) + '...', 'info');
830
+ addLog('Sent: ' + text.slice(0, 40) + (text.length > 40 ? '...' : ''), 'info');
905
831
  }
906
832
 
907
833
  function newSession() {
908
834
  messagesEl.innerHTML = '';
909
- addLog('New session started', 'success');
835
+ addLog('New session', 'success');
910
836
  }
911
837
 
912
838
  chatInput.addEventListener('keypress', (e) => {
@@ -916,7 +842,6 @@ function getDashboardHtml() {
916
842
  }
917
843
  });
918
844
 
919
- // Status
920
845
  async function fetchStatus() {
921
846
  try {
922
847
  const res = await fetch('/api/status');
@@ -941,25 +866,23 @@ function getDashboardHtml() {
941
866
  tbody.innerHTML = sessions.map(s => \`
942
867
  <tr>
943
868
  <td>\${s.id?.slice(0, 12) || 'N/A'}...</td>
944
- <td>\${getChannelIcon(s.channel)} \${s.channel || 'Unknown'}</td>
869
+ <td>\${s.channel || 'Unknown'}</td>
945
870
  <td>\${s.peer || 'Anonymous'}</td>
946
871
  <td>\${s.messageCount || 0}</td>
947
- <td>Just now</td>
948
872
  </tr>
949
- \`).join('');
873
+ \`).join('') || '<tr><td colspan="4">No sessions</td></tr>';
950
874
  }
951
875
 
952
876
  function updateChannels(channels) {
953
877
  const tbody = document.getElementById('channels-table');
954
878
  const rows = channels.map(c => \`
955
879
  <tr>
956
- <td>\${getChannelIcon(c.name)} \${c.name}</td>
880
+ <td>\${c.name}</td>
957
881
  <td><span class="badge \${c.connected ? 'badge-success' : 'badge-warning'}">\${c.connected ? 'Connected' : 'Disconnected'}</span></td>
958
882
  <td>0</td>
959
- <td>Just now</td>
960
883
  </tr>
961
884
  \`).join('');
962
- tbody.innerHTML = rows || '<tr><td colspan="4">No channels</td></tr>';
885
+ tbody.innerHTML = rows || '<tr><td colspan="3">No channels</td></tr>';
963
886
  }
964
887
 
965
888
  function updateModel(agents) {
@@ -971,18 +894,12 @@ function getDashboardHtml() {
971
894
  }
972
895
  }
973
896
 
974
- function getChannelIcon(name) {
975
- const icons = { telegram: '📱', discord: '🎮', webchat: '🌐', web: '🌐' };
976
- return icons[name?.toLowerCase()] || '💬';
977
- }
978
-
979
897
  function formatUptime(seconds) {
980
898
  if (seconds < 60) return Math.floor(seconds) + 's';
981
899
  if (seconds < 3600) return Math.floor(seconds / 60) + 'm';
982
900
  return Math.floor(seconds / 3600) + 'h ' + Math.floor((seconds % 3600) / 60) + 'm';
983
901
  }
984
902
 
985
- // Logs
986
903
  function addLog(message, level = 'info') {
987
904
  const entry = { time: new Date(), message, level };
988
905
  logs.push(entry);
@@ -992,14 +909,13 @@ function getDashboardHtml() {
992
909
  div.className = 'log-entry';
993
910
  div.innerHTML = \`
994
911
  <span class="log-time">\${entry.time.toLocaleTimeString()}</span>
995
- <span class="log-level \${level}">\${level.toUpperCase()}</span>
912
+ <span class="log-level \${level}">\${level}</span>
996
913
  <span>\${message}</span>
997
914
  \`;
998
915
  container.appendChild(div);
999
916
  container.scrollTop = container.scrollHeight;
1000
917
  }
1001
918
 
1002
- // Init
1003
919
  connect();
1004
920
  fetchStatus();
1005
921
  setInterval(fetchStatus, 30000);