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

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