@timmeck/brain-core 2.6.0 → 2.8.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.
@@ -0,0 +1,735 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>{{BRAIN_NAME}} — Research Dashboard</title>
7
+ <style>
8
+ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
9
+ :root{
10
+ --bg:#04060e;--bg2:rgba(10,12,24,.7);--bg3:rgba(20,24,50,.6);--bg4:rgba(30,35,70,.5);
11
+ --glass:rgba(15,18,40,.55);--glass-border:rgba(100,120,255,.12);--glass-hover:rgba(100,120,255,.2);
12
+ --text:#e8eaf6;--text2:#8b8fb0;--text3:#4a4d6e;
13
+ --blue:#58a6ff;--red:#f85149;--green:#3fb950;
14
+ --purple:#d2a8ff;--orange:#d29922;--cyan:#47e5ff;
15
+ --accent:linear-gradient(135deg,#58a6ff,#d2a8ff,#47e5ff);
16
+ --radius:16px;--radius-sm:10px;
17
+ }
18
+ html{scroll-behavior:smooth}
19
+ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;overflow-x:hidden}
20
+
21
+ /* Neural canvas background */
22
+ #neural-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
23
+
24
+ /* Ambient glow orbs */
25
+ .orb{position:fixed;border-radius:50%;filter:blur(120px);opacity:.1;pointer-events:none;z-index:0}
26
+ .orb-1{width:600px;height:600px;background:var(--blue);top:-200px;left:-100px;animation:orb-float 20s ease-in-out infinite}
27
+ .orb-2{width:500px;height:500px;background:var(--purple);bottom:-150px;right:-100px;animation:orb-float 25s ease-in-out infinite reverse}
28
+ .orb-3{width:400px;height:400px;background:var(--cyan);top:40%;left:50%;animation:orb-float 18s ease-in-out infinite 5s}
29
+ @keyframes orb-float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-40px) scale(1.1)}66%{transform:translate(-40px,60px) scale(.9)}}
30
+
31
+ .container{max-width:1440px;margin:0 auto;padding:0 28px;position:relative;z-index:1}
32
+
33
+ section{margin-bottom:48px}
34
+
35
+ /* ---- Header ---- */
36
+ header{padding:48px 0 20px;border-bottom:1px solid var(--glass-border)}
37
+ .header-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
38
+ .logo{display:flex;align-items:center;gap:16px}
39
+ .logo-icon{
40
+ width:52px;height:52px;border-radius:14px;
41
+ background:linear-gradient(135deg,var(--blue),var(--purple));
42
+ display:flex;align-items:center;justify-content:center;font-size:24px;
43
+ box-shadow:0 0 40px rgba(88,166,255,.3);
44
+ }
45
+ .logo h1{font-size:1.8rem;font-weight:700;letter-spacing:-.5px;color:var(--text)}
46
+ .logo h1 span{color:var(--blue)}
47
+ .header-meta{display:flex;align-items:center;gap:16px}
48
+ .version-badge{font-size:.75rem;color:var(--text3);background:var(--glass);border:1px solid var(--glass-border);padding:4px 12px;border-radius:20px}
49
+ .connection-indicator{display:flex;align-items:center;gap:8px;padding:6px 16px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-border);font-size:.8rem;color:var(--text2)}
50
+ .conn-dot{width:8px;height:8px;border-radius:50%;background:var(--red);transition:background .3s}
51
+ .conn-dot.connected{background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse-dot 2s ease-in-out infinite}
52
+ @keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.5}}
53
+
54
+ /* ---- Section titles ---- */
55
+ .section-title{font-size:1.25rem;font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:10px}
56
+ .section-title .icon{font-size:1rem;width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
57
+ .section-title .count{font-size:.72rem;font-weight:500;color:var(--text3);background:var(--bg4);padding:2px 8px;border-radius:10px}
58
+
59
+ /* ---- Status Bar ---- */
60
+ .status-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:28px 0}
61
+ .status-card{
62
+ background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);
63
+ padding:22px 18px;text-align:center;position:relative;overflow:hidden;backdrop-filter:blur(20px);
64
+ transition:all .3s ease;
65
+ }
66
+ .status-card:hover{transform:translateY(-3px);border-color:var(--glass-hover);box-shadow:0 16px 48px rgba(0,0,0,.3)}
67
+ .status-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
68
+ .status-card.blue::before{background:linear-gradient(90deg,transparent,var(--blue),transparent)}
69
+ .status-card.green::before{background:linear-gradient(90deg,transparent,var(--green),transparent)}
70
+ .status-card.purple::before{background:linear-gradient(90deg,transparent,var(--purple),transparent)}
71
+ .status-card.orange::before{background:linear-gradient(90deg,transparent,var(--orange),transparent)}
72
+ .stat-number{font-size:2.2rem;font-weight:800;letter-spacing:-1.5px}
73
+ .status-card.blue .stat-number{color:var(--blue)}
74
+ .status-card.green .stat-number{color:var(--green)}
75
+ .status-card.purple .stat-number{color:var(--purple)}
76
+ .status-card.orange .stat-number{color:var(--orange)}
77
+ .stat-label{color:var(--text2);font-size:.78rem;margin-top:4px;font-weight:500;text-transform:uppercase;letter-spacing:.3px}
78
+
79
+ /* ---- Glass card base ---- */
80
+ .glass-card{
81
+ background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);
82
+ padding:22px;backdrop-filter:blur(20px);transition:border-color .25s ease;
83
+ }
84
+ .glass-card:hover{border-color:var(--glass-hover)}
85
+
86
+ /* ---- Kanban (Hypothesis Tracker) ---- */
87
+ .kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
88
+ .kanban-col{background:var(--bg2);border:1px solid var(--glass-border);border-radius:var(--radius);padding:16px;min-height:200px}
89
+ .kanban-header{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--glass-border);display:flex;align-items:center;gap:8px}
90
+ .kanban-header .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
91
+ .kanban-header .dot.pending{background:var(--blue)}
92
+ .kanban-header .dot.confirmed{background:var(--green)}
93
+ .kanban-header .dot.rejected{background:var(--red)}
94
+ .kanban-items{display:flex;flex-direction:column;gap:10px}
95
+ .hyp-card{
96
+ background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm);
97
+ padding:14px;font-size:.83rem;transition:all .2s ease;
98
+ }
99
+ .hyp-card:hover{transform:translateX(4px);border-color:var(--glass-hover)}
100
+ .hyp-card .hyp-title{font-weight:600;color:var(--text);margin-bottom:4px}
101
+ .hyp-card .hyp-detail{color:var(--text2);font-size:.78rem}
102
+ .hyp-card .hyp-confidence{display:inline-block;margin-top:6px;font-size:.7rem;padding:2px 8px;border-radius:10px;font-weight:600}
103
+ .hyp-card .hyp-confidence.high{background:rgba(63,185,80,.15);color:var(--green)}
104
+ .hyp-card .hyp-confidence.medium{background:rgba(88,166,255,.15);color:var(--blue)}
105
+ .hyp-card .hyp-confidence.low{background:rgba(139,143,176,.1);color:var(--text2)}
106
+
107
+ /* ---- Experiment Monitor ---- */
108
+ .exp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:14px}
109
+ .exp-card{
110
+ background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm);
111
+ padding:18px;border-left:3px solid var(--text3);transition:all .25s ease;backdrop-filter:blur(20px);
112
+ }
113
+ .exp-card:hover{transform:translateX(6px);border-color:var(--glass-hover);box-shadow:0 8px 30px rgba(0,0,0,.2)}
114
+ .exp-card.running{border-left-color:var(--blue)}
115
+ .exp-card.completed{border-left-color:var(--green)}
116
+ .exp-card.failed{border-left-color:var(--red)}
117
+ .exp-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
118
+ .exp-status{font-size:.68rem;padding:3px 10px;border-radius:12px;text-transform:uppercase;font-weight:700;letter-spacing:.5px}
119
+ .exp-status.running{background:rgba(88,166,255,.15);color:var(--blue);border:1px solid rgba(88,166,255,.25)}
120
+ .exp-status.completed{background:rgba(63,185,80,.15);color:var(--green);border:1px solid rgba(63,185,80,.25)}
121
+ .exp-status.failed{background:rgba(248,81,73,.15);color:var(--red);border:1px solid rgba(248,81,73,.25)}
122
+ .exp-name{font-weight:600;font-size:.9rem}
123
+ .exp-metrics{display:flex;gap:16px;margin-top:10px;font-size:.78rem;color:var(--text3);flex-wrap:wrap}
124
+ .exp-metrics span{display:flex;align-items:center;gap:4px}
125
+ .exp-metrics .label{color:var(--text3)}.exp-metrics .value{color:var(--text2);font-weight:600}
126
+ .exp-conclusion{margin-top:8px;font-size:.82rem;color:var(--text2);font-style:italic}
127
+
128
+ /* ---- Anomaly Feed ---- */
129
+ .anomaly-feed{max-height:400px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
130
+ .anomaly-feed::-webkit-scrollbar{width:6px}
131
+ .anomaly-feed::-webkit-scrollbar-track{background:transparent}
132
+ .anomaly-feed::-webkit-scrollbar-thumb{background:var(--glass-border);border-radius:3px}
133
+ .anomaly-item{
134
+ padding:12px 16px;border-radius:var(--radius-sm);font-size:.83rem;
135
+ border-left:3px solid var(--text3);background:var(--glass);transition:all .2s ease;
136
+ }
137
+ .anomaly-item:hover{transform:translateX(4px)}
138
+ .anomaly-item.low{border-left-color:var(--text3);background:rgba(110,118,129,.06)}
139
+ .anomaly-item.medium{border-left-color:var(--orange);background:rgba(210,153,34,.06)}
140
+ .anomaly-item.high{border-left-color:#e3872d;background:rgba(227,135,45,.06)}
141
+ .anomaly-item.critical{border-left-color:var(--red);background:rgba(248,81,73,.06)}
142
+ .anomaly-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
143
+ .anomaly-severity{font-size:.68rem;padding:2px 8px;border-radius:10px;text-transform:uppercase;font-weight:700;letter-spacing:.5px}
144
+ .anomaly-severity.low{background:rgba(110,118,129,.15);color:var(--text2)}
145
+ .anomaly-severity.medium{background:rgba(210,153,34,.15);color:var(--orange)}
146
+ .anomaly-severity.high{background:rgba(227,135,45,.2);color:#e3872d}
147
+ .anomaly-severity.critical{background:rgba(248,81,73,.15);color:var(--red)}
148
+ .anomaly-time{font-size:.72rem;color:var(--text3)}
149
+ .anomaly-desc{color:var(--text2)}
150
+
151
+ /* ---- Principles & Anti-patterns ---- */
152
+ .knowledge-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
153
+ .knowledge-list{display:flex;flex-direction:column;gap:10px}
154
+ .principle-item{
155
+ padding:14px;border-radius:var(--radius-sm);background:var(--glass);
156
+ border:1px solid var(--glass-border);border-left:3px solid var(--green);
157
+ font-size:.83rem;transition:all .2s ease;
158
+ }
159
+ .principle-item:hover{transform:translateX(4px);border-color:var(--glass-hover)}
160
+ .principle-item .p-title{font-weight:600;color:var(--text);margin-bottom:2px}
161
+ .principle-item .p-detail{color:var(--text2);font-size:.78rem}
162
+ .principle-item .p-confidence{font-size:.7rem;color:var(--text3);margin-top:4px}
163
+ .anti-pattern-item{
164
+ padding:14px;border-radius:var(--radius-sm);background:var(--glass);
165
+ border:1px solid var(--glass-border);border-left:3px solid var(--red);
166
+ font-size:.83rem;transition:all .2s ease;
167
+ }
168
+ .anti-pattern-item:hover{transform:translateX(4px);border-color:var(--glass-hover)}
169
+ .anti-pattern-item .ap-title{font-weight:600;color:var(--text);margin-bottom:2px}
170
+ .anti-pattern-item .ap-detail{color:var(--text2);font-size:.78rem}
171
+
172
+ /* ---- Journal ---- */
173
+ .journal-list{display:flex;flex-direction:column;gap:12px}
174
+ .journal-entry{
175
+ padding:16px;border-radius:var(--radius-sm);background:var(--glass);
176
+ border:1px solid var(--glass-border);transition:all .2s ease;
177
+ }
178
+ .journal-entry:hover{border-color:var(--glass-hover)}
179
+ .journal-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
180
+ .journal-time{font-size:.72rem;color:var(--text3);font-family:'SFMono-Regular',Consolas,monospace}
181
+ .significance{font-size:.68rem;padding:2px 10px;border-radius:12px;text-transform:uppercase;font-weight:700;letter-spacing:.5px}
182
+ .significance.routine{background:rgba(139,143,176,.1);color:var(--text2);border:1px solid rgba(139,143,176,.15)}
183
+ .significance.notable{background:rgba(88,166,255,.12);color:var(--blue);border:1px solid rgba(88,166,255,.2)}
184
+ .significance.breakthrough{background:rgba(210,168,255,.12);color:var(--purple);border:1px solid rgba(210,168,255,.2)}
185
+ .significance.paradigm_shift{background:rgba(71,229,255,.12);color:var(--cyan);border:1px solid rgba(71,229,255,.2)}
186
+ .journal-body{color:var(--text2);font-size:.85rem;line-height:1.5}
187
+
188
+ /* ---- Insight Summary ---- */
189
+ .insight-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
190
+ .insight-card{
191
+ background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm);
192
+ padding:18px;border-left:3px solid var(--purple);transition:all .25s ease;backdrop-filter:blur(20px);
193
+ }
194
+ .insight-card:hover{transform:translateX(6px);border-color:var(--glass-hover);box-shadow:0 8px 30px rgba(0,0,0,.2)}
195
+ .insight-card .i-title{font-weight:600;font-size:.9rem;margin-bottom:4px}
196
+ .insight-card .i-body{color:var(--text2);font-size:.83rem}
197
+ .insight-card .i-meta{font-size:.72rem;color:var(--text3);margin-top:8px}
198
+
199
+ /* ---- Correlations Table ---- */
200
+ .corr-table{width:100%;border-collapse:collapse}
201
+ .corr-table thead th{
202
+ text-align:left;font-size:.72rem;font-weight:600;color:var(--text3);
203
+ text-transform:uppercase;letter-spacing:.4px;padding:10px 14px;
204
+ border-bottom:1px solid var(--glass-border);
205
+ }
206
+ .corr-table tbody td{
207
+ padding:12px 14px;font-size:.83rem;border-bottom:1px solid rgba(100,120,255,.06);vertical-align:middle;
208
+ }
209
+ .corr-table tbody tr:last-child td{border-bottom:none}
210
+ .corr-table tbody tr:hover{background:rgba(255,255,255,.02)}
211
+ .corr-source{font-weight:600;color:var(--text)}
212
+ .corr-arrow{color:var(--text3);margin:0 4px}
213
+ .strength-bar{width:70px;height:5px;border-radius:3px;background:var(--bg4);overflow:hidden;display:inline-block;vertical-align:middle;margin-right:6px}
214
+ .strength-fill{height:100%;border-radius:3px;background:var(--blue)}
215
+ .strength-val{font-size:.72rem;color:var(--text3)}
216
+ .lag-val{color:var(--text2);font-size:.8rem}
217
+
218
+ /* ---- Agenda ---- */
219
+ .agenda-list{display:flex;flex-direction:column;gap:10px}
220
+ .agenda-item{
221
+ display:grid;grid-template-columns:48px 1fr auto auto;gap:16px;align-items:center;
222
+ padding:14px 18px;border-radius:var(--radius-sm);background:var(--glass);
223
+ border:1px solid var(--glass-border);transition:all .2s ease;
224
+ }
225
+ .agenda-item:hover{transform:translateX(4px);border-color:var(--glass-hover)}
226
+ .agenda-priority{font-size:1.3rem;font-weight:800;text-align:center}
227
+ .agenda-priority.high{color:var(--orange)}
228
+ .agenda-priority.medium{color:var(--blue)}
229
+ .agenda-priority.low{color:var(--text3)}
230
+ .agenda-question{font-size:.85rem;color:var(--text)}
231
+ .agenda-type{font-size:.68rem;padding:3px 10px;border-radius:12px;text-transform:uppercase;font-weight:600;letter-spacing:.4px;background:var(--bg4);color:var(--text2);white-space:nowrap}
232
+ .agenda-feasibility{font-size:.78rem;color:var(--text3);white-space:nowrap}
233
+
234
+ /* ---- Empty state ---- */
235
+ .empty{color:var(--text3);font-style:italic;padding:24px;text-align:center;font-size:.85rem}
236
+
237
+ /* ---- Footer ---- */
238
+ footer{text-align:center;padding:32px 0;border-top:1px solid var(--glass-border)}
239
+ footer p{color:var(--text3);font-size:.78rem}
240
+
241
+ /* ---- Responsive ---- */
242
+ @media(max-width:960px){
243
+ .kanban{grid-template-columns:1fr}
244
+ .knowledge-grid{grid-template-columns:1fr}
245
+ .agenda-item{grid-template-columns:40px 1fr;gap:10px}
246
+ .agenda-type,.agenda-feasibility{grid-column:2}
247
+ }
248
+ @media(max-width:600px){
249
+ .status-bar{grid-template-columns:1fr 1fr}
250
+ .exp-list{grid-template-columns:1fr}
251
+ .insight-list{grid-template-columns:1fr}
252
+ .corr-table thead{display:none}
253
+ .corr-table tbody tr{display:flex;flex-wrap:wrap;gap:4px 12px;padding:10px 0}
254
+ .corr-table tbody td{border-bottom:none;padding:2px 0}
255
+ .header-row{flex-direction:column;align-items:flex-start}
256
+ }
257
+ </style>
258
+ </head>
259
+ <body>
260
+
261
+ <canvas id="neural-bg"></canvas>
262
+ <div class="orb orb-1"></div>
263
+ <div class="orb orb-2"></div>
264
+ <div class="orb orb-3"></div>
265
+
266
+ <div class="container">
267
+
268
+ <!-- ========== Header ========== -->
269
+ <header>
270
+ <div class="header-row">
271
+ <div class="logo">
272
+ <div class="logo-icon">&#128300;</div>
273
+ <h1><span>{{BRAIN_NAME}}</span> Research</h1>
274
+ </div>
275
+ <div class="header-meta">
276
+ <span class="version-badge">v{{VERSION}}</span>
277
+ <div class="connection-indicator">
278
+ <span class="conn-dot" id="conn-dot"></span>
279
+ <span id="conn-text">Disconnected</span>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </header>
284
+
285
+ <!-- ========== Research Status Bar ========== -->
286
+ <div class="status-bar">
287
+ <div class="status-card blue">
288
+ <div class="stat-number" id="stat-cycles">{{CYCLES}}</div>
289
+ <div class="stat-label">Research Cycles</div>
290
+ </div>
291
+ <div class="status-card green">
292
+ <div class="stat-number" id="stat-discoveries">{{DISCOVERIES}}</div>
293
+ <div class="stat-label">Discoveries</div>
294
+ </div>
295
+ <div class="status-card purple">
296
+ <div class="stat-number" id="stat-confirmation">{{CONFIRMATION_RATE}}</div>
297
+ <div class="stat-label">Confirmation Rate</div>
298
+ </div>
299
+ <div class="status-card orange">
300
+ <div class="stat-number" id="stat-anomalies">{{ANOMALIES}}</div>
301
+ <div class="stat-label">Anomalies</div>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- ========== Hypothesis Tracker ========== -->
306
+ <section id="hypotheses">
307
+ <div class="section-title">
308
+ <div class="icon" style="background:rgba(88,166,255,.1)">&#128161;</div>
309
+ Hypothesis Tracker
310
+ </div>
311
+ <div class="kanban">
312
+ <div class="kanban-col">
313
+ <div class="kanban-header"><span class="dot pending"></span> Pending</div>
314
+ <div class="kanban-items" id="hyp-pending"></div>
315
+ </div>
316
+ <div class="kanban-col">
317
+ <div class="kanban-header"><span class="dot confirmed"></span> Confirmed</div>
318
+ <div class="kanban-items" id="hyp-confirmed"></div>
319
+ </div>
320
+ <div class="kanban-col">
321
+ <div class="kanban-header"><span class="dot rejected"></span> Rejected</div>
322
+ <div class="kanban-items" id="hyp-rejected"></div>
323
+ </div>
324
+ </div>
325
+ </section>
326
+
327
+ <!-- ========== Experiment Monitor ========== -->
328
+ <section id="experiments">
329
+ <div class="section-title">
330
+ <div class="icon" style="background:rgba(63,185,80,.1)">&#9879;</div>
331
+ Experiment Monitor
332
+ <span class="count" id="exp-count">0</span>
333
+ </div>
334
+ <div class="exp-list" id="exp-list"></div>
335
+ </section>
336
+
337
+ <!-- ========== Anomaly Feed ========== -->
338
+ <section id="anomalies">
339
+ <div class="section-title">
340
+ <div class="icon" style="background:rgba(210,153,34,.1)">&#9888;</div>
341
+ Anomaly Feed
342
+ <span class="count" id="anomaly-count">0</span>
343
+ </div>
344
+ <div class="glass-card">
345
+ <div class="anomaly-feed" id="anomaly-feed"></div>
346
+ </div>
347
+ </section>
348
+
349
+ <!-- ========== Knowledge Principles ========== -->
350
+ <section id="knowledge">
351
+ <div class="section-title">
352
+ <div class="icon" style="background:rgba(63,185,80,.1)">&#128218;</div>
353
+ Knowledge Principles
354
+ </div>
355
+ <div class="knowledge-grid">
356
+ <div>
357
+ <div class="section-title" style="font-size:1rem;margin-bottom:12px">
358
+ <span style="color:var(--green)">&#10003;</span> Principles
359
+ </div>
360
+ <div class="knowledge-list" id="principles-list"></div>
361
+ </div>
362
+ <div>
363
+ <div class="section-title" style="font-size:1rem;margin-bottom:12px">
364
+ <span style="color:var(--red)">&#10007;</span> Anti-Patterns
365
+ </div>
366
+ <div class="knowledge-list" id="anti-patterns-list"></div>
367
+ </div>
368
+ </div>
369
+ </section>
370
+
371
+ <!-- ========== Research Journal ========== -->
372
+ <section id="journal">
373
+ <div class="section-title">
374
+ <div class="icon" style="background:rgba(210,168,255,.1)">&#128221;</div>
375
+ Research Journal
376
+ <span class="count" id="journal-count">0</span>
377
+ </div>
378
+ <div class="glass-card">
379
+ <div class="journal-list" id="journal-list"></div>
380
+ </div>
381
+ </section>
382
+
383
+ <!-- ========== Self-Insight Summary ========== -->
384
+ <section id="insights">
385
+ <div class="section-title">
386
+ <div class="icon" style="background:rgba(210,168,255,.1)">&#129504;</div>
387
+ Self-Insight Summary
388
+ </div>
389
+ <div class="insight-list" id="insight-list"></div>
390
+ </section>
391
+
392
+ <!-- ========== Cross-Domain Correlations ========== -->
393
+ <section id="correlations">
394
+ <div class="section-title">
395
+ <div class="icon" style="background:rgba(71,229,255,.1)">&#128279;</div>
396
+ Cross-Domain Correlations
397
+ <span class="count" id="corr-count">0</span>
398
+ </div>
399
+ <div class="glass-card">
400
+ <table class="corr-table">
401
+ <thead>
402
+ <tr>
403
+ <th>Source</th>
404
+ <th>Target</th>
405
+ <th>Event Type</th>
406
+ <th>Strength</th>
407
+ <th>Lag</th>
408
+ <th>Count</th>
409
+ </tr>
410
+ </thead>
411
+ <tbody id="corr-body"></tbody>
412
+ </table>
413
+ </div>
414
+ </section>
415
+
416
+ <!-- ========== Research Agenda ========== -->
417
+ <section id="agenda">
418
+ <div class="section-title">
419
+ <div class="icon" style="background:rgba(88,166,255,.1)">&#128203;</div>
420
+ Research Agenda
421
+ </div>
422
+ <div class="agenda-list" id="agenda-list"></div>
423
+ </section>
424
+
425
+ <footer>
426
+ <p>{{BRAIN_NAME}} Research Dashboard &mdash; Powered by Autonomous Research Engine</p>
427
+ </footer>
428
+
429
+ </div>
430
+
431
+ <script>
432
+ (function() {
433
+ 'use strict';
434
+
435
+ // ---- Parse embedded JSON data ----
436
+ var hypotheses = {{HYPOTHESES_JSON}};
437
+ var experiments = {{EXPERIMENTS_JSON}};
438
+ var anomalies = {{ANOMALIES_JSON}};
439
+ var principles = {{PRINCIPLES_JSON}};
440
+ var antiPatterns = {{ANTI_PATTERNS_JSON}};
441
+ var journal = {{JOURNAL_JSON}};
442
+ var insights = {{INSIGHTS_JSON}};
443
+ var correlations = {{CORRELATIONS_JSON}};
444
+ var agenda = {{AGENDA_JSON}};
445
+
446
+ // ---- Helpers ----
447
+ function esc(s) { var d = document.createElement('div'); d.textContent = s || ''; return d.innerHTML; }
448
+ function fmtTime(ts) { if (!ts) return ''; try { return new Date(ts).toLocaleString(); } catch(e) { return String(ts); } }
449
+ function confClass(c) { if (c >= 0.7) return 'high'; if (c >= 0.4) return 'medium'; return 'low'; }
450
+ function prioClass(p) { if (p >= 0.7) return 'high'; if (p >= 0.4) return 'medium'; return 'low'; }
451
+
452
+ // ---- Render Hypotheses ----
453
+ function renderHypotheses() {
454
+ var cols = { pending: document.getElementById('hyp-pending'), confirmed: document.getElementById('hyp-confirmed'), rejected: document.getElementById('hyp-rejected') };
455
+ Object.values(cols).forEach(function(c) { c.innerHTML = ''; });
456
+ (hypotheses || []).forEach(function(h) {
457
+ var status = (h.status || 'pending').toLowerCase();
458
+ var col = cols[status] || cols.pending;
459
+ var conf = h.confidence != null ? h.confidence : 0;
460
+ col.innerHTML += '<div class="hyp-card">' +
461
+ '<div class="hyp-title">' + esc(h.hypothesis || h.title || h.name) + '</div>' +
462
+ '<div class="hyp-detail">' + esc(h.evidence || h.detail || '') + '</div>' +
463
+ '<span class="hyp-confidence ' + confClass(conf) + '">' + (conf * 100).toFixed(0) + '% confidence</span>' +
464
+ '</div>';
465
+ });
466
+ Object.values(cols).forEach(function(c) { if (!c.innerHTML) c.innerHTML = '<div class="empty">None</div>'; });
467
+ }
468
+
469
+ // ---- Render Experiments ----
470
+ function renderExperiments() {
471
+ var el = document.getElementById('exp-list');
472
+ if (!experiments || !experiments.length) { el.innerHTML = '<div class="empty">No experiments running</div>'; document.getElementById('exp-count').textContent = '0'; return; }
473
+ document.getElementById('exp-count').textContent = experiments.length;
474
+ el.innerHTML = experiments.map(function(e) {
475
+ var st = (e.status || 'running').toLowerCase();
476
+ return '<div class="exp-card ' + st + '">' +
477
+ '<div class="exp-header">' +
478
+ '<span class="exp-status ' + st + '">' + esc(st) + '</span>' +
479
+ '<span class="exp-name">' + esc(e.name || e.title || 'Experiment') + '</span>' +
480
+ '</div>' +
481
+ '<div class="exp-metrics">' +
482
+ (e.p_value != null ? '<span><span class="label">p-value:</span> <span class="value">' + Number(e.p_value).toFixed(4) + '</span></span>' : '') +
483
+ (e.effect_size != null ? '<span><span class="label">effect:</span> <span class="value">' + Number(e.effect_size).toFixed(3) + '</span></span>' : '') +
484
+ (e.samples != null ? '<span><span class="label">n=</span><span class="value">' + e.samples + '</span></span>' : '') +
485
+ '</div>' +
486
+ (e.conclusion ? '<div class="exp-conclusion">' + esc(e.conclusion) + '</div>' : '') +
487
+ '</div>';
488
+ }).join('');
489
+ }
490
+
491
+ // ---- Render Anomalies ----
492
+ function renderAnomalies() {
493
+ var el = document.getElementById('anomaly-feed');
494
+ if (!anomalies || !anomalies.length) { el.innerHTML = '<div class="empty">No anomalies detected</div>'; document.getElementById('anomaly-count').textContent = '0'; return; }
495
+ document.getElementById('anomaly-count').textContent = anomalies.length;
496
+ el.innerHTML = anomalies.map(function(a) {
497
+ var sev = (a.severity || 'low').toLowerCase();
498
+ return '<div class="anomaly-item ' + sev + '">' +
499
+ '<div class="anomaly-header">' +
500
+ '<span class="anomaly-severity ' + sev + '">' + esc(sev) + '</span>' +
501
+ '<span class="anomaly-time">' + fmtTime(a.detected_at || a.timestamp) + '</span>' +
502
+ '</div>' +
503
+ '<div class="anomaly-desc">' + esc(a.description || a.message) + '</div>' +
504
+ '</div>';
505
+ }).join('');
506
+ }
507
+
508
+ // ---- Render Principles ----
509
+ function renderPrinciples() {
510
+ var pl = document.getElementById('principles-list');
511
+ var al = document.getElementById('anti-patterns-list');
512
+ if (!principles || !principles.length) { pl.innerHTML = '<div class="empty">No principles distilled yet</div>'; }
513
+ else { pl.innerHTML = principles.map(function(p) {
514
+ return '<div class="principle-item">' +
515
+ '<div class="p-title">' + esc(p.principle || p.title || p.name) + '</div>' +
516
+ '<div class="p-detail">' + esc(p.evidence || p.detail || '') + '</div>' +
517
+ (p.confidence != null ? '<div class="p-confidence">Confidence: ' + (p.confidence * 100).toFixed(0) + '%</div>' : '') +
518
+ '</div>';
519
+ }).join(''); }
520
+ if (!antiPatterns || !antiPatterns.length) { al.innerHTML = '<div class="empty">No anti-patterns identified</div>'; }
521
+ else { al.innerHTML = antiPatterns.map(function(a) {
522
+ return '<div class="anti-pattern-item">' +
523
+ '<div class="ap-title">' + esc(a.pattern || a.title || a.name) + '</div>' +
524
+ '<div class="ap-detail">' + esc(a.description || a.detail || '') + '</div>' +
525
+ '</div>';
526
+ }).join(''); }
527
+ }
528
+
529
+ // ---- Render Journal ----
530
+ function renderJournal() {
531
+ var el = document.getElementById('journal-list');
532
+ if (!journal || !journal.length) { el.innerHTML = '<div class="empty">No journal entries</div>'; document.getElementById('journal-count').textContent = '0'; return; }
533
+ document.getElementById('journal-count').textContent = journal.length;
534
+ el.innerHTML = journal.map(function(j) {
535
+ var sig = (j.significance || 'routine').toLowerCase().replace(/ /g, '_');
536
+ return '<div class="journal-entry">' +
537
+ '<div class="journal-header">' +
538
+ '<span class="journal-time">' + fmtTime(j.timestamp || j.created_at) + '</span>' +
539
+ '<span class="significance ' + esc(sig) + '">' + esc(sig.replace(/_/g, ' ')) + '</span>' +
540
+ '</div>' +
541
+ '<div class="journal-body">' + esc(j.entry || j.content || j.summary) + '</div>' +
542
+ '</div>';
543
+ }).join('');
544
+ }
545
+
546
+ // ---- Render Insights ----
547
+ function renderInsights() {
548
+ var el = document.getElementById('insight-list');
549
+ if (!insights || !insights.length) { el.innerHTML = '<div class="empty">No self-insights yet</div>'; return; }
550
+ el.innerHTML = insights.map(function(i) {
551
+ return '<div class="insight-card">' +
552
+ '<div class="i-title">' + esc(i.title || i.insight || i.type) + '</div>' +
553
+ '<div class="i-body">' + esc(i.description || i.detail || i.content) + '</div>' +
554
+ '<div class="i-meta">' + fmtTime(i.timestamp || i.created_at) + (i.category ? ' &middot; ' + esc(i.category) : '') + '</div>' +
555
+ '</div>';
556
+ }).join('');
557
+ }
558
+
559
+ // ---- Render Correlations ----
560
+ function renderCorrelations() {
561
+ var el = document.getElementById('corr-body');
562
+ if (!correlations || !correlations.length) { el.innerHTML = '<tr><td colspan="6" class="empty">No correlations detected</td></tr>'; document.getElementById('corr-count').textContent = '0'; return; }
563
+ document.getElementById('corr-count').textContent = correlations.length;
564
+ el.innerHTML = correlations.map(function(c) {
565
+ var str = c.strength != null ? c.strength : 0;
566
+ var pct = Math.round(str * 100);
567
+ return '<tr>' +
568
+ '<td><span class="corr-source">' + esc(c.source || c.from_brain) + '</span></td>' +
569
+ '<td><span class="corr-source">' + esc(c.target || c.to_brain) + '</span></td>' +
570
+ '<td>' + esc(c.event_type || c.type || '') + '</td>' +
571
+ '<td><span class="strength-bar"><span class="strength-fill" style="width:' + pct + '%"></span></span><span class="strength-val">' + pct + '%</span></td>' +
572
+ '<td class="lag-val">' + (c.lag != null ? c.lag + 'ms' : '--') + '</td>' +
573
+ '<td style="font-weight:600">' + (c.count || 0) + '</td>' +
574
+ '</tr>';
575
+ }).join('');
576
+ }
577
+
578
+ // ---- Render Agenda ----
579
+ function renderAgenda() {
580
+ var el = document.getElementById('agenda-list');
581
+ if (!agenda || !agenda.length) { el.innerHTML = '<div class="empty">No research agenda items</div>'; return; }
582
+ el.innerHTML = agenda.map(function(a) {
583
+ var prio = a.priority != null ? a.priority : 0;
584
+ return '<div class="agenda-item">' +
585
+ '<div class="agenda-priority ' + prioClass(prio) + '">' + (typeof prio === 'number' ? prio.toFixed(1) : esc(String(prio))) + '</div>' +
586
+ '<div class="agenda-question">' + esc(a.question || a.title) + '</div>' +
587
+ '<span class="agenda-type">' + esc(a.type || 'general') + '</span>' +
588
+ '<span class="agenda-feasibility">Feasibility: ' + (a.feasibility != null ? (a.feasibility * 100).toFixed(0) + '%' : '--') + '</span>' +
589
+ '</div>';
590
+ }).join('');
591
+ }
592
+
593
+ // ---- Initial render ----
594
+ renderHypotheses();
595
+ renderExperiments();
596
+ renderAnomalies();
597
+ renderPrinciples();
598
+ renderJournal();
599
+ renderInsights();
600
+ renderCorrelations();
601
+ renderAgenda();
602
+
603
+ // ---- Neural Network Background ----
604
+ (function() {
605
+ var canvas = document.getElementById('neural-bg');
606
+ var ctx = canvas.getContext('2d');
607
+ var W, H, nodes = [], mouse = { x: -1000, y: -1000 };
608
+ function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
609
+ resize();
610
+ window.addEventListener('resize', resize);
611
+ document.addEventListener('mousemove', function(e) { mouse.x = e.clientX; mouse.y = e.clientY; });
612
+ var count = Math.min(60, Math.floor(window.innerWidth / 22));
613
+ for (var i = 0; i < count; i++) {
614
+ nodes.push({ x: Math.random() * W, y: Math.random() * H, vx: (Math.random() - .5) * .3, vy: (Math.random() - .5) * .3, r: Math.random() * 1.5 + .8, p: Math.random() * Math.PI * 2 });
615
+ }
616
+ function draw() {
617
+ ctx.clearRect(0, 0, W, H);
618
+ for (var i = 0; i < nodes.length; i++) {
619
+ for (var j = i + 1; j < nodes.length; j++) {
620
+ var dx = nodes[i].x - nodes[j].x, dy = nodes[i].y - nodes[j].y, d = Math.sqrt(dx * dx + dy * dy);
621
+ if (d < 160) { ctx.strokeStyle = 'rgba(88,166,255,' + (1 - d / 160) * .12 + ')'; ctx.lineWidth = .5; ctx.beginPath(); ctx.moveTo(nodes[i].x, nodes[i].y); ctx.lineTo(nodes[j].x, nodes[j].y); ctx.stroke(); }
622
+ }
623
+ var mdx = nodes[i].x - mouse.x, mdy = nodes[i].y - mouse.y, md = Math.sqrt(mdx * mdx + mdy * mdy);
624
+ if (md < 180) { ctx.strokeStyle = 'rgba(210,168,255,' + (1 - md / 180) * .3 + ')'; ctx.lineWidth = .8; ctx.beginPath(); ctx.moveTo(nodes[i].x, nodes[i].y); ctx.lineTo(mouse.x, mouse.y); ctx.stroke(); }
625
+ }
626
+ var t = Date.now() * .001;
627
+ for (var k = 0; k < nodes.length; k++) {
628
+ var n = nodes[k];
629
+ ctx.fillStyle = 'rgba(88,166,255,' + (0.35 + Math.sin(t * 1.2 + n.p) * .25) + ')';
630
+ ctx.beginPath(); ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2); ctx.fill();
631
+ n.x += n.vx; n.y += n.vy;
632
+ if (n.x < 0 || n.x > W) n.vx *= -1;
633
+ if (n.y < 0 || n.y > H) n.vy *= -1;
634
+ }
635
+ requestAnimationFrame(draw);
636
+ }
637
+ draw();
638
+ })();
639
+
640
+ // ---- SSE Real-time Updates ----
641
+ function connectSSE() {
642
+ var dot = document.getElementById('conn-dot');
643
+ var txt = document.getElementById('conn-text');
644
+ var es;
645
+ try { es = new EventSource('/events'); } catch(e) { return; }
646
+
647
+ es.onopen = function() {
648
+ dot.classList.add('connected');
649
+ txt.textContent = 'Connected';
650
+ };
651
+
652
+ es.onerror = function() {
653
+ dot.classList.remove('connected');
654
+ txt.textContent = 'Reconnecting...';
655
+ };
656
+
657
+ es.addEventListener('research:status', function(e) {
658
+ try {
659
+ var d = JSON.parse(e.data);
660
+ if (d.cycles != null) document.getElementById('stat-cycles').textContent = d.cycles;
661
+ if (d.discoveries != null) document.getElementById('stat-discoveries').textContent = d.discoveries;
662
+ if (d.confirmation_rate != null) document.getElementById('stat-confirmation').textContent = d.confirmation_rate;
663
+ if (d.anomalies != null) document.getElementById('stat-anomalies').textContent = d.anomalies;
664
+ } catch(ex) {}
665
+ });
666
+
667
+ es.addEventListener('research:hypothesis', function(e) {
668
+ try {
669
+ var h = JSON.parse(e.data);
670
+ hypotheses.push(h);
671
+ renderHypotheses();
672
+ } catch(ex) {}
673
+ });
674
+
675
+ es.addEventListener('research:experiment', function(e) {
676
+ try {
677
+ var exp = JSON.parse(e.data);
678
+ var idx = experiments.findIndex(function(x) { return x.id === exp.id; });
679
+ if (idx >= 0) experiments[idx] = exp; else experiments.unshift(exp);
680
+ renderExperiments();
681
+ } catch(ex) {}
682
+ });
683
+
684
+ es.addEventListener('research:anomaly', function(e) {
685
+ try {
686
+ var a = JSON.parse(e.data);
687
+ anomalies.unshift(a);
688
+ if (anomalies.length > 50) anomalies.pop();
689
+ renderAnomalies();
690
+ } catch(ex) {}
691
+ });
692
+
693
+ es.addEventListener('research:journal', function(e) {
694
+ try {
695
+ var j = JSON.parse(e.data);
696
+ journal.unshift(j);
697
+ if (journal.length > 30) journal.pop();
698
+ renderJournal();
699
+ } catch(ex) {}
700
+ });
701
+
702
+ es.addEventListener('research:insight', function(e) {
703
+ try {
704
+ var ins = JSON.parse(e.data);
705
+ insights.unshift(ins);
706
+ renderInsights();
707
+ } catch(ex) {}
708
+ });
709
+
710
+ es.addEventListener('research:correlation', function(e) {
711
+ try {
712
+ var c = JSON.parse(e.data);
713
+ correlations.push(c);
714
+ renderCorrelations();
715
+ } catch(ex) {}
716
+ });
717
+
718
+ es.addEventListener('message', function(e) {
719
+ try {
720
+ var d = JSON.parse(e.data);
721
+ if (d.type === 'research:status' && d.data) {
722
+ var s = d.data;
723
+ if (s.cycles != null) document.getElementById('stat-cycles').textContent = s.cycles;
724
+ if (s.discoveries != null) document.getElementById('stat-discoveries').textContent = s.discoveries;
725
+ if (s.confirmation_rate != null) document.getElementById('stat-confirmation').textContent = s.confirmation_rate;
726
+ if (s.anomalies != null) document.getElementById('stat-anomalies').textContent = s.anomalies;
727
+ }
728
+ } catch(ex) {}
729
+ });
730
+ }
731
+ connectSSE();
732
+ })();
733
+ </script>
734
+ </body>
735
+ </html>