paracosm 0.9.986 → 0.9.995

package/assets/diagrams/paracosm-flow.svg

@@ -0,0 +1,573 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1180" role="img" aria-labelledby="paracosm-flow-title paracosm-flow-desc" preserveAspectRatio="xMidYMid meet">
+  <title id="paracosm-flow-title">Paracosm system flow: world source to forked futures</title>
+  <desc id="paracosm-flow-desc">A vertical flow diagram of the Paracosm pipeline. Prompts, briefs, URLs, PDFs, or JSON drafts feed into the Scenario Compiler, producing a typed ScenarioPackage. A deterministic seeded kernel and the Runtime Orchestrator run a per-turn pipeline of Director, Departments, Commander, and Reactions, with side modules for runtime tool forging in a V8 sandbox, an LLM judge, HEXACO personality drift, and AgentMemory. The result is an agent swarm of personality-typed cells and a Zod-validated RunArtifact that can be replayed byte-for-byte or forked at any past turn.</desc>
+
+  <style><![CDATA[
+    :root {
+      --bg: #0a0806;
+      --panel: #14110e;
+      --card: #1c1915;
+      --elevated: #242018;
+      --border: #4a3e2c;
+      --border-soft: #2e2a22;
+      --text-1: #f5f0e4;
+      --text-2: #d8ccb0;
+      --text-3: #a89878;
+      --text-4: #7a6c52;
+      --amber: #e8b44a;
+      --amber-dim: #8b6a2e;
+      --amber-soft: rgba(232, 180, 74, 0.12);
+      --rust: #e06530;
+      --rust-dim: #8b3d1e;
+      --rust-soft: rgba(224, 101, 48, 0.10);
+      --teal: #4ca8a8;
+      --teal-dim: #2a5f5f;
+      --teal-soft: rgba(76, 168, 168, 0.12);
+      --green: #6a9c3a;
+      --shadow: rgba(0, 0, 0, 0.45);
+      --glow: rgba(232, 180, 74, 0.05);
+    }
+    @media (prefers-color-scheme: light) {
+      :root {
+        --bg: #f0e6d2;
+        --panel: #e4d8c0;
+        --card: #f8f2e4;
+        --elevated: #faf6ee;
+        --border: #9a8868;
+        --border-soft: #c8bca0;
+        --text-1: #1a1208;
+        --text-2: #2e2418;
+        --text-3: #4a3e2c;
+        --text-4: #6a5c44;
+        --amber: #6b4700;
+        --amber-dim: #463000;
+        --amber-soft: rgba(107, 71, 0, 0.10);
+        --rust: #8e2c0c;
+        --rust-dim: #5a1e06;
+        --rust-soft: rgba(142, 44, 12, 0.08);
+        --teal: #186060;
+        --teal-dim: #0e4040;
+        --teal-soft: rgba(24, 96, 96, 0.10);
+        --green: #305a10;
+        --shadow: rgba(60, 40, 10, 0.15);
+        --glow: rgba(107, 71, 0, 0.04);
+      }
+    }
+    .bg { fill: var(--bg); }
+    .panel-fill { fill: var(--panel); }
+    .card-fill { fill: var(--card); }
+    .elevated-fill { fill: var(--elevated); }
+    .border-stroke { stroke: var(--border); fill: none; }
+    .soft-stroke { stroke: var(--border-soft); fill: none; }
+    .amber-fill { fill: var(--amber); }
+    .amber-stroke { stroke: var(--amber); fill: none; }
+    .rust-fill { fill: var(--rust); }
+    .rust-stroke { stroke: var(--rust); fill: none; }
+    .teal-fill { fill: var(--teal); }
+    .teal-stroke { stroke: var(--teal); fill: none; }
+    .green-fill { fill: var(--green); }
+    .t1 { fill: var(--text-1); font-family: 'Inter', system-ui, -apple-system, sans-serif; }
+    .t2 { fill: var(--text-2); font-family: 'Inter', system-ui, -apple-system, sans-serif; }
+    .t3 { fill: var(--text-3); font-family: 'Inter', system-ui, -apple-system, sans-serif; }
+    .t4 { fill: var(--text-4); font-family: 'Inter', system-ui, -apple-system, sans-serif; }
+    .mono { font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; }
+    .label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
+    .title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
+    .body { font-size: 13px; font-weight: 400; }
+    .small { font-size: 11px; font-weight: 400; }
+    .tiny { font-size: 10px; font-weight: 500; letter-spacing: 0.04em; }
+    .heading-band { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
+    .arrow { fill: var(--text-3); }
+    .flow-line { stroke: var(--text-3); stroke-width: 1.5; fill: none; }
+    .flow-line-strong { stroke: var(--amber); stroke-width: 2; fill: none; }
+    .annotation-line { stroke: var(--text-4); stroke-width: 1; fill: none; stroke-dasharray: 3 3; }
+    .pulse { animation: pulse 4s ease-in-out infinite; }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.55; }
+    }
+  ]]></style>
+
+  <defs>
+    <!-- Arrow marker -->
+    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+      <path d="M0,1 L9,5 L0,9 z" class="arrow"/>
+    </marker>
+    <marker id="arrow-amber" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0,1 L9,5 L0,9 z" class="amber-fill"/>
+    </marker>
+    <marker id="arrow-rust" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0,1 L9,5 L0,9 z" class="rust-fill"/>
+    </marker>
+    <marker id="arrow-teal" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+      <path d="M0,1 L9,5 L0,9 z" class="teal-fill"/>
+    </marker>
+
+    <!-- Glow filter for emphasis blocks -->
+    <filter id="soft-glow" x="-10%" y="-10%" width="120%" height="120%">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Background -->
+  <rect class="bg" width="1200" height="1180"/>
+
+  <!-- Top title strip -->
+  <g transform="translate(0, 24)">
+    <text x="600" y="0" text-anchor="middle" class="t3 heading-band mono">PARACOSM · SYSTEM FLOW</text>
+    <text x="600" y="22" text-anchor="middle" class="t1 title">From a paragraph to a forkable, replayable, multi-agent world.</text>
+    <line x1="430" y1="40" x2="770" y2="40" class="soft-stroke" stroke-width="1"/>
+  </g>
+
+  <!-- =============================================== -->
+  <!-- LAYER 1: WORLD SOURCE -->
+  <!-- =============================================== -->
+  <g transform="translate(0, 90)">
+    <!-- Section label (left) -->
+    <text x="24" y="18" class="label mono"><tspan class="amber-fill">01</tspan><tspan class="t4" dx="6">· INPUT</tspan></text>
+
+    <!-- Input chips row -->
+    <g transform="translate(220, 0)">
+      <!-- prompt -->
+      <g transform="translate(0, 0)">
+        <rect width="120" height="50" rx="8" class="card-fill" stroke="var(--border)" stroke-width="1"/>
+        <text x="60" y="22" text-anchor="middle" class="t3 tiny mono">PROMPT</text>
+        <text x="60" y="38" text-anchor="middle" class="t1 body">"What if…"</text>
+      </g>
+      <!-- brief -->
+      <g transform="translate(140, 0)">
+        <rect width="120" height="50" rx="8" class="card-fill" stroke="var(--border)" stroke-width="1"/>
+        <text x="60" y="22" text-anchor="middle" class="t3 tiny mono">BRIEF</text>
+        <text x="60" y="38" text-anchor="middle" class="t1 body">Board memo</text>
+      </g>
+      <!-- URL -->
+      <g transform="translate(280, 0)">
+        <rect width="120" height="50" rx="8" class="card-fill" stroke="var(--border)" stroke-width="1"/>
+        <text x="60" y="22" text-anchor="middle" class="t3 tiny mono">URL</text>
+        <text x="60" y="38" text-anchor="middle" class="t1 body">News, paper</text>
+      </g>
+      <!-- PDF -->
+      <g transform="translate(420, 0)">
+        <rect width="120" height="50" rx="8" class="card-fill" stroke="var(--border)" stroke-width="1"/>
+        <text x="60" y="22" text-anchor="middle" class="t3 tiny mono">PDF</text>
+        <text x="60" y="38" text-anchor="middle" class="t1 body">Extract text</text>
+      </g>
+      <!-- JSON -->
+      <g transform="translate(560, 0)">
+        <rect width="120" height="50" rx="8" class="card-fill" stroke="var(--amber)" stroke-width="1.5"/>
+        <text x="60" y="22" text-anchor="middle" class="amber-fill tiny mono">JSON DRAFT</text>
+        <text x="60" y="38" text-anchor="middle" class="t1 body">Hand-authored</text>
+      </g>
+    </g>
+
+    <!-- Side annotation right -->
+    <g transform="translate(960, 0)">
+      <text x="0" y="14" class="t3 small mono">seedText / seedUrl</text>
+      <text x="0" y="30" class="t4 small">extracts ground truth</text>
+      <text x="0" y="45" class="t4 small">for citation memory</text>
+    </g>
+  </g>
+
+  <!-- Down arrow from inputs to compiler -->
+  <line x1="600" y1="148" x2="600" y2="184" class="flow-line" marker-end="url(#arrow)"/>
+
+  <!-- =============================================== -->
+  <!-- LAYER 2: SCENARIO COMPILER -->
+  <!-- =============================================== -->
+  <g transform="translate(0, 192)">
+    <text x="24" y="58" class="label mono"><tspan class="amber-fill">02</tspan><tspan class="t4" dx="6">· COMPILE</tspan></text>
+    <text x="24" y="74" class="t4 small">~$0.10 first run</text>
+    <text x="24" y="88" class="t4 small">cached forever</text>
+
+    <!-- Compiler block -->
+    <g transform="translate(180, 0)">
+      <rect width="840" height="170" rx="10" class="panel-fill" stroke="var(--rust)" stroke-width="1.5"/>
+      <text x="20" y="24" class="rust-fill label mono">SCENARIO COMPILER</text>
+      <text x="20" y="42" class="t2 small">LLM-generated runtime hooks · validated against DraftScenarioSchema</text>
+
+      <!-- 4 hook cards -->
+      <g transform="translate(20, 56)">
+        <g transform="translate(0, 0)">
+          <rect width="180" height="46" rx="6" class="card-fill" stroke="var(--border)" stroke-width="1"/>
+          <text x="10" y="18" class="t3 tiny mono">progressionHook</text>
+          <text x="10" y="34" class="t2 small">between-turn state</text>
+        </g>
+        <g transform="translate(200, 0)">
+          <rect width="180" height="46" rx="6" class="card-fill" stroke="var(--border)" stroke-width="1"/>
+          <text x="10" y="18" class="t3 tiny mono">departmentPromptHook</text>
+          <text x="10" y="34" class="t2 small">analysis context</text>
+        </g>
+        <g transform="translate(400, 0)">
+          <rect width="180" height="46" rx="6" class="card-fill" stroke="var(--border)" stroke-width="1"/>
+          <text x="10" y="18" class="t3 tiny mono">fingerprintHook</text>
+          <text x="10" y="34" class="t2 small">trajectory hash</text>
+        </g>
+        <g transform="translate(600, 0)">
+          <rect width="180" height="46" rx="6" class="card-fill" stroke="var(--border)" stroke-width="1"/>
+          <text x="10" y="18" class="t3 tiny mono">politicsHook</text>
+          <text x="10" y="34" class="t2 small">social effects</text>
+        </g>
+      </g>
+
+      <!-- Grounding pipeline -->
+      <g transform="translate(20, 116)">
+        <rect width="780" height="40" rx="6" class="elevated-fill" stroke="var(--teal-dim)" stroke-width="1"/>
+        <text x="14" y="16" class="teal-fill tiny mono">GROUNDING (optional)</text>
+        <text x="14" y="32" class="t2 small">
+          <tspan class="t1">AgentOS WebSearchService</tspan>
+          <tspan dx="6">→</tspan>
+          <tspan dx="4">Firecrawl + Tavily + Serper + Brave (parallel)</tspan>
+          <tspan dx="6">→</tspan>
+          <tspan dx="4" class="t1">RRF fusion</tspan>
+          <tspan dx="6">→</tspan>
+          <tspan dx="4" class="t1">Cohere rerank-v3.5</tspan>
+          <tspan dx="6">→</tspan>
+          <tspan dx="4" class="t1">AgentMemory.sqlite</tspan>
+        </text>
+      </g>
+    </g>
+  </g>
+
+  <!-- Down arrow from compiler to package -->
+  <line x1="600" y1="372" x2="600" y2="408" class="flow-line" marker-end="url(#arrow)"/>
+
+  <!-- =============================================== -->
+  <!-- LAYER 3: SCENARIO PACKAGE + DETERMINISTIC KERNEL (side by side) -->
+  <!-- =============================================== -->
+  <g transform="translate(0, 416)">
+    <text x="24" y="42" class="label mono"><tspan class="amber-fill">03</tspan><tspan class="t4" dx="6">· WORLD CONTRACT</tspan></text>
+
+    <!-- ScenarioPackage block (left) -->
+    <g transform="translate(180, 0)">
+      <rect width="400" height="120" rx="10" class="panel-fill" stroke="var(--amber)" stroke-width="1.5"/>
+      <text x="20" y="24" class="amber-fill label mono">SCENARIO PACKAGE</text>
+      <text x="20" y="44" class="t2 small">Typed contract · Zod-validated · cached to disk</text>
+
+      <g transform="translate(20, 60)">
+        <text class="t3 mono small">
+          <tspan x="0" dy="0">{ id, labels, setup,</tspan>
+          <tspan x="0" dy="14">  departments[], metrics[],</tspan>
+          <tspan x="0" dy="14">  knowledge?, hooks }</tspan>
+        </text>
+      </g>
+    </g>
+
+    <!-- Deterministic Kernel block (right) -->
+    <g transform="translate(620, 0)">
+      <rect width="400" height="120" rx="10" class="panel-fill" stroke="var(--teal)" stroke-width="1.5"/>
+      <text x="20" y="24" class="teal-fill label mono">DETERMINISTIC KERNEL</text>
+      <text x="20" y="44" class="t2 small">Seeded PRNG · state machine · progression</text>
+
+      <!-- Decorative kernel detail -->
+      <g transform="translate(20, 60)">
+        <circle cx="14" cy="14" r="10" class="teal-stroke" stroke-width="1.5" fill="none"/>
+        <circle cx="14" cy="14" r="4" class="teal-fill"/>
+        <text x="40" y="10" class="t3 small mono">seed: 42</text>
+        <text x="40" y="24" class="t4 small">same seed → byte-for-byte replay</text>
+        <text x="40" y="40" class="t4 small">divergence comes from LLM stages</text>
+      </g>
+    </g>
+  </g>
+
+  <!-- Connecting flow into orchestrator -->
+  <line x1="380" y1="536" x2="380" y2="566" class="flow-line" marker-end="url(#arrow)"/>
+  <line x1="820" y1="536" x2="820" y2="566" class="flow-line" marker-end="url(#arrow)"/>
+
+  <!-- =============================================== -->
+  <!-- LAYER 4: RUNTIME ORCHESTRATOR (per turn) -->
+  <!-- =============================================== -->
+  <g transform="translate(0, 574)">
+    <text x="24" y="42" class="label mono"><tspan class="amber-fill">04</tspan><tspan class="t4" dx="6">· TURN LOOP</tspan></text>
+    <text x="24" y="58" class="t4 small">runs per actor</text>
+    <text x="24" y="72" class="t4 small">cohort fans out</text>
+    <text x="24" y="86" class="t4 small">via worker pool</text>
+
+    <!-- Big orchestrator panel -->
+    <rect x="180" y="0" width="840" height="280" rx="10" class="panel-fill" stroke="var(--amber)" stroke-width="1.5" filter="url(#soft-glow)"/>
+    <text x="200" y="24" class="amber-fill label mono">RUNTIME ORCHESTRATOR</text>
+    <text x="200" y="42" class="t2 small">turn pipeline · every structured LLM call Zod-validated with retry-with-feedback</text>
+
+    <!-- Four pipeline cards across the top -->
+    <g transform="translate(200, 60)">
+      <!-- 1. Director -->
+      <g transform="translate(0, 0)">
+        <rect width="180" height="80" rx="8" class="card-fill" stroke="var(--rust)" stroke-width="1.2"/>
+        <text x="14" y="18" class="rust-fill tiny mono">DIRECTOR</text>
+        <text x="14" y="38" class="t1 body">Emergent event</text>
+        <text x="14" y="56" class="t3 small">reads state + history</text>
+        <text x="14" y="70" class="t3 small">picks crisis category</text>
+      </g>
+      <!-- 2. Departments -->
+      <g transform="translate(200, 0)">
+        <rect width="180" height="80" rx="8" class="card-fill" stroke="var(--teal)" stroke-width="1.2"/>
+        <text x="14" y="18" class="teal-fill tiny mono">DEPARTMENTS · parallel</text>
+        <text x="14" y="38" class="t1 body">Specialist analysis</text>
+        <text x="14" y="56" class="t3 small">medical · engineering</text>
+        <text x="14" y="70" class="t3 small">agri · psych · gov</text>
+      </g>
+      <!-- 3. Commander -->
+      <g transform="translate(400, 0)">
+        <rect width="180" height="80" rx="8" class="card-fill" stroke="var(--amber)" stroke-width="1.2"/>
+        <text x="14" y="18" class="amber-fill tiny mono">COMMANDER</text>
+        <text x="14" y="38" class="t1 body">HEXACO-weighted</text>
+        <text x="14" y="56" class="t3 small">picks one policy</text>
+        <text x="14" y="70" class="t3 small">no analysis, only choice</text>
+      </g>
+      <!-- 4. Reactions -->
+      <g transform="translate(600, 0)">
+        <rect width="180" height="80" rx="8" class="card-fill" stroke="var(--border)" stroke-width="1.2"/>
+        <text x="14" y="18" class="t3 tiny mono">REACTIONS · batched</text>
+        <text x="14" y="38" class="t1 body">Agent responses</text>
+        <text x="14" y="56" class="t3 small">10 per LLM call</text>
+        <text x="14" y="70" class="t3 small">memory + drift updates</text>
+      </g>
+    </g>
+
+    <!-- Inline arrows between pipeline cards -->
+    <g transform="translate(200, 100)">
+      <line x1="180" y1="0" x2="200" y2="0" class="flow-line" marker-end="url(#arrow)"/>
+      <line x1="380" y1="0" x2="400" y2="0" class="flow-line" marker-end="url(#arrow)"/>
+      <line x1="580" y1="0" x2="600" y2="0" class="flow-line" marker-end="url(#arrow)"/>
+    </g>
+
+    <!-- Mid-pipeline detail: forge + judge + drift + memory -->
+    <g transform="translate(200, 160)">
+      <!-- Tool Forge -->
+      <g transform="translate(0, 0)">
+        <rect width="190" height="100" rx="8" class="elevated-fill" stroke="var(--rust)" stroke-width="1.2" stroke-dasharray="4 2"/>
+        <text x="14" y="18" class="rust-fill tiny mono">TOOL FORGE · sandbox</text>
+        <text x="14" y="38" class="t1 small">Department invents a tool</text>
+        <text x="14" y="56" class="t2 small">node:vm V8 sandbox</text>
+        <text x="14" y="70" class="t2 small">Zod-validated function</text>
+        <text x="14" y="86" class="t3 small">10s timeout · 128MB cap</text>
+      </g>
+      <!-- LLM Judge -->
+      <g transform="translate(210, 0)">
+        <rect width="170" height="100" rx="8" class="elevated-fill" stroke="var(--border)" stroke-width="1.2"/>
+        <text x="14" y="18" class="t3 tiny mono">LLM JUDGE</text>
+        <text x="14" y="38" class="t1 small">Safety review</text>
+        <text x="14" y="56" class="t2 small">approves / rejects</text>
+        <text x="14" y="70" class="t2 small">scores correctness</text>
+        <text x="14" y="86" class="t3 small">forged tool enters ledger</text>
+      </g>
+      <!-- HEXACO Drift -->
+      <g transform="translate(400, 0)">
+        <rect width="170" height="100" rx="8" class="elevated-fill" stroke="var(--amber)" stroke-width="1.2"/>
+        <text x="14" y="18" class="amber-fill tiny mono">HEXACO DRIFT</text>
+        <text x="14" y="38" class="t1 small">Traits evolve</text>
+        <text x="14" y="56" class="t2 small">role activation pull</text>
+        <text x="14" y="70" class="t2 small">outcome reinforcement</text>
+        <text x="14" y="86" class="t3 small">≤ 0.05 per turn cap</text>
+      </g>
+      <!-- AgentMemory -->
+      <g transform="translate(590, 0)">
+        <rect width="190" height="100" rx="8" class="elevated-fill" stroke="var(--teal)" stroke-width="1.2"/>
+        <text x="14" y="18" class="teal-fill tiny mono">AGENTMEMORY · AgentOS</text>
+        <text x="14" y="38" class="t1 small">Per-actor recall</text>
+        <text x="14" y="56" class="t2 small">cognitive consolidation</text>
+        <text x="14" y="70" class="t2 small">citation grounding</text>
+        <text x="14" y="86" class="t3 small">SQLite-backed</text>
+      </g>
+    </g>
+  </g>
+
+  <!-- Loop arrow indicating turn repetition -->
+  <g transform="translate(1040, 700)">
+    <path d="M 0 0 C 30 0, 50 20, 50 60 C 50 100, 30 120, 0 120" class="amber-stroke" stroke-width="1.5" stroke-dasharray="4 3" marker-end="url(#arrow-amber)"/>
+    <text x="56" y="56" class="amber-fill tiny mono">× N TURNS</text>
+    <text x="56" y="70" class="t4 small">until maxTurns</text>
+  </g>
+
+  <!-- Down arrow from orchestrator to swarm -->
+  <line x1="600" y1="864" x2="600" y2="900" class="flow-line" marker-end="url(#arrow)"/>
+
+  <!-- =============================================== -->
+  <!-- LAYER 5: AGENT SWARM -->
+  <!-- =============================================== -->
+  <g transform="translate(0, 908)">
+    <text x="24" y="40" class="label mono"><tspan class="amber-fill">05</tspan><tspan class="t4" dx="6">· SWARM</tspan></text>
+    <text x="24" y="56" class="t4 small">~100 cells</text>
+    <text x="24" y="70" class="t4 small">per leader</text>
+
+    <!-- Swarm panel -->
+    <g transform="translate(180, 0)">
+      <rect width="840" height="100" rx="10" class="panel-fill" stroke="var(--teal)" stroke-width="1.5"/>
+      <text x="20" y="24" class="teal-fill label mono">AGENT SWARM</text>
+      <text x="20" y="42" class="t2 small">personality-typed cells · HEXACO + mood + family + memory + role</text>
+
+      <!-- Grid of cells (5 rows × 30 cols representation, scaled) -->
+      <g transform="translate(20, 56)">
+        <!-- Generate a grid programmatically via group repeats. SVG doesn't loop natively, so manual placement. We'll do 30 cells × 2 rows of mixed shapes to suggest density. -->
+        <!-- Row 1 -->
+        <g>
+          <circle cx="6" cy="6" r="4" class="amber-fill"/>
+          <circle cx="22" cy="6" r="4" class="teal-fill"/>
+          <rect x="34" y="2" width="8" height="8" class="rust-fill"/>
+          <circle cx="54" cy="6" r="4" class="amber-fill" opacity="0.6"/>
+          <circle cx="70" cy="6" r="4" class="teal-fill" opacity="0.5"/>
+          <polygon points="82,2 90,2 86,10" class="green-fill"/>
+          <circle cx="102" cy="6" r="4" class="amber-fill"/>
+          <rect x="114" y="2" width="8" height="8" class="teal-fill"/>
+          <circle cx="134" cy="6" r="4" class="rust-fill" opacity="0.7"/>
+          <circle cx="150" cy="6" r="4" class="amber-fill" opacity="0.5"/>
+          <polygon points="162,2 170,2 166,10" class="teal-fill"/>
+          <circle cx="182" cy="6" r="4" class="amber-fill"/>
+          <rect x="194" y="2" width="8" height="8" class="rust-fill" opacity="0.7"/>
+          <circle cx="214" cy="6" r="4" class="teal-fill"/>
+          <circle cx="230" cy="6" r="4" class="amber-fill" opacity="0.8"/>
+          <polygon points="242,2 250,2 246,10" class="green-fill"/>
+          <circle cx="262" cy="6" r="4" class="teal-fill"/>
+          <rect x="274" y="2" width="8" height="8" class="amber-fill" opacity="0.6"/>
+          <circle cx="294" cy="6" r="4" class="rust-fill"/>
+          <circle cx="310" cy="6" r="4" class="teal-fill"/>
+          <polygon points="322,2 330,2 326,10" class="amber-fill"/>
+          <circle cx="342" cy="6" r="4" class="green-fill"/>
+          <rect x="354" y="2" width="8" height="8" class="teal-fill" opacity="0.7"/>
+          <circle cx="374" cy="6" r="4" class="amber-fill"/>
+          <circle cx="390" cy="6" r="4" class="rust-fill" opacity="0.6"/>
+          <polygon points="402,2 410,2 406,10" class="teal-fill"/>
+          <circle cx="422" cy="6" r="4" class="amber-fill"/>
+          <rect x="434" y="2" width="8" height="8" class="teal-fill"/>
+          <circle cx="454" cy="6" r="4" class="rust-fill"/>
+          <circle cx="470" cy="6" r="4" class="amber-fill" opacity="0.7"/>
+          <polygon points="482,2 490,2 486,10" class="green-fill"/>
+          <circle cx="502" cy="6" r="4" class="teal-fill"/>
+          <rect x="514" y="2" width="8" height="8" class="amber-fill"/>
+          <circle cx="534" cy="6" r="4" class="rust-fill" opacity="0.8"/>
+          <circle cx="550" cy="6" r="4" class="teal-fill" opacity="0.5"/>
+          <polygon points="562,2 570,2 566,10" class="amber-fill"/>
+          <circle cx="582" cy="6" r="4" class="green-fill"/>
+          <rect x="594" y="2" width="8" height="8" class="rust-fill"/>
+          <circle cx="614" cy="6" r="4" class="teal-fill"/>
+          <circle cx="630" cy="6" r="4" class="amber-fill"/>
+          <polygon points="642,2 650,2 646,10" class="teal-fill" opacity="0.6"/>
+          <circle cx="662" cy="6" r="4" class="rust-fill"/>
+          <rect x="674" y="2" width="8" height="8" class="amber-fill" opacity="0.7"/>
+          <circle cx="694" cy="6" r="4" class="green-fill"/>
+          <circle cx="710" cy="6" r="4" class="teal-fill"/>
+          <polygon points="722,2 730,2 726,10" class="rust-fill"/>
+          <circle cx="742" cy="6" r="4" class="amber-fill"/>
+          <rect x="754" y="2" width="8" height="8" class="teal-fill" opacity="0.7"/>
+          <circle cx="774" cy="6" r="4" class="amber-fill" opacity="0.5"/>
+          <circle cx="790" cy="6" r="4" class="rust-fill"/>
+        </g>
+        <!-- Row 2 (slightly shifted to imply density) -->
+        <g transform="translate(8, 18)">
+          <circle cx="6" cy="6" r="4" class="teal-fill"/>
+          <rect x="18" y="2" width="8" height="8" class="amber-fill" opacity="0.8"/>
+          <circle cx="38" cy="6" r="4" class="rust-fill"/>
+          <circle cx="54" cy="6" r="4" class="green-fill"/>
+          <polygon points="66,2 74,2 70,10" class="amber-fill"/>
+          <circle cx="86" cy="6" r="4" class="teal-fill"/>
+          <rect x="98" y="2" width="8" height="8" class="rust-fill" opacity="0.7"/>
+          <circle cx="118" cy="6" r="4" class="amber-fill"/>
+          <circle cx="134" cy="6" r="4" class="teal-fill" opacity="0.6"/>
+          <polygon points="146,2 154,2 150,10" class="green-fill"/>
+          <circle cx="166" cy="6" r="4" class="amber-fill"/>
+          <rect x="178" y="2" width="8" height="8" class="teal-fill"/>
+          <circle cx="198" cy="6" r="4" class="rust-fill" opacity="0.6"/>
+          <circle cx="214" cy="6" r="4" class="amber-fill"/>
+          <polygon points="226,2 234,2 230,10" class="teal-fill"/>
+          <circle cx="246" cy="6" r="4" class="green-fill"/>
+          <rect x="258" y="2" width="8" height="8" class="amber-fill" opacity="0.7"/>
+          <circle cx="278" cy="6" r="4" class="rust-fill"/>
+          <circle cx="294" cy="6" r="4" class="teal-fill"/>
+          <polygon points="306,2 314,2 310,10" class="amber-fill"/>
+          <circle cx="326" cy="6" r="4" class="green-fill"/>
+          <rect x="338" y="2" width="8" height="8" class="rust-fill" opacity="0.8"/>
+          <circle cx="358" cy="6" r="4" class="teal-fill"/>
+          <circle cx="374" cy="6" r="4" class="amber-fill"/>
+          <polygon points="386,2 394,2 390,10" class="green-fill"/>
+          <circle cx="406" cy="6" r="4" class="rust-fill"/>
+          <rect x="418" y="2" width="8" height="8" class="teal-fill"/>
+          <circle cx="438" cy="6" r="4" class="amber-fill" opacity="0.6"/>
+          <circle cx="454" cy="6" r="4" class="green-fill"/>
+          <polygon points="466,2 474,2 470,10" class="rust-fill"/>
+          <circle cx="486" cy="6" r="4" class="amber-fill"/>
+          <rect x="498" y="2" width="8" height="8" class="teal-fill" opacity="0.7"/>
+          <circle cx="518" cy="6" r="4" class="rust-fill"/>
+          <circle cx="534" cy="6" r="4" class="amber-fill"/>
+          <polygon points="546,2 554,2 550,10" class="teal-fill"/>
+          <circle cx="566" cy="6" r="4" class="green-fill"/>
+          <rect x="578" y="2" width="8" height="8" class="amber-fill"/>
+          <circle cx="598" cy="6" r="4" class="rust-fill" opacity="0.5"/>
+          <circle cx="614" cy="6" r="4" class="teal-fill"/>
+          <polygon points="626,2 634,2 630,10" class="amber-fill"/>
+          <circle cx="646" cy="6" r="4" class="green-fill"/>
+          <rect x="658" y="2" width="8" height="8" class="rust-fill"/>
+          <circle cx="678" cy="6" r="4" class="teal-fill" opacity="0.6"/>
+          <circle cx="694" cy="6" r="4" class="amber-fill"/>
+          <polygon points="706,2 714,2 710,10" class="green-fill"/>
+          <circle cx="726" cy="6" r="4" class="rust-fill"/>
+          <rect x="738" y="2" width="8" height="8" class="teal-fill" opacity="0.8"/>
+          <circle cx="758" cy="6" r="4" class="amber-fill"/>
+          <circle cx="774" cy="6" r="4" class="green-fill" opacity="0.7"/>
+        </g>
+      </g>
+    </g>
+  </g>
+
+  <!-- Down arrow from swarm to artifact -->
+  <line x1="600" y1="1016" x2="600" y2="1052" class="flow-line" marker-end="url(#arrow)"/>
+
+  <!-- =============================================== -->
+  <!-- LAYER 6: RUN ARTIFACT + FORK -->
+  <!-- =============================================== -->
+  <g transform="translate(0, 1058)">
+    <text x="24" y="42" class="label mono"><tspan class="amber-fill">06</tspan><tspan class="t4" dx="6">· OUTPUT</tspan></text>
+
+    <!-- Artifact block -->
+    <g transform="translate(180, 0)">
+      <rect width="840" height="110" rx="10" class="panel-fill" stroke="var(--amber)" stroke-width="1.5"/>
+      <text x="20" y="24" class="amber-fill label mono">RUN ARTIFACT · Zod-validated</text>
+      <text x="20" y="44" class="t2 small">trajectory · decisions · fingerprint · forgedTools · citations · finalSwarm · cost</text>
+
+      <!-- Trunk + branches visualization (mini) -->
+      <g transform="translate(20, 58)">
+        <!-- Trunk line -->
+        <line x1="0" y1="20" x2="200" y2="20" class="amber-stroke" stroke-width="2"/>
+        <circle cx="0" cy="20" r="3" class="amber-fill"/>
+        <circle cx="50" cy="20" r="3" class="amber-fill"/>
+        <circle cx="100" cy="20" r="3" class="amber-fill"/>
+        <circle cx="150" cy="20" r="3" class="amber-fill"/>
+        <circle cx="200" cy="20" r="4" class="amber-fill"/>
+        <text x="0" y="42" class="amber-fill tiny mono">TRUNK · T1 → T6</text>
+
+        <!-- Fork point -->
+        <text x="105" y="10" class="t3 tiny mono">fork at T3</text>
+
+        <!-- Branch A (different actor) -->
+        <path d="M 100 20 C 130 20, 150 -4, 200 -4" class="rust-stroke" stroke-width="2" fill="none"/>
+        <line x1="200" y1="-4" x2="280" y2="-4" class="rust-stroke" stroke-width="2"/>
+        <circle cx="240" cy="-4" r="3" class="rust-fill"/>
+        <circle cx="280" cy="-4" r="4" class="rust-fill"/>
+        <text x="290" y="-1" class="rust-fill tiny mono">BRANCH A · different actor</text>
+
+        <!-- Branch B (different seed) -->
+        <path d="M 100 20 C 130 20, 150 44, 200 44" class="teal-stroke" stroke-width="2" fill="none"/>
+        <line x1="200" y1="44" x2="280" y2="44" class="teal-stroke" stroke-width="2"/>
+        <circle cx="240" cy="44" r="3" class="teal-fill"/>
+        <circle cx="280" cy="44" r="4" class="teal-fill"/>
+        <text x="290" y="48" class="teal-fill tiny mono">BRANCH B · different seed / custom event</text>
+      </g>
+
+      <!-- Replay annotation right -->
+      <g transform="translate(640, 60)">
+        <text x="0" y="0" class="t3 tiny mono">REPLAY</text>
+        <text x="0" y="14" class="t2 small">wm.replay(artifact)</text>
+        <text x="0" y="28" class="t4 small">byte-for-byte kernel match,</text>
+        <text x="0" y="42" class="t4 small">no LLM calls, free</text>
+      </g>
+    </g>
+  </g>
+
+  <!-- Footer microcopy -->
+  <g transform="translate(0, 1148)">
+    <text x="600" y="0" text-anchor="middle" class="t4 small mono">All structured LLM calls Zod-validated · retry-with-feedback · prompt-cache discounted from turn 2</text>
+  </g>
+</svg>

package/assets/favicons/favicon-16.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><rect width="16" height="16" rx="3" fill="#14110e"/><g transform="translate(2,2)"><line x1="6" y1="6" x2="7.055981704018285" y2="2.059022628740601" stroke="#f5f0e4" stroke-width="1.5" opacity="0.55"/><line x1="6" y1="6" x2="9.940977371259399" y2="4.944018295981715" stroke="#f5f0e4" stroke-width="1.5" opacity="0.55"/><line x1="6" y1="6" x2="8.884995667241114" y2="8.884995667241114" stroke="#f5f0e4" stroke-width="1.5" opacity="0.55"/><line x1="6" y1="6" x2="4.944018295981715" y2="9.940977371259399" stroke="#f5f0e4" stroke-width="1.5" opacity="0.55"/><line x1="6" y1="6" x2="2.0590226287406015" y2="7.0559817040182855" stroke="#f5f0e4" stroke-width="1.5" opacity="0.55"/><line x1="6" y1="6" x2="3.115004332758885" y2="3.115004332758886" stroke="#f5f0e4" stroke-width="1.5" opacity="0.55"/><line x1="7.055981704018285" y1="2.059022628740601" x2="8.884995667241114" y2="8.884995667241114" stroke="#f5f0e4" stroke-width="1.0499999999999998" opacity="0.24750000000000003"/><line x1="9.940977371259399" y1="4.944018295981715" x2="4.944018295981715" y2="9.940977371259399" stroke="#f5f0e4" stroke-width="1.0499999999999998" opacity="0.24750000000000003"/><line x1="8.884995667241114" y1="8.884995667241114" x2="2.0590226287406015" y2="7.0559817040182855" stroke="#f5f0e4" stroke-width="1.0499999999999998" opacity="0.24750000000000003"/><line x1="4.944018295981715" y1="9.940977371259399" x2="3.115004332758885" y2="3.115004332758886" stroke="#f5f0e4" stroke-width="1.0499999999999998" opacity="0.24750000000000003"/><line x1="2.0590226287406015" y1="7.0559817040182855" x2="7.055981704018285" y2="2.059022628740601" stroke="#f5f0e4" stroke-width="1.0499999999999998" opacity="0.24750000000000003"/><line x1="3.115004332758885" y1="3.115004332758886" x2="9.940977371259399" y2="4.944018295981715" stroke="#f5f0e4" stroke-width="1.0499999999999998" opacity="0.24750000000000003"/><circle cx="6" cy="6" r="1.728" fill="#e8b44a" opacity=".08"/><circle cx="6" cy="6" r="0.96" fill="#e8b44a"/><circle cx="7.055981704018285" cy="2.059022628740601" r="0.66" fill="#e06530"/><circle cx="9.940977371259399" cy="4.944018295981715" r="0.66" fill="#e8b44a"/><circle cx="8.884995667241114" cy="8.884995667241114" r="0.66" fill="#4ca8a8"/><circle cx="4.944018295981715" cy="9.940977371259399" r="0.66" fill="#e06530"/><circle cx="2.0590226287406015" cy="7.0559817040182855" r="0.66" fill="#4ca8a8"/><circle cx="3.115004332758885" cy="3.115004332758886" r="0.66" fill="#e8b44a"/></g></svg>

package/assets/favicons/favicon-180.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" width="180" height="180"><rect width="180" height="180" rx="36" fill="#14110e"/><g transform="translate(27,27)"><line x1="63" y1="63" x2="74.08780789219199" y2="21.619737601776308" stroke="#f5f0e4" stroke-width="3.1500000000000004" opacity="0.55"/><line x1="63" y1="63" x2="104.38026239822369" y2="51.91219210780801" stroke="#f5f0e4" stroke-width="3.1500000000000004" opacity="0.55"/><line x1="63" y1="63" x2="93.2924545060317" y2="93.2924545060317" stroke="#f5f0e4" stroke-width="3.1500000000000004" opacity="0.55"/><line x1="63" y1="63" x2="51.912192107808" y2="104.38026239822369" stroke="#f5f0e4" stroke-width="3.1500000000000004" opacity="0.55"/><line x1="63" y1="63" x2="21.619737601776315" y2="74.087807892192" stroke="#f5f0e4" stroke-width="3.1500000000000004" opacity="0.55"/><line x1="63" y1="63" x2="32.7075454939683" y2="32.707545493968304" stroke="#f5f0e4" stroke-width="3.1500000000000004" opacity="0.55"/><line x1="74.08780789219199" y1="21.619737601776308" x2="93.2924545060317" y2="93.2924545060317" stroke="#f5f0e4" stroke-width="2.205" opacity="0.24750000000000003"/><line x1="104.38026239822369" y1="51.91219210780801" x2="51.912192107808" y2="104.38026239822369" stroke="#f5f0e4" stroke-width="2.205" opacity="0.24750000000000003"/><line x1="93.2924545060317" y1="93.2924545060317" x2="21.619737601776315" y2="74.087807892192" stroke="#f5f0e4" stroke-width="2.205" opacity="0.24750000000000003"/><line x1="51.912192107808" y1="104.38026239822369" x2="32.7075454939683" y2="32.707545493968304" stroke="#f5f0e4" stroke-width="2.205" opacity="0.24750000000000003"/><line x1="21.619737601776315" y1="74.087807892192" x2="74.08780789219199" y2="21.619737601776308" stroke="#f5f0e4" stroke-width="2.205" opacity="0.24750000000000003"/><line x1="32.7075454939683" y1="32.707545493968304" x2="104.38026239822369" y2="51.91219210780801" stroke="#f5f0e4" stroke-width="2.205" opacity="0.24750000000000003"/><circle cx="63" cy="63" r="18.144000000000002" fill="#e8b44a" opacity=".08"/><circle cx="63" cy="63" r="10.08" fill="#e8b44a"/><circle cx="74.08780789219199" cy="21.619737601776308" r="6.93" fill="#e06530"/><circle cx="104.38026239822369" cy="51.91219210780801" r="6.93" fill="#e8b44a"/><circle cx="93.2924545060317" cy="93.2924545060317" r="6.93" fill="#4ca8a8"/><circle cx="51.912192107808" cy="104.38026239822369" r="6.93" fill="#e06530"/><circle cx="21.619737601776315" cy="74.087807892192" r="6.93" fill="#4ca8a8"/><circle cx="32.7075454939683" cy="32.707545493968304" r="6.93" fill="#e8b44a"/></g></svg>

package/assets/favicons/favicon-192.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192" width="192" height="192"><rect width="192" height="192" rx="38" fill="#14110e"/><g transform="translate(29,29)"><line x1="67" y1="67" x2="78.79179569487084" y2="22.992419354270048" stroke="#f5f0e4" stroke-width="3.35" opacity="0.55"/><line x1="67" y1="67" x2="111.00758064572994" y2="55.20820430512916" stroke="#f5f0e4" stroke-width="3.35" opacity="0.55"/><line x1="67" y1="67" x2="99.2157849508591" y2="99.2157849508591" stroke="#f5f0e4" stroke-width="3.35" opacity="0.55"/><line x1="67" y1="67" x2="55.20820430512915" y2="111.00758064572994" stroke="#f5f0e4" stroke-width="3.35" opacity="0.55"/><line x1="67" y1="67" x2="22.992419354270048" y2="78.79179569487086" stroke="#f5f0e4" stroke-width="3.35" opacity="0.55"/><line x1="67" y1="67" x2="34.78421504914088" y2="34.7842150491409" stroke="#f5f0e4" stroke-width="3.35" opacity="0.55"/><line x1="78.79179569487084" y1="22.992419354270048" x2="99.2157849508591" y2="99.2157849508591" stroke="#f5f0e4" stroke-width="2.3449999999999998" opacity="0.24750000000000003"/><line x1="111.00758064572994" y1="55.20820430512916" x2="55.20820430512915" y2="111.00758064572994" stroke="#f5f0e4" stroke-width="2.3449999999999998" opacity="0.24750000000000003"/><line x1="99.2157849508591" y1="99.2157849508591" x2="22.992419354270048" y2="78.79179569487086" stroke="#f5f0e4" stroke-width="2.3449999999999998" opacity="0.24750000000000003"/><line x1="55.20820430512915" y1="111.00758064572994" x2="34.78421504914088" y2="34.7842150491409" stroke="#f5f0e4" stroke-width="2.3449999999999998" opacity="0.24750000000000003"/><line x1="22.992419354270048" y1="78.79179569487086" x2="78.79179569487084" y2="22.992419354270048" stroke="#f5f0e4" stroke-width="2.3449999999999998" opacity="0.24750000000000003"/><line x1="34.78421504914088" y1="34.7842150491409" x2="111.00758064572994" y2="55.20820430512916" stroke="#f5f0e4" stroke-width="2.3449999999999998" opacity="0.24750000000000003"/><circle cx="67" cy="67" r="19.296000000000003" fill="#e8b44a" opacity=".08"/><circle cx="67" cy="67" r="10.72" fill="#e8b44a"/><circle cx="78.79179569487084" cy="22.992419354270048" r="7.37" fill="#e06530"/><circle cx="111.00758064572994" cy="55.20820430512916" r="7.37" fill="#e8b44a"/><circle cx="99.2157849508591" cy="99.2157849508591" r="7.37" fill="#4ca8a8"/><circle cx="55.20820430512915" cy="111.00758064572994" r="7.37" fill="#e06530"/><circle cx="22.992419354270048" cy="78.79179569487086" r="7.37" fill="#4ca8a8"/><circle cx="34.78421504914088" cy="34.7842150491409" r="7.37" fill="#e8b44a"/></g></svg>