@timmeck/brain-core 2.0.4 → 2.1.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,859 @@
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 Ecosystem Hub</title>
7
+ <style>
8
+ *,
9
+ *::before,
10
+ *::after {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ :root {
17
+ --bg-primary: #0d1117;
18
+ --bg-card: #161b22;
19
+ --bg-elevated: #1c2129;
20
+ --border-color: #30363d;
21
+ --text-primary: #c9d1d9;
22
+ --text-secondary: #8b949e;
23
+ --text-muted: #6e7681;
24
+ --color-brain: #58a6ff;
25
+ --color-trading: #3fb950;
26
+ --color-marketing: #d2a8ff;
27
+ --color-green: #3fb950;
28
+ --color-yellow: #d29922;
29
+ --color-red: #f85149;
30
+ }
31
+
32
+ body {
33
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
34
+ background-color: var(--bg-primary);
35
+ color: var(--text-primary);
36
+ line-height: 1.6;
37
+ min-height: 100vh;
38
+ display: flex;
39
+ flex-direction: column;
40
+ }
41
+
42
+ /* ---- Header ---- */
43
+ header {
44
+ display: flex;
45
+ align-items: center;
46
+ justify-content: space-between;
47
+ padding: 20px 32px;
48
+ border-bottom: 1px solid var(--border-color);
49
+ background-color: var(--bg-card);
50
+ }
51
+
52
+ header h1 {
53
+ font-size: 1.5rem;
54
+ font-weight: 600;
55
+ letter-spacing: -0.02em;
56
+ }
57
+
58
+ .health-badge {
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 10px;
62
+ padding: 8px 16px;
63
+ border-radius: 20px;
64
+ border: 1px solid var(--border-color);
65
+ background-color: var(--bg-elevated);
66
+ font-size: 0.875rem;
67
+ }
68
+
69
+ .health-badge-score {
70
+ font-weight: 700;
71
+ font-size: 1.1rem;
72
+ color: var(--color-green);
73
+ }
74
+
75
+ .health-badge-label {
76
+ color: var(--text-secondary);
77
+ }
78
+
79
+ /* ---- Main Content ---- */
80
+ main {
81
+ flex: 1;
82
+ padding: 24px 32px;
83
+ display: flex;
84
+ flex-direction: column;
85
+ gap: 28px;
86
+ max-width: 1400px;
87
+ width: 100%;
88
+ margin: 0 auto;
89
+ }
90
+
91
+ section h2 {
92
+ font-size: 1.15rem;
93
+ font-weight: 600;
94
+ margin-bottom: 14px;
95
+ color: var(--text-primary);
96
+ display: flex;
97
+ align-items: center;
98
+ gap: 8px;
99
+ }
100
+
101
+ section h2 .counter {
102
+ font-size: 0.8rem;
103
+ font-weight: 400;
104
+ color: var(--text-muted);
105
+ background: var(--bg-elevated);
106
+ padding: 2px 8px;
107
+ border-radius: 10px;
108
+ }
109
+
110
+ /* ---- Brain Status Cards ---- */
111
+ .brain-cards {
112
+ display: grid;
113
+ grid-template-columns: repeat(3, 1fr);
114
+ gap: 20px;
115
+ }
116
+
117
+ .brain-card {
118
+ background-color: var(--bg-card);
119
+ border: 1px solid var(--border-color);
120
+ border-radius: 8px;
121
+ padding: 20px;
122
+ transition: border-color 0.2s ease;
123
+ }
124
+
125
+ .brain-card:hover {
126
+ border-color: var(--text-muted);
127
+ }
128
+
129
+ .brain-card[data-brain="brain"] .brain-card-accent {
130
+ color: var(--color-brain);
131
+ }
132
+
133
+ .brain-card[data-brain="trading"] .brain-card-accent {
134
+ color: var(--color-trading);
135
+ }
136
+
137
+ .brain-card[data-brain="marketing"] .brain-card-accent {
138
+ color: var(--color-marketing);
139
+ }
140
+
141
+ .brain-card[data-brain="brain"] {
142
+ border-top: 3px solid var(--color-brain);
143
+ }
144
+
145
+ .brain-card[data-brain="trading"] {
146
+ border-top: 3px solid var(--color-trading);
147
+ }
148
+
149
+ .brain-card[data-brain="marketing"] {
150
+ border-top: 3px solid var(--color-marketing);
151
+ }
152
+
153
+ .brain-card-header {
154
+ display: flex;
155
+ align-items: center;
156
+ justify-content: space-between;
157
+ margin-bottom: 16px;
158
+ }
159
+
160
+ .brain-card-name {
161
+ display: flex;
162
+ align-items: center;
163
+ gap: 8px;
164
+ font-weight: 600;
165
+ font-size: 1.05rem;
166
+ }
167
+
168
+ .status-dot {
169
+ width: 10px;
170
+ height: 10px;
171
+ border-radius: 50%;
172
+ background-color: var(--color-red);
173
+ flex-shrink: 0;
174
+ }
175
+
176
+ .status-dot.online {
177
+ background-color: var(--color-green);
178
+ box-shadow: 0 0 6px rgba(63, 185, 80, 0.4);
179
+ }
180
+
181
+ .status-dot.offline {
182
+ background-color: var(--color-red);
183
+ }
184
+
185
+ .brain-card-version {
186
+ font-size: 0.75rem;
187
+ color: var(--text-muted);
188
+ background: var(--bg-elevated);
189
+ padding: 2px 8px;
190
+ border-radius: 4px;
191
+ }
192
+
193
+ .brain-card-stats {
194
+ display: grid;
195
+ grid-template-columns: 1fr 1fr;
196
+ gap: 10px;
197
+ }
198
+
199
+ .brain-stat {
200
+ display: flex;
201
+ flex-direction: column;
202
+ }
203
+
204
+ .brain-stat-label {
205
+ font-size: 0.75rem;
206
+ color: var(--text-muted);
207
+ text-transform: uppercase;
208
+ letter-spacing: 0.04em;
209
+ }
210
+
211
+ .brain-stat-value {
212
+ font-size: 1rem;
213
+ font-weight: 600;
214
+ color: var(--text-primary);
215
+ }
216
+
217
+ .brain-card-key-metric {
218
+ margin-top: 14px;
219
+ padding-top: 14px;
220
+ border-top: 1px solid var(--border-color);
221
+ display: flex;
222
+ align-items: center;
223
+ justify-content: space-between;
224
+ }
225
+
226
+ .key-metric-label {
227
+ font-size: 0.8rem;
228
+ color: var(--text-secondary);
229
+ }
230
+
231
+ .key-metric-value {
232
+ font-weight: 700;
233
+ font-size: 1.1rem;
234
+ }
235
+
236
+ /* ---- Ecosystem Health ---- */
237
+ .health-section {
238
+ background-color: var(--bg-card);
239
+ border: 1px solid var(--border-color);
240
+ border-radius: 8px;
241
+ padding: 24px;
242
+ }
243
+
244
+ .health-grid {
245
+ display: grid;
246
+ grid-template-columns: auto 1fr auto;
247
+ gap: 28px;
248
+ align-items: start;
249
+ }
250
+
251
+ .health-gauge {
252
+ display: flex;
253
+ flex-direction: column;
254
+ align-items: center;
255
+ gap: 6px;
256
+ }
257
+
258
+ .health-gauge svg {
259
+ display: block;
260
+ }
261
+
262
+ .health-score-display {
263
+ position: relative;
264
+ width: 140px;
265
+ height: 80px;
266
+ }
267
+
268
+ .health-score-number {
269
+ position: absolute;
270
+ bottom: 0;
271
+ left: 50%;
272
+ transform: translateX(-50%);
273
+ font-size: 2.4rem;
274
+ font-weight: 700;
275
+ line-height: 1;
276
+ color: var(--color-green);
277
+ }
278
+
279
+ .health-status-text {
280
+ font-size: 0.9rem;
281
+ font-weight: 600;
282
+ text-transform: uppercase;
283
+ letter-spacing: 0.06em;
284
+ color: var(--color-green);
285
+ }
286
+
287
+ .health-details {
288
+ display: flex;
289
+ flex-direction: column;
290
+ gap: 12px;
291
+ padding-top: 4px;
292
+ }
293
+
294
+ .health-detail-row {
295
+ display: flex;
296
+ align-items: center;
297
+ gap: 10px;
298
+ }
299
+
300
+ .health-detail-label {
301
+ font-size: 0.8rem;
302
+ color: var(--text-muted);
303
+ min-width: 100px;
304
+ }
305
+
306
+ .health-detail-value {
307
+ font-weight: 600;
308
+ font-size: 0.95rem;
309
+ }
310
+
311
+ #health-bar {
312
+ width: 100%;
313
+ height: 6px;
314
+ background: var(--bg-elevated);
315
+ border-radius: 3px;
316
+ overflow: hidden;
317
+ margin-top: 4px;
318
+ }
319
+
320
+ .health-bar-fill {
321
+ height: 100%;
322
+ width: 100%;
323
+ background: var(--color-green);
324
+ border-radius: 3px;
325
+ transition: width 0.4s ease, background 0.4s ease;
326
+ }
327
+
328
+ .alert-panel {
329
+ background: var(--bg-elevated);
330
+ border: 1px solid var(--border-color);
331
+ border-radius: 6px;
332
+ padding: 14px;
333
+ max-height: 160px;
334
+ overflow-y: auto;
335
+ }
336
+
337
+ .alert-panel-title {
338
+ font-size: 0.8rem;
339
+ font-weight: 600;
340
+ color: var(--text-secondary);
341
+ margin-bottom: 8px;
342
+ text-transform: uppercase;
343
+ letter-spacing: 0.04em;
344
+ }
345
+
346
+ #alert-list {
347
+ display: flex;
348
+ flex-direction: column;
349
+ gap: 6px;
350
+ }
351
+
352
+ .alert-item {
353
+ font-size: 0.8rem;
354
+ color: var(--text-secondary);
355
+ padding: 4px 8px;
356
+ border-left: 3px solid var(--color-yellow);
357
+ background: rgba(210, 153, 34, 0.06);
358
+ border-radius: 0 4px 4px 0;
359
+ }
360
+
361
+ .alert-item.critical {
362
+ border-left-color: var(--color-red);
363
+ background: rgba(248, 81, 73, 0.06);
364
+ }
365
+
366
+ .no-alerts {
367
+ font-size: 0.8rem;
368
+ color: var(--text-muted);
369
+ font-style: italic;
370
+ }
371
+
372
+ /* ---- Correlation Insights ---- */
373
+ .correlation-section {
374
+ background-color: var(--bg-card);
375
+ border: 1px solid var(--border-color);
376
+ border-radius: 8px;
377
+ padding: 24px;
378
+ }
379
+
380
+ .correlation-table {
381
+ width: 100%;
382
+ border-collapse: collapse;
383
+ }
384
+
385
+ .correlation-table thead th {
386
+ text-align: left;
387
+ font-size: 0.75rem;
388
+ font-weight: 600;
389
+ color: var(--text-muted);
390
+ text-transform: uppercase;
391
+ letter-spacing: 0.04em;
392
+ padding: 8px 12px;
393
+ border-bottom: 1px solid var(--border-color);
394
+ }
395
+
396
+ .correlation-row td {
397
+ padding: 10px 12px;
398
+ font-size: 0.85rem;
399
+ border-bottom: 1px solid rgba(48, 54, 61, 0.5);
400
+ vertical-align: middle;
401
+ }
402
+
403
+ .correlation-row:last-child td {
404
+ border-bottom: none;
405
+ }
406
+
407
+ .correlation-type {
408
+ font-weight: 600;
409
+ color: var(--text-primary);
410
+ }
411
+
412
+ .correlation-sources {
413
+ color: var(--text-secondary);
414
+ }
415
+
416
+ .correlation-sources .arrow {
417
+ color: var(--text-muted);
418
+ margin: 0 4px;
419
+ }
420
+
421
+ .strength-bar-container {
422
+ width: 80px;
423
+ height: 6px;
424
+ background: var(--bg-primary);
425
+ border-radius: 3px;
426
+ overflow: hidden;
427
+ display: inline-block;
428
+ vertical-align: middle;
429
+ margin-right: 6px;
430
+ }
431
+
432
+ .strength-bar-fill {
433
+ height: 100%;
434
+ border-radius: 3px;
435
+ background: var(--color-brain);
436
+ transition: width 0.3s ease;
437
+ }
438
+
439
+ .strength-value {
440
+ font-size: 0.75rem;
441
+ color: var(--text-muted);
442
+ }
443
+
444
+ .correlation-count {
445
+ font-weight: 600;
446
+ color: var(--text-primary);
447
+ }
448
+
449
+ .correlation-time {
450
+ color: var(--text-muted);
451
+ font-size: 0.8rem;
452
+ }
453
+
454
+ .no-correlations {
455
+ padding: 20px;
456
+ text-align: center;
457
+ color: var(--text-muted);
458
+ font-size: 0.85rem;
459
+ font-style: italic;
460
+ }
461
+
462
+ /* ---- Event Timeline ---- */
463
+ .timeline-section {
464
+ background-color: var(--bg-card);
465
+ border: 1px solid var(--border-color);
466
+ border-radius: 8px;
467
+ padding: 24px;
468
+ }
469
+
470
+ #timeline-list {
471
+ max-height: 480px;
472
+ overflow-y: auto;
473
+ display: flex;
474
+ flex-direction: column;
475
+ gap: 2px;
476
+ }
477
+
478
+ #timeline-list::-webkit-scrollbar {
479
+ width: 6px;
480
+ }
481
+
482
+ #timeline-list::-webkit-scrollbar-track {
483
+ background: transparent;
484
+ }
485
+
486
+ #timeline-list::-webkit-scrollbar-thumb {
487
+ background: var(--border-color);
488
+ border-radius: 3px;
489
+ }
490
+
491
+ .timeline-event {
492
+ display: grid;
493
+ grid-template-columns: 140px 100px 120px 1fr;
494
+ gap: 12px;
495
+ align-items: center;
496
+ padding: 8px 12px;
497
+ border-radius: 4px;
498
+ font-size: 0.83rem;
499
+ transition: background-color 0.15s ease;
500
+ }
501
+
502
+ .timeline-event:hover {
503
+ background-color: var(--bg-elevated);
504
+ }
505
+
506
+ .timeline-timestamp {
507
+ color: var(--text-muted);
508
+ font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
509
+ font-size: 0.78rem;
510
+ }
511
+
512
+ .timeline-source {
513
+ font-weight: 600;
514
+ font-size: 0.78rem;
515
+ padding: 2px 8px;
516
+ border-radius: 4px;
517
+ text-align: center;
518
+ display: inline-block;
519
+ }
520
+
521
+ .timeline-source[data-source="brain"] {
522
+ color: var(--color-brain);
523
+ background: rgba(88, 166, 255, 0.1);
524
+ }
525
+
526
+ .timeline-source[data-source="trading"] {
527
+ color: var(--color-trading);
528
+ background: rgba(63, 185, 80, 0.1);
529
+ }
530
+
531
+ .timeline-source[data-source="marketing"] {
532
+ color: var(--color-marketing);
533
+ background: rgba(210, 168, 255, 0.1);
534
+ }
535
+
536
+ .timeline-type {
537
+ color: var(--text-secondary);
538
+ font-weight: 500;
539
+ }
540
+
541
+ .timeline-data {
542
+ color: var(--text-muted);
543
+ white-space: nowrap;
544
+ overflow: hidden;
545
+ text-overflow: ellipsis;
546
+ }
547
+
548
+ .no-events {
549
+ padding: 20px;
550
+ text-align: center;
551
+ color: var(--text-muted);
552
+ font-size: 0.85rem;
553
+ font-style: italic;
554
+ }
555
+
556
+ /* ---- Footer ---- */
557
+ footer {
558
+ padding: 16px 32px;
559
+ border-top: 1px solid var(--border-color);
560
+ text-align: center;
561
+ font-size: 0.78rem;
562
+ color: var(--text-muted);
563
+ background-color: var(--bg-card);
564
+ }
565
+
566
+ /* ---- Responsive ---- */
567
+ @media (max-width: 960px) {
568
+ .brain-cards {
569
+ grid-template-columns: 1fr;
570
+ }
571
+
572
+ .health-grid {
573
+ grid-template-columns: 1fr;
574
+ justify-items: center;
575
+ text-align: center;
576
+ }
577
+
578
+ .health-details {
579
+ align-items: center;
580
+ }
581
+
582
+ .timeline-event {
583
+ grid-template-columns: 1fr 1fr;
584
+ gap: 4px 12px;
585
+ }
586
+
587
+ main {
588
+ padding: 16px;
589
+ }
590
+
591
+ header {
592
+ padding: 16px;
593
+ flex-wrap: wrap;
594
+ gap: 10px;
595
+ }
596
+ }
597
+
598
+ @media (max-width: 600px) {
599
+ .correlation-table thead {
600
+ display: none;
601
+ }
602
+
603
+ .correlation-row {
604
+ display: flex;
605
+ flex-wrap: wrap;
606
+ gap: 4px 12px;
607
+ padding: 10px 0;
608
+ border-bottom: 1px solid rgba(48, 54, 61, 0.5);
609
+ }
610
+
611
+ .correlation-row td {
612
+ border-bottom: none;
613
+ padding: 2px 0;
614
+ }
615
+
616
+ .timeline-event {
617
+ grid-template-columns: 1fr;
618
+ gap: 2px;
619
+ padding: 10px 12px;
620
+ border-bottom: 1px solid rgba(48, 54, 61, 0.3);
621
+ }
622
+ }
623
+ </style>
624
+ </head>
625
+ <body>
626
+
627
+ <!-- ========== Header ========== -->
628
+ <header>
629
+ <h1>Brain Ecosystem Hub</h1>
630
+ <div class="health-badge">
631
+ <span class="health-badge-label">Ecosystem Health</span>
632
+ <span class="health-badge-score" id="header-health-score">--</span>
633
+ </div>
634
+ </header>
635
+
636
+ <!-- ========== Main ========== -->
637
+ <main>
638
+
639
+ <!-- Brain Status Cards -->
640
+ <section aria-label="Brain Status">
641
+ <h2>Brain Status</h2>
642
+ <div class="brain-cards">
643
+
644
+ <!-- Brain -->
645
+ <article class="brain-card" data-brain="brain">
646
+ <div class="brain-card-header">
647
+ <div class="brain-card-name">
648
+ <span class="status-dot offline" data-field="status-dot"></span>
649
+ <span class="brain-card-accent">Brain</span>
650
+ </div>
651
+ <span class="brain-card-version" data-field="version">--</span>
652
+ </div>
653
+ <div class="brain-card-stats">
654
+ <div class="brain-stat">
655
+ <span class="brain-stat-label">Uptime</span>
656
+ <span class="brain-stat-value" data-field="uptime">--</span>
657
+ </div>
658
+ <div class="brain-stat">
659
+ <span class="brain-stat-label">PID</span>
660
+ <span class="brain-stat-value" data-field="pid">--</span>
661
+ </div>
662
+ <div class="brain-stat">
663
+ <span class="brain-stat-label">Methods</span>
664
+ <span class="brain-stat-value" data-field="methods">--</span>
665
+ </div>
666
+ <div class="brain-stat">
667
+ <span class="brain-stat-label">Status</span>
668
+ <span class="brain-stat-value" data-field="status">offline</span>
669
+ </div>
670
+ </div>
671
+ <div class="brain-card-key-metric">
672
+ <span class="key-metric-label">Errors (24h)</span>
673
+ <span class="key-metric-value brain-card-accent" data-field="key-metric">0</span>
674
+ </div>
675
+ </article>
676
+
677
+ <!-- Trading Brain -->
678
+ <article class="brain-card" data-brain="trading">
679
+ <div class="brain-card-header">
680
+ <div class="brain-card-name">
681
+ <span class="status-dot offline" data-field="status-dot"></span>
682
+ <span class="brain-card-accent">Trading Brain</span>
683
+ </div>
684
+ <span class="brain-card-version" data-field="version">--</span>
685
+ </div>
686
+ <div class="brain-card-stats">
687
+ <div class="brain-stat">
688
+ <span class="brain-stat-label">Uptime</span>
689
+ <span class="brain-stat-value" data-field="uptime">--</span>
690
+ </div>
691
+ <div class="brain-stat">
692
+ <span class="brain-stat-label">PID</span>
693
+ <span class="brain-stat-value" data-field="pid">--</span>
694
+ </div>
695
+ <div class="brain-stat">
696
+ <span class="brain-stat-label">Methods</span>
697
+ <span class="brain-stat-value" data-field="methods">--</span>
698
+ </div>
699
+ <div class="brain-stat">
700
+ <span class="brain-stat-label">Status</span>
701
+ <span class="brain-stat-value" data-field="status">offline</span>
702
+ </div>
703
+ </div>
704
+ <div class="brain-card-key-metric">
705
+ <span class="key-metric-label">Trades (24h)</span>
706
+ <span class="key-metric-value brain-card-accent" data-field="key-metric">0</span>
707
+ </div>
708
+ </article>
709
+
710
+ <!-- Marketing Brain -->
711
+ <article class="brain-card" data-brain="marketing">
712
+ <div class="brain-card-header">
713
+ <div class="brain-card-name">
714
+ <span class="status-dot offline" data-field="status-dot"></span>
715
+ <span class="brain-card-accent">Marketing Brain</span>
716
+ </div>
717
+ <span class="brain-card-version" data-field="version">--</span>
718
+ </div>
719
+ <div class="brain-card-stats">
720
+ <div class="brain-stat">
721
+ <span class="brain-stat-label">Uptime</span>
722
+ <span class="brain-stat-value" data-field="uptime">--</span>
723
+ </div>
724
+ <div class="brain-stat">
725
+ <span class="brain-stat-label">PID</span>
726
+ <span class="brain-stat-value" data-field="pid">--</span>
727
+ </div>
728
+ <div class="brain-stat">
729
+ <span class="brain-stat-label">Methods</span>
730
+ <span class="brain-stat-value" data-field="methods">--</span>
731
+ </div>
732
+ <div class="brain-stat">
733
+ <span class="brain-stat-label">Status</span>
734
+ <span class="brain-stat-value" data-field="status">offline</span>
735
+ </div>
736
+ </div>
737
+ <div class="brain-card-key-metric">
738
+ <span class="key-metric-label">Posts (24h)</span>
739
+ <span class="key-metric-value brain-card-accent" data-field="key-metric">0</span>
740
+ </div>
741
+ </article>
742
+
743
+ </div>
744
+ </section>
745
+
746
+ <!-- Ecosystem Health -->
747
+ <section aria-label="Ecosystem Health">
748
+ <h2>Ecosystem Health</h2>
749
+ <div class="health-section">
750
+ <div class="health-grid">
751
+
752
+ <!-- Gauge -->
753
+ <div class="health-gauge">
754
+ <div class="health-score-display">
755
+ <svg width="140" height="80" viewBox="0 0 140 80" aria-hidden="true">
756
+ <!-- Background arc -->
757
+ <path
758
+ d="M 10 75 A 60 60 0 0 1 130 75"
759
+ fill="none"
760
+ stroke="#30363d"
761
+ stroke-width="10"
762
+ stroke-linecap="round"
763
+ />
764
+ <!-- Filled arc -->
765
+ <path
766
+ id="health-arc"
767
+ d="M 10 75 A 60 60 0 0 1 130 75"
768
+ fill="none"
769
+ stroke="#3fb950"
770
+ stroke-width="10"
771
+ stroke-linecap="round"
772
+ stroke-dasharray="188.5"
773
+ stroke-dashoffset="0"
774
+ />
775
+ </svg>
776
+ <span class="health-score-number" id="health-score">--</span>
777
+ </div>
778
+ <span class="health-status-text" id="health-status">--</span>
779
+ </div>
780
+
781
+ <!-- Details -->
782
+ <div class="health-details">
783
+ <div class="health-detail-row">
784
+ <span class="health-detail-label">Active Brains</span>
785
+ <span class="health-detail-value" id="active-brains">0 / 3</span>
786
+ </div>
787
+ <div class="health-detail-row">
788
+ <span class="health-detail-label">Total Events</span>
789
+ <span class="health-detail-value" id="total-events">0</span>
790
+ </div>
791
+ <div class="health-detail-row">
792
+ <span class="health-detail-label">Correlations</span>
793
+ <span class="health-detail-value" id="total-correlations">0</span>
794
+ </div>
795
+ <div id="health-bar">
796
+ <div class="health-bar-fill" style="width: 0%"></div>
797
+ </div>
798
+ </div>
799
+
800
+ <!-- Alerts -->
801
+ <div class="alert-panel">
802
+ <div class="alert-panel-title">Alerts</div>
803
+ <div id="alert-list">
804
+ <div class="no-alerts">No active alerts</div>
805
+ </div>
806
+ </div>
807
+
808
+ </div>
809
+ </div>
810
+ </section>
811
+
812
+ <!-- Correlation Insights -->
813
+ <section aria-label="Correlation Insights">
814
+ <h2>
815
+ Correlation Insights
816
+ <span class="counter" id="correlation-count-badge">0</span>
817
+ </h2>
818
+ <div class="correlation-section">
819
+ <table class="correlation-table">
820
+ <thead>
821
+ <tr>
822
+ <th>Type</th>
823
+ <th>Sources</th>
824
+ <th>Strength</th>
825
+ <th>Count</th>
826
+ <th>Last Seen</th>
827
+ </tr>
828
+ </thead>
829
+ <tbody id="correlation-list">
830
+ <tr>
831
+ <td colspan="5" class="no-correlations">No correlations detected yet</td>
832
+ </tr>
833
+ </tbody>
834
+ </table>
835
+ </div>
836
+ </section>
837
+
838
+ <!-- Event Timeline -->
839
+ <section aria-label="Event Timeline">
840
+ <h2>
841
+ Cross-Brain Event Timeline
842
+ <span class="counter" id="event-count-badge">0</span>
843
+ </h2>
844
+ <div class="timeline-section">
845
+ <div id="timeline-list">
846
+ <div class="no-events">Waiting for cross-brain events...</div>
847
+ </div>
848
+ </div>
849
+ </section>
850
+
851
+ </main>
852
+
853
+ <!-- ========== Footer ========== -->
854
+ <footer>
855
+ Brain Ecosystem Hub &mdash; Powered by Hebbian Learning
856
+ </footer>
857
+
858
+ </body>
859
+ </html>