tribunal-kit 4.3.0 → 4.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/.agent/history/architecture-explorer.html +352 -0
- package/.agent/history/architecture-graph.yaml +109 -0
- package/.agent/history/graph-cache.json +215 -0
- package/.agent/history/snapshots/migrate_refs.js.json +11 -0
- package/.agent/history/snapshots/scripts__changelog.js.json +12 -0
- package/.agent/history/snapshots/scripts__sync-version.js.json +11 -0
- package/.agent/history/snapshots/scripts__validate-payload.js.json +11 -0
- package/.agent/history/snapshots/test__integration__bridges.test.js.json +13 -0
- package/.agent/history/snapshots/test__integration__init.test.js.json +13 -0
- package/.agent/history/snapshots/test__integration__routing.test.js.json +11 -0
- package/.agent/history/snapshots/test__integration__swarm_dispatcher.test.js.json +13 -0
- package/.agent/history/snapshots/test__integration__wave2.test.js.json +13 -0
- package/.agent/history/snapshots/test__unit__args.test.js.json +10 -0
- package/.agent/history/snapshots/test__unit__case_law_manager.test.js.json +10 -0
- package/.agent/history/snapshots/test__unit__copyDir.test.js.json +13 -0
- package/.agent/history/snapshots/test__unit__graph_tools.test.js.json +11 -0
- package/.agent/history/snapshots/test__unit__selfInstall.test.js.json +13 -0
- package/.agent/history/snapshots/test__unit__semver.test.js.json +10 -0
- package/.agent/history/snapshots/test__unit__swarm_dispatcher.test.js.json +11 -0
- package/.agent/scripts/case_law_manager.js +684 -684
- package/.agent/scripts/dependency_analyzer.js +1 -1
- package/.agent/scripts/graph_builder.js +311 -0
- package/.agent/scripts/graph_visualizer.js +384 -0
- package/.agent/scripts/graph_zoom.js +154 -0
- package/.agent/scripts/mutation_runner.js +280 -0
- package/.agent/skills/agent-organizer/SKILL.md +9 -1
- package/.agent/skills/agentic-patterns/SKILL.md +9 -1
- package/.agent/skills/ai-prompt-injection-defense/SKILL.md +9 -1
- package/.agent/skills/api-patterns/SKILL.md +206 -198
- package/.agent/skills/api-security-auditor/SKILL.md +9 -1
- package/.agent/skills/app-builder/SKILL.md +9 -1
- package/.agent/skills/app-builder/templates/SKILL.md +77 -69
- package/.agent/skills/appflow-wireframe/SKILL.md +9 -1
- package/.agent/skills/architecture/SKILL.md +9 -1
- package/.agent/skills/authentication-best-practices/SKILL.md +9 -1
- package/.agent/skills/bash-linux/SKILL.md +9 -1
- package/.agent/skills/behavioral-modes/SKILL.md +9 -1
- package/.agent/skills/brainstorming/SKILL.md +9 -1
- package/.agent/skills/building-native-ui/SKILL.md +9 -1
- package/.agent/skills/clean-code/SKILL.md +9 -1
- package/.agent/skills/code-review-checklist/SKILL.md +9 -1
- package/.agent/skills/config-validator/SKILL.md +9 -1
- package/.agent/skills/csharp-developer/SKILL.md +9 -1
- package/.agent/skills/data-validation-schemas/SKILL.md +287 -279
- package/.agent/skills/database-design/SKILL.md +199 -191
- package/.agent/skills/deployment-procedures/SKILL.md +9 -1
- package/.agent/skills/devops-engineer/SKILL.md +9 -1
- package/.agent/skills/devops-incident-responder/SKILL.md +9 -1
- package/.agent/skills/documentation-templates/SKILL.md +9 -1
- package/.agent/skills/edge-computing/SKILL.md +9 -1
- package/.agent/skills/error-resilience/SKILL.md +387 -379
- package/.agent/skills/extract-design-system/SKILL.md +9 -1
- package/.agent/skills/framer-motion-expert/SKILL.md +203 -195
- package/.agent/skills/frontend-design/SKILL.md +160 -152
- package/.agent/skills/game-design-expert/SKILL.md +9 -1
- package/.agent/skills/game-engineering-expert/SKILL.md +9 -1
- package/.agent/skills/geo-fundamentals/SKILL.md +9 -1
- package/.agent/skills/github-operations/SKILL.md +9 -1
- package/.agent/skills/gsap-core/SKILL.md +54 -46
- package/.agent/skills/gsap-frameworks/SKILL.md +54 -46
- package/.agent/skills/gsap-performance/SKILL.md +54 -46
- package/.agent/skills/gsap-plugins/SKILL.md +54 -46
- package/.agent/skills/gsap-react/SKILL.md +54 -46
- package/.agent/skills/gsap-scrolltrigger/SKILL.md +54 -46
- package/.agent/skills/gsap-timeline/SKILL.md +54 -46
- package/.agent/skills/gsap-utils/SKILL.md +54 -46
- package/.agent/skills/i18n-localization/SKILL.md +9 -1
- package/.agent/skills/intelligent-routing/SKILL.md +38 -30
- package/.agent/skills/knowledge-graph/SKILL.md +52 -0
- package/.agent/skills/lint-and-validate/SKILL.md +9 -1
- package/.agent/skills/llm-engineering/SKILL.md +9 -1
- package/.agent/skills/local-first/SKILL.md +9 -1
- package/.agent/skills/mcp-builder/SKILL.md +9 -1
- package/.agent/skills/mobile-design/SKILL.md +222 -214
- package/.agent/skills/monorepo-management/SKILL.md +293 -285
- package/.agent/skills/motion-engineering/SKILL.md +193 -185
- package/.agent/skills/nextjs-react-expert/SKILL.md +193 -185
- package/.agent/skills/nodejs-best-practices/SKILL.md +9 -1
- package/.agent/skills/observability/SKILL.md +9 -1
- package/.agent/skills/parallel-agents/SKILL.md +9 -1
- package/.agent/skills/performance-profiling/SKILL.md +9 -1
- package/.agent/skills/plan-writing/SKILL.md +9 -1
- package/.agent/skills/platform-engineer/SKILL.md +9 -1
- package/.agent/skills/playwright-best-practices/SKILL.md +9 -1
- package/.agent/skills/powershell-windows/SKILL.md +9 -1
- package/.agent/skills/project-idioms/SKILL.md +9 -1
- package/.agent/skills/python-patterns/SKILL.md +9 -1
- package/.agent/skills/python-pro/SKILL.md +282 -274
- package/.agent/skills/react-specialist/SKILL.md +236 -228
- package/.agent/skills/readme-builder/SKILL.md +9 -1
- package/.agent/skills/realtime-patterns/SKILL.md +9 -1
- package/.agent/skills/red-team-tactics/SKILL.md +9 -1
- package/.agent/skills/rust-pro/SKILL.md +9 -1
- package/.agent/skills/seo-fundamentals/SKILL.md +9 -1
- package/.agent/skills/server-management/SKILL.md +9 -1
- package/.agent/skills/shadcn-ui-expert/SKILL.md +9 -1
- package/.agent/skills/skill-creator/SKILL.md +9 -1
- package/.agent/skills/sql-pro/SKILL.md +9 -1
- package/.agent/skills/supabase-postgres-best-practices/SKILL.md +9 -1
- package/.agent/skills/swiftui-expert/SKILL.md +9 -1
- package/.agent/skills/systematic-debugging/SKILL.md +9 -1
- package/.agent/skills/tailwind-patterns/SKILL.md +9 -1
- package/.agent/skills/tdd-workflow/SKILL.md +9 -1
- package/.agent/skills/test-result-analyzer/SKILL.md +9 -1
- package/.agent/skills/testing-patterns/SKILL.md +28 -3
- package/.agent/skills/trend-researcher/SKILL.md +9 -1
- package/.agent/skills/typescript-advanced/SKILL.md +294 -286
- package/.agent/skills/ui-ux-pro-max/SKILL.md +561 -116
- package/.agent/skills/ui-ux-researcher/SKILL.md +9 -1
- package/.agent/skills/vue-expert/SKILL.md +234 -226
- package/.agent/skills/vulnerability-scanner/SKILL.md +9 -1
- package/.agent/skills/web-accessibility-auditor/SKILL.md +9 -1
- package/.agent/skills/web-design-guidelines/SKILL.md +9 -1
- package/.agent/skills/webapp-testing/SKILL.md +9 -1
- package/.agent/skills/whimsy-injector/SKILL.md +9 -1
- package/.agent/skills/workflow-optimizer/SKILL.md +9 -1
- package/README.md +242 -242
- package/bin/tribunal-kit.js +157 -21
- package/package.json +81 -80
- package/scripts/validate-payload.js +73 -0
|
@@ -0,0 +1,384 @@
|
|
|
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 AGENT_DIR = path.join(process.cwd(), '.agent');
|
|
14
|
+
const HISTORY_DIR = path.join(AGENT_DIR, 'history');
|
|
15
|
+
const CACHE_FILE = path.join(HISTORY_DIR, 'graph-cache.json');
|
|
16
|
+
const HTML_FILE = path.join(HISTORY_DIR, 'architecture-explorer.html');
|
|
17
|
+
|
|
18
|
+
function main() {
|
|
19
|
+
if (!fs.existsSync(CACHE_FILE)) {
|
|
20
|
+
console.error('\x1b[31m✖ Error: graph-cache.json not found. Run graph_builder.js first.\x1b[0m');
|
|
21
|
+
process.exit(1);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const cacheData = fs.readFileSync(CACHE_FILE, 'utf8');
|
|
25
|
+
|
|
26
|
+
const htmlContent = `<!DOCTYPE html>
|
|
27
|
+
<html lang="en">
|
|
28
|
+
<head>
|
|
29
|
+
<meta charset="UTF-8">
|
|
30
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
31
|
+
<title>Tribunal Architecture Explorer</title>
|
|
32
|
+
<style>
|
|
33
|
+
:root {
|
|
34
|
+
--bg: #09090b;
|
|
35
|
+
--panel-bg: rgba(24, 24, 27, 0.8);
|
|
36
|
+
--border: #27272a;
|
|
37
|
+
--text: #e4e4e7;
|
|
38
|
+
--text-dim: #a1a1aa;
|
|
39
|
+
--critical: #ef4444;
|
|
40
|
+
--high: #f97316;
|
|
41
|
+
--medium: #eab308;
|
|
42
|
+
--low: #3b82f6;
|
|
43
|
+
--edge: rgba(255, 255, 255, 0.1);
|
|
44
|
+
}
|
|
45
|
+
body {
|
|
46
|
+
margin: 0;
|
|
47
|
+
padding: 0;
|
|
48
|
+
background: var(--bg);
|
|
49
|
+
color: var(--text);
|
|
50
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
51
|
+
overflow: hidden;
|
|
52
|
+
}
|
|
53
|
+
canvas {
|
|
54
|
+
display: block;
|
|
55
|
+
width: 100vw;
|
|
56
|
+
height: 100vh;
|
|
57
|
+
}
|
|
58
|
+
#ui-panel {
|
|
59
|
+
position: absolute;
|
|
60
|
+
top: 20px;
|
|
61
|
+
left: 20px;
|
|
62
|
+
width: 320px;
|
|
63
|
+
background: var(--panel-bg);
|
|
64
|
+
backdrop-filter: blur(12px);
|
|
65
|
+
border: 1px solid var(--border);
|
|
66
|
+
border-radius: 12px;
|
|
67
|
+
padding: 20px;
|
|
68
|
+
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
|
69
|
+
pointer-events: none; /* Let clicks pass to canvas if not on panel */
|
|
70
|
+
}
|
|
71
|
+
h1 { margin: 0 0 10px 0; font-size: 1.2rem; font-weight: 600; }
|
|
72
|
+
.stat { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.9rem; }
|
|
73
|
+
.stat .val { font-family: monospace; color: white; }
|
|
74
|
+
.legend { margin-top: 20px; display: grid; gap: 8px; font-size: 0.85rem; }
|
|
75
|
+
.legend-item { display: flex; align-items: center; gap: 8px; }
|
|
76
|
+
.dot { width: 10px; height: 10px; border-radius: 50%; }
|
|
77
|
+
|
|
78
|
+
#node-details {
|
|
79
|
+
margin-top: 20px;
|
|
80
|
+
padding-top: 20px;
|
|
81
|
+
border-top: 1px solid var(--border);
|
|
82
|
+
display: none;
|
|
83
|
+
pointer-events: auto;
|
|
84
|
+
}
|
|
85
|
+
#node-details h2 { margin: 0 0 10px 0; font-size: 1rem; word-break: break-all; }
|
|
86
|
+
.detail-row { font-size: 0.85rem; margin-bottom: 4px; color: var(--text-dim); }
|
|
87
|
+
.badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; color: black; }
|
|
88
|
+
ul { margin: 8px 0; padding-left: 20px; font-size: 0.85rem; color: var(--text-dim); max-height: 150px; overflow-y: auto; }
|
|
89
|
+
</style>
|
|
90
|
+
</head>
|
|
91
|
+
<body>
|
|
92
|
+
|
|
93
|
+
<canvas id="graph"></canvas>
|
|
94
|
+
|
|
95
|
+
<div id="ui-panel">
|
|
96
|
+
<h1>Tribunal Architecture</h1>
|
|
97
|
+
<div class="stat"><span>Nodes</span><span class="val" id="stat-nodes">0</span></div>
|
|
98
|
+
<div class="stat"><span>Edges</span><span class="val" id="stat-edges">0</span></div>
|
|
99
|
+
|
|
100
|
+
<div class="legend">
|
|
101
|
+
<div class="legend-item"><div class="dot" style="background: var(--critical)"></div> Critical (>10 dependents)</div>
|
|
102
|
+
<div class="legend-item"><div class="dot" style="background: var(--high)"></div> High (5-10 dependents)</div>
|
|
103
|
+
<div class="legend-item"><div class="dot" style="background: var(--medium)"></div> Medium (2-4 dependents)</div>
|
|
104
|
+
<div class="legend-item"><div class="dot" style="background: var(--low)"></div> Low (0-1 dependents)</div>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<div id="node-details">
|
|
108
|
+
<h2 id="nd-title">file.js</h2>
|
|
109
|
+
<div class="detail-row">Risk Score: <span id="nd-risk" class="badge">Low</span></div>
|
|
110
|
+
<div class="detail-row">Blast Radius: <span id="nd-blast" style="color:white;font-weight:bold">0</span> files</div>
|
|
111
|
+
<div class="detail-row" style="margin-top:10px">Imports:</div>
|
|
112
|
+
<ul id="nd-imports"></ul>
|
|
113
|
+
<div class="detail-row">Dependents:</div>
|
|
114
|
+
<ul id="nd-dependents"></ul>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<script>
|
|
119
|
+
const rawData = JSON.parse(decodeURIComponent("${encodeURIComponent(cacheData)}"));
|
|
120
|
+
|
|
121
|
+
const nodes = [];
|
|
122
|
+
const edges = [];
|
|
123
|
+
const nodeMap = new Map();
|
|
124
|
+
|
|
125
|
+
// Build Nodes
|
|
126
|
+
Object.keys(rawData).forEach(file => {
|
|
127
|
+
const info = rawData[file];
|
|
128
|
+
const node = {
|
|
129
|
+
id: file,
|
|
130
|
+
imports: info.imports || [],
|
|
131
|
+
dependents: info.dependents || [],
|
|
132
|
+
riskScore: info.riskScore || 'Low',
|
|
133
|
+
blastRadius: info.blastRadius || 0,
|
|
134
|
+
x: Math.random() * window.innerWidth,
|
|
135
|
+
y: Math.random() * window.innerHeight,
|
|
136
|
+
vx: 0,
|
|
137
|
+
vy: 0,
|
|
138
|
+
radius: Math.min(20, Math.max(5, 5 + (info.blastRadius * 1.5)))
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
if (node.riskScore === 'Critical') node.color = '#ef4444';
|
|
142
|
+
else if (node.riskScore === 'High') node.color = '#f97316';
|
|
143
|
+
else if (node.riskScore === 'Medium') node.color = '#eab308';
|
|
144
|
+
else node.color = '#3b82f6';
|
|
145
|
+
|
|
146
|
+
nodes.push(node);
|
|
147
|
+
nodeMap.set(file, node);
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
// Build Edges
|
|
151
|
+
nodes.forEach(node => {
|
|
152
|
+
node.imports.forEach(imp => {
|
|
153
|
+
if (imp.startsWith('.')) {
|
|
154
|
+
// Try to resolve
|
|
155
|
+
const dir = node.id.split('/').slice(0, -1).join('/');
|
|
156
|
+
let resolved = dir ? dir + '/' + imp.replace('./', '') : imp.replace('./', '');
|
|
157
|
+
|
|
158
|
+
// Normalize standard paths relative to array
|
|
159
|
+
let target = nodes.find(n => n.id === resolved || n.id === resolved + '.js' || n.id === resolved + '.ts');
|
|
160
|
+
if (target) {
|
|
161
|
+
edges.push({ source: node, target: target });
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
});
|
|
165
|
+
});
|
|
166
|
+
|
|
167
|
+
document.getElementById('stat-nodes').innerText = nodes.length;
|
|
168
|
+
document.getElementById('stat-edges').innerText = edges.length;
|
|
169
|
+
|
|
170
|
+
// Force Directed Graph Simulation
|
|
171
|
+
const canvas = document.getElementById('graph');
|
|
172
|
+
const ctx = canvas.getContext('2d');
|
|
173
|
+
|
|
174
|
+
function resize() {
|
|
175
|
+
canvas.width = window.innerWidth;
|
|
176
|
+
canvas.height = window.innerHeight;
|
|
177
|
+
}
|
|
178
|
+
window.addEventListener('resize', resize);
|
|
179
|
+
resize();
|
|
180
|
+
|
|
181
|
+
let hoveredNode = null;
|
|
182
|
+
let selectedNode = null;
|
|
183
|
+
let isDragging = false;
|
|
184
|
+
|
|
185
|
+
// Physics constants
|
|
186
|
+
const REPULSION = 2000;
|
|
187
|
+
const SPRING_LENGTH = 100;
|
|
188
|
+
const SPRING_STRENGTH = 0.05;
|
|
189
|
+
const DAMPING = 0.85;
|
|
190
|
+
|
|
191
|
+
function simulate() {
|
|
192
|
+
// Repulsion
|
|
193
|
+
for (let i = 0; i < nodes.length; i++) {
|
|
194
|
+
for (let j = i + 1; j < nodes.length; j++) {
|
|
195
|
+
const n1 = nodes[i];
|
|
196
|
+
const n2 = nodes[j];
|
|
197
|
+
const dx = n2.x - n1.x;
|
|
198
|
+
const dy = n2.y - n1.y;
|
|
199
|
+
let dist = Math.sqrt(dx*dx + dy*dy) || 1;
|
|
200
|
+
if (dist < 300) {
|
|
201
|
+
const force = REPULSION / (dist * dist);
|
|
202
|
+
const fx = (dx / dist) * force;
|
|
203
|
+
const fy = (dy / dist) * force;
|
|
204
|
+
n1.vx -= fx;
|
|
205
|
+
n1.vy -= fy;
|
|
206
|
+
n2.vx += fx;
|
|
207
|
+
n2.vy += fy;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
// Attraction (Springs)
|
|
213
|
+
edges.forEach(edge => {
|
|
214
|
+
const dx = edge.target.x - edge.source.x;
|
|
215
|
+
const dy = edge.target.y - edge.source.y;
|
|
216
|
+
const dist = Math.sqrt(dx*dx + dy*dy) || 1;
|
|
217
|
+
const force = (dist - SPRING_LENGTH) * SPRING_STRENGTH;
|
|
218
|
+
const fx = (dx / dist) * force;
|
|
219
|
+
const fy = (dy / dist) * force;
|
|
220
|
+
|
|
221
|
+
edge.source.vx += fx;
|
|
222
|
+
edge.source.vy += fy;
|
|
223
|
+
edge.target.vx -= fx;
|
|
224
|
+
edge.target.vy -= fy;
|
|
225
|
+
});
|
|
226
|
+
|
|
227
|
+
// Center gravity
|
|
228
|
+
const cx = canvas.width / 2;
|
|
229
|
+
const cy = canvas.height / 2;
|
|
230
|
+
nodes.forEach(n => {
|
|
231
|
+
n.vx += (cx - n.x) * 0.01;
|
|
232
|
+
n.vy += (cy - n.y) * 0.01;
|
|
233
|
+
});
|
|
234
|
+
|
|
235
|
+
// Update positions
|
|
236
|
+
nodes.forEach(n => {
|
|
237
|
+
if (n === selectedNode && isDragging) return; // don't move dragged node
|
|
238
|
+
n.vx *= DAMPING;
|
|
239
|
+
n.vy *= DAMPING;
|
|
240
|
+
n.x += n.vx;
|
|
241
|
+
n.y += n.vy;
|
|
242
|
+
});
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
function draw() {
|
|
246
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
247
|
+
|
|
248
|
+
// Draw edges
|
|
249
|
+
ctx.lineWidth = 1;
|
|
250
|
+
edges.forEach(edge => {
|
|
251
|
+
let isHighlighted = false;
|
|
252
|
+
if (hoveredNode) {
|
|
253
|
+
isHighlighted = (edge.source === hoveredNode || edge.target === hoveredNode);
|
|
254
|
+
} else if (selectedNode) {
|
|
255
|
+
isHighlighted = (edge.source === selectedNode || edge.target === selectedNode);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
if (hoveredNode || selectedNode) {
|
|
259
|
+
ctx.strokeStyle = isHighlighted ? 'rgba(255,255,255,0.8)' : 'rgba(255,255,255,0.05)';
|
|
260
|
+
ctx.lineWidth = isHighlighted ? 2 : 1;
|
|
261
|
+
} else {
|
|
262
|
+
ctx.strokeStyle = 'rgba(255,255,255,0.15)';
|
|
263
|
+
ctx.lineWidth = 1;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
ctx.beginPath();
|
|
267
|
+
ctx.moveTo(edge.source.x, edge.source.y);
|
|
268
|
+
ctx.lineTo(edge.target.x, edge.target.y);
|
|
269
|
+
ctx.stroke();
|
|
270
|
+
});
|
|
271
|
+
|
|
272
|
+
// Draw nodes
|
|
273
|
+
nodes.forEach(n => {
|
|
274
|
+
let opacity = 1;
|
|
275
|
+
if (hoveredNode && n !== hoveredNode && !edges.some(e => (e.source===hoveredNode && e.target===n) || (e.target===hoveredNode && e.source===n))) {
|
|
276
|
+
opacity = 0.2;
|
|
277
|
+
} else if (selectedNode && !hoveredNode && n !== selectedNode && !edges.some(e => (e.source===selectedNode && e.target===n) || (e.target===selectedNode && e.source===n))) {
|
|
278
|
+
opacity = 0.2;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
ctx.beginPath();
|
|
282
|
+
ctx.arc(n.x, n.y, n.radius, 0, Math.PI * 2);
|
|
283
|
+
ctx.fillStyle = n.color;
|
|
284
|
+
ctx.globalAlpha = opacity;
|
|
285
|
+
ctx.fill();
|
|
286
|
+
|
|
287
|
+
if (n === hoveredNode || n === selectedNode) {
|
|
288
|
+
ctx.strokeStyle = '#fff';
|
|
289
|
+
ctx.lineWidth = 2;
|
|
290
|
+
ctx.stroke();
|
|
291
|
+
|
|
292
|
+
ctx.globalAlpha = 1;
|
|
293
|
+
ctx.fillStyle = '#fff';
|
|
294
|
+
ctx.font = '12px system-ui';
|
|
295
|
+
ctx.fillText(n.id.split('/').pop(), n.x + n.radius + 5, n.y + 4);
|
|
296
|
+
}
|
|
297
|
+
ctx.globalAlpha = 1;
|
|
298
|
+
});
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
function loop() {
|
|
302
|
+
simulate();
|
|
303
|
+
draw();
|
|
304
|
+
requestAnimationFrame(loop);
|
|
305
|
+
}
|
|
306
|
+
loop();
|
|
307
|
+
|
|
308
|
+
// Interaction
|
|
309
|
+
canvas.addEventListener('mousemove', e => {
|
|
310
|
+
const rect = canvas.getBoundingClientRect();
|
|
311
|
+
const mx = e.clientX - rect.left;
|
|
312
|
+
const my = e.clientY - rect.top;
|
|
313
|
+
|
|
314
|
+
if (isDragging && selectedNode) {
|
|
315
|
+
selectedNode.x = mx;
|
|
316
|
+
selectedNode.y = my;
|
|
317
|
+
return;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
hoveredNode = null;
|
|
321
|
+
for (let i = nodes.length - 1; i >= 0; i--) {
|
|
322
|
+
const n = nodes[i];
|
|
323
|
+
const dx = mx - n.x;
|
|
324
|
+
const dy = my - n.y;
|
|
325
|
+
if (dx*dx + dy*dy < (n.radius + 5)**2) {
|
|
326
|
+
hoveredNode = n;
|
|
327
|
+
break;
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
canvas.style.cursor = hoveredNode ? 'pointer' : 'default';
|
|
331
|
+
});
|
|
332
|
+
|
|
333
|
+
canvas.addEventListener('mousedown', e => {
|
|
334
|
+
if (hoveredNode) {
|
|
335
|
+
selectedNode = hoveredNode;
|
|
336
|
+
isDragging = true;
|
|
337
|
+
showDetails(selectedNode);
|
|
338
|
+
} else {
|
|
339
|
+
selectedNode = null;
|
|
340
|
+
document.getElementById('node-details').style.display = 'none';
|
|
341
|
+
}
|
|
342
|
+
});
|
|
343
|
+
|
|
344
|
+
canvas.addEventListener('mouseup', () => { isDragging = false; });
|
|
345
|
+
|
|
346
|
+
function showDetails(n) {
|
|
347
|
+
const panel = document.getElementById('node-details');
|
|
348
|
+
panel.style.display = 'block';
|
|
349
|
+
document.getElementById('nd-title').innerText = n.id;
|
|
350
|
+
|
|
351
|
+
const riskEl = document.getElementById('nd-risk');
|
|
352
|
+
riskEl.innerText = n.riskScore;
|
|
353
|
+
riskEl.style.backgroundColor = n.color;
|
|
354
|
+
|
|
355
|
+
document.getElementById('nd-blast').innerText = n.blastRadius;
|
|
356
|
+
|
|
357
|
+
const importsUl = document.getElementById('nd-imports');
|
|
358
|
+
importsUl.innerHTML = '';
|
|
359
|
+
n.imports.forEach(i => {
|
|
360
|
+
const li = document.createElement('li');
|
|
361
|
+
li.innerText = i;
|
|
362
|
+
importsUl.appendChild(li);
|
|
363
|
+
});
|
|
364
|
+
if(n.imports.length===0) importsUl.innerHTML = '<li>None</li>';
|
|
365
|
+
|
|
366
|
+
const depsUl = document.getElementById('nd-dependents');
|
|
367
|
+
depsUl.innerHTML = '';
|
|
368
|
+
n.dependents.forEach(d => {
|
|
369
|
+
const li = document.createElement('li');
|
|
370
|
+
li.innerText = d;
|
|
371
|
+
depsUl.appendChild(li);
|
|
372
|
+
});
|
|
373
|
+
if(n.dependents.length===0) depsUl.innerHTML = '<li>None</li>';
|
|
374
|
+
}
|
|
375
|
+
</script>
|
|
376
|
+
</body>
|
|
377
|
+
</html>`;
|
|
378
|
+
|
|
379
|
+
fs.writeFileSync(HTML_FILE, htmlContent);
|
|
380
|
+
console.log(`\x1b[32m✔ Interactive visualizer generated.\x1b[0m`);
|
|
381
|
+
console.log(` \x1b[2mSaved to: ${HTML_FILE}\x1b[0m`);
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
main();
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
/**
|
|
3
|
+
* graph_zoom.js — Tribunal Kit Micro Zoomer
|
|
4
|
+
* Provides an "X-Ray" structural view of a specific file for AI agents,
|
|
5
|
+
* stripping out internal logic to save tokens and prevent context bloat.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
const fs = require('fs');
|
|
11
|
+
const path = require('path');
|
|
12
|
+
|
|
13
|
+
function getFlag(name) {
|
|
14
|
+
const idx = process.argv.indexOf(name);
|
|
15
|
+
return (idx !== -1 && process.argv[idx + 1]) ? process.argv[idx + 1] : null;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
const targetFile = getFlag('--focus');
|
|
19
|
+
|
|
20
|
+
if (!targetFile) {
|
|
21
|
+
console.error('\x1b[31m✖ Error: Provide a file to zoom into. Usage: node graph_zoom.js --focus <filepath>\x1b[0m');
|
|
22
|
+
process.exit(1);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const absolutePath = path.resolve(process.cwd(), targetFile);
|
|
26
|
+
|
|
27
|
+
if (!fs.existsSync(absolutePath)) {
|
|
28
|
+
console.error(`\x1b[31m✖ Error: File not found at ${absolutePath}\x1b[0m`);
|
|
29
|
+
process.exit(1);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function extractSkeleton(content) {
|
|
33
|
+
const lines = content.split('\n');
|
|
34
|
+
const skeleton = [];
|
|
35
|
+
|
|
36
|
+
// State machine flags
|
|
37
|
+
let inClass = false;
|
|
38
|
+
let braceDepth = 0;
|
|
39
|
+
|
|
40
|
+
// ── Regex Matchers ──
|
|
41
|
+
const importRegex = /^import\s+.*$/;
|
|
42
|
+
const requireRegex = /^(?:const|let|var)\s+.*require\(.*$/;
|
|
43
|
+
const classRegex = /^(?:export\s+)?(?:default\s+)?class\s+(\w+)(?:\s+extends\s+[\w.]+)?/;
|
|
44
|
+
const functionRegex = /^(?:export\s+)?(?:default\s+)?(?:async\s+)?function\s+(\w*)\s*\(([^)]*)\)/;
|
|
45
|
+
const arrowFuncRegex = /^(?:export\s+)?(?:const|let|var)\s+(\w+)\s*=\s*(?:async\s+)?\(([^)]*)\)\s*=>/;
|
|
46
|
+
// Heuristic for React Components (starts with Capital letter)
|
|
47
|
+
const reactComponentRegex = /^(?:export\s+)?(?:const|let|var)\s+([A-Z]\w+)\s*=\s*(?:[^=;]+)?=>/;
|
|
48
|
+
const typeInterfaceRegex = /^(?:export\s+)?(?:type|interface)\s+(\w+)/;
|
|
49
|
+
|
|
50
|
+
for (let i = 0; i < lines.length; i++) {
|
|
51
|
+
const line = lines[i];
|
|
52
|
+
const trimmed = line.trim();
|
|
53
|
+
|
|
54
|
+
if (!trimmed) continue;
|
|
55
|
+
|
|
56
|
+
// Keep imports
|
|
57
|
+
if (importRegex.test(trimmed) || requireRegex.test(trimmed)) {
|
|
58
|
+
skeleton.push(line);
|
|
59
|
+
continue;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// Keep types and interfaces
|
|
63
|
+
if (typeInterfaceRegex.test(trimmed)) {
|
|
64
|
+
skeleton.push(line + (trimmed.endsWith('{') ? ' /* ... */ }' : ''));
|
|
65
|
+
continue;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// Keep classes
|
|
69
|
+
const classMatch = classRegex.exec(trimmed);
|
|
70
|
+
if (classMatch) {
|
|
71
|
+
skeleton.push('\n' + line + (trimmed.endsWith('{') ? '' : ' {'));
|
|
72
|
+
inClass = true;
|
|
73
|
+
braceDepth = (trimmed.match(/\{/g) || []).length - (trimmed.match(/\}/g) || []).length;
|
|
74
|
+
continue;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// Keep function signatures
|
|
78
|
+
const funcMatch = functionRegex.exec(trimmed);
|
|
79
|
+
if (funcMatch) {
|
|
80
|
+
skeleton.push('\n' + line + (trimmed.endsWith('{') ? ' /* logic stripped */ }' : ' { /* logic stripped */ }'));
|
|
81
|
+
continue;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// Keep arrow functions
|
|
85
|
+
const arrowMatch = arrowFuncRegex.exec(trimmed);
|
|
86
|
+
if (arrowMatch) {
|
|
87
|
+
skeleton.push('\n' + line + (trimmed.endsWith('{') ? ' /* logic stripped */ }' : ' { /* logic stripped */ }'));
|
|
88
|
+
continue;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// Keep React Components / Standard constants
|
|
92
|
+
const reactMatch = reactComponentRegex.exec(trimmed);
|
|
93
|
+
if (reactMatch && !arrowMatch) {
|
|
94
|
+
skeleton.push('\n' + line + (trimmed.endsWith('{') ? ' /* logic stripped */ }' : ' { /* logic stripped */ }'));
|
|
95
|
+
continue;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
// Very basic tracking of class methods (indentation heuristic)
|
|
99
|
+
if (inClass && (line.startsWith(' ') || line.startsWith('\t')) && trimmed.includes('(') && trimmed.includes(')') && !trimmed.startsWith('//')) {
|
|
100
|
+
// Avoid pushing if it's just a deeply nested logic block
|
|
101
|
+
if (!trimmed.startsWith('if') && !trimmed.startsWith('for') && !trimmed.startsWith('switch')) {
|
|
102
|
+
skeleton.push(' ' + trimmed + ' { /* ... */ }');
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
// Manage class brace depth to properly close the skeleton
|
|
107
|
+
if (inClass) {
|
|
108
|
+
braceDepth += (line.match(/\{/g) || []).length;
|
|
109
|
+
braceDepth -= (line.match(/\}/g) || []).length;
|
|
110
|
+
if (braceDepth <= 0) {
|
|
111
|
+
skeleton.push('}\n');
|
|
112
|
+
inClass = false;
|
|
113
|
+
braceDepth = 0;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
return skeleton.join('\n');
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
function main() {
|
|
122
|
+
console.log(`\x1b[96m✦ Zooming into: ${targetFile}\x1b[0m`);
|
|
123
|
+
|
|
124
|
+
try {
|
|
125
|
+
const content = fs.readFileSync(absolutePath, 'utf8');
|
|
126
|
+
|
|
127
|
+
// Strip comments to make regex parsing easier
|
|
128
|
+
const noComments = content.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\/\/.*$/gm, '');
|
|
129
|
+
|
|
130
|
+
let skeleton = extractSkeleton(noComments);
|
|
131
|
+
|
|
132
|
+
// Fallback Logic: If the file produced practically no useful skeleton (e.g. pure data object or failed parsing)
|
|
133
|
+
if (skeleton.trim().length < 20) {
|
|
134
|
+
const lines = content.split('\n');
|
|
135
|
+
skeleton = `// [WARNING: Parser yielded little structure. Falling back to truncated raw file]\n` +
|
|
136
|
+
lines.slice(0, 100).join('\n') +
|
|
137
|
+
(lines.length > 100 ? '\n\n... (truncated)' : '');
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
console.log('\n--- SKELETON START ---');
|
|
141
|
+
console.log(skeleton);
|
|
142
|
+
console.log('--- SKELETON END ---\n');
|
|
143
|
+
|
|
144
|
+
} catch (e) {
|
|
145
|
+
console.error(`\x1b[31m✖ Error parsing file: ${e.message}\x1b[0m`);
|
|
146
|
+
// Fallback Logic: Return truncated raw on hard failure
|
|
147
|
+
const rawContent = fs.readFileSync(absolutePath, 'utf8').split('\n').slice(0, 100).join('\n');
|
|
148
|
+
console.log('\n--- RAW FILE FALLBACK (100 lines) ---');
|
|
149
|
+
console.log(rawContent);
|
|
150
|
+
console.log('-------------------------------------\n');
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
main();
|