@kage-core/kage-graph-mcp 1.2.0 → 1.4.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/dist/cli.js +74 -0
- package/dist/daemon.js +7 -1
- package/dist/index.js +22 -9
- package/dist/kernel.js +309 -26
- package/package.json +1 -1
- package/viewer/console.js +638 -0
- package/viewer/index.html +284 -280
- package/viewer/app.js +0 -6693
- package/viewer/data.html +0 -296
- package/viewer/graph.html +0 -296
- package/viewer/intel.html +0 -296
- package/viewer/memory.html +0 -367
- package/viewer/owners.html +0 -296
- package/viewer/review.html +0 -307
- package/viewer/styles.css +0 -2781
package/viewer/index.html
CHANGED
|
@@ -1,307 +1,311 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
<meta charset="utf-8"
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1"
|
|
6
|
-
<title>Kage
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<a href="./owners.html" data-viewer-page="owners">Owners</a>
|
|
30
|
-
<a href="./data.html" data-viewer-page="data">Artifacts</a>
|
|
31
|
-
</nav>
|
|
32
|
-
<nav class="sidebar-links" aria-label="Kage links">
|
|
33
|
-
<a href="https://kage-core.com/">Home</a>
|
|
34
|
-
<a href="https://kage-core.com/guide.html">Docs</a>
|
|
35
|
-
<a href="https://kage-core.com/releases.html">Releases</a>
|
|
36
|
-
<a href="https://github.com/kage-core/Kage">GitHub</a>
|
|
37
|
-
</nav>
|
|
38
|
-
</aside>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>Kage — memory dashboard</title>
|
|
7
|
+
<style>
|
|
8
|
+
/* Tokens mirror docs/assets/site.css so the dashboard matches the site. */
|
|
9
|
+
:root {
|
|
10
|
+
color-scheme: dark;
|
|
11
|
+
--bg: #050806; --paper: #08110d; --paper-2: #0d1913;
|
|
12
|
+
--line: #1b3a2a; --line-strong: #234a35;
|
|
13
|
+
--ink: #e4f7e9; --muted: #93afa0; --faint: #6b8a7a;
|
|
14
|
+
--green: #41ff8f; --green-strong: #87f7b5; --green-soft: rgba(65,255,143,0.12);
|
|
15
|
+
--code: #6ad7ff; --memory: #c49cff; --warn: #ffd166; --danger: #ff7a8f;
|
|
16
|
+
--code-bg: #020503;
|
|
17
|
+
--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
18
|
+
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
19
|
+
--r-control: 4px; --r-panel: 6px; --r-card: 8px;
|
|
20
|
+
}
|
|
21
|
+
* { box-sizing: border-box; }
|
|
22
|
+
html, body { margin: 0; }
|
|
23
|
+
body {
|
|
24
|
+
background: radial-gradient(circle at 14% 0%, rgba(65,255,143,0.07), transparent 38%), linear-gradient(180deg, #07100b 0%, var(--bg) 44%, #030504 100%);
|
|
25
|
+
background-attachment: fixed; color: var(--ink); font: 400 14px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
|
|
26
|
+
}
|
|
27
|
+
a { color: inherit; text-decoration: none; } a:hover { color: var(--green-strong); }
|
|
28
|
+
.eyebrow { color: var(--muted); font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
|
|
39
29
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
30
|
+
.app { display: grid; grid-template-columns: 240px minmax(0,1fr); min-height: 100vh; }
|
|
31
|
+
/* sidebar */
|
|
32
|
+
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
|
|
33
|
+
padding: 20px 16px; border-right: 1px solid var(--line); background: rgba(5,8,6,0.55); backdrop-filter: blur(8px); }
|
|
34
|
+
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px 18px; font: 700 16px/1 var(--sans); }
|
|
35
|
+
.brand .mark { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line);
|
|
36
|
+
border-radius: var(--r-control); background: #07130d; color: var(--green); font-weight: 800; }
|
|
37
|
+
.repocard { margin: 0 2px 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
|
|
38
|
+
.repocard .eyebrow { display: block; } .repocard strong { display: block; margin-top: 6px; font: 600 13px/1.3 var(--sans); overflow-wrap: anywhere; }
|
|
39
|
+
.nav { display: flex; flex-direction: column; gap: 2px; }
|
|
40
|
+
.nav button { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
|
|
41
|
+
background: transparent; border: 1px solid transparent; color: var(--muted); font: 500 14px/1 var(--sans);
|
|
42
|
+
padding: 10px 11px; border-radius: var(--r-control); }
|
|
43
|
+
.nav button:hover { color: var(--ink); background: rgba(255,255,255,0.03); }
|
|
44
|
+
.nav button[aria-current="true"] { color: var(--ink); background: var(--green-soft); border-color: rgba(65,255,143,0.30); }
|
|
45
|
+
.nav .ic { width: 15px; text-align: center; color: var(--faint); } .nav button[aria-current="true"] .ic { color: var(--green); }
|
|
46
|
+
.side .grow { flex: 1; }
|
|
47
|
+
.side .links { display: flex; flex-direction: column; gap: 7px; padding-top: 14px; border-top: 1px solid var(--line); }
|
|
48
|
+
.side .links a { color: var(--faint); font: 500 12.5px/1 var(--sans); } .side .links a:hover { color: var(--ink); }
|
|
54
49
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
<h2>Show me what you understand</h2>
|
|
63
|
-
</div>
|
|
64
|
-
<strong id="repoXrayStatus">waiting</strong>
|
|
65
|
-
</div>
|
|
66
|
-
<p id="repoXrayScript">Kage will map entry points, core files, risk, tests, and memory overlays when the X-Ray report is loaded.</p>
|
|
67
|
-
<div id="repoXrayLayers" class="repo-xray-layers"></div>
|
|
68
|
-
</section>
|
|
69
|
-
<div id="dashboardCharts" class="dashboard-charts" aria-label="Repo health charts"></div>
|
|
70
|
-
<div class="dashboard-grid">
|
|
71
|
-
<article class="dashboard-card primary" id="dashboardMemory">
|
|
72
|
-
<div class="dashboard-card-head"><span>Memory</span><strong>repo lore</strong></div>
|
|
73
|
-
<h3>Reusable repo context</h3>
|
|
74
|
-
<ul></ul>
|
|
75
|
-
<a href="./memory.html" data-viewer-page="memory">Open memory</a>
|
|
76
|
-
</article>
|
|
77
|
-
<article class="dashboard-card primary" id="dashboardGraph">
|
|
78
|
-
<div class="dashboard-card-head"><span>Graph</span><strong>source map</strong></div>
|
|
79
|
-
<h3>What to inspect before editing</h3>
|
|
80
|
-
<ul></ul>
|
|
81
|
-
<a href="./graph.html" data-viewer-page="graph">Explore graph</a>
|
|
82
|
-
</article>
|
|
83
|
-
<article class="dashboard-card primary" id="dashboardIntel">
|
|
84
|
-
<div class="dashboard-card-head"><span>Before You Edit</span><strong>checklist</strong></div>
|
|
85
|
-
<h3>What needs attention</h3>
|
|
86
|
-
<ul></ul>
|
|
87
|
-
<a href="./intel.html" data-viewer-page="intel">Open edit checklist</a>
|
|
88
|
-
</article>
|
|
89
|
-
<article class="dashboard-card primary" id="dashboardReview">
|
|
90
|
-
<div class="dashboard-card-head"><span>Review</span><strong>handoff</strong></div>
|
|
91
|
-
<h3>Ready for handoff?</h3>
|
|
92
|
-
<ul></ul>
|
|
93
|
-
<a href="./review.html" data-viewer-page="review">Open review</a>
|
|
94
|
-
</article>
|
|
95
|
-
</div>
|
|
96
|
-
</section>
|
|
50
|
+
.main { min-width: 0; }
|
|
51
|
+
.head { padding: 30px clamp(20px,3.4vw,44px) 6px; }
|
|
52
|
+
.head h1 { margin: 10px 0 0; font: 700 27px/1.1 var(--sans); letter-spacing: -0.01em; }
|
|
53
|
+
.head p { margin: 8px 0 0; color: var(--muted); font: 400 15px/1.5 var(--sans); max-width: 720px; }
|
|
54
|
+
.wrap { padding: 20px clamp(20px,3.4vw,44px) 90px; }
|
|
55
|
+
.section { display: none; } .section.active { display: block; animation: fade .25s ease; }
|
|
56
|
+
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
|
|
97
57
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
<div>
|
|
101
|
-
<h2>Dependency Graph</h2>
|
|
102
|
-
<p id="graphSubhead">Combined repo memory and source graph.</p>
|
|
103
|
-
</div>
|
|
104
|
-
<div class="graph-actions" aria-label="Graph view controls">
|
|
105
|
-
<span id="interactionHint" class="interaction-hint">drag canvas / wheel zoom / click node</span>
|
|
106
|
-
<button id="zoomOut" type="button">-</button>
|
|
107
|
-
<button id="fitView" type="button">Fit</button>
|
|
108
|
-
<button id="zoomIn" type="button">+</button>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
<div id="graphCanvasWrap" class="graph-canvas-wrap">
|
|
112
|
-
<canvas id="graphCanvas" aria-label="Interactive Kage memory and code graph"></canvas>
|
|
113
|
-
<div id="threeGraph" class="three-graph" aria-label="Interactive 3D Kage memory and code graph"></div>
|
|
114
|
-
<div id="graphTooltip" class="graph-tooltip" role="status"></div>
|
|
115
|
-
</div>
|
|
116
|
-
<svg id="graphSvg" class="fallback-graph" viewBox="0 0 1000 660" role="img" aria-labelledby="graphTitle graphDescription">
|
|
117
|
-
<title id="graphTitle">Kage local memory and code graph terminal view</title>
|
|
118
|
-
<desc id="graphDescription">Entities and relationships from loaded Kage memory and code graph JSON files.</desc>
|
|
119
|
-
<defs>
|
|
120
|
-
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
|
121
|
-
<path d="M 0 0 L 10 5 L 0 10 z"></path>
|
|
122
|
-
</marker>
|
|
123
|
-
</defs>
|
|
124
|
-
<g id="edgeLayer"></g>
|
|
125
|
-
<g id="nodeLayer"></g>
|
|
126
|
-
</svg>
|
|
127
|
-
<div id="emptyState" class="empty-state">
|
|
128
|
-
<strong>No graph loaded</strong>
|
|
129
|
-
<span>Choose Kage graph JSON files or open with graph, code, and metrics URL params.</span>
|
|
130
|
-
</div>
|
|
131
|
-
</section>
|
|
58
|
+
.panel { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); padding: 20px 22px; margin-bottom: 16px; }
|
|
59
|
+
.panel > h2 { margin: 0 0 16px; font: 600 14px/1.3 var(--sans); } .panel .sub { color: var(--faint); font-weight: 400; }
|
|
132
60
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
</div>
|
|
150
|
-
<details class="advanced-controls">
|
|
151
|
-
<summary>More filters</summary>
|
|
152
|
-
<label>
|
|
153
|
-
<span>View</span>
|
|
154
|
-
<select id="viewMode">
|
|
155
|
-
<option value="combined">Combined</option>
|
|
156
|
-
<option value="memory">Memory</option>
|
|
157
|
-
<option value="code">Code</option>
|
|
158
|
-
</select>
|
|
159
|
-
</label>
|
|
160
|
-
<label>
|
|
161
|
-
<span>Node Type</span>
|
|
162
|
-
<select id="typeFilter">
|
|
163
|
-
<option value="">All types</option>
|
|
164
|
-
</select>
|
|
165
|
-
</label>
|
|
166
|
-
<label>
|
|
167
|
-
<span>Relation</span>
|
|
168
|
-
<select id="relationFilter">
|
|
169
|
-
<option value="">All relations</option>
|
|
170
|
-
</select>
|
|
171
|
-
</label>
|
|
172
|
-
<label>
|
|
173
|
-
<span>Max Nodes</span>
|
|
174
|
-
<select id="maxNodes">
|
|
175
|
-
<option value="60">60</option>
|
|
176
|
-
<option value="90" selected>90</option>
|
|
177
|
-
<option value="140">140</option>
|
|
178
|
-
<option value="220">220</option>
|
|
179
|
-
</select>
|
|
180
|
-
</label>
|
|
181
|
-
<label class="toggle-control">
|
|
182
|
-
<input id="showDependencies" type="checkbox">
|
|
183
|
-
<span>Include external dependencies</span>
|
|
184
|
-
</label>
|
|
185
|
-
<button id="resetView" type="button">Reset filters</button>
|
|
186
|
-
</details>
|
|
187
|
-
<input id="scopeFilter" type="hidden" value="signal">
|
|
188
|
-
<div class="legend" aria-label="Legend">
|
|
189
|
-
<span><i class="dot memory-dot"></i>memory packet</span>
|
|
190
|
-
<span><i class="dot code-dot"></i>code artifact</span>
|
|
191
|
-
<span><i class="line sample-line"></i>relation</span>
|
|
192
|
-
</div>
|
|
193
|
-
</aside>
|
|
61
|
+
/* trust hero */
|
|
62
|
+
.hero { border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 28px; margin-bottom: 16px;
|
|
63
|
+
background: radial-gradient(120% 160% at 0 0, rgba(65,255,143,0.06), transparent 58%), var(--paper);
|
|
64
|
+
display: grid; grid-template-columns: minmax(190px,auto) 1fr; gap: 36px; align-items: center; }
|
|
65
|
+
.hero[data-status="warn"] { border-color: rgba(255,209,102,0.34); }
|
|
66
|
+
.hero[data-status="alert"] { border-color: rgba(255,122,143,0.38); }
|
|
67
|
+
.hero .score { display: flex; align-items: baseline; gap: 5px; margin-top: 12px; }
|
|
68
|
+
.hero .score b { font: 800 62px/0.9 var(--sans); letter-spacing: -0.03em; color: var(--green); }
|
|
69
|
+
.hero[data-status="warn"] .score b { color: var(--warn); } .hero[data-status="alert"] .score b { color: var(--danger); }
|
|
70
|
+
.hero .score span { font: 500 17px/1 var(--sans); color: var(--faint); }
|
|
71
|
+
.hero .verdict { margin-top: 14px; color: var(--muted); font: 400 13px/1.55 var(--sans); max-width: 230px; }
|
|
72
|
+
.bars { display: grid; gap: 16px; }
|
|
73
|
+
.bar { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; }
|
|
74
|
+
.bar .lbl { font: 400 13.5px/1.3 var(--sans); } .bar .val { font: 600 13px/1 var(--mono); color: var(--green); }
|
|
75
|
+
.bar .track { grid-column: 1/2; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.05); overflow: hidden; }
|
|
76
|
+
.bar .track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2bbf6a, var(--green)); width: 0; transition: width 1s cubic-bezier(.2,.7,.2,1); }
|
|
194
77
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
78
|
+
/* stat tiles */
|
|
79
|
+
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
|
|
80
|
+
.tile { border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; background: var(--paper); }
|
|
81
|
+
.tile .k { color: var(--faint); font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
82
|
+
.tile .v { margin-top: 10px; font: 800 27px/1 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
|
|
83
|
+
.tile .s { margin-top: 6px; color: var(--muted); font: 400 12.5px/1.3 var(--sans); }
|
|
84
|
+
.tile .v.green { color: var(--green); } .tile .v.code { color: var(--code); } .tile .v.warn { color: var(--warn); } .tile .v.memory { color: var(--memory); }
|
|
202
85
|
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
<button id="clearPath" type="button">Clear</button>
|
|
213
|
-
</div>
|
|
214
|
-
<div class="path-finder-inputs">
|
|
215
|
-
<input id="pathFromInput" type="search" list="pathNodeOptions" placeholder="From selected file or symbol...">
|
|
216
|
-
<input id="pathToInput" type="search" list="pathNodeOptions" placeholder="To related test, route, or symbol...">
|
|
217
|
-
<button id="findPath" type="button">Trace</button>
|
|
218
|
-
</div>
|
|
219
|
-
<datalist id="pathNodeOptions"></datalist>
|
|
220
|
-
<div id="pathStatus" class="path-status">Select a code node, then trace to another code node when you need impact proof.</div>
|
|
221
|
-
<div id="pathResult" class="path-result"></div>
|
|
222
|
-
</div>
|
|
223
|
-
</aside>
|
|
86
|
+
/* attention */
|
|
87
|
+
.alert-card { border: 1px solid rgba(255,209,102,0.32); border-radius: var(--r-card); overflow: hidden; margin-bottom: 16px; background: var(--paper); }
|
|
88
|
+
.alert-card .ah { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--line);
|
|
89
|
+
background: linear-gradient(90deg, rgba(255,209,102,0.07), transparent); }
|
|
90
|
+
.alert-card .ah h2 { margin: 0; font: 600 14px/1 var(--sans); } .alert-card .ah .c { color: var(--warn); font: 600 12px/1 var(--mono); }
|
|
91
|
+
.att { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 13px 20px; border-top: 1px solid var(--line); }
|
|
92
|
+
.att:first-child { border-top: 0; }
|
|
93
|
+
.att .t { font: 500 14px/1.3 var(--sans); } .att .why { grid-column: 1/2; color: var(--warn); font: 400 12px/1.4 var(--sans); opacity: .92; }
|
|
94
|
+
.att .tag { align-self: center; color: var(--faint); font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
|
|
224
95
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
96
|
+
/* graph */
|
|
97
|
+
.graphwrap { position: relative; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
|
|
98
|
+
background: radial-gradient(52% 44% at 50% 46%, rgba(65,255,143,0.10), transparent 72%), radial-gradient(120% 120% at 50% 0%, rgba(13,25,19,0.85), var(--code-bg)); }
|
|
99
|
+
#graph { display: block; width: 100%; height: 580px; }
|
|
100
|
+
.glegend { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 16px; color: var(--muted); font: 500 12px/1 var(--sans);
|
|
101
|
+
background: rgba(5,8,6,0.72); padding: 9px 13px; border-radius: var(--r-control); border: 1px solid var(--line); backdrop-filter: blur(8px); }
|
|
102
|
+
.glegend i { display: inline-block; width: 9px; height: 9px; border-radius: 99px; margin-right: 7px; vertical-align: middle; }
|
|
103
|
+
.gtip { position: absolute; pointer-events: none; background: #07130d; border: 1px solid var(--line-strong); border-radius: var(--r-control);
|
|
104
|
+
padding: 8px 11px; font: 400 12.5px/1.4 var(--sans); max-width: 270px; display: none; z-index: 5; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
|
|
105
|
+
.gtip b { color: var(--ink); font-weight: 600; } .gtip .p { margin-top: 3px; color: var(--faint); font: 400 11px/1.3 var(--mono); }
|
|
106
|
+
.gdetail { position: absolute; right: 14px; top: 58px; width: 250px; display: none; z-index: 6; background: rgba(7,16,11,0.94);
|
|
107
|
+
border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 14px 15px; box-shadow: 0 12px 34px rgba(0,0,0,.55); backdrop-filter: blur(8px); }
|
|
108
|
+
.gdetail .gd-k { font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px; }
|
|
109
|
+
.gdetail b.gd-t { display: block; color: var(--ink); font: 600 13.5px/1.4 var(--sans); padding-right: 16px; }
|
|
110
|
+
.gdetail .gd-row { margin-top: 9px; color: var(--muted); font: 400 12px/1.4 var(--sans); }
|
|
111
|
+
.gdetail .gd-row b { color: var(--ink); } .gdetail .gd-row b.hot, .gdetail .gd-row b.healthy { color: var(--green); }
|
|
112
|
+
.gdetail .gd-row b.stale, .gdetail .gd-row b.disputed, .gdetail .gd-row b.ungrounded { color: var(--warn); }
|
|
113
|
+
.gdetail .gd-files { margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--faint); font: 400 11px/1.6 var(--mono); overflow-wrap: anywhere; }
|
|
114
|
+
.gdetail .gd-x { position: absolute; right: 8px; top: 6px; cursor: pointer; background: transparent; border: 0; color: var(--faint); font-size: 16px; line-height: 1; padding: 2px 5px; }
|
|
115
|
+
.gdetail .gd-x:hover { color: var(--ink); }
|
|
116
|
+
.ghint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; pointer-events: none; color: var(--faint); font: 400 11.5px/1 var(--sans); }
|
|
117
|
+
.gtoolbar { position: absolute; left: 14px; top: 14px; right: 14px; display: flex; justify-content: space-between; gap: 10px; }
|
|
118
|
+
.gfilters, .gzoom { display: flex; gap: 4px; background: rgba(5,8,6,0.72); border: 1px solid var(--line); border-radius: var(--r-control); padding: 4px; backdrop-filter: blur(8px); }
|
|
119
|
+
.gtoolbar button { cursor: pointer; background: transparent; border: 1px solid transparent; color: var(--muted); border-radius: 3px; font: 500 12px/1 var(--sans); padding: 6px 10px; }
|
|
120
|
+
.gtoolbar button:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
|
|
121
|
+
.gfilters button[aria-pressed="true"] { color: var(--ink); background: var(--green-soft); border-color: rgba(65,255,143,0.30); }
|
|
122
|
+
.gzoom button { width: 30px; padding: 6px 0; text-align: center; font-size: 14px; color: var(--ink); }
|
|
245
123
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
124
|
+
/* memory list */
|
|
125
|
+
.controls { margin-bottom: 12px; }
|
|
126
|
+
.controls input { width: 100%; background: var(--paper); border: 1px solid var(--line); color: var(--ink); border-radius: var(--r-control);
|
|
127
|
+
padding: 11px 14px; font: 400 14px/1 var(--sans); }
|
|
128
|
+
.controls input::placeholder { color: var(--faint); } .controls input:focus { outline: none; border-color: var(--line-strong); }
|
|
129
|
+
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
|
|
130
|
+
.chip { font: 500 12.5px/1 var(--sans); padding: 8px 13px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
|
|
131
|
+
.chip[aria-pressed="true"] { border-color: rgba(65,255,143,0.30); background: var(--green-soft); color: var(--ink); }
|
|
132
|
+
.chip b { color: var(--faint); font-weight: 600; } .chip[aria-pressed="true"] b { color: var(--green); }
|
|
133
|
+
.memcount { color: var(--faint); font: 500 12px/1 var(--mono); margin: 2px 0 10px; }
|
|
134
|
+
.grouphead { display: flex; align-items: center; gap: 11px; padding: 18px 4px 9px; }
|
|
135
|
+
.grouphead:first-child { padding-top: 4px; }
|
|
136
|
+
.grouphead .gl { color: var(--muted); font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .09em; }
|
|
137
|
+
.grouphead .gc { color: var(--faint); font: 600 11px/1 var(--mono); }
|
|
138
|
+
.grouphead .gline { flex: 1; height: 1px; background: var(--line); }
|
|
139
|
+
.row { display: grid; grid-template-columns: 9px 1fr auto; gap: 0 14px; align-items: center; padding: 12px 8px; border-top: 1px solid var(--line); border-radius: var(--r-control); }
|
|
140
|
+
.grouphead + .row { border-top: 0; }
|
|
141
|
+
.row:hover { background: rgba(255,255,255,0.025); }
|
|
142
|
+
.dot { width: 8px; height: 8px; border-radius: 99px; background: var(--faint); }
|
|
143
|
+
.dot.hot { background: var(--green-strong); box-shadow: 0 0 9px rgba(135,247,181,.55); } .dot.healthy { background: var(--green); }
|
|
144
|
+
.dot.cold { background: #2f4a3a; } .dot.stale, .dot.disputed, .dot.ungrounded { background: var(--warn); }
|
|
145
|
+
.row .title { font: 500 14px/1.4 var(--sans); }
|
|
146
|
+
.row .meta { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
|
147
|
+
.type { color: var(--memory); font: 500 11px/1 var(--mono); padding: 3px 7px; border: 1px solid rgba(196,156,255,0.28); border-radius: var(--r-control); }
|
|
148
|
+
.paths { color: var(--faint); font: 400 11px/1.3 var(--mono); overflow-wrap: anywhere; }
|
|
149
|
+
.row .right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }
|
|
150
|
+
.pill { font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
|
|
151
|
+
.pill.hot, .pill.healthy { color: var(--green); border-color: rgba(65,255,143,0.30); background: var(--green-soft); }
|
|
152
|
+
.pill.cold { color: var(--faint); }
|
|
153
|
+
.pill.stale, .pill.disputed, .pill.ungrounded { color: var(--warn); border-color: rgba(255,209,102,0.30); background: rgba(255,209,102,0.08); }
|
|
154
|
+
.uses { color: var(--faint); font: 400 11px/1 var(--mono); }
|
|
155
|
+
.showmore { width: 100%; margin-top: 14px; padding: 12px; background: transparent; border: 1px solid var(--line); border-radius: var(--r-control); color: var(--muted); font: 500 13px/1 var(--sans); cursor: pointer; }
|
|
156
|
+
.showmore:hover { color: var(--ink); border-color: var(--line-strong); background: rgba(255,255,255,0.025); }
|
|
157
|
+
.row { cursor: pointer; }
|
|
254
158
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
159
|
+
/* activity */
|
|
160
|
+
.daybars { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: 8px; }
|
|
161
|
+
.daybars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
|
|
162
|
+
.daybars .col .bar { width: 100%; max-width: 30px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--green), #2bbf6a); min-height: 3px; transition: height .8s cubic-bezier(.2,.7,.2,1); }
|
|
163
|
+
.daybars .col .bar.empty { background: rgba(255,255,255,0.05); }
|
|
164
|
+
.daybars .col .d { color: var(--faint); font: 400 9.5px/1 var(--mono); white-space: nowrap; }
|
|
165
|
+
.daybars .col .v { color: var(--muted); font: 600 11px/1 var(--mono); }
|
|
166
|
+
.feed { display: grid; }
|
|
167
|
+
.ev { display: grid; grid-template-columns: 18px 1fr auto; gap: 0 13px; align-items: baseline; padding: 11px 4px; border-top: 1px solid var(--line); }
|
|
168
|
+
.ev:first-child { border-top: 0; }
|
|
169
|
+
.ev .ei { font-size: 13px; line-height: 1.5; }
|
|
170
|
+
.ev .et { font: 500 13.5px/1.45 var(--sans); } .ev .ek { color: var(--faint); font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
|
|
171
|
+
.ev .when { color: var(--faint); font: 400 11px/1 var(--mono); white-space: nowrap; }
|
|
172
|
+
.ev.recall .ei { color: var(--green); } .ev.capture .ei { color: var(--memory); } .ev.supersede .ei, .ev.deprecate .ei { color: var(--warn); }
|
|
173
|
+
|
|
174
|
+
/* packet detail drawer */
|
|
175
|
+
.drawer-backdrop { position: fixed; inset: 0; background: rgba(2,5,3,0.6); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 40; }
|
|
176
|
+
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
|
|
177
|
+
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(460px, 92vw); transform: translateX(102%); transition: transform .28s cubic-bezier(.2,.7,.2,1);
|
|
178
|
+
background: var(--paper); border-left: 1px solid var(--line-strong); z-index: 50; overflow-y: auto; padding: 24px 26px 60px; box-shadow: -20px 0 60px rgba(0,0,0,.5); }
|
|
179
|
+
.drawer.open { transform: translateX(0); }
|
|
180
|
+
.drawer .dr-x { position: absolute; right: 16px; top: 14px; cursor: pointer; background: transparent; border: 0; color: var(--faint); font-size: 22px; line-height: 1; padding: 2px 6px; }
|
|
181
|
+
.drawer .dr-x:hover { color: var(--ink); }
|
|
182
|
+
.drawer .dr-tags { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin: 4px 30px 0 0; }
|
|
183
|
+
.drawer .dr-title { margin: 14px 0 0; font: 700 19px/1.35 var(--sans); color: var(--ink); }
|
|
184
|
+
.drawer .dr-summary { margin: 10px 0 0; color: var(--muted); font: 400 14px/1.6 var(--sans); }
|
|
185
|
+
.drawer .dr-body { margin: 18px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--code-bg);
|
|
186
|
+
color: var(--code-text, #c9f8dc); font: 400 13px/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
187
|
+
.drawer .dr-sec { margin-top: 20px; }
|
|
188
|
+
.drawer .dr-h { color: var(--faint); font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 9px; }
|
|
189
|
+
.drawer .dr-file { color: var(--code); font: 400 12px/1.7 var(--mono); overflow-wrap: anywhere; }
|
|
190
|
+
.drawer .dr-tagrow { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
191
|
+
.drawer .tg { color: var(--muted); font: 500 11px/1 var(--mono); padding: 4px 8px; border: 1px solid var(--line); border-radius: 99px; }
|
|
192
|
+
.drawer .dr-row { color: var(--muted); font: 400 13px/1.7 var(--sans); } .drawer .dr-row b { color: var(--ink); }
|
|
193
|
+
.drawer .dr-row.warn { color: var(--warn); }
|
|
194
|
+
|
|
195
|
+
/* insights */
|
|
196
|
+
.ins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
|
197
|
+
.donut-row { display: flex; align-items: center; gap: 24px; }
|
|
198
|
+
.donut { width: 132px; height: 132px; border-radius: 99px; flex: none; position: relative; }
|
|
199
|
+
.donut::after { content: ""; position: absolute; inset: 21px; border-radius: 99px; background: var(--paper); }
|
|
200
|
+
.donut .center { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; text-align: center; }
|
|
201
|
+
.donut .center b { font: 800 26px/1 var(--sans); color: var(--green); } .donut .center b.warn { color: var(--warn); } .donut .center b.danger { color: var(--danger); } .donut .center span { display: block; margin-top: 4px; color: var(--faint); font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
|
|
202
|
+
.donut-cap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font: 400 12.5px/1.5 var(--sans); }
|
|
203
|
+
.donut-cap b { color: var(--ink); font-weight: 600; }
|
|
204
|
+
.legend2 { display: grid; gap: 10px; flex: 1; }
|
|
205
|
+
.legend2 .li { display: flex; align-items: center; gap: 9px; font: 400 13px/1 var(--sans); }
|
|
206
|
+
.legend2 .li i { width: 9px; height: 9px; border-radius: 2px; } .legend2 .li b { margin-left: auto; color: var(--muted); font: 500 12px/1 var(--mono); }
|
|
207
|
+
.hbars { display: grid; gap: 11px; }
|
|
208
|
+
.hbar { display: grid; grid-template-columns: 116px 1fr 34px; gap: 12px; align-items: center; font: 400 13px/1 var(--sans); }
|
|
209
|
+
.hbar .n { color: var(--muted); } .hbar .t { height: 7px; border-radius: 99px; background: rgba(255,255,255,0.05); overflow: hidden; }
|
|
210
|
+
.hbar .t i { display: block; height: 100%; width: 0; min-width: 8px; border-radius: 99px; background: linear-gradient(90deg, #7d5bd0, var(--memory)); transition: width .9s cubic-bezier(.2,.7,.2,1); }
|
|
211
|
+
.hbar.code .t i { background: linear-gradient(90deg, #3a8db0, var(--code)); }
|
|
212
|
+
.hbar .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
213
|
+
.hbar .c { text-align: right; color: var(--faint); font: 500 12px/1 var(--mono); }
|
|
214
|
+
.facts { display: grid; gap: 13px; }
|
|
215
|
+
.fact { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); font: 400 13.5px/1.5 var(--sans); }
|
|
216
|
+
.fact .em { font-size: 17px; line-height: 1.3; } .fact span { color: var(--muted); } .fact b { color: var(--ink); font-weight: 600; }
|
|
217
|
+
.fact code { padding: 1px 5px; border: 1px solid var(--line); border-radius: var(--r-control); background: rgba(8,17,13,0.6); color: var(--code); font: 500 12px/1.4 var(--mono); }
|
|
218
|
+
.empty { color: var(--faint); padding: 22px 4px; font: 400 14px/1.5 var(--sans); }
|
|
219
|
+
@media (max-width: 760px) { .app { grid-template-columns: 1fr; } .side { position: static; height: auto; } .tiles { grid-template-columns: repeat(2,1fr); } .ins-grid { grid-template-columns: 1fr; } .hero { grid-template-columns: 1fr; gap: 22px; } }
|
|
220
|
+
</style>
|
|
221
|
+
</head>
|
|
222
|
+
<body>
|
|
223
|
+
<div class="app">
|
|
224
|
+
<aside class="side">
|
|
225
|
+
<div class="brand"><span class="mark">K</span> Kage</div>
|
|
226
|
+
<div class="repocard"><span class="eyebrow">Repository</span><strong id="repo">loading…</strong></div>
|
|
227
|
+
<nav class="nav" id="nav">
|
|
228
|
+
<button data-section="overview" aria-current="true"><span class="ic">◎</span> Overview</button>
|
|
229
|
+
<button data-section="graph"><span class="ic">⬡</span> Memory map</button>
|
|
230
|
+
<button data-section="memory"><span class="ic">▤</span> Memory</button>
|
|
231
|
+
<button data-section="activity"><span class="ic">◷</span> Activity</button>
|
|
232
|
+
<button data-section="insights"><span class="ic">▦</span> Insights</button>
|
|
233
|
+
</nav>
|
|
234
|
+
<div class="grow"></div>
|
|
235
|
+
<div class="links">
|
|
236
|
+
<a href="https://kage-core.github.io/Kage/">Website ↗</a>
|
|
237
|
+
<a href="https://kage-core.github.io/Kage/guide.html">Docs ↗</a>
|
|
238
|
+
<a href="https://github.com/kage-core/Kage">GitHub ↗</a>
|
|
239
|
+
</div>
|
|
240
|
+
</aside>
|
|
241
|
+
|
|
242
|
+
<main class="main">
|
|
243
|
+
<header class="head">
|
|
244
|
+
<span class="eyebrow" id="eyebrow">kage://overview</span>
|
|
245
|
+
<h1 id="title">Repository overview</h1>
|
|
246
|
+
<p id="subtitle">Whether this repo's agent memory can be trusted — at a glance.</p>
|
|
247
|
+
</header>
|
|
248
|
+
<div class="wrap">
|
|
249
|
+
<section class="section active" id="section-overview">
|
|
250
|
+
<div id="hero" class="hero" data-status="idle"></div>
|
|
251
|
+
<div class="tiles" id="tiles"></div>
|
|
252
|
+
<div id="attentionMount"></div>
|
|
262
253
|
</section>
|
|
263
254
|
|
|
264
|
-
<section class="
|
|
265
|
-
<div class="panel
|
|
266
|
-
<h2>
|
|
267
|
-
<
|
|
255
|
+
<section class="section" id="section-graph">
|
|
256
|
+
<div class="panel" style="padding:16px 18px;">
|
|
257
|
+
<h2>Memory ↔ code map <span class="sub">— every memory packet linked to the files it's grounded in</span></h2>
|
|
258
|
+
<div class="graphwrap">
|
|
259
|
+
<canvas id="graph"></canvas>
|
|
260
|
+
<div class="gtoolbar">
|
|
261
|
+
<div class="gfilters" id="gfilters">
|
|
262
|
+
<button data-gfilter="all" aria-pressed="true">All</button>
|
|
263
|
+
<button data-gfilter="review">Needs review</button>
|
|
264
|
+
<button data-gfilter="hot">Hot</button>
|
|
265
|
+
</div>
|
|
266
|
+
<div class="gzoom">
|
|
267
|
+
<button id="zoomOut" title="Zoom out">−</button>
|
|
268
|
+
<button id="zoomIn" title="Zoom in">+</button>
|
|
269
|
+
<button id="resetView" title="Reset view">⤢</button>
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
272
|
+
<div class="ghint">scroll to zoom · drag a node to pin · click to focus · double-click to zoom in</div>
|
|
273
|
+
<div class="glegend"><span><i style="background:#c49cff"></i>memory</span><span><i style="background:#6ad7ff"></i>code file</span><span><i style="background:#ffd166"></i>needs review</span></div>
|
|
274
|
+
<div class="gtip" id="gtip"></div>
|
|
275
|
+
<div class="gdetail" id="gdetail"></div>
|
|
276
|
+
</div>
|
|
268
277
|
</div>
|
|
269
|
-
<div id="proofOverview" class="proof-overview"></div>
|
|
270
|
-
<div id="proofList" class="proof-list"></div>
|
|
271
278
|
</section>
|
|
272
279
|
|
|
273
|
-
<section class="
|
|
274
|
-
<div class="
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
<div id="intelligenceList" class="intelligence-list"></div>
|
|
280
|
+
<section class="section" id="section-memory">
|
|
281
|
+
<div class="controls"><input id="search" type="search" placeholder="Search memory by title, file, or type…" /></div>
|
|
282
|
+
<div class="chips" id="chips"></div>
|
|
283
|
+
<div class="memcount" id="memcount"></div>
|
|
284
|
+
<div class="panel" style="padding:6px 22px;"><div id="list"></div></div>
|
|
279
285
|
</section>
|
|
280
286
|
|
|
281
|
-
<section class="
|
|
282
|
-
<div class="
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
</div>
|
|
286
|
-
<div id="debugOverview" class="debug-overview"></div>
|
|
287
|
-
<div class="debug-guide">Use artifacts when the graph or recall output looks wrong. Normal repo work starts from Overview, Graph, Memory, Before You Edit, or Review.</div>
|
|
288
|
-
<div id="entityList" class="list"></div>
|
|
287
|
+
<section class="section" id="section-activity">
|
|
288
|
+
<div class="tiles" id="activityTiles"></div>
|
|
289
|
+
<div class="panel"><h2>Recalls per day <span class="sub">— how often agents pulled this repo's memory</span></h2><div class="daybars" id="activityDaily"></div></div>
|
|
290
|
+
<div class="panel"><h2>Recent activity</h2><div id="activityFeed"></div></div>
|
|
289
291
|
</section>
|
|
290
292
|
|
|
291
|
-
<section class="
|
|
292
|
-
<div class="
|
|
293
|
-
<h2>
|
|
294
|
-
<
|
|
293
|
+
<section class="section" id="section-insights">
|
|
294
|
+
<div class="ins-grid">
|
|
295
|
+
<div class="panel"><h2>Memory health</h2><div class="donut-row"><div class="donut" id="donut"><div class="center" id="donutCenter"></div></div><div class="legend2" id="healthLegend"></div></div><div class="donut-cap" id="healthCap"></div></div>
|
|
296
|
+
<div class="panel"><h2>Memory by type</h2><div class="hbars" id="typeBars"></div></div>
|
|
297
|
+
</div>
|
|
298
|
+
<div class="panel"><h2>Codebase Kage has mapped</h2><div class="tiles" id="codeTiles" style="margin:0;"></div></div>
|
|
299
|
+
<div class="ins-grid">
|
|
300
|
+
<div class="panel"><h2>Most-grounded files <span class="sub">— code your memory is anchored to</span></h2><div class="hbars" id="groundedFiles"></div></div>
|
|
301
|
+
<div class="panel"><h2>Worth knowing</h2><div class="facts" id="facts"></div></div>
|
|
295
302
|
</div>
|
|
296
|
-
<div class="debug-guide">Relations expose generation quality: evidence, confidence, invalidation, and memory-code linking.</div>
|
|
297
|
-
<div id="edgeList" class="list"></div>
|
|
298
303
|
</section>
|
|
299
304
|
</div>
|
|
300
|
-
</
|
|
301
|
-
</main>
|
|
302
|
-
</section>
|
|
305
|
+
</main>
|
|
303
306
|
</div>
|
|
304
|
-
|
|
305
|
-
<
|
|
307
|
+
<div class="drawer-backdrop" id="detailBackdrop"></div>
|
|
308
|
+
<aside class="drawer" id="detail" aria-hidden="true"></aside>
|
|
309
|
+
<script src="./console.js?v=15"></script>
|
|
306
310
|
</body>
|
|
307
311
|
</html>
|