@kage-core/kage-graph-mcp 1.1.22 → 1.1.24
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 +110 -466
- package/dist/daemon.js +5 -1
- package/package.json +2 -1
- package/viewer/app.js +692 -10
- package/viewer/index.html +12 -4
- package/viewer/styles.css +36 -3
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=17">
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
10
|
<header class="app-header">
|
|
@@ -29,14 +29,15 @@
|
|
|
29
29
|
<p id="graphSubhead">Combined repo memory and source graph.</p>
|
|
30
30
|
</div>
|
|
31
31
|
<div class="graph-actions" aria-label="Graph view controls">
|
|
32
|
-
<span class="interaction-hint">drag canvas / wheel zoom / click node</span>
|
|
32
|
+
<span id="interactionHint" class="interaction-hint">drag canvas / wheel zoom / click node</span>
|
|
33
33
|
<button id="zoomOut" type="button">-</button>
|
|
34
34
|
<button id="fitView" type="button">Fit</button>
|
|
35
35
|
<button id="zoomIn" type="button">+</button>
|
|
36
36
|
</div>
|
|
37
37
|
</div>
|
|
38
|
-
<div class="graph-canvas-wrap">
|
|
38
|
+
<div id="graphCanvasWrap" class="graph-canvas-wrap">
|
|
39
39
|
<canvas id="graphCanvas" aria-label="Interactive Kage memory and code graph"></canvas>
|
|
40
|
+
<div id="threeGraph" class="three-graph" aria-label="Interactive 3D Kage memory and code graph"></div>
|
|
40
41
|
<div id="graphTooltip" class="graph-tooltip" role="status"></div>
|
|
41
42
|
</div>
|
|
42
43
|
<svg id="graphSvg" class="fallback-graph" viewBox="0 0 1000 660" role="img" aria-labelledby="graphTitle graphDescription">
|
|
@@ -74,6 +75,13 @@
|
|
|
74
75
|
<option value="code">Code</option>
|
|
75
76
|
</select>
|
|
76
77
|
</label>
|
|
78
|
+
<label>
|
|
79
|
+
<span>Graph Mode</span>
|
|
80
|
+
<select id="renderMode">
|
|
81
|
+
<option value="2d" selected>2D Canvas</option>
|
|
82
|
+
<option value="3d">3D Space</option>
|
|
83
|
+
</select>
|
|
84
|
+
</label>
|
|
77
85
|
<label>
|
|
78
86
|
<span>Node Type</span>
|
|
79
87
|
<select id="typeFilter">
|
|
@@ -149,6 +157,6 @@
|
|
|
149
157
|
</section>
|
|
150
158
|
</main>
|
|
151
159
|
|
|
152
|
-
<script src="./app.js?v=
|
|
160
|
+
<script src="./app.js?v=17"></script>
|
|
153
161
|
</body>
|
|
154
162
|
</html>
|
package/viewer/styles.css
CHANGED
|
@@ -337,16 +337,49 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
|
|
|
337
337
|
#020503;
|
|
338
338
|
}
|
|
339
339
|
|
|
340
|
-
#graphCanvas {
|
|
340
|
+
#graphCanvas, .three-graph {
|
|
341
341
|
width: 100%;
|
|
342
342
|
height: 100%;
|
|
343
343
|
min-height: 600px;
|
|
344
344
|
display: block;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
#graphCanvas {
|
|
345
348
|
cursor: grab;
|
|
346
349
|
}
|
|
347
350
|
|
|
348
351
|
#graphCanvas:active { cursor: grabbing; }
|
|
349
352
|
|
|
353
|
+
.three-graph {
|
|
354
|
+
position: absolute;
|
|
355
|
+
inset: 0;
|
|
356
|
+
display: none;
|
|
357
|
+
cursor: grab;
|
|
358
|
+
background:
|
|
359
|
+
linear-gradient(rgba(65, 255, 143, 0.035) 1px, transparent 1px),
|
|
360
|
+
linear-gradient(90deg, rgba(65, 255, 143, 0.035) 1px, transparent 1px),
|
|
361
|
+
radial-gradient(circle at 52% 46%, rgba(106, 215, 255, 0.10), transparent 46%),
|
|
362
|
+
#020503;
|
|
363
|
+
background-size: 34px 34px, 34px 34px, 100% 100%, 100% 100%;
|
|
364
|
+
}
|
|
365
|
+
.three-graph canvas {
|
|
366
|
+
display: block;
|
|
367
|
+
width: 100% !important;
|
|
368
|
+
height: 100% !important;
|
|
369
|
+
}
|
|
370
|
+
.three-graph:active { cursor: grabbing; }
|
|
371
|
+
.three-status {
|
|
372
|
+
position: absolute;
|
|
373
|
+
inset: 0;
|
|
374
|
+
display: grid;
|
|
375
|
+
place-items: center;
|
|
376
|
+
color: var(--terminal-dim);
|
|
377
|
+
font-weight: 780;
|
|
378
|
+
}
|
|
379
|
+
.graph-canvas-wrap.mode-3d #graphCanvas { display: none; }
|
|
380
|
+
.graph-canvas-wrap.mode-3d .three-graph { display: block; }
|
|
381
|
+
.graph-canvas-wrap.mode-2d .three-graph { display: none; }
|
|
382
|
+
|
|
350
383
|
#graphSvg {
|
|
351
384
|
width: 100%;
|
|
352
385
|
height: 100%;
|
|
@@ -693,7 +726,7 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
|
|
|
693
726
|
.control-panel .panel-heading, .metrics-grid, .legend { grid-column: 1 / -1; }
|
|
694
727
|
.control-panel label, .control-panel button { margin-top: 0; }
|
|
695
728
|
.graph-panel { min-height: 620px; }
|
|
696
|
-
#graphCanvas, .graph-canvas-wrap, #graphSvg { min-height: 560px; }
|
|
729
|
+
#graphCanvas, .three-graph, .graph-canvas-wrap, #graphSvg { min-height: 560px; }
|
|
697
730
|
.details-panel {
|
|
698
731
|
height: auto;
|
|
699
732
|
max-height: 70vh;
|
|
@@ -710,5 +743,5 @@ input:focus, select:focus, button:focus, .file-picker:focus-within {
|
|
|
710
743
|
.graph-toolbar { align-items: flex-start; flex-direction: column; }
|
|
711
744
|
.graph-actions { width: 100%; }
|
|
712
745
|
.interaction-hint { flex: 1; white-space: normal; }
|
|
713
|
-
#graphCanvas, .graph-canvas-wrap, #graphSvg { min-height: 450px; }
|
|
746
|
+
#graphCanvas, .three-graph, .graph-canvas-wrap, #graphSvg { min-height: 450px; }
|
|
714
747
|
}
|