@diegonogueiradev_/mcp-graph 1.0.0 → 2.0.0

package/dist/web/public/js/import-form.js

@@ -0,0 +1,105 @@
+/**
+ * PRD import form with drag-and-drop
+ */
+const ImportForm = (() => {
+  let selectedFile = null;
+
+  function init() {
+    const modal = document.getElementById('import-modal');
+    const dropZone = document.getElementById('drop-zone');
+    const fileInput = document.getElementById('file-input');
+    const submitBtn = document.getElementById('import-submit');
+    const cancelBtn = document.getElementById('import-cancel');
+    const closeBtn = document.getElementById('modal-close');
+    const openBtn = document.getElementById('btn-import-prd');
+
+    if (!modal || !dropZone || !fileInput) return;
+
+    openBtn?.addEventListener('click', () => open());
+    closeBtn?.addEventListener('click', () => close());
+    cancelBtn?.addEventListener('click', () => close());
+
+    // Drop zone events
+    dropZone.addEventListener('click', () => fileInput.click());
+    dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('drag-over'); });
+    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+    dropZone.addEventListener('drop', (e) => {
+      e.preventDefault();
+      dropZone.classList.remove('drag-over');
+      if (e.dataTransfer.files.length) selectFile(e.dataTransfer.files[0]);
+    });
+    fileInput.addEventListener('change', () => {
+      if (fileInput.files.length) selectFile(fileInput.files[0]);
+    });
+
+    submitBtn?.addEventListener('click', () => submit());
+
+    // Close on backdrop click
+    modal.addEventListener('click', (e) => {
+      if (e.target === modal) close();
+    });
+  }
+
+  function open() {
+    selectedFile = null;
+    const modal = document.getElementById('import-modal');
+    const status = document.getElementById('import-status');
+    const submitBtn = document.getElementById('import-submit');
+    const dropZone = document.getElementById('drop-zone');
+
+    if (status) status.innerHTML = '';
+    if (submitBtn) submitBtn.disabled = true;
+    if (dropZone) dropZone.querySelector('p').textContent = 'Drag & drop a file here\nor click to select';
+
+    modal?.showModal();
+  }
+
+  function close() {
+    document.getElementById('import-modal')?.close();
+    selectedFile = null;
+  }
+
+  function selectFile(file) {
+    selectedFile = file;
+    const dropZone = document.getElementById('drop-zone');
+    const submitBtn = document.getElementById('import-submit');
+
+    if (dropZone) dropZone.querySelector('p').textContent = `Selected: ${file.name} (${formatSize(file.size)})`;
+    if (submitBtn) submitBtn.disabled = false;
+  }
+
+  async function submit() {
+    if (!selectedFile) return;
+
+    const submitBtn = document.getElementById('import-submit');
+    const status = document.getElementById('import-status');
+    const force = document.getElementById('import-force')?.checked || false;
+
+    if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Importing...'; }
+    if (status) status.innerHTML = '<p class="info">Uploading and processing...</p>';
+
+    try {
+      const result = await ApiClient.importFile(selectedFile, force);
+      if (status) {
+        status.innerHTML = `<p class="success">Imported ${result.nodesCreated} nodes and ${result.edgesCreated} edges.</p>`;
+      }
+      // Refresh dashboard
+      setTimeout(() => {
+        close();
+        document.dispatchEvent(new CustomEvent('import-completed'));
+      }, 1500);
+    } catch (err) {
+      if (status) status.innerHTML = `<p class="error">${err.message}</p>`;
+    } finally {
+      if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Import'; }
+    }
+  }
+
+  function formatSize(bytes) {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / 1048576).toFixed(1) + ' MB';
+  }
+
+  return { init, open, close };
+})();

package/dist/web/public/js/node-detail.js

@@ -0,0 +1,106 @@
+/**
+ * Node detail sidebar panel
+ */
+const NodeDetail = (() => {
+  const STATUS_COLORS = {
+    done: '#4caf50', in_progress: '#2196f3', blocked: '#f44336',
+    backlog: '#9e9e9e', ready: '#ff9800',
+  };
+
+  function show(node) {
+    const panel = document.getElementById('detail-panel');
+    const title = document.getElementById('detail-title');
+    const body = document.getElementById('detail-body');
+    if (!panel || !body || !title) return;
+
+    title.textContent = node.title;
+    body.innerHTML = buildDetail(node);
+    panel.classList.remove('hidden');
+  }
+
+  function hide() {
+    const panel = document.getElementById('detail-panel');
+    if (panel) panel.classList.add('hidden');
+  }
+
+  function buildDetail(node) {
+    const color = STATUS_COLORS[node.status] || '#9e9e9e';
+    const sections = [];
+
+    sections.push(`
+      <div class="detail-row">
+        <span class="detail-label">ID</span>
+        <code class="detail-value">${esc(node.id)}</code>
+      </div>
+      <div class="detail-row">
+        <span class="detail-label">Type</span>
+        <span class="badge badge-type">${esc(node.type)}</span>
+      </div>
+      <div class="detail-row">
+        <span class="detail-label">Status</span>
+        <span class="badge" style="background:${color};color:#fff">${esc(node.status)}</span>
+      </div>
+      <div class="detail-row">
+        <span class="detail-label">Priority</span>
+        <span class="detail-value">${node.priority}</span>
+      </div>
+    `);
+
+    if (node.xpSize) {
+      sections.push(`<div class="detail-row"><span class="detail-label">Size</span><span class="detail-value">${esc(node.xpSize)}</span></div>`);
+    }
+    if (node.estimateMinutes) {
+      sections.push(`<div class="detail-row"><span class="detail-label">Estimate</span><span class="detail-value">${node.estimateMinutes}min</span></div>`);
+    }
+    if (node.sprint) {
+      sections.push(`<div class="detail-row"><span class="detail-label">Sprint</span><span class="detail-value">${esc(node.sprint)}</span></div>`);
+    }
+    if (node.description) {
+      sections.push(`<div class="detail-section"><h4>Description</h4><p>${esc(node.description)}</p></div>`);
+    }
+    if (node.acceptanceCriteria?.length) {
+      sections.push(`<div class="detail-section"><h4>Acceptance Criteria</h4><ul>${node.acceptanceCriteria.map(ac => `<li>${esc(ac)}</li>`).join('')}</ul></div>`);
+    }
+    if (node.tags?.length) {
+      sections.push(`<div class="detail-row"><span class="detail-label">Tags</span><span class="detail-value">${node.tags.map(t => `<span class="tag">${esc(t)}</span>`).join(' ')}</span></div>`);
+    }
+    if (node.sourceRef) {
+      sections.push(`<div class="detail-row"><span class="detail-label">Source</span><span class="detail-value">${esc(node.sourceRef.file)}${node.sourceRef.startLine ? ':' + node.sourceRef.startLine : ''}</span></div>`);
+    }
+
+    sections.push(`<div class="detail-row"><span class="detail-label">Created</span><span class="detail-value">${formatDate(node.createdAt)}</span></div>`);
+    sections.push(`<div class="detail-row"><span class="detail-label">Updated</span><span class="detail-value">${formatDate(node.updatedAt)}</span></div>`);
+
+    return sections.join('');
+  }
+
+  function esc(text) {
+    if (!text) return '';
+    const div = document.createElement('div');
+    div.textContent = String(text);
+    return div.innerHTML;
+  }
+
+  function formatDate(iso) {
+    if (!iso) return '-';
+    try {
+      return new Date(iso).toLocaleString();
+    } catch {
+      return iso;
+    }
+  }
+
+  function init() {
+    document.getElementById('detail-close')?.addEventListener('click', hide);
+    document.addEventListener('node-clicked', async (e) => {
+      try {
+        const node = await ApiClient.getNode(e.detail.nodeId);
+        if (node) show(node);
+      } catch {
+        // Node may not match id format from mermaid
+      }
+    });
+  }
+
+  return { init, show, hide };
+})();

package/dist/web/public/js/tabs/code-graph-tab.js

@@ -0,0 +1,66 @@
+/**
+ * Tab 3: Code Graph — GitNexus iframe + Serena fallback
+ */
+const CodeGraphTab = (() => {
+  async function load() {
+    const container = document.getElementById('tab-code-graph');
+    if (!container) return;
+
+    try {
+      const status = await ApiClient.request('/integrations/status');
+
+      if (status.gitnexus?.running) {
+        container.innerHTML = `
+          <div class="iframe-container">
+            <div class="iframe-header">
+              <span class="badge status-done">GitNexus Running</span>
+              <a href="${esc(status.gitnexus.url)}" target="_blank" class="btn btn-sm">Open in new tab</a>
+            </div>
+            <iframe src="${esc(status.gitnexus.url)}" class="gitnexus-iframe" title="GitNexus Code Graph"></iframe>
+          </div>
+        `;
+        return;
+      }
+
+      // Fallback: show Serena memories as static overview
+      let html = `
+        <div class="fallback-panel">
+          <div class="fallback-notice">
+            <h3>Code Graph (GitNexus not running)</h3>
+            <p>Start GitNexus for interactive code graph visualization:</p>
+            <pre><code>gitnexus analyze && gitnexus serve</code></pre>
+          </div>
+      `;
+
+      if (status.serena?.memories?.length > 0) {
+        html += '<h3 class="section-title">Serena Memories (Codebase Overview)</h3>';
+        const memories = await ApiClient.request('/integrations/serena/memories');
+        for (const mem of memories) {
+          html += `
+            <div class="memory-card">
+              <h4>${esc(mem.name)}</h4>
+              <pre class="memory-content">${esc(mem.content)}</pre>
+            </div>
+          `;
+        }
+      } else {
+        html += '<p class="text-muted">No Serena memories found. Configure Serena for codebase intelligence.</p>';
+      }
+
+      html += '</div>';
+      container.innerHTML = html;
+    } catch (err) {
+      container.innerHTML = `<div class="error-state"><p>Failed to load: ${err.message}</p></div>`;
+    }
+  }
+
+  function esc(text) {
+    if (!text) return '';
+    const div = document.createElement('div');
+    div.textContent = String(text);
+    return div.innerHTML;
+  }
+
+  function init() {}
+  return { init, load };
+})();

package/dist/web/public/js/tabs/graph-tab.js

@@ -0,0 +1,238 @@
+/**
+ * Tab 1: Graph visualization — Force Graph (default) + Mermaid toggle
+ */
+const GraphTab = (() => {
+  const VIEW_KEY = 'mcp-graph-view-mode';
+  let nodes = [];
+  let currentSort = { key: 'priority', dir: 'asc' };
+  let viewMode = localStorage.getItem(VIEW_KEY) || 'force';
+
+  async function load() {
+    try {
+      nodes = await ApiClient.getNodes();
+      if (viewMode === 'force') {
+        await renderForceGraph();
+      } else {
+        await renderMermaid();
+      }
+      renderTable(nodes);
+    } catch (err) {
+      console.error('Failed to load graph tab:', err);
+    }
+  }
+
+  async function renderForceGraph() {
+    try {
+      const graphData = await ApiClient.getGraph();
+      if (!graphData || (!graphData.nodes?.length && !graphData.edges?.length)) {
+        const container = document.getElementById('force-graph-container');
+        if (container) container.innerHTML = '<div class="empty-state"><p>No graph data. Import a PRD to get started.</p></div>';
+        return;
+      }
+
+      // Transform edges → links format for force-graph
+      const forceNodes = (graphData.nodes || []).map(n => ({
+        id: n.id,
+        title: n.title,
+        type: n.type,
+        status: n.status,
+        priority: n.priority,
+        description: n.description,
+        xpSize: n.xpSize,
+        sprint: n.sprint,
+      }));
+
+      const forceLinks = (graphData.edges || []).map(e => ({
+        source: e.source,
+        target: e.target,
+        relationType: e.relationType || e.type,
+      }));
+
+      // Apply status/type filters from the filter panel
+      const filterVals = Filters.getValues();
+      let filteredNodes = forceNodes;
+      if (filterVals.status.length) {
+        filteredNodes = filteredNodes.filter(n => filterVals.status.includes(n.status));
+      }
+      if (filterVals.type.length) {
+        filteredNodes = filteredNodes.filter(n => filterVals.type.includes(n.type));
+      }
+      const nodeIds = new Set(filteredNodes.map(n => n.id));
+      const filteredLinks = forceLinks.filter(l => nodeIds.has(l.source) && nodeIds.has(l.target));
+
+      ForceGraphRenderer.render(filteredNodes, filteredLinks);
+
+      // Apply edge type + depth filters
+      const edgeTypes = filterVals.edgeTypes;
+      const focusDepth = filterVals.focusDepth;
+      ForceGraphRenderer.setFilters({ edgeTypes, depth: focusDepth });
+    } catch (err) {
+      console.error('Failed to render force graph:', err);
+      const container = document.getElementById('force-graph-container');
+      if (container) container.innerHTML = '<div class="error-state"><p>Error loading graph: ' + (err.message || err) + '</p></div>';
+    }
+  }
+
+  async function renderMermaid() {
+    const container = document.getElementById('mermaid-output');
+    const empty = document.getElementById('graph-empty');
+    if (!container) return;
+
+    const params = Filters.toQueryParams();
+    const mermaidCode = await ApiClient.getMermaid(params);
+
+    if (!mermaidCode || mermaidCode.trim() === 'graph TD\n' || mermaidCode.trim() === 'graph TD') {
+      if (empty) empty.classList.remove('hidden');
+      container.innerHTML = '';
+      return;
+    }
+
+    if (empty) empty.classList.add('hidden');
+    await GraphRenderer.render(container, mermaidCode);
+  }
+
+  async function renderGraph() {
+    if (viewMode === 'force') {
+      await renderForceGraph();
+    } else {
+      await renderMermaid();
+    }
+  }
+
+  function setViewMode(mode) {
+    viewMode = mode;
+    localStorage.setItem(VIEW_KEY, mode);
+
+    // Toggle active button
+    document.querySelectorAll('.view-btn').forEach(btn => {
+      btn.classList.toggle('active', btn.dataset.view === mode);
+    });
+
+    // Toggle containers
+    const forceContainer = document.getElementById('force-graph-container');
+    const mermaidContainer = document.getElementById('mermaid-container');
+    const zoomControls = document.getElementById('zoom-controls');
+
+    if (forceContainer) forceContainer.classList.toggle('hidden', mode !== 'force');
+    if (mermaidContainer) mermaidContainer.classList.toggle('hidden', mode !== 'mermaid');
+    if (zoomControls) zoomControls.style.display = mode === 'force' ? 'flex' : 'none';
+
+    // Toggle filter visibility
+    Filters.setViewMode(mode);
+
+    // Render the active view
+    renderGraph();
+  }
+
+  function renderTable(data) {
+    const tbody = document.getElementById('node-table-body');
+    if (!tbody) return;
+
+    if (data.length === 0) {
+      tbody.innerHTML = '<tr><td colspan="6" class="empty-cell">No nodes found</td></tr>';
+      return;
+    }
+
+    tbody.innerHTML = data.map(node => `
+      <tr class="node-row" data-id="${esc(node.id)}">
+        <td class="cell-title">${esc(node.title)}</td>
+        <td><span class="badge badge-type">${esc(node.type)}</span></td>
+        <td><span class="badge status-${node.status}">${esc(node.status)}</span></td>
+        <td class="cell-center">${node.priority}</td>
+        <td class="cell-center">${node.xpSize || '-'}</td>
+        <td>${esc(node.sprint || '-')}</td>
+      </tr>
+    `).join('');
+
+    // Row click → detail
+    tbody.querySelectorAll('.node-row').forEach(row => {
+      row.addEventListener('click', () => {
+        const nodeId = row.dataset.id;
+        document.dispatchEvent(new CustomEvent('node-clicked', { detail: { nodeId } }));
+        // Also select in force graph
+        if (viewMode === 'force') {
+          ForceGraphRenderer.selectNode(nodeId);
+        }
+      });
+    });
+  }
+
+  function sortTable(key) {
+    if (currentSort.key === key) {
+      currentSort.dir = currentSort.dir === 'asc' ? 'desc' : 'asc';
+    } else {
+      currentSort = { key, dir: 'asc' };
+    }
+
+    const sorted = [...nodes].sort((a, b) => {
+      const va = a[key] ?? '';
+      const vb = b[key] ?? '';
+      const cmp = typeof va === 'number' ? va - vb : String(va).localeCompare(String(vb));
+      return currentSort.dir === 'asc' ? cmp : -cmp;
+    });
+
+    renderTable(sorted);
+  }
+
+  function filterTable(query) {
+    if (!query) { renderTable(nodes); return; }
+    const q = query.toLowerCase();
+    const filtered = nodes.filter(n =>
+      n.title.toLowerCase().includes(q) ||
+      n.type.toLowerCase().includes(q) ||
+      n.status.toLowerCase().includes(q) ||
+      (n.sprint || '').toLowerCase().includes(q)
+    );
+    renderTable(filtered);
+  }
+
+  function init() {
+    // Initialize force graph renderer
+    ForceGraphRenderer.init('force-graph-container');
+
+    // View toggle buttons
+    document.querySelectorAll('.view-btn').forEach(btn => {
+      btn.addEventListener('click', () => setViewMode(btn.dataset.view));
+    });
+
+    // Zoom controls
+    document.getElementById('zoom-in')?.addEventListener('click', () => ForceGraphRenderer.zoomIn());
+    document.getElementById('zoom-out')?.addEventListener('click', () => ForceGraphRenderer.zoomOut());
+    document.getElementById('zoom-fit')?.addEventListener('click', () => ForceGraphRenderer.zoomFit());
+
+    // Filter buttons
+    document.getElementById('btn-apply-filters')?.addEventListener('click', renderGraph);
+    document.getElementById('btn-clear-filters')?.addEventListener('click', () => {
+      Filters.clear();
+      renderGraph();
+    });
+
+    // Table sort
+    document.querySelectorAll('#node-table th[data-sort]').forEach(th => {
+      th.style.cursor = 'pointer';
+      th.addEventListener('click', () => sortTable(th.dataset.sort));
+    });
+
+    // Table search
+    document.getElementById('table-search')?.addEventListener('input', (e) => {
+      filterTable(e.target.value);
+    });
+
+    // Resize handler
+    window.addEventListener('resize', () => {
+      if (viewMode === 'force') ForceGraphRenderer.resize();
+    });
+
+    // Apply initial view mode
+    setViewMode(viewMode);
+  }
+
+  function esc(text) {
+    if (!text) return '';
+    const div = document.createElement('div');
+    div.textContent = String(text);
+    return div.innerHTML;
+  }
+
+  return { init, load, renderGraph };
+})();