vibecheck-ai 2.0.1 → 5.0.0

package/bin/runners/lib/reality/toast-detector.js

@@ -0,0 +1,393 @@
+/**
+ * Toast/Notification Detector v2
+ * 
+ * Detects toasts via DOM observation with library-specific selectors.
+ * Emits signals: toast_success, toast_error, toast_info, toast_unknown
+ */
+
+"use strict";
+
+// =============================================================================
+// LIBRARY-SPECIFIC SELECTORS
+// =============================================================================
+
+const TOAST_LIBRARIES = {
+  sonner: {
+    name: "sonner",
+    container: "[data-sonner-toaster]",
+    toast: "[data-sonner-toast]",
+    typeAttr: "data-type",
+  },
+  reactHotToast: {
+    name: "react-hot-toast",
+    container: "#_rht_toaster, .react-hot-toast",
+    toast: "[aria-live]",
+  },
+  reactToastify: {
+    name: "react-toastify",
+    container: ".Toastify__toast-container",
+    toast: ".Toastify__toast",
+    successClass: "Toastify__toast--success",
+    errorClass: "Toastify__toast--error",
+    infoClass: "Toastify__toast--info",
+    warningClass: "Toastify__toast--warning",
+  },
+  radix: {
+    name: "radix",
+    container: "[data-radix-toast-viewport]",
+    toast: "[data-radix-toast-root]",
+    stateAttr: "data-state",
+  },
+  mantine: {
+    name: "mantine",
+    container: ".mantine-Notifications-root",
+    toast: ".mantine-Notification-root",
+  },
+  chakra: {
+    name: "chakra",
+    container: "[id^='chakra-toast-manager']",
+    toast: "[id^='chakra-toast']",
+  },
+  mui: {
+    name: "mui",
+    container: ".MuiSnackbar-root",
+    toast: ".MuiSnackbarContent-root, .MuiAlert-root",
+    successClass: "MuiAlert-standardSuccess",
+    errorClass: "MuiAlert-standardError",
+    infoClass: "MuiAlert-standardInfo",
+    warningClass: "MuiAlert-standardWarning",
+  },
+  notistack: {
+    name: "notistack",
+    container: ".SnackbarContainer-root",
+    toast: "#notistack-snackbar",
+  },
+  antd: {
+    name: "antd",
+    container: ".ant-message, .ant-notification",
+    toast: ".ant-message-notice, .ant-notification-notice",
+    successClass: "ant-message-success, ant-notification-notice-success",
+    errorClass: "ant-message-error, ant-notification-notice-error",
+  },
+  bootstrap: {
+    name: "bootstrap",
+    container: ".toast-container",
+    toast: ".toast[aria-live]",
+  },
+};
+
+// Universal heuristic selectors
+const UNIVERSAL_SELECTORS = {
+  ariaLive: '[aria-live="polite"], [aria-live="assertive"]',
+  roleAlert: '[role="alert"]',
+  roleStatus: '[role="status"]',
+  ariaAtomic: '[aria-atomic="true"]',
+};
+
+// Class tokens that indicate toast
+const TOAST_CLASS_TOKENS = [
+  "toast", "snackbar", "notification", "noti", "sonner",
+  "Toastify", "chakra-toast", "mantine-Notification",
+  "MuiSnackbar", "ant-message", "ant-notification", "notistack"
+];
+
+// Success/error classification tokens
+const SUCCESS_TOKENS = ["success", "check", "done", "saved", "complete", "✓", "✅"];
+const ERROR_TOKENS = ["error", "fail", "warning", "alert", "danger", "❌", "⚠"];
+const INFO_TOKENS = ["info", "notice", "ℹ"];
+
+// =============================================================================
+// TOAST DETECTOR SCRIPT (runs in browser context)
+// =============================================================================
+
+const TOAST_DETECTOR_SCRIPT = `
+(function setupToastDetector(options = {}) {
+  const {
+    maxLifetimeMs = 15000,
+    captureScreenshots = true,
+  } = options;
+
+  const TOAST_CLASS_TOKENS = ${JSON.stringify(TOAST_CLASS_TOKENS)};
+  const SUCCESS_TOKENS = ${JSON.stringify(SUCCESS_TOKENS)};
+  const ERROR_TOKENS = ${JSON.stringify(ERROR_TOKENS)};
+  const INFO_TOKENS = ${JSON.stringify(INFO_TOKENS)};
+
+  const signals = [];
+  const seenToasts = new Set();
+
+  function normalizeText(text) {
+    return (text || '').trim().replace(/\\s+/g, ' ').slice(0, 200);
+  }
+
+  function classifyToast(el) {
+    const classes = el.className?.toLowerCase() || '';
+    const text = normalizeText(el.textContent);
+    const dataType = el.getAttribute('data-type')?.toLowerCase();
+    
+    // Check data-type first (most reliable)
+    if (dataType) {
+      if (SUCCESS_TOKENS.some(t => dataType.includes(t))) return 'toast_success';
+      if (ERROR_TOKENS.some(t => dataType.includes(t))) return 'toast_error';
+      if (INFO_TOKENS.some(t => dataType.includes(t))) return 'toast_info';
+    }
+
+    // Check classes
+    if (SUCCESS_TOKENS.some(t => classes.includes(t))) return 'toast_success';
+    if (ERROR_TOKENS.some(t => classes.includes(t))) return 'toast_error';
+    if (INFO_TOKENS.some(t => classes.includes(t))) return 'toast_info';
+
+    // Check text content
+    const textLower = text.toLowerCase();
+    if (SUCCESS_TOKENS.some(t => textLower.includes(t))) return 'toast_success';
+    if (ERROR_TOKENS.some(t => textLower.startsWith(t))) return 'toast_error';
+
+    // Check for icon aria-labels
+    const icons = el.querySelectorAll('[aria-label]');
+    for (const icon of icons) {
+      const label = icon.getAttribute('aria-label')?.toLowerCase();
+      if (label && SUCCESS_TOKENS.some(t => label.includes(t))) return 'toast_success';
+      if (label && ERROR_TOKENS.some(t => label.includes(t))) return 'toast_error';
+    }
+
+    return 'toast_unknown';
+  }
+
+  function detectLibrary(el) {
+    // Check specific library markers
+    if (el.closest('[data-sonner-toaster]')) return 'sonner';
+    if (el.closest('.Toastify__toast-container')) return 'react-toastify';
+    if (el.closest('[data-radix-toast-viewport]')) return 'radix';
+    if (el.closest('.mantine-Notifications-root')) return 'mantine';
+    if (el.closest('[id^="chakra-toast"]')) return 'chakra';
+    if (el.closest('.MuiSnackbar-root')) return 'mui';
+    if (el.closest('.SnackbarContainer-root')) return 'notistack';
+    if (el.closest('.ant-message, .ant-notification')) return 'antd';
+    return 'unknown';
+  }
+
+  function isToastCandidate(el) {
+    // Skip hidden elements
+    const style = window.getComputedStyle(el);
+    if (style.display === 'none' || style.visibility === 'hidden') return false;
+    if (style.opacity === '0') return false;
+
+    // Check ARIA roles
+    const role = el.getAttribute('role');
+    if (role === 'alert' || role === 'status') return true;
+    if (el.getAttribute('aria-live')) return true;
+    if (el.getAttribute('aria-atomic') === 'true') return true;
+
+    // Check class tokens
+    const classes = el.className?.toLowerCase() || '';
+    if (TOAST_CLASS_TOKENS.some(t => classes.includes(t.toLowerCase()))) return true;
+
+    // Check positioning (fixed/sticky near edges)
+    if (style.position === 'fixed' || style.position === 'sticky') {
+      const rect = el.getBoundingClientRect();
+      const isNearEdge = rect.top < 100 || rect.bottom > window.innerHeight - 100;
+      if (isNearEdge && el.textContent?.trim().length > 0) return true;
+    }
+
+    return false;
+  }
+
+  function generateToastId(el) {
+    const text = normalizeText(el.textContent).slice(0, 50);
+    const rect = el.getBoundingClientRect();
+    return text + ':' + Math.round(rect.top) + ':' + Math.round(rect.left);
+  }
+
+  function processToast(el) {
+    const toastId = generateToastId(el);
+    if (seenToasts.has(toastId)) return;
+    seenToasts.add(toastId);
+
+    const signal = {
+      kind: classifyToast(el),
+      atMs: performance.now(),
+      libraryHint: detectLibrary(el),
+      message: normalizeText(el.textContent),
+      selectorHint: el.id ? '#' + el.id : (el.className ? '.' + el.className.split(' ')[0] : el.tagName.toLowerCase()),
+    };
+
+    signals.push(signal);
+
+    // Dispatch custom event for external listeners
+    window.dispatchEvent(new CustomEvent('vibecheck:toast', { detail: signal }));
+  }
+
+  // Mutation observer to catch toasts
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      // Check added nodes
+      for (const node of mutation.addedNodes) {
+        if (node.nodeType !== 1) continue;
+        
+        // Check if this node is a toast
+        if (isToastCandidate(node)) {
+          processToast(node);
+        }
+
+        // Check descendants
+        if (node.querySelectorAll) {
+          const candidates = node.querySelectorAll('[role="alert"], [role="status"], [aria-live]');
+          candidates.forEach(el => {
+            if (isToastCandidate(el)) processToast(el);
+          });
+        }
+      }
+
+      // Check attribute changes (e.g., data-state="open")
+      if (mutation.type === 'attributes' && mutation.attributeName === 'data-state') {
+        const el = mutation.target;
+        if (el.getAttribute('data-state') === 'open' && isToastCandidate(el)) {
+          processToast(el);
+        }
+      }
+    }
+  });
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['data-state', 'class', 'aria-live'],
+  });
+
+  // Also scan existing toasts
+  const existingToasts = document.querySelectorAll('[role="alert"], [role="status"], [aria-live]');
+  existingToasts.forEach(el => {
+    if (isToastCandidate(el)) processToast(el);
+  });
+
+  // Return API
+  return {
+    getSignals: () => [...signals],
+    clearSignals: () => { signals.length = 0; seenToasts.clear(); },
+    stop: () => observer.disconnect(),
+  };
+})
+`;
+
+// =============================================================================
+// SERVER-SIDE HELPERS
+// =============================================================================
+
+/**
+ * Classify toast kind from signal data
+ */
+function classifyToastSignal(signal) {
+  if (!signal) return "toast_unknown";
+
+  const text = (signal.message || "").toLowerCase();
+  const classes = (signal.classes || "").toLowerCase();
+
+  // Success patterns
+  if (SUCCESS_TOKENS.some(t => text.includes(t) || classes.includes(t))) {
+    return "toast_success";
+  }
+
+  // Error patterns
+  if (ERROR_TOKENS.some(t => text.includes(t) || classes.includes(t))) {
+    return "toast_error";
+  }
+
+  // Info patterns
+  if (INFO_TOKENS.some(t => text.includes(t) || classes.includes(t))) {
+    return "toast_info";
+  }
+
+  return "toast_unknown";
+}
+
+/**
+ * Create toast signal payload
+ */
+function createToastSignal(options = {}) {
+  const {
+    kind = "toast_unknown",
+    atMs = Date.now(),
+    libraryHint = "unknown",
+    message = "",
+    selectorHint = "",
+    screenshot = null,
+  } = options;
+
+  return {
+    kind,
+    atMs,
+    libraryHint,
+    message: message.slice(0, 200),
+    selectorHint,
+    screenshot,
+  };
+}
+
+/**
+ * Check if a toast is a false positive (persistent banner, etc.)
+ */
+function isToastFalsePositive(signal, options = {}) {
+  const { maxLifetimeMs = 15000 } = options;
+
+  // If it's been visible too long, likely a persistent banner
+  if (signal.visibleDuration && signal.visibleDuration > maxLifetimeMs) {
+    return true;
+  }
+
+  // Common false positive patterns
+  const falsePositivePatterns = [
+    /cookie.*consent/i,
+    /accept.*cookies/i,
+    /privacy.*policy/i,
+    /subscribe.*newsletter/i,
+    /sign.*up/i,
+  ];
+
+  const text = signal.message || "";
+  if (falsePositivePatterns.some(p => p.test(text))) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Get library-specific selectors for a known library
+ */
+function getLibrarySelectors(libraryName) {
+  return TOAST_LIBRARIES[libraryName] || null;
+}
+
+/**
+ * Build combined selector for all toast libraries
+ */
+function buildToastSelector() {
+  const selectors = [];
+
+  // Add library-specific selectors
+  for (const lib of Object.values(TOAST_LIBRARIES)) {
+    if (lib.toast) selectors.push(lib.toast);
+  }
+
+  // Add universal selectors
+  selectors.push(UNIVERSAL_SELECTORS.roleAlert);
+  selectors.push(UNIVERSAL_SELECTORS.roleStatus);
+  selectors.push(UNIVERSAL_SELECTORS.ariaLive);
+
+  return selectors.join(", ");
+}
+
+module.exports = {
+  TOAST_DETECTOR_SCRIPT,
+  TOAST_LIBRARIES,
+  UNIVERSAL_SELECTORS,
+  TOAST_CLASS_TOKENS,
+  SUCCESS_TOKENS,
+  ERROR_TOKENS,
+  INFO_TOKENS,
+  classifyToastSignal,
+  createToastSignal,
+  isToastFalsePositive,
+  getLibrarySelectors,
+  buildToastSelector,
+};

package/bin/runners/lib/reality-findings.js

@@ -0,0 +1,84 @@
+// bin/runners/lib/reality-findings.js
+const fs = require("fs");
+const path = require("path");
+
+function loadLastReality(repoRoot, maxAgeHours = 12) {
+  const p = path.join(repoRoot, ".vibecheck", "reality", "last_reality.json");
+  if (!fs.existsSync(p)) return null;
+
+  const obj = JSON.parse(fs.readFileSync(p, "utf8"));
+  const finishedAt = obj?.meta?.finishedAt ? new Date(obj.meta.finishedAt).getTime() : 0;
+  if (!finishedAt) return null;
+
+  const ageMs = Date.now() - finishedAt;
+  if (ageMs > maxAgeHours * 3600 * 1000) return null; // stale
+
+  return obj;
+}
+
+function findingsFromReality(repoRoot) {
+  const r = loadLastReality(repoRoot);
+  if (!r) return [];
+
+  const out = [];
+  for (const f of r.findings || []) {
+    // Preserve original category (DeadUI, AuthCoverage, etc.)
+    const category = f.category || "DeadUI";
+    
+    // Generate appropriate fix hints based on category
+    let fixHints;
+    if (category === "AuthCoverage") {
+      fixHints = [
+        "Verify your Next.js matcher config protects this route.",
+        "Ensure middleware redirects unauthenticated users.",
+        "Check that session/auth state is being validated server-side."
+      ];
+    } else {
+      fixHints = [
+        "Ensure the element has a real onClick/handler and it returns a real result.",
+        "If it calls /api/*, ensure the route exists and returns success only on res.ok.",
+        "If it's intentionally disabled, reflect that visually and remove the click affordance."
+      ];
+    }
+
+    out.push({
+      id: `F_REALITY_${f.id}`,
+      severity: f.severity === "BLOCK" ? "BLOCK" : "WARN",
+      category,
+      title: f.title,
+      why: category === "AuthCoverage" 
+        ? "Reality Runner detected an auth boundary violation."
+        : "Reality Runner found a UI interaction that fails in the running app.",
+      confidence: "high",
+      evidence: [
+        {
+          id: `ev_${f.id}`,
+          file: f.page ? String(f.page).replace(/^https?:\/\//, "") : "runtime",
+          lines: "0-0",
+          snippetHash: (f.screenshot || "runtime").slice(0, 80),
+          reason: f.reason
+        }
+      ],
+      fixHints
+    });
+  }
+
+  // escalate raw runtime console errors into WARN
+  const ce = (r.consoleErrors || []).slice(0, 5);
+  if (ce.length) {
+    out.push({
+      id: "F_REALITY_CONSOLE_ERRORS",
+      severity: "WARN",
+      category: "DeadUI",
+      title: `Console errors observed during Reality run (${ce.length})`,
+      why: "Console errors often correlate with broken UI handlers or missing data paths.",
+      confidence: "med",
+      evidence: [],
+      fixHints: ["Open the Reality report and fix the first error in the consoleErrors list."]
+    });
+  }
+
+  return out;
+}
+
+module.exports = { findingsFromReality };