@kage-core/kage-graph-mcp 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +294 -0
- package/dist/cli.js +726 -0
- package/dist/daemon.js +230 -0
- package/dist/index.js +659 -21
- package/dist/kernel.js +4177 -0
- package/dist/registry/index.js +373 -0
- package/package.json +17 -8
- package/viewer/app.js +1000 -0
- package/viewer/index.html +136 -0
- package/viewer/styles.css +530 -0
- package/index.ts +0 -254
- package/tsconfig.json +0 -14
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Kage Memory Terminal</title>
|
|
7
|
+
<link rel="stylesheet" href="./styles.css?v=3">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<header class="app-header">
|
|
11
|
+
<div class="brand-block">
|
|
12
|
+
<span class="eyebrow">kage://repo-memory</span>
|
|
13
|
+
<h1>Memory Terminal</h1>
|
|
14
|
+
<p id="graphSummary">Load memory, code, and metrics graphs to inspect what agents know and why.</p>
|
|
15
|
+
</div>
|
|
16
|
+
<div id="statusStrip" class="status-strip" aria-label="Graph health"></div>
|
|
17
|
+
<div id="autoLoadStatus" class="autoload-status">auto-load: waiting</div>
|
|
18
|
+
<label class="file-picker">
|
|
19
|
+
<span>Manual JSON</span>
|
|
20
|
+
<input id="graphFile" type="file" accept=".json,application/json" multiple>
|
|
21
|
+
</label>
|
|
22
|
+
</header>
|
|
23
|
+
|
|
24
|
+
<main class="layout">
|
|
25
|
+
<section class="graph-panel" aria-label="Graph rendering">
|
|
26
|
+
<div class="graph-toolbar">
|
|
27
|
+
<div>
|
|
28
|
+
<h2>Graph Console</h2>
|
|
29
|
+
<p id="graphSubhead">Combined repo memory and source graph.</p>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="graph-actions" aria-label="Graph view controls">
|
|
32
|
+
<span class="interaction-hint">drag canvas / wheel zoom / click node</span>
|
|
33
|
+
<button id="zoomOut" type="button">-</button>
|
|
34
|
+
<button id="fitView" type="button">Fit</button>
|
|
35
|
+
<button id="zoomIn" type="button">+</button>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
<svg id="graphSvg" viewBox="0 0 1000 660" role="img" aria-labelledby="graphTitle graphDescription">
|
|
39
|
+
<title id="graphTitle">Kage local memory and code graph terminal view</title>
|
|
40
|
+
<desc id="graphDescription">Entities and relationships from loaded Kage memory and code graph JSON files.</desc>
|
|
41
|
+
<defs>
|
|
42
|
+
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
|
43
|
+
<path d="M 0 0 L 10 5 L 0 10 z"></path>
|
|
44
|
+
</marker>
|
|
45
|
+
</defs>
|
|
46
|
+
<g id="edgeLayer"></g>
|
|
47
|
+
<g id="nodeLayer"></g>
|
|
48
|
+
</svg>
|
|
49
|
+
<div id="emptyState" class="empty-state">
|
|
50
|
+
<strong>No graph loaded</strong>
|
|
51
|
+
<span>Choose Kage graph JSON files or open with graph, code, and metrics URL params.</span>
|
|
52
|
+
</div>
|
|
53
|
+
</section>
|
|
54
|
+
|
|
55
|
+
<aside class="control-panel" aria-label="Graph controls">
|
|
56
|
+
<div class="panel-heading compact">
|
|
57
|
+
<h2>Workspace</h2>
|
|
58
|
+
<span id="workspaceMode">Combined</span>
|
|
59
|
+
</div>
|
|
60
|
+
<div id="metricsSummary" class="metrics-grid"></div>
|
|
61
|
+
<label>
|
|
62
|
+
<span>Search</span>
|
|
63
|
+
<input id="searchInput" type="search" placeholder="Entity, edge, type, tag, path...">
|
|
64
|
+
</label>
|
|
65
|
+
<label>
|
|
66
|
+
<span>View</span>
|
|
67
|
+
<select id="viewMode">
|
|
68
|
+
<option value="combined">Combined</option>
|
|
69
|
+
<option value="memory">Memory</option>
|
|
70
|
+
<option value="code">Code</option>
|
|
71
|
+
</select>
|
|
72
|
+
</label>
|
|
73
|
+
<label>
|
|
74
|
+
<span>Node Type</span>
|
|
75
|
+
<select id="typeFilter">
|
|
76
|
+
<option value="">All types</option>
|
|
77
|
+
</select>
|
|
78
|
+
</label>
|
|
79
|
+
<label>
|
|
80
|
+
<span>Relation</span>
|
|
81
|
+
<select id="relationFilter">
|
|
82
|
+
<option value="">All relations</option>
|
|
83
|
+
</select>
|
|
84
|
+
</label>
|
|
85
|
+
<button id="resetView" type="button">Reset</button>
|
|
86
|
+
<div class="legend" aria-label="Legend">
|
|
87
|
+
<span><i class="dot memory-dot"></i>memory packet</span>
|
|
88
|
+
<span><i class="dot code-dot"></i>code artifact</span>
|
|
89
|
+
<span><i class="line sample-line"></i>relation</span>
|
|
90
|
+
</div>
|
|
91
|
+
</aside>
|
|
92
|
+
|
|
93
|
+
<aside class="details-panel" aria-label="Selection details">
|
|
94
|
+
<div class="panel-heading compact">
|
|
95
|
+
<h2>Inspector</h2>
|
|
96
|
+
<span id="selectionStatus">No selection</span>
|
|
97
|
+
</div>
|
|
98
|
+
<div id="selectionDetails" class="details-empty">Select an entity or edge.</div>
|
|
99
|
+
</aside>
|
|
100
|
+
|
|
101
|
+
<section class="review-panel" aria-label="Review queue">
|
|
102
|
+
<div class="panel-heading">
|
|
103
|
+
<h2>Review Queue</h2>
|
|
104
|
+
<span id="reviewCount">0</span>
|
|
105
|
+
</div>
|
|
106
|
+
<div id="reviewList" class="review-list"></div>
|
|
107
|
+
</section>
|
|
108
|
+
|
|
109
|
+
<section class="proof-panel" aria-label="Quality and benchmark">
|
|
110
|
+
<div class="panel-heading">
|
|
111
|
+
<h2>Proof</h2>
|
|
112
|
+
<span id="proofStatus">metrics</span>
|
|
113
|
+
</div>
|
|
114
|
+
<div id="proofList" class="proof-list"></div>
|
|
115
|
+
</section>
|
|
116
|
+
|
|
117
|
+
<section class="table-panel entities-panel" aria-label="Nodes">
|
|
118
|
+
<div class="panel-heading">
|
|
119
|
+
<h2>Nodes</h2>
|
|
120
|
+
<span id="entityCount">0</span>
|
|
121
|
+
</div>
|
|
122
|
+
<div id="entityList" class="list"></div>
|
|
123
|
+
</section>
|
|
124
|
+
|
|
125
|
+
<section class="table-panel edges-panel" aria-label="Relations">
|
|
126
|
+
<div class="panel-heading">
|
|
127
|
+
<h2>Relations</h2>
|
|
128
|
+
<span id="edgeCount">0</span>
|
|
129
|
+
</div>
|
|
130
|
+
<div id="edgeList" class="list"></div>
|
|
131
|
+
</section>
|
|
132
|
+
</main>
|
|
133
|
+
|
|
134
|
+
<script src="./app.js?v=3"></script>
|
|
135
|
+
</body>
|
|
136
|
+
</html>
|
|
@@ -0,0 +1,530 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
color-scheme: dark;
|
|
3
|
+
--bg: #050806;
|
|
4
|
+
--surface: #08110d;
|
|
5
|
+
--surface-soft: #0d1913;
|
|
6
|
+
--surface-strong: #12251b;
|
|
7
|
+
--terminal: #b9fbc0;
|
|
8
|
+
--terminal-strong: #41ff8f;
|
|
9
|
+
--terminal-dim: #6ea77d;
|
|
10
|
+
--text: #d7f9df;
|
|
11
|
+
--muted: #7fa88a;
|
|
12
|
+
--line: #1c3b29;
|
|
13
|
+
--line-strong: #2f6f48;
|
|
14
|
+
--memory: #b88cff;
|
|
15
|
+
--memory-soft: #251a36;
|
|
16
|
+
--code: #6ad7ff;
|
|
17
|
+
--code-soft: #102633;
|
|
18
|
+
--warn: #ffd166;
|
|
19
|
+
--danger: #ff6b6b;
|
|
20
|
+
--edge: #6d8f79;
|
|
21
|
+
--shadow: 0 18px 60px rgba(0, 0, 0, 0.46);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
* { box-sizing: border-box; }
|
|
25
|
+
|
|
26
|
+
body {
|
|
27
|
+
margin: 0;
|
|
28
|
+
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%);
|
|
32
|
+
color: var(--text);
|
|
33
|
+
font: 13px/1.45 ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
button, input, select { font: inherit; }
|
|
37
|
+
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; }
|
|
40
|
+
|
|
41
|
+
.app-header {
|
|
42
|
+
display: grid;
|
|
43
|
+
grid-template-columns: minmax(0, 1fr) auto auto auto;
|
|
44
|
+
gap: 16px;
|
|
45
|
+
align-items: center;
|
|
46
|
+
padding: 14px 18px;
|
|
47
|
+
border-bottom: 1px solid var(--line);
|
|
48
|
+
background: rgba(5, 8, 6, 0.94);
|
|
49
|
+
backdrop-filter: blur(16px);
|
|
50
|
+
position: sticky;
|
|
51
|
+
top: 0;
|
|
52
|
+
z-index: 10;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.brand-block { min-width: 0; }
|
|
56
|
+
.eyebrow {
|
|
57
|
+
display: inline-flex;
|
|
58
|
+
margin-bottom: 5px;
|
|
59
|
+
color: var(--terminal-strong);
|
|
60
|
+
font-size: 11px;
|
|
61
|
+
font-weight: 800;
|
|
62
|
+
letter-spacing: 0.08em;
|
|
63
|
+
text-transform: uppercase;
|
|
64
|
+
}
|
|
65
|
+
.brand-block h1::before {
|
|
66
|
+
content: "> ";
|
|
67
|
+
color: var(--terminal-strong);
|
|
68
|
+
}
|
|
69
|
+
.app-header p {
|
|
70
|
+
margin-top: 6px;
|
|
71
|
+
color: var(--muted);
|
|
72
|
+
overflow-wrap: anywhere;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.status-strip {
|
|
76
|
+
display: flex;
|
|
77
|
+
flex-wrap: wrap;
|
|
78
|
+
gap: 8px;
|
|
79
|
+
justify-content: flex-end;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.autoload-status {
|
|
83
|
+
display: inline-flex;
|
|
84
|
+
align-items: center;
|
|
85
|
+
min-height: 28px;
|
|
86
|
+
padding: 4px 9px;
|
|
87
|
+
border: 1px solid var(--line);
|
|
88
|
+
border-radius: 4px;
|
|
89
|
+
background: #040805;
|
|
90
|
+
color: var(--warn);
|
|
91
|
+
font-size: 11px;
|
|
92
|
+
font-weight: 760;
|
|
93
|
+
white-space: nowrap;
|
|
94
|
+
}
|
|
95
|
+
.autoload-status.ok {
|
|
96
|
+
border-color: var(--line-strong);
|
|
97
|
+
color: var(--terminal-strong);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.status-pill, .detail-kind {
|
|
101
|
+
display: inline-flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
gap: 7px;
|
|
104
|
+
min-height: 28px;
|
|
105
|
+
padding: 4px 9px;
|
|
106
|
+
border: 1px solid var(--line-strong);
|
|
107
|
+
border-radius: 4px;
|
|
108
|
+
background: rgba(13, 25, 19, 0.92);
|
|
109
|
+
color: var(--muted);
|
|
110
|
+
font-size: 11px;
|
|
111
|
+
font-weight: 750;
|
|
112
|
+
white-space: nowrap;
|
|
113
|
+
}
|
|
114
|
+
.status-pill strong { color: var(--terminal-strong); }
|
|
115
|
+
.status-pill.warn strong { color: var(--warn); }
|
|
116
|
+
.status-pill.code strong { color: var(--code); }
|
|
117
|
+
.status-pill.memory strong { color: var(--memory); }
|
|
118
|
+
|
|
119
|
+
.file-picker, button {
|
|
120
|
+
display: inline-flex;
|
|
121
|
+
align-items: center;
|
|
122
|
+
justify-content: center;
|
|
123
|
+
min-height: 38px;
|
|
124
|
+
padding: 0 13px;
|
|
125
|
+
border: 1px solid var(--terminal-strong);
|
|
126
|
+
border-radius: 4px;
|
|
127
|
+
background: #07130d;
|
|
128
|
+
color: var(--terminal-strong);
|
|
129
|
+
cursor: pointer;
|
|
130
|
+
white-space: nowrap;
|
|
131
|
+
font-weight: 780;
|
|
132
|
+
box-shadow: inset 0 0 0 1px rgba(65, 255, 143, 0.10);
|
|
133
|
+
}
|
|
134
|
+
.file-picker:hover, button:hover { background: #0d1f15; }
|
|
135
|
+
.file-picker input {
|
|
136
|
+
position: absolute;
|
|
137
|
+
width: 1px;
|
|
138
|
+
height: 1px;
|
|
139
|
+
overflow: hidden;
|
|
140
|
+
clip: rect(0, 0, 0, 0);
|
|
141
|
+
}
|
|
142
|
+
.file-picker > span {
|
|
143
|
+
display: inline;
|
|
144
|
+
margin: 0;
|
|
145
|
+
color: var(--terminal-strong) !important;
|
|
146
|
+
font-size: inherit;
|
|
147
|
+
font-weight: inherit;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.layout {
|
|
151
|
+
display: grid;
|
|
152
|
+
grid-template-columns: minmax(0, 1fr) 380px;
|
|
153
|
+
grid-template-rows: minmax(680px, calc(100vh - 108px)) auto minmax(220px, 30vh) minmax(270px, 34vh);
|
|
154
|
+
grid-template-areas:
|
|
155
|
+
"graph details"
|
|
156
|
+
"controls details"
|
|
157
|
+
"review proof"
|
|
158
|
+
"entities edges";
|
|
159
|
+
gap: 12px;
|
|
160
|
+
padding: 12px;
|
|
161
|
+
min-height: calc(100vh - 78px);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.control-panel, .graph-panel, .details-panel, .table-panel, .review-panel, .proof-panel {
|
|
165
|
+
border: 1px solid var(--line);
|
|
166
|
+
border-radius: 6px;
|
|
167
|
+
background: rgba(8, 17, 13, 0.94);
|
|
168
|
+
box-shadow: var(--shadow);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.control-panel {
|
|
172
|
+
grid-area: controls;
|
|
173
|
+
min-height: 0;
|
|
174
|
+
overflow: auto;
|
|
175
|
+
padding: 12px;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
@media (min-width: 1121px) {
|
|
179
|
+
.control-panel {
|
|
180
|
+
display: grid;
|
|
181
|
+
grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
|
|
182
|
+
gap: 10px;
|
|
183
|
+
align-items: end;
|
|
184
|
+
}
|
|
185
|
+
.control-panel .panel-heading, .metrics-grid, .legend { grid-column: 1 / -1; }
|
|
186
|
+
.control-panel label, .control-panel button { margin-top: 0; }
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.control-panel label { display: block; margin-top: 12px; }
|
|
190
|
+
label span {
|
|
191
|
+
display: block;
|
|
192
|
+
margin-bottom: 6px;
|
|
193
|
+
color: var(--terminal-dim);
|
|
194
|
+
font-size: 11px;
|
|
195
|
+
font-weight: 760;
|
|
196
|
+
text-transform: uppercase;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
input, select {
|
|
200
|
+
width: 100%;
|
|
201
|
+
min-height: 38px;
|
|
202
|
+
border: 1px solid var(--line);
|
|
203
|
+
border-radius: 4px;
|
|
204
|
+
padding: 0 10px;
|
|
205
|
+
background: #030604;
|
|
206
|
+
color: var(--text);
|
|
207
|
+
}
|
|
208
|
+
input::placeholder { color: #4e7458; }
|
|
209
|
+
input:focus, select:focus, button:focus, .file-picker:focus-within {
|
|
210
|
+
outline: 2px solid rgba(65, 255, 143, 0.35);
|
|
211
|
+
outline-offset: 1px;
|
|
212
|
+
}
|
|
213
|
+
.control-panel button { width: 100%; margin-top: 12px; }
|
|
214
|
+
|
|
215
|
+
.panel-heading {
|
|
216
|
+
display: flex;
|
|
217
|
+
align-items: center;
|
|
218
|
+
justify-content: space-between;
|
|
219
|
+
gap: 10px;
|
|
220
|
+
padding: 11px 12px 0;
|
|
221
|
+
margin-bottom: 10px;
|
|
222
|
+
}
|
|
223
|
+
.panel-heading.compact { padding: 0; margin-bottom: 12px; }
|
|
224
|
+
.panel-heading span, #workspaceMode, #selectionStatus {
|
|
225
|
+
color: var(--terminal-dim);
|
|
226
|
+
font-size: 11px;
|
|
227
|
+
font-variant-numeric: tabular-nums;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.metrics-grid {
|
|
231
|
+
display: grid;
|
|
232
|
+
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
233
|
+
gap: 8px;
|
|
234
|
+
margin-bottom: 12px;
|
|
235
|
+
}
|
|
236
|
+
.metric {
|
|
237
|
+
min-height: 58px;
|
|
238
|
+
padding: 9px;
|
|
239
|
+
border: 1px solid var(--line);
|
|
240
|
+
border-radius: 4px;
|
|
241
|
+
background: #06100b;
|
|
242
|
+
}
|
|
243
|
+
.metric strong {
|
|
244
|
+
display: block;
|
|
245
|
+
color: var(--terminal-strong);
|
|
246
|
+
font-size: 17px;
|
|
247
|
+
line-height: 1.1;
|
|
248
|
+
overflow-wrap: anywhere;
|
|
249
|
+
}
|
|
250
|
+
.metric span {
|
|
251
|
+
display: block;
|
|
252
|
+
margin-top: 5px;
|
|
253
|
+
color: var(--terminal-dim);
|
|
254
|
+
font-size: 10px;
|
|
255
|
+
font-weight: 760;
|
|
256
|
+
text-transform: uppercase;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.legend {
|
|
260
|
+
display: flex;
|
|
261
|
+
flex-wrap: wrap;
|
|
262
|
+
gap: 12px;
|
|
263
|
+
margin-top: 12px;
|
|
264
|
+
padding-top: 12px;
|
|
265
|
+
border-top: 1px solid var(--line);
|
|
266
|
+
color: var(--muted);
|
|
267
|
+
font-size: 11px;
|
|
268
|
+
font-weight: 720;
|
|
269
|
+
}
|
|
270
|
+
.legend span { display: flex; align-items: center; gap: 8px; }
|
|
271
|
+
.dot { width: 12px; height: 8px; border-radius: 2px; display: inline-block; }
|
|
272
|
+
.memory-dot { background: var(--memory); }
|
|
273
|
+
.code-dot { background: var(--code); }
|
|
274
|
+
.line { width: 24px; height: 2px; display: inline-block; background: var(--edge); }
|
|
275
|
+
|
|
276
|
+
.graph-panel {
|
|
277
|
+
grid-area: graph;
|
|
278
|
+
position: relative;
|
|
279
|
+
min-height: 640px;
|
|
280
|
+
overflow: hidden;
|
|
281
|
+
display: grid;
|
|
282
|
+
grid-template-rows: auto minmax(0, 1fr);
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.graph-toolbar {
|
|
286
|
+
display: flex;
|
|
287
|
+
justify-content: space-between;
|
|
288
|
+
align-items: center;
|
|
289
|
+
gap: 12px;
|
|
290
|
+
padding: 11px 12px;
|
|
291
|
+
border-bottom: 1px solid var(--line);
|
|
292
|
+
background: linear-gradient(180deg, #0b1710, #07110c);
|
|
293
|
+
}
|
|
294
|
+
.graph-toolbar p { color: var(--terminal-dim); font-size: 11px; margin-top: 3px; }
|
|
295
|
+
.graph-actions { display: inline-flex; align-items: center; gap: 6px; }
|
|
296
|
+
.graph-actions button { min-width: 40px; min-height: 34px; padding: 0 10px; }
|
|
297
|
+
.interaction-hint {
|
|
298
|
+
display: inline-flex;
|
|
299
|
+
align-items: center;
|
|
300
|
+
padding-right: 6px;
|
|
301
|
+
color: var(--terminal-dim);
|
|
302
|
+
font-size: 11px;
|
|
303
|
+
font-weight: 700;
|
|
304
|
+
white-space: nowrap;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
#graphSvg {
|
|
308
|
+
width: 100%;
|
|
309
|
+
height: 100%;
|
|
310
|
+
min-height: 600px;
|
|
311
|
+
display: block;
|
|
312
|
+
cursor: grab;
|
|
313
|
+
background:
|
|
314
|
+
linear-gradient(rgba(65, 255, 143, 0.035) 1px, transparent 1px),
|
|
315
|
+
linear-gradient(90deg, rgba(65, 255, 143, 0.035) 1px, transparent 1px),
|
|
316
|
+
radial-gradient(circle at 52% 46%, rgba(65, 255, 143, 0.10), transparent 44%),
|
|
317
|
+
#020503;
|
|
318
|
+
background-size: 28px 28px, 28px 28px, 100% 100%, 100% 100%;
|
|
319
|
+
}
|
|
320
|
+
#graphSvg.dragging { cursor: grabbing; }
|
|
321
|
+
#arrow path { fill: var(--edge); }
|
|
322
|
+
|
|
323
|
+
.empty-state {
|
|
324
|
+
position: absolute;
|
|
325
|
+
inset: 54px 0 0;
|
|
326
|
+
display: grid;
|
|
327
|
+
place-content: center;
|
|
328
|
+
gap: 6px;
|
|
329
|
+
color: var(--muted);
|
|
330
|
+
text-align: center;
|
|
331
|
+
pointer-events: none;
|
|
332
|
+
}
|
|
333
|
+
.empty-state strong { color: var(--terminal); font-size: 18px; }
|
|
334
|
+
.empty-state.hidden { display: none; }
|
|
335
|
+
|
|
336
|
+
.details-panel {
|
|
337
|
+
grid-area: details;
|
|
338
|
+
min-height: 0;
|
|
339
|
+
overflow: auto;
|
|
340
|
+
padding: 12px;
|
|
341
|
+
}
|
|
342
|
+
.details-empty { color: var(--terminal-dim); }
|
|
343
|
+
.detail-title { margin-bottom: 8px; color: var(--text); font-weight: 780; font-size: 17px; overflow-wrap: anywhere; }
|
|
344
|
+
.detail-kind { margin-bottom: 10px; color: var(--terminal-strong); background: #07130d; }
|
|
345
|
+
.detail-row { padding: 9px 0; border-top: 1px solid var(--line); }
|
|
346
|
+
.detail-row dt { margin: 0 0 4px; color: var(--terminal-dim); font-size: 11px; font-weight: 760; text-transform: uppercase; }
|
|
347
|
+
.detail-row dd { margin: 0; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
|
|
348
|
+
|
|
349
|
+
.entities-panel { grid-area: entities; }
|
|
350
|
+
.edges-panel { grid-area: edges; }
|
|
351
|
+
.review-panel { grid-area: review; }
|
|
352
|
+
.proof-panel { grid-area: proof; }
|
|
353
|
+
.table-panel { min-height: 0; overflow: hidden; }
|
|
354
|
+
.review-panel, .proof-panel { min-height: 0; overflow: hidden; }
|
|
355
|
+
.list { height: calc(100% - 48px); overflow: auto; padding: 0 8px 10px; }
|
|
356
|
+
.review-list, .proof-list {
|
|
357
|
+
height: calc(100% - 48px);
|
|
358
|
+
overflow: auto;
|
|
359
|
+
padding: 0 10px 12px;
|
|
360
|
+
}
|
|
361
|
+
.review-item {
|
|
362
|
+
padding: 10px 0;
|
|
363
|
+
border-top: 1px solid var(--line);
|
|
364
|
+
}
|
|
365
|
+
.review-title {
|
|
366
|
+
color: var(--terminal);
|
|
367
|
+
font-weight: 820;
|
|
368
|
+
overflow-wrap: anywhere;
|
|
369
|
+
}
|
|
370
|
+
.review-meta, .review-risks {
|
|
371
|
+
margin-top: 4px;
|
|
372
|
+
color: var(--terminal-dim);
|
|
373
|
+
font-size: 11px;
|
|
374
|
+
}
|
|
375
|
+
.review-summary {
|
|
376
|
+
margin-top: 6px;
|
|
377
|
+
color: var(--text);
|
|
378
|
+
overflow-wrap: anywhere;
|
|
379
|
+
}
|
|
380
|
+
.review-artifact {
|
|
381
|
+
margin-top: 10px;
|
|
382
|
+
border-top: 1px solid var(--line);
|
|
383
|
+
padding-top: 10px;
|
|
384
|
+
}
|
|
385
|
+
.review-artifact summary {
|
|
386
|
+
color: var(--terminal-strong);
|
|
387
|
+
cursor: pointer;
|
|
388
|
+
font-weight: 780;
|
|
389
|
+
}
|
|
390
|
+
.review-artifact pre {
|
|
391
|
+
margin: 10px 0 0;
|
|
392
|
+
white-space: pre-wrap;
|
|
393
|
+
color: var(--muted);
|
|
394
|
+
font-size: 11px;
|
|
395
|
+
}
|
|
396
|
+
.proof-list {
|
|
397
|
+
display: grid;
|
|
398
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
399
|
+
gap: 8px;
|
|
400
|
+
align-content: start;
|
|
401
|
+
}
|
|
402
|
+
.proof-item {
|
|
403
|
+
min-height: 62px;
|
|
404
|
+
padding: 10px;
|
|
405
|
+
border: 1px solid var(--line);
|
|
406
|
+
border-radius: 4px;
|
|
407
|
+
background: #06100b;
|
|
408
|
+
}
|
|
409
|
+
.proof-item strong {
|
|
410
|
+
display: block;
|
|
411
|
+
color: var(--terminal-strong);
|
|
412
|
+
font-size: 18px;
|
|
413
|
+
}
|
|
414
|
+
.proof-item span {
|
|
415
|
+
display: block;
|
|
416
|
+
margin-top: 5px;
|
|
417
|
+
color: var(--terminal-dim);
|
|
418
|
+
font-size: 10px;
|
|
419
|
+
font-weight: 760;
|
|
420
|
+
text-transform: uppercase;
|
|
421
|
+
}
|
|
422
|
+
.list-item {
|
|
423
|
+
width: 100%;
|
|
424
|
+
display: grid;
|
|
425
|
+
gap: 4px;
|
|
426
|
+
padding: 10px 8px;
|
|
427
|
+
border: 0;
|
|
428
|
+
border-top: 1px solid var(--line);
|
|
429
|
+
border-radius: 0;
|
|
430
|
+
background: transparent;
|
|
431
|
+
color: inherit;
|
|
432
|
+
text-align: left;
|
|
433
|
+
cursor: pointer;
|
|
434
|
+
}
|
|
435
|
+
.list-item:hover, .list-item.selected { background: rgba(65, 255, 143, 0.08); }
|
|
436
|
+
.item-title { color: var(--terminal); font-weight: 780; overflow-wrap: anywhere; }
|
|
437
|
+
.item-meta { color: var(--terminal-dim); font-size: 11px; overflow-wrap: anywhere; }
|
|
438
|
+
|
|
439
|
+
.edge-line { stroke: var(--edge); stroke-width: 1.5; marker-end: url(#arrow); opacity: 0.72; }
|
|
440
|
+
.edge-line.filtered { opacity: 0.05; }
|
|
441
|
+
.edge-line.selected, .edge-line.connected { stroke: var(--terminal-strong); stroke-width: 2.8; opacity: 1; }
|
|
442
|
+
.edge-line.review-low-confidence { stroke-dasharray: 5 4; stroke: var(--warn); }
|
|
443
|
+
.edge-line.review-missing-evidence { opacity: 0.34; stroke-dasharray: 3 5; }
|
|
444
|
+
.edge-line.review-invalidated { stroke: #68716c; stroke-dasharray: 2 5; }
|
|
445
|
+
.edge-hit { stroke: transparent; stroke-width: 18; cursor: pointer; }
|
|
446
|
+
|
|
447
|
+
.node { cursor: pointer; }
|
|
448
|
+
.node-body {
|
|
449
|
+
stroke-width: 1.5;
|
|
450
|
+
rx: 4;
|
|
451
|
+
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.38));
|
|
452
|
+
}
|
|
453
|
+
.node.graph-memory .node-body {
|
|
454
|
+
fill: var(--memory-soft);
|
|
455
|
+
stroke: var(--memory);
|
|
456
|
+
}
|
|
457
|
+
.node.graph-code .node-body {
|
|
458
|
+
fill: var(--code-soft);
|
|
459
|
+
stroke: var(--code);
|
|
460
|
+
}
|
|
461
|
+
.node.graph-unknown .node-body {
|
|
462
|
+
fill: #151b18;
|
|
463
|
+
stroke: var(--terminal-dim);
|
|
464
|
+
}
|
|
465
|
+
.node.selected .node-body, .node.connected .node-body {
|
|
466
|
+
stroke: var(--terminal-strong);
|
|
467
|
+
stroke-width: 2.8;
|
|
468
|
+
}
|
|
469
|
+
.node.filtered { opacity: 0.10; }
|
|
470
|
+
.node-title {
|
|
471
|
+
fill: var(--text);
|
|
472
|
+
font-size: 12px;
|
|
473
|
+
font-weight: 800;
|
|
474
|
+
pointer-events: none;
|
|
475
|
+
}
|
|
476
|
+
.node-type {
|
|
477
|
+
fill: var(--terminal-dim);
|
|
478
|
+
font-size: 9px;
|
|
479
|
+
font-weight: 760;
|
|
480
|
+
letter-spacing: 0.06em;
|
|
481
|
+
text-transform: uppercase;
|
|
482
|
+
pointer-events: none;
|
|
483
|
+
}
|
|
484
|
+
.node-port {
|
|
485
|
+
fill: var(--terminal-strong);
|
|
486
|
+
opacity: 0.88;
|
|
487
|
+
pointer-events: none;
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
@media (max-width: 1120px) {
|
|
491
|
+
.app-header {
|
|
492
|
+
grid-template-columns: 1fr;
|
|
493
|
+
align-items: stretch;
|
|
494
|
+
padding: 12px 14px;
|
|
495
|
+
}
|
|
496
|
+
.brand-block h1 { font-size: 24px; }
|
|
497
|
+
.app-header p { font-size: 12px; }
|
|
498
|
+
.status-strip { justify-content: flex-start; }
|
|
499
|
+
.status-pill { min-height: 24px; padding: 3px 8px; }
|
|
500
|
+
.layout {
|
|
501
|
+
grid-template-columns: 1fr;
|
|
502
|
+
grid-template-rows: minmax(620px, 78vh) auto auto minmax(220px, 36vh) minmax(220px, 36vh) minmax(220px, 36vh) minmax(220px, 36vh);
|
|
503
|
+
grid-template-areas:
|
|
504
|
+
"graph"
|
|
505
|
+
"controls"
|
|
506
|
+
"details"
|
|
507
|
+
"review"
|
|
508
|
+
"proof"
|
|
509
|
+
"entities"
|
|
510
|
+
"edges";
|
|
511
|
+
}
|
|
512
|
+
.metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
513
|
+
.control-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
|
514
|
+
.control-panel .panel-heading, .metrics-grid, .legend { grid-column: 1 / -1; }
|
|
515
|
+
.control-panel label, .control-panel button { margin-top: 0; }
|
|
516
|
+
.graph-panel { min-height: 620px; }
|
|
517
|
+
#graphSvg { min-height: 560px; }
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
@media (max-width: 620px) {
|
|
521
|
+
.app-header { padding: 12px; }
|
|
522
|
+
.layout { padding: 8px; gap: 8px; }
|
|
523
|
+
.control-panel { grid-template-columns: 1fr; }
|
|
524
|
+
.metrics-grid { grid-template-columns: 1fr 1fr; }
|
|
525
|
+
.proof-list { grid-template-columns: 1fr 1fr; }
|
|
526
|
+
.graph-toolbar { align-items: flex-start; flex-direction: column; }
|
|
527
|
+
.graph-actions { width: 100%; }
|
|
528
|
+
.interaction-hint { flex: 1; white-space: normal; }
|
|
529
|
+
#graphSvg { min-height: 450px; }
|
|
530
|
+
}
|