failproofai 0.0.11-beta.8 → 0.0.11

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

@@ -0,0 +1,230 @@
+"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;
+  /** Sender's audit score (0–100), forwarded to the api-server so the invite
+   *  body can show "mine came out at N/100". Omitted → score-free copy. */
+  score?: number;
+}
+
+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, score }: 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, score }),
+        });
+        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, score],
+  );
+
+  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

@@ -1,16 +1,19 @@
 /**
  * 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.
+ * Ten templates for X and ten 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 — then
+ * appends a clipboard paste hint. Pure — no React, no DOM — so it's
+ * unit-testable and shared by the client poster component.
+ *
+ * Each template references the score and/or archetype and ends on the
+ * install-free CTA + handle. We intentionally never include a URL: a bare link
+ * would make X/LinkedIn render a link-preview card and swallow the copied
+ * image. The npx command is the call to action instead.
  */
 import type { Grade } from "@/src/audit/scoring";
 
-const SITE_URL = "https://befailproof.ai";
-
 export interface ShareCtx {
   score: number;
   /** Lowercased archetype name, e.g. "the cowboy". */
@@ -20,34 +23,60 @@ export interface ShareCtx {
   missing: number;
 }
 
-const pol = (n: number) => (n === 1 ? "policy" : "policies");
+/** Call-to-action + handle per channel. No URL by design (see file header). */
+const X_CTA = "npx -y failproofai audit · @failproofai";
+const LI_CTA = "npx -y failproofai audit · @Failproof AI";
+
+/** Appended to every picked share so the user knows the audit-card PNG is on
+ *  their clipboard and just needs pasting into the post. */
+const PASTE_LINE = "[ audit card copied to your clipboard — paste it into the post ]";
 
-/** Quirky, emoji-forward — for X. */
+/** Short, curiosity-forward — for X / Twitter. Ends on the npx CTA + @failproofai. */
 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 }) =>
+    `my coding agent has a personality and it's ${arch}. did not see that coming.\n\nran a failproof audit, scored ${score}/100, all local. find out what yours is → ${X_CTA}`,
+  ({ score, arch }) =>
+    `spent 30 seconds auditing my coding agent. learned more about it than i did all month.\n\nit's ${arch}. scored ${score}/100. → ${X_CTA}`,
+  ({ score }) =>
+    `my agent scored ${score}/100. think yours can beat it?\n\n30 sec audit, runs locally, gives you a personality too → ${X_CTA}`,
+  ({ arch }) =>
+    `turns out my coding agent is ${arch} and honestly it explains everything.\n\n→ ${X_CTA}`,
+  ({ score, arch }) =>
+    `ran a failproof audit on my agent. it reads how it actually behaves when things break, not just the happy path.\n\npersonality: ${arch}. score: ${score}/100. all local → ${X_CTA}`,
+  ({ score, arch }) =>
+    `got to know my coding agent today. it's ${arch} and scored ${score}/100. wow.\n\naudit yours in 30s, nothing leaves your machine → ${X_CTA}`,
+  ({ score, arch }) =>
+    `your coding agent has a personality. you just haven't met it.\n\ni met mine today: ${arch}, ${score}/100. → ${X_CTA}`,
+  ({ score, arch }) =>
+    `everyone talks about what their agent can build. nobody talks about how it acts when it breaks.\n\nmine's ${arch}, scored ${score}/100, all local → ${X_CTA}`,
+  ({ score, arch }) =>
+    `every agent builder should run this once.\n\n30 sec, local, gives your agent a personality and a quality score. mine: ${arch}, ${score}/100.\n\n${X_CTA}`,
+  ({ score, arch }) =>
+    `i'll go first: ${arch}, ${score}/100.\n\nwhat's your coding agent? 30 sec audit, no signup → ${X_CTA}`,
 ];
 
-/** Measured, professional — for LinkedIn. */
+/** Longer, reflective — for LinkedIn. Ends on the npx CTA + @Failproof AI. */
 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 }) =>
+    `I've spent more hours with my coding agent this month than with most people I know. Today I realized I couldn't tell you a single thing about how it actually behaves.\n\nSo I audited it. Turns out it's ${arch}, and it scored ${score}/100.\n\nThe audit reads its real history, including how it handles failures, not just the clean runs. 30 seconds, runs entirely locally.\n\nMeet yours: ${LI_CTA}`,
+  ({ score, arch }) =>
+    `Took a personality test today. It wasn't for me — it was for my AI coding agent.\n\nThe result: ${arch}, with a quality score of ${score}/100.\n\nIt works by reading the agent's actual run history, so the personality comes from how it really behaves, not a vibe. Took 30 seconds and stayed local.\n\nTry it on yours: ${LI_CTA}`,
+  ({ score, arch }) =>
+    `Everyone asks what their AI agent can build. I just found out mine has a temper.\n\nAfter watching how it reacts to a failed command, the audit called it ${arch}. It also scored its quality at ${score}/100.\n\nOddly useful to see it written down. 30 seconds, all local: ${LI_CTA}`,
+  ({ score, arch }) =>
+    `My agent does this very specific thing every time a command fails. Today I learned there's basically a name for it.\n\nRan a quick audit and it came back ${arch}, scored ${score}/100. The whole read is based on how the agent handles things going wrong, which is where its real character shows.\n\n30 seconds, nothing leaves your machine: ${LI_CTA}`,
+  ({ score, arch }) =>
+    `My AI coding agent scored ${score}/100 today. I didn't know you could even measure that.\n\nThe same audit also handed it a personality: ${arch}.\n\nIt reads the agent's real history and tells you where it's solid and where it slips. Took 30 seconds and ran fully locally: ${LI_CTA}`,
+  ({ score, arch }) =>
+    `I'm usually the first to scroll past "audit your X" tools. This one took 30 seconds and actually told me something.\n\nMy coding agent is ${arch}, and it scored ${score}/100.\n\nIt reads the agent's real run history rather than asking me anything, and none of it leaves the machine: ${LI_CTA}`,
+  ({ score, arch }) =>
+    `What is your coding agent's personality? I realized today that I had no answer.\n\nSo I checked. Mine is ${arch}, scored ${score}/100, with a clear read on where it shines and where it slips.\n\nIf you work with agents, run it and drop yours in the comments. 30 seconds, fully local: ${LI_CTA}`,
+  ({ score, arch }) =>
+    `I trusted my coding agent a little less after this morning, and quite a bit more by the afternoon.\n\nI ran an audit on it. It showed me exactly where it's reliable and where it isn't, gave it a personality (${arch}), and scored it ${score}/100.\n\nKnowing the gaps is what made me trust it more. 30 seconds, all local: ${LI_CTA}`,
+  ({ score, arch }) =>
+    `I almost skipped this because I assumed it would quietly ship my code off somewhere. It doesn't. Everything runs locally.\n\n30 seconds later I had my agent's personality (${arch}) and a quality score (${score}/100).\n\nIf privacy is usually what stops you from trying these, this one is different: ${LI_CTA}`,
+  ({ score, arch }) =>
+    `Found out my AI coding agent has a personality type. Found out it's ${arch}. Found out that explains a lot.\n\nIt scored ${score}/100 too. The audit reads how the agent handles failures, not just the runs where everything goes fine.\n\n30 seconds, runs locally: ${LI_CTA}`,
 ];
 
 /** djb2 hash — stable per seed so the template choice is deterministic. */
@@ -57,11 +86,13 @@ function hashStr(s: string): number {
   return h >>> 0;
 }
 
-/** Deterministically pick + render one template for the given seed. */
+/** Deterministically pick + render one template for the given seed, then append
+ *  the clipboard paste hint so the user knows to paste the copied audit card. */
 export function pickTemplate(
   templates: ((c: ShareCtx) => string)[],
   seed: string,
   ctx: ShareCtx,
 ): string {
-  return templates[hashStr(seed) % templates.length](ctx);
+  const body = templates[hashStr(seed) % templates.length](ctx);
+  return `${body}\n\n${PASTE_LINE}`;
 }

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>
   );
 }