apexbot 1.0.1 → 1.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.
- package/README.md +127 -146
- package/dist/agent/agentManager.js +13 -13
- package/dist/cli/index.js +35 -33
- package/dist/gateway/dashboard.js +182 -266
- package/dist/gateway/index.js +3 -3
- package/dist/index.js +12 -12
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
/**
|
|
3
|
-
* ApexBot Dashboard -
|
|
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
|
|
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:
|
|
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
|
-
|
|
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:
|
|
78
|
+
font-size: 1rem;
|
|
70
79
|
}
|
|
71
80
|
|
|
72
81
|
.sidebar-version {
|
|
73
|
-
font-size: 0.
|
|
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
|
|
88
|
-
margin-top: 0.
|
|
97
|
+
padding: 0.5rem 0.75rem;
|
|
98
|
+
margin-top: 0.25rem;
|
|
89
99
|
}
|
|
90
100
|
|
|
91
101
|
.nav-section-title {
|
|
92
|
-
font-size: 0.
|
|
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.
|
|
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.
|
|
104
|
-
padding: 0.
|
|
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.
|
|
108
|
-
margin: 0.
|
|
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:
|
|
125
|
-
width: 1.
|
|
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.
|
|
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:
|
|
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
|
|
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.
|
|
176
|
+
font-size: 1.25rem;
|
|
153
177
|
font-weight: 600;
|
|
154
178
|
}
|
|
155
179
|
|
|
156
180
|
.header-subtitle {
|
|
157
|
-
font-size: 0.
|
|
181
|
+
font-size: 0.8rem;
|
|
158
182
|
color: var(--text-secondary);
|
|
159
|
-
margin-top: 0.
|
|
183
|
+
margin-top: 0.2rem;
|
|
160
184
|
}
|
|
161
185
|
|
|
162
186
|
.content {
|
|
163
187
|
flex: 1;
|
|
164
188
|
overflow-y: auto;
|
|
165
|
-
padding:
|
|
189
|
+
padding: 1.5rem;
|
|
166
190
|
}
|
|
167
191
|
|
|
168
192
|
/* Pages */
|
|
169
|
-
.page {
|
|
170
|
-
|
|
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 -
|
|
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:
|
|
209
|
+
gap: 0.75rem;
|
|
191
210
|
}
|
|
192
211
|
|
|
193
212
|
.message {
|
|
194
213
|
display: flex;
|
|
195
|
-
gap: 0.
|
|
196
|
-
max-width:
|
|
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:
|
|
206
|
-
height:
|
|
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:
|
|
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.
|
|
223
|
-
border-radius:
|
|
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.
|
|
263
|
+
font-size: 0.65rem;
|
|
236
264
|
color: var(--text-muted);
|
|
237
|
-
margin-top: 0.
|
|
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.
|
|
244
|
-
padding: 0.
|
|
245
|
-
margin-top: 0.
|
|
246
|
-
font-size: 0.
|
|
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
|
-
|
|
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.
|
|
285
|
+
margin-top: 0.2rem;
|
|
260
286
|
font-family: monospace;
|
|
261
|
-
font-size: 0.
|
|
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.
|
|
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.
|
|
278
|
-
padding: 0.
|
|
303
|
+
border-radius: 0.5rem;
|
|
304
|
+
padding: 0.6rem 0.9rem;
|
|
279
305
|
color: var(--text-primary);
|
|
280
|
-
font-size: 0.
|
|
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.
|
|
320
|
+
padding: 0.6rem 1rem;
|
|
295
321
|
border: none;
|
|
296
|
-
border-radius: 0.
|
|
322
|
+
border-radius: 0.5rem;
|
|
297
323
|
font-weight: 500;
|
|
298
324
|
cursor: pointer;
|
|
299
325
|
transition: all 0.15s;
|
|
300
|
-
font-size: 0.
|
|
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
|
-
/*
|
|
348
|
+
/* Stats Grid */
|
|
323
349
|
.stats-grid {
|
|
324
350
|
display: grid;
|
|
325
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
326
|
-
gap:
|
|
327
|
-
margin-bottom:
|
|
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.
|
|
334
|
-
padding: 1.
|
|
359
|
+
border-radius: 0.5rem;
|
|
360
|
+
padding: 1.25rem;
|
|
335
361
|
}
|
|
336
362
|
|
|
337
363
|
.stat-label {
|
|
338
|
-
font-size: 0.
|
|
364
|
+
font-size: 0.75rem;
|
|
339
365
|
color: var(--text-secondary);
|
|
340
|
-
margin-bottom: 0.
|
|
366
|
+
margin-bottom: 0.4rem;
|
|
341
367
|
}
|
|
342
368
|
|
|
343
369
|
.stat-value {
|
|
344
|
-
font-size:
|
|
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
|
-
/*
|
|
379
|
+
/* Tables */
|
|
354
380
|
.table-container {
|
|
355
381
|
background: var(--bg-secondary);
|
|
356
382
|
border: 1px solid var(--border);
|
|
357
|
-
border-radius: 0.
|
|
383
|
+
border-radius: 0.5rem;
|
|
358
384
|
overflow: hidden;
|
|
359
385
|
}
|
|
360
386
|
|
|
361
387
|
.table-header {
|
|
362
|
-
padding: 1rem
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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.
|
|
423
|
+
padding: 0.2rem 0.4rem;
|
|
401
424
|
border-radius: 0.25rem;
|
|
402
|
-
font-size: 0.
|
|
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
|
|
433
|
+
/* Config Section */
|
|
411
434
|
.config-section {
|
|
412
435
|
background: var(--bg-secondary);
|
|
413
436
|
border: 1px solid var(--border);
|
|
414
|
-
border-radius: 0.
|
|
415
|
-
padding: 1.
|
|
416
|
-
margin-bottom:
|
|
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:
|
|
422
|
-
|
|
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.
|
|
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
|
|
469
|
+
/* Logs */
|
|
450
470
|
.logs-container {
|
|
451
471
|
background: var(--bg-secondary);
|
|
452
472
|
border: 1px solid var(--border);
|
|
453
|
-
border-radius: 0.
|
|
454
|
-
padding:
|
|
455
|
-
font-family: 'Fira Code', monospace;
|
|
456
|
-
font-size: 0.
|
|
457
|
-
max-height:
|
|
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.
|
|
482
|
+
padding: 0.15rem 0;
|
|
463
483
|
display: flex;
|
|
464
|
-
gap:
|
|
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:
|
|
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
|
-
|
|
507
|
-
}
|
|
508
|
-
.
|
|
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
|
-
<
|
|
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"
|
|
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"
|
|
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"
|
|
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"
|
|
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"
|
|
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"
|
|
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="
|
|
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
|
|
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="
|
|
597
|
-
<
|
|
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
|
|
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">
|
|
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
|
|
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
|
|
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
|
|
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
|
-
<!--
|
|
693
|
-
<div class="page" id="page-
|
|
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">
|
|
724
|
-
<p class="header-subtitle">
|
|
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"
|
|
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">
|
|
735
|
-
<span class="config-value"
|
|
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">
|
|
739
|
-
<span class="config-value" id="
|
|
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"
|
|
681
|
+
<div class="config-section-title">Agent</div>
|
|
754
682
|
<div class="config-item">
|
|
755
|
-
<span class="config-key">
|
|
756
|
-
<span class="config-value">
|
|
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">
|
|
760
|
-
<span class="config-value" id="
|
|
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
|
|
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"
|
|
776
|
-
<span class="log-level info">
|
|
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 = '
|
|
819
|
-
|
|
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 = '
|
|
825
|
-
|
|
826
|
-
addLog('Disconnected
|
|
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('
|
|
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
|
|
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' ? '
|
|
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"
|
|
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(
|
|
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
|
|
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
|
|
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>\${
|
|
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>\${
|
|
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="
|
|
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
|
|
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);
|