aeo-ready 1.0.0 → 1.2.0

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;");
 }

package/src/dashboard/sections/trend-chart.js

@@ -6,54 +6,42 @@ export function renderTrendChart(history) {
   const scans = history.scans.slice(-20);
   const width = 700;
   const height = 200;
-  const padding = { top: 20, right: 20, bottom: 30, left: 40 };
-  const chartW = width - padding.left - padding.right;
-  const chartH = height - padding.top - padding.bottom;
-
-  const maxScore = 100;
+  const pad = { top: 20, right: 20, bottom: 30, left: 40 };
+  const chartW = width - pad.left - pad.right;
+  const chartH = height - pad.top - pad.bottom;
   const xStep = scans.length > 1 ? chartW / (scans.length - 1) : chartW;
 
-  function toPoint(index, value) {
-    const x = padding.left + index * xStep;
-    const y = padding.top + chartH - (value / maxScore) * chartH;
-    return { x, y };
+  function toY(value) {
+    return pad.top + chartH - (value / 100) * chartH;
   }
 
   function polyline(values, color) {
-    const points = values.map((v, i) => toPoint(i, v));
-    const d = points
-      .map(
-        (p, i) => `${i === 0 ? "M" : "L"} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`,
-      )
-      .join(" ");
-    return `<path d="${d}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>`;
-  }
-
-  function dots(values, color) {
-    return values
-      .map((v, i) => {
-        const p = toPoint(i, v);
-        return `<circle cx="${p.x.toFixed(1)}" cy="${p.y.toFixed(1)}" r="3" fill="${color}"/>`;
-      })
-      .join("\n");
+    const pts = values.map(
+      (v, i) =>
+        `${i === 0 ? "M" : "L"} ${(pad.left + i * xStep).toFixed(1)} ${toY(v ?? 0).toFixed(1)}`,
+    );
+    return `<path d="${pts.join(" ")}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>`;
   }
 
-  const overall = scans.map((s) => s.score);
-  const agent = scans.map((s) => (s.agentReadiness ?? 0) * 2);
-  const vis = scans.map((s) => (s.aiVisibility ?? 0) * 2);
+  const agenticSeo = scans.map((s) => s.agenticSeo ?? 0);
+  const cloudflare = scans.map((s) =>
+    s.cloudflare != null && s.cloudflareMax
+      ? Math.round((s.cloudflare / s.cloudflareMax) * 100)
+      : 0,
+  );
+  const fern = scans.map((s) => s.fern ?? 0);
 
-  const gridLines = [0, 25, 50, 75, 100]
+  const grid = [0, 25, 50, 75, 100]
     .map((v) => {
-      const y = padding.top + chartH - (v / maxScore) * chartH;
-      return `<line x1="${padding.left}" y1="${y}" x2="${width - padding.right}" y2="${y}" stroke="#21262d" stroke-width="1"/>
-<text x="${padding.left - 8}" y="${y + 4}" text-anchor="end" fill="#8b949e" font-size="10">${v}</text>`;
+      const y = toY(v);
+      return `<line x1="${pad.left}" y1="${y}" x2="${width - pad.right}" y2="${y}" stroke="#21262d"/><text x="${pad.left - 8}" y="${y + 4}" text-anchor="end" fill="#8b949e" font-size="10">${v}</text>`;
     })
     .join("\n");
 
-  const xLabels = scans
+  const labels = scans
     .map((s, i) => {
       if (scans.length <= 10 || i % Math.ceil(scans.length / 8) === 0) {
-        const x = padding.left + i * xStep;
+        const x = pad.left + i * xStep;
         const label = s.timestamp ? s.timestamp.slice(5, 10) : "";
         return `<text x="${x}" y="${height - 5}" text-anchor="middle" fill="#8b949e" font-size="10">${label}</text>`;
       }
@@ -61,18 +49,15 @@ export function renderTrendChart(history) {
     })
     .join("\n");
 
-  const svg = `<h2 id="trends">Score Trends</h2>
+  return `<h2 id="trends">Score Trends</h2>
 <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
-${gridLines}
-${xLabels}
-${polyline(agent, "#79c0ff")}
-${polyline(vis, "#d29922")}
-${polyline(overall, "#f0f6fc")}
-${dots(overall, "#f0f6fc")}
-<text x="${width - padding.right}" y="${padding.top - 5}" text-anchor="end" fill="#f0f6fc" font-size="10">Overall</text>
-<text x="${width - padding.right - 80}" y="${padding.top - 5}" text-anchor="end" fill="#79c0ff" font-size="10">Agent (x2)</text>
-<text x="${width - padding.right - 180}" y="${padding.top - 5}" text-anchor="end" fill="#d29922" font-size="10">Visibility (x2)</text>
+${grid}
+${labels}
+${polyline(agenticSeo, "#f85149")}
+${polyline(cloudflare, "#3fb950")}
+${polyline(fern, "#79c0ff")}
+<text x="${width - pad.right}" y="${pad.top - 5}" text-anchor="end" fill="#f85149" font-size="10">agentic-seo</text>
+<text x="${width - pad.right - 90}" y="${pad.top - 5}" text-anchor="end" fill="#3fb950" font-size="10">Cloudflare</text>
+<text x="${width - pad.right - 170}" y="${pad.top - 5}" text-anchor="end" fill="#79c0ff" font-size="10">Fern</text>
 </svg>`;
-
-  return svg;
 }

package/src/history/index.js

@@ -1,7 +1,7 @@
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
 import { join } from "path";
 
-const DIR_NAME = ".agent-web";
+const DIR_NAME = ".aeo-ready";
 const HISTORY_FILE = "history.json";
 
 export async function saveResult(result, baseDir) {
@@ -14,13 +14,12 @@ export async function saveResult(result, baseDir) {
   history.scans.push({
     id: generateId(),
     timestamp: result.timestamp,
-    score: result.score,
-    grade: result.grade,
-    siteType: result.siteType,
-    target: result.target,
-    agentReadiness: result.agentReadiness.score,
-    aiVisibility: result.aiVisibility.score,
-    benchmark: result.benchmark?.score ?? null,
+    url: result.url,
+    averageScore: result.averageScore,
+    agenticSeo: result.benchmarks?.agenticSeo?.score ?? null,
+    cloudflare: result.benchmarks?.cloudflare?.score ?? null,
+    cloudflareMax: result.benchmarks?.cloudflare?.maxScore ?? null,
+    fern: result.benchmarks?.fern?.score ?? null,
   });
 
   writeFileSync(historyPath, JSON.stringify(history, null, 2));
@@ -30,9 +29,7 @@ export function loadHistory(historyPath) {
   if (existsSync(historyPath)) {
     try {
       return JSON.parse(readFileSync(historyPath, "utf8"));
-    } catch {
-      /* corrupted — start fresh */
-    }
+    } catch {}
   }
   return { scans: [] };
 }