@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/index.html CHANGED
@@ -3,95 +3,83 @@
3
3
  <head>
4
4
  <meta charset="utf-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>Kage Graph Viewer</title>
7
- <link rel="stylesheet" href="./styles.css?v=26">
6
+ <title>Kage viewer</title>
7
+ <link rel="stylesheet" href="./styles.css?v=33">
8
8
  </head>
9
9
  <body>
10
- <header class="app-header">
11
- <div class="brand-block">
12
- <span class="eyebrow">kage://repo-intelligence</span>
13
- <h1>Kage Graph</h1>
14
- <p id="graphSummary">Load memory, code, and metrics graphs to inspect what agents know and why.</p>
15
- </div>
16
- <nav class="site-links" aria-label="Kage site links">
17
- <a href="../">Home</a>
18
- <a href="../guide.html">Docs</a>
19
- <a href="../releases.html">Releases</a>
20
- <a href="https://github.com/kage-core/Kage">GitHub</a>
21
- </nav>
22
- <nav class="viewer-sections" aria-label="Kage viewer sections">
23
- <button class="viewer-section active" type="button" data-viewer-section="overview" aria-selected="true">Overview</button>
24
- <button class="viewer-section" type="button" data-viewer-section="graph" aria-selected="false">Graph</button>
25
- <button class="viewer-section" type="button" data-dashboard-action="memory" aria-selected="false">Memory</button>
26
- <button class="viewer-section" type="button" data-dashboard-action="intelligence" aria-selected="false">Intel</button>
27
- <button class="viewer-section" type="button" data-dashboard-action="review" aria-selected="false">Review</button>
28
- <button class="viewer-section" type="button" data-dashboard-action="data" aria-selected="false">Data</button>
29
- </nav>
30
- <div id="statusStrip" class="status-strip" aria-label="Graph health"></div>
31
- <div id="autoLoadStatus" class="autoload-status">auto-load: waiting</div>
32
- <label class="file-picker">
33
- <span>Manual JSON</span>
34
- <input id="graphFile" type="file" accept=".json,application/json" multiple>
35
- </label>
36
- </header>
10
+ <div class="viewer-shell">
11
+ <aside class="repo-sidebar" aria-label="Repository navigation">
12
+ <a class="sidebar-brand" href="../">
13
+ <span class="brand-mark">K</span>
14
+ <span>Kage</span>
15
+ </a>
16
+ <div class="repo-card">
17
+ <span>Repository</span>
18
+ <strong>kage-core/Kage</strong>
19
+ </div>
20
+ <nav class="viewer-sections" aria-label="Kage viewer sections">
21
+ <a class="viewer-section active" href="./" data-viewer-page="overview" aria-current="page">Overview</a>
22
+ <a class="viewer-section" href="./graph.html" data-viewer-page="graph">Graph</a>
23
+ <a class="viewer-section" href="./memory.html" data-viewer-page="memory">Memory</a>
24
+ <a class="viewer-section" href="./intel.html" data-viewer-page="intel">Risks</a>
25
+ <a class="viewer-section" href="./review.html" data-viewer-page="review">Review</a>
26
+ </nav>
27
+ <nav class="sidebar-secondary" aria-label="Diagnostics">
28
+ <span class="sidebar-secondary-label">Diagnostics</span>
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>
37
39
 
38
- <main class="layout">
39
- <section class="dashboard-panel" aria-label="Kage repo dashboard">
40
- <div class="dashboard-hero">
41
- <div>
42
- <span class="dashboard-kicker">Repo Memory Dashboard</span>
43
- <h2>What agents know, where it maps to code, and what needs attention.</h2>
44
- <p>Kage turns repo-local memory packets, source graph facts, git signals, and review state into one navigable dashboard before you dive into the graph.</p>
45
- </div>
46
- <div class="dashboard-actions">
47
- <button type="button" data-viewer-section="graph">Open graph</button>
48
- <button type="button" data-dashboard-action="intelligence">Repo intelligence</button>
49
- <button type="button" data-dashboard-action="memory">Memory review</button>
40
+ <section class="viewer-main">
41
+ <header class="app-header">
42
+ <div class="brand-block">
43
+ <span class="eyebrow" id="pageEyebrow">kage://overview</span>
44
+ <h1 id="pageTitle">Repo dashboard</h1>
45
+ <p id="graphSummary">What is safe to change next, what needs attention, and what is ready to hand off.</p>
50
46
  </div>
51
- </div>
47
+ <div id="statusStrip" class="status-strip" aria-label="Graph health"></div>
48
+ <div id="autoLoadStatus" class="autoload-status">auto-load: waiting</div>
49
+ <label class="file-picker">
50
+ <span>Manual JSON</span>
51
+ <input id="graphFile" type="file" accept=".json,application/json" multiple>
52
+ </label>
53
+ </header>
54
+
55
+ <main class="layout">
56
+ <section class="dashboard-panel" aria-label="Kage repo dashboard">
52
57
  <div id="dashboardStats" class="dashboard-stats" aria-label="Repo dashboard stats"></div>
58
+ <div id="dashboardCharts" class="dashboard-charts" aria-label="Repo health charts"></div>
53
59
  <div class="dashboard-grid">
54
- <article class="dashboard-card" id="dashboardMemory">
60
+ <article class="dashboard-card primary" id="dashboardMemory">
55
61
  <div class="dashboard-card-head"><span>Memory</span><strong>repo lore</strong></div>
56
- <h3>Shareable agent context</h3>
57
- <p>Approved packets, memory-code links, and review state.</p>
62
+ <h3>Reusable repo context</h3>
58
63
  <ul></ul>
59
- <button type="button" data-dashboard-action="memory">Open memory</button>
64
+ <a href="./memory.html" data-viewer-page="memory">Open memory</a>
60
65
  </article>
61
- <article class="dashboard-card" id="dashboardGraph">
66
+ <article class="dashboard-card primary" id="dashboardGraph">
62
67
  <div class="dashboard-card-head"><span>Graph</span><strong>source map</strong></div>
63
- <h3>Files, symbols, calls, routes, tests</h3>
64
- <p>Explore the source graph and memory-code bridge.</p>
65
- <ul></ul>
66
- <button type="button" data-viewer-section="graph">Explore graph</button>
67
- </article>
68
- <article class="dashboard-card" id="dashboardIntel">
69
- <div class="dashboard-card-head"><span>Intel</span><strong>reports</strong></div>
70
- <h3>Risk, modules, owners, decisions</h3>
71
- <p>Operational maps generated from local artifacts.</p>
68
+ <h3>What to inspect before editing</h3>
72
69
  <ul></ul>
73
- <button type="button" data-dashboard-action="intelligence">Open intel</button>
70
+ <a href="./graph.html" data-viewer-page="graph">Explore graph</a>
74
71
  </article>
75
- <article class="dashboard-card" id="dashboardRisk">
76
- <div class="dashboard-card-head"><span>Risk</span><strong>impact</strong></div>
77
- <h3>Hotspots and blast radius</h3>
78
- <p>Git and graph signals for risky change areas.</p>
72
+ <article class="dashboard-card primary" id="dashboardIntel">
73
+ <div class="dashboard-card-head"><span>Risks</span><strong>reports</strong></div>
74
+ <h3>What needs attention</h3>
79
75
  <ul></ul>
80
- <button type="button" data-dashboard-action="intelligence">Open risk map</button>
76
+ <a href="./intel.html" data-viewer-page="intel">Open risks</a>
81
77
  </article>
82
- <article class="dashboard-card" id="dashboardReview">
78
+ <article class="dashboard-card primary" id="dashboardReview">
83
79
  <div class="dashboard-card-head"><span>Review</span><strong>handoff</strong></div>
84
- <h3>Inbox, proof, and merge readiness</h3>
85
- <p>Check pending memory, graph freshness, and proof metrics.</p>
86
- <ul></ul>
87
- <button type="button" data-dashboard-action="review">Open review</button>
88
- </article>
89
- <article class="dashboard-card" id="dashboardWorkspace">
90
- <div class="dashboard-card-head"><span>Workspace</span><strong>team map</strong></div>
91
- <h3>Cross-repo links and collaboration</h3>
92
- <p>Package links, contracts, topics, and co-change pairs.</p>
80
+ <h3>Ready for handoff?</h3>
93
81
  <ul></ul>
94
- <button type="button" data-dashboard-action="data">Open data</button>
82
+ <a href="./review.html" data-viewer-page="review">Open review</a>
95
83
  </article>
96
84
  </div>
97
85
  </section>
@@ -109,24 +97,6 @@
109
97
  <button id="zoomIn" type="button">+</button>
110
98
  </div>
111
99
  </div>
112
- <div class="graph-quickbar" aria-label="Graph quick controls">
113
- <div class="quick-group" aria-label="Scope">
114
- <span>Scope</span>
115
- <button type="button" data-quick-view="combined">Combined</button>
116
- <button type="button" data-quick-view="memory">Memory</button>
117
- <button type="button" data-quick-view="code">Code</button>
118
- </div>
119
- <div class="quick-group" aria-label="Render mode">
120
- <span>Mode</span>
121
- <button type="button" data-quick-render="2d">2D</button>
122
- <button type="button" data-quick-render="3d">3D</button>
123
- </div>
124
- <div class="quick-group quick-actions" aria-label="Graph tools">
125
- <button id="quickSearch" type="button">Search</button>
126
- <button id="quickPath" type="button">Path</button>
127
- <button id="quickInspector" type="button">Inspect</button>
128
- </div>
129
- </div>
130
100
  <div id="graphCanvasWrap" class="graph-canvas-wrap">
131
101
  <canvas id="graphCanvas" aria-label="Interactive Kage memory and code graph"></canvas>
132
102
  <div id="threeGraph" class="three-graph" aria-label="Interactive 3D Kage memory and code graph"></div>
@@ -150,84 +120,67 @@
150
120
  </section>
151
121
 
152
122
  <section class="workspace-shell" aria-label="Viewer workspace">
153
- <div class="workspace-top">
154
- <nav class="workspace-tabs" aria-label="Viewer panels">
155
- <button class="workspace-tab active" type="button" data-workspace-tab="controls" aria-selected="true">Tools</button>
156
- <button class="workspace-tab" type="button" data-workspace-tab="inspector" aria-selected="false">Inspect</button>
157
- <button class="workspace-tab" type="button" data-workspace-tab="intelligence" aria-selected="false">Intel</button>
158
- <button class="workspace-tab" type="button" data-workspace-tab="review" aria-selected="false">Review</button>
159
- <button class="workspace-tab" type="button" data-workspace-tab="tables" aria-selected="false">Data</button>
160
- </nav>
161
- <button id="closeWorkspace" class="workspace-close" type="button" aria-label="Close viewer workspace">x</button>
162
- </div>
163
-
164
123
  <div class="workspace-body">
165
124
  <aside class="control-panel" aria-label="Graph controls">
166
125
  <div class="panel-heading compact">
167
- <h2>Workspace</h2>
126
+ <h2>Find Context</h2>
168
127
  <span id="workspaceMode">Combined</span>
169
128
  </div>
170
129
  <div id="metricsSummary" class="metrics-grid"></div>
171
130
  <label>
172
- <span>Search</span>
173
- <input id="searchInput" type="search" placeholder="Entity, edge, type, tag, path...">
131
+ <span>File, symbol, route, test, or memory</span>
132
+ <input id="searchInput" type="search" placeholder="Search before changing code...">
174
133
  </label>
175
- <div class="path-finder" aria-label="Dependency path finder">
176
- <div class="path-finder-header">
177
- <span>Path Finder</span>
178
- <button id="clearPath" type="button">Clear</button>
179
- </div>
180
- <div class="path-finder-inputs">
181
- <input id="pathFromInput" type="search" list="pathNodeOptions" placeholder="From file, symbol, route...">
182
- <input id="pathToInput" type="search" list="pathNodeOptions" placeholder="To file, symbol, route...">
183
- <button id="findPath" type="button">Find</button>
184
- </div>
185
- <datalist id="pathNodeOptions"></datalist>
186
- <div id="pathStatus" class="path-status">Pick two code nodes to trace a dependency path.</div>
187
- <div id="pathResult" class="path-result"></div>
134
+ <div class="journey-actions" aria-label="Graph journeys">
135
+ <button id="showUntrusted" type="button">Show untrusted edges</button>
136
+ <button id="showUncovered" type="button">Show code without memory</button>
137
+ <button id="showMemoryCode" type="button">Show memory-code links</button>
188
138
  </div>
189
- <label>
190
- <span>View</span>
191
- <select id="viewMode">
192
- <option value="combined">Combined</option>
193
- <option value="memory">Memory</option>
194
- <option value="code">Code</option>
195
- </select>
196
- </label>
197
- <label>
198
- <span>Graph Mode</span>
199
- <select id="renderMode">
200
- <option value="2d" selected>2D Canvas</option>
201
- <option value="3d">3D Space</option>
202
- </select>
203
- </label>
204
- <label>
205
- <span>Node Type</span>
206
- <select id="typeFilter">
207
- <option value="">All types</option>
208
- </select>
209
- </label>
210
- <label>
211
- <span>Relation</span>
212
- <select id="relationFilter">
213
- <option value="">All relations</option>
214
- </select>
215
- </label>
139
+ <details class="advanced-controls">
140
+ <summary>More filters</summary>
141
+ <label>
142
+ <span>View</span>
143
+ <select id="viewMode">
144
+ <option value="combined">Combined</option>
145
+ <option value="memory">Memory</option>
146
+ <option value="code">Code</option>
147
+ </select>
148
+ </label>
149
+ <label>
150
+ <span>Node Type</span>
151
+ <select id="typeFilter">
152
+ <option value="">All types</option>
153
+ </select>
154
+ </label>
155
+ <label>
156
+ <span>Relation</span>
157
+ <select id="relationFilter">
158
+ <option value="">All relations</option>
159
+ </select>
160
+ </label>
161
+ <label>
162
+ <span>Max Nodes</span>
163
+ <select id="maxNodes">
164
+ <option value="60">60</option>
165
+ <option value="90" selected>90</option>
166
+ <option value="140">140</option>
167
+ <option value="220">220</option>
168
+ </select>
169
+ </label>
170
+ <label class="toggle-control">
171
+ <input id="showDependencies" type="checkbox">
172
+ <span>Include external dependencies</span>
173
+ </label>
174
+ <label>
175
+ <span>Render Mode</span>
176
+ <select id="renderMode">
177
+ <option value="2d" selected>2D Canvas</option>
178
+ <option value="3d">3D Space</option>
179
+ </select>
180
+ </label>
181
+ <button id="resetView" type="button">Reset filters</button>
182
+ </details>
216
183
  <input id="scopeFilter" type="hidden" value="signal">
217
- <label>
218
- <span>Max Nodes</span>
219
- <select id="maxNodes">
220
- <option value="60">60</option>
221
- <option value="90" selected>90</option>
222
- <option value="140">140</option>
223
- <option value="220">220</option>
224
- </select>
225
- </label>
226
- <label class="toggle-control">
227
- <input id="showDependencies" type="checkbox">
228
- <span>Show dependency noise</span>
229
- </label>
230
- <button id="resetView" type="button">Reset</button>
231
184
  <div class="legend" aria-label="Legend">
232
185
  <span><i class="dot memory-dot"></i>memory packet</span>
233
186
  <span><i class="dot code-dot"></i>code artifact</span>
@@ -235,19 +188,72 @@
235
188
  </div>
236
189
  </aside>
237
190
 
191
+ <aside class="graph-insights-panel" aria-label="Graph insights">
192
+ <div class="panel-heading compact">
193
+ <h2>Before You Change</h2>
194
+ <span id="graphInsightStatus">signals</span>
195
+ </div>
196
+ <div id="graphInsights" class="graph-insights"></div>
197
+ </aside>
198
+
238
199
  <aside class="details-panel" aria-label="Selection details">
239
200
  <div class="panel-heading compact">
240
201
  <h2>Inspector</h2>
241
202
  <span id="selectionStatus">No selection</span>
242
203
  </div>
243
204
  <div id="selectionDetails" class="details-empty">Select an entity or edge.</div>
205
+ <div class="path-finder inspector-path-finder" aria-label="Dependency path finder">
206
+ <div class="path-finder-header">
207
+ <span>Trace Code Path</span>
208
+ <button id="clearPath" type="button">Clear</button>
209
+ </div>
210
+ <div class="path-finder-inputs">
211
+ <input id="pathFromInput" type="search" list="pathNodeOptions" placeholder="From selected file or symbol...">
212
+ <input id="pathToInput" type="search" list="pathNodeOptions" placeholder="To related test, route, or symbol...">
213
+ <button id="findPath" type="button">Trace</button>
214
+ </div>
215
+ <datalist id="pathNodeOptions"></datalist>
216
+ <div id="pathStatus" class="path-status">Select a code node, then trace to another code node when you need impact proof.</div>
217
+ <div id="pathResult" class="path-result"></div>
218
+ </div>
244
219
  </aside>
245
220
 
221
+ <section class="memory-panel" aria-label="Memory library">
222
+ <div class="panel-heading">
223
+ <h2>Memory</h2>
224
+ <span id="memoryStatus">packets</span>
225
+ </div>
226
+ <div id="memoryStats" class="memory-stats" aria-label="Memory summary"></div>
227
+ <div id="memoryOverview" class="memory-overview" aria-label="Memory coverage chart"></div>
228
+ <div class="memory-toolbar">
229
+ <input id="memorySearch" type="search" placeholder="Search memory, path, command, bug, decision...">
230
+ <select id="memoryFilter" aria-label="Memory filter">
231
+ <option value="all">All memory</option>
232
+ <option value="linked">Linked to code</option>
233
+ <option value="needs-paths">Needs paths</option>
234
+ <option value="decision">Decisions</option>
235
+ <option value="runbook">Runbooks</option>
236
+ <option value="bug_fix">Bug fixes</option>
237
+ </select>
238
+ </div>
239
+ <div id="memoryList" class="memory-list"></div>
240
+ </section>
241
+
242
+ <section class="owners-panel" aria-label="Owners and contributors">
243
+ <div class="panel-heading">
244
+ <h2>Owners</h2>
245
+ <span id="ownersStatus">git signals</span>
246
+ </div>
247
+ <div id="ownersSummary" class="owners-summary"></div>
248
+ <div id="ownersList" class="owners-list"></div>
249
+ </section>
250
+
246
251
  <section class="review-panel" aria-label="Review queue">
247
252
  <div class="panel-heading">
248
253
  <h2>Memory Inbox</h2>
249
254
  <span id="reviewCount">0</span>
250
255
  </div>
256
+ <div id="reviewOverview" class="review-overview"></div>
251
257
  <div id="reviewList" class="review-list"></div>
252
258
  </section>
253
259
 
@@ -256,12 +262,13 @@
256
262
  <h2>Proof</h2>
257
263
  <span id="proofStatus">metrics</span>
258
264
  </div>
265
+ <div id="proofOverview" class="proof-overview"></div>
259
266
  <div id="proofList" class="proof-list"></div>
260
267
  </section>
261
268
 
262
- <section class="intelligence-panel" aria-label="Repo intelligence">
269
+ <section class="intelligence-panel" aria-label="Risks and reports">
263
270
  <div class="panel-heading">
264
- <h2>Repo Intelligence</h2>
271
+ <h2>Risks</h2>
265
272
  <span id="intelligenceStatus">reports</span>
266
273
  </div>
267
274
  <div id="intelligenceList" class="intelligence-list"></div>
@@ -269,23 +276,28 @@
269
276
 
270
277
  <section class="table-panel entities-panel" aria-label="Nodes">
271
278
  <div class="panel-heading">
272
- <h2>Nodes</h2>
279
+ <h2>Artifact Nodes</h2>
273
280
  <span id="entityCount">0</span>
274
281
  </div>
282
+ <div id="debugOverview" class="debug-overview"></div>
283
+ <div class="debug-guide">Use artifacts when the graph or recall output looks wrong. Normal repo work starts from Overview, Graph, Memory, Risks, or Review.</div>
275
284
  <div id="entityList" class="list"></div>
276
285
  </section>
277
286
 
278
287
  <section class="table-panel edges-panel" aria-label="Relations">
279
288
  <div class="panel-heading">
280
- <h2>Relations</h2>
289
+ <h2>Artifact Relations</h2>
281
290
  <span id="edgeCount">0</span>
282
291
  </div>
292
+ <div class="debug-guide">Relations expose generation quality: evidence, confidence, invalidation, and memory-code linking.</div>
283
293
  <div id="edgeList" class="list"></div>
284
294
  </section>
285
295
  </div>
286
296
  </section>
287
- </main>
297
+ </main>
298
+ </section>
299
+ </div>
288
300
 
289
- <script src="./app.js?v=26"></script>
301
+ <script src="./app.js?v=33"></script>
290
302
  </body>
291
303
  </html>