failproofai 0.0.11-beta.8 → 0.0.11

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

@@ -0,0 +1,326 @@
+"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 } 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 X_INTENT = (text: string) =>
+  `https://x.com/intent/tweet?text=${encodeURIComponent(text)}`;
+// LinkedIn deprecated the share-offsite `summary` / `title` params, so they no
+// longer pre-fill the post composer (it only scrapes OG tags from the URL). The
+// feed route with `shareActive=true` + `text=` opens "start a post" with our
+// text pre-filled — and the share templates already embed the befailproof.ai
+// link inside that text.
+const LI_INTENT = (text: string) =>
+  `https://www.linkedin.com/feed/?shareActive=true&text=${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 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, centered in the card */}
+          <div className="poster-score">
+            <span className="score-n">{score}</span>
+            <span className="score-of">/100</span>
+          </div>
+        </div>
+
+        <footer className="poster-foot">
+          <span className="poster-brand">befailproof.ai</span>
+          <span className="poster-cta">
+            audit yours <span className="arrow">→</span>{" "}
+            <span className="cta-cmd">npx -y failproofai audit</span>
+          </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/auth-dialog.tsx

@@ -2,14 +2,15 @@
 
 /**
  * Auth dialog — modal overlay shown when an unauthenticated user clicks
- * "[ set a reminder ]". Two-step flow:
+ * a cadence button to set a reminder. Two-step flow:
  *
  *   1. Email entry  → POST /api/auth/login-request
  *   2. OTP entry    → POST /api/auth/login-verify
  *
- * Styled to match the rest of the /audit page: pixel brackets, sharp pink
- * accent, terminal-style frame. The dialog never sees the refresh token —
- * the dashboard's API route writes it to ~/.failproofai/auth.json.
+ * Calm chrome to match the rest of /audit: 1px borders, plain
+ * lowercase copy, no corner crosshair frame. The dialog never sees
+ * the refresh token — the dashboard's API route writes it to
+ * ~/.failproofai/auth.json.
  */
 
 import React, { useCallback, useEffect, useRef, useState } from "react";
@@ -23,15 +24,15 @@ export interface AuthedUser {
 
 interface Props {
   open: boolean;
-  /** Copy shown above the title, e.g. "oops — you are unknown." */
+  /** Optional title. Defaults to "where to route the reminder?". */
   headline?: string;
-  /** Copy under the title explaining why we need auth right now. */
-  reason?: string;
+  /** Optional subtitle shown under the title on the email step. Defaults to
+   *  "we'll send a one-time code to confirm." */
+  subhead?: string;
   onClose: () => void;
   /** Fired after successful verify. Caller decides what to do next. */
   onAuthed: (user: AuthedUser) => void;
-  /** Telemetry tag identifying which CTA opened the dialog. Defaults to
-   *  "unknown" so existing call sites continue to compile. */
+  /** Telemetry tag identifying which CTA opened the dialog. */
   source?: string;
 }
 
@@ -52,8 +53,8 @@ function describeFetchError(err: unknown): string {
 
 export function AuthDialog({
   open,
-  headline = "oops — you are unknown.",
-  reason = "verify yourself to continue.",
+  headline = "where to route the reminder?",
+  subhead = "we'll send a one-time code to confirm.",
   onClose,
   onAuthed,
   source = "unknown",
@@ -65,8 +66,6 @@ export function AuthDialog({
   const emailInputRef = useRef<HTMLInputElement | null>(null);
   const codeInputRef = useRef<HTMLInputElement | null>(null);
 
-  // Reset internal state every time the dialog opens. Also fire the
-  // funnel-opened event so we can measure dismissal vs verification rates.
   useEffect(() => {
     if (open) {
       setStep({ kind: "email", error: null });
@@ -76,9 +75,6 @@ export function AuthDialog({
     }
   }, [capture, open, source]);
 
-  // Fire dismissed when the dialog closes WITHOUT a successful verify.
-  // We piggyback on `open` flipping false instead of intercepting every
-  // close path so resend / step transitions don't double-count.
   const wasOpenRef = useRef(false);
   useEffect(() => {
     if (open) {
@@ -94,7 +90,6 @@ export function AuthDialog({
     wasOpenRef.current = false;
   }, [capture, open, source, step.kind]);
 
-  // Autofocus the right input as the step changes.
   useEffect(() => {
     if (!open) return;
     const t = setTimeout(() => {
@@ -104,7 +99,6 @@ export function AuthDialog({
     return () => clearTimeout(t);
   }, [open, step.kind]);
 
-  // ESC to close.
   useEffect(() => {
     if (!open) return;
     const onKey = (e: KeyboardEvent): void => {
@@ -114,7 +108,6 @@ export function AuthDialog({
     return () => window.removeEventListener("keydown", onKey);
   }, [open, busy, onClose]);
 
-  // Resend countdown ticker.
   const resendActive = step.kind === "code" && step.resendIn > 0;
   useEffect(() => {
     if (!resendActive) return;
@@ -129,9 +122,6 @@ export function AuthDialog({
   const requestCode = useCallback(
     async (email: string, opts: { isResend?: boolean } = {}): Promise<void> => {
       const { isResend = false } = opts;
-      // Show resend errors inline on the OTP step — the previously sent
-      // code is still usable. Only the first-send error path bounces back
-      // to the email step.
       const setError = (msg: string) => {
         if (isResend) {
           setStep((s) => (s.kind === "code" ? { ...s, error: msg } : s));
@@ -268,11 +258,6 @@ export function AuthDialog({
       }}
     >
       <div className="auth-dialog">
-        <span className="corner tl">┌</span>
-        <span className="corner tr">┐</span>
-        <span className="corner bl">└</span>
-        <span className="corner br">┘</span>
-
         <button
           type="button"
           className="auth-close"
@@ -280,21 +265,17 @@ export function AuthDialog({
           disabled={busy}
           aria-label="close"
         >
-          [ x ]
+          ×
         </button>
 
-        <div className="auth-label">━━ identity check</div>
         <h2 id="auth-dialog-title" className="auth-headline">
           {headline}
         </h2>
 
         {step.kind === "email" && (
           <>
-            <p className="auth-sub">{reason}</p>
+            <p className="auth-sub">{subhead}</p>
             <form onSubmit={onEmailSubmit} className="auth-form">
-              <label className="auth-field-label" htmlFor="auth-dialog-email">
-                email
-              </label>
               <input
                 ref={emailInputRef}
                 id="auth-dialog-email"
@@ -311,7 +292,7 @@ export function AuthDialog({
               {step.error && <div className="auth-error">{step.error}</div>}
               <div className="auth-actions">
                 <button type="submit" className="auth-btn primary" disabled={busy}>
-                  {busy ? "[ sending… ]" : "[ send code ]"}
+                  {busy ? "sending…" : "send code"}
                 </button>
                 <button
                   type="button"
@@ -319,7 +300,7 @@ export function AuthDialog({
                   onClick={onClose}
                   disabled={busy}
                 >
-                  [ cancel ]
+                  cancel
                 </button>
               </div>
             </form>
@@ -329,14 +310,10 @@ export function AuthDialog({
         {step.kind === "code" && (
           <>
             <p className="auth-sub">
-              we sent a code to <span className="auth-email">{step.email}</span>.
-              <br />
-              check your inbox — it expires in {Math.ceil(step.expiresIn / 60)} min.
+              code sent to <span className="auth-email">{step.email}</span>.
+              expires in {Math.ceil(step.expiresIn / 60)} min.
             </p>
             <form onSubmit={onCodeSubmit} className="auth-form">
-              <label className="auth-field-label" htmlFor="auth-dialog-code">
-                one-time code
-              </label>
               <input
                 ref={codeInputRef}
                 id="auth-dialog-code"
@@ -354,7 +331,7 @@ export function AuthDialog({
               {step.error && <div className="auth-error">{step.error}</div>}
               <div className="auth-actions">
                 <button type="submit" className="auth-btn primary" disabled={busy}>
-                  {busy ? "[ verifying… ]" : "[ verify ]"}
+                  {busy ? "verifying…" : "verify"}
                 </button>
                 <button
                   type="button"
@@ -363,8 +340,8 @@ export function AuthDialog({
                   disabled={busy || step.resendIn > 0}
                 >
                   {step.resendIn > 0
-                    ? `[ resend in ${step.resendIn}s ]`
-                    : "[ resend code ]"}
+                    ? `resend in ${step.resendIn}s`
+                    : "resend code"}
                 </button>
               </div>
               <button
@@ -382,15 +359,12 @@ export function AuthDialog({
         {step.kind === "done" && (
           <>
             <p className="auth-sub">
-              <span className="auth-ok">✓</span> you are{" "}
+              <span className="auth-ok">✓</span> signed in as{" "}
               <span className="auth-email">{step.user.email}</span>.
             </p>
-            <p className="auth-sub" style={{ marginTop: 8 }}>
-              session saved locally.
-            </p>
             <div className="auth-actions">
               <button type="button" className="auth-btn primary" onClick={onClose}>
-                [ continue ]
+                continue
               </button>
             </div>
           </>