Honest Wait — <mv-honest-wait>

node scripts/add.mjs honest-wait --out ./src/marvelous

<div id="hw-demo" style="width:min(100%,50rem);margin-inline:auto">
  <style>
    #hw-demo { display:grid; gap:1rem; align-content:start }
    #hw-demo .hw-app { border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-bg-subtle); overflow:hidden }
    #hw-demo .hw-stage { display:grid; gap:1rem; padding:1.125rem }
    #hw-demo .hw-controls { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.75rem 1.125rem; border-top:1px solid var(--mv-border); background:var(--mv-surface) }
    #hw-demo .hw-controls p { flex:1 1 100%; margin:0 0 .25rem; color:var(--mv-fg-muted); font-size:.75rem }
    #hw-demo .hw-log { flex:1 1 100%; min-height:1.1rem; margin:.25rem 0 0; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono) }
    #hw-demo .hw-tray { border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-xs); overflow:hidden }
    #hw-demo .hw-tray-head { display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-bottom:1px solid var(--mv-border) }
    #hw-demo .hw-tray-head strong { font-size:.875rem; letter-spacing:-.01em }
    #hw-demo .hw-tray-head span:last-child { margin-inline-start:auto; color:var(--mv-fg-muted); font-size:.75rem }
    #hw-demo .hw-tray-list { display:grid; gap:.5rem; padding:.75rem }
    #hw-demo .hw-tray-list mv-honest-wait { background:var(--mv-bg-subtle) }
  </style>

  <!-- Main: a video export that measures its own speed (accelerated demo: 20 s without updates counts as stuck) -->
  <section class="hw-app" aria-label="Video export">
    <div class="hw-stage">
      <mv-honest-wait id="hw-main" label="Exporting “Q3 Board Review.mp4” · 4K" unit="frames" stall="20s" notify background>
        <a slot="done" class="mv-button" data-size="sm" href="#hw-demo">Download MP4 (1.8 GB)</a>
      </mv-honest-wait>
    </div>
    <div class="hw-controls">
      <p>Simulate the render farm. The estimate only moves when the speed it measures moves, and it tells you when it had to revise.</p>
      <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="hw-slow" aria-pressed="false">Congest the render farm</button>
      <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="hw-freeze" aria-pressed="false">Stop sending updates</button>
      <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="hw-finish">Finish</button>
      <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="hw-fail">Fail</button>
      <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="hw-restart">Restart</button>
      <p class="hw-log" id="hw-log">Export resumed after 58 s of rendering.</p>
    </div>
  </section>

  <!-- Background jobs: the three other kinds of wait, in the compact inline variant -->
  <section class="hw-tray" aria-labelledby="hw-tray-title">
    <div class="hw-tray-head">
      <strong id="hw-tray-title">Background jobs</strong>
      <span class="mv-badge" data-variant="secondary">3 running</span>
      <span>Each one says what kind of wait it is</span>
    </div>
    <div class="hw-tray-list">
      <mv-honest-wait id="hw-queue" variant="inline" label="Generating 4 product shots · Studio AI">
        <a slot="done" class="mv-button" data-size="sm" data-variant="outline" href="#hw-demo">View images</a>
      </mv-honest-wait>
      <mv-honest-wait id="hw-work" variant="inline" label="Provisioning database cluster · us-east-1" stall="30s"></mv-honest-wait>
      <mv-honest-wait id="hw-stuck" variant="inline" label="Building “Annual Report 2026.pdf”" unit="pages" stall="45s"></mv-honest-wait>
    </div>
  </section>

  <script type="module">
    await customElements.whenDefined("mv-honest-wait");
    const root = document.getElementById("hw-demo");
    const $ = (id) => document.getElementById(id);
    const main = $("hw-main"), queue = $("hw-queue"), work = $("hw-work"), stuck = $("hw-stuck");
    const log = $("hw-log");
    const say = (text) => { log.textContent = `${new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", second: "2-digit" })} · ${text}`; };
    const alive = () => root.isConnected;
    const every = (ms, fn) => { const id = setInterval(() => (alive() ? fn() : clearInterval(id)), ms); return id; };
    const toggle = (b, on) => b.setAttribute("aria-pressed", String(on));

    /* ── Main export: 7,200 frames at ~24 frames/s, seeded with the last 40 s ── */
    const TOTAL = 7200;
    let frames = 0, fast = true, frozen = false, running = true;
    const seedMain = () => {
      const now = Date.now();
      main.reset();
      main.startedAt = now - 58_000;
      frames = 1392 - 24 * 40;
      for (let age = 40; age >= 0; age -= 4) {
        main.progress(1392 - 24 * age, TOTAL, { at: now - age * 1000 });
      }
      frames = 1392;
      running = true;
    };
    seedMain();
    every(1000, () => {
      if (!running || frozen) return;
      const rate = (fast ? 24 : 7) * (0.85 + Math.random() * 0.3);
      frames = Math.min(TOTAL, frames + rate);
      main.progress(Math.round(frames), TOTAL, frames > 5200 ? "Muxing audio and subtitles" : "Encoding video (H.265, 10-bit)");
      if (frames >= TOTAL) { running = false; main.done("Q3 Board Review.mp4 is ready · 1.8 GB"); }
    });

    main.addEventListener("mv-eta-revised", (e) => say(`mv-eta-revised · ${e.detail.direction}`));
    main.addEventListener("mv-stuck", (e) => say(`mv-stuck · silent for ${Math.round(e.detail.silentFor / 1000)} s`));
    main.addEventListener("mv-resume", () => say("mv-resume · updates are back"));
    main.addEventListener("mv-done", (e) => say(`mv-done · took ${Math.round(e.detail.duration / 1000)} s`));
    main.addEventListener("mv-keep-waiting", () => say("mv-keep-waiting"));
    main.addEventListener("mv-notify", (e) => say(`mv-notify · permission ${e.detail.permission ?? "granted"}`));
    main.addEventListener("mv-leave", () => {
      say("mv-leave · the export keeps running in the background");
      main.setAttribute("variant", "inline");
      main.background = false;
    });
    main.addEventListener("mv-report", (e) => {
      say("mv-report · snapshot attached to a support ticket");
      e.detail.waitUntil(new Promise((r) => setTimeout(r, 700)));
    });
    main.addEventListener("mv-retry", () => {
      say("mv-retry · job resubmitted");
      frozen = false; toggle($("hw-freeze"), false);
      setTimeout(seedMain, 0);
    });

    $("hw-slow").addEventListener("click", (e) => { fast = !fast; toggle(e.currentTarget, !fast); say(fast ? "Render farm back to normal" : "Render farm congested: about 7 frames/s"); });
    $("hw-freeze").addEventListener("click", (e) => { frozen = !frozen; toggle(e.currentTarget, frozen); say(frozen ? "Updates stopped (20 s until “may be stuck”)" : "Updates resumed"); });
    $("hw-finish").addEventListener("click", () => { running = false; main.done("Q3 Board Review.mp4 is ready · 1.8 GB"); });
    $("hw-fail").addEventListener("click", () => { running = false; main.fail("Render node ran out of GPU memory"); });
    $("hw-restart").addEventListener("click", () => {
      fast = true; frozen = false; toggle($("hw-slow"), false); toggle($("hw-freeze"), false);
      main.removeAttribute("variant");
      main.background = true;
      seedMain();
      say("Export restarted");
    });

    /* ── Queue: an AI image job waiting for a GPU, then generating ── */
    let pos = 7, gen = null;
    const seedQueue = () => {
      const now = Date.now();
      queue.reset();
      queue.startedAt = now - 34_000;
      [[11, 32], [10, 25], [9, 18], [8, 11], [7, 4]].forEach(([p, age]) => queue.queue(p, { at: now - age * 1000 }));
      pos = 7; gen = null;
    };
    seedQueue();
    every(1000, () => {
      if (gen === null) {
        if (Math.random() < 0.15) { pos -= 1; queue.queue(pos); }
        else queue.queue(pos);
        if (pos === 0) gen = 0;
      } else if (gen < 4) {
        gen = Math.min(4, gen + 0.18 + Math.random() * 0.08);
        queue.progress(Math.floor(gen * 25), 100, `Rendering image ${Math.min(4, Math.floor(gen) + 1)} of 4`);
        if (gen >= 4) { queue.done("4 images ready"); setTimeout(() => alive() && seedQueue(), 6000); }
      }
    });

    /* ── Working: no progress reported, only a heartbeat ── */
    const steps = ["Allocating storage volumes", "Configuring 3 replicas", "Applying network policies", "Running health checks"];
    const seedWork = () => {
      const now = Date.now();
      work.reset();
      work.startedAt = now - 95_000;
      [30, 24, 17, 12, 6, 2].forEach((age) => work.beat({ at: now - age * 1000, message: steps[0] }));
    };
    seedWork();
    let step = 0;
    every(1000, () => {
      if (work.kind === "done") return;
      if (Math.random() < 0.3) {
        if (Math.random() < 0.12) step++;
        if (step >= steps.length) { work.done("Cluster ready · 3 nodes"); step = 0; setTimeout(() => alive() && seedWork(), 6000); return; }
        work.beat(steps[step]);
      }
    });

    /* ── Stuck: the report builder went silent over a minute ago ── */
    const seedStuck = () => {
      const now = Date.now();
      stuck.reset();
      stuck.startedAt = now - 4 * 60_000;
      // This builder only sends heartbeats; the last one came 84 s ago.
      [132, 120, 108, 96, 84].forEach((age, i) => stuck.beat({ at: now - age * 1000, message: `Rendering charts (page ${19 + i} of 38)` }));
    };
    seedStuck();
    stuck.addEventListener("mv-retry", () => {
      // Resubmitted: this time it moves.
      let page = 0;
      const id = every(900, () => {
        if (page >= 38) { clearInterval(id); stuck.done("38 pages · 12.4 MB"); setTimeout(() => alive() && seedStuck(), 7000); return; }
        page += 1;
        stuck.progress(page, 38, `Rendering page ${page} of 38`);
      });
    });
    stuck.addEventListener("mv-report", (e) => e.detail.waitUntil(new Promise((r) => setTimeout(r, 600))));
  </script>
</div>