tribunal-kit 5.7.0 → 5.8.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.
Files changed (59) hide show
  1. package/.agent/ARCHITECTURE.md +6 -7
  2. package/.agent/agents/frontend-reviewer.md +13 -0
  3. package/.agent/agents/frontend-specialist.md +14 -0
  4. package/.agent/agents/logic-reviewer.md +11 -0
  5. package/.agent/agents/orchestrator.md +15 -0
  6. package/.agent/agents/project-planner.md +5 -0
  7. package/.agent/agents/security-auditor.md +13 -0
  8. package/.agent/agents/ui-ux-auditor.md +7 -31
  9. package/.agent/history/memory/.memory.idx +1693 -0
  10. package/.agent/history/memory/MEMORY.md +123 -0
  11. package/.agent/routing_index.json +694 -714
  12. package/.agent/rules/GEMINI.md +88 -13
  13. package/.agent/scripts/_colors.js +131 -89
  14. package/.agent/scripts/_utils.js +163 -128
  15. package/.agent/scripts/auto_preview.js +207 -197
  16. package/.agent/scripts/bundle_analyzer.js +227 -192
  17. package/.agent/scripts/case_law_manager.js +991 -689
  18. package/.agent/scripts/checklist.js +233 -190
  19. package/.agent/scripts/context_broker.js +930 -605
  20. package/.agent/scripts/dependency_analyzer.js +275 -184
  21. package/.agent/scripts/graph_builder.js +412 -341
  22. package/.agent/scripts/graph_visualizer.js +392 -390
  23. package/.agent/scripts/graph_zoom.js +198 -156
  24. package/.agent/scripts/inner_loop_validator.js +523 -445
  25. package/.agent/scripts/lint_runner.js +199 -157
  26. package/.agent/scripts/marathon_harness.js +819 -661
  27. package/.agent/scripts/minify_context.js +115 -100
  28. package/.agent/scripts/mutation_runner.js +321 -280
  29. package/.agent/scripts/prompt_compiler.js +62 -42
  30. package/.agent/scripts/schema_validator.js +373 -280
  31. package/.agent/scripts/security_scan.js +333 -190
  32. package/.agent/scripts/session_manager.js +306 -270
  33. package/.agent/scripts/skill_evolution.js +810 -637
  34. package/.agent/scripts/skill_integrator.js +327 -307
  35. package/.agent/scripts/strengthen_skills.js +203 -193
  36. package/.agent/scripts/swarm_dispatcher.js +558 -457
  37. package/.agent/scripts/test_runner.js +178 -152
  38. package/.agent/scripts/verify_all.js +200 -168
  39. package/.agent/skills/fabel-protocol/SKILL.md +271 -0
  40. package/.agent/skills/thinking-protocol/SKILL.md +27 -0
  41. package/.agent/workflows/generate.md +2 -1
  42. package/.agent/workflows/tribunal-full.md +4 -3
  43. package/.agent/workflows/tribunal-speed.md +1 -1
  44. package/README.md +184 -58
  45. package/bin/mcp-server.js +496 -173
  46. package/bin/tribunal-kit.js +1245 -987
  47. package/bin/wrapper.js +108 -74
  48. package/dist/cli.js +44 -0
  49. package/dist/commands/align.js +201 -0
  50. package/dist/commands/case.js +23 -0
  51. package/dist/commands/compile.js +84 -0
  52. package/dist/commands/init.js +42 -0
  53. package/dist/commands/learn.js +57 -0
  54. package/dist/commands/memory.js +456 -0
  55. package/package.json +22 -10
  56. package/scripts/benchmark.js +162 -125
  57. package/scripts/changelog.js +196 -168
  58. package/scripts/sync-version.js +94 -81
  59. package/scripts/validate-payload.js +85 -78
package/.agent/scripts/graph_visualizer.js CHANGED
@@ -1,390 +1,392 @@
1
- #!/usr/bin/env node
2
- /**
3
- * graph_visualizer.js — Tribunal Kit Architecture Visualizer
4
- * Reads the graph cache and generates a standalone HTML visualizer.
5
- * Uses a native zero-dependency Canvas force-directed graph.
6
- */
7
-
8
- 'use strict';
9
-
10
- const fs = require('fs');
11
- const path = require('path');
12
-
13
- const { RED, GREEN, DIM, RESET } = require('./_colors');
14
-
15
- const AGENT_DIR = path.join(process.cwd(), '.agent');
16
- const HISTORY_DIR = path.join(AGENT_DIR, 'history');
17
- const CACHE_FILE = path.join(HISTORY_DIR, 'graph-cache.json');
18
- const HTML_FILE = path.join(HISTORY_DIR, 'architecture-explorer.html');
19
-
20
- function main() {
21
- if (!fs.existsSync(CACHE_FILE)) {
22
- console.error(`${RED}✖ Error: graph-cache.json not found. Run graph_builder.js first.${RESET}`);
23
- process.exit(1);
24
- }
25
-
26
- const cacheData = fs.readFileSync(CACHE_FILE, 'utf8');
27
-
28
- const htmlContent = `<!DOCTYPE html>
29
- <html lang="en">
30
- <head>
31
- <meta charset="UTF-8">
32
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
33
- <title>Tribunal Architecture Explorer</title>
34
- <style>
35
- :root {
36
- --bg: #09090b;
37
- --panel-bg: rgba(24, 24, 27, 0.8);
38
- --border: #27272a;
39
- --text: #e4e4e7;
40
- --text-dim: #a1a1aa;
41
- --critical: #ef4444;
42
- --high: #f97316;
43
- --medium: #eab308;
44
- --low: #3b82f6;
45
- --edge: rgba(255, 255, 255, 0.1);
46
- }
47
- body {
48
- margin: 0;
49
- padding: 0;
50
- background: var(--bg);
51
- color: var(--text);
52
- font-family: system-ui, -apple-system, sans-serif;
53
- overflow: hidden;
54
- }
55
- canvas {
56
- display: block;
57
- width: 100vw;
58
- height: 100vh;
59
- }
60
- #ui-panel {
61
- position: absolute;
62
- top: 20px;
63
- left: 20px;
64
- width: 320px;
65
- background: var(--panel-bg);
66
- backdrop-filter: blur(12px);
67
- border: 1px solid var(--border);
68
- border-radius: 12px;
69
- padding: 20px;
70
- box-shadow: 0 10px 30px rgba(0,0,0,0.5);
71
- pointer-events: none; /* Let clicks pass to canvas if not on panel */
72
- }
73
- h1 { margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 600; }
74
- .stat { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.9rem; }
75
- .stat .val { font-family: monospace; color: white; }
76
- .legend { margin-top: 20px; display: grid; gap: 8px; font-size: 0.85rem; }
77
- .legend-item { display: flex; align-items: center; gap: 8px; }
78
- .dot { width: 10px; height: 10px; border-radius: 50%; }
79
-
80
- #node-details {
81
- margin-top: 20px;
82
- padding-top: 20px;
83
- border-top: 1px solid var(--border);
84
- display: none;
85
- pointer-events: auto;
86
- }
87
- #node-details h2 { margin: 0 0 10px 0; font-size: 1rem; word-break: break-all; }
88
- .detail-row { font-size: 0.85rem; margin-bottom: 4px; color: var(--text-dim); }
89
- .badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; color: black; }
90
- ul { margin: 8px 0; padding-left: 20px; font-size: 0.85rem; color: var(--text-dim); max-height: 150px; overflow-y: auto; }
91
- </style>
92
- </head>
93
- <body>
94
-
95
- <canvas id="graph"></canvas>
96
-
97
- <div id="ui-panel">
98
- <h1>Tribunal Architecture</h1>
99
- <div class="stat"><span>Nodes</span><span class="val" id="stat-nodes">0</span></div>
100
- <div class="stat"><span>Edges</span><span class="val" id="stat-edges">0</span></div>
101
-
102
- <div class="legend">
103
- <div class="legend-item"><div class="dot" style="background: var(--critical)"></div> Critical (>10 dependents)</div>
104
- <div class="legend-item"><div class="dot" style="background: var(--high)"></div> High (5-10 dependents)</div>
105
- <div class="legend-item"><div class="dot" style="background: var(--medium)"></div> Medium (2-4 dependents)</div>
106
- <div class="legend-item"><div class="dot" style="background: var(--low)"></div> Low (0-1 dependents)</div>
107
- </div>
108
-
109
- <div id="node-details">
110
- <h2 id="nd-title">file.js</h2>
111
- <div class="detail-row">Risk Score: <span id="nd-risk" class="badge">Low</span></div>
112
- <div class="detail-row">Blast Radius: <span id="nd-blast" style="color:white;font-weight:bold">0</span> files</div>
113
- <div class="detail-row" style="margin-top:10px">Imports:</div>
114
- <ul id="nd-imports"></ul>
115
- <div class="detail-row">Dependents:</div>
116
- <ul id="nd-dependents"></ul>
117
- </div>
118
- </div>
119
-
120
- <script>
121
- const rawData = JSON.parse(decodeURIComponent("${encodeURIComponent(cacheData)}"));
122
-
123
- const nodes = [];
124
- const edges = [];
125
- const nodeMap = new Map();
126
-
127
- // Build Nodes
128
- Object.keys(rawData).forEach(file => {
129
- const info = rawData[file];
130
- const node = {
131
- id: file,
132
- imports: info.imports || [],
133
- dependents: info.dependents || [],
134
- riskScore: info.riskScore || 'Low',
135
- blastRadius: info.blastRadius || 0,
136
- x: Math.random() * window.innerWidth,
137
- y: Math.random() * window.innerHeight,
138
- vx: 0,
139
- vy: 0,
140
- radius: Math.min(20, Math.max(5, 5 + (info.blastRadius * 1.5)))
141
- };
142
-
143
- if (node.riskScore === 'Critical') node.color = '#ef4444';
144
- else if (node.riskScore === 'High') node.color = '#f97316';
145
- else if (node.riskScore === 'Medium') node.color = '#eab308';
146
- else node.color = '#3b82f6';
147
-
148
- nodes.push(node);
149
- nodeMap.set(file, node);
150
- });
151
-
152
- // Build Edges
153
- nodes.forEach(node => {
154
- node.imports.forEach(imp => {
155
- if (imp.startsWith('.')) {
156
- // Try to resolve
157
- const dir = node.id.split('/').slice(0, -1).join('/');
158
- let resolved = dir ? dir + '/' + imp.replace('./', '') : imp.replace('./', '');
159
-
160
- // Normalize standard paths relative to array
161
- let target = nodes.find(n => n.id === resolved || n.id === resolved + '.js' || n.id === resolved + '.ts');
162
- if (target) {
163
- edges.push({ source: node, target: target });
164
- }
165
- }
166
- });
167
- });
168
-
169
- document.getElementById('stat-nodes').innerText = nodes.length;
170
- document.getElementById('stat-edges').innerText = edges.length;
171
-
172
- // Force Directed Graph Simulation
173
- const canvas = document.getElementById('graph');
174
- const ctx = canvas.getContext('2d');
175
-
176
- function resize() {
177
- canvas.width = window.innerWidth;
178
- canvas.height = window.innerHeight;
179
- }
180
- window.addEventListener('resize', resize);
181
- resize();
182
-
183
- let hoveredNode = null;
184
- let selectedNode = null;
185
- let isDragging = false;
186
-
187
- // Physics constants
188
- const REPULSION = 2000;
189
- const SPRING_LENGTH = 100;
190
- const SPRING_STRENGTH = 0.05;
191
- const DAMPING = 0.85;
192
-
193
- function simulate() {
194
- // Repulsion
195
- for (let i = 0; i < nodes.length; i++) {
196
- for (let j = i + 1; j < nodes.length; j++) {
197
- const n1 = nodes[i];
198
- const n2 = nodes[j];
199
- const dx = n2.x - n1.x;
200
- const dy = n2.y - n1.y;
201
- let dist = Math.sqrt(dx*dx + dy*dy) || 1;
202
- if (dist < 300) {
203
- const force = REPULSION / (dist * dist);
204
- const fx = (dx / dist) * force;
205
- const fy = (dy / dist) * force;
206
- n1.vx -= fx;
207
- n1.vy -= fy;
208
- n2.vx += fx;
209
- n2.vy += fy;
210
- }
211
- }
212
- }
213
-
214
- // Attraction (Springs)
215
- edges.forEach(edge => {
216
- const dx = edge.target.x - edge.source.x;
217
- const dy = edge.target.y - edge.source.y;
218
- const dist = Math.sqrt(dx*dx + dy*dy) || 1;
219
- const force = (dist - SPRING_LENGTH) * SPRING_STRENGTH;
220
- const fx = (dx / dist) * force;
221
- const fy = (dy / dist) * force;
222
-
223
- edge.source.vx += fx;
224
- edge.source.vy += fy;
225
- edge.target.vx -= fx;
226
- edge.target.vy -= fy;
227
- });
228
-
229
- // Center gravity
230
- const cx = canvas.width / 2;
231
- const cy = canvas.height / 2;
232
- nodes.forEach(n => {
233
- n.vx += (cx - n.x) * 0.01;
234
- n.vy += (cy - n.y) * 0.01;
235
- });
236
-
237
- // Update positions
238
- nodes.forEach(n => {
239
- if (n === selectedNode && isDragging) return; // don't move dragged node
240
- n.vx *= DAMPING;
241
- n.vy *= DAMPING;
242
- n.x += n.vx;
243
- n.y += n.vy;
244
- });
245
- }
246
-
247
- function draw() {
248
- ctx.clearRect(0, 0, canvas.width, canvas.height);
249
-
250
- // Draw edges
251
- ctx.lineWidth = 1;
252
- edges.forEach(edge => {
253
- let isHighlighted = false;
254
- if (hoveredNode) {
255
- isHighlighted = (edge.source === hoveredNode || edge.target === hoveredNode);
256
- } else if (selectedNode) {
257
- isHighlighted = (edge.source === selectedNode || edge.target === selectedNode);
258
- }
259
-
260
- if (hoveredNode || selectedNode) {
261
- ctx.strokeStyle = isHighlighted ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,255,0.05)';
262
- ctx.lineWidth = isHighlighted ? 2 : 1;
263
- } else {
264
- ctx.strokeStyle = 'rgba(255,255,255,0.15)';
265
- ctx.lineWidth = 1;
266
- }
267
-
268
- ctx.beginPath();
269
- ctx.moveTo(edge.source.x, edge.source.y);
270
- ctx.lineTo(edge.target.x, edge.target.y);
271
- ctx.stroke();
272
- });
273
-
274
- // Draw nodes
275
- nodes.forEach(n => {
276
- let opacity = 1;
277
- if (hoveredNode && n !== hoveredNode && !edges.some(e => (e.source===hoveredNode && e.target===n) || (e.target===hoveredNode && e.source===n))) {
278
- opacity = 0.2;
279
- } else if (selectedNode && !hoveredNode && n !== selectedNode && !edges.some(e => (e.source===selectedNode && e.target===n) || (e.target===selectedNode && e.source===n))) {
280
- opacity = 0.2;
281
- }
282
-
283
- ctx.beginPath();
284
- ctx.arc(n.x, n.y, n.radius, 0, Math.PI * 2);
285
- ctx.fillStyle = n.color;
286
- ctx.globalAlpha = opacity;
287
- ctx.fill();
288
-
289
- if (n === hoveredNode || n === selectedNode) {
290
- ctx.strokeStyle = '#fff';
291
- ctx.lineWidth = 2;
292
- ctx.stroke();
293
-
294
- ctx.globalAlpha = 1;
295
- ctx.fillStyle = '#fff';
296
- ctx.font = '12px system-ui';
297
- ctx.fillText(n.id.split('/').pop(), n.x + n.radius + 5, n.y + 4);
298
- }
299
- ctx.globalAlpha = 1;
300
- });
301
- }
302
-
303
- function loop() {
304
- simulate();
305
- draw();
306
- requestAnimationFrame(loop);
307
- }
308
- loop();
309
-
310
- // Interaction
311
- canvas.addEventListener('mousemove', e => {
312
- const rect = canvas.getBoundingClientRect();
313
- const mx = e.clientX - rect.left;
314
- const my = e.clientY - rect.top;
315
-
316
- if (isDragging && selectedNode) {
317
- selectedNode.x = mx;
318
- selectedNode.y = my;
319
- return;
320
- }
321
-
322
- hoveredNode = null;
323
- for (let i = nodes.length - 1; i >= 0; i--) {
324
- const n = nodes[i];
325
- const dx = mx - n.x;
326
- const dy = my - n.y;
327
- if (dx*dx + dy*dy < (n.radius + 5)**2) {
328
- hoveredNode = n;
329
- break;
330
- }
331
- }
332
- canvas.style.cursor = hoveredNode ? 'pointer' : 'default';
333
- });
334
-
335
- canvas.addEventListener('mousedown', e => {
336
- if (hoveredNode) {
337
- selectedNode = hoveredNode;
338
- isDragging = true;
339
- showDetails(selectedNode);
340
- } else {
341
- selectedNode = null;
342
- document.getElementById('node-details').style.display = 'none';
343
- }
344
- });
345
-
346
- canvas.addEventListener('mouseup', () => { isDragging = false; });
347
-
348
- function showDetails(n) {
349
- const panel = document.getElementById('node-details');
350
- panel.style.display = 'block';
351
- document.getElementById('nd-title').innerText = n.id;
352
-
353
- const riskEl = document.getElementById('nd-risk');
354
- riskEl.innerText = n.riskScore;
355
- riskEl.style.backgroundColor = n.color;
356
-
357
- document.getElementById('nd-blast').innerText = n.blastRadius;
358
-
359
- const importsUl = document.getElementById('nd-imports');
360
- importsUl.innerHTML = '';
361
- n.imports.forEach(i => {
362
- const li = document.createElement('li');
363
- li.innerText = i;
364
- importsUl.appendChild(li);
365
- });
366
- if(n.imports.length===0) importsUl.innerHTML = '<li>None</li>';
367
-
368
- const depsUl = document.getElementById('nd-dependents');
369
- depsUl.innerHTML = '';
370
- n.dependents.forEach(d => {
371
- const li = document.createElement('li');
372
- li.innerText = d;
373
- depsUl.appendChild(li);
374
- });
375
- if(n.dependents.length===0) depsUl.innerHTML = '<li>None</li>';
376
- }
377
- </script>
378
- </body>
379
- </html>`;
380
-
381
- fs.writeFileSync(HTML_FILE, htmlContent);
382
- console.log(`${GREEN}✔ Interactive visualizer generated.${RESET}`);
383
- console.log(` ${DIM}Saved to: ${HTML_FILE}${RESET}`);
384
- }
385
-
386
- module.exports = { main };
387
-
388
- if (require.main === module) {
389
- main();
390
- }
1
+ #!/usr/bin/env node
2
+ /**
3
+ * graph_visualizer.js — Tribunal Kit Architecture Visualizer
4
+ * Reads the graph cache and generates a standalone HTML visualizer.
5
+ * Uses a native zero-dependency Canvas force-directed graph.
6
+ */
7
+
8
+ "use strict";
9
+
10
+ const fs = require("fs");
11
+ const path = require("path");
12
+
13
+ const { RED, GREEN, DIM, RESET } = require("./_colors");
14
+
15
+ const AGENT_DIR = path.join(process.cwd(), ".agent");
16
+ const HISTORY_DIR = path.join(AGENT_DIR, "history");
17
+ const CACHE_FILE = path.join(HISTORY_DIR, "graph-cache.json");
18
+ const HTML_FILE = path.join(HISTORY_DIR, "architecture-explorer.html");
19
+
20
+ function main() {
21
+ if (!fs.existsSync(CACHE_FILE)) {
22
+ console.error(
23
+ `${RED}✖ Error: graph-cache.json not found. Run graph_builder.js first.${RESET}`,
24
+ );
25
+ process.exit(1);
26
+ }
27
+
28
+ const cacheData = fs.readFileSync(CACHE_FILE, "utf8");
29
+
30
+ const htmlContent = `<!DOCTYPE html>
31
+ <html lang="en">
32
+ <head>
33
+ <meta charset="UTF-8">
34
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
35
+ <title>Tribunal Architecture Explorer</title>
36
+ <style>
37
+ :root {
38
+ --bg: #09090b;
39
+ --panel-bg: rgba(24, 24, 27, 0.8);
40
+ --border: #27272a;
41
+ --text: #e4e4e7;
42
+ --text-dim: #a1a1aa;
43
+ --critical: #ef4444;
44
+ --high: #f97316;
45
+ --medium: #eab308;
46
+ --low: #3b82f6;
47
+ --edge: rgba(255, 255, 255, 0.1);
48
+ }
49
+ body {
50
+ margin: 0;
51
+ padding: 0;
52
+ background: var(--bg);
53
+ color: var(--text);
54
+ font-family: system-ui, -apple-system, sans-serif;
55
+ overflow: hidden;
56
+ }
57
+ canvas {
58
+ display: block;
59
+ width: 100vw;
60
+ height: 100vh;
61
+ }
62
+ #ui-panel {
63
+ position: absolute;
64
+ top: 20px;
65
+ left: 20px;
66
+ width: 320px;
67
+ background: var(--panel-bg);
68
+ backdrop-filter: blur(12px);
69
+ border: 1px solid var(--border);
70
+ border-radius: 12px;
71
+ padding: 20px;
72
+ box-shadow: 0 10px 30px rgba(0,0,0,0.5);
73
+ pointer-events: none; /* Let clicks pass to canvas if not on panel */
74
+ }
75
+ h1 { margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 600; }
76
+ .stat { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.9rem; }
77
+ .stat .val { font-family: monospace; color: white; }
78
+ .legend { margin-top: 20px; display: grid; gap: 8px; font-size: 0.85rem; }
79
+ .legend-item { display: flex; align-items: center; gap: 8px; }
80
+ .dot { width: 10px; height: 10px; border-radius: 50%; }
81
+
82
+ #node-details {
83
+ margin-top: 20px;
84
+ padding-top: 20px;
85
+ border-top: 1px solid var(--border);
86
+ display: none;
87
+ pointer-events: auto;
88
+ }
89
+ #node-details h2 { margin: 0 0 10px 0; font-size: 1rem; word-break: break-all; }
90
+ .detail-row { font-size: 0.85rem; margin-bottom: 4px; color: var(--text-dim); }
91
+ .badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; color: black; }
92
+ ul { margin: 8px 0; padding-left: 20px; font-size: 0.85rem; color: var(--text-dim); max-height: 150px; overflow-y: auto; }
93
+ </style>
94
+ </head>
95
+ <body>
96
+
97
+ <canvas id="graph"></canvas>
98
+
99
+ <div id="ui-panel">
100
+ <h1>Tribunal Architecture</h1>
101
+ <div class="stat"><span>Nodes</span><span class="val" id="stat-nodes">0</span></div>
102
+ <div class="stat"><span>Edges</span><span class="val" id="stat-edges">0</span></div>
103
+
104
+ <div class="legend">
105
+ <div class="legend-item"><div class="dot" style="background: var(--critical)"></div> Critical (>10 dependents)</div>
106
+ <div class="legend-item"><div class="dot" style="background: var(--high)"></div> High (5-10 dependents)</div>
107
+ <div class="legend-item"><div class="dot" style="background: var(--medium)"></div> Medium (2-4 dependents)</div>
108
+ <div class="legend-item"><div class="dot" style="background: var(--low)"></div> Low (0-1 dependents)</div>
109
+ </div>
110
+
111
+ <div id="node-details">
112
+ <h2 id="nd-title">file.js</h2>
113
+ <div class="detail-row">Risk Score: <span id="nd-risk" class="badge">Low</span></div>
114
+ <div class="detail-row">Blast Radius: <span id="nd-blast" style="color:white;font-weight:bold">0</span> files</div>
115
+ <div class="detail-row" style="margin-top:10px">Imports:</div>
116
+ <ul id="nd-imports"></ul>
117
+ <div class="detail-row">Dependents:</div>
118
+ <ul id="nd-dependents"></ul>
119
+ </div>
120
+ </div>
121
+
122
+ <script>
123
+ const rawData = JSON.parse(decodeURIComponent("${encodeURIComponent(cacheData)}"));
124
+
125
+ const nodes = [];
126
+ const edges = [];
127
+ const nodeMap = new Map();
128
+
129
+ // Build Nodes
130
+ Object.keys(rawData).forEach(file => {
131
+ const info = rawData[file];
132
+ const node = {
133
+ id: file,
134
+ imports: info.imports || [],
135
+ dependents: info.dependents || [],
136
+ riskScore: info.riskScore || 'Low',
137
+ blastRadius: info.blastRadius || 0,
138
+ x: Math.random() * window.innerWidth,
139
+ y: Math.random() * window.innerHeight,
140
+ vx: 0,
141
+ vy: 0,
142
+ radius: Math.min(20, Math.max(5, 5 + (info.blastRadius * 1.5)))
143
+ };
144
+
145
+ if (node.riskScore === 'Critical') node.color = '#ef4444';
146
+ else if (node.riskScore === 'High') node.color = '#f97316';
147
+ else if (node.riskScore === 'Medium') node.color = '#eab308';
148
+ else node.color = '#3b82f6';
149
+
150
+ nodes.push(node);
151
+ nodeMap.set(file, node);
152
+ });
153
+
154
+ // Build Edges
155
+ nodes.forEach(node => {
156
+ node.imports.forEach(imp => {
157
+ if (imp.startsWith('.')) {
158
+ // Try to resolve
159
+ const dir = node.id.split('/').slice(0, -1).join('/');
160
+ let resolved = dir ? dir + '/' + imp.replace('./', '') : imp.replace('./', '');
161
+
162
+ // Normalize standard paths relative to array
163
+ let target = nodes.find(n => n.id === resolved || n.id === resolved + '.js' || n.id === resolved + '.ts');
164
+ if (target) {
165
+ edges.push({ source: node, target: target });
166
+ }
167
+ }
168
+ });
169
+ });
170
+
171
+ document.getElementById('stat-nodes').innerText = nodes.length;
172
+ document.getElementById('stat-edges').innerText = edges.length;
173
+
174
+ // Force Directed Graph Simulation
175
+ const canvas = document.getElementById('graph');
176
+ const ctx = canvas.getContext('2d');
177
+
178
+ function resize() {
179
+ canvas.width = window.innerWidth;
180
+ canvas.height = window.innerHeight;
181
+ }
182
+ window.addEventListener('resize', resize);
183
+ resize();
184
+
185
+ let hoveredNode = null;
186
+ let selectedNode = null;
187
+ let isDragging = false;
188
+
189
+ // Physics constants
190
+ const REPULSION = 2000;
191
+ const SPRING_LENGTH = 100;
192
+ const SPRING_STRENGTH = 0.05;
193
+ const DAMPING = 0.85;
194
+
195
+ function simulate() {
196
+ // Repulsion
197
+ for (let i = 0; i < nodes.length; i++) {
198
+ for (let j = i + 1; j < nodes.length; j++) {
199
+ const n1 = nodes[i];
200
+ const n2 = nodes[j];
201
+ const dx = n2.x - n1.x;
202
+ const dy = n2.y - n1.y;
203
+ let dist = Math.sqrt(dx*dx + dy*dy) || 1;
204
+ if (dist < 300) {
205
+ const force = REPULSION / (dist * dist);
206
+ const fx = (dx / dist) * force;
207
+ const fy = (dy / dist) * force;
208
+ n1.vx -= fx;
209
+ n1.vy -= fy;
210
+ n2.vx += fx;
211
+ n2.vy += fy;
212
+ }
213
+ }
214
+ }
215
+
216
+ // Attraction (Springs)
217
+ edges.forEach(edge => {
218
+ const dx = edge.target.x - edge.source.x;
219
+ const dy = edge.target.y - edge.source.y;
220
+ const dist = Math.sqrt(dx*dx + dy*dy) || 1;
221
+ const force = (dist - SPRING_LENGTH) * SPRING_STRENGTH;
222
+ const fx = (dx / dist) * force;
223
+ const fy = (dy / dist) * force;
224
+
225
+ edge.source.vx += fx;
226
+ edge.source.vy += fy;
227
+ edge.target.vx -= fx;
228
+ edge.target.vy -= fy;
229
+ });
230
+
231
+ // Center gravity
232
+ const cx = canvas.width / 2;
233
+ const cy = canvas.height / 2;
234
+ nodes.forEach(n => {
235
+ n.vx += (cx - n.x) * 0.01;
236
+ n.vy += (cy - n.y) * 0.01;
237
+ });
238
+
239
+ // Update positions
240
+ nodes.forEach(n => {
241
+ if (n === selectedNode && isDragging) return; // don't move dragged node
242
+ n.vx *= DAMPING;
243
+ n.vy *= DAMPING;
244
+ n.x += n.vx;
245
+ n.y += n.vy;
246
+ });
247
+ }
248
+
249
+ function draw() {
250
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
251
+
252
+ // Draw edges
253
+ ctx.lineWidth = 1;
254
+ edges.forEach(edge => {
255
+ let isHighlighted = false;
256
+ if (hoveredNode) {
257
+ isHighlighted = (edge.source === hoveredNode || edge.target === hoveredNode);
258
+ } else if (selectedNode) {
259
+ isHighlighted = (edge.source === selectedNode || edge.target === selectedNode);
260
+ }
261
+
262
+ if (hoveredNode || selectedNode) {
263
+ ctx.strokeStyle = isHighlighted ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,255,0.05)';
264
+ ctx.lineWidth = isHighlighted ? 2 : 1;
265
+ } else {
266
+ ctx.strokeStyle = 'rgba(255,255,255,0.15)';
267
+ ctx.lineWidth = 1;
268
+ }
269
+
270
+ ctx.beginPath();
271
+ ctx.moveTo(edge.source.x, edge.source.y);
272
+ ctx.lineTo(edge.target.x, edge.target.y);
273
+ ctx.stroke();
274
+ });
275
+
276
+ // Draw nodes
277
+ nodes.forEach(n => {
278
+ let opacity = 1;
279
+ if (hoveredNode && n !== hoveredNode && !edges.some(e => (e.source===hoveredNode && e.target===n) || (e.target===hoveredNode && e.source===n))) {
280
+ opacity = 0.2;
281
+ } else if (selectedNode && !hoveredNode && n !== selectedNode && !edges.some(e => (e.source===selectedNode && e.target===n) || (e.target===selectedNode && e.source===n))) {
282
+ opacity = 0.2;
283
+ }
284
+
285
+ ctx.beginPath();
286
+ ctx.arc(n.x, n.y, n.radius, 0, Math.PI * 2);
287
+ ctx.fillStyle = n.color;
288
+ ctx.globalAlpha = opacity;
289
+ ctx.fill();
290
+
291
+ if (n === hoveredNode || n === selectedNode) {
292
+ ctx.strokeStyle = '#fff';
293
+ ctx.lineWidth = 2;
294
+ ctx.stroke();
295
+
296
+ ctx.globalAlpha = 1;
297
+ ctx.fillStyle = '#fff';
298
+ ctx.font = '12px system-ui';
299
+ ctx.fillText(n.id.split('/').pop(), n.x + n.radius + 5, n.y + 4);
300
+ }
301
+ ctx.globalAlpha = 1;
302
+ });
303
+ }
304
+
305
+ function loop() {
306
+ simulate();
307
+ draw();
308
+ requestAnimationFrame(loop);
309
+ }
310
+ loop();
311
+
312
+ // Interaction
313
+ canvas.addEventListener('mousemove', e => {
314
+ const rect = canvas.getBoundingClientRect();
315
+ const mx = e.clientX - rect.left;
316
+ const my = e.clientY - rect.top;
317
+
318
+ if (isDragging && selectedNode) {
319
+ selectedNode.x = mx;
320
+ selectedNode.y = my;
321
+ return;
322
+ }
323
+
324
+ hoveredNode = null;
325
+ for (let i = nodes.length - 1; i >= 0; i--) {
326
+ const n = nodes[i];
327
+ const dx = mx - n.x;
328
+ const dy = my - n.y;
329
+ if (dx*dx + dy*dy < (n.radius + 5)**2) {
330
+ hoveredNode = n;
331
+ break;
332
+ }
333
+ }
334
+ canvas.style.cursor = hoveredNode ? 'pointer' : 'default';
335
+ });
336
+
337
+ canvas.addEventListener('mousedown', e => {
338
+ if (hoveredNode) {
339
+ selectedNode = hoveredNode;
340
+ isDragging = true;
341
+ showDetails(selectedNode);
342
+ } else {
343
+ selectedNode = null;
344
+ document.getElementById('node-details').style.display = 'none';
345
+ }
346
+ });
347
+
348
+ canvas.addEventListener('mouseup', () => { isDragging = false; });
349
+
350
+ function showDetails(n) {
351
+ const panel = document.getElementById('node-details');
352
+ panel.style.display = 'block';
353
+ document.getElementById('nd-title').innerText = n.id;
354
+
355
+ const riskEl = document.getElementById('nd-risk');
356
+ riskEl.innerText = n.riskScore;
357
+ riskEl.style.backgroundColor = n.color;
358
+
359
+ document.getElementById('nd-blast').innerText = n.blastRadius;
360
+
361
+ const importsUl = document.getElementById('nd-imports');
362
+ importsUl.innerHTML = '';
363
+ n.imports.forEach(i => {
364
+ const li = document.createElement('li');
365
+ li.innerText = i;
366
+ importsUl.appendChild(li);
367
+ });
368
+ if(n.imports.length===0) importsUl.innerHTML = '<li>None</li>';
369
+
370
+ const depsUl = document.getElementById('nd-dependents');
371
+ depsUl.innerHTML = '';
372
+ n.dependents.forEach(d => {
373
+ const li = document.createElement('li');
374
+ li.innerText = d;
375
+ depsUl.appendChild(li);
376
+ });
377
+ if(n.dependents.length===0) depsUl.innerHTML = '<li>None</li>';
378
+ }
379
+ </script>
380
+ </body>
381
+ </html>`;
382
+
383
+ fs.writeFileSync(HTML_FILE, htmlContent);
384
+ console.log(`${GREEN}✔ Interactive visualizer generated.${RESET}`);
385
+ console.log(` ${DIM}Saved to: ${HTML_FILE}${RESET}`);
386
+ }
387
+
388
+ module.exports = { main };
389
+
390
+ if (require.main === module) {
391
+ main();
392
+ }