aeo-ready 1.1.0 → 1.2.0

package/bin/cli.js

@@ -2,12 +2,6 @@
 
 import { Command } from "commander";
 import { scan } from "../src/scan.js";
-import { fix } from "../src/fix/index.js";
-import {
-  track,
-  printTrackResults,
-  getAvailableProviders,
-} from "../src/track/index.js";
 import { readFileSync } from "fs";
 import { dirname, join } from "path";
 import { fileURLToPath } from "url";
@@ -21,66 +15,33 @@ const program = new Command();
 
 program
   .name("aeo-ready")
-  .description("Is your site AEO ready? Two scorecards, one score.")
+  .description("AEO benchmark aggregator. One scan, every score.")
   .version(pkg.version);
 
 program
   .command("scan [url]")
-  .description("Run a full audit (Agent Readiness + AI Visibility)")
-  .option("--fix", "Fix issues and show before/after")
-  .option("--track", "Query AI models to see what they say about you")
-  .option("--company <name>", "Company name for --track")
-  .option("--category <cat>", "Industry category for --track")
+  .description("Run all AEO benchmarks against a URL")
   .option("--json", "Output results as JSON")
   .option(
     "--threshold <number>",
-    "Minimum score to pass (exit 1 if below)",
+    "Minimum average score to pass (exit 1 if below)",
     parseInt,
   )
-  .option("--no-benchmark", "Skip agentic-seo benchmark")
   .action(async (url, opts) => {
     try {
-      const isUrl = url && url.startsWith("http");
-      const dir = isUrl ? null : process.cwd();
-      const quiet = opts.fix && dir;
-      const result = await scan({
-        url: isUrl ? url : null,
-        dir,
-        json: opts.json || quiet,
-        benchmark: quiet ? false : opts.benchmark !== false,
-      });
-
-      if (opts.track) {
-        const providers = getAvailableProviders();
-        if (providers.length === 0) {
-          console.log("\n  --track needs API keys. Set one or more:");
-          console.log("    ANTHROPIC_API_KEY  (Claude)");
-          console.log("    OPENAI_API_KEY     (ChatGPT)");
-          console.log("    GOOGLE_API_KEY     (Gemini)\n");
-        } else {
-          const trackResults = await track(result, {
-            company: opts.company || null,
-            category: opts.category || null,
-          });
-          printTrackResults(trackResults, opts.company);
-        }
+      if (url && !url.startsWith("http")) url = `https://${url}`;
+      if (!url) {
+        console.error("  Usage: npx aeo-ready scan <url>");
+        process.exit(1);
       }
 
-      if (opts.fix && dir) {
-        const rescan = () =>
-          scan({ url: null, dir, json: true, benchmark: false });
-        await fix(result, dir, rescan);
-      } else if (opts.fix && !dir) {
-        console.log(
-          "\n  --fix requires repo mode (no --url). Files are written to current directory.\n",
-        );
-      }
+      const result = await scan({ url, json: opts.json || false });
 
       if (opts.json) {
         process.stdout.write(JSON.stringify(result, null, 2) + "\n");
       }
 
-      if (opts.threshold && result.score < opts.threshold) {
+      if (opts.threshold && result.averageScore < opts.threshold) {
         process.exit(1);
       }
     } catch (err) {
@@ -89,18 +50,4 @@ program
     }
   });
 
-program
-  .command("init")
-  .description("Create .agent-web/config.yaml for citation tracking")
-  .action(() => {
-    console.log("Coming in v2.0 — citation tracking config");
-  });
-
-program
-  .command("history")
-  .description("List past scan results")
-  .action(() => {
-    console.log("Coming in v1.2 — scan history");
-  });
-
 program.parse();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aeo-ready",
-  "version": "1.1.0",
-  "description": "Is your site AEO ready? Two scorecards: Agent Readiness + AI Visibility. One scan, one score.",
+  "version": "1.2.0",
+  "description": "AEO benchmark aggregator. One scan, every score. Collects agentic-seo, Cloudflare, and Fern in one report.",
   "type": "module",
   "bin": {
     "aeo-ready": "./bin/cli.js"

package/src/dashboard/generate.js

@@ -2,11 +2,9 @@ import { existsSync, readFileSync, writeFileSync, mkdirSync } from "fs";
 import { join } from "path";
 import { getHistory } from "../history/index.js";
 import { renderOverallScore } from "./sections/overall-score.js";
-import { renderAgentReadiness } from "./sections/agent-readiness.js";
-import { renderAiVisibility } from "./sections/ai-visibility.js";
 import { renderHistoryTable } from "./sections/history-table.js";
 import { renderTrendChart } from "./sections/trend-chart.js";
-import { renderRecommendations } from "./sections/recommendations.js";
+import { renderBenchmarkDetails } from "./sections/benchmark-details.js";
 
 const DASHBOARD_DIR = ".aeo-ready";
 const DASHBOARD_FILE = "dashboard.html";
@@ -19,12 +17,10 @@ export async function generateDashboard(scanResult, dir, opts = {}) {
   const history = getHistory(dir);
 
   const sections = {
-    "overall-score": renderOverallScore(scanResult, opts.beforeResult || null),
-    "agent-readiness-scorecard": renderAgentReadiness(scanResult),
-    "ai-visibility-scorecard": renderAiVisibility(scanResult),
-    "history-table": renderHistoryTable(history),
+    "overall-score": renderOverallScore(scanResult),
+    "benchmark-details": renderBenchmarkDetails(scanResult),
     "trend-chart": renderTrendChart(history),
-    recommendations: renderRecommendations(scanResult),
+    "history-table": renderHistoryTable(history),
   };
 
   let html;
@@ -54,13 +50,12 @@ function replaceSection(html, name, content) {
 
 function buildFullDashboard(sections, scanResult) {
   const timestamp = new Date().toISOString().slice(0, 10);
-  const target = scanResult.target || "Local";
 
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<title>aeo-ready — AI Readiness Dashboard</title>
+<title>aeo-ready — AEO Benchmark Dashboard</title>
 <style>
 ${CSS}
 </style>
@@ -69,30 +64,24 @@ ${CSS}
 
 <nav>
   <h2>aeo-ready</h2>
-  <a href="#overall" class="section-head">Overall Score</a>
-  <a href="#agent-readiness" class="section-head">Agent Readiness</a>
-  <a href="#ai-visibility" class="section-head">AI Visibility</a>
+  <a href="#overall" class="section-head">Scores</a>
+  <a href="#details" class="section-head">Benchmark Details</a>
   <a href="#trends" class="section-head">Trends</a>
   <a href="#history" class="section-head">History</a>
-  <a href="#recommendations" class="section-head">Recommendations</a>
 </nav>
 
 <main>
 
-<h1>AI Readiness Dashboard</h1>
-<p class="subtitle">${target} · Updated ${timestamp}</p>
+<h1>AEO Benchmark Dashboard</h1>
+<p class="subtitle">${scanResult.url} · ${timestamp}</p>
 
 <!-- SECTION:overall-score -->
 ${sections["overall-score"]}
 <!-- /SECTION:overall-score -->
 
-<!-- SECTION:agent-readiness-scorecard -->
-${sections["agent-readiness-scorecard"]}
-<!-- /SECTION:agent-readiness-scorecard -->
-
-<!-- SECTION:ai-visibility-scorecard -->
-${sections["ai-visibility-scorecard"]}
-<!-- /SECTION:ai-visibility-scorecard -->
+<!-- SECTION:benchmark-details -->
+${sections["benchmark-details"]}
+<!-- /SECTION:benchmark-details -->
 
 <!-- SECTION:trend-chart -->
 ${sections["trend-chart"]}
@@ -102,10 +91,6 @@ ${sections["trend-chart"]}
 ${sections["history-table"]}
 <!-- /SECTION:history-table -->
 
-<!-- SECTION:recommendations -->
-${sections["recommendations"]}
-<!-- /SECTION:recommendations -->
-
 </main>
 </body>
 </html>`;
@@ -123,34 +108,23 @@ h1 { color: #f0f6fc; font-size: 24px; margin-bottom: 4px; }
 .subtitle { color: #8b949e; font-size: 13px; margin-bottom: 32px; }
 h2 { color: #f0f6fc; font-size: 18px; margin-top: 40px; margin-bottom: 16px; padding-top: 16px; border-top: 1px solid #21262d; }
 h3 { color: #f0f6fc; font-size: 14px; margin-top: 16px; margin-bottom: 8px; }
-.score-hero { text-align: center; padding: 32px 0; }
-.score-hero .grade { font-size: 64px; font-weight: 700; }
-.score-hero .number { font-size: 24px; color: #8b949e; margin-top: 4px; }
-.score-hero .bar { margin: 16px auto; width: 300px; height: 8px; background: #21262d; border-radius: 4px; overflow: hidden; }
-.score-hero .bar-fill { height: 100%; border-radius: 4px; }
+.scores { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0; }
+.score-card { background: #161b22; border: 1px solid #21262d; border-radius: 8px; padding: 20px; flex: 1; min-width: 180px; text-align: center; }
+.score-card .name { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #8b949e; margin-bottom: 8px; }
+.score-card .grade { font-size: 36px; font-weight: 700; }
+.score-card .number { font-size: 14px; color: #8b949e; margin-top: 4px; }
+.score-card .bar { margin: 8px auto; width: 100%; height: 4px; background: #21262d; border-radius: 2px; overflow: hidden; }
+.score-card .bar-fill { height: 100%; border-radius: 2px; }
 .grade-a { color: #3fb950; } .grade-b { color: #79c0ff; } .grade-c { color: #d29922; } .grade-d { color: #f85149; } .grade-f { color: #f85149; }
 .bar-a { background: #3fb950; } .bar-b { background: #79c0ff; } .bar-c { background: #d29922; } .bar-d { background: #f85149; } .bar-f { background: #f85149; }
-.scorecard { background: #161b22; border: 1px solid #21262d; border-radius: 8px; padding: 20px; margin: 16px 0; }
-.scorecard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
-.scorecard-header h3 { margin: 0; }
-.scorecard-header .pct { font-size: 20px; font-weight: 600; }
-.category { margin: 12px 0; padding: 8px 0; border-bottom: 1px solid #21262d; }
-.category:last-child { border-bottom: none; }
-.cat-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
-.cat-name { font-size: 13px; font-weight: 500; flex: 1; }
-.cat-score { font-size: 12px; color: #8b949e; }
-.cat-bar { width: 120px; height: 4px; background: #21262d; border-radius: 2px; overflow: hidden; }
-.cat-bar-fill { height: 100%; border-radius: 2px; }
+details { background: #161b22; border: 1px solid #21262d; border-radius: 8px; padding: 16px; margin: 12px 0; cursor: pointer; }
+details summary { font-size: 14px; font-weight: 500; color: #f0f6fc; display: flex; justify-content: space-between; }
 .check { font-size: 12px; padding: 2px 0 2px 16px; color: #8b949e; }
 .check.pass { color: #3fb950; }
 .check.fail { color: #f85149; }
-.check .fix { display: block; color: #8b949e; font-size: 11px; padding-left: 16px; margin-top: 2px; }
+.compare { font-size: 11px; color: #8b949e; margin-top: 8px; padding-top: 8px; border-top: 1px solid #21262d; }
 table { width: 100%; border-collapse: collapse; margin: 12px 0; }
 th, td { text-align: left; padding: 8px 12px; font-size: 12px; border-bottom: 1px solid #21262d; }
 th { color: #8b949e; font-weight: 600; }
 .trend { color: #3fb950; } .regression { color: #f85149; }
-.rec { background: #161b22; border: 1px solid #21262d; border-radius: 6px; padding: 12px 16px; margin: 8px 0; }
-.rec-title { font-size: 13px; font-weight: 500; color: #f0f6fc; }
-.rec-fix { font-size: 12px; color: #8b949e; margin-top: 4px; }
-.rec-impact { font-size: 11px; color: #d29922; margin-top: 4px; }
 svg { display: block; margin: 16px 0; }`;

package/src/dashboard/sections/benchmark-details.js

@@ -0,0 +1,79 @@
+const REFERENCE_SCORES = {
+  agenticSeo: {
+    Cloudflare: 55,
+    Supabase: 52,
+    Vercel: 48,
+    Average: 25,
+    Stripe: 17,
+  },
+  cloudflare: { Cloudflare: 5, Vercel: 4, Supabase: 3, Stripe: 2, Average: 2 },
+  fern: { Stripe: 85, Supabase: 78, Anthropic: 72, Vercel: 60, Average: 45 },
+};
+
+export function renderBenchmarkDetails(result) {
+  const { benchmarks } = result;
+
+  let html = `<h2 id="details">Benchmark Details</h2>
+<p style="color:#8b949e;font-size:12px;margin-bottom:12px;">Expand each source to see per-check results and how other companies score.</p>`;
+
+  if (benchmarks.agenticSeo?.available) {
+    html += renderSource("agentic-seo", "agenticSeo", benchmarks.agenticSeo);
+  }
+  if (benchmarks.cloudflare?.available) {
+    html += renderSource("Cloudflare", "cloudflare", benchmarks.cloudflare);
+  }
+  if (benchmarks.fern?.available) {
+    html += renderSource("Fern", "fern", benchmarks.fern);
+  }
+
+  return html;
+}
+
+function renderSource(name, key, data) {
+  const pct =
+    data.maxScore > 0 ? Math.round((data.score / data.maxScore) * 100) : 0;
+
+  let html = `\n<details>
+  <summary>
+    <span>${esc(name)}</span>
+    <span style="color:#8b949e;">${data.score}/${data.maxScore}${data.grade ? ` (${data.grade})` : ""}</span>
+  </summary>
+  <div style="margin-top:12px;">`;
+
+  if (data.checks && data.checks.length > 0) {
+    for (const check of data.checks) {
+      if (check.status === "pass") {
+        html += `\n    <div class="check pass">+ ${esc(check.id)} ${check.message ? `<span style="color:#8b949e;font-size:11px;">${esc(check.message.slice(0, 80))}</span>` : ""}</div>`;
+      } else if (check.status === "fail") {
+        html += `\n    <div class="check fail">- ${esc(check.id)} ${check.message ? `<span style="color:#8b949e;font-size:11px;">${esc(check.message.slice(0, 80))}</span>` : ""}</div>`;
+      }
+    }
+  } else if (data.categories) {
+    for (const [, cat] of Object.entries(data.categories)) {
+      const catPct =
+        cat.maxScore > 0 ? Math.round((cat.score / cat.maxScore) * 100) : 0;
+      const icon = catPct >= 80 ? "+" : catPct >= 40 ? "~" : "-";
+      const cls = catPct >= 80 ? "pass" : "fail";
+      html += `\n    <div class="check ${cls}">${icon} ${esc(cat.name || "")} ${cat.score}/${cat.maxScore}</div>`;
+    }
+  }
+
+  const refs = REFERENCE_SCORES[key];
+  if (refs) {
+    const lines = Object.entries(refs)
+      .sort((a, b) => b[1] - a[1])
+      .map(([n, s]) => `${n}: ${s}`)
+      .join(" · ");
+    html += `\n    <div class="compare">Others: ${lines}</div>`;
+  }
+
+  html += `\n  </div>\n</details>`;
+  return html;
+}
+
+function esc(s) {
+  return (s || "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}

package/src/dashboard/sections/history-table.js

@@ -5,12 +5,12 @@ export function renderHistoryTable(history) {
 
   const scans = [...history.scans].reverse().slice(0, 20);
 
-  let html = `<h2 id="history">Scan History</h2>\n<table>\n<tr><th>Date</th><th>Score</th><th>Grade</th><th>Agent</th><th>Visibility</th><th>Delta</th></tr>`;
+  let html = `<h2 id="history">Scan History</h2>\n<table>\n<tr><th>Date</th><th>agentic-seo</th><th>Cloudflare</th><th>Fern</th><th>Avg</th><th>Delta</th></tr>`;
 
   for (let i = 0; i < scans.length; i++) {
     const s = scans[i];
     const prev = scans[i + 1];
-    const delta = prev ? s.score - prev.score : 0;
+    const delta = prev ? s.averageScore - prev.averageScore : 0;
     const deltaStr =
       delta > 0
         ? `<span class="trend">+${delta}</span>`
@@ -19,14 +19,17 @@ export function renderHistoryTable(history) {
           : `<span style="color:#8b949e">—</span>`;
 
     const date = s.timestamp ? s.timestamp.slice(0, 10) : "—";
-    const gradeClass = `grade-${(s.grade || "f").toLowerCase()}`;
+    const cf =
+      s.cloudflare != null && s.cloudflareMax
+        ? `${s.cloudflare}/${s.cloudflareMax}`
+        : "—";
 
     html += `\n<tr>
   <td>${date}</td>
-  <td>${s.score}/100</td>
-  <td class="${gradeClass}">${s.grade || "?"}</td>
-  <td>${s.agentReadiness ?? "—"}/50</td>
-  <td>${s.aiVisibility ?? "—"}/50</td>
+  <td>${s.agenticSeo ?? "—"}</td>
+  <td>${cf}</td>
+  <td>${s.fern ?? "—"}</td>
+  <td>${s.averageScore ?? "—"}</td>
   <td>${deltaStr}</td>
 </tr>`;
   }

package/src/dashboard/sections/overall-score.js

@@ -1,128 +1,65 @@
-export function renderOverallScore(result, beforeResult) {
-  if (beforeResult) {
-    return renderBeforeAfter(beforeResult, result);
+export function renderOverallScore(result) {
+  const { benchmarks, averageScore } = result;
+
+  let html = `<div id="overall" class="scores">`;
+
+  if (benchmarks.agenticSeo?.available) {
+    html += scoreCard(
+      "agentic-seo",
+      benchmarks.agenticSeo.score,
+      100,
+      benchmarks.agenticSeo.grade,
+    );
   }
-  return renderSingle(result);
-}
-
-function renderSingle(result) {
-  const { score, grade } = result;
-  const gradeClass = `grade-${grade.toLowerCase()}`;
-  const barClass = `bar-${grade.toLowerCase()}`;
-
-  return `<div class="score-hero" id="overall">
-  <div class="grade ${gradeClass}">${grade}</div>
-  <div class="number">${score} / 100</div>
-  <div class="bar"><div class="bar-fill ${barClass}" style="width:${score}%"></div></div>
-  <div style="display:flex;justify-content:center;gap:40px;margin-top:16px;font-size:13px;">
-    <span>Agent Readiness: <strong>${result.agentReadiness.score}/50</strong></span>
-    <span>AI Visibility: <strong>${result.aiVisibility.score}/50</strong></span>
-  </div>
-</div>
-${renderInsight(result)}
-${renderBenchmarkComparison(score)}`;
-}
-
-function renderBeforeAfter(before, after) {
-  const delta = after.score - before.score;
-  const deltaClass = delta > 0 ? "trend" : delta < 0 ? "regression" : "";
-  const deltaStr = delta > 0 ? `+${delta}` : `${delta}`;
-
-  return `<div id="overall" style="display:flex;align-items:center;justify-content:center;gap:24px;padding:32px 0;">
-
-  <div style="text-align:center;flex:1;">
-    <div style="font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:#8b949e;margin-bottom:8px;">Before</div>
-    <div class="grade-${before.grade.toLowerCase()}" style="font-size:48px;font-weight:700;">${before.grade}</div>
-    <div style="font-size:20px;color:#8b949e;margin-top:4px;">${before.score} / 100</div>
-    <div class="bar" style="margin:12px auto;width:200px;height:6px;background:#21262d;border-radius:3px;overflow:hidden;">
-      <div class="bar-fill bar-${before.grade.toLowerCase()}" style="width:${before.score}%;height:100%;border-radius:3px;"></div>
-    </div>
-    <div style="font-size:12px;color:#8b949e;">
-      Agent: ${before.agentReadiness.score}/50 · Visibility: ${before.aiVisibility.score}/50
-    </div>
-  </div>
-
-  <div style="font-size:32px;color:#8b949e;padding:0 8px;">→</div>
-
-  <div style="text-align:center;flex:1;">
-    <div style="font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:#8b949e;margin-bottom:8px;">After</div>
-    <div class="grade-${after.grade.toLowerCase()}" style="font-size:48px;font-weight:700;">${after.grade}</div>
-    <div style="font-size:20px;color:#8b949e;margin-top:4px;">${after.score} / 100</div>
-    <div class="bar" style="margin:12px auto;width:200px;height:6px;background:#21262d;border-radius:3px;overflow:hidden;">
-      <div class="bar-fill bar-${after.grade.toLowerCase()}" style="width:${after.score}%;height:100%;border-radius:3px;"></div>
-    </div>
-    <div style="font-size:12px;color:#8b949e;">
-      Agent: ${after.agentReadiness.score}/50 · Visibility: ${after.aiVisibility.score}/50
-    </div>
-  </div>
-
-</div>
-${delta !== 0 ? `<div style="text-align:center;margin-top:-16px;margin-bottom:16px;"><span class="${deltaClass}" style="font-size:16px;font-weight:600;">${deltaStr} points</span></div>` : ""}
-${renderInsight(after)}
-${renderBenchmarkComparison(after.score)}`;
-}
-
-function renderInsight(result) {
-  const agent = result.agentReadiness.score;
-  const vis = result.aiVisibility.score;
-
-  if (agent < 25) {
-    return `<div style="text-align:center;padding:12px 24px;margin:16px auto;max-width:500px;background:#d2992210;border:1px solid #d2992233;border-radius:6px;font-size:13px;color:#d29922;">
-  <strong>Agent Readiness is low.</strong> AI engines can't cite what they can't read.<br>
-  <span style="color:#8b949e;">Fix the agent side first. Visibility follows.</span>
-</div>`;
-  }
-
-  if (agent >= 40 && vis < 25) {
-    return `<div style="text-align:center;padding:12px 24px;margin:16px auto;max-width:500px;background:#79c0ff10;border:1px solid #79c0ff33;border-radius:6px;font-size:13px;color:#79c0ff;">
-  <strong>Agents can read your site — now make it citable.</strong><br>
-  <span style="color:#8b949e;">Add direct answer summaries, question headings, and structured claims.</span>
-</div>`;
+  if (benchmarks.cloudflare?.available) {
+    html += scoreCard(
+      "Cloudflare",
+      benchmarks.cloudflare.score,
+      benchmarks.cloudflare.maxScore,
+      benchmarks.cloudflare.grade,
+    );
   }
-
-  if (agent >= 40 && vis >= 40) {
-    return `<div style="text-align:center;padding:12px 24px;margin:16px auto;max-width:500px;background:#3fb95010;border:1px solid #3fb95033;border-radius:6px;font-size:13px;color:#3fb950;">
-  <strong>Strong on both sides.</strong> Agents can find you and AI engines can cite you.
-</div>`;
+  if (benchmarks.fern?.available) {
+    html += scoreCard(
+      "Fern",
+      benchmarks.fern.score,
+      100,
+      benchmarks.fern.grade,
+    );
   }
 
-  return "";
-}
-
-const REFERENCE_SCORES = [
-  { name: "Stripe", score: 33, type: "SaaS" },
-  { name: "Anthropic Docs", score: 43, type: "API" },
-  { name: "Vercel", score: 48, type: "SaaS" },
-  { name: "Supabase", score: 52, type: "API" },
-  { name: "Cloudflare", score: 55, type: "SaaS" },
-  { name: "Average site", score: 25, type: "" },
-];
+  html += `</div>`;
 
-function renderBenchmarkComparison(yourScore) {
-  const sorted = [
-    ...REFERENCE_SCORES,
-    { name: "You", score: yourScore, type: "", you: true },
-  ].sort((a, b) => b.score - a.score);
+  const gc =
+    averageScore >= 80 ? "grade-a" : averageScore >= 50 ? "grade-c" : "grade-f";
+  html += `<div style="text-align:center;margin:16px 0;font-size:14px;color:#8b949e;">Average across sources: <strong class="${gc}">${averageScore}/100</strong></div>`;
 
-  let html = `<div style="margin-top:24px;padding:20px;background:#161b22;border:1px solid #21262d;border-radius:8px;">
-  <div style="font-size:13px;font-weight:600;color:#f0f6fc;margin-bottom:12px;">How you compare</div>`;
-
-  for (const entry of sorted) {
-    const isYou = entry.you;
-    const color = isYou ? "#d29922" : "#30363d";
-    const nameColor = isYou ? "#f0f6fc" : "#8b949e";
-    const weight = isYou ? "font-weight:600;" : "";
+  return html;
+}
 
-    html += `
-  <div style="display:flex;align-items:center;gap:8px;margin:6px 0;">
-    <span style="width:120px;font-size:12px;color:${nameColor};${weight}">${entry.name}</span>
-    <div style="flex:1;height:4px;background:#21262d;border-radius:2px;overflow:hidden;">
-      <div style="width:${entry.score}%;height:100%;background:${color};border-radius:2px;"></div>
-    </div>
-    <span style="font-size:11px;color:${nameColor};width:32px;text-align:right;${weight}">${entry.score}</span>
+function scoreCard(name, score, maxScore, grade) {
+  const pct = maxScore > 0 ? Math.round((score / maxScore) * 100) : 0;
+  const gc = grade
+    ? grade.toLowerCase()
+    : pct >= 80
+      ? "a"
+      : pct >= 65
+        ? "b"
+        : pct >= 50
+          ? "c"
+          : pct >= 35
+            ? "d"
+            : "f";
+
+  return `
+  <div class="score-card">
+    <div class="name">${esc(name)}</div>
+    <div class="grade grade-${gc}">${score}/${maxScore}</div>
+    <div class="number">${grade || ""}</div>
+    <div class="bar"><div class="bar-fill bar-${gc}" style="width:${pct}%"></div></div>
   </div>`;
-  }
+}
 
-  html += `\n</div>`;
-  return html;
+function esc(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }