pikakit 1.0.13 → 1.0.15
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/bin/cli.mjs +2 -2
- package/bin/install.mjs +26 -0
- package/bin/kit.js +1 -1
- package/lib/agent-cli/dashboard/index.html +845 -231
- package/lib/agent-cli/lib/dashboard-data.js +79 -242
- package/lib/agent-cli/lib/ui/dashboard-ui.js +20 -30
- package/lib/agent-cli/scripts/dashboard-server.js +324 -0
- package/package.json +2 -2
- package/lib/agent-cli/scripts/dashboard_server.js +0 -344
|
@@ -4,8 +4,23 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>
|
|
7
|
+
<title>PikaKit Dashboard v7.0</title>
|
|
8
8
|
<style>
|
|
9
|
+
:root {
|
|
10
|
+
--bg-primary: #0a0a0f;
|
|
11
|
+
--bg-secondary: #12121a;
|
|
12
|
+
--bg-card: rgba(255, 255, 255, 0.03);
|
|
13
|
+
--border-color: rgba(255, 255, 255, 0.08);
|
|
14
|
+
--text-primary: #f0f0f5;
|
|
15
|
+
--text-secondary: #8888aa;
|
|
16
|
+
--accent-cyan: #00d4ff;
|
|
17
|
+
--accent-green: #00ff88;
|
|
18
|
+
--accent-yellow: #ffcc00;
|
|
19
|
+
--accent-red: #ff4466;
|
|
20
|
+
--gradient-primary: linear-gradient(135deg, #00d4ff, #00ff88);
|
|
21
|
+
--gradient-bg: linear-gradient(180deg, #0a0a0f 0%, #0f0f1a 100%);
|
|
22
|
+
}
|
|
23
|
+
|
|
9
24
|
* {
|
|
10
25
|
margin: 0;
|
|
11
26
|
padding: 0;
|
|
@@ -13,115 +28,193 @@
|
|
|
13
28
|
}
|
|
14
29
|
|
|
15
30
|
body {
|
|
16
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
17
|
-
background:
|
|
31
|
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
32
|
+
background: var(--gradient-bg);
|
|
18
33
|
min-height: 100vh;
|
|
19
|
-
color:
|
|
34
|
+
color: var(--text-primary);
|
|
35
|
+
line-height: 1.6;
|
|
20
36
|
}
|
|
21
37
|
|
|
22
38
|
.container {
|
|
23
|
-
max-width:
|
|
39
|
+
max-width: 1600px;
|
|
24
40
|
margin: 0 auto;
|
|
25
|
-
padding:
|
|
41
|
+
padding: 24px;
|
|
26
42
|
}
|
|
27
43
|
|
|
44
|
+
/* Header */
|
|
28
45
|
header {
|
|
29
46
|
display: flex;
|
|
30
47
|
justify-content: space-between;
|
|
31
48
|
align-items: center;
|
|
32
49
|
padding: 20px 0;
|
|
33
|
-
|
|
34
|
-
margin-bottom: 30px;
|
|
50
|
+
margin-bottom: 32px;
|
|
35
51
|
}
|
|
36
52
|
|
|
37
|
-
|
|
38
|
-
font-size: 24px;
|
|
39
|
-
font-weight: 600;
|
|
53
|
+
.logo {
|
|
40
54
|
display: flex;
|
|
41
55
|
align-items: center;
|
|
42
|
-
gap:
|
|
56
|
+
gap: 12px;
|
|
43
57
|
}
|
|
44
58
|
|
|
45
|
-
|
|
46
|
-
|
|
59
|
+
.logo-icon {
|
|
60
|
+
font-size: 32px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.logo h1 {
|
|
64
|
+
font-size: 24px;
|
|
65
|
+
font-weight: 700;
|
|
66
|
+
background: var(--gradient-primary);
|
|
47
67
|
-webkit-background-clip: text;
|
|
48
68
|
background-clip: text;
|
|
49
69
|
-webkit-text-fill-color: transparent;
|
|
50
70
|
}
|
|
51
71
|
|
|
52
|
-
.status-
|
|
53
|
-
|
|
72
|
+
.status-bar {
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
gap: 16px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.version-badge {
|
|
79
|
+
padding: 8px 16px;
|
|
54
80
|
border-radius: 20px;
|
|
55
81
|
font-size: 12px;
|
|
56
82
|
font-weight: 600;
|
|
57
|
-
background: rgba(0,
|
|
58
|
-
color:
|
|
83
|
+
background: rgba(0, 212, 255, 0.15);
|
|
84
|
+
color: var(--accent-cyan);
|
|
85
|
+
border: 1px solid rgba(0, 212, 255, 0.3);
|
|
59
86
|
}
|
|
60
87
|
|
|
61
|
-
.
|
|
88
|
+
.connection-status {
|
|
89
|
+
display: flex;
|
|
90
|
+
align-items: center;
|
|
91
|
+
gap: 8px;
|
|
92
|
+
font-size: 13px;
|
|
93
|
+
color: var(--text-secondary);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.connection-dot {
|
|
97
|
+
width: 8px;
|
|
98
|
+
height: 8px;
|
|
99
|
+
border-radius: 50%;
|
|
100
|
+
background: var(--accent-green);
|
|
101
|
+
animation: pulse 2s infinite;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
@keyframes pulse {
|
|
105
|
+
|
|
106
|
+
0%,
|
|
107
|
+
100% {
|
|
108
|
+
opacity: 1;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
50% {
|
|
112
|
+
opacity: 0.5;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* Grid Layouts */
|
|
117
|
+
.grid-4 {
|
|
62
118
|
display: grid;
|
|
63
|
-
grid-template-columns: repeat(
|
|
119
|
+
grid-template-columns: repeat(4, 1fr);
|
|
64
120
|
gap: 20px;
|
|
65
|
-
margin-bottom:
|
|
121
|
+
margin-bottom: 24px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.grid-3 {
|
|
125
|
+
display: grid;
|
|
126
|
+
grid-template-columns: repeat(3, 1fr);
|
|
127
|
+
gap: 20px;
|
|
128
|
+
margin-bottom: 24px;
|
|
66
129
|
}
|
|
67
130
|
|
|
68
131
|
.grid-2 {
|
|
69
|
-
|
|
132
|
+
display: grid;
|
|
133
|
+
grid-template-columns: repeat(2, 1fr);
|
|
134
|
+
gap: 20px;
|
|
135
|
+
margin-bottom: 24px;
|
|
70
136
|
}
|
|
71
137
|
|
|
138
|
+
/* Cards */
|
|
72
139
|
.card {
|
|
73
|
-
background:
|
|
140
|
+
background: var(--bg-card);
|
|
74
141
|
border-radius: 16px;
|
|
75
142
|
padding: 24px;
|
|
76
|
-
border: 1px solid
|
|
77
|
-
backdrop-filter: blur(
|
|
143
|
+
border: 1px solid var(--border-color);
|
|
144
|
+
backdrop-filter: blur(20px);
|
|
145
|
+
transition: all 0.3s ease;
|
|
78
146
|
}
|
|
79
147
|
|
|
80
|
-
.card
|
|
81
|
-
|
|
148
|
+
.card:hover {
|
|
149
|
+
border-color: rgba(0, 212, 255, 0.3);
|
|
150
|
+
transform: translateY(-2px);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.card-header {
|
|
154
|
+
display: flex;
|
|
155
|
+
justify-content: space-between;
|
|
156
|
+
align-items: center;
|
|
157
|
+
margin-bottom: 16px;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.card-title {
|
|
161
|
+
font-size: 11px;
|
|
82
162
|
text-transform: uppercase;
|
|
83
|
-
letter-spacing:
|
|
84
|
-
color:
|
|
85
|
-
|
|
163
|
+
letter-spacing: 1.5px;
|
|
164
|
+
color: var(--text-secondary);
|
|
165
|
+
font-weight: 600;
|
|
86
166
|
}
|
|
87
167
|
|
|
88
|
-
.
|
|
89
|
-
font-size:
|
|
90
|
-
|
|
91
|
-
|
|
168
|
+
.card-icon {
|
|
169
|
+
font-size: 20px;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* KPI Metrics */
|
|
173
|
+
.kpi-row {
|
|
174
|
+
display: flex;
|
|
175
|
+
align-items: baseline;
|
|
176
|
+
gap: 12px;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.kpi-value {
|
|
180
|
+
font-size: 42px;
|
|
181
|
+
font-weight: 800;
|
|
182
|
+
background: var(--gradient-primary);
|
|
92
183
|
-webkit-background-clip: text;
|
|
93
184
|
background-clip: text;
|
|
94
185
|
-webkit-text-fill-color: transparent;
|
|
186
|
+
line-height: 1.1;
|
|
95
187
|
}
|
|
96
188
|
|
|
97
|
-
.
|
|
98
|
-
font-size:
|
|
99
|
-
color:
|
|
100
|
-
margin-top:
|
|
189
|
+
.kpi-label {
|
|
190
|
+
font-size: 13px;
|
|
191
|
+
color: var(--text-secondary);
|
|
192
|
+
margin-top: 8px;
|
|
101
193
|
}
|
|
102
194
|
|
|
103
|
-
.
|
|
104
|
-
display: inline-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
195
|
+
.kpi-trend {
|
|
196
|
+
display: inline-flex;
|
|
197
|
+
align-items: center;
|
|
198
|
+
gap: 4px;
|
|
199
|
+
padding: 4px 10px;
|
|
200
|
+
border-radius: 12px;
|
|
201
|
+
font-size: 11px;
|
|
108
202
|
font-weight: 600;
|
|
109
|
-
margin-left: 8px;
|
|
110
203
|
}
|
|
111
204
|
|
|
112
|
-
.
|
|
113
|
-
background: rgba(0, 255, 136, 0.
|
|
114
|
-
color:
|
|
205
|
+
.trend-up {
|
|
206
|
+
background: rgba(0, 255, 136, 0.15);
|
|
207
|
+
color: var(--accent-green);
|
|
115
208
|
}
|
|
116
209
|
|
|
117
|
-
.
|
|
118
|
-
background: rgba(255,
|
|
119
|
-
color:
|
|
210
|
+
.trend-down {
|
|
211
|
+
background: rgba(255, 68, 102, 0.15);
|
|
212
|
+
color: var(--accent-red);
|
|
120
213
|
}
|
|
121
214
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
215
|
+
/* Progress Bar */
|
|
216
|
+
.progress-container {
|
|
217
|
+
margin-top: 16px;
|
|
125
218
|
}
|
|
126
219
|
|
|
127
220
|
.progress-bar {
|
|
@@ -129,252 +222,712 @@
|
|
|
129
222
|
background: rgba(255, 255, 255, 0.1);
|
|
130
223
|
border-radius: 3px;
|
|
131
224
|
overflow: hidden;
|
|
132
|
-
margin-top: 8px;
|
|
133
225
|
}
|
|
134
226
|
|
|
135
227
|
.progress-fill {
|
|
136
228
|
height: 100%;
|
|
137
|
-
background:
|
|
229
|
+
background: var(--gradient-primary);
|
|
138
230
|
border-radius: 3px;
|
|
139
231
|
transition: width 0.5s ease;
|
|
140
232
|
}
|
|
141
233
|
|
|
142
|
-
|
|
234
|
+
/* Counter Cards */
|
|
235
|
+
.counter-value {
|
|
236
|
+
font-size: 36px;
|
|
237
|
+
font-weight: 700;
|
|
238
|
+
color: var(--text-primary);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* Lists */
|
|
242
|
+
.list {
|
|
143
243
|
list-style: none;
|
|
144
244
|
}
|
|
145
245
|
|
|
146
|
-
.
|
|
246
|
+
.list-item {
|
|
247
|
+
display: flex;
|
|
248
|
+
justify-content: space-between;
|
|
249
|
+
align-items: center;
|
|
250
|
+
padding: 14px 0;
|
|
251
|
+
border-bottom: 1px solid var(--border-color);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.list-item:last-child {
|
|
255
|
+
border-bottom: none;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.list-item-content {
|
|
147
259
|
display: flex;
|
|
148
260
|
align-items: center;
|
|
149
261
|
gap: 12px;
|
|
150
|
-
|
|
151
|
-
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.list-item-icon {
|
|
265
|
+
width: 36px;
|
|
266
|
+
height: 36px;
|
|
267
|
+
border-radius: 10px;
|
|
268
|
+
display: flex;
|
|
269
|
+
align-items: center;
|
|
270
|
+
justify-content: center;
|
|
271
|
+
font-size: 16px;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.list-item-text h4 {
|
|
275
|
+
font-size: 14px;
|
|
276
|
+
font-weight: 500;
|
|
277
|
+
margin-bottom: 2px;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.list-item-text p {
|
|
281
|
+
font-size: 12px;
|
|
282
|
+
color: var(--text-secondary);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
/* Badges */
|
|
286
|
+
.badge {
|
|
287
|
+
padding: 4px 10px;
|
|
152
288
|
border-radius: 8px;
|
|
153
|
-
|
|
154
|
-
|
|
289
|
+
font-size: 11px;
|
|
290
|
+
font-weight: 600;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.badge-success {
|
|
294
|
+
background: rgba(0, 255, 136, 0.15);
|
|
295
|
+
color: var(--accent-green);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.badge-warning {
|
|
299
|
+
background: rgba(255, 204, 0, 0.15);
|
|
300
|
+
color: var(--accent-yellow);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.badge-danger {
|
|
304
|
+
background: rgba(255, 68, 102, 0.15);
|
|
305
|
+
color: var(--accent-red);
|
|
155
306
|
}
|
|
156
307
|
|
|
157
|
-
.
|
|
158
|
-
background: rgba(0,
|
|
159
|
-
|
|
308
|
+
.badge-info {
|
|
309
|
+
background: rgba(0, 212, 255, 0.15);
|
|
310
|
+
color: var(--accent-cyan);
|
|
160
311
|
}
|
|
161
312
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
313
|
+
/* Skills Grid */
|
|
314
|
+
.skills-grid {
|
|
315
|
+
display: grid;
|
|
316
|
+
grid-template-columns: repeat(2, 1fr);
|
|
317
|
+
gap: 12px;
|
|
165
318
|
}
|
|
166
319
|
|
|
167
320
|
.skill-item {
|
|
168
321
|
display: flex;
|
|
169
322
|
justify-content: space-between;
|
|
170
|
-
|
|
171
|
-
|
|
323
|
+
align-items: center;
|
|
324
|
+
padding: 12px 16px;
|
|
325
|
+
background: rgba(255, 255, 255, 0.02);
|
|
326
|
+
border-radius: 10px;
|
|
327
|
+
border: 1px solid var(--border-color);
|
|
172
328
|
}
|
|
173
329
|
|
|
174
330
|
.skill-name {
|
|
175
331
|
font-size: 13px;
|
|
332
|
+
font-weight: 500;
|
|
176
333
|
}
|
|
177
334
|
|
|
178
335
|
.skill-confidence {
|
|
179
336
|
font-size: 12px;
|
|
180
|
-
color:
|
|
337
|
+
color: var(--accent-green);
|
|
338
|
+
font-weight: 600;
|
|
181
339
|
}
|
|
182
340
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
341
|
+
/* Reinforcement Stats */
|
|
342
|
+
.reinforcement-grid {
|
|
343
|
+
display: grid;
|
|
344
|
+
grid-template-columns: repeat(3, 1fr);
|
|
345
|
+
gap: 16px;
|
|
346
|
+
margin-top: 16px;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.reinforce-stat {
|
|
350
|
+
text-align: center;
|
|
351
|
+
padding: 16px;
|
|
352
|
+
background: rgba(255, 255, 255, 0.02);
|
|
353
|
+
border-radius: 12px;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.reinforce-value {
|
|
357
|
+
font-size: 28px;
|
|
358
|
+
font-weight: 700;
|
|
359
|
+
background: var(--gradient-primary);
|
|
360
|
+
-webkit-background-clip: text;
|
|
361
|
+
background-clip: text;
|
|
362
|
+
-webkit-text-fill-color: transparent;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.reinforce-label {
|
|
366
|
+
font-size: 11px;
|
|
367
|
+
color: var(--text-secondary);
|
|
368
|
+
margin-top: 4px;
|
|
369
|
+
text-transform: uppercase;
|
|
370
|
+
letter-spacing: 1px;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
/* Chart Container */
|
|
374
|
+
.chart-container {
|
|
375
|
+
height: 200px;
|
|
376
|
+
margin-top: 16px;
|
|
377
|
+
position: relative;
|
|
191
378
|
}
|
|
192
379
|
|
|
193
380
|
.bar-chart {
|
|
194
381
|
display: flex;
|
|
195
382
|
align-items: flex-end;
|
|
196
383
|
gap: 8px;
|
|
197
|
-
height:
|
|
198
|
-
|
|
384
|
+
height: 160px;
|
|
385
|
+
padding-top: 16px;
|
|
199
386
|
}
|
|
200
387
|
|
|
201
388
|
.bar {
|
|
202
389
|
flex: 1;
|
|
203
|
-
background:
|
|
204
|
-
border-radius:
|
|
205
|
-
min-height:
|
|
390
|
+
background: var(--gradient-primary);
|
|
391
|
+
border-radius: 6px 6px 0 0;
|
|
392
|
+
min-height: 8px;
|
|
206
393
|
position: relative;
|
|
394
|
+
transition: all 0.3s ease;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
.bar:hover {
|
|
398
|
+
opacity: 0.8;
|
|
399
|
+
transform: scaleY(1.02);
|
|
207
400
|
}
|
|
208
401
|
|
|
209
402
|
.bar-label {
|
|
210
403
|
position: absolute;
|
|
211
|
-
bottom: -
|
|
404
|
+
bottom: -24px;
|
|
212
405
|
left: 50%;
|
|
213
406
|
transform: translateX(-50%);
|
|
214
407
|
font-size: 10px;
|
|
215
|
-
color:
|
|
408
|
+
color: var(--text-secondary);
|
|
409
|
+
white-space: nowrap;
|
|
216
410
|
}
|
|
217
411
|
|
|
218
|
-
|
|
219
|
-
|
|
412
|
+
/* Controls */
|
|
413
|
+
.controls {
|
|
414
|
+
display: flex;
|
|
415
|
+
gap: 12px;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.btn {
|
|
419
|
+
padding: 12px 24px;
|
|
220
420
|
border: none;
|
|
221
|
-
border-radius:
|
|
421
|
+
border-radius: 10px;
|
|
222
422
|
cursor: pointer;
|
|
223
423
|
font-weight: 600;
|
|
224
|
-
|
|
225
|
-
color: #1a1a2e;
|
|
424
|
+
font-size: 13px;
|
|
226
425
|
transition: all 0.2s ease;
|
|
227
426
|
}
|
|
228
427
|
|
|
229
|
-
|
|
428
|
+
.btn-primary {
|
|
429
|
+
background: var(--gradient-primary);
|
|
430
|
+
color: var(--bg-primary);
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
.btn-primary:hover {
|
|
230
434
|
transform: translateY(-2px);
|
|
231
|
-
box-shadow: 0
|
|
435
|
+
box-shadow: 0 8px 24px rgba(0, 212, 255, 0.3);
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.btn-secondary {
|
|
439
|
+
background: rgba(255, 255, 255, 0.08);
|
|
440
|
+
color: var(--text-primary);
|
|
441
|
+
border: 1px solid var(--border-color);
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.btn-secondary:hover {
|
|
445
|
+
background: rgba(255, 255, 255, 0.12);
|
|
232
446
|
}
|
|
233
447
|
|
|
234
|
-
|
|
448
|
+
/* Footer */
|
|
449
|
+
footer {
|
|
235
450
|
text-align: center;
|
|
236
451
|
padding: 40px 0;
|
|
237
|
-
color:
|
|
452
|
+
color: var(--text-secondary);
|
|
238
453
|
font-size: 13px;
|
|
454
|
+
border-top: 1px solid var(--border-color);
|
|
455
|
+
margin-top: 40px;
|
|
239
456
|
}
|
|
240
457
|
|
|
241
|
-
|
|
242
|
-
|
|
458
|
+
footer span {
|
|
459
|
+
background: var(--gradient-primary);
|
|
460
|
+
-webkit-background-clip: text;
|
|
461
|
+
background-clip: text;
|
|
462
|
+
-webkit-text-fill-color: transparent;
|
|
463
|
+
font-weight: 600;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
/* Responsive */
|
|
467
|
+
@media (max-width: 1200px) {
|
|
468
|
+
.grid-4 {
|
|
469
|
+
grid-template-columns: repeat(2, 1fr);
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
.grid-3 {
|
|
473
|
+
grid-template-columns: repeat(2, 1fr);
|
|
474
|
+
}
|
|
243
475
|
}
|
|
244
476
|
|
|
245
477
|
@media (max-width: 768px) {
|
|
246
|
-
|
|
247
|
-
|
|
478
|
+
|
|
479
|
+
.grid-4,
|
|
480
|
+
.grid-3,
|
|
481
|
+
.grid-2 {
|
|
482
|
+
grid-template-columns: 1fr;
|
|
248
483
|
}
|
|
249
484
|
|
|
250
|
-
.
|
|
251
|
-
font-size:
|
|
485
|
+
.kpi-value {
|
|
486
|
+
font-size: 32px;
|
|
252
487
|
}
|
|
488
|
+
|
|
489
|
+
header {
|
|
490
|
+
flex-direction: column;
|
|
491
|
+
gap: 16px;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
.skills-grid {
|
|
495
|
+
grid-template-columns: 1fr;
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
/* Loading State */
|
|
500
|
+
.loading {
|
|
501
|
+
opacity: 0.6;
|
|
502
|
+
pointer-events: none;
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
.skeleton {
|
|
506
|
+
background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75%);
|
|
507
|
+
background-size: 200% 100%;
|
|
508
|
+
animation: shimmer 1.5s infinite;
|
|
509
|
+
border-radius: 4px;
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
@keyframes shimmer {
|
|
513
|
+
0% {
|
|
514
|
+
background-position: 200% 0;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
100% {
|
|
518
|
+
background-position: -200% 0;
|
|
519
|
+
}
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
/* Modal */
|
|
523
|
+
.modal-overlay {
|
|
524
|
+
position: fixed;
|
|
525
|
+
top: 0;
|
|
526
|
+
left: 0;
|
|
527
|
+
right: 0;
|
|
528
|
+
bottom: 0;
|
|
529
|
+
background: rgba(0, 0, 0, 0.7);
|
|
530
|
+
backdrop-filter: blur(4px);
|
|
531
|
+
display: flex;
|
|
532
|
+
align-items: center;
|
|
533
|
+
justify-content: center;
|
|
534
|
+
z-index: 1000;
|
|
535
|
+
opacity: 0;
|
|
536
|
+
visibility: hidden;
|
|
537
|
+
transition: all 0.3s ease;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
.modal-overlay.show {
|
|
541
|
+
opacity: 1;
|
|
542
|
+
visibility: visible;
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
.modal {
|
|
546
|
+
background: var(--bg-secondary);
|
|
547
|
+
border: 1px solid var(--border-color);
|
|
548
|
+
border-radius: 20px;
|
|
549
|
+
padding: 32px;
|
|
550
|
+
max-width: 400px;
|
|
551
|
+
width: 90%;
|
|
552
|
+
text-align: center;
|
|
553
|
+
transform: scale(0.9);
|
|
554
|
+
transition: transform 0.3s ease;
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
.modal-overlay.show .modal {
|
|
558
|
+
transform: scale(1);
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
.modal-icon {
|
|
562
|
+
font-size: 48px;
|
|
563
|
+
margin-bottom: 16px;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
.modal-title {
|
|
567
|
+
font-size: 20px;
|
|
568
|
+
font-weight: 700;
|
|
569
|
+
margin-bottom: 8px;
|
|
570
|
+
background: var(--gradient-primary);
|
|
571
|
+
-webkit-background-clip: text;
|
|
572
|
+
background-clip: text;
|
|
573
|
+
-webkit-text-fill-color: transparent;
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
.modal-message {
|
|
577
|
+
color: var(--text-secondary);
|
|
578
|
+
margin-bottom: 24px;
|
|
579
|
+
line-height: 1.6;
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
.modal-btn {
|
|
583
|
+
padding: 12px 32px;
|
|
584
|
+
border: none;
|
|
585
|
+
border-radius: 10px;
|
|
586
|
+
cursor: pointer;
|
|
587
|
+
font-weight: 600;
|
|
588
|
+
font-size: 14px;
|
|
589
|
+
background: var(--gradient-primary);
|
|
590
|
+
color: var(--bg-primary);
|
|
591
|
+
transition: all 0.2s ease;
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
.modal-btn:hover {
|
|
595
|
+
transform: translateY(-2px);
|
|
596
|
+
box-shadow: 0 8px 24px rgba(0, 212, 255, 0.3);
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
/* Onboarding Banner */
|
|
600
|
+
.onboarding-banner {
|
|
601
|
+
background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(0, 255, 136, 0.08));
|
|
602
|
+
border: 1px solid rgba(0, 212, 255, 0.2);
|
|
603
|
+
border-radius: 16px;
|
|
604
|
+
padding: 32px;
|
|
605
|
+
margin-bottom: 32px;
|
|
606
|
+
display: none;
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
.onboarding-banner.show {
|
|
610
|
+
display: block;
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
.onboarding-title {
|
|
614
|
+
font-size: 24px;
|
|
615
|
+
font-weight: 700;
|
|
616
|
+
margin-bottom: 8px;
|
|
617
|
+
background: var(--gradient-primary);
|
|
618
|
+
-webkit-background-clip: text;
|
|
619
|
+
background-clip: text;
|
|
620
|
+
-webkit-text-fill-color: transparent;
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
.onboarding-subtitle {
|
|
624
|
+
color: var(--text-secondary);
|
|
625
|
+
margin-bottom: 24px;
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
.onboarding-steps {
|
|
629
|
+
display: grid;
|
|
630
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
631
|
+
gap: 16px;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
.onboarding-step {
|
|
635
|
+
background: rgba(255, 255, 255, 0.03);
|
|
636
|
+
border: 1px solid var(--border-color);
|
|
637
|
+
border-radius: 12px;
|
|
638
|
+
padding: 20px;
|
|
639
|
+
transition: all 0.2s ease;
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
.onboarding-step:hover {
|
|
643
|
+
background: rgba(255, 255, 255, 0.06);
|
|
644
|
+
border-color: var(--accent-cyan);
|
|
645
|
+
transform: translateY(-2px);
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
.step-number {
|
|
649
|
+
width: 28px;
|
|
650
|
+
height: 28px;
|
|
651
|
+
border-radius: 50%;
|
|
652
|
+
background: var(--gradient-primary);
|
|
653
|
+
color: var(--bg-primary);
|
|
654
|
+
display: flex;
|
|
655
|
+
align-items: center;
|
|
656
|
+
justify-content: center;
|
|
657
|
+
font-weight: 700;
|
|
658
|
+
font-size: 14px;
|
|
659
|
+
margin-bottom: 12px;
|
|
660
|
+
}
|
|
661
|
+
|
|
662
|
+
.step-title {
|
|
663
|
+
font-weight: 600;
|
|
664
|
+
margin-bottom: 4px;
|
|
665
|
+
}
|
|
666
|
+
|
|
667
|
+
.step-desc {
|
|
668
|
+
font-size: 13px;
|
|
669
|
+
color: var(--text-secondary);
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
.step-command {
|
|
673
|
+
margin-top: 8px;
|
|
674
|
+
background: rgba(0, 0, 0, 0.3);
|
|
675
|
+
padding: 8px 12px;
|
|
676
|
+
border-radius: 6px;
|
|
677
|
+
font-family: monospace;
|
|
678
|
+
font-size: 12px;
|
|
679
|
+
color: var(--accent-cyan);
|
|
253
680
|
}
|
|
254
681
|
</style>
|
|
255
682
|
</head>
|
|
256
683
|
|
|
257
684
|
<body>
|
|
685
|
+
<!-- Modal Overlay -->
|
|
686
|
+
<div class="modal-overlay" id="modalOverlay" onclick="closeModal()">
|
|
687
|
+
<div class="modal" onclick="event.stopPropagation()">
|
|
688
|
+
<div class="modal-icon" id="modalIcon">📦</div>
|
|
689
|
+
<div class="modal-title" id="modalTitle">Export Coming Soon!</div>
|
|
690
|
+
<div class="modal-message" id="modalMessage">This feature is being built.</div>
|
|
691
|
+
<button class="modal-btn" onclick="closeModal()">Got it!</button>
|
|
692
|
+
</div>
|
|
693
|
+
</div>
|
|
694
|
+
|
|
258
695
|
<div class="container">
|
|
259
696
|
<header>
|
|
260
|
-
<
|
|
261
|
-
|
|
697
|
+
<div class="logo">
|
|
698
|
+
<span class="logo-icon">🧠</span>
|
|
699
|
+
<h1>PikaKit Dashboard</h1>
|
|
700
|
+
</div>
|
|
701
|
+
<div class="status-bar">
|
|
702
|
+
<span class="version-badge">⚡ v7.0</span>
|
|
703
|
+
<div class="connection-status">
|
|
704
|
+
<span class="connection-dot"></span>
|
|
705
|
+
<span id="connectionText">Connected</span>
|
|
706
|
+
</div>
|
|
707
|
+
</div>
|
|
262
708
|
</header>
|
|
263
709
|
|
|
710
|
+
<!-- Onboarding Banner (shown for new users) -->
|
|
711
|
+
<div class="onboarding-banner" id="onboardingBanner">
|
|
712
|
+
<div class="onboarding-title">🚀 Welcome to PikaKit!</div>
|
|
713
|
+
<div class="onboarding-subtitle">Start using the AI coding assistant to see your learning metrics here.
|
|
714
|
+
</div>
|
|
715
|
+
<div class="onboarding-steps">
|
|
716
|
+
<div class="onboarding-step">
|
|
717
|
+
<div class="step-number">1</div>
|
|
718
|
+
<div class="step-title">Run Agent</div>
|
|
719
|
+
<div class="step-desc">Start the interactive AI assistant</div>
|
|
720
|
+
<div class="step-command">npx agent</div>
|
|
721
|
+
</div>
|
|
722
|
+
<div class="onboarding-step">
|
|
723
|
+
<div class="step-number">2</div>
|
|
724
|
+
<div class="step-title">View Lessons</div>
|
|
725
|
+
<div class="step-desc">See patterns learned from your tasks</div>
|
|
726
|
+
<div class="step-command">Agent → Lessons</div>
|
|
727
|
+
</div>
|
|
728
|
+
<div class="onboarding-step">
|
|
729
|
+
<div class="step-number">3</div>
|
|
730
|
+
<div class="step-title">Check Insights</div>
|
|
731
|
+
<div class="step-desc">Analyze your coding patterns & stats</div>
|
|
732
|
+
<div class="step-command">Agent → Insights</div>
|
|
733
|
+
</div>
|
|
734
|
+
<div class="onboarding-step">
|
|
735
|
+
<div class="step-number">4</div>
|
|
736
|
+
<div class="step-title">Track Progress</div>
|
|
737
|
+
<div class="step-desc">Watch your metrics improve over time</div>
|
|
738
|
+
<div class="step-command">Agent → Dashboard</div>
|
|
739
|
+
</div>
|
|
740
|
+
</div>
|
|
741
|
+
</div>
|
|
742
|
+
|
|
264
743
|
<!-- Core KPIs -->
|
|
265
|
-
<div class="grid">
|
|
744
|
+
<div class="grid-4">
|
|
266
745
|
<div class="card">
|
|
267
|
-
<
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
746
|
+
<div class="card-header">
|
|
747
|
+
<span class="card-title">Task Success Rate</span>
|
|
748
|
+
<span class="card-icon">✅</span>
|
|
749
|
+
</div>
|
|
750
|
+
<div class="kpi-row">
|
|
751
|
+
<div class="kpi-value" id="taskSuccessRate">0%</div>
|
|
752
|
+
<span class="kpi-trend trend-up" id="successTrend">↑ 0%</span>
|
|
753
|
+
</div>
|
|
754
|
+
<div class="progress-container">
|
|
755
|
+
<div class="progress-bar">
|
|
756
|
+
<div class="progress-fill" id="successFill" style="width: 0%"></div>
|
|
757
|
+
</div>
|
|
271
758
|
</div>
|
|
272
759
|
</div>
|
|
273
760
|
|
|
274
761
|
<div class="card">
|
|
275
|
-
<
|
|
276
|
-
|
|
277
|
-
|
|
762
|
+
<div class="card-header">
|
|
763
|
+
<span class="card-title">Error Repeat Rate</span>
|
|
764
|
+
<span class="card-icon">🔄</span>
|
|
765
|
+
</div>
|
|
766
|
+
<div class="kpi-row">
|
|
767
|
+
<div class="kpi-value" id="errorRepeatRate">0%</div>
|
|
768
|
+
<span class="kpi-trend trend-down" id="errorTrend">↓ 0%</span>
|
|
769
|
+
</div>
|
|
770
|
+
<div class="kpi-label">Lower is better</div>
|
|
278
771
|
</div>
|
|
279
772
|
|
|
280
773
|
<div class="card">
|
|
281
|
-
<
|
|
282
|
-
|
|
283
|
-
|
|
774
|
+
<div class="card-header">
|
|
775
|
+
<span class="card-title">First-Time Success</span>
|
|
776
|
+
<span class="card-icon">🎯</span>
|
|
777
|
+
</div>
|
|
778
|
+
<div class="kpi-value" id="firstTimeSuccess">0%</div>
|
|
779
|
+
<div class="kpi-label">No retries needed</div>
|
|
284
780
|
</div>
|
|
285
781
|
|
|
286
782
|
<div class="card">
|
|
287
|
-
<
|
|
288
|
-
|
|
289
|
-
|
|
783
|
+
<div class="card-header">
|
|
784
|
+
<span class="card-title">Skill Effectiveness</span>
|
|
785
|
+
<span class="card-icon">💡</span>
|
|
786
|
+
</div>
|
|
787
|
+
<div class="kpi-value" id="skillEffectiveness">0%</div>
|
|
788
|
+
<div class="kpi-label">Skills that help</div>
|
|
290
789
|
</div>
|
|
291
790
|
</div>
|
|
292
791
|
|
|
293
792
|
<!-- Counters -->
|
|
294
|
-
<div class="grid">
|
|
793
|
+
<div class="grid-4">
|
|
295
794
|
<div class="card">
|
|
296
|
-
<
|
|
297
|
-
|
|
795
|
+
<div class="card-header">
|
|
796
|
+
<span class="card-title">Total Tasks</span>
|
|
797
|
+
<span class="card-icon">📊</span>
|
|
798
|
+
</div>
|
|
799
|
+
<div class="counter-value" id="totalTasks">0</div>
|
|
298
800
|
</div>
|
|
299
801
|
|
|
300
802
|
<div class="card">
|
|
301
|
-
<
|
|
302
|
-
|
|
803
|
+
<div class="card-header">
|
|
804
|
+
<span class="card-title">Patterns Learned</span>
|
|
805
|
+
<span class="card-icon">🧬</span>
|
|
806
|
+
</div>
|
|
807
|
+
<div class="counter-value" id="patternsLearned">0</div>
|
|
303
808
|
</div>
|
|
304
809
|
|
|
305
810
|
<div class="card">
|
|
306
|
-
<
|
|
307
|
-
|
|
811
|
+
<div class="card-header">
|
|
812
|
+
<span class="card-title">Skills Generated</span>
|
|
813
|
+
<span class="card-icon">⚙️</span>
|
|
814
|
+
</div>
|
|
815
|
+
<div class="counter-value" id="skillsGenerated">0</div>
|
|
308
816
|
</div>
|
|
309
817
|
|
|
310
818
|
<div class="card">
|
|
311
|
-
<
|
|
312
|
-
|
|
819
|
+
<div class="card-header">
|
|
820
|
+
<span class="card-title">A/B Tests Active</span>
|
|
821
|
+
<span class="card-icon">🧪</span>
|
|
822
|
+
</div>
|
|
823
|
+
<div class="counter-value" id="abTests">0</div>
|
|
313
824
|
</div>
|
|
314
825
|
</div>
|
|
315
826
|
|
|
316
|
-
<!--
|
|
317
|
-
<div class="grid
|
|
827
|
+
<!-- Main Content Grid -->
|
|
828
|
+
<div class="grid-3">
|
|
829
|
+
<!-- Alerts -->
|
|
318
830
|
<div class="card">
|
|
319
|
-
<
|
|
320
|
-
|
|
321
|
-
|
|
831
|
+
<div class="card-header">
|
|
832
|
+
<span class="card-title">⚠️ Active Alerts</span>
|
|
833
|
+
</div>
|
|
834
|
+
<ul class="list" id="alertsList">
|
|
835
|
+
<li class="list-item">
|
|
836
|
+
<div class="list-item-content">
|
|
837
|
+
<span class="list-item-icon" style="background: rgba(0, 255, 136, 0.15);">✅</span>
|
|
838
|
+
<div class="list-item-text">
|
|
839
|
+
<h4>All systems healthy</h4>
|
|
840
|
+
<p>No active alerts</p>
|
|
841
|
+
</div>
|
|
842
|
+
</div>
|
|
843
|
+
</li>
|
|
322
844
|
</ul>
|
|
323
845
|
</div>
|
|
324
846
|
|
|
847
|
+
<!-- Auto-Generated Skills -->
|
|
325
848
|
<div class="card">
|
|
326
|
-
<
|
|
327
|
-
|
|
849
|
+
<div class="card-header">
|
|
850
|
+
<span class="card-title">🎯 Auto-Generated Skills</span>
|
|
851
|
+
</div>
|
|
852
|
+
<div class="skills-grid" id="skillsList">
|
|
328
853
|
<div class="skill-item">
|
|
329
854
|
<span class="skill-name">No skills yet</span>
|
|
330
855
|
<span class="skill-confidence">--</span>
|
|
331
856
|
</div>
|
|
332
857
|
</div>
|
|
333
858
|
</div>
|
|
334
|
-
</div>
|
|
335
859
|
|
|
336
|
-
|
|
337
|
-
<div class="grid grid-2">
|
|
860
|
+
<!-- A/B Testing -->
|
|
338
861
|
<div class="card">
|
|
339
|
-
<
|
|
340
|
-
|
|
341
|
-
<div class="ab-test">
|
|
342
|
-
<span>No active tests</span>
|
|
343
|
-
</div>
|
|
862
|
+
<div class="card-header">
|
|
863
|
+
<span class="card-title">🧪 A/B Testing</span>
|
|
344
864
|
</div>
|
|
865
|
+
<ul class="list" id="abTestsList">
|
|
866
|
+
<li class="list-item">
|
|
867
|
+
<div class="list-item-content">
|
|
868
|
+
<div class="list-item-text">
|
|
869
|
+
<h4>No active tests</h4>
|
|
870
|
+
<p>Start an experiment to compare approaches</p>
|
|
871
|
+
</div>
|
|
872
|
+
</div>
|
|
873
|
+
</li>
|
|
874
|
+
</ul>
|
|
345
875
|
</div>
|
|
876
|
+
</div>
|
|
346
877
|
|
|
878
|
+
<!-- Reinforcement Loop & Chart -->
|
|
879
|
+
<div class="grid-2">
|
|
347
880
|
<div class="card">
|
|
348
|
-
<
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
881
|
+
<div class="card-header">
|
|
882
|
+
<span class="card-title">🔄 Reinforcement Loop</span>
|
|
883
|
+
</div>
|
|
884
|
+
<div class="reinforcement-grid">
|
|
885
|
+
<div class="reinforce-stat">
|
|
886
|
+
<div class="reinforce-value" id="rewards">0</div>
|
|
887
|
+
<div class="reinforce-label">Rewards</div>
|
|
353
888
|
</div>
|
|
354
|
-
<div>
|
|
355
|
-
<div class="
|
|
356
|
-
<div class="
|
|
889
|
+
<div class="reinforce-stat">
|
|
890
|
+
<div class="reinforce-value" id="penalties">0</div>
|
|
891
|
+
<div class="reinforce-label">Penalties</div>
|
|
357
892
|
</div>
|
|
358
|
-
<div>
|
|
359
|
-
<div class="
|
|
360
|
-
<div class="
|
|
893
|
+
<div class="reinforce-stat">
|
|
894
|
+
<div class="reinforce-value" id="avgConfidence">--</div>
|
|
895
|
+
<div class="reinforce-label">Confidence</div>
|
|
361
896
|
</div>
|
|
362
897
|
</div>
|
|
363
898
|
</div>
|
|
364
|
-
</div>
|
|
365
899
|
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
<h2 style="margin-bottom: 0;">Dashboard Controls</h2>
|
|
370
|
-
<div style="display: flex; gap: 10px;">
|
|
371
|
-
<button onclick="refreshData()">↻ Refresh Data</button>
|
|
900
|
+
<div class="card">
|
|
901
|
+
<div class="card-header">
|
|
902
|
+
<span class="card-title">📈 Learning Velocity</span>
|
|
372
903
|
</div>
|
|
904
|
+
<div class="chart-container">
|
|
905
|
+
<div class="bar-chart" id="velocityChart">
|
|
906
|
+
<div class="bar" style="height: 40%"><span class="bar-label">Mon</span></div>
|
|
907
|
+
<div class="bar" style="height: 60%"><span class="bar-label">Tue</span></div>
|
|
908
|
+
<div class="bar" style="height: 45%"><span class="bar-label">Wed</span></div>
|
|
909
|
+
<div class="bar" style="height: 80%"><span class="bar-label">Thu</span></div>
|
|
910
|
+
<div class="bar" style="height: 65%"><span class="bar-label">Fri</span></div>
|
|
911
|
+
<div class="bar" style="height: 55%"><span class="bar-label">Sat</span></div>
|
|
912
|
+
<div class="bar" style="height: 70%"><span class="bar-label">Sun</span></div>
|
|
913
|
+
</div>
|
|
914
|
+
</div>
|
|
915
|
+
</div>
|
|
916
|
+
</div>
|
|
917
|
+
|
|
918
|
+
<!-- Controls -->
|
|
919
|
+
<div class="card">
|
|
920
|
+
<div class="card-header">
|
|
921
|
+
<span class="card-title">Dashboard Controls</span>
|
|
922
|
+
</div>
|
|
923
|
+
<div class="controls">
|
|
924
|
+
<button class="btn btn-primary" onclick="refreshData()">↻ Refresh Data</button>
|
|
925
|
+
<button class="btn btn-secondary" onclick="exportData()">📥 Export</button>
|
|
373
926
|
</div>
|
|
374
927
|
</div>
|
|
375
928
|
|
|
376
|
-
<footer
|
|
377
|
-
⚡ PikaKit
|
|
929
|
+
<footer>
|
|
930
|
+
⚡ <span>PikaKit v7.0</span> — Precision Learning Engine
|
|
378
931
|
</footer>
|
|
379
932
|
</div>
|
|
380
933
|
|
|
@@ -384,6 +937,7 @@
|
|
|
384
937
|
async function fetchAPI(endpoint) {
|
|
385
938
|
try {
|
|
386
939
|
const res = await fetch(API_BASE + endpoint);
|
|
940
|
+
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
387
941
|
return await res.json();
|
|
388
942
|
} catch (e) {
|
|
389
943
|
console.error('API Error:', e);
|
|
@@ -393,68 +947,80 @@
|
|
|
393
947
|
|
|
394
948
|
async function refreshData() {
|
|
395
949
|
document.body.classList.add('loading');
|
|
950
|
+
document.getElementById('connectionText').textContent = 'Updating...';
|
|
396
951
|
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
952
|
+
try {
|
|
953
|
+
const [dashboard, alerts, skills, abTesting, reinforcement] = await Promise.all([
|
|
954
|
+
fetchAPI('/api/dashboard'),
|
|
955
|
+
fetchAPI('/api/alerts'),
|
|
956
|
+
fetchAPI('/api/skills'),
|
|
957
|
+
fetchAPI('/api/ab-testing'),
|
|
958
|
+
fetchAPI('/api/reinforcement')
|
|
959
|
+
]);
|
|
960
|
+
|
|
961
|
+
// Update KPIs
|
|
962
|
+
if (dashboard?.kpis?.kpis) {
|
|
963
|
+
const kpis = dashboard.kpis.kpis;
|
|
964
|
+
updateKPI('taskSuccessRate', kpis.task_success_rate);
|
|
965
|
+
updateKPI('errorRepeatRate', kpis.error_repeat_rate);
|
|
966
|
+
updateKPI('firstTimeSuccess', kpis.first_time_success);
|
|
967
|
+
updateKPI('skillEffectiveness', kpis.skill_effectiveness);
|
|
968
|
+
|
|
969
|
+
const successVal = parseFloat(kpis.task_success_rate?.value) || 0;
|
|
970
|
+
document.getElementById('successFill').style.width = successVal + '%';
|
|
971
|
+
}
|
|
972
|
+
|
|
973
|
+
// Update counters
|
|
974
|
+
if (dashboard?.summary) {
|
|
975
|
+
document.getElementById('totalTasks').textContent = dashboard.summary.totalTasks || 0;
|
|
976
|
+
document.getElementById('patternsLearned').textContent = dashboard.summary.patternsLearned || 0;
|
|
977
|
+
|
|
978
|
+
// Show onboarding banner for new users
|
|
979
|
+
const onboardingBanner = document.getElementById('onboardingBanner');
|
|
980
|
+
if (dashboard.isNewUser || dashboard.summary.isNewUser) {
|
|
981
|
+
onboardingBanner.classList.add('show');
|
|
982
|
+
} else {
|
|
983
|
+
onboardingBanner.classList.remove('show');
|
|
984
|
+
}
|
|
985
|
+
}
|
|
986
|
+
|
|
987
|
+
// Update skills
|
|
988
|
+
if (skills?.stats) {
|
|
989
|
+
document.getElementById('skillsGenerated').textContent = skills.stats.total || 0;
|
|
990
|
+
renderSkills(skills.skills || []);
|
|
991
|
+
}
|
|
992
|
+
|
|
993
|
+
// Update A/B tests
|
|
994
|
+
if (abTesting) {
|
|
995
|
+
document.getElementById('abTests').textContent = abTesting.stats?.running || 0;
|
|
996
|
+
renderABTests(abTesting.active || []);
|
|
997
|
+
}
|
|
998
|
+
|
|
999
|
+
// Update alerts
|
|
1000
|
+
if (alerts?.alerts) {
|
|
1001
|
+
renderAlerts(alerts.alerts);
|
|
1002
|
+
}
|
|
1003
|
+
|
|
1004
|
+
// Update reinforcement
|
|
1005
|
+
if (reinforcement) {
|
|
1006
|
+
document.getElementById('rewards').textContent = reinforcement.totalRewards || 0;
|
|
1007
|
+
document.getElementById('penalties').textContent = reinforcement.totalPenalties || 0;
|
|
1008
|
+
const conf = reinforcement.averageConfidence;
|
|
1009
|
+
document.getElementById('avgConfidence').textContent = conf ? (conf * 100).toFixed(0) + '%' : '0%';
|
|
1010
|
+
}
|
|
1011
|
+
|
|
1012
|
+
document.getElementById('connectionText').textContent = 'Connected';
|
|
1013
|
+
} catch (e) {
|
|
1014
|
+
document.getElementById('connectionText').textContent = 'Error';
|
|
449
1015
|
}
|
|
450
1016
|
|
|
451
1017
|
document.body.classList.remove('loading');
|
|
452
1018
|
}
|
|
453
1019
|
|
|
454
|
-
function
|
|
1020
|
+
function updateKPI(id, kpi) {
|
|
455
1021
|
const el = document.getElementById(id);
|
|
456
1022
|
if (!kpi) {
|
|
457
|
-
el.textContent = '
|
|
1023
|
+
el.textContent = '0%';
|
|
458
1024
|
return;
|
|
459
1025
|
}
|
|
460
1026
|
const value = parseFloat(kpi.value).toFixed(1);
|
|
@@ -463,26 +1029,45 @@
|
|
|
463
1029
|
|
|
464
1030
|
function renderAlerts(alerts) {
|
|
465
1031
|
const container = document.getElementById('alertsList');
|
|
466
|
-
if (!alerts
|
|
467
|
-
container.innerHTML =
|
|
1032
|
+
if (!alerts?.length) {
|
|
1033
|
+
container.innerHTML = `
|
|
1034
|
+
<li class="list-item">
|
|
1035
|
+
<div class="list-item-content">
|
|
1036
|
+
<span class="list-item-icon" style="background: rgba(0, 255, 136, 0.15);">✅</span>
|
|
1037
|
+
<div class="list-item-text">
|
|
1038
|
+
<h4>All systems healthy</h4>
|
|
1039
|
+
<p>No active alerts</p>
|
|
1040
|
+
</div>
|
|
1041
|
+
</div>
|
|
1042
|
+
</li>`;
|
|
468
1043
|
return;
|
|
469
1044
|
}
|
|
470
1045
|
|
|
471
|
-
container.innerHTML = alerts.map(a =>
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
1046
|
+
container.innerHTML = alerts.slice(0, 5).map(a => {
|
|
1047
|
+
const icon = a.severity === 'warning' ? '⚠️' : 'ℹ️';
|
|
1048
|
+
const bg = a.severity === 'warning' ? 'rgba(255, 204, 0, 0.15)' : 'rgba(0, 212, 255, 0.15)';
|
|
1049
|
+
return `
|
|
1050
|
+
<li class="list-item">
|
|
1051
|
+
<div class="list-item-content">
|
|
1052
|
+
<span class="list-item-icon" style="background: ${bg};">${icon}</span>
|
|
1053
|
+
<div class="list-item-text">
|
|
1054
|
+
<h4>${a.message}</h4>
|
|
1055
|
+
<p>${a.severity}</p>
|
|
1056
|
+
</div>
|
|
1057
|
+
</div>
|
|
1058
|
+
<span class="badge badge-${a.severity === 'warning' ? 'warning' : 'info'}">${a.severity}</span>
|
|
1059
|
+
</li>`;
|
|
1060
|
+
}).join('');
|
|
476
1061
|
}
|
|
477
1062
|
|
|
478
1063
|
function renderSkills(skills) {
|
|
479
1064
|
const container = document.getElementById('skillsList');
|
|
480
|
-
if (!skills
|
|
481
|
-
container.innerHTML = '<div class="skill-item"><span>No skills
|
|
1065
|
+
if (!skills?.length) {
|
|
1066
|
+
container.innerHTML = '<div class="skill-item"><span class="skill-name">No skills yet</span><span class="skill-confidence">--</span></div>';
|
|
482
1067
|
return;
|
|
483
1068
|
}
|
|
484
1069
|
|
|
485
|
-
container.innerHTML = skills.slice(0,
|
|
1070
|
+
container.innerHTML = skills.slice(0, 6).map(s => `
|
|
486
1071
|
<div class="skill-item">
|
|
487
1072
|
<span class="skill-name">${s.name || s.id}</span>
|
|
488
1073
|
<span class="skill-confidence">${((s.confidence || 0) * 100).toFixed(0)}%</span>
|
|
@@ -492,19 +1077,48 @@
|
|
|
492
1077
|
|
|
493
1078
|
function renderABTests(tests) {
|
|
494
1079
|
const container = document.getElementById('abTestsList');
|
|
495
|
-
if (!tests
|
|
496
|
-
container.innerHTML =
|
|
1080
|
+
if (!tests?.length) {
|
|
1081
|
+
container.innerHTML = `
|
|
1082
|
+
<li class="list-item">
|
|
1083
|
+
<div class="list-item-content">
|
|
1084
|
+
<div class="list-item-text">
|
|
1085
|
+
<h4>No active tests</h4>
|
|
1086
|
+
<p>Start an experiment to compare approaches</p>
|
|
1087
|
+
</div>
|
|
1088
|
+
</div>
|
|
1089
|
+
</li>`;
|
|
497
1090
|
return;
|
|
498
1091
|
}
|
|
499
1092
|
|
|
500
|
-
container.innerHTML = tests.map(t => `
|
|
501
|
-
<
|
|
502
|
-
<
|
|
503
|
-
|
|
504
|
-
|
|
1093
|
+
container.innerHTML = tests.slice(0, 4).map(t => `
|
|
1094
|
+
<li class="list-item">
|
|
1095
|
+
<div class="list-item-content">
|
|
1096
|
+
<div class="list-item-text">
|
|
1097
|
+
<h4>${t.patternA} vs ${t.patternB}</h4>
|
|
1098
|
+
<p>${t.samples || 0} samples</p>
|
|
1099
|
+
</div>
|
|
1100
|
+
</div>
|
|
1101
|
+
<span class="badge badge-info">${t.status}</span>
|
|
1102
|
+
</li>
|
|
505
1103
|
`).join('');
|
|
506
1104
|
}
|
|
507
1105
|
|
|
1106
|
+
function exportData() {
|
|
1107
|
+
showModal('📦', 'Export Coming Soon!', 'This feature is being built. Soon you\'ll be able to export your dashboard data as JSON or CSV.');
|
|
1108
|
+
}
|
|
1109
|
+
|
|
1110
|
+
function showModal(icon, title, message) {
|
|
1111
|
+
const overlay = document.getElementById('modalOverlay');
|
|
1112
|
+
document.getElementById('modalIcon').textContent = icon;
|
|
1113
|
+
document.getElementById('modalTitle').textContent = title;
|
|
1114
|
+
document.getElementById('modalMessage').textContent = message;
|
|
1115
|
+
overlay.classList.add('show');
|
|
1116
|
+
}
|
|
1117
|
+
|
|
1118
|
+
function closeModal() {
|
|
1119
|
+
document.getElementById('modalOverlay').classList.remove('show');
|
|
1120
|
+
}
|
|
1121
|
+
|
|
508
1122
|
// Initialize
|
|
509
1123
|
refreshData();
|
|
510
1124
|
|