refactor: rebuild InfraLens landing example and OG card to match the real report (v0.9.0)

- extract src/infralens/lib/mock-report.ts as a single source of mock
  data, shared by both surfaces instead of two hand-rolled copies that
  had already drifted (stale "OK" vocabulary and a wrong icon/color
  mapping, found and fixed in Phase 2's deleted section)
- rebuild results-preview.tsx to reuse the real PrioritySummary and
  CheckResultCard components with mock data instead of a parallel
  reimplementation — adds the hostname/URL/score header and "At a
  glance" section that are now central to the real report but were
  entirely missing from the example
- opengraph-image.tsx now reads from the same shared mock (hostname,
  score, categories, example checks) instead of a separate hardcoded
  copy

Author: Randy-R-code

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [0.9.0] — 2026-08-11
+
+### Contenu
+
+- **Exemple de rapport et carte OG d'InfraLens reconstruits pour refléter le vrai produit** — l'exemple sur la landing (`results-preview.tsx`) n'affichait qu'un badge de statut nu et 3 checks non repliables limités à 2 statuts sur 6, sans le bandeau hostname/URL/score ni le "At a glance" ("Worth fixing first" / "Working well") pourtant devenus le cœur visuel du vrai rapport depuis son redesign. Reconstruit en réutilisant directement les vrais composants `PrioritySummary` et `CheckResultCard` (au lieu d'une réimplémentation parallèle avec son propre badge de statut, qui avait déjà dérivé — vocabulaire "OK" et mapping icône/couleur incorrect trouvés en passant, corrigés en Phase 2). La carte OG partage désormais la même source de données (`src/infralens/lib/mock-report.ts`) au lieu d'une deuxième copie séparée qui pouvait diverger silencieusement.
+
 ## [0.8.3] — 2026-08-11
 
 ### Nettoyage

app/tools/infralens/opengraph-image.tsx

@@ -1,4 +1,9 @@
 import { CATEGORY_LABELS } from "@infralens-lib/checks/category-labels";
+import {
+  MOCK_CHECKS,
+  MOCK_HOSTNAME,
+  MOCK_SCORE,
+} from "@infralens-lib/mock-report";
 import { readFileSync } from "fs";
 import { ImageResponse } from "next/og";
 import { join } from "path";
@@ -8,20 +13,18 @@ export const alt = "InfraLens — Website inspection tool";
 export const size = { width: 1200, height: 630 };
 export const contentType = "image/png";
 
-// Same mock report as src/components/landing/results-preview.tsx (§6.3) —
-// keep both surfaces showing the exact same example so a visitor who saw
-// this card doesn't see a different-looking "example" on the site.
-const MOCK_CATEGORIES = [
-  { category: "http-security", score: 21, maxScore: 25 },
-  { category: "network-dns", score: 17, maxScore: 20 },
-  { category: "infrastructure", score: 20, maxScore: 20 },
-  { category: "website-structure", score: 12, maxScore: 15 },
-  { category: "metadata-stack", score: 8, maxScore: 10 },
-  { category: "performance", score: 6, maxScore: 10 },
-] as const;
-const MOCK_SCORE = 84;
-const MOCK_GRADE = "B";
-const MOCK_GRADE_COLOR = "#a3e635"; // lime-400, matches ScoreBadge's grade-color mapping
+// Sourced from src/infralens/lib/mock-report.ts — the same example shown
+// in results-preview.tsx on the landing, so a visitor who saw this card
+// never sees a different-looking "example" once they click through.
+// next/og (satori) can't render the real React components or read CSS
+// custom properties, so the two mini check rows below are picked by id
+// from MOCK_CHECKS and MOCK_GRADE_COLOR is a plain hex tied to grade "B"
+// (matches ScoreBadge's grade-color mapping) rather than computed.
+const MOCK_GRADE_COLOR = "#a3e635"; // lime-400 — update if MOCK_SCORE.grade ever changes
+const OG_CHECK_IDS = ["https-tls", "security-headers"] as const;
+const ogChecks = OG_CHECK_IDS.map(
+  (id) => MOCK_CHECKS.find((check) => check.id === id)!,
+);
 
 export default async function OgImage() {
   const fontBold = readFileSync(
@@ -164,14 +167,11 @@ export default async function OgImage() {
               real CheckResultCard, so this mirrors an actual check instead
               of a generic category tag. */}
           <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
-            {[
-              { label: "HTTPS & TLS", status: "pass" as const },
-              { label: "HTTP Security Headers", status: "warning" as const },
-            ].map((check) => {
+            {ogChecks.map((check) => {
               const color = check.status === "pass" ? "#10b981" : "#f59e0b";
               return (
                 <div
-                  key={check.label}
+                  key={check.id}
                   style={{ display: "flex", alignItems: "center", gap: 10 }}
                 >
                   <span
@@ -257,7 +257,7 @@ export default async function OgImage() {
           <span
             style={{ color: "#52525b", fontSize: 13, fontWeight: 600, flex: 1 }}
           >
-            example.com
+            {MOCK_HOSTNAME}
           </span>
           {/* Score badge — mirrors ScoreBadge's grade-color mapping */}
           <div
@@ -278,12 +278,12 @@ export default async function OgImage() {
                 color: MOCK_GRADE_COLOR,
               }}
             >
-              {MOCK_GRADE}
+              {MOCK_SCORE.grade}
             </span>
             <span
               style={{ fontSize: 12, color: MOCK_GRADE_COLOR, opacity: 0.75 }}
             >
-              {MOCK_SCORE} / 100
+              {MOCK_SCORE.score} / 100
             </span>
           </div>
         </div>
@@ -298,7 +298,7 @@ export default async function OgImage() {
             marginTop: 6,
           }}
         >
-          {MOCK_CATEGORIES.map((c) => (
+          {MOCK_SCORE.categories.map((c) => (
             <div
               key={c.category}
               style={{

package.json

@@ -1,6 +1,6 @@
 {
   "name": "randy-code",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "private": true,
   "packageManager": "pnpm@10.7.0",
   "scripts": {

src/infralens/components/landing/results-preview.tsx

@@ -1,89 +1,39 @@
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { CheckResultCard } from "@infralens-components/results/check-result-card";
+import { PrioritySummary } from "@infralens-components/results/priority-summary";
 import { ScoreBadge } from "@infralens-components/results/score-badge";
-import { CATEGORY_LABELS } from "@infralens-lib/checks/category-labels";
-import { GlobalScore } from "@infralens-lib/checks/types";
-import { cn } from "@infralens-lib/utils";
-import { CircleCheckBig, TriangleAlert } from "lucide-react";
+import {
+  MOCK_CHECKS,
+  MOCK_HOSTNAME,
+  MOCK_SCORE,
+  MOCK_URL,
+} from "@infralens-lib/mock-report";
 
-// Static, hand-picked numbers — not derived from a real analysis. Master
-// plan §6.3: "un exemple statique crédible", clearly labeled as a
-// demonstration so it's never confused with a real report. Check cards
-// below reuse the exact same status-badge styling as the real
-// CheckResultCard (src/components/results/check-result-card.tsx) so this
-// preview isn't just thematically similar to a real report but pixel
-// consistent with one.
-const MOCK_SCORE: GlobalScore = {
-  score: 84,
-  grade: "B",
-  categories: [
-    { category: "http-security", score: 21, maxScore: 25 },
-    { category: "network-dns", score: 17, maxScore: 20 },
-    { category: "infrastructure", score: 20, maxScore: 20 },
-    { category: "website-structure", score: 12, maxScore: 15 },
-    { category: "metadata-stack", score: 8, maxScore: 10 },
-    { category: "performance", score: 6, maxScore: 10 },
-  ],
-  scoredCount: 16,
-  excludedCount: 2,
-  strongestCategory: "infrastructure",
-  topPriorityCategory: "performance",
-};
-
-const STATUS_STYLE = {
-  pass: {
-    icon: CircleCheckBig,
-    label: "Pass",
-    className: "text-emerald-500 border-emerald-500/20 bg-emerald-500/10",
-  },
-  warning: {
-    icon: TriangleAlert,
-    label: "Warning",
-    className: "text-amber-500 border-amber-500/20 bg-amber-500/10",
-  },
-} as const;
-
-const MOCK_CHECKS = [
-  {
-    id: "https",
-    label: "HTTPS & TLS",
-    status: "pass",
-    summary:
-      "HTTPS is properly configured with a valid, non-expiring TLS certificate.",
-    points: 6,
-  },
-  {
-    id: "dns-security",
-    label: "DNS Security",
-    status: "pass",
-    summary: "SPF and DMARC records are both present.",
-    points: 7,
-  },
-  {
-    id: "headers",
-    label: "HTTP Security Headers",
-    status: "warning",
-    summary:
-      "Content-Security-Policy is present but still allows unsafe-inline scripts.",
-    points: 4,
-  },
-] as const;
+// Which of the shared MOCK_CHECKS to show as example cards below the
+// summary — a mix of pass/warning/fail, same as PrioritySummary reads from
+// the same array above it.
+const EXAMPLE_CHECK_IDS = ["https-tls", "security-headers", "robots-txt"];
 
 export function ResultsPreview() {
+  const exampleChecks = MOCK_CHECKS.filter((check) =>
+    EXAMPLE_CHECK_IDS.includes(check.id),
+  );
+
   return (
     <section className="py-8 md:py-12 lg:py-16 px-6 sm:px-8 md:px-12">
       <div className="max-w-4xl mx-auto space-y-6 md:space-y-8">
         <div className="text-center space-y-2">
           <h2 className="text-2xl sm:text-3xl font-bold tracking-tight">
             See what a report looks like
           </h2>
-          <p className="text-zinc-400 text-sm sm:text-base">
+          <p className="text-muted-foreground text-sm sm:text-base">
             A shortened example — no need to run a real analysis to see the
             shape of it.
           </p>
         </div>
 
-        <Card className="border-2 border-dashed border-zinc-700 bg-zinc-900/50">
+        <Card className="border-2 border-dashed border-border bg-card/50">
           <CardHeader>
             <Badge
               variant="outline"
@@ -95,57 +45,25 @@ export function ResultsPreview() {
           <CardContent className="space-y-6">
             <div className="flex flex-col sm:flex-row items-center gap-6">
               <ScoreBadge score={MOCK_SCORE} />
-              <div className="flex-1 w-full space-y-2">
-                <p className="text-sm text-zinc-400">example.com</p>
-                <div className="grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-1.5">
-                  {MOCK_SCORE.categories.map((c) => (
-                    <div
-                      key={c.category}
-                      className="flex justify-between text-xs text-zinc-400"
-                    >
-                      <span>{CATEGORY_LABELS[c.category]}</span>
-                      <span>
-                        {c.score}/{c.maxScore}
-                      </span>
-                    </div>
-                  ))}
-                </div>
+              <div className="flex-1 w-full min-w-0 space-y-1 text-center sm:text-left">
+                <p className="font-semibold truncate">{MOCK_HOSTNAME}</p>
+                <p className="text-sm text-muted-foreground truncate">
+                  {MOCK_URL}
+                </p>
               </div>
             </div>
 
-            <div className="space-y-2">
-              <p className="text-xs font-semibold uppercase tracking-wide text-zinc-400">
+            <PrioritySummary checks={MOCK_CHECKS} />
+
+            <div className="space-y-3">
+              <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                 A few checks, same as the real report
               </p>
-              {MOCK_CHECKS.map((check) => {
-                const style = STATUS_STYLE[check.status];
-                const Icon = style.icon;
-                return (
-                  <div
-                    key={check.id}
-                    className="rounded-lg border border-zinc-800 bg-zinc-900/70 p-3 space-y-1"
-                  >
-                    <div className="flex items-center justify-between gap-2">
-                      <span className="text-sm font-semibold text-zinc-100">
-                        {check.label}
-                      </span>
-                      <div className="flex items-center gap-2 shrink-0">
-                        <span className="text-xs text-zinc-400 font-mono">
-                          +{check.points} pts
-                        </span>
-                        <Badge
-                          variant="outline"
-                          className={cn("border", style.className)}
-                        >
-                          <Icon className="size-3 mr-1.5" aria-hidden="true" />
-                          {style.label}
-                        </Badge>
-                      </div>
-                    </div>
-                    <p className="text-sm text-zinc-400">{check.summary}</p>
-                  </div>
-                );
-              })}
+              <div className="space-y-3">
+                {exampleChecks.map((check) => (
+                  <CheckResultCard key={check.id} result={check} />
+                ))}
+              </div>
             </div>
           </CardContent>
         </Card>

src/infralens/lib/mock-report.ts

@@ -0,0 +1,84 @@
+import { CheckResult, GlobalScore } from "./checks/types";
+
+// Static, hand-picked numbers — not derived from a real analysis. Shared by
+// the landing "example report" preview (results-preview.tsx) and the OG
+// card image (opengraph-image.tsx) so both surfaces always show the exact
+// same example instead of two separately hand-rolled copies that can (and
+// did) drift apart from each other and from the real report's anatomy.
+export const MOCK_HOSTNAME = "example.com";
+export const MOCK_URL = "https://example.com/";
+
+export const MOCK_SCORE: GlobalScore = {
+  score: 84,
+  grade: "B",
+  categories: [
+    { category: "http-security", score: 21, maxScore: 25 },
+    { category: "network-dns", score: 17, maxScore: 20 },
+    { category: "infrastructure", score: 20, maxScore: 20 },
+    { category: "website-structure", score: 12, maxScore: 15 },
+    { category: "metadata-stack", score: 8, maxScore: 10 },
+    { category: "performance", score: 6, maxScore: 10 },
+  ],
+  scoredCount: 16,
+  excludedCount: 2,
+  strongestCategory: "infrastructure",
+  topPriorityCategory: "performance",
+};
+
+// Covers pass/warning/fail/info on purpose — real CheckResultCard and
+// PrioritySummary instances render straight off this array, so it needs to
+// exercise the same status range a real report would.
+export const MOCK_CHECKS: CheckResult[] = [
+  {
+    id: "https-tls",
+    label: "HTTPS & TLS",
+    category: "http-security",
+    status: "pass",
+    summary:
+      "HTTPS is properly configured with a valid, non-expiring TLS certificate.",
+    durationMs: 180,
+    scored: true,
+    scoreContribution: 6,
+  },
+  {
+    id: "dns-security",
+    label: "DNS Security",
+    category: "network-dns",
+    status: "pass",
+    summary: "SPF and DMARC records are both present.",
+    durationMs: 95,
+    scored: true,
+    scoreContribution: 7,
+  },
+  {
+    id: "security-headers",
+    label: "HTTP Security Headers",
+    category: "http-security",
+    status: "warning",
+    summary:
+      "Content-Security-Policy is present but still allows unsafe-inline scripts.",
+    durationMs: 140,
+    scored: true,
+    scoreContribution: 4,
+  },
+  {
+    id: "robots-txt",
+    label: "robots.txt",
+    category: "website-structure",
+    status: "fail",
+    summary: "robots.txt not found.",
+    durationMs: 110,
+    scored: true,
+    scoreContribution: 0,
+  },
+  {
+    id: "waf-detection",
+    label: "Firewall / WAF Detection",
+    category: "infrastructure",
+    status: "info",
+    summary:
+      "Response headers suggest a CDN may be in front of this site (not a confirmed detection).",
+    durationMs: 60,
+    scored: false,
+  },
+];