Buffered vs. streamed — a real ReadableStream race

<div class="pg">
    <h1 class="pg-title">🎮 Buffered vs. streamed</h1>
    <p class="pg-sub">
      Both lanes read the <em>same</em> real <code>ReadableStream</code>, generated with the
      same delays. The left lane waits for <code>res.text()</code>-style buffering, then plays
      a fake typewriter. The right lane reads chunks with <code>reader.read()</code> as they
      arrive. Same total time. Wildly different wait for the first word.
    </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">▶️ Send a prompt</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="fast">Fast connection (60ms/chunk)</button>
        <button class="btn sm" data-preset="slow">Slow connection (280ms/chunk)</button>
      </div>
      <p class="hint" style="margin-top:10px">
        Each preset simulates a server writing the reply as ~14 chunks over the network.
        The stream itself doesn't know or care which lane is reading it.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="race">
        <div>
          <div class="lane-title">
            <span>❌ Buffered, then faked</span>
            <span class="lane-time" id="timeBuffered">first word: —</span>
          </div>
          <div class="lane-out" id="outBuffered">—</div>
        </div>
        <div>
          <div class="lane-title">
            <span>✅ Actually streamed</span>
            <span class="lane-time" id="timeStreamed">first word: —</span>
          </div>
          <div class="lane-out" id="outStreamed">—</div>
        </div>
      </div>
      <div class="status" id="status" style="margin-top:14px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — pick a preset and send.</span>
      </div>
      <p class="hint">
        "First word" is measured from the moment you clicked. The buffered lane can only
        show anything after <em>every</em> chunk has arrived — that's what <code>await res.text()</code>
        does to a real stream. The streamed lane shows each chunk the instant its
        <code>reader.read()</code> call resolves.
      </p>
    </div>
  </div>

preview

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