@kage-core/kage-graph-mcp 1.1.34 → 1.1.36

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,29 +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
43
  font: 13px/1.45 ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
34
44
  }
35
45
 
36
46
  button, input, select { font: inherit; }
37
47
  h1, h2, p { margin: 0; }
38
- h1 { font-size: clamp(22px, 3vw, 36px); line-height: 1; letter-spacing: 0; }
39
- h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
48
+ h1 { font-size: clamp(20px, 2vw, 28px); line-height: 1; letter-spacing: 0; }
49
+ h2 {
50
+ color: var(--terminal);
51
+ font-size: 13px;
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: 248px 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: 18px;
74
+ padding: 18px 14px;
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: 6px;
109
+ padding: 13px;
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 auto;
44
140
  grid-template-areas:
45
- "brand links picker"
46
- "status status autoload";
47
- gap: 16px;
141
+ "brand status picker"
142
+ "brand autoload picker";
143
+ gap: 10px 16px;
48
144
  align-items: center;
49
- padding: 14px 18px;
145
+ padding: 18px 22px;
50
146
  border-bottom: 1px solid var(--line);
51
- background: rgba(5, 8, 6, 0.94);
147
+ background: rgba(5, 8, 6, 0.84);
52
148
  backdrop-filter: blur(16px);
53
149
  position: sticky;
54
150
  top: 0;
@@ -62,48 +158,75 @@ h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-trans
62
158
  }
63
159
  .eyebrow {
64
160
  display: inline-flex;
65
- margin-bottom: 5px;
161
+ margin-bottom: 4px;
66
162
  color: var(--terminal-strong);
67
- font-size: 11px;
163
+ font-size: 10px;
68
164
  font-weight: 800;
69
165
  letter-spacing: 0.08em;
70
166
  text-transform: uppercase;
71
167
  }
72
168
  .brand-block h1::before {
73
- content: "> ";
169
+ content: "";
170
+ }
171
+ .brand-block h1 {
74
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);
75
174
  }
76
175
  .app-header p {
77
- margin-top: 6px;
176
+ margin-top: 4px;
78
177
  color: var(--muted);
178
+ font-size: 12px;
79
179
  overflow-wrap: anywhere;
80
180
  }
81
181
 
82
- .site-links {
83
- grid-area: links;
84
- display: flex;
85
- flex-wrap: wrap;
86
- gap: 10px;
87
- justify-content: flex-end;
182
+ .viewer-sections {
183
+ display: grid;
184
+ gap: 4px;
185
+ align-content: start;
88
186
  }
89
- .site-links a {
187
+
188
+ .viewer-section {
90
189
  display: inline-flex;
91
190
  align-items: center;
92
- min-height: 28px;
93
- padding: 4px 9px;
94
- border: 1px solid var(--line);
95
- border-radius: 4px;
96
- background: rgba(13, 25, 19, 0.86);
191
+ justify-content: flex-start;
192
+ min-height: 36px;
193
+ padding: 0 11px;
194
+ border: 1px solid transparent;
195
+ border-radius: 8px;
196
+ background: transparent;
197
+ box-shadow: none;
97
198
  color: var(--terminal-dim);
98
- font-size: 11px;
99
- font-weight: 780;
199
+ font-size: 13px;
200
+ font-weight: 720;
100
201
  text-decoration: none;
101
- white-space: nowrap;
102
202
  }
103
- .site-links a:hover {
104
- border-color: var(--line-strong);
203
+ .viewer-section:hover {
204
+ border-color: rgba(65, 255, 143, 0.30);
105
205
  color: var(--terminal-strong);
106
206
  }
207
+ .viewer-section.active,
208
+ .viewer-section[aria-selected="true"],
209
+ .viewer-section[aria-current="page"] {
210
+ border-color: var(--terminal-strong);
211
+ background: rgba(65, 255, 143, 0.10);
212
+ color: var(--brand);
213
+ box-shadow: inset 0 0 0 1px rgba(65, 255, 143, 0.20), var(--brand-glow);
214
+ text-shadow: 0 0 10px rgba(65, 255, 143, 0.45);
215
+ }
216
+
217
+ .sidebar-links {
218
+ display: grid;
219
+ gap: 6px;
220
+ padding-top: 14px;
221
+ border-top: 1px solid rgba(65, 255, 143, 0.10);
222
+ }
223
+ .sidebar-links a {
224
+ color: var(--terminal-dim);
225
+ font-size: 12px;
226
+ font-weight: 700;
227
+ text-decoration: none;
228
+ }
229
+ .sidebar-links a:hover { color: var(--terminal-strong); }
107
230
 
108
231
  .status-strip {
109
232
  grid-area: status;
@@ -117,8 +240,8 @@ h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-trans
117
240
  grid-area: autoload;
118
241
  display: inline-flex;
119
242
  align-items: center;
120
- min-height: 28px;
121
- padding: 4px 9px;
243
+ min-height: 26px;
244
+ padding: 3px 9px;
122
245
  border: 1px solid var(--line);
123
246
  border-radius: 4px;
124
247
  background: #040805;
@@ -136,8 +259,8 @@ h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-trans
136
259
  display: inline-flex;
137
260
  align-items: center;
138
261
  gap: 7px;
139
- min-height: 28px;
140
- padding: 4px 9px;
262
+ min-height: 24px;
263
+ padding: 3px 8px;
141
264
  border: 1px solid var(--line-strong);
142
265
  border-radius: 4px;
143
266
  background: rgba(13, 25, 19, 0.92);
@@ -146,16 +269,20 @@ h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-trans
146
269
  font-weight: 750;
147
270
  white-space: nowrap;
148
271
  }
149
- .status-pill strong { color: var(--terminal-strong); }
272
+ .status-pill strong { color: var(--brand); }
150
273
  .status-pill.warn strong { color: var(--warn); }
151
274
  .status-pill.code strong { color: var(--code); }
152
275
  .status-pill.memory strong { color: var(--memory); }
276
+ .status-pill.memory {
277
+ border-color: rgba(65, 255, 143, 0.35);
278
+ box-shadow: 0 0 18px rgba(65, 255, 143, 0.10);
279
+ }
153
280
 
154
281
  .file-picker, button {
155
282
  display: inline-flex;
156
283
  align-items: center;
157
284
  justify-content: center;
158
- min-height: 38px;
285
+ min-height: 34px;
159
286
  padding: 0 13px;
160
287
  border: 1px solid var(--terminal-strong);
161
288
  border-radius: 4px;
@@ -184,44 +311,573 @@ h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-trans
184
311
  }
185
312
 
186
313
  .layout {
314
+ position: relative;
187
315
  display: grid;
188
- grid-template-columns: minmax(0, 1fr) 380px;
189
- grid-template-rows: minmax(680px, calc(100vh - 108px)) auto minmax(220px, 30vh) minmax(260px, 32vh) minmax(270px, 34vh);
190
- grid-template-areas:
191
- "graph details"
192
- "controls details"
193
- "review proof"
194
- "intelligence intelligence"
195
- "entities edges";
196
- gap: 12px;
197
- padding: 12px;
316
+ grid-template-columns: minmax(0, 1fr);
317
+ grid-template-areas: "dashboard";
318
+ gap: 18px;
319
+ padding: 22px;
198
320
  min-height: calc(100vh - 78px);
321
+ align-items: start;
199
322
  }
200
323
 
201
324
  .layout > * { min-width: 0; }
202
325
 
203
- .control-panel, .graph-panel, .details-panel, .table-panel, .review-panel, .proof-panel, .intelligence-panel {
326
+ .dashboard-panel {
327
+ grid-area: dashboard;
328
+ display: none;
329
+ min-height: calc(100vh - 134px);
330
+ padding: 0;
331
+ border: 0;
332
+ border-radius: 0;
333
+ background: transparent;
334
+ box-shadow: none;
335
+ overflow: auto;
336
+ }
337
+
338
+ body.viewer-section-overview .dashboard-panel { display: block; }
339
+ body.viewer-section-overview .graph-panel { display: none; }
340
+ body.viewer-section-overview .workspace-shell { display: none; }
341
+ body.viewer-section-graph .dashboard-panel { display: none; }
342
+ body.viewer-page-overview .layout { grid-template-areas: "dashboard"; }
343
+ body.viewer-page-graph .layout {
344
+ grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
345
+ grid-template-areas: "graph workspace";
346
+ align-items: stretch;
347
+ }
348
+ body.viewer-page-memory .layout,
349
+ body.viewer-page-owners .layout,
350
+ body.viewer-page-intel .layout,
351
+ body.viewer-page-review .layout,
352
+ body.viewer-page-data .layout {
353
+ grid-template-areas: "workspace";
354
+ }
355
+ body.viewer-page-memory .graph-panel,
356
+ body.viewer-page-owners .graph-panel,
357
+ body.viewer-page-intel .graph-panel,
358
+ body.viewer-page-review .graph-panel,
359
+ body.viewer-page-data .graph-panel {
360
+ display: none;
361
+ }
362
+
363
+ .dashboard-hero {
364
+ display: grid;
365
+ grid-template-columns: minmax(0, 1fr) auto;
366
+ gap: 20px;
367
+ align-items: start;
368
+ margin-bottom: 18px;
369
+ padding: 24px;
370
+ border: 1px solid rgba(65, 255, 143, 0.12);
371
+ border-radius: 14px;
372
+ background: linear-gradient(135deg, rgba(13, 25, 19, 0.94), rgba(8, 17, 13, 0.72));
373
+ }
374
+ .dashboard-kicker {
375
+ display: inline-flex;
376
+ margin-bottom: 8px;
377
+ color: var(--terminal-dim);
378
+ font-size: 11px;
379
+ font-weight: 820;
380
+ text-transform: uppercase;
381
+ }
382
+ .dashboard-hero h2 {
383
+ max-width: 880px;
384
+ color: var(--text);
385
+ font-size: clamp(28px, 3.6vw, 48px);
386
+ line-height: 1.04;
387
+ text-transform: none;
388
+ letter-spacing: 0;
389
+ }
390
+ .dashboard-hero p {
391
+ max-width: 760px;
392
+ margin-top: 10px;
393
+ color: var(--muted);
394
+ font-size: 14px;
395
+ }
396
+ .dashboard-actions {
397
+ display: flex;
398
+ flex-wrap: wrap;
399
+ justify-content: flex-end;
400
+ gap: 8px;
401
+ }
402
+ .dashboard-actions button,
403
+ .dashboard-actions a,
404
+ .dashboard-card button,
405
+ .dashboard-card a {
406
+ display: inline-flex;
407
+ align-items: center;
408
+ justify-content: center;
409
+ min-height: 32px;
410
+ padding: 0 13px;
411
+ border: 1px solid rgba(65, 255, 143, 0.22);
412
+ border-radius: 4px;
413
+ border-color: rgba(65, 255, 143, 0.22);
414
+ background: rgba(65, 255, 143, 0.08);
415
+ box-shadow: none;
416
+ color: var(--terminal-strong);
417
+ font-weight: 780;
418
+ text-decoration: none;
419
+ white-space: nowrap;
420
+ }
421
+
422
+ .dashboard-stats {
423
+ display: grid;
424
+ grid-template-columns: repeat(4, minmax(0, 1fr));
425
+ gap: 12px;
426
+ margin-bottom: 18px;
427
+ }
428
+ .dashboard-stat {
429
+ min-height: 118px;
430
+ padding: 16px;
431
+ border: 1px solid rgba(65, 255, 143, 0.12);
432
+ border-radius: 12px;
433
+ background: rgba(8, 17, 13, 0.82);
434
+ }
435
+ .dashboard-stat strong {
436
+ display: block;
437
+ color: var(--terminal-strong);
438
+ margin-top: 9px;
439
+ font-size: 22px;
440
+ line-height: 1.05;
441
+ }
442
+ .dashboard-stat span {
443
+ display: block;
444
+ color: var(--terminal-dim);
445
+ font-size: 11px;
446
+ font-weight: 760;
447
+ text-transform: uppercase;
448
+ }
449
+ .dashboard-stat em {
450
+ display: block;
451
+ margin-top: 9px;
452
+ color: var(--muted);
453
+ font-size: 11px;
454
+ font-style: normal;
455
+ line-height: 1.35;
456
+ }
457
+ .dashboard-stat-ok { border-color: rgba(65, 255, 143, 0.22); }
458
+ .dashboard-stat-warn { border-color: rgba(255, 209, 102, 0.28); }
459
+ .dashboard-stat-warn strong { color: var(--warn); }
460
+ .dashboard-stat-code strong { color: var(--code); }
461
+
462
+ .dashboard-charts {
463
+ display: grid;
464
+ grid-template-columns: repeat(4, minmax(0, 1fr));
465
+ gap: 12px;
466
+ margin-bottom: 18px;
467
+ }
468
+
469
+ .metric-card {
470
+ min-height: 160px;
471
+ padding: 13px;
472
+ border: 1px solid rgba(65, 255, 143, 0.13);
473
+ border-radius: 10px;
474
+ background: rgba(6, 16, 11, 0.86);
475
+ overflow: hidden;
476
+ }
477
+
478
+ .metric-card-ok { border-color: rgba(65, 255, 143, 0.24); }
479
+ .metric-card-code { border-color: rgba(106, 215, 255, 0.24); }
480
+ .metric-card-warn { border-color: rgba(255, 209, 102, 0.28); }
481
+ .metric-card-danger { border-color: rgba(255, 91, 91, 0.28); }
482
+
483
+ .metric-card-head {
484
+ display: flex;
485
+ justify-content: space-between;
486
+ gap: 10px;
487
+ color: var(--terminal-dim);
488
+ font-size: 10px;
489
+ font-weight: 820;
490
+ text-transform: uppercase;
491
+ }
492
+
493
+ .metric-card-head strong {
494
+ color: var(--terminal-strong);
495
+ text-align: right;
496
+ overflow-wrap: anywhere;
497
+ }
498
+
499
+ .metric-card-warn .metric-card-head strong { color: var(--warn); }
500
+ .metric-card-danger .metric-card-head strong { color: var(--danger); }
501
+
502
+ .metric-visual {
503
+ display: grid;
504
+ grid-template-columns: 72px minmax(0, 1fr);
505
+ gap: 12px;
506
+ align-items: center;
507
+ margin-top: 12px;
508
+ }
509
+
510
+ .metric-donut {
511
+ --value: 0;
512
+ width: 70px;
513
+ height: 70px;
514
+ display: grid;
515
+ place-items: center;
516
+ border-radius: 50%;
517
+ background:
518
+ radial-gradient(circle at center, #06100b 0 58%, transparent 59%),
519
+ conic-gradient(var(--terminal-strong) calc(var(--value) * 1%), rgba(65, 255, 143, 0.12) 0);
520
+ }
521
+
522
+ .metric-card-warn .metric-donut {
523
+ background:
524
+ radial-gradient(circle at center, #06100b 0 58%, transparent 59%),
525
+ conic-gradient(var(--warn) calc(var(--value) * 1%), rgba(255, 209, 102, 0.12) 0);
526
+ }
527
+
528
+ .metric-donut span {
529
+ color: var(--text);
530
+ font-size: 13px;
531
+ font-weight: 840;
532
+ }
533
+
534
+ .metric-visual p,
535
+ .metric-card em {
536
+ margin: 0;
537
+ color: var(--muted);
538
+ font-size: 11px;
539
+ font-style: normal;
540
+ line-height: 1.4;
541
+ }
542
+
543
+ .metric-card em {
544
+ display: block;
545
+ margin-top: 10px;
546
+ color: var(--terminal-dim);
547
+ }
548
+
549
+ .metric-bars {
550
+ display: grid;
551
+ gap: 9px;
552
+ margin-top: 12px;
553
+ }
554
+
555
+ .metric-bar {
556
+ display: grid;
557
+ grid-template-columns: minmax(0, 1fr) auto;
558
+ gap: 8px;
559
+ color: var(--muted);
560
+ font-size: 11px;
561
+ }
562
+
563
+ .metric-bar strong {
564
+ color: var(--text);
565
+ font-size: 11px;
566
+ overflow-wrap: anywhere;
567
+ }
568
+
569
+ .metric-bar i {
570
+ grid-column: 1 / -1;
571
+ display: block;
572
+ height: 5px;
573
+ border-radius: 999px;
574
+ background: var(--terminal-strong);
575
+ }
576
+
577
+ .metric-bar-warn i { background: var(--warn); }
578
+ .metric-bar-danger i { background: var(--danger); }
579
+
580
+ .dashboard-grid {
581
+ display: grid;
582
+ grid-template-columns: repeat(4, minmax(0, 1fr));
583
+ gap: 14px;
584
+ }
585
+ .dashboard-card {
586
+ min-height: 220px;
587
+ display: flex;
588
+ flex-direction: column;
589
+ gap: 10px;
590
+ padding: 18px;
591
+ border: 1px solid rgba(65, 255, 143, 0.12);
592
+ border-radius: 12px;
593
+ background: rgba(8, 17, 13, 0.78);
594
+ }
595
+ .dashboard-card-head {
596
+ display: flex;
597
+ align-items: center;
598
+ justify-content: space-between;
599
+ gap: 10px;
600
+ color: var(--terminal-dim);
601
+ font-size: 11px;
602
+ font-weight: 820;
603
+ text-transform: uppercase;
604
+ }
605
+ .dashboard-card-head strong {
606
+ color: var(--code);
607
+ font-size: 10px;
608
+ }
609
+ .dashboard-card h3 {
610
+ color: var(--terminal);
611
+ font-size: 17px;
612
+ line-height: 1.2;
613
+ text-shadow: 0 0 9px rgba(65, 255, 143, 0.16);
614
+ }
615
+ .dashboard-card p {
616
+ color: var(--muted);
617
+ font-size: 12px;
618
+ }
619
+ .dashboard-card ul {
620
+ flex: 1;
621
+ display: grid;
622
+ align-content: start;
623
+ gap: 7px;
624
+ margin: 0;
625
+ padding: 0;
626
+ list-style: none;
627
+ }
628
+ .dashboard-card li {
629
+ display: flex;
630
+ justify-content: space-between;
631
+ gap: 10px;
632
+ padding-top: 7px;
633
+ border-top: 1px solid rgba(65, 255, 143, 0.10);
634
+ color: var(--muted);
635
+ font-size: 11px;
636
+ }
637
+ .dashboard-card li strong {
638
+ color: var(--terminal);
639
+ overflow-wrap: anywhere;
640
+ }
641
+ .dashboard-card li span {
642
+ color: var(--terminal-dim);
643
+ text-align: right;
644
+ overflow-wrap: anywhere;
645
+ }
646
+
647
+ .workspace-shell {
648
+ grid-area: workspace;
649
+ position: relative;
650
+ z-index: 1;
651
+ width: 100%;
652
+ min-height: calc(100vh - 134px);
653
+ display: grid;
654
+ grid-template-rows: minmax(0, 1fr);
655
+ gap: 14px;
656
+ opacity: 1;
657
+ pointer-events: auto;
658
+ transform: none;
659
+ transition: none;
660
+ }
661
+
662
+ .workspace-body {
663
+ min-height: 0;
664
+ display: grid;
665
+ gap: 14px;
666
+ }
667
+
668
+ .workspace-body > * {
669
+ grid-area: auto;
670
+ min-height: 0;
671
+ display: none;
672
+ }
673
+
674
+ .control-panel, .graph-panel, .details-panel, .graph-insights-panel, .table-panel, .review-panel, .proof-panel, .intelligence-panel, .memory-panel, .owners-panel {
204
675
  border: 1px solid var(--line);
205
676
  border-radius: 6px;
206
677
  background: rgba(8, 17, 13, 0.94);
207
678
  box-shadow: var(--shadow);
208
679
  }
209
680
 
681
+ .control-panel,
682
+ .graph-panel,
683
+ .memory-panel {
684
+ border-color: rgba(65, 255, 143, 0.22);
685
+ box-shadow: var(--shadow), 0 0 34px rgba(65, 255, 143, 0.055);
686
+ }
687
+
210
688
  .control-panel {
211
- grid-area: controls;
212
689
  min-height: 0;
213
690
  overflow: auto;
214
691
  padding: 12px;
215
692
  }
216
693
 
694
+ .graph-insights-panel {
695
+ min-height: 0;
696
+ overflow: hidden;
697
+ padding: 0;
698
+ }
699
+
700
+ .graph-insights {
701
+ height: auto;
702
+ max-height: 360px;
703
+ overflow: auto;
704
+ display: grid;
705
+ grid-template-columns: repeat(2, minmax(0, 1fr));
706
+ gap: 8px;
707
+ padding: 0 10px 12px;
708
+ }
709
+
710
+ .journey-actions {
711
+ display: grid;
712
+ gap: 8px;
713
+ margin: 10px 0 0;
714
+ }
715
+
716
+ .journey-actions button,
717
+ .advanced-controls summary {
718
+ width: 100%;
719
+ min-height: 34px;
720
+ border: 1px solid rgba(65, 255, 143, 0.20);
721
+ border-radius: 4px;
722
+ background: rgba(65, 255, 143, 0.055);
723
+ color: var(--terminal-strong);
724
+ font-size: 12px;
725
+ font-weight: 760;
726
+ text-align: left;
727
+ }
728
+
729
+ .journey-actions button {
730
+ padding: 0 10px;
731
+ box-shadow: none;
732
+ }
733
+
734
+ .journey-actions button.active,
735
+ .graph-action-card.active {
736
+ border-color: rgba(65, 255, 143, 0.70);
737
+ background: rgba(65, 255, 143, 0.12);
738
+ }
739
+
740
+ .advanced-controls {
741
+ margin-top: 12px;
742
+ }
743
+
744
+ .advanced-controls summary {
745
+ display: flex;
746
+ align-items: center;
747
+ cursor: pointer;
748
+ padding: 0 10px;
749
+ }
750
+
751
+ .advanced-controls label,
752
+ .advanced-controls .toggle-control {
753
+ margin-top: 10px;
754
+ }
755
+
756
+ .graph-action-card p {
757
+ margin: 10px 0;
758
+ color: var(--muted);
759
+ font-size: 11px;
760
+ line-height: 1.45;
761
+ }
762
+
763
+ .graph-action-card button {
764
+ width: 100%;
765
+ min-height: 30px;
766
+ margin-top: 10px;
767
+ box-shadow: none;
768
+ }
769
+
770
+ .graph-insights .metric-card {
771
+ min-height: 118px;
772
+ padding: 11px;
773
+ }
774
+
775
+ .graph-insights .metric-visual {
776
+ grid-template-columns: 56px minmax(0, 1fr);
777
+ gap: 10px;
778
+ }
779
+
780
+ .graph-insights .metric-donut {
781
+ width: 54px;
782
+ height: 54px;
783
+ }
784
+
785
+ .path-insight-card p {
786
+ margin: 12px 0 0;
787
+ color: var(--muted);
788
+ font-size: 11px;
789
+ line-height: 1.45;
790
+ }
791
+
792
+ .path-suggestion {
793
+ margin-top: 10px;
794
+ color: var(--terminal-dim);
795
+ font-size: 11px;
796
+ }
797
+
798
+ .path-suggestion-button {
799
+ width: 100%;
800
+ display: grid;
801
+ gap: 4px;
802
+ padding: 9px;
803
+ border-color: rgba(106, 215, 255, 0.24);
804
+ background: rgba(106, 215, 255, 0.06);
805
+ box-shadow: none;
806
+ text-align: left;
807
+ white-space: normal;
808
+ }
809
+
810
+ .path-suggestion-button strong,
811
+ .path-suggestion-button span {
812
+ overflow-wrap: anywhere;
813
+ }
814
+
815
+ .path-suggestion-button strong { color: var(--code); }
816
+ .path-suggestion-button span { color: var(--terminal-dim); font-size: 11px; }
817
+
818
+ body.viewer-page-graph .workspace-body {
819
+ display: block;
820
+ }
821
+ body.viewer-page-graph .control-panel,
822
+ body.viewer-page-graph .graph-insights-panel { display: block; }
823
+ body.viewer-page-graph .details-panel { display: flex; }
824
+ body.viewer-page-graph:not(.has-selection) .details-panel { display: none; }
825
+ body.viewer-page-graph .workspace-shell {
826
+ max-height: calc(100vh - 176px);
827
+ overflow: auto;
828
+ overscroll-behavior: contain;
829
+ }
830
+ body.viewer-page-graph .metrics-grid { display: none; }
831
+ body.viewer-page-graph .control-panel,
832
+ body.viewer-page-graph .graph-insights-panel,
833
+ body.viewer-page-graph .details-panel { margin-bottom: 14px; }
834
+ body.viewer-page-review .workspace-body {
835
+ grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
836
+ align-items: stretch;
837
+ }
838
+ body.viewer-page-review .review-panel,
839
+ body.viewer-page-review .proof-panel {
840
+ display: block;
841
+ }
842
+ body.viewer-page-owners .workspace-body,
843
+ body.viewer-page-intel .workspace-body { grid-template-columns: minmax(0, 1fr); }
844
+ body.viewer-page-memory .workspace-body {
845
+ grid-template-columns: minmax(0, 1fr);
846
+ align-items: stretch;
847
+ }
848
+ body.viewer-page-memory.has-selection .workspace-body {
849
+ grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
850
+ }
851
+ body.viewer-page-memory .memory-panel,
852
+ body.viewer-page-owners .owners-panel,
853
+ body.viewer-page-intel .intelligence-panel { display: block; }
854
+ body.viewer-page-memory .memory-panel { order: 0; }
855
+ body.viewer-page-memory .details-panel { order: 1; display: none; }
856
+ body.viewer-page-memory.has-selection .details-panel { display: flex; }
857
+ body.viewer-page-data .workspace-body {
858
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, 360px);
859
+ align-items: stretch;
860
+ }
861
+ body.viewer-page-data .entities-panel,
862
+ body.viewer-page-data .edges-panel { display: block; }
863
+ body.viewer-page-data .details-panel {
864
+ display: flex;
865
+ max-height: calc(100vh - 176px);
866
+ }
867
+
868
+ body.viewer-page-memory .workspace-shell,
869
+ body.viewer-page-review .workspace-shell,
870
+ body.viewer-page-data .workspace-shell {
871
+ max-height: calc(100vh - 176px);
872
+ overflow: hidden;
873
+ }
874
+
875
+ .workspace-shell .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
876
+
217
877
  @media (min-width: 1121px) {
218
- .control-panel {
219
- display: grid;
220
- grid-template-columns: repeat(7, minmax(118px, 1fr)) auto;
221
- gap: 10px;
222
- align-items: end;
878
+ body.viewer-page-graph .control-panel {
879
+ display: block;
223
880
  }
224
- .control-panel .panel-heading, .metrics-grid, .legend { grid-column: 1 / -1; }
225
881
  .control-panel label, .control-panel button { margin-top: 0; }
226
882
  }
227
883
 
@@ -264,12 +920,104 @@ input, select {
264
920
  background: #030604;
265
921
  color: var(--text);
266
922
  }
267
- input::placeholder { color: #4e7458; }
268
- input:focus, select:focus, button:focus, .file-picker:focus-within {
269
- outline: 2px solid rgba(65, 255, 143, 0.35);
270
- outline-offset: 1px;
923
+ input::placeholder { color: #4e7458; }
924
+ input:focus, select:focus, button:focus, .file-picker:focus-within {
925
+ outline: 2px solid rgba(65, 255, 143, 0.35);
926
+ outline-offset: 1px;
927
+ }
928
+ .control-panel button { width: 100%; margin-top: 12px; }
929
+ .journey-actions button,
930
+ .advanced-controls summary,
931
+ .graph-action-card button { margin-top: 0; }
932
+
933
+ .path-finder {
934
+ display: grid;
935
+ gap: 8px;
936
+ margin: 0 0 2px;
937
+ padding: 10px;
938
+ border: 1px solid rgba(106, 215, 255, 0.26);
939
+ border-radius: 4px;
940
+ background: rgba(5, 16, 18, 0.58);
941
+ }
942
+ .path-finder-header {
943
+ display: flex;
944
+ align-items: center;
945
+ justify-content: space-between;
946
+ gap: 10px;
947
+ }
948
+ .path-finder-header span {
949
+ margin: 0;
950
+ color: var(--code);
951
+ font-size: 11px;
952
+ font-weight: 820;
953
+ letter-spacing: 0.06em;
954
+ text-transform: uppercase;
955
+ }
956
+ .path-finder-header button {
957
+ width: auto;
958
+ min-height: 26px;
959
+ padding: 0 9px;
960
+ border-color: var(--line);
961
+ color: var(--terminal-dim);
962
+ font-size: 10px;
963
+ }
964
+ .path-finder-inputs {
965
+ display: grid;
966
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 92px;
967
+ gap: 8px;
968
+ }
969
+ .path-finder-inputs input,
970
+ .path-finder-inputs button {
971
+ margin: 0;
972
+ }
973
+ .path-status {
974
+ color: var(--terminal-dim);
975
+ font-size: 11px;
976
+ overflow-wrap: anywhere;
977
+ }
978
+ .path-status.ok { color: var(--terminal-strong); }
979
+ .path-status.warn { color: var(--warn); }
980
+ .path-result {
981
+ display: none;
982
+ max-height: 138px;
983
+ overflow: auto;
984
+ padding-right: 2px;
985
+ }
986
+ .path-result.visible {
987
+ display: grid;
988
+ gap: 6px;
989
+ }
990
+ .path-step {
991
+ width: 100%;
992
+ min-height: 0;
993
+ display: grid;
994
+ gap: 3px;
995
+ margin: 0;
996
+ padding: 7px 8px;
997
+ border-color: rgba(106, 215, 255, 0.24);
998
+ background: rgba(106, 215, 255, 0.045);
999
+ color: var(--text);
1000
+ text-align: left;
1001
+ white-space: normal;
1002
+ box-shadow: none;
1003
+ }
1004
+ .path-step:hover {
1005
+ border-color: var(--code);
1006
+ background: rgba(106, 215, 255, 0.085);
1007
+ }
1008
+ .path-step strong {
1009
+ color: var(--code);
1010
+ font-size: 11px;
1011
+ overflow-wrap: anywhere;
1012
+ }
1013
+ .path-step span {
1014
+ margin: 0;
1015
+ color: var(--terminal-dim);
1016
+ font-size: 10px;
1017
+ font-weight: 740;
1018
+ overflow-wrap: anywhere;
1019
+ text-transform: none;
271
1020
  }
272
- .control-panel button { width: 100%; margin-top: 12px; }
273
1021
 
274
1022
  .panel-heading {
275
1023
  display: flex;
@@ -285,6 +1033,10 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
285
1033
  font-size: 11px;
286
1034
  font-variant-numeric: tabular-nums;
287
1035
  }
1036
+ .panel-heading h2 {
1037
+ color: var(--terminal-strong);
1038
+ text-shadow: 0 0 10px rgba(65, 255, 143, 0.28);
1039
+ }
288
1040
 
289
1041
  .metrics-grid {
290
1042
  display: grid;
@@ -339,6 +1091,7 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
339
1091
  overflow: hidden;
340
1092
  display: grid;
341
1093
  grid-template-rows: auto minmax(0, 1fr);
1094
+ box-shadow: var(--shadow), 0 0 0 1px rgba(65, 255, 143, 0.08), 0 0 58px rgba(65, 255, 143, 0.11);
342
1095
  }
343
1096
 
344
1097
  .graph-toolbar {
@@ -348,7 +1101,9 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
348
1101
  gap: 12px;
349
1102
  padding: 11px 12px;
350
1103
  border-bottom: 1px solid var(--line);
351
- background: linear-gradient(180deg, #0b1710, #07110c);
1104
+ background:
1105
+ radial-gradient(circle at 8% 0, rgba(65, 255, 143, 0.14), transparent 42%),
1106
+ linear-gradient(180deg, #0b1710, #07110c);
352
1107
  }
353
1108
  .graph-toolbar p { color: var(--terminal-dim); font-size: 11px; margin-top: 3px; }
354
1109
  .graph-actions { display: inline-flex; align-items: center; gap: 6px; }
@@ -370,8 +1125,10 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
370
1125
  height: 100%;
371
1126
  overflow: hidden;
372
1127
  background:
373
- radial-gradient(circle at 52% 46%, rgba(65, 255, 143, 0.055), transparent 44%),
1128
+ radial-gradient(circle at 52% 46%, rgba(65, 255, 143, 0.13), transparent 44%),
1129
+ radial-gradient(circle at 18% 26%, rgba(65, 255, 143, 0.09), transparent 32%),
374
1130
  #020503;
1131
+ box-shadow: inset 0 0 80px rgba(65, 255, 143, 0.09);
375
1132
  }
376
1133
 
377
1134
  #graphCanvas, .three-graph {
@@ -496,23 +1253,28 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
496
1253
  .empty-state.hidden { display: none; }
497
1254
 
498
1255
  .details-panel {
499
- grid-area: details;
500
- align-self: start;
501
- display: flex;
502
1256
  flex-direction: column;
503
- height: min(960px, calc(100vh - 108px));
504
- max-height: calc(100vh - 108px);
1257
+ height: 100%;
1258
+ max-height: none;
505
1259
  min-height: 0;
506
1260
  overflow: hidden;
507
1261
  padding: 12px;
508
1262
  }
509
1263
  .details-empty { color: var(--terminal-dim); }
510
1264
  #selectionDetails {
1265
+ flex: 1 1 auto;
511
1266
  min-height: 0;
1267
+ max-height: min(52vh, 460px);
512
1268
  overflow: auto;
513
1269
  overscroll-behavior: contain;
514
1270
  padding-right: 2px;
515
1271
  }
1272
+
1273
+ .inspector-path-finder {
1274
+ flex: 0 0 auto;
1275
+ margin-top: 12px;
1276
+ }
1277
+ body:not(.has-code-selection) .inspector-path-finder { display: none; }
516
1278
  .detail-title { margin-bottom: 8px; color: var(--text); font-weight: 780; font-size: 17px; overflow-wrap: anywhere; }
517
1279
  .detail-kind { margin-bottom: 10px; color: var(--terminal-strong); background: #07130d; }
518
1280
  .detail-row { padding: 9px 0; border-top: 1px solid var(--line); }
@@ -586,15 +1348,17 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
586
1348
  font-size: 11px;
587
1349
  }
588
1350
 
589
- .entities-panel { grid-area: entities; }
590
- .edges-panel { grid-area: edges; }
591
- .review-panel { grid-area: review; }
592
- .proof-panel { grid-area: proof; }
593
- .intelligence-panel { grid-area: intelligence; }
594
1351
  .table-panel { min-height: 0; overflow: hidden; }
595
- .review-panel, .proof-panel, .intelligence-panel { min-height: 0; overflow: hidden; }
1352
+ .review-panel, .proof-panel, .intelligence-panel, .memory-panel, .owners-panel { min-height: 0; overflow: hidden; }
1353
+ body.viewer-page-memory .memory-panel,
1354
+ body.viewer-page-review .review-panel,
1355
+ body.viewer-page-review .proof-panel,
1356
+ body.viewer-page-data .table-panel {
1357
+ display: flex;
1358
+ flex-direction: column;
1359
+ }
596
1360
  .list { height: calc(100% - 48px); overflow: auto; padding: 0 8px 10px; }
597
- .review-list, .proof-list {
1361
+ .review-list, .proof-list, .memory-list, .owners-list {
598
1362
  height: calc(100% - 48px);
599
1363
  overflow: auto;
600
1364
  padding: 0 10px 12px;
@@ -604,24 +1368,271 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
604
1368
  overflow: auto;
605
1369
  padding: 0 10px 12px;
606
1370
  display: grid;
607
- grid-template-columns: repeat(4, minmax(0, 1fr));
1371
+ grid-template-columns: repeat(3, minmax(0, 1fr));
608
1372
  gap: 8px;
609
1373
  align-content: start;
610
1374
  }
1375
+ .intel-guide {
1376
+ grid-column: 1 / -1;
1377
+ display: grid;
1378
+ grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
1379
+ gap: 12px;
1380
+ align-items: center;
1381
+ padding: 12px 14px;
1382
+ border: 1px solid rgba(65, 255, 143, 0.18);
1383
+ border-radius: 8px;
1384
+ background: rgba(65, 255, 143, 0.05);
1385
+ }
1386
+ .intel-guide strong {
1387
+ color: var(--terminal-strong);
1388
+ font-size: 13px;
1389
+ }
1390
+ .intel-guide span {
1391
+ color: var(--terminal-dim);
1392
+ font-size: 12px;
1393
+ line-height: 1.45;
1394
+ }
611
1395
  .intel-deep-grid {
612
1396
  grid-column: 1 / -1;
613
1397
  display: grid;
614
1398
  grid-template-columns: repeat(3, minmax(0, 1fr));
615
1399
  gap: 8px;
616
1400
  }
617
- .intel-card {
618
- min-height: 160px;
1401
+
1402
+ .proof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
1403
+ .memory-overview,
1404
+ .owners-summary,
1405
+ .review-overview,
1406
+ .proof-overview {
1407
+ display: grid;
1408
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1409
+ gap: 8px;
1410
+ padding: 0 10px 10px;
1411
+ }
1412
+
1413
+ .memory-overview,
1414
+ .review-overview,
1415
+ .proof-overview {
1416
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1417
+ }
1418
+
1419
+ .memory-overview .metric-card,
1420
+ .owners-summary .metric-card,
1421
+ .review-overview .metric-card,
1422
+ .proof-overview .metric-card {
1423
+ min-height: 132px;
619
1424
  padding: 11px;
1425
+ }
1426
+
1427
+ .memory-overview .metric-visual,
1428
+ .owners-summary .metric-visual,
1429
+ .review-overview .metric-visual,
1430
+ .proof-overview .metric-visual {
1431
+ grid-template-columns: 58px minmax(0, 1fr);
1432
+ gap: 10px;
1433
+ }
1434
+
1435
+ .memory-overview .metric-donut,
1436
+ .owners-summary .metric-donut,
1437
+ .review-overview .metric-donut,
1438
+ .proof-overview .metric-donut {
1439
+ width: 56px;
1440
+ height: 56px;
1441
+ }
1442
+
1443
+ .memory-list {
1444
+ display: grid;
1445
+ gap: 8px;
1446
+ align-content: start;
1447
+ height: calc(100% - 338px);
1448
+ overflow: auto;
1449
+ padding: 0 10px 12px;
1450
+ }
1451
+ .memory-hero {
1452
+ margin: 0 10px 10px;
1453
+ padding: 12px;
1454
+ border: 1px solid rgba(65, 255, 143, 0.16);
1455
+ border-radius: 8px;
1456
+ background: rgba(65, 255, 143, 0.045);
1457
+ }
1458
+ .memory-hero strong {
1459
+ display: block;
1460
+ color: var(--terminal-strong);
1461
+ font-size: 13px;
1462
+ }
1463
+ .memory-hero span {
1464
+ display: block;
1465
+ margin-top: 5px;
1466
+ color: var(--terminal-dim);
1467
+ font-size: 12px;
1468
+ line-height: 1.4;
1469
+ }
1470
+ .memory-stats {
1471
+ display: grid;
1472
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1473
+ gap: 8px;
1474
+ padding: 0 10px 10px;
1475
+ }
1476
+ .memory-stats div {
1477
+ min-height: 58px;
1478
+ padding: 9px;
1479
+ border: 1px solid rgba(65, 255, 143, 0.12);
1480
+ border-radius: 8px;
1481
+ background: rgba(3, 8, 5, 0.74);
1482
+ }
1483
+ .memory-stats strong {
1484
+ display: block;
1485
+ color: var(--terminal-strong);
1486
+ font-size: 18px;
1487
+ }
1488
+ .memory-stats span {
1489
+ display: block;
1490
+ margin-top: 4px;
1491
+ color: var(--terminal-dim);
1492
+ font-size: 10px;
1493
+ font-weight: 760;
1494
+ text-transform: uppercase;
1495
+ }
1496
+ .memory-toolbar {
1497
+ display: grid;
1498
+ grid-template-columns: minmax(0, 1fr) 150px;
1499
+ gap: 8px;
1500
+ padding: 0 10px 10px;
1501
+ }
1502
+
1503
+ .memory-row {
1504
+ width: 100%;
1505
+ display: grid;
1506
+ grid-template-columns: minmax(0, 1fr);
1507
+ gap: 6px;
1508
+ align-items: start;
1509
+ min-height: 82px;
1510
+ padding: 12px;
1511
+ border: 1px solid rgba(65, 255, 143, 0.12);
1512
+ border-radius: 8px;
1513
+ background: rgba(6, 16, 11, 0.88);
1514
+ color: var(--text);
1515
+ text-align: left;
1516
+ white-space: normal;
1517
+ cursor: pointer;
1518
+ box-shadow: none;
1519
+ }
1520
+ .memory-row:hover,
1521
+ .memory-row.selected,
1522
+ .memory-row[aria-selected="true"] {
1523
+ border-color: var(--terminal-strong);
1524
+ background: rgba(65, 255, 143, 0.12);
1525
+ box-shadow: 0 0 22px rgba(65, 255, 143, 0.14);
1526
+ }
1527
+ .memory-row-main {
1528
+ display: flex;
1529
+ justify-content: space-between;
1530
+ gap: 10px;
1531
+ }
1532
+ .memory-row strong {
1533
+ color: var(--terminal);
1534
+ font-size: 13px;
1535
+ text-shadow: 0 0 9px rgba(65, 255, 143, 0.14);
1536
+ overflow-wrap: anywhere;
1537
+ }
1538
+ .memory-row-main em {
1539
+ color: var(--memory);
1540
+ font-size: 11px;
1541
+ font-weight: 760;
1542
+ font-style: normal;
1543
+ white-space: nowrap;
1544
+ }
1545
+ .memory-row-meta,
1546
+ .memory-row-target {
1547
+ color: var(--muted);
1548
+ font-size: 11px;
1549
+ line-height: 1.35;
1550
+ overflow-wrap: anywhere;
1551
+ }
1552
+ .memory-row-meta {
1553
+ display: -webkit-box;
1554
+ min-height: 30px;
1555
+ overflow: hidden;
1556
+ -webkit-box-orient: vertical;
1557
+ -webkit-line-clamp: 2;
1558
+ }
1559
+ .memory-row-target { color: var(--terminal-dim); }
1560
+
1561
+ .owners-list {
1562
+ display: grid;
1563
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1564
+ gap: 10px;
1565
+ align-content: start;
1566
+ height: calc(100% - 210px);
1567
+ overflow: auto;
1568
+ padding: 0 10px 12px;
1569
+ }
1570
+ .owner-card {
1571
+ min-height: 130px;
1572
+ padding: 13px;
1573
+ border: 1px solid rgba(65, 255, 143, 0.12);
1574
+ border-radius: 10px;
1575
+ background: rgba(6, 16, 11, 0.88);
1576
+ }
1577
+ .owner-head {
1578
+ display: flex;
1579
+ justify-content: space-between;
1580
+ gap: 10px;
1581
+ }
1582
+ .owner-head strong {
1583
+ color: var(--text);
1584
+ overflow-wrap: anywhere;
1585
+ }
1586
+ .owner-head span,
1587
+ .owner-stats,
1588
+ .owner-card p {
1589
+ color: var(--terminal-dim);
1590
+ font-size: 11px;
1591
+ }
1592
+ .owner-stats { margin-top: 9px; }
1593
+ .owner-card p { margin-top: 9px; color: var(--muted); }
1594
+ .owner-silos {
1595
+ grid-column: 1 / -1;
1596
+ display: grid;
1597
+ gap: 8px;
1598
+ margin-top: 4px;
1599
+ }
1600
+ .owner-silos h3 {
1601
+ margin: 8px 0 0;
1602
+ color: var(--terminal);
1603
+ font-size: 13px;
1604
+ }
1605
+ .owner-silo-row {
1606
+ width: 100%;
1607
+ display: grid;
1608
+ grid-template-columns: minmax(0, 1fr) auto;
1609
+ gap: 10px;
1610
+ padding: 10px 12px;
1611
+ border-color: rgba(255, 209, 102, 0.25);
1612
+ background: rgba(255, 209, 102, 0.05);
1613
+ box-shadow: none;
1614
+ text-align: left;
1615
+ }
1616
+ .owner-silo-row strong { overflow-wrap: anywhere; }
1617
+ .owner-silo-row span {
1618
+ color: var(--warn);
1619
+ font-size: 11px;
1620
+ white-space: nowrap;
1621
+ }
1622
+ .intel-card {
1623
+ min-height: 210px;
1624
+ padding: 13px;
620
1625
  border: 1px solid var(--line);
621
- border-radius: 4px;
1626
+ border-radius: 8px;
622
1627
  background: #06100b;
623
1628
  overflow: hidden;
624
1629
  }
1630
+ .intel-card-head {
1631
+ display: flex;
1632
+ align-items: flex-start;
1633
+ justify-content: space-between;
1634
+ gap: 12px;
1635
+ }
625
1636
  .intel-card h3 {
626
1637
  margin: 0;
627
1638
  color: var(--terminal);
@@ -629,26 +1640,60 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
629
1640
  letter-spacing: 0;
630
1641
  overflow-wrap: anywhere;
631
1642
  }
632
- .intel-card .intel-kicker {
1643
+ .intel-card-head span {
1644
+ display: block;
633
1645
  margin-top: 4px;
634
1646
  color: var(--terminal-dim);
635
1647
  font-size: 10px;
636
1648
  font-weight: 760;
637
1649
  text-transform: uppercase;
638
1650
  }
639
- .intel-card .intel-summary {
640
- margin-top: 8px;
1651
+ .intel-card-head strong {
1652
+ flex: 0 0 auto;
1653
+ color: var(--terminal-strong);
1654
+ font-size: 20px;
1655
+ line-height: 1;
1656
+ text-align: right;
1657
+ max-width: 42%;
1658
+ overflow-wrap: anywhere;
1659
+ }
1660
+ .intel-metric-label {
1661
+ margin-top: 5px;
1662
+ color: var(--terminal-dim);
1663
+ font-size: 10px;
1664
+ font-weight: 760;
1665
+ text-align: right;
1666
+ text-transform: uppercase;
1667
+ }
1668
+ .intel-highlight {
1669
+ margin: 12px 0 0;
641
1670
  color: var(--text);
642
- font-size: 11px;
1671
+ font-size: 12px;
1672
+ line-height: 1.45;
643
1673
  overflow-wrap: anywhere;
644
1674
  }
1675
+ .intel-action {
1676
+ margin: 9px 0 0;
1677
+ padding: 8px;
1678
+ border-left: 2px solid var(--terminal-strong);
1679
+ background: rgba(65, 255, 143, 0.06);
1680
+ color: var(--terminal-dim);
1681
+ font-size: 11px;
1682
+ line-height: 1.4;
1683
+ }
1684
+ .intel-action b {
1685
+ display: inline-block;
1686
+ margin-right: 6px;
1687
+ color: var(--terminal-strong);
1688
+ text-transform: uppercase;
1689
+ }
645
1690
  .intel-card ul {
646
1691
  margin: 9px 0 0;
647
1692
  padding: 0;
648
1693
  list-style: none;
649
1694
  }
650
1695
  .intel-card li {
651
- padding-top: 6px;
1696
+ padding-top: 5px;
652
1697
  color: var(--muted);
653
1698
  font-size: 11px;
654
1699
  overflow-wrap: anywhere;
@@ -742,8 +1787,10 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
742
1787
  color: var(--terminal-dim);
743
1788
  font-size: 10px;
744
1789
  overflow: hidden;
745
- text-overflow: ellipsis;
746
- white-space: nowrap;
1790
+ display: -webkit-box;
1791
+ -webkit-box-orient: vertical;
1792
+ -webkit-line-clamp: 2;
1793
+ white-space: normal;
747
1794
  }
748
1795
  .intel-row-bar {
749
1796
  display: block;
@@ -766,9 +1813,11 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
766
1813
  padding: 10px 0;
767
1814
  border-top: 1px solid var(--line);
768
1815
  }
1816
+ .review-list { height: calc(100% - 186px); }
769
1817
  .review-title {
770
1818
  color: var(--terminal);
771
1819
  font-weight: 820;
1820
+ text-shadow: 0 0 9px rgba(65, 255, 143, 0.14);
772
1821
  overflow-wrap: anywhere;
773
1822
  }
774
1823
  .review-meta, .review-risks {
@@ -802,6 +1851,9 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
802
1851
  grid-template-columns: repeat(3, minmax(0, 1fr));
803
1852
  gap: 8px;
804
1853
  align-content: start;
1854
+ height: calc(100% - 186px);
1855
+ overflow: auto;
1856
+ padding: 0 10px 12px;
805
1857
  }
806
1858
  .proof-item {
807
1859
  min-height: 62px;
@@ -823,6 +1875,46 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
823
1875
  font-weight: 760;
824
1876
  text-transform: uppercase;
825
1877
  }
1878
+
1879
+ .debug-guide {
1880
+ margin: 0 10px 10px;
1881
+ padding: 10px 12px;
1882
+ border: 1px solid rgba(65, 255, 143, 0.12);
1883
+ border-radius: 8px;
1884
+ background: rgba(65, 255, 143, 0.045);
1885
+ color: var(--terminal-dim);
1886
+ font-size: 11px;
1887
+ line-height: 1.4;
1888
+ }
1889
+
1890
+ .debug-overview {
1891
+ display: grid;
1892
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1893
+ gap: 8px;
1894
+ padding: 0 10px 10px;
1895
+ }
1896
+
1897
+ body.viewer-page-data .debug-overview {
1898
+ grid-template-columns: 1fr;
1899
+ }
1900
+
1901
+ .debug-overview .metric-card {
1902
+ min-height: 132px;
1903
+ padding: 11px;
1904
+ }
1905
+
1906
+ .debug-overview .metric-visual {
1907
+ grid-template-columns: 58px minmax(0, 1fr);
1908
+ gap: 10px;
1909
+ }
1910
+
1911
+ .debug-overview .metric-donut {
1912
+ width: 56px;
1913
+ height: 56px;
1914
+ }
1915
+
1916
+ .table-panel .list { height: calc(100% - 96px); }
1917
+ .entities-panel .list { height: calc(100% - 250px); }
826
1918
  .list-item {
827
1919
  width: 100%;
828
1920
  display: grid;
@@ -837,11 +1929,28 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
837
1929
  cursor: pointer;
838
1930
  }
839
1931
  .list-item:hover, .list-item.selected { background: rgba(65, 255, 143, 0.08); }
840
- .item-title { color: var(--terminal); font-weight: 780; overflow-wrap: anywhere; }
1932
+ .item-title {
1933
+ color: var(--terminal);
1934
+ font-weight: 780;
1935
+ text-shadow: 0 0 9px rgba(65, 255, 143, 0.14);
1936
+ overflow-wrap: anywhere;
1937
+ }
841
1938
  .item-meta { color: var(--terminal-dim); font-size: 11px; overflow-wrap: anywhere; }
1939
+ .list-note {
1940
+ padding: 12px 8px;
1941
+ border-top: 1px solid var(--line);
1942
+ color: var(--warn);
1943
+ font-size: 11px;
1944
+ line-height: 1.4;
1945
+ }
842
1946
 
843
1947
  .edge-line { stroke: var(--edge); stroke-width: 1.35; marker-end: url(#arrow); opacity: 0.50; }
844
- .edge-line.memory-code-link { stroke: #d8ff5f; stroke-width: 2.2; opacity: 0.88; }
1948
+ .edge-line.memory-code-link {
1949
+ stroke: #d8ff5f;
1950
+ stroke-width: 2.2;
1951
+ opacity: 0.88;
1952
+ filter: drop-shadow(0 0 7px rgba(216, 255, 95, 0.42));
1953
+ }
845
1954
  .edge-line.filtered { opacity: 0.05; }
846
1955
  .edge-line.selected, .edge-line.connected { stroke: var(--terminal-strong); stroke-width: 2.8; opacity: 1; }
847
1956
  .edge-line.review-low-confidence { stroke-dasharray: 5 4; stroke: var(--warn); }
@@ -858,6 +1967,7 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
858
1967
  .node.graph-memory .node-body {
859
1968
  fill: var(--memory-soft);
860
1969
  stroke: var(--memory);
1970
+ filter: drop-shadow(0 0 10px rgba(65, 255, 143, 0.46)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.38));
861
1971
  }
862
1972
  .node.graph-code .node-body {
863
1973
  fill: var(--code-soft);
@@ -901,11 +2011,27 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
901
2011
  }
902
2012
 
903
2013
  @media (max-width: 1120px) {
2014
+ .viewer-shell {
2015
+ grid-template-columns: 1fr;
2016
+ }
2017
+ .repo-sidebar {
2018
+ position: relative;
2019
+ height: auto;
2020
+ grid-template-rows: auto auto auto auto;
2021
+ border-right: 0;
2022
+ border-bottom: 1px solid rgba(65, 255, 143, 0.13);
2023
+ }
2024
+ .viewer-sections {
2025
+ grid-template-columns: repeat(4, minmax(0, 1fr));
2026
+ }
2027
+ .sidebar-links {
2028
+ grid-template-columns: repeat(4, auto);
2029
+ justify-content: start;
2030
+ }
904
2031
  .app-header {
905
2032
  grid-template-columns: 1fr;
906
2033
  grid-template-areas:
907
2034
  "brand"
908
- "links"
909
2035
  "status"
910
2036
  "autoload"
911
2037
  "picker";
@@ -918,42 +2044,111 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
918
2044
  .status-pill { min-height: 24px; padding: 3px 8px; }
919
2045
  .layout {
920
2046
  grid-template-columns: 1fr;
921
- grid-template-rows: minmax(620px, 78vh) auto auto minmax(220px, 36vh) minmax(220px, 36vh) minmax(220px, 36vh) minmax(220px, 36vh) minmax(220px, 36vh);
2047
+ grid-template-areas:
2048
+ "dashboard"
2049
+ "graph"
2050
+ "workspace";
2051
+ }
2052
+ body.viewer-page-overview .layout,
2053
+ body.viewer-page-memory .layout,
2054
+ body.viewer-page-owners .layout,
2055
+ body.viewer-page-intel .layout,
2056
+ body.viewer-page-review .layout,
2057
+ body.viewer-page-data .layout {
2058
+ grid-template-columns: 1fr;
2059
+ grid-template-areas: "workspace";
2060
+ }
2061
+ body.viewer-page-overview .layout { grid-template-areas: "dashboard"; }
2062
+ body.viewer-page-graph .layout {
2063
+ grid-template-columns: 1fr;
922
2064
  grid-template-areas:
923
2065
  "graph"
924
- "controls"
925
- "details"
926
- "review"
927
- "proof"
928
- "intelligence"
929
- "entities"
930
- "edges";
2066
+ "workspace";
2067
+ }
2068
+ .dashboard-panel { min-height: 620px; padding: 18px; }
2069
+ .dashboard-hero { grid-template-columns: 1fr; }
2070
+ .dashboard-actions { justify-content: flex-start; }
2071
+ .dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
2072
+ .dashboard-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2073
+ .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2074
+ .intelligence-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2075
+ .workspace-shell {
2076
+ width: 100%;
2077
+ min-height: 0;
931
2078
  }
932
2079
  .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
933
- .control-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
934
- .control-panel .panel-heading, .metrics-grid, .legend { grid-column: 1 / -1; }
2080
+ body.viewer-page-graph .control-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
2081
+ .graph-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2082
+ body.viewer-page-memory .workspace-body,
2083
+ body.viewer-page-review .workspace-body,
2084
+ body.viewer-page-data .workspace-body {
2085
+ grid-template-columns: 1fr;
2086
+ }
2087
+ .control-panel .panel-heading, .metrics-grid, .path-finder, .legend { grid-column: 1 / -1; }
935
2088
  .control-panel label, .control-panel button { margin-top: 0; }
936
2089
  .graph-panel { min-height: 620px; }
937
2090
  #graphCanvas, .three-graph, .graph-canvas-wrap, #graphSvg { min-height: 560px; }
938
- .intelligence-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
939
- .intel-deep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
940
2091
  .details-panel {
941
- height: auto;
942
- max-height: 70vh;
2092
+ height: 100%;
943
2093
  }
944
2094
  .detail-section-list { max-height: 220px; }
945
2095
  }
946
2096
 
947
2097
  @media (max-width: 620px) {
948
- .app-header { padding: 12px; }
2098
+ .app-header { padding: 10px 12px; gap: 6px; }
949
2099
  .layout { padding: 8px; gap: 8px; }
950
- .control-panel { grid-template-columns: 1fr; }
2100
+ .repo-sidebar { padding: 10px 12px; gap: 8px; grid-template-rows: auto auto; }
2101
+ .repo-card, .sidebar-links { display: none; }
2102
+ .viewer-sections { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
2103
+ .viewer-sections a { min-height: 34px; padding: 8px 6px; text-align: center; }
2104
+ .status-strip { gap: 6px; }
2105
+ .file-picker { display: none; }
2106
+ .brand-block h1 { font-size: 22px; }
2107
+ .app-header p { font-size: 11px; }
2108
+ .dashboard-panel { min-height: 560px; padding: 14px; }
2109
+ .dashboard-hero h2 { font-size: 26px; }
2110
+ .dashboard-stats, .dashboard-charts, .dashboard-grid { grid-template-columns: 1fr; }
2111
+ .dashboard-card { min-height: 0; }
2112
+ body.viewer-page-graph .control-panel { grid-template-columns: 1fr; }
2113
+ body.viewer-page-graph .workspace-shell { max-height: none; }
951
2114
  .metrics-grid { grid-template-columns: 1fr 1fr; }
952
2115
  .proof-list { grid-template-columns: 1fr 1fr; }
2116
+ .memory-overview,
2117
+ .owners-summary,
2118
+ .review-overview,
2119
+ .proof-overview,
2120
+ .debug-overview,
2121
+ .graph-insights { grid-template-columns: 1fr; }
2122
+ .memory-list,
2123
+ .owners-list,
2124
+ .review-list,
2125
+ .proof-list { height: auto; max-height: 620px; }
2126
+ .entities-panel .list { height: auto; max-height: 460px; }
953
2127
  .intelligence-list { grid-template-columns: 1fr; }
2128
+ .intel-guide { grid-template-columns: 1fr; }
954
2129
  .intel-deep-grid { grid-template-columns: 1fr; }
2130
+ .path-finder-inputs { grid-template-columns: 1fr; }
955
2131
  .graph-toolbar { align-items: flex-start; flex-direction: column; }
956
2132
  .graph-actions { width: 100%; }
957
2133
  .interaction-hint { flex: 1; white-space: normal; }
958
- #graphCanvas, .three-graph, .graph-canvas-wrap, #graphSvg { min-height: 450px; }
2134
+ .owners-list { grid-template-columns: 1fr; }
2135
+ .memory-row, .owner-silo-row { grid-template-columns: 1fr; }
2136
+ .memory-row span, .owner-silo-row span { white-space: normal; }
2137
+ .graph-panel { min-height: 520px; }
2138
+ #graphCanvas, .three-graph, .graph-canvas-wrap, #graphSvg { min-height: 430px; }
2139
+ }
2140
+
2141
+ /* Site cleanup: text-size floor, hide repo card on mobile to declutter, no x-scroll. */
2142
+ html, body { overflow-x: hidden; max-width: 100vw; }
2143
+
2144
+ @media (max-width: 620px) {
2145
+ .autoload-status { font-size: 11px; }
2146
+ .item-meta,
2147
+ .detail-row dt,
2148
+ .intel-row-meta,
2149
+ .path-suggestion-button span,
2150
+ .graph-toolbar p,
2151
+ .interaction-hint {
2152
+ font-size: 12px;
2153
+ }
959
2154
  }