File size: 15,355 Bytes
677e207 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 | <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0b0d11">
<meta name="description" content="Ironic Mirror: a deterministic browser-native agent minefield simulation.">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'">
<title>Ironic Mirror — Agent Minefield</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<a class="skip-link" href="#world">Skip to task world</a>
<div class="app-shell">
<header class="topbar">
<div class="brand-lockup">
<div class="brand-mark" aria-hidden="true"><span></span><span></span><span></span></div>
<div>
<p class="eyebrow">IRONIC MIRROR <span>//</span> OBSERVABLE AUTONOMY</p>
<h1>The environment remembers what the agent repeats.</h1>
</div>
</div>
<div class="header-status" aria-label="Simulation mode">
<span class="status-dot" aria-hidden="true"></span>
<span id="run-status">READY TO REPLAY</span>
<span class="header-divider" aria-hidden="true"></span>
<span class="mono">SEED IRONIC-MIRROR-04</span>
</div>
</header>
<main class="page-grid">
<section class="mission-strip panel" aria-labelledby="mission-title">
<div class="mission-copy">
<p class="eyebrow">MISSION / PROTECTED RULESET</p>
<h2 id="mission-title">Inspect, transform, and verify a protected state.</h2>
<p>PRIMUS navigates a constraint field where every decision leaves a trace and every repeated probe changes the route.</p>
</div>
<div class="mission-meta">
<div><span>SCENARIO</span><strong>PRIMUS / XREX-04</strong></div>
<div><span>EXECUTION</span><strong>LOCAL BROWSER SANDBOX</strong></div>
<div><span>MODE</span><strong>DETERMINISTIC REPLAY</strong></div>
</div>
</section>
<section class="world-section panel" id="world" aria-labelledby="world-title">
<div class="section-heading world-heading">
<div>
<p class="eyebrow">LIVE COMPUTATIONAL WORLD</p>
<h2 id="world-title">Task world <span class="heading-slash">/</span> minefield</h2>
</div>
<div class="world-readout">
<span class="live-chip"><span class="status-dot" aria-hidden="true"></span><span id="world-state">OBSERVING</span></span>
<span class="mono" id="event-counter">EVENT 01 / 16</span>
</div>
</div>
<div class="world-frame">
<svg id="world-svg" class="world-svg" viewBox="0 0 1000 560" role="img" aria-labelledby="world-svg-title world-svg-desc">
<title id="world-svg-title">Deterministic PRIMUS minefield</title>
<desc id="world-svg-desc">An interactive map showing PRIMUS moving through hazards, checkpoints, and a changing route.</desc>
<defs>
<pattern id="grid-pattern" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#263039" stroke-width="1" opacity=".52"/>
</pattern>
<filter id="agent-glow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur stdDeviation="5" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="soft-glow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<rect class="world-backdrop" x="0" y="0" width="1000" height="560" rx="4"/>
<rect class="world-grid" x="0" y="0" width="1000" height="560" rx="4"/>
<g class="world-zones" aria-hidden="true">
<path d="M65 454 C205 360 237 352 365 300 S585 305 710 235 S875 122 947 66"/>
<path d="M76 503 C220 413 278 398 386 339"/>
<path d="M431 416 C528 394 573 384 654 340"/>
<path d="M683 348 C780 300 840 235 923 159"/>
<text x="76" y="522">ENTRY ZONE</text>
<text x="436" y="451">REFLECTION FIELD</text>
<text x="792" y="94">VERIFIED CORRIDOR</text>
</g>
<path id="planned-route" class="planned-route" d="" aria-hidden="true"/>
<path id="trajectory-path" class="trajectory-path" d="" aria-hidden="true"/>
<g id="checkpoint-layer"></g>
<g id="hazard-layer"></g>
<g id="agent-hit-area" class="agent-hit-area" role="button" tabindex="0" aria-label="Select PRIMUS agent">
<circle cx="0" cy="0" r="31"/>
</g>
<g id="agent" class="agent" transform="translate(100 460)" filter="url(#agent-glow)" aria-hidden="true">
<circle class="agent-orbit orbit-one" cx="0" cy="0" r="24"/>
<circle class="agent-orbit orbit-two" cx="0" cy="0" r="17"/>
<path class="agent-chevron" d="M0 -15 L14 0 L0 15 L-14 0 Z"/>
<circle class="agent-core" cx="0" cy="0" r="5"/>
<text class="agent-label" x="22" y="-18">PRIMUS</text>
<text id="agent-action-label" class="agent-action-label" x="22" y="2">BOOT SANDBOX</text>
</g>
<g class="world-callout callout-left" aria-hidden="true">
<path d="M0 20 H148"/>
<text x="0" y="12">AGENT TRAJECTORY</text>
</g>
<g class="world-callout callout-right" aria-hidden="true">
<path d="M0 20 H174"/>
<text x="0" y="12">SAFE CORRIDORS / ADAPTIVE</text>
</g>
</svg>
<div class="world-overlay overlay-top-left">
<span class="overlay-label">CURRENT ACTION</span>
<strong id="world-action">Boot sealed sandbox</strong>
<span class="overlay-sub" id="world-note">Browser sandbox sealed. The replay clock is deterministic and local.</span>
</div>
<div class="world-overlay overlay-bottom-right">
<span class="overlay-label">POSITION</span>
<strong id="world-position">10 / 82</strong>
<span class="overlay-sub" id="world-risk">RISK LOW</span>
</div>
</div>
<div class="legend" aria-label="Minefield legend">
<span><i class="legend-glyph unsafe">☠</i> UNSAFE</span>
<span><i class="legend-glyph invariant">â—†</i> INVARIANT</span>
<span><i class="legend-glyph permission">☢</i> PERMISSION</span>
<span><i class="legend-glyph unknown">â—‡</i> UNKNOWN</span>
<span><i class="legend-glyph tool">â–¡</i> TOOL</span>
<span><i class="legend-glyph resource">âš </i> RESOURCE</span>
<span><i class="legend-glyph checkpoint">â—Ž</i> CHECKPOINT</span>
</div>
<div class="world-stats" aria-label="World state counts">
<div><span>SAFE ZONES</span><strong id="world-safe">8</strong></div>
<div><span>HAZARDS</span><strong id="world-hazards">6</strong></div>
<div><span>CHECKPOINTS</span><strong id="world-checkpoints">0</strong></div>
<div><span>BLOCKED PATHS</span><strong id="world-blocked">0</strong></div>
<div><span>ACTIVE AGENT</span><strong id="world-agent-count">1</strong></div>
</div>
</section>
<aside class="side-column" aria-label="Agent details">
<section class="inspector panel" aria-labelledby="inspector-title">
<div class="section-heading compact-heading">
<div><p class="eyebrow">SELECTION / INSPECTOR</p><h2 id="inspector-title">Agent inspector</h2></div>
<span class="selection-chip" id="selection-chip">AGENT</span>
</div>
<div id="inspector-content" class="inspector-content"></div>
</section>
<section class="verification panel" aria-labelledby="verification-title">
<div class="section-heading compact-heading">
<div><p class="eyebrow">GATE / XREX-04</p><h2 id="verification-title">Verification gate</h2></div>
<span id="verification-badge" class="gate-badge pending">PENDING</span>
</div>
<div class="gate-flow" aria-label="Verification flow">
<span class="gate-node" id="gate-action">ACTION</span><i>→</i><span class="gate-node active" id="gate-verify">VERIFY</span><i>→</i><span class="gate-node" id="gate-result">RESULT</span>
</div>
<div class="gate-result-box" id="gate-result-box">
<span class="eyebrow">INVARIANT</span><strong>XREX-04</strong><span id="gate-message">Awaiting a meaningful state transition.</span>
</div>
</section>
<section class="trace panel" aria-labelledby="trace-title">
<div class="section-heading compact-heading">
<div><p class="eyebrow">EVIDENCE / ORDERED EVENTS</p><h2 id="trace-title">Task trace</h2></div>
<span class="mono trace-count" id="trace-count">01 / 16</span>
</div>
<div class="trace-list" id="trace-list" role="list"></div>
</section>
</aside>
<section class="lower-grid">
<section class="objectives panel" aria-labelledby="objectives-title">
<div class="section-heading compact-heading">
<div><p class="eyebrow">MISSION OBJECTIVES</p><h2 id="objectives-title">Transformation protocol</h2></div>
<span class="progress-readout" id="objective-progress">0 / 8</span>
</div>
<div class="objective-list" id="objective-list"></div>
</section>
<section class="task-graph panel" aria-labelledby="graph-title">
<div class="section-heading compact-heading"><div><p class="eyebrow">STATE MACHINE / REDUCER VIEW</p><h2 id="graph-title">Task graph</h2></div></div>
<div class="graph-track" id="graph-track" aria-label="Task graph"></div>
<div class="mirror-loop">
<div class="mirror-loop-heading"><span class="eyebrow">IRONIC MIRROR / ENVIRONMENT RESPONSE</span><span class="mirror-status" id="mirror-status">WATCHING</span></div>
<div class="mirror-metrics">
<div><span>PROBES</span><strong id="probe-count">0</strong></div>
<div><span>BOUNDARY HARDNESS</span><strong id="boundary-hardness">0%</strong></div>
<div><span>COLLAPSED ROUTES</span><strong id="collapsed-routes">0</strong></div>
</div>
<div class="mirror-chain"><span>AGENT ACTION</span><i>→</i><span>WORLD REFLECTION</span><i>→</i><span>NEW CONSTRAINT</span><i>→</i><span>ADAPTATION</span></div>
</div>
</section>
<section class="tools panel" aria-labelledby="tools-title">
<div class="section-heading compact-heading"><div><p class="eyebrow">ALLOWLIST / SANDBOX CAPABILITIES</p><h2 id="tools-title">Tool registry</h2></div><span class="selection-chip">DENY BY DEFAULT</span></div>
<div class="tool-list" id="tool-list"></div>
<div class="tool-call-card" id="tool-call-card">
<div class="tool-call-head"><span class="eyebrow">LAST TOOL CALL / SANDBOX TRACE</span><span class="mono" id="tool-call-state">IDLE</span></div>
<code id="tool-call-code">>>> await primus.observe()</code>
<pre id="tool-call-result">result = { mode: "browser", network: false }</pre>
</div>
</section>
<section class="security panel" aria-labelledby="security-title">
<div class="section-heading compact-heading"><div><p class="eyebrow">BOUNDARY / EXECUTION MODE</p><h2 id="security-title">Browser sandbox</h2></div><span class="secure-badge">SEALED</span></div>
<div class="security-grid">
<div><span>NETWORK</span><strong>DISABLED</strong></div><div><span>SERVER</span><strong>NONE</strong></div><div><span>HOST ACCESS</span><strong>DISABLED</strong></div><div><span>FILESYSTEM</span><strong>SANDBOXED</strong></div><div><span>TOOLS</span><strong>ALLOWLISTED</strong></div><div><span>WASM GATE</span><strong id="wasm-status">LOADING</strong></div>
</div>
<p class="security-note">All tool calls below are simulated capabilities. No repository code, network, process, or host filesystem is executed by this page.</p>
</section>
</section>
<section class="control-deck panel" aria-labelledby="controls-title">
<div class="controls-label"><p class="eyebrow">REPLAY CONTROL</p><h2 id="controls-title">Time travel</h2></div>
<div class="control-buttons">
<button class="primary-control" id="play-toggle" type="button"><span id="play-icon">â–¶</span><span id="play-label">PLAY</span></button>
<button class="icon-control" id="step-back" type="button" aria-label="Step back one event">↶ <span>STEP BACK</span></button>
<button class="icon-control" id="step-forward" type="button" aria-label="Step forward one event"><span>STEP →</span></button>
<button class="icon-control" id="restart" type="button" aria-label="Restart replay">↻ <span>RESTART</span></button>
</div>
<div class="timeline-wrap">
<div class="timeline-labels"><span>BOOT</span><span id="timeline-current">OBSERVE / T+00</span><span>COMPLETE</span></div>
<input id="timeline" type="range" min="0" max="15" value="0" step="1" aria-label="Replay timeline">
<div class="timeline-ticks" id="timeline-ticks" aria-hidden="true"></div>
</div>
<div class="strain-readout"><div class="strain-head"><span>STRAIN</span><strong id="strain-value">14%</strong></div><div class="meter"><span id="strain-meter"></span></div><div class="strain-sub"><span id="strain-caption">SAFE OPERATING ENVELOPE</span><span id="confidence-value">CONFIDENCE 96%</span></div></div>
</section>
</main>
<footer class="footer-bar"><span>IRONIC MIRROR / PRIMUS MINEFIELD / SCENARIO v1</span><span class="footer-right">STATIC PAGES ROM <i>·</i> NO SERVER <i>·</i> REPLAYABLE TRACE</span></footer>
</div>
<div id="live-region" class="visually-hidden" aria-live="polite" aria-atomic="true"></div>
<script type="module" src="./app.js"></script>
</body>
</html>
|