failproofai 0.0.11-beta.2 → 0.0.11-beta.3

package/.next/standalone/assets/audit/poster-styles.css

@@ -0,0 +1,424 @@
+/* ============================================================
+   failproof_ai — shareable poster page
+   Built on styles.css (tokens + textures + scanlines).
+   ============================================================ */
+
+.poster-app { min-height: 100vh; }
+.poster-shell {
+  position: relative; z-index: 3;
+  min-height: 100vh;
+  display: flex; flex-direction: column;
+}
+
+/* toolbar */
+.poster-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 32px;
+  border-bottom: 1px solid var(--line);
+  background: rgba(10,10,10,0.85);
+  backdrop-filter: blur(8px);
+  position: sticky; top: 0; z-index: 50;
+}
+.poster-back {
+  display: inline-flex; align-items: center; gap: 10px;
+  font-family: var(--font-mono); font-size: 12px;
+  letter-spacing: 0.05em;
+  color: var(--ink-2);
+  transition: color 120ms;
+}
+.poster-back:hover { color: var(--accent-pink); }
+.poster-back .back-arrow {
+  font-family: var(--font-display);
+  font-size: 18px; color: var(--accent-pink);
+}
+.poster-brand {
+  display: inline-flex; align-items: baseline; gap: 10px;
+}
+.poster-actions { display: inline-flex; gap: 10px; }
+
+/* stage */
+.poster-stage {
+  flex: 1;
+  display: grid;
+  grid-template-columns: minmax(720px, 1fr) 320px;
+  gap: 40px;
+  padding: 48px 40px 64px;
+  max-width: 1480px;
+  width: 100%;
+  margin: 0 auto;
+  align-items: start;
+}
+
+/* ─────────── the poster card itself ─────────── */
+.poster {
+  position: relative;
+  background:
+    repeating-linear-gradient(0deg, rgba(228,88,125,0.03) 0 1px, transparent 1px 16px),
+    repeating-linear-gradient(90deg, rgba(102,209,181,0.025) 0 1px, transparent 1px 16px),
+    var(--bg-2);
+  border: 1px solid var(--line-2);
+  padding: 48px 56px 40px;
+  /* lock to a print-friendly aspect — 4:5 portrait-ish */
+  aspect-ratio: 4 / 5;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* register / corner marks */
+.poster .reg {
+  position: absolute;
+  font-family: var(--font-mono); font-size: 10px;
+  letter-spacing: 0.18em; text-transform: uppercase;
+  color: var(--accent-pink);
+  opacity: 0.65;
+}
+.poster .reg-tl { top: 14px; left: 18px; }
+.poster .reg-tr { top: 14px; right: 18px; }
+.poster .reg-bl { bottom: 14px; left: 18px; }
+.poster .reg-br { bottom: 14px; right: 18px; }
+
+/* head row */
+.poster-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 18px;
+  border-bottom: 1px dashed var(--line);
+  margin-bottom: 28px;
+}
+.poster-eyebrow {
+  display: inline-flex; align-items: baseline; gap: 12px;
+  font-family: var(--font-mono); font-size: 11px;
+  letter-spacing: 0.22em; text-transform: uppercase;
+  color: var(--accent-green);
+}
+.poster-eyebrow .eb-glyph { color: var(--accent-pink); letter-spacing: -2px; }
+.poster-eyebrow .eb-sep { color: var(--dim); }
+.poster-eyebrow > span:last-child { color: var(--ink); }
+.poster-livedot {
+  display: inline-flex; align-items: center; gap: 8px;
+  font-family: var(--font-mono); font-size: 10px;
+  letter-spacing: 0.22em; text-transform: uppercase;
+  color: var(--accent-green);
+}
+.poster-livedot .dot-live {
+  width: 7px; height: 7px; background: var(--accent-green);
+  display: inline-block;
+  animation: pulseDot 1.6s ease-in-out infinite;
+  box-shadow: 0 0 8px rgba(102,209,181,0.6);
+}
+
+/* hero */
+.poster-hero {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 32px;
+  align-items: center;
+  margin-bottom: 32px;
+}
+.poster-name {
+  font-family: var(--font-display);
+  font-size: clamp(56px, 8vw, 104px);
+  line-height: 0.92;
+  letter-spacing: 0.06em;
+  text-transform: lowercase;
+  color: var(--ink);
+  text-shadow: 4px 4px 0 var(--accent-pink-shadow);
+  margin: 0 0 12px;
+  text-wrap: balance;
+}
+.poster-tagline {
+  font-family: var(--font-mono);
+  font-size: clamp(14px, 1.3vw, 17px);
+  line-height: 1.5;
+  color: var(--ink-2);
+  margin: 0 0 22px;
+  max-width: 540px;
+  text-wrap: pretty;
+}
+.poster-keywords {
+  display: flex; flex-wrap: wrap;
+  align-items: baseline;
+  gap: 14px;
+  font-family: var(--font-display);
+  font-size: clamp(22px, 2.4vw, 30px);
+  letter-spacing: 0.11em;
+  text-transform: lowercase;
+  line-height: 1.1;
+}
+.poster-keywords .kw-0 { color: var(--accent-green); }
+.poster-keywords .kw-1 { color: var(--ink); }
+.poster-keywords .kw-2 { color: var(--accent-pink); }
+.poster-keywords .kw-sep {
+  color: var(--dim);
+  font-family: var(--font-mono);
+  font-size: 18px;
+  letter-spacing: 0;
+}
+.poster-sigil-wrap { display: flex; justify-content: center; }
+.poster-sigil-wrap .sigil-label { display: none; }
+.poster-sigil-wrap .sigil {
+  grid-template-columns: repeat(8, 18px);
+  grid-template-rows: repeat(8, 18px);
+  box-shadow: 6px 6px 0 0 var(--accent-pink-shadow);
+}
+
+/* stats row */
+.poster-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  border: 1px solid var(--line-2);
+  background: var(--bg);
+  margin-bottom: 28px;
+}
+.stat-box {
+  padding: 22px 20px;
+  border-right: 1px solid var(--line);
+  display: flex; flex-direction: column; gap: 6px;
+  text-align: center;
+  align-items: center;
+}
+.stat-box:last-child { border-right: none; }
+.stat-label {
+  font-family: var(--font-mono); font-size: 10px;
+  letter-spacing: 0.22em; text-transform: uppercase;
+  color: var(--accent-green);
+}
+.stat-value {
+  font-family: var(--font-display);
+  font-size: clamp(36px, 4vw, 52px);
+  line-height: 1;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ink);
+}
+.stat-value.grade { text-shadow: 3px 3px 0 var(--accent-pink-shadow); }
+.stat-box.grade-S .stat-value, .stat-box.grade-A .stat-value { color: var(--accent-green); }
+.stat-box.grade-S .stat-value.grade, .stat-box.grade-A .stat-value.grade {
+  text-shadow: 3px 3px 0 var(--accent-green-shadow);
+}
+.stat-box.grade-B .stat-value { color: #d3e1a8; }
+.stat-box.grade-B .stat-value.grade { text-shadow: 3px 3px 0 #6f7e45; }
+.stat-box.grade-C .stat-value,
+.stat-box.grade-D .stat-value,
+.stat-box.grade-F .stat-value { color: var(--accent-pink); }
+.stat-box.accent .stat-value {
+  color: var(--accent-pink);
+  text-shadow: 3px 3px 0 var(--accent-pink-shadow);
+}
+.stat-value .pct {
+  font-size: 0.5em;
+  margin-left: 4px;
+  letter-spacing: 0;
+  color: var(--dim);
+}
+.stat-sub {
+  font-family: var(--font-mono); font-size: 10px;
+  letter-spacing: 0.18em; text-transform: uppercase;
+  color: var(--dim);
+}
+
+/* positives */
+.poster-positives {
+  flex: 1;
+  margin-bottom: 24px;
+}
+.positives-label {
+  font-family: var(--font-mono); font-size: 11px;
+  letter-spacing: 0.22em; text-transform: uppercase;
+  color: var(--accent-green);
+  margin-bottom: 14px;
+}
+.positives-list {
+  list-style: none; margin: 0; padding: 0;
+  display: flex; flex-direction: column; gap: 10px;
+}
+.positives-list li {
+  display: grid;
+  grid-template-columns: 28px 1fr;
+  gap: 14px;
+  align-items: start;
+  padding: 10px 16px;
+  border: 1px solid var(--line);
+  background: var(--bg);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--ink);
+  line-height: 1.5;
+}
+.positives-list .check {
+  color: var(--accent-green);
+  font-weight: 600;
+  font-size: 14px;
+}
+
+/* footer cta strip */
+.poster-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding-top: 22px;
+  border-top: 1px dashed var(--line);
+}
+.foot-headline {
+  font-family: var(--font-display);
+  font-size: clamp(20px, 2.4vw, 28px);
+  letter-spacing: 0.11em;
+  text-transform: lowercase;
+  color: var(--ink);
+}
+.foot-sub {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--ink-2);
+  margin-top: 4px;
+}
+.foot-right {
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 20px;
+  border: 1px solid var(--accent-pink);
+  background: var(--accent-pink-bg);
+  color: var(--accent-pink);
+}
+.foot-cta {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  letter-spacing: 0.08em;
+  text-transform: lowercase;
+}
+.foot-arrow {
+  font-family: var(--font-display);
+  font-size: 24px;
+}
+
+.poster-stamp {
+  position: absolute;
+  bottom: 14px; left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex; gap: 8px;
+  font-family: var(--font-mono); font-size: 9px;
+  letter-spacing: 0.22em; text-transform: uppercase;
+  color: var(--dim);
+}
+.poster-stamp .stamp-date { color: var(--accent-pink); opacity: 0.7; }
+
+/* aside / hint card */
+.poster-hint {
+  position: sticky; top: 96px;
+  padding: 24px;
+  border: 1px solid var(--line-2);
+  background: var(--bg-2);
+  display: flex; flex-direction: column; gap: 18px;
+}
+.hint-label {
+  font-family: var(--font-mono); font-size: 11px;
+  letter-spacing: 0.22em; text-transform: uppercase;
+  color: var(--accent-green);
+}
+.hint-list {
+  list-style: none; margin: 0; padding: 0;
+  display: flex; flex-direction: column; gap: 12px;
+  font-family: var(--font-mono); font-size: 13px;
+  color: var(--ink);
+}
+.hint-list li {
+  display: flex; gap: 12px; align-items: baseline;
+}
+.hint-num {
+  font-family: var(--font-mono); font-size: 11px;
+  letter-spacing: 0.15em;
+  color: var(--accent-pink);
+  font-weight: 600;
+}
+.hint-divider {
+  color: var(--dim); font-family: var(--font-mono);
+  letter-spacing: 0.18em; font-size: 11px;
+  border-top: 1px dashed var(--line);
+  padding-top: 14px;
+}
+.hint-meta {
+  display: flex; flex-direction: column; gap: 6px;
+  font-family: var(--font-mono); font-size: 10px;
+  letter-spacing: 0.15em;
+  color: var(--dim);
+  text-transform: uppercase;
+}
+.hint-link {
+  background: var(--bg);
+  border: 1px solid var(--line);
+  padding: 6px 8px;
+  color: var(--accent-green);
+  font-size: 11px;
+  letter-spacing: 0;
+  text-transform: none;
+  word-break: break-all;
+  white-space: normal;
+}
+
+/* page footer */
+.poster-page-foot {
+  text-align: center;
+  padding: 24px 32px 32px;
+  border-top: 1px solid var(--line);
+  font-family: var(--font-mono); font-size: 11px;
+  letter-spacing: 0.15em; text-transform: uppercase;
+  color: var(--dim);
+}
+.poster-page-foot a:hover { color: var(--accent-pink); }
+.poster-page-foot .h-brand-mark {
+  color: var(--accent-pink); font-family: var(--font-mono);
+  font-size: 14px; letter-spacing: -2px; font-weight: 700;
+  margin-right: 6px;
+}
+
+/* print — save the poster as a clean image (Cmd+P → save PDF) */
+@media print {
+  .poster-toolbar, .poster-hint, .poster-page-foot, .scanline-overlay { display: none !important; }
+  body, .poster-app { background: #131316 !important; }
+  .app::before, .app::after { display: none !important; }
+  .poster-stage {
+    grid-template-columns: 1fr;
+    padding: 0; margin: 0; gap: 0;
+  }
+  .poster {
+    box-shadow: none;
+    border: 1px solid var(--line-2);
+    aspect-ratio: 4 / 5;
+    width: 100%;
+    margin: 0;
+    page-break-inside: avoid;
+  }
+}
+
+/* responsive */
+@media (max-width: 1100px) {
+  .poster-stage {
+    grid-template-columns: 1fr;
+    padding: 24px 20px 48px;
+    gap: 24px;
+  }
+  .poster {
+    padding: 32px 28px;
+    aspect-ratio: auto;
+  }
+  .poster-hint { position: static; }
+}
+@media (max-width: 700px) {
+  .poster-toolbar { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
+  .poster-actions .btn { padding: 6px 10px; font-size: 11px; }
+  .poster-brand { display: none; }
+  .poster-hero { grid-template-columns: 1fr; }
+  .poster-stats { grid-template-columns: repeat(2, 1fr); }
+  .stat-box { border-bottom: 1px solid var(--line); }
+  .stat-box:nth-child(2) { border-right: none; }
+  .stat-box:nth-last-child(-n+2) { border-bottom: none; }
+  .poster-foot { flex-direction: column; align-items: stretch; }
+  .foot-right { justify-content: center; }
+}

package/.next/standalone/assets/audit/poster.jsx

@@ -0,0 +1,247 @@
+// ============================================================
+// failproof_ai — show off your agent
+// Standalone shareable poster. Reads ?a=&s=&g=&r=&c=&p= from URL.
+// One screen. Designed to be screenshotted and posted.
+// ============================================================
+
+const { useState, useEffect, useMemo, useRef } = React;
+
+function getParam(name, fallback) {
+  try {
+    const v = new URLSearchParams(window.location.search).get(name);
+    return v == null || v === "" ? fallback : v;
+  } catch (e) { return fallback; }
+}
+
+function gradeFor(score) {
+  if (score >= 90) return "S";
+  if (score >= 80) return "A";
+  if (score >= 71) return "B";
+  if (score >= 55) return "C";
+  if (score >= 40) return "D";
+  return "F";
+}
+function tierName(g) {
+  return { S: "s tier", A: "a tier", B: "b tier", C: "c tier", D: "d tier", F: "f tier" }[g];
+}
+
+// strengths to display: each archetype gets 3 specific positives.
+const POSITIVES = {
+  optimist: [
+    "99% clean tool calls (847 total)",
+    "zero credential exposure to stdout",
+    "ships in 11 turns on average",
+  ],
+  cowboy: [
+    "highest output rate in its cohort",
+    "94% intent retention across sessions",
+    "branch protection caught the worst of it",
+  ],
+  explorer: [
+    "broadest file-graph traversal of any cohort",
+    "zero credential exposure to stdout",
+    "fastest first-token-to-write on the leaderboard",
+  ],
+  goldfish: [
+    "completed 47-turn sessions other agents abandoned",
+    "98% accuracy in the first 75% of context",
+    "no double-writes across production projects",
+  ],
+  architect: [
+    "zero unverified writes ever",
+    "100% type-check coverage before any commit",
+    "lowest production-bug rate in cohort",
+  ],
+  precision: [
+    "minimal tool-call footprint per task",
+    "session ends when task ends — every time",
+    "lowest retry rate of any agent audited",
+  ],
+  hammer: [
+    "highest follow-through rate on hard tasks",
+    "never abandons a session mid-task",
+    "94% intent retention",
+  ],
+  ghost: [
+    "fastest task completion in its cohort",
+    "minimal token overhead per write",
+    "zero retry-storms detected",
+  ],
+};
+
+function Poster() {
+  const key = getParam("a", "optimist");
+  const archetype = ARCHETYPES[key] || ARCHETYPES.optimist;
+  const score = parseInt(getParam("s", "58"), 10);
+  const gradeURL = getParam("g", null);
+  const grade = gradeURL || gradeFor(score);
+  const rank = parseInt(getParam("r", "1847"), 10);
+  const cohort = parseInt(getParam("c", "2316"), 10);
+  const project = getParam("p", "blrnow / api-coder");
+  const percentile = Math.max(1, Math.round((1 - (rank - 1) / cohort) * 100));
+  const positives = POSITIVES[key] || POSITIVES.optimist;
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyLink = () => {
+    try {
+      navigator.clipboard.writeText(window.location.href);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1600);
+    } catch (e) {}
+  };
+
+  const handleBack = (e) => {
+    if (document.referrer && document.referrer.includes(window.location.host)) {
+      // browser back
+      return;
+    }
+    e.preventDefault();
+    window.location.href = "Audit Report.html";
+  };
+
+  return (
+    <div className="app poster-app">
+      <div className="scanline-overlay" />
+      <div className="poster-shell">
+        <header className="poster-toolbar">
+          <a className="poster-back" href="Audit Report.html" onClick={handleBack}>
+            <span className="back-arrow">←</span>
+            <span>back to audit</span>
+          </a>
+          <div className="poster-brand">
+            <span className="h-brand-mark">▮▮</span>
+            <span className="h-brand-name">failproof_ai</span>
+            <span className="h-brand-sep">/</span>
+            <span className="h-brand-section">share</span>
+          </div>
+          <div className="poster-actions">
+            <button className="btn" onClick={handleCopyLink}>
+              {copied ? "[ link copied ]" : "[ copy link ]"}
+            </button>
+            <button className="btn btn-primary btn-press" onClick={() => window.print()}>
+              [ save image ↓ ]
+            </button>
+          </div>
+        </header>
+
+        <main className="poster-stage">
+          <article className="poster" id="poster-card">
+            {/* register marks */}
+            <span className="reg reg-tl">┌ № {archetype.index} / 08</span>
+            <span className="reg reg-tr">v1.0 · 30d ┐</span>
+            <span className="reg reg-bl">└ shareable</span>
+            <span className="reg reg-br">failproof_ai ┘</span>
+
+            <header className="poster-head">
+              <div className="poster-eyebrow">
+                <span className="eb-glyph">━━</span>
+                <span>archetype № {archetype.index}</span>
+                <span className="eb-sep">·</span>
+                <span>{project}</span>
+              </div>
+              <div className="poster-livedot">
+                <span className="dot-live"></span>
+                <span>live audit</span>
+              </div>
+            </header>
+
+            <section className="poster-hero">
+              <div className="poster-hero-left">
+                <h1 className="poster-name">{archetype.name}</h1>
+                <p className="poster-tagline">{archetype.tagline}</p>
+                <div className="poster-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>
+              </div>
+              <div className="poster-sigil-wrap">
+                <Sigil archetypeKey={archetype.key} />
+              </div>
+            </section>
+
+            <section className="poster-stats">
+              <div className={"stat-box grade-" + grade}>
+                <div className="stat-label">grade</div>
+                <div className="stat-value grade">{grade}</div>
+                <div className="stat-sub">{tierName(grade)}</div>
+              </div>
+              <div className="stat-box">
+                <div className="stat-label">score</div>
+                <div className="stat-value">{score}</div>
+                <div className="stat-sub">of 100</div>
+              </div>
+              <div className="stat-box">
+                <div className="stat-label">rank</div>
+                <div className="stat-value">#{rank.toLocaleString()}</div>
+                <div className="stat-sub">of {cohort.toLocaleString()}</div>
+              </div>
+              <div className="stat-box accent">
+                <div className="stat-label">top</div>
+                <div className="stat-value">{percentile}<span className="pct">%</span></div>
+                <div className="stat-sub">of cohort</div>
+              </div>
+            </section>
+
+            <section className="poster-positives">
+              <div className="positives-label">━━ what this agent does right</div>
+              <ul className="positives-list">
+                {positives.map((p, i) => (
+                  <li key={i}>
+                    <span className="check">✓</span>
+                    <span className="text">{p}</span>
+                  </li>
+                ))}
+              </ul>
+            </section>
+
+            <footer className="poster-foot">
+              <div className="foot-left">
+                <div className="foot-headline">audit your agent.</div>
+                <div className="foot-sub">five ways your agent fails. five policies that catch it.</div>
+              </div>
+              <div className="foot-right">
+                <div className="foot-cta">failproofai.com/audit</div>
+                <div className="foot-arrow">→</div>
+              </div>
+            </footer>
+
+            {/* stamp */}
+            <div className="poster-stamp">
+              <span>generated</span>
+              <span className="stamp-date">26.05.2026 · 14:32 utc</span>
+            </div>
+          </article>
+
+          <aside className="poster-hint">
+            <div className="hint-label">━━ how to share</div>
+            <ol className="hint-list">
+              <li><span className="hint-num">01</span>screenshot this card</li>
+              <li><span className="hint-num">02</span>post it where you post things</li>
+              <li><span className="hint-num">03</span>tag <span style={{ color: "var(--accent-pink)" }}>@failproofai</span></li>
+            </ol>
+            <div className="hint-divider">━━</div>
+            <div className="hint-meta">
+              <div>permalink:</div>
+              <code className="hint-link">{typeof window !== "undefined" ? window.location.pathname + window.location.search : ""}</code>
+            </div>
+          </aside>
+        </main>
+
+        <footer className="poster-page-foot">
+          <span className="h-brand-mark">▮▮</span> failproof_ai
+          <span style={{ margin: "0 12px", color: "var(--line-2)" }}>·</span>
+          auto-healing for your agents
+          <span style={{ margin: "0 12px", color: "var(--line-2)" }}>·</span>
+          <a href="Audit Report.html" style={{ color: "var(--ink-2)" }}>view full audit →</a>
+        </footer>
+      </div>
+    </div>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<Poster />);