@vibecheckai/cli 3.3.0 → 3.5.0

package/bin/runners/lib/polish/autofix/accessibility-fixes.js

@@ -0,0 +1,333 @@
+/**
+ * Accessibility Fixes - Auto-fix Polish Pass
+ * 
+ * Fixes common accessibility issues:
+ * - Missing alt attributes on images
+ * - Missing aria-label on icon buttons
+ * - Missing form labels
+ * - Missing role attributes where needed
+ * 
+ * Uses Babel AST for JSX/TSX analysis.
+ */
+
+"use strict";
+
+const { parse } = require("@babel/parser");
+const traverse = require("@babel/traverse").default || require("@babel/traverse");
+const generate = require("@babel/generator").default || require("@babel/generator");
+const t = require("@babel/types");
+const fs = require("fs");
+const path = require("path");
+const { findAllFilesSync, readFileSafeSync } = require("../utils");
+
+/**
+ * Check if JSX element has an attribute
+ */
+function hasAttribute(node, attrName) {
+  if (!node.openingElement?.attributes) return false;
+
+  return node.openingElement.attributes.some((attr) => {
+    if (attr.type === "JSXAttribute" && attr.name.name === attrName) {
+      return true;
+    }
+    // Check spread attributes (can't be sure, assume covered)
+    if (attr.type === "JSXSpreadAttribute") {
+      return true;
+    }
+    return false;
+  });
+}
+
+/**
+ * Get attribute value
+ */
+function getAttributeValue(node, attrName) {
+  if (!node.openingElement?.attributes) return null;
+
+  for (const attr of node.openingElement.attributes) {
+    if (attr.type === "JSXAttribute" && attr.name.name === attrName) {
+      if (attr.value?.type === "StringLiteral") {
+        return attr.value.value;
+      }
+      if (attr.value?.type === "JSXExpressionContainer") {
+        return attr.value.expression;
+      }
+      // Boolean attribute (no value = true)
+      if (attr.value === null) {
+        return true;
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Add JSX attribute to element
+ */
+function addAttribute(node, name, value) {
+  const attr = t.jsxAttribute(t.jsxIdentifier(name), t.stringLiteral(value));
+  node.openingElement.attributes.push(attr);
+}
+
+/**
+ * Parse code into AST
+ */
+function parseCode(code, filePath) {
+  const isTypeScript = filePath.endsWith(".ts") || filePath.endsWith(".tsx");
+  const plugins = ["decorators-legacy", "classProperties", "jsx"];
+
+  if (isTypeScript) plugins.push("typescript");
+
+  return parse(code, {
+    sourceType: "module",
+    plugins,
+    errorRecovery: true,
+  });
+}
+
+/**
+ * Check if element is likely an icon (based on name or import)
+ */
+function isIconElement(node) {
+  const elementName = node.openingElement?.name;
+  if (!elementName) return false;
+
+  let name = "";
+  if (elementName.type === "JSXIdentifier") {
+    name = elementName.name;
+  } else if (elementName.type === "JSXMemberExpression") {
+    name = elementName.property?.name || "";
+  }
+
+  // Common icon naming patterns
+  const iconPatterns = [
+    /Icon$/i,
+    /^Icon/i,
+    /^Fa[A-Z]/, // FontAwesome
+    /^Md[A-Z]/, // Material Design
+    /^Io[A-Z]/, // Ionicons
+    /^Fi[A-Z]/, // Feather
+    /^Bs[A-Z]/, // Bootstrap
+    /^Ai[A-Z]/, // Ant Design
+    /^Bi[A-Z]/, // BoxIcons
+    /^Ri[A-Z]/, // Remix Icons
+    /^Hi[A-Z]/, // Hero Icons
+    /^Lu[A-Z]/, // Lucide
+  ];
+
+  return iconPatterns.some((p) => p.test(name));
+}
+
+/**
+ * Process a single file
+ */
+function processFile(filePath, options = {}) {
+  const { dryRun = true } = options;
+  const changes = [];
+
+  // Only process JSX/TSX files
+  if (!filePath.endsWith(".jsx") && !filePath.endsWith(".tsx")) {
+    return { changes: [], modified: false };
+  }
+
+  const code = readFileSafeSync(filePath);
+  if (!code) return { changes: [], modified: false };
+
+  let ast;
+  try {
+    ast = parseCode(code, filePath);
+  } catch (err) {
+    return { changes: [], modified: false, error: `Parse error: ${err.message}` };
+  }
+
+  let modified = false;
+  const relativePath = path.relative(process.cwd(), filePath);
+
+  traverse(ast, {
+    JSXElement(nodePath) {
+      const { node } = nodePath;
+      const elementName = node.openingElement?.name;
+      if (!elementName) return;
+
+      let tagName = "";
+      if (elementName.type === "JSXIdentifier") {
+        tagName = elementName.name;
+      }
+
+      const line = node.loc?.start?.line || "?";
+
+      // 1. Check img elements for alt attribute
+      if (tagName === "img" || tagName === "Image") {
+        if (!hasAttribute(node, "alt")) {
+          changes.push({
+            file: relativePath,
+            line,
+            type: "missing-alt",
+            detail: `<${tagName}> missing alt attribute`,
+            suggestion: "Add descriptive alt text for screen readers",
+          });
+
+          if (!dryRun) {
+            addAttribute(node, "alt", ""); // Add empty alt, user should fill
+            modified = true;
+          }
+        } else {
+          // Check if alt is empty string (decorative image should have alt="")
+          const altValue = getAttributeValue(node, "alt");
+          if (altValue === "" || altValue === null) {
+            // Empty alt is valid for decorative images
+          }
+        }
+      }
+
+      // 2. Check buttons with only icons for aria-label
+      if (tagName === "button" || tagName === "Button") {
+        const hasText = node.children?.some(
+          (child) =>
+            child.type === "JSXText" && child.value.trim() !== "" ||
+            child.type === "JSXExpressionContainer"
+        );
+
+        const hasAriaLabel =
+          hasAttribute(node, "aria-label") ||
+          hasAttribute(node, "aria-labelledby") ||
+          hasAttribute(node, "title");
+
+        // Check if button contains only icons
+        const childElements = node.children?.filter((c) => c.type === "JSXElement");
+        const hasOnlyIcons =
+          childElements?.length > 0 &&
+          childElements.every((c) => isIconElement(c));
+
+        if (!hasText && hasOnlyIcons && !hasAriaLabel) {
+          changes.push({
+            file: relativePath,
+            line,
+            type: "missing-aria-label",
+            detail: "Button with icon-only content missing aria-label",
+            suggestion: "Add aria-label to describe button action",
+          });
+
+          if (!dryRun) {
+            addAttribute(node, "aria-label", ""); // Add placeholder
+            modified = true;
+          }
+        }
+      }
+
+      // 3. Check interactive elements for keyboard accessibility
+      if (tagName === "div" || tagName === "span") {
+        const hasOnClick = hasAttribute(node, "onClick");
+        const hasRole = hasAttribute(node, "role");
+        const hasTabIndex = hasAttribute(node, "tabIndex");
+
+        if (hasOnClick && !hasRole) {
+          changes.push({
+            file: relativePath,
+            line,
+            type: "missing-role",
+            detail: `<${tagName}> with onClick missing role attribute`,
+            suggestion: 'Add role="button" for interactive elements',
+          });
+
+          if (!dryRun) {
+            addAttribute(node, "role", "button");
+            if (!hasTabIndex) {
+              addAttribute(node, "tabIndex", "0");
+            }
+            modified = true;
+          }
+        }
+      }
+
+      // 4. Check form inputs for labels
+      if (tagName === "input" || tagName === "Input" || tagName === "select" || tagName === "textarea") {
+        const hasLabel =
+          hasAttribute(node, "aria-label") ||
+          hasAttribute(node, "aria-labelledby") ||
+          hasAttribute(node, "id"); // id can be associated with <label htmlFor>
+
+        const inputType = getAttributeValue(node, "type");
+
+        // Skip hidden, submit, button types
+        if (inputType === "hidden" || inputType === "submit" || inputType === "button") {
+          return;
+        }
+
+        if (!hasLabel) {
+          changes.push({
+            file: relativePath,
+            line,
+            type: "missing-label",
+            detail: `<${tagName}> missing associated label`,
+            suggestion: "Add aria-label or associate with <label> via id",
+          });
+        }
+      }
+    },
+  });
+
+  // Write changes
+  if (modified && !dryRun) {
+    try {
+      const output = generate(ast, { retainLines: true }, code);
+      fs.writeFileSync(filePath, output.code, "utf8");
+    } catch (err) {
+      return { changes, modified: false, error: `Generate error: ${err.message}` };
+    }
+  }
+
+  return { changes, modified };
+}
+
+/**
+ * Fix accessibility issues in all files
+ */
+async function fixAccessibility(targetPath, options = {}) {
+  const { dryRun = true } = options;
+
+  // Only JSX/TSX files
+  const pattern = /\.(jsx|tsx)$/;
+  const files = findAllFilesSync(targetPath, pattern);
+
+  const allChanges = [];
+  const modifiedFiles = [];
+  const errors = [];
+
+  for (const file of files) {
+    const result = processFile(file, { dryRun });
+
+    if (result.error) {
+      errors.push({ file, error: result.error });
+    }
+
+    if (result.changes.length > 0) {
+      allChanges.push(...result.changes);
+    }
+
+    if (result.modified) {
+      modifiedFiles.push(path.relative(process.cwd(), file));
+    }
+  }
+
+  return {
+    changes: allChanges,
+    files: modifiedFiles,
+    errors,
+    summary: {
+      filesScanned: files.length,
+      filesModified: modifiedFiles.length,
+      missingAlt: allChanges.filter((c) => c.type === "missing-alt").length,
+      missingAriaLabel: allChanges.filter((c) => c.type === "missing-aria-label").length,
+      missingRole: allChanges.filter((c) => c.type === "missing-role").length,
+      missingLabel: allChanges.filter((c) => c.type === "missing-label").length,
+    },
+  };
+}
+
+module.exports = {
+  fixAccessibility,
+  processFile,
+  hasAttribute,
+  isIconElement,
+};

package/bin/runners/lib/polish/autofix/async-handlers.js

@@ -0,0 +1,273 @@
+/**
+ * Async Handlers - Auto-fix Polish Pass
+ * 
+ * Wraps unhandled async/await calls in try-catch blocks.
+ * Detects:
+ * - Top-level await without try-catch
+ * - Async function bodies without error handling
+ * - Promise chains without .catch()
+ * 
+ * Note: This is a conservative pass - it suggests wrapping but
+ * only auto-applies to clear cases to avoid breaking code.
+ */
+
+"use strict";
+
+const { parse } = require("@babel/parser");
+const traverse = require("@babel/traverse").default || require("@babel/traverse");
+const generate = require("@babel/generator").default || require("@babel/generator");
+const t = require("@babel/types");
+const fs = require("fs");
+const path = require("path");
+const { findAllFilesSync, readFileSafeSync } = require("../utils");
+
+/**
+ * Check if a node is wrapped in try-catch
+ */
+function isWrappedInTryCatch(nodePath) {
+  let current = nodePath.parentPath;
+  while (current) {
+    if (current.type === "TryStatement") {
+      return true;
+    }
+    if (current.type === "FunctionDeclaration" || current.type === "ArrowFunctionExpression" || current.type === "FunctionExpression") {
+      break;
+    }
+    current = current.parentPath;
+  }
+  return false;
+}
+
+/**
+ * Check if a Promise chain has .catch()
+ */
+function hasChainedCatch(node) {
+  if (node.type !== "CallExpression") return false;
+  if (node.callee.type !== "MemberExpression") return false;
+  
+  const method = node.callee.property?.name;
+  if (method === "catch") return true;
+  
+  // Check parent for chained .catch()
+  return false;
+}
+
+/**
+ * Check if an async function has try-catch
+ */
+function asyncFunctionHasTryCatch(node) {
+  if (!node.body || node.body.type !== "BlockStatement") {
+    return false;
+  }
+
+  const body = node.body.body;
+  if (body.length === 0) return true; // Empty is fine
+
+  // Check if there's a try statement wrapping the content
+  const hasTry = body.some((stmt) => stmt.type === "TryStatement");
+  if (hasTry) return true;
+
+  // Check if all await expressions are in try blocks
+  let allAwaitsProtected = true;
+  const awaits = [];
+
+  traverse(
+    node,
+    {
+      AwaitExpression(path) {
+        awaits.push(path);
+        if (!isWrappedInTryCatch(path)) {
+          allAwaitsProtected = false;
+        }
+      },
+    },
+    null,
+    { node }
+  );
+
+  return awaits.length === 0 || allAwaitsProtected;
+}
+
+/**
+ * Create a try-catch wrapper
+ */
+function createTryCatchWrapper(statements) {
+  return t.tryStatement(
+    t.blockStatement(statements),
+    t.catchClause(
+      t.identifier("error"),
+      t.blockStatement([
+        t.expressionStatement(
+          t.callExpression(
+            t.memberExpression(t.identifier("console"), t.identifier("error")),
+            [t.stringLiteral("Error:"), t.identifier("error")]
+          )
+        ),
+        t.throwStatement(t.identifier("error")),
+      ])
+    )
+  );
+}
+
+/**
+ * Parse code into AST
+ */
+function parseCode(code, filePath) {
+  const isTypeScript = filePath.endsWith(".ts") || filePath.endsWith(".tsx");
+  const plugins = ["decorators-legacy", "classProperties"];
+
+  if (isTypeScript) plugins.push("typescript");
+  plugins.push("jsx");
+
+  return parse(code, {
+    sourceType: "module",
+    plugins,
+    errorRecovery: true,
+  });
+}
+
+/**
+ * Process a single file
+ */
+function processFile(filePath, options = {}) {
+  const { dryRun = true, aggressive = false } = options;
+  const changes = [];
+
+  const code = readFileSafeSync(filePath);
+  if (!code) return { changes: [], modified: false };
+
+  // Quick check
+  if (!code.includes("async") && !code.includes("await") && !code.includes(".then(")) {
+    return { changes: [], modified: false };
+  }
+
+  let ast;
+  try {
+    ast = parseCode(code, filePath);
+  } catch (err) {
+    return { changes: [], modified: false, error: `Parse error: ${err.message}` };
+  }
+
+  let modified = false;
+  const relativePath = path.relative(process.cwd(), filePath);
+
+  traverse(ast, {
+    // Check async functions
+    "FunctionDeclaration|ArrowFunctionExpression|FunctionExpression"(nodePath) {
+      const { node } = nodePath;
+      if (!node.async) return;
+
+      if (!asyncFunctionHasTryCatch(node)) {
+        const line = node.loc?.start?.line || "?";
+        const name = node.id?.name || "(anonymous)";
+
+        changes.push({
+          file: relativePath,
+          line,
+          type: "unhandled-async",
+          detail: `Async function '${name}' has unhandled await expressions`,
+          suggestion: "Add try-catch to handle potential errors",
+          autoFixed: false, // Suggest only, don't auto-fix by default
+        });
+
+        // Auto-fix in aggressive mode
+        if (aggressive && node.body?.type === "BlockStatement" && node.body.body.length > 0) {
+          const wrapped = createTryCatchWrapper([...node.body.body]);
+          node.body.body = [wrapped];
+          modified = true;
+          changes[changes.length - 1].autoFixed = true;
+        }
+      }
+    },
+
+    // Check Promise.then() without .catch()
+    CallExpression(nodePath) {
+      const { node } = nodePath;
+
+      if (
+        node.callee.type === "MemberExpression" &&
+        node.callee.property?.name === "then"
+      ) {
+        // Check if there's a .catch() chained
+        const parent = nodePath.parent;
+        const hasCatch =
+          parent?.type === "CallExpression" &&
+          parent.callee?.property?.name === "catch";
+
+        // Also check if the .then result is further chained
+        if (!hasCatch && !hasChainedCatch(parent)) {
+          const line = node.loc?.start?.line || "?";
+
+          changes.push({
+            file: relativePath,
+            line,
+            type: "unhandled-promise",
+            detail: "Promise .then() without .catch() handler",
+            suggestion: "Add .catch() to handle rejections",
+            autoFixed: false,
+          });
+        }
+      }
+    },
+  });
+
+  // Write changes if modified
+  if (modified && !dryRun) {
+    try {
+      const output = generate(ast, { retainLines: true }, code);
+      fs.writeFileSync(filePath, output.code, "utf8");
+    } catch (err) {
+      return { changes, modified: false, error: `Generate error: ${err.message}` };
+    }
+  }
+
+  return { changes, modified };
+}
+
+/**
+ * Wrap async handlers in all files
+ */
+async function wrapAsyncHandlers(targetPath, options = {}) {
+  const { dryRun = true, aggressive = false } = options;
+
+  const pattern = /\.(js|jsx|ts|tsx|mjs)$/;
+  const files = findAllFilesSync(targetPath, pattern);
+
+  const allChanges = [];
+  const modifiedFiles = [];
+  const errors = [];
+
+  for (const file of files) {
+    const result = processFile(file, { dryRun, aggressive });
+
+    if (result.error) {
+      errors.push({ file, error: result.error });
+    }
+
+    if (result.changes.length > 0) {
+      allChanges.push(...result.changes);
+    }
+
+    if (result.modified) {
+      modifiedFiles.push(path.relative(process.cwd(), file));
+    }
+  }
+
+  return {
+    changes: allChanges,
+    files: modifiedFiles,
+    errors,
+    summary: {
+      filesScanned: files.length,
+      filesModified: modifiedFiles.length,
+      issuesFound: allChanges.length,
+      autoFixed: allChanges.filter((c) => c.autoFixed).length,
+    },
+  };
+}
+
+module.exports = {
+  wrapAsyncHandlers,
+  processFile,
+  isWrappedInTryCatch,
+};