Navigation race — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Whoever finishes last, wins?</h1>
    <p class="pg-sub">
      Click two links fast. Watch which page actually ends up on screen. This simulates
      the exact race condition from the post — <code>pushState</code> timing on one side,
      <code>event.signal</code> cancellation (the Navigation API's real abort mechanism) on
      the other — so it reproduces reliably in any browser, not just the ones that ship
      the real API yet.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="seg" id="modeSeg" role="group" aria-label="Routing strategy">
        <button class="seg-btn" data-mode="old" aria-pressed="true">Old way — pushState + popstate</button>
        <button class="seg-btn" data-mode="new" aria-pressed="false">New way — Navigation API intercept()</button>
      </div>

<div class="field" style="margin-top:14px">
        <label class="label" for="speed">Network speed</label>
        <input type="range" id="speed" min="1" max="5" value="3" />
        <span class="pill" id="speedLabel">medium</span>
      </div>

<div class="btn-row" style="margin-top:14px">
        <button class="btn primary" id="goHome">Go to /home</button>
        <button class="btn primary" id="goReports">Go to /reports</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>

<div class="presets" style="margin-top:14px">
        <button class="btn sm" id="presetRace">⚡ Simulate a double-click race</button>
      </div>
      <p class="hint">
        The preset always fires <code>/reports</code> first (slow) then <code>/home</code>
        right after (fast) — the exact shape of clicking a link, changing your mind, and
        clicking a second one before the first page loads.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="browser">
        <div class="addressbar">
          <span class="dots"><span></span><span></span><span></span></span>
          <span class="url">yourapp.com<span id="addr">/</span></span>
        </div>
        <div class="page" id="page">—</div>
      </div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — try the preset first.</span>
      </div>
      <p class="hint" id="hint">
        Watch the address bar and the page below it. In the old way, they can disagree.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> What happened (log)</div>
      <div class="log" id="log"></div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.