@kage-core/kage-graph-mcp 1.1.0 → 1.1.1
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 +25 -15
- package/dist/cli.js +64 -7
- package/dist/daemon.js +53 -1
- package/dist/index.js +26 -8
- package/dist/kernel.js +367 -51
- package/package.json +11 -2
- package/viewer/app.js +758 -31
- package/viewer/index.html +28 -3
- package/viewer/styles.css +102 -4
package/viewer/index.html
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="utf-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
6
|
<title>Kage Memory Terminal</title>
|
|
7
|
-
<link rel="stylesheet" href="./styles.css?v=
|
|
7
|
+
<link rel="stylesheet" href="./styles.css?v=5">
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
10
|
<header class="app-header">
|
|
@@ -35,7 +35,11 @@
|
|
|
35
35
|
<button id="zoomIn" type="button">+</button>
|
|
36
36
|
</div>
|
|
37
37
|
</div>
|
|
38
|
-
<
|
|
38
|
+
<div class="graph-canvas-wrap">
|
|
39
|
+
<canvas id="graphCanvas" aria-label="Interactive Kage memory and code graph"></canvas>
|
|
40
|
+
<div id="graphTooltip" class="graph-tooltip" role="status"></div>
|
|
41
|
+
</div>
|
|
42
|
+
<svg id="graphSvg" class="fallback-graph" viewBox="0 0 1000 660" role="img" aria-labelledby="graphTitle graphDescription">
|
|
39
43
|
<title id="graphTitle">Kage local memory and code graph terminal view</title>
|
|
40
44
|
<desc id="graphDescription">Entities and relationships from loaded Kage memory and code graph JSON files.</desc>
|
|
41
45
|
<defs>
|
|
@@ -82,6 +86,27 @@
|
|
|
82
86
|
<option value="">All relations</option>
|
|
83
87
|
</select>
|
|
84
88
|
</label>
|
|
89
|
+
<label>
|
|
90
|
+
<span>Scope</span>
|
|
91
|
+
<select id="scopeFilter">
|
|
92
|
+
<option value="signal">High signal</option>
|
|
93
|
+
<option value="focus">Focus selection</option>
|
|
94
|
+
<option value="all">Everything</option>
|
|
95
|
+
</select>
|
|
96
|
+
</label>
|
|
97
|
+
<label>
|
|
98
|
+
<span>Max Nodes</span>
|
|
99
|
+
<select id="maxNodes">
|
|
100
|
+
<option value="60">60</option>
|
|
101
|
+
<option value="90" selected>90</option>
|
|
102
|
+
<option value="140">140</option>
|
|
103
|
+
<option value="9999">All</option>
|
|
104
|
+
</select>
|
|
105
|
+
</label>
|
|
106
|
+
<label class="toggle-control">
|
|
107
|
+
<input id="showDependencies" type="checkbox">
|
|
108
|
+
<span>Show dependency noise</span>
|
|
109
|
+
</label>
|
|
85
110
|
<button id="resetView" type="button">Reset</button>
|
|
86
111
|
<div class="legend" aria-label="Legend">
|
|
87
112
|
<span><i class="dot memory-dot"></i>memory packet</span>
|
|
@@ -131,6 +156,6 @@
|
|
|
131
156
|
</section>
|
|
132
157
|
</main>
|
|
133
158
|
|
|
134
|
-
<script src="./app.js?v=
|
|
159
|
+
<script src="./app.js?v=5"></script>
|
|
135
160
|
</body>
|
|
136
161
|
</html>
|
package/viewer/styles.css
CHANGED
|
@@ -178,7 +178,7 @@ h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-trans
|
|
|
178
178
|
@media (min-width: 1121px) {
|
|
179
179
|
.control-panel {
|
|
180
180
|
display: grid;
|
|
181
|
-
grid-template-columns: repeat(
|
|
181
|
+
grid-template-columns: repeat(7, minmax(118px, 1fr)) auto;
|
|
182
182
|
gap: 10px;
|
|
183
183
|
align-items: end;
|
|
184
184
|
}
|
|
@@ -187,6 +187,26 @@ h2 { color: var(--terminal); font-size: 13px; letter-spacing: 0.04em; text-trans
|
|
|
187
187
|
}
|
|
188
188
|
|
|
189
189
|
.control-panel label { display: block; margin-top: 12px; }
|
|
190
|
+
.control-panel .toggle-control {
|
|
191
|
+
display: flex;
|
|
192
|
+
align-items: center;
|
|
193
|
+
gap: 9px;
|
|
194
|
+
min-height: 38px;
|
|
195
|
+
padding: 0 10px;
|
|
196
|
+
border: 1px solid var(--line);
|
|
197
|
+
border-radius: 4px;
|
|
198
|
+
background: #030604;
|
|
199
|
+
}
|
|
200
|
+
.control-panel .toggle-control input {
|
|
201
|
+
width: 15px;
|
|
202
|
+
min-height: 15px;
|
|
203
|
+
accent-color: var(--terminal-strong);
|
|
204
|
+
}
|
|
205
|
+
.control-panel .toggle-control span {
|
|
206
|
+
margin: 0;
|
|
207
|
+
color: var(--terminal-dim);
|
|
208
|
+
line-height: 1.2;
|
|
209
|
+
}
|
|
190
210
|
label span {
|
|
191
211
|
display: block;
|
|
192
212
|
margin-bottom: 6px;
|
|
@@ -304,6 +324,27 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
|
|
|
304
324
|
white-space: nowrap;
|
|
305
325
|
}
|
|
306
326
|
|
|
327
|
+
.graph-canvas-wrap {
|
|
328
|
+
position: relative;
|
|
329
|
+
min-height: 600px;
|
|
330
|
+
width: 100%;
|
|
331
|
+
height: 100%;
|
|
332
|
+
overflow: hidden;
|
|
333
|
+
background:
|
|
334
|
+
radial-gradient(circle at 52% 46%, rgba(65, 255, 143, 0.10), transparent 44%),
|
|
335
|
+
#020503;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
#graphCanvas {
|
|
339
|
+
width: 100%;
|
|
340
|
+
height: 100%;
|
|
341
|
+
min-height: 600px;
|
|
342
|
+
display: block;
|
|
343
|
+
cursor: grab;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
#graphCanvas:active { cursor: grabbing; }
|
|
347
|
+
|
|
307
348
|
#graphSvg {
|
|
308
349
|
width: 100%;
|
|
309
350
|
height: 100%;
|
|
@@ -317,8 +358,57 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
|
|
|
317
358
|
#020503;
|
|
318
359
|
background-size: 28px 28px, 28px 28px, 100% 100%, 100% 100%;
|
|
319
360
|
}
|
|
361
|
+
#graphSvg.fallback-graph { display: none; }
|
|
320
362
|
#graphSvg.dragging { cursor: grabbing; }
|
|
321
363
|
#arrow path { fill: var(--edge); }
|
|
364
|
+
.graph-tooltip {
|
|
365
|
+
position: absolute;
|
|
366
|
+
z-index: 5;
|
|
367
|
+
display: none;
|
|
368
|
+
max-width: min(320px, calc(100% - 28px));
|
|
369
|
+
padding: 10px 12px;
|
|
370
|
+
border: 1px solid rgba(65, 255, 143, 0.32);
|
|
371
|
+
border-radius: 6px;
|
|
372
|
+
background: rgba(3, 6, 4, 0.90);
|
|
373
|
+
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(65, 255, 143, 0.08);
|
|
374
|
+
backdrop-filter: blur(12px);
|
|
375
|
+
color: var(--text);
|
|
376
|
+
pointer-events: none;
|
|
377
|
+
}
|
|
378
|
+
.graph-tooltip.visible { display: block; }
|
|
379
|
+
.tt-name {
|
|
380
|
+
color: var(--terminal);
|
|
381
|
+
font-weight: 850;
|
|
382
|
+
overflow-wrap: anywhere;
|
|
383
|
+
}
|
|
384
|
+
.tt-type {
|
|
385
|
+
margin-top: 4px;
|
|
386
|
+
font-size: 10px;
|
|
387
|
+
font-weight: 800;
|
|
388
|
+
letter-spacing: 0.08em;
|
|
389
|
+
text-transform: uppercase;
|
|
390
|
+
}
|
|
391
|
+
.tt-summary {
|
|
392
|
+
margin-top: 7px;
|
|
393
|
+
color: var(--muted);
|
|
394
|
+
font-size: 11px;
|
|
395
|
+
overflow-wrap: anywhere;
|
|
396
|
+
}
|
|
397
|
+
.tt-conns {
|
|
398
|
+
margin-top: 7px;
|
|
399
|
+
padding-top: 7px;
|
|
400
|
+
border-top: 1px solid rgba(65, 255, 143, 0.16);
|
|
401
|
+
color: var(--terminal-dim);
|
|
402
|
+
font-size: 10px;
|
|
403
|
+
font-weight: 760;
|
|
404
|
+
}
|
|
405
|
+
.lane-label {
|
|
406
|
+
fill: rgba(185, 251, 192, 0.34);
|
|
407
|
+
font-size: 12px;
|
|
408
|
+
font-weight: 900;
|
|
409
|
+
letter-spacing: 0.16em;
|
|
410
|
+
pointer-events: none;
|
|
411
|
+
}
|
|
322
412
|
|
|
323
413
|
.empty-state {
|
|
324
414
|
position: absolute;
|
|
@@ -436,7 +526,7 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
|
|
|
436
526
|
.item-title { color: var(--terminal); font-weight: 780; overflow-wrap: anywhere; }
|
|
437
527
|
.item-meta { color: var(--terminal-dim); font-size: 11px; overflow-wrap: anywhere; }
|
|
438
528
|
|
|
439
|
-
.edge-line { stroke: var(--edge); stroke-width: 1.
|
|
529
|
+
.edge-line { stroke: var(--edge); stroke-width: 1.35; marker-end: url(#arrow); opacity: 0.50; }
|
|
440
530
|
.edge-line.filtered { opacity: 0.05; }
|
|
441
531
|
.edge-line.selected, .edge-line.connected { stroke: var(--terminal-strong); stroke-width: 2.8; opacity: 1; }
|
|
442
532
|
.edge-line.review-low-confidence { stroke-dasharray: 5 4; stroke: var(--warn); }
|
|
@@ -462,6 +552,14 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
|
|
|
462
552
|
fill: #151b18;
|
|
463
553
|
stroke: var(--terminal-dim);
|
|
464
554
|
}
|
|
555
|
+
.node.dependency-node .node-body {
|
|
556
|
+
fill: #101714;
|
|
557
|
+
stroke: #506c5a;
|
|
558
|
+
}
|
|
559
|
+
.node.dependency-node .node-title,
|
|
560
|
+
.node.dependency-node .node-type {
|
|
561
|
+
fill: #8aa394;
|
|
562
|
+
}
|
|
465
563
|
.node.selected .node-body, .node.connected .node-body {
|
|
466
564
|
stroke: var(--terminal-strong);
|
|
467
565
|
stroke-width: 2.8;
|
|
@@ -514,7 +612,7 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
|
|
|
514
612
|
.control-panel .panel-heading, .metrics-grid, .legend { grid-column: 1 / -1; }
|
|
515
613
|
.control-panel label, .control-panel button { margin-top: 0; }
|
|
516
614
|
.graph-panel { min-height: 620px; }
|
|
517
|
-
#graphSvg { min-height: 560px; }
|
|
615
|
+
#graphCanvas, .graph-canvas-wrap, #graphSvg { min-height: 560px; }
|
|
518
616
|
}
|
|
519
617
|
|
|
520
618
|
@media (max-width: 620px) {
|
|
@@ -526,5 +624,5 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
|
|
|
526
624
|
.graph-toolbar { align-items: flex-start; flex-direction: column; }
|
|
527
625
|
.graph-actions { width: 100%; }
|
|
528
626
|
.interaction-hint { flex: 1; white-space: normal; }
|
|
529
|
-
#graphSvg { min-height: 450px; }
|
|
627
|
+
#graphCanvas, .graph-canvas-wrap, #graphSvg { min-height: 450px; }
|
|
530
628
|
}
|