@vibecheckai/cli 3.1.0 → 3.1.2

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

@@ -1,547 +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,
-};
+/**
+ * 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,
+};