Quiet Alarm <mv-quiet-alarm>

node scripts/add.mjs quiet-alarm --out ./src/marvelous

<mv-quiet-alarm label="Orders · US storefront" subject="orders" expected="5m" listen="order:created"></mv-quiet-alarm>

<div id="qa-demo" style="width:min(100%,60rem);margin-inline:auto">
  <style>
    #qa-demo { display:grid; gap:1rem; align-content:start }
    #qa-demo .qa-bar { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; padding:.625rem .75rem .625rem 1rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface) }
    #qa-demo .qa-brand { display:flex; align-items:center; gap:.625rem; min-width:0 }
    #qa-demo .qa-logo { display:grid; place-items:center; flex:none; width:1.875rem; height:1.875rem; border-radius:var(--mv-radius-md); background:var(--mv-accent); color:var(--mv-fg-on-accent) }
    #qa-demo .qa-logo svg { width:1rem; height:1rem }
    #qa-demo .qa-brand b { display:block; font-size:.9375rem; letter-spacing:-.01em }
    #qa-demo .qa-brand span { display:block; color:var(--mv-fg-muted); font-size:.75rem }
    #qa-demo .qa-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem }
    #qa-demo .qa-panel { min-width:0; padding:1rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface) }
    #qa-demo .qa-panel h4 { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:0 0 .75rem; font-size:.8125rem; font-weight:600 }
    #qa-demo .qa-panel h4 span { color:var(--mv-fg-subtle); font-weight:500; font-size:.75rem }
    #qa-demo .qa-feed { list-style:none; margin:0; padding:0; display:grid; gap:.375rem }
    #qa-demo .qa-feed li { display:grid; grid-template-columns:4.25rem minmax(0,1fr) auto; gap:.75rem; align-items:center; padding:.4375rem .625rem; border-radius:var(--mv-radius-md); background:var(--mv-bg-subtle); font-size:.8125rem; font-variant-numeric:tabular-nums }
    #qa-demo .qa-feed li:first-child { animation:qa-in var(--mv-duration-slow) var(--mv-ease-out) }
    #qa-demo .qa-feed .qa-id { color:var(--mv-fg-subtle); font:.75rem var(--mv-font-mono) }
    #qa-demo .qa-feed .qa-who { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    #qa-demo .qa-feed .qa-who small { color:var(--mv-fg-muted); font-size:.75rem }
    #qa-demo .qa-feed .qa-amt { font-weight:600 }
    @keyframes qa-in { from { opacity:0; translate:0 -4px } }
    #qa-demo .qa-controls { display:grid; gap:.875rem }
    #qa-demo .qa-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap }
    #qa-demo .qa-row > span { font-size:.8125rem; color:var(--mv-fg-muted) }
    #qa-demo .qa-actions { display:flex; gap:.5rem; flex-wrap:wrap }
    #qa-demo .qa-log { list-style:none; margin:0; padding:.625rem .75rem; display:grid; gap:.25rem; min-height:4.75rem; border-radius:var(--mv-radius-md); background:var(--mv-bg-subtle); color:var(--mv-fg-muted); font:.75rem/1.5 var(--mv-font-mono) }
    #qa-demo .qa-log b { color:var(--mv-fg); font-weight:600 }
    #qa-demo .qa-note { margin:0; color:var(--mv-fg-subtle); font-size:.75rem; text-align:center }
    @media (prefers-reduced-motion: reduce) { #qa-demo .qa-feed li:first-child { animation:none } }
    @media (max-width:44rem) { #qa-demo .qa-grid { grid-template-columns:minmax(0,1fr) } }
  </style>

  <header class="qa-bar">
    <div class="qa-brand">
      <span class="qa-logo" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9h16l-1.2 10.2a2 2 0 0 1-2 1.8H7.2a2 2 0 0 1-2-1.8z"/><path d="M8.5 9V7a3.5 3.5 0 0 1 7 0v2"/></svg></span>
      <div><b>Northwind Market · Operations</b><span>US storefront · all systems</span></div>
    </div>
    <mv-quiet-alarm id="qa-sensor" variant="inline" label="Cold room 3" subject="readings" expected="3s" snooze-for="1m"></mv-quiet-alarm>
  </header>

  <div class="qa-grid">
    <mv-quiet-alarm id="qa-orders" label="Orders · US storefront" subject="orders" watch="#qa-feed" snooze-for="30s"></mv-quiet-alarm>
    <mv-quiet-alarm id="qa-hooks" label="Payment webhooks" subject="webhooks" listen="payment:webhook" listen-on="#qa-demo" snooze-for="20s"></mv-quiet-alarm>

    <section class="qa-panel" aria-labelledby="qa-feed-h">
      <h4 id="qa-feed-h">Live orders <span>newest first</span></h4>
      <ul class="qa-feed" id="qa-feed" aria-label="Latest orders">
        <li><span class="qa-id">#10481</span><span class="qa-who">Kenji Watanabe <small>· Osaka</small></span><span class="qa-amt">$42.90</span></li>
        <li><span class="qa-id">#10480</span><span class="qa-who">Sofia Rossi <small>· Milan</small></span><span class="qa-amt">$128.00</span></li>
        <li><span class="qa-id">#10479</span><span class="qa-who">Amara Okafor <small>· Lagos</small></span><span class="qa-amt">$64.50</span></li>
        <li><span class="qa-id">#10478</span><span class="qa-who">Lucas Martin <small>· Lyon</small></span><span class="qa-amt">$19.99</span></li>
      </ul>
    </section>

    <section class="qa-panel qa-controls" aria-labelledby="qa-sim-h">
      <h4 id="qa-sim-h" style="margin:0">Simulation <span>time runs in seconds here</span></h4>
      <label class="mv-choice" data-control="end">
        <input type="checkbox" role="switch" class="mv-switch" id="qa-flow" checked>
        <span class="mv-choice-text"><span class="mv-choice-title">Orders flowing</span><span class="mv-choice-description">Turn off to simulate a broken checkout</span></span>
      </label>
      <div class="qa-row">
        <span id="qa-sens-l">Orders sensitivity</span>
        <mv-segmented id="qa-sens" aria-labelledby="qa-sens-l" value="normal">
          <button value="low">Low</button>
          <button value="normal">Normal</button>
          <button value="high">High</button>
        </mv-segmented>
      </div>
      <div class="qa-actions">
        <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="qa-deploy">Pause orders 20 s (deploy)</button>
        <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="qa-hook">Deliver a webhook</button>
      </div>
      <ol class="qa-log" id="qa-log" aria-label="State changes"><li>State changes appear here.</li></ol>
    </section>
  </div>
  <p class="qa-note">Each monitor learns its own rhythm from the beats it sees and only speaks up when the silence is longer than usual.</p>

  <script type="module">
    const root = document.getElementById("qa-demo");
    await customElements.whenDefined("mv-quiet-alarm");
    const $ = (id) => document.getElementById(id);
    const orders = $("qa-orders"), hooks = $("qa-hooks"), sensor = $("qa-sensor");
    const feed = $("qa-feed"), log = $("qa-log");
    const timers = new Set();
    const later = (fn, ms) => { const t = setTimeout(() => { timers.delete(t); if (root.isConnected) fn(); }, ms); timers.add(t); };

    // Deterministic history so the page opens on a real rhythm.
    let s = 20260923;
    const rnd = () => ((s = (s * 16807) % 2147483647) / 2147483647);
    const history = (count, min, max, endAgo) => {
      const out = [];
      let t = Date.now() - endAgo;
      for (let i = 0; i < count; i++) { out.unshift(t); t -= (min + rnd() * (max - min)); }
      return out;
    };
    orders.seed(history(22, 1200, 3200, 900));
    hooks.seed(history(18, 1100, 1900, 5200)); // stopped five seconds ago
    sensor.seed(history(12, 2900, 3100, 1400));

    // Orders: rows appended to the watched feed are the beats.
    const people = [["Priya Nair", "Bengaluru"], ["Mateo García", "Madrid"], ["Emma Schneider", "Berlin"], ["Noah Williams", "Austin"], ["Aisha Rahman", "Dubai"], ["Chloé Dubois", "Montréal"], ["Liam O'Brien", "Dublin"], ["Yuna Kim", "Seoul"], ["Lucas Martin", "Lyon"], ["Amara Okafor", "Lagos"]];
    let id = 10481;
    const addOrder = () => {
      const [name, city] = people[id % people.length];
      const li = document.createElement("li");
      const a = Object.assign(document.createElement("span"), { className: "qa-id", textContent: `#${++id}` });
      const who = Object.assign(document.createElement("span"), { className: "qa-who", textContent: `${name} ` });
      who.append(Object.assign(document.createElement("small"), { textContent: `· ${city}` }));
      const amt = Object.assign(document.createElement("span"), { className: "qa-amt", textContent: `$${(12 + rnd() * 180).toFixed(2)}` });
      li.append(a, who, amt);
      feed.prepend(li);
      while (feed.children.length > 4) feed.lastElementChild.remove();
    };
    const flow = $("qa-flow");
    const orderLoop = () => { if (flow.checked) addOrder(); later(orderLoop, 1200 + rnd() * 2000); };
    later(orderLoop, 1300);

    // Sensor: the app calls beat() on every reading.
    const sensorLoop = () => { sensor.beat(); later(sensorLoop, 2900 + rnd() * 200); };
    later(sensorLoop, 1600);

    // Webhooks: a DOM event on the demo root is a beat.
    $("qa-hook").addEventListener("click", () => root.dispatchEvent(new CustomEvent("payment:webhook", { detail: { count: 1 } })));

    $("qa-deploy").addEventListener("click", () => orders.pause("20s", { reason: "a deploy" }));
    $("qa-sens").addEventListener("mv-change", (e) => { orders.sensitivity = e.detail.value; });

    const clock = new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", second: "2-digit" });
    const names = { learning: "Learning", normal: "Normal", overdue: "Overdue", silent: "Silent", paused: "Paused" };
    root.addEventListener("mv-change", (e) => {
      if (e.target.localName !== "mv-quiet-alarm") return;
      const li = document.createElement("li");
      const b = Object.assign(document.createElement("b"), { textContent: e.target.label });
      li.append(`${clock.format(new Date())} · `, b, ` → ${names[e.detail.state]}`);
      if (!log.querySelector("b")) log.replaceChildren();
      log.prepend(li);
      while (log.children.length > 3) log.lastElementChild.remove();
    });
  </script>
</div>