Alert Phase <mv-alert-phase>

node scripts/add.mjs alert-phase --out ./src/marvelous

<mv-alert-phase label="Checkout API" phase="alert" listen="checkout-5xx:alert"></mv-alert-phase>

<div id="ap-demo" style="width:min(100%,68rem);margin-inline:auto">
  <style>
    #ap-demo { display:grid; gap:1rem }
    #ap-demo .ap-top { display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap }
    #ap-demo .ap-top h3 { margin:0; font-size:1.125rem; letter-spacing:-.01em }
    #ap-demo .ap-top p { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #ap-demo .ap-layout { display:grid; grid-template-columns:minmax(0,1fr) 21rem; gap:1rem; align-items:start }
    #ap-demo .ap-main { display:grid; gap:.75rem; min-width:0 }
    #ap-demo .ap-controls { display:grid; gap:.75rem; padding:.875rem 1rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-bg-subtle) }
    #ap-demo .ap-row { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
    #ap-demo .ap-k { color:var(--mv-fg-muted); font-size:.6875rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-inline-end:.25rem }
    #ap-demo .ap-row .mv-choice { font-size:.8125rem }
    #ap-demo .ap-log { margin:0; min-height:1.1rem; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    #ap-demo .ap-services { border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-sm); overflow:hidden }
    #ap-demo .ap-services header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.875rem 1rem; border-bottom:1px solid var(--mv-border) }
    #ap-demo .ap-services h4 { margin:0; font-size:.875rem }
    #ap-demo .ap-list { list-style:none; margin:0; padding:.25rem 0 }
    #ap-demo .ap-list li { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.625rem 1rem }
    #ap-demo .ap-list li + li { border-top:1px solid var(--mv-border) }
    #ap-demo .ap-svc { display:grid; gap:.125rem; min-width:0 }
    #ap-demo .ap-svc b { font-size:.8125rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    #ap-demo .ap-svc span { color:var(--mv-fg-muted); font-size:.75rem }
    #ap-demo .ap-foot { display:grid; gap:.625rem; padding:.875rem 1rem; border-top:1px solid var(--mv-border); background:var(--mv-bg-subtle) }
    #ap-demo .ap-foot p { margin:0; color:var(--mv-fg-muted); font-size:.75rem; line-height:1.5 }
    @media (max-width:56rem) { #ap-demo .ap-layout { grid-template-columns:minmax(0,1fr) } }
  </style>

  <div class="ap-top">
    <div>
      <h3>Incident console</h3>
      <p>Acme Commerce · production · accelerated timers for the demo (Alert 20 s → Elevated 25 s → Caution 30 s)</p>
    </div>
    <span class="mv-badge" data-variant="outline" data-shape="pill">On call: Priya Natarajan</span>
  </div>

  <div class="ap-layout">
    <div class="ap-main">
      <mv-alert-phase id="ap-checkout" variant="panel" label="Checkout API · us-east-1"
        alert-duration="20s" elevated-duration="25s" caution-duration="30s" history-window="3m">
        <a slot="actions" class="mv-button" data-variant="link" data-size="sm" href="#runbook">Open runbook</a>
      </mv-alert-phase>

      <div class="ap-controls">
        <div class="ap-row">
          <span class="ap-k">Send a signal</span>
          <button type="button" class="mv-button" data-variant="outline" data-size="sm"
            data-alert-phase-signal="alert" data-alert-phase-target="ap-checkout"
            data-alert-phase-reason="5xx rate 6.1% on /v2/charges (threshold 2%)">Error spike · Alert</button>
          <button type="button" class="mv-button" data-variant="outline" data-size="sm"
            data-alert-phase-signal="elevated" data-alert-phase-target="ap-checkout"
            data-alert-phase-reason="Retry rate 18% from mobile clients">Retry storm · Elevated</button>
          <button type="button" class="mv-button" data-variant="outline" data-size="sm"
            data-alert-phase-signal="caution" data-alert-phase-target="ap-checkout"
            data-alert-phase-reason="p95 latency 910 ms (target 600 ms)">Slow responses · Caution</button>
        </div>
        <div class="ap-row">
          <label class="mv-choice">
            <input type="checkbox" role="switch" class="mv-switch" data-size="sm" id="ap-maint">
            <span class="mv-choice-text"><span class="mv-choice-title">Maintenance window: veto escalations</span></span>
          </label>
        </div>
        <p class="ap-log" id="ap-log" aria-hidden="true">Waiting for the next transition…</p>
      </div>
    </div>

    <aside class="ap-services" aria-label="Service status">
      <header>
        <h4>Services</h4>
        <label class="mv-choice" data-control="end" style="font-size:.75rem">
          <input type="checkbox" role="switch" class="mv-switch" data-size="sm" id="ap-sim" checked>
          <span class="mv-choice-text"><span class="mv-choice-title">Live signals</span></span>
        </label>
      </header>
      <ul class="ap-list">
        <li><span class="ap-svc"><b>Payments gateway</b><span>eu-west-1</span></span>
          <mv-alert-phase id="ap-s1" label="Payments gateway" announce="escalations" alert-duration="30s" elevated-duration="30s" caution-duration="40s"></mv-alert-phase></li>
        <li><span class="ap-svc"><b>Identity (SSO)</b><span>global</span></span>
          <mv-alert-phase id="ap-s2" label="Identity" announce="escalations" alert-duration="30s" elevated-duration="30s" caution-duration="40s"></mv-alert-phase></li>
        <li><span class="ap-svc"><b>Search</b><span>us-west-2</span></span>
          <mv-alert-phase id="ap-s3" label="Search" announce="escalations" alert-duration="30s" elevated-duration="30s" caution-duration="40s"></mv-alert-phase></li>
        <li><span class="ap-svc"><b>Media CDN</b><span>global edge</span></span>
          <mv-alert-phase id="ap-s4" label="Media CDN" announce="escalations" alert-duration="30s" elevated-duration="30s" caution-duration="40s"></mv-alert-phase></li>
        <li><span class="ap-svc"><b>Notifications</b><span>ap-southeast-1</span></span>
          <mv-alert-phase id="ap-s5" label="Notifications" announce="escalations" alert-duration="30s" elevated-duration="30s" caution-duration="40s"></mv-alert-phase></li>
        <li><span class="ap-svc"><b>Ledger sync</b><span>eu-central-1</span></span>
          <mv-alert-phase id="ap-s6" label="Ledger sync" announce="escalations" alert-duration="30s" elevated-duration="30s" caution-duration="40s"></mv-alert-phase></li>
      </ul>
      <div class="ap-foot">
        <p>Each status decays one level when its timer runs out without a new signal. A new signal of the same level re-arms it; a higher one escalates at once.</p>
      </div>
    </aside>
  </div>

  <script type="module">
    await customElements.whenDefined("mv-alert-phase");
    const root = document.getElementById("ap-demo");
    const $ = (id) => document.getElementById(id);
    const s = 1000;
    const t = Date.now();

    // Hydrate from a server snapshot: the incident started two minutes ago.
    $("ap-checkout").restore({
      phase: "alert",
      remaining: 17 * s,
      since: t - 9 * s,
      episode: { start: t - 118 * s, signals: 9 },
      last: { level: "alert", reason: "Card authorization timeouts: 312 in the last minute", at: t - 3 * s },
      history: [
        { type: "change", from: "clear", to: "caution", at: t - 118 * s, cause: "signal", reason: "p95 latency 842 ms (target 600 ms)" },
        { type: "change", from: "caution", to: "alert", at: t - 97 * s, cause: "signal", reason: "5xx rate 4.2% on /v2/charges" },
        { type: "change", from: "alert", to: "elevated", at: t - 71 * s, cause: "timeout", idle: 20 * s },
        { type: "change", from: "elevated", to: "caution", at: t - 46 * s, cause: "timeout", idle: 25 * s },
        { type: "change", from: "caution", to: "alert", at: t - 9 * s, cause: "signal", reason: "Card authorization timeouts: 188 in the last minute" },
      ],
      signals: [118, 111, 97, 94, 91, 50, 9, 6, 3].map((ago, i) => ({ at: t - ago * s, level: i < 2 ? 1 : i === 5 ? 2 : 3 })),
    });

    const seed = {
      "ap-s1": { phase: "elevated", remaining: 12 * s, last: { level: 3, reason: "Issuer declines up 3x", at: t - 30 * s } },
      "ap-s2": { phase: "alert", held: true, remaining: 16 * s, acknowledged: { by: "Priya N." }, last: { level: 3, reason: "SAML assertion failures", at: t - 40 * s } },
      "ap-s3": { phase: "caution", remaining: 19 * s },
      "ap-s4": { phase: "caution", remaining: 6 * s },
      "ap-s5": { phase: "clear" },
      "ap-s6": { phase: "clear" },
    };
    for (const [id, state] of Object.entries(seed)) $(id).restore(state);

    // Maintenance window: the app vetoes escalations (the cancelable hook).
    const maint = $("ap-maint");
    $("ap-checkout").addEventListener("mv-escalate", (e) => { if (maint.checked) e.preventDefault(); });

    const log = $("ap-log");
    root.addEventListener("mv-change", (e) => {
      const { from, to, cause } = e.detail;
      const name = e.target.label ?? e.target.id;
      log.textContent = `mv-change · ${name} · ${from} → ${to} (${cause})`;
    });
    root.addEventListener("mv-signal", (e) => {
      if (e.detail.outcome === "vetoed") log.textContent = `mv-escalate vetoed · ${e.target.label} · ${e.detail.level}`;
    });
    root.addEventListener("click", (e) => { if (e.target.closest("a[href='#runbook']")) e.preventDefault(); });

    // Live signals on the service list (your WebSocket or polling handler would do this).
    const feed = [
      ["ap-s1", "elevated", "Issuer declines up 3x"], ["ap-s1", "alert", "Acquirer timeouts above 5%"],
      ["ap-s3", "caution", "Index lag 42 s"], ["ap-s3", "elevated", "Query errors 2.4%"],
      ["ap-s4", "caution", "Origin fetch p95 1.2 s"], ["ap-s5", "caution", "Push queue depth 18k"],
      ["ap-s6", "elevated", "Reconciliation drift $1,240"], ["ap-s5", "alert", "Push gateway rejects 9%"],
      ["ap-s4", "elevated", "Cache hit ratio 71%"],
    ];
    let i = 0;
    const sim = $("ap-sim");
    const timer = setInterval(() => {
      if (!root.isConnected) return clearInterval(timer);
      if (!sim.checked || document.hidden) return;
      const [id, level, reason] = feed[i++ % feed.length];
      $(id).signal(level, { reason, source: "metrics" });
    }, 5000);
  </script>
</div>