@agent-e/server 1.5.13 → 1.6.0
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 +87 -0
- package/dist/AgentEServer-H3FWDCYM.mjs +7 -0
- package/dist/chunk-OALXQFKY.mjs +1574 -0
- package/dist/chunk-OALXQFKY.mjs.map +1 -0
- package/dist/cli.js +1065 -6
- package/dist/cli.js.map +1 -1
- package/dist/cli.mjs +1 -1
- package/dist/index.d.mts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +1069 -6
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/package.json +1 -1
- package/dist/AgentEServer-CBG5JMN4.mjs +0 -7
- package/dist/chunk-OXHIY4RU.mjs +0 -515
- package/dist/chunk-OXHIY4RU.mjs.map +0 -1
- /package/dist/{AgentEServer-CBG5JMN4.mjs.map → AgentEServer-H3FWDCYM.mjs.map} +0 -0
package/dist/cli.js
CHANGED
|
@@ -29,6 +29,945 @@ var import_core3 = require("@agent-e/core");
|
|
|
29
29
|
|
|
30
30
|
// src/routes.ts
|
|
31
31
|
var import_core = require("@agent-e/core");
|
|
32
|
+
|
|
33
|
+
// src/dashboard.ts
|
|
34
|
+
function getDashboardHtml() {
|
|
35
|
+
return `<!DOCTYPE html>
|
|
36
|
+
<html lang="en">
|
|
37
|
+
<head>
|
|
38
|
+
<meta charset="UTF-8">
|
|
39
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
40
|
+
<title>AgentE Dashboard</title>
|
|
41
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
42
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
43
|
+
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
44
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
|
|
45
|
+
<style>
|
|
46
|
+
:root {
|
|
47
|
+
--bg-root: #09090b;
|
|
48
|
+
--bg-panel: #18181b;
|
|
49
|
+
--bg-panel-hover: #1f1f23;
|
|
50
|
+
--border: #27272a;
|
|
51
|
+
--border-light: #3f3f46;
|
|
52
|
+
--text-primary: #f4f4f5;
|
|
53
|
+
--text-secondary: #a1a1aa;
|
|
54
|
+
--text-muted: #71717a;
|
|
55
|
+
--text-dim: #52525b;
|
|
56
|
+
--accent: #22c55e;
|
|
57
|
+
--accent-dim: #166534;
|
|
58
|
+
--warning: #eab308;
|
|
59
|
+
--warning-dim: #854d0e;
|
|
60
|
+
--danger: #ef4444;
|
|
61
|
+
--danger-dim: #991b1b;
|
|
62
|
+
--blue: #3b82f6;
|
|
63
|
+
--font-sans: 'IBM Plex Sans', system-ui, sans-serif;
|
|
64
|
+
--font-mono: 'JetBrains Mono', monospace;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
68
|
+
|
|
69
|
+
body {
|
|
70
|
+
background: var(--bg-root);
|
|
71
|
+
color: var(--text-primary);
|
|
72
|
+
font-family: var(--font-sans);
|
|
73
|
+
font-size: 14px;
|
|
74
|
+
line-height: 1.5;
|
|
75
|
+
overflow-x: hidden;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
79
|
+
.header {
|
|
80
|
+
position: sticky;
|
|
81
|
+
top: 0;
|
|
82
|
+
z-index: 100;
|
|
83
|
+
background: var(--bg-root);
|
|
84
|
+
border-bottom: 1px solid var(--border);
|
|
85
|
+
padding: 12px 24px;
|
|
86
|
+
display: flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
gap: 24px;
|
|
89
|
+
backdrop-filter: blur(8px);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.header-brand {
|
|
93
|
+
font-weight: 600;
|
|
94
|
+
font-size: 16px;
|
|
95
|
+
color: var(--text-primary);
|
|
96
|
+
white-space: nowrap;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.header-brand span { color: var(--accent); }
|
|
100
|
+
|
|
101
|
+
.kpi-row {
|
|
102
|
+
display: flex;
|
|
103
|
+
gap: 20px;
|
|
104
|
+
flex-wrap: wrap;
|
|
105
|
+
align-items: center;
|
|
106
|
+
margin-left: auto;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.kpi {
|
|
110
|
+
display: flex;
|
|
111
|
+
align-items: center;
|
|
112
|
+
gap: 6px;
|
|
113
|
+
font-size: 13px;
|
|
114
|
+
color: var(--text-secondary);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.kpi-value {
|
|
118
|
+
font-family: var(--font-mono);
|
|
119
|
+
font-weight: 500;
|
|
120
|
+
color: var(--text-primary);
|
|
121
|
+
font-size: 13px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.kpi-value.health-good { color: var(--accent); }
|
|
125
|
+
.kpi-value.health-warn { color: var(--warning); }
|
|
126
|
+
.kpi-value.health-bad { color: var(--danger); }
|
|
127
|
+
|
|
128
|
+
.live-dot {
|
|
129
|
+
width: 8px;
|
|
130
|
+
height: 8px;
|
|
131
|
+
border-radius: 50%;
|
|
132
|
+
background: var(--accent);
|
|
133
|
+
animation: pulse 2s ease-in-out infinite;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.live-dot.disconnected {
|
|
137
|
+
background: var(--danger);
|
|
138
|
+
animation: none;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@keyframes pulse {
|
|
142
|
+
0%, 100% { opacity: 1; }
|
|
143
|
+
50% { opacity: 0.4; }
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* \u2500\u2500 Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
147
|
+
.container {
|
|
148
|
+
max-width: 1440px;
|
|
149
|
+
margin: 0 auto;
|
|
150
|
+
padding: 20px 24px;
|
|
151
|
+
display: flex;
|
|
152
|
+
flex-direction: column;
|
|
153
|
+
gap: 16px;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.panel {
|
|
157
|
+
background: var(--bg-panel);
|
|
158
|
+
border: 1px solid var(--border);
|
|
159
|
+
border-radius: 8px;
|
|
160
|
+
padding: 16px;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.panel-title {
|
|
164
|
+
font-size: 13px;
|
|
165
|
+
font-weight: 600;
|
|
166
|
+
color: var(--text-secondary);
|
|
167
|
+
text-transform: uppercase;
|
|
168
|
+
letter-spacing: 0.05em;
|
|
169
|
+
margin-bottom: 12px;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* \u2500\u2500 Charts grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
173
|
+
.charts-grid {
|
|
174
|
+
display: grid;
|
|
175
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
176
|
+
gap: 16px;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.chart-box {
|
|
180
|
+
background: var(--bg-panel);
|
|
181
|
+
border: 1px solid var(--border);
|
|
182
|
+
border-radius: 8px;
|
|
183
|
+
padding: 16px;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.chart-box canvas { width: 100% !important; height: 160px !important; }
|
|
187
|
+
|
|
188
|
+
.chart-label {
|
|
189
|
+
font-size: 12px;
|
|
190
|
+
color: var(--text-muted);
|
|
191
|
+
font-weight: 500;
|
|
192
|
+
margin-bottom: 8px;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.chart-value {
|
|
196
|
+
font-family: var(--font-mono);
|
|
197
|
+
font-size: 22px;
|
|
198
|
+
font-weight: 500;
|
|
199
|
+
color: var(--text-primary);
|
|
200
|
+
margin-bottom: 8px;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* \u2500\u2500 Terminal (Decision Feed) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
204
|
+
.terminal {
|
|
205
|
+
background: var(--bg-root);
|
|
206
|
+
border: 1px solid var(--border);
|
|
207
|
+
border-radius: 8px;
|
|
208
|
+
height: 380px;
|
|
209
|
+
overflow-y: auto;
|
|
210
|
+
font-family: var(--font-mono);
|
|
211
|
+
font-size: 12px;
|
|
212
|
+
line-height: 1.7;
|
|
213
|
+
padding: 12px 16px;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.terminal::-webkit-scrollbar { width: 6px; }
|
|
217
|
+
.terminal::-webkit-scrollbar-track { background: transparent; }
|
|
218
|
+
.terminal::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
|
|
219
|
+
|
|
220
|
+
.term-line {
|
|
221
|
+
white-space: nowrap;
|
|
222
|
+
opacity: 0;
|
|
223
|
+
transform: translateY(4px);
|
|
224
|
+
animation: termIn 0.3s ease-out forwards;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
@keyframes termIn {
|
|
228
|
+
to { opacity: 1; transform: translateY(0); }
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.t-tick { color: var(--text-dim); }
|
|
232
|
+
.t-ok { color: var(--accent); }
|
|
233
|
+
.t-skip { color: var(--warning); }
|
|
234
|
+
.t-fail { color: var(--danger); }
|
|
235
|
+
.t-principle { color: var(--text-primary); font-weight: 500; }
|
|
236
|
+
.t-param { color: var(--text-secondary); }
|
|
237
|
+
.t-old { color: #d4d4d8; font-variant-numeric: tabular-nums; }
|
|
238
|
+
.t-arrow { color: var(--text-dim); }
|
|
239
|
+
.t-new { color: var(--accent); font-variant-numeric: tabular-nums; }
|
|
240
|
+
.t-meta { color: var(--text-dim); }
|
|
241
|
+
|
|
242
|
+
/* \u2500\u2500 Alerts \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
243
|
+
.alerts-container {
|
|
244
|
+
display: flex;
|
|
245
|
+
flex-direction: column;
|
|
246
|
+
gap: 8px;
|
|
247
|
+
max-height: 320px;
|
|
248
|
+
overflow-y: auto;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.alert-card {
|
|
252
|
+
display: flex;
|
|
253
|
+
align-items: flex-start;
|
|
254
|
+
gap: 12px;
|
|
255
|
+
padding: 12px;
|
|
256
|
+
border-radius: 6px;
|
|
257
|
+
border: 1px solid var(--border);
|
|
258
|
+
background: var(--bg-panel);
|
|
259
|
+
transition: opacity 0.3s, transform 0.3s;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.alert-card.fade-out {
|
|
263
|
+
opacity: 0;
|
|
264
|
+
transform: translateX(20px);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.alert-severity {
|
|
268
|
+
font-family: var(--font-mono);
|
|
269
|
+
font-weight: 600;
|
|
270
|
+
font-size: 13px;
|
|
271
|
+
padding: 2px 8px;
|
|
272
|
+
border-radius: 4px;
|
|
273
|
+
white-space: nowrap;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.sev-high { background: var(--danger-dim); color: var(--danger); }
|
|
277
|
+
.sev-med { background: var(--warning-dim); color: var(--warning); }
|
|
278
|
+
.sev-low { background: var(--accent-dim); color: var(--accent); }
|
|
279
|
+
|
|
280
|
+
.alert-body { flex: 1; }
|
|
281
|
+
.alert-principle { font-weight: 500; font-size: 13px; }
|
|
282
|
+
.alert-reason { color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
|
|
283
|
+
|
|
284
|
+
/* \u2500\u2500 Violations table \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
285
|
+
.violations-table {
|
|
286
|
+
width: 100%;
|
|
287
|
+
border-collapse: collapse;
|
|
288
|
+
font-size: 12px;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.violations-table th {
|
|
292
|
+
text-align: left;
|
|
293
|
+
color: var(--text-muted);
|
|
294
|
+
font-weight: 500;
|
|
295
|
+
padding: 6px 10px;
|
|
296
|
+
border-bottom: 1px solid var(--border);
|
|
297
|
+
cursor: pointer;
|
|
298
|
+
user-select: none;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.violations-table th:hover { color: var(--text-secondary); }
|
|
302
|
+
|
|
303
|
+
.violations-table td {
|
|
304
|
+
padding: 6px 10px;
|
|
305
|
+
border-bottom: 1px solid var(--border);
|
|
306
|
+
color: var(--text-secondary);
|
|
307
|
+
font-family: var(--font-mono);
|
|
308
|
+
font-size: 11px;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.violations-table tr:hover td { background: var(--bg-panel-hover); }
|
|
312
|
+
|
|
313
|
+
/* \u2500\u2500 Split row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
314
|
+
.split-row {
|
|
315
|
+
display: grid;
|
|
316
|
+
grid-template-columns: 1fr 1fr;
|
|
317
|
+
gap: 16px;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
@media (max-width: 800px) {
|
|
321
|
+
.split-row { grid-template-columns: 1fr; }
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
/* \u2500\u2500 Persona bar chart \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
325
|
+
.persona-bars { display: flex; flex-direction: column; gap: 6px; }
|
|
326
|
+
|
|
327
|
+
.persona-row {
|
|
328
|
+
display: flex;
|
|
329
|
+
align-items: center;
|
|
330
|
+
gap: 8px;
|
|
331
|
+
font-size: 12px;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.persona-label {
|
|
335
|
+
width: 100px;
|
|
336
|
+
text-align: right;
|
|
337
|
+
color: var(--text-secondary);
|
|
338
|
+
font-size: 11px;
|
|
339
|
+
flex-shrink: 0;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.persona-bar-track {
|
|
343
|
+
flex: 1;
|
|
344
|
+
height: 16px;
|
|
345
|
+
background: var(--bg-root);
|
|
346
|
+
border-radius: 3px;
|
|
347
|
+
overflow: hidden;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.persona-bar-fill {
|
|
351
|
+
height: 100%;
|
|
352
|
+
background: var(--accent);
|
|
353
|
+
border-radius: 3px;
|
|
354
|
+
transition: width 0.5s ease;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.persona-pct {
|
|
358
|
+
width: 40px;
|
|
359
|
+
font-family: var(--font-mono);
|
|
360
|
+
font-size: 11px;
|
|
361
|
+
color: var(--text-muted);
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
/* \u2500\u2500 Registry list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
365
|
+
.registry-list { display: flex; flex-direction: column; gap: 4px; }
|
|
366
|
+
|
|
367
|
+
.registry-item {
|
|
368
|
+
display: flex;
|
|
369
|
+
justify-content: space-between;
|
|
370
|
+
align-items: center;
|
|
371
|
+
padding: 6px 10px;
|
|
372
|
+
border-radius: 4px;
|
|
373
|
+
font-size: 12px;
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.registry-item:nth-child(odd) { background: rgba(255,255,255,0.02); }
|
|
377
|
+
.registry-key { color: var(--text-secondary); font-family: var(--font-mono); }
|
|
378
|
+
.registry-val { color: var(--accent); font-family: var(--font-mono); font-weight: 500; }
|
|
379
|
+
|
|
380
|
+
/* \u2500\u2500 Advisor mode \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
381
|
+
.advisor-banner {
|
|
382
|
+
display: none;
|
|
383
|
+
background: var(--warning-dim);
|
|
384
|
+
border: 1px solid var(--warning);
|
|
385
|
+
color: var(--warning);
|
|
386
|
+
padding: 8px 16px;
|
|
387
|
+
border-radius: 6px;
|
|
388
|
+
font-size: 13px;
|
|
389
|
+
font-weight: 500;
|
|
390
|
+
align-items: center;
|
|
391
|
+
gap: 8px;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.advisor-mode .advisor-banner { display: flex; }
|
|
395
|
+
|
|
396
|
+
.pending-pill {
|
|
397
|
+
background: var(--warning);
|
|
398
|
+
color: var(--bg-root);
|
|
399
|
+
font-size: 11px;
|
|
400
|
+
font-weight: 600;
|
|
401
|
+
padding: 1px 8px;
|
|
402
|
+
border-radius: 10px;
|
|
403
|
+
font-family: var(--font-mono);
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
.advisor-btn {
|
|
407
|
+
font-family: var(--font-mono);
|
|
408
|
+
font-size: 11px;
|
|
409
|
+
padding: 2px 10px;
|
|
410
|
+
border-radius: 4px;
|
|
411
|
+
border: none;
|
|
412
|
+
cursor: pointer;
|
|
413
|
+
font-weight: 500;
|
|
414
|
+
transition: opacity 0.15s;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.advisor-btn:hover { opacity: 0.85; }
|
|
418
|
+
.advisor-btn.approve { background: var(--accent); color: var(--bg-root); }
|
|
419
|
+
.advisor-btn.reject { background: var(--danger); color: #fff; }
|
|
420
|
+
|
|
421
|
+
.advisor-actions { display: none; gap: 6px; margin-left: 8px; }
|
|
422
|
+
.advisor-mode .advisor-actions { display: inline-flex; }
|
|
423
|
+
|
|
424
|
+
/* \u2500\u2500 Empty state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
425
|
+
.empty-state {
|
|
426
|
+
color: var(--text-dim);
|
|
427
|
+
font-size: 13px;
|
|
428
|
+
text-align: center;
|
|
429
|
+
padding: 40px 20px;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
/* \u2500\u2500 Reduced motion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
|
|
433
|
+
@media (prefers-reduced-motion: reduce) {
|
|
434
|
+
.term-line { animation: none; opacity: 1; transform: none; }
|
|
435
|
+
.live-dot { animation: none; }
|
|
436
|
+
.persona-bar-fill { transition: none; }
|
|
437
|
+
}
|
|
438
|
+
</style>
|
|
439
|
+
</head>
|
|
440
|
+
<body>
|
|
441
|
+
|
|
442
|
+
<!-- Header -->
|
|
443
|
+
<div class="header" id="header">
|
|
444
|
+
<div class="header-brand">Agent<span>E</span> v1.6</div>
|
|
445
|
+
<div class="kpi-row">
|
|
446
|
+
<div class="kpi">Health <span class="kpi-value health-good" id="kpi-health">--</span></div>
|
|
447
|
+
<div class="kpi">Mode <span class="kpi-value" id="kpi-mode">--</span></div>
|
|
448
|
+
<div class="kpi">Tick <span class="kpi-value" id="kpi-tick">0</span></div>
|
|
449
|
+
<div class="kpi">Uptime <span class="kpi-value" id="kpi-uptime">0s</span></div>
|
|
450
|
+
<div class="kpi">Plans <span class="kpi-value" id="kpi-plans">0</span></div>
|
|
451
|
+
<div class="live-dot" id="live-dot" title="WebSocket connected"></div>
|
|
452
|
+
</div>
|
|
453
|
+
</div>
|
|
454
|
+
|
|
455
|
+
<div class="container" id="app">
|
|
456
|
+
<!-- Advisor banner -->
|
|
457
|
+
<div class="advisor-banner" id="advisor-banner">
|
|
458
|
+
ADVISOR MODE \u2014 Recommendations require manual approval
|
|
459
|
+
<span class="pending-pill" id="pending-count">0</span> pending
|
|
460
|
+
</div>
|
|
461
|
+
|
|
462
|
+
<!-- Charts -->
|
|
463
|
+
<div class="charts-grid">
|
|
464
|
+
<div class="chart-box">
|
|
465
|
+
<div class="chart-label">Economy Health</div>
|
|
466
|
+
<div class="chart-value" id="cv-health">--</div>
|
|
467
|
+
<canvas id="chart-health"></canvas>
|
|
468
|
+
</div>
|
|
469
|
+
<div class="chart-box">
|
|
470
|
+
<div class="chart-label">Gini Coefficient</div>
|
|
471
|
+
<div class="chart-value" id="cv-gini">--</div>
|
|
472
|
+
<canvas id="chart-gini"></canvas>
|
|
473
|
+
</div>
|
|
474
|
+
<div class="chart-box">
|
|
475
|
+
<div class="chart-label">Net Flow</div>
|
|
476
|
+
<div class="chart-value" id="cv-netflow">--</div>
|
|
477
|
+
<canvas id="chart-netflow"></canvas>
|
|
478
|
+
</div>
|
|
479
|
+
<div class="chart-box">
|
|
480
|
+
<div class="chart-label">Avg Satisfaction</div>
|
|
481
|
+
<div class="chart-value" id="cv-satisfaction">--</div>
|
|
482
|
+
<canvas id="chart-satisfaction"></canvas>
|
|
483
|
+
</div>
|
|
484
|
+
</div>
|
|
485
|
+
|
|
486
|
+
<!-- Decision Feed -->
|
|
487
|
+
<div class="panel">
|
|
488
|
+
<div class="panel-title">Decision Feed</div>
|
|
489
|
+
<div class="terminal" id="terminal"></div>
|
|
490
|
+
</div>
|
|
491
|
+
|
|
492
|
+
<!-- Active Alerts -->
|
|
493
|
+
<div class="panel">
|
|
494
|
+
<div class="panel-title">Active Alerts</div>
|
|
495
|
+
<div class="alerts-container" id="alerts-container">
|
|
496
|
+
<div class="empty-state" id="alerts-empty">No active violations</div>
|
|
497
|
+
</div>
|
|
498
|
+
</div>
|
|
499
|
+
|
|
500
|
+
<!-- Violation History -->
|
|
501
|
+
<div class="panel">
|
|
502
|
+
<div class="panel-title">Violation History</div>
|
|
503
|
+
<div style="max-height:320px;overflow-y:auto">
|
|
504
|
+
<table class="violations-table" id="violations-table">
|
|
505
|
+
<thead>
|
|
506
|
+
<tr>
|
|
507
|
+
<th data-sort="tick">Tick</th>
|
|
508
|
+
<th data-sort="principle">Principle</th>
|
|
509
|
+
<th data-sort="severity">Severity</th>
|
|
510
|
+
<th data-sort="parameter">Parameter</th>
|
|
511
|
+
<th data-sort="result">Result</th>
|
|
512
|
+
</tr>
|
|
513
|
+
</thead>
|
|
514
|
+
<tbody id="violations-body"></tbody>
|
|
515
|
+
</table>
|
|
516
|
+
</div>
|
|
517
|
+
</div>
|
|
518
|
+
|
|
519
|
+
<!-- Split: Personas + Registry -->
|
|
520
|
+
<div class="split-row">
|
|
521
|
+
<div class="panel">
|
|
522
|
+
<div class="panel-title">Persona Distribution</div>
|
|
523
|
+
<div class="persona-bars" id="persona-bars">
|
|
524
|
+
<div class="empty-state">No persona data yet</div>
|
|
525
|
+
</div>
|
|
526
|
+
</div>
|
|
527
|
+
<div class="panel">
|
|
528
|
+
<div class="panel-title">Parameter Registry</div>
|
|
529
|
+
<div class="registry-list" id="registry-list">
|
|
530
|
+
<div class="empty-state">No parameters registered</div>
|
|
531
|
+
</div>
|
|
532
|
+
</div>
|
|
533
|
+
</div>
|
|
534
|
+
</div>
|
|
535
|
+
|
|
536
|
+
<script>
|
|
537
|
+
(function() {
|
|
538
|
+
'use strict';
|
|
539
|
+
|
|
540
|
+
// \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
541
|
+
let ws = null;
|
|
542
|
+
let reconnectDelay = 1000;
|
|
543
|
+
const MAX_RECONNECT = 30000;
|
|
544
|
+
let isAdvisor = false;
|
|
545
|
+
let pendingDecisions = [];
|
|
546
|
+
const MAX_TERMINAL_LINES = 80;
|
|
547
|
+
const MAX_VIOLATIONS = 100;
|
|
548
|
+
let violationSortKey = 'tick';
|
|
549
|
+
let violationSortAsc = false;
|
|
550
|
+
let violations = [];
|
|
551
|
+
|
|
552
|
+
// Chart instances
|
|
553
|
+
let chartHealth, chartGini, chartNetflow, chartSatisfaction;
|
|
554
|
+
|
|
555
|
+
// \u2500\u2500 DOM refs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
556
|
+
const $kpiHealth = document.getElementById('kpi-health');
|
|
557
|
+
const $kpiMode = document.getElementById('kpi-mode');
|
|
558
|
+
const $kpiTick = document.getElementById('kpi-tick');
|
|
559
|
+
const $kpiUptime = document.getElementById('kpi-uptime');
|
|
560
|
+
const $kpiPlans = document.getElementById('kpi-plans');
|
|
561
|
+
const $liveDot = document.getElementById('live-dot');
|
|
562
|
+
const $terminal = document.getElementById('terminal');
|
|
563
|
+
const $alertsContainer = document.getElementById('alerts-container');
|
|
564
|
+
const $alertsEmpty = document.getElementById('alerts-empty');
|
|
565
|
+
const $violationsBody = document.getElementById('violations-body');
|
|
566
|
+
const $personaBars = document.getElementById('persona-bars');
|
|
567
|
+
const $registryList = document.getElementById('registry-list');
|
|
568
|
+
const $pendingCount = document.getElementById('pending-count');
|
|
569
|
+
const $app = document.getElementById('app');
|
|
570
|
+
|
|
571
|
+
// \u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
572
|
+
function pad(n, w) { return String(n).padStart(w || 4, ' '); }
|
|
573
|
+
function fmt(n) { return typeof n === 'number' ? n.toFixed(3) : '\u2014'; }
|
|
574
|
+
function pct(n) { return typeof n === 'number' ? (n * 100).toFixed(0) + '%' : '\u2014'; }
|
|
575
|
+
|
|
576
|
+
function formatUptime(ms) {
|
|
577
|
+
const s = Math.floor(ms / 1000);
|
|
578
|
+
if (s < 60) return s + 's';
|
|
579
|
+
if (s < 3600) return Math.floor(s / 60) + 'm ' + (s % 60) + 's';
|
|
580
|
+
const h = Math.floor(s / 3600);
|
|
581
|
+
return h + 'h ' + Math.floor((s % 3600) / 60) + 'm';
|
|
582
|
+
}
|
|
583
|
+
|
|
584
|
+
function healthClass(h) {
|
|
585
|
+
if (h >= 70) return 'health-good';
|
|
586
|
+
if (h >= 40) return 'health-warn';
|
|
587
|
+
return 'health-bad';
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
function sevClass(s) {
|
|
591
|
+
if (s >= 7) return 'sev-high';
|
|
592
|
+
if (s >= 4) return 'sev-med';
|
|
593
|
+
return 'sev-low';
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
// \u2500\u2500 Chart setup \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
597
|
+
const chartOpts = {
|
|
598
|
+
responsive: true,
|
|
599
|
+
maintainAspectRatio: false,
|
|
600
|
+
animation: { duration: 300 },
|
|
601
|
+
plugins: { legend: { display: false } },
|
|
602
|
+
scales: {
|
|
603
|
+
x: { display: false },
|
|
604
|
+
y: {
|
|
605
|
+
ticks: { color: '#71717a', font: { family: "'JetBrains Mono'", size: 10 } },
|
|
606
|
+
grid: { color: 'rgba(63,63,70,0.3)' },
|
|
607
|
+
border: { display: false },
|
|
608
|
+
}
|
|
609
|
+
},
|
|
610
|
+
elements: {
|
|
611
|
+
point: { radius: 0 },
|
|
612
|
+
line: { borderWidth: 1.5, tension: 0.3 },
|
|
613
|
+
}
|
|
614
|
+
};
|
|
615
|
+
|
|
616
|
+
function makeChart(id, color, minY, maxY) {
|
|
617
|
+
const ctx = document.getElementById(id).getContext('2d');
|
|
618
|
+
const opts = JSON.parse(JSON.stringify(chartOpts));
|
|
619
|
+
if (minY !== undefined) opts.scales.y.min = minY;
|
|
620
|
+
if (maxY !== undefined) opts.scales.y.max = maxY;
|
|
621
|
+
return new Chart(ctx, {
|
|
622
|
+
type: 'line',
|
|
623
|
+
data: {
|
|
624
|
+
labels: [],
|
|
625
|
+
datasets: [{
|
|
626
|
+
data: [],
|
|
627
|
+
borderColor: color,
|
|
628
|
+
backgroundColor: color + '18',
|
|
629
|
+
fill: true,
|
|
630
|
+
}]
|
|
631
|
+
},
|
|
632
|
+
options: opts,
|
|
633
|
+
});
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
function initCharts() {
|
|
637
|
+
chartHealth = makeChart('chart-health', '#22c55e', 0, 100);
|
|
638
|
+
chartGini = makeChart('chart-gini', '#eab308', 0, 1);
|
|
639
|
+
chartNetflow = makeChart('chart-netflow', '#3b82f6');
|
|
640
|
+
chartSatisfaction = makeChart('chart-satisfaction', '#22c55e', 0, 100);
|
|
641
|
+
}
|
|
642
|
+
|
|
643
|
+
function updateChart(chart, labels, data) {
|
|
644
|
+
chart.data.labels = labels;
|
|
645
|
+
chart.data.datasets[0].data = data;
|
|
646
|
+
chart.update('none');
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
// \u2500\u2500 Terminal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
650
|
+
function addTerminalLine(html) {
|
|
651
|
+
const el = document.createElement('div');
|
|
652
|
+
el.className = 'term-line';
|
|
653
|
+
el.innerHTML = html;
|
|
654
|
+
$terminal.appendChild(el);
|
|
655
|
+
while ($terminal.children.length > MAX_TERMINAL_LINES) {
|
|
656
|
+
$terminal.removeChild($terminal.firstChild);
|
|
657
|
+
}
|
|
658
|
+
$terminal.scrollTop = $terminal.scrollHeight;
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
function decisionToTerminal(d) {
|
|
662
|
+
const resultIcon = d.result === 'applied'
|
|
663
|
+
? '<span class="t-ok">\\u2705 </span>'
|
|
664
|
+
: d.result === 'rejected'
|
|
665
|
+
? '<span class="t-fail">\\u274c </span>'
|
|
666
|
+
: '<span class="t-skip">\\u23f8 </span>';
|
|
667
|
+
|
|
668
|
+
const principle = d.diagnosis?.principle || {};
|
|
669
|
+
const plan = d.plan || {};
|
|
670
|
+
const severity = d.diagnosis?.violation?.severity ?? '?';
|
|
671
|
+
const confidence = d.diagnosis?.violation?.confidence;
|
|
672
|
+
const confStr = confidence != null ? (confidence * 100).toFixed(0) + '%' : '?';
|
|
673
|
+
|
|
674
|
+
let advisorBtns = '';
|
|
675
|
+
if (isAdvisor && d.result === 'skipped_override') {
|
|
676
|
+
advisorBtns = '<span class="advisor-actions">'
|
|
677
|
+
+ '<button class="advisor-btn approve" onclick="window._approve(\\'' + d.id + '\\')">[Approve]</button>'
|
|
678
|
+
+ '<button class="advisor-btn reject" onclick="window._reject(\\'' + d.id + '\\')">[Reject]</button>'
|
|
679
|
+
+ '</span>';
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
return '<span class="t-tick">[Tick ' + pad(d.tick) + ']</span> '
|
|
683
|
+
+ resultIcon
|
|
684
|
+
+ '<span class="t-principle">[' + (principle.id || '?') + '] ' + (principle.name || '') + ':</span> '
|
|
685
|
+
+ '<span class="t-param">' + (plan.parameter || '\u2014') + ' </span>'
|
|
686
|
+
+ '<span class="t-old">' + fmt(plan.currentValue) + '</span>'
|
|
687
|
+
+ '<span class="t-arrow"> \\u2192 </span>'
|
|
688
|
+
+ '<span class="t-new">' + fmt(plan.targetValue) + '</span>'
|
|
689
|
+
+ '<span class="t-meta"> severity ' + severity + '/10, confidence ' + confStr + '</span>'
|
|
690
|
+
+ advisorBtns;
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
// \u2500\u2500 Alerts \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
694
|
+
function renderAlerts(alerts) {
|
|
695
|
+
if (!alerts || alerts.length === 0) {
|
|
696
|
+
$alertsContainer.innerHTML = '<div class="empty-state">No active violations</div>';
|
|
697
|
+
return;
|
|
698
|
+
}
|
|
699
|
+
const sorted = [...alerts].sort((a, b) => (b.severity || 0) - (a.severity || 0));
|
|
700
|
+
$alertsContainer.innerHTML = sorted.map(function(a) {
|
|
701
|
+
const sev = a.severity || a.violation?.severity || 0;
|
|
702
|
+
const sc = sevClass(sev);
|
|
703
|
+
const name = a.principleName || a.principle?.name || '?';
|
|
704
|
+
const pid = a.principleId || a.principle?.id || '?';
|
|
705
|
+
const reason = a.reasoning || a.violation?.suggestedAction?.reasoning || '';
|
|
706
|
+
return '<div class="alert-card">'
|
|
707
|
+
+ '<span class="alert-severity ' + sc + '">' + sev + '/10</span>'
|
|
708
|
+
+ '<div class="alert-body">'
|
|
709
|
+
+ '<div class="alert-principle">[' + pid + '] ' + name + '</div>'
|
|
710
|
+
+ '<div class="alert-reason">' + reason + '</div>'
|
|
711
|
+
+ '</div></div>';
|
|
712
|
+
}).join('');
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
// \u2500\u2500 Violations table \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
716
|
+
function addViolation(d) {
|
|
717
|
+
violations.push({
|
|
718
|
+
tick: d.tick,
|
|
719
|
+
principle: (d.diagnosis?.principle?.id || '?') + ' ' + (d.diagnosis?.principle?.name || ''),
|
|
720
|
+
severity: d.diagnosis?.violation?.severity || 0,
|
|
721
|
+
parameter: d.plan?.parameter || '\u2014',
|
|
722
|
+
result: d.result,
|
|
723
|
+
});
|
|
724
|
+
if (violations.length > MAX_VIOLATIONS) violations.shift();
|
|
725
|
+
renderViolations();
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
function renderViolations() {
|
|
729
|
+
const sorted = [...violations].sort(function(a, b) {
|
|
730
|
+
const va = a[violationSortKey], vb = b[violationSortKey];
|
|
731
|
+
if (va < vb) return violationSortAsc ? -1 : 1;
|
|
732
|
+
if (va > vb) return violationSortAsc ? 1 : -1;
|
|
733
|
+
return 0;
|
|
734
|
+
});
|
|
735
|
+
$violationsBody.innerHTML = sorted.map(function(v) {
|
|
736
|
+
return '<tr>'
|
|
737
|
+
+ '<td>' + v.tick + '</td>'
|
|
738
|
+
+ '<td style="color:var(--text-primary);font-family:var(--font-sans)">' + v.principle + '</td>'
|
|
739
|
+
+ '<td><span class="alert-severity ' + sevClass(v.severity) + '">' + v.severity + '</span></td>'
|
|
740
|
+
+ '<td>' + v.parameter + '</td>'
|
|
741
|
+
+ '<td>' + v.result + '</td>'
|
|
742
|
+
+ '</tr>';
|
|
743
|
+
}).join('');
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
// Table sorting
|
|
747
|
+
document.querySelectorAll('.violations-table th').forEach(function(th) {
|
|
748
|
+
th.addEventListener('click', function() {
|
|
749
|
+
const key = th.dataset.sort;
|
|
750
|
+
if (violationSortKey === key) violationSortAsc = !violationSortAsc;
|
|
751
|
+
else { violationSortKey = key; violationSortAsc = true; }
|
|
752
|
+
renderViolations();
|
|
753
|
+
});
|
|
754
|
+
});
|
|
755
|
+
|
|
756
|
+
// \u2500\u2500 Personas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
757
|
+
function renderPersonas(dist) {
|
|
758
|
+
if (!dist || Object.keys(dist).length === 0) {
|
|
759
|
+
$personaBars.innerHTML = '<div class="empty-state">No persona data yet</div>';
|
|
760
|
+
return;
|
|
761
|
+
}
|
|
762
|
+
const total = Object.values(dist).reduce(function(s, v) { return s + v; }, 0);
|
|
763
|
+
const entries = Object.entries(dist).sort(function(a, b) { return b[1] - a[1]; });
|
|
764
|
+
$personaBars.innerHTML = entries.map(function(e) {
|
|
765
|
+
const pctVal = total > 0 ? (e[1] / total * 100) : 0;
|
|
766
|
+
return '<div class="persona-row">'
|
|
767
|
+
+ '<div class="persona-label">' + e[0] + '</div>'
|
|
768
|
+
+ '<div class="persona-bar-track"><div class="persona-bar-fill" style="width:' + pctVal + '%"></div></div>'
|
|
769
|
+
+ '<div class="persona-pct">' + pctVal.toFixed(0) + '%</div>'
|
|
770
|
+
+ '</div>';
|
|
771
|
+
}).join('');
|
|
772
|
+
}
|
|
773
|
+
|
|
774
|
+
// \u2500\u2500 Registry \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
775
|
+
function renderRegistry(principles) {
|
|
776
|
+
if (!principles || principles.length === 0) {
|
|
777
|
+
$registryList.innerHTML = '<div class="empty-state">No parameters registered</div>';
|
|
778
|
+
return;
|
|
779
|
+
}
|
|
780
|
+
// Show unique parameters from principles
|
|
781
|
+
const params = new Set();
|
|
782
|
+
$registryList.innerHTML = principles.slice(0, 30).map(function(p) {
|
|
783
|
+
return '<div class="registry-item">'
|
|
784
|
+
+ '<span class="registry-key">[' + p.id + ']</span>'
|
|
785
|
+
+ '<span class="registry-val">' + p.name + '</span>'
|
|
786
|
+
+ '</div>';
|
|
787
|
+
}).join('');
|
|
788
|
+
}
|
|
789
|
+
|
|
790
|
+
// \u2500\u2500 KPI update \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
791
|
+
function updateKPIs(data) {
|
|
792
|
+
if (data.health != null) {
|
|
793
|
+
$kpiHealth.textContent = data.health + '/100';
|
|
794
|
+
$kpiHealth.className = 'kpi-value ' + healthClass(data.health);
|
|
795
|
+
document.getElementById('cv-health').textContent = data.health + '/100';
|
|
796
|
+
}
|
|
797
|
+
if (data.mode != null) {
|
|
798
|
+
$kpiMode.textContent = data.mode;
|
|
799
|
+
isAdvisor = data.mode === 'advisor';
|
|
800
|
+
$app.classList.toggle('advisor-mode', isAdvisor);
|
|
801
|
+
}
|
|
802
|
+
if (data.tick != null) $kpiTick.textContent = data.tick;
|
|
803
|
+
if (data.uptime != null) $kpiUptime.textContent = formatUptime(data.uptime);
|
|
804
|
+
if (data.activePlans != null) $kpiPlans.textContent = data.activePlans;
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
// \u2500\u2500 Metrics history \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
808
|
+
function updateChartsFromHistory(history) {
|
|
809
|
+
if (!history || history.length === 0) return;
|
|
810
|
+
const ticks = history.map(function(h) { return h.tick; });
|
|
811
|
+
updateChart(chartHealth, ticks, history.map(function(h) { return h.health; }));
|
|
812
|
+
updateChart(chartGini, ticks, history.map(function(h) { return h.giniCoefficient; }));
|
|
813
|
+
updateChart(chartNetflow, ticks, history.map(function(h) { return h.netFlow; }));
|
|
814
|
+
updateChart(chartSatisfaction, ticks, history.map(function(h) { return h.avgSatisfaction; }));
|
|
815
|
+
|
|
816
|
+
const last = history[history.length - 1];
|
|
817
|
+
document.getElementById('cv-gini').textContent = last.giniCoefficient.toFixed(3);
|
|
818
|
+
document.getElementById('cv-netflow').textContent = last.netFlow.toFixed(1);
|
|
819
|
+
document.getElementById('cv-satisfaction').textContent = last.avgSatisfaction.toFixed(0) + '/100';
|
|
820
|
+
}
|
|
821
|
+
|
|
822
|
+
// \u2500\u2500 API calls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
823
|
+
function fetchJSON(path) {
|
|
824
|
+
return fetch(path).then(function(r) { return r.json(); });
|
|
825
|
+
}
|
|
826
|
+
|
|
827
|
+
function postJSON(path, body) {
|
|
828
|
+
return fetch(path, {
|
|
829
|
+
method: 'POST',
|
|
830
|
+
headers: { 'Content-Type': 'application/json' },
|
|
831
|
+
body: JSON.stringify(body),
|
|
832
|
+
}).then(function(r) { return r.json(); });
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
function loadInitialData() {
|
|
836
|
+
fetchJSON('/health').then(function(data) {
|
|
837
|
+
updateKPIs(data);
|
|
838
|
+
}).catch(function() {});
|
|
839
|
+
|
|
840
|
+
fetchJSON('/decisions?limit=50').then(function(data) {
|
|
841
|
+
if (data.decisions) {
|
|
842
|
+
data.decisions.reverse().forEach(function(d) {
|
|
843
|
+
addTerminalLine(decisionToTerminal(d));
|
|
844
|
+
addViolation(d);
|
|
845
|
+
});
|
|
846
|
+
}
|
|
847
|
+
}).catch(function() {});
|
|
848
|
+
|
|
849
|
+
fetchJSON('/metrics').then(function(data) {
|
|
850
|
+
if (data.history) updateChartsFromHistory(data.history);
|
|
851
|
+
if (data.latest) {
|
|
852
|
+
renderPersonas(data.latest.personaDistribution);
|
|
853
|
+
}
|
|
854
|
+
}).catch(function() {});
|
|
855
|
+
|
|
856
|
+
fetchJSON('/principles').then(function(data) {
|
|
857
|
+
if (data.principles) renderRegistry(data.principles);
|
|
858
|
+
}).catch(function() {});
|
|
859
|
+
|
|
860
|
+
fetchJSON('/pending').then(function(data) {
|
|
861
|
+
if (data.pending) {
|
|
862
|
+
pendingDecisions = data.pending;
|
|
863
|
+
$pendingCount.textContent = data.count || 0;
|
|
864
|
+
}
|
|
865
|
+
}).catch(function() {});
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
// \u2500\u2500 Polling fallback \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
869
|
+
let pollInterval = null;
|
|
870
|
+
|
|
871
|
+
function startPolling() {
|
|
872
|
+
if (pollInterval) return;
|
|
873
|
+
pollInterval = setInterval(function() {
|
|
874
|
+
fetchJSON('/health').then(updateKPIs).catch(function() {});
|
|
875
|
+
fetchJSON('/metrics').then(function(data) {
|
|
876
|
+
if (data.history) updateChartsFromHistory(data.history);
|
|
877
|
+
if (data.latest) renderPersonas(data.latest.personaDistribution);
|
|
878
|
+
}).catch(function() {});
|
|
879
|
+
}, 5000);
|
|
880
|
+
}
|
|
881
|
+
|
|
882
|
+
function stopPolling() {
|
|
883
|
+
if (pollInterval) { clearInterval(pollInterval); pollInterval = null; }
|
|
884
|
+
}
|
|
885
|
+
|
|
886
|
+
// \u2500\u2500 WebSocket \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
887
|
+
function connectWS() {
|
|
888
|
+
const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
889
|
+
ws = new WebSocket(proto + '//' + location.host);
|
|
890
|
+
|
|
891
|
+
ws.onopen = function() {
|
|
892
|
+
reconnectDelay = 1000;
|
|
893
|
+
$liveDot.classList.remove('disconnected');
|
|
894
|
+
$liveDot.title = 'WebSocket connected';
|
|
895
|
+
stopPolling();
|
|
896
|
+
// Request fresh health
|
|
897
|
+
ws.send(JSON.stringify({ type: 'health' }));
|
|
898
|
+
};
|
|
899
|
+
|
|
900
|
+
ws.onclose = function() {
|
|
901
|
+
$liveDot.classList.add('disconnected');
|
|
902
|
+
$liveDot.title = 'WebSocket disconnected \u2014 reconnecting...';
|
|
903
|
+
startPolling();
|
|
904
|
+
setTimeout(connectWS, reconnectDelay);
|
|
905
|
+
reconnectDelay = Math.min(reconnectDelay * 1.5, MAX_RECONNECT);
|
|
906
|
+
};
|
|
907
|
+
|
|
908
|
+
ws.onerror = function() { ws.close(); };
|
|
909
|
+
|
|
910
|
+
ws.onmessage = function(ev) {
|
|
911
|
+
var msg;
|
|
912
|
+
try { msg = JSON.parse(ev.data); } catch(e) { return; }
|
|
913
|
+
|
|
914
|
+
switch (msg.type) {
|
|
915
|
+
case 'tick_result':
|
|
916
|
+
updateKPIs({ health: msg.health, tick: msg.tick });
|
|
917
|
+
if (msg.alerts) renderAlerts(msg.alerts);
|
|
918
|
+
// Refresh charts
|
|
919
|
+
fetchJSON('/metrics').then(function(data) {
|
|
920
|
+
if (data.history) updateChartsFromHistory(data.history);
|
|
921
|
+
if (data.latest) renderPersonas(data.latest.personaDistribution);
|
|
922
|
+
}).catch(function() {});
|
|
923
|
+
break;
|
|
924
|
+
|
|
925
|
+
case 'health_result':
|
|
926
|
+
updateKPIs(msg);
|
|
927
|
+
break;
|
|
928
|
+
|
|
929
|
+
case 'advisor_action':
|
|
930
|
+
if (msg.action === 'approved' || msg.action === 'rejected') {
|
|
931
|
+
pendingDecisions = pendingDecisions.filter(function(d) {
|
|
932
|
+
return d.id !== msg.decisionId;
|
|
933
|
+
});
|
|
934
|
+
$pendingCount.textContent = pendingDecisions.length;
|
|
935
|
+
}
|
|
936
|
+
break;
|
|
937
|
+
}
|
|
938
|
+
};
|
|
939
|
+
}
|
|
940
|
+
|
|
941
|
+
// \u2500\u2500 Advisor actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
942
|
+
window._approve = function(id) {
|
|
943
|
+
postJSON('/approve', { decisionId: id }).then(function(data) {
|
|
944
|
+
if (data.ok) {
|
|
945
|
+
addTerminalLine('<span class="t-tick">[Advisor]</span> <span class="t-ok">\\u2705 Approved ' + id + '</span>');
|
|
946
|
+
}
|
|
947
|
+
}).catch(function() {});
|
|
948
|
+
};
|
|
949
|
+
|
|
950
|
+
window._reject = function(id) {
|
|
951
|
+
var reason = prompt('Rejection reason (optional):');
|
|
952
|
+
postJSON('/reject', { decisionId: id, reason: reason || undefined }).then(function(data) {
|
|
953
|
+
if (data.ok) {
|
|
954
|
+
addTerminalLine('<span class="t-tick">[Advisor]</span> <span class="t-fail">\\u274c Rejected ' + id + '</span>');
|
|
955
|
+
}
|
|
956
|
+
}).catch(function() {});
|
|
957
|
+
};
|
|
958
|
+
|
|
959
|
+
// \u2500\u2500 Init \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
|
|
960
|
+
initCharts();
|
|
961
|
+
loadInitialData();
|
|
962
|
+
connectWS();
|
|
963
|
+
|
|
964
|
+
})();
|
|
965
|
+
</script>
|
|
966
|
+
</body>
|
|
967
|
+
</html>`;
|
|
968
|
+
}
|
|
969
|
+
|
|
970
|
+
// src/routes.ts
|
|
32
971
|
function setCorsHeaders(res, origin) {
|
|
33
972
|
res.setHeader("Access-Control-Allow-Origin", origin);
|
|
34
973
|
res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
|
|
@@ -218,6 +1157,111 @@ function createRouteHandler(server2) {
|
|
|
218
1157
|
}, cors);
|
|
219
1158
|
return;
|
|
220
1159
|
}
|
|
1160
|
+
if (path === "/" && method === "GET" && server2.serveDashboard) {
|
|
1161
|
+
setCorsHeaders(res, cors);
|
|
1162
|
+
res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
|
|
1163
|
+
res.end(getDashboardHtml());
|
|
1164
|
+
return;
|
|
1165
|
+
}
|
|
1166
|
+
if (path === "/metrics" && method === "GET") {
|
|
1167
|
+
const agentE = server2.getAgentE();
|
|
1168
|
+
const latest = agentE.store.latest();
|
|
1169
|
+
const history = agentE.store.recentHistory(100);
|
|
1170
|
+
json(res, 200, { latest, history }, cors);
|
|
1171
|
+
return;
|
|
1172
|
+
}
|
|
1173
|
+
if (path === "/metrics/personas" && method === "GET") {
|
|
1174
|
+
const agentE = server2.getAgentE();
|
|
1175
|
+
const latest = agentE.store.latest();
|
|
1176
|
+
const dist = latest.personaDistribution || {};
|
|
1177
|
+
const total = Object.values(dist).reduce((s, v) => s + v, 0);
|
|
1178
|
+
json(res, 200, { distribution: dist, total }, cors);
|
|
1179
|
+
return;
|
|
1180
|
+
}
|
|
1181
|
+
if (path === "/approve" && method === "POST") {
|
|
1182
|
+
const body = await readBody(req);
|
|
1183
|
+
let parsed;
|
|
1184
|
+
try {
|
|
1185
|
+
parsed = JSON.parse(body);
|
|
1186
|
+
} catch {
|
|
1187
|
+
json(res, 400, { error: "Invalid JSON" }, cors);
|
|
1188
|
+
return;
|
|
1189
|
+
}
|
|
1190
|
+
const payload = parsed;
|
|
1191
|
+
const decisionId = payload["decisionId"];
|
|
1192
|
+
if (!decisionId) {
|
|
1193
|
+
json(res, 400, { error: "missing_decision_id" }, cors);
|
|
1194
|
+
return;
|
|
1195
|
+
}
|
|
1196
|
+
const agentE = server2.getAgentE();
|
|
1197
|
+
if (agentE.getMode() !== "advisor") {
|
|
1198
|
+
json(res, 400, { error: "not_in_advisor_mode" }, cors);
|
|
1199
|
+
return;
|
|
1200
|
+
}
|
|
1201
|
+
const entry = agentE.log.getById(decisionId);
|
|
1202
|
+
if (!entry) {
|
|
1203
|
+
json(res, 404, { error: "decision_not_found" }, cors);
|
|
1204
|
+
return;
|
|
1205
|
+
}
|
|
1206
|
+
if (entry.result !== "skipped_override") {
|
|
1207
|
+
json(res, 409, { error: "decision_not_pending", currentResult: entry.result }, cors);
|
|
1208
|
+
return;
|
|
1209
|
+
}
|
|
1210
|
+
await agentE.apply(entry.plan);
|
|
1211
|
+
agentE.log.updateResult(decisionId, "applied");
|
|
1212
|
+
server2.broadcast({ type: "advisor_action", action: "approved", decisionId });
|
|
1213
|
+
json(res, 200, {
|
|
1214
|
+
ok: true,
|
|
1215
|
+
parameter: entry.plan.parameter,
|
|
1216
|
+
value: entry.plan.targetValue
|
|
1217
|
+
}, cors);
|
|
1218
|
+
return;
|
|
1219
|
+
}
|
|
1220
|
+
if (path === "/reject" && method === "POST") {
|
|
1221
|
+
const body = await readBody(req);
|
|
1222
|
+
let parsed;
|
|
1223
|
+
try {
|
|
1224
|
+
parsed = JSON.parse(body);
|
|
1225
|
+
} catch {
|
|
1226
|
+
json(res, 400, { error: "Invalid JSON" }, cors);
|
|
1227
|
+
return;
|
|
1228
|
+
}
|
|
1229
|
+
const payload = parsed;
|
|
1230
|
+
const decisionId = payload["decisionId"];
|
|
1231
|
+
const reason = payload["reason"] || void 0;
|
|
1232
|
+
if (!decisionId) {
|
|
1233
|
+
json(res, 400, { error: "missing_decision_id" }, cors);
|
|
1234
|
+
return;
|
|
1235
|
+
}
|
|
1236
|
+
const agentE = server2.getAgentE();
|
|
1237
|
+
if (agentE.getMode() !== "advisor") {
|
|
1238
|
+
json(res, 400, { error: "not_in_advisor_mode" }, cors);
|
|
1239
|
+
return;
|
|
1240
|
+
}
|
|
1241
|
+
const entry = agentE.log.getById(decisionId);
|
|
1242
|
+
if (!entry) {
|
|
1243
|
+
json(res, 404, { error: "decision_not_found" }, cors);
|
|
1244
|
+
return;
|
|
1245
|
+
}
|
|
1246
|
+
if (entry.result !== "skipped_override") {
|
|
1247
|
+
json(res, 409, { error: "decision_not_pending", currentResult: entry.result }, cors);
|
|
1248
|
+
return;
|
|
1249
|
+
}
|
|
1250
|
+
agentE.log.updateResult(decisionId, "rejected", reason);
|
|
1251
|
+
server2.broadcast({ type: "advisor_action", action: "rejected", decisionId, reason });
|
|
1252
|
+
json(res, 200, { ok: true, decisionId }, cors);
|
|
1253
|
+
return;
|
|
1254
|
+
}
|
|
1255
|
+
if (path === "/pending" && method === "GET") {
|
|
1256
|
+
const agentE = server2.getAgentE();
|
|
1257
|
+
const pending = agentE.log.query({ result: "skipped_override" });
|
|
1258
|
+
json(res, 200, {
|
|
1259
|
+
mode: agentE.getMode(),
|
|
1260
|
+
pending,
|
|
1261
|
+
count: pending.length
|
|
1262
|
+
}, cors);
|
|
1263
|
+
return;
|
|
1264
|
+
}
|
|
221
1265
|
json(res, 404, { error: "Not found" }, cors);
|
|
222
1266
|
} catch (err) {
|
|
223
1267
|
console.error("[AgentE Server] Unhandled route error:", err);
|
|
@@ -355,9 +1399,20 @@ function createWebSocketHandler(httpServer, server2) {
|
|
|
355
1399
|
}
|
|
356
1400
|
});
|
|
357
1401
|
});
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
wss.
|
|
1402
|
+
function broadcast(data) {
|
|
1403
|
+
const payload = JSON.stringify(data);
|
|
1404
|
+
for (const ws of wss.clients) {
|
|
1405
|
+
if (ws.readyState === import_ws.WebSocket.OPEN) {
|
|
1406
|
+
ws.send(payload);
|
|
1407
|
+
}
|
|
1408
|
+
}
|
|
1409
|
+
}
|
|
1410
|
+
return {
|
|
1411
|
+
cleanup: () => {
|
|
1412
|
+
clearInterval(heartbeatInterval);
|
|
1413
|
+
wss.close();
|
|
1414
|
+
},
|
|
1415
|
+
broadcast
|
|
361
1416
|
};
|
|
362
1417
|
}
|
|
363
1418
|
|
|
@@ -368,11 +1423,12 @@ var AgentEServer = class {
|
|
|
368
1423
|
this.adjustmentQueue = [];
|
|
369
1424
|
this.alerts = [];
|
|
370
1425
|
this.startedAt = Date.now();
|
|
371
|
-
this.
|
|
1426
|
+
this.wsHandle = null;
|
|
372
1427
|
this.port = config.port ?? 3100;
|
|
373
1428
|
this.host = config.host ?? "0.0.0.0";
|
|
374
1429
|
this.validateState = config.validateState ?? true;
|
|
375
1430
|
this.corsOrigin = config.corsOrigin ?? "*";
|
|
1431
|
+
this.serveDashboard = config.serveDashboard ?? true;
|
|
376
1432
|
const adapter = {
|
|
377
1433
|
getState: () => {
|
|
378
1434
|
if (!this.lastState) {
|
|
@@ -421,7 +1477,7 @@ var AgentEServer = class {
|
|
|
421
1477
|
this.server = http.createServer(routeHandler);
|
|
422
1478
|
}
|
|
423
1479
|
async start() {
|
|
424
|
-
this.
|
|
1480
|
+
this.wsHandle = createWebSocketHandler(this.server, this);
|
|
425
1481
|
return new Promise((resolve) => {
|
|
426
1482
|
this.server.listen(this.port, this.host, () => {
|
|
427
1483
|
const addr = this.getAddress();
|
|
@@ -432,7 +1488,7 @@ var AgentEServer = class {
|
|
|
432
1488
|
}
|
|
433
1489
|
async stop() {
|
|
434
1490
|
this.agentE.stop();
|
|
435
|
-
if (this.
|
|
1491
|
+
if (this.wsHandle) this.wsHandle.cleanup();
|
|
436
1492
|
return new Promise((resolve, reject) => {
|
|
437
1493
|
this.server.close((err) => {
|
|
438
1494
|
if (err) reject(err);
|
|
@@ -526,6 +1582,9 @@ var AgentEServer = class {
|
|
|
526
1582
|
constrain(param, bounds) {
|
|
527
1583
|
this.agentE.constrain(param, bounds);
|
|
528
1584
|
}
|
|
1585
|
+
broadcast(data) {
|
|
1586
|
+
if (this.wsHandle) this.wsHandle.broadcast(data);
|
|
1587
|
+
}
|
|
529
1588
|
};
|
|
530
1589
|
|
|
531
1590
|
// src/cli.ts
|