@webability/cli 1.1.2 → 1.2.0

package/dist/cli.js

@@ -1,12 +1,12 @@
 #!/usr/bin/env node
-var se=(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{Command as xe}from"commander";import i from"chalk";import R from"ora";var ie="https://api.webability.io";async function ae(e,t={},n){let a=await fetch(`${ie}${e}`,{...t,headers:{"Content-Type":"application/json",Authorization:`Bearer ${n}`,Origin:"https://app.webability.io",...t.headers}});if(!a.ok){let o=await a.text().catch(()=>"");throw new Error(`API ${a.status}: ${o.slice(0,200)}`)}return a.json()}async function D(e,t,n){let a=await ae("/graphql",{method:"POST",body:JSON.stringify({query:e,variables:t})},n);if(a.errors?.length)throw new Error(a.errors[0].message);return a.data}async function _(e,t,n){n?.("Starting scan...");let{startAccessibilityReportJob:a}=await D("query($url: String!) { startAccessibilityReportJob(url: $url, use_cache: false) { jobId } }",{url:e},t),o=a.jobId;n?.(`Job ${o.slice(0,8)}... created`);for(let p=0;p<60;p++){await new Promise(r=>setTimeout(r,3e3));let{getAccessibilityReportByJobId:s}=await D("query($jobId: String!) { getAccessibilityReportByJobId(jobId: $jobId) { status error result { savedReport { key } } } }",{jobId:o},t);if(s.status==="done")return{key:s.result.savedReport.key};if(s.status==="error")throw new Error(s.error||"Scan failed");n?.(`Scanning... (${(p+1)*3}s)`)}throw new Error("Scan timed out after 3 minutes")}async function K(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 ne from"conf";var C=new ne({projectName:"webability",schema:{apiKey:{type:"string",default:""},accessCode:{type:"string",default:""},defaultFormat:{type:"string",default:"table",enum:["table","json","csv"]}}});function $(){return process.env.WEBABILITY_API_KEY||C.get("apiKey")||""}function O(e){C.set("apiKey",e)}function re(){return C.get("accessCode")||""}function j(e){C.set("accessCode",e)}function J(){return!!re()}function G(){C.clear()}import{scan as le,detectFramework as ce}from"@webability/core";var Y={A:["wcag2a"],AA:["wcag2a","wcag2aa","wcag21aa","wcag22aa"],AAA:["wcag2a","wcag2aa","wcag2aaa","wcag21aa","wcag22aa"]},pe={critical:"#ef4444",serious:"#f97316",moderate:"#eab308",minor:"#6b7280"},de={critical:"\u2717",serious:"\u25B2",moderate:"\u25CF",minor:"\u25CB"};function ue(e,t,n){return`
+var Fe=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,o)=>(typeof require<"u"?require:t)[o]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});import{readFileSync as Ye}from"fs";import{fileURLToPath as Xe}from"url";import{dirname as Qe,join as Ze}from"path";import{Command as et}from"commander";import i from"chalk";import N from"ora";var $e="https://api.webability.io";async function Ee(e,t={},o){let s=await fetch(`${$e}${e}`,{...t,headers:{"Content-Type":"application/json",Authorization:`Bearer ${o}`,Origin:"https://app.webability.io",...t.headers}});if(!s.ok){let a=await s.text().catch(()=>"");throw new Error(`API ${s.status}: ${a.slice(0,200)}`)}return s.json()}async function j(e,t,o){let s=await Ee("/graphql",{method:"POST",body:JSON.stringify({query:e,variables:t})},o);if(s.errors?.length)throw new Error(s.errors[0].message);return s.data}async function se(e,t,o){o?.("Starting scan...");let{startAccessibilityReportJob:s}=await j("query($url: String!) { startAccessibilityReportJob(url: $url, use_cache: false) { jobId } }",{url:e},t),a=s.jobId;o?.(`Job ${a.slice(0,8)}... created`);for(let n=0;n<60;n++){await new Promise(l=>setTimeout(l,3e3));let{getAccessibilityReportByJobId:r}=await j("query($jobId: String!) { getAccessibilityReportByJobId(jobId: $jobId) { status error result { savedReport { key } } } }",{jobId:a},t);if(r.status==="done")return{key:r.result.savedReport.key};if(r.status==="error")throw new Error(r.error||"Scan failed");o?.(`Scanning... (${(n+1)*3}s)`)}throw new Error("Scan timed out after 3 minutes")}async function ie(e,t){let{fetchReportByR2Key:o}=await j("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 o}import Ie from"conf";var R=new Ie({projectName:"webability",schema:{apiKey:{type:"string",default:""},accessCode:{type:"string",default:""},defaultFormat:{type:"string",default:"table",enum:["table","json","csv"]}}});function k(){return process.env.WEBABILITY_API_KEY||R.get("apiKey")||""}function W(e){R.set("apiKey",e)}function Ne(){return R.get("accessCode")||""}function q(e){R.set("accessCode",e)}function ae(){return!!Ne()||!!k()}function ne(){R.clear()}import{scan as Re,detectFramework as Be,generateDevSuggestion as Pe}from"@webability/core";var Me={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 Le(e){return Me[e.type]||""}var re={A:["wcag2a"],AA:["wcag2a","wcag2aa","wcag21aa","wcag22aa"],AAA:["wcag2a","wcag2aa","wcag2aaa","wcag21aa","wcag22aa"]},Te={critical:"#ef4444",serious:"#f97316",moderate:"#eab308",minor:"#6b7280"},De={critical:"\u2717",serious:"\u25B2",moderate:"\u25CF",minor:"\u25CB"};function Oe(e,t,o){let s=o||"plain-css";return`
 (function() {
-  const issues = ${JSON.stringify(e.map((o,p)=>({id:p,selector:o.selector,impact:o.impact,wcag:o.wcag,message:o.message.slice(0,200),fixDesc:o.fix?.suggestedValue?`Set ${o.fix.attribute}="${o.fix.suggestedValue}"`:"",fixAttr:o.fix?.attribute||"",fixVal:o.fix?.suggestedValue||"",fixCur:o.fix?.currentValue||"",canApply:!!(o.fix?.suggestedValue&&!o.fix?.needsManualReview)})))};
-  const colors = ${JSON.stringify(pe)};
-  const icons = ${JSON.stringify(de)};
+  const issues = ${JSON.stringify(e.map((n,r)=>{let l=(()=>{try{return Pe(n,s)}catch{return null}})();return{id:r,selector:n.selector,impact:n.impact,wcag:n.wcag,type:n.type,message:n.message.slice(0,200),problem:l?.problem||"",recommendedFix:l?.fix||"",wcagLink:l?.wcagLink||`https://www.w3.org/WAI/WCAG21/Understanding/${n.wcag.replace(/\./g,"")}`,whyMatters:Le(n),fixDesc:n.fix?.suggestedValue?`Set ${n.fix.attribute}="${n.fix.suggestedValue}"`:"",fixAttr:n.fix?.attribute||"",fixVal:n.fix?.suggestedValue||"",fixCur:n.fix?.currentValue||"",canApply:!!(n.fix?.suggestedValue&&!n.fix?.needsManualReview)}}))};
+  const colors = ${JSON.stringify(Te)};
+  const icons = ${JSON.stringify(De)};
   const API_KEY = ${JSON.stringify(t||"")};
   const API_URL = 'https://api.webability.io';
-  const FRAMEWORK = ${JSON.stringify(n||"plain-css")};
+  const FRAMEWORK = ${JSON.stringify(o||"plain-css")};
   const activeFilters = { critical: true, serious: true, moderate: true, minor: true };
   const overlays = [];
 
@@ -27,74 +27,127 @@ var se=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(
 
   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);
 
@@ -168,31 +221,109 @@ var se=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(
   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,
@@ -201,21 +332,31 @@ var se=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(
   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);
   }
 
@@ -224,22 +365,75 @@ var se=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(
 
   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);
@@ -291,7 +485,7 @@ var se=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(
     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) {
@@ -318,7 +512,39 @@ var se=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(
       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' }, [
@@ -333,39 +559,36 @@ var se=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(
       ]);
       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) : '';
@@ -393,7 +616,7 @@ var se=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(
           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 || [];
@@ -401,15 +624,15 @@ var se=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(
 
           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);
@@ -424,7 +647,7 @@ var se=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(
               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);
@@ -433,8 +656,8 @@ var se=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(
               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);
@@ -443,7 +666,7 @@ var se=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(
           }
         } catch {
           aiBtn.classList.remove('apd-ai-loading');
-          aiBtn.textContent = '\\u2728 AI Fix (retry)';
+          aiBtn.textContent = 'Try again';
           aiBtn.disabled = false;
         }
       });
@@ -474,7 +697,7 @@ var se=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(
 
   renderList();
 })();
-`}async function H(e,t){let n=Y[t.wcag.toUpperCase()]??Y.AA,a=["mobile","tablet","desktop"].includes(t.viewport??"")?t.viewport:"desktop",p=await(await import("playwright")).chromium.launch({headless:!t.show}),r=await(await p.newContext({viewport:a==="mobile"?{width:375,height:667}:a==="tablet"?{width:768,height:1024}:{width:1280,height:720}})).newPage(),c=e.startsWith("http")?e:`https://${e}`;await r.goto(c,{waitUntil:"domcontentloaded",timeout:3e4});let m=await ce(r),l=await le(r,{wcagTags:n,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&&l.issues.length>0?(await r.evaluate(ue(l.issues,t.apiKey,m.framework)),await r.evaluate(()=>window.scrollTo(0,0)),{...l,framework:m.framework,_browser:p}):(await p.close(),{...l,framework:m.framework})}async function T(e){e._browser&&(await e._browser.close(),delete e._browser)}import{scan as ge,detectFramework as fe}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,a=e.startsWith("http")?e:`https://${e}`,o=Date.now(),s=await(await import("playwright")).chromium.launch({headless:!1}),c=await(await s.newContext({viewport:{width:1280,height:720}})).newPage(),m=[],l="plain-css",g=!1,b=!1,w=new Set,M=async()=>{if(g){b=!0;return}g=!0;try{await c.waitForLoadState("domcontentloaded",{timeout:5e3}).catch(()=>{}),await c.waitForTimeout(800);let u=c.url();if(w.has(u)){g=!1;return}w.add(u),(!l||l==="plain-css")&&(l=(await fe(c).catch(()=>({framework:"plain-css"}))).framework);let h=await ge(c,{wcagTags:n,includeAxe:!0,dismissModals:!1});m.push({url:u,issues:h.issues,scannedAt:new Date().toISOString()}),t.onPageScan?.(u,h.issues.length)}catch{}finally{g=!1,b&&(b=!1,setTimeout(M,100))}};c.on("framenavigated",u=>{u===c.mainFrame()&&setTimeout(M,600)}),await c.goto(a,{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 m)for(let h of u.issues){let k=`${h.type}::${h.selector}::${h.wcag}`,x=P.get(k);x?x.foundOn.includes(u.url)||(x.foundOn.push(u.url),x.pageCount=x.foundOn.length):P.set(k,{...h,foundOn:[u.url],pageCount:1})}return{pages:m,uniqueIssues:Array.from(P.values()).sort((u,h)=>{let k={critical:0,serious:1,moderate:2,minor:3},x=k[u.impact]??2,V=k[h.impact]??2;return x!==V?x-V:h.pageCount-u.pageCount}),framework:l,totalDuration:Date.now()-o}}import{writeFileSync as me,existsSync as ye}from"fs";import q from"chalk";var be=`project: my-project
+`}async function le(e,t){let o=re[t.wcag.toUpperCase()]??re.AA,s=["mobile","tablet","desktop"].includes(t.viewport??"")?t.viewport:"desktop",n=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 n.newContext({viewport:s==="mobile"?{width:390,height:844}:s==="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 u=await Be(l),f=await Re(l,{wcagTags:o,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&&f.issues.length>0?(await l.evaluate(Oe(f.issues,t.apiKey,u.framework)),await l.evaluate(()=>window.scrollTo(0,0)),{...f,framework:u.framework,_browser:n}):(await n.close(),{...f,framework:u.framework})}async function V(e){e._browser&&(await e._browser.close(),delete e._browser)}import{scan as _e,detectFramework as ze}from"@webability/core";var ce={A:["wcag2a"],AA:["wcag2a","wcag2aa","wcag21aa","wcag22aa"],AAA:["wcag2a","wcag2aa","wcag2aaa","wcag21aa","wcag22aa"]};async function de(e,t={}){let o=ce[(t.wcag||"AA").toUpperCase()]??ce.AA,s=e.startsWith("http")?e:`https://${e}`,a=Date.now(),r=await(await import("playwright")).chromium.launch({headless:!1}),d=await(await r.newContext({viewport:{width:1280,height:720}})).newPage(),u=[],f="plain-css",c=!1,v=!1,x=new Set,S=async()=>{if(c){v=!0;return}c=!0;try{await d.waitForLoadState("domcontentloaded",{timeout:5e3}).catch(()=>{}),await d.waitForTimeout(800);let g=d.url();if(x.has(g)){c=!1;return}x.add(g),(!f||f==="plain-css")&&(f=(await ze(d).catch(()=>({framework:"plain-css"}))).framework);let w=await _e(d,{wcagTags:o,includeAxe:!0,dismissModals:!1});u.push({url:g,issues:w.issues,scannedAt:new Date().toISOString()}),t.onPageScan?.(g,w.issues.length)}catch{}finally{c=!1,v&&(v=!1,setTimeout(S,100))}};d.on("framenavigated",g=>{g===d.mainFrame()&&setTimeout(S,600)}),await d.goto(s,{waitUntil:"domcontentloaded",timeout:3e4}),await new Promise(g=>{r.on("disconnected",()=>g()),process.once("SIGINT",()=>g())}),await r.close().catch(()=>{});let z=new Map;for(let g of u)for(let w of g.issues){let $=`${w.type}::${w.selector}::${w.wcag}`,C=z.get($);C?C.foundOn.includes(g.url)||(C.foundOn.push(g.url),C.pageCount=C.foundOn.length):z.set($,{...w,foundOn:[g.url],pageCount:1})}return{pages:u,uniqueIssues:Array.from(z.values()).sort((g,w)=>{let $={critical:0,serious:1,moderate:2,minor:3},C=$[g.impact]??2,oe=$[w.impact]??2;return C!==oe?C-oe:w.pageCount-g.pageCount}),framework:f,totalDuration:Date.now()-a}}import{writeFileSync as je,existsSync as We}from"fs";import U from"chalk";var qe=`project: my-project
 urls:
   - http://localhost:3000
 standard: WCAG2.1AA
@@ -483,4 +706,8 @@ ignore: []
 threshold:
   critical: 0
   serious: 5
-`;function Z(){let e=".webability.yml";if(ye(e)){console.log(q.yellow(`  ${e} already exists`));return}me(e,be),console.log(q.green(`  Created ${e}`)),console.log(q.dim("  Edit it to configure your project URLs and thresholds"))}import v from"chalk";var d=v.dim,ee=v.bold,z=v.blue,N=v.green,S=v.red,I=v.yellow,E=v.cyan,he=v.white;function f(){console.log(),console.log(`  ${z("\u25C6")} ${ee("Abilyo")} ${d("WCAG Scanner")}`),console.log()}function W(e,t){let n=e>=80?N:e>=50?I:S,a=e>=80?N("\u2713"):e>=50?I("\u26A0"):S("\u2717"),o=e>=80?"Passing":e>=50?"Needs work":"Failing";console.log(`  ${d("URL")}   ${he(t)}`),console.log(`  ${d("Score")} ${n.bold(e+"%")} ${a} ${d(o)}`),console.log(`  ${d("      ")}${we(e)}`),console.log()}function we(e){let n=Math.round(e/100*32),a=32-n;return(e>=80?N:e>=50?I:S)("\u2501".repeat(n))+d("\u2501".repeat(a))}function B(e){let t=[];e.critical>0&&t.push(S.bold(`${e.critical} critical`)),e.serious>0&&t.push(I(`${e.serious} serious`)),e.moderate>0&&t.push(d(`${e.moderate} moderate`)),e.minor>0&&t.push(d(`${e.minor} minor`)),console.log(`  ${ee(String(e.total))} issues  ${t.join(d(" \xB7 "))}`),console.log()}function F(e){let t=e.severity==="critical"?S("\u2717"):e.severity==="serious"?I("\u25B2"):d("\u25CF"),n=d(`${e.wcag}`),a=e.count&&e.count>1?d(` \xD7${e.count}`):"";if(console.log(`  ${t} ${n}${a}  ${e.problem.slice(0,72)}`),e.contrast?(console.log(`    ${E("fix")} ${e.fix.slice(0,70)}`),console.log(`        ${d(`${e.contrast.current}:1 \u2192 ${e.contrast.suggested}:1 (min ${e.contrast.required}:1)`)}`)):e.before&&e.after?console.log(`    ${E("fix")} ${d(e.before)} ${d("\u2192")} ${N(e.after)}`):console.log(`    ${E("fix")} ${e.fix.slice(0,70)}`),e.html&&e.count===1){let o=e.html.slice(0,60).replace(/\n/g," ");console.log(`        ${d(o)}`)}if(e.selectors&&e.selectors.length>0&&e.count&&e.count>1){let o=e.selectors.slice(0,2).map(s=>s.slice(0,30)).join(d(", ")),p=e.count>2?d(` +${e.count-2} more`):"";console.log(`        ${d(o+p)}`)}else e.selector&&console.log(`        ${d(e.selector.slice(0,55))}`);console.log()}function L(e){console.log(d("  \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(`  ${d("Next steps:")}`),console.log(`    ${E("abilyo scan "+(e.url||"<url>")+" --format json")}  ${d("CI/CD output")}`),console.log(`    ${E("abilyo scan "+(e.url||"<url>")+" --format html > report.html")}  ${d("share report")}`),console.log()),console.log(`  ${z("\u25C6")} ${d("Auto-fix at")} ${z("abilyo.com")}`),console.log()}function A(e){console.log(S(`  \u2717 Error: ${e}`)),console.log()}function te(e){console.log(JSON.stringify(e,null,2))}function U(e){console.log("severity,wcag,message,element");for(let t of e){let n=t.message.replace(/"/g,'""'),a=(t.element||"").replace(/"/g,'""');console.log(`${t.severity},${t.wcag},"${n}","${a}"`)}}var y=new xe;y.name("abilyo").description("Abilyo by WebAbility \u2014 WCAG accessibility scanner").version("1.0.0");y.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(e,t)=>{if(e.startsWith("http")||(e=`https://${e}`),t.deep||t.upload){let p=$();if(!p)return t.format==="table"&&f(),A("--deep and --upload require a Pro plan. Run `abilyo login` first."),process.exit(1);try{let s=await fetch("https://api.webability.io/cli/verify",{headers:{Authorization:`Bearer ${p}`}});if(s.ok&&!(await s.json()).active)return t.format==="table"&&f(),A("Your account does not have an active Pro plan."),console.log(i.dim("  Upgrade at https://abilyo.com/pricing")),process.exit(1)}catch{}}if(t.remote){await ve(e,t);return}t.format==="table"&&f();let n=Date.now(),a=R({text:"Scanning...",prefixText:"  "}).start(),o;try{o=await H(e,{wcag:t.wcag,deep:t.deep??!1,apiKey:$()??void 0,show:t.show??!1});let p=((Date.now()-n)/1e3).toFixed(1);if(a.succeed(`Scanned ${o.issues.length} issues in ${p}s`),t.format==="json"){let s={...o,issues:o.issues.map(({source:r,...c})=>c)};console.log(JSON.stringify(s,null,2))}else if(t.format==="csv")U(o.issues.map(s=>({severity:s.impact,wcag:s.wcag,message:s.message,element:s.selector})));else if(t.format==="sarif")console.log(JSON.stringify(Ae(o),null,2));else if(t.format==="html"){let{toHtmlReport:s}=await import("@webability/core");console.log(s(o))}else{if(W(o.summary.total===0?100:Math.max(0,100-o.summary.total),e),B(o.summary),o.issues.length>0){let{generateDevSuggestion:s}=await import("@webability/core"),r=o.framework||"plain-css",c=[],m=new Map;for(let l of o.issues){let g=s(l,r),b=`${l.type}|${g.fix.slice(0,50)}`,w=m.get(b);w!==void 0?(c[w].count++,c[w].selectors.length<3&&c[w].selectors.push(l.selector.slice(0,50))):(m.set(b,c.length),c.push({suggestion:g,issue:l,count:1,selectors:[l.selector.slice(0,50)]}))}c.sort((l,g)=>{let b={critical:0,serious:1,moderate:2,minor:3};return(b[l.issue.impact]??2)-(b[g.issue.impact]??2)});for(let l of c.slice(0,20))F({severity:l.issue.impact,wcag:l.issue.wcag,problem:l.suggestion.problem,fix:l.suggestion.fix,count:l.count,selector:l.count===1?l.issue.selector:void 0,selectors:l.count>1?l.selectors:void 0,contrast:l.suggestion.contrast,before:l.suggestion.before,after:l.suggestion.after,html:l.issue.html});c.length>20&&(console.log(i.dim(`  ... +${c.length-20} more`)),console.log())}L({hasIssues:o.issues.length>0,url:e.replace("https://","")})}t.show&&o.issues.length>0&&(console.log(i.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 T(o)),t.exit&&o.summary.total>0&&process.exit(1)}catch(p){a.stop(),o&&await T(o).catch(()=>{}),A(p.message),process.exit(1)}});async function ve(e,t){let n=$();if(!n)return t.format==="table"&&f(),A("--remote requires login. Run `wa login` first."),process.exit(1);t.format==="table"&&f();let a=R({text:"Scanning (remote)...",prefixText:"  "}).start();try{let o=await _(e,n,r=>{a.text=r});a.text="Fetching report...";let p=await K(o.key,n);if(a.stop(),!p)return A("Report not found"),process.exit(1);let s=[];if(p.axe?.violations)for(let r of p.axe.violations)for(let c of r.nodes||[])s.push({severity:r.impact||"moderate",wcag:r.id,message:r.description,element:c.target?.[0]});if(p.ByFunctions)for(let r of p.ByFunctions)for(let c of r.issues||[])s.push({severity:c.impact||"moderate",wcag:c.code||"",message:c.description||"",element:c.element});if(t.format==="json")te({url:e,score:p.score,totalElements:p.totalElements,issues:s});else if(t.format==="csv")U(s);else{W(p.score||0,e),B({critical:0,serious:s.filter(r=>r.severity==="serious").length,moderate:s.filter(r=>r.severity==="moderate").length,minor:0,total:s.length});for(let r of s.slice(0,20))F({severity:r.severity,wcag:r.wcag,problem:r.message,fix:"Review this issue",selector:r.element});L()}t.exit&&s.length>0&&process.exit(1)}catch(o){a.stop(),A(o.message),process.exit(1)}}y.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}`),f(),console.log(i.bold("  Flow Scan")),console.log(),console.log(`  Starting at: ${i.cyan(e)}`),console.log(i.dim("  Click through your user journey. Close the browser when done.")),console.log();let n=0,a=await Q(e,{wcag:t.wcag,onPageScan:(s,r)=>{n++,console.log(`  ${i.green("\u2713")} ${i.dim(String(n).padStart(2))}  ${s.replace(/^https?:\/\//,"").slice(0,60)} ${i.dim("\u2014 "+r+" issues")}`)}});console.log(),console.log(i.bold("  \u2500\u2500\u2500 Flow Report \u2500\u2500\u2500")),console.log(),console.log(`  Pages scanned:   ${i.cyan(a.pages.length)}`),console.log(`  Unique issues:   ${i.cyan(a.uniqueIssues.length)}`),console.log(`  Total duration:  ${i.dim((a.totalDuration/1e3).toFixed(1)+"s")}`),console.log();let o={critical:0,serious:0,moderate:0,minor:0};a.uniqueIssues.forEach(s=>{o[s.impact]++}),B({...o,total:a.uniqueIssues.length});let p=a.uniqueIssues.slice(0,15);for(let s of p){let r=s.pageCount>1?i.yellow(` \xD7${s.pageCount} pages`):"";if(F({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(i.dim(`        Found on${r}:`));for(let c of s.foundOn.slice(0,3))console.log(i.dim("          "+c.replace(/^https?:\/\//,"")))}}a.uniqueIssues.length>15&&console.log(i.dim(`  ... +${a.uniqueIssues.length-15} more unique issues`)),console.log(),L({hasIssues:a.uniqueIssues.length>0,url:e.replace("https://","")})});y.command("init").description("Create .webability.yml config file").action(()=>{f(),Z(),console.log()});y.command("login").description("Authenticate with your WebAbility account").option("-k, --key <key>","API key directly (for CI/CD)").action(async e=>{if(f(),e.key){O(e.key),console.log(i.green("  \u2713 API key saved.")),console.log();return}let t=R({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 l="https://app.webability.io/settings/api-keys";console.log("  Open this URL to get your API key:"),console.log(),console.log(`    ${i.cyan(l)}`),console.log(),console.log(`  Then run: ${i.cyan("abilyo login --key YOUR_KEY")}`),console.log(),oe(l);return}let{deviceCode:a,userCode:o,verificationUrl:p,expiresIn:s}=await n.json();t.stop(),console.log(`  ${i.bold("Login to WebAbility")}`),console.log(),console.log(`  Open: ${i.cyan(p)}`),console.log(`  Code: ${i.bold.yellow(o)}`),console.log(),oe(p);let r=R({text:"Waiting for approval...",prefixText:"  "}).start(),c=3e3,m=Math.floor((s||300)*1e3/c);for(let l=0;l<m;l++){await new Promise(g=>setTimeout(g,c));try{let g=await fetch("https://api.webability.io/cli/device-token",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({deviceCode:a})});if(g.ok){let{token:w}=await g.json();O(w),r.succeed("Logged in!"),console.log();return}if((await g.json().catch(()=>({}))).error==="expired")return r.fail("Login expired. Run `abilyo login` again."),process.exit(1)}catch{}}r.fail("Login timed out."),process.exit(1)}catch{t.stop(),console.log(`  Open: ${i.cyan("https://app.webability.io/settings/api-keys")}`),console.log(`  Then: ${i.cyan("abilyo login --key YOUR_KEY")}`),console.log()}});function oe(e){try{let{execFile:t}=se("child_process"),n=process.platform==="darwin"?"open":process.platform==="win32"?"start":"xdg-open";t(n,[e],()=>{})}catch{}}y.command("whoami").description("Show current authentication status").action(()=>{let e=$();f(),e?(console.log(i.green("  Authenticated")),console.log(i.dim(`  Key: ${e.slice(0,20)}...`))):(console.log(i.yellow("  Not authenticated")),console.log(i.dim("  Run `wa login` to authenticate"))),console.log()});y.command("logout").description("Remove saved API key").action(()=>{G(),f(),console.log(i.green("  Logged out. API key removed.")),console.log()});y.command("activate <code>").description("Activate Abilyo with your early access code").action(async e=>{f();let t=R({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){j(e.trim()),t.succeed("Abilyo activated!"),console.log(),console.log(i.dim("  Run `abilyo scan <url>` to get started")),console.log();return}}catch{}e.trim().length>=8?(j(e.trim()),t.succeed("Abilyo activated!"),console.log(),console.log(i.dim("  Run `abilyo scan <url>` to get started")),console.log()):(t.fail("Invalid access code"),console.log(i.dim("  Request access at https://abilyo.com/early-access")),process.exit(1))});y.argument("[url]","URL to scan").action(e=>{e?y.parse(["node","abilyo","scan",e,...process.argv.slice(3)]):(f(),J()?(console.log(i.bold("  Commands:")),console.log(),console.log(`  ${i.cyan("abilyo scan")} <url>          Scan for accessibility issues`),console.log(`  ${i.cyan("abilyo scan --deep")} <url>   Deeper scan with additional checks (Pro)`),console.log(`  ${i.cyan("abilyo scan --exit")} <url>   CI mode \u2014 exit 1 if issues found`),console.log(`  ${i.cyan("abilyo init")}                Create .webability.yml config`),console.log(`  ${i.cyan("abilyo login")}               Authenticate with your account`),console.log(`  ${i.cyan("abilyo whoami")}              Show auth status`),console.log(),console.log(i.dim("  Example: abilyo scan localhost:3000")),console.log(i.dim("  Example: abilyo scan example.com --format json")),console.log(i.dim("  Example: abilyo scan example.com --deep --exit"))):(console.log(i.yellow("  Abilyo is invite-only during early access.")),console.log(),console.log(`  ${i.cyan("abilyo activate")} <code>     Activate with your access code`),console.log(),console.log(i.dim("  Request access at https://abilyo.com/early-access"))),console.log())});y.parse();function Ae(e){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:e.issues.map(t=>({id:t.type,shortDescription:{text:t.message}}))}},results:e.issues.map(t=>({ruleId:t.type,level:t.impact==="critical"||t.impact==="serious"?"error":"warning",message:{text:t.message},locations:[{physicalLocation:{artifactLocation:{uri:e.url},region:{snippet:{text:t.html||t.selector}}}}]}))}]}}
+`;function pe(){let e=".webability.yml";if(We(e)){console.log(U.yellow(`  ${e} already exists`));return}je(e,qe),console.log(U.green(`  Created ${e}`)),console.log(U.dim("  Edit it to configure your project URLs and thresholds"))}import{execFileSync as B}from"child_process";import{chmodSync as me,existsSync as K,mkdirSync as Ve,readFileSync as fe,writeFileSync as he}from"fs";import{homedir as G}from"os";import{dirname as Ue,join as J}from"path";var h="webability",E="https://mcp.webability.io/mcp",ye="x-webability-token";function H(e){return{url:E,headers:{[ye]:e}}}function Y(){let e=process.platform==="win32"?["claude.cmd","claude"]:["claude"];for(let t of e)try{return B(t,["--version"],{stdio:"ignore"}),t}catch{}return null}function Ke(){return Y()!==null}function be(e){try{return B(e,["mcp","get",h],{encoding:"utf-8",stdio:["ignore","pipe","ignore"]})}catch{return null}}function Ge(){return K(J(G(),".cursor"))}function ue(e){let t=Y();if(!t)return{client:"claude",ok:!1,detail:"Claude Code CLI not found on PATH"};try{let o=be(t);if(o!==null&&!o.includes(E))return{client:"claude",ok:!1,detail:`Claude Code already has an MCP server named "${h}" that isn't ours \u2014 left untouched. Remove it (claude mcp remove -s user ${h}) and re-run \`abilyo mcp install\` to switch to the hosted server.`};if(o!==null)try{B(t,["mcp","remove","-s","user",h],{stdio:"ignore"})}catch{}return B(t,["mcp","add","-s","user","--transport","http",h,E,"--header",`${ye}: ${e}`],{stdio:"ignore"}),{client:"claude",ok:!0,detail:"Claude Code"}}catch(o){return{client:"claude",ok:!1,detail:`claude mcp add failed: ${o.message}`}}}function ge(e){let t=J(G(),".cursor","mcp.json");try{let o={};if(K(t)){let a=fe(t,"utf-8").trim();a&&(o=JSON.parse(a))}let s=(o.mcpServers||{})[h];return s&&s.url!==E?{client:"cursor",ok:!1,detail:`~/.cursor/mcp.json already has an MCP server named "${h}" that isn't ours \u2014 left untouched. Remove that entry and re-run \`abilyo mcp install\` to switch to the hosted server.`}:(o.mcpServers={...o.mcpServers||{},[h]:H(e)},Ve(Ue(t),{recursive:!0}),he(t,`${JSON.stringify(o,null,2)}
+`,{mode:384}),me(t,384),{client:"cursor",ok:!0,detail:"Cursor (~/.cursor/mcp.json)"})}catch(o){return{client:"cursor",ok:!1,detail:`could not write ${t}: ${o.message}`}}}function xe(){let e=[],t=Y();if(t){let s=be(t);if(s!==null)if(!s.includes(E))e.push({client:"claude",ok:!1,detail:`left "${h}" in Claude Code alone \u2014 it isn't ours`});else try{B(t,["mcp","remove","-s","user",h],{stdio:"ignore"}),e.push({client:"claude",ok:!0,detail:"Claude Code"})}catch(a){e.push({client:"claude",ok:!1,detail:`claude mcp remove failed: ${a.message}`})}}let o=J(G(),".cursor","mcp.json");if(K(o))try{let s=fe(o,"utf-8").trim(),a=s?JSON.parse(s):{},n=a.mcpServers?.[h];n&&n.url===E?(delete a.mcpServers[h],he(o,`${JSON.stringify(a,null,2)}
+`,{mode:384}),me(o,384),e.push({client:"cursor",ok:!0,detail:"Cursor (~/.cursor/mcp.json)"})):n&&e.push({client:"cursor",ok:!1,detail:`left "${h}" in ~/.cursor/mcp.json alone \u2014 it isn't ours`})}catch(s){e.push({client:"cursor",ok:!1,detail:`could not update ${o}: ${s.message}`})}return e}function M(e,t){if(t==="claude")return[ue(e)];if(t==="cursor")return[ge(e)];let o=[];return Ke()&&o.push(ue(e)),Ge()&&o.push(ge(e)),o}import A from"chalk";var p=A.dim,we=A.bold,X=A.blue,L=A.green,I=A.red,F=A.yellow,P=A.cyan,Je=A.white;function m(){console.log(),console.log(`  ${X("\u25C6")} ${we("Abilyo")} ${p("WCAG Scanner")}`),console.log()}function Q(e,t){let o=e>=80?L:e>=50?F:I,s=e>=80?L("\u2713"):e>=50?F("\u26A0"):I("\u2717"),a=e>=80?"Passing":e>=50?"Needs work":"Failing";console.log(`  ${p("URL")}   ${Je(t)}`),console.log(`  ${p("Score")} ${o.bold(e+"%")} ${s} ${p(a)}`),console.log(`  ${p("      ")}${He(e)}`),console.log()}function He(e){let o=Math.round(e/100*32),s=32-o;return(e>=80?L:e>=50?F:I)("\u2501".repeat(o))+p("\u2501".repeat(s))}function T(e){let t=[];e.critical>0&&t.push(I.bold(`${e.critical} critical`)),e.serious>0&&t.push(F(`${e.serious} serious`)),e.moderate>0&&t.push(p(`${e.moderate} moderate`)),e.minor>0&&t.push(p(`${e.minor} minor`)),console.log(`  ${we(String(e.total))} issues  ${t.join(p(" \xB7 "))}`),console.log()}function D(e){let t=e.severity==="critical"?I("\u2717"):e.severity==="serious"?F("\u25B2"):p("\u25CF"),o=p(`${e.wcag}`),s=e.count&&e.count>1?` \xD7${e.count}`:"",a=s?p(s):"",n=80-(6+e.wcag.length+s.length);if(console.log(`  ${t} ${o}${a}  ${e.problem.slice(0,n)}`),e.contrast?(console.log(`    ${P("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(`    ${P("fix")} ${p(e.before)} ${p("\u2192")} ${L(e.after)}`):console.log(`    ${P("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(d=>d.slice(0,30)).join(p(", ")),l=e.count>2?p(` +${e.count-2} more`):"";console.log(`        ${p(r+l)}`)}else e.selector&&console.log(`        ${p(e.selector.slice(0,55))}`);console.log()}function ve(e){if(e.length){for(let t of e)console.log(`  ${F.bold("\u26A0 WARNING")} ${F(t)}`);console.log()}}function O(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(`    ${P("abilyo scan "+(e.url||"<url>")+" --format json")}  ${p("CI/CD output")}`),console.log(`    ${P("abilyo scan "+(e.url||"<url>")+" --format html > report.html")}  ${p("share report")}`),console.log()),console.log(`  ${X("\u25C6")} ${p("Auto-fix at")} ${X("abilyo.com")}`),console.log()}function y(e,t){console.error(I(`  \u2717 Error: ${e}`)),t&&console.error(p(`    ${t}`)),console.error()}function ke(e){console.log(JSON.stringify(e,null,2))}function Z(e){console.log("severity,wcag,message,element");for(let t of e){let o=t.message.replace(/"/g,'""'),s=(t.element||"").replace(/"/g,'""');console.log(`${t.severity},${t.wcag},"${o}","${s}"`)}}var tt=Qe(Xe(import.meta.url)),Ce=JSON.parse(Ye(Ze(tt,"../package.json"),"utf-8")),b=new et;b.name("abilyo").description("Abilyo by WebAbility \u2014 WCAG accessibility scanner").version(Ce.version);b.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 n=k();if(!n)return t.format==="table"&&m(),y("--deep needs Abilyo Pro. Run `abilyo login`, then `abilyo upgrade`."),process.exit(1);try{let r=await fetch("https://api.webability.io/cli/verify",{headers:{Authorization:`Bearer ${n}`}});if(r.ok){if(!(await r.json()).active)return t.format==="table"&&m(),y("--deep needs Abilyo Pro."),console.log(`  Unlock it now: ${i.cyan("abilyo upgrade")}`),console.log(i.dim("  Pro adds dynamic-content checks, keyboard-trap detection and AI fixes.")),process.exit(1)}else{if(r.status===401||r.status===403)return t.format==="table"&&m(),y("Your API key is invalid or expired. Run `abilyo login` again."),process.exit(1);console.error(i.yellow(`  \u26A0 Could not verify your Pro plan (server returned ${r.status}). Continuing, but --deep may be rejected.`))}}catch{console.error(i.yellow("  \u26A0 Could not verify Pro plan status (offline). --deep analysis will be skipped without a network connection."))}}if(t.remote){await ot(e,t);return}t.format==="table"&&m();let o=Date.now(),s=N({text:"Scanning...",prefixText:"  "}).start(),a;try{a=await le(e,{wcag:t.wcag,deep:t.deep??!1,apiKey:k()??void 0,show:t.show??!1,viewport:t.viewport,includeAxe:t.axe!==!1});let n=((Date.now()-o)/1e3).toFixed(1),r=a.issues.length;if(s.succeed(r===0?`No issues found in ${n}s`:`Found ${r} issue${r===1?"":"s"} in ${n}s`),t.format==="json"){let l={...a,issues:a.issues.map(({source:d,...u})=>u)};console.log(JSON.stringify(l,null,2))}else if(t.format==="csv")Z(a.issues.map(l=>({severity:l.impact,wcag:l.wcag,message:l.message,element:l.selector})));else if(t.format==="sarif")console.log(JSON.stringify(it(a),null,2));else if(t.format==="html"){let{toHtmlReport:l}=await import("@webability/core");console.log(l(a))}else{if(ve(a.engineWarnings??[]),Q(a.summary.total===0?100:Math.max(0,100-a.summary.total),e),T(a.summary),a.issues.length>0){let{generateDevSuggestion:l}=await import("@webability/core"),d=a.framework||"plain-css",u=[],f=new Map;for(let c of a.issues){let v=l(c,d),x=`${c.type}|${v.fix.slice(0,50)}`,S=f.get(x);S!==void 0?(u[S].count++,u[S].selectors.length<3&&u[S].selectors.push(c.selector.slice(0,50))):(f.set(x,u.length),u.push({suggestion:v,issue:c,count:1,selectors:[c.selector.slice(0,50)]}))}u.sort((c,v)=>{let x={critical:0,serious:1,moderate:2,minor:3};return(x[c.issue.impact]??2)-(x[v.issue.impact]??2)});for(let c of u.slice(0,20))D({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});u.length>20&&(console.log(i.dim(`  ... +${u.length-20} more`)),console.log())}O({hasIssues:a.issues.length>0,url:e.replace("https://","")})}t.show&&a.issues.length>0&&(console.log(i.cyan("  \u25C6 Browser open \u2014 issues highlighted. Press Enter to close.")),console.log(),await new Promise(l=>{process.stdin.resume(),process.stdin.once("data",()=>{process.stdin.pause(),l()})}),await V(a)),t.exit&&a.summary.total>0&&process.exit(1)}catch(n){s.stop(),a&&await V(a).catch(()=>{}),y(n.message.split(`
+`)[0],"Check the URL loads in a browser, then run the scan again."),process.exit(1)}});async function ot(e,t){let o=k();if(!o)return t.format==="table"&&m(),y("--remote requires login. Run `abilyo login` first."),process.exit(1);t.format==="table"&&m();let s=N({text:"Scanning (remote)...",prefixText:"  "}).start();try{let a=await se(e,o,l=>{s.text=l});s.text="Fetching report...";let n=await ie(a.key,o);if(s.stop(),!n)return y("Report not found.","Try again, or drop --remote to scan locally."),process.exit(1);let r=[];if(n.axe?.violations)for(let l of n.axe.violations)for(let d of l.nodes||[])r.push({severity:l.impact||"moderate",wcag:l.id,message:l.description,element:d.target?.[0]});if(n.ByFunctions)for(let l of n.ByFunctions)for(let d of l.issues||[])r.push({severity:d.impact||"moderate",wcag:d.code||"",message:d.description||"",element:d.element});if(t.format==="json")ke({url:e,score:n.score,totalElements:n.totalElements,issues:r});else if(t.format==="csv")Z(r);else{Q(n.score||0,e),T({critical:0,serious:r.filter(l=>l.severity==="serious").length,moderate:r.filter(l=>l.severity==="moderate").length,minor:0,total:r.length});for(let l of r.slice(0,20))D({severity:l.severity,wcag:l.wcag,problem:l.message,fix:"Review this issue",selector:l.element});O()}t.exit&&r.length>0&&process.exit(1)}catch(a){s.stop(),y(a.message),process.exit(1)}}b.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(i.bold("  Flow Scan")),console.log(),console.log(`  Starting at: ${i.cyan(e)}`),console.log(i.dim("  Click through your user journey. Close the browser when done.")),console.log();let o=0,s;try{s=await de(e,{wcag:t.wcag,onPageScan:(r,l)=>{o++,console.log(`  ${i.green("\u2713")} ${i.dim(String(o).padStart(2))}  ${r.replace(/^https?:\/\//,"").slice(0,60)} ${i.dim("\u2014 "+l+" issues")}`)}})}catch(r){return y(r.message.split(`
+`)[0],"Check the URL loads in a browser, then run `abilyo flow` again."),process.exit(1)}console.log(),console.log(i.bold("  \u2500\u2500\u2500 Flow Report \u2500\u2500\u2500")),console.log(),console.log(`  Pages scanned:   ${i.cyan(s.pages.length)}`),console.log(`  Unique issues:   ${i.cyan(s.uniqueIssues.length)}`),console.log(`  Total duration:  ${i.dim((s.totalDuration/1e3).toFixed(1)+"s")}`),console.log();let a={critical:0,serious:0,moderate:0,minor:0};s.uniqueIssues.forEach(r=>{a[r.impact]++}),T({...a,total:s.uniqueIssues.length});let n=s.uniqueIssues.slice(0,15);for(let r of n){let l=r.pageCount>1?i.yellow(` \xD7${r.pageCount} pages`):"";if(D({severity:r.impact,wcag:r.wcag,problem:r.message,fix:r.fix?.suggestedValue?`Set ${r.fix.attribute}="${r.fix.suggestedValue}"`:"Review this issue",selector:r.selector}),r.pageCount>1){console.log(i.dim(`        Found on${l}:`));for(let d of r.foundOn.slice(0,3))console.log(i.dim("          "+d.replace(/^https?:\/\//,"")))}}s.uniqueIssues.length>15&&console.log(i.dim(`  ... +${s.uniqueIssues.length-15} more unique issues`)),console.log(),O({hasIssues:s.uniqueIssues.length>0,url:e.replace("https://","")})});b.command("init").description("Create .webability.yml config file").action(()=>{m(),pe(),console.log()});b.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){W(e.key),console.log(i.green("  \u2713 API key saved.")),console.log(),ee(M(e.key)),await te(e.key);return}let t=N({text:"Starting login...",prefixText:"  "}).start();try{let o=await fetch("https://api.webability.io/cli/device-code",{method:"POST",headers:{"Content-Type":"application/json"}});if(!o.ok)return t.fail(`Could not start login (server returned ${o.status}).`),console.log(i.dim("  Try again in a moment: `abilyo login`")),console.log(i.dim("  Still stuck? support@webability.io")),console.log(),process.exit(1);let{deviceCode:s,userCode:a,verificationUrl:n,expiresIn:r}=await o.json();t.stop(),console.log(`  ${i.bold("Login to WebAbility")}`),console.log(),console.log(`  Open: ${i.cyan(n)}`),console.log(`  Code: ${i.bold.yellow(a)}`),console.log(),Ae(n);let l=N({text:"Waiting for approval...",prefixText:"  "}).start(),d=3e3,u=Math.floor((r||300)*1e3/d);for(let f=0;f<u;f++){await new Promise(c=>setTimeout(c,d));try{let c=await fetch("https://api.webability.io/cli/device-token",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({deviceCode:s})});if(c.ok){let{token:x}=await c.json();W(x),l.succeed("Logged in."),console.log(),ee(M(x)),await te(x);return}if((await c.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{return t.fail("Could not reach api.webability.io."),console.log(i.dim("  Check your connection, then run `abilyo login` again.")),console.log(),process.exit(1)}});var _=i.dim("  "+"\u2500".repeat(58)),st=["scan webability.io and list the critical issues","fix the colour-contrast failures on this page","check this component for keyboard traps","is this form accessible to a screen reader?"];function ee(e){let t=e.filter(o=>o.ok);if(!t.length){console.log(i.yellow("  No supported editor found for automatic setup.")),console.log(`  Install Claude Code or Cursor, then run ${i.cyan("abilyo mcp install")}.`),console.log(i.dim(`  Any other MCP client: ${i.cyan("abilyo mcp print")} gives you the config block.`)),console.log();for(let o of e.filter(s=>!s.ok))console.log(i.dim(`  \u26A0 ${o.client}: ${o.detail}`));e.some(o=>!o.ok)&&console.log();return}console.log(_),console.log(i.bold("  Abilyo is now inside your editor")),console.log();for(let o of t)console.log(`  ${i.green("\u2713")} ${o.detail}`);console.log(),console.log(i.dim("  Restart the editor, then ask it:"));for(let o of st)console.log(`    ${i.cyan(`"${o}"`)}`);console.log(_),console.log();for(let o of e.filter(s=>!s.ok))console.log(i.dim(`  \u26A0 ${o.client}: ${o.detail}`))}async function te(e){let t="free",o="";try{let s=await fetch("https://api.webability.io/cli/verify",{headers:{Authorization:`Bearer ${e}`}});if(s.ok){let a=await s.json();t=a.plan||"free",o=a.email||""}}catch{}if(t==="pro"){console.log(`  ${i.green("\u2726 Abilyo Pro")}${o?i.dim(` \u2014 ${o}`):""}`),console.log(i.dim("  Deep scans, AI fixes and unlimited MCP calls are unlocked.")),console.log();return}console.log(_),console.log(`  ${i.yellow("You are on Free.")} Free finds the issues. ${i.bold("Pro fixes them.")}`),console.log(),console.log(`    ${i.cyan("abilyo scan --deep")}   dynamic content, focus order, keyboard traps`),console.log(`    ${i.cyan("AI fixes")}             real code edits in your editor, not a to-do list`),console.log(`    ${i.cyan("CI reports")}           SARIF + HTML, unlimited MCP calls`),console.log(),console.log(`  Upgrade in under a minute:  ${i.bold.cyan("abilyo upgrade")}`),console.log(_),console.log()}function Ae(e){try{let{execFile:t}=Fe("child_process"),o=process.platform==="darwin"?"open":process.platform==="win32"?"start":"xdg-open";t(o,[e],()=>{})}catch{}}var Se=b.command("mcp").description("Connect Abilyo to your AI editor (Claude Code, Cursor)");Se.command("install").description("Register the Abilyo MCP server with every editor found").option("-c, --client <client>","Only one client: claude, cursor").action(e=>{m();let t=k();if(!t)return y("Not logged in. Run `abilyo login` \u2014 it connects your editor for you."),process.exit(1);if(e.client&&e.client!=="claude"&&e.client!=="cursor")return y(`Unknown client "${e.client}". Use claude or cursor.`),process.exit(1);ee(M(t,e.client))});Se.command("print").description("Print the MCP config block (contains your token \u2014 do not share)").action(()=>{let e=k();if(!e)return m(),y("Not logged in. Run `abilyo login` first."),process.exit(1);console.log(JSON.stringify({mcpServers:{[h]:H(e)}},null,2))});b.command("upgrade").description("Upgrade to Abilyo Pro \u2014 deep scans and AI fixes").action(async()=>{m();let e=k();if(!e)return y("Log in first: `abilyo login`"),process.exit(1);let t=N({text:"Opening checkout...",prefixText:"  "}).start();try{let o=await fetch("https://api.webability.io/cli/checkout",{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${e}`},body:JSON.stringify({returnUrl:"https://abilyo.com"})});if(!o.ok)return t.fail(`Could not start checkout (server returned ${o.status}).`),console.log(i.dim("  Upgrade in the browser instead: https://webability.io/pricing")),console.log(),process.exit(1);let{url:s}=await o.json();t.succeed("Checkout ready \u2014 opening your browser."),console.log(),console.log(`  ${i.cyan(s)}`),console.log(),Ae(s)}catch{return t.fail("Could not reach api.webability.io."),console.log(i.dim("  Upgrade in the browser instead: https://webability.io/pricing")),console.log(),process.exit(1)}});b.command("whoami").description("Show auth status and plan").action(async()=>{let e=k();if(m(),!e){console.log(i.yellow("  Not signed in.")),console.log(`  Run ${i.cyan("abilyo login")} \u2014 it signs you in and connects your editor.`),console.log();return}console.log(i.green("  Signed in")),console.log(i.dim(`  Key: ${e.slice(0,12)}\u2026`)),console.log(),await te(e)});b.command("logout").description("Remove saved API key and disconnect editors").action(()=>{let e=xe();ne(),m(),console.log(i.green("  Logged out. API key removed."));for(let t of e)console.log(t.ok?i.dim(`  Disconnected ${t.detail}`):i.yellow(`  ${t.detail}`));console.log(i.dim("  Sign back in any time: `abilyo login`")),console.log()});b.command("activate <code>").description("Activate Abilyo with your early access code").action(async e=>{m();let t=N({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){q(e.trim()),t.succeed("Abilyo activated."),console.log(),console.log(`  Next: ${i.cyan("abilyo scan <url>")} ${i.dim("\u2014 your first scan takes seconds")}`),console.log();return}}catch{}e.trim().length>=8?(q(e.trim()),t.succeed("Abilyo activated."),console.log(),console.log(`  Next: ${i.cyan("abilyo scan <url>")} ${i.dim("\u2014 your first scan takes seconds")}`),console.log()):(t.fail("Invalid access code."),console.log(i.dim("  Request access at https://abilyo.com")),console.log(),process.exit(1))});b.argument("[url]","URL to scan").action(e=>{e?b.parse(["node","abilyo","scan",e,...process.argv.slice(3)]):(m(),ae()?(console.log(i.bold("  Commands:")),console.log(),console.log(`  ${i.cyan("abilyo scan")} <url>          Scan a page for accessibility issues`),console.log(`  ${i.cyan("abilyo scan --deep")} <url>   Dynamic content, focus order, keyboard traps ${i.dim("(Pro)")}`),console.log(`  ${i.cyan("abilyo scan --exit")} <url>   CI mode \u2014 exit 1 if issues found`),console.log(`  ${i.cyan("abilyo flow")} <url>          Scan a whole journey, one report`),console.log(`  ${i.cyan("abilyo login")}               Sign in and connect your AI editor`),console.log(`  ${i.cyan("abilyo mcp install")}         Re-connect Claude Code / Cursor`),console.log(`  ${i.cyan("abilyo init")}                Create .webability.yml config`),console.log(`  ${i.cyan("abilyo whoami")}              Show auth status and plan`),console.log(`  ${i.cyan("abilyo upgrade")}             Unlock deep scans + AI fixes ${i.dim("(Pro)")}`),console.log(),console.log(i.bold("  Examples:")),console.log(),console.log(i.dim("    abilyo scan localhost:3000              your dev server")),console.log(i.dim("    abilyo scan example.com --show          highlight issues in a browser")),console.log(i.dim("    abilyo scan example.com --format sarif  upload to GitHub code scanning")),console.log(i.dim("    abilyo scan example.com --exit          fail the build on issues")),console.log(i.dim("    abilyo scan example.com --deep          the checks axe-core cannot do")),console.log(),console.log(i.dim("  In your editor, after `abilyo login`:")),console.log(i.dim('    "scan staging.example.com and fix the contrast failures"'))):(console.log(i.yellow("  Abilyo is invite-only during early access.")),console.log(),console.log(`  ${i.cyan("abilyo login")}               Already have a WebAbility account? Start here`),console.log(`  ${i.cyan("abilyo activate")} <code>     Activate with an early-access code`),console.log(),console.log(i.dim("  Request access at https://abilyo.com"))),console.log())});b.parse();function it(e){let t=new Map;for(let s of e.issues)t.has(s.type)||t.set(s.type,{id:s.type,shortDescription:{text:s.message}});let o=e.engineWarnings??[];return{$schema:"https://json.schemastore.org/sarif-2.1.0.json",version:"2.1.0",runs:[{...o.length?{invocations:[{executionSuccessful:!0,toolExecutionNotifications:o.map(s=>({level:"warning",message:{text:s}}))}]}:{},tool:{driver:{name:"WebAbility",version:Ce.version,informationUri:"https://webability.io",rules:Array.from(t.values())}},results:e.issues.map(s=>{let n={startLine:Number.isInteger(s.line)&&s.line>0?s.line:1,snippet:{text:s.html||s.selector}};return Number.isInteger(s.column)&&s.column>0&&(n.startColumn=s.column),{ruleId:s.type,level:s.impact==="critical"||s.impact==="serious"?"error":"warning",message:{text:s.message},locations:[{physicalLocation:{artifactLocation:{uri:e.url},region:n}}]}})}]}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webability/cli",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Abilyo by WebAbility — WCAG accessibility scanner for your terminal",
   "type": "module",
   "bin": {
@@ -31,7 +31,7 @@
     "ora": "^8.1.0",
     "playwright": "^1.49.0",
     "yaml": "^2.6.0",
-    "@webability/core": "1.1.2"
+    "@webability/core": "1.2.1"
   },
   "devDependencies": {
     "@types/node": "^25.6.0",

package/scripts/verify-mcp-install.mts

@@ -0,0 +1,73 @@
+/**
+ * Verifies the non-clobber / permissions / uninstall behaviour against a FAKE
+ * HOME. Never touches the real ~/.cursor/mcp.json or ~/.claude.json.
+ */
+import { mkdtempSync, mkdirSync, writeFileSync, readFileSync, statSync, existsSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+
+const fake = mkdtempSync(join(tmpdir(), 'abilyo-home-'))
+process.env.HOME = fake
+process.env.USERPROFILE = fake
+
+const { installForCursor, uninstallMcp, MCP_URL, MCP_SERVER_NAME } = await import(
+  '../src/mcp-install.ts'
+)
+
+const cfg = join(fake, '.cursor', 'mcp.json')
+mkdirSync(join(fake, '.cursor'), { recursive: true })
+
+let failures = 0
+function check(name: string, cond: boolean, detail = '') {
+  console.log(`${cond ? 'PASS' : 'FAIL'}  ${name}${detail ? ` — ${detail}` : ''}`)
+  if (!cond) failures++
+}
+
+// --- 1. a user's own local stdio `webability` server must survive -------------
+writeFileSync(
+  cfg,
+  JSON.stringify(
+    { mcpServers: { [MCP_SERVER_NAME]: { command: 'npx', args: ['-y', '@webability/mcp'] }, other: { url: 'https://x' } } },
+    null,
+    2,
+  ),
+  { mode: 0o644 },
+)
+const r1 = installForCursor('TOKEN-A')
+const after1 = JSON.parse(readFileSync(cfg, 'utf-8'))
+check('foreign local entry is NOT replaced', after1.mcpServers[MCP_SERVER_NAME].command === 'npx')
+check('foreign case reports ok=false with an explanation', r1.ok === false && r1.detail.includes('left untouched'))
+check('no token written into the file', !readFileSync(cfg, 'utf-8').includes('TOKEN-A'))
+
+// --- 2. our own entry IS refreshed, other servers preserved -------------------
+writeFileSync(
+  cfg,
+  JSON.stringify({ mcpServers: { [MCP_SERVER_NAME]: { url: MCP_URL, headers: { 'x-webability-token': 'OLD' } }, other: { url: 'https://x' } } }, null, 2),
+  { mode: 0o644 },
+)
+const r2 = installForCursor('TOKEN-B')
+const after2 = JSON.parse(readFileSync(cfg, 'utf-8'))
+check('our stale entry is refreshed', r2.ok === true && JSON.stringify(after2.mcpServers[MCP_SERVER_NAME]).includes('TOKEN-B'))
+check('unrelated servers preserved', after2.mcpServers.other?.url === 'https://x')
+
+// --- 3. a pre-existing 0644 config is tightened to 0600 ----------------------
+const mode = statSync(cfg).mode & 0o777
+check('pre-existing config chmod-ed to 0600', mode === 0o600, `mode=0${mode.toString(8)}`)
+
+// --- 4. uninstall removes ours, keeps the rest -------------------------------
+const r4 = uninstallMcp()
+const after4 = JSON.parse(readFileSync(cfg, 'utf-8'))
+check('uninstall removes our entry', after4.mcpServers[MCP_SERVER_NAME] === undefined)
+check('uninstall keeps unrelated servers', after4.mcpServers.other?.url === 'https://x')
+check('uninstall reports the cursor removal', r4.some((r) => r.client === 'cursor' && r.ok))
+
+// --- 5. uninstall must NOT remove a foreign entry ----------------------------
+writeFileSync(cfg, JSON.stringify({ mcpServers: { [MCP_SERVER_NAME]: { command: 'npx' } } }, null, 2))
+const r5 = uninstallMcp()
+const after5 = JSON.parse(readFileSync(cfg, 'utf-8'))
+check("uninstall leaves a user's own server alone", after5.mcpServers[MCP_SERVER_NAME]?.command === 'npx')
+check('uninstall says so', r5.some((r) => r.client === 'cursor' && !r.ok && r.detail.includes("isn't ours")))
+
+check('fake HOME was used, real config untouched', existsSync(cfg) && cfg.startsWith(fake))
+console.log(failures === 0 ? '\nALL PASS' : `\n${failures} FAILED`)
+process.exit(failures === 0 ? 0 : 1)

package/visual-dogfood.mjs

@@ -0,0 +1,55 @@
+// Visual dogfood test — runs structural scan + visual audit on webability.io
+// to compare what each catches.
+
+import { chromium } from 'playwright'
+import fs from 'fs/promises'
+
+const URL = 'https://webability.io'
+const API_URL = 'https://api.webability.io'
+
+const browser = await chromium.launch({ headless: true })
+const ctx = await browser.newContext({ viewport: { width: 1280, height: 720 }, deviceScaleFactor: 1 })
+const page = await ctx.newPage()
+console.log(`Loading ${URL}...`)
+await page.goto(URL, { waitUntil: 'domcontentloaded', timeout: 30000 })
+await page.waitForTimeout(1500) // let JS settle
+
+console.log('Capturing screenshot...')
+const buf = await page.screenshot({ type: 'png', fullPage: false })
+const screenshot = buf.toString('base64')
+console.log(`  Size: ${(buf.length / 1024).toFixed(0)}KB`)
+
+console.log('Calling /cli/visual-audit...')
+const t0 = Date.now()
+const res = await fetch(`${API_URL}/cli/visual-audit`, {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({
+    screenshot,
+    platform: 'web',
+    screenName: URL,
+    brandColors: ['#0052CC', '#47FFF7', '#1B3DB4'], // WebAbility brand
+    knownIssues: [], // empty so vision model gets full scope
+  }),
+})
+const elapsed = ((Date.now() - t0) / 1000).toFixed(1)
+console.log(`  HTTP ${res.status} in ${elapsed}s`)
+
+if (!res.ok) {
+  console.error('Error:', await res.text())
+  await browser.close()
+  process.exit(1)
+}
+
+const data = await res.json()
+console.log(`\n=== Visual issues found: ${data.count} ===\n`)
+for (const issue of data.issues) {
+  const region = issue.region ? `[${issue.region.x},${issue.region.y} ${issue.region.width}x${issue.region.height}]` : ''
+  console.log(`  ${issue.severity.toUpperCase().padEnd(8)} WCAG ${issue.wcag} — ${issue.message}`)
+  if (issue.fix?.suggestedValue) console.log(`           fix: ${issue.fix.suggestedValue}`)
+  if (region) console.log(`           region: ${region}`)
+}
+
+await fs.writeFile('/tmp/visual-dogfood-result.json', JSON.stringify(data, null, 2))
+console.log('\nFull result saved to /tmp/visual-dogfood-result.json')
+await browser.close()