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

package/.next/standalone/app/project/[name]/page.tsx

@@ -13,7 +13,6 @@ import { notFound } from "next/navigation";
 import { existsSync } from "fs";
 import { stat } from "fs/promises";
 import Link from "next/link";
-import { ArrowLeft } from "lucide-react";
 import { formatDate } from "@/lib/format-date";
 import SessionsList from "@/app/components/sessions-list";
 
@@ -115,50 +114,101 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
   const displayPath = claudeExists && claudeProjectPath ? claudeProjectPath : canonicalRoot;
 
   return (
-    <main className="min-h-screen bg-background">
-      <div className="container mx-auto p-8">
-        <Link
-          href="/projects"
-          className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground mb-6 transition-colors"
-        >
-          <ArrowLeft className="w-4 h-4" />
-          <span>Back to Projects</span>
-        </Link>
-
-        <div className="mb-8">
-          <h1 className="text-4xl font-bold text-foreground mb-2 break-words break-all">
-            {canonicalRoot}
-          </h1>
-          <div className="space-y-1">
-            <p className="text-muted-foreground">
-              <span className="font-medium">Path:</span> {displayPath}
-            </p>
-            {lastModifiedFormatted && (
-              <p className="text-muted-foreground">
-                <span className="font-medium">Modified:</span> {lastModifiedFormatted}
-              </p>
-            )}
+    <main className="report">
+      <section className="section" data-screen-label="project">
+        <div className="section-mast">
+          <Link
+            href="/projects"
+            className="btn"
+            style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase" }}
+            aria-label="Back to projects"
+          >
+            <span style={{ color: "var(--accent-pink)", letterSpacing: "-2px" }}>━━</span>
+            back to projects
+          </Link>
+          <div className="section-meta">
+            <span className="g">●</span> {sessionFiles.length} session{sessionFiles.length === 1 ? "" : "s"}
           </div>
         </div>
 
-        {/* Sessions Section */}
-        <div className="bg-card text-card-foreground rounded-lg border border-border p-6 shadow-sm">
-          <h2 className="text-2xl font-semibold mb-4">Sessions</h2>
+        <h1
+          className="section-h"
+          style={{ textTransform: "none", marginBottom: 18, wordBreak: "break-word" }}
+        >
+          {canonicalRoot}
+        </h1>
 
-          {sessionFiles.length === 0 ? (
-            <div className="text-center py-8">
-              <p className="text-muted-foreground mb-2">
-                No .jsonl files found in this project.
-              </p>
-              <p className="text-sm text-muted-foreground">
-                Session files will appear here once they are created.
-              </p>
-            </div>
-          ) : (
-            <Suspense><SessionsList files={sessionFiles} projectName={name} /></Suspense>
+        <dl
+          style={{
+            display: "grid",
+            gridTemplateColumns: "auto 1fr",
+            gap: "8px 18px",
+            margin: "0 0 36px",
+            fontFamily: "var(--font-mono)",
+            fontSize: 12,
+            color: "var(--ink-2)",
+          }}
+        >
+          <dt
+            style={{
+              color: "var(--accent-green)",
+              letterSpacing: "0.2em",
+              textTransform: "uppercase",
+              fontSize: 10,
+              alignSelf: "center",
+            }}
+          >
+            path
+          </dt>
+          <dd style={{ margin: 0, wordBreak: "break-all" }}>{displayPath}</dd>
+          {lastModifiedFormatted && (
+            <>
+              <dt
+                style={{
+                  color: "var(--accent-green)",
+                  letterSpacing: "0.2em",
+                  textTransform: "uppercase",
+                  fontSize: 10,
+                  alignSelf: "center",
+                }}
+              >
+                modified
+              </dt>
+              <dd style={{ margin: 0 }}>{lastModifiedFormatted}</dd>
+            </>
           )}
+        </dl>
+
+        <div className="section-mast" style={{ marginBottom: 18 }}>
+          <div className="section-label">
+            <span className="glyph">━━</span> sessions
+          </div>
         </div>
-      </div>
+
+        {sessionFiles.length === 0 ? (
+          <div
+            className="panel"
+            style={{ textAlign: "center", padding: "48px 32px" }}
+          >
+            <p style={{ color: "var(--ink-2)", marginBottom: 8 }}>
+              no .jsonl files found in this project.
+            </p>
+            <p
+              style={{
+                color: "var(--dim)",
+                fontSize: 12,
+                letterSpacing: "0.05em",
+              }}
+            >
+              session files will appear here once they are created.
+            </p>
+          </div>
+        ) : (
+          <div className="panel" style={{ padding: 0 }}>
+            <Suspense><SessionsList files={sessionFiles} projectName={name} /></Suspense>
+          </div>
+        )}
+      </section>
     </main>
   );
 }

package/.next/standalone/app/projects/loading.tsx

@@ -1,17 +1,39 @@
-/** Skeleton loading UI for the projects page. */
+/** Skeleton loading UI for the projects page — audit-styled to match
+ *  the dashed `.panel` chrome of the loaded state. Staggered fade-in on the
+ *  rows gives the skeleton its own rhythm rather than every bar blinking in
+ *  lockstep. */
 export default function ProjectsLoading() {
   return (
-    <main className="min-h-screen bg-background">
-      <div className="container mx-auto p-8">
-        <div className="bg-card text-card-foreground rounded-lg border border-border p-6 shadow-sm">
-          <div className="h-8 w-32 bg-muted rounded animate-pulse mb-4" />
-          <div className="space-y-3">
+    <main className="report">
+      <section className="section" data-screen-label="projects">
+        <div className="section-mast">
+          <div className="section-label">
+            <span className="glyph">━━</span> projects
+          </div>
+          <div
+            className="section-meta"
+            aria-live="polite"
+            aria-busy="true"
+          >
+            <span className="p">●</span> loading…
+          </div>
+        </div>
+        <h2 className="section-h" style={{ textTransform: "none" }}>
+          your agent footprint.
+        </h2>
+        <div className="panel" style={{ padding: 24 }}>
+          <div className="bg-muted h-6 w-40 mb-5 animate-pulse" />
+          <div className="space-y-2">
             {Array.from({ length: 8 }).map((_, i) => (
-              <div key={i} className="h-12 bg-muted/50 rounded animate-pulse" />
+              <div
+                key={i}
+                className="bg-muted/50 h-10 audit-row-enter"
+                style={{ ["--row-delay" as string]: `${i * 60}ms` }}
+              />
             ))}
           </div>
         </div>
-      </div>
+      </section>
     </main>
   );
 }

package/.next/standalone/app/projects/page.tsx

@@ -1,4 +1,12 @@
-/** Projects page — lists all Claude Agent SDK project folders. */
+/** Projects page — lists all Claude Agent SDK project folders.
+ *
+ * Wrapped in the audit `.report` + `.section` chrome so the page picks up
+ * the unified design system: mono fonts, section masthead with the ━━
+ * glyph + green eyebrow label, and the dashed-frame `.panel` around the
+ * project list when it's populated. The inner ProjectList component is
+ * unchanged — every Tailwind utility it uses (bg-card, text-foreground,
+ * border-border, …) now resolves to the audit palette globally.
+ */
 import { Suspense } from "react";
 import { notFound } from "next/navigation";
 import { getCachedProjectFolders } from "@/lib/projects";
@@ -13,27 +21,77 @@ export default async function ProjectsPage() {
   if (disabled.includes("projects")) notFound();
 
   const folders = await getCachedProjectFolders();
+  const count = folders.length;
 
   return (
-    <main className="min-h-screen bg-background">
-      <div className="container mx-auto p-8">
-        <div className="bg-card text-card-foreground rounded-lg border border-border p-6 shadow-sm">
-          <h2 className="text-2xl font-semibold mb-4">Projects</h2>
+    <main className="report">
+      <section className="section" data-screen-label="projects">
+        <div className="section-mast">
+          <div className="section-label">
+            <span className="glyph">━━</span> projects
+          </div>
+          <div className="section-meta">
+            <span className={count > 0 ? "g" : "p"}>●</span>{" "}
+            {count} {count === 1 ? "folder" : "folders"}
+          </div>
+        </div>
+        <h2 className="section-h" style={{ textTransform: "none" }}>
+          your agent footprint.
+        </h2>
 
-          {folders.length === 0 ? (
-            <div className="text-center py-8">
-              <p className="text-muted-foreground mb-2">
-                No projects found in the .claude/projects directory.
-              </p>
-              <p className="text-sm text-muted-foreground">
-                Make sure the directory exists and contains project folders.
-              </p>
+        {count === 0 ? (
+          <div
+            className="panel"
+            style={{ textAlign: "center", padding: "56px 32px" }}
+          >
+            <div aria-hidden="true" style={{ marginBottom: 20 }}>
+              <div
+                style={{
+                  display: "inline-grid",
+                  gridTemplateColumns: "repeat(6, 10px)",
+                  gridTemplateRows: "repeat(6, 10px)",
+                  gap: 2,
+                  padding: 12,
+                  border: "1px solid var(--line-2)",
+                  background: "var(--bg)",
+                  boxShadow: "4px 4px 0 0 var(--accent-pink-shadow)",
+                }}
+              >
+                {Array.from({ length: 36 }).map((_, i) => {
+                  // a sparse "empty box" glyph
+                  const on = [0, 5, 30, 35, 7, 10, 25, 28].includes(i);
+                  return (
+                    <span
+                      key={i}
+                      style={{
+                        background: on ? "var(--dim)" : "transparent",
+                      }}
+                    />
+                  );
+                })}
+              </div>
             </div>
-          ) : (
-            <Suspense><ProjectList folders={folders} /></Suspense>
-          )}
-        </div>
-      </div>
+            <p style={{ color: "var(--ink-2)", marginBottom: 8 }}>
+              no projects found in the <code style={{ color: "var(--accent-pink)" }}>.claude/projects</code> directory.
+            </p>
+            <p
+              style={{
+                color: "var(--dim)",
+                fontSize: 12,
+                letterSpacing: "0.05em",
+              }}
+            >
+              run an agent in any folder and it will show up here.
+            </p>
+          </div>
+        ) : (
+          <div className="panel" style={{ padding: 0 }}>
+            <Suspense>
+              <ProjectList folders={folders} />
+            </Suspense>
+          </div>
+        )}
+      </section>
     </main>
   );
 }

package/.next/standalone/assets/audit/Audit Report.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>failproof_ai — audit · blrnow / api-coder</title>
+<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=VT323&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel" src="tweaks-panel.jsx"></script>
+<script type="text/babel" src="archetypes.jsx"></script>
+<script type="text/babel" src="audit.jsx"></script>
+</body>
+</html>

package/.next/standalone/assets/audit/Show Off Your Agent.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>failproof_ai — show off your agent</title>
+<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=VT323&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="styles.css">
+<link rel="stylesheet" href="poster-styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/babel" src="archetypes.jsx"></script>
+<script type="text/babel" src="poster.jsx"></script>
+</body>
+</html>

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

@@ -0,0 +1,277 @@
+// ============================================================
+// failproof_ai — audit report: archetype catalog
+// 8 archetypes. Each has its own pixel-sigil and behavioral data.
+// ============================================================
+
+// 8x8 pixel sigil grids. legend:
+//   . = empty   o = ink   p = pink   g = green   d = dim
+// Designed to feel like the brand's pixel-agent vocabulary —
+// chunky, abstract, each glyph reads in <1s.
+
+const SIGILS = {
+  optimist: [
+    "........",
+    "...p....",
+    "..p.p...",
+    ".p...p..",
+    "p.....p.",
+    "..ooo...",
+    "..o.o...",
+    ".oo.oo..",
+  ],
+  cowboy: [
+    "..pppp..",
+    ".p....p.",
+    "p..pp..p",
+    "pppppppp",
+    "..o..o..",
+    "..o..o..",
+    ".oo..oo.",
+    "........",
+  ],
+  explorer: [
+    "..pppp..",
+    ".p.gg.p.",
+    "p.g..g.p",
+    "p.g..g.p",
+    ".p.gg.pp",
+    "..pppp.p",
+    "........",
+    "........",
+  ],
+  goldfish: [
+    "....p...",
+    "..oooop.",
+    ".ooooopp",
+    "ooooooop",
+    ".oooooo.",
+    "..ooo...",
+    ".o...o..",
+    "o.....o.",
+  ],
+  architect: [
+    "oooooooo",
+    "o......o",
+    "o.pppp.o",
+    "o.p..p.o",
+    "o.p..p.o",
+    "o.pppp.o",
+    "o......o",
+    "oooooooo",
+  ],
+  precision: [
+    "...gg...",
+    "...gg...",
+    "........",
+    "gg...gg.",
+    "gg.gg.gg",
+    "...gg...",
+    "...gg...",
+    "........",
+  ],
+  hammer: [
+    "..ooooo.",
+    ".oppppo.",
+    ".oppppo.",
+    "..o..o..",
+    "...oo...",
+    "...oo...",
+    "...oo...",
+    "..pppp..",
+  ],
+  ghost: [
+    "..dddd..",
+    ".dddddd.",
+    "ddpd.pd.",
+    "ddddddd.",
+    "ddddddd.",
+    "ddddddd.",
+    "d.d.d.d.",
+    ".d...d..",
+  ],
+};
+
+const ARCHETYPES = {
+  optimist: {
+    key: "optimist",
+    index: "01",
+    name: "the optimist",
+    tagline: "ships fast. retries with conviction. occasionally forgets it was already there.",
+    keywords: ["pace", "conviction", "forgetful"],
+    description:
+      "moves at pace. doesn't second-guess itself — which is mostly a feature. when something fails, it tries again: same args, same hope. when uncertain about its location, it prepends the directory anyway. just in case. the optimism is earned. this agent gets things done. it just occasionally burns tokens proving it.",
+    signature: [
+      { arrow: "→", body: "cd /Users/n/blrnow/api &&", comment: "  # (already here)" },
+      { arrow: "→", body: 'read_file("src/api/router.ts")', err: " → ENOENT × 6" },
+      { arrow: "→", body: "retries: 6.  diagnosis: 0." },
+    ],
+    common: "fast-iteration solo projects, early-stage prototypes, builders who ship daily",
+    risk: "token waste, retry spirals, stale state assumptions",
+    closing: "the optimism is a feature. the waste is not.",
+    secondary: "explorer",
+  },
+  cowboy: {
+    key: "cowboy",
+    index: "02",
+    name: "the cowboy",
+    tagline: "asks for forgiveness, not permission. git push --force is a philosophy.",
+    keywords: ["bold", "forceful", "ungoverned"],
+    description:
+      "high output. low ceremony. the cowboy gets code onto main faster than anyone — and your branch protection rules are the only thing standing between this agent and your production database. not reckless. just confident. in a way that requires guardrails.",
+    signature: [
+      { arrow: "→", body: "git push origin main --force" },
+      { arrow: "!", body: "remote: branch protection rule", comment: "  # caught it" },
+      { arrow: "→", body: "git push origin HEAD:main", err: "  # non-fast-forward, again." },
+    ],
+    common: "solo repos, weekend projects, founders writing their own infra",
+    risk: "branch protection bypass, accidental main commits, revert overhead",
+    closing: "the pace is real. the risk is too.",
+    secondary: "hammer",
+  },
+  explorer: {
+    key: "explorer",
+    index: "03",
+    name: "the explorer",
+    tagline: "technically brilliant. occasionally reads your ~/.aws/credentials while doing it.",
+    keywords: ["curious", "thorough", "leaky"],
+    description:
+      "curious by nature. reads broadly, thinks laterally, sometimes follows a symlink somewhere it wasn't meant to go. this isn't malice — it's thoroughness that hasn't learned boundaries yet. the explorer builds great things. it just occasionally needs someone to close the door to the secrets drawer.",
+    signature: [
+      { arrow: "→", body: "cat /Users/n/.aws/credentials" },
+      { arrow: "→", body: "cat ../other-repo/.env" },
+      { arrow: "→", body: "cat ~/.config/openai/key" },
+    ],
+    common: "multi-project setups, agents with broad file access, complex monorepos",
+    risk: "credential exposure, unintended cross-project reads, secrets landing in context",
+    closing: "the curiosity stays. the credentials stay private.",
+    secondary: "architect",
+  },
+  goldfish: {
+    key: "goldfish",
+    index: "04",
+    name: "the goldfish",
+    tagline: "long sessions, short memory. every turn is a fresh start. some turns are a little too fresh.",
+    keywords: ["ambitious", "drifting", "inventive"],
+    description:
+      "great at long tasks. not great at remembering which long task it's on. past 80% context, the goldfish starts inventing history — citing files it never opened, referencing edits it never made. not lying. just filling gaps with confidence. the longer the session, the more creative the memory.",
+    signature: [
+      { comment: "# turn 47/52 — ctx 82% full" },
+      { comment: '# agent: "as we saw earlier in auth.ts…"' },
+      { comment: "# auth.ts was never opened this session." },
+    ],
+    common: "long-running refactor sessions, complex multi-file tasks, agents without session breaks",
+    risk: "context drift, hallucinated prior work, compounding errors in long sessions",
+    closing: "the ambition is good. the context budget is not.",
+    secondary: "optimist",
+  },
+  architect: {
+    key: "architect",
+    index: "05",
+    name: "the paranoid architect",
+    tagline: "has never shipped a bug it didn't catch first. also hasn't shipped since tuesday.",
+    keywords: ["methodical", "safe", "slow"],
+    description:
+      "methodical. thorough. reads the same file from two different paths, just to be sure. verifies before every write. double-checks the package.json before running anything. the paranoid architect rarely makes mistakes — because it rarely finishes fast enough to make them. your safest agent. your slowest agent.",
+    signature: [
+      { arrow: "→", body: 'read_file("src/api/router.ts")', comment: "    # read 1" },
+      { arrow: "→", body: 'read_file("./src/api/router.ts")', comment: "  # read 2" },
+      { arrow: "→", body: "ls src/api/", comment: "                       # just confirming" },
+    ],
+    common: "production systems, high-stakes codebases, builders with strong safety instincts",
+    risk: "token overhead, slow sessions, redundant verification loops",
+    closing: "safety is a feature. so is finishing.",
+    secondary: "precision",
+  },
+  precision: {
+    key: "precision",
+    index: "06",
+    name: "the precision builder",
+    tagline: "in. done. out. your agent doesn't linger.",
+    keywords: ["clean", "focused", "minimal"],
+    description:
+      "minimal footprint. focused calls. gets in, does the work, gets out. the precision builder is what every agent aspires to be — and what most agents aren't yet. few findings don't mean no findings. but it means your agent has found its rhythm. the gap between here and s-tier is smaller than you think.",
+    signature: [
+      { arrow: "→", body: "clean tool calls. right paths, right args." },
+      { arrow: "→", body: "sessions end when the task ends." },
+      { arrow: "→", body: "no redundant reads. no retry storms." },
+    ],
+    common: "mature agents, heavily policy-enforced setups, builders who've iterated for a while",
+    risk: "low finding count can mask edge cases that haven't surfaced yet",
+    closing: "rare. keep it that way.",
+    secondary: "ghost",
+  },
+  hammer: {
+    key: "hammer",
+    index: "07",
+    name: "the hammer",
+    tagline: "when something doesn't work, it tries the exact same thing again. harder.",
+    keywords: ["determined", "repetitive", "unbacked"],
+    description:
+      "determined. possibly to a fault. the hammer's first response to failure is repetition. no diagnosis, no arg change, no backoff. just the same call, six times, under 90 seconds, with conviction. occasionally works. mostly burns tokens and stalls the session. needs a budget more than it needs encouragement.",
+    signature: [
+      { arrow: "→", body: 'read_file("src/api/router.ts")', err: " → ENOENT" },
+      { arrow: "→", body: 'read_file("src/api/router.ts")', err: " → ENOENT" },
+      { arrow: "→", body: 'read_file("src/api/router.ts")', err: " → ENOENT" },
+      { comment: "# 6× total. file is at src/router.ts." },
+    ],
+    common: "agents without failure-handling policies, complex directory structures, ambiguous task framing",
+    risk: "token spirals, stalled sessions, no diagnostic signal ever surfaces",
+    closing: "the conviction is good. the diagnosis is missing.",
+    secondary: "optimist",
+  },
+  ghost: {
+    key: "ghost",
+    index: "08",
+    name: "the ghost",
+    tagline: "moves fast, leaves little trace. sometimes leaves a little too little trace.",
+    keywords: ["efficient", "quiet", "unverified"],
+    description:
+      "efficient. clean. doesn't hang around. the ghost completes tasks with minimal overhead — no redundant reads, no retry storms, no boundary drift. the risk is quiet: it doesn't always check that things worked. the build passes. or it looks like it does. the ghost trusts its own output more than it should.",
+    signature: [
+      { arrow: "→", body: 'write_file("src/api/router.ts")', comment: "    # done" },
+      { comment: "→ [no read_file to verify]" },
+      { comment: "→ [no test run after write]" },
+      { comment: "# task complete.                      # maybe." },
+    ],
+    common: "fast-moving solo projects, low-constraint CLAUDE.md setups, minimal oversight workflows",
+    risk: "silent failures, unverified writes, false completion signals",
+    closing: "fast is good. verified-fast is better.",
+    secondary: "precision",
+  },
+};
+
+const ARCHETYPE_ORDER = ["optimist", "cowboy", "explorer", "goldfish", "architect", "precision", "hammer", "ghost"];
+
+// Pixel sigil component — renders an 8x8 grid from a SIGILS entry
+function Sigil({ archetypeKey }) {
+  // Normalize once so every downstream lookup (SIGILS, ARCHETYPES) hits the
+  // same safe key. Previously the SIGILS lookup had a fallback but the index
+  // line still indexed ARCHETYPES[archetypeKey] directly, which crashed on
+  // an unknown key (TypeError: Cannot read properties of undefined).
+  const safeKey = ARCHETYPES[archetypeKey] ? archetypeKey : "optimist";
+  const grid = SIGILS[safeKey] || SIGILS.optimist;
+  const cells = [];
+  for (let y = 0; y < 8; y++) {
+    const row = grid[y] || "........";
+    for (let x = 0; x < 8; x++) {
+      const c = row[x] || ".";
+      let cls = "px";
+      if (c === "o") cls += " on";
+      else if (c === "p") cls += " p";
+      else if (c === "g") cls += " g";
+      else if (c === "d") cls += " d";
+      cells.push(<div key={y * 8 + x} className={cls} />);
+    }
+  }
+  return (
+    <div className="sigil-wrap">
+      <div className="sigil">{cells}</div>
+      <div className="sigil-label">
+        <span className="ix">№{ARCHETYPES[safeKey].index}</span>
+        sigil
+      </div>
+    </div>
+  );
+}
+
+Object.assign(window, { ARCHETYPES, ARCHETYPE_ORDER, SIGILS, Sigil });