npm - codemap-ai - Versions diffs - 0.1.0 - Mend

codemap-ai 0.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 (20) hide show

package/README.md +181 -0
package/dist/chunk-5ONPBEWJ.js +350 -0
package/dist/chunk-5ONPBEWJ.js.map +1 -0
package/dist/chunk-FLUWKIEM.js +347 -0
package/dist/chunk-FLUWKIEM.js.map +1 -0
package/dist/cli.d.ts +2 -0
package/dist/cli.js +1302 -0
package/dist/cli.js.map +1 -0
package/dist/index.d.ts +331 -0
package/dist/index.js +1163 -0
package/dist/index.js.map +1 -0
package/dist/mcp-server.d.ts +2 -0
package/dist/mcp-server.js +365 -0
package/dist/mcp-server.js.map +1 -0
package/dist/server-ACGCJ3GE.js +87 -0
package/dist/server-ACGCJ3GE.js.map +1 -0
package/dist/server-TBIVIIUJ.js +367 -0
package/dist/server-TBIVIIUJ.js.map +1 -0
package/package.json +70 -0
package/web/index.html +639 -0

package/web/index.html ADDED Viewed

@@ -0,0 +1,639 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CodeMap - Codebase Visualization</title>
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #0d1117;
+      color: #c9d1d9;
+      overflow: hidden;
+    }
+    #app {
+      display: flex;
+      height: 100vh;
+    }
+    /* Sidebar */
+    .sidebar {
+      width: 320px;
+      background: #161b22;
+      border-right: 1px solid #30363d;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .sidebar-header {
+      padding: 16px;
+      border-bottom: 1px solid #30363d;
+    }
+    .sidebar-header h1 {
+      font-size: 20px;
+      font-weight: 600;
+      color: #58a6ff;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .search-box {
+      padding: 12px 16px;
+      border-bottom: 1px solid #30363d;
+    }
+    .search-box input {
+      width: 100%;
+      padding: 8px 12px;
+      background: #0d1117;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      color: #c9d1d9;
+      font-size: 14px;
+    }
+    .search-box input:focus {
+      outline: none;
+      border-color: #58a6ff;
+    }
+    .stats {
+      padding: 16px;
+      border-bottom: 1px solid #30363d;
+    }
+    .stat-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+    }
+    .stat-item {
+      background: #0d1117;
+      padding: 12px;
+      border-radius: 6px;
+      text-align: center;
+    }
+    .stat-value {
+      font-size: 24px;
+      font-weight: 600;
+      color: #58a6ff;
+    }
+    .stat-label {
+      font-size: 12px;
+      color: #8b949e;
+      margin-top: 4px;
+    }
+    .legend {
+      padding: 16px;
+      border-bottom: 1px solid #30363d;
+    }
+    .legend h3 {
+      font-size: 12px;
+      text-transform: uppercase;
+      color: #8b949e;
+      margin-bottom: 12px;
+    }
+    .legend-items {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      padding: 4px 8px;
+      background: #0d1117;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: opacity 0.2s;
+    }
+    .legend-item.hidden {
+      opacity: 0.4;
+    }
+    .legend-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+    }
+    .node-details {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+    }
+    .node-details h3 {
+      font-size: 14px;
+      color: #58a6ff;
+      margin-bottom: 8px;
+    }
+    .node-details .path {
+      font-size: 12px;
+      color: #8b949e;
+      word-break: break-all;
+      margin-bottom: 16px;
+    }
+    .connections {
+      margin-top: 16px;
+    }
+    .connection-group h4 {
+      font-size: 12px;
+      color: #8b949e;
+      margin-bottom: 8px;
+    }
+    .connection-item {
+      font-size: 12px;
+      padding: 6px 8px;
+      background: #0d1117;
+      border-radius: 4px;
+      margin-bottom: 4px;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    .connection-item:hover {
+      background: #21262d;
+    }
+    /* Graph container */
+    .graph-container {
+      flex: 1;
+      position: relative;
+    }
+    #graph {
+      width: 100%;
+      height: 100%;
+    }
+    .controls {
+      position: absolute;
+      bottom: 20px;
+      right: 20px;
+      display: flex;
+      gap: 8px;
+    }
+    .control-btn {
+      width: 40px;
+      height: 40px;
+      background: #161b22;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      color: #c9d1d9;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      transition: background 0.2s;
+    }
+    .control-btn:hover {
+      background: #21262d;
+    }
+    /* Node tooltip */
+    .tooltip {
+      position: absolute;
+      background: #161b22;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      padding: 12px;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.2s;
+      max-width: 300px;
+      z-index: 100;
+    }
+    .tooltip.visible {
+      opacity: 1;
+    }
+    .tooltip-title {
+      font-weight: 600;
+      color: #58a6ff;
+      margin-bottom: 4px;
+    }
+    .tooltip-type {
+      font-size: 12px;
+      color: #8b949e;
+    }
+    /* SVG styles */
+    .node {
+      cursor: pointer;
+    }
+    .node circle {
+      stroke-width: 2px;
+      transition: r 0.2s, stroke-width 0.2s;
+    }
+    .node:hover circle {
+      stroke-width: 3px;
+    }
+    .node.selected circle {
+      stroke: #fff;
+      stroke-width: 3px;
+    }
+    .node text {
+      font-size: 10px;
+      fill: #8b949e;
+      pointer-events: none;
+    }
+    .link {
+      stroke-opacity: 0.3;
+      transition: stroke-opacity 0.2s;
+    }
+    .link.highlighted {
+      stroke-opacity: 1;
+      stroke-width: 2px;
+    }
+    .link.faded {
+      stroke-opacity: 0.05;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <div class="sidebar">
+      <div class="sidebar-header">
+        <h1>
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="3"/>
+            <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
+          </svg>
+          CodeMap
+        </h1>
+      </div>
+      <div class="search-box">
+        <input type="text" id="search" placeholder="Search functions, classes, files...">
+      </div>
+      <div class="stats">
+        <div class="stat-grid">
+          <div class="stat-item">
+            <div class="stat-value" id="stat-files">-</div>
+            <div class="stat-label">Files</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-value" id="stat-functions">-</div>
+            <div class="stat-label">Functions</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-value" id="stat-classes">-</div>
+            <div class="stat-label">Classes</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-value" id="stat-edges">-</div>
+            <div class="stat-label">Connections</div>
+          </div>
+        </div>
+      </div>
+      <div class="legend">
+        <h3>Node Types</h3>
+        <div class="legend-items" id="legend">
+          <!-- Populated by JS -->
+        </div>
+      </div>
+      <div class="node-details" id="node-details">
+        <p style="color: #8b949e; font-size: 12px;">Click a node to see details</p>
+      </div>
+    </div>
+    <div class="graph-container">
+      <svg id="graph"></svg>
+      <div class="controls">
+        <button class="control-btn" id="zoom-in" title="Zoom In">+</button>
+        <button class="control-btn" id="zoom-out" title="Zoom Out">−</button>
+        <button class="control-btn" id="reset" title="Reset View">⟲</button>
+      </div>
+      <div class="tooltip" id="tooltip"></div>
+    </div>
+  </div>
+  <script>
+    // Color palette for node types
+    const colors = {
+      file: '#8b949e',
+      function: '#58a6ff',
+      class: '#a371f7',
+      method: '#7ee787',
+      variable: '#ffa657',
+      module: '#f778ba',
+      import: '#79c0ff'
+    };
+    const edgeColors = {
+      imports: '#8b949e',
+      calls: '#58a6ff',
+      extends: '#a371f7',
+      implements: '#7ee787',
+      contains: '#30363d',
+      uses: '#ffa657',
+      exports: '#f778ba'
+    };
+    let graphData = { nodes: [], edges: [] };
+    let simulation = null;
+    let selectedNode = null;
+    let hiddenTypes = new Set();
+    // Initialize
+    async function init() {
+      await loadStats();
+      await loadGraph();
+      setupLegend();
+      setupSearch();
+      setupControls();
+    }
+    async function loadStats() {
+      try {
+        const res = await fetch('/api/stats');
+        const stats = await res.json();
+        document.getElementById('stat-files').textContent = stats.totalFiles || 0;
+        document.getElementById('stat-functions').textContent =
+          (stats.nodesByType?.function || 0) + (stats.nodesByType?.method || 0);
+        document.getElementById('stat-classes').textContent = stats.nodesByType?.class || 0;
+        document.getElementById('stat-edges').textContent = stats.totalEdges || 0;
+      } catch (e) {
+        console.error('Failed to load stats:', e);
+      }
+    }
+    async function loadGraph() {
+      try {
+        const res = await fetch('/api/graph');
+        graphData = await res.json();
+        renderGraph();
+      } catch (e) {
+        console.error('Failed to load graph:', e);
+      }
+    }
+    function renderGraph() {
+      const svg = d3.select('#graph');
+      const container = document.querySelector('.graph-container');
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+      svg.selectAll('*').remove();
+      svg.attr('width', width).attr('height', height);
+      // Filter nodes by hidden types
+      const visibleNodes = graphData.nodes.filter(n => !hiddenTypes.has(n.type));
+      const visibleNodeIds = new Set(visibleNodes.map(n => n.id));
+      const visibleEdges = graphData.edges.filter(
+        e => visibleNodeIds.has(e.source) && visibleNodeIds.has(e.target)
+      );
+      // Create zoom behavior
+      const zoom = d3.zoom()
+        .scaleExtent([0.1, 4])
+        .on('zoom', (event) => {
+          g.attr('transform', event.transform);
+        });
+      svg.call(zoom);
+      const g = svg.append('g');
+      // Create force simulation
+      simulation = d3.forceSimulation(visibleNodes)
+        .force('link', d3.forceLink(visibleEdges).id(d => d.id).distance(100))
+        .force('charge', d3.forceManyBody().strength(-300))
+        .force('center', d3.forceCenter(width / 2, height / 2))
+        .force('collision', d3.forceCollide().radius(30));
+      // Draw edges
+      const links = g.append('g')
+        .selectAll('line')
+        .data(visibleEdges)
+        .enter()
+        .append('line')
+        .attr('class', 'link')
+        .attr('stroke', d => edgeColors[d.type] || '#30363d');
+      // Draw nodes
+      const nodes = g.append('g')
+        .selectAll('.node')
+        .data(visibleNodes)
+        .enter()
+        .append('g')
+        .attr('class', 'node')
+        .call(d3.drag()
+          .on('start', dragstarted)
+          .on('drag', dragged)
+          .on('end', dragended));
+      nodes.append('circle')
+        .attr('r', d => d.type === 'file' ? 8 : d.type === 'class' ? 10 : 6)
+        .attr('fill', d => colors[d.type] || '#8b949e')
+        .attr('stroke', d => d3.color(colors[d.type] || '#8b949e').darker(0.5));
+      nodes.append('text')
+        .attr('dx', 12)
+        .attr('dy', 4)
+        .text(d => d.label.length > 20 ? d.label.slice(0, 20) + '...' : d.label);
+      // Tooltip
+      const tooltip = document.getElementById('tooltip');
+      nodes
+        .on('mouseover', (event, d) => {
+          tooltip.innerHTML = `
+            <div class="tooltip-title">${d.label}</div>
+            <div class="tooltip-type">${d.type}</div>
+          `;
+          tooltip.style.left = (event.pageX + 10) + 'px';
+          tooltip.style.top = (event.pageY + 10) + 'px';
+          tooltip.classList.add('visible');
+          // Highlight connected edges
+          links
+            .classed('highlighted', l => l.source.id === d.id || l.target.id === d.id)
+            .classed('faded', l => l.source.id !== d.id && l.target.id !== d.id);
+        })
+        .on('mouseout', () => {
+          tooltip.classList.remove('visible');
+          links.classed('highlighted', false).classed('faded', false);
+        })
+        .on('click', (event, d) => {
+          selectNode(d);
+        });
+      // Update positions on tick
+      simulation.on('tick', () => {
+        links
+          .attr('x1', d => d.source.x)
+          .attr('y1', d => d.source.y)
+          .attr('x2', d => d.target.x)
+          .attr('y2', d => d.target.y);
+        nodes.attr('transform', d => `translate(${d.x},${d.y})`);
+      });
+      // Store zoom for controls
+      window.graphZoom = zoom;
+      window.graphSvg = svg;
+      function dragstarted(event) {
+        if (!event.active) simulation.alphaTarget(0.3).restart();
+        event.subject.fx = event.subject.x;
+        event.subject.fy = event.subject.y;
+      }
+      function dragged(event) {
+        event.subject.fx = event.x;
+        event.subject.fy = event.y;
+      }
+      function dragended(event) {
+        if (!event.active) simulation.alphaTarget(0);
+        event.subject.fx = null;
+        event.subject.fy = null;
+      }
+    }
+    async function selectNode(node) {
+      selectedNode = node;
+      try {
+        const res = await fetch(`/api/node/${encodeURIComponent(node.id)}`);
+        const data = await res.json();
+        const details = document.getElementById('node-details');
+        details.innerHTML = `
+          <h3>${data.node.name}</h3>
+          <div class="path">${data.node.filePath}:${data.node.startLine}</div>
+          <div class="connections">
+            <div class="connection-group">
+              <h4>Outgoing (${data.edgesFrom.length})</h4>
+              ${data.edgesFrom.slice(0, 10).map(e => `
+                <div class="connection-item">${e.type} → ${e.targetId.replace('ref:', '')}</div>
+              `).join('')}
+            </div>
+            <div class="connection-group" style="margin-top: 12px">
+              <h4>Incoming (${data.edgesTo.length})</h4>
+              ${data.edgesTo.slice(0, 10).map(e => `
+                <div class="connection-item">${e.type} ← ${e.sourceId.split(':')[0]}</div>
+              `).join('')}
+            </div>
+          </div>
+        `;
+      } catch (e) {
+        console.error('Failed to load node details:', e);
+      }
+    }
+    function setupLegend() {
+      const legend = document.getElementById('legend');
+      legend.innerHTML = Object.entries(colors).map(([type, color]) => `
+        <div class="legend-item" data-type="${type}">
+          <div class="legend-dot" style="background: ${color}"></div>
+          ${type}
+        </div>
+      `).join('');
+      legend.querySelectorAll('.legend-item').forEach(item => {
+        item.addEventListener('click', () => {
+          const type = item.dataset.type;
+          if (hiddenTypes.has(type)) {
+            hiddenTypes.delete(type);
+            item.classList.remove('hidden');
+          } else {
+            hiddenTypes.add(type);
+            item.classList.add('hidden');
+          }
+          renderGraph();
+        });
+      });
+    }
+    function setupSearch() {
+      const search = document.getElementById('search');
+      let timeout;
+      search.addEventListener('input', (e) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(async () => {
+          const query = e.target.value.trim();
+          if (!query) return;
+          try {
+            const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
+            const results = await res.json();
+            if (results.length > 0) {
+              // Find and select the first matching node
+              const node = graphData.nodes.find(n => n.id === results[0].id);
+              if (node) selectNode(node);
+            }
+          } catch (e) {
+            console.error('Search failed:', e);
+          }
+        }, 300);
+      });
+    }
+    function setupControls() {
+      document.getElementById('zoom-in').addEventListener('click', () => {
+        window.graphSvg.transition().call(window.graphZoom.scaleBy, 1.3);
+      });
+      document.getElementById('zoom-out').addEventListener('click', () => {
+        window.graphSvg.transition().call(window.graphZoom.scaleBy, 0.7);
+      });
+      document.getElementById('reset').addEventListener('click', () => {
+        window.graphSvg.transition().call(
+          window.graphZoom.transform,
+          d3.zoomIdentity
+        );
+      });
+    }
+    // Start
+    init();
+  </script>
+</body>
+</html>