@vibecheckai/cli 3.7.0 → 3.8.0

package/bin/runners/lib/packs/proof-graph-pack.js

@@ -0,0 +1,779 @@
+// bin/runners/lib/packs/proof-graph-pack.js
+// ═══════════════════════════════════════════════════════════════════════════════
+// PROOF GRAPH PACK - Proof graph with cross-links to receipts and visualization
+// Interactive graph showing verification coverage and proof chains
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const fs = require('fs');
+const path = require('path');
+const {
+  createPackBuilder,
+  PACK_TYPE,
+  ARTIFACT_TYPE,
+  collectReceiptReferences,
+  loadReceipt,
+} = require('./pack-factory');
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// GRAPH DATA LOADING
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Load proof graph from various sources
+ * @param {string} repoRoot - Repository root
+ * @returns {object|null} Proof graph data
+ */
+function loadProofGraph(repoRoot) {
+  // Try primary location
+  const primaryPath = path.join(repoRoot, '.vibecheck/proof-graph.json');
+  if (fs.existsSync(primaryPath)) {
+    try {
+      return JSON.parse(fs.readFileSync(primaryPath, 'utf8'));
+    } catch (e) {
+      // Continue to fallback
+    }
+  }
+  
+  // Try reality graph
+  const realityPath = path.join(repoRoot, '.vibecheck/reality-graph.json');
+  if (fs.existsSync(realityPath)) {
+    try {
+      return JSON.parse(fs.readFileSync(realityPath, 'utf8'));
+    } catch (e) {
+      // Continue to fallback
+    }
+  }
+  
+  // Try to build from scan results
+  const scanPath = path.join(repoRoot, '.vibecheck/results/latest.json');
+  if (fs.existsSync(scanPath)) {
+    try {
+      const scan = JSON.parse(fs.readFileSync(scanPath, 'utf8'));
+      return buildGraphFromScan(scan);
+    } catch (e) {
+      // Return empty graph
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * Build basic graph from scan results
+ * @param {object} scan - Scan results
+ * @returns {object} Graph data
+ */
+function buildGraphFromScan(scan) {
+  const nodes = [];
+  const edges = [];
+  
+  // Create nodes from findings
+  const findings = scan.findings || scan.report?.findings || [];
+  
+  for (const finding of findings) {
+    nodes.push({
+      id: finding.id,
+      type: 'finding',
+      label: finding.title || finding.message,
+      category: finding.category,
+      severity: finding.severity,
+      file: finding.file || finding.evidence?.[0]?.file,
+      status: 'unverified',
+    });
+  }
+  
+  // Create file nodes
+  const files = new Set(findings.map(f => f.file || f.evidence?.[0]?.file).filter(Boolean));
+  for (const file of files) {
+    nodes.push({
+      id: `file:${file}`,
+      type: 'file',
+      label: path.basename(file),
+      path: file,
+    });
+  }
+  
+  // Create edges from findings to files
+  for (const finding of findings) {
+    const file = finding.file || finding.evidence?.[0]?.file;
+    if (file) {
+      edges.push({
+        source: finding.id,
+        target: `file:${file}`,
+        type: 'located_in',
+      });
+    }
+  }
+  
+  return {
+    nodes,
+    edges,
+    metadata: {
+      generatedFrom: 'scan',
+      findingCount: findings.length,
+      fileCount: files.size,
+    },
+  };
+}
+
+/**
+ * Load proof runs from receipts
+ * @param {string} repoRoot - Repository root
+ * @returns {Array} Proof runs
+ */
+function loadProofRuns(repoRoot) {
+  const runs = [];
+  const receiptsDir = path.join(repoRoot, '.vibecheck/receipts');
+  
+  if (!fs.existsSync(receiptsDir)) return runs;
+  
+  const dirs = fs.readdirSync(receiptsDir, { withFileTypes: true })
+    .filter(d => d.isDirectory())
+    .map(d => d.name);
+  
+  for (const dir of dirs) {
+    const manifestPath = path.join(receiptsDir, dir, 'manifest.json');
+    if (fs.existsSync(manifestPath)) {
+      try {
+        const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+        runs.push({
+          runId: dir,
+          ...manifest,
+        });
+      } catch (e) {
+        // Skip invalid
+      }
+    }
+  }
+  
+  return runs.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// GRAPH ENHANCEMENT
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Enhance graph with receipt cross-links
+ * @param {object} graph - Base graph
+ * @param {object} receipts - Receipt references
+ * @param {Array} proofRuns - Proof runs
+ * @returns {object} Enhanced graph
+ */
+function enhanceGraphWithReceipts(graph, receipts, proofRuns) {
+  const enhanced = {
+    ...graph,
+    nodes: [...(graph.nodes || [])],
+    edges: [...(graph.edges || [])],
+    receipts: receipts || {},
+    proofRuns: proofRuns || [],
+  };
+  
+  // Add receipt nodes
+  if (receipts.ship) {
+    enhanced.nodes.push({
+      id: 'receipt:ship',
+      type: 'receipt',
+      label: `Ship: ${receipts.ship.verdict || 'N/A'}`,
+      receiptType: 'ship',
+      verdict: receipts.ship.verdict,
+      timestamp: receipts.ship.timestamp,
+    });
+  }
+  
+  if (receipts.reality) {
+    enhanced.nodes.push({
+      id: 'receipt:reality',
+      type: 'receipt',
+      label: `Reality: ${receipts.reality.verdict || 'N/A'}`,
+      receiptType: 'reality',
+      verdict: receipts.reality.verdict,
+      runId: receipts.reality.runId,
+      timestamp: receipts.reality.timestamp,
+    });
+  }
+  
+  if (receipts.scan) {
+    enhanced.nodes.push({
+      id: 'receipt:scan',
+      type: 'receipt',
+      label: `Scan: ${receipts.scan.findingCount} findings`,
+      receiptType: 'scan',
+      findingCount: receipts.scan.findingCount,
+      timestamp: receipts.scan.timestamp,
+    });
+    
+    // Link findings to scan receipt
+    for (const node of enhanced.nodes) {
+      if (node.type === 'finding') {
+        enhanced.edges.push({
+          source: node.id,
+          target: 'receipt:scan',
+          type: 'detected_by',
+        });
+      }
+    }
+  }
+  
+  // Compute statistics
+  enhanced.statistics = computeGraphStats(enhanced);
+  
+  return enhanced;
+}
+
+/**
+ * Compute graph statistics
+ * @param {object} graph - Graph data
+ * @returns {object} Statistics
+ */
+function computeGraphStats(graph) {
+  const nodes = graph.nodes || [];
+  const edges = graph.edges || [];
+  
+  const nodesByType = {};
+  for (const node of nodes) {
+    nodesByType[node.type] = (nodesByType[node.type] || 0) + 1;
+  }
+  
+  const edgesByType = {};
+  for (const edge of edges) {
+    edgesByType[edge.type] = (edgesByType[edge.type] || 0) + 1;
+  }
+  
+  const findingsBySeverity = {};
+  for (const node of nodes.filter(n => n.type === 'finding')) {
+    findingsBySeverity[node.severity] = (findingsBySeverity[node.severity] || 0) + 1;
+  }
+  
+  return {
+    totalNodes: nodes.length,
+    totalEdges: edges.length,
+    nodesByType,
+    edgesByType,
+    findingsBySeverity,
+    verifiedNodes: nodes.filter(n => n.status === 'verified').length,
+    unverifiedNodes: nodes.filter(n => n.status === 'unverified').length,
+  };
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// GRAPH FORMAT CONVERTERS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Convert graph to DOT format
+ * @param {object} graph - Graph data
+ * @returns {string} DOT content
+ */
+function graphToDot(graph) {
+  const lines = ['digraph ProofGraph {'];
+  lines.push('  rankdir=LR;');
+  lines.push('  node [shape=box, style=filled];');
+  lines.push('');
+  
+  // Node styles by type
+  const styles = {
+    finding: 'fillcolor="#ff7b7233", color="#ff7b72"',
+    file: 'fillcolor="#58a6ff33", color="#58a6ff"',
+    receipt: 'fillcolor="#3fb95033", color="#3fb950", shape=diamond',
+    route: 'fillcolor="#a371f733", color="#a371f7"',
+    component: 'fillcolor="#f778ba33", color="#f778ba"',
+  };
+  
+  // Add nodes
+  for (const node of graph.nodes || []) {
+    const style = styles[node.type] || 'fillcolor="#8b949e33", color="#8b949e"';
+    const label = (node.label || node.id).replace(/"/g, '\\"').slice(0, 50);
+    lines.push(`  "${node.id}" [label="${label}", ${style}];`);
+  }
+  
+  lines.push('');
+  
+  // Add edges
+  for (const edge of graph.edges || []) {
+    const label = edge.type || '';
+    lines.push(`  "${edge.source}" -> "${edge.target}" [label="${label}"];`);
+  }
+  
+  lines.push('}');
+  
+  return lines.join('\n');
+}
+
+/**
+ * Convert graph to Mermaid format
+ * @param {object} graph - Graph data
+ * @returns {string} Mermaid content
+ */
+function graphToMermaid(graph) {
+  const lines = ['flowchart LR'];
+  
+  // Node shape by type
+  const shapes = {
+    finding: ['{{', '}}'],
+    file: ['[/', '/]'],
+    receipt: ['([', '])'],
+    route: ['[', ']'],
+    component: ['(', ')'],
+  };
+  
+  // Add nodes
+  for (const node of graph.nodes || []) {
+    const [open, close] = shapes[node.type] || ['[', ']'];
+    const label = (node.label || node.id).replace(/"/g, '').slice(0, 40);
+    const id = node.id.replace(/[^a-zA-Z0-9]/g, '_');
+    lines.push(`  ${id}${open}"${label}"${close}`);
+  }
+  
+  lines.push('');
+  
+  // Add edges
+  for (const edge of graph.edges || []) {
+    const sourceId = edge.source.replace(/[^a-zA-Z0-9]/g, '_');
+    const targetId = edge.target.replace(/[^a-zA-Z0-9]/g, '_');
+    const label = edge.type ? `|${edge.type}|` : '';
+    lines.push(`  ${sourceId} -->${label} ${targetId}`);
+  }
+  
+  return lines.join('\n');
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// HTML VISUALIZATION
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Generate interactive HTML visualization
+ * @param {object} graph - Enhanced graph data
+ * @returns {string} HTML content
+ */
+function generateHtmlVisualization(graph) {
+  const stats = graph.statistics || {};
+  const mermaidCode = graphToMermaid(graph).replace(/`/g, '\\`');
+  
+  const receiptCards = [];
+  if (graph.receipts?.ship) {
+    receiptCards.push(`
+      <div class="receipt-card ship">
+        <div class="receipt-icon">🚀</div>
+        <div class="receipt-info">
+          <div class="receipt-type">Ship Receipt</div>
+          <div class="receipt-verdict">${graph.receipts.ship.verdict || 'N/A'}</div>
+          <div class="receipt-time">${graph.receipts.ship.timestamp ? new Date(graph.receipts.ship.timestamp).toLocaleString() : 'N/A'}</div>
+        </div>
+      </div>
+    `);
+  }
+  if (graph.receipts?.reality) {
+    receiptCards.push(`
+      <div class="receipt-card reality">
+        <div class="receipt-icon">🔍</div>
+        <div class="receipt-info">
+          <div class="receipt-type">Reality Receipt</div>
+          <div class="receipt-verdict">${graph.receipts.reality.verdict || 'N/A'}</div>
+          <div class="receipt-time">Run: ${graph.receipts.reality.runId || 'N/A'}</div>
+        </div>
+      </div>
+    `);
+  }
+  if (graph.receipts?.scan) {
+    receiptCards.push(`
+      <div class="receipt-card scan">
+        <div class="receipt-icon">📊</div>
+        <div class="receipt-info">
+          <div class="receipt-type">Scan Receipt</div>
+          <div class="receipt-verdict">${graph.receipts.scan.findingCount} findings</div>
+          <div class="receipt-time">${graph.receipts.scan.timestamp ? new Date(graph.receipts.scan.timestamp).toLocaleString() : 'N/A'}</div>
+        </div>
+      </div>
+    `);
+  }
+  
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Proof Graph - Vibecheck</title>
+  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+  <style>
+    :root {
+      --bg: #0d1117;
+      --surface: #161b22;
+      --border: #30363d;
+      --text: #c9d1d9;
+      --text-muted: #8b949e;
+      --accent: #ff9650;
+      --success: #3fb950;
+      --warning: #d29922;
+      --danger: #f85149;
+      --info: #58a6ff;
+    }
+    
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+    }
+    
+    .header {
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      padding: 1.5rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    
+    h1 {
+      font-size: 1.5rem;
+      color: var(--accent);
+    }
+    
+    .stats {
+      display: flex;
+      gap: 2rem;
+    }
+    
+    .stat {
+      text-align: center;
+    }
+    
+    .stat-value {
+      font-size: 1.5rem;
+      font-weight: bold;
+    }
+    
+    .stat-label {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+    }
+    
+    .container {
+      display: flex;
+      height: calc(100vh - 80px);
+    }
+    
+    .sidebar {
+      width: 320px;
+      background: var(--surface);
+      border-right: 1px solid var(--border);
+      overflow-y: auto;
+      padding: 1rem;
+    }
+    
+    .sidebar h2 {
+      font-size: 0.875rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-bottom: 1rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid var(--border);
+    }
+    
+    .receipt-card {
+      background: var(--bg);
+      border-radius: 8px;
+      padding: 1rem;
+      margin-bottom: 0.75rem;
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+      border-left: 3px solid;
+    }
+    
+    .receipt-card.ship { border-color: var(--success); }
+    .receipt-card.reality { border-color: var(--info); }
+    .receipt-card.scan { border-color: var(--warning); }
+    
+    .receipt-icon {
+      font-size: 1.5rem;
+    }
+    
+    .receipt-type {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+    }
+    
+    .receipt-verdict {
+      font-weight: 600;
+    }
+    
+    .receipt-time {
+      font-size: 0.75rem;
+      color: var(--text-muted);
+    }
+    
+    .legend {
+      margin-top: 1.5rem;
+    }
+    
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 0.5rem;
+      font-size: 0.875rem;
+    }
+    
+    .legend-color {
+      width: 12px;
+      height: 12px;
+      border-radius: 3px;
+    }
+    
+    .legend-color.finding { background: #ff7b72; }
+    .legend-color.file { background: #58a6ff; }
+    .legend-color.receipt { background: #3fb950; }
+    .legend-color.route { background: #a371f7; }
+    
+    .main {
+      flex: 1;
+      overflow: auto;
+      padding: 2rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    
+    .mermaid {
+      background: var(--surface);
+      border-radius: 12px;
+      padding: 2rem;
+      min-width: 600px;
+    }
+    
+    .controls {
+      margin-bottom: 1rem;
+      display: flex;
+      gap: 0.5rem;
+    }
+    
+    button {
+      background: var(--surface);
+      color: var(--text);
+      border: 1px solid var(--border);
+      padding: 0.5rem 1rem;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 0.875rem;
+    }
+    
+    button:hover {
+      border-color: var(--accent);
+    }
+    
+    .node-list {
+      max-height: 300px;
+      overflow-y: auto;
+    }
+    
+    .node-item {
+      padding: 0.5rem;
+      border-radius: 4px;
+      margin-bottom: 0.25rem;
+      font-size: 0.8rem;
+      background: var(--bg);
+      cursor: pointer;
+    }
+    
+    .node-item:hover {
+      border: 1px solid var(--accent);
+    }
+    
+    .node-type {
+      font-size: 0.65rem;
+      color: var(--text-muted);
+      text-transform: uppercase;
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>Proof Graph</h1>
+    <div class="stats">
+      <div class="stat">
+        <div class="stat-value">${stats.totalNodes || 0}</div>
+        <div class="stat-label">Nodes</div>
+      </div>
+      <div class="stat">
+        <div class="stat-value">${stats.totalEdges || 0}</div>
+        <div class="stat-label">Edges</div>
+      </div>
+      <div class="stat">
+        <div class="stat-value">${stats.findingsBySeverity?.BLOCK || 0}</div>
+        <div class="stat-label">Blocks</div>
+      </div>
+      <div class="stat">
+        <div class="stat-value">${stats.findingsBySeverity?.WARN || 0}</div>
+        <div class="stat-label">Warns</div>
+      </div>
+    </div>
+  </div>
+  
+  <div class="container">
+    <div class="sidebar">
+      <h2>Cross-References</h2>
+      ${receiptCards.length > 0 ? receiptCards.join('') : '<p style="color: var(--text-muted); font-size: 0.875rem;">No receipts found</p>'}
+      
+      <div class="legend">
+        <h2>Legend</h2>
+        <div class="legend-item">
+          <div class="legend-color finding"></div>
+          <span>Finding</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-color file"></div>
+          <span>File</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-color receipt"></div>
+          <span>Receipt</span>
+        </div>
+        <div class="legend-item">
+          <div class="legend-color route"></div>
+          <span>Route</span>
+        </div>
+      </div>
+      
+      <h2 style="margin-top: 1.5rem;">Nodes (${(graph.nodes || []).length})</h2>
+      <div class="node-list">
+        ${(graph.nodes || []).slice(0, 50).map(n => `
+          <div class="node-item">
+            <div class="node-type">${n.type}</div>
+            <div>${(n.label || n.id).slice(0, 40)}</div>
+          </div>
+        `).join('')}
+        ${(graph.nodes || []).length > 50 ? `<p style="color: var(--text-muted); padding: 0.5rem;">... and ${(graph.nodes || []).length - 50} more</p>` : ''}
+      </div>
+    </div>
+    
+    <div class="main">
+      <div class="controls">
+        <button onclick="location.reload()">Refresh</button>
+        <button onclick="downloadSVG()">Download SVG</button>
+      </div>
+      
+      <pre class="mermaid">
+${mermaidCode}
+      </pre>
+    </div>
+  </div>
+  
+  <script>
+    mermaid.initialize({ 
+      startOnLoad: true,
+      theme: 'dark',
+      securityLevel: 'loose',
+    });
+    
+    function downloadSVG() {
+      const svg = document.querySelector('.mermaid svg');
+      if (svg) {
+        const svgData = new XMLSerializer().serializeToString(svg);
+        const blob = new Blob([svgData], { type: 'image/svg+xml' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'proof-graph.svg';
+        a.click();
+        URL.revokeObjectURL(url);
+      }
+    }
+    
+    // Embedded graph data
+    window.PROOF_GRAPH = ${JSON.stringify(graph, null, 2)};
+  </script>
+</body>
+</html>`;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// PACK BUILDER
+// ═══════════════════════════════════════════════════════════════════════════════
+
+/**
+ * Build proof graph pack
+ * @param {string} repoRoot - Repository root
+ * @param {object} options - Build options
+ * @returns {object} Build result
+ */
+async function buildProofGraphPack(repoRoot, options = {}) {
+  const { outputDir, createZip = false } = options;
+  
+  // Load graph data
+  let graph = loadProofGraph(repoRoot);
+  
+  if (!graph) {
+    graph = { nodes: [], edges: [], metadata: { empty: true } };
+  }
+  
+  // Load receipts and proof runs
+  const receipts = collectReceiptReferences(repoRoot);
+  const proofRuns = loadProofRuns(repoRoot);
+  
+  // Enhance graph
+  const enhancedGraph = enhanceGraphWithReceipts(graph, receipts, proofRuns);
+  
+  // Generate formats
+  const dotFormat = graphToDot(enhancedGraph);
+  const mermaidFormat = graphToMermaid(enhancedGraph);
+  const htmlVisualization = generateHtmlVisualization(enhancedGraph);
+  
+  // Build pack
+  const builder = createPackBuilder(PACK_TYPE.PROOF_GRAPH, repoRoot);
+  
+  if (outputDir) {
+    builder.outputTo(outputDir);
+  }
+  
+  builder
+    .addArtifact('proof-graph.json', JSON.stringify(enhancedGraph, null, 2), ARTIFACT_TYPE.JSON, 'Enhanced proof graph data')
+    .addArtifact('proof-graph.dot', dotFormat, ARTIFACT_TYPE.DOT, 'Graphviz DOT format')
+    .addArtifact('proof-graph.mmd', mermaidFormat, ARTIFACT_TYPE.MERMAID, 'Mermaid diagram format')
+    .addArtifact('visualization.html', htmlVisualization, ARTIFACT_TYPE.HTML, 'Interactive graph visualization')
+    .withMetadata({
+      nodeCount: enhancedGraph.nodes?.length || 0,
+      edgeCount: enhancedGraph.edges?.length || 0,
+      hasShipReceipt: !!receipts.ship,
+      hasRealityReceipt: !!receipts.reality,
+      hasScanReceipt: !!receipts.scan,
+      proofRunCount: proofRuns.length,
+      statistics: enhancedGraph.statistics,
+    });
+  
+  if (createZip) {
+    return builder.buildZip();
+  }
+  
+  return builder.build();
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// EXPORTS
+// ═══════════════════════════════════════════════════════════════════════════════
+
+module.exports = {
+  // Loading
+  loadProofGraph,
+  loadProofRuns,
+  buildGraphFromScan,
+  
+  // Enhancement
+  enhanceGraphWithReceipts,
+  computeGraphStats,
+  
+  // Formatters
+  graphToDot,
+  graphToMermaid,
+  generateHtmlVisualization,
+  
+  // Builder
+  buildProofGraphPack,
+};