qodfy 0.2.10 → 0.3.0

package/README.md

@@ -24,15 +24,18 @@ Print machine-readable JSON:
 npx qodfy scan --json
 ```
 
-Write JSON or Markdown reports:
+Write JSON, Markdown, or HTML reports:
 
 ```bash
 npx qodfy scan --json --output qodfy-report.json
 npx qodfy scan --report qodfy-report.md
+npx qodfy scan --html qodfy-report.html
 ```
 
 The Markdown report is the **Qodfy Launch Report**: a senior-engineer-style review with a launch status, executive summary, top priorities, what looks good, and per-issue context (what Qodfy found, why it matters, evidence, suggested fix, and an AI fix prompt).
 
+The HTML report is a standalone, self-contained file (inline CSS, no external CDN, no JavaScript) that you can open directly in a browser to share with teammates or clients.
+
 ## What Qodfy Checks Today
 
 Qodfy scans locally and looks for common launch-readiness risks:
@@ -85,6 +88,7 @@ qodfy scan --path <project-path>
 qodfy scan --json
 qodfy scan --json --output qodfy-report.json
 qodfy scan --report qodfy-report.md
+qodfy scan --html qodfy-report.html
 qodfy --help
 qodfy --version
 ```

package/dist/index.js

@@ -11,11 +11,11 @@ import {
   scanProject,
   validScanChecks
 } from "@qodfy/core";
-var CLI_VERSION = "0.2.10";
+var CLI_VERSION = "0.3.0";
 var DEFAULT_MAX_ISSUES = 5;
 var program = new Command();
 program.name("qodfy").description("Launch readiness scanner for AI-built apps.").version(CLI_VERSION);
-program.command("scan").description("Scan a project for launch readiness issues.").option("-p, --path <path>", "Project path to scan", process.cwd()).option("--max-issues <number>", "Maximum number of issues to display", String(DEFAULT_MAX_ISSUES)).option("--prompts", "Show safe copy-paste fix prompts for displayed issues").option("--prompt <issue-id>", "Show the safe AI fix prompt for one issue").option("--checks <checks>", "Comma-separated checks to run").option("--all", "Run all checks without prompting").option("--no-interactive", "Skip interactive prompts and run the recommended scan").option("--json", "Print a machine-readable JSON report").option("--output <file>", "Write the JSON report to a file").option("--report <file>", "Write a human-readable Markdown report to a file").action(async (options) => {
+program.command("scan").description("Scan a project for launch readiness issues.").option("-p, --path <path>", "Project path to scan", process.cwd()).option("--max-issues <number>", "Maximum number of issues to display", String(DEFAULT_MAX_ISSUES)).option("--prompts", "Show safe copy-paste fix prompts for displayed issues").option("--prompt <issue-id>", "Show the safe AI fix prompt for one issue").option("--checks <checks>", "Comma-separated checks to run").option("--all", "Run all checks without prompting").option("--no-interactive", "Skip interactive prompts and run the recommended scan").option("--json", "Print a machine-readable JSON report").option("--output <file>", "Write the JSON report to a file").option("--report <file>", "Write a human-readable Markdown report to a file").option("--html <file>", "Write a standalone HTML report to a file").action(async (options) => {
   const outputOptionsResult = validateScanOutputOptions(options);
   if (!outputOptionsResult.ok) {
     printScanError(outputOptionsResult.reason, !isOutputMode(options));
@@ -64,6 +64,11 @@ program.command("scan").description("Scan a project for launch readiness issues.
       console.log(`Qodfy report saved to ${options.report}`);
       return;
     }
+    if (options.html) {
+      await writeReportFile(options.html, renderHtmlReport(outputReport));
+      console.log(`Qodfy HTML report saved to ${options.html}`);
+      return;
+    }
     if (options.prompt) {
       printPromptFromReport(report, options.prompt);
       return;
@@ -151,16 +156,34 @@ function validateScanOutputOptions(options) {
       reason: "Use either --json or --report for one scan command, not both."
     };
   }
-  if ((options.json || options.report) && options.prompt) {
+  if (options.json && options.html) {
     return {
       ok: false,
-      reason: "Use qodfy prompt <issue-id> for fix prompts, or run qodfy scan --json/--report for reports."
+      reason: "Use either --json or --html for one scan command, not both."
+    };
+  }
+  if (options.report && options.html) {
+    return {
+      ok: false,
+      reason: "Use either --report or --html for one scan command, not both."
+    };
+  }
+  if (options.html && options.output) {
+    return {
+      ok: false,
+      reason: "--output is only used with --json. For HTML, just pass --html <file>."
+    };
+  }
+  if ((options.json || options.report || options.html) && options.prompt) {
+    return {
+      ok: false,
+      reason: "Use qodfy prompt <issue-id> for fix prompts, or run qodfy scan --json/--report/--html for reports."
     };
   }
   return { ok: true };
 }
 function isOutputMode(options) {
-  return Boolean(options.json || options.output || options.report);
+  return Boolean(options.json || options.output || options.report || options.html);
 }
 async function resolveScanMode(options) {
   if (options.checks) {
@@ -540,6 +563,532 @@ function appendMarkdownFooter(lines) {
   lines.push("", "## Generated by Qodfy", "");
   lines.push("Qodfy scans locally and does not print secret values in reports.");
 }
+function escapeHtml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+}
+function renderHtmlReport(report) {
+  const projectName = path.basename(report.projectPath) || report.projectPath;
+  const statusLabel = getStatusLabel(report.score);
+  const statusTone = getStatusTone(report.score);
+  const criticalCount = countIssuesBySeverity(report.issues, "critical");
+  const warningCount = countIssuesBySeverity(report.issues, "warning");
+  const infoCount = countIssuesBySeverity(report.issues, "info");
+  const executiveSummary = getExecutiveSummary(report);
+  const priorities = getTopPriorities(report.issues);
+  const observations = getWhatLooksGood(report);
+  const sortedIssues = getSortedDisplayIssues(report.issues);
+  const severityOrder = ["critical", "warning", "info"];
+  const summaryCards = [
+    { label: "Critical issues", value: criticalCount, tone: criticalCount > 0 ? "critical" : "neutral" },
+    { label: "Warnings", value: warningCount, tone: warningCount > 0 ? "warning" : "neutral" },
+    { label: "Info", value: infoCount, tone: infoCount > 0 ? "info" : "neutral" },
+    { label: "Files scanned", value: report.stats.totalFiles, tone: "neutral" },
+    { label: "API routes", value: report.stats.apiRoutes, tone: "neutral" },
+    { label: "Scan duration", value: formatDuration(report.stats.durationMs), tone: "neutral" }
+  ];
+  const summaryCardsHtml = summaryCards.map(
+    (card) => `        <div class="stat-card stat-${card.tone}">
+          <div class="stat-label">${escapeHtml(card.label)}</div>
+          <div class="stat-value">${escapeHtml(String(card.value))}</div>
+        </div>`
+  ).join("\n");
+  const prioritiesHtml = priorities.length === 0 ? `<p class="muted">No urgent priorities found. Review warnings below before launch.</p>` : `<ol class="priority-list">
+${priorities.map((priority) => `          <li>${escapeHtml(priority)}</li>`).join("\n")}
+        </ol>`;
+  const observationsHtml = observations.length === 0 ? `<p class="muted">No positive observations to highlight from this scan.</p>` : `<ul class="observation-list">
+${observations.map((observation) => `          <li>${escapeHtml(observation)}</li>`).join("\n")}
+        </ul>`;
+  const issueSectionsHtml = report.issues.length === 0 ? `<p class="muted">No issues found.</p>` : severityOrder.map((severity) => renderHtmlSeveritySection(severity, sortedIssues.filter((issue) => issue.severity === severity))).filter(Boolean).join("\n");
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="generator" content="Qodfy" />
+  <title>Qodfy Launch Readiness Report</title>
+  <style>${getHtmlReportStyles()}</style>
+</head>
+<body>
+  <main class="page">
+    <header class="hero">
+      <p class="eyebrow">Qodfy</p>
+      <h1>Launch Readiness Report</h1>
+      <dl class="hero-meta">
+        <div><dt>Project</dt><dd>${escapeHtml(projectName)}</dd></div>
+        <div><dt>Path</dt><dd><code>${escapeHtml(report.projectPath)}</code></dd></div>
+        <div><dt>Scan mode</dt><dd>${escapeHtml(report.scanMode)}</dd></div>
+        <div><dt>Generated</dt><dd>${escapeHtml(report.generatedAt)}</dd></div>
+      </dl>
+      <div class="score-card score-${statusTone}">
+        <div class="score-value">${escapeHtml(String(report.score))}<span class="score-max">/100</span></div>
+        <div class="score-status">${escapeHtml(statusLabel)}</div>
+      </div>
+    </header>
+
+    <section class="stats" aria-label="Scan summary">
+${summaryCardsHtml}
+    </section>
+
+    <section class="card" aria-labelledby="executive-summary">
+      <h2 id="executive-summary">Executive Summary</h2>
+      <p>${escapeHtml(executiveSummary)}</p>
+    </section>
+
+    <section class="card" aria-labelledby="top-priorities">
+      <h2 id="top-priorities">Top Priorities</h2>
+      ${prioritiesHtml}
+    </section>
+
+    <section class="card" aria-labelledby="what-looks-good">
+      <h2 id="what-looks-good">What Looks Good</h2>
+      ${observationsHtml}
+    </section>
+
+    <section aria-labelledby="issues-by-priority">
+      <h2 id="issues-by-priority">Issues by Priority</h2>
+      ${issueSectionsHtml}
+    </section>
+
+    <section class="card" aria-labelledby="next-steps">
+      <h2 id="next-steps">Recommended Next Steps</h2>
+      <ul>
+        <li>Fix critical issues first.</li>
+        <li>Review warnings before launch.</li>
+        <li>Re-run Qodfy after changes.</li>
+        <li>Use <code>qodfy prompt &lt;issue-id&gt;</code> for focused AI repair prompts.</li>
+      </ul>
+    </section>
+
+    <footer class="footer">
+      <p><strong>Generated by Qodfy.</strong></p>
+      <p class="muted">Qodfy scans locally and does not print secret values in reports.</p>
+    </footer>
+  </main>
+</body>
+</html>
+`;
+}
+function renderHtmlSeveritySection(severity, issues) {
+  if (issues.length === 0) {
+    return "";
+  }
+  const heading = severity === "critical" ? "Critical" : severity === "warning" ? "Warnings" : "Info";
+  const groupsHtml = categoryOrder.map((category) => {
+    const categoryIssues = issues.filter((issue) => issue.category === category);
+    if (categoryIssues.length === 0) {
+      return "";
+    }
+    const cardsHtml = categoryIssues.map(renderHtmlIssueCard).join("\n");
+    return `      <div class="category-group">
+        <h4 class="category-heading">${escapeHtml(categoryLabels[category])}</h4>
+${cardsHtml}
+      </div>`;
+  }).filter(Boolean).join("\n");
+  return `    <section class="severity-section severity-${severity}" aria-label="${escapeHtml(heading)} issues">
+      <h3 class="severity-heading"><span class="severity-dot"></span>${escapeHtml(heading)} <span class="severity-count">(${issues.length})</span></h3>
+${groupsHtml}
+    </section>`;
+}
+function renderHtmlIssueCard(issue) {
+  const evidenceHtml = renderHtmlEvidenceList(issue.evidence);
+  const contextHtml = renderHtmlEvidenceList(issue.context);
+  const tests = getAfterFixTests(issue);
+  const testsHtml = tests.length === 0 ? `<p class="muted">No specific tests suggested.</p>` : `<ul>
+${tests.map((test) => `              <li>${escapeHtml(test)}</li>`).join("\n")}
+            </ul>`;
+  const fileLine = issue.file ? `<div class="meta-row"><span class="meta-label">File</span><code class="meta-value">${escapeHtml(issue.file)}</code></div>` : "";
+  const suggestion = issue.suggestion ?? "No specific suggestion provided for this rule yet.";
+  const fixPrompt = issue.fixPrompt ?? "No AI fix prompt available for this rule yet.";
+  return `        <article class="issue-card issue-${issue.severity}" aria-labelledby="issue-${escapeHtml(issue.id)}-title">
+          <header class="issue-header">
+            <div class="issue-badges">
+              <span class="badge badge-${issue.severity}">${escapeHtml(issue.severity.toUpperCase())}</span>
+              <span class="badge badge-confidence badge-confidence-${issue.confidence}">Confidence: ${escapeHtml(issue.confidence)}</span>
+              <span class="badge badge-category">${escapeHtml(categoryLabels[issue.category])}</span>
+            </div>
+            <h4 id="issue-${escapeHtml(issue.id)}-title" class="issue-title">${escapeHtml(issue.title)}</h4>
+            <div class="issue-meta">
+              <div class="meta-row"><span class="meta-label">ID</span><code class="meta-value">${escapeHtml(issue.id)}</code></div>
+              ${fileLine}
+            </div>
+          </header>
+
+          <section class="issue-section">
+            <h5>What Qodfy found</h5>
+            <p>${escapeHtml(issue.message)}</p>
+          </section>
+
+          <section class="issue-section">
+            <h5>Why it matters</h5>
+            <p>${escapeHtml(getWhyItMatters(issue))}</p>
+          </section>
+
+          <section class="issue-section">
+            <h5>Evidence</h5>
+            ${evidenceHtml}
+          </section>
+
+          <section class="issue-section">
+            <h5>Context</h5>
+            ${contextHtml}
+          </section>
+
+          <section class="issue-section">
+            <h5>Suggested fix</h5>
+            <p>${escapeHtml(suggestion)}</p>
+          </section>
+
+          <section class="issue-section">
+            <h5>AI Fix Prompt</h5>
+            <pre class="code-block"><code>${escapeHtml(fixPrompt)}</code></pre>
+          </section>
+
+          <section class="issue-section">
+            <h5>After fixing, test this</h5>
+            ${testsHtml}
+          </section>
+        </article>`;
+}
+function renderHtmlEvidenceList(items) {
+  if (!items || items.length === 0) {
+    return `<p class="muted">None.</p>`;
+  }
+  const listItems = items.map((item) => {
+    const detail = item.detail ? `: <code>${escapeHtml(item.detail)}</code>` : "";
+    return `              <li><strong>${escapeHtml(item.label)}</strong>${detail}</li>`;
+  }).join("\n");
+  return `<ul class="evidence-list">
+${listItems}
+            </ul>`;
+}
+function getStatusTone(score) {
+  if (score >= 90) {
+    return "ready";
+  }
+  if (score >= 75) {
+    return "almost";
+  }
+  if (score >= 50) {
+    return "needs-fixes";
+  }
+  return "not-ready";
+}
+function getHtmlReportStyles() {
+  return `
+    *, *::before, *::after { box-sizing: border-box; }
+    html { -webkit-text-size-adjust: 100%; }
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      background: #f6f7fb;
+      color: #1f2330;
+      line-height: 1.55;
+    }
+    code, pre {
+      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+    }
+    .page {
+      max-width: 960px;
+      margin: 0 auto;
+      padding: 32px 20px 64px;
+    }
+    .eyebrow {
+      margin: 0 0 4px;
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: #5b6478;
+    }
+    h1 {
+      margin: 0 0 16px;
+      font-size: 28px;
+      font-weight: 700;
+      letter-spacing: -0.01em;
+    }
+    h2 {
+      margin: 0 0 12px;
+      font-size: 20px;
+      font-weight: 700;
+      letter-spacing: -0.005em;
+    }
+    h3 {
+      margin: 0 0 12px;
+      font-size: 16px;
+      font-weight: 700;
+    }
+    h4 {
+      margin: 0 0 8px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+    h5 {
+      margin: 16px 0 6px;
+      font-size: 13px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      color: #5b6478;
+    }
+    p { margin: 0 0 12px; }
+    p:last-child { margin-bottom: 0; }
+    ul, ol { margin: 0 0 12px; padding-left: 22px; }
+    ul li, ol li { margin: 4px 0; }
+    .muted { color: #6b7384; }
+    .hero {
+      background: #ffffff;
+      border: 1px solid #e6e8ef;
+      border-radius: 16px;
+      padding: 24px;
+      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+      margin-bottom: 20px;
+      display: grid;
+      gap: 16px;
+    }
+    .hero-meta {
+      margin: 0;
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px 24px;
+    }
+    .hero-meta div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+    .hero-meta dt {
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: #5b6478;
+    }
+    .hero-meta dd {
+      margin: 0;
+      font-size: 14px;
+      color: #1f2330;
+      word-break: break-word;
+    }
+    .hero-meta code {
+      font-size: 12px;
+      background: #f1f3f8;
+      padding: 2px 6px;
+      border-radius: 6px;
+    }
+    .score-card {
+      border-radius: 12px;
+      padding: 16px 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      border: 1px solid transparent;
+    }
+    .score-card .score-value {
+      font-size: 36px;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+    }
+    .score-card .score-max {
+      font-size: 18px;
+      font-weight: 500;
+      color: #5b6478;
+      margin-left: 2px;
+    }
+    .score-card .score-status {
+      font-size: 14px;
+      font-weight: 600;
+      padding: 6px 10px;
+      border-radius: 999px;
+      background: rgba(255,255,255,0.6);
+    }
+    .score-ready { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
+    .score-ready .score-status { background: #d1fae5; color: #065f46; }
+    .score-almost { background: #f0f9ff; border-color: #bae6fd; color: #075985; }
+    .score-almost .score-status { background: #e0f2fe; color: #075985; }
+    .score-needs-fixes { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
+    .score-needs-fixes .score-status { background: #fef3c7; color: #92400e; }
+    .score-not-ready { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
+    .score-not-ready .score-status { background: #fee2e2; color: #991b1b; }
+    .stats {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+    .stat-card {
+      background: #ffffff;
+      border: 1px solid #e6e8ef;
+      border-radius: 12px;
+      padding: 14px 16px;
+      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+    }
+    .stat-label {
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: #5b6478;
+    }
+    .stat-value {
+      margin-top: 4px;
+      font-size: 22px;
+      font-weight: 700;
+      letter-spacing: -0.01em;
+    }
+    .stat-critical .stat-value { color: #b91c1c; }
+    .stat-warning .stat-value { color: #b45309; }
+    .stat-info .stat-value { color: #1d4ed8; }
+    .card {
+      background: #ffffff;
+      border: 1px solid #e6e8ef;
+      border-radius: 12px;
+      padding: 20px;
+      margin-bottom: 16px;
+      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+    }
+    .priority-list, .observation-list { margin-bottom: 0; }
+    .severity-section {
+      background: #ffffff;
+      border: 1px solid #e6e8ef;
+      border-radius: 14px;
+      padding: 20px;
+      margin-bottom: 16px;
+      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+    }
+    .severity-heading {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 18px;
+      margin-bottom: 16px;
+    }
+    .severity-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 999px;
+      display: inline-block;
+      background: #94a3b8;
+    }
+    .severity-critical .severity-dot { background: #dc2626; }
+    .severity-warning .severity-dot { background: #d97706; }
+    .severity-info .severity-dot { background: #2563eb; }
+    .severity-count { color: #6b7384; font-weight: 500; }
+    .category-group { margin-top: 16px; }
+    .category-group:first-of-type { margin-top: 0; }
+    .category-heading {
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: #5b6478;
+      margin-bottom: 10px;
+    }
+    .issue-card {
+      border: 1px solid #e6e8ef;
+      border-radius: 12px;
+      padding: 18px 20px;
+      margin-bottom: 12px;
+      background: #fbfbfd;
+      border-left-width: 4px;
+    }
+    .issue-critical { border-left-color: #dc2626; }
+    .issue-warning { border-left-color: #d97706; }
+    .issue-info { border-left-color: #2563eb; }
+    .issue-header { margin-bottom: 8px; }
+    .issue-badges {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-bottom: 8px;
+    }
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      padding: 3px 8px;
+      border-radius: 999px;
+      background: #eef0f5;
+      color: #1f2330;
+      text-transform: uppercase;
+    }
+    .badge-critical { background: #fee2e2; color: #991b1b; }
+    .badge-warning { background: #fef3c7; color: #92400e; }
+    .badge-info { background: #dbeafe; color: #1e40af; }
+    .badge-confidence {
+      background: #eef0f5;
+      color: #334155;
+      text-transform: none;
+      font-weight: 600;
+      letter-spacing: 0;
+    }
+    .badge-confidence-high { background: #dcfce7; color: #166534; }
+    .badge-confidence-medium { background: #fef3c7; color: #92400e; }
+    .badge-confidence-low { background: #e0e7ff; color: #3730a3; }
+    .badge-category {
+      background: #eef0f5;
+      color: #475569;
+      text-transform: none;
+      font-weight: 600;
+      letter-spacing: 0;
+    }
+    .issue-title {
+      margin: 4px 0 8px;
+      font-size: 16px;
+      font-weight: 700;
+      color: #0f172a;
+    }
+    .issue-meta {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 6px 16px;
+    }
+    .meta-row { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
+    .meta-label {
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: #5b6478;
+    }
+    .meta-value {
+      font-size: 12px;
+      background: #f1f3f8;
+      padding: 2px 6px;
+      border-radius: 6px;
+      word-break: break-all;
+    }
+    .issue-section { margin-top: 8px; }
+    .issue-section p { margin: 0; }
+    .evidence-list { margin: 0; }
+    .code-block {
+      margin: 0;
+      padding: 12px 14px;
+      background: #0f172a;
+      color: #e2e8f0;
+      border-radius: 10px;
+      overflow: auto;
+      font-size: 12.5px;
+      line-height: 1.55;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    .footer {
+      margin-top: 24px;
+      padding: 20px;
+      border-radius: 12px;
+      background: #ffffff;
+      border: 1px solid #e6e8ef;
+      text-align: center;
+    }
+    @media (max-width: 720px) {
+      .page { padding: 20px 14px 48px; }
+      h1 { font-size: 24px; }
+      .hero-meta, .stats, .issue-meta { grid-template-columns: 1fr; }
+      .stats { gap: 8px; }
+      .score-card { flex-direction: column; align-items: flex-start; }
+    }
+  `;
+}
 function appendMarkdownIssue(lines, issue) {
   lines.push(`### ${issue.title}`);
   lines.push("");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qodfy",
-  "version": "0.2.10",
+  "version": "0.3.0",
   "description": "Open-source launch readiness scanner for AI-built apps.",
   "keywords": [
     "qodfy",