@vibecheckai/cli 3.0.4 → 3.0.7

package/bin/runners/lib/extractors/ui-bindings.js

@@ -0,0 +1,547 @@
+/**
+ * UI Bindings Extractor v2
+ * 
+ * Extracts static UI event bindings from TSX/JSX for proof graph.
+ * Detects onClick, onSubmit, form actions, useTransition, useFormState patterns.
+ */
+
+"use strict";
+
+const fs = require("fs");
+const path = require("path");
+const crypto = require("crypto");
+const fg = require("fast-glob");
+
+let parser, traverse, t;
+try {
+  parser = require("@babel/parser");
+  traverse = require("@babel/traverse").default;
+  t = require("@babel/types");
+} catch {
+  parser = null;
+  traverse = null;
+  t = null;
+}
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+const UI_EVENT_ATTRIBUTES = [
+  "onClick", "onSubmit", "onBlur", "onChange", "onFocus",
+  "onDoubleClick", "onMouseDown", "onMouseUp", "onKeyDown", "onKeyUp",
+];
+
+const FORM_ACTION_PATTERNS = [
+  "action", // <form action={serverAction}>
+  "formAction", // <button formAction={...}>
+];
+
+const TRANSITION_HOOKS = [
+  "useTransition",
+  "useFormState",
+  "useActionState",
+  "useFormStatus",
+];
+
+const IGNORE_PATTERNS = [
+  "**/node_modules/**",
+  "**/.next/**",
+  "**/dist/**",
+  "**/build/**",
+  "**/coverage/**",
+  "**/*.d.ts",
+  "**/*.min.js",
+];
+
+// =============================================================================
+// EXTRACTION
+// =============================================================================
+
+/**
+ * Extract all UI bindings from a project
+ */
+function extractUIBindings(projectRoot, options = {}) {
+  if (!parser || !traverse) {
+    return { bindings: [], errors: [{ message: "Babel parser not available" }], stats: {} };
+  }
+
+  const {
+    include = ["**/*.tsx", "**/*.jsx", "**/*.js"],
+    exclude = IGNORE_PATTERNS,
+  } = options;
+
+  const files = fg.sync(include, {
+    cwd: projectRoot,
+    absolute: true,
+    ignore: exclude,
+  });
+
+  const bindings = [];
+  const errors = [];
+  const transitionScopes = new Map(); // Track useTransition scopes
+
+  for (const fileAbs of files) {
+    try {
+      const fileRel = path.relative(projectRoot, fileAbs).replace(/\\/g, "/");
+      const code = fs.readFileSync(fileAbs, "utf8");
+      
+      const fileBindings = extractBindingsFromFile(code, fileAbs, fileRel, transitionScopes);
+      bindings.push(...fileBindings);
+    } catch (e) {
+      errors.push({ file: fileAbs, message: e.message });
+    }
+  }
+
+  return {
+    bindings,
+    errors,
+    stats: {
+      filesScanned: files.length,
+      bindingsFound: bindings.length,
+      byEvent: countByEvent(bindings),
+    },
+  };
+}
+
+/**
+ * Extract bindings from a single file
+ */
+function extractBindingsFromFile(code, fileAbs, fileRel, transitionScopes) {
+  const bindings = [];
+
+  let ast;
+  try {
+    ast = parser.parse(code, {
+      sourceType: "unambiguous",
+      plugins: ["typescript", "jsx"],
+      errorRecovery: true,
+    });
+  } catch {
+    return bindings;
+  }
+
+  // First pass: find useTransition and similar hooks
+  const hookScopes = new Map();
+  
+  traverse(ast, {
+    VariableDeclarator(p) {
+      const init = p.node.init;
+      if (!t.isCallExpression(init)) return;
+      
+      const callee = init.callee;
+      let hookName = null;
+      
+      if (t.isIdentifier(callee) && TRANSITION_HOOKS.includes(callee.name)) {
+        hookName = callee.name;
+      }
+      
+      if (hookName && t.isArrayPattern(p.node.id)) {
+        // const [isPending, startTransition] = useTransition()
+        for (const el of p.node.id.elements) {
+          if (t.isIdentifier(el)) {
+            hookScopes.set(el.name, {
+              hook: hookName,
+              file: fileRel,
+              line: p.node.loc?.start?.line,
+            });
+          }
+        }
+      }
+    },
+  });
+
+  // Second pass: extract JSX event bindings
+  traverse(ast, {
+    JSXAttribute(p) {
+      const attrName = p.node.name?.name;
+      if (!attrName) return;
+
+      // Check for event handlers
+      if (UI_EVENT_ATTRIBUTES.includes(attrName)) {
+        const binding = extractEventBinding(p, attrName, fileRel, hookScopes, code);
+        if (binding) bindings.push(binding);
+      }
+
+      // Check for form actions
+      if (FORM_ACTION_PATTERNS.includes(attrName)) {
+        const binding = extractFormActionBinding(p, attrName, fileRel, code);
+        if (binding) bindings.push(binding);
+      }
+    },
+
+    // Track form submissions
+    JSXOpeningElement(p) {
+      const tagName = p.node.name?.name;
+      if (tagName === "form") {
+        const actionAttr = p.node.attributes.find(
+          a => t.isJSXAttribute(a) && a.name?.name === "action"
+        );
+        
+        if (actionAttr && t.isJSXExpressionContainer(actionAttr.value)) {
+          // Server action form
+          const binding = {
+            bindingId: generateBindingId(fileRel, p.node.loc),
+            file: fileRel,
+            lines: getLines(p.node.loc),
+            event: "formAction",
+            elementType: "form",
+            labelHint: extractLabelHint(p.parentPath, code),
+            selectorHint: buildSelectorHint(p),
+            handlerType: "serverAction",
+            calls: [], // Will be linked later
+            evidence: [{
+              id: generateEvidenceId(fileRel, p.node.loc),
+              kind: "file",
+              file: fileRel,
+              lines: getLines(p.node.loc),
+              snippetHash: hashSnippet(getSnippet(code, p.node.loc)),
+              reason: "Form with server action",
+            }],
+          };
+          bindings.push(binding);
+        }
+      }
+    },
+  });
+
+  return bindings;
+}
+
+/**
+ * Extract event binding details
+ */
+function extractEventBinding(attrPath, eventName, fileRel, hookScopes, code) {
+  const value = attrPath.node.value;
+  if (!value) return null;
+
+  let handlerType = "unknown";
+  let handlerName = null;
+  let usesTransition = false;
+  let transitionHook = null;
+
+  if (t.isJSXExpressionContainer(value)) {
+    const expr = value.expression;
+
+    // onClick={handleClick}
+    if (t.isIdentifier(expr)) {
+      handlerName = expr.name;
+      handlerType = "function";
+      
+      // Check if handler uses a transition hook
+      if (hookScopes.has(expr.name)) {
+        usesTransition = true;
+        transitionHook = hookScopes.get(expr.name).hook;
+      }
+    }
+    // onClick={() => handleClick()}
+    else if (t.isArrowFunctionExpression(expr) || t.isFunctionExpression(expr)) {
+      handlerType = "inline";
+      
+      // Check body for transition calls
+      const body = expr.body;
+      if (t.isCallExpression(body) && t.isIdentifier(body.callee)) {
+        handlerName = body.callee.name;
+        if (hookScopes.has(body.callee.name)) {
+          usesTransition = true;
+          transitionHook = hookScopes.get(body.callee.name).hook;
+        }
+      }
+    }
+    // onClick={mutation.mutate}
+    else if (t.isMemberExpression(expr)) {
+      handlerType = "method";
+      if (t.isIdentifier(expr.object) && t.isIdentifier(expr.property)) {
+        handlerName = `${expr.object.name}.${expr.property.name}`;
+      }
+    }
+  }
+
+  // Get parent element info
+  const elementPath = attrPath.parentPath;
+  const elementType = getElementType(elementPath);
+  const labelHint = extractLabelHint(elementPath, code);
+  const selectorHint = buildSelectorHint(elementPath);
+
+  const loc = attrPath.node.loc;
+
+  return {
+    bindingId: generateBindingId(fileRel, loc),
+    file: fileRel,
+    lines: getLines(loc),
+    event: eventName,
+    elementType,
+    labelHint,
+    selectorHint,
+    handlerType,
+    handlerName,
+    usesTransition,
+    transitionHook,
+    calls: [], // Will be linked by call extractor
+    evidence: [{
+      id: generateEvidenceId(fileRel, loc),
+      kind: "file",
+      file: fileRel,
+      lines: getLines(loc),
+      snippetHash: hashSnippet(getSnippet(code, loc)),
+      reason: `${eventName} handler on ${elementType}`,
+    }],
+  };
+}
+
+/**
+ * Extract form action binding
+ */
+function extractFormActionBinding(attrPath, attrName, fileRel, code) {
+  const value = attrPath.node.value;
+  if (!t.isJSXExpressionContainer(value)) return null;
+
+  const expr = value.expression;
+  let actionName = null;
+  let handlerType = "serverAction";
+
+  if (t.isIdentifier(expr)) {
+    actionName = expr.name;
+  } else if (t.isMemberExpression(expr) && t.isIdentifier(expr.property)) {
+    actionName = expr.property.name;
+  }
+
+  const elementPath = attrPath.parentPath;
+  const elementType = getElementType(elementPath);
+  const labelHint = extractLabelHint(elementPath, code);
+  const loc = attrPath.node.loc;
+
+  return {
+    bindingId: generateBindingId(fileRel, loc),
+    file: fileRel,
+    lines: getLines(loc),
+    event: "formAction",
+    elementType,
+    labelHint,
+    selectorHint: buildSelectorHint(elementPath),
+    handlerType,
+    handlerName: actionName,
+    calls: [],
+    evidence: [{
+      id: generateEvidenceId(fileRel, loc),
+      kind: "file",
+      file: fileRel,
+      lines: getLines(loc),
+      snippetHash: hashSnippet(getSnippet(code, loc)),
+      reason: `Server action ${attrName}`,
+    }],
+  };
+}
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+function getElementType(elementPath) {
+  if (!elementPath || !elementPath.node) return "unknown";
+  
+  const opening = elementPath.node.openingElement || elementPath.node;
+  if (!opening || !opening.name) return "unknown";
+  
+  if (t.isJSXIdentifier(opening.name)) {
+    return opening.name.name;
+  }
+  return "unknown";
+}
+
+function extractLabelHint(elementPath, code) {
+  if (!elementPath || !elementPath.node) return null;
+
+  const opening = elementPath.node.openingElement || elementPath.node;
+  if (!opening || !opening.attributes) return null;
+
+  // Try aria-label
+  for (const attr of opening.attributes) {
+    if (t.isJSXAttribute(attr) && attr.name?.name === "aria-label") {
+      if (t.isStringLiteral(attr.value)) {
+        return attr.value.value;
+      }
+    }
+  }
+
+  // Try children text content
+  const children = elementPath.node.children;
+  if (children) {
+    for (const child of children) {
+      if (t.isJSXText(child)) {
+        const text = child.value.trim();
+        if (text && text.length < 50) return text;
+      }
+      if (t.isJSXExpressionContainer(child) && t.isStringLiteral(child.expression)) {
+        return child.expression.value;
+      }
+    }
+  }
+
+  // Try title attribute
+  for (const attr of opening.attributes) {
+    if (t.isJSXAttribute(attr) && attr.name?.name === "title") {
+      if (t.isStringLiteral(attr.value)) {
+        return attr.value.value;
+      }
+    }
+  }
+
+  return null;
+}
+
+function buildSelectorHint(elementPath) {
+  if (!elementPath || !elementPath.node) return null;
+
+  const opening = elementPath.node.openingElement || elementPath.node;
+  if (!opening || !opening.attributes) return null;
+
+  let tagName = "unknown";
+  if (opening.name && t.isJSXIdentifier(opening.name)) {
+    tagName = opening.name.name.toLowerCase();
+  }
+
+  // Check for id
+  for (const attr of opening.attributes) {
+    if (t.isJSXAttribute(attr) && attr.name?.name === "id") {
+      if (t.isStringLiteral(attr.value)) {
+        return `#${attr.value.value}`;
+      }
+    }
+  }
+
+  // Check for data-testid
+  for (const attr of opening.attributes) {
+    if (t.isJSXAttribute(attr) && (attr.name?.name === "data-testid" || attr.name?.name === "data-test-id")) {
+      if (t.isStringLiteral(attr.value)) {
+        return `[data-testid="${attr.value.value}"]`;
+      }
+    }
+  }
+
+  // Check for className
+  for (const attr of opening.attributes) {
+    if (t.isJSXAttribute(attr) && (attr.name?.name === "className" || attr.name?.name === "class")) {
+      if (t.isStringLiteral(attr.value)) {
+        const firstClass = attr.value.value.split(/\s+/)[0];
+        if (firstClass) return `${tagName}.${firstClass}`;
+      }
+    }
+  }
+
+  // Check for type on buttons
+  if (tagName === "button" || tagName === "input") {
+    for (const attr of opening.attributes) {
+      if (t.isJSXAttribute(attr) && attr.name?.name === "type") {
+        if (t.isStringLiteral(attr.value)) {
+          return `${tagName}[type="${attr.value.value}"]`;
+        }
+      }
+    }
+  }
+
+  return tagName;
+}
+
+function getLines(loc) {
+  if (!loc) return "1-1";
+  const start = loc.start?.line || 1;
+  const end = loc.end?.line || start;
+  return `${start}-${end}`;
+}
+
+function getSnippet(code, loc) {
+  if (!loc) return "";
+  const lines = code.split(/\r?\n/);
+  const start = Math.max(1, loc.start?.line || 1);
+  const end = Math.min(lines.length, loc.end?.line || start);
+  return lines.slice(start - 1, end).join("\n");
+}
+
+function hashSnippet(snippet) {
+  return "sha256:" + crypto.createHash("sha256").update(snippet).digest("hex").slice(0, 16);
+}
+
+function generateBindingId(file, loc) {
+  const hash = crypto.createHash("sha256")
+    .update(`${file}:${loc?.start?.line || 0}:${loc?.start?.column || 0}`)
+    .digest("hex")
+    .slice(0, 8)
+    .toUpperCase();
+  return `UIB_${hash}`;
+}
+
+function generateEvidenceId(file, loc) {
+  const hash = crypto.createHash("sha256")
+    .update(`${file}:${loc?.start?.line || 0}`)
+    .digest("hex")
+    .slice(0, 12)
+    .toUpperCase();
+  return `E_${hash}`;
+}
+
+function countByEvent(bindings) {
+  const counts = {};
+  for (const b of bindings) {
+    counts[b.event] = (counts[b.event] || 0) + 1;
+  }
+  return counts;
+}
+
+// =============================================================================
+// LINKING
+// =============================================================================
+
+/**
+ * Link UI bindings to client calls
+ * Called after both extractions complete
+ */
+function linkBindingsToClientCalls(bindings, clientCalls, options = {}) {
+  const { projectRoot = "" } = options;
+
+  // Index client calls by file
+  const callsByFile = new Map();
+  for (const call of clientCalls) {
+    for (const ev of call.evidence || []) {
+      if (ev.file) {
+        if (!callsByFile.has(ev.file)) {
+          callsByFile.set(ev.file, []);
+        }
+        callsByFile.get(ev.file).push(call);
+      }
+    }
+  }
+
+  // Link bindings to calls in same file (heuristic: same function scope)
+  for (const binding of bindings) {
+    const fileCalls = callsByFile.get(binding.file) || [];
+    
+    // Simple heuristic: calls in nearby lines
+    const bindingLine = parseInt(binding.lines.split("-")[0], 10);
+    const nearbyCalls = fileCalls.filter(call => {
+      for (const ev of call.evidence || []) {
+        if (ev.file === binding.file && ev.lines) {
+          const callLine = parseInt(ev.lines.split("-")[0], 10);
+          // Within 50 lines - rough heuristic for same function
+          if (Math.abs(callLine - bindingLine) < 50) {
+            return true;
+          }
+        }
+      }
+      return false;
+    });
+
+    binding.calls = nearbyCalls.map(c => c.id);
+  }
+
+  return bindings;
+}
+
+module.exports = {
+  extractUIBindings,
+  extractBindingsFromFile,
+  linkBindingsToClientCalls,
+  UI_EVENT_ATTRIBUTES,
+  FORM_ACTION_PATTERNS,
+  TRANSITION_HOOKS,
+};