@vibecheckai/cli 2.8.2 → 3.0.0

package/bin/runners/lib/graph/graph-builder.js

@@ -0,0 +1,265 @@
+/**
+ * Graph Builder
+ * Builds the complete ProofGraph from static and runtime edges
+ */
+
+"use strict";
+
+const crypto = require("crypto");
+
+function sha256(text) {
+  return crypto.createHash("sha256").update(text).digest("hex").slice(0, 16);
+}
+
+/**
+ * Build ProofGraph from extracted nodes and edges
+ */
+function buildProofGraph({ nodes, edges, runtimeEdges = [], meta = {} }) {
+  const graph = {
+    meta: {
+      version: "1.0.0",
+      generatedAt: new Date().toISOString(),
+      commit: meta.commit || process.env.VIBECHECK_COMMIT_SHA || "unknown",
+      ...meta
+    },
+    nodes: [],
+    edges: [],
+    brokenEdges: [],
+    coverage: {
+      static: 0,
+      runtime: 0,
+      total: 0
+    }
+  };
+
+  // Dedupe and add nodes
+  const nodeMap = new Map();
+  for (const n of nodes) {
+    if (!nodeMap.has(n.id)) {
+      nodeMap.set(n.id, n);
+    }
+  }
+  graph.nodes = Array.from(nodeMap.values());
+
+  // Process edges, separate broken ones
+  const brokenEdges = [];
+  const validEdges = [];
+
+  for (const edge of edges) {
+    if (edge.broken) {
+      brokenEdges.push({
+        edge: {
+          id: edge.id,
+          from: edge.from,
+          to: edge.to,
+          type: edge.type,
+          confidence: edge.confidence || "low"
+        },
+        reason: edge.brokenReason || "Edge target not found",
+        severity: determineSeverity(edge),
+        route: edge.toRoute || null
+      });
+    } else {
+      validEdges.push({
+        id: edge.id,
+        from: edge.from,
+        to: edge.to,
+        type: edge.type,
+        confidence: edge.confidence || "med",
+        verifiedAt: "static"
+      });
+    }
+  }
+
+  // Add runtime edges
+  for (const re of runtimeEdges) {
+    const existing = validEdges.find(e => e.from === re.from && e.to === re.to);
+    if (existing) {
+      existing.verifiedAt = "runtime";
+      existing.runtimeData = re.data;
+    } else {
+      validEdges.push({
+        id: re.id || `runtime_${sha256(re.from + re.to)}`,
+        from: re.from,
+        to: re.to,
+        type: re.type || "runtime",
+        confidence: "high",
+        verifiedAt: "runtime",
+        runtimeData: re.data
+      });
+    }
+  }
+
+  graph.edges = validEdges;
+  graph.brokenEdges = brokenEdges;
+
+  // Calculate coverage
+  const totalPossibleEdges = graph.edges.length + graph.brokenEdges.length;
+  graph.coverage = {
+    static: graph.edges.filter(e => e.verifiedAt === "static").length,
+    runtime: graph.edges.filter(e => e.verifiedAt === "runtime").length,
+    broken: graph.brokenEdges.length,
+    total: totalPossibleEdges,
+    percent: totalPossibleEdges > 0 
+      ? Math.round((graph.edges.length / totalPossibleEdges) * 100) 
+      : 100
+  };
+
+  return graph;
+}
+
+function determineSeverity(edge) {
+  // Missing routes are always BLOCK
+  if (edge.toRoute) return "BLOCK";
+  
+  // Unresolved function calls are WARN
+  if (edge.to?.startsWith("unresolved_")) return "WARN";
+  
+  return "WARN";
+}
+
+/**
+ * Merge runtime verification results into graph
+ */
+function mergeRuntimeResults(graph, runtimeResults) {
+  const updatedGraph = { ...graph };
+  
+  for (const result of runtimeResults) {
+    // Find edge that matches this runtime result
+    const edge = updatedGraph.edges.find(e => 
+      e.to?.includes(result.path) || 
+      (e.type === "calls_route" && e.toRoute?.path === result.path)
+    );
+
+    if (edge) {
+      edge.verifiedAt = "runtime";
+      edge.runtimeData = {
+        status: result.status,
+        latencyMs: result.latencyMs,
+        error: result.error
+      };
+
+      // Check for runtime failures
+      if (result.status >= 400) {
+        const brokenEdge = {
+          edge: { ...edge },
+          reason: `Route returns ${result.status} at runtime`,
+          severity: result.status >= 500 ? "BLOCK" : "WARN",
+          runtimeData: edge.runtimeData
+        };
+        
+        // Move to broken edges
+        updatedGraph.brokenEdges.push(brokenEdge);
+        updatedGraph.edges = updatedGraph.edges.filter(e => e.id !== edge.id);
+      }
+    }
+  }
+
+  // Recalculate coverage
+  const totalPossibleEdges = updatedGraph.edges.length + updatedGraph.brokenEdges.length;
+  updatedGraph.coverage = {
+    static: updatedGraph.edges.filter(e => e.verifiedAt === "static").length,
+    runtime: updatedGraph.edges.filter(e => e.verifiedAt === "runtime").length,
+    broken: updatedGraph.brokenEdges.length,
+    total: totalPossibleEdges,
+    percent: totalPossibleEdges > 0 
+      ? Math.round((updatedGraph.edges.length / totalPossibleEdges) * 100) 
+      : 100
+  };
+
+  return updatedGraph;
+}
+
+/**
+ * Compute graph diff between two graphs
+ */
+function computeGraphDiff(before, after) {
+  const diff = {
+    nodesAdded: [],
+    nodesRemoved: [],
+    edgesAdded: [],
+    edgesRemoved: [],
+    edgesFixed: [],
+    edgesBroken: []
+  };
+
+  const beforeNodeIds = new Set(before.nodes.map(n => n.id));
+  const afterNodeIds = new Set(after.nodes.map(n => n.id));
+
+  for (const n of after.nodes) {
+    if (!beforeNodeIds.has(n.id)) diff.nodesAdded.push(n);
+  }
+  for (const n of before.nodes) {
+    if (!afterNodeIds.has(n.id)) diff.nodesRemoved.push(n);
+  }
+
+  const beforeEdgeIds = new Set(before.edges.map(e => e.id));
+  const afterEdgeIds = new Set(after.edges.map(e => e.id));
+  const beforeBrokenIds = new Set(before.brokenEdges.map(e => e.edge.id));
+  const afterBrokenIds = new Set(after.brokenEdges.map(e => e.edge.id));
+
+  for (const e of after.edges) {
+    if (!beforeEdgeIds.has(e.id)) {
+      if (beforeBrokenIds.has(e.id)) {
+        diff.edgesFixed.push(e);
+      } else {
+        diff.edgesAdded.push(e);
+      }
+    }
+  }
+
+  for (const e of before.edges) {
+    if (!afterEdgeIds.has(e.id)) {
+      if (afterBrokenIds.has(e.id)) {
+        diff.edgesBroken.push(e);
+      } else {
+        diff.edgesRemoved.push(e);
+      }
+    }
+  }
+
+  return diff;
+}
+
+/**
+ * Get findings from broken edges
+ */
+function getFindingsFromGraph(graph) {
+  const findings = [];
+
+  for (const broken of graph.brokenEdges) {
+    const finding = {
+      id: `GRAPH_${broken.edge.id}`,
+      severity: broken.severity,
+      category: "BrokenEdge",
+      title: broken.reason,
+      evidence: [],
+      graphEdge: broken.edge
+    };
+
+    if (broken.route) {
+      finding.title = `Route ${broken.route.method} ${broken.route.path} referenced but doesn't exist`;
+      finding.category = "MissingRoute";
+    }
+
+    if (broken.runtimeData) {
+      finding.title = `Route returns ${broken.runtimeData.status} at runtime`;
+      finding.category = "RuntimeFailure";
+      if (broken.runtimeData.status === 401) {
+        finding.title = "UI shows success but server returned 401 (auth required)";
+        finding.category = "CausalContradiction";
+      }
+    }
+
+    findings.push(finding);
+  }
+
+  return findings;
+}
+
+module.exports = {
+  buildProofGraph,
+  mergeRuntimeResults,
+  computeGraphDiff,
+  getFindingsFromGraph
+};

package/bin/runners/lib/graph/html-renderer.js

@@ -0,0 +1,413 @@
+/**
+ * HTML Renderer
+ * Generates interactive visualization of the Proof Graph
+ */
+
+"use strict";
+
+function escapeHtml(str) {
+  return String(str || "")
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+/**
+ * Generate interactive HTML visualization
+ */
+function renderGraphHtml(graph) {
+  const nodesJson = JSON.stringify(graph.nodes);
+  const edgesJson = JSON.stringify(graph.edges);
+  const brokenJson = JSON.stringify(graph.brokenEdges);
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Reality Proof Graph - Vibecheck</title>
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #0d1117;
+      color: #c9d1d9;
+      overflow: hidden;
+    }
+    .header {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 60px;
+      background: #161b22;
+      border-bottom: 1px solid #30363d;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      z-index: 100;
+    }
+    .header h1 {
+      font-size: 18px;
+      font-weight: 600;
+      color: #58a6ff;
+    }
+    .stats {
+      margin-left: auto;
+      display: flex;
+      gap: 20px;
+      font-size: 13px;
+    }
+    .stat { display: flex; align-items: center; gap: 6px; }
+    .stat-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+    .stat-dot.green { background: #3fb950; }
+    .stat-dot.yellow { background: #d29922; }
+    .stat-dot.red { background: #f85149; }
+    
+    .sidebar {
+      position: fixed;
+      top: 60px;
+      right: 0;
+      width: 350px;
+      bottom: 0;
+      background: #161b22;
+      border-left: 1px solid #30363d;
+      overflow-y: auto;
+      z-index: 90;
+    }
+    .sidebar-section {
+      padding: 16px;
+      border-bottom: 1px solid #30363d;
+    }
+    .sidebar-section h2 {
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 12px;
+      color: #8b949e;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .broken-edge {
+      background: #21262d;
+      border-radius: 6px;
+      padding: 12px;
+      margin-bottom: 8px;
+      border-left: 3px solid #f85149;
+    }
+    .broken-edge.warn { border-left-color: #d29922; }
+    .broken-edge-title {
+      font-size: 13px;
+      font-weight: 500;
+      margin-bottom: 4px;
+    }
+    .broken-edge-reason {
+      font-size: 12px;
+      color: #8b949e;
+    }
+    
+    .graph-container {
+      position: fixed;
+      top: 60px;
+      left: 0;
+      right: 350px;
+      bottom: 0;
+    }
+    svg { width: 100%; height: 100%; }
+    
+    .node {
+      cursor: pointer;
+      transition: opacity 0.2s;
+    }
+    .node:hover { opacity: 0.8; }
+    .node circle {
+      stroke: #30363d;
+      stroke-width: 2;
+    }
+    .node text {
+      font-size: 10px;
+      fill: #c9d1d9;
+      pointer-events: none;
+    }
+    .node.ui_action circle { fill: #a371f7; }
+    .node.client_function circle { fill: #58a6ff; }
+    .node.network_call circle { fill: #3fb950; }
+    .node.server_route circle { fill: #d29922; }
+    .node.handler circle { fill: #f0883e; }
+    .node.db_call circle { fill: #f85149; }
+    .node.external_call circle { fill: #bc8cff; }
+    
+    .edge {
+      fill: none;
+      stroke: #30363d;
+      stroke-width: 1.5;
+    }
+    .edge.verified { stroke: #3fb950; }
+    .edge.broken { stroke: #f85149; stroke-dasharray: 4; }
+    
+    .tooltip {
+      position: fixed;
+      background: #21262d;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      padding: 12px;
+      font-size: 12px;
+      max-width: 300px;
+      pointer-events: none;
+      z-index: 200;
+      display: none;
+    }
+    .tooltip.visible { display: block; }
+    .tooltip-title {
+      font-weight: 600;
+      margin-bottom: 8px;
+      color: #58a6ff;
+    }
+    .tooltip-row {
+      display: flex;
+      margin-bottom: 4px;
+    }
+    .tooltip-label {
+      color: #8b949e;
+      width: 60px;
+    }
+    .tooltip-value {
+      flex: 1;
+      word-break: break-all;
+    }
+    
+    .legend {
+      position: fixed;
+      bottom: 20px;
+      left: 20px;
+      background: #161b22;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      padding: 12px;
+      font-size: 11px;
+      z-index: 90;
+    }
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 6px;
+    }
+    .legend-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>🔍 Reality Proof Graph</h1>
+    <div class="stats">
+      <div class="stat">
+        <div class="stat-dot green"></div>
+        <span id="stat-valid">0</span> valid edges
+      </div>
+      <div class="stat">
+        <div class="stat-dot red"></div>
+        <span id="stat-broken">0</span> broken edges
+      </div>
+      <div class="stat">
+        <div class="stat-dot yellow"></div>
+        <span id="stat-coverage">0</span>% coverage
+      </div>
+    </div>
+  </div>
+  
+  <div class="graph-container" id="graph"></div>
+  
+  <div class="sidebar">
+    <div class="sidebar-section">
+      <h2>Broken Edges</h2>
+      <div id="broken-list"></div>
+    </div>
+  </div>
+  
+  <div class="tooltip" id="tooltip"></div>
+  
+  <div class="legend">
+    <div class="legend-item"><div class="legend-dot" style="background:#a371f7"></div> UI Action</div>
+    <div class="legend-item"><div class="legend-dot" style="background:#58a6ff"></div> Client Function</div>
+    <div class="legend-item"><div class="legend-dot" style="background:#3fb950"></div> Network Call</div>
+    <div class="legend-item"><div class="legend-dot" style="background:#d29922"></div> Server Route</div>
+    <div class="legend-item"><div class="legend-dot" style="background:#f85149"></div> DB Call</div>
+    <div class="legend-item"><div class="legend-dot" style="background:#bc8cff"></div> External Call</div>
+  </div>
+  
+  <script>
+    const nodes = ${nodesJson};
+    const edges = ${edgesJson};
+    const brokenEdges = ${brokenJson};
+    
+    // Update stats
+    document.getElementById('stat-valid').textContent = edges.length;
+    document.getElementById('stat-broken').textContent = brokenEdges.length;
+    const total = edges.length + brokenEdges.length;
+    const coverage = total > 0 ? Math.round((edges.length / total) * 100) : 100;
+    document.getElementById('stat-coverage').textContent = coverage;
+    
+    // Render broken edges list
+    const brokenList = document.getElementById('broken-list');
+    if (brokenEdges.length === 0) {
+      brokenList.innerHTML = '<div style="color:#8b949e;font-size:13px">No broken edges found</div>';
+    } else {
+      brokenList.innerHTML = brokenEdges.map(b => \`
+        <div class="broken-edge \${b.severity === 'WARN' ? 'warn' : ''}">
+          <div class="broken-edge-title">\${escapeHtml(b.reason)}</div>
+          <div class="broken-edge-reason">\${b.route ? b.route.method + ' ' + b.route.path : b.edge.from}</div>
+        </div>
+      \`).join('');
+    }
+    
+    function escapeHtml(str) {
+      const div = document.createElement('div');
+      div.textContent = str;
+      return div.innerHTML;
+    }
+    
+    // D3 Graph
+    const container = document.getElementById('graph');
+    const width = container.clientWidth;
+    const height = container.clientHeight;
+    
+    const svg = d3.select('#graph')
+      .append('svg')
+      .attr('width', width)
+      .attr('height', height);
+    
+    const g = svg.append('g');
+    
+    // Zoom
+    const zoom = d3.zoom()
+      .scaleExtent([0.1, 4])
+      .on('zoom', (event) => g.attr('transform', event.transform));
+    svg.call(zoom);
+    
+    // Build node map
+    const nodeMap = new Map(nodes.map(n => [n.id, n]));
+    
+    // Filter edges to only those with valid nodes
+    const validEdges = edges.filter(e => nodeMap.has(e.from) && nodeMap.has(e.to));
+    
+    // Simulation
+    const simulation = d3.forceSimulation(nodes)
+      .force('link', d3.forceLink(validEdges).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));
+    
+    // Edges
+    const link = g.append('g')
+      .selectAll('line')
+      .data(validEdges)
+      .join('line')
+      .attr('class', d => 'edge' + (d.verifiedAt === 'runtime' ? ' verified' : ''));
+    
+    // Nodes
+    const node = g.append('g')
+      .selectAll('g')
+      .data(nodes)
+      .join('g')
+      .attr('class', d => 'node ' + d.type)
+      .call(d3.drag()
+        .on('start', dragstarted)
+        .on('drag', dragged)
+        .on('end', dragended));
+    
+    node.append('circle')
+      .attr('r', 12);
+    
+    node.append('text')
+      .attr('dy', 25)
+      .attr('text-anchor', 'middle')
+      .text(d => d.type.split('_').map(w => w[0]).join('').toUpperCase());
+    
+    // Tooltip
+    const tooltip = document.getElementById('tooltip');
+    
+    node.on('mouseover', (event, d) => {
+      tooltip.innerHTML = \`
+        <div class="tooltip-title">\${d.type}</div>
+        <div class="tooltip-row"><span class="tooltip-label">File:</span><span class="tooltip-value">\${escapeHtml(d.file)}</span></div>
+        <div class="tooltip-row"><span class="tooltip-label">Line:</span><span class="tooltip-value">\${d.line}</span></div>
+        \${d.url ? '<div class="tooltip-row"><span class="tooltip-label">URL:</span><span class="tooltip-value">' + escapeHtml(d.url) + '</span></div>' : ''}
+        \${d.path ? '<div class="tooltip-row"><span class="tooltip-label">Path:</span><span class="tooltip-value">' + escapeHtml(d.path) + '</span></div>' : ''}
+      \`;
+      tooltip.style.left = (event.clientX + 10) + 'px';
+      tooltip.style.top = (event.clientY + 10) + 'px';
+      tooltip.classList.add('visible');
+    })
+    .on('mouseout', () => tooltip.classList.remove('visible'));
+    
+    simulation.on('tick', () => {
+      link
+        .attr('x1', d => d.source.x)
+        .attr('y1', d => d.source.y)
+        .attr('x2', d => d.target.x)
+        .attr('y2', d => d.target.y);
+      
+      node.attr('transform', d => \`translate(\${d.x},\${d.y})\`);
+    });
+    
+    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;
+    }
+  </script>
+</body>
+</html>`;
+}
+
+/**
+ * Render Mermaid diagram for graph
+ */
+function renderGraphMermaid(graph) {
+  const lines = ["graph TD"];
+  
+  // Add nodes
+  for (const node of graph.nodes) {
+    const label = `${node.type}\\n${node.file.split("/").pop()}:${node.line}`;
+    lines.push(`  ${node.id}["${label}"]`);
+  }
+  
+  // Add edges
+  for (const edge of graph.edges) {
+    const style = edge.verifiedAt === "runtime" ? "==>" : "-->";
+    lines.push(`  ${edge.from} ${style} ${edge.to}`);
+  }
+  
+  // Add broken edges with different style
+  for (const broken of graph.brokenEdges) {
+    lines.push(`  ${broken.edge.from} -.-> ${broken.edge.to}`);
+    lines.push(`  style ${broken.edge.to} fill:#f85149`);
+  }
+  
+  return lines.join("\n");
+}
+
+module.exports = {
+  renderGraphHtml,
+  renderGraphMermaid
+};

package/bin/runners/lib/graph/index.js

@@ -0,0 +1,32 @@
+/**
+ * Reality Proof Graph - Module Index
+ * 
+ * Exports all graph functionality for CLI and MCP use
+ */
+
+"use strict";
+
+const { extractStaticGraph } = require("./static-extractor");
+const { buildProofGraph, mergeRuntimeResults, computeGraphDiff, getFindingsFromGraph } = require("./graph-builder");
+const { renderGraphHtml, renderGraphMermaid } = require("./html-renderer");
+const { generateFetchWrapper, collectRequests, buildRuntimeEdges } = require("./runtime-collector");
+
+module.exports = {
+  // Static extraction
+  extractStaticGraph,
+  
+  // Graph building
+  buildProofGraph,
+  mergeRuntimeResults,
+  computeGraphDiff,
+  getFindingsFromGraph,
+  
+  // Rendering
+  renderGraphHtml,
+  renderGraphMermaid,
+  
+  // Runtime collection
+  generateFetchWrapper,
+  collectRequests,
+  buildRuntimeEdges
+};