navigator.locks — the four-tabs race, live

<div class="pg">
    <h1 class="pg-title">🔒 The four-tabs race, live</h1>
    <p class="pg-sub">
      Four simulated browser tabs all notice an expired token at once and race to refresh it.
      Toggle <code>navigator.locks</code> on or off and click <strong>Expire token</strong> to see
      whether they trample each other or take turns.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row">
        <button class="btn primary" id="run">⏱️ Expire token (all 4 tabs notice)</button>
        <button class="btn ghost" id="reset">Reset</button>
        <label class="toggle" style="margin-left:6px">
          <input type="checkbox" id="useLock" checked /><span class="switch"></span>
          <span>use <code>navigator.locks</code> (uncheck to see the race)</span>
        </label>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="locked">Preset: locked (safe)</button>
        <button class="btn sm" data-preset="unlocked">Preset: unlocked (racy)</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Four tabs, one token</div>
      <div class="tabs" id="tabs"></div>
      <div class="status" id="status" style="margin-top:14px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — click "Expire token."</span>
      </div>
      <p class="hint" id="hint">
        With the lock on, one tab refreshes while the other three wait, then check the token and do
        nothing. With it off, all four call the refresh endpoint before any of them notices someone
        beat them to it.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Server ledger — refresh calls it actually received</div>
      <div class="ledger" id="ledger"></div>
      <div style="margin-top:10px">
        Refresh calls this run: <span class="count-badge zero" id="badge">0</span>
      </div>
    </div>
  </div>

preview

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