Tab leader election — interactive playground

<div class="pg">
    <h1 class="pg-title">🗳️ Tab leader election</h1>
    <p class="pg-sub">
      Three simulated tabs, one real <code>navigator.locks</code> lock. Open a couple of
      them, watch one become the <strong>leader</strong>, then close it and watch the
      next one in line take over automatically — no polling, no timeout.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Your tabs</div>
      <div class="tabrow" id="tabrow"></div>
      <div class="btn-row" style="margin-top:14px">
        <button class="btn ghost" id="reset">Reset everything</button>
      </div>
      <p class="hint">Open two or three. The first one in wins the lock and becomes leader — the rest wait in a real FIFO queue, same as the browser uses for actual browser tabs.</p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What's happening</div>
      <div class="status" style="margin-bottom:10px">
        <span class="dot" id="dot"></span><span id="statusText">Open a tab to start.</span>
      </div>
      <div class="log" id="log" style="max-height:220px; overflow:auto"></div>
      <p class="hint" id="hint">The leader ticks every 1.5s and relays the tick to every tab over <code>BroadcastChannel</code> — that's the "server push" being fanned out for free.</p>
    </div>

<div class="banner info" id="unsupported" style="display:none">
      Your browser doesn't support <code>navigator.locks</code> or <code>BroadcastChannel</code>.
      Try this in a recent Chrome, Firefox, or Safari (15.4+).
    </div>
  </div>

preview

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