failproofai 0.0.11-beta.8 → 0.0.11-beta.9

package/.next/standalone/app/audit/_components/invite-dialog.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+/**
+ * Invite dialog — modal that takes a comma/newline-separated list of friend
+ * emails and POSTs them to /api/audit/invite. The api-server composes the
+ * actual invite email (Cc'ing the sender) using the same email infrastructure
+ * that backs the OTP flow.
+ *
+ * Anonymous users get bounced through the AuthDialog by the caller; this
+ * component assumes the session is already established.
+ */
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { usePostHog } from "@/contexts/PostHogContext";
+import { toast } from "@/app/components/toast";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  /** Source tag for PostHog so we can split "invited from come-back-better"
+   *  from any future entry points. */
+  source: string;
+  /** Called when the proxy returns 401 (session expired between probe and
+   *  submit). The parent should re-open the AuthDialog so the user can
+   *  re-authenticate; without this, a 401 dead-ends with an inline error. */
+  onUnauthorized?: () => void;
+}
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const MAX_RECIPIENTS = 10;
+
+function parseEmails(input: string): { valid: string[]; invalid: string[] } {
+  const tokens = input
+    .split(/[\s,;]+/)
+    .map((t) => t.trim().toLowerCase())
+    .filter(Boolean);
+  const valid: string[] = [];
+  const invalid: string[] = [];
+  const seen = new Set<string>();
+  for (const t of tokens) {
+    if (seen.has(t)) continue;
+    seen.add(t);
+    if (EMAIL_RE.test(t)) valid.push(t);
+    else invalid.push(t);
+  }
+  return { valid, invalid };
+}
+
+export function InviteDialog({ open, onClose, source, onUnauthorized }: Props): React.ReactElement | null {
+  const { capture } = usePostHog();
+  const [value, setValue] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      setValue("");
+      setBusy(false);
+      setError(null);
+      capture("audit_invite_dialog_opened", { source });
+    }
+  }, [capture, open, source]);
+
+  useEffect(() => {
+    if (!open) return;
+    const t = setTimeout(() => inputRef.current?.focus(), 50);
+    return () => clearTimeout(t);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key === "Escape" && !busy) onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, busy, onClose]);
+
+  const { valid, invalid } = useMemo(() => parseEmails(value), [value]);
+
+  const submit = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      if (busy) return;
+      if (valid.length === 0) {
+        setError("add at least one valid email address.");
+        return;
+      }
+      if (valid.length > MAX_RECIPIENTS) {
+        setError(`up to ${MAX_RECIPIENTS} emails at a time. send the rest in a follow-up.`);
+        return;
+      }
+      setBusy(true);
+      setError(null);
+      capture("audit_invite_submitted", {
+        source,
+        recipient_count: valid.length,
+        had_invalid: invalid.length > 0,
+      });
+      try {
+        const res = await fetch("/api/audit/invite", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ to: valid }),
+        });
+        const body = (await res.json().catch(() => ({}))) as {
+          sent?: string[];
+          failed?: string[];
+          code?: string;
+          message?: string;
+        };
+        if (res.status === 401) {
+          // Session expired between probe and submit — route back through auth.
+          // Without this, repeated submits would dead-end with the same 401.
+          if (onUnauthorized) {
+            onClose();
+            onUnauthorized();
+          } else {
+            setError("session expired. please sign in again.");
+          }
+          return;
+        }
+        if (!res.ok) {
+          const msg = body.message ?? "couldn't send invites.";
+          setError(msg);
+          return;
+        }
+        const sent = body.sent?.length ?? 0;
+        const failed = body.failed?.length ?? 0;
+        toast(
+          failed > 0
+            ? `📨 sent ${sent}, ${failed} bounced — copy the bounce and try again.`
+            : `📨 sent ${sent} ${sent === 1 ? "invite" : "invites"}. thanks for spreading the word.`,
+        );
+        onClose();
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        setError(`network error: ${message}`);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [busy, valid, invalid, capture, source, onClose, onUnauthorized],
+  );
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="auth-dialog-backdrop"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="invite-dialog-title"
+      onClick={(e) => {
+        if (!busy && e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="auth-dialog">
+        <button
+          type="button"
+          className="auth-close"
+          onClick={onClose}
+          disabled={busy}
+          aria-label="close"
+        >
+          ×
+        </button>
+
+        <h2 id="invite-dialog-title" className="auth-headline">
+          invite friends to audit theirs
+        </h2>
+        <p className="auth-sub">
+          paste emails separated by commas, spaces, or newlines. you&apos;ll be Cc&apos;d on every invite so they know it&apos;s from you.
+        </p>
+
+        <form onSubmit={submit} className="auth-form">
+          <textarea
+            ref={inputRef}
+            name="emails"
+            placeholder="alice@x.com, bob@y.com&#10;carol@z.com"
+            disabled={busy}
+            className="auth-input invite-textarea"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            rows={4}
+            required
+          />
+          <div className="invite-summary">
+            {valid.length > 0 && (
+              <span className="invite-valid">{valid.length} valid</span>
+            )}
+            {invalid.length > 0 && (
+              <span className="invite-invalid">
+                {invalid.length} invalid: {invalid.slice(0, 3).join(", ")}
+                {invalid.length > 3 ? `, +${invalid.length - 3} more` : ""}
+              </span>
+            )}
+            {valid.length > MAX_RECIPIENTS && (
+              <span className="invite-invalid">
+                only {MAX_RECIPIENTS} per send — first {MAX_RECIPIENTS} will go.
+              </span>
+            )}
+          </div>
+          {error && <div className="auth-error">{error}</div>}
+          <div className="auth-actions">
+            <button
+              type="submit"
+              className="auth-btn primary"
+              disabled={busy || valid.length === 0}
+            >
+              {busy ? "sending…" : `send ${valid.length || ""} invite${valid.length === 1 ? "" : "s"}`.trim()}
+            </button>
+            <button
+              type="button"
+              className="auth-btn"
+              onClick={onClose}
+              disabled={busy}
+            >
+              cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,75 @@
+"use client";
+
+/**
+ * Section 03 — QUIRKS. "what to improve."
+ *
+ * 4-column table: when · what slipped (+ policy that would've caught it) ·
+ * severity pill · recurrence. Each row corresponds to a triggered
+ * detector. No per-finding card chrome, no 4-quad body, no corner
+ * crosshairs — evidence and fix live in section 04 (How to improve).
+ */
+import React from "react";
+import type { FindingCard } from "@/src/audit/findings";
+
+interface Props {
+  findings: FindingCard[];
+}
+
+type Severity = "low" | "medium" | "high";
+
+/** Heuristic severity from occurrence count — until the audit pipeline
+ *  carries a real severity field. Tuned so a single occurrence reads as
+ *  low and >5 reads as high. */
+function severityFromCount(count: number): Severity {
+  if (count >= 6) return "high";
+  if (count >= 2) return "medium";
+  return "low";
+}
+
+function recurrenceLabel(count: number): string {
+  if (count <= 1) return "new";
+  if (count < 10) return `${count}× seen`;
+  return "recurring";
+}
+
+export function QuirksSection({ findings }: Props) {
+  if (findings.length === 0) return null;
+
+  return (
+    <section className="audit-sec" data-screen-label="03 Quirks">
+      <div className="audit-sec-head">
+        <span className="audit-sec-eyebrow">
+          <span className="ix">03</span>{"// quirks"}
+        </span>
+        <span className="audit-sec-meta">{findings.length} slipped through</span>
+      </div>
+      <h2 className="audit-sec-title">what to improve</h2>
+
+      <div className="quirks-table">
+        <div className="quirks-thead">
+          <span>when</span>
+          <span>what slipped</span>
+          <span>severity</span>
+          <span>seen</span>
+        </div>
+        {findings.map((f) => {
+          const sev = severityFromCount(f.count);
+          return (
+            <div key={f.sourceSlug} className="quirks-row">
+              <span className="q-when">{f.lastSeen}</span>
+              <span className="q-what">
+                <span className="q-title">{f.title}</span>
+                <span className="q-policy">
+                  would&apos;ve been caught by:{" "}
+                  <code>{f.policy}</code>
+                </span>
+              </span>
+              <span className={`q-pill q-pill-${sev}`}>{sev}</span>
+              <span className="q-recur">{recurrenceLabel(f.count)}</span>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

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

@@ -22,32 +22,33 @@ export interface ShareCtx {
 
 const pol = (n: number) => (n === 1 ? "policy" : "policies");
 
-/** Quirky, emoji-forward — for X. */
+/** Quirky, emoji-forward — for X. No grade-tier framing (sounds bad at
+ *  the low end). Lean on the persona name + score number instead. */
 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\nbefailproof.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}`,
+  ({ score, arch, missing }) =>
+    `my AI coding agent just got profiled and it's "${arch}" 🤠\n\nscored ${score}/100${missing > 0 ? ` · ${missing} ${pol(missing)} between me and a clean run` : ` · every guardrail live`}\n\nwhat's yours? → ${SITE_URL}`,
+  ({ score, arch }) =>
+    `turns out my coding agent has a whole personality and it's ${arch} 💀\n\n${score}/100. the audit does not miss.\n\nrun yours in 30s → ${SITE_URL}`,
+  ({ score, arch }) =>
+    `archetype: ${arch} 👀\n\n${score}/100 on the failproofai audit. it reverse-engineered my agent's entire vibe from its own session logs.\n\n${SITE_URL}`,
+  ({ score, arch, missing }) =>
+    `plot twist: my AI agent is ${arch} 🎭\n\n${score}/100${missing > 0 ? ` · ${missing} ${pol(missing)} away from behaving` : ` · spotless, somehow`}\n\nbefailproof.ai`,
+  ({ score, arch }) =>
+    `i let failproofai audit my coding agent and it called me ${arch} ${score >= 80 ? "😎" : "😬"}\n\n${score}/100. brutally accurate. no notes.\n\n${SITE_URL}`,
 ];
 
-/** Measured, professional — for LinkedIn. */
+/** Measured, professional — for LinkedIn. No grade-tier framing. */
 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}`,
+  ({ score, arch, missing }) =>
+    `I ran a failproofai audit on our AI coding agents.\n\nResult: ${score}/100, 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, missing }) =>
+    `Security posture check on our coding-agent stack, via failproofai.\n\nScore: ${score}/100. 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 }) =>
+    `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. Concrete, evidence-backed, and mapped to the exact policies that close each gap.\n\n${SITE_URL}`,
+  ({ score, arch, missing }) =>
+    `Agent security isn't a vibe — it's measurable.\n\nWe scored ${score}/100 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 }) =>
+    `Ran our coding agents through a failproofai behavioural audit.\n\n${score}/100, 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. */

package/.next/standalone/app/audit/_components/sigil.tsx

@@ -1,39 +1,22 @@
 "use client";
 
 /**
- * Pixel sigil — renders an 8x8 grid from the SIGILS table.
+ * Pixel sigil — 8×8 grid for the archetype. Bare implementation: no plate,
+ * no crosshairs, no reveal animation. The poster owns whatever framing it
+ * wants around the sigil.
  *
- * Each archetype has an 8x8 character grid where:
- *   . = empty cell    o = ink (foreground)
- *   p = pink accent   g = green accent    d = dim
- *
- * Two rendering modes:
- *
- *  • Default (used on the audit hero, identity-section): wraps the grid in
- *    a brutalist "instrument plate" — register crosshairs at the four
- *    corners, a header strip with the archetype index + an 8×8 coordinate
- *    label, the pixel grid mounted on a dashed inner frame with 20px cells,
- *    a footer strip naming the archetype, and a stacked pink + dim hard-
- *    offset shadow for depth. Cells fade in along a diagonal wave on
- *    mount (`--cx` / `--cy` custom properties), guarded by
- *    `prefers-reduced-motion`.
- *
- *  • hideLabel (used in the ShowOff CTA + html2canvas capture): a bare
- *    `.sigil` grid with no plate or labels, so the showoff card can scale
- *    the sigil down independently and html2canvas doesn't have to capture
- *    the new plate chrome.
+ * Cell letters: `.` empty · `o` ink · `p` pink accent · `g` green accent ·
+ * `d` dim.
  */
 import React from "react";
-import { ARCHETYPES, SIGILS, type ArchetypeKey } from "@/src/audit/archetypes";
+import { SIGILS, type ArchetypeKey } from "@/src/audit/archetypes";
 
 interface Props {
   archetypeKey: ArchetypeKey;
-  hideLabel?: boolean;
 }
 
-export function Sigil({ archetypeKey, hideLabel }: Props) {
+export function Sigil({ archetypeKey }: Props) {
   const grid = SIGILS[archetypeKey] ?? SIGILS.optimist;
-  const archetype = ARCHETYPES[archetypeKey];
   const cells: React.ReactElement[] = [];
 
   for (let y = 0; y < 8; y++) {
@@ -45,49 +28,9 @@ export function Sigil({ archetypeKey, hideLabel }: Props) {
       else if (c === "p") cls += " p";
       else if (c === "g") cls += " g";
       else if (c === "d") cls += " d";
-      cells.push(
-        <div
-          key={`${y}-${x}`}
-          className={cls}
-          style={{
-            ["--cx" as string]: x,
-            ["--cy" as string]: y,
-          } as React.CSSProperties}
-        />,
-      );
+      cells.push(<div key={`${y}-${x}`} className={cls} />);
     }
   }
 
-  if (hideLabel) {
-    return (
-      <div className="sigil-wrap" data-bare="true">
-        <div className="sigil">{cells}</div>
-      </div>
-    );
-  }
-
-  const indexLabel = String(archetype.index).padStart(2, "0");
-
-  return (
-    <div className="sigil-wrap">
-      <div className="sigil-plate">
-        <span className="sigil-mark tl" aria-hidden="true" />
-        <span className="sigil-mark tr" aria-hidden="true" />
-        <span className="sigil-mark bl" aria-hidden="true" />
-        <span className="sigil-mark br" aria-hidden="true" />
-
-        <div className="sigil-strip sigil-strip--top">
-          <span className="sigil-ix">№ {indexLabel}</span>
-          <span className="sigil-coord">8×8</span>
-        </div>
-
-        <div className="sigil">{cells}</div>
-
-        <div className="sigil-strip sigil-strip--bot">
-          <span className="sigil-strip-key">sigil</span>
-          <span className="sigil-strip-val">{archetypeKey}</span>
-        </div>
-      </div>
-    </div>
-  );
+  return <div className="sigil">{cells}</div>;
 }

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

@@ -1,57 +1,45 @@
 "use client";
 
 /**
- * Section 02 — STRENGTHS. "your agent does this right." A leaderboard
- * of green-checked behaviors derived from the AuditResult (see
- * `src/audit/strengths.ts`).
+ * Section 02 — STRENGTHS. "what it's great at." Calm row list:
+ * ✓ glyph · headline + sub · right-aligned metric. No card chrome,
+ * no hover backgrounds, no checkmark backdrop.
  */
 import React from "react";
 import type { Strength } from "@/src/audit/strengths";
 
 interface Props {
   strengths: Strength[];
-  totalDetectorsTriggered: number;
-  totalDetectorsAvailable: number;
 }
 
-export function StrengthsSection({
-  strengths, totalDetectorsTriggered, totalDetectorsAvailable,
-}: Props) {
+export function StrengthsSection({ strengths }: Props) {
   if (strengths.length === 0) return null;
 
   return (
-    <section className="section" data-screen-label="02 Strengths">
-      <div className="section-mast">
-        <div className="section-label">
-          <span className="glyph">━━</span> strengths
-          {" "}<span style={{ color: "var(--dim)" }}>·</span>{" "}
-          what your agent has figured out
-        </div>
-        <div className="section-meta">
-          <span className="g">●</span>{" "}
-          {totalDetectorsAvailable - totalDetectorsTriggered} of {totalDetectorsAvailable} clean
-        </div>
+    <section className="audit-sec" data-screen-label="02 Strengths">
+      <div className="audit-sec-head">
+        <span className="audit-sec-eyebrow">
+          <span className="ix">02</span>{"// strengths"}
+        </span>
+        <span className="audit-sec-meta">{strengths.length} standouts</span>
       </div>
-      <h2 className="section-h">your agent does this right.</h2>
+      <h2 className="audit-sec-title">what it&apos;s great at</h2>
 
-      <div className="strengths-grid">
+      <div className="strength-list">
         {strengths.map((s, i) => (
           <div key={i} className="strength-row">
-            <div className="strength-check">✓</div>
-            <div className="strength-body">
-              <div className="strength-headline">{s.headline}</div>
-              <div className="strength-detail">{s.detail}</div>
-            </div>
-            <div className="strength-metric">
+            <span className="strength-check" aria-hidden="true">✓</span>
+            <span className="strength-body">
+              <span className="strength-headline">{s.headline}</span>
+              <span className="strength-detail">{s.detail}</span>
+            </span>
+            <span className="strength-metric">
               {s.metric}
-              <span className="unit">{s.unit}</span>
-            </div>
+              {s.unit && <span className="unit">{s.unit}</span>}
+            </span>
           </div>
         ))}
       </div>
-      <div className="strengths-footer">
-        — these are your agent&apos;s defaults. keep them.
-      </div>
     </section>
   );
 }