failproofai 0.0.11-beta.7 → 0.0.11-beta.9

package/.next/standalone/app/audit/_components/audit-dashboard.tsx

@@ -3,30 +3,31 @@
 /**
  * Top-level client wrapper for /audit.
  *
- * Composes the personality report: classify the agent into one of 8
- * archetypes, derive a score + tier, render the IdentitySection +
- * ShowOff + Strengths + Score (with leaderboard) + Findings + Policies
- * + Return-loop CTA.
+ * Composes the calm personality report: classify the agent into one of
+ * 8 archetypes, derive a score, and render the 5-section flow:
  *
- * Empty / running states fall back to the existing EmptyState and
- * RunProgress components.
+ *   01 AuditPoster — single-screen shareable poster
+ *   02 StrengthsSection — what it's great at
+ *   03 QuirksSection — what slipped through
+ *   04 HowToImproveSection — install / configure
+ *   05 ComeBackBetterSection — reminder + perks
+ *
+ * Empty / running states fall back to EmptyState and RunProgress.
  */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getAuditResultAction } from "@/app/actions/get-audit-result";
 import type { AuditResult, RunAuditOptions } from "@/src/audit/types";
 import { classifyAgent } from "@/src/audit/archetypes";
-import { COHORT_SIZE, deriveScore, gradeFor, projectedScore, type Grade } from "@/src/audit/scoring";
+import { deriveScore, gradeFor, projectedScore } from "@/src/audit/scoring";
 import { deriveStrengths } from "@/src/audit/strengths";
 import { deriveFindings } from "@/src/audit/findings";
 import { usePostHog } from "@/contexts/PostHogContext";
 
-import { IdentitySection } from "./identity-section";
-import { ShareDock } from "./share-dock";
+import { AuditPoster } from "./audit-poster";
 import { StrengthsSection } from "./strengths-section";
-import { ScoreSection } from "./score-section";
-import { FindingsSection } from "./findings-section";
-import { PoliciesSection } from "./policies-section";
-import { ReturnSection } from "./return-section";
+import { QuirksSection } from "./quirks-section";
+import { HowToImproveSection } from "./how-to-improve-section";
+import { ComeBackBetterSection } from "./come-back-better-section";
 import { ReportFooter } from "./report-footer";
 import { EmptyState } from "./empty-state";
 import { RunProgress } from "./run-progress";
@@ -58,11 +59,6 @@ interface Props {
   totalCatalogSize: number;
 }
 
-function inferWindow(params: RunAuditOptions | undefined): string {
-  if (!params?.since) return "all time";
-  return params.since;
-}
-
 function inferProjectName(result: AuditResult, override?: string): string {
   if (override && override.trim()) return override;
   // Pick the cwd that appears in the most examples — proxy for "your
@@ -106,7 +102,7 @@ export function AuditDashboard({ initial, projectFromUrl, totalCatalogSize }: Pr
    *  soft-refreshes the dashboard cache on success — no full page reload. */
   const startRerun = useCallback(async (source: RerunSource) => {
     if (running) return;
-    capture("audit_rerun_clicked", { source, since: "30d" });
+    capture("audit_rerun_clicked", { source, since: "all" });
     setRunning(true);
     setRerunStatus({ kind: "running", startedAt: Date.now() });
     try {
@@ -116,7 +112,7 @@ export function AuditDashboard({ initial, projectFromUrl, totalCatalogSize }: Pr
       // success; the prior cache survives a failed run so the report doesn't vanish.
       // The empty-state first-run (empty-state.tsx) deliberately stays on the
       // fast cached path — it's a first scan, not a re-audit.
-      await triggerRun({ cli: [], since: "30d", noCache: true });
+      await triggerRun({ cli: [], since: "all", noCache: true });
       await refreshFromCache();
       setRerunStatus({ kind: "idle" });
     } catch (err) {
@@ -124,7 +120,7 @@ export function AuditDashboard({ initial, projectFromUrl, totalCatalogSize }: Pr
       capture("audit_rerun_failed", {
         kind,
         source,
-        since: "30d",
+        since: "all",
         cli_filter: "all",
       });
       setRerunStatus({ kind: "failed", reason: kind, failedAt: Date.now() });
@@ -249,9 +245,7 @@ export function AuditDashboard({ initial, projectFromUrl, totalCatalogSize }: Pr
     <MainReport
       result={result}
       cachedAt={cachedAt}
-      params={params}
       projectFromUrl={projectFromUrl}
-      totalCatalogSize={totalCatalogSize}
       isRunning={running}
       rerunStatus={rerunStatus}
       onRerun={(source) => startRerun(source)}
@@ -263,9 +257,7 @@ export function AuditDashboard({ initial, projectFromUrl, totalCatalogSize }: Pr
 interface MainReportProps {
   result: AuditResult;
   cachedAt: string | null;
-  params: RunAuditOptions | undefined;
   projectFromUrl?: string;
-  totalCatalogSize: number;
   isRunning: boolean;
   rerunStatus: RerunStatus;
   onRerun: (source: RerunSource) => void;
@@ -275,9 +267,7 @@ interface MainReportProps {
 function MainReport({
   result,
   cachedAt,
-  params,
   projectFromUrl,
-  totalCatalogSize,
   isRunning,
   rerunStatus,
   onRerun,
@@ -294,14 +284,10 @@ function MainReport({
   const projectedGrade = gradeFor(projected);
   const strengths = useMemo(() => deriveStrengths(result), [result]);
   const findings = useMemo(() => deriveFindings(result), [result]);
-  // Renamed from `window` to avoid shadowing the browser global — any
-  // future `window.*` reference added inside MainReport would silently
-  // bind to a string and crash at runtime.
-  const scopeWindow = inferWindow(params);
 
-  // One pass over result.results derives both counts; score-section and
-  // return-section also need `missing` but they take it from us via props
-  // / `result` shape, so deduplicate the scan here.
+  // One pass over result.results: detectors triggered + missing prescribed
+  // policies. Both feed PostHog instrumentation; `missing` also feeds the
+  // poster's share-text template.
   const { detectorsTriggered, missing } = useMemo(() => {
     let detectorsTriggered = 0;
     let missing = 0;
@@ -340,54 +326,37 @@ function MainReport({
     detectorsTriggered,
   ]);
 
-  /** Identity hero ref — captured to PNG by the share buttons. */
-  const identityFrameRef = useRef<HTMLDivElement>(null);
+  /** Poster ref — captured to PNG by the poster's share buttons. */
+  const posterRef = useRef<HTMLDivElement>(null);
 
   return (
     <div className="app">
       <AuditProgressStrip status={rerunStatus} onDismiss={onDismissRerun} />
-      <div className="scanline-overlay" />
       <div className="app-shell">
         <div className="report">
-          <IdentitySection
-            ref={identityFrameRef}
+          <AuditPoster
+            ref={posterRef}
             archetypeKey={classification.archetype}
-            secondaryKey={classification.secondary}
-            toolCalls={result.eventsScanned ?? 0}
-            sessions={result.transcripts.scanned}
-            window={scopeWindow}
             seed={classification.variantSeed}
-          />
-          <StrengthsSection
-            strengths={strengths}
-            totalDetectorsTriggered={detectorsTriggered}
-            totalDetectorsAvailable={totalCatalogSize}
-          />
-          <ScoreSection
-            result={result}
             score={score}
             grade={grade}
-            archetypeKey={classification.archetype}
-            project={project}
+            missing={missing}
+            auditedAt={cachedAt ?? new Date().toISOString()}
           />
-          <ReturnSection
+          <StrengthsSection strengths={strengths} />
+          <QuirksSection findings={findings} />
+          <HowToImproveSection
             result={result}
+            projected={projected}
+            projectedGrade={projectedGrade}
+          />
+          <ComeBackBetterSection
             isRunning={isRunning}
             onRerun={() => onRerun("return_section")}
           />
-          <FindingsSection findings={findings} />
-          <PoliciesSection result={result} projected={projected} projectedGrade={projectedGrade} />
         </div>
         <ReportFooter cachedAt={cachedAt} />
       </div>
-      <ShareDock
-        frameRef={identityFrameRef}
-        archetypeKey={classification.archetype}
-        seed={classification.variantSeed}
-        score={score}
-        grade={grade}
-        missing={missing}
-      />
     </div>
   );
 }
@@ -408,7 +377,6 @@ function ShellEmpty({ running, mode = "no-cache", rerunStatus, onDismissRerun, o
   return (
     <div className="app">
       <AuditProgressStrip status={rerunStatus} onDismiss={onDismissRerun} />
-      <div className="scanline-overlay" />
       <div className="app-shell">
         <div className="report">
           {running ? (

package/.next/standalone/app/audit/_components/audit-poster.tsx

@@ -0,0 +1,322 @@
+"use client";
+
+/**
+ * Section 01 — AUDIT POSTER. The single-screen shareable above-the-fold
+ * artifact. Replaces the old IdentitySection + ScoreSection + ShareDock
+ * triumvirate.
+ *
+ * Layout (inside the PNG capture region):
+ *
+ *   ┌─────────────────────────────────────────────────────────────┐
+ *   │  ▣ failproof_ai · audit       № 01 of 08 · audited <date>   │
+ *   ├─────────────────────────────────────────────────────────────┤
+ *   │                                                             │
+ *   │   <score>/100    the optimist            ▓░▓░▓░▓░           │
+ *   │   <rank>         pace · conviction · forgetful  ░▓░▓░▓░▓    │
+ *   │                  // only N% of agents are this archetype   │
+ *   │                                                             │
+ *   ├─────────────────────────────────────────────────────────────┤
+ *   │                                  audit yours → failproof.ai │
+ *   └─────────────────────────────────────────────────────────────┘
+ *
+ * Outside the capture region: three share buttons + scroll hint.
+ */
+import React, { forwardRef, useMemo, useState } from "react";
+import { pickArchetypeVariant, type ArchetypeKey } from "@/src/audit/archetypes";
+import { type Grade } from "@/src/audit/scoring";
+import { getArchetypeRarityPct, getScoreRank } from "@/src/audit/social-proof";
+import { copyOrDownloadCard, downloadCard, shareCardNative, shareCardToastMessage } from "@/lib/share-card";
+import { toast } from "@/app/components/toast";
+import { usePostHog } from "@/contexts/PostHogContext";
+import { Sigil } from "./sigil";
+import { X_TEMPLATES, LI_TEMPLATES, pickTemplate, type ShareCtx } from "./share-templates";
+
+const SITE_URL = "https://befailproof.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)}`;
+
+interface Props {
+  archetypeKey: ArchetypeKey;
+  /** Stable seed for variant selection (project name is the natural fit). */
+  seed: string;
+  score: number;
+  grade: Grade;
+  /** Count of unenabled prescribed policies — passed to the share-text
+   *  templates, not rendered on the poster itself. */
+  missing: number;
+  /** Audit timestamp (ISO string from cache). Rendered as ISO date in the
+   *  top-right meta. UTC to keep the poster timezone-stable across shares. */
+  auditedAt: string;
+}
+
+export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoster(
+  { archetypeKey, seed, score, grade, missing, auditedAt }: Props,
+  posterRef,
+) {
+  const archetype = useMemo(
+    () => pickArchetypeVariant(archetypeKey, seed),
+    [archetypeKey, seed],
+  );
+  const rarityPct = getArchetypeRarityPct(archetypeKey);
+  const scoreRank = getScoreRank(score);
+  const indexLabel = String(archetype.index).padStart(2, "0");
+  const auditedDate = useMemo(() => formatAuditedDate(auditedAt), [auditedAt]);
+
+  const { capture } = usePostHog();
+  const [busy, setBusy] = useState<null | "x" | "linkedin" | "download">(null);
+
+  const captureCardBlob = async (): Promise<Blob | null> => {
+    const node = (posterRef as React.MutableRefObject<HTMLDivElement | null>)?.current;
+    if (!node) return null;
+    // Capture via html-to-image instead of html2canvas. The former
+    // serializes the DOM into an SVG <foreignObject> and rasterizes
+    // it through the browser's native rendering engine — so dashed
+    // borders, the SVG logo, gradients, and font metrics render
+    // exactly as they do on screen. html2canvas reimplements CSS
+    // in JS and was producing broken dashes and a stray pink square
+    // on the logo's mask.
+    if (typeof document !== "undefined" && document.fonts?.ready) await document.fonts.ready;
+    await new Promise<void>((r) => requestAnimationFrame(() => r()));
+    // Clone the poster into an off-screen container with a fixed width
+    // so html-to-image captures a self-contained subtree. The live
+    // .poster sits inside a flex column (.poster-section's flex: 1)
+    // and uses margin: 0 auto for centering — capturing it directly
+    // inherits that parent context, which shifts content within an
+    // oversized canvas. The clone has no such context.
+    const liveRect = node.getBoundingClientRect();
+    const captureWidth = Math.round(liveRect.width);
+    const captureHeight = Math.round(liveRect.height);
+
+    const wrapper = document.createElement("div");
+    wrapper.style.cssText = [
+      "position: fixed",
+      "left: -10000px",
+      "top: 0",
+      `width: ${captureWidth}px`,
+      `height: ${captureHeight}px`,
+      "padding: 0",
+      "margin: 0",
+      "background: var(--bg)",
+      "z-index: -1",
+      "pointer-events: none",
+    ].join(";");
+
+    const clone = node.cloneNode(true) as HTMLElement;
+    clone.style.cssText += [
+      "",
+      `width: ${captureWidth}px`,
+      `height: ${captureHeight}px`,
+      "max-width: none",
+      "min-width: 0",
+      "flex: 0 0 auto",
+      "margin: 0",
+    ].join(";");
+
+    wrapper.appendChild(clone);
+    document.body.appendChild(wrapper);
+
+    try {
+      const { toBlob } = await import("html-to-image");
+      return await toBlob(clone, {
+        backgroundColor: "#0e0e11",
+        pixelRatio: 2,
+        cacheBust: true,
+        width: captureWidth,
+        height: captureHeight,
+      });
+    } finally {
+      wrapper.remove();
+    }
+  };
+
+  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,
+      source: "poster",
+      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: "poster",
+        });
+        toast(shareCardToastMessage("failed"));
+        return;
+      }
+
+      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: "poster",
+        });
+        toast(shareCardToastMessage(method));
+        return;
+      }
+
+      const shareCtx: ShareCtx = {
+        score,
+        arch: archetype.name.toLowerCase(),
+        grade,
+        missing,
+      };
+      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: "poster",
+        });
+        toast(shareCardToastMessage("native"));
+        return;
+      }
+
+      const fallbackMethod = await copyOrDownloadCard(blob, filenameFor(channel));
+      capture("audit_card_capture_completed", {
+        trigger: `share_${channel}`,
+        status: fallbackMethod === "failed" ? "error" : "success",
+        image_method: fallbackMethod,
+        source: "poster",
+      });
+      toast(shareCardToastMessage(fallbackMethod));
+      const intent = channel === "x" ? X_INTENT(shareText) : LI_INTENT(shareText);
+      globalThis.open(intent, "_blank", "noopener,noreferrer");
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <section className="poster-section" data-screen-label="01 Poster">
+      <div className="poster" ref={posterRef}>
+        <header className="poster-head">
+          <span className="poster-wordmark">
+            <img
+              src="/logo.svg"
+              alt="failproof_ai"
+              className="poster-logo"
+            />
+            <span className="poster-sep">·</span> audit
+          </span>
+          <span className="poster-meta">
+            <span className="poster-ix">№ {indexLabel}</span>
+            <span className="of"> of 08</span>
+            <span className="poster-sep"> · </span>
+            audited {auditedDate}
+          </span>
+        </header>
+
+        <div className="poster-body">
+          {/* Sigil — visual anchor at the top of the centered stack */}
+          <div className="poster-sigil">
+            <Sigil archetypeKey={archetypeKey} />
+          </div>
+
+          {/* Persona block — name + keywords + rarity, centered */}
+          <div className="poster-persona">
+            <h1 className="persona-name">{archetype.name}</h1>
+            <div className="persona-keywords">
+              {archetype.keywords.map((k, i) => (
+                <React.Fragment key={k}>
+                  <span className={`kw kw-${i}`}>{k}</span>
+                  {i < archetype.keywords.length - 1 && (
+                    <span className="kw-sep">·</span>
+                  )}
+                </React.Fragment>
+              ))}
+            </div>
+            {typeof rarityPct === "number" && (
+              <div className="persona-rarity">
+                <span className="lbl">{"// only"}</span>{" "}
+                <span className="pct">{rarityPct}%</span>{" "}
+                <span className="lbl">of agents are this archetype</span>
+              </div>
+            )}
+          </div>
+
+          {/* Score block — heroic number + rank pill on the same baseline */}
+          <div className="poster-score">
+            <span className="score-n">{score}</span>
+            <span className="score-of">/100</span>
+            <span className="score-rank">{scoreRank}</span>
+          </div>
+        </div>
+
+        <footer className="poster-foot">
+          <span className="poster-cta">
+            audit yours <span className="arrow">→</span> failproof.ai
+          </span>
+        </footer>
+      </div>
+
+      <div className="poster-share-row">
+        <button
+          type="button"
+          className="poster-share-btn"
+          onClick={() => handleShare("x")}
+          disabled={busy !== null}
+        >
+          <span className="mark" aria-hidden="true">𝕏</span>
+          {busy === "x" ? "rendering…" : "post your archetype"}
+        </button>
+        <button
+          type="button"
+          className="poster-share-btn"
+          onClick={() => handleShare("linkedin")}
+          disabled={busy !== null}
+        >
+          <span className="mark" aria-hidden="true">in</span>
+          {busy === "linkedin" ? "rendering…" : "share on linkedin"}
+        </button>
+        <button
+          type="button"
+          className="poster-share-btn"
+          onClick={() => handleShare("download")}
+          disabled={busy !== null}
+        >
+          <span className="mark" aria-hidden="true">↓</span>
+          {busy === "download" ? "rendering…" : "download poster"}
+        </button>
+      </div>
+
+      <div className="poster-scroll-hint" aria-hidden="true">
+        scroll for full report <span className="arrow">↓</span>
+      </div>
+    </section>
+  );
+});
+
+/** UTC ISO date (YYYY-MM-DD) so the poster's date stays timezone-stable
+ *  across the geographies it gets shared into. */
+function formatAuditedDate(iso: string): string {
+  try {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime())) return iso;
+    const y = d.getUTCFullYear();
+    const m = String(d.getUTCMonth() + 1).padStart(2, "0");
+    const day = String(d.getUTCDate()).padStart(2, "0");
+    return `${y}-${m}-${day}`;
+  } catch {
+    return iso;
+  }
+}

package/.next/standalone/app/audit/_components/audit-progress-strip.tsx

@@ -32,7 +32,7 @@ interface Props {
 const ERROR_COPY: Record<RerunError["kind"], string> = {
   timeout: "audit took too long — try again",
   network: "network hiccup — check your connection",
-  post_failed: "audit failed to start — try again",
+  post_failed: "audit failed — try again",
 };
 
 export function formatElapsed(ms: number): string {