pikakit 1.0.9 → 1.0.11
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.
|
@@ -4,7 +4,7 @@
|
|
|
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>AutoLearn v6.0 Dashboard</title>
|
|
8
8
|
<style>
|
|
9
9
|
* {
|
|
10
10
|
margin: 0;
|
|
@@ -54,20 +54,21 @@
|
|
|
54
54
|
border-radius: 20px;
|
|
55
55
|
font-size: 12px;
|
|
56
56
|
font-weight: 600;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.status-active {
|
|
60
57
|
background: rgba(0, 255, 136, 0.2);
|
|
61
58
|
color: #00ff88;
|
|
62
59
|
}
|
|
63
60
|
|
|
64
61
|
.grid {
|
|
65
62
|
display: grid;
|
|
66
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
63
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
67
64
|
gap: 20px;
|
|
68
65
|
margin-bottom: 30px;
|
|
69
66
|
}
|
|
70
67
|
|
|
68
|
+
.grid-2 {
|
|
69
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
70
|
+
}
|
|
71
|
+
|
|
71
72
|
.card {
|
|
72
73
|
background: rgba(255, 255, 255, 0.05);
|
|
73
74
|
border-radius: 16px;
|
|
@@ -77,15 +78,15 @@
|
|
|
77
78
|
}
|
|
78
79
|
|
|
79
80
|
.card h2 {
|
|
80
|
-
font-size:
|
|
81
|
+
font-size: 12px;
|
|
81
82
|
text-transform: uppercase;
|
|
82
83
|
letter-spacing: 1px;
|
|
83
84
|
color: #888;
|
|
84
|
-
margin-bottom:
|
|
85
|
+
margin-bottom: 12px;
|
|
85
86
|
}
|
|
86
87
|
|
|
87
88
|
.metric {
|
|
88
|
-
font-size:
|
|
89
|
+
font-size: 36px;
|
|
89
90
|
font-weight: 700;
|
|
90
91
|
background: linear-gradient(135deg, #00d9ff, #00ff88);
|
|
91
92
|
-webkit-background-clip: text;
|
|
@@ -94,168 +95,140 @@
|
|
|
94
95
|
}
|
|
95
96
|
|
|
96
97
|
.metric-label {
|
|
97
|
-
font-size:
|
|
98
|
+
font-size: 12px;
|
|
98
99
|
color: #888;
|
|
99
|
-
margin-top:
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.chart-container {
|
|
103
|
-
height: 200px;
|
|
104
|
-
margin-top: 20px;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.bar-chart {
|
|
108
|
-
display: flex;
|
|
109
|
-
align-items: flex-end;
|
|
110
|
-
gap: 8px;
|
|
111
|
-
height: 150px;
|
|
112
|
-
padding-top: 20px;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.bar {
|
|
116
|
-
flex: 1;
|
|
117
|
-
background: linear-gradient(180deg, #00d9ff, #0066ff);
|
|
118
|
-
border-radius: 4px 4px 0 0;
|
|
119
|
-
min-height: 10px;
|
|
120
|
-
transition: height 0.3s ease;
|
|
121
|
-
position: relative;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.bar:hover {
|
|
125
|
-
opacity: 0.8;
|
|
100
|
+
margin-top: 4px;
|
|
126
101
|
}
|
|
127
102
|
|
|
128
|
-
.
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
transform: translateX(-50%);
|
|
103
|
+
.metric-status {
|
|
104
|
+
display: inline-block;
|
|
105
|
+
padding: 2px 8px;
|
|
106
|
+
border-radius: 10px;
|
|
133
107
|
font-size: 10px;
|
|
134
|
-
color: #888;
|
|
135
|
-
white-space: nowrap;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.list {
|
|
139
|
-
list-style: none;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.list li {
|
|
143
|
-
display: flex;
|
|
144
|
-
justify-content: space-between;
|
|
145
|
-
align-items: center;
|
|
146
|
-
padding: 12px 0;
|
|
147
|
-
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.list li:last-child {
|
|
151
|
-
border-bottom: none;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
.severity {
|
|
155
|
-
padding: 4px 8px;
|
|
156
|
-
border-radius: 4px;
|
|
157
|
-
font-size: 11px;
|
|
158
108
|
font-weight: 600;
|
|
109
|
+
margin-left: 8px;
|
|
159
110
|
}
|
|
160
111
|
|
|
161
|
-
.
|
|
162
|
-
background: rgba(
|
|
163
|
-
color: #
|
|
112
|
+
.status-good {
|
|
113
|
+
background: rgba(0, 255, 136, 0.2);
|
|
114
|
+
color: #00ff88;
|
|
164
115
|
}
|
|
165
116
|
|
|
166
|
-
.
|
|
117
|
+
.status-warning {
|
|
167
118
|
background: rgba(255, 187, 0, 0.2);
|
|
168
119
|
color: #ffbb00;
|
|
169
120
|
}
|
|
170
121
|
|
|
171
|
-
.
|
|
172
|
-
background: rgba(
|
|
173
|
-
color: #
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.severity-low {
|
|
177
|
-
background: rgba(136, 136, 136, 0.2);
|
|
178
|
-
color: #888;
|
|
122
|
+
.status-critical {
|
|
123
|
+
background: rgba(255, 68, 68, 0.2);
|
|
124
|
+
color: #ff4444;
|
|
179
125
|
}
|
|
180
126
|
|
|
181
127
|
.progress-bar {
|
|
182
|
-
height:
|
|
128
|
+
height: 6px;
|
|
183
129
|
background: rgba(255, 255, 255, 0.1);
|
|
184
|
-
border-radius:
|
|
130
|
+
border-radius: 3px;
|
|
185
131
|
overflow: hidden;
|
|
186
|
-
margin-top:
|
|
132
|
+
margin-top: 8px;
|
|
187
133
|
}
|
|
188
134
|
|
|
189
135
|
.progress-fill {
|
|
190
136
|
height: 100%;
|
|
191
137
|
background: linear-gradient(90deg, #00d9ff, #00ff88);
|
|
192
|
-
border-radius:
|
|
138
|
+
border-radius: 3px;
|
|
193
139
|
transition: width 0.5s ease;
|
|
194
140
|
}
|
|
195
141
|
|
|
196
|
-
.
|
|
197
|
-
|
|
198
|
-
gap: 10px;
|
|
199
|
-
margin-top: 20px;
|
|
142
|
+
.alert-list {
|
|
143
|
+
list-style: none;
|
|
200
144
|
}
|
|
201
145
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
146
|
+
.alert-item {
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: center;
|
|
149
|
+
gap: 12px;
|
|
150
|
+
padding: 12px;
|
|
151
|
+
background: rgba(255, 187, 0, 0.1);
|
|
205
152
|
border-radius: 8px;
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
transition: all 0.2s ease;
|
|
153
|
+
margin-bottom: 8px;
|
|
154
|
+
border-left: 3px solid #ffbb00;
|
|
209
155
|
}
|
|
210
156
|
|
|
211
|
-
.
|
|
212
|
-
background:
|
|
213
|
-
color: #
|
|
157
|
+
.alert-item.info {
|
|
158
|
+
background: rgba(0, 136, 255, 0.1);
|
|
159
|
+
border-left-color: #0088ff;
|
|
214
160
|
}
|
|
215
161
|
|
|
216
|
-
.
|
|
217
|
-
|
|
218
|
-
|
|
162
|
+
.skills-list {
|
|
163
|
+
max-height: 200px;
|
|
164
|
+
overflow-y: auto;
|
|
219
165
|
}
|
|
220
166
|
|
|
221
|
-
.
|
|
222
|
-
|
|
223
|
-
|
|
167
|
+
.skill-item {
|
|
168
|
+
display: flex;
|
|
169
|
+
justify-content: space-between;
|
|
170
|
+
padding: 8px 0;
|
|
171
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
224
172
|
}
|
|
225
173
|
|
|
226
|
-
.
|
|
227
|
-
|
|
174
|
+
.skill-name {
|
|
175
|
+
font-size: 13px;
|
|
228
176
|
}
|
|
229
177
|
|
|
230
|
-
.
|
|
231
|
-
|
|
232
|
-
|
|
178
|
+
.skill-confidence {
|
|
179
|
+
font-size: 12px;
|
|
180
|
+
color: #00ff88;
|
|
233
181
|
}
|
|
234
182
|
|
|
235
|
-
.
|
|
183
|
+
.ab-test {
|
|
236
184
|
display: flex;
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
185
|
+
justify-content: space-between;
|
|
186
|
+
align-items: center;
|
|
187
|
+
padding: 12px;
|
|
188
|
+
background: rgba(0, 217, 255, 0.1);
|
|
189
|
+
border-radius: 8px;
|
|
190
|
+
margin-bottom: 8px;
|
|
240
191
|
}
|
|
241
192
|
|
|
242
|
-
.
|
|
243
|
-
|
|
193
|
+
.bar-chart {
|
|
194
|
+
display: flex;
|
|
195
|
+
align-items: flex-end;
|
|
196
|
+
gap: 8px;
|
|
197
|
+
height: 100px;
|
|
198
|
+
margin-top: 16px;
|
|
244
199
|
}
|
|
245
200
|
|
|
246
|
-
.
|
|
247
|
-
|
|
201
|
+
.bar {
|
|
202
|
+
flex: 1;
|
|
203
|
+
background: linear-gradient(180deg, #00d9ff, #0066ff);
|
|
204
|
+
border-radius: 4px 4px 0 0;
|
|
205
|
+
min-height: 5px;
|
|
206
|
+
position: relative;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.bar-label {
|
|
210
|
+
position: absolute;
|
|
211
|
+
bottom: -20px;
|
|
212
|
+
left: 50%;
|
|
213
|
+
transform: translateX(-50%);
|
|
214
|
+
font-size: 10px;
|
|
215
|
+
color: #888;
|
|
248
216
|
}
|
|
249
217
|
|
|
250
|
-
|
|
251
|
-
|
|
218
|
+
button {
|
|
219
|
+
padding: 10px 20px;
|
|
220
|
+
border: none;
|
|
221
|
+
border-radius: 8px;
|
|
222
|
+
cursor: pointer;
|
|
252
223
|
font-weight: 600;
|
|
253
|
-
|
|
224
|
+
background: linear-gradient(135deg, #00d9ff, #00ff88);
|
|
225
|
+
color: #1a1a2e;
|
|
226
|
+
transition: all 0.2s ease;
|
|
254
227
|
}
|
|
255
228
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
229
|
+
button:hover {
|
|
230
|
+
transform: translateY(-2px);
|
|
231
|
+
box-shadow: 0 4px 20px rgba(0, 217, 255, 0.3);
|
|
259
232
|
}
|
|
260
233
|
|
|
261
234
|
.footer {
|
|
@@ -265,13 +238,17 @@
|
|
|
265
238
|
font-size: 13px;
|
|
266
239
|
}
|
|
267
240
|
|
|
241
|
+
.loading {
|
|
242
|
+
opacity: 0.5;
|
|
243
|
+
}
|
|
244
|
+
|
|
268
245
|
@media (max-width: 768px) {
|
|
269
246
|
.grid {
|
|
270
|
-
grid-template-columns: 1fr;
|
|
247
|
+
grid-template-columns: 1fr 1fr;
|
|
271
248
|
}
|
|
272
249
|
|
|
273
250
|
.metric {
|
|
274
|
-
font-size:
|
|
251
|
+
font-size: 28px;
|
|
275
252
|
}
|
|
276
253
|
}
|
|
277
254
|
</style>
|
|
@@ -280,259 +257,260 @@
|
|
|
280
257
|
<body>
|
|
281
258
|
<div class="container">
|
|
282
259
|
<header>
|
|
283
|
-
<h1>🧠 <span>
|
|
284
|
-
<span class="status-badge
|
|
260
|
+
<h1>🧠 <span>AutoLearn v6.0</span> Dashboard</h1>
|
|
261
|
+
<span class="status-badge">⚡ Precision Learning Engine</span>
|
|
285
262
|
</header>
|
|
286
263
|
|
|
287
|
-
<!--
|
|
264
|
+
<!-- Core KPIs -->
|
|
288
265
|
<div class="grid">
|
|
289
266
|
<div class="card">
|
|
290
|
-
<h2>
|
|
291
|
-
<div class="metric" id="
|
|
292
|
-
<div class="
|
|
267
|
+
<h2>Task Success Rate</h2>
|
|
268
|
+
<div class="metric" id="taskSuccessRate">--%</div>
|
|
269
|
+
<div class="progress-bar">
|
|
270
|
+
<div class="progress-fill" id="successFill" style="width: 0%"></div>
|
|
271
|
+
</div>
|
|
293
272
|
</div>
|
|
294
273
|
|
|
295
274
|
<div class="card">
|
|
296
|
-
<h2>
|
|
297
|
-
<div class="metric" id="
|
|
298
|
-
<div class="metric-label">
|
|
275
|
+
<h2>Error Repeat Rate</h2>
|
|
276
|
+
<div class="metric" id="errorRepeatRate">--%</div>
|
|
277
|
+
<div class="metric-label">Lower is better</div>
|
|
299
278
|
</div>
|
|
300
279
|
|
|
301
280
|
<div class="card">
|
|
302
|
-
<h2>
|
|
303
|
-
<div class="metric" id="
|
|
304
|
-
<div class="metric-label">
|
|
281
|
+
<h2>First-Time Success</h2>
|
|
282
|
+
<div class="metric" id="firstTimeSuccess">--%</div>
|
|
283
|
+
<div class="metric-label">No retries needed</div>
|
|
305
284
|
</div>
|
|
306
285
|
|
|
307
286
|
<div class="card">
|
|
308
|
-
<h2>
|
|
309
|
-
<div class="metric" id="
|
|
310
|
-
<div class="metric-label">
|
|
311
|
-
<div class="progress-bar">
|
|
312
|
-
<div class="progress-fill" id="progressFill" style="width: 0%"></div>
|
|
313
|
-
</div>
|
|
287
|
+
<h2>Skill Effectiveness</h2>
|
|
288
|
+
<div class="metric" id="skillEffectiveness">--%</div>
|
|
289
|
+
<div class="metric-label">Skills that help</div>
|
|
314
290
|
</div>
|
|
315
291
|
</div>
|
|
316
292
|
|
|
317
|
-
<!--
|
|
293
|
+
<!-- Counters -->
|
|
318
294
|
<div class="grid">
|
|
319
295
|
<div class="card">
|
|
320
|
-
<h2>
|
|
321
|
-
<div class="
|
|
322
|
-
<!-- Bars will be added dynamically -->
|
|
323
|
-
</div>
|
|
296
|
+
<h2>Total Tasks</h2>
|
|
297
|
+
<div class="metric" id="totalTasks">0</div>
|
|
324
298
|
</div>
|
|
325
299
|
|
|
326
300
|
<div class="card">
|
|
327
|
-
<h2>
|
|
328
|
-
<div class="
|
|
329
|
-
|
|
330
|
-
|
|
301
|
+
<h2>Patterns Learned</h2>
|
|
302
|
+
<div class="metric" id="patternsLearned">0</div>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
<div class="card">
|
|
306
|
+
<h2>Skills Generated</h2>
|
|
307
|
+
<div class="metric" id="skillsGenerated">0</div>
|
|
308
|
+
</div>
|
|
309
|
+
|
|
310
|
+
<div class="card">
|
|
311
|
+
<h2>A/B Tests</h2>
|
|
312
|
+
<div class="metric" id="abTests">0</div>
|
|
331
313
|
</div>
|
|
332
314
|
</div>
|
|
333
315
|
|
|
334
|
-
<!--
|
|
335
|
-
<div class="grid">
|
|
316
|
+
<!-- Alerts & Skills -->
|
|
317
|
+
<div class="grid grid-2">
|
|
336
318
|
<div class="card">
|
|
337
|
-
<h2
|
|
338
|
-
<ul class="list" id="
|
|
339
|
-
<li>
|
|
340
|
-
<span>No patterns detected yet</span>
|
|
341
|
-
<span class="severity severity-low">PENDING</span>
|
|
342
|
-
</li>
|
|
319
|
+
<h2>⚠️ Active Alerts</h2>
|
|
320
|
+
<ul class="alert-list" id="alertsList">
|
|
321
|
+
<li class="alert-item info">No alerts</li>
|
|
343
322
|
</ul>
|
|
344
|
-
<div class="actions">
|
|
345
|
-
<button class="btn-secondary" onclick="refreshData()">↻ Refresh</button>
|
|
346
|
-
</div>
|
|
347
323
|
</div>
|
|
348
324
|
|
|
349
|
-
<div class="card
|
|
350
|
-
<h2
|
|
351
|
-
<div id="
|
|
352
|
-
<div class="
|
|
353
|
-
<span class="
|
|
354
|
-
<
|
|
355
|
-
<h3>Run sensors first</h3>
|
|
356
|
-
<p>Execute error_sensor.js and user_correction_sensor.js to collect data</p>
|
|
357
|
-
</div>
|
|
358
|
-
</div>
|
|
359
|
-
<div class="insight-item">
|
|
360
|
-
<span class="insight-icon">🔍</span>
|
|
361
|
-
<div class="insight-content">
|
|
362
|
-
<h3>Analyze patterns</h3>
|
|
363
|
-
<p>Run pattern_analyzer.js to identify high-frequency issues</p>
|
|
364
|
-
</div>
|
|
365
|
-
</div>
|
|
366
|
-
<div class="insight-item">
|
|
367
|
-
<span class="insight-icon">🛡️</span>
|
|
368
|
-
<div class="insight-content">
|
|
369
|
-
<h3>Enable prevention</h3>
|
|
370
|
-
<p>Use pre_execution_check.js before writing code</p>
|
|
371
|
-
</div>
|
|
325
|
+
<div class="card">
|
|
326
|
+
<h2>🎯 Auto-Generated Skills</h2>
|
|
327
|
+
<div class="skills-list" id="skillsList">
|
|
328
|
+
<div class="skill-item">
|
|
329
|
+
<span class="skill-name">No skills yet</span>
|
|
330
|
+
<span class="skill-confidence">--</span>
|
|
372
331
|
</div>
|
|
373
332
|
</div>
|
|
374
333
|
</div>
|
|
375
334
|
</div>
|
|
376
335
|
|
|
377
|
-
<!--
|
|
378
|
-
<div class="
|
|
379
|
-
<
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
<code style="color: #00d9ff;">node error_sensor.js --scan all</code>
|
|
386
|
-
</div>
|
|
387
|
-
<div
|
|
388
|
-
style="background: rgba(0,0,0,0.2); padding: 16px; border-radius: 8px; font-family: monospace; font-size: 13px;">
|
|
389
|
-
<div style="color: #888; margin-bottom: 8px;">Detect corrections:</div>
|
|
390
|
-
<code style="color: #00d9ff;">node user_correction_sensor.js --scan</code>
|
|
391
|
-
</div>
|
|
392
|
-
<div
|
|
393
|
-
style="background: rgba(0,0,0,0.2); padding: 16px; border-radius: 8px; font-family: monospace; font-size: 13px;">
|
|
394
|
-
<div style="color: #888; margin-bottom: 8px;">Analyze patterns:</div>
|
|
395
|
-
<code style="color: #00d9ff;">node pattern_analyzer.js --analyze</code>
|
|
396
|
-
</div>
|
|
397
|
-
<div
|
|
398
|
-
style="background: rgba(0,0,0,0.2); padding: 16px; border-radius: 8px; font-family: monospace; font-size: 13px;">
|
|
399
|
-
<div style="color: #888; margin-bottom: 8px;">Generate rules:</div>
|
|
400
|
-
<code style="color: #00d9ff;">node pattern_analyzer.js --rules</code>
|
|
336
|
+
<!-- A/B Testing & Reinforcement -->
|
|
337
|
+
<div class="grid grid-2">
|
|
338
|
+
<div class="card">
|
|
339
|
+
<h2>🧪 A/B Testing</h2>
|
|
340
|
+
<div id="abTestsList">
|
|
341
|
+
<div class="ab-test">
|
|
342
|
+
<span>No active tests</span>
|
|
343
|
+
</div>
|
|
401
344
|
</div>
|
|
402
345
|
</div>
|
|
403
346
|
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
<
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
<span class="insight-icon">🧠</span>
|
|
411
|
-
<div class="insight-content">
|
|
412
|
-
<h3>What is Auto-Learn?</h3>
|
|
413
|
-
<p>An AI system that learns from your coding mistakes and prevents them in the future.</p>
|
|
414
|
-
</div>
|
|
415
|
-
</div>
|
|
416
|
-
<div class="insight-item" style="border: none; padding: 0;">
|
|
417
|
-
<span class="insight-icon">🔄</span>
|
|
418
|
-
<div class="insight-content">
|
|
419
|
-
<h3>How it works</h3>
|
|
420
|
-
<p>Error → Lesson → Pattern → Rule → Prevention</p>
|
|
421
|
-
</div>
|
|
347
|
+
<div class="card">
|
|
348
|
+
<h2>🔄 Reinforcement Loop</h2>
|
|
349
|
+
<div style="display: flex; gap: 20px; margin-top: 10px;">
|
|
350
|
+
<div>
|
|
351
|
+
<div class="metric" id="rewards" style="font-size: 24px;">0</div>
|
|
352
|
+
<div class="metric-label">Rewards</div>
|
|
422
353
|
</div>
|
|
423
|
-
<div
|
|
424
|
-
<
|
|
425
|
-
<div class="
|
|
426
|
-
<h3>CLI Commands</h3>
|
|
427
|
-
<p><code style="color: #00d9ff;">agent auto-learn --scan</code></p>
|
|
428
|
-
</div>
|
|
354
|
+
<div>
|
|
355
|
+
<div class="metric" id="penalties" style="font-size: 24px;">0</div>
|
|
356
|
+
<div class="metric-label">Penalties</div>
|
|
429
357
|
</div>
|
|
430
|
-
<div
|
|
431
|
-
<
|
|
432
|
-
<div class="
|
|
433
|
-
<h3>Settings</h3>
|
|
434
|
-
<p><code style="color: #00d9ff;">agent</code> → Settings → Auto-Learning</p>
|
|
435
|
-
</div>
|
|
358
|
+
<div>
|
|
359
|
+
<div class="metric" id="avgConfidence" style="font-size: 24px;">--</div>
|
|
360
|
+
<div class="metric-label">Avg Confidence</div>
|
|
436
361
|
</div>
|
|
437
362
|
</div>
|
|
438
|
-
<div style="margin-top: 20px; padding: 16px; background: rgba(0,217,255,0.1); border-radius: 8px;">
|
|
439
|
-
<h3 style="margin-bottom: 12px; font-size: 14px;">🚀 Getting Started</h3>
|
|
440
|
-
<ol style="margin-left: 20px; line-height: 1.8; color: #aaa;">
|
|
441
|
-
<li>Run <code style="color: #00d9ff;">agent auto-learn --scan</code> to detect errors</li>
|
|
442
|
-
<li>Run <code style="color: #00d9ff;">agent auto-learn --analyze</code> to find patterns</li>
|
|
443
|
-
<li>Toggle <strong>Auto-Learning: ON</strong> in Settings</li>
|
|
444
|
-
<li>The system will now prevent repeat errors!</li>
|
|
445
|
-
</ol>
|
|
446
|
-
</div>
|
|
447
363
|
</div>
|
|
364
|
+
</div>
|
|
448
365
|
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
366
|
+
<!-- Actions -->
|
|
367
|
+
<div class="card" style="margin-bottom: 30px;">
|
|
368
|
+
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
369
|
+
<h2 style="margin-bottom: 0;">Dashboard Controls</h2>
|
|
370
|
+
<div style="display: flex; gap: 10px;">
|
|
371
|
+
<button onclick="refreshData()">↻ Refresh Data</button>
|
|
372
|
+
</div>
|
|
373
|
+
</div>
|
|
452
374
|
</div>
|
|
453
375
|
|
|
454
|
-
<
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
'imports': 5,
|
|
470
|
-
'types': 4,
|
|
471
|
-
'null-safety': 3,
|
|
472
|
-
'async': 2,
|
|
473
|
-
'other': 1
|
|
474
|
-
}
|
|
475
|
-
},
|
|
476
|
-
lessons: 7,
|
|
477
|
-
patterns: [
|
|
478
|
-
{ name: 'import_path_fix', count: 5, severity: 'HIGH' },
|
|
479
|
-
{ name: 'type_annotation_fix', count: 4, severity: 'HIGH' },
|
|
480
|
-
{ name: 'null_check_added', count: 3, severity: 'MEDIUM' }
|
|
481
|
-
]
|
|
482
|
-
};
|
|
483
|
-
|
|
484
|
-
function updateMetrics(data) {
|
|
485
|
-
document.getElementById('totalErrors').textContent = data.errors.total;
|
|
486
|
-
document.getElementById('totalCorrections').textContent = data.corrections.total;
|
|
487
|
-
document.getElementById('totalLessons').textContent = data.lessons;
|
|
488
|
-
|
|
489
|
-
const score = Math.min(95, data.lessons * 10 + 25);
|
|
490
|
-
document.getElementById('patternScore').textContent = score + '%';
|
|
491
|
-
document.getElementById('progressFill').style.width = score + '%';
|
|
376
|
+
<footer class="footer">
|
|
377
|
+
AutoLearn v6.0 Dashboard • ⚡ PikaKit Precision Learning Engine • Built with ❤️
|
|
378
|
+
</footer>
|
|
379
|
+
</div>
|
|
380
|
+
|
|
381
|
+
<script>
|
|
382
|
+
const API_BASE = '';
|
|
383
|
+
|
|
384
|
+
async function fetchAPI(endpoint) {
|
|
385
|
+
try {
|
|
386
|
+
const res = await fetch(API_BASE + endpoint);
|
|
387
|
+
return await res.json();
|
|
388
|
+
} catch (e) {
|
|
389
|
+
console.error('API Error:', e);
|
|
390
|
+
return null;
|
|
492
391
|
}
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
async function refreshData() {
|
|
395
|
+
document.body.classList.add('loading');
|
|
396
|
+
|
|
397
|
+
// Fetch all data
|
|
398
|
+
const [dashboard, alerts, skills, abTesting, reinforcement] = await Promise.all([
|
|
399
|
+
fetchAPI('/api/dashboard'),
|
|
400
|
+
fetchAPI('/api/alerts'),
|
|
401
|
+
fetchAPI('/api/skills'),
|
|
402
|
+
fetchAPI('/api/ab-testing'),
|
|
403
|
+
fetchAPI('/api/reinforcement')
|
|
404
|
+
]);
|
|
405
|
+
|
|
406
|
+
// Update KPIs
|
|
407
|
+
if (dashboard && dashboard.kpis && dashboard.kpis.kpis) {
|
|
408
|
+
const kpis = dashboard.kpis.kpis;
|
|
409
|
+
|
|
410
|
+
updateMetric('taskSuccessRate', kpis.task_success_rate);
|
|
411
|
+
updateMetric('errorRepeatRate', kpis.error_repeat_rate);
|
|
412
|
+
updateMetric('firstTimeSuccess', kpis.first_time_success);
|
|
413
|
+
updateMetric('skillEffectiveness', kpis.skill_effectiveness);
|
|
493
414
|
|
|
494
|
-
|
|
495
|
-
const
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
const maxValue = Math.max(...Object.values(data));
|
|
499
|
-
|
|
500
|
-
for (const [label, value] of Object.entries(data)) {
|
|
501
|
-
const height = (value / maxValue) * 130 + 10;
|
|
502
|
-
const bar = document.createElement('div');
|
|
503
|
-
bar.className = 'bar';
|
|
504
|
-
bar.style.height = height + 'px';
|
|
505
|
-
bar.innerHTML = `<span class="bar-label">${label}</span>`;
|
|
506
|
-
bar.title = `${label}: ${value}`;
|
|
507
|
-
container.appendChild(bar);
|
|
508
|
-
}
|
|
415
|
+
// Progress bar
|
|
416
|
+
const successVal = parseFloat(kpis.task_success_rate?.value) || 0;
|
|
417
|
+
document.getElementById('successFill').style.width = successVal + '%';
|
|
509
418
|
}
|
|
510
419
|
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
for (const pattern of patterns) {
|
|
516
|
-
const li = document.createElement('li');
|
|
517
|
-
li.innerHTML = `
|
|
518
|
-
<span>${pattern.name} (${pattern.count}x)</span>
|
|
519
|
-
<span class="severity severity-${pattern.severity.toLowerCase()}">${pattern.severity}</span>
|
|
520
|
-
`;
|
|
521
|
-
container.appendChild(li);
|
|
522
|
-
}
|
|
420
|
+
// Update summary counters
|
|
421
|
+
if (dashboard && dashboard.summary) {
|
|
422
|
+
document.getElementById('totalTasks').textContent = dashboard.summary.totalTasks || 0;
|
|
423
|
+
document.getElementById('patternsLearned').textContent = dashboard.summary.patternsLearned || 0;
|
|
523
424
|
}
|
|
524
425
|
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
renderBarChart('correctionChart', sampleData.corrections.byCategory);
|
|
530
|
-
renderPatterns(sampleData.patterns);
|
|
426
|
+
// Update skills count
|
|
427
|
+
if (skills && skills.stats) {
|
|
428
|
+
document.getElementById('skillsGenerated').textContent = skills.stats.total || 0;
|
|
429
|
+
renderSkills(skills.skills || []);
|
|
531
430
|
}
|
|
532
431
|
|
|
533
|
-
//
|
|
534
|
-
|
|
535
|
-
|
|
432
|
+
// Update A/B tests
|
|
433
|
+
if (abTesting) {
|
|
434
|
+
document.getElementById('abTests').textContent = abTesting.stats?.running || 0;
|
|
435
|
+
renderABTests(abTesting.active || []);
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
// Update alerts
|
|
439
|
+
if (alerts && alerts.alerts) {
|
|
440
|
+
renderAlerts(alerts.alerts);
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
// Update reinforcement
|
|
444
|
+
if (reinforcement) {
|
|
445
|
+
document.getElementById('rewards').textContent = reinforcement.totalRewards || 0;
|
|
446
|
+
document.getElementById('penalties').textContent = reinforcement.totalPenalties || 0;
|
|
447
|
+
document.getElementById('avgConfidence').textContent =
|
|
448
|
+
reinforcement.averageConfidence ? (reinforcement.averageConfidence * 100).toFixed(0) + '%' : '--';
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
document.body.classList.remove('loading');
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
function updateMetric(id, kpi) {
|
|
455
|
+
const el = document.getElementById(id);
|
|
456
|
+
if (!kpi) {
|
|
457
|
+
el.textContent = '--%';
|
|
458
|
+
return;
|
|
459
|
+
}
|
|
460
|
+
const value = parseFloat(kpi.value).toFixed(1);
|
|
461
|
+
el.textContent = value + '%';
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
function renderAlerts(alerts) {
|
|
465
|
+
const container = document.getElementById('alertsList');
|
|
466
|
+
if (!alerts || alerts.length === 0) {
|
|
467
|
+
container.innerHTML = '<li class="alert-item info">✅ No alerts - system healthy</li>';
|
|
468
|
+
return;
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
container.innerHTML = alerts.map(a => `
|
|
472
|
+
<li class="alert-item ${a.severity === 'info' ? 'info' : ''}">
|
|
473
|
+
${a.severity === 'warning' ? '⚠️' : 'ℹ️'} ${a.message}
|
|
474
|
+
</li>
|
|
475
|
+
`).join('');
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
function renderSkills(skills) {
|
|
479
|
+
const container = document.getElementById('skillsList');
|
|
480
|
+
if (!skills || skills.length === 0) {
|
|
481
|
+
container.innerHTML = '<div class="skill-item"><span>No skills generated yet</span></div>';
|
|
482
|
+
return;
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
container.innerHTML = skills.slice(0, 10).map(s => `
|
|
486
|
+
<div class="skill-item">
|
|
487
|
+
<span class="skill-name">${s.name || s.id}</span>
|
|
488
|
+
<span class="skill-confidence">${((s.confidence || 0) * 100).toFixed(0)}%</span>
|
|
489
|
+
</div>
|
|
490
|
+
`).join('');
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
function renderABTests(tests) {
|
|
494
|
+
const container = document.getElementById('abTestsList');
|
|
495
|
+
if (!tests || tests.length === 0) {
|
|
496
|
+
container.innerHTML = '<div class="ab-test"><span>No active A/B tests</span></div>';
|
|
497
|
+
return;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
container.innerHTML = tests.map(t => `
|
|
501
|
+
<div class="ab-test">
|
|
502
|
+
<span>${t.patternA} vs ${t.patternB}</span>
|
|
503
|
+
<span>${t.status}</span>
|
|
504
|
+
</div>
|
|
505
|
+
`).join('');
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
// Initialize
|
|
509
|
+
refreshData();
|
|
510
|
+
|
|
511
|
+
// Auto-refresh every 30 seconds
|
|
512
|
+
setInterval(refreshData, 30000);
|
|
513
|
+
</script>
|
|
536
514
|
</body>
|
|
537
515
|
|
|
538
516
|
</html>
|