@nyx-intelligence/val-mcp 0.5.5 → 0.6.0

package/dist/index.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { scanSite, checkPage, screenshot } from "./scanner.js";
+import { scanSite, scanSiteMulti, checkPage, screenshot } from "./scanner.js";
 import { formatReport, topFindings } from "./report.js";
 import { session } from "./session.js";
 function fmtAction(r) {
@@ -28,6 +28,12 @@ async function runCli(args) {
         const { findings, pagesVisited } = await scanSite(url, { maxPages: Number(arg2) || 12, device: arg3 || undefined });
         console.log(formatReport(findings, pagesVisited));
     }
+    else if (cmd === "scan-devices" && url) {
+        // arg2 = comma-separated device list, arg3 = maxPages
+        const devs = (arg2 || "desktop,iPhone 14").split(",").map((s) => s.trim()).filter(Boolean);
+        const { findings, pagesVisited } = await scanSiteMulti(url, { maxPages: Number(arg3) || 12, devices: devs });
+        console.log(formatReport(findings, pagesVisited));
+    }
     else if (cmd === "exercise" && url) {
         console.log(fmtAction(await session.open(url, arg2 || undefined)));
         const res = await session.exercise();
@@ -78,9 +84,21 @@ async function runServer() {
     const { StdioServerTransport } = await import("@modelcontextprotocol/sdk/server/stdio.js");
     const { chromium } = await import("playwright");
     const { z } = await import("zod");
-    const server = new McpServer({ name: "val", version: "0.5.5" });
+    const server = new McpServer({ name: "val", version: "0.6.0" });
     const text = (t) => ({ content: [{ type: "text", text: t }] });
     // ── Passive crawl ──
+    server.registerTool("val_scan_devices", {
+        title: "Scan an app on multiple devices (desktop + mobile)",
+        description: "Crawl the app under MULTIPLE device profiles in parallel (e.g. ['desktop', 'iPhone 14', 'Pixel 7']) and report findings. Bugs that appear on every device are tagged 'all'; mobile-only or desktop-only bugs keep their device tag so the agent knows where to fix. Use this instead of val_scan when responsive behavior matters.",
+        inputSchema: {
+            url: z.string(),
+            devices: z.array(z.string()).min(1).describe("Device names: 'desktop', 'iPhone 14', 'Pixel 7', etc."),
+            maxPages: z.number().int().min(1).max(50).optional(),
+        },
+    }, async ({ url, devices: devs, maxPages }) => {
+        const { findings, pagesVisited } = await scanSiteMulti(url, { maxPages: maxPages ?? 12, devices: devs });
+        return text(`${formatReport(findings, pagesVisited)}\n\nJSON:\n${JSON.stringify(topFindings(findings))}`);
+    });
     server.registerTool("val_scan", {
         title: "Scan an app for UX bugs (crawl)",
         description: "Crawl an app (localhost or live), following same-origin links, and report passive bugs: broken links/404s, uncaught JS errors, console errors, failed network requests, broken images, missing titles, horizontal layout overflow, clipped text, and janky load (layout shift / CLS). Pass `device` to test the MOBILE rendering (e.g. 'iPhone 14'). Good first pass. Does NOT click buttons — use val_open/val_click/val_type/val_exercise for that.",
@@ -180,7 +198,7 @@ async function runServer() {
     console.error("val-mcp server running on stdio");
 }
 const args = process.argv.slice(2);
-if (args[0] === "scan" || args[0] === "exercise" || args[0] === "exercise-forms") {
+if (args[0] === "scan" || args[0] === "scan-devices" || args[0] === "exercise" || args[0] === "exercise-forms") {
     runCli(args).catch((e) => {
         console.error(e);
         process.exit(1);

package/dist/report.js

@@ -20,7 +20,8 @@ export function formatReport(findings, pagesVisited) {
         lines.push("");
         const shown = topFindings(findings);
         for (const f of shown) {
-            lines.push(`[${f.severity.toUpperCase()}] ${f.type} — ${f.page}`);
+            const dev = f.device && f.device !== "all" && f.device !== "desktop" ? ` [${f.device}]` : "";
+            lines.push(`[${f.severity.toUpperCase()}] ${f.type}${dev} — ${f.page}`);
             lines.push(`   ${f.detail}${f.evidence ? `  (${f.evidence})` : ""}`);
         }
         if (findings.length > shown.length) {

package/dist/scanner.js

@@ -69,6 +69,64 @@ export async function checkPage(browser, url, opts = {}) {
                 return i.complete && i.naturalWidth === 0 && !!(i.currentSrc || i.src);
             })
                 .map((img) => img.currentSrc || img.src);
+            // ── A11y essentials ────────────────────────────────────────────────
+            // Cheap-to-detect, high-signal accessibility violations. Vibecoded
+            // apps routinely ship these. We do NOT replicate Lighthouse — just
+            // catch the obvious stuff so screen readers and keyboard users have
+            // a fighting chance.
+            const isVisible = (el) => {
+                const r = el.getBoundingClientRect();
+                const s = getComputedStyle(el);
+                return r.width > 0 && r.height > 0 && s.visibility !== "hidden" && s.display !== "none";
+            };
+            const imgsNoAlt = [];
+            for (const img of Array.from(document.querySelectorAll("img"))) {
+                if (!isVisible(img))
+                    continue;
+                // Missing alt attribute entirely is a bug. alt="" is intentional
+                // (decorative image) and we leave it alone.
+                if (!img.hasAttribute("alt")) {
+                    const src = img.currentSrc || img.src || "(no src)";
+                    imgsNoAlt.push(src.split("/").pop().slice(0, 50));
+                    if (imgsNoAlt.length >= 8)
+                        break;
+                }
+            }
+            const buttonsNoName = [];
+            for (const btn of Array.from(document.querySelectorAll("button, [role=button]"))) {
+                if (!isVisible(btn))
+                    continue;
+                const txt = (btn.innerText || "").trim();
+                const aria = btn.getAttribute("aria-label") || btn.getAttribute("aria-labelledby") || btn.getAttribute("title") || "";
+                if (!txt && !aria.trim()) {
+                    // Identify it the best we can without a name.
+                    const cls = (btn.getAttribute("class") || "").slice(0, 30);
+                    const id = btn.getAttribute("id") || "";
+                    buttonsNoName.push(id ? `#${id}` : cls ? `.${cls}` : btn.tagName.toLowerCase());
+                    if (buttonsNoName.length >= 8)
+                        break;
+                }
+            }
+            const inputsNoLabel = [];
+            for (const input of Array.from(document.querySelectorAll("input, textarea, select"))) {
+                if (!isVisible(input))
+                    continue;
+                const i = input;
+                const t = (i.type || "").toLowerCase();
+                if (["hidden", "submit", "reset", "button", "image"].indexOf(t) >= 0)
+                    continue;
+                // A label exists if: explicit <label for=id>, wrapping <label>, aria-label, aria-labelledby, or a title.
+                const id = i.id;
+                const hasFor = id ? !!document.querySelector(`label[for="${CSS.escape(id)}"]`) : false;
+                const hasWrap = !!i.closest("label");
+                const hasAria = !!(i.getAttribute("aria-label") || i.getAttribute("aria-labelledby") || i.getAttribute("title"));
+                if (!hasFor && !hasWrap && !hasAria) {
+                    inputsNoLabel.push(i.name || i.placeholder || t || "input");
+                    if (inputsNoLabel.length >= 8)
+                        break;
+                }
+            }
+            const htmlNoLang = !document.documentElement.getAttribute("lang");
             // Horizontal overflow: content wider than the viewport (a classic broken layout).
             const vw = w.innerWidth;
             const docW = document.documentElement.scrollWidth;
@@ -97,17 +155,28 @@ export async function checkPage(browser, url, opts = {}) {
                 if (clipped.length >= 8)
                     break;
             }
-            return { links, brokenImgs, horizontalOverflow, clipped, cls: w.__valCLS || 0 };
+            return {
+                links, brokenImgs, horizontalOverflow, clipped, cls: w.__valCLS || 0,
+                imgsNoAlt, buttonsNoName, inputsNoLabel, htmlNoLang,
+            };
         });
         links = dom.links;
         for (const src of new Set(dom.brokenImgs))
             findings.push(finding("broken-image", "medium", url, "Image failed to load", src));
         if (dom.horizontalOverflow > 0)
-            findings.push(finding("layout-overflow", "medium", url, `Page scrolls horizontally — content ${Math.round(dom.horizontalOverflow)}px wider than the viewport`));
+            findings.push(finding("layout-overflow", "medium", url, `Page scrolls horizontally, content ${Math.round(dom.horizontalOverflow)}px wider than the viewport`));
         for (const t of new Set(dom.clipped))
             findings.push(finding("clipped-text", "low", url, "Text appears clipped by its container", t));
         if (dom.cls > 0.25)
             findings.push(finding("layout-shift", "medium", url, `Janky load: cumulative layout shift ${dom.cls.toFixed(2)} (target < 0.1)`));
+        for (const img of new Set(dom.imgsNoAlt))
+            findings.push(finding("a11y-img-no-alt", "medium", url, "Image missing alt attribute (screen readers will skip it)", img));
+        for (const btn of new Set(dom.buttonsNoName))
+            findings.push(finding("a11y-button-no-name", "medium", url, "Button has no accessible name (no text, aria-label, or title)", btn));
+        for (const input of new Set(dom.inputsNoLabel))
+            findings.push(finding("a11y-input-no-label", "low", url, "Form control has no associated label", input));
+        if (dom.htmlNoLang)
+            findings.push(finding("a11y-html-no-lang", "low", url, "<html> missing lang attribute"));
     }
     catch (e) {
         const msg = e instanceof Error ? e.message : String(e);
@@ -122,9 +191,49 @@ export async function checkPage(browser, url, opts = {}) {
             continue;
         findings.push(finding("network-error", s >= 500 ? "high" : "medium", url, `Resource returned HTTP ${s}`, u));
     }
+    const deviceTag = opts.device || "desktop";
+    for (const f of findings)
+        f.device = deviceTag;
     await ctx.close();
     return { findings, links };
 }
+/**
+ * Crawl the site once per device profile, merge findings, dedupe duplicates
+ * that appear identically on every device. Findings unique to a specific
+ * device keep their `device` tag, telling the agent "this is a mobile-only
+ * bug" or "desktop-only".
+ */
+export async function scanSiteMulti(startUrl, opts) {
+    if (!opts.devices.length)
+        throw new Error("scanSiteMulti needs at least one device");
+    const results = await Promise.all(opts.devices.map((d) => scanSite(startUrl, {
+        maxPages: opts.maxPages,
+        timeoutMs: opts.timeoutMs,
+        device: d === "desktop" ? undefined : d,
+    })));
+    // Dedupe: same page + type + detail + evidence seen on every device
+    // gets folded into one finding tagged "all"; otherwise each device keeps its own.
+    const key = (f) => `${f.page}::${f.type}::${f.detail}::${f.evidence || ""}`;
+    const byKey = new Map();
+    for (const r of results)
+        for (const f of r.findings) {
+            const k = key(f);
+            if (!byKey.has(k))
+                byKey.set(k, []);
+            byKey.get(k).push(f);
+        }
+    const merged = [];
+    for (const group of byKey.values()) {
+        if (group.length === results.length) {
+            merged.push({ ...group[0], device: "all" });
+        }
+        else {
+            merged.push(...group);
+        }
+    }
+    const pagesVisited = Array.from(new Set(results.flatMap((r) => r.pagesVisited)));
+    return { findings: merged, pagesVisited };
+}
 export async function scanSite(startUrl, opts = {}) {
     const maxPages = opts.maxPages ?? 12;
     const start = normalize(startUrl);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyx-intelligence/val-mcp",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "description": "Val — a 100% MCP QA agent for vibecoders. Drives a real browser to catch UX bugs (broken links, 404s, console errors, broken images) so your coding agent can fix them.",
   "type": "module",
   "license": "UNLICENSED",