@webability/cli 1.0.0 → 1.1.0

package/README.md

@@ -47,6 +47,12 @@ threshold:
   serious: 5
 ```
 
+## Links
+
+- [WebAbility](https://webability.io) — AI-powered web accessibility platform
+- [Abilyo](https://abilyo.com) — Developer tools for accessibility testing
+- [Documentation](https://abilyo.com/docs)
+
 ## License
 
 MIT

package/dist/cli.js

@@ -1,4 +1,10 @@
 #!/usr/bin/env node
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
 // src/cli.ts
 import { Command } from "commander";
@@ -67,15 +73,6 @@ async function getReport(r2Key, apiKey) {
   );
   return fetchReportByR2Key;
 }
-async function login(email, password) {
-  const { login: result } = await graphql(
-    `mutation($email: String!, $password: String!) { login(email: $email, password: $password) { token } }`,
-    { email, password },
-    "public"
-    // login doesn't need a key
-  );
-  return result.token;
-}
 
 // src/config.ts
 import Conf from "conf";
@@ -107,25 +104,640 @@ function clearConfig() {
 }
 
 // src/local-scan.ts
-import { scan as scan2 } from "@webability/core";
+import { scan as scan2, detectFramework } from "@webability/core";
 var WCAG_TAG_MAP = {
   "A": ["wcag2a"],
   "AA": ["wcag2a", "wcag2aa", "wcag21aa", "wcag22aa"],
   "AAA": ["wcag2a", "wcag2aa", "wcag2aaa", "wcag21aa", "wcag22aa"]
 };
+var IMPACT_COLORS = {
+  critical: "#ef4444",
+  serious: "#f97316",
+  moderate: "#eab308",
+  minor: "#6b7280"
+};
+var IMPACT_ICONS = {
+  critical: "\u2717",
+  serious: "\u25B2",
+  moderate: "\u25CF",
+  minor: "\u25CB"
+};
+function buildHighlightScript(issues, apiKey, framework) {
+  const serialized = JSON.stringify(
+    issues.map((i, idx) => ({
+      id: idx,
+      selector: i.selector,
+      impact: i.impact,
+      wcag: i.wcag,
+      message: i.message.slice(0, 200),
+      fixDesc: i.fix?.suggestedValue ? `Set ${i.fix.attribute}="${i.fix.suggestedValue}"` : "",
+      fixAttr: i.fix?.attribute || "",
+      fixVal: i.fix?.suggestedValue || "",
+      fixCur: i.fix?.currentValue || "",
+      canApply: !!(i.fix?.suggestedValue && !i.fix?.needsManualReview)
+    }))
+  );
+  return `
+(function() {
+  const issues = ${serialized};
+  const colors = ${JSON.stringify(IMPACT_COLORS)};
+  const icons = ${JSON.stringify(IMPACT_ICONS)};
+  const API_KEY = ${JSON.stringify(apiKey || "")};
+  const API_URL = 'https://api.webability.io';
+  const FRAMEWORK = ${JSON.stringify(framework || "plain-css")};
+  const activeFilters = { critical: true, serious: true, moderate: true, minor: true };
+  const overlays = [];
+
+  function h(tag, props, children) {
+    const el = document.createElement(tag);
+    if (props) {
+      for (const [k, v] of Object.entries(props)) {
+        if (k === 'style' && typeof v === 'object') Object.assign(el.style, v);
+        else if (k === 'className') el.className = v;
+        else if (k.startsWith('on')) el.addEventListener(k.slice(2).toLowerCase(), v);
+        else el.setAttribute(k, v);
+      }
+    }
+    if (typeof children === 'string') el.textContent = children;
+    else if (Array.isArray(children)) children.forEach(c => { if (c) el.appendChild(c); });
+    return el;
+  }
+
+  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)}',
+  ].join('\\n');
+  document.head.appendChild(style);
+
+  // --- Create overlays with staggered reveal ---
+  const seen = new Set();
+  const elements = [];
+  let visibleIdx = 0;
+  for (const issue of issues) {
+    if (seen.has(issue.selector)) { overlays.push(null); elements.push(null); continue; }
+    seen.add(issue.selector);
+    try {
+      const el = document.querySelector(issue.selector);
+      if (!el) { overlays.push(null); elements.push(null); continue; }
+      const rect = el.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0) { overlays.push(null); elements.push(null); continue; }
+
+      const color = colors[issue.impact] || '#ef4444';
+      const delay = Math.min(visibleIdx * 30, 600);
+      const overlay = h('div', {
+        className: 'abilyo-overlay',
+        'data-impact': issue.impact,
+        'data-id': String(issue.id),
+        style: { top: (rect.top+window.scrollY)+'px', left: (rect.left+window.scrollX)+'px', width: rect.width+'px', height: rect.height+'px', outlineColor: color, background: color+'0d', animationDelay: delay+'ms' },
+        onClick: () => selectIssue(issue.id),
+      }, [
+        h('div', { className: 'abilyo-label', style: { background: color, animationDelay: delay+'ms' } }, icons[issue.impact]+' '+issue.wcag)
+      ]);
+      document.body.appendChild(overlay);
+      overlays.push(overlay);
+      elements.push(el);
+      visibleIdx++;
+    } catch { overlays.push(null); elements.push(null); }
+  }
+
+  // --- Reposition overlays on scroll/resize ---
+  let repositionRaf = 0;
+  function repositionOverlays() {
+    for (let i = 0; i < overlays.length; i++) {
+      const ov = overlays[i]; const el = elements[i];
+      if (!ov || !el) continue;
+      const rect = el.getBoundingClientRect();
+      ov.style.top = (rect.top + window.scrollY) + 'px';
+      ov.style.left = (rect.left + window.scrollX) + 'px';
+      ov.style.width = rect.width + 'px';
+      ov.style.height = rect.height + 'px';
+    }
+  }
+  function scheduleReposition() {
+    cancelAnimationFrame(repositionRaf);
+    repositionRaf = requestAnimationFrame(repositionOverlays);
+  }
+  window.addEventListener('scroll', scheduleReposition, { passive: true });
+  window.addEventListener('resize', scheduleReposition);
+
+  // --- Counts ---
+  const counts = { critical: 0, serious: 0, moderate: 0, minor: 0 };
+  issues.forEach(i => counts[i.impact]++);
+
+  // --- Dedup for list ---
+  const deduped = [];
+  const seenList = new Set();
+  for (const issue of issues) {
+    if (seenList.has(issue.selector)) continue;
+    seenList.add(issue.selector);
+    deduped.push(issue);
+  }
+
+  // --- Build panel ---
+  const listEl = h('div', { className: 'ap-list', id: 'ap-list' });
+  const detailEl = h('div', { id: 'ap-detail' });
+  const filtersEl = h('div', { className: 'ap-filters' });
+  const toolbarEl = h('div', { className: 'ap-toolbar' });
+
+  // Toggle overlays button
+  let overlaysVisible = true;
+  const toggleBtn = h('button', { className: 'ap-tbtn active', onClick: () => {
+    overlaysVisible = !overlaysVisible;
+    toggleBtn.classList.toggle('active', overlaysVisible);
+    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 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' }, [
+      h('div', { className: 'ap-logo' }, 'A'),
+      h('div', { className: 'ap-title' }, 'Abilyo'),
+      h('div', { className: 'ap-count' }, String(issues.length) + ' issues'),
+      minBtn,
+    ]),
+    toolbarEl,
+    filtersEl,
+    listEl,
+    detailEl,
+  ]);
+  document.body.appendChild(panel);
+  document.body.appendChild(pill);
+
+  // --- Filter buttons ---
+  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,
+      onClick: () => {
+        activeFilters[sev] = !activeFilters[sev];
+        btn.classList.toggle('active', activeFilters[sev]);
+        dot.style.background = activeFilters[sev] ? '#fff' : colors[sev];
+        applyFilters();
+      },
+    }, [dot, h('span', { style: { fontWeight: '700' } }, String(counts[sev]))]);
+    filtersEl.appendChild(btn);
+  }
+
+  // --- Rendering ---
+  let activeId = -1;
+
+  function renderList() {
+    listEl.replaceChildren();
+    for (const issue of deduped) {
+      if (!activeFilters[issue.impact]) continue;
+      const contentChildren = [
+        h('span', { className: 'ap-wcag' }, issue.wcag),
+        h('span', { className: 'ap-sev' }, issue.impact.toUpperCase()),
+        h('div', { className: 'ap-msg' }, issue.message),
+      ];
+      if (issue.fixDesc) contentChildren.push(h('div', { className: 'ap-fix' }, 'Fix: ' + issue.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'; },
+      }, [
+        h('div', { className: 'ap-icon', style: { background: colors[issue.impact] } }, icons[issue.impact]),
+        h('div', { className: 'ap-content' }, contentChildren),
+      ]);
+      listEl.appendChild(row);
+    }
+  }
+
+  const appliedFixes = new Set();
+  const previewState = { id: -1, attr: '', hadAttr: false, original: '' };
+
+  function revertPreview() {
+    if (previewState.id < 0) return;
+    const prevIssue = issues[previewState.id];
+    const prevEl = prevIssue ? document.querySelector(prevIssue.selector) : null;
+    if (prevEl && previewState.attr) {
+      if (previewState.hadAttr) prevEl.setAttribute(previewState.attr, previewState.original);
+      else prevEl.removeAttribute(previewState.attr);
+    }
+    previewState.id = -1; previewState.attr = ''; previewState.hadAttr = false; previewState.original = '';
+  }
+
+  function previewFix(issue) {
+    const el = document.querySelector(issue.selector);
+    if (!el) return false;
+    if (previewState.id === issue.id) { revertPreview(); return false; }
+    revertPreview();
+    const attr = issue.fixAttr || 'style';
+    previewState.attr = attr;
+    previewState.hadAttr = el.hasAttribute(attr);
+    previewState.original = el.getAttribute(attr) || '';
+    previewState.id = issue.id;
+    if (attr === 'style') {
+      el.setAttribute('style', (previewState.original ? previewState.original + ';' : '') + issue.fixVal);
+    } else {
+      el.setAttribute(attr, issue.fixVal);
+    }
+    return true;
+  }
+
+  function applyFix(issue) {
+    if (appliedFixes.has(issue.id)) return;
+    const el = document.querySelector(issue.selector);
+    if (!el) return;
+    if (issue.fixAttr === 'style') {
+      const cur = el.getAttribute('style') || '';
+      el.setAttribute('style', (cur ? cur + ';' : '') + issue.fixVal);
+    } else if (issue.fixAttr) {
+      el.setAttribute(issue.fixAttr, issue.fixVal);
+    }
+    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'; }
+  }
+
+  function selectIssue(id) {
+    activeId = id;
+    const issue = issues[id];
+    if (!issue) return;
+
+    if (previewState.id >= 0 && previewState.id !== id) revertPreview();
+
+    document.querySelectorAll('.abilyo-overlay').forEach(o => {
+      o.classList.remove('abilyo-active');
+      o.classList.add('abilyo-dimmed');
+    });
+    const ov = overlays[id];
+    if (ov) {
+      ov.classList.remove('abilyo-dimmed');
+      ov.classList.add('abilyo-active');
+      ov.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+
+    detailEl.style.display = 'block';
+    detailEl.replaceChildren();
+    detailEl.appendChild(h('div', { className: 'apd-head' }, [
+      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));
+
+    if (issue.canApply && !appliedFixes.has(issue.id)) {
+      const ba = h('div', { className: 'apd-before-after' }, [
+        h('div', { className: 'apd-ba-col apd-ba-before' }, [
+          h('div', { className: 'apd-ba-label' }, 'Before'),
+          h('div', { className: 'apd-ba-value' }, issue.fixCur || '(none)'),
+        ]),
+        h('div', { className: 'apd-ba-col apd-ba-after' }, [
+          h('div', { className: 'apd-ba-label' }, 'After'),
+          h('div', { className: 'apd-ba-value' }, issue.fixVal),
+        ]),
+      ]);
+      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');
+
+      previewBtn.addEventListener('click', () => {
+        const on = previewFix(issue);
+        previewBtn.classList.toggle('active', on);
+        previewBtn.textContent = on ? '\\u21A9 Revert' : '\\uD83D\\uDD0D Preview';
+      });
+      applyBtn.addEventListener('click', () => {
+        applyFix(issue);
+        applyBtn.classList.add('applied');
+        applyBtn.textContent = '\\u2713 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'));
+    } else if (issue.fixDesc) {
+      detailEl.appendChild(h('div', { className: 'apd-fix' }, '\\uD83D\\uDCA1 ' + issue.fixDesc));
+    }
+
+    // AI Fix button \u2014 available to everyone, no login needed
+    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'),
+      ]);
+      aiBtn.addEventListener('click', async () => {
+        aiBtn.disabled = true;
+        aiBtn.classList.add('apd-ai-loading');
+        aiBtn.textContent = '\\u2728 Generating...';
+        try {
+          const el = document.querySelector(issue.selector);
+          const elHtml = el ? el.outerHTML.slice(0, 600) : '';
+          const parent = el && el.parentElement ? el.parentElement.outerHTML.slice(0, 400) : '';
+          // Detect brand colors from the page
+          const allEls = document.querySelectorAll('a, button, h1, h2, .bg-primary, [class*="brand"], [class*="primary"]');
+          const colorSet = new Set();
+          allEls.forEach(e => {
+            const s = getComputedStyle(e);
+            if (s.color && s.color !== 'rgb(0, 0, 0)') colorSet.add(s.color);
+            if (s.backgroundColor && s.backgroundColor !== 'rgba(0, 0, 0, 0)') colorSet.add(s.backgroundColor);
+          });
+          const brandCols = Array.from(colorSet).slice(0, 8);
+
+          const headers = { 'Content-Type': 'application/json' };
+          if (API_KEY) headers['Authorization'] = 'Bearer ' + API_KEY;
+          const res = await fetch(API_URL + '/cli/ai-fix', {
+            method: 'POST', headers,
+            body: JSON.stringify({
+              issue: { type: issue.wcag, wcag: issue.wcag, impact: issue.impact, message: issue.message, selector: issue.selector, fixCur: issue.fixCur },
+              html: elHtml, context: parent, url: window.location.href,
+              framework: FRAMEWORK, brandColors: brandCols,
+            }),
+          });
+          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.disabled = false;
+
+          const alts = data.alternatives || [];
+          aiResultContainer.replaceChildren();
+
+          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)),
+              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');
+
+            pBtn.addEventListener('click', () => {
+              const t = document.querySelector(issue.selector);
+              if (!t) return;
+              if (previewState.id === issue.id) { revertPreview(); pBtn.textContent = '\\uD83D\\uDD0D Preview'; pBtn.classList.remove('active'); return; }
+              revertPreview();
+              const previewAttr = (alt.attribute === 'style' || alt.previewCss) ? 'style' : (alt.attribute || 'style');
+              previewState.attr = previewAttr;
+              previewState.hadAttr = t.hasAttribute(previewAttr);
+              previewState.original = t.getAttribute(previewAttr) || '';
+              previewState.id = issue.id;
+              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');
+            });
+            aBtn.addEventListener('click', () => {
+              const t = document.querySelector(issue.selector);
+              if (!t) return;
+              if (alt.attribute === 'style') { const c = t.getAttribute('style') || ''; t.setAttribute('style', (c ? c + ';' : '') + alt.value); }
+              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';
+            });
+            altActions.appendChild(pBtn);
+            altActions.appendChild(aBtn);
+            altBox.appendChild(altActions);
+            aiResultContainer.appendChild(altBox);
+          }
+        } catch {
+          aiBtn.classList.remove('apd-ai-loading');
+          aiBtn.textContent = '\\u2728 AI Fix (retry)';
+          aiBtn.disabled = false;
+        }
+      });
+      detailEl.appendChild(h('div', { className: 'apd-actions' }, [aiBtn]));
+      detailEl.appendChild(aiResultContainer);
+    }
+
+    detailEl.appendChild(h('div', { className: 'apd-sel' }, issue.selector));
+    renderList();
+  }
+
+  function clearSpotlight() {
+    activeId = -1;
+    document.querySelectorAll('.abilyo-overlay').forEach(o => { o.classList.remove('abilyo-active','abilyo-dimmed'); });
+    detailEl.style.display = 'none';
+    renderList();
+  }
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') clearSpotlight(); });
+
+  function applyFilters() {
+    overlays.forEach((ov, i) => {
+      if (!ov) return;
+      const impact = issues[i] && issues[i].impact;
+      ov.classList.toggle('abilyo-hidden', !activeFilters[impact]);
+    });
+    renderList();
+  }
+
+  renderList();
+})();
+`;
+}
 async function localScan(url, options) {
   const wcagTags = WCAG_TAG_MAP[options.wcag.toUpperCase()] ?? WCAG_TAG_MAP["AA"];
   const viewport = ["mobile", "tablet", "desktop"].includes(options.viewport ?? "") ? options.viewport : "desktop";
-  return scan2(url, {
+  const pw = await import("playwright");
+  const browser = await pw.chromium.launch({ headless: !options.show });
+  const context = await browser.newContext({ viewport: viewport === "mobile" ? { width: 375, height: 667 } : viewport === "tablet" ? { width: 768, height: 1024 } : { width: 1280, height: 720 } });
+  const page = await context.newPage();
+  const targetUrl = url.startsWith("http") ? url : `https://${url}`;
+  await page.goto(targetUrl, { waitUntil: "domcontentloaded", timeout: 3e4 });
+  const fw = await detectFramework(page);
+  const result = await scan2(page, {
     wcagTags,
     includeAxe: true,
     dismissModals: true,
     deep: options.deep,
     deepApiUrl: options.deep ? "https://api.webability.io" : void 0,
-    deepApiKey: options.deep ? options.apiKey : void 0,
-    viewport,
-    browser: { headless: true, timeout: 3e4 }
+    deepApiKey: options.deep ? options.apiKey : void 0
   });
+  if (options.show && result.issues.length > 0) {
+    await page.evaluate(buildHighlightScript(result.issues, options.apiKey, fw.framework));
+    await page.evaluate(() => window.scrollTo(0, 0));
+    return { ...result, framework: fw.framework, _browser: browser };
+  }
+  await browser.close();
+  return { ...result, framework: fw.framework };
+}
+async function closeBrowser(result) {
+  if (result._browser) {
+    await result._browser.close();
+    delete result._browser;
+  }
+}
+
+// src/flow-scan.ts
+import { scan as scan3, detectFramework as detectFramework2 } from "@webability/core";
+var WCAG_TAG_MAP2 = {
+  "A": ["wcag2a"],
+  "AA": ["wcag2a", "wcag2aa", "wcag21aa", "wcag22aa"],
+  "AAA": ["wcag2a", "wcag2aa", "wcag2aaa", "wcag21aa", "wcag22aa"]
+};
+async function flowScan(startUrl, options = {}) {
+  const wcagTags = WCAG_TAG_MAP2[(options.wcag || "AA").toUpperCase()] ?? WCAG_TAG_MAP2["AA"];
+  const targetUrl = startUrl.startsWith("http") ? startUrl : `https://${startUrl}`;
+  const t0 = Date.now();
+  const pw = await import("playwright");
+  const browser = await pw.chromium.launch({ headless: false });
+  const context = await browser.newContext({ viewport: { width: 1280, height: 720 } });
+  const page = await context.newPage();
+  const pageResults = [];
+  let framework = "plain-css";
+  let scanning = false;
+  let scanQueued = false;
+  const scannedUrls = /* @__PURE__ */ new Set();
+  const scanCurrentPage = async () => {
+    if (scanning) {
+      scanQueued = true;
+      return;
+    }
+    scanning = true;
+    try {
+      await page.waitForLoadState("domcontentloaded", { timeout: 5e3 }).catch(() => {
+      });
+      await page.waitForTimeout(800);
+      const url = page.url();
+      if (scannedUrls.has(url)) {
+        scanning = false;
+        return;
+      }
+      scannedUrls.add(url);
+      if (!framework || framework === "plain-css") {
+        const fw = await detectFramework2(page).catch(() => ({ framework: "plain-css" }));
+        framework = fw.framework;
+      }
+      const result = await scan3(page, { wcagTags, includeAxe: true, dismissModals: false });
+      pageResults.push({ url, issues: result.issues, scannedAt: (/* @__PURE__ */ new Date()).toISOString() });
+      options.onPageScan?.(url, result.issues.length);
+    } catch {
+    } finally {
+      scanning = false;
+      if (scanQueued) {
+        scanQueued = false;
+        setTimeout(scanCurrentPage, 100);
+      }
+    }
+  };
+  page.on("framenavigated", (frame) => {
+    if (frame === page.mainFrame()) {
+      setTimeout(scanCurrentPage, 600);
+    }
+  });
+  await page.goto(targetUrl, { waitUntil: "domcontentloaded", timeout: 3e4 });
+  await new Promise((resolve) => {
+    browser.on("disconnected", () => resolve());
+    process.once("SIGINT", () => resolve());
+  });
+  await browser.close().catch(() => {
+  });
+  const issueMap = /* @__PURE__ */ new Map();
+  for (const pr of pageResults) {
+    for (const issue of pr.issues) {
+      const key = `${issue.type}::${issue.selector}::${issue.wcag}`;
+      const existing = issueMap.get(key);
+      if (existing) {
+        if (!existing.foundOn.includes(pr.url)) {
+          existing.foundOn.push(pr.url);
+          existing.pageCount = existing.foundOn.length;
+        }
+      } else {
+        issueMap.set(key, { ...issue, foundOn: [pr.url], pageCount: 1 });
+      }
+    }
+  }
+  return {
+    pages: pageResults,
+    uniqueIssues: Array.from(issueMap.values()).sort((a, b) => {
+      const order = { critical: 0, serious: 1, moderate: 2, minor: 3 };
+      const aOrd = order[a.impact] ?? 2;
+      const bOrd = order[b.impact] ?? 2;
+      if (aOrd !== bOrd) return aOrd - bOrd;
+      return b.pageCount - a.pageCount;
+    }),
+    framework,
+    totalDuration: Date.now() - t0
+  };
 }
 
 // src/init.ts
@@ -154,83 +766,83 @@ function initConfig() {
 
 // src/display.ts
 import chalk2 from "chalk";
+var DIM = chalk2.dim;
+var BOLD = chalk2.bold;
+var BLUE = chalk2.blue;
+var GREEN = chalk2.green;
+var RED = chalk2.red;
+var YELLOW = chalk2.yellow;
+var CYAN = chalk2.cyan;
+var WHITE = chalk2.white;
 function header() {
   console.log();
-  console.log(chalk2.bold.blue("  Abilyo") + chalk2.dim(" by WebAbility"));
-  console.log(chalk2.dim("  https://abilyo.com"));
+  console.log(`  ${BLUE("\u25C6")} ${BOLD("Abilyo")} ${DIM("WCAG Scanner")}`);
   console.log();
 }
 function scoreCard(score, url) {
-  const color = score >= 80 ? chalk2.green : score >= 50 ? chalk2.yellow : chalk2.red;
-  const label = score >= 80 ? "COMPLIANT" : score >= 50 ? "NEEDS WORK" : "NON-COMPLIANT";
-  const bar = renderBar(score);
-  console.log(chalk2.bold(`  ${url}`));
-  console.log();
-  console.log(`  Score: ${color.bold(score + "%")}  ${chalk2.dim(label)}`);
-  console.log(`  ${bar}`);
+  const color = score >= 80 ? GREEN : score >= 50 ? YELLOW : RED;
+  const icon = score >= 80 ? GREEN("\u2713") : score >= 50 ? YELLOW("\u26A0") : RED("\u2717");
+  const label = score >= 80 ? "Passing" : score >= 50 ? "Needs work" : "Failing";
+  console.log(`  ${DIM("URL")}   ${WHITE(url)}`);
+  console.log(`  ${DIM("Score")} ${color.bold(score + "%")} ${icon} ${DIM(label)}`);
+  console.log(`  ${DIM("      ")}${renderBar(score)}`);
   console.log();
 }
 function renderBar(score) {
-  const width = 40;
-  const filled = Math.round(score / 100 * width);
-  const empty = width - filled;
-  const color = score >= 80 ? chalk2.green : score >= 50 ? chalk2.yellow : chalk2.red;
-  return color("\u2588".repeat(filled)) + chalk2.dim("\u2591".repeat(empty));
+  const w = 32;
+  const filled = Math.round(score / 100 * w);
+  const empty = w - filled;
+  const color = score >= 80 ? GREEN : score >= 50 ? YELLOW : RED;
+  return color("\u2501".repeat(filled)) + DIM("\u2501".repeat(empty));
 }
-function issueTable(issues) {
-  if (issues.length === 0) {
-    console.log(chalk2.green("  No issues found!"));
-    return;
-  }
-  const severityColor = (s) => {
-    switch (s.toLowerCase()) {
-      case "high":
-      case "critical":
-      case "serious":
-        return chalk2.red;
-      case "medium":
-      case "moderate":
-        return chalk2.yellow;
-      case "low":
-      case "minor":
-        return chalk2.dim;
-      default:
-        return chalk2.white;
-    }
-  };
-  const high = issues.filter((i) => ["high", "critical", "serious"].includes(i.severity.toLowerCase()));
-  const medium = issues.filter((i) => ["medium", "moderate"].includes(i.severity.toLowerCase()));
-  const low = issues.filter((i) => ["low", "minor"].includes(i.severity.toLowerCase()));
-  console.log(chalk2.bold("  Issues"));
-  console.log(`  ${chalk2.red.bold(high.length + " High")}  ${chalk2.yellow.bold(medium.length + " Medium")}  ${chalk2.dim.bold(low.length + " Low")}`);
+function summaryLine(s) {
+  const parts = [];
+  if (s.critical > 0) parts.push(RED.bold(`${s.critical} critical`));
+  if (s.serious > 0) parts.push(YELLOW(`${s.serious} serious`));
+  if (s.moderate > 0) parts.push(DIM(`${s.moderate} moderate`));
+  if (s.minor > 0) parts.push(DIM(`${s.minor} minor`));
+  console.log(`  ${BOLD(String(s.total))} issues  ${parts.join(DIM(" \xB7 "))}`);
   console.log();
-  for (const issue of issues.slice(0, 30)) {
-    const sev = severityColor(issue.severity);
-    const tag = sev(`[${issue.severity.toUpperCase().slice(0, 4).padEnd(4)}]`);
-    const wcag = chalk2.cyan(issue.wcag.padEnd(8));
-    const msg = issue.message.slice(0, 80);
-    console.log(`  ${tag} ${wcag} ${msg}`);
+}
+function issueBlock(opts) {
+  const icon = opts.severity === "critical" ? RED("\u2717") : opts.severity === "serious" ? YELLOW("\u25B2") : DIM("\u25CF");
+  const wcag = DIM(`${opts.wcag}`);
+  const count = opts.count && opts.count > 1 ? DIM(` \xD7${opts.count}`) : "";
+  console.log(`  ${icon} ${wcag}${count}  ${opts.problem.slice(0, 72)}`);
+  if (opts.contrast) {
+    console.log(`    ${CYAN("fix")} ${opts.fix.slice(0, 70)}`);
+    console.log(`        ${DIM(`${opts.contrast.current}:1 \u2192 ${opts.contrast.suggested}:1 (min ${opts.contrast.required}:1)`)}`);
+  } else if (opts.before && opts.after) {
+    console.log(`    ${CYAN("fix")} ${DIM(opts.before)} ${DIM("\u2192")} ${GREEN(opts.after)}`);
+  } else {
+    console.log(`    ${CYAN("fix")} ${opts.fix.slice(0, 70)}`);
   }
-  if (issues.length > 30) {
-    console.log(chalk2.dim(`  ... and ${issues.length - 30} more`));
+  if (opts.html && opts.count === 1) {
+    const snippet = opts.html.slice(0, 60).replace(/\n/g, " ");
+    console.log(`        ${DIM(snippet)}`);
+  }
+  if (opts.selectors && opts.selectors.length > 0 && opts.count && opts.count > 1) {
+    const shown = opts.selectors.slice(0, 2).map((s) => s.slice(0, 30)).join(DIM(", "));
+    const more = opts.count > 2 ? DIM(` +${opts.count - 2} more`) : "";
+    console.log(`        ${DIM(shown + more)}`);
+  } else if (opts.selector) {
+    console.log(`        ${DIM(opts.selector.slice(0, 55))}`);
   }
   console.log();
 }
-function summary(stats) {
-  console.log(chalk2.dim("  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"));
-  console.log(`  Elements scanned: ${chalk2.bold(stats.scanned)}`);
-  console.log(`  Axe violations:   ${chalk2.bold(stats.errors)}`);
-  console.log(`  Advanced checks:  ${chalk2.bold(stats.advanced)}`);
-  console.log();
-}
-function ctaBox() {
-  console.log(chalk2.dim("  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"));
-  console.log(chalk2.bold.blue("  Fix these issues automatically"));
-  console.log(chalk2.dim("  https://abilyo.com"));
+function footer(opts) {
+  console.log(DIM("  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500"));
+  if (opts?.hasIssues) {
+    console.log(`  ${DIM("Next steps:")}`);
+    console.log(`    ${CYAN("abilyo scan " + (opts.url || "<url>") + " --format json")}  ${DIM("CI/CD output")}`);
+    console.log(`    ${CYAN("abilyo scan " + (opts.url || "<url>") + " --format html > report.html")}  ${DIM("share report")}`);
+    console.log();
+  }
+  console.log(`  ${BLUE("\u25C6")} ${DIM("Auto-fix at")} ${BLUE("abilyo.com")}`);
   console.log();
 }
 function errorMsg(msg) {
-  console.log(chalk2.red(`  Error: ${msg}`));
+  console.log(RED(`  \u2717 Error: ${msg}`));
   console.log();
 }
 function jsonOutput(data) {
@@ -248,13 +860,7 @@ function csvOutput(issues) {
 // src/cli.ts
 var program = new Command();
 program.name("abilyo").description("Abilyo by WebAbility \u2014 WCAG accessibility scanner").version("1.0.0");
-program.command("scan <url>").description("Scan a website for accessibility issues").option("-f, --format <format>", "Output format: table, json, csv, sarif, html", "table").option("--wcag <level>", "WCAG level: A, AA, AAA", "AA").option("--deep", "Run a deeper scan with additional checks (Pro plan)").option("--remote", "Run scan on WebAbility servers instead of locally").option("--upload", "Upload results to dashboard (requires login)").option("--exit", "Exit with code 1 if issues found (CI mode)").option("--no-axe", "Skip axe-core (use only WebAbility detectors)").option("--viewport <size>", "Viewport: mobile, tablet, desktop", "desktop").action(async (url, opts) => {
-  if (!isActivated()) {
-    header();
-    errorMsg("Abilyo is currently invite-only. Run `abilyo activate <code>` with your access code.");
-    console.log(chalk3.dim("  Request access at https://abilyo.com/early-access"));
-    return process.exit(1);
-  }
+program.command("scan <url>").description("Scan a website for accessibility issues").option("-f, --format <format>", "Output format: table, json, csv, sarif, html", "table").option("--wcag <level>", "WCAG level: A, AA, AAA", "AA").option("--deep", "Run a deeper scan with additional checks (Pro plan)").option("--remote", "Run scan on WebAbility servers instead of locally").option("--upload", "Upload results to dashboard (requires login)").option("--exit", "Exit with code 1 if issues found (CI mode)").option("--no-axe", "Skip axe-core (use only WebAbility detectors)").option("--viewport <size>", "Viewport: mobile, tablet, desktop", "desktop").option("--show", "Open browser and highlight issues visually").action(async (url, opts) => {
   if (!url.startsWith("http")) url = `https://${url}`;
   if (opts.deep || opts.upload) {
     const apiKey = getApiKey();
@@ -284,14 +890,18 @@ program.command("scan <url>").description("Scan a website for accessibility issu
     return;
   }
   if (opts.format === "table") header();
+  const t0 = Date.now();
   const spinner = ora({ text: "Scanning...", prefixText: "  " }).start();
+  let result;
   try {
-    const result = await localScan(url, {
+    result = await localScan(url, {
       wcag: opts.wcag,
       deep: opts.deep ?? false,
-      apiKey: getApiKey() ?? void 0
+      apiKey: getApiKey() ?? void 0,
+      show: opts.show ?? false
     });
-    spinner.stop();
+    const elapsed = ((Date.now() - t0) / 1e3).toFixed(1);
+    spinner.succeed(`Scanned ${result.issues.length} issues in ${elapsed}s`);
     if (opts.format === "json") {
       const sanitized = {
         ...result,
@@ -312,29 +922,69 @@ program.command("scan <url>").description("Scan a website for accessibility issu
       console.log(toHtmlReport(result));
     } else {
       scoreCard(result.summary.total === 0 ? 100 : Math.max(0, 100 - result.summary.total), url);
+      summaryLine(result.summary);
       if (result.issues.length > 0) {
-        issueTable(result.issues.map((i) => ({
-          severity: i.impact,
-          wcag: i.wcag,
-          message: i.message,
-          element: i.selector
-        })));
+        const { generateDevSuggestion } = await import("@webability/core");
+        const fw = result.framework || "plain-css";
+        const grouped = [];
+        const seen = /* @__PURE__ */ new Map();
+        for (const issue of result.issues) {
+          const s = generateDevSuggestion(issue, fw);
+          const key = `${issue.type}|${s.fix.slice(0, 50)}`;
+          const idx = seen.get(key);
+          if (idx !== void 0) {
+            grouped[idx].count++;
+            if (grouped[idx].selectors.length < 3) grouped[idx].selectors.push(issue.selector.slice(0, 50));
+          } else {
+            seen.set(key, grouped.length);
+            grouped.push({ suggestion: s, issue, count: 1, selectors: [issue.selector.slice(0, 50)] });
+          }
+        }
+        grouped.sort((a, b) => {
+          const order = { critical: 0, serious: 1, moderate: 2, minor: 3 };
+          return (order[a.issue.impact] ?? 2) - (order[b.issue.impact] ?? 2);
+        });
+        for (const g of grouped.slice(0, 20)) {
+          issueBlock({
+            severity: g.issue.impact,
+            wcag: g.issue.wcag,
+            problem: g.suggestion.problem,
+            fix: g.suggestion.fix,
+            count: g.count,
+            selector: g.count === 1 ? g.issue.selector : void 0,
+            selectors: g.count > 1 ? g.selectors : void 0,
+            contrast: g.suggestion.contrast,
+            before: g.suggestion.before,
+            after: g.suggestion.after,
+            html: g.issue.html
+          });
+        }
+        if (grouped.length > 20) {
+          console.log(chalk3.dim(`  ... +${grouped.length - 20} more`));
+          console.log();
+        }
       }
+      footer({ hasIssues: result.issues.length > 0, url: url.replace("https://", "") });
+    }
+    if (opts.show && result.issues.length > 0) {
+      console.log(chalk3.cyan("  \u25C6 Browser open \u2014 issues highlighted. Press Enter to close."));
       console.log();
-      summary({
-        scanned: 0,
-        errors: result.summary.critical + result.summary.serious,
-        warnings: result.summary.moderate,
-        notices: result.summary.minor,
-        advanced: 0
+      await new Promise((resolve) => {
+        process.stdin.resume();
+        process.stdin.once("data", () => {
+          process.stdin.pause();
+          resolve();
+        });
       });
-      ctaBox();
+      await closeBrowser(result);
     }
     if (opts.exit && result.summary.total > 0) {
       process.exit(1);
     }
   } catch (err) {
     spinner.stop();
+    if (result) await closeBrowser(result).catch(() => {
+    });
     errorMsg(err.message);
     process.exit(1);
   }
@@ -380,15 +1030,11 @@ async function remoteScan(url, opts) {
       csvOutput(issues);
     } else {
       scoreCard(report.score || 0, url);
-      issueTable(issues);
-      summary({
-        scanned: report.totalElements || 0,
-        errors: report.axe?.violations?.length || 0,
-        warnings: 0,
-        notices: 0,
-        advanced: (report.ByFunctions || []).reduce((sum, f) => sum + (f.count || 0), 0)
-      });
-      ctaBox();
+      summaryLine({ critical: 0, serious: issues.filter((i) => i.severity === "serious").length, moderate: issues.filter((i) => i.severity === "moderate").length, minor: 0, total: issues.length });
+      for (const i of issues.slice(0, 20)) {
+        issueBlock({ severity: i.severity, wcag: i.wcag, problem: i.message, fix: "Review this issue", selector: i.element });
+      }
+      footer();
     }
     if (opts.exit && issues.length > 0) process.exit(1);
   } catch (err) {
@@ -397,38 +1043,141 @@ async function remoteScan(url, opts) {
     process.exit(1);
   }
 }
+program.command("flow <url>").description("Scan a multi-page user journey \u2014 one consolidated report").option("--wcag <level>", "WCAG level: A, AA, AAA", "AA").action(async (url, opts) => {
+  if (!url.startsWith("http")) url = `https://${url}`;
+  header();
+  console.log(chalk3.bold("  Flow Scan"));
+  console.log();
+  console.log(`  Starting at: ${chalk3.cyan(url)}`);
+  console.log(chalk3.dim("  Click through your user journey. Close the browser when done."));
+  console.log();
+  let pagesScanned = 0;
+  const result = await flowScan(url, {
+    wcag: opts.wcag,
+    onPageScan: (pageUrl, count) => {
+      pagesScanned++;
+      console.log(`  ${chalk3.green("\u2713")} ${chalk3.dim(String(pagesScanned).padStart(2))}  ${pageUrl.replace(/^https?:\/\//, "").slice(0, 60)} ${chalk3.dim("\u2014 " + count + " issues")}`);
+    }
+  });
+  console.log();
+  console.log(chalk3.bold("  \u2500\u2500\u2500 Flow Report \u2500\u2500\u2500"));
+  console.log();
+  console.log(`  Pages scanned:   ${chalk3.cyan(result.pages.length)}`);
+  console.log(`  Unique issues:   ${chalk3.cyan(result.uniqueIssues.length)}`);
+  console.log(`  Total duration:  ${chalk3.dim((result.totalDuration / 1e3).toFixed(1) + "s")}`);
+  console.log();
+  const counts = { critical: 0, serious: 0, moderate: 0, minor: 0 };
+  result.uniqueIssues.forEach((i) => {
+    counts[i.impact]++;
+  });
+  summaryLine({ ...counts, total: result.uniqueIssues.length });
+  const topIssues = result.uniqueIssues.slice(0, 15);
+  for (const issue of topIssues) {
+    const pageStr = issue.pageCount > 1 ? chalk3.yellow(` \xD7${issue.pageCount} pages`) : "";
+    issueBlock({
+      severity: issue.impact,
+      wcag: issue.wcag,
+      problem: issue.message,
+      fix: issue.fix?.suggestedValue ? `Set ${issue.fix.attribute}="${issue.fix.suggestedValue}"` : "Review this issue",
+      selector: issue.selector
+    });
+    if (issue.pageCount > 1) {
+      console.log(chalk3.dim(`        Found on${pageStr}:`));
+      for (const url2 of issue.foundOn.slice(0, 3)) {
+        console.log(chalk3.dim("          " + url2.replace(/^https?:\/\//, "")));
+      }
+    }
+  }
+  if (result.uniqueIssues.length > 15) {
+    console.log(chalk3.dim(`  ... +${result.uniqueIssues.length - 15} more unique issues`));
+  }
+  console.log();
+  footer({ hasIssues: result.uniqueIssues.length > 0, url: url.replace("https://", "") });
+});
 program.command("init").description("Create .webability.yml config file").action(() => {
   header();
   initConfig();
   console.log();
 });
-program.command("login").description("Authenticate with your WebAbility account").option("-k, --key <key>", "API key (or set WEBABILITY_API_KEY env var)").action(async (opts) => {
+program.command("login").description("Authenticate with your WebAbility account").option("-k, --key <key>", "API key directly (for CI/CD)").action(async (opts) => {
   header();
   if (opts.key) {
     setApiKey(opts.key);
-    console.log(chalk3.green("  API key saved."));
+    console.log(chalk3.green("  \u2713 API key saved."));
     console.log();
     return;
   }
-  const readline = await import("readline");
-  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
-  const ask = (q) => new Promise((resolve) => rl.question(q, resolve));
-  console.log(chalk3.bold("  Login to WebAbility"));
-  console.log();
-  const email = await ask("  Email: ");
-  const password = await ask("  Password: ");
-  rl.close();
-  const spinner = ora({ text: "Authenticating...", prefixText: "  " }).start();
+  const spinner = ora({ text: "Starting login...", prefixText: "  " }).start();
   try {
-    const token = await login(email, password);
-    setApiKey(token);
-    spinner.succeed("Logged in! API key saved.");
+    const res = await fetch("https://api.webability.io/cli/device-code", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" }
+    });
+    if (!res.ok) {
+      spinner.stop();
+      const loginUrl = "https://app.webability.io/settings/api-keys";
+      console.log(`  Open this URL to get your API key:`);
+      console.log();
+      console.log(`    ${chalk3.cyan(loginUrl)}`);
+      console.log();
+      console.log(`  Then run: ${chalk3.cyan("abilyo login --key YOUR_KEY")}`);
+      console.log();
+      openUrl(loginUrl);
+      return;
+    }
+    const { deviceCode, userCode, verificationUrl, expiresIn } = await res.json();
+    spinner.stop();
+    console.log(`  ${chalk3.bold("Login to WebAbility")}`);
     console.log();
-  } catch (err) {
-    spinner.fail(err.message);
+    console.log(`  Open: ${chalk3.cyan(verificationUrl)}`);
+    console.log(`  Code: ${chalk3.bold.yellow(userCode)}`);
+    console.log();
+    openUrl(verificationUrl);
+    const pollSpinner = ora({ text: "Waiting for approval...", prefixText: "  " }).start();
+    const pollInterval = 3e3;
+    const maxPolls = Math.floor((expiresIn || 300) * 1e3 / pollInterval);
+    for (let i = 0; i < maxPolls; i++) {
+      await new Promise((r) => setTimeout(r, pollInterval));
+      try {
+        const tokenRes = await fetch("https://api.webability.io/cli/device-token", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ deviceCode })
+        });
+        if (tokenRes.ok) {
+          const { token } = await tokenRes.json();
+          setApiKey(token);
+          pollSpinner.succeed("Logged in!");
+          console.log();
+          return;
+        }
+        const body = await tokenRes.json().catch(() => ({}));
+        if (body.error === "expired") {
+          pollSpinner.fail("Login expired. Run `abilyo login` again.");
+          return process.exit(1);
+        }
+      } catch {
+      }
+    }
+    pollSpinner.fail("Login timed out.");
     process.exit(1);
+  } catch {
+    spinner.stop();
+    const loginUrl = "https://app.webability.io/settings/api-keys";
+    console.log(`  Open: ${chalk3.cyan(loginUrl)}`);
+    console.log(`  Then: ${chalk3.cyan("abilyo login --key YOUR_KEY")}`);
+    console.log();
   }
 });
+function openUrl(url) {
+  try {
+    const { execFile } = __require("child_process");
+    const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+    execFile(cmd, [url], () => {
+    });
+  } catch {
+  }
+}
 program.command("whoami").description("Show current authentication status").action(() => {
   const key = getApiKey();
   header();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webability/cli",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Abilyo by WebAbility — WCAG accessibility scanner for your terminal",
   "type": "module",
   "bin": {
@@ -13,19 +13,21 @@
     "clean": "rm -rf dist"
   },
   "keywords": [
+    "a11y",
+    "abilyo",
     "accessibility",
-    "wcag",
     "ada",
-    "a11y",
     "audit",
+    "cli",
     "scanner",
-    "cli"
+    "wcag",
+    "webability"
   ],
   "author": "WebAbility <support@webability.io>",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/snayyar00/webability-packages",
+    "url": "https://github.com/snayyar00/abilyo",
     "directory": "cli"
   },
   "dependencies": {
@@ -45,5 +47,6 @@
   },
   "engines": {
     "node": ">=18"
-  }
+  },
+  "homepage": "https://abilyo.com"
 }