docs/index.html

<!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">&gt;&gt;&gt; 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>