@kage-core/kage-graph-mcp 1.1.35 → 1.1.37

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/viewer/styles.css CHANGED
@@ -4,6 +4,10 @@
4
4
  --surface: #08110d;
5
5
  --surface-soft: #0d1913;
6
6
  --surface-strong: #12251b;
7
+ --surface-overlay: rgba(20, 26, 38, 0.92);
8
+ --accent: #6ad7ff;
9
+ --accent-strong: #8be4ff;
10
+ --accent-soft: rgba(106, 215, 255, 0.10);
7
11
  --terminal: #b9fbc0;
8
12
  --terminal-strong: #41ff8f;
9
13
  --terminal-dim: #6ea77d;
@@ -11,14 +15,22 @@
11
15
  --muted: #7fa88a;
12
16
  --line: #1c3b29;
13
17
  --line-strong: #2f6f48;
14
- --memory: #b88cff;
15
- --memory-soft: #251a36;
18
+ --brand: #41ff8f;
19
+ --brand-soft: rgba(65, 255, 143, 0.10);
20
+ --brand-glow: 0 0 18px rgba(65, 255, 143, 0.32), 0 0 44px rgba(65, 255, 143, 0.16);
21
+ --brand-glow-strong: 0 0 22px rgba(65, 255, 143, 0.48), 0 0 64px rgba(65, 255, 143, 0.22);
22
+ --memory: #41ff8f;
23
+ --memory-soft: #071d10;
16
24
  --code: #6ad7ff;
17
25
  --code-soft: #102633;
18
26
  --warn: #ffd166;
27
+ --warn-soft: rgba(255, 209, 102, 0.12);
19
28
  --danger: #ff6b6b;
29
+ --danger-soft: rgba(255, 107, 107, 0.12);
30
+ --ok: #6dd58c;
31
+ --ok-soft: rgba(109, 213, 140, 0.12);
20
32
  --edge: #6d8f79;
21
- --shadow: 0 18px 60px rgba(0, 0, 0, 0.46);
33
+ --shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
22
34
  }
23
35
 
24
36
  * { box-sizing: border-box; }
@@ -26,30 +38,113 @@
26
38
  body {
27
39
  margin: 0;
28
40
  min-width: 320px;
29
- background:
30
- radial-gradient(circle at 16% 0%, rgba(65, 255, 143, 0.11), transparent 32%),
31
- linear-gradient(180deg, #07100b 0%, var(--bg) 44%, #030504 100%);
41
+ background: #050806;
32
42
  color: var(--text);
33
- font: 13px/1.45 ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
43
+ font: 14px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
34
44
  }
35
45
 
36
46
  button, input, select { font: inherit; }
37
47
  h1, h2, p { margin: 0; }
38
48
  h1 { font-size: clamp(20px, 2vw, 28px); line-height: 1; letter-spacing: 0; }
39
- h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
49
+ h2 {
50
+ color: var(--terminal);
51
+ font-size: 14px;
52
+ letter-spacing: 0;
53
+ text-shadow: 0 0 10px rgba(65, 255, 143, 0.18);
54
+ text-transform: none;
55
+ }
56
+
57
+ .viewer-shell {
58
+ min-height: 100vh;
59
+ display: grid;
60
+ grid-template-columns: 236px minmax(0, 1fr);
61
+ background:
62
+ radial-gradient(circle at 0 0, rgba(65, 255, 143, 0.15), transparent 320px),
63
+ linear-gradient(180deg, rgba(65, 255, 143, 0.06), transparent 300px),
64
+ #050806;
65
+ }
66
+
67
+ .repo-sidebar {
68
+ position: sticky;
69
+ top: 0;
70
+ height: 100vh;
71
+ display: grid;
72
+ grid-template-rows: auto auto minmax(0, 1fr) auto;
73
+ gap: 22px;
74
+ padding: 22px 16px;
75
+ border-right: 1px solid rgba(65, 255, 143, 0.13);
76
+ background:
77
+ radial-gradient(circle at 0 0, rgba(65, 255, 143, 0.12), transparent 230px),
78
+ #070d0a;
79
+ box-shadow: inset -1px 0 0 rgba(65, 255, 143, 0.12), 12px 0 48px rgba(65, 255, 143, 0.045);
80
+ }
81
+
82
+ .sidebar-brand {
83
+ display: inline-flex;
84
+ align-items: center;
85
+ gap: 10px;
86
+ color: var(--text);
87
+ font-size: 17px;
88
+ font-weight: 850;
89
+ text-decoration: none;
90
+ }
91
+
92
+ .brand-mark {
93
+ width: 32px;
94
+ height: 32px;
95
+ display: inline-flex;
96
+ align-items: center;
97
+ justify-content: center;
98
+ border-radius: 8px;
99
+ background: rgba(65, 255, 143, 0.13);
100
+ border: 1px solid rgba(65, 255, 143, 0.26);
101
+ color: var(--terminal-strong);
102
+ box-shadow: var(--brand-glow);
103
+ text-shadow: 0 0 12px rgba(65, 255, 143, 0.70);
104
+ }
105
+
106
+ .repo-card {
107
+ display: grid;
108
+ gap: 7px;
109
+ padding: 14px;
110
+ border: 1px solid rgba(65, 255, 143, 0.12);
111
+ border-radius: 10px;
112
+ background: rgba(13, 25, 19, 0.62);
113
+ }
114
+
115
+ .repo-card span,
116
+ .repo-card em {
117
+ color: var(--terminal-dim);
118
+ font-size: 11px;
119
+ font-style: normal;
120
+ }
121
+
122
+ .repo-card span {
123
+ font-weight: 800;
124
+ text-transform: uppercase;
125
+ }
126
+
127
+ .repo-card strong {
128
+ color: var(--text);
129
+ font-size: 14px;
130
+ overflow-wrap: anywhere;
131
+ }
132
+
133
+ .viewer-main {
134
+ min-width: 0;
135
+ }
40
136
 
41
137
  .app-header {
42
138
  display: grid;
43
- grid-template-columns: minmax(360px, 1fr) auto auto;
139
+ grid-template-columns: minmax(320px, 1fr) auto;
44
140
  grid-template-areas:
45
- "brand links picker"
46
- "sections sections autoload"
47
- "status status autoload";
48
- gap: 10px 16px;
141
+ "brand status"
142
+ "brand autoload";
143
+ gap: 10px 20px;
49
144
  align-items: center;
50
- padding: 10px 14px;
145
+ padding: 24px 32px;
51
146
  border-bottom: 1px solid var(--line);
52
- background: rgba(5, 8, 6, 0.94);
147
+ background: rgba(5, 8, 6, 0.84);
53
148
  backdrop-filter: blur(16px);
54
149
  position: sticky;
55
150
  top: 0;
@@ -59,7 +154,7 @@ h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-trans
59
154
  .brand-block {
60
155
  grid-area: brand;
61
156
  min-width: 280px;
62
- max-width: 620px;
157
+ max-width: 780px;
63
158
  }
64
159
  .eyebrow {
65
160
  display: inline-flex;
@@ -73,70 +168,73 @@ h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-trans
73
168
  .brand-block h1::before {
74
169
  content: "";
75
170
  }
171
+ .brand-block h1 {
172
+ color: var(--terminal-strong);
173
+ text-shadow: 0 0 18px rgba(65, 255, 143, 0.46), 0 0 42px rgba(65, 255, 143, 0.18);
174
+ }
76
175
  .app-header p {
77
- margin-top: 4px;
176
+ margin-top: 8px;
78
177
  color: var(--muted);
79
- font-size: 12px;
178
+ font-size: 13px;
80
179
  overflow-wrap: anywhere;
81
180
  }
82
181
 
83
- .site-links {
84
- grid-area: links;
85
- display: flex;
86
- flex-wrap: wrap;
87
- gap: 10px;
88
- justify-content: flex-end;
182
+ .viewer-sections {
183
+ display: grid;
184
+ gap: 8px;
185
+ align-content: start;
89
186
  }
90
- .site-links a {
187
+
188
+ .viewer-section {
91
189
  display: inline-flex;
92
190
  align-items: center;
93
- min-height: 26px;
94
- padding: 3px 9px;
95
- border: 1px solid var(--line);
96
- border-radius: 4px;
97
- background: rgba(13, 25, 19, 0.86);
191
+ justify-content: flex-start;
192
+ min-height: 40px;
193
+ padding: 0 12px;
194
+ border: 1px solid transparent;
195
+ border-radius: 8px;
196
+ background: transparent;
197
+ box-shadow: none;
98
198
  color: var(--terminal-dim);
99
- font-size: 11px;
100
- font-weight: 780;
199
+ font-size: 14px;
200
+ font-weight: 720;
101
201
  text-decoration: none;
102
- white-space: nowrap;
103
- }
104
- .site-links a:hover {
105
- border-color: var(--line-strong);
106
- color: var(--terminal-strong);
107
- }
108
-
109
- .viewer-sections {
110
- grid-area: sections;
111
- display: flex;
112
- flex-wrap: wrap;
113
- gap: 6px;
114
- align-items: center;
115
202
  }
116
203
 
117
- .viewer-section {
118
- min-height: 28px;
119
- padding: 0 11px;
120
- border-color: rgba(65, 255, 143, 0.18);
121
- background: rgba(13, 25, 19, 0.72);
122
- box-shadow: none;
123
- color: var(--terminal-dim);
124
- font-size: 11px;
204
+ .sidebar-secondary {
205
+ display: none;
125
206
  }
126
207
  .viewer-section:hover {
127
208
  border-color: rgba(65, 255, 143, 0.30);
128
209
  color: var(--terminal-strong);
129
210
  }
130
211
  .viewer-section.active,
131
- .viewer-section[aria-selected="true"] {
212
+ .viewer-section[aria-selected="true"],
213
+ .viewer-section[aria-current="page"] {
132
214
  border-color: var(--terminal-strong);
133
- background: rgba(65, 255, 143, 0.12);
134
- color: var(--terminal-strong);
215
+ background: rgba(65, 255, 143, 0.10);
216
+ color: var(--brand);
217
+ box-shadow: inset 0 0 0 1px rgba(65, 255, 143, 0.20), var(--brand-glow);
218
+ text-shadow: 0 0 10px rgba(65, 255, 143, 0.45);
219
+ }
220
+
221
+ .sidebar-links {
222
+ display: grid;
223
+ gap: 6px;
224
+ padding-top: 14px;
225
+ border-top: 1px solid rgba(65, 255, 143, 0.10);
226
+ }
227
+ .sidebar-links a {
228
+ color: var(--terminal-dim);
229
+ font-size: 12px;
230
+ font-weight: 700;
231
+ text-decoration: none;
135
232
  }
233
+ .sidebar-links a:hover { color: var(--terminal-strong); }
136
234
 
137
235
  .status-strip {
138
236
  grid-area: status;
139
- display: flex;
237
+ display: none;
140
238
  flex-wrap: wrap;
141
239
  gap: 8px;
142
240
  justify-content: flex-start;
@@ -144,7 +242,7 @@ h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-trans
144
242
 
145
243
  .autoload-status {
146
244
  grid-area: autoload;
147
- display: inline-flex;
245
+ display: none;
148
246
  align-items: center;
149
247
  min-height: 26px;
150
248
  padding: 3px 9px;
@@ -175,10 +273,14 @@ h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-trans
175
273
  font-weight: 750;
176
274
  white-space: nowrap;
177
275
  }
178
- .status-pill strong { color: var(--terminal-strong); }
276
+ .status-pill strong { color: var(--brand); }
179
277
  .status-pill.warn strong { color: var(--warn); }
180
278
  .status-pill.code strong { color: var(--code); }
181
279
  .status-pill.memory strong { color: var(--memory); }
280
+ .status-pill.memory {
281
+ border-color: rgba(65, 255, 143, 0.35);
282
+ box-shadow: 0 0 18px rgba(65, 255, 143, 0.10);
283
+ }
182
284
 
183
285
  .file-picker, button {
184
286
  display: inline-flex;
@@ -196,6 +298,7 @@ h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-trans
196
298
  box-shadow: inset 0 0 0 1px rgba(65, 255, 143, 0.10);
197
299
  }
198
300
  .file-picker { grid-area: picker; }
301
+ .app-header .file-picker { display: none; }
199
302
  .file-picker:hover, button:hover { background: #0d1f15; }
200
303
  .file-picker input {
201
304
  position: absolute;
@@ -216,39 +319,62 @@ h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-trans
216
319
  position: relative;
217
320
  display: grid;
218
321
  grid-template-columns: minmax(0, 1fr);
219
- grid-template-rows: minmax(720px, calc(100vh - 108px));
220
- grid-template-areas: "stage";
221
- gap: 12px;
222
- padding: 12px;
322
+ grid-template-areas: "dashboard";
323
+ gap: 24px;
324
+ padding: 32px;
223
325
  min-height: calc(100vh - 78px);
224
- align-items: stretch;
326
+ align-items: start;
225
327
  }
226
328
 
227
329
  .layout > * { min-width: 0; }
228
330
 
229
331
  .dashboard-panel {
230
- grid-area: stage;
332
+ grid-area: dashboard;
231
333
  display: none;
232
- min-height: 720px;
233
- padding: 26px;
234
- border: 1px solid var(--line);
235
- border-radius: 8px;
236
- background: rgba(8, 17, 13, 0.92);
237
- box-shadow: var(--shadow);
238
- overflow: auto;
334
+ min-height: calc(100vh - 134px);
335
+ padding: 0;
336
+ border: 0;
337
+ border-radius: 0;
338
+ background: transparent;
339
+ box-shadow: none;
340
+ overflow: visible;
239
341
  }
240
342
 
241
343
  body.viewer-section-overview .dashboard-panel { display: block; }
242
344
  body.viewer-section-overview .graph-panel { display: none; }
243
345
  body.viewer-section-overview .workspace-shell { display: none; }
244
346
  body.viewer-section-graph .dashboard-panel { display: none; }
347
+ body.viewer-page-overview .layout { grid-template-areas: "dashboard"; }
348
+ body.viewer-page-graph .layout {
349
+ grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
350
+ grid-template-areas: "graph workspace";
351
+ align-items: stretch;
352
+ }
353
+ body.viewer-page-memory .layout,
354
+ body.viewer-page-owners .layout,
355
+ body.viewer-page-intel .layout,
356
+ body.viewer-page-review .layout,
357
+ body.viewer-page-data .layout {
358
+ grid-template-areas: "workspace";
359
+ }
360
+ body.viewer-page-memory .graph-panel,
361
+ body.viewer-page-owners .graph-panel,
362
+ body.viewer-page-intel .graph-panel,
363
+ body.viewer-page-review .graph-panel,
364
+ body.viewer-page-data .graph-panel {
365
+ display: none;
366
+ }
245
367
 
246
368
  .dashboard-hero {
247
369
  display: grid;
248
370
  grid-template-columns: minmax(0, 1fr) auto;
249
371
  gap: 20px;
250
372
  align-items: start;
251
- margin-bottom: 20px;
373
+ margin-bottom: 18px;
374
+ padding: 24px;
375
+ border: 1px solid rgba(65, 255, 143, 0.12);
376
+ border-radius: 14px;
377
+ background: linear-gradient(135deg, rgba(13, 25, 19, 0.94), rgba(8, 17, 13, 0.72));
252
378
  }
253
379
  .dashboard-kicker {
254
380
  display: inline-flex;
@@ -261,8 +387,8 @@ body.viewer-section-graph .dashboard-panel { display: none; }
261
387
  .dashboard-hero h2 {
262
388
  max-width: 880px;
263
389
  color: var(--text);
264
- font-size: clamp(24px, 3.2vw, 44px);
265
- line-height: 1.05;
390
+ font-size: clamp(28px, 3.6vw, 48px);
391
+ line-height: 1.04;
266
392
  text-transform: none;
267
393
  letter-spacing: 0;
268
394
  }
@@ -279,56 +405,197 @@ body.viewer-section-graph .dashboard-panel { display: none; }
279
405
  gap: 8px;
280
406
  }
281
407
  .dashboard-actions button,
282
- .dashboard-card button {
408
+ .dashboard-actions a,
409
+ .dashboard-card button,
410
+ .dashboard-card a {
411
+ display: inline-flex;
412
+ align-items: center;
413
+ justify-content: center;
283
414
  min-height: 32px;
415
+ padding: 0 13px;
416
+ border: 1px solid rgba(65, 255, 143, 0.22);
417
+ border-radius: 4px;
284
418
  border-color: rgba(65, 255, 143, 0.22);
285
419
  background: rgba(65, 255, 143, 0.08);
286
420
  box-shadow: none;
287
421
  color: var(--terminal-strong);
422
+ font-weight: 780;
423
+ text-decoration: none;
424
+ white-space: nowrap;
288
425
  }
289
426
 
290
427
  .dashboard-stats {
291
428
  display: grid;
292
- grid-template-columns: repeat(6, minmax(0, 1fr));
293
- gap: 10px;
294
- margin-bottom: 18px;
429
+ grid-template-columns: repeat(3, minmax(0, 1fr));
430
+ gap: 18px;
431
+ margin-bottom: 22px;
295
432
  }
296
433
  .dashboard-stat {
297
- min-height: 82px;
298
- padding: 14px;
299
- border: 1px solid rgba(65, 255, 143, 0.16);
300
- border-radius: 8px;
301
- background: rgba(3, 6, 4, 0.54);
434
+ min-height: 142px;
435
+ padding: 22px;
436
+ border: 1px solid rgba(65, 255, 143, 0.12);
437
+ border-radius: 10px;
438
+ background: rgba(8, 17, 13, 0.82);
302
439
  }
303
440
  .dashboard-stat strong {
304
441
  display: block;
305
442
  color: var(--terminal-strong);
306
- font-size: 24px;
307
- line-height: 1;
443
+ margin-top: 12px;
444
+ font-size: 28px;
445
+ line-height: 1.05;
308
446
  }
309
447
  .dashboard-stat span {
310
448
  display: block;
311
- margin-top: 8px;
312
449
  color: var(--terminal-dim);
313
- font-size: 11px;
450
+ font-size: 12px;
314
451
  font-weight: 760;
315
452
  text-transform: uppercase;
316
453
  }
454
+ .dashboard-stat em {
455
+ display: block;
456
+ margin-top: 12px;
457
+ color: var(--muted);
458
+ font-size: 13px;
459
+ font-style: normal;
460
+ line-height: 1.35;
461
+ }
462
+ .dashboard-stat-ok { border-color: rgba(65, 255, 143, 0.22); }
463
+ .dashboard-stat-warn { border-color: rgba(255, 209, 102, 0.28); }
464
+ .dashboard-stat-warn strong { color: var(--warn); }
465
+ .dashboard-stat-code strong { color: var(--code); }
317
466
 
318
- .dashboard-grid {
467
+ .dashboard-charts {
319
468
  display: grid;
320
469
  grid-template-columns: repeat(3, minmax(0, 1fr));
470
+ gap: 18px;
471
+ margin-bottom: 22px;
472
+ }
473
+
474
+ .metric-card {
475
+ min-height: 178px;
476
+ padding: 18px;
477
+ border: 1px solid rgba(65, 255, 143, 0.13);
478
+ border-radius: 8px;
479
+ background: rgba(6, 16, 11, 0.86);
480
+ overflow: hidden;
481
+ }
482
+
483
+ .metric-card-ok { border-color: rgba(65, 255, 143, 0.24); }
484
+ .metric-card-code { border-color: rgba(106, 215, 255, 0.24); }
485
+ .metric-card-warn { border-color: rgba(255, 209, 102, 0.28); }
486
+ .metric-card-danger { border-color: rgba(255, 91, 91, 0.28); }
487
+
488
+ .metric-card-head {
489
+ display: flex;
490
+ justify-content: space-between;
491
+ gap: 10px;
492
+ color: var(--terminal-dim);
493
+ font-size: 10px;
494
+ font-weight: 820;
495
+ text-transform: uppercase;
496
+ }
497
+
498
+ .metric-card-head strong {
499
+ color: var(--terminal-strong);
500
+ text-align: right;
501
+ overflow-wrap: anywhere;
502
+ }
503
+
504
+ .metric-card-warn .metric-card-head strong { color: var(--warn); }
505
+ .metric-card-danger .metric-card-head strong { color: var(--danger); }
506
+
507
+ .metric-visual {
508
+ display: grid;
509
+ grid-template-columns: 72px minmax(0, 1fr);
321
510
  gap: 12px;
511
+ align-items: center;
512
+ margin-top: 12px;
513
+ }
514
+
515
+ .metric-donut {
516
+ --value: 0;
517
+ width: 70px;
518
+ height: 70px;
519
+ display: grid;
520
+ place-items: center;
521
+ border-radius: 50%;
522
+ background:
523
+ radial-gradient(circle at center, #06100b 0 58%, transparent 59%),
524
+ conic-gradient(var(--terminal-strong) calc(var(--value) * 1%), rgba(65, 255, 143, 0.12) 0);
525
+ }
526
+
527
+ .metric-card-warn .metric-donut {
528
+ background:
529
+ radial-gradient(circle at center, #06100b 0 58%, transparent 59%),
530
+ conic-gradient(var(--warn) calc(var(--value) * 1%), rgba(255, 209, 102, 0.12) 0);
531
+ }
532
+
533
+ .metric-donut span {
534
+ color: var(--text);
535
+ font-size: 13px;
536
+ font-weight: 840;
537
+ }
538
+
539
+ .metric-visual p,
540
+ .metric-card em {
541
+ margin: 0;
542
+ color: var(--muted);
543
+ font-size: 11px;
544
+ font-style: normal;
545
+ line-height: 1.4;
546
+ }
547
+
548
+ .metric-card em {
549
+ display: block;
550
+ margin-top: 10px;
551
+ color: var(--terminal-dim);
552
+ }
553
+
554
+ .metric-bars {
555
+ display: grid;
556
+ gap: 9px;
557
+ margin-top: 12px;
558
+ }
559
+
560
+ .metric-bar {
561
+ display: grid;
562
+ grid-template-columns: minmax(0, 1fr) auto;
563
+ gap: 8px;
564
+ color: var(--muted);
565
+ font-size: 11px;
566
+ }
567
+
568
+ .metric-bar strong {
569
+ color: var(--text);
570
+ font-size: 11px;
571
+ overflow-wrap: anywhere;
572
+ }
573
+
574
+ .metric-bar i {
575
+ grid-column: 1 / -1;
576
+ display: block;
577
+ height: 5px;
578
+ border-radius: 999px;
579
+ background: var(--terminal-strong);
580
+ }
581
+
582
+ .metric-bar-warn i { background: var(--warn); }
583
+ .metric-bar-danger i { background: var(--danger); }
584
+
585
+ .dashboard-grid {
586
+ display: grid;
587
+ grid-template-columns: repeat(3, minmax(0, 1fr));
588
+ gap: 18px;
322
589
  }
323
590
  .dashboard-card {
324
- min-height: 260px;
591
+ min-height: 238px;
325
592
  display: flex;
326
593
  flex-direction: column;
327
- gap: 10px;
328
- padding: 16px;
329
- border: 1px solid rgba(65, 255, 143, 0.15);
330
- border-radius: 8px;
331
- background: rgba(3, 6, 4, 0.46);
594
+ gap: 13px;
595
+ padding: 22px;
596
+ border: 1px solid rgba(65, 255, 143, 0.12);
597
+ border-radius: 10px;
598
+ background: rgba(8, 17, 13, 0.78);
332
599
  }
333
600
  .dashboard-card-head {
334
601
  display: flex;
@@ -345,9 +612,10 @@ body.viewer-section-graph .dashboard-panel { display: none; }
345
612
  font-size: 10px;
346
613
  }
347
614
  .dashboard-card h3 {
348
- color: var(--text);
349
- font-size: 17px;
615
+ color: var(--terminal);
616
+ font-size: 19px;
350
617
  line-height: 1.2;
618
+ text-shadow: 0 0 9px rgba(65, 255, 143, 0.16);
351
619
  }
352
620
  .dashboard-card p {
353
621
  color: var(--muted);
@@ -366,10 +634,10 @@ body.viewer-section-graph .dashboard-panel { display: none; }
366
634
  display: flex;
367
635
  justify-content: space-between;
368
636
  gap: 10px;
369
- padding-top: 7px;
637
+ padding-top: 9px;
370
638
  border-top: 1px solid rgba(65, 255, 143, 0.10);
371
639
  color: var(--muted);
372
- font-size: 11px;
640
+ font-size: 12px;
373
641
  }
374
642
  .dashboard-card li strong {
375
643
  color: var(--terminal);
@@ -381,138 +649,272 @@ body.viewer-section-graph .dashboard-panel { display: none; }
381
649
  overflow-wrap: anywhere;
382
650
  }
383
651
 
652
+ #dashboardReview {
653
+ display: none;
654
+ }
655
+
384
656
  .workspace-shell {
385
- position: absolute;
386
- z-index: 9;
387
- top: 12px;
388
- right: 24px;
389
- bottom: 12px;
390
- width: min(430px, calc(100% - 48px));
391
- min-height: 0;
657
+ grid-area: workspace;
658
+ position: relative;
659
+ z-index: 1;
660
+ width: 100%;
661
+ min-height: calc(100vh - 134px);
392
662
  display: grid;
393
- grid-template-rows: auto minmax(0, 1fr);
394
- gap: 10px;
395
- opacity: 0;
396
- pointer-events: none;
397
- transform: translateX(20px);
398
- transition: opacity 150ms ease, transform 150ms ease;
399
- }
400
-
401
- body.viewer-workspace-open .workspace-shell {
663
+ grid-template-rows: minmax(0, 1fr);
664
+ gap: 14px;
402
665
  opacity: 1;
403
666
  pointer-events: auto;
404
- transform: translateX(0);
667
+ transform: none;
668
+ transition: none;
405
669
  }
406
670
 
407
- .workspace-top {
408
- min-width: 0;
671
+ .workspace-body {
672
+ min-height: 0;
673
+ height: 100%;
409
674
  display: grid;
410
- grid-template-columns: minmax(0, 1fr) 38px;
411
- gap: 6px;
675
+ gap: 14px;
412
676
  }
413
677
 
414
- .workspace-tabs {
415
- min-width: 0;
416
- display: grid;
417
- grid-template-columns: repeat(5, minmax(0, 1fr));
418
- gap: 6px;
419
- padding: 6px;
678
+ .workspace-body > * {
679
+ grid-area: auto;
680
+ min-height: 0;
681
+ display: none;
682
+ }
683
+
684
+ .control-panel, .graph-panel, .details-panel, .graph-insights-panel, .table-panel, .review-panel, .proof-panel, .intelligence-panel, .memory-panel, .owners-panel {
420
685
  border: 1px solid var(--line);
421
686
  border-radius: 6px;
422
687
  background: rgba(8, 17, 13, 0.94);
423
688
  box-shadow: var(--shadow);
424
689
  }
425
690
 
426
- .workspace-close {
427
- min-width: 0;
428
- min-height: 100%;
429
- padding: 0;
691
+ .control-panel,
692
+ .graph-panel,
693
+ .memory-panel {
430
694
  border-color: rgba(65, 255, 143, 0.22);
431
- background: rgba(8, 17, 13, 0.94);
432
- box-shadow: var(--shadow);
433
- color: var(--terminal-dim);
434
- font-size: 13px;
435
- font-weight: 900;
695
+ box-shadow: var(--shadow), 0 0 34px rgba(65, 255, 143, 0.055);
436
696
  }
437
- .workspace-close:hover {
438
- color: var(--terminal-strong);
439
- background: rgba(65, 255, 143, 0.10);
697
+
698
+ .control-panel {
699
+ min-height: 0;
700
+ overflow: auto;
701
+ padding: 12px;
440
702
  }
441
703
 
442
- .workspace-tab {
443
- min-width: 0;
444
- min-height: 34px;
445
- padding: 0 8px;
446
- border-color: rgba(65, 255, 143, 0.16);
447
- background: #030604;
448
- color: var(--terminal-dim);
449
- font-size: 10px;
450
- font-weight: 820;
704
+ .graph-insights-panel {
705
+ min-height: 0;
451
706
  overflow: hidden;
452
- text-overflow: ellipsis;
453
- white-space: nowrap;
707
+ padding: 0;
454
708
  }
455
- .workspace-tab.active,
456
- .workspace-tab[aria-selected="true"] {
457
- border-color: var(--terminal);
458
- background: rgba(65, 255, 143, 0.12);
459
- color: var(--terminal-strong);
709
+
710
+ .graph-insights {
711
+ height: auto;
712
+ max-height: 360px;
713
+ overflow: auto;
714
+ display: grid;
715
+ grid-template-columns: repeat(2, minmax(0, 1fr));
716
+ gap: 8px;
717
+ padding: 0 10px 12px;
460
718
  }
461
719
 
462
- .workspace-body {
463
- min-height: 0;
720
+ .journey-actions {
464
721
  display: grid;
465
- grid-template-rows: minmax(0, 1fr);
722
+ gap: 8px;
723
+ margin: 10px 0 0;
724
+ }
725
+
726
+ .journey-actions button,
727
+ .advanced-controls summary {
728
+ width: 100%;
729
+ min-height: 34px;
730
+ border: 1px solid rgba(65, 255, 143, 0.20);
731
+ border-radius: 4px;
732
+ background: rgba(65, 255, 143, 0.055);
733
+ color: var(--terminal-strong);
734
+ font-size: 12px;
735
+ font-weight: 760;
736
+ text-align: left;
737
+ }
738
+
739
+ .journey-actions button {
740
+ padding: 0 10px;
741
+ box-shadow: none;
742
+ }
743
+
744
+ .journey-actions button.active,
745
+ .graph-action-card.active {
746
+ border-color: rgba(65, 255, 143, 0.70);
747
+ background: rgba(65, 255, 143, 0.12);
748
+ }
749
+
750
+ .advanced-controls {
751
+ margin-top: 12px;
752
+ }
753
+
754
+ .advanced-controls summary {
755
+ display: flex;
756
+ align-items: center;
757
+ cursor: pointer;
758
+ padding: 0 10px;
759
+ }
760
+
761
+ .advanced-controls label,
762
+ .advanced-controls .toggle-control {
763
+ margin-top: 10px;
764
+ }
765
+
766
+ .graph-action-card p {
767
+ margin: 10px 0;
768
+ color: var(--muted);
769
+ font-size: 11px;
770
+ line-height: 1.45;
771
+ }
772
+
773
+ .graph-action-card button {
774
+ width: 100%;
775
+ min-height: 30px;
776
+ margin-top: 10px;
777
+ box-shadow: none;
778
+ }
779
+
780
+ .graph-insights .metric-card {
781
+ min-height: 118px;
782
+ padding: 11px;
783
+ }
784
+
785
+ .graph-insights .metric-visual {
786
+ grid-template-columns: 56px minmax(0, 1fr);
466
787
  gap: 10px;
467
788
  }
468
789
 
469
- .workspace-body > * {
470
- grid-area: auto;
471
- min-height: 0;
472
- display: none;
790
+ .graph-insights .metric-donut {
791
+ width: 54px;
792
+ height: 54px;
473
793
  }
474
794
 
475
- .control-panel, .graph-panel, .details-panel, .table-panel, .review-panel, .proof-panel, .intelligence-panel {
476
- border: 1px solid var(--line);
477
- border-radius: 6px;
478
- background: rgba(8, 17, 13, 0.94);
479
- box-shadow: var(--shadow);
795
+ .path-insight-card p {
796
+ margin: 12px 0 0;
797
+ color: var(--muted);
798
+ font-size: 11px;
799
+ line-height: 1.45;
480
800
  }
481
801
 
482
- .control-panel {
483
- min-height: 0;
484
- overflow: auto;
485
- padding: 12px;
802
+ .path-suggestion {
803
+ margin-top: 10px;
804
+ color: var(--terminal-dim);
805
+ font-size: 11px;
806
+ }
807
+
808
+ .path-suggestion-button {
809
+ width: 100%;
810
+ display: grid;
811
+ gap: 4px;
812
+ padding: 9px;
813
+ border-color: rgba(106, 215, 255, 0.24);
814
+ background: rgba(106, 215, 255, 0.06);
815
+ box-shadow: none;
816
+ text-align: left;
817
+ white-space: normal;
486
818
  }
487
819
 
488
- body.viewer-tab-controls .control-panel { display: block; }
489
- body.viewer-tab-inspector .details-panel { display: flex; }
490
- body.viewer-tab-intelligence .intelligence-panel { display: block; }
491
- body.viewer-tab-review .workspace-body {
492
- grid-template-rows: minmax(0, 1.05fr) minmax(0, 0.95fr);
820
+ .path-suggestion-button strong,
821
+ .path-suggestion-button span {
822
+ overflow-wrap: anywhere;
493
823
  }
494
- body.viewer-tab-review .review-panel,
495
- body.viewer-tab-review .proof-panel {
824
+
825
+ .path-suggestion-button strong { color: var(--code); }
826
+ .path-suggestion-button span { color: var(--terminal-dim); font-size: 11px; }
827
+
828
+ body.viewer-page-graph .workspace-body {
496
829
  display: block;
497
830
  }
498
- body.viewer-tab-tables .workspace-body {
499
- grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
831
+ body.viewer-page-graph .control-panel,
832
+ body.viewer-page-graph .graph-insights-panel { display: none; }
833
+ body.viewer-page-graph .control-panel { display: block; }
834
+ body.viewer-page-graph .details-panel { display: flex; }
835
+ body.viewer-page-graph:not(.has-selection) .details-panel { display: none; }
836
+ body.viewer-page-graph .workspace-shell {
837
+ min-height: 0;
838
+ height: calc(100vh - 176px);
839
+ max-height: calc(100vh - 176px);
840
+ overflow: auto;
841
+ overscroll-behavior: contain;
842
+ }
843
+ body.viewer-page-graph .metrics-grid { display: none; }
844
+ body.viewer-page-graph .control-panel,
845
+ body.viewer-page-graph .details-panel { margin-bottom: 16px; }
846
+ body.viewer-page-graph .graph-panel {
847
+ min-height: 0;
848
+ height: calc(100vh - 176px);
849
+ }
850
+ body.viewer-page-graph .graph-canvas-wrap,
851
+ body.viewer-page-graph #graphCanvas,
852
+ body.viewer-page-graph .three-graph,
853
+ body.viewer-page-graph #graphSvg {
854
+ min-height: 0;
855
+ }
856
+ body.viewer-page-review .workspace-body {
857
+ grid-template-columns: minmax(0, 1fr);
858
+ align-items: stretch;
500
859
  }
501
- body.viewer-tab-tables .entities-panel,
502
- body.viewer-tab-tables .edges-panel {
860
+ body.viewer-page-review .review-panel {
503
861
  display: block;
504
862
  }
863
+ body.viewer-page-review .proof-panel { display: none; }
864
+ body.viewer-page-owners .workspace-body,
865
+ body.viewer-page-intel .workspace-body { grid-template-columns: minmax(0, 1fr); }
866
+ body.viewer-page-memory .workspace-body {
867
+ grid-template-columns: minmax(0, 1fr);
868
+ align-items: stretch;
869
+ height: auto;
870
+ }
871
+ body.viewer-page-memory.has-selection .workspace-body {
872
+ grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
873
+ }
874
+ body.viewer-page-memory .memory-panel,
875
+ body.viewer-page-owners .owners-panel,
876
+ body.viewer-page-intel .intelligence-panel { display: block; }
877
+ body.viewer-page-memory .memory-panel {
878
+ order: 0;
879
+ min-height: 0;
880
+ }
881
+ body.viewer-page-memory .details-panel { order: 1; display: none; }
882
+ body.viewer-page-memory.has-selection .details-panel {
883
+ display: flex;
884
+ max-height: calc(100vh - 176px);
885
+ min-height: 0;
886
+ position: sticky;
887
+ top: 146px;
888
+ }
889
+ body.viewer-page-data .workspace-body {
890
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, 360px);
891
+ align-items: stretch;
892
+ }
893
+ body.viewer-page-data .entities-panel,
894
+ body.viewer-page-data .edges-panel { display: block; }
895
+ body.viewer-page-data .details-panel {
896
+ display: flex;
897
+ max-height: calc(100vh - 176px);
898
+ }
899
+
900
+ body.viewer-page-memory .workspace-shell,
901
+ body.viewer-page-intel .workspace-shell,
902
+ body.viewer-page-owners .workspace-shell,
903
+ body.viewer-page-review .workspace-shell,
904
+ body.viewer-page-data .workspace-shell {
905
+ min-height: calc(100vh - 176px);
906
+ height: auto;
907
+ max-height: none;
908
+ overflow: visible;
909
+ overscroll-behavior: auto;
910
+ }
505
911
 
506
912
  .workspace-shell .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
507
913
 
508
914
  @media (min-width: 1121px) {
509
- body.viewer-tab-controls .control-panel {
510
- display: grid;
511
- grid-template-columns: repeat(2, minmax(0, 1fr));
512
- gap: 10px;
513
- align-items: end;
915
+ body.viewer-page-graph .control-panel {
916
+ display: block;
514
917
  }
515
- .control-panel .panel-heading, .metrics-grid, .path-finder, .legend { grid-column: 1 / -1; }
516
918
  .control-panel label, .control-panel button { margin-top: 0; }
517
919
  }
518
920
 
@@ -561,6 +963,9 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
561
963
  outline-offset: 1px;
562
964
  }
563
965
  .control-panel button { width: 100%; margin-top: 12px; }
966
+ .journey-actions button,
967
+ .advanced-controls summary,
968
+ .graph-action-card button { margin-top: 0; }
564
969
 
565
970
  .path-finder {
566
971
  display: grid;
@@ -571,6 +976,10 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
571
976
  border-radius: 4px;
572
977
  background: rgba(5, 16, 18, 0.58);
573
978
  }
979
+
980
+ .inspector-path-finder {
981
+ display: none !important;
982
+ }
574
983
  .path-finder-header {
575
984
  display: flex;
576
985
  align-items: center;
@@ -665,6 +1074,10 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
665
1074
  font-size: 11px;
666
1075
  font-variant-numeric: tabular-nums;
667
1076
  }
1077
+ .panel-heading h2 {
1078
+ color: var(--terminal-strong);
1079
+ text-shadow: 0 0 10px rgba(65, 255, 143, 0.28);
1080
+ }
668
1081
 
669
1082
  .metrics-grid {
670
1083
  display: grid;
@@ -713,12 +1126,13 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
713
1126
  .line { width: 24px; height: 2px; display: inline-block; background: var(--edge); }
714
1127
 
715
1128
  .graph-panel {
716
- grid-area: stage;
1129
+ grid-area: graph;
717
1130
  position: relative;
718
1131
  min-height: 640px;
719
1132
  overflow: hidden;
720
1133
  display: grid;
721
1134
  grid-template-rows: auto minmax(0, 1fr);
1135
+ box-shadow: var(--shadow), 0 0 0 1px rgba(65, 255, 143, 0.08), 0 0 58px rgba(65, 255, 143, 0.11);
722
1136
  }
723
1137
 
724
1138
  .graph-toolbar {
@@ -728,7 +1142,9 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
728
1142
  gap: 12px;
729
1143
  padding: 11px 12px;
730
1144
  border-bottom: 1px solid var(--line);
731
- background: linear-gradient(180deg, #0b1710, #07110c);
1145
+ background:
1146
+ radial-gradient(circle at 8% 0, rgba(65, 255, 143, 0.14), transparent 42%),
1147
+ linear-gradient(180deg, #0b1710, #07110c);
732
1148
  }
733
1149
  .graph-toolbar p { color: var(--terminal-dim); font-size: 11px; margin-top: 3px; }
734
1150
  .graph-actions { display: inline-flex; align-items: center; gap: 6px; }
@@ -743,69 +1159,6 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
743
1159
  white-space: nowrap;
744
1160
  }
745
1161
 
746
- .graph-quickbar {
747
- position: absolute;
748
- z-index: 6;
749
- top: 62px;
750
- right: 12px;
751
- display: flex;
752
- flex-wrap: wrap;
753
- justify-content: flex-end;
754
- gap: 8px;
755
- max-width: min(760px, calc(100% - 24px));
756
- pointer-events: none;
757
- }
758
-
759
- .quick-group {
760
- pointer-events: auto;
761
- display: inline-flex;
762
- align-items: center;
763
- gap: 4px;
764
- min-height: 34px;
765
- padding: 4px;
766
- border: 1px solid rgba(65, 255, 143, 0.16);
767
- border-radius: 6px;
768
- background: rgba(4, 10, 7, 0.88);
769
- box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
770
- backdrop-filter: blur(12px);
771
- }
772
-
773
- .quick-group span {
774
- padding: 0 7px;
775
- color: var(--terminal-dim);
776
- font-size: 10px;
777
- font-weight: 800;
778
- text-transform: uppercase;
779
- }
780
-
781
- .quick-group button {
782
- min-height: 25px;
783
- padding: 0 9px;
784
- border-color: transparent;
785
- background: transparent;
786
- box-shadow: none;
787
- color: var(--terminal-dim);
788
- font-size: 10px;
789
- font-weight: 820;
790
- }
791
-
792
- .quick-group button:hover {
793
- border-color: rgba(65, 255, 143, 0.18);
794
- background: rgba(65, 255, 143, 0.08);
795
- color: var(--terminal-strong);
796
- }
797
-
798
- .quick-group button.active,
799
- .quick-group button[aria-pressed="true"] {
800
- border-color: rgba(65, 255, 143, 0.26);
801
- background: rgba(65, 255, 143, 0.14);
802
- color: var(--terminal-strong);
803
- }
804
-
805
- .quick-actions button {
806
- color: var(--code);
807
- }
808
-
809
1162
  .graph-canvas-wrap {
810
1163
  position: relative;
811
1164
  min-height: 600px;
@@ -813,8 +1166,10 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
813
1166
  height: 100%;
814
1167
  overflow: hidden;
815
1168
  background:
816
- radial-gradient(circle at 52% 46%, rgba(65, 255, 143, 0.055), transparent 44%),
1169
+ radial-gradient(circle at 52% 46%, rgba(65, 255, 143, 0.13), transparent 44%),
1170
+ radial-gradient(circle at 18% 26%, rgba(65, 255, 143, 0.09), transparent 32%),
817
1171
  #020503;
1172
+ box-shadow: inset 0 0 80px rgba(65, 255, 143, 0.09);
818
1173
  }
819
1174
 
820
1175
  #graphCanvas, .three-graph {
@@ -946,155 +1301,847 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
946
1301
  overflow: hidden;
947
1302
  padding: 12px;
948
1303
  }
949
- .details-empty { color: var(--terminal-dim); }
950
- #selectionDetails {
951
- min-height: 0;
952
- overflow: auto;
953
- overscroll-behavior: contain;
954
- padding-right: 2px;
1304
+ .details-empty { color: var(--terminal-dim); }
1305
+ #selectionDetails {
1306
+ flex: 1 1 auto;
1307
+ min-height: 0;
1308
+ max-height: min(52vh, 460px);
1309
+ overflow: auto;
1310
+ overscroll-behavior: contain;
1311
+ padding-right: 2px;
1312
+ }
1313
+
1314
+ .inspector-path-finder {
1315
+ flex: 0 0 auto;
1316
+ margin-top: 12px;
1317
+ }
1318
+ body:not(.has-code-selection) .inspector-path-finder { display: none; }
1319
+ .detail-title { margin-bottom: 8px; color: var(--text); font-weight: 780; font-size: 17px; overflow-wrap: anywhere; }
1320
+ .detail-kind { margin-bottom: 10px; color: var(--terminal-strong); background: #07130d; }
1321
+ .detail-row { padding: 9px 0; border-top: 1px solid var(--line); }
1322
+ .detail-row dt { margin: 0 0 4px; color: var(--terminal-dim); font-size: 11px; font-weight: 760; text-transform: uppercase; }
1323
+ .detail-row dd {
1324
+ max-height: 150px;
1325
+ margin: 0;
1326
+ color: var(--text);
1327
+ overflow: auto;
1328
+ overflow-wrap: anywhere;
1329
+ white-space: pre-wrap;
1330
+ }
1331
+ .detail-section {
1332
+ margin-top: 12px;
1333
+ padding-top: 12px;
1334
+ border-top: 1px solid var(--line);
1335
+ min-height: 0;
1336
+ }
1337
+ .detail-section-title {
1338
+ margin-bottom: 8px;
1339
+ color: var(--terminal-dim);
1340
+ font-size: 11px;
1341
+ font-weight: 800;
1342
+ text-transform: uppercase;
1343
+ }
1344
+ .detail-section-list {
1345
+ max-height: 260px;
1346
+ overflow: auto;
1347
+ overscroll-behavior: contain;
1348
+ padding-right: 2px;
1349
+ }
1350
+ .detail-link {
1351
+ width: 100%;
1352
+ display: grid;
1353
+ gap: 4px;
1354
+ min-height: 0;
1355
+ margin-top: 8px;
1356
+ padding: 9px;
1357
+ border-color: rgba(216, 255, 95, 0.28);
1358
+ background: rgba(216, 255, 95, 0.045);
1359
+ color: var(--text);
1360
+ text-align: left;
1361
+ white-space: normal;
1362
+ box-shadow: none;
1363
+ }
1364
+ .detail-link:hover { background: rgba(216, 255, 95, 0.085); }
1365
+ .detail-link-title {
1366
+ color: var(--terminal);
1367
+ font-weight: 820;
1368
+ overflow-wrap: anywhere;
1369
+ }
1370
+ .detail-link-meta {
1371
+ color: var(--warn);
1372
+ font-size: 10px;
1373
+ font-weight: 760;
1374
+ text-transform: uppercase;
1375
+ overflow-wrap: anywhere;
1376
+ }
1377
+ .detail-link-body {
1378
+ display: -webkit-box;
1379
+ -webkit-box-orient: vertical;
1380
+ -webkit-line-clamp: 3;
1381
+ color: var(--muted);
1382
+ font-size: 11px;
1383
+ overflow: hidden;
1384
+ overflow-wrap: anywhere;
1385
+ }
1386
+ .detail-more {
1387
+ margin-top: 9px;
1388
+ color: var(--terminal-dim);
1389
+ font-size: 11px;
1390
+ }
1391
+
1392
+ .table-panel { min-height: 0; overflow: hidden; }
1393
+ .review-panel, .proof-panel, .intelligence-panel, .memory-panel, .owners-panel { min-height: 0; overflow: visible; }
1394
+ body.viewer-page-memory .memory-panel,
1395
+ body.viewer-page-review .review-panel,
1396
+ body.viewer-page-data .table-panel {
1397
+ display: flex;
1398
+ flex-direction: column;
1399
+ }
1400
+ .list { height: calc(100% - 48px); overflow: auto; padding: 0 8px 10px; }
1401
+ .review-list, .proof-list, .memory-list, .owners-list {
1402
+ height: auto;
1403
+ overflow: visible;
1404
+ padding: 0 10px 12px;
1405
+ }
1406
+ .intelligence-list {
1407
+ height: auto;
1408
+ overflow: visible;
1409
+ padding: 0 14px 16px;
1410
+ display: grid;
1411
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1412
+ gap: 16px;
1413
+ align-content: start;
1414
+ }
1415
+ .intel-guide {
1416
+ grid-column: 1 / -1;
1417
+ display: grid;
1418
+ grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
1419
+ gap: 12px;
1420
+ align-items: center;
1421
+ padding: 12px 14px;
1422
+ border: 1px solid rgba(65, 255, 143, 0.18);
1423
+ border-radius: 8px;
1424
+ background: rgba(65, 255, 143, 0.05);
1425
+ }
1426
+ .intel-guide strong {
1427
+ color: var(--terminal-strong);
1428
+ font-size: 13px;
1429
+ }
1430
+ .intel-guide span {
1431
+ color: var(--terminal-dim);
1432
+ font-size: 12px;
1433
+ line-height: 1.45;
1434
+ }
1435
+ .intel-deep-grid {
1436
+ grid-column: 1 / -1;
1437
+ display: grid;
1438
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1439
+ gap: 14px;
1440
+ }
1441
+
1442
+ .intel-deep-drawer {
1443
+ grid-column: 1 / -1;
1444
+ border: 1px solid rgba(65, 255, 143, 0.16);
1445
+ border-radius: 8px;
1446
+ background: rgba(4, 13, 8, 0.72);
1447
+ overflow: hidden;
1448
+ }
1449
+
1450
+ .intel-deep-drawer summary {
1451
+ min-height: 46px;
1452
+ display: flex;
1453
+ align-items: center;
1454
+ justify-content: space-between;
1455
+ gap: 12px;
1456
+ padding: 0 14px;
1457
+ color: var(--terminal-strong);
1458
+ cursor: pointer;
1459
+ }
1460
+
1461
+ .intel-deep-drawer summary em {
1462
+ color: var(--terminal-dim);
1463
+ font-size: 12px;
1464
+ font-style: normal;
1465
+ }
1466
+
1467
+ .intel-deep-drawer .intel-deep-grid {
1468
+ padding: 14px;
1469
+ }
1470
+
1471
+ .proof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
1472
+ .memory-overview,
1473
+ .owners-summary,
1474
+ .review-overview,
1475
+ .proof-overview {
1476
+ display: grid;
1477
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1478
+ gap: 8px;
1479
+ padding: 0 10px 10px;
1480
+ }
1481
+
1482
+ .memory-overview,
1483
+ .review-overview,
1484
+ .proof-overview {
1485
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1486
+ }
1487
+
1488
+ body.viewer-page-memory .memory-overview {
1489
+ display: none;
1490
+ }
1491
+
1492
+ body.viewer-page-memory .memory-list {
1493
+ height: auto;
1494
+ min-height: 280px;
1495
+ flex: 0 0 auto;
1496
+ overflow: visible;
1497
+ }
1498
+
1499
+ .memory-governance {
1500
+ flex: 0 0 auto;
1501
+ min-height: 0;
1502
+ margin: 0 10px 12px;
1503
+ border: 1px solid rgba(65, 255, 143, 0.18);
1504
+ border-radius: 8px;
1505
+ background: rgba(4, 13, 8, 0.76);
1506
+ overflow: hidden;
1507
+ }
1508
+
1509
+ .memory-governance[open] {
1510
+ max-height: min(56vh, 620px);
1511
+ overflow: auto;
1512
+ overscroll-behavior: contain;
1513
+ }
1514
+
1515
+ .memory-governance summary {
1516
+ min-height: 40px;
1517
+ display: flex;
1518
+ align-items: center;
1519
+ justify-content: space-between;
1520
+ gap: 12px;
1521
+ padding: 0 12px;
1522
+ cursor: pointer;
1523
+ color: var(--terminal-strong);
1524
+ font-size: 12px;
1525
+ font-weight: 800;
1526
+ }
1527
+
1528
+ .memory-governance summary em {
1529
+ color: var(--terminal-dim);
1530
+ font-size: 10px;
1531
+ font-style: normal;
1532
+ font-weight: 760;
1533
+ text-transform: uppercase;
1534
+ }
1535
+
1536
+ .memory-governance > section {
1537
+ margin: 10px;
1538
+ }
1539
+
1540
+ .memory-lifecycle {
1541
+ margin: 0 10px 12px;
1542
+ padding: 12px;
1543
+ border: 1px solid rgba(65, 255, 143, 0.18);
1544
+ border-radius: 8px;
1545
+ background:
1546
+ linear-gradient(180deg, rgba(65, 255, 143, 0.07), rgba(65, 255, 143, 0.025)),
1547
+ rgba(5, 12, 8, 0.86);
1548
+ box-shadow: inset 0 0 0 1px rgba(65, 255, 143, 0.05);
1549
+ }
1550
+
1551
+ .memory-review-actions {
1552
+ margin: 0 10px 12px;
1553
+ padding: 12px;
1554
+ border: 1px solid rgba(65, 255, 143, 0.22);
1555
+ border-radius: 8px;
1556
+ background:
1557
+ radial-gradient(circle at top right, rgba(65, 255, 143, 0.12), transparent 42%),
1558
+ rgba(4, 13, 8, 0.88);
1559
+ box-shadow: 0 0 26px rgba(65, 255, 143, 0.06), inset 0 0 0 1px rgba(65, 255, 143, 0.05);
1560
+ }
1561
+
1562
+ .memory-action-list {
1563
+ display: grid;
1564
+ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
1565
+ gap: 10px;
1566
+ margin-top: 12px;
1567
+ }
1568
+
1569
+ .memory-action {
1570
+ border: 1px solid rgba(65, 255, 143, 0.17);
1571
+ border-radius: 8px;
1572
+ background: rgba(2, 10, 6, 0.82);
1573
+ padding: 12px;
1574
+ transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
1575
+ }
1576
+
1577
+ .memory-action[role="button"] { cursor: pointer; }
1578
+
1579
+ .memory-action[role="button"]:hover,
1580
+ .memory-action[role="button"]:focus-visible {
1581
+ border-color: rgba(65, 255, 143, 0.38);
1582
+ box-shadow: 0 0 22px rgba(65, 255, 143, 0.12);
1583
+ transform: translateY(-1px);
1584
+ outline: none;
1585
+ }
1586
+
1587
+ .memory-action-warn { border-color: rgba(255, 209, 102, 0.24); }
1588
+ .memory-action-ok { border-color: rgba(65, 255, 143, 0.26); }
1589
+ .memory-action-info { border-color: rgba(106, 215, 255, 0.22); }
1590
+
1591
+ .memory-action-head {
1592
+ display: flex;
1593
+ align-items: start;
1594
+ justify-content: space-between;
1595
+ gap: 10px;
1596
+ }
1597
+
1598
+ .memory-action-head span {
1599
+ border: 1px solid rgba(65, 255, 143, 0.18);
1600
+ border-radius: 999px;
1601
+ color: var(--accent);
1602
+ font-size: 10px;
1603
+ font-weight: 800;
1604
+ letter-spacing: 0;
1605
+ padding: 3px 7px;
1606
+ text-transform: uppercase;
1607
+ white-space: nowrap;
1608
+ }
1609
+
1610
+ .memory-action-head strong {
1611
+ color: var(--terminal-strong);
1612
+ font-size: 12px;
1613
+ line-height: 1.35;
1614
+ text-align: right;
1615
+ overflow-wrap: anywhere;
1616
+ }
1617
+
1618
+ .memory-action p,
1619
+ .memory-action em {
1620
+ display: block;
1621
+ color: var(--muted);
1622
+ font-size: 11px;
1623
+ line-height: 1.45;
1624
+ margin: 10px 0 0;
1625
+ overflow-wrap: anywhere;
1626
+ }
1627
+
1628
+ .memory-action em {
1629
+ color: var(--terminal-strong);
1630
+ font-style: normal;
1631
+ }
1632
+
1633
+ .session-capture {
1634
+ margin: 0 10px 12px;
1635
+ padding: 12px;
1636
+ border: 1px solid rgba(106, 215, 255, 0.18);
1637
+ border-radius: 8px;
1638
+ background:
1639
+ linear-gradient(180deg, rgba(106, 215, 255, 0.07), rgba(65, 255, 143, 0.02)),
1640
+ rgba(5, 12, 10, 0.86);
1641
+ box-shadow: inset 0 0 0 1px rgba(106, 215, 255, 0.04);
1642
+ }
1643
+
1644
+ .session-capture-list {
1645
+ display: grid;
1646
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
1647
+ gap: 10px;
1648
+ margin-top: 12px;
1649
+ }
1650
+
1651
+ .session-capture-card {
1652
+ border: 1px solid rgba(106, 215, 255, 0.16);
1653
+ border-radius: 8px;
1654
+ background: rgba(3, 11, 10, 0.82);
1655
+ padding: 12px;
1656
+ }
1657
+
1658
+ .session-capture-head {
1659
+ display: flex;
1660
+ align-items: flex-start;
1661
+ justify-content: space-between;
1662
+ gap: 10px;
1663
+ }
1664
+
1665
+ .session-capture-head strong {
1666
+ display: block;
1667
+ color: var(--terminal-strong);
1668
+ font-size: 12px;
1669
+ overflow-wrap: anywhere;
1670
+ }
1671
+
1672
+ .session-capture-head span,
1673
+ .session-capture-card p {
1674
+ color: var(--muted);
1675
+ font-size: 11px;
1676
+ line-height: 1.45;
1677
+ }
1678
+
1679
+ .session-capture-head em {
1680
+ color: var(--accent);
1681
+ font-size: 11px;
1682
+ font-style: normal;
1683
+ white-space: nowrap;
1684
+ }
1685
+
1686
+ .session-capture-meta {
1687
+ display: flex;
1688
+ flex-wrap: wrap;
1689
+ gap: 6px;
1690
+ margin-top: 10px;
1691
+ }
1692
+
1693
+ .session-capture-meta span {
1694
+ border: 1px solid rgba(106, 215, 255, 0.16);
1695
+ border-radius: 999px;
1696
+ background: rgba(106, 215, 255, 0.05);
1697
+ color: var(--muted);
1698
+ font-size: 10px;
1699
+ padding: 4px 6px;
1700
+ overflow-wrap: anywhere;
1701
+ }
1702
+
1703
+ .lifecycle-head {
1704
+ display: flex;
1705
+ align-items: start;
1706
+ justify-content: space-between;
1707
+ gap: 12px;
1708
+ margin-bottom: 10px;
1709
+ }
1710
+
1711
+ .lifecycle-head h3 {
1712
+ margin: 0;
1713
+ color: var(--terminal-strong);
1714
+ font-size: 13px;
1715
+ text-shadow: 0 0 12px rgba(65, 255, 143, 0.30);
1716
+ }
1717
+
1718
+ .lifecycle-head p {
1719
+ margin-top: 3px;
1720
+ color: var(--muted);
1721
+ font-size: 11px;
1722
+ }
1723
+
1724
+ .lifecycle-head span {
1725
+ min-width: max-content;
1726
+ padding: 4px 8px;
1727
+ border: 1px solid rgba(65, 255, 143, 0.22);
1728
+ border-radius: 999px;
1729
+ color: var(--terminal-strong);
1730
+ font-size: 10px;
1731
+ font-weight: 800;
1732
+ }
1733
+
1734
+ .lifecycle-summary {
1735
+ display: grid;
1736
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1737
+ gap: 8px;
1738
+ margin-bottom: 10px;
1739
+ }
1740
+
1741
+ .lifecycle-step {
1742
+ display: grid;
1743
+ grid-template-columns: 24px minmax(0, 1fr) auto;
1744
+ gap: 6px 8px;
1745
+ align-items: center;
1746
+ padding: 9px;
1747
+ border: 1px solid rgba(65, 255, 143, 0.12);
1748
+ border-radius: 6px;
1749
+ background: rgba(8, 17, 13, 0.82);
1750
+ }
1751
+
1752
+ .lifecycle-step strong {
1753
+ width: 24px;
1754
+ height: 24px;
1755
+ display: grid;
1756
+ place-items: center;
1757
+ border-radius: 50%;
1758
+ background: rgba(65, 255, 143, 0.12);
1759
+ color: var(--terminal-strong);
1760
+ }
1761
+
1762
+ .lifecycle-step span {
1763
+ color: var(--terminal);
1764
+ font-size: 11px;
1765
+ font-weight: 820;
1766
+ }
1767
+
1768
+ .lifecycle-step em {
1769
+ color: var(--code);
1770
+ font-size: 12px;
1771
+ font-style: normal;
1772
+ font-weight: 820;
1773
+ }
1774
+
1775
+ .lifecycle-step p {
1776
+ grid-column: 1 / -1;
1777
+ color: var(--muted);
1778
+ font-size: 10px;
1779
+ line-height: 1.35;
1780
+ }
1781
+
1782
+ .lifecycle-list {
1783
+ display: grid;
1784
+ gap: 8px;
1785
+ max-height: 360px;
1786
+ overflow: auto;
1787
+ padding-right: 2px;
1788
+ }
1789
+
1790
+ .lifecycle-card {
1791
+ padding: 10px;
1792
+ border: 1px solid rgba(65, 255, 143, 0.13);
1793
+ border-radius: 7px;
1794
+ background: rgba(8, 17, 13, 0.76);
1795
+ }
1796
+
1797
+ .lifecycle-card-head {
1798
+ display: flex;
1799
+ justify-content: space-between;
1800
+ gap: 10px;
1801
+ }
1802
+
1803
+ .lifecycle-card-head strong {
1804
+ display: block;
1805
+ color: var(--terminal-strong);
1806
+ font-size: 12px;
1807
+ overflow-wrap: anywhere;
1808
+ }
1809
+
1810
+ .lifecycle-card-head span {
1811
+ display: block;
1812
+ margin-top: 2px;
1813
+ color: var(--terminal-dim);
1814
+ font-size: 10px;
1815
+ }
1816
+
1817
+ .lifecycle-card-head button {
1818
+ min-height: 28px;
1819
+ padding: 0 10px;
1820
+ border: 1px solid rgba(65, 255, 143, 0.22);
1821
+ border-radius: 4px;
1822
+ background: rgba(65, 255, 143, 0.08);
1823
+ color: var(--terminal-strong);
1824
+ font-weight: 780;
1825
+ }
1826
+
1827
+ .lifecycle-card > p {
1828
+ margin: 8px 0 10px;
1829
+ color: var(--muted);
1830
+ font-size: 11px;
1831
+ line-height: 1.4;
1832
+ }
1833
+
1834
+ .lifecycle-flow {
1835
+ display: grid;
1836
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1837
+ gap: 7px;
1838
+ }
1839
+
1840
+ .lifecycle-cell {
1841
+ min-height: 72px;
1842
+ padding: 8px;
1843
+ border: 1px solid rgba(65, 255, 143, 0.10);
1844
+ border-radius: 5px;
1845
+ background: rgba(5, 12, 8, 0.70);
1846
+ }
1847
+
1848
+ .lifecycle-cell span {
1849
+ display: block;
1850
+ margin-bottom: 5px;
1851
+ color: var(--terminal-dim);
1852
+ font-size: 9px;
1853
+ font-weight: 850;
1854
+ text-transform: uppercase;
1855
+ }
1856
+
1857
+ .lifecycle-cell strong {
1858
+ display: block;
1859
+ color: var(--text);
1860
+ font-size: 10px;
1861
+ line-height: 1.35;
1862
+ overflow-wrap: anywhere;
1863
+ }
1864
+
1865
+ .memory-overview .metric-card,
1866
+ .owners-summary .metric-card,
1867
+ .review-overview .metric-card,
1868
+ .proof-overview .metric-card {
1869
+ min-height: 132px;
1870
+ padding: 11px;
1871
+ }
1872
+
1873
+ .memory-overview .metric-visual,
1874
+ .owners-summary .metric-visual,
1875
+ .review-overview .metric-visual,
1876
+ .proof-overview .metric-visual {
1877
+ grid-template-columns: 58px minmax(0, 1fr);
1878
+ gap: 10px;
1879
+ }
1880
+
1881
+ .memory-overview .metric-donut,
1882
+ .owners-summary .metric-donut,
1883
+ .review-overview .metric-donut,
1884
+ .proof-overview .metric-donut {
1885
+ width: 56px;
1886
+ height: 56px;
1887
+ }
1888
+
1889
+ .memory-list {
1890
+ display: grid;
1891
+ gap: 12px;
1892
+ align-content: start;
1893
+ height: auto;
1894
+ overflow: visible;
1895
+ padding: 0 14px 16px;
1896
+ }
1897
+ .memory-hero {
1898
+ margin: 0 10px 10px;
1899
+ padding: 12px;
1900
+ border: 1px solid rgba(65, 255, 143, 0.16);
1901
+ border-radius: 8px;
1902
+ background: rgba(65, 255, 143, 0.045);
1903
+ }
1904
+ .memory-hero strong {
1905
+ display: block;
1906
+ color: var(--terminal-strong);
1907
+ font-size: 13px;
955
1908
  }
956
- .detail-title { margin-bottom: 8px; color: var(--text); font-weight: 780; font-size: 17px; overflow-wrap: anywhere; }
957
- .detail-kind { margin-bottom: 10px; color: var(--terminal-strong); background: #07130d; }
958
- .detail-row { padding: 9px 0; border-top: 1px solid var(--line); }
959
- .detail-row dt { margin: 0 0 4px; color: var(--terminal-dim); font-size: 11px; font-weight: 760; text-transform: uppercase; }
960
- .detail-row dd {
961
- max-height: 150px;
962
- margin: 0;
963
- color: var(--text);
964
- overflow: auto;
965
- overflow-wrap: anywhere;
966
- white-space: pre-wrap;
1909
+ .memory-hero span {
1910
+ display: block;
1911
+ margin-top: 5px;
1912
+ color: var(--terminal-dim);
1913
+ font-size: 12px;
1914
+ line-height: 1.4;
967
1915
  }
968
- .detail-section {
969
- margin-top: 12px;
970
- padding-top: 12px;
971
- border-top: 1px solid var(--line);
972
- min-height: 0;
1916
+ .memory-stats {
1917
+ display: grid;
1918
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1919
+ gap: 12px;
1920
+ padding: 0 14px 14px;
973
1921
  }
974
- .detail-section-title {
975
- margin-bottom: 8px;
1922
+ .memory-stats div {
1923
+ min-height: 72px;
1924
+ padding: 12px;
1925
+ border: 1px solid rgba(65, 255, 143, 0.12);
1926
+ border-radius: 8px;
1927
+ background: rgba(3, 8, 5, 0.74);
1928
+ }
1929
+ .memory-stats strong {
1930
+ display: block;
1931
+ color: var(--terminal-strong);
1932
+ font-size: 18px;
1933
+ }
1934
+ .memory-stats span {
1935
+ display: block;
1936
+ margin-top: 4px;
976
1937
  color: var(--terminal-dim);
977
- font-size: 11px;
978
- font-weight: 800;
1938
+ font-size: 10px;
1939
+ font-weight: 760;
979
1940
  text-transform: uppercase;
980
1941
  }
981
- .detail-section-list {
982
- max-height: 260px;
983
- overflow: auto;
984
- overscroll-behavior: contain;
985
- padding-right: 2px;
1942
+ .memory-toolbar {
1943
+ display: grid;
1944
+ grid-template-columns: minmax(0, 1fr) 150px;
1945
+ gap: 12px;
1946
+ padding: 0 14px 14px;
986
1947
  }
987
- .detail-link {
1948
+
1949
+ .memory-row {
988
1950
  width: 100%;
989
1951
  display: grid;
990
- gap: 4px;
991
- min-height: 0;
992
- margin-top: 8px;
993
- padding: 9px;
994
- border-color: rgba(216, 255, 95, 0.28);
995
- background: rgba(216, 255, 95, 0.045);
1952
+ grid-template-columns: minmax(0, 1fr);
1953
+ gap: 8px;
1954
+ align-items: start;
1955
+ min-height: 96px;
1956
+ padding: 16px;
1957
+ border: 1px solid rgba(65, 255, 143, 0.12);
1958
+ border-radius: 8px;
1959
+ background: rgba(6, 16, 11, 0.88);
996
1960
  color: var(--text);
997
1961
  text-align: left;
998
1962
  white-space: normal;
1963
+ cursor: pointer;
999
1964
  box-shadow: none;
1000
1965
  }
1001
- .detail-link:hover { background: rgba(216, 255, 95, 0.085); }
1002
- .detail-link-title {
1966
+ .memory-row:hover,
1967
+ .memory-row.selected,
1968
+ .memory-row[aria-selected="true"] {
1969
+ border-color: var(--terminal-strong);
1970
+ background: rgba(65, 255, 143, 0.12);
1971
+ box-shadow: 0 0 22px rgba(65, 255, 143, 0.14);
1972
+ }
1973
+ .memory-row-main {
1974
+ display: flex;
1975
+ justify-content: space-between;
1976
+ gap: 10px;
1977
+ }
1978
+ .memory-row strong {
1003
1979
  color: var(--terminal);
1004
- font-weight: 820;
1980
+ font-size: 14px;
1981
+ text-shadow: 0 0 9px rgba(65, 255, 143, 0.14);
1005
1982
  overflow-wrap: anywhere;
1006
1983
  }
1007
- .detail-link-meta {
1008
- color: var(--warn);
1009
- font-size: 10px;
1984
+ .memory-row-main em {
1985
+ color: var(--memory);
1986
+ font-size: 11px;
1010
1987
  font-weight: 760;
1011
- text-transform: uppercase;
1012
- overflow-wrap: anywhere;
1988
+ font-style: normal;
1989
+ white-space: nowrap;
1013
1990
  }
1014
- .detail-link-body {
1015
- display: -webkit-box;
1016
- -webkit-box-orient: vertical;
1017
- -webkit-line-clamp: 3;
1991
+ .memory-row-meta,
1992
+ .memory-row-target {
1018
1993
  color: var(--muted);
1019
- font-size: 11px;
1020
- overflow: hidden;
1994
+ font-size: 12px;
1995
+ line-height: 1.35;
1021
1996
  overflow-wrap: anywhere;
1022
1997
  }
1023
- .detail-more {
1024
- margin-top: 9px;
1025
- color: var(--terminal-dim);
1026
- font-size: 11px;
1998
+ .memory-row-meta {
1999
+ display: -webkit-box;
2000
+ min-height: 30px;
2001
+ overflow: hidden;
2002
+ -webkit-box-orient: vertical;
2003
+ -webkit-line-clamp: 2;
1027
2004
  }
2005
+ .memory-row-target { color: var(--terminal-dim); }
1028
2006
 
1029
- .table-panel { min-height: 0; overflow: hidden; }
1030
- .review-panel, .proof-panel, .intelligence-panel { min-height: 0; overflow: hidden; }
1031
- .list { height: calc(100% - 48px); overflow: auto; padding: 0 8px 10px; }
1032
- .review-list, .proof-list {
1033
- height: calc(100% - 48px);
1034
- overflow: auto;
1035
- padding: 0 10px 12px;
1036
- }
1037
- .intelligence-list {
1038
- height: calc(100% - 48px);
1039
- overflow: auto;
1040
- padding: 0 10px 12px;
2007
+ .owners-list {
1041
2008
  display: grid;
1042
- grid-template-columns: repeat(4, minmax(0, 1fr));
1043
- gap: 8px;
2009
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2010
+ gap: 10px;
1044
2011
  align-content: start;
2012
+ height: auto;
2013
+ overflow: visible;
2014
+ padding: 0 10px 12px;
1045
2015
  }
1046
- .intel-deep-grid {
2016
+ .owner-card {
2017
+ min-height: 130px;
2018
+ padding: 13px;
2019
+ border: 1px solid rgba(65, 255, 143, 0.12);
2020
+ border-radius: 10px;
2021
+ background: rgba(6, 16, 11, 0.88);
2022
+ }
2023
+ .owner-head {
2024
+ display: flex;
2025
+ justify-content: space-between;
2026
+ gap: 10px;
2027
+ }
2028
+ .owner-head strong {
2029
+ color: var(--text);
2030
+ overflow-wrap: anywhere;
2031
+ }
2032
+ .owner-head span,
2033
+ .owner-stats,
2034
+ .owner-card p {
2035
+ color: var(--terminal-dim);
2036
+ font-size: 11px;
2037
+ }
2038
+ .owner-stats { margin-top: 9px; }
2039
+ .owner-card p { margin-top: 9px; color: var(--muted); }
2040
+ .owner-silos {
1047
2041
  grid-column: 1 / -1;
1048
2042
  display: grid;
1049
- grid-template-columns: repeat(3, minmax(0, 1fr));
1050
2043
  gap: 8px;
2044
+ margin-top: 4px;
1051
2045
  }
1052
-
1053
- .workspace-shell .intelligence-list,
1054
- .workspace-shell .intel-deep-grid {
1055
- grid-template-columns: 1fr;
2046
+ .owner-silos h3 {
2047
+ margin: 8px 0 0;
2048
+ color: var(--terminal);
2049
+ font-size: 13px;
1056
2050
  }
1057
-
1058
- .workspace-shell .proof-list {
1059
- grid-template-columns: repeat(2, minmax(0, 1fr));
2051
+ .owner-silo-row {
2052
+ width: 100%;
2053
+ display: grid;
2054
+ grid-template-columns: minmax(0, 1fr) auto;
2055
+ gap: 10px;
2056
+ padding: 10px 12px;
2057
+ border-color: rgba(255, 209, 102, 0.25);
2058
+ background: rgba(255, 209, 102, 0.05);
2059
+ box-shadow: none;
2060
+ text-align: left;
2061
+ }
2062
+ .owner-silo-row strong { overflow-wrap: anywhere; }
2063
+ .owner-silo-row span {
2064
+ color: var(--warn);
2065
+ font-size: 11px;
2066
+ white-space: nowrap;
1060
2067
  }
1061
2068
  .intel-card {
1062
- min-height: 160px;
1063
- padding: 11px;
2069
+ min-height: 250px;
2070
+ padding: 18px;
1064
2071
  border: 1px solid var(--line);
1065
- border-radius: 4px;
2072
+ border-radius: 8px;
1066
2073
  background: #06100b;
1067
2074
  overflow: hidden;
1068
2075
  }
2076
+ .intel-card-head {
2077
+ display: flex;
2078
+ align-items: flex-start;
2079
+ justify-content: space-between;
2080
+ gap: 12px;
2081
+ }
1069
2082
  .intel-card h3 {
1070
2083
  margin: 0;
1071
2084
  color: var(--terminal);
1072
- font-size: 12px;
2085
+ font-size: 15px;
1073
2086
  letter-spacing: 0;
1074
2087
  overflow-wrap: anywhere;
1075
2088
  }
1076
- .intel-card .intel-kicker {
2089
+ .intel-card-head span {
2090
+ display: block;
1077
2091
  margin-top: 4px;
1078
2092
  color: var(--terminal-dim);
1079
2093
  font-size: 10px;
1080
2094
  font-weight: 760;
1081
2095
  text-transform: uppercase;
1082
2096
  }
1083
- .intel-card .intel-summary {
1084
- margin-top: 8px;
2097
+ .intel-card-head strong {
2098
+ flex: 0 0 auto;
2099
+ color: var(--terminal-strong);
2100
+ font-size: 20px;
2101
+ line-height: 1;
2102
+ text-align: right;
2103
+ max-width: 42%;
2104
+ overflow-wrap: anywhere;
2105
+ }
2106
+ .intel-metric-label {
2107
+ margin-top: 5px;
2108
+ color: var(--terminal-dim);
2109
+ font-size: 10px;
2110
+ font-weight: 760;
2111
+ text-align: right;
2112
+ text-transform: uppercase;
2113
+ }
2114
+ .intel-highlight {
2115
+ margin: 14px 0 0;
1085
2116
  color: var(--text);
1086
- font-size: 11px;
2117
+ font-size: 13px;
2118
+ line-height: 1.45;
1087
2119
  overflow-wrap: anywhere;
1088
2120
  }
2121
+ .intel-action {
2122
+ margin: 12px 0 0;
2123
+ padding: 11px;
2124
+ border-left: 2px solid var(--terminal-strong);
2125
+ background: rgba(65, 255, 143, 0.06);
2126
+ color: var(--terminal-dim);
2127
+ font-size: 12px;
2128
+ line-height: 1.4;
2129
+ }
2130
+ .intel-action b {
2131
+ display: inline-block;
2132
+ margin-right: 6px;
2133
+ color: var(--terminal-strong);
2134
+ text-transform: uppercase;
2135
+ }
1089
2136
  .intel-card ul {
1090
2137
  margin: 9px 0 0;
1091
2138
  padding: 0;
1092
2139
  list-style: none;
1093
2140
  }
1094
2141
  .intel-card li {
1095
- padding-top: 6px;
2142
+ padding-top: 8px;
1096
2143
  color: var(--muted);
1097
- font-size: 11px;
2144
+ font-size: 12px;
1098
2145
  overflow-wrap: anywhere;
1099
2146
  }
1100
2147
  .intel-card strong { color: var(--terminal-strong); }
@@ -1186,8 +2233,10 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1186
2233
  color: var(--terminal-dim);
1187
2234
  font-size: 10px;
1188
2235
  overflow: hidden;
1189
- text-overflow: ellipsis;
1190
- white-space: nowrap;
2236
+ display: -webkit-box;
2237
+ -webkit-box-orient: vertical;
2238
+ -webkit-line-clamp: 2;
2239
+ white-space: normal;
1191
2240
  }
1192
2241
  .intel-row-bar {
1193
2242
  display: block;
@@ -1210,9 +2259,11 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1210
2259
  padding: 10px 0;
1211
2260
  border-top: 1px solid var(--line);
1212
2261
  }
2262
+ .review-list { height: auto; }
1213
2263
  .review-title {
1214
2264
  color: var(--terminal);
1215
2265
  font-weight: 820;
2266
+ text-shadow: 0 0 9px rgba(65, 255, 143, 0.14);
1216
2267
  overflow-wrap: anywhere;
1217
2268
  }
1218
2269
  .review-meta, .review-risks {
@@ -1246,6 +2297,9 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1246
2297
  grid-template-columns: repeat(3, minmax(0, 1fr));
1247
2298
  gap: 8px;
1248
2299
  align-content: start;
2300
+ height: auto;
2301
+ overflow: visible;
2302
+ padding: 0 10px 12px;
1249
2303
  }
1250
2304
  .proof-item {
1251
2305
  min-height: 62px;
@@ -1267,6 +2321,76 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1267
2321
  font-weight: 760;
1268
2322
  text-transform: uppercase;
1269
2323
  }
2324
+ .proof-ledger-item {
2325
+ grid-column: span 1;
2326
+ min-height: 132px;
2327
+ background: linear-gradient(180deg, rgba(12, 34, 23, 0.92), rgba(5, 16, 11, 0.96));
2328
+ }
2329
+ .proof-ledger-item.is-ok {
2330
+ border-color: rgba(53, 246, 159, 0.34);
2331
+ box-shadow: 0 0 18px rgba(53, 246, 159, 0.08);
2332
+ }
2333
+ .proof-ledger-item.is-warn {
2334
+ border-color: rgba(255, 211, 105, 0.36);
2335
+ }
2336
+ .proof-ledger-item code {
2337
+ display: block;
2338
+ margin-top: 10px;
2339
+ padding: 8px;
2340
+ border: 1px solid var(--line);
2341
+ border-radius: 4px;
2342
+ overflow: auto;
2343
+ color: var(--terminal-strong);
2344
+ background: rgba(0, 0, 0, 0.22);
2345
+ font-size: 10px;
2346
+ white-space: nowrap;
2347
+ }
2348
+ .proof-ledger-item p {
2349
+ margin: 9px 0 0;
2350
+ color: var(--terminal-muted);
2351
+ font-size: 11px;
2352
+ line-height: 1.45;
2353
+ }
2354
+
2355
+ .debug-guide {
2356
+ margin: 0 10px 10px;
2357
+ padding: 10px 12px;
2358
+ border: 1px solid rgba(65, 255, 143, 0.12);
2359
+ border-radius: 8px;
2360
+ background: rgba(65, 255, 143, 0.045);
2361
+ color: var(--terminal-dim);
2362
+ font-size: 11px;
2363
+ line-height: 1.4;
2364
+ }
2365
+
2366
+ .debug-overview {
2367
+ display: grid;
2368
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2369
+ gap: 8px;
2370
+ padding: 0 10px 10px;
2371
+ }
2372
+
2373
+ body.viewer-page-data .debug-overview {
2374
+ grid-template-columns: 1fr;
2375
+ }
2376
+
2377
+ .debug-overview .metric-card {
2378
+ min-height: 132px;
2379
+ padding: 11px;
2380
+ }
2381
+
2382
+ .debug-overview .metric-visual {
2383
+ grid-template-columns: 58px minmax(0, 1fr);
2384
+ gap: 10px;
2385
+ }
2386
+
2387
+ .debug-overview .metric-donut {
2388
+ width: 56px;
2389
+ height: 56px;
2390
+ }
2391
+
2392
+ .table-panel .list { height: calc(100% - 96px); }
2393
+ .entities-panel .list { height: calc(100% - 250px); }
1270
2394
  .list-item {
1271
2395
  width: 100%;
1272
2396
  display: grid;
@@ -1281,11 +2405,28 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1281
2405
  cursor: pointer;
1282
2406
  }
1283
2407
  .list-item:hover, .list-item.selected { background: rgba(65, 255, 143, 0.08); }
1284
- .item-title { color: var(--terminal); font-weight: 780; overflow-wrap: anywhere; }
2408
+ .item-title {
2409
+ color: var(--terminal);
2410
+ font-weight: 780;
2411
+ text-shadow: 0 0 9px rgba(65, 255, 143, 0.14);
2412
+ overflow-wrap: anywhere;
2413
+ }
1285
2414
  .item-meta { color: var(--terminal-dim); font-size: 11px; overflow-wrap: anywhere; }
2415
+ .list-note {
2416
+ padding: 12px 8px;
2417
+ border-top: 1px solid var(--line);
2418
+ color: var(--warn);
2419
+ font-size: 11px;
2420
+ line-height: 1.4;
2421
+ }
1286
2422
 
1287
2423
  .edge-line { stroke: var(--edge); stroke-width: 1.35; marker-end: url(#arrow); opacity: 0.50; }
1288
- .edge-line.memory-code-link { stroke: #d8ff5f; stroke-width: 2.2; opacity: 0.88; }
2424
+ .edge-line.memory-code-link {
2425
+ stroke: #d8ff5f;
2426
+ stroke-width: 2.2;
2427
+ opacity: 0.88;
2428
+ filter: drop-shadow(0 0 7px rgba(216, 255, 95, 0.42));
2429
+ }
1289
2430
  .edge-line.filtered { opacity: 0.05; }
1290
2431
  .edge-line.selected, .edge-line.connected { stroke: var(--terminal-strong); stroke-width: 2.8; opacity: 1; }
1291
2432
  .edge-line.review-low-confidence { stroke-dasharray: 5 4; stroke: var(--warn); }
@@ -1302,6 +2443,7 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1302
2443
  .node.graph-memory .node-body {
1303
2444
  fill: var(--memory-soft);
1304
2445
  stroke: var(--memory);
2446
+ filter: drop-shadow(0 0 10px rgba(65, 255, 143, 0.46)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.38));
1305
2447
  }
1306
2448
  .node.graph-code .node-body {
1307
2449
  fill: var(--code-soft);
@@ -1345,12 +2487,27 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1345
2487
  }
1346
2488
 
1347
2489
  @media (max-width: 1120px) {
2490
+ .viewer-shell {
2491
+ grid-template-columns: 1fr;
2492
+ }
2493
+ .repo-sidebar {
2494
+ position: relative;
2495
+ height: auto;
2496
+ grid-template-rows: auto auto auto auto;
2497
+ border-right: 0;
2498
+ border-bottom: 1px solid rgba(65, 255, 143, 0.13);
2499
+ }
2500
+ .viewer-sections {
2501
+ grid-template-columns: repeat(4, minmax(0, 1fr));
2502
+ }
2503
+ .sidebar-links {
2504
+ grid-template-columns: repeat(4, auto);
2505
+ justify-content: start;
2506
+ }
1348
2507
  .app-header {
1349
2508
  grid-template-columns: 1fr;
1350
2509
  grid-template-areas:
1351
2510
  "brand"
1352
- "links"
1353
- "sections"
1354
2511
  "status"
1355
2512
  "autoload"
1356
2513
  "picker";
@@ -1363,23 +2520,47 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1363
2520
  .status-pill { min-height: 24px; padding: 3px 8px; }
1364
2521
  .layout {
1365
2522
  grid-template-columns: 1fr;
1366
- grid-template-rows: minmax(620px, 72vh);
1367
- grid-template-areas: "stage";
2523
+ grid-template-areas:
2524
+ "dashboard"
2525
+ "graph"
2526
+ "workspace";
2527
+ }
2528
+ body.viewer-page-overview .layout,
2529
+ body.viewer-page-memory .layout,
2530
+ body.viewer-page-owners .layout,
2531
+ body.viewer-page-intel .layout,
2532
+ body.viewer-page-review .layout,
2533
+ body.viewer-page-data .layout {
2534
+ grid-template-columns: 1fr;
2535
+ grid-template-areas: "workspace";
2536
+ }
2537
+ body.viewer-page-overview .layout { grid-template-areas: "dashboard"; }
2538
+ body.viewer-page-graph .layout {
2539
+ grid-template-columns: 1fr;
2540
+ grid-template-areas:
2541
+ "graph"
2542
+ "workspace";
1368
2543
  }
1369
2544
  .dashboard-panel { min-height: 620px; padding: 18px; }
1370
2545
  .dashboard-hero { grid-template-columns: 1fr; }
1371
2546
  .dashboard-actions { justify-content: flex-start; }
1372
2547
  .dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
2548
+ .dashboard-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
1373
2549
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2550
+ .lifecycle-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2551
+ .intelligence-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
1374
2552
  .workspace-shell {
1375
- top: 8px;
1376
- right: 8px;
1377
- bottom: 8px;
1378
- width: min(430px, calc(100% - 16px));
2553
+ width: 100%;
1379
2554
  min-height: 0;
1380
2555
  }
1381
2556
  .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
1382
- body.viewer-tab-controls .control-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
2557
+ body.viewer-page-graph .control-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
2558
+ .graph-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2559
+ body.viewer-page-memory .workspace-body,
2560
+ body.viewer-page-review .workspace-body,
2561
+ body.viewer-page-data .workspace-body {
2562
+ grid-template-columns: 1fr;
2563
+ }
1383
2564
  .control-panel .panel-heading, .metrics-grid, .path-finder, .legend { grid-column: 1 / -1; }
1384
2565
  .control-panel label, .control-panel button { margin-top: 0; }
1385
2566
  .graph-panel { min-height: 620px; }
@@ -1391,33 +2572,62 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1391
2572
  }
1392
2573
 
1393
2574
  @media (max-width: 620px) {
1394
- .app-header { padding: 12px; }
2575
+ .app-header { padding: 10px 12px; gap: 6px; }
1395
2576
  .layout { padding: 8px; gap: 8px; }
1396
- .viewer-sections { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
2577
+ .repo-sidebar { padding: 10px 12px; gap: 8px; grid-template-rows: auto auto; }
2578
+ .repo-card, .sidebar-links { display: none; }
2579
+ .viewer-sections { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
2580
+ .viewer-sections a { min-height: 34px; padding: 8px 6px; text-align: center; }
2581
+ .status-strip { gap: 6px; }
2582
+ .file-picker { display: none; }
2583
+ .brand-block h1 { font-size: 22px; }
2584
+ .app-header p { font-size: 11px; }
1397
2585
  .dashboard-panel { min-height: 560px; padding: 14px; }
1398
2586
  .dashboard-hero h2 { font-size: 26px; }
1399
- .dashboard-stats, .dashboard-grid { grid-template-columns: 1fr; }
2587
+ .dashboard-stats, .dashboard-charts, .dashboard-grid { grid-template-columns: 1fr; }
1400
2588
  .dashboard-card { min-height: 0; }
1401
- .workspace-tabs {
1402
- grid-template-columns: repeat(5, minmax(76px, 1fr));
1403
- overflow-x: auto;
1404
- }
1405
- body.viewer-tab-controls .control-panel { grid-template-columns: 1fr; }
2589
+ body.viewer-page-graph .control-panel { grid-template-columns: 1fr; }
2590
+ body.viewer-page-graph .workspace-shell { max-height: none; }
1406
2591
  .metrics-grid { grid-template-columns: 1fr 1fr; }
1407
2592
  .proof-list { grid-template-columns: 1fr 1fr; }
2593
+ .memory-overview,
2594
+ .lifecycle-summary,
2595
+ .lifecycle-flow,
2596
+ .owners-summary,
2597
+ .review-overview,
2598
+ .proof-overview,
2599
+ .debug-overview,
2600
+ .graph-insights { grid-template-columns: 1fr; }
2601
+ .memory-list,
2602
+ .owners-list,
2603
+ .review-list,
2604
+ .proof-list { height: auto; max-height: none; }
2605
+ .entities-panel .list { height: auto; max-height: 460px; }
1408
2606
  .intelligence-list { grid-template-columns: 1fr; }
2607
+ .intel-guide { grid-template-columns: 1fr; }
1409
2608
  .intel-deep-grid { grid-template-columns: 1fr; }
1410
2609
  .path-finder-inputs { grid-template-columns: 1fr; }
1411
2610
  .graph-toolbar { align-items: flex-start; flex-direction: column; }
1412
2611
  .graph-actions { width: 100%; }
1413
2612
  .interaction-hint { flex: 1; white-space: normal; }
1414
- .graph-quickbar {
1415
- top: 112px;
1416
- left: 10px;
1417
- right: 10px;
1418
- justify-content: flex-start;
2613
+ .owners-list { grid-template-columns: 1fr; }
2614
+ .memory-row, .owner-silo-row { grid-template-columns: 1fr; }
2615
+ .memory-row span, .owner-silo-row span { white-space: normal; }
2616
+ .graph-panel { min-height: 520px; }
2617
+ #graphCanvas, .three-graph, .graph-canvas-wrap, #graphSvg { min-height: 430px; }
2618
+ }
2619
+
2620
+ /* Site cleanup: text-size floor, hide repo card on mobile to declutter, no x-scroll. */
2621
+ html, body { overflow-x: hidden; max-width: 100vw; }
2622
+
2623
+ @media (max-width: 620px) {
2624
+ .autoload-status { font-size: 11px; }
2625
+ .item-meta,
2626
+ .detail-row dt,
2627
+ .intel-row-meta,
2628
+ .path-suggestion-button span,
2629
+ .graph-toolbar p,
2630
+ .interaction-hint {
2631
+ font-size: 12px;
1419
2632
  }
1420
- .quick-group { max-width: 100%; overflow-x: auto; }
1421
- .quick-group span { display: none; }
1422
- #graphCanvas, .three-graph, .graph-canvas-wrap, #graphSvg { min-height: 450px; }
1423
2633
  }