npm - @dtt_siye/atool - Versions diffs - 1.1.0 - Mend

@dtt_siye/atool 1.1.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.

Files changed (463) hide show

package/lib/visualization-template.html ADDED Viewed

@@ -0,0 +1,545 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>aTool Project Knowledge Graph</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+:root {
+  --bg: #0a0a0a; --surface: #141414; --surface2: #1e1e1e;
+  --border: #2a2a2a; --text: #e0e0e0; --text2: #888;
+  --accent: #d4a574; --accent2: #c4956a;
+  --module: #61affe; --component: #f5a623; --function: #50e3c2;
+  --cls: #bd93f9; --interface: #cfc; --hook: #ff79c6;
+  --service: #8be9fd; --store: #f1fa8c; --data: #ffb86c;
+  --api: #ff5555; --route: #6272a4; --config: #44475a;
+  --event: #ff6e6e; --layer: #a8d8ea;
+}
+body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; overflow: hidden; height: 100vh; }
+#header { height: 48px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; gap: 16px; }
+#header h1 { font-size: 14px; font-weight: 600; color: var(--accent); white-space: nowrap; }
+#header .stats { font-size: 12px; color: var(--text2); }
+.search-box { position: relative; }
+.search-box input { background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 6px 12px 6px 30px; border-radius: 6px; font-size: 12px; width: 240px; outline: none; }
+.search-box input:focus { border-color: var(--accent); }
+.search-box svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; stroke: var(--text2); fill: none; }
+.zoom-controls { display: flex; gap: 4px; }
+.zoom-controls button { background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 11px; transition: all 0.15s; }
+.zoom-controls button:hover { background: var(--border); }
+.zoom-controls button.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
+#main { display: flex; height: calc(100vh - 48px); }
+#sidebar { width: 280px; background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; padding: 12px; flex-shrink: 0; }
+#sidebar h3 { font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin: 12px 0 8px; }
+#sidebar h3:first-child { margin-top: 0; }
+.filter-group { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
+.filter-btn { background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 3px 8px; border-radius: 12px; cursor: pointer; font-size: 10px; display: flex; align-items: center; gap: 4px; transition: all 0.15s; }
+.filter-btn:hover { border-color: var(--accent); }
+.filter-btn.active { border-color: var(--accent); background: rgba(212,165,116,0.15); }
+.filter-btn .dot { width: 6px; height: 6px; border-radius: 50%; }
+.view-select { display: flex; flex-direction: column; gap: 4px; }
+.view-btn { background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 11px; text-align: left; transition: all 0.15s; }
+.view-btn:hover { border-color: var(--accent); }
+.view-btn.active { border-color: var(--accent); background: rgba(212,165,116,0.1); }
+.view-btn small { display: block; color: var(--text2); font-size: 9px; margin-top: 2px; }
+.legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+.legend-item { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text2); }
+.legend-item .swatch { width: 12px; height: 3px; border-radius: 1px; }
+#graph-container { flex: 1; position: relative; }
+#graph-container canvas { width: 100%; height: 100%; }
+#detail-panel { position: absolute; right: 0; top: 0; width: 320px; height: 100%; background: var(--surface); border-left: 1px solid var(--border); overflow-y: auto; padding: 16px; transform: translateX(100%); transition: transform 0.2s; z-index: 10; }
+#detail-panel.open { transform: translateX(0); }
+#detail-panel .close-btn { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--text2); cursor: pointer; font-size: 16px; }
+#detail-panel h2 { font-size: 16px; color: var(--accent); margin-bottom: 4px; padding-right: 24px; }
+#detail-panel .type-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; margin-bottom: 12px; }
+#detail-panel .section { margin-bottom: 16px; }
+#detail-panel .section h4 { font-size: 11px; color: var(--text2); text-transform: uppercase; margin-bottom: 6px; }
+#detail-panel .metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+#detail-panel .metric { background: var(--surface2); padding: 6px 8px; border-radius: 4px; }
+#detail-panel .metric .label { font-size: 9px; color: var(--text2); }
+#detail-panel .metric .value { font-size: 14px; font-weight: 600; }
+#detail-panel .conn-list { list-style: none; }
+#detail-panel .conn-list li { padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 11px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
+#detail-panel .conn-list li:hover { color: var(--accent); }
+#detail-panel .conn-list .edge-type { font-size: 9px; color: var(--text2); background: var(--surface2); padding: 1px 4px; border-radius: 3px; }
+#detail-panel .path { font-size: 10px; color: var(--text2); word-break: break-all; }
+#impact-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; }
+.risk-high { background: rgba(255,85,85,0.2); color: #ff5555; }
+.risk-medium { background: rgba(255,184,108,0.2); color: #ffb86c; }
+.risk-low { background: rgba(80,227,194,0.2); color: #50e3c2; }
+.toolbar { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }
+.toolbar button { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 11px; transition: all 0.15s; }
+.toolbar button:hover { border-color: var(--accent); color: var(--accent); }
+.toolbar button.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
+#loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text2); font-size: 14px; }
+#search-results { position: absolute; top: 48px; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; max-height: 300px; overflow-y: auto; width: 400px; z-index: 20; display: none; }
+#search-results .result { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
+#search-results .result:hover { background: var(--surface2); }
+#search-results .result .badge { font-size: 9px; padding: 1px 6px; border-radius: 8px; font-weight: 600; }
+#search-results .result .name { font-size: 12px; }
+#search-results .result .path { font-size: 10px; color: var(--text2); }
+.minimap { position: absolute; bottom: 16px; right: 16px; width: 150px; height: 100px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; z-index: 5; }
+</style>
+</head>
+<body>
+<div id="header">
+  <h1>aTool Knowledge Graph</h1>
+  <span class="stats" id="stats"></span>
+  <div class="search-box">
+    <svg viewBox="0 0 24 24" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+    <input type="text" id="search" placeholder="Search nodes... (Ctrl+K)" autocomplete="off">
+  </div>
+  <div id="search-results"></div>
+  <div class="zoom-controls">
+    <button data-zoom="G1" title="System view">G1 System</button>
+    <button data-zoom="G2" title="Module view">G2 Module</button>
+    <button data-zoom="G3" title="Function view">G3 Function</button>
+    <button data-zoom="G4" title="Data flow">G4 Data</button>
+    <button data-zoom="G5" title="Cross-cutting">G5 All</button>
+  </div>
+</div>
+<div id="main">
+  <div id="sidebar">
+    <h3>Node Types</h3>
+    <div class="filter-group" id="type-filters"></div>
+    <h3>Edge Types</h3>
+    <div class="filter-group" id="edge-filters"></div>
+    <h3>Analysis Views</h3>
+    <div class="view-select">
+      <button class="view-btn active" data-view="dependency">Dependency Graph<small>Module dependencies (G1)</small></button>
+      <button class="view-btn" data-view="callchain">Call Chain<small>Function call graph (G3)</small></button>
+      <button class="view-btn" data-view="dataflow">Data Flow<small>Data lineage (G4)</small></button>
+      <button class="view-btn" data-view="impact">Impact Analysis<small>Select a node to see impact</small></button>
+      <button class="view-btn" data-view="layers">Architecture Layers<small>Layer grouping view</small></button>
+    </div>
+    <h3>Edge Legend</h3>
+    <div class="legend">
+      <div class="legend-item"><div class="swatch" style="background:#61affe"></div>Structural</div>
+      <div class="legend-item"><div class="swatch" style="background:#50e3c2;opacity:0.7"></div>Call</div>
+      <div class="legend-item"><div class="swatch" style="background:#ffb86c;border-style:dashed"></div>Data</div>
+      <div class="legend-item"><div class="swatch" style="background:#ff6e6e;border-style:dotted"></div>Event</div>
+    </div>
+  </div>
+  <div id="graph-container">
+    <div id="loading">Loading graph data...</div>
+    <div id="detail-panel">
+      <button class="close-btn" onclick="closeDetail()">&times;</button>
+      <div id="detail-content"></div>
+    </div>
+    <div class="toolbar">
+      <button id="btn-fit" title="Fit to view">Fit</button>
+      <button id="btn-impact" title="Toggle impact analysis">Impact</button>
+      <button id="btn-export" title="Export as PNG">Export PNG</button>
+    </div>
+  </div>
+</div>
+<!-- __CYTOSCAPE_JS_PLACEHOLDER__ -->
+<!-- __DAGRE_JS_PLACEHOLDER__ -->
+<!-- __CYTOSCAPE_DAGRE_JS_PLACEHOLDER__ -->
+<script>
+// === GRAPH DATA (injected by generate-visualization.sh) ===
+const GRAPH_DATA = __GRAPH_DATA_PLACEHOLDER__;
+// === CONFIGURATION ===
+const NODE_COLORS = {
+  module: '#61affe', component: '#f5a623', function: '#50e3c2', class: '#bd93f9',
+  interface: '#ccffcc', hook: '#ff79c6', service: '#8be9fd', store: '#f1fa8c',
+  data_entity: '#ffb86c', api_endpoint: '#ff5555', route: '#6272a4', config: '#44475a',
+  event: '#ff6e6e', layer: '#a8d8ea', architectural_layer: '#a8d8ea'
+};
+const EDGE_COLORS = {
+  depends_on: '#61affe', belongs_to: '#61affe', implements: '#61affe', extends: '#61affe',
+  calls: '#50e3c2', calls_async: '#50e3c2', returns: '#50e3c2',
+  reads_from: '#ffb86c', writes_to: '#ffb86c', transforms: '#ffb86c', validates: '#ffb86c',
+  reads_state: '#f1fa8c', writes_state: '#f1fa8c', persists_to: '#ffb86c',
+  renders: '#f5a623', routes_to: '#6272a4',
+  sends_http: '#ff5555', receives_http: '#ff5555', subscribes_to: '#ff6e6e',
+  emits: '#ff6e6e', listens_to: '#ff6e6e'
+};
+const ZOOM_CONFIG = {
+  G1: { nodes: ['module', 'architectural_layer'], edges: ['depends_on'] },
+  G2: { nodes: ['module', 'class', 'service', 'store', 'interface', 'architectural_layer'], edges: ['depends_on', 'implements', 'extends', 'belongs_to'] },
+  G3: { nodes: ['function', 'api_endpoint', 'route', 'hook', 'service'], edges: ['calls', 'calls_async', 'returns', 'sends_http', 'receives_http'] },
+  G4: { nodes: ['function', 'data_entity', 'store'], edges: ['reads_from', 'writes_to', 'transforms', 'validates', 'reads_state', 'writes_state', 'persists_to'] },
+  G5: { nodes: null, edges: null }
+};
+let cy = null;
+let currentZoom = 'G1';
+let currentView = 'dependency';
+let activeFilters = new Set();
+// === INITIALIZATION ===
+function init() {
+  document.getElementById('loading').style.display = 'none';
+  document.getElementById('stats').textContent =
+    `${GRAPH_DATA.nodes?.length || 0} nodes · ${GRAPH_DATA.edges?.length || 0} edges`;
+  buildFilters();
+  initCytoscape();
+  bindEvents();
+  applyZoom('G1');
+}
+function buildFilters() {
+  const typeContainer = document.getElementById('type-filters');
+  const edgeContainer = document.getElementById('edge-filters');
+  const nodeTypes = [...new Set(GRAPH_DATA.nodes?.map(n => n.type) || [])];
+  const edgeTypes = [...new Set(GRAPH_DATA.edges?.map(e => e.type) || [])];
+  nodeTypes.forEach(t => {
+    const btn = document.createElement('button');
+    btn.className = 'filter-btn active';
+    btn.innerHTML = `<span class="dot" style="background:${NODE_COLORS[t] || '#888'}"></span>${t}`;
+    btn.onclick = () => { btn.classList.toggle('active'); applyFilters(); };
+    typeContainer.appendChild(btn);
+    activeFilters.add(t);
+  });
+  edgeTypes.forEach(t => {
+    const btn = document.createElement('button');
+    btn.className = 'filter-btn active';
+    btn.innerHTML = `<span class="dot" style="background:${EDGE_COLORS[t] || '#888'}"></span>${t.replace(/_/g, ' ')}`;
+    btn.onclick = () => { btn.classList.toggle('active'); applyFilters(); };
+    edgeContainer.appendChild(btn);
+  });
+}
+function initCytoscape() {
+  const elements = buildElements(GRAPH_DATA);
+  cy = cytoscape({
+    container: document.getElementById('graph-container'),
+    elements: elements,
+    style: getStylesheet(),
+    layout: { name: 'dagre', rankDir: 'TB', nodeSep: 30, rankSep: 60, padding: 30 },
+    minZoom: 0.1, maxZoom: 3, wheelSensitivity: 0.3
+  });
+  cy.on('tap', 'node', onNodeTap);
+  cy.on('tap', 'edge', onEdgeTap);
+  cy.on('tap', e => { if (e.target === cy) closeDetail(); });
+}
+function buildElements(data) {
+  const elements = [];
+  (data.nodes || []).forEach(n => {
+    elements.push({
+      data: {
+        id: n.id, label: n.label || n.id.split(':').pop(), type: n.type,
+        path: n.path || '', importance: n.importance || 0,
+        metrics: n.metrics || {}, tags: n.tags || [],
+        layer: n.layer || '', parent: n.parent || ''
+      }
+    });
+  });
+  (data.edges || []).forEach((e, i) => {
+    elements.push({
+      data: {
+        id: `e-${i}`, source: e.source, target: e.target, type: e.type,
+        weight: e.weight || 0.5, confidence: e.confidence || 1.0,
+        line: e.line || ''
+      }
+    });
+  });
+  return elements;
+}
+function getStylesheet() {
+  return [
+    { selector: 'node', style: {
+      'label': 'data(label)', 'text-wrap': 'wrap', 'text-max-width': '100px',
+      'font-size': '10px', 'color': '#e0e0e0', 'text-valign': 'center', 'text-halign': 'center',
+      'background-color': ele => NODE_COLORS[ele.data('type')] || '#888',
+      'width': 24, 'height': 24, 'shape': 'round-rectangle',
+      'border-width': 2, 'border-color': ele => NODE_COLORS[ele.data('type')] || '#888',
+      'border-opacity': 0.4, 'text-outline-width': 2, 'text-outline-color': '#0a0a0a',
+      'opacity': 0.9, 'padding': '8px'
+    }},
+    { selector: 'node[type="module"]', style: { 'width': 36, 'height': 36, 'shape': 'round-rectangle', 'font-weight': 'bold', 'font-size': '11px' }},
+    { selector: 'node[type="architectural_layer"]', style: { 'width': 48, 'height': 28, 'shape': 'round-rectangle', 'font-size': '10px', 'border-style': 'dashed' }},
+    { selector: 'node[type="function"]', style: { 'width': 20, 'height': 20, 'shape': 'ellipse' }},
+    { selector: 'node[type="class"]', style: { 'width': 28, 'height': 28, 'shape': 'diamond' }},
+    { selector: 'node[type="data_entity"]', style: { 'shape': 'hexagon', 'width': 26, 'height': 26 }},
+    { selector: 'node[type="api_endpoint"]', style: { 'shape': 'tag', 'width': 26, 'height': 22 }},
+    { selector: 'edge', style: {
+      'width': ele => Math.max(1, (ele.data('weight') || 0.5) * 3),
+      'line-color': ele => EDGE_COLORS[ele.data('type')] || '#444',
+      'target-arrow-color': ele => EDGE_COLORS[ele.data('type')] || '#444',
+      'target-arrow-shape': 'triangle', 'arrow-scale': 0.6,
+      'curve-style': 'bezier', 'opacity': 0.6,
+      'label': '', 'font-size': '8px', 'color': '#666'
+    }},
+    { selector: 'edge[type="calls"], edge[type="calls_async"]', style: { 'line-style': 'solid' }},
+    { selector: 'edge[type="reads_from"], edge[type="writes_to"], edge[type="transforms"]', style: { 'line-style': 'dashed' }},
+    { selector: 'edge[type="emits"], edge[type="listens_to"], edge[type="subscribes_to"]', style: { 'line-style': 'dotted' }},
+    { selector: '.highlighted', style: { 'opacity': 1, 'border-width': 3, 'border-color': '#d4a574', 'z-index': 999 }},
+    { selector: '.dimmed', style: { 'opacity': 0.08 }},
+    { selector: '.impact-source', style: { 'border-color': '#ff5555', 'border-width': 4, 'background-color': '#ff5555' }},
+    { selector: '.impact-affected', style: { 'border-color': '#ffb86c', 'border-width': 3, 'opacity': 1 }},
+    { selector: '.impact-edge', style: { 'line-color': '#ff5555', 'opacity': 1, 'width': 3 }},
+    { selector: '.selected', style: { 'border-color': '#d4a574', 'border-width': 4, 'opacity': 1 }}
+  ];
+}
+// === EVENT HANDLERS ===
+function bindEvents() {
+  document.querySelectorAll('.zoom-controls button').forEach(btn => {
+    btn.addEventListener('click', () => applyZoom(btn.dataset.zoom));
+  });
+  document.querySelectorAll('.view-btn').forEach(btn => {
+    btn.addEventListener('click', () => applyView(btn.dataset.view));
+  });
+  document.getElementById('search').addEventListener('input', onSearch);
+  document.getElementById('search').addEventListener('keydown', e => {
+    if (e.key === 'Escape') { e.target.value = ''; hideSearch(); }
+  });
+  document.addEventListener('keydown', e => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); document.getElementById('search').focus(); }
+    if (e.key === 'Escape') closeDetail();
+  });
+  document.getElementById('btn-fit').addEventListener('click', () => cy.fit(undefined, 30));
+  document.getElementById('btn-impact').addEventListener('click', () => {
+    const selected = cy.$('.selected');
+    if (selected.length) showImpact(selected[0]);
+  });
+  document.getElementById('btn-export').addEventListener('click', exportPNG);
+}
+function onNodeTap(evt) {
+  const node = evt.target;
+  cy.nodes().removeClass('selected');
+  node.addClass('selected');
+  showDetail(node);
+}
+function onEdgeTap(evt) {
+  const edge = evt.target;
+  showEdgeDetail(edge);
+}
+// === ZOOM & FILTER ===
+function applyZoom(level) {
+  currentZoom = level;
+  document.querySelectorAll('.zoom-controls button').forEach(b => b.classList.remove('active'));
+  document.querySelector(`[data-zoom="${level}"]`).classList.add('active');
+  const config = ZOOM_CONFIG[level];
+  if (!config) return;
+  cy.startBatch();
+  cy.nodes().forEach(n => {
+    if (level === 'G5' || config.nodes.includes(n.data('type'))) {
+      n.style('display', 'element');
+    } else {
+      n.style('display', 'none');
+    }
+  });
+  cy.edges().forEach(e => {
+    const src = cy.getElementById(e.data('source'));
+    const tgt = cy.getElementById(e.data('target'));
+    const typeOk = level === 'G5' || config.edges.includes(e.data('type'));
+    const visOk = src.style('display') !== 'none' && tgt.style('display') !== 'none';
+    e.style('display', (typeOk && visOk) ? 'element' : 'none');
+  });
+  cy.endBatch();
+  cy.layout({ name: 'dagre', rankDir: 'TB', nodeSep: 30, rankSep: 60, padding: 30 }).run();
+}
+function applyView(view) {
+  currentView = view;
+  document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
+  document.querySelector(`[data-view="${view}"]`).classList.add('active');
+  const zoomMap = { dependency: 'G1', callchain: 'G3', dataflow: 'G4', impact: 'G3', layers: 'G1' };
+  applyZoom(zoomMap[view] || 'G1');
+}
+function applyFilters() {
+  const activeTypes = new Set();
+  document.querySelectorAll('#type-filters .filter-btn.active').forEach(b => {
+    activeTypes.add(b.textContent.trim());
+  });
+  cy.nodes().forEach(n => {
+    n.style('display', activeTypes.has(n.data('type')) ? 'element' : 'none');
+  });
+}
+// === SEARCH ===
+function onSearch(e) {
+  const q = e.target.value.toLowerCase().trim();
+  if (!q) { hideSearch(); return; }
+  const results = cy.nodes().filter(n => {
+    const label = (n.data('label') || '').toLowerCase();
+    const path = (n.data('path') || '').toLowerCase();
+    return label.includes(q) || path.includes(q);
+  }).slice(0, 10);
+  if (results.length === 0) { hideSearch(); return; }
+  const container = document.getElementById('search-results');
+  container.innerHTML = '';
+  container.style.display = 'block';
+  results.forEach(n => {
+    const div = document.createElement('div');
+    div.className = 'result';
+    div.innerHTML = `
+      <span class="badge" style="background:${NODE_COLORS[n.data('type')] || '#888'};color:#000">${n.data('type')}</span>
+      <div><div class="name">${n.data('label')}</div><div class="path">${n.data('path')}</div></div>`;
+    div.onclick = () => {
+      cy.animate({ center: { eles: n } }, { duration: 300 });
+      cy.nodes().removeClass('selected');
+      n.addClass('selected');
+      showDetail(n);
+      hideSearch();
+      e.target.value = '';
+    };
+    container.appendChild(div);
+  });
+}
+function hideSearch() {
+  document.getElementById('search-results').style.display = 'none';
+}
+// === DETAIL PANEL ===
+function showDetail(node) {
+  const panel = document.getElementById('detail-panel');
+  const content = document.getElementById('detail-content');
+  const type = node.data('type');
+  const color = NODE_COLORS[type] || '#888';
+  let html = `<h2>${node.data('label')}</h2>`;
+  html += `<span class="type-badge" style="background:${color}22;color:${color}">${type}</span>`;
+  if (node.data('path')) html += `<div class="path">${node.data('path')}</div>`;
+  // Metrics
+  const metrics = node.data('metrics');
+  if (metrics && Object.keys(metrics).length > 0) {
+    html += `<div class="section"><h4>Metrics</h4><div class="metric-grid">`;
+    for (const [k, v] of Object.entries(metrics)) {
+      html += `<div class="metric"><div class="label">${k}</div><div class="value">${typeof v === 'number' ? v.toFixed(2) : v}</div></div>`;
+    }
+    html += `</div></div>`;
+  }
+  // Importance
+  if (node.data('importance')) {
+    html += `<div class="section"><h4>Importance</h4><div class="metric-grid"><div class="metric"><div class="label">score</div><div class="value">${(node.data('importance') * 100).toFixed(0)}%</div></div></div></div>`;
+  }
+  // Tags
+  const tags = node.data('tags');
+  if (tags && tags.length > 0) {
+    html += `<div class="section"><h4>Tags</h4>${tags.map(t => `<span class="type-badge" style="background:#333;color:#888">${t}</span>`).join(' ')}</div>`;
+  }
+  // Connections
+  const incomings = node.incomers().edges();
+  const outgoings = node.outgoers().edges();
+  html += `<div class="section"><h4>Incoming (${incomings.length})</h4><ul class="conn-list">`;
+  incomings.forEach(e => {
+    const src = cy.getElementById(e.data('source'));
+    html += `<li data-id="${src.id()}"><span class="edge-type">${e.data('type')}</span>${src.data('label')}</li>`;
+  });
+  html += `</ul></div>`;
+  html += `<div class="section"><h4>Outgoing (${outgoings.length})</h4><ul class="conn-list">`;
+  outgoings.forEach(e => {
+    const tgt = cy.getElementById(e.data('target'));
+    html += `<li data-id="${tgt.id()}"><span class="edge-type">${e.data('type')}</span>${tgt.data('label')}</li>`;
+  });
+  html += `</ul></div>`;
+  content.innerHTML = html;
+  content.querySelectorAll('.conn-list li').forEach(li => {
+    li.onclick = () => {
+      const target = cy.getElementById(li.dataset.id);
+      if (target.length) {
+        cy.animate({ center: { eles: target } }, { duration: 300 });
+        cy.nodes().removeClass('selected');
+        target.addClass('selected');
+        showDetail(target);
+      }
+    };
+  });
+  panel.classList.add('open');
+}
+function showEdgeDetail(edge) {
+  const panel = document.getElementById('detail-panel');
+  const content = document.getElementById('detail-content');
+  const src = cy.getElementById(edge.data('source'));
+  const tgt = cy.getElementById(edge.data('target'));
+  let html = `<h2>${src.data('label')} → ${tgt.data('label')}</h2>`;
+  html += `<span class="type-badge" style="background:${EDGE_COLORS[edge.data('type')] || '#888'}22;color:${EDGE_COLORS[edge.data('type')] || '#888'}">${edge.data('type')}</span>`;
+  html += `<div class="section"><h4>Properties</h4><div class="metric-grid">`;
+  html += `<div class="metric"><div class="label">weight</div><div class="value">${(edge.data('weight') || 0).toFixed(2)}</div></div>`;
+  html += `<div class="metric"><div class="label">confidence</div><div class="value">${(edge.data('confidence') || 1).toFixed(2)}</div></div>`;
+  if (edge.data('line')) html += `<div class="metric"><div class="label">line</div><div class="value">${edge.data('line')}</div></div>`;
+  html += `</div></div>`;
+  content.innerHTML = html;
+  panel.classList.add('open');
+}
+function closeDetail() {
+  document.getElementById('detail-panel').classList.remove('open');
+  cy.nodes().removeClass('selected highlighted impact-source impact-affected');
+  cy.edges().removeClass('impact-edge');
+}
+// === IMPACT ANALYSIS ===
+function showImpact(node) {
+  cy.startBatch();
+  cy.nodes().removeClass('highlighted dimmed impact-source impact-affected');
+  cy.edges().removeClass('impact-edge');
+  // Find all dependents (reverse edges)
+  const visited = new Set();
+  const queue = [node.id()];
+  visited.add(node.id());
+  while (queue.length > 0) {
+    const current = queue.shift();
+    const ele = cy.getElementById(current);
+    // Find nodes that have edges pointing TO current
+    ele.incomers().nodes().forEach(n => {
+      if (!visited.has(n.id())) {
+        visited.add(n.id());
+        queue.push(n.id());
+        n.addClass('impact-affected');
+      }
+    });
+    ele.incomers().edges().forEach(e => e.addClass('impact-edge'));
+  }
+  node.addClass('impact-source');
+  cy.nodes().forEach(n => {
+    if (!visited.has(n.id()) && n.id() !== node.id()) n.addClass('dimmed');
+  });
+  cy.endBatch();
+}
+// === EXPORT ===
+function exportPNG() {
+  const png = cy.png({ scale: 2, full: true, bg: '#0a0a0a' });
+  const a = document.createElement('a');
+  a.href = png;
+  a.download = 'knowledge-graph.png';
+  a.click();
+}
+// === INIT ===
+document.addEventListener('DOMContentLoaded', init);
+</script>
+</body>
+</html>

package/mcp/recommended.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "mcpServers": {
+    "context7": {
+      "command": "npx",
+      "args": ["-y", "@upstash/context7-mcp"]
+    },
+    "filesystem": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-filesystem", "."]
+    },
+    "git": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-git"]
+    },
+    "sequential-thinking": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
+    },
+    "playwright": {
+      "command": "npx",
+      "args": ["-y", "@playwright/mcp"]
+    }
+  }
+}

package/package.json ADDED Viewed

@@ -0,0 +1,39 @@
+{
+  "name": "@dtt_siye/atool",
+  "version": "1.1.0",
+  "description": "AI Developer Toolkit - 一键配置 AI IDE 的工具集",
+  "bin": {
+    "atool": "bin/atool.js"
+  },
+  "scripts": {
+    "postinstall": "node ./bin/postinstall.js"
+  },
+  "files": [
+    "bin/",
+    "lib/",
+    "skills/",
+    "hooks/",
+    "mcp/",
+    "templates/",
+    "agents/",
+    "VERSION",
+    "install.sh"
+  ],
+  "keywords": [
+    "ai",
+    "claude",
+    "cursor",
+    "kiro",
+    "ide",
+    "developer-tools"
+  ],
+  "license": "MIT",
+  "engines": {
+    "node": ">=16"
+  },
+  "os": [
+    "darwin",
+    "win32",
+    "linux"
+  ]
+}

package/skills/_superpowers/.claude-plugin/marketplace.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "name": "superpowers-dev",
+  "description": "Development marketplace for Superpowers core skills library",
+  "owner": {
+    "name": "Jesse Vincent",
+    "email": "jesse@fsck.com"
+  },
+  "plugins": [
+    {
+      "name": "superpowers",
+      "description": "Core skills library for Claude Code: TDD, debugging, collaboration patterns, and proven techniques",
+      "version": "5.0.6",
+      "source": "./",
+      "author": {
+        "name": "Jesse Vincent",
+        "email": "jesse@fsck.com"
+      }
+    }
+  ]
+}

package/skills/_superpowers/.claude-plugin/plugin.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "name": "superpowers",
+  "description": "Core skills library for Claude Code: TDD, debugging, collaboration patterns, and proven techniques",
+  "version": "5.0.6",
+  "author": {
+    "name": "Jesse Vincent",
+    "email": "jesse@fsck.com"
+  },
+  "homepage": "https://github.com/obra/superpowers",
+  "repository": "https://github.com/obra/superpowers",
+  "license": "MIT",
+  "keywords": [
+    "skills",
+    "tdd",
+    "debugging",
+    "collaboration",
+    "best-practices",
+    "workflows"
+  ]
+}