failproofai 0.0.11-beta.2 → 0.0.11-beta.3

package/.next/standalone/app/audit/_components/score-section.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+/**
+ * Section 03 — SCORE CARD.
+ *
+ * Left column only: YOUR AUDIT SCORE (big number, tier badge, progress
+ * bar, 3 stat boxes, prescribed-policies chip strip).
+ *
+ * Share actions have moved to IdentitySection below the archetype sigil.
+ */
+import React, { useMemo } from "react";
+import type { AuditResult } from "@/src/audit/types";
+import { ARCHETYPES, type ArchetypeKey } from "@/src/audit/archetypes";
+import { type Grade } from "@/src/audit/scoring";
+
+const GRADE_THRESHOLDS: { g: Grade; t: number }[] = [
+  { g: "S", t: 90 }, { g: "A", t: 80 }, { g: "B", t: 71 },
+  { g: "C", t: 55 }, { g: "D", t: 40 },
+];
+
+function pointsToNextFor(score: number): { next: Grade; delta: number } {
+  for (const { g, t } of GRADE_THRESHOLDS) {
+    if (score < t) return { next: g, delta: t - score };
+  }
+  return { next: "S", delta: 0 };
+}
+
+interface Props {
+  result: AuditResult;
+  score: number;
+  grade: Grade;
+  archetypeKey: ArchetypeKey;
+  /** Display name shown in the card header. */
+  project: string;
+}
+
+export function ScoreSection({ result, score, grade, archetypeKey, project }: Props) {
+  const archetype = ARCHETYPES[archetypeKey];
+  // Cheap scan of 5 thresholds — plain computation. React Compiler memoizes
+  // the surrounding render anyway, and `useMemo` here tripped the
+  // preserve-manual-memoization rule.
+  const pointsToNext = pointsToNextFor(score);
+
+  /** Slipping-through builtin policies (the same heuristic ReturnSection uses
+   *  for its [install policies] CTA). Used as the "policies missing" stat. */
+  const missing = useMemo(
+    () => result.results.filter((r) => r.source === "builtin" && !r.enabledInConfig && r.hits > 0).length,
+    [result],
+  );
+
+  /** Rough "days to fix" — capped 1..14. One day per slipping policy, with a
+   *  baseline of 3d on any non-S grade. */
+  const daysToFix = useMemo(() => {
+    if (grade === "S" || missing === 0) return 0;
+    return Math.max(1, Math.min(14, missing + 1));
+  }, [grade, missing]);
+
+  /** % of 0–100 bar to fill — simply score/100. */
+  const progressPct = score;
+
+  /** Top-N slipping policies → chip strip on the left card. Capped at 6. */
+  const policyChips = useMemo(() => {
+    const slipping = result.results
+      .filter((r) => r.source === "builtin" && !r.enabledInConfig && r.hits > 0)
+      .sort((a, b) => b.hits - a.hits)
+      .slice(0, 6)
+      .map((r) => ({ name: shortPolicyLabel(r.name), missing: true as const }));
+    const enabled = result.results
+      .filter((r) => r.source === "builtin" && r.enabledInConfig)
+      .slice(0, Math.max(0, 6 - slipping.length))
+      .map((r) => ({ name: shortPolicyLabel(r.name), missing: false as const }));
+    return [...slipping, ...enabled];
+  }, [result]);
+
+  return (
+    <section className="section" data-screen-label="03 Score">
+      <div className="section-mast">
+        <div className="section-label">
+          <span className="glyph">━━</span> score
+          <span style={{ color: "var(--accent-green)", marginLeft: 10, letterSpacing: "0.04em", textTransform: "none", fontSize: 11 }}>· SEE HOW YOUR AGENT IS PERFORMING</span>
+        </div>
+      </div>
+      <h2 className="section-h">your audit score.</h2>
+
+      <div className="panel score-share-card">
+        <div className="score-card-header">
+          <span style={{ color: "var(--ink)" }}>{project}</span>
+          <span style={{ color: "var(--dim)" }}> · </span>
+          <span style={{ color: "var(--accent-pink)" }}>{archetype.name.toLowerCase()}</span>
+        </div>
+
+        <div className="ss-score-row">
+          <span className={"ss-score g-" + grade}>{score}</span>
+          <span className="ss-score-of">/100</span>
+        </div>
+
+        <div className="ss-tier-row">
+          <span className={"ss-tier-badge g-" + grade}>{grade} tier</span>
+          <span className="ss-arch">{archetype.name.toLowerCase()}</span>
+        </div>
+
+        <div className="ss-progress-label">
+          <span style={{ color: "var(--dim)" }}>score</span>
+          {pointsToNext.delta > 0 ? (
+            <span style={{ color: "var(--accent-pink)" }}>
+              +{pointsToNext.delta} pts to {pointsToNext.next} tier
+            </span>
+          ) : (
+            <span style={{ color: "var(--accent-green)" }}>top tier ✓</span>
+          )}
+        </div>
+        <div className="ss-progress-track">
+          {[40, 55, 71, 80, 90].map((t) => (
+            <div key={t} className="ss-progress-tick" style={{ left: `${t}%` }} />
+          ))}
+          <div
+            className="ss-progress-fill audit-bar-fill"
+            style={{ ["--bar-width" as string]: `${progressPct}%` }}
+          />
+        </div>
+        <div className="ss-grade-stops">
+          {(["D", "C", "B", "A", "S"] as Grade[]).map((g, i) => {
+            const pos = [40, 55, 71, 80, 90][i];
+            return (
+              <span
+                key={g}
+                className={"ss-grade-stop" + (grade === g ? " active" : "")}
+                style={{ left: `${pos}%` }}
+              >{g}</span>
+            );
+          })}
+        </div>
+
+        <div className="ss-stats">
+          <div className="ss-stat">
+            <div className="ss-stat-n" style={{ color: "var(--amber)" }}>{missing}</div>
+            <div className="ss-stat-l">policies<br />missing</div>
+          </div>
+          <div className="ss-stat">
+            <div className="ss-stat-n" style={{ color: "var(--accent-pink)" }}>
+              +{pointsToNext.delta}
+            </div>
+            <div className="ss-stat-l">pts to<br />{pointsToNext.next} tier</div>
+          </div>
+          <div className="ss-stat">
+            <div className="ss-stat-n" style={{ color: "var(--accent-green)" }}>
+              {daysToFix === 0 ? "—" : `~${daysToFix}d`}
+            </div>
+            <div className="ss-stat-l">est.<br />to fix</div>
+          </div>
+        </div>
+
+        {policyChips.length > 0 && (
+          <>
+            <div className="ss-policy-label">policy status</div>
+            <div className="ss-policy-chips">
+              {policyChips.map((p, i) => (
+                <span
+                  key={i}
+                  className={"ss-chip" + (p.missing ? " missing" : " enabled")}
+                >
+                  <span className="dot" aria-hidden="true" />
+                  {p.name}
+                </span>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+    </section>
+  );
+}
+
+/** Drop the "failproofai/" namespace prefix builtin policies carry so chips
+ *  stay compact (`block-sudo` reads better than `failproofai/block-sudo`). */
+function shortPolicyLabel(name: string): string {
+  const slash = name.indexOf("/");
+  return slash >= 0 ? name.slice(slash + 1) : name;
+}

package/.next/standalone/app/audit/_components/share-dock.tsx

@@ -0,0 +1,265 @@
+"use client";
+
+/**
+ * Floating share dock — always-visible bottom-right panel on the /audit
+ * dashboard. Three buttons (X, LinkedIn, download) that all share the
+ * `.share-btn` styling used by the inline buttons in `identity-section`,
+ * so the visual rhythm carries between surfaces.
+ *
+ * Capture flow:
+ *   1. Dock click → ref'd `.archetype-frame` is captured to a PNG blob
+ *      via html2canvas.
+ *   2. `copyOrDownloadCard` writes the blob to the clipboard if the
+ *      browser supports it, falling back to a download. The user gets a
+ *      toast telling them what to do next.
+ *   3. For shares, the X / LinkedIn intent window opens with the
+ *      templated text.
+ *
+ * UX:
+ *   - Collapses to a single 48px pink FAB via a header caret. Preference
+ *     persists across page navigations within a session.
+ *   - Slide-in animation on mount (respects prefers-reduced-motion).
+ *   - Hidden on viewports < 760px (mobile) — the inline buttons are
+ *     already visible there and a floating dock would cover content.
+ *   - Hidden until the archetype hero has actually mounted (frameRef
+ *     resolves to a node). On the empty / running states we render
+ *     nothing.
+ */
+import React, { useEffect, useState } from "react";
+import { type ArchetypeKey, pickArchetypeVariant } from "@/src/audit/archetypes";
+import { type Grade } from "@/src/audit/scoring";
+import { copyOrDownloadCard, downloadCard, shareCardNative, shareCardToastMessage } from "@/lib/share-card";
+import { toast } from "@/app/components/toast";
+import { usePostHog } from "@/contexts/PostHogContext";
+import { X_TEMPLATES, LI_TEMPLATES, pickTemplate, type ShareCtx } from "./share-templates";
+
+const SITE_URL = "https://failproof.ai";
+const X_INTENT = (text: string) =>
+  `https://x.com/intent/tweet?text=${encodeURIComponent(text)}`;
+const LI_INTENT = (text: string) =>
+  `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(SITE_URL)}&summary=${encodeURIComponent(text)}`;
+
+const COLLAPSED_KEY = "failproofai:audit:share-dock-collapsed";
+
+interface Props {
+  /** Ref to the `.archetype-frame` to capture. Same node `identity-section`
+   *  forwards into IdentitySection's `frameRef`. */
+  frameRef: React.RefObject<HTMLDivElement | null>;
+  archetypeKey: ArchetypeKey;
+  /** Seed for deterministic archetype-variant copy. Same as IdentitySection's
+   *  `seed` prop — usually the inferred project name. */
+  seed: string;
+  score: number;
+  grade: Grade;
+  missing: number;
+}
+
+export function ShareDock({ frameRef, archetypeKey, seed, score, grade, missing }: Props) {
+  const [collapsed, setCollapsed] = useState(false);
+  const [busy, setBusy] = useState<null | "x" | "linkedin" | "download">(null);
+  const { capture } = usePostHog();
+  const archetype = pickArchetypeVariant(archetypeKey, seed);
+  const archetypeDisplayName = archetype.name;
+
+  // Restore collapsed preference from sessionStorage on first mount.
+  useEffect(() => {
+    try {
+      if (typeof window !== "undefined" && window.sessionStorage.getItem(COLLAPSED_KEY) === "1") {
+        setCollapsed(true);
+      }
+    } catch { /* private mode, etc. — fall through to default */ }
+  }, []);
+
+  const toggle = (next: boolean) => {
+    setCollapsed(next);
+    try { window.sessionStorage.setItem(COLLAPSED_KEY, next ? "1" : "0"); } catch { /* ignore */ }
+    capture("audit_share_dock_toggled", { collapsed: next });
+  };
+
+  const captureCardBlob = async (): Promise<Blob | null> => {
+    const node = frameRef.current;
+    if (!node) return null;
+    node.classList.add("capturing");
+    try {
+      if (typeof document !== "undefined" && document.fonts?.ready) await document.fonts.ready;
+      await new Promise<void>((r) => requestAnimationFrame(() => r()));
+      const html2canvas = (await import("html2canvas")).default;
+      const canvas = await html2canvas(node, {
+        backgroundColor: "#0e0e11",
+        scale: 2,
+        logging: false,
+        useCORS: true,
+      });
+      return await new Promise<Blob | null>((resolve) => {
+        canvas.toBlob((blob) => resolve(blob), "image/png");
+      });
+    } finally {
+      node.classList.remove("capturing");
+    }
+  };
+
+  const filenameFor = (channel: "x" | "linkedin" | "download") =>
+    `failproofai-${channel}-${grade.toLowerCase()}-${score}.png`;
+
+  const handleShare = async (channel: "x" | "linkedin" | "download") => {
+    if (busy) return;
+    setBusy(channel);
+    capture("audit_card_share_clicked", {
+      channel: channel === "download" ? "download" : channel,
+      source: "dock",
+      score,
+      grade,
+      missing_policies: missing,
+    });
+    try {
+      const blob = await captureCardBlob().catch(() => null);
+      if (!blob) {
+        capture("audit_card_capture_completed", {
+          trigger: channel === "download" ? "download" : `share_${channel}`,
+          status: "error",
+          image_method: "failed",
+          source: "dock",
+        });
+        toast(shareCardToastMessage("failed"));
+        return;
+      }
+
+      // Dedicated "save audit-card" button: always download, never clipboard.
+      if (channel === "download") {
+        const ok = downloadCard(blob, filenameFor(channel));
+        const method = ok ? "download" : "failed";
+        capture("audit_card_capture_completed", {
+          trigger: "download",
+          status: ok ? "success" : "error",
+          image_method: method,
+          source: "dock",
+        });
+        toast(shareCardToastMessage(method));
+        return;
+      }
+
+      // X / LinkedIn share: try the native share sheet with file first
+      // (one-tap "image attached" on iOS / Android / recent Safari / recent
+      // Chrome). Fall back to clipboard + opening the intent URL when the
+      // native share sheet isn't available or the user dismissed it.
+      const shareCtx: ShareCtx = {
+        score,
+        arch: archetypeDisplayName.toLowerCase(),
+        grade,
+        missing,
+      };
+      // One of five tone-matched templates (quirky for X, professional for
+      // LinkedIn), chosen deterministically from the behaviour-fingerprint
+      // seed so the copy fits this run and stays stable on re-share.
+      const shareText = channel === "x"
+        ? pickTemplate(X_TEMPLATES, seed, shareCtx)
+        : pickTemplate(LI_TEMPLATES, seed, shareCtx);
+      const native = await shareCardNative(blob, filenameFor(channel), shareText);
+      if (native) {
+        capture("audit_card_capture_completed", {
+          trigger: `share_${channel}`,
+          status: "success",
+          image_method: "native",
+          source: "dock",
+        });
+        toast(shareCardToastMessage("native"));
+        return;
+      }
+
+      const fallbackMethod = await copyOrDownloadCard(blob, filenameFor(channel));
+      capture("audit_card_capture_completed", {
+        trigger: `share_${channel}`,
+        status: "success",
+        image_method: fallbackMethod,
+        source: "dock",
+      });
+      toast(shareCardToastMessage(fallbackMethod));
+      const intent = channel === "x"
+        ? X_INTENT(shareText)
+        : LI_INTENT(shareText);
+      globalThis.open(intent, "_blank", "noopener,noreferrer");
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  // Render the collapsed FAB. Single pink-tile pulse that re-expands the dock.
+  if (collapsed) {
+    return (
+      <button
+        type="button"
+        className="share-dock-fab"
+        aria-label="Expand share dock"
+        onClick={() => toggle(false)}
+      >
+        <span aria-hidden="true">𝕏</span>
+      </button>
+    );
+  }
+
+  return (
+    <aside
+      className="share-dock"
+      aria-label="Share your audit"
+      data-busy={busy ? "true" : undefined}
+    >
+      <header className="share-dock-head">
+        <span className="share-dock-eyebrow"><span aria-hidden="true">━━</span>share your audit</span>
+        <button
+          type="button"
+          className="share-dock-caret"
+          onClick={() => toggle(true)}
+          aria-label="Collapse share dock"
+        >
+          <span aria-hidden="true">▾</span>
+        </button>
+      </header>
+      <div className="share-dock-stack">
+        <button
+          type="button"
+          className="share-btn share-btn--x"
+          onClick={() => handleShare("x")}
+          disabled={busy !== null}
+        >
+          <span className="share-btn-mark share-btn-mark--x" aria-hidden="true">𝕏</span>
+          <span className="share-btn-body">
+            <span className="share-btn-eyebrow">share on</span>
+            <span className="share-btn-label">{busy === "x" ? "rendering…" : "X · Twitter"}</span>
+          </span>
+          <span className="share-btn-arrow" aria-hidden="true">→</span>
+        </button>
+        <button
+          type="button"
+          className="share-btn share-btn--li"
+          onClick={() => handleShare("linkedin")}
+          disabled={busy !== null}
+        >
+          <span className="share-btn-mark share-btn-mark--li" aria-hidden="true">in</span>
+          <span className="share-btn-body">
+            <span className="share-btn-eyebrow">share on</span>
+            <span className="share-btn-label">{busy === "linkedin" ? "rendering…" : "LinkedIn"}</span>
+          </span>
+          <span className="share-btn-arrow" aria-hidden="true">→</span>
+        </button>
+        <button
+          type="button"
+          className="share-btn share-btn--dl"
+          onClick={() => handleShare("download")}
+          disabled={busy !== null}
+        >
+          <span className="share-btn-mark share-btn-mark--dl" aria-hidden="true">↓</span>
+          <span className="share-btn-body">
+            <span className="share-btn-eyebrow">save</span>
+            <span className="share-btn-label">{busy === "download" ? "rendering…" : "audit-card"}</span>
+          </span>
+          <span className="share-btn-arrow" aria-hidden="true">↓</span>
+        </button>
+      </div>
+      <footer className="share-dock-foot">
+        <span aria-hidden="true">▮▮</span>image auto-attaches via paste
+      </footer>
+    </aside>
+  );
+}
+
+ShareDock.displayName = "ShareDock";

package/.next/standalone/app/audit/_components/share-templates.ts

@@ -0,0 +1,67 @@
+/**
+ * Social-share copy for the audit identity card.
+ *
+ * Five quirky, emoji-forward templates for X and five measured, professional
+ * templates for LinkedIn. `pickTemplate` selects one deterministically from a
+ * seed (the behaviour fingerprint), so a given audit run always renders the
+ * same post while different runs / personas vary. Pure — no React, no DOM — so
+ * it's unit-testable and shared by the client `IdentitySection` component.
+ */
+import type { Grade } from "@/src/audit/scoring";
+
+const SITE_URL = "https://failproof.ai";
+
+export interface ShareCtx {
+  score: number;
+  /** Lowercased archetype name, e.g. "the cowboy". */
+  arch: string;
+  grade: Grade;
+  /** Count of unenabled prescribed policies. */
+  missing: number;
+}
+
+const pol = (n: number) => (n === 1 ? "policy" : "policies");
+
+/** Quirky, emoji-forward — for X. */
+export const X_TEMPLATES: ((c: ShareCtx) => string)[] = [
+  ({ score, arch, grade, missing }) =>
+    `my AI coding agent just got profiled and it's "${arch}" 🤠\n\n${score}/100 · ${grade} tier${missing > 0 ? ` · ${missing} ${pol(missing)} between me and glory` : ` · every guardrail live`}\n\nwhat's yours? → ${SITE_URL}`,
+  ({ score, arch, grade }) =>
+    `turns out my coding agent has a whole personality and it's ${arch} 💀\n\nscored ${score}/100 (${grade} tier). the audit does not miss.\n\nrun yours in 30s → ${SITE_URL}`,
+  ({ score, arch, grade }) =>
+    `${score}/100. ${grade} tier. archetype: ${arch} 👀\n\nfailproofai reverse-engineered my agent's entire vibe from its own session logs.\n\n${SITE_URL}`,
+  ({ score, arch, grade, missing }) =>
+    `plot twist: my AI agent is ${arch} 🎭\n\n${score}/100 · ${grade} tier${missing > 0 ? ` · ${missing} ${pol(missing)} away from behaving` : ` · spotless, somehow`}\n\nfailproof.ai`,
+  ({ score, arch, grade }) =>
+    `i let failproofai audit my coding agent and it called me ${arch} ${grade === "S" || grade === "A" ? "😎" : "😬"}\n\n${score}/100, ${grade} tier. brutally accurate. no notes.\n\n${SITE_URL}`,
+];
+
+/** Measured, professional — for LinkedIn. */
+export const LI_TEMPLATES: ((c: ShareCtx) => string)[] = [
+  ({ score, arch, grade, missing }) =>
+    `I ran a failproofai audit on our AI coding agents.\n\nResult: ${score}/100 — ${grade} tier, behavioural archetype "${arch}". ${missing > 0 ? `${missing} prescribed ${pol(missing)} would close the remaining gaps.` : `Every prescribed policy is already live.`}\n\nUnderstanding how agents actually behave across real sessions is the first step to securing them. Free and open-source: ${SITE_URL}`,
+  ({ score, arch, grade, missing }) =>
+    `Security posture check on our coding-agent stack, via failproofai.\n\nScore: ${score}/100 (${grade} tier). Behavioural profile: "${arch}". ${missing > 0 ? `${missing} ${pol(missing)} flagged as real, addressable attack surface.` : `No open policy gaps.`}\n\nThirty seconds to run your own assessment: ${SITE_URL}`,
+  ({ score, arch, grade }) =>
+    `Most teams can't answer a simple question: how do our AI agents actually behave when no one is watching?\n\nfailproofai audited ours and profiled it as "${arch}" — ${score}/100, ${grade} tier. Concrete, evidence-backed, and mapped to the exact policies that close each gap.\n\n${SITE_URL}`,
+  ({ score, arch, grade, missing }) =>
+    `Agent security isn't a vibe — it's measurable.\n\nWe scored ${score}/100 (${grade} tier) on the failproofai audit, archetype "${arch}". ${missing > 0 ? `${missing} prescribed ${pol(missing)} remain to harden the stack.` : `Full coverage on every prescribed policy.`}\n\nWorth 30 seconds for any team shipping with AI agents: ${SITE_URL}`,
+  ({ score, arch, grade }) =>
+    `Ran our coding agents through a failproofai behavioural audit.\n\n${score}/100, ${grade} tier — archetype "${arch}". The report maps every risky pattern to the policy that prevents it, so remediation becomes a checklist rather than a guess.\n\nOpen-source, free to run: ${SITE_URL}`,
+];
+
+/** djb2 hash — stable per seed so the template choice is deterministic. */
+function hashStr(s: string): number {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) | 0;
+  return h >>> 0;
+}
+
+/** Deterministically pick + render one template for the given seed. */
+export function pickTemplate(
+  templates: ((c: ShareCtx) => string)[],
+  seed: string,
+  ctx: ShareCtx,
+): string {
+  return templates[hashStr(seed) % templates.length](ctx);
+}

package/.next/standalone/app/audit/_components/show-off-cta.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+/**
+ * Section 01b — SHOW OFF CTA. Big bordered strip directly after the
+ * identity card. Sigil on the left, "show off your agent." headline +
+ * sub on the middle, "→ MAKE POSTER" action button on the right.
+ *
+ * Clicking the action captures the IdentitySection's archetype-frame
+ * DOM via html2canvas and triggers a PNG download. The capture target
+ * is passed in via a ref (avoids querying the DOM by class).
+ */
+import React, { useState } from "react";
+import { ARCHETYPES, type ArchetypeKey } from "@/src/audit/archetypes";
+import { usePostHog } from "@/contexts/PostHogContext";
+import { Sigil } from "./sigil";
+
+interface Props {
+  archetypeKey: ArchetypeKey;
+  /** Ref to the IdentitySection's `.archetype-frame` div — captured to PNG. */
+  identityFrameRef: React.RefObject<HTMLDivElement | null>;
+}
+
+function buildFilename(archetypeKey: ArchetypeKey): string {
+  const date = new Date().toISOString().slice(0, 10);
+  return `failproofai-${archetypeKey}-${date}.png`;
+}
+
+export function ShowOffCTA({ archetypeKey, identityFrameRef }: Props) {
+  const archetype = ARCHETYPES[archetypeKey];
+  const { capture } = usePostHog();
+  const [state, setState] = useState<"idle" | "busy" | "done" | "error">("idle");
+
+  const handleMakePoster = async () => {
+    const node = identityFrameRef.current;
+    if (!node || state === "busy") return;
+    capture("audit_poster_clicked", {
+      archetype: archetypeKey,
+    });
+    setState("busy");
+    /** Add a capture-only class that locks font sizes, the grid layout,
+     *  and disables clamp()/text-shadow rules html2canvas renders
+     *  unreliably. CSS lives in audit-styles.css under `.capturing`. */
+    node.classList.add("capturing");
+    try {
+      // Wait for the display font (Bitcount Prop Single) to load — otherwise
+      // html2canvas captures a fallback that has different metrics and the
+      // archetype name overlaps the tagline / sigil column.
+      if (typeof document !== "undefined" && document.fonts?.ready) {
+        await document.fonts.ready;
+      }
+      // Force a single rAF so the .capturing class is applied to layout
+      // before html2canvas reads computed styles.
+      await new Promise<void>((r) => requestAnimationFrame(() => r()));
+
+      const html2canvas = (await import("html2canvas")).default;
+      // Bleed: include the frame's 8px box-shadow in the capture rect.
+      const bleed = 12;
+      const canvas = await html2canvas(node, {
+        backgroundColor: "#131316",
+        scale: 2,
+        logging: false,
+        useCORS: true,
+        x: -bleed,
+        y: -bleed,
+        width: node.offsetWidth + bleed * 2,
+        height: node.offsetHeight + bleed * 2,
+        windowWidth: Math.max(1100, node.offsetWidth + bleed * 2),
+      });
+      await new Promise<void>((resolve) => {
+        canvas.toBlob((blob) => {
+          if (!blob) { resolve(); return; }
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement("a");
+          a.href = url;
+          a.download = buildFilename(archetypeKey);
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          URL.revokeObjectURL(url);
+          resolve();
+        }, "image/png");
+      });
+      capture("audit_poster_completed", {
+        status: "success",
+        archetype: archetypeKey,
+      });
+      setState("done");
+      setTimeout(() => setState("idle"), 2000);
+    } catch (err) {
+      console.error("poster capture failed:", err);
+      capture("audit_poster_completed", {
+        status: "error",
+        archetype: archetypeKey,
+      });
+      setState("error");
+      setTimeout(() => setState("idle"), 2000);
+    } finally {
+      node.classList.remove("capturing");
+    }
+  };
+
+  const actionLabel =
+    state === "busy" ? "rendering…"
+      : state === "done" ? "downloaded ✓"
+        : state === "error" ? "render failed"
+          : "make poster";
+
+  return (
+    <section className="showoff" data-screen-label="01b Show off">
+      <button
+        type="button"
+        className="showoff-cta"
+        onClick={handleMakePoster}
+        disabled={state === "busy"}
+        style={{ cursor: state === "busy" ? "wait" : "pointer", width: "100%", textAlign: "left" }}
+      >
+        <span className="showoff-glyph" aria-hidden="true">
+          <Sigil archetypeKey={archetypeKey} hideLabel />
+        </span>
+        <span className="showoff-copy">
+          <span className="showoff-label">━━ shareable poster</span>
+          <span className="showoff-headline">show off your agent.</span>
+          <span className="showoff-sub">
+            generate a one-page poster of your {archetype.name}.
+            score, percentile, sigil. ready to post.
+          </span>
+        </span>
+        <span className="showoff-action">
+          <span className="showoff-arrow">→</span>
+          <span className="showoff-action-label">{actionLabel}</span>
+        </span>
+      </button>
+    </section>
+  );
+}