@kage-core/kage-graph-mcp 1.1.35 → 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,9 +38,7 @@
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
  }
@@ -36,20 +46,105 @@ body {
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: 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
- "sections sections autoload"
47
- "status status autoload";
141
+ "brand status picker"
142
+ "brand autoload picker";
48
143
  gap: 10px 16px;
49
144
  align-items: center;
50
- padding: 10px 14px;
145
+ padding: 18px 22px;
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;
@@ -73,6 +168,10 @@ 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
176
  margin-top: 4px;
78
177
  color: var(--muted);
@@ -80,60 +179,55 @@ h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-trans
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;
89
- }
90
- .site-links a {
91
- display: inline-flex;
92
- 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);
98
- color: var(--terminal-dim);
99
- font-size: 11px;
100
- font-weight: 780;
101
- 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
182
  .viewer-sections {
110
- grid-area: sections;
111
- display: flex;
112
- flex-wrap: wrap;
113
- gap: 6px;
114
- align-items: center;
183
+ display: grid;
184
+ gap: 4px;
185
+ align-content: start;
115
186
  }
116
187
 
117
188
  .viewer-section {
118
- min-height: 28px;
189
+ display: inline-flex;
190
+ align-items: center;
191
+ justify-content: flex-start;
192
+ min-height: 36px;
119
193
  padding: 0 11px;
120
- border-color: rgba(65, 255, 143, 0.18);
121
- background: rgba(13, 25, 19, 0.72);
194
+ border: 1px solid transparent;
195
+ border-radius: 8px;
196
+ background: transparent;
122
197
  box-shadow: none;
123
198
  color: var(--terminal-dim);
124
- font-size: 11px;
199
+ font-size: 13px;
200
+ font-weight: 720;
201
+ text-decoration: none;
125
202
  }
126
203
  .viewer-section:hover {
127
204
  border-color: rgba(65, 255, 143, 0.30);
128
205
  color: var(--terminal-strong);
129
206
  }
130
207
  .viewer-section.active,
131
- .viewer-section[aria-selected="true"] {
208
+ .viewer-section[aria-selected="true"],
209
+ .viewer-section[aria-current="page"] {
132
210
  border-color: var(--terminal-strong);
133
- background: rgba(65, 255, 143, 0.12);
134
- 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);
135
215
  }
136
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); }
230
+
137
231
  .status-strip {
138
232
  grid-area: status;
139
233
  display: flex;
@@ -175,10 +269,14 @@ h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-trans
175
269
  font-weight: 750;
176
270
  white-space: nowrap;
177
271
  }
178
- .status-pill strong { color: var(--terminal-strong); }
272
+ .status-pill strong { color: var(--brand); }
179
273
  .status-pill.warn strong { color: var(--warn); }
180
274
  .status-pill.code strong { color: var(--code); }
181
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
+ }
182
280
 
183
281
  .file-picker, button {
184
282
  display: inline-flex;
@@ -216,25 +314,24 @@ h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-trans
216
314
  position: relative;
217
315
  display: grid;
218
316
  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;
317
+ grid-template-areas: "dashboard";
318
+ gap: 18px;
319
+ padding: 22px;
223
320
  min-height: calc(100vh - 78px);
224
- align-items: stretch;
321
+ align-items: start;
225
322
  }
226
323
 
227
324
  .layout > * { min-width: 0; }
228
325
 
229
326
  .dashboard-panel {
230
- grid-area: stage;
327
+ grid-area: dashboard;
231
328
  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);
329
+ min-height: calc(100vh - 134px);
330
+ padding: 0;
331
+ border: 0;
332
+ border-radius: 0;
333
+ background: transparent;
334
+ box-shadow: none;
238
335
  overflow: auto;
239
336
  }
240
337
 
@@ -242,13 +339,37 @@ body.viewer-section-overview .dashboard-panel { display: block; }
242
339
  body.viewer-section-overview .graph-panel { display: none; }
243
340
  body.viewer-section-overview .workspace-shell { display: none; }
244
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
+ }
245
362
 
246
363
  .dashboard-hero {
247
364
  display: grid;
248
365
  grid-template-columns: minmax(0, 1fr) auto;
249
366
  gap: 20px;
250
367
  align-items: start;
251
- margin-bottom: 20px;
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));
252
373
  }
253
374
  .dashboard-kicker {
254
375
  display: inline-flex;
@@ -261,8 +382,8 @@ body.viewer-section-graph .dashboard-panel { display: none; }
261
382
  .dashboard-hero h2 {
262
383
  max-width: 880px;
263
384
  color: var(--text);
264
- font-size: clamp(24px, 3.2vw, 44px);
265
- line-height: 1.05;
385
+ font-size: clamp(28px, 3.6vw, 48px);
386
+ line-height: 1.04;
266
387
  text-transform: none;
267
388
  letter-spacing: 0;
268
389
  }
@@ -279,56 +400,197 @@ body.viewer-section-graph .dashboard-panel { display: none; }
279
400
  gap: 8px;
280
401
  }
281
402
  .dashboard-actions button,
282
- .dashboard-card 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;
283
409
  min-height: 32px;
410
+ padding: 0 13px;
411
+ border: 1px solid rgba(65, 255, 143, 0.22);
412
+ border-radius: 4px;
284
413
  border-color: rgba(65, 255, 143, 0.22);
285
414
  background: rgba(65, 255, 143, 0.08);
286
415
  box-shadow: none;
287
416
  color: var(--terminal-strong);
417
+ font-weight: 780;
418
+ text-decoration: none;
419
+ white-space: nowrap;
288
420
  }
289
421
 
290
422
  .dashboard-stats {
291
423
  display: grid;
292
- grid-template-columns: repeat(6, minmax(0, 1fr));
293
- gap: 10px;
424
+ grid-template-columns: repeat(4, minmax(0, 1fr));
425
+ gap: 12px;
294
426
  margin-bottom: 18px;
295
427
  }
296
428
  .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);
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);
302
434
  }
303
435
  .dashboard-stat strong {
304
436
  display: block;
305
437
  color: var(--terminal-strong);
306
- font-size: 24px;
307
- line-height: 1;
438
+ margin-top: 9px;
439
+ font-size: 22px;
440
+ line-height: 1.05;
308
441
  }
309
442
  .dashboard-stat span {
310
443
  display: block;
311
- margin-top: 8px;
312
444
  color: var(--terminal-dim);
313
445
  font-size: 11px;
314
446
  font-weight: 760;
315
447
  text-transform: uppercase;
316
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); }
317
461
 
318
- .dashboard-grid {
462
+ .dashboard-charts {
319
463
  display: grid;
320
- grid-template-columns: repeat(3, minmax(0, 1fr));
464
+ grid-template-columns: repeat(4, minmax(0, 1fr));
321
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;
322
584
  }
323
585
  .dashboard-card {
324
- min-height: 260px;
586
+ min-height: 220px;
325
587
  display: flex;
326
588
  flex-direction: column;
327
589
  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);
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);
332
594
  }
333
595
  .dashboard-card-head {
334
596
  display: flex;
@@ -345,9 +607,10 @@ body.viewer-section-graph .dashboard-panel { display: none; }
345
607
  font-size: 10px;
346
608
  }
347
609
  .dashboard-card h3 {
348
- color: var(--text);
610
+ color: var(--terminal);
349
611
  font-size: 17px;
350
612
  line-height: 1.2;
613
+ text-shadow: 0 0 9px rgba(65, 255, 143, 0.16);
351
614
  }
352
615
  .dashboard-card p {
353
616
  color: var(--muted);
@@ -382,137 +645,239 @@ body.viewer-section-graph .dashboard-panel { display: none; }
382
645
  }
383
646
 
384
647
  .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;
648
+ grid-area: workspace;
649
+ position: relative;
650
+ z-index: 1;
651
+ width: 100%;
652
+ min-height: calc(100vh - 134px);
392
653
  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 {
654
+ grid-template-rows: minmax(0, 1fr);
655
+ gap: 14px;
402
656
  opacity: 1;
403
657
  pointer-events: auto;
404
- transform: translateX(0);
658
+ transform: none;
659
+ transition: none;
405
660
  }
406
661
 
407
- .workspace-top {
408
- min-width: 0;
662
+ .workspace-body {
663
+ min-height: 0;
409
664
  display: grid;
410
- grid-template-columns: minmax(0, 1fr) 38px;
411
- gap: 6px;
665
+ gap: 14px;
412
666
  }
413
667
 
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;
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 {
420
675
  border: 1px solid var(--line);
421
676
  border-radius: 6px;
422
677
  background: rgba(8, 17, 13, 0.94);
423
678
  box-shadow: var(--shadow);
424
679
  }
425
680
 
426
- .workspace-close {
427
- min-width: 0;
428
- min-height: 100%;
429
- padding: 0;
681
+ .control-panel,
682
+ .graph-panel,
683
+ .memory-panel {
430
684
  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;
685
+ box-shadow: var(--shadow), 0 0 34px rgba(65, 255, 143, 0.055);
436
686
  }
437
- .workspace-close:hover {
438
- color: var(--terminal-strong);
439
- background: rgba(65, 255, 143, 0.10);
687
+
688
+ .control-panel {
689
+ min-height: 0;
690
+ overflow: auto;
691
+ padding: 12px;
440
692
  }
441
693
 
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;
694
+ .graph-insights-panel {
695
+ min-height: 0;
451
696
  overflow: hidden;
452
- text-overflow: ellipsis;
453
- white-space: nowrap;
697
+ padding: 0;
454
698
  }
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);
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;
460
708
  }
461
709
 
462
- .workspace-body {
463
- min-height: 0;
710
+ .journey-actions {
464
711
  display: grid;
465
- grid-template-rows: minmax(0, 1fr);
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);
466
777
  gap: 10px;
467
778
  }
468
779
 
469
- .workspace-body > * {
470
- grid-area: auto;
471
- min-height: 0;
472
- display: none;
780
+ .graph-insights .metric-donut {
781
+ width: 54px;
782
+ height: 54px;
473
783
  }
474
784
 
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);
785
+ .path-insight-card p {
786
+ margin: 12px 0 0;
787
+ color: var(--muted);
788
+ font-size: 11px;
789
+ line-height: 1.45;
480
790
  }
481
791
 
482
- .control-panel {
483
- min-height: 0;
484
- overflow: auto;
485
- padding: 12px;
792
+ .path-suggestion {
793
+ margin-top: 10px;
794
+ color: var(--terminal-dim);
795
+ font-size: 11px;
486
796
  }
487
797
 
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);
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;
493
813
  }
494
- body.viewer-tab-review .review-panel,
495
- body.viewer-tab-review .proof-panel {
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 {
496
819
  display: block;
497
820
  }
498
- body.viewer-tab-tables .workspace-body {
499
- grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
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;
500
837
  }
501
- body.viewer-tab-tables .entities-panel,
502
- body.viewer-tab-tables .edges-panel {
838
+ body.viewer-page-review .review-panel,
839
+ body.viewer-page-review .proof-panel {
503
840
  display: block;
504
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
+ }
505
874
 
506
875
  .workspace-shell .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
507
876
 
508
877
  @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;
878
+ body.viewer-page-graph .control-panel {
879
+ display: block;
514
880
  }
515
- .control-panel .panel-heading, .metrics-grid, .path-finder, .legend { grid-column: 1 / -1; }
516
881
  .control-panel label, .control-panel button { margin-top: 0; }
517
882
  }
518
883
 
@@ -561,6 +926,9 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
561
926
  outline-offset: 1px;
562
927
  }
563
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; }
564
932
 
565
933
  .path-finder {
566
934
  display: grid;
@@ -665,6 +1033,10 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
665
1033
  font-size: 11px;
666
1034
  font-variant-numeric: tabular-nums;
667
1035
  }
1036
+ .panel-heading h2 {
1037
+ color: var(--terminal-strong);
1038
+ text-shadow: 0 0 10px rgba(65, 255, 143, 0.28);
1039
+ }
668
1040
 
669
1041
  .metrics-grid {
670
1042
  display: grid;
@@ -713,12 +1085,13 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
713
1085
  .line { width: 24px; height: 2px; display: inline-block; background: var(--edge); }
714
1086
 
715
1087
  .graph-panel {
716
- grid-area: stage;
1088
+ grid-area: graph;
717
1089
  position: relative;
718
1090
  min-height: 640px;
719
1091
  overflow: hidden;
720
1092
  display: grid;
721
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);
722
1095
  }
723
1096
 
724
1097
  .graph-toolbar {
@@ -728,82 +1101,21 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
728
1101
  gap: 12px;
729
1102
  padding: 11px 12px;
730
1103
  border-bottom: 1px solid var(--line);
731
- background: linear-gradient(180deg, #0b1710, #07110c);
732
- }
733
- .graph-toolbar p { color: var(--terminal-dim); font-size: 11px; margin-top: 3px; }
734
- .graph-actions { display: inline-flex; align-items: center; gap: 6px; }
735
- .graph-actions button { min-width: 40px; min-height: 34px; padding: 0 10px; }
736
- .interaction-hint {
737
- display: inline-flex;
738
- align-items: center;
739
- padding-right: 6px;
740
- color: var(--terminal-dim);
741
- font-size: 11px;
742
- font-weight: 700;
743
- white-space: nowrap;
744
- }
745
-
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);
1104
+ background:
1105
+ radial-gradient(circle at 8% 0, rgba(65, 255, 143, 0.14), transparent 42%),
1106
+ linear-gradient(180deg, #0b1710, #07110c);
803
1107
  }
804
-
805
- .quick-actions button {
806
- color: var(--code);
1108
+ .graph-toolbar p { color: var(--terminal-dim); font-size: 11px; margin-top: 3px; }
1109
+ .graph-actions { display: inline-flex; align-items: center; gap: 6px; }
1110
+ .graph-actions button { min-width: 40px; min-height: 34px; padding: 0 10px; }
1111
+ .interaction-hint {
1112
+ display: inline-flex;
1113
+ align-items: center;
1114
+ padding-right: 6px;
1115
+ color: var(--terminal-dim);
1116
+ font-size: 11px;
1117
+ font-weight: 700;
1118
+ white-space: nowrap;
807
1119
  }
808
1120
 
809
1121
  .graph-canvas-wrap {
@@ -813,8 +1125,10 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
813
1125
  height: 100%;
814
1126
  overflow: hidden;
815
1127
  background:
816
- 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%),
817
1130
  #020503;
1131
+ box-shadow: inset 0 0 80px rgba(65, 255, 143, 0.09);
818
1132
  }
819
1133
 
820
1134
  #graphCanvas, .three-graph {
@@ -948,11 +1262,19 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
948
1262
  }
949
1263
  .details-empty { color: var(--terminal-dim); }
950
1264
  #selectionDetails {
1265
+ flex: 1 1 auto;
951
1266
  min-height: 0;
1267
+ max-height: min(52vh, 460px);
952
1268
  overflow: auto;
953
1269
  overscroll-behavior: contain;
954
1270
  padding-right: 2px;
955
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; }
956
1278
  .detail-title { margin-bottom: 8px; color: var(--text); font-weight: 780; font-size: 17px; overflow-wrap: anywhere; }
957
1279
  .detail-kind { margin-bottom: 10px; color: var(--terminal-strong); background: #07130d; }
958
1280
  .detail-row { padding: 9px 0; border-top: 1px solid var(--line); }
@@ -1027,9 +1349,16 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1027
1349
  }
1028
1350
 
1029
1351
  .table-panel { min-height: 0; overflow: hidden; }
1030
- .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
+ }
1031
1360
  .list { height: calc(100% - 48px); overflow: auto; padding: 0 8px 10px; }
1032
- .review-list, .proof-list {
1361
+ .review-list, .proof-list, .memory-list, .owners-list {
1033
1362
  height: calc(100% - 48px);
1034
1363
  overflow: auto;
1035
1364
  padding: 0 10px 12px;
@@ -1039,10 +1368,30 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1039
1368
  overflow: auto;
1040
1369
  padding: 0 10px 12px;
1041
1370
  display: grid;
1042
- grid-template-columns: repeat(4, minmax(0, 1fr));
1371
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1043
1372
  gap: 8px;
1044
1373
  align-content: start;
1045
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
+ }
1046
1395
  .intel-deep-grid {
1047
1396
  grid-column: 1 / -1;
1048
1397
  display: grid;
@@ -1050,22 +1399,240 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1050
1399
  gap: 8px;
1051
1400
  }
1052
1401
 
1053
- .workspace-shell .intelligence-list,
1054
- .workspace-shell .intel-deep-grid {
1055
- grid-template-columns: 1fr;
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;
1056
1411
  }
1057
1412
 
1058
- .workspace-shell .proof-list {
1413
+ .memory-overview,
1414
+ .review-overview,
1415
+ .proof-overview {
1059
1416
  grid-template-columns: repeat(2, minmax(0, 1fr));
1060
1417
  }
1061
- .intel-card {
1062
- min-height: 160px;
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;
1063
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;
1064
1625
  border: 1px solid var(--line);
1065
- border-radius: 4px;
1626
+ border-radius: 8px;
1066
1627
  background: #06100b;
1067
1628
  overflow: hidden;
1068
1629
  }
1630
+ .intel-card-head {
1631
+ display: flex;
1632
+ align-items: flex-start;
1633
+ justify-content: space-between;
1634
+ gap: 12px;
1635
+ }
1069
1636
  .intel-card h3 {
1070
1637
  margin: 0;
1071
1638
  color: var(--terminal);
@@ -1073,26 +1640,60 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1073
1640
  letter-spacing: 0;
1074
1641
  overflow-wrap: anywhere;
1075
1642
  }
1076
- .intel-card .intel-kicker {
1643
+ .intel-card-head span {
1644
+ display: block;
1077
1645
  margin-top: 4px;
1078
1646
  color: var(--terminal-dim);
1079
1647
  font-size: 10px;
1080
1648
  font-weight: 760;
1081
1649
  text-transform: uppercase;
1082
1650
  }
1083
- .intel-card .intel-summary {
1084
- 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;
1085
1670
  color: var(--text);
1086
- font-size: 11px;
1671
+ font-size: 12px;
1672
+ line-height: 1.45;
1087
1673
  overflow-wrap: anywhere;
1088
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
+ }
1089
1690
  .intel-card ul {
1090
1691
  margin: 9px 0 0;
1091
1692
  padding: 0;
1092
1693
  list-style: none;
1093
1694
  }
1094
1695
  .intel-card li {
1095
- padding-top: 6px;
1696
+ padding-top: 5px;
1096
1697
  color: var(--muted);
1097
1698
  font-size: 11px;
1098
1699
  overflow-wrap: anywhere;
@@ -1186,8 +1787,10 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1186
1787
  color: var(--terminal-dim);
1187
1788
  font-size: 10px;
1188
1789
  overflow: hidden;
1189
- text-overflow: ellipsis;
1190
- white-space: nowrap;
1790
+ display: -webkit-box;
1791
+ -webkit-box-orient: vertical;
1792
+ -webkit-line-clamp: 2;
1793
+ white-space: normal;
1191
1794
  }
1192
1795
  .intel-row-bar {
1193
1796
  display: block;
@@ -1210,9 +1813,11 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1210
1813
  padding: 10px 0;
1211
1814
  border-top: 1px solid var(--line);
1212
1815
  }
1816
+ .review-list { height: calc(100% - 186px); }
1213
1817
  .review-title {
1214
1818
  color: var(--terminal);
1215
1819
  font-weight: 820;
1820
+ text-shadow: 0 0 9px rgba(65, 255, 143, 0.14);
1216
1821
  overflow-wrap: anywhere;
1217
1822
  }
1218
1823
  .review-meta, .review-risks {
@@ -1246,6 +1851,9 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1246
1851
  grid-template-columns: repeat(3, minmax(0, 1fr));
1247
1852
  gap: 8px;
1248
1853
  align-content: start;
1854
+ height: calc(100% - 186px);
1855
+ overflow: auto;
1856
+ padding: 0 10px 12px;
1249
1857
  }
1250
1858
  .proof-item {
1251
1859
  min-height: 62px;
@@ -1267,6 +1875,46 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1267
1875
  font-weight: 760;
1268
1876
  text-transform: uppercase;
1269
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); }
1270
1918
  .list-item {
1271
1919
  width: 100%;
1272
1920
  display: grid;
@@ -1281,11 +1929,28 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1281
1929
  cursor: pointer;
1282
1930
  }
1283
1931
  .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; }
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
+ }
1285
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
+ }
1286
1946
 
1287
1947
  .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; }
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
+ }
1289
1954
  .edge-line.filtered { opacity: 0.05; }
1290
1955
  .edge-line.selected, .edge-line.connected { stroke: var(--terminal-strong); stroke-width: 2.8; opacity: 1; }
1291
1956
  .edge-line.review-low-confidence { stroke-dasharray: 5 4; stroke: var(--warn); }
@@ -1302,6 +1967,7 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1302
1967
  .node.graph-memory .node-body {
1303
1968
  fill: var(--memory-soft);
1304
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));
1305
1971
  }
1306
1972
  .node.graph-code .node-body {
1307
1973
  fill: var(--code-soft);
@@ -1345,12 +2011,27 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1345
2011
  }
1346
2012
 
1347
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
+ }
1348
2031
  .app-header {
1349
2032
  grid-template-columns: 1fr;
1350
2033
  grid-template-areas:
1351
2034
  "brand"
1352
- "links"
1353
- "sections"
1354
2035
  "status"
1355
2036
  "autoload"
1356
2037
  "picker";
@@ -1363,23 +2044,46 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1363
2044
  .status-pill { min-height: 24px; padding: 3px 8px; }
1364
2045
  .layout {
1365
2046
  grid-template-columns: 1fr;
1366
- grid-template-rows: minmax(620px, 72vh);
1367
- grid-template-areas: "stage";
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;
2064
+ grid-template-areas:
2065
+ "graph"
2066
+ "workspace";
1368
2067
  }
1369
2068
  .dashboard-panel { min-height: 620px; padding: 18px; }
1370
2069
  .dashboard-hero { grid-template-columns: 1fr; }
1371
2070
  .dashboard-actions { justify-content: flex-start; }
1372
2071
  .dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
2072
+ .dashboard-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
1373
2073
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2074
+ .intelligence-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
1374
2075
  .workspace-shell {
1375
- top: 8px;
1376
- right: 8px;
1377
- bottom: 8px;
1378
- width: min(430px, calc(100% - 16px));
2076
+ width: 100%;
1379
2077
  min-height: 0;
1380
2078
  }
1381
2079
  .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; }
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
+ }
1383
2087
  .control-panel .panel-heading, .metrics-grid, .path-finder, .legend { grid-column: 1 / -1; }
1384
2088
  .control-panel label, .control-panel button { margin-top: 0; }
1385
2089
  .graph-panel { min-height: 620px; }
@@ -1391,33 +2095,60 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
1391
2095
  }
1392
2096
 
1393
2097
  @media (max-width: 620px) {
1394
- .app-header { padding: 12px; }
2098
+ .app-header { padding: 10px 12px; gap: 6px; }
1395
2099
  .layout { padding: 8px; gap: 8px; }
1396
- .viewer-sections { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
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; }
1397
2108
  .dashboard-panel { min-height: 560px; padding: 14px; }
1398
2109
  .dashboard-hero h2 { font-size: 26px; }
1399
- .dashboard-stats, .dashboard-grid { grid-template-columns: 1fr; }
2110
+ .dashboard-stats, .dashboard-charts, .dashboard-grid { grid-template-columns: 1fr; }
1400
2111
  .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; }
2112
+ body.viewer-page-graph .control-panel { grid-template-columns: 1fr; }
2113
+ body.viewer-page-graph .workspace-shell { max-height: none; }
1406
2114
  .metrics-grid { grid-template-columns: 1fr 1fr; }
1407
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; }
1408
2127
  .intelligence-list { grid-template-columns: 1fr; }
2128
+ .intel-guide { grid-template-columns: 1fr; }
1409
2129
  .intel-deep-grid { grid-template-columns: 1fr; }
1410
2130
  .path-finder-inputs { grid-template-columns: 1fr; }
1411
2131
  .graph-toolbar { align-items: flex-start; flex-direction: column; }
1412
2132
  .graph-actions { width: 100%; }
1413
2133
  .interaction-hint { flex: 1; white-space: normal; }
1414
- .graph-quickbar {
1415
- top: 112px;
1416
- left: 10px;
1417
- right: 10px;
1418
- justify-content: flex-start;
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;
1419
2153
  }
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
2154
  }