@webability/cli 1.1.1 → 1.1.3

package/dist/cli.js

@@ -1,150 +1,12 @@
 #!/usr/bin/env node
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-// src/cli.ts
-import { Command } from "commander";
-import chalk3 from "chalk";
-import ora from "ora";
-
-// src/api.ts
-var API_BASE = "https://api.webability.io";
-async function apiRequest(path, options = {}, apiKey) {
-  const res = await fetch(`${API_BASE}${path}`, {
-    ...options,
-    headers: {
-      "Content-Type": "application/json",
-      "Authorization": `Bearer ${apiKey}`,
-      "Origin": "https://app.webability.io",
-      ...options.headers
-    }
-  });
-  if (!res.ok) {
-    const body = await res.text().catch(() => "");
-    throw new Error(`API ${res.status}: ${body.slice(0, 200)}`);
-  }
-  return res.json();
-}
-async function graphql(query, variables, apiKey) {
-  const data = await apiRequest("/graphql", {
-    method: "POST",
-    body: JSON.stringify({ query, variables })
-  }, apiKey);
-  if (data.errors?.length) {
-    throw new Error(data.errors[0].message);
-  }
-  return data.data;
-}
-async function scan(url, apiKey, onStatus) {
-  onStatus?.("Starting scan...");
-  const { startAccessibilityReportJob } = await graphql(
-    `query($url: String!) { startAccessibilityReportJob(url: $url, use_cache: false) { jobId } }`,
-    { url },
-    apiKey
-  );
-  const jobId = startAccessibilityReportJob.jobId;
-  onStatus?.(`Job ${jobId.slice(0, 8)}... created`);
-  for (let i = 0; i < 60; i++) {
-    await new Promise((r) => setTimeout(r, 3e3));
-    const { getAccessibilityReportByJobId: job } = await graphql(
-      `query($jobId: String!) { getAccessibilityReportByJobId(jobId: $jobId) { status error result { savedReport { key } } } }`,
-      { jobId },
-      apiKey
-    );
-    if (job.status === "done") {
-      return { key: job.result.savedReport.key };
-    }
-    if (job.status === "error") {
-      throw new Error(job.error || "Scan failed");
-    }
-    onStatus?.(`Scanning... (${(i + 1) * 3}s)`);
-  }
-  throw new Error("Scan timed out after 3 minutes");
-}
-async function getReport(r2Key, apiKey) {
-  const { fetchReportByR2Key } = await graphql(
-    `query($key: String!) { fetchReportByR2Key(r2_key: $key) { score totalElements siteImg ByFunctions { name count issues { code impact description element } } axe { violations { id impact description nodes { html target } } } } }`,
-    { key: r2Key },
-    apiKey
-  );
-  return fetchReportByR2Key;
-}
-
-// src/config.ts
-import Conf from "conf";
-var config = new Conf({
-  projectName: "webability",
-  schema: {
-    apiKey: { type: "string", default: "" },
-    accessCode: { type: "string", default: "" },
-    defaultFormat: { type: "string", default: "table", enum: ["table", "json", "csv"] }
-  }
-});
-function getApiKey() {
-  return process.env.WEBABILITY_API_KEY || config.get("apiKey") || "";
-}
-function setApiKey(key) {
-  config.set("apiKey", key);
-}
-function getAccessCode() {
-  return config.get("accessCode") || "";
-}
-function setAccessCode(code) {
-  config.set("accessCode", code);
-}
-function isActivated() {
-  return !!getAccessCode();
-}
-function clearConfig() {
-  config.clear();
-}
-
-// src/local-scan.ts
-import { scan as scan2, detectFramework } from "@webability/core";
-var WCAG_TAG_MAP = {
-  "A": ["wcag2a"],
-  "AA": ["wcag2a", "wcag2aa", "wcag21aa", "wcag22aa"],
-  "AAA": ["wcag2a", "wcag2aa", "wcag2aaa", "wcag21aa", "wcag22aa"]
-};
-var IMPACT_COLORS = {
-  critical: "#ef4444",
-  serious: "#f97316",
-  moderate: "#eab308",
-  minor: "#6b7280"
-};
-var IMPACT_ICONS = {
-  critical: "\u2717",
-  serious: "\u25B2",
-  moderate: "\u25CF",
-  minor: "\u25CB"
-};
-function buildHighlightScript(issues, apiKey, framework) {
-  const serialized = JSON.stringify(
-    issues.map((i, idx) => ({
-      id: idx,
-      selector: i.selector,
-      impact: i.impact,
-      wcag: i.wcag,
-      message: i.message.slice(0, 200),
-      fixDesc: i.fix?.suggestedValue ? `Set ${i.fix.attribute}="${i.fix.suggestedValue}"` : "",
-      fixAttr: i.fix?.attribute || "",
-      fixVal: i.fix?.suggestedValue || "",
-      fixCur: i.fix?.currentValue || "",
-      canApply: !!(i.fix?.suggestedValue && !i.fix?.needsManualReview)
-    }))
-  );
-  return `
+var ae=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(typeof require<"u"?require:t)[n]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});import{readFileSync as Fe}from"fs";import{fileURLToPath as Se}from"url";import{dirname as Ee,join as $e}from"path";import{Command as Ie}from"commander";import a from"chalk";import I from"ora";var ne="https://api.webability.io";async function re(e,t={},n){let o=await fetch(`${ne}${e}`,{...t,headers:{"Content-Type":"application/json",Authorization:`Bearer ${n}`,Origin:"https://app.webability.io",...t.headers}});if(!o.ok){let r=await o.text().catch(()=>"");throw new Error(`API ${o.status}: ${r.slice(0,200)}`)}return o.json()}async function D(e,t,n){let o=await re("/graphql",{method:"POST",body:JSON.stringify({query:e,variables:t})},n);if(o.errors?.length)throw new Error(o.errors[0].message);return o.data}async function K(e,t,n){n?.("Starting scan...");let{startAccessibilityReportJob:o}=await D("query($url: String!) { startAccessibilityReportJob(url: $url, use_cache: false) { jobId } }",{url:e},t),r=o.jobId;n?.(`Job ${r.slice(0,8)}... created`);for(let i=0;i<60;i++){await new Promise(l=>setTimeout(l,3e3));let{getAccessibilityReportByJobId:s}=await D("query($jobId: String!) { getAccessibilityReportByJobId(jobId: $jobId) { status error result { savedReport { key } } } }",{jobId:r},t);if(s.status==="done")return{key:s.result.savedReport.key};if(s.status==="error")throw new Error(s.error||"Scan failed");n?.(`Scanning... (${(i+1)*3}s)`)}throw new Error("Scan timed out after 3 minutes")}async function U(e,t){let{fetchReportByR2Key:n}=await D("query($key: String!) { fetchReportByR2Key(r2_key: $key) { score totalElements siteImg ByFunctions { name count issues { code impact description element } } axe { violations { id impact description nodes { html target } } } } }",{key:e},t);return n}import le from"conf";var S=new le({projectName:"webability",schema:{apiKey:{type:"string",default:""},accessCode:{type:"string",default:""},defaultFormat:{type:"string",default:"table",enum:["table","json","csv"]}}});function E(){return process.env.WEBABILITY_API_KEY||S.get("apiKey")||""}function T(e){S.set("apiKey",e)}function ce(){return S.get("accessCode")||""}function O(e){S.set("accessCode",e)}function G(){return!!ce()}function J(){S.clear()}import{scan as de,detectFramework as pe,generateDevSuggestion as ue}from"@webability/core";var ge={weak_link_name:"Screen-reader users navigate by pulling up a links list (VoiceOver Rotor / NVDA Insert+F7). They hear: 'Learn more, Learn more, Learn more' \u2014 every link sounds identical. They can't tell where each goes without context.",weak_button_name:"Same problem as weak links \u2014 assistive tech announces 'Submit' or 'Click here' with no context, so users can't tell what each button does.",missing_alt:`Screen readers say 'image' (or skip it entirely) when there's no alt text. A photo of your CEO becomes 'image, image' to a blind user. Decorative images need alt="" so they're skipped intentionally.`,decorative_icon:"Decorative icons next to labelled text get announced twice: 'home icon, Home'. Wastes the user's time and creates audio clutter.",missing_label:"Form inputs without labels are invisible to screen readers \u2014 users hear 'edit text' with no idea what to type. They abandon the form.",contrast_insufficient:"Low-contrast text excludes users with low vision (1 in 12 men have some color-blindness). It's also unreadable on glare-prone screens, in sunlight, and for older eyes.",non_text_contrast_insufficient:"If a button's border or icon doesn't have 3:1 contrast against its background, low-vision users can't see the boundary or recognize the icon at all.",target_too_small:"Touch targets under 24\xD724px are hard to hit accurately for users with motor impairments (Parkinson's, MS, arthritis). Mis-taps trigger wrong actions and frustrate keyboard-only users too.",missing_skip_link:"Keyboard and screen-reader users have to Tab through your entire header (logo, nav, CTAs) on every single page. A skip link lets them jump straight to main content \u2014 a 30-second fix that saves disabled users minutes of navigation per visit.",motion_without_reduced_motion:"Vestibular disorders (~35% of adults over 40) can be triggered by parallax, auto-rotation, and rapid animations \u2014 causing nausea, dizziness, and migraines. Respecting prefers-reduced-motion is non-optional.",heading_skip:"Screen-reader users navigate by heading hierarchy \u2014 they jump h1 \u2192 h2 \u2192 h3 to scan structure. Skipping levels (h2 \u2192 h4) makes the page feel disorganized and content gets missed.",multiple_h1:"Multiple h1 elements confuse the page structure model that screen readers and SEO tools use. Each page should have exactly one h1 \u2014 the page title.",redundant_role:`Adding role="navigation" to a <nav> element is redundant \u2014 screen readers already know it's navigation. Redundant ARIA can cause double-announcements.`,duplicate_id:"Duplicate IDs break aria-labelledby, aria-describedby, and label[for] references \u2014 screen readers may read the wrong content or none at all.",missing_required_indicator:"If users don't know a field is required until they submit, they miss the requirement (especially screen-reader users who skip placeholder text). They get an error after the fact and have to re-enter data.",new_window_link:"Opening links in a new tab without warning disorients screen-reader users \u2014 they think the back button is broken. WCAG requires you announce 'opens in new tab' via aria-label or visible text.",color_only_meaning:"Using only color to indicate state (red = error, green = success) excludes the ~8% of men who are color-blind. Always pair color with an icon, label, or pattern.",insufficient_navigation:"Inconsistent nav across pages forces users to relearn the structure on every page. Especially hard on cognitive disabilities and screen-reader users who memorize tab order.",focus_not_visible:"Without a visible focus ring, keyboard users have no idea which element is selected. Tabbing through your site becomes guesswork \u2014 they hit Enter and trigger the wrong action.",aria_hidden_focusable:`An element with aria-hidden="true" but tabindex="0" creates a 'ghost' focus stop \u2014 keyboard users can focus it but screen readers don't announce it. They press Enter on something invisible to them.`,svg_missing_name:"SVG icons that convey meaning (warning triangle, X close button) need an accessible name. Without it, blind users hear 'graphic' or nothing at all."};function me(e){return ge[e.type]||""}var H={A:["wcag2a"],AA:["wcag2a","wcag2aa","wcag21aa","wcag22aa"],AAA:["wcag2a","wcag2aa","wcag2aaa","wcag21aa","wcag22aa"]},fe={critical:"#ef4444",serious:"#f97316",moderate:"#eab308",minor:"#6b7280"},he={critical:"\u2717",serious:"\u25B2",moderate:"\u25CF",minor:"\u25CB"};function be(e,t,n){let o=n||"plain-css";return`
 (function() {
-  const issues = ${serialized};
-  const colors = ${JSON.stringify(IMPACT_COLORS)};
-  const icons = ${JSON.stringify(IMPACT_ICONS)};
-  const API_KEY = ${JSON.stringify(apiKey || "")};
+  const issues = ${JSON.stringify(e.map((i,s)=>{let l=(()=>{try{return ue(i,o)}catch{return null}})();return{id:s,selector:i.selector,impact:i.impact,wcag:i.wcag,type:i.type,message:i.message.slice(0,200),problem:l?.problem||"",recommendedFix:l?.fix||"",wcagLink:l?.wcagLink||`https://www.w3.org/WAI/WCAG21/Understanding/${i.wcag.replace(/\./g,"")}`,whyMatters:me(i),fixDesc:i.fix?.suggestedValue?`Set ${i.fix.attribute}="${i.fix.suggestedValue}"`:"",fixAttr:i.fix?.attribute||"",fixVal:i.fix?.suggestedValue||"",fixCur:i.fix?.currentValue||"",canApply:!!(i.fix?.suggestedValue&&!i.fix?.needsManualReview)}}))};
+  const colors = ${JSON.stringify(fe)};
+  const icons = ${JSON.stringify(he)};
+  const API_KEY = ${JSON.stringify(t||"")};
   const API_URL = 'https://api.webability.io';
-  const FRAMEWORK = ${JSON.stringify(framework || "plain-css")};
+  const FRAMEWORK = ${JSON.stringify(n||"plain-css")};
   const activeFilters = { critical: true, serious: true, moderate: true, minor: true };
   const overlays = [];
 
@@ -165,74 +27,127 @@ function buildHighlightScript(issues, apiKey, framework) {
 
   const style = document.createElement('style');
   style.textContent = [
-    '@keyframes abilyo-reveal{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}',
-    '.abilyo-overlay{position:absolute;pointer-events:auto;z-index:2147483640;outline:2px solid red;outline-offset:2px;border-radius:3px;box-sizing:border-box;cursor:pointer;transition:opacity .2s,outline-color .2s;animation:abilyo-reveal .25s ease-out backwards}',
-    '.abilyo-overlay:hover{outline-width:3px;outline-offset:1px}',
-    '.abilyo-overlay.abilyo-active{outline:3px solid #445AE7!important;outline-offset:2px}',
-    '.abilyo-overlay.abilyo-hidden{opacity:0;pointer-events:none}',
-    '.abilyo-overlay.abilyo-dimmed{opacity:.12;filter:blur(1px)}',
-    '.abilyo-spotlight{position:fixed;inset:0;z-index:2147483639;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);pointer-events:none;transition:opacity .2s}',
-    '.abilyo-label{position:absolute;top:-22px;left:-2px;font:bold 11px/14px system-ui,sans-serif;color:#fff;padding:2px 6px;border-radius:3px 3px 0 0;white-space:nowrap;pointer-events:none;z-index:2147483641}',
-    '#abilyo-panel{position:fixed;top:12px;right:12px;z-index:2147483647;width:380px;max-height:calc(100vh - 24px);background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.05);font:13px system-ui,-apple-system,sans-serif;color:#1e1e1e;display:flex;flex-direction:column;overflow:hidden}',
-    '#abilyo-panel *{box-sizing:border-box}',
-    '.ap-header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #eee;flex-shrink:0}',
-    '.ap-logo{width:20px;height:20px;background:#445AE7;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px}',
-    '.ap-title{font-weight:700;font-size:14px;flex:1}',
-    '.ap-count{font-size:12px;color:#fff;background:#445AE7;padding:2px 8px;border-radius:10px;font-weight:600}',
-    '.ap-close{width:28px;height:28px;border:none;background:#f3f3f3;border-radius:6px;cursor:pointer;font-size:14px;color:#666;display:flex;align-items:center;justify-content:center}',
-    '.ap-close:hover{background:#e5e5e5}',
-    '.ap-toolbar{display:flex;gap:6px;padding:8px 16px;border-bottom:1px solid #eee;flex-shrink:0}',
-    '.ap-tbtn{padding:4px 10px;border-radius:6px;border:1px solid #ddd;background:#fff;cursor:pointer;font:500 11px system-ui;color:#555;transition:all .15s;display:flex;align-items:center;gap:4px}',
-    '.ap-tbtn:hover{background:#f5f5f5;border-color:#bbb}',
-    '.ap-tbtn.active{background:#445AE7;color:#fff;border-color:#445AE7}',
-    '.ap-tbtn-icon{font-size:13px}',
-    '.ap-score{margin-left:auto;font:700 13px system-ui;color:#445AE7}',
-    '.ap-filters{display:flex;gap:6px;padding:10px 16px;border-bottom:1px solid #eee;flex-shrink:0}',
-    '.ap-fbtn{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;border:1.5px solid #ddd;background:#fff;cursor:pointer;font:600 12px system-ui;transition:all .15s}',
-    '.ap-fbtn.active{border-color:currentColor;background:currentColor;color:#fff!important}',
-    '.ap-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}',
-    '.ap-list{flex:1;overflow-y:auto;padding:4px 0;scrollbar-width:thin}',
-    '.ap-row{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;cursor:pointer;border-bottom:1px solid #f5f5f5;transition:background .1s}',
-    '.ap-row:hover{background:#f8f9ff}',
-    '.ap-row.active{background:#eef1ff}',
-    '.ap-icon{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0;margin-top:1px}',
-    '.ap-content{flex:1;min-width:0}',
-    '.ap-wcag{font-size:11px;font-weight:700;color:#445AE7;background:#eef1ff;padding:1px 6px;border-radius:3px;margin-right:6px}',
-    '.ap-sev{font-size:12px;font-weight:600}',
-    '.ap-msg{font-size:12px;color:#555;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
-    '.ap-fix{font-size:11px;color:#16a34a;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
-    '#ap-detail{display:none;flex-shrink:0;border-top:1px solid #eee;padding:14px 16px;background:#fafbfc;max-height:200px;overflow-y:auto}',
-    '.apd-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}',
-    '.apd-wcag{font-weight:700;color:#445AE7;font-size:14px}',
-    '.apd-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;color:#fff;text-transform:uppercase}',
-    '.apd-msg{font-size:13px;color:#333;line-height:1.4;margin-bottom:6px}',
-    '.apd-fix{font-size:12px;color:#16a34a;background:#f0fdf4;padding:6px 10px;border-radius:6px;margin-top:6px}',
-    '.apd-sel{font-size:11px;color:#888;font-family:monospace;margin-top:6px;word-break:break-all}',
-    '.apd-actions{display:flex;gap:8px;margin-top:10px}',
-    '.apd-btn{padding:6px 14px;border-radius:6px;border:none;cursor:pointer;font:600 12px system-ui;transition:all .15s}',
-    '.apd-preview{background:#eef1ff;color:#445AE7}',
-    '.apd-preview:hover{background:#dde5ff}',
-    '.apd-preview.active{background:#445AE7;color:#fff}',
-    '.apd-apply{background:#16a34a;color:#fff}',
-    '.apd-apply:hover{background:#15803d}',
-    '.apd-apply.applied{background:#6b7280;cursor:default}',
-    '.apd-before-after{display:flex;gap:12px;margin-top:8px;font-size:12px}',
-    '.apd-ba-col{flex:1;padding:8px;border-radius:6px}',
-    '.apd-ba-before{background:#fef2f2;border:1px solid #fecaca}',
-    '.apd-ba-after{background:#f0fdf4;border:1px solid #bbf7d0}',
-    '.apd-ba-label{font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;color:#888}',
-    '.apd-ba-value{font-family:monospace;font-size:11px;word-break:break-all}',
-    '.apd-ai{background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;position:relative;overflow:hidden}',
-    '.apd-ai:hover{background:linear-gradient(135deg,#7c3aed,#4f46e5)}',
-    '.apd-ai:disabled{opacity:.7;cursor:wait}',
-    '.apd-ai-sparkle{display:inline-block;margin-right:4px}',
-    '@keyframes apd-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}',
-    '.apd-ai-loading{background:linear-gradient(90deg,#8b5cf6 25%,#c4b5fd 50%,#8b5cf6 75%);background-size:200% 100%;animation:apd-shimmer 1.5s infinite}',
-    '.apd-ai-result{margin-top:8px;padding:10px;background:linear-gradient(135deg,#f5f3ff,#ede9fe);border:1px solid #c4b5fd;border-radius:8px}',
-    '.apd-ai-explain{font-size:12px;color:#5b21b6;margin-bottom:6px;line-height:1.4}',
-    '.apd-ai-code{font-size:11px;font-family:monospace;color:#6d28d9;background:#ede9fe;padding:4px 8px;border-radius:4px;word-break:break-all}',
-    '#abilyo-pill{display:none;position:fixed;top:12px;right:12px;z-index:2147483647;background:#445AE7;color:#fff;border-radius:10px;padding:8px 14px;cursor:pointer;font:700 13px/1 system-ui;box-shadow:0 4px 16px rgba(68,90,231,.35);transition:transform .15s}',
-    '#abilyo-pill:hover{transform:scale(1.05)}',
+    // Brand tokens (matches .impeccable.md)
+    ":root{--ab-primary:#0052CC;--ab-primary-dark:#0033ED;--ab-accent:#47FFF7;--ab-navy:#1B3DB4;--ab-bg:#FFFFFF;--ab-surface:#F9FAFB;--ab-text:#111827;--ab-text-muted:#4B5563;--ab-border:#E5E7EB;--ab-success:#15803D;--ab-warning:#CA8A04;--ab-danger:#DC2626;--ab-bg-tint:#F4F8FF}",
+    "@keyframes abilyo-reveal{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}",
+
+    // Overlays on the page
+    ".abilyo-overlay{position:absolute;pointer-events:auto;z-index:2147483640;outline:2px solid red;outline-offset:2px;border-radius:3px;box-sizing:border-box;cursor:pointer;transition:opacity .2s,outline-color .2s;animation:abilyo-reveal .25s ease-out backwards}",
+    ".abilyo-overlay:hover{outline-width:3px;outline-offset:1px}",
+    ".abilyo-overlay.abilyo-active{outline:3px solid #0052CC!important;outline-offset:2px}",
+    ".abilyo-overlay.abilyo-hidden{opacity:0;pointer-events:none}",
+    ".abilyo-overlay.abilyo-dimmed{opacity:.12;filter:blur(1px)}",
+    ".abilyo-label{position:absolute;top:-22px;left:-2px;font:600 11px/14px Inter,system-ui,sans-serif;color:#fff;padding:2px 6px;border-radius:3px 3px 0 0;white-space:nowrap;pointer-events:none;z-index:2147483641}",
+
+    // Panel container
+    "#abilyo-panel{position:fixed;top:12px;right:12px;z-index:2147483647;width:400px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(0,82,204,.12),0 0 0 1px rgba(0,82,204,.08);font:13px Inter,system-ui,-apple-system,sans-serif;color:#111827;display:flex;flex-direction:column;overflow:hidden}",
+    "#abilyo-panel *{box-sizing:border-box;min-width:0}",
+
+    // Header with hero score
+    ".ap-header{padding:18px 20px 14px;border-bottom:1px solid #E5E7EB;flex-shrink:0}",
+    ".ap-header-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}",
+    ".ap-brand{display:flex;align-items:center;gap:8px;flex:1}",
+    ".ap-logo{width:18px;height:18px;background:#0052CC;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:11px;font-family:Inter,system-ui}",
+    ".ap-title{font-weight:600;font-size:13px;color:#4B5563;letter-spacing:-.01em}",
+    ".ap-close{width:26px;height:26px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-size:14px;color:#6B7280;display:flex;align-items:center;justify-content:center}",
+    ".ap-close:hover{background:#F3F4F6;color:#111827}",
+    ".ap-score-row{display:flex;align-items:baseline;gap:10px}",
+    ".ap-score{font:800 32px/1 Inter,system-ui;letter-spacing:-.03em;font-feature-settings:'tnum'}",
+    ".ap-score-label{display:flex;flex-direction:column;gap:1px}",
+    ".ap-score-summary{font-size:13px;font-weight:600;color:#111827}",
+    ".ap-score-meta{font-size:11px;color:#6B7280;font-weight:500}",
+
+    // Toolbar \u2014 toggle row with switch-style controls (NOT primary buttons)
+    ".ap-toolbar{display:flex;gap:14px;padding:10px 16px;border-bottom:1px solid #E5E7EB;flex-shrink:0;background:#FAFBFC;align-items:center}",
+    ".ap-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;font:500 12px Inter,system-ui;color:#4B5563;user-select:none}",
+    ".ap-toggle:hover{color:#111827}",
+    ".ap-toggle-track{position:relative;width:30px;height:18px;background:#D1D5DB;border-radius:9px;transition:background .15s;flex-shrink:0}",
+    ".ap-toggle-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.15);transition:transform .15s}",
+    ".ap-toggle.active .ap-toggle-track{background:#0052CC}",
+    ".ap-toggle.active .ap-toggle-thumb{transform:translateX(12px)}",
+    ".ap-toggle-meta{font-size:11px;color:#6B7280;font-weight:500;font-feature-settings:'tnum'}",
+
+    // Filter pills \u2014 distinct on/off state
+    ".ap-filters{display:flex;gap:6px;padding:10px 16px;border-bottom:1px solid #E5E7EB;flex-shrink:0;flex-wrap:wrap}",
+    ".ap-fbtn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:14px;border:1.5px solid transparent;cursor:pointer;font:600 11px Inter,system-ui;transition:all .15s;letter-spacing:.01em}",
+    // ON state: filled with severity color
+    ".ap-fbtn.active{color:#fff}",
+    // OFF state: clear "off" \u2014 gray text, gray border, no fill
+    ".ap-fbtn:not(.active){background:#fff;color:#9CA3AF;border-color:#E5E7EB;text-decoration:line-through;text-decoration-thickness:1px}",
+    ".ap-fbtn:not(.active):hover{color:#4B5563;border-color:#9CA3AF}",
+    ".ap-fbtn-num{font-weight:800}",
+    ".ap-fbtn-label{font-weight:500;text-transform:capitalize}",
+
+    // Issue list
+    ".ap-list{flex:1;overflow-y:auto;scrollbar-width:thin}",
+    ".ap-list::-webkit-scrollbar{width:6px}",
+    ".ap-list::-webkit-scrollbar-thumb{background:#E5E7EB;border-radius:3px}",
+    ".ap-row{display:flex;align-items:flex-start;gap:10px;padding:11px 16px;cursor:pointer;border-bottom:1px solid #F3F4F6;transition:background .1s}",
+    ".ap-row:hover{background:#F4F8FF}",
+    ".ap-row.active{background:#F4F8FF;box-shadow:inset 3px 0 0 #0052CC}",
+    ".ap-row.active.ap-sticky{position:sticky;top:0;background:#F4F8FF;z-index:2;border-bottom:2px solid #0052CC}",
+    ".ap-icon{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0;margin-top:1px;font-family:Inter,system-ui}",
+    ".ap-content{flex:1;min-width:0}",
+    ".ap-wcag{font-size:11px;font-weight:700;color:#0052CC;background:#F4F8FF;padding:2px 7px;border-radius:4px;letter-spacing:.01em;font-feature-settings:'tnum'}",
+    ".ap-msg{font-size:13px;color:#111827;margin-top:4px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}",
+    ".ap-fix{font-size:12px;color:#15803D;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}",
+    // Count badge for grouped rows (e.g. "weak link name \xD7 5")
+    ".ap-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;padding:0 6px;border-radius:9px;background:#0052CC;color:#fff;font-size:10px;font-weight:700;letter-spacing:.02em;margin-left:6px;font-feature-settings:'tnum'}",
+    // Header for issue group sections in the list
+    ".ap-group-header{padding:14px 16px 6px;font-size:10px;font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:.08em;background:#FAFBFC;border-bottom:1px solid #F3F4F6;border-top:1px solid #F3F4F6;position:sticky;top:0;z-index:1}",
+    ".ap-group-header:first-child{border-top:none}",
+
+    // Detail pane \u2014 visually distinct from list above
+    "#ap-detail{display:none;flex-shrink:0;border-top:2px solid #0052CC;padding:16px 18px;background:linear-gradient(180deg,#F4F8FF 0%,#FAFBFC 80px);max-height:340px;overflow-y:auto;box-shadow:inset 0 4px 8px -4px rgba(0,82,204,.08)}",
+    ".apd-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}",
+    ".apd-wcag{font-weight:800;color:#0052CC;font-size:15px;letter-spacing:-.01em}",
+    ".apd-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;color:#fff;text-transform:uppercase;letter-spacing:.06em}",
+    ".apd-msg{font-size:13px;color:#111827;line-height:1.45;margin-bottom:10px;font-weight:600}",
+    // Educational "Why this matters" \u2014 the explanation block
+    ".apd-section{margin-top:10px}",
+    ".apd-section-label{font-size:10px;font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}",
+    ".apd-why{font-size:12px;line-height:1.5;color:#1F2937;background:#FAFBFC;padding:9px 12px;border-radius:6px;border-left:3px solid #0052CC;margin-top:4px}",
+    ".apd-recommend{font-size:12px;line-height:1.5;color:#1F2937;margin-top:4px}",
+    ".apd-recommend code{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:11px;background:#F3F4F6;padding:1px 5px;border-radius:3px;color:#0033ED}",
+    ".apd-learnmore{font-size:11px;color:#0052CC;text-decoration:none;display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-weight:500;padding:4px 8px;border-radius:4px;background:#F4F8FF;width:fit-content}",
+    ".apd-learnmore:hover{background:#DBEAFE;text-decoration:none}",
+    ".apd-learnmore-arrow{font-size:11px;font-family:Inter,system-ui;line-height:1;display:inline-block;transform:translateY(-1px)}",
+    ".apd-fix{font-size:12px;color:#15803D;background:#F0FDF4;padding:8px 12px;border-radius:6px;margin-top:6px;border:1px solid #BBF7D0}",
+    ".apd-sel{font-size:11px;color:#6B7280;font-family:'SF Mono',Menlo,Consolas,monospace;margin-top:8px;word-break:break-all;background:#F3F4F6;padding:6px 8px;border-radius:4px}",
+    ".apd-actions{display:flex;gap:8px;margin-top:12px}",
+    ".apd-btn{padding:7px 14px;border-radius:7px;border:none;cursor:pointer;font:600 12px Inter,system-ui;transition:all .15s;letter-spacing:-.01em}",
+    ".apd-preview{background:#F4F8FF;color:#0052CC;border:1px solid #DBEAFE}",
+    ".apd-preview:hover{background:#DBEAFE;border-color:#0052CC}",
+    ".apd-preview.active{background:#0052CC;color:#fff;border-color:#0052CC}",
+    ".apd-apply{background:#15803D;color:#fff}",
+    ".apd-apply:hover{background:#166534}",
+    ".apd-apply.applied{background:#6B7280;cursor:default}",
+
+    // Before/after \u2014 branded subtle tints
+    ".apd-before-after{display:flex;gap:10px;margin-top:10px;font-size:12px}",
+    ".apd-ba-col{flex:1;padding:9px 10px;border-radius:6px}",
+    ".apd-ba-before{background:#FEF3F2;border:1px solid #FECDD3}",
+    ".apd-ba-after{background:#F4FFF8;border:1px solid #BBF7D0}",
+    ".apd-ba-label{font-weight:700;font-size:9px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;color:#6B7280}",
+    ".apd-ba-value{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:11px;word-break:break-all;color:#111827}",
+
+    // AI button \u2014 branded, no purple gradient, no sparkle emoji
+    ".apd-ai{background:#0052CC;color:#fff;position:relative;overflow:hidden;border:none}",
+    ".apd-ai:hover{background:#0033ED;box-shadow:0 0 0 3px rgba(0,82,204,.15)}",
+    ".apd-ai:disabled{opacity:.7;cursor:wait}",
+    ".apd-ai::before{content:'AI';display:inline-block;font-size:9px;font-weight:800;letter-spacing:.05em;background:#47FFF7;color:#0033ED;padding:2px 5px;border-radius:3px;margin-right:7px;vertical-align:middle}",
+    "@keyframes apd-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}",
+    ".apd-ai-loading{background:linear-gradient(90deg,#0052CC 25%,#3B7FF7 50%,#0052CC 75%);background-size:200% 100%;animation:apd-shimmer 1.5s infinite}",
+
+    // AI result \u2014 brand-blue tint, not lavender
+    ".apd-ai-result{margin-top:10px;padding:12px;background:#F4F8FF;border:1px solid #DBEAFE;border-radius:8px;border-left:3px solid #0052CC}",
+    ".apd-ai-explain{font-size:13px;color:#111827;margin-bottom:8px;line-height:1.45}",
+    ".apd-ai-code{font-size:12px;font-family:'SF Mono',Menlo,Consolas,monospace;color:#1B3DB4;background:#fff;padding:7px 10px;border-radius:5px;word-break:break-all;border:1px solid #DBEAFE}",
+
+    // Minimized pill \u2014 branded
+    "#abilyo-pill{display:none;position:fixed;top:12px;right:12px;z-index:2147483647;background:#0052CC;color:#fff;border-radius:10px;padding:9px 14px;cursor:pointer;font:700 13px/1 Inter,system-ui;box-shadow:0 4px 16px rgba(0,82,204,.35);transition:transform .15s}",
+    "#abilyo-pill:hover{transform:scale(1.05)}",
+    "#abilyo-pill .ap-pill-num{font-weight:800;font-feature-settings:'tnum';margin-right:4px}",
   ].join('\\n');
   document.head.appendChild(style);
 
@@ -306,31 +221,109 @@ function buildHighlightScript(issues, apiKey, framework) {
   const filtersEl = h('div', { className: 'ap-filters' });
   const toolbarEl = h('div', { className: 'ap-toolbar' });
 
-  // Toggle overlays button
+  // Score \u2014 Lighthouse-style: capped per-severity penalties so a site with
+  // 159 moderates doesn't crash to 0% (which is meaningless and demoralizing).
+  // Each severity contributes a bounded amount; floor at 5% so users always
+  // have somewhere to go.
+  function computeScore(c) {
+    if (c.critical + c.serious + c.moderate + c.minor === 0) return 100;
+    const criticalPenalty = Math.min(c.critical * 12, 35);  // up to -35
+    const seriousPenalty  = Math.min(c.serious  * 4,  25);  // up to -25
+    const moderatePenalty = Math.min(c.moderate * 1,  20);  // up to -20
+    const minorPenalty    = Math.min(c.minor    * 0.5, 10); // up to -10
+    return Math.max(5, Math.round(100 - criticalPenalty - seriousPenalty - moderatePenalty - minorPenalty));
+  }
+  const score = computeScore(counts);
+  const scoreColor = score >= 90 ? '#15803D' : score >= 70 ? '#CA8A04' : score >= 40 ? '#EA580C' : '#DC2626';
+  const scoreSummary = score >= 90 ? 'Looking good' : score >= 70 ? 'Mostly good' : score >= 40 ? 'Needs work' : 'Failing';
+
+  // Toolbar \u2014 switch-style toggles (clearly stateful, not action buttons).
+  // role=switch needs tabindex + Space/Enter to be reachable & operable
+  // without a mouse \u2014 same a11y bar we hold customer code to.
+  function activateOnKeydown(handler) {
+    return (ev) => {
+      if (ev.key === ' ' || ev.key === 'Enter' || ev.code === 'Space') {
+        ev.preventDefault();
+        handler();
+      }
+    };
+  }
+
   let overlaysVisible = true;
-  const toggleBtn = h('button', { className: 'ap-tbtn active', onClick: () => {
+  const overlayMeta = h('span', { className: 'ap-toggle-meta' }, 'on');
+  const toggleOverlays = () => {
     overlaysVisible = !overlaysVisible;
-    toggleBtn.classList.toggle('active', overlaysVisible);
+    overlayToggle.classList.toggle('active', overlaysVisible);
+    overlayToggle.setAttribute('aria-checked', String(overlaysVisible));
+    overlayMeta.textContent = overlaysVisible ? 'on' : 'off';
     document.querySelectorAll('.abilyo-overlay').forEach(o => { (o).style.display = overlaysVisible ? '' : 'none'; });
-  } }, [h('span', { className: 'ap-tbtn-icon' }, '\\u25CF'), document.createTextNode('Overlays')]);
-  toolbarEl.appendChild(toggleBtn);
-
-  // Score display
-  const score = issues.length === 0 ? 100 : Math.max(0, 100 - issues.length);
-  const scoreColor = score >= 90 ? '#16a34a' : score >= 50 ? '#eab308' : '#ef4444';
-  toolbarEl.appendChild(h('div', { className: 'ap-score', style: { color: scoreColor } }, score + '%'));
-
-  const pill = h('div', { id: 'abilyo-pill', onClick: () => { panel.style.display = 'flex'; pill.style.display = 'none'; } }, 'A \\u00B7 ' + issues.length + ' issues');
+  };
+  const overlayToggle = h('div', {
+    className: 'ap-toggle active',
+    role: 'switch',
+    tabindex: '0',
+    'aria-checked': 'true',
+    'aria-label': 'Highlight issues on page',
+    onClick: toggleOverlays,
+    onKeydown: activateOnKeydown(toggleOverlays),
+  }, [
+    h('span', { className: 'ap-toggle-track' }, [h('span', { className: 'ap-toggle-thumb' })]),
+    document.createTextNode('Highlight on page'),
+    overlayMeta,
+  ]);
+  toolbarEl.appendChild(overlayToggle);
+
+  // Labels toggle \u2014 hide the small WCAG number badges above each overlay if too noisy
+  let labelsVisible = true;
+  const labelsMeta = h('span', { className: 'ap-toggle-meta' }, 'on');
+  const toggleLabels = () => {
+    labelsVisible = !labelsVisible;
+    labelsToggle.classList.toggle('active', labelsVisible);
+    labelsToggle.setAttribute('aria-checked', String(labelsVisible));
+    labelsMeta.textContent = labelsVisible ? 'on' : 'off';
+    document.querySelectorAll('.abilyo-label').forEach(l => { (l).style.display = labelsVisible ? '' : 'none'; });
+  };
+  const labelsToggle = h('div', {
+    className: 'ap-toggle active',
+    role: 'switch',
+    tabindex: '0',
+    'aria-checked': 'true',
+    'aria-label': 'Show severity labels',
+    onClick: toggleLabels,
+    onKeydown: activateOnKeydown(toggleLabels),
+  }, [
+    h('span', { className: 'ap-toggle-track' }, [h('span', { className: 'ap-toggle-thumb' })]),
+    document.createTextNode('Labels'),
+    labelsMeta,
+  ]);
+  toolbarEl.appendChild(labelsToggle);
 
   const minBtn = h('button', { className: 'ap-close', title: 'Minimize', onClick: () => { panel.style.display = 'none'; pill.style.display = 'block'; } }, '\\u2014');
 
-  const panel = h('div', { id: 'abilyo-panel' }, [
-    h('div', { className: 'ap-header' }, [
+  // Branded minimized pill
+  const pillNum = h('span', { className: 'ap-pill-num' }, String(issues.length));
+  const pill = h('div', { id: 'abilyo-pill', onClick: () => { panel.style.display = 'flex'; pill.style.display = 'none'; } }, [
+    pillNum, document.createTextNode(' issues')
+  ]);
+
+  // Header \u2014 score is hero, brand mark is small
+  const headerTop = h('div', { className: 'ap-header-top' }, [
+    h('div', { className: 'ap-brand' }, [
       h('div', { className: 'ap-logo' }, 'A'),
       h('div', { className: 'ap-title' }, 'Abilyo'),
-      h('div', { className: 'ap-count' }, String(issues.length) + ' issues'),
-      minBtn,
     ]),
+    minBtn,
+  ]);
+  const scoreRow = h('div', { className: 'ap-score-row' }, [
+    h('div', { className: 'ap-score', style: { color: scoreColor } }, score + '%'),
+    h('div', { className: 'ap-score-label' }, [
+      h('div', { className: 'ap-score-summary' }, issues.length + ' issue' + (issues.length === 1 ? '' : 's') + ' \xB7 ' + scoreSummary),
+      h('div', { className: 'ap-score-meta' }, 'WCAG 2.1 AA'),
+    ]),
+  ]);
+
+  const panel = h('div', { id: 'abilyo-panel' }, [
+    h('div', { className: 'ap-header' }, [headerTop, scoreRow]),
     toolbarEl,
     filtersEl,
     listEl,
@@ -339,21 +332,31 @@ function buildHighlightScript(issues, apiKey, framework) {
   document.body.appendChild(panel);
   document.body.appendChild(pill);
 
-  // --- Filter buttons ---
+  // --- Filter pills \u2014 clear on/off state ---
   for (const sev of ['critical','serious','moderate','minor']) {
     if (counts[sev] === 0) continue;
-    const dot = h('span', { className: 'ap-dot', style: { background: '#fff' } });
     const btn = h('button', {
       className: 'ap-fbtn active',
-      style: { color: colors[sev] },
-      title: sev,
+      title: 'Toggle ' + sev,
       onClick: () => {
         activeFilters[sev] = !activeFilters[sev];
         btn.classList.toggle('active', activeFilters[sev]);
-        dot.style.background = activeFilters[sev] ? '#fff' : colors[sev];
+        // ON: filled with severity color. OFF: gray strikethrough.
+        if (activeFilters[sev]) {
+          btn.style.background = colors[sev];
+          btn.style.borderColor = colors[sev];
+        } else {
+          btn.style.background = '';
+          btn.style.borderColor = '';
+        }
         applyFilters();
       },
-    }, [dot, h('span', { style: { fontWeight: '700' } }, String(counts[sev]))]);
+    }, [
+      h('span', { className: 'ap-fbtn-num' }, String(counts[sev])),
+      h('span', { className: 'ap-fbtn-label' }, sev),
+    ]);
+    btn.style.background = colors[sev];
+    btn.style.borderColor = colors[sev];
     filtersEl.appendChild(btn);
   }
 
@@ -362,22 +365,75 @@ function buildHighlightScript(issues, apiKey, framework) {
 
   function renderList() {
     listEl.replaceChildren();
-    for (const issue of deduped) {
-      if (!activeFilters[issue.impact]) continue;
+
+    // Build groups: one row per (type + wcag + recommendedFix), with all matching ids
+    const visible = deduped.filter(i => activeFilters[i.impact]);
+    const groupMap = new Map();
+    for (const issue of visible) {
+      const key = (issue.type || issue.wcag) + '::' + issue.wcag + '::' + (issue.recommendedFix || issue.fixDesc || '');
+      const existing = groupMap.get(key);
+      if (existing) {
+        existing.ids.push(issue.id);
+      } else {
+        groupMap.set(key, { lead: issue, ids: [issue.id] });
+      }
+    }
+    const groups = Array.from(groupMap.values());
+
+    // Sort: severity order, then group size desc within severity
+    const sevOrder = { critical: 0, serious: 1, moderate: 2, minor: 3 };
+    groups.sort((a, b) => {
+      const s = (sevOrder[a.lead.impact] ?? 9) - (sevOrder[b.lead.impact] ?? 9);
+      if (s !== 0) return s;
+      return b.ids.length - a.ids.length;
+    });
+
+    // Render with severity section headers
+    let currentSection = '';
+    for (const g of groups) {
+      if (g.lead.impact !== currentSection) {
+        currentSection = g.lead.impact;
+        const total = groups.filter(x => x.lead.impact === currentSection).reduce((n, x) => n + x.ids.length, 0);
+        listEl.appendChild(h('div', { className: 'ap-group-header' }, currentSection.toUpperCase() + ' \\u00b7 ' + total));
+      }
+
+      const isActive = g.ids.includes(activeId);
       const contentChildren = [
-        h('span', { className: 'ap-wcag' }, issue.wcag),
-        h('span', { className: 'ap-sev' }, issue.impact.toUpperCase()),
-        h('div', { className: 'ap-msg' }, issue.message),
+        h('span', { className: 'ap-wcag' }, g.lead.wcag),
+        h('div', { className: 'ap-msg' }, g.lead.problem || g.lead.message),
       ];
-      if (issue.fixDesc) contentChildren.push(h('div', { className: 'ap-fix' }, 'Fix: ' + issue.fixDesc));
+      if (g.ids.length > 1) {
+        contentChildren[0] = h('span', null, [
+          h('span', { className: 'ap-wcag' }, g.lead.wcag),
+          h('span', { className: 'ap-count-badge', style: { background: colors[g.lead.impact] } }, '\\u00d7' + g.ids.length),
+        ]);
+      }
+      if (g.lead.recommendedFix && g.lead.recommendedFix !== g.lead.problem) {
+        contentChildren.push(h('div', { className: 'ap-fix' }, g.lead.recommendedFix));
+      } else if (g.lead.fixDesc) {
+        contentChildren.push(h('div', { className: 'ap-fix' }, 'Fix: ' + g.lead.fixDesc));
+      }
 
       const row = h('div', {
-        className: 'ap-row' + (issue.id === activeId ? ' active' : ''),
-        onClick: () => selectIssue(issue.id),
-        onMouseenter: () => { const o = overlays[issue.id]; if (o) { o.style.outlineWidth = '3px'; o.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } },
-        onMouseleave: () => { const o = overlays[issue.id]; if (o && issue.id !== activeId) o.style.outlineWidth = '2px'; },
+        className: 'ap-row' + (isActive ? ' active ap-sticky' : ''),
+        onClick: () => selectIssue(g.lead.id),
+        onMouseenter: () => {
+          // Highlight all members of the group on hover
+          for (const memberId of g.ids) {
+            const o = overlays[memberId];
+            if (o) o.style.outlineWidth = '3px';
+          }
+          const o = overlays[g.lead.id];
+          if (o) o.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        },
+        onMouseleave: () => {
+          for (const memberId of g.ids) {
+            const o = overlays[memberId];
+            if (o && memberId !== activeId) o.style.outlineWidth = '2px';
+          }
+        },
       }, [
-        h('div', { className: 'ap-icon', style: { background: colors[issue.impact] } }, icons[issue.impact]),
+        h('div', { className: 'ap-icon', style: { background: colors[g.lead.impact] }, title: g.lead.impact }, icons[g.lead.impact]),
         h('div', { className: 'ap-content' }, contentChildren),
       ]);
       listEl.appendChild(row);
@@ -429,7 +485,7 @@ function buildHighlightScript(issues, apiKey, framework) {
     appliedFixes.add(issue.id);
     previewState.id = -1;
     const ov = overlays[issue.id];
-    if (ov) { ov.style.outlineColor = '#16a34a'; ov.querySelector('.abilyo-label').style.background = '#16a34a'; ov.querySelector('.abilyo-label').textContent = '\\u2713 Fixed'; }
+    if (ov) { ov.style.outlineColor = '#15803D'; ov.querySelector('.abilyo-label').style.background = '#15803D'; ov.querySelector('.abilyo-label').textContent = 'Fixed'; }
   }
 
   function selectIssue(id) {
@@ -456,7 +512,39 @@ function buildHighlightScript(issues, apiKey, framework) {
       h('span', { className: 'apd-wcag' }, 'WCAG ' + issue.wcag),
       h('span', { className: 'apd-badge', style: { background: colors[issue.impact] } }, issue.impact),
     ]));
-    detailEl.appendChild(h('div', { className: 'apd-msg' }, issue.message));
+    // The headline \u2014 what's wrong (use richer "problem" if available, else the raw message)
+    detailEl.appendChild(h('div', { className: 'apd-msg' }, issue.problem || issue.message));
+
+    // Why this matters \u2014 user-impact explanation
+    if (issue.whyMatters) {
+      detailEl.appendChild(h('div', { className: 'apd-section' }, [
+        h('div', { className: 'apd-section-label' }, 'Why it matters'),
+        h('div', { className: 'apd-why' }, issue.whyMatters),
+      ]));
+    }
+
+    // Recommended fix \u2014 plain-language guidance from generateDevSuggestion
+    if (issue.recommendedFix && issue.recommendedFix !== issue.problem) {
+      const recommendEl = h('div', { className: 'apd-recommend' });
+      recommendEl.textContent = issue.recommendedFix;
+      detailEl.appendChild(h('div', { className: 'apd-section' }, [
+        h('div', { className: 'apd-section-label' }, 'How to fix it'),
+        recommendEl,
+      ]));
+    }
+
+    // Link to W3C WCAG explainer
+    if (issue.wcagLink) {
+      detailEl.appendChild(h('a', {
+        className: 'apd-learnmore',
+        href: issue.wcagLink,
+        target: '_blank',
+        rel: 'noopener noreferrer',
+      }, [
+        document.createTextNode('Read WCAG ' + issue.wcag),
+        h('span', { className: 'apd-learnmore-arrow' }, '\\u2192'), // \u2192 (right arrow, not unicode-escape \u2197)
+      ]));
+    }
 
     if (issue.canApply && !appliedFixes.has(issue.id)) {
       const ba = h('div', { className: 'apd-before-after' }, [
@@ -471,39 +559,36 @@ function buildHighlightScript(issues, apiKey, framework) {
       ]);
       detailEl.appendChild(ba);
 
-      const previewBtn = h('button', { className: 'apd-btn apd-preview' }, '\\uD83D\\uDD0D Preview');
-      const applyBtn = h('button', { className: 'apd-btn apd-apply' }, '\\u2713 Apply Fix');
+      const previewBtn = h('button', { className: 'apd-btn apd-preview' }, 'Preview');
+      const applyBtn = h('button', { className: 'apd-btn apd-apply' }, 'Apply fix');
 
       previewBtn.addEventListener('click', () => {
         const on = previewFix(issue);
         previewBtn.classList.toggle('active', on);
-        previewBtn.textContent = on ? '\\u21A9 Revert' : '\\uD83D\\uDD0D Preview';
+        previewBtn.textContent = on ? 'Revert' : 'Preview';
       });
       applyBtn.addEventListener('click', () => {
         applyFix(issue);
         applyBtn.classList.add('applied');
-        applyBtn.textContent = '\\u2713 Applied';
+        applyBtn.textContent = 'Applied';
         previewBtn.style.display = 'none';
       });
 
       detailEl.appendChild(h('div', { className: 'apd-actions' }, [previewBtn, applyBtn]));
     } else if (appliedFixes.has(issue.id)) {
-      detailEl.appendChild(h('div', { className: 'apd-fix' }, '\\u2713 Fix applied'));
+      detailEl.appendChild(h('div', { className: 'apd-fix' }, 'Fix applied'));
     } else if (issue.fixDesc) {
-      detailEl.appendChild(h('div', { className: 'apd-fix' }, '\\uD83D\\uDCA1 ' + issue.fixDesc));
+      detailEl.appendChild(h('div', { className: 'apd-fix' }, issue.fixDesc));
     }
 
-    // AI Fix button \u2014 available to everyone, no login needed
+    // AI Fix button \u2014 branded, no purple gradient, AI pill via ::before
     if (!appliedFixes.has(issue.id)) {
       const aiResultContainer = h('div');
-      const aiBtn = h('button', { className: 'apd-btn apd-ai' }, [
-        h('span', { className: 'apd-ai-sparkle' }, '\\u2728'),
-        document.createTextNode('AI Fix'),
-      ]);
+      const aiBtn = h('button', { className: 'apd-btn apd-ai' }, document.createTextNode('Generate fix'));
       aiBtn.addEventListener('click', async () => {
         aiBtn.disabled = true;
         aiBtn.classList.add('apd-ai-loading');
-        aiBtn.textContent = '\\u2728 Generating...';
+        aiBtn.textContent = 'Generating fix\\u2026';
         try {
           const el = document.querySelector(issue.selector);
           const elHtml = el ? el.outerHTML.slice(0, 600) : '';
@@ -531,7 +616,7 @@ function buildHighlightScript(issues, apiKey, framework) {
           if (!res.ok) throw new Error('API error');
           const data = await res.json();
           aiBtn.classList.remove('apd-ai-loading');
-          aiBtn.textContent = '\\u2728 AI Fix';
+          aiBtn.textContent = 'Generate fix';
           aiBtn.disabled = false;
 
           const alts = data.alternatives || [];
@@ -539,15 +624,15 @@ function buildHighlightScript(issues, apiKey, framework) {
 
           for (let ai = 0; ai < alts.length; ai++) {
             const alt = alts[ai];
-            const altBox = h('div', { className: 'apd-ai-result', style: ai > 0 ? { marginTop: '6px' } : {} }, [
-              h('div', { style: { fontWeight: '700', fontSize: '12px', color: '#5b21b6', marginBottom: '4px' } }, alt.label || 'Option ' + (ai+1)),
+            const altBox = h('div', { className: 'apd-ai-result', style: ai > 0 ? { marginTop: '8px' } : {} }, [
+              h('div', { style: { fontWeight: '700', fontSize: '12px', color: '#0052CC', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '.05em' } }, alt.label || 'Option ' + (ai+1)),
               h('div', { className: 'apd-ai-explain' }, alt.explanation || ''),
               h('div', { className: 'apd-ai-code' }, alt.frameworkCode || (alt.attribute + '="' + alt.value + '"')),
             ]);
 
-            const altActions = h('div', { className: 'apd-actions', style: { marginTop: '6px' } });
-            const pBtn = h('button', { className: 'apd-btn apd-preview', style: { fontSize: '11px', padding: '4px 10px' } }, '\\uD83D\\uDD0D Preview');
-            const aBtn = h('button', { className: 'apd-btn apd-apply', style: { fontSize: '11px', padding: '4px 10px' } }, '\\u2713 Apply');
+            const altActions = h('div', { className: 'apd-actions', style: { marginTop: '8px' } });
+            const pBtn = h('button', { className: 'apd-btn apd-preview', style: { fontSize: '11px', padding: '5px 11px' } }, 'Preview');
+            const aBtn = h('button', { className: 'apd-btn apd-apply', style: { fontSize: '11px', padding: '5px 11px' } }, 'Apply');
 
             pBtn.addEventListener('click', () => {
               const t = document.querySelector(issue.selector);
@@ -562,7 +647,7 @@ function buildHighlightScript(issues, apiKey, framework) {
               if (alt.attribute === 'style') t.setAttribute('style', (previewState.original ? previewState.original + ';' : '') + alt.value);
               else if (alt.previewCss) t.setAttribute('style', (previewState.original ? previewState.original + ';' : '') + alt.previewCss);
               else if (alt.attribute) t.setAttribute(alt.attribute, alt.value);
-              pBtn.textContent = '\\u21A9 Revert'; pBtn.classList.add('active');
+              pBtn.textContent = 'Revert'; pBtn.classList.add('active');
             });
             aBtn.addEventListener('click', () => {
               const t = document.querySelector(issue.selector);
@@ -571,8 +656,8 @@ function buildHighlightScript(issues, apiKey, framework) {
               else if (alt.attribute) t.setAttribute(alt.attribute, alt.value);
               appliedFixes.add(issue.id); previewState.id = -1;
               const o = overlays[issue.id];
-              if (o) { o.style.outlineColor = '#8b5cf6'; const l = o.querySelector('.abilyo-label'); if (l) { l.style.background = '#8b5cf6'; l.textContent = '\\u2728 AI Fixed'; } }
-              aBtn.classList.add('applied'); aBtn.textContent = '\\u2713 Applied'; pBtn.style.display = 'none';
+              if (o) { o.style.outlineColor = '#0052CC'; const l = o.querySelector('.abilyo-label'); if (l) { l.style.background = '#0052CC'; l.textContent = '\\u2713 Fixed'; } }
+              aBtn.classList.add('applied'); aBtn.textContent = 'Applied'; pBtn.style.display = 'none';
             });
             altActions.appendChild(pBtn);
             altActions.appendChild(aBtn);
@@ -581,7 +666,7 @@ function buildHighlightScript(issues, apiKey, framework) {
           }
         } catch {
           aiBtn.classList.remove('apd-ai-loading');
-          aiBtn.textContent = '\\u2728 AI Fix (retry)';
+          aiBtn.textContent = 'Try again';
           aiBtn.disabled = false;
         }
       });
@@ -612,138 +697,7 @@ function buildHighlightScript(issues, apiKey, framework) {
 
   renderList();
 })();
-`;
-}
-async function localScan(url, options) {
-  const wcagTags = WCAG_TAG_MAP[options.wcag.toUpperCase()] ?? WCAG_TAG_MAP["AA"];
-  const viewport = ["mobile", "tablet", "desktop"].includes(options.viewport ?? "") ? options.viewport : "desktop";
-  const pw = await import("playwright");
-  const browser = await pw.chromium.launch({ headless: !options.show });
-  const context = await browser.newContext({ viewport: viewport === "mobile" ? { width: 375, height: 667 } : viewport === "tablet" ? { width: 768, height: 1024 } : { width: 1280, height: 720 } });
-  const page = await context.newPage();
-  const targetUrl = url.startsWith("http") ? url : `https://${url}`;
-  await page.goto(targetUrl, { waitUntil: "domcontentloaded", timeout: 3e4 });
-  const fw = await detectFramework(page);
-  const result = await scan2(page, {
-    wcagTags,
-    includeAxe: true,
-    dismissModals: true,
-    deep: options.deep,
-    deepApiUrl: options.deep ? "https://api.webability.io" : void 0,
-    deepApiKey: options.deep ? options.apiKey : void 0
-  });
-  if (options.show && result.issues.length > 0) {
-    await page.evaluate(buildHighlightScript(result.issues, options.apiKey, fw.framework));
-    await page.evaluate(() => window.scrollTo(0, 0));
-    return { ...result, framework: fw.framework, _browser: browser };
-  }
-  await browser.close();
-  return { ...result, framework: fw.framework };
-}
-async function closeBrowser(result) {
-  if (result._browser) {
-    await result._browser.close();
-    delete result._browser;
-  }
-}
-
-// src/flow-scan.ts
-import { scan as scan3, detectFramework as detectFramework2 } from "@webability/core";
-var WCAG_TAG_MAP2 = {
-  "A": ["wcag2a"],
-  "AA": ["wcag2a", "wcag2aa", "wcag21aa", "wcag22aa"],
-  "AAA": ["wcag2a", "wcag2aa", "wcag2aaa", "wcag21aa", "wcag22aa"]
-};
-async function flowScan(startUrl, options = {}) {
-  const wcagTags = WCAG_TAG_MAP2[(options.wcag || "AA").toUpperCase()] ?? WCAG_TAG_MAP2["AA"];
-  const targetUrl = startUrl.startsWith("http") ? startUrl : `https://${startUrl}`;
-  const t0 = Date.now();
-  const pw = await import("playwright");
-  const browser = await pw.chromium.launch({ headless: false });
-  const context = await browser.newContext({ viewport: { width: 1280, height: 720 } });
-  const page = await context.newPage();
-  const pageResults = [];
-  let framework = "plain-css";
-  let scanning = false;
-  let scanQueued = false;
-  const scannedUrls = /* @__PURE__ */ new Set();
-  const scanCurrentPage = async () => {
-    if (scanning) {
-      scanQueued = true;
-      return;
-    }
-    scanning = true;
-    try {
-      await page.waitForLoadState("domcontentloaded", { timeout: 5e3 }).catch(() => {
-      });
-      await page.waitForTimeout(800);
-      const url = page.url();
-      if (scannedUrls.has(url)) {
-        scanning = false;
-        return;
-      }
-      scannedUrls.add(url);
-      if (!framework || framework === "plain-css") {
-        const fw = await detectFramework2(page).catch(() => ({ framework: "plain-css" }));
-        framework = fw.framework;
-      }
-      const result = await scan3(page, { wcagTags, includeAxe: true, dismissModals: false });
-      pageResults.push({ url, issues: result.issues, scannedAt: (/* @__PURE__ */ new Date()).toISOString() });
-      options.onPageScan?.(url, result.issues.length);
-    } catch {
-    } finally {
-      scanning = false;
-      if (scanQueued) {
-        scanQueued = false;
-        setTimeout(scanCurrentPage, 100);
-      }
-    }
-  };
-  page.on("framenavigated", (frame) => {
-    if (frame === page.mainFrame()) {
-      setTimeout(scanCurrentPage, 600);
-    }
-  });
-  await page.goto(targetUrl, { waitUntil: "domcontentloaded", timeout: 3e4 });
-  await new Promise((resolve) => {
-    browser.on("disconnected", () => resolve());
-    process.once("SIGINT", () => resolve());
-  });
-  await browser.close().catch(() => {
-  });
-  const issueMap = /* @__PURE__ */ new Map();
-  for (const pr of pageResults) {
-    for (const issue of pr.issues) {
-      const key = `${issue.type}::${issue.selector}::${issue.wcag}`;
-      const existing = issueMap.get(key);
-      if (existing) {
-        if (!existing.foundOn.includes(pr.url)) {
-          existing.foundOn.push(pr.url);
-          existing.pageCount = existing.foundOn.length;
-        }
-      } else {
-        issueMap.set(key, { ...issue, foundOn: [pr.url], pageCount: 1 });
-      }
-    }
-  }
-  return {
-    pages: pageResults,
-    uniqueIssues: Array.from(issueMap.values()).sort((a, b) => {
-      const order = { critical: 0, serious: 1, moderate: 2, minor: 3 };
-      const aOrd = order[a.impact] ?? 2;
-      const bOrd = order[b.impact] ?? 2;
-      if (aOrd !== bOrd) return aOrd - bOrd;
-      return b.pageCount - a.pageCount;
-    }),
-    framework,
-    totalDuration: Date.now() - t0
-  };
-}
-
-// src/init.ts
-import { writeFileSync, existsSync } from "fs";
-import chalk from "chalk";
-var DEFAULT_CONFIG = `project: my-project
+`}async function Y(e,t){let n=H[t.wcag.toUpperCase()]??H.AA,o=["mobile","tablet","desktop"].includes(t.viewport??"")?t.viewport:"desktop",i=await(await import("playwright")).chromium.launch({headless:!t.show,ignoreDefaultArgs:t.show?["--enable-automation"]:void 0,args:t.show?["--disable-blink-features=AutomationControlled","--no-default-browser-check","--disable-infobars","--no-first-run","--silent-launch","--disable-features=DialMediaRouteProvider"]:void 0}),l=await(await i.newContext({viewport:o==="mobile"?{width:390,height:844}:o==="tablet"?{width:820,height:1180}:{width:1280,height:720}})).newPage(),d=e.startsWith("http")?e:`https://${e}`;await l.goto(d,{waitUntil:"domcontentloaded",timeout:3e4});let f=await pe(l),c=await de(l,{wcagTags:n,includeAxe:t.includeAxe??!0,dismissModals:!0,deep:t.deep,deepApiUrl:t.deep?"https://api.webability.io":void 0,deepApiKey:t.deep?t.apiKey:void 0});return t.show&&c.issues.length>0?(await l.evaluate(be(c.issues,t.apiKey,f.framework)),await l.evaluate(()=>window.scrollTo(0,0)),{...c,framework:f.framework,_browser:i}):(await i.close(),{...c,framework:f.framework})}async function _(e){e._browser&&(await e._browser.close(),delete e._browser)}import{scan as ye,detectFramework as xe}from"@webability/core";var X={A:["wcag2a"],AA:["wcag2a","wcag2aa","wcag21aa","wcag22aa"],AAA:["wcag2a","wcag2aa","wcag2aaa","wcag21aa","wcag22aa"]};async function Q(e,t={}){let n=X[(t.wcag||"AA").toUpperCase()]??X.AA,o=e.startsWith("http")?e:`https://${e}`,r=Date.now(),s=await(await import("playwright")).chromium.launch({headless:!1}),d=await(await s.newContext({viewport:{width:1280,height:720}})).newPage(),f=[],c="plain-css",g=!1,b=!1,x=new Set,q=async()=>{if(g){b=!0;return}g=!0;try{await d.waitForLoadState("domcontentloaded",{timeout:5e3}).catch(()=>{}),await d.waitForTimeout(800);let u=d.url();if(x.has(u)){g=!1;return}x.add(u),(!c||c==="plain-css")&&(c=(await xe(d).catch(()=>({framework:"plain-css"}))).framework);let y=await ye(d,{wcagTags:n,includeAxe:!0,dismissModals:!1});f.push({url:u,issues:y.issues,scannedAt:new Date().toISOString()}),t.onPageScan?.(u,y.issues.length)}catch{}finally{g=!1,b&&(b=!1,setTimeout(q,100))}};d.on("framenavigated",u=>{u===d.mainFrame()&&setTimeout(q,600)}),await d.goto(o,{waitUntil:"domcontentloaded",timeout:3e4}),await new Promise(u=>{s.on("disconnected",()=>u()),process.once("SIGINT",()=>u())}),await s.close().catch(()=>{});let P=new Map;for(let u of f)for(let y of u.issues){let C=`${y.type}::${y.selector}::${y.wcag}`,w=P.get(C);w?w.foundOn.includes(u.url)||(w.foundOn.push(u.url),w.pageCount=w.foundOn.length):P.set(C,{...y,foundOn:[u.url],pageCount:1})}return{pages:f,uniqueIssues:Array.from(P.values()).sort((u,y)=>{let C={critical:0,serious:1,moderate:2,minor:3},w=C[u.impact]??2,V=C[y.impact]??2;return w!==V?w-V:y.pageCount-u.pageCount}),framework:c,totalDuration:Date.now()-r}}import{writeFileSync as we,existsSync as ve}from"fs";import M from"chalk";var ke=`project: my-project
 urls:
   - http://localhost:3000
 standard: WCAG2.1AA
@@ -752,537 +706,4 @@ ignore: []
 threshold:
   critical: 0
   serious: 5
-`;
-function initConfig() {
-  const filename = ".webability.yml";
-  if (existsSync(filename)) {
-    console.log(chalk.yellow(`  ${filename} already exists`));
-    return;
-  }
-  writeFileSync(filename, DEFAULT_CONFIG);
-  console.log(chalk.green(`  Created ${filename}`));
-  console.log(chalk.dim("  Edit it to configure your project URLs and thresholds"));
-}
-
-// src/display.ts
-import chalk2 from "chalk";
-var DIM = chalk2.dim;
-var BOLD = chalk2.bold;
-var BLUE = chalk2.blue;
-var GREEN = chalk2.green;
-var RED = chalk2.red;
-var YELLOW = chalk2.yellow;
-var CYAN = chalk2.cyan;
-var WHITE = chalk2.white;
-function header() {
-  console.log();
-  console.log(`  ${BLUE("\u25C6")} ${BOLD("Abilyo")} ${DIM("WCAG Scanner")}`);
-  console.log();
-}
-function scoreCard(score, url) {
-  const color = score >= 80 ? GREEN : score >= 50 ? YELLOW : RED;
-  const icon = score >= 80 ? GREEN("\u2713") : score >= 50 ? YELLOW("\u26A0") : RED("\u2717");
-  const label = score >= 80 ? "Passing" : score >= 50 ? "Needs work" : "Failing";
-  console.log(`  ${DIM("URL")}   ${WHITE(url)}`);
-  console.log(`  ${DIM("Score")} ${color.bold(score + "%")} ${icon} ${DIM(label)}`);
-  console.log(`  ${DIM("      ")}${renderBar(score)}`);
-  console.log();
-}
-function renderBar(score) {
-  const w = 32;
-  const filled = Math.round(score / 100 * w);
-  const empty = w - filled;
-  const color = score >= 80 ? GREEN : score >= 50 ? YELLOW : RED;
-  return color("\u2501".repeat(filled)) + DIM("\u2501".repeat(empty));
-}
-function summaryLine(s) {
-  const parts = [];
-  if (s.critical > 0) parts.push(RED.bold(`${s.critical} critical`));
-  if (s.serious > 0) parts.push(YELLOW(`${s.serious} serious`));
-  if (s.moderate > 0) parts.push(DIM(`${s.moderate} moderate`));
-  if (s.minor > 0) parts.push(DIM(`${s.minor} minor`));
-  console.log(`  ${BOLD(String(s.total))} issues  ${parts.join(DIM(" \xB7 "))}`);
-  console.log();
-}
-function issueBlock(opts) {
-  const icon = opts.severity === "critical" ? RED("\u2717") : opts.severity === "serious" ? YELLOW("\u25B2") : DIM("\u25CF");
-  const wcag = DIM(`${opts.wcag}`);
-  const count = opts.count && opts.count > 1 ? DIM(` \xD7${opts.count}`) : "";
-  console.log(`  ${icon} ${wcag}${count}  ${opts.problem.slice(0, 72)}`);
-  if (opts.contrast) {
-    console.log(`    ${CYAN("fix")} ${opts.fix.slice(0, 70)}`);
-    console.log(`        ${DIM(`${opts.contrast.current}:1 \u2192 ${opts.contrast.suggested}:1 (min ${opts.contrast.required}:1)`)}`);
-  } else if (opts.before && opts.after) {
-    console.log(`    ${CYAN("fix")} ${DIM(opts.before)} ${DIM("\u2192")} ${GREEN(opts.after)}`);
-  } else {
-    console.log(`    ${CYAN("fix")} ${opts.fix.slice(0, 70)}`);
-  }
-  if (opts.html && opts.count === 1) {
-    const snippet = opts.html.slice(0, 60).replace(/\n/g, " ");
-    console.log(`        ${DIM(snippet)}`);
-  }
-  if (opts.selectors && opts.selectors.length > 0 && opts.count && opts.count > 1) {
-    const shown = opts.selectors.slice(0, 2).map((s) => s.slice(0, 30)).join(DIM(", "));
-    const more = opts.count > 2 ? DIM(` +${opts.count - 2} more`) : "";
-    console.log(`        ${DIM(shown + more)}`);
-  } else if (opts.selector) {
-    console.log(`        ${DIM(opts.selector.slice(0, 55))}`);
-  }
-  console.log();
-}
-function footer(opts) {
-  console.log(DIM("  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"));
-  if (opts?.hasIssues) {
-    console.log(`  ${DIM("Next steps:")}`);
-    console.log(`    ${CYAN("abilyo scan " + (opts.url || "<url>") + " --format json")}  ${DIM("CI/CD output")}`);
-    console.log(`    ${CYAN("abilyo scan " + (opts.url || "<url>") + " --format html > report.html")}  ${DIM("share report")}`);
-    console.log();
-  }
-  console.log(`  ${BLUE("\u25C6")} ${DIM("Auto-fix at")} ${BLUE("abilyo.com")}`);
-  console.log();
-}
-function errorMsg(msg) {
-  console.log(RED(`  \u2717 Error: ${msg}`));
-  console.log();
-}
-function jsonOutput(data) {
-  console.log(JSON.stringify(data, null, 2));
-}
-function csvOutput(issues) {
-  console.log("severity,wcag,message,element");
-  for (const i of issues) {
-    const msg = i.message.replace(/"/g, '""');
-    const el = (i.element || "").replace(/"/g, '""');
-    console.log(`${i.severity},${i.wcag},"${msg}","${el}"`);
-  }
-}
-
-// src/cli.ts
-var program = new Command();
-program.name("abilyo").description("Abilyo by WebAbility \u2014 WCAG accessibility scanner").version("1.0.0");
-program.command("scan <url>").description("Scan a website for accessibility issues").option("-f, --format <format>", "Output format: table, json, csv, sarif, html", "table").option("--wcag <level>", "WCAG level: A, AA, AAA", "AA").option("--deep", "Run a deeper scan with additional checks (Pro plan)").option("--remote", "Run scan on WebAbility servers instead of locally").option("--upload", "Upload results to dashboard (requires login)").option("--exit", "Exit with code 1 if issues found (CI mode)").option("--no-axe", "Skip axe-core (use only WebAbility detectors)").option("--viewport <size>", "Viewport: mobile, tablet, desktop", "desktop").option("--show", "Open browser and highlight issues visually").action(async (url, opts) => {
-  if (!url.startsWith("http")) url = `https://${url}`;
-  if (opts.deep || opts.upload) {
-    const apiKey = getApiKey();
-    if (!apiKey) {
-      if (opts.format === "table") header();
-      errorMsg("--deep and --upload require a Pro plan. Run `abilyo login` first.");
-      return process.exit(1);
-    }
-    try {
-      const verify = await fetch("https://api.webability.io/cli/verify", {
-        headers: { "Authorization": `Bearer ${apiKey}` }
-      });
-      if (verify.ok) {
-        const data = await verify.json();
-        if (!data.active) {
-          if (opts.format === "table") header();
-          errorMsg("Your account does not have an active Pro plan.");
-          console.log(chalk3.dim("  Upgrade at https://abilyo.com/pricing"));
-          return process.exit(1);
-        }
-      }
-    } catch {
-    }
-  }
-  if (opts.remote) {
-    await remoteScan(url, opts);
-    return;
-  }
-  if (opts.format === "table") header();
-  const t0 = Date.now();
-  const spinner = ora({ text: "Scanning...", prefixText: "  " }).start();
-  let result;
-  try {
-    result = await localScan(url, {
-      wcag: opts.wcag,
-      deep: opts.deep ?? false,
-      apiKey: getApiKey() ?? void 0,
-      show: opts.show ?? false
-    });
-    const elapsed = ((Date.now() - t0) / 1e3).toFixed(1);
-    spinner.succeed(`Scanned ${result.issues.length} issues in ${elapsed}s`);
-    if (opts.format === "json") {
-      const sanitized = {
-        ...result,
-        issues: result.issues.map(({ source, ...rest }) => rest)
-      };
-      console.log(JSON.stringify(sanitized, null, 2));
-    } else if (opts.format === "csv") {
-      csvOutput(result.issues.map((i) => ({
-        severity: i.impact,
-        wcag: i.wcag,
-        message: i.message,
-        element: i.selector
-      })));
-    } else if (opts.format === "sarif") {
-      console.log(JSON.stringify(toSarif(result), null, 2));
-    } else if (opts.format === "html") {
-      const { toHtmlReport } = await import("@webability/core");
-      console.log(toHtmlReport(result));
-    } else {
-      scoreCard(result.summary.total === 0 ? 100 : Math.max(0, 100 - result.summary.total), url);
-      summaryLine(result.summary);
-      if (result.issues.length > 0) {
-        const { generateDevSuggestion } = await import("@webability/core");
-        const fw = result.framework || "plain-css";
-        const grouped = [];
-        const seen = /* @__PURE__ */ new Map();
-        for (const issue of result.issues) {
-          const s = generateDevSuggestion(issue, fw);
-          const key = `${issue.type}|${s.fix.slice(0, 50)}`;
-          const idx = seen.get(key);
-          if (idx !== void 0) {
-            grouped[idx].count++;
-            if (grouped[idx].selectors.length < 3) grouped[idx].selectors.push(issue.selector.slice(0, 50));
-          } else {
-            seen.set(key, grouped.length);
-            grouped.push({ suggestion: s, issue, count: 1, selectors: [issue.selector.slice(0, 50)] });
-          }
-        }
-        grouped.sort((a, b) => {
-          const order = { critical: 0, serious: 1, moderate: 2, minor: 3 };
-          return (order[a.issue.impact] ?? 2) - (order[b.issue.impact] ?? 2);
-        });
-        for (const g of grouped.slice(0, 20)) {
-          issueBlock({
-            severity: g.issue.impact,
-            wcag: g.issue.wcag,
-            problem: g.suggestion.problem,
-            fix: g.suggestion.fix,
-            count: g.count,
-            selector: g.count === 1 ? g.issue.selector : void 0,
-            selectors: g.count > 1 ? g.selectors : void 0,
-            contrast: g.suggestion.contrast,
-            before: g.suggestion.before,
-            after: g.suggestion.after,
-            html: g.issue.html
-          });
-        }
-        if (grouped.length > 20) {
-          console.log(chalk3.dim(`  ... +${grouped.length - 20} more`));
-          console.log();
-        }
-      }
-      footer({ hasIssues: result.issues.length > 0, url: url.replace("https://", "") });
-    }
-    if (opts.show && result.issues.length > 0) {
-      console.log(chalk3.cyan("  \u25C6 Browser open \u2014 issues highlighted. Press Enter to close."));
-      console.log();
-      await new Promise((resolve) => {
-        process.stdin.resume();
-        process.stdin.once("data", () => {
-          process.stdin.pause();
-          resolve();
-        });
-      });
-      await closeBrowser(result);
-    }
-    if (opts.exit && result.summary.total > 0) {
-      process.exit(1);
-    }
-  } catch (err) {
-    spinner.stop();
-    if (result) await closeBrowser(result).catch(() => {
-    });
-    errorMsg(err.message);
-    process.exit(1);
-  }
-});
-async function remoteScan(url, opts) {
-  const apiKey = getApiKey();
-  if (!apiKey) {
-    if (opts.format === "table") header();
-    errorMsg("--remote requires login. Run `wa login` first.");
-    return process.exit(1);
-  }
-  if (opts.format === "table") header();
-  const spinner = ora({ text: "Scanning (remote)...", prefixText: "  " }).start();
-  try {
-    const result = await scan(url, apiKey, (status) => {
-      spinner.text = status;
-    });
-    spinner.text = "Fetching report...";
-    const report = await getReport(result.key, apiKey);
-    spinner.stop();
-    if (!report) {
-      errorMsg("Report not found");
-      return process.exit(1);
-    }
-    const issues = [];
-    if (report.axe?.violations) {
-      for (const v of report.axe.violations) {
-        for (const node of v.nodes || []) {
-          issues.push({ severity: v.impact || "moderate", wcag: v.id, message: v.description, element: node.target?.[0] });
-        }
-      }
-    }
-    if (report.ByFunctions) {
-      for (const fn of report.ByFunctions) {
-        for (const issue of fn.issues || []) {
-          issues.push({ severity: issue.impact || "moderate", wcag: issue.code || "", message: issue.description || "", element: issue.element });
-        }
-      }
-    }
-    if (opts.format === "json") {
-      jsonOutput({ url, score: report.score, totalElements: report.totalElements, issues });
-    } else if (opts.format === "csv") {
-      csvOutput(issues);
-    } else {
-      scoreCard(report.score || 0, url);
-      summaryLine({ critical: 0, serious: issues.filter((i) => i.severity === "serious").length, moderate: issues.filter((i) => i.severity === "moderate").length, minor: 0, total: issues.length });
-      for (const i of issues.slice(0, 20)) {
-        issueBlock({ severity: i.severity, wcag: i.wcag, problem: i.message, fix: "Review this issue", selector: i.element });
-      }
-      footer();
-    }
-    if (opts.exit && issues.length > 0) process.exit(1);
-  } catch (err) {
-    spinner.stop();
-    errorMsg(err.message);
-    process.exit(1);
-  }
-}
-program.command("flow <url>").description("Scan a multi-page user journey \u2014 one consolidated report").option("--wcag <level>", "WCAG level: A, AA, AAA", "AA").action(async (url, opts) => {
-  if (!url.startsWith("http")) url = `https://${url}`;
-  header();
-  console.log(chalk3.bold("  Flow Scan"));
-  console.log();
-  console.log(`  Starting at: ${chalk3.cyan(url)}`);
-  console.log(chalk3.dim("  Click through your user journey. Close the browser when done."));
-  console.log();
-  let pagesScanned = 0;
-  const result = await flowScan(url, {
-    wcag: opts.wcag,
-    onPageScan: (pageUrl, count) => {
-      pagesScanned++;
-      console.log(`  ${chalk3.green("\u2713")} ${chalk3.dim(String(pagesScanned).padStart(2))}  ${pageUrl.replace(/^https?:\/\//, "").slice(0, 60)} ${chalk3.dim("\u2014 " + count + " issues")}`);
-    }
-  });
-  console.log();
-  console.log(chalk3.bold("  \u2500\u2500\u2500 Flow Report \u2500\u2500\u2500"));
-  console.log();
-  console.log(`  Pages scanned:   ${chalk3.cyan(result.pages.length)}`);
-  console.log(`  Unique issues:   ${chalk3.cyan(result.uniqueIssues.length)}`);
-  console.log(`  Total duration:  ${chalk3.dim((result.totalDuration / 1e3).toFixed(1) + "s")}`);
-  console.log();
-  const counts = { critical: 0, serious: 0, moderate: 0, minor: 0 };
-  result.uniqueIssues.forEach((i) => {
-    counts[i.impact]++;
-  });
-  summaryLine({ ...counts, total: result.uniqueIssues.length });
-  const topIssues = result.uniqueIssues.slice(0, 15);
-  for (const issue of topIssues) {
-    const pageStr = issue.pageCount > 1 ? chalk3.yellow(` \xD7${issue.pageCount} pages`) : "";
-    issueBlock({
-      severity: issue.impact,
-      wcag: issue.wcag,
-      problem: issue.message,
-      fix: issue.fix?.suggestedValue ? `Set ${issue.fix.attribute}="${issue.fix.suggestedValue}"` : "Review this issue",
-      selector: issue.selector
-    });
-    if (issue.pageCount > 1) {
-      console.log(chalk3.dim(`        Found on${pageStr}:`));
-      for (const url2 of issue.foundOn.slice(0, 3)) {
-        console.log(chalk3.dim("          " + url2.replace(/^https?:\/\//, "")));
-      }
-    }
-  }
-  if (result.uniqueIssues.length > 15) {
-    console.log(chalk3.dim(`  ... +${result.uniqueIssues.length - 15} more unique issues`));
-  }
-  console.log();
-  footer({ hasIssues: result.uniqueIssues.length > 0, url: url.replace("https://", "") });
-});
-program.command("init").description("Create .webability.yml config file").action(() => {
-  header();
-  initConfig();
-  console.log();
-});
-program.command("login").description("Authenticate with your WebAbility account").option("-k, --key <key>", "API key directly (for CI/CD)").action(async (opts) => {
-  header();
-  if (opts.key) {
-    setApiKey(opts.key);
-    console.log(chalk3.green("  \u2713 API key saved."));
-    console.log();
-    return;
-  }
-  const spinner = ora({ text: "Starting login...", prefixText: "  " }).start();
-  try {
-    const res = await fetch("https://api.webability.io/cli/device-code", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" }
-    });
-    if (!res.ok) {
-      spinner.stop();
-      const loginUrl = "https://app.webability.io/settings/api-keys";
-      console.log(`  Open this URL to get your API key:`);
-      console.log();
-      console.log(`    ${chalk3.cyan(loginUrl)}`);
-      console.log();
-      console.log(`  Then run: ${chalk3.cyan("abilyo login --key YOUR_KEY")}`);
-      console.log();
-      openUrl(loginUrl);
-      return;
-    }
-    const { deviceCode, userCode, verificationUrl, expiresIn } = await res.json();
-    spinner.stop();
-    console.log(`  ${chalk3.bold("Login to WebAbility")}`);
-    console.log();
-    console.log(`  Open: ${chalk3.cyan(verificationUrl)}`);
-    console.log(`  Code: ${chalk3.bold.yellow(userCode)}`);
-    console.log();
-    openUrl(verificationUrl);
-    const pollSpinner = ora({ text: "Waiting for approval...", prefixText: "  " }).start();
-    const pollInterval = 3e3;
-    const maxPolls = Math.floor((expiresIn || 300) * 1e3 / pollInterval);
-    for (let i = 0; i < maxPolls; i++) {
-      await new Promise((r) => setTimeout(r, pollInterval));
-      try {
-        const tokenRes = await fetch("https://api.webability.io/cli/device-token", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ deviceCode })
-        });
-        if (tokenRes.ok) {
-          const { token } = await tokenRes.json();
-          setApiKey(token);
-          pollSpinner.succeed("Logged in!");
-          console.log();
-          return;
-        }
-        const body = await tokenRes.json().catch(() => ({}));
-        if (body.error === "expired") {
-          pollSpinner.fail("Login expired. Run `abilyo login` again.");
-          return process.exit(1);
-        }
-      } catch {
-      }
-    }
-    pollSpinner.fail("Login timed out.");
-    process.exit(1);
-  } catch {
-    spinner.stop();
-    const loginUrl = "https://app.webability.io/settings/api-keys";
-    console.log(`  Open: ${chalk3.cyan(loginUrl)}`);
-    console.log(`  Then: ${chalk3.cyan("abilyo login --key YOUR_KEY")}`);
-    console.log();
-  }
-});
-function openUrl(url) {
-  try {
-    const { execFile } = __require("child_process");
-    const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
-    execFile(cmd, [url], () => {
-    });
-  } catch {
-  }
-}
-program.command("whoami").description("Show current authentication status").action(() => {
-  const key = getApiKey();
-  header();
-  if (key) {
-    console.log(chalk3.green("  Authenticated"));
-    console.log(chalk3.dim(`  Key: ${key.slice(0, 20)}...`));
-  } else {
-    console.log(chalk3.yellow("  Not authenticated"));
-    console.log(chalk3.dim("  Run `wa login` to authenticate"));
-  }
-  console.log();
-});
-program.command("logout").description("Remove saved API key").action(() => {
-  clearConfig();
-  header();
-  console.log(chalk3.green("  Logged out. API key removed."));
-  console.log();
-});
-program.command("activate <code>").description("Activate Abilyo with your early access code").action(async (code) => {
-  header();
-  const spinner = ora({ text: "Validating access code...", prefixText: "  " }).start();
-  try {
-    const res = await fetch("https://api.webability.io/cli/activate", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ code: code.trim() })
-    });
-    if (res.ok) {
-      setAccessCode(code.trim());
-      spinner.succeed("Abilyo activated!");
-      console.log();
-      console.log(chalk3.dim("  Run `abilyo scan <url>` to get started"));
-      console.log();
-      return;
-    }
-  } catch {
-  }
-  if (code.trim().length >= 8) {
-    setAccessCode(code.trim());
-    spinner.succeed("Abilyo activated!");
-    console.log();
-    console.log(chalk3.dim("  Run `abilyo scan <url>` to get started"));
-    console.log();
-  } else {
-    spinner.fail("Invalid access code");
-    console.log(chalk3.dim("  Request access at https://abilyo.com/early-access"));
-    process.exit(1);
-  }
-});
-program.argument("[url]", "URL to scan").action((url) => {
-  if (url) {
-    program.parse(["node", "abilyo", "scan", url, ...process.argv.slice(3)]);
-  } else {
-    header();
-    if (!isActivated()) {
-      console.log(chalk3.yellow("  Abilyo is invite-only during early access."));
-      console.log();
-      console.log(`  ${chalk3.cyan("abilyo activate")} <code>     Activate with your access code`);
-      console.log();
-      console.log(chalk3.dim("  Request access at https://abilyo.com/early-access"));
-    } else {
-      console.log(chalk3.bold("  Commands:"));
-      console.log();
-      console.log(`  ${chalk3.cyan("abilyo scan")} <url>          Scan for accessibility issues`);
-      console.log(`  ${chalk3.cyan("abilyo scan --deep")} <url>   Deeper scan with additional checks (Pro)`);
-      console.log(`  ${chalk3.cyan("abilyo scan --exit")} <url>   CI mode \u2014 exit 1 if issues found`);
-      console.log(`  ${chalk3.cyan("abilyo init")}                Create .webability.yml config`);
-      console.log(`  ${chalk3.cyan("abilyo login")}               Authenticate with your account`);
-      console.log(`  ${chalk3.cyan("abilyo whoami")}              Show auth status`);
-      console.log();
-      console.log(chalk3.dim("  Example: abilyo scan localhost:3000"));
-      console.log(chalk3.dim("  Example: abilyo scan example.com --format json"));
-      console.log(chalk3.dim("  Example: abilyo scan example.com --deep --exit"));
-    }
-    console.log();
-  }
-});
-program.parse();
-function toSarif(result) {
-  return {
-    $schema: "https://raw.githubusercontent.com/oasis-tcs/sarif-spec/main/sarif-2.1/schema/sarif-schema-2.1.0.json",
-    version: "2.1.0",
-    runs: [{
-      tool: {
-        driver: {
-          name: "WebAbility",
-          version: "1.0.0",
-          informationUri: "https://webability.io",
-          rules: result.issues.map((i) => ({
-            id: i.type,
-            shortDescription: { text: i.message }
-          }))
-        }
-      },
-      results: result.issues.map((i) => ({
-        ruleId: i.type,
-        level: i.impact === "critical" || i.impact === "serious" ? "error" : "warning",
-        message: { text: i.message },
-        locations: [{
-          physicalLocation: {
-            artifactLocation: { uri: result.url },
-            region: { snippet: { text: i.html || i.selector } }
-          }
-        }]
-      }))
-    }]
-  };
-}
+`;function Z(){let e=".webability.yml";if(ve(e)){console.log(M.yellow(`  ${e} already exists`));return}we(e,ke),console.log(M.green(`  Created ${e}`)),console.log(M.dim("  Edit it to configure your project URLs and thresholds"))}import v from"chalk";var p=v.dim,ee=v.bold,z=v.blue,B=v.green,F=v.red,A=v.yellow,$=v.cyan,Ae=v.white;function m(){console.log(),console.log(`  ${z("\u25C6")} ${ee("Abilyo")} ${p("WCAG Scanner")}`),console.log()}function j(e,t){let n=e>=80?B:e>=50?A:F,o=e>=80?B("\u2713"):e>=50?A("\u26A0"):F("\u2717"),r=e>=80?"Passing":e>=50?"Needs work":"Failing";console.log(`  ${p("URL")}   ${Ae(t)}`),console.log(`  ${p("Score")} ${n.bold(e+"%")} ${o} ${p(r)}`),console.log(`  ${p("      ")}${Ce(e)}`),console.log()}function Ce(e){let n=Math.round(e/100*32),o=32-n;return(e>=80?B:e>=50?A:F)("\u2501".repeat(n))+p("\u2501".repeat(o))}function N(e){let t=[];e.critical>0&&t.push(F.bold(`${e.critical} critical`)),e.serious>0&&t.push(A(`${e.serious} serious`)),e.moderate>0&&t.push(p(`${e.moderate} moderate`)),e.minor>0&&t.push(p(`${e.minor} minor`)),console.log(`  ${ee(String(e.total))} issues  ${t.join(p(" \xB7 "))}`),console.log()}function R(e){let t=e.severity==="critical"?F("\u2717"):e.severity==="serious"?A("\u25B2"):p("\u25CF"),n=p(`${e.wcag}`),o=e.count&&e.count>1?p(` \xD7${e.count}`):"";if(console.log(`  ${t} ${n}${o}  ${e.problem.slice(0,72)}`),e.contrast?(console.log(`    ${$("fix")} ${e.fix.slice(0,70)}`),console.log(`        ${p(`${e.contrast.current}:1 \u2192 ${e.contrast.suggested}:1 (min ${e.contrast.required}:1)`)}`)):e.before&&e.after?console.log(`    ${$("fix")} ${p(e.before)} ${p("\u2192")} ${B(e.after)}`):console.log(`    ${$("fix")} ${e.fix.slice(0,70)}`),e.html&&e.count===1){let r=e.html.slice(0,60).replace(/\n/g," ");console.log(`        ${p(r)}`)}if(e.selectors&&e.selectors.length>0&&e.count&&e.count>1){let r=e.selectors.slice(0,2).map(s=>s.slice(0,30)).join(p(", ")),i=e.count>2?p(` +${e.count-2} more`):"";console.log(`        ${p(r+i)}`)}else e.selector&&console.log(`        ${p(e.selector.slice(0,55))}`);console.log()}function te(e){if(e.length){for(let t of e)console.log(`  ${A.bold("\u26A0 WARNING")} ${A(t)}`);console.log()}}function L(e){console.log(p("  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500")),e?.hasIssues&&(console.log(`  ${p("Next steps:")}`),console.log(`    ${$("abilyo scan "+(e.url||"<url>")+" --format json")}  ${p("CI/CD output")}`),console.log(`    ${$("abilyo scan "+(e.url||"<url>")+" --format html > report.html")}  ${p("share report")}`),console.log()),console.log(`  ${z("\u25C6")} ${p("Auto-fix at")} ${z("abilyo.com")}`),console.log()}function k(e){console.log(F(`  \u2717 Error: ${e}`)),console.log()}function oe(e){console.log(JSON.stringify(e,null,2))}function W(e){console.log("severity,wcag,message,element");for(let t of e){let n=t.message.replace(/"/g,'""'),o=(t.element||"").replace(/"/g,'""');console.log(`${t.severity},${t.wcag},"${n}","${o}"`)}}var Be=Ee(Se(import.meta.url)),ie=JSON.parse(Fe($e(Be,"../package.json"),"utf-8")),h=new Ie;h.name("abilyo").description("Abilyo by WebAbility \u2014 WCAG accessibility scanner").version(ie.version);h.command("scan <url>").description("Scan a website for accessibility issues").option("-f, --format <format>","Output format: table, json, csv, sarif, html","table").option("--wcag <level>","WCAG level: A, AA, AAA","AA").option("--deep","Run a deeper scan with additional checks (Pro plan)").option("--remote","Run scan on WebAbility servers instead of locally").option("--exit","Exit with code 1 if issues found (CI mode)").option("--no-axe","Skip axe-core (use only WebAbility detectors)").option("--viewport <size>","Viewport: mobile, tablet, desktop","desktop").option("--show","Open browser and highlight issues visually").action(async(e,t)=>{if(e.startsWith("http")||(e=`https://${e}`),t.deep){let i=E();if(!i)return t.format==="table"&&m(),k("--deep requires a Pro plan. Run `abilyo login` first."),process.exit(1);try{let s=await fetch("https://api.webability.io/cli/verify",{headers:{Authorization:`Bearer ${i}`}});if(s.ok){if(!(await s.json()).active)return t.format==="table"&&m(),k("Your account does not have an active Pro plan."),console.log(a.dim("  Upgrade at https://abilyo.com/pricing")),process.exit(1)}else{if(s.status===401||s.status===403)return t.format==="table"&&m(),k("Your API key is invalid or expired. Run `abilyo login` again."),process.exit(1);console.error(a.yellow(`  \u26A0 Could not verify your Pro plan (server returned ${s.status}). Continuing, but --deep may be rejected.`))}}catch{console.error(a.yellow("  \u26A0 Could not verify Pro plan status (offline). --deep analysis will be skipped without a network connection."))}}if(t.remote){await Ne(e,t);return}t.format==="table"&&m();let n=Date.now(),o=I({text:"Scanning...",prefixText:"  "}).start(),r;try{r=await Y(e,{wcag:t.wcag,deep:t.deep??!1,apiKey:E()??void 0,show:t.show??!1,viewport:t.viewport,includeAxe:t.axe!==!1});let i=((Date.now()-n)/1e3).toFixed(1);if(o.succeed(`Scanned ${r.issues.length} issues in ${i}s`),t.format==="json"){let s={...r,issues:r.issues.map(({source:l,...d})=>d)};console.log(JSON.stringify(s,null,2))}else if(t.format==="csv")W(r.issues.map(s=>({severity:s.impact,wcag:s.wcag,message:s.message,element:s.selector})));else if(t.format==="sarif")console.log(JSON.stringify(Re(r),null,2));else if(t.format==="html"){let{toHtmlReport:s}=await import("@webability/core");console.log(s(r))}else{if(te(r.engineWarnings??[]),j(r.summary.total===0?100:Math.max(0,100-r.summary.total),e),N(r.summary),r.issues.length>0){let{generateDevSuggestion:s}=await import("@webability/core"),l=r.framework||"plain-css",d=[],f=new Map;for(let c of r.issues){let g=s(c,l),b=`${c.type}|${g.fix.slice(0,50)}`,x=f.get(b);x!==void 0?(d[x].count++,d[x].selectors.length<3&&d[x].selectors.push(c.selector.slice(0,50))):(f.set(b,d.length),d.push({suggestion:g,issue:c,count:1,selectors:[c.selector.slice(0,50)]}))}d.sort((c,g)=>{let b={critical:0,serious:1,moderate:2,minor:3};return(b[c.issue.impact]??2)-(b[g.issue.impact]??2)});for(let c of d.slice(0,20))R({severity:c.issue.impact,wcag:c.issue.wcag,problem:c.suggestion.problem,fix:c.suggestion.fix,count:c.count,selector:c.count===1?c.issue.selector:void 0,selectors:c.count>1?c.selectors:void 0,contrast:c.suggestion.contrast,before:c.suggestion.before,after:c.suggestion.after,html:c.issue.html});d.length>20&&(console.log(a.dim(`  ... +${d.length-20} more`)),console.log())}L({hasIssues:r.issues.length>0,url:e.replace("https://","")})}t.show&&r.issues.length>0&&(console.log(a.cyan("  \u25C6 Browser open \u2014 issues highlighted. Press Enter to close.")),console.log(),await new Promise(s=>{process.stdin.resume(),process.stdin.once("data",()=>{process.stdin.pause(),s()})}),await _(r)),t.exit&&r.summary.total>0&&process.exit(1)}catch(i){o.stop(),r&&await _(r).catch(()=>{}),k(i.message),process.exit(1)}});async function Ne(e,t){let n=E();if(!n)return t.format==="table"&&m(),k("--remote requires login. Run `wa login` first."),process.exit(1);t.format==="table"&&m();let o=I({text:"Scanning (remote)...",prefixText:"  "}).start();try{let r=await K(e,n,l=>{o.text=l});o.text="Fetching report...";let i=await U(r.key,n);if(o.stop(),!i)return k("Report not found"),process.exit(1);let s=[];if(i.axe?.violations)for(let l of i.axe.violations)for(let d of l.nodes||[])s.push({severity:l.impact||"moderate",wcag:l.id,message:l.description,element:d.target?.[0]});if(i.ByFunctions)for(let l of i.ByFunctions)for(let d of l.issues||[])s.push({severity:d.impact||"moderate",wcag:d.code||"",message:d.description||"",element:d.element});if(t.format==="json")oe({url:e,score:i.score,totalElements:i.totalElements,issues:s});else if(t.format==="csv")W(s);else{j(i.score||0,e),N({critical:0,serious:s.filter(l=>l.severity==="serious").length,moderate:s.filter(l=>l.severity==="moderate").length,minor:0,total:s.length});for(let l of s.slice(0,20))R({severity:l.severity,wcag:l.wcag,problem:l.message,fix:"Review this issue",selector:l.element});L()}t.exit&&s.length>0&&process.exit(1)}catch(r){o.stop(),k(r.message),process.exit(1)}}h.command("flow <url>").description("Scan a multi-page user journey \u2014 one consolidated report").option("--wcag <level>","WCAG level: A, AA, AAA","AA").action(async(e,t)=>{e.startsWith("http")||(e=`https://${e}`),m(),console.log(a.bold("  Flow Scan")),console.log(),console.log(`  Starting at: ${a.cyan(e)}`),console.log(a.dim("  Click through your user journey. Close the browser when done.")),console.log();let n=0,o=await Q(e,{wcag:t.wcag,onPageScan:(s,l)=>{n++,console.log(`  ${a.green("\u2713")} ${a.dim(String(n).padStart(2))}  ${s.replace(/^https?:\/\//,"").slice(0,60)} ${a.dim("\u2014 "+l+" issues")}`)}});console.log(),console.log(a.bold("  \u2500\u2500\u2500 Flow Report \u2500\u2500\u2500")),console.log(),console.log(`  Pages scanned:   ${a.cyan(o.pages.length)}`),console.log(`  Unique issues:   ${a.cyan(o.uniqueIssues.length)}`),console.log(`  Total duration:  ${a.dim((o.totalDuration/1e3).toFixed(1)+"s")}`),console.log();let r={critical:0,serious:0,moderate:0,minor:0};o.uniqueIssues.forEach(s=>{r[s.impact]++}),N({...r,total:o.uniqueIssues.length});let i=o.uniqueIssues.slice(0,15);for(let s of i){let l=s.pageCount>1?a.yellow(` \xD7${s.pageCount} pages`):"";if(R({severity:s.impact,wcag:s.wcag,problem:s.message,fix:s.fix?.suggestedValue?`Set ${s.fix.attribute}="${s.fix.suggestedValue}"`:"Review this issue",selector:s.selector}),s.pageCount>1){console.log(a.dim(`        Found on${l}:`));for(let d of s.foundOn.slice(0,3))console.log(a.dim("          "+d.replace(/^https?:\/\//,"")))}}o.uniqueIssues.length>15&&console.log(a.dim(`  ... +${o.uniqueIssues.length-15} more unique issues`)),console.log(),L({hasIssues:o.uniqueIssues.length>0,url:e.replace("https://","")})});h.command("init").description("Create .webability.yml config file").action(()=>{m(),Z(),console.log()});h.command("login").description("Authenticate with your WebAbility account").option("-k, --key <key>","API key directly (for CI/CD)").action(async e=>{if(m(),e.key){T(e.key),console.log(a.green("  \u2713 API key saved.")),console.log();return}let t=I({text:"Starting login...",prefixText:"  "}).start();try{let n=await fetch("https://api.webability.io/cli/device-code",{method:"POST",headers:{"Content-Type":"application/json"}});if(!n.ok){t.stop();let c="https://app.webability.io/settings/api-keys";console.log("  Open this URL to get your API key:"),console.log(),console.log(`    ${a.cyan(c)}`),console.log(),console.log(`  Then run: ${a.cyan("abilyo login --key YOUR_KEY")}`),console.log(),se(c);return}let{deviceCode:o,userCode:r,verificationUrl:i,expiresIn:s}=await n.json();t.stop(),console.log(`  ${a.bold("Login to WebAbility")}`),console.log(),console.log(`  Open: ${a.cyan(i)}`),console.log(`  Code: ${a.bold.yellow(r)}`),console.log(),se(i);let l=I({text:"Waiting for approval...",prefixText:"  "}).start(),d=3e3,f=Math.floor((s||300)*1e3/d);for(let c=0;c<f;c++){await new Promise(g=>setTimeout(g,d));try{let g=await fetch("https://api.webability.io/cli/device-token",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({deviceCode:o})});if(g.ok){let{token:x}=await g.json();T(x),l.succeed("Logged in!"),console.log();return}if((await g.json().catch(()=>({}))).error==="expired")return l.fail("Login expired. Run `abilyo login` again."),process.exit(1)}catch{}}l.fail("Login timed out."),process.exit(1)}catch{t.stop(),console.log(`  Open: ${a.cyan("https://app.webability.io/settings/api-keys")}`),console.log(`  Then: ${a.cyan("abilyo login --key YOUR_KEY")}`),console.log()}});function se(e){try{let{execFile:t}=ae("child_process"),n=process.platform==="darwin"?"open":process.platform==="win32"?"start":"xdg-open";t(n,[e],()=>{})}catch{}}h.command("whoami").description("Show current authentication status").action(()=>{let e=E();m(),e?(console.log(a.green("  Authenticated")),console.log(a.dim(`  Key: ${e.slice(0,20)}...`))):(console.log(a.yellow("  Not authenticated")),console.log(a.dim("  Run `wa login` to authenticate"))),console.log()});h.command("logout").description("Remove saved API key").action(()=>{J(),m(),console.log(a.green("  Logged out. API key removed.")),console.log()});h.command("activate <code>").description("Activate Abilyo with your early access code").action(async e=>{m();let t=I({text:"Validating access code...",prefixText:"  "}).start();try{if((await fetch("https://api.webability.io/cli/activate",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({code:e.trim()})})).ok){O(e.trim()),t.succeed("Abilyo activated!"),console.log(),console.log(a.dim("  Run `abilyo scan <url>` to get started")),console.log();return}}catch{}e.trim().length>=8?(O(e.trim()),t.succeed("Abilyo activated!"),console.log(),console.log(a.dim("  Run `abilyo scan <url>` to get started")),console.log()):(t.fail("Invalid access code"),console.log(a.dim("  Request access at https://abilyo.com/early-access")),process.exit(1))});h.argument("[url]","URL to scan").action(e=>{e?h.parse(["node","abilyo","scan",e,...process.argv.slice(3)]):(m(),G()?(console.log(a.bold("  Commands:")),console.log(),console.log(`  ${a.cyan("abilyo scan")} <url>          Scan for accessibility issues`),console.log(`  ${a.cyan("abilyo scan --deep")} <url>   Deeper scan with additional checks (Pro)`),console.log(`  ${a.cyan("abilyo scan --exit")} <url>   CI mode \u2014 exit 1 if issues found`),console.log(`  ${a.cyan("abilyo init")}                Create .webability.yml config`),console.log(`  ${a.cyan("abilyo login")}               Authenticate with your account`),console.log(`  ${a.cyan("abilyo whoami")}              Show auth status`),console.log(),console.log(a.dim("  Example: abilyo scan localhost:3000")),console.log(a.dim("  Example: abilyo scan example.com --format json")),console.log(a.dim("  Example: abilyo scan example.com --deep --exit"))):(console.log(a.yellow("  Abilyo is invite-only during early access.")),console.log(),console.log(`  ${a.cyan("abilyo activate")} <code>     Activate with your access code`),console.log(),console.log(a.dim("  Request access at https://abilyo.com/early-access"))),console.log())});h.parse();function Re(e){let t=new Map;for(let o of e.issues)t.has(o.type)||t.set(o.type,{id:o.type,shortDescription:{text:o.message}});let n=e.engineWarnings??[];return{$schema:"https://json.schemastore.org/sarif-2.1.0.json",version:"2.1.0",runs:[{...n.length?{invocations:[{executionSuccessful:!0,toolExecutionNotifications:n.map(o=>({level:"warning",message:{text:o}}))}]}:{},tool:{driver:{name:"WebAbility",version:ie.version,informationUri:"https://webability.io",rules:Array.from(t.values())}},results:e.issues.map(o=>{let i={startLine:Number.isInteger(o.line)&&o.line>0?o.line:1,snippet:{text:o.html||o.selector}};return Number.isInteger(o.column)&&o.column>0&&(i.startColumn=o.column),{ruleId:o.type,level:o.impact==="critical"||o.impact==="serious"?"error":"warning",message:{text:o.message},locations:[{physicalLocation:{artifactLocation:{uri:e.url},region:i}}]}})}]}}