Delivery Trail <mv-delivery-trail>

node scripts/add.mjs delivery-trail --out ./src/marvelous

<mv-delivery-trail label="Password reset email" recipient="[email protected]" channel="email"
  fallbacks="resend: Resend email, sms: Send code via SMS"></mv-delivery-trail>
<!-- from your provider webhooks: trail.update("delivered") -->

<div id="dt-demo" style="width:min(100%,62rem);margin-inline:auto">
  <style>
    #dt-demo { display:grid; gap:1.5rem; align-content:start }
    #dt-demo .dt-grid { display:grid; grid-template-columns:17rem minmax(0,1fr); gap:1rem; align-items:start }
    #dt-demo .dt-card { min-width:0; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-sm) }
    #dt-demo .dt-ticket { display:grid; gap:.875rem; padding:1rem 1.125rem }
    #dt-demo .dt-k { margin:0; color:var(--mv-fg-muted); font-size:.6875rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase }
    #dt-demo .dt-person { display:flex; align-items:center; gap:.75rem }
    #dt-demo .dt-avatar { display:grid; place-items:center; width:2.5rem; height:2.5rem; flex:none; border-radius:50%; background:var(--mv-bg-emphasis); font-size:.8125rem; font-weight:600 }
    #dt-demo .dt-person b { display:block; font-size:.9375rem; letter-spacing:-.01em }
    #dt-demo .dt-person span { color:var(--mv-fg-muted); font-size:.8125rem }
    #dt-demo .dt-quote { margin:0; padding:.625rem .75rem; border-radius:var(--mv-radius-lg); background:var(--mv-bg-subtle); color:var(--mv-fg); font-size:.8125rem; line-height:1.5 }
    #dt-demo .dt-facts { display:grid; grid-template-columns:auto 1fr; gap:.375rem .75rem; margin:0; font-size:.8125rem }
    #dt-demo .dt-facts dt { color:var(--mv-fg-muted) }
    #dt-demo .dt-facts dd { margin:0; text-align:end; font-variant-numeric:tabular-nums }
    #dt-demo .dt-badges { display:flex; gap:.375rem; flex-wrap:wrap }
    #dt-demo .dt-side { display:grid; gap:.75rem; min-width:0 }
    #dt-demo .dt-controls { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; padding:.75rem 1rem; border:1px dashed var(--mv-border-strong); border-radius:var(--mv-radius-lg) }
    #dt-demo .dt-controls p { margin:0; color:var(--mv-fg-muted); font-size:.75rem; flex:1 1 14rem }
    #dt-demo .dt-actions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap }
    #dt-demo .mv-choice { font-size:.8125rem }
    #dt-demo .dt-log { min-height:1.1rem; margin:0; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono); overflow-wrap:anywhere }
    #dt-demo .dt-head { display:flex; align-items:end; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap; margin:0 0 .75rem }
    #dt-demo .dt-head h3 { margin:0; font-size:1rem; letter-spacing:-.01em }
    #dt-demo .dt-head p { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    @media (max-width:46rem) { #dt-demo .dt-grid { grid-template-columns:minmax(0,1fr) } }
  </style>

  <!-- 1. Support console: a password reset email that silently never got opened -->
  <div class="dt-grid">
    <aside class="dt-card dt-ticket" aria-label="Support ticket">
      <p class="dt-k">Ticket #48213 · Sign-in</p>
      <div class="dt-person">
        <span class="dt-avatar" aria-hidden="true">AO</span>
        <span><b>Amara Okafor</b><span>Halcyra Health · Admin</span></span>
      </div>
      <p class="dt-quote">“I asked for a password reset twice this morning and nothing ever came. I have a board meeting at noon.”</p>
      <dl class="dt-facts">
        <dt>Plan</dt><dd>Business</dd>
        <dt>Last sign-in</dt><dd>Sep 20, 2026</dd>
        <dt>Phone</dt><dd>+1 (415) 555-0192</dd>
      </dl>
      <div class="dt-badges">
        <span class="mv-badge" data-variant="warning">High priority</span>
        <span class="mv-badge" data-variant="secondary">Email</span>
      </div>
    </aside>

    <div class="dt-side">
      <mv-delivery-trail id="dt-main"
        label="Password reset email"
        recipient="[email protected]"
        channel="email"
        budgets="queued: 10s, sent: 30s, delivered: 2m, opened: 10m"
        fallbacks="resend: Resend email, sms: Send code via SMS, copy: Copy reset link"
        announce="all"></mv-delivery-trail>

      <div class="dt-controls">
        <p>Resend runs a live, accelerated delivery (budgets of a few seconds). Keep “Lands in spam” on to watch it stall again.</p>
        <span class="dt-actions">
          <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="dt-spam" checked> Lands in spam</label>
          <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="dt-send">Send a new link</button>
        </span>
      </div>
      <p class="dt-log" id="dt-log" aria-live="off">mv-stall · opened</p>
    </div>
  </div>

  <!-- 2. Outbound messages: several deliveries, worst state first -->
  <section aria-labelledby="dt-out-title">
    <div class="dt-head">
      <div>
        <h3 id="dt-out-title">Outbound messages · last hour</h3>
        <p>The push notification is on a 10-second budget: watch it stall and move up.</p>
      </div>
      <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="dt-replay">Replay</button>
    </div>
    <mv-delivery-trail id="dt-list"></mv-delivery-trail>
  </section>

  <script type="module">
    const main = document.getElementById("dt-main");
    const list = document.getElementById("dt-list");
    const log = document.getElementById("dt-log");
    const spam = document.getElementById("dt-spam");
    const s = 1000, min = 60 * s;
    const ago = (ms) => Date.now() - ms;
    const say = (text) => { log.textContent = text; };

    // ── 1. Password reset email: delivered 12 minutes ago, never opened (10 min budget) ──
    main.events = [
      { hop: "created", at: ago(12 * min + 5.4 * s), detail: "Requested from the sign-in page" },
      { hop: "queued", at: ago(12 * min + 5.1 * s), detail: "job_7Hq2 · transactional" },
      { hop: "sent", at: ago(12 * min + 3.8 * s), detail: "Accepted by provider · msg_01J8ZK4F" },
      { hop: "delivered", at: ago(12 * min), detail: "250 2.0.0 OK · mx1.example.com" },
    ];

    let run = [];
    const clearRun = () => { run.forEach(clearTimeout); run = []; };
    const later = (ms, fn) => run.push(setTimeout(fn, ms));

    // A live, accelerated send: each hop lands after a short delay; spam = never opened.
    function liveSend() {
      clearRun();
      main.budgets = "queued: 2s, sent: 3s, delivered: 4s, opened: 6s";
      main.reset(undefined, { start: true, detail: "Resent by support · Daniel Park" });
      later(350, () => main.update("queued", "done", { detail: "job_9Kc4 · transactional" }));
      later(1100, () => main.update("sent", "done", { detail: "Accepted by provider · msg_01J8ZQ2M" }));
      later(2600, () => main.update("delivered", "done", { detail: "250 2.0.0 OK · mx1.example.com" }));
      if (!spam.checked) later(4800, () => main.update("opened", "done", { detail: "Opened on mobile · Mail app" }));
    }

    main.addEventListener("mv-fallback", (e) => {
      const { action } = e.detail;
      say(`mv-fallback · ${action}`);
      if (action === "resend") e.detail.waitUntil(new Promise((r) => setTimeout(r, 500)).then(liveSend));
      if (action === "sms") e.detail.waitUntil(new Promise((r) => setTimeout(r, 700)).then(() => say("mv-fallback · sms → code sent to +1 (415) •••-0192")));
    });
    main.addEventListener("mv-stall", (e) => say(`mv-stall · ${e.detail.hop}`));
    main.addEventListener("mv-recover", (e) => say(`mv-recover · ${e.detail.hop}`));
    main.addEventListener("mv-complete", () => say("mv-complete"));
    document.getElementById("dt-send").addEventListener("click", liveSend);

    // ── 2. Outbound messages ──
    const at = (list) => list.map(([hop, t, detail, status]) => ({ hop, at: ago(t), detail, status }));
    const messages = () => [
      {
        id: "push-rider", label: "“Your driver is 2 minutes away”", recipient: "Push · Rider app · Sofia Reyes", channel: "push",
        hops: ["created", "sent", "delivered", "opened"], budgets: { sent: "5s", delivered: "10s", opened: "5m" },
        fallbacks: [{ action: "sms", label: "Send as SMS" }],
        events: at([["created", 2.4 * s, "trip_5521 · driver_eta"], ["sent", 2 * s, "Push gateway · msg_0:1727"]]),
      },
      {
        id: "invoice", label: "Invoice INV-2048 · $17,400.00", recipient: "[email protected]", channel: "invoice",
        hops: ["created", "queued", "sent", "delivered", "opened"],
        fallbacks: [{ action: "edit", label: "Fix the address" }, { action: "copy", label: "Copy payment link", copy: "https://pay.example.com/i/INV-2048" }],
        events: at([
          ["created", 22 * min, "Issued by Priya Nair"], ["queued", 22 * min - 0.4 * s], ["sent", 22 * min - 1.6 * s, "msg_01J8XR3T"],
          ["delivered", 21 * min, "550 5.1.1 <[email protected]>: Recipient address rejected: User unknown", "failed"],
        ]),
      },
      {
        id: "otp", label: "Sign-in code", recipient: "+44 7700 900123 · Oliver Hughes", channel: "sms",
        hops: ["created", "sent", "delivered", "confirmed"], budgets: { delivered: "1m", confirmed: "5m" },
        fallbacks: [{ action: "resend", label: "Resend code" }, { action: "call", label: "Call with code", href: "tel:+447700900123" }],
        events: at([["created", 3 * min + 2 * s], ["sent", 3 * min, "Carrier: Northline · SM1f3a9c"]]),
      },
      {
        id: "hook", label: "Webhook · order.paid", recipient: "https://api.example.com/hooks/orders", channel: "webhook",
        hops: ["created", "sent", "delivered"], budgets: { delivered: "5m" },
        fallbacks: [{ action: "retry", label: "Retry now" }],
        events: at([["created", 48 * s, "evt_3PqK81"], ["sent", 47 * s], ["delivered", 17 * s, "HTTP 503 Service Unavailable · retry 2 of 5 in 30 s", "retrying"]]),
      },
      {
        id: "esign", label: "Master services agreement", recipient: "Li Wei · Kestrel Logistics", channel: "esign",
        hops: ["created", "sent", "delivered", "viewed", "signed"],
        events: at([["created", 41 * min], ["sent", 41 * min - 1 * s], ["delivered", 41 * min - 4 * s], ["viewed", 18 * min, "Web browser · Singapore"], ["signed", 6 * min, "Signature ID sig_92KD"]]),
      },
      {
        id: "magic", label: "Magic sign-in link", recipient: "[email protected]", channel: "email",
        events: at([["created", 95 * s], ["queued", 94.8 * s], ["sent", 93 * s], ["delivered", 90 * s, "250 OK · mx1.example.com"], ["opened", 60 * s, "Webmail · desktop"]]),
      },
    ];
    list.messages = messages();
    document.getElementById("dt-replay").addEventListener("click", () => { list.messages = messages(); });
    list.addEventListener("mv-fallback", (e) => {
      if (e.detail.action === "retry") {
        e.detail.waitUntil(new Promise((r) => setTimeout(r, 600)).then(() => list.update("delivered", "done", { message: "hook", detail: "HTTP 200 OK · 184 ms" })));
      }
      if (e.detail.action === "resend") {
        e.detail.waitUntil(new Promise((r) => setTimeout(r, 600)).then(() => {
          list.reset("otp", { start: true });
          setTimeout(() => list.update("sent", "done", { message: "otp", detail: "Carrier: Northline · SM1f40d2" }), 500);
          setTimeout(() => list.update("delivered", "done", { message: "otp", detail: "DELIVRD · handset" }), 1600);
        }));
      }
      if (e.detail.action === "sms") {
        e.detail.waitUntil(new Promise((r) => setTimeout(r, 600)));
      }
    });
  </script>
</div>