@vertaaux/cli 0.2.0

package/dist/output/html.js

@@ -0,0 +1,607 @@
+/**
+ * HTML output formatter for CLI.
+ *
+ * Generates standalone HTML reports with embedded CSS and JS.
+ * Reports are print-friendly and don't require external dependencies.
+ */
+/**
+ * Normalize issues from various API response formats.
+ */
+function normalizeIssues(issues) {
+    if (Array.isArray(issues))
+        return issues;
+    if (issues && typeof issues === "object") {
+        const values = Object.values(issues);
+        return values.flatMap((value) => Array.isArray(value) ? value : []);
+    }
+    return [];
+}
+/**
+ * Get overall score from scores object.
+ */
+function getOverallScore(scores) {
+    if (!scores)
+        return null;
+    const direct = scores.overall ?? scores.ux ?? scores.total;
+    if (typeof direct === "number" && Number.isFinite(direct))
+        return direct;
+    const numeric = Object.values(scores)
+        .filter((v) => typeof v === "number" && Number.isFinite(v));
+    if (numeric.length === 0)
+        return null;
+    return Math.round(numeric.reduce((a, b) => a + b, 0) / numeric.length);
+}
+/**
+ * Escape HTML special characters.
+ */
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+/**
+ * Get score color class based on value.
+ */
+function getScoreColor(score) {
+    if (score >= 90)
+        return "score-good";
+    if (score >= 70)
+        return "score-warning";
+    return "score-bad";
+}
+/**
+ * Get severity color class.
+ */
+function getSeverityClass(severity) {
+    const normalized = severity.toLowerCase();
+    if (normalized === "critical" || normalized === "error")
+        return "severity-critical";
+    if (normalized === "serious" || normalized === "warning")
+        return "severity-serious";
+    if (normalized === "minor" || normalized === "moderate")
+        return "severity-minor";
+    return "severity-info";
+}
+/**
+ * Get WCAG link from reference string.
+ */
+function getWcagLink(reference) {
+    if (!reference)
+        return "";
+    // Extract WCAG criteria like "2.1.1" or "4.1.2"
+    const match = reference.match(/(\d+\.\d+\.\d+)/);
+    if (match) {
+        const criteria = match[1];
+        return `https://www.w3.org/WAI/WCAG21/Understanding/${criteria.replace(/\./g, "")}`;
+    }
+    // Return reference as-is if it looks like a URL
+    if (reference.startsWith("http")) {
+        return reference;
+    }
+    return "";
+}
+/**
+ * Generate the CSS styles for the report.
+ */
+function generateStyles() {
+    return `
+    :root {
+      --color-bg: #0a0f14;
+      --color-surface: #121920;
+      --color-border: #1e2a36;
+      --color-text: #e8eaed;
+      --color-text-dim: #8a9299;
+      --color-brand: #78FFB4;
+      --color-good: #4ade80;
+      --color-warning: #fbbf24;
+      --color-bad: #f87171;
+      --color-info: #60a5fa;
+      --font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      background: var(--color-bg);
+      color: var(--color-text);
+      line-height: 1.6;
+      padding: 2rem;
+    }
+
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    /* Header */
+    header {
+      border-bottom: 1px solid var(--color-border);
+      padding-bottom: 1.5rem;
+      margin-bottom: 2rem;
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      margin-bottom: 1rem;
+    }
+
+    .brand-icon {
+      font-size: 2rem;
+      color: var(--color-brand);
+    }
+
+    .brand-name {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--color-brand);
+    }
+
+    .audit-url {
+      font-family: var(--font-mono);
+      font-size: 0.9rem;
+      color: var(--color-text-dim);
+      word-break: break-all;
+    }
+
+    .audit-meta {
+      display: flex;
+      gap: 1.5rem;
+      margin-top: 0.75rem;
+      font-size: 0.875rem;
+      color: var(--color-text-dim);
+    }
+
+    /* Score Cards */
+    .scores {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 1rem;
+      margin-bottom: 2rem;
+    }
+
+    .score-card {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 0.5rem;
+      padding: 1.25rem;
+      text-align: center;
+    }
+
+    .score-card.score-overall {
+      grid-column: span 2;
+      border-color: var(--color-brand);
+    }
+
+    .score-value {
+      font-size: 2.5rem;
+      font-weight: 700;
+      line-height: 1.2;
+    }
+
+    .score-label {
+      font-size: 0.875rem;
+      color: var(--color-text-dim);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .score-good .score-value { color: var(--color-good); }
+    .score-warning .score-value { color: var(--color-warning); }
+    .score-bad .score-value { color: var(--color-bad); }
+
+    /* Issues Section */
+    .issues-section {
+      margin-bottom: 2rem;
+    }
+
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 1rem;
+    }
+
+    .section-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+    }
+
+    .issue-count {
+      background: var(--color-surface);
+      padding: 0.25rem 0.75rem;
+      border-radius: 1rem;
+      font-size: 0.875rem;
+      color: var(--color-text-dim);
+    }
+
+    /* Issues Table */
+    .issues-table {
+      width: 100%;
+      border-collapse: collapse;
+      background: var(--color-surface);
+      border-radius: 0.5rem;
+      overflow: hidden;
+    }
+
+    .issues-table th,
+    .issues-table td {
+      padding: 0.75rem 1rem;
+      text-align: left;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .issues-table th {
+      background: rgba(120, 255, 180, 0.05);
+      font-weight: 600;
+      font-size: 0.875rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--color-text-dim);
+    }
+
+    .issues-table tr:last-child td {
+      border-bottom: none;
+    }
+
+    .issues-table tr:hover {
+      background: rgba(255, 255, 255, 0.02);
+    }
+
+    /* Severity Badges */
+    .severity-badge {
+      display: inline-block;
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .severity-critical {
+      background: rgba(248, 113, 113, 0.15);
+      color: var(--color-bad);
+    }
+
+    .severity-serious {
+      background: rgba(251, 191, 36, 0.15);
+      color: var(--color-warning);
+    }
+
+    .severity-minor {
+      background: rgba(96, 165, 250, 0.15);
+      color: var(--color-info);
+    }
+
+    .severity-info {
+      background: rgba(138, 146, 153, 0.15);
+      color: var(--color-text-dim);
+    }
+
+    /* Issue Details */
+    .issue-id {
+      font-family: var(--font-mono);
+      font-size: 0.875rem;
+      color: var(--color-brand);
+    }
+
+    .issue-description {
+      max-width: 400px;
+    }
+
+    .issue-selector {
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
+      color: var(--color-text-dim);
+      max-width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .wcag-link {
+      color: var(--color-info);
+      text-decoration: none;
+      font-size: 0.875rem;
+    }
+
+    .wcag-link:hover {
+      text-decoration: underline;
+    }
+
+    /* Collapsible Details */
+    .issue-row {
+      cursor: pointer;
+    }
+
+    .issue-details {
+      display: none;
+      background: rgba(0, 0, 0, 0.2);
+      padding: 1rem;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .issue-details.expanded {
+      display: block;
+    }
+
+    .detail-label {
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      color: var(--color-text-dim);
+      margin-bottom: 0.25rem;
+    }
+
+    .detail-value {
+      margin-bottom: 1rem;
+    }
+
+    /* Footer */
+    footer {
+      border-top: 1px solid var(--color-border);
+      padding-top: 1.5rem;
+      margin-top: 2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 0.875rem;
+      color: var(--color-text-dim);
+    }
+
+    .footer-brand {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .footer-brand a {
+      color: var(--color-brand);
+      text-decoration: none;
+    }
+
+    /* Print Styles */
+    @media print {
+      body {
+        background: white;
+        color: #1a1a1a;
+        padding: 0;
+      }
+
+      .score-card {
+        background: #f5f5f5;
+        border-color: #ddd;
+      }
+
+      .score-good .score-value { color: #22c55e; }
+      .score-warning .score-value { color: #d97706; }
+      .score-bad .score-value { color: #dc2626; }
+
+      .issues-table {
+        background: white;
+      }
+
+      .issues-table th {
+        background: #f5f5f5;
+      }
+
+      .severity-critical { background: #fef2f2; color: #dc2626; }
+      .severity-serious { background: #fffbeb; color: #d97706; }
+      .severity-minor { background: #eff6ff; color: #2563eb; }
+
+      footer {
+        page-break-inside: avoid;
+      }
+    }
+  `;
+}
+/**
+ * Generate interactive JavaScript for the report.
+ */
+function generateScript() {
+    return `
+    document.addEventListener('DOMContentLoaded', function() {
+      // Toggle issue details
+      document.querySelectorAll('.issue-row').forEach(function(row) {
+        row.addEventListener('click', function() {
+          const details = this.nextElementSibling;
+          if (details && details.classList.contains('issue-details')) {
+            details.classList.toggle('expanded');
+          }
+        });
+      });
+
+      // Sort table by column
+      document.querySelectorAll('.issues-table th[data-sortable]').forEach(function(th) {
+        th.style.cursor = 'pointer';
+        th.addEventListener('click', function() {
+          const table = this.closest('table');
+          const tbody = table.querySelector('tbody');
+          const rows = Array.from(tbody.querySelectorAll('tr.issue-row'));
+          const colIndex = Array.from(th.parentNode.children).indexOf(th);
+          const isAsc = th.getAttribute('data-sort') !== 'asc';
+
+          rows.sort(function(a, b) {
+            const aVal = a.children[colIndex].textContent.trim();
+            const bVal = b.children[colIndex].textContent.trim();
+            return isAsc ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+          });
+
+          th.setAttribute('data-sort', isAsc ? 'asc' : 'desc');
+
+          // Re-insert sorted rows (with their details)
+          rows.forEach(function(row) {
+            const details = row.nextElementSibling;
+            tbody.appendChild(row);
+            if (details && details.classList.contains('issue-details')) {
+              tbody.appendChild(details);
+            }
+          });
+        });
+      });
+    });
+  `;
+}
+/**
+ * Generate score cards HTML.
+ */
+function generateScoreCards(scores) {
+    if (!scores)
+        return "";
+    const overall = getOverallScore(scores);
+    const cards = [];
+    // Overall score card
+    if (overall !== null) {
+        cards.push(`
+      <div class="score-card score-overall ${getScoreColor(overall)}">
+        <div class="score-value">${overall}</div>
+        <div class="score-label">Overall Score</div>
+      </div>
+    `);
+    }
+    // Category scores
+    for (const [key, value] of Object.entries(scores)) {
+        if (key === "overall" || typeof value !== "number")
+            continue;
+        const score = value;
+        cards.push(`
+      <div class="score-card ${getScoreColor(score)}">
+        <div class="score-value">${score}</div>
+        <div class="score-label">${escapeHtml(key)}</div>
+      </div>
+    `);
+    }
+    return `<div class="scores">${cards.join("")}</div>`;
+}
+/**
+ * Generate issues table HTML.
+ */
+function generateIssuesTable(issues, interactive) {
+    if (issues.length === 0) {
+        return `<p style="color: var(--color-good);">No issues found!</p>`;
+    }
+    const rows = issues.map((issue) => {
+        const severity = issue.severity || "info";
+        const wcagLink = getWcagLink(issue.wcag_reference);
+        const recommendation = issue.recommendation || issue.recommended_fix || "";
+        const mainRow = `
+      <tr class="issue-row">
+        <td>
+          <span class="severity-badge ${getSeverityClass(severity)}">
+            ${escapeHtml(severity)}
+          </span>
+        </td>
+        <td class="issue-id">${escapeHtml(issue.id || "-")}</td>
+        <td class="issue-description">${escapeHtml(issue.description || issue.title || "-")}</td>
+        <td class="issue-selector" title="${escapeHtml(issue.selector || "")}">${escapeHtml(issue.selector || "-")}</td>
+        <td>
+          ${wcagLink ? `<a class="wcag-link" href="${wcagLink}" target="_blank">${escapeHtml(issue.wcag_reference || "")}</a>` : escapeHtml(issue.wcag_reference || "-")}
+        </td>
+      </tr>
+    `;
+        const detailsRow = interactive && recommendation ? `
+      <tr class="issue-details">
+        <td colspan="5">
+          <div class="detail-label">Recommendation</div>
+          <div class="detail-value">${escapeHtml(recommendation)}</div>
+          ${issue.selector ? `
+            <div class="detail-label">Selector</div>
+            <div class="detail-value" style="font-family: var(--font-mono); font-size: 0.875rem;">${escapeHtml(issue.selector)}</div>
+          ` : ""}
+        </td>
+      </tr>
+    ` : "";
+        return mainRow + detailsRow;
+    });
+    return `
+    <table class="issues-table">
+      <thead>
+        <tr>
+          <th data-sortable>Severity</th>
+          <th data-sortable>ID</th>
+          <th>Description</th>
+          <th>Selector</th>
+          <th>WCAG</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${rows.join("")}
+      </tbody>
+    </table>
+  `;
+}
+/**
+ * Format audit result as standalone HTML report.
+ *
+ * @param result - Audit result object
+ * @param options - Formatting options
+ * @returns Complete HTML document string
+ */
+export function formatAuditHtml(result, options = {}) {
+    const { title = "VertaaUX Audit Report", interactive = true } = options;
+    const issues = normalizeIssues(result.issues);
+    const timestamp = new Date().toISOString();
+    const auditDate = result.completed_at
+        ? new Date(result.completed_at).toLocaleDateString()
+        : new Date().toLocaleDateString();
+    // Count issues by severity
+    const severityCounts = {};
+    for (const issue of issues) {
+        const sev = issue.severity?.toLowerCase() || "info";
+        severityCounts[sev] = (severityCounts[sev] || 0) + 1;
+    }
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(title)}</title>
+  <style>${generateStyles()}</style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <div class="brand">
+        <span class="brand-icon">V</span>
+        <span class="brand-name">VertaaUX</span>
+      </div>
+      <div class="audit-url">${escapeHtml(result.url || "Unknown URL")}</div>
+      <div class="audit-meta">
+        <span>Mode: ${escapeHtml(result.mode || "basic")}</span>
+        <span>Date: ${auditDate}</span>
+        ${result.job_id ? `<span>Job: ${escapeHtml(result.job_id)}</span>` : ""}
+      </div>
+    </header>
+
+    ${generateScoreCards(result.scores)}
+
+    <section class="issues-section">
+      <div class="section-header">
+        <h2 class="section-title">Issues Found</h2>
+        <span class="issue-count">${issues.length} total</span>
+      </div>
+      ${generateIssuesTable(issues, interactive)}
+    </section>
+
+    <footer>
+      <div class="footer-brand">
+        Generated by <a href="https://vertaaux.ai">VertaaUX</a>
+      </div>
+      <div class="footer-timestamp">
+        ${timestamp}
+      </div>
+    </footer>
+  </div>
+
+  ${interactive ? `<script>${generateScript()}</script>` : ""}
+</body>
+</html>`;
+}

package/dist/output/human.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Human-readable output formatter for CLI.
+ *
+ * Outputs audit results as colorful, formatted text for terminal display.
+ * Uses chalk for colors and cli-table3 for table formatting.
+ */
+import { type FormatTableOptions } from "../ui/table.js";
+export interface AuditResult {
+    job_id?: string;
+    status?: string;
+    url?: string;
+    mode?: string;
+    progress?: number;
+    created_at?: string;
+    started_at?: string;
+    completed_at?: string;
+    scores?: Record<string, unknown>;
+    issues?: unknown;
+    error?: string;
+}
+export interface FormatHumanOptions {
+    /** How to group issues: severity (default), category, route */
+    groupBy?: "severity" | "category" | "route";
+    /** Whether to show detailed scores table */
+    showScores?: boolean;
+    /** Whether to show the summary at the end */
+    showSummary?: boolean;
+    /** Maximum issues to display per group */
+    maxIssuesPerGroup?: number;
+    /** Table formatting options */
+    tableOptions?: FormatTableOptions;
+}
+/**
+ * Format audit result as human-readable string.
+ *
+ * @param result - Audit result object
+ * @param options - Formatting options
+ * @returns Formatted string for terminal display
+ */
+export declare function formatAuditHuman(result: AuditResult, options?: FormatHumanOptions): string;
+//# sourceMappingURL=human.d.ts.map

package/dist/output/human.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"human.d.ts","sourceRoot":"","sources":["../../src/output/human.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAOL,KAAK,kBAAkB,EACxB,MAAM,gBAAgB,CAAC;AAGxB,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC,+DAA+D;IAC/D,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;IAC5C,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,YAAY,CAAC,EAAE,kBAAkB,CAAC;CACnC;AAmRD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,WAAW,EACnB,OAAO,GAAE,kBAAuB,GAC/B,MAAM,CAkDR"}