Cry Wolf <mv-cry-wolf>

node scripts/add.mjs cry-wolf --out ./src/marvelous

<mv-cry-wolf label="Operations alerts"></mv-cry-wolf>
<script type="module">
  await customElements.whenDefined("mv-cry-wolf");
  document.querySelector("mv-cry-wolf").push({ source: "disk", title: "Disk usage 91% on db-02", severity: "warning" });
</script>

<div id="cw-demo" style="width:min(100%,66rem);margin-inline:auto">
  <style>
    #cw-demo .cw-layout { display:grid; grid-template-columns:minmax(0,1fr) 18.5rem; gap:1.25rem; align-items:start }
    #cw-demo .cw-console { padding:1.125rem 1.125rem 1.25rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-bg); box-shadow:var(--mv-shadow-sm) }
    #cw-demo .cw-side { display:grid; gap:1rem }
    #cw-demo .cw-card { display:grid; gap:.75rem; padding:1rem 1.125rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-xs) }
    #cw-demo .cw-card h4 { margin:0; font-size:.8125rem; font-weight:600 }
    #cw-demo .cw-card p { margin:0; color:var(--mv-fg-muted); font-size:.75rem; line-height:1.5 }
    #cw-demo .cw-sim { display:grid; gap:.375rem }
    #cw-demo .cw-sim .mv-button { justify-content:flex-start; width:100% }
    #cw-demo .cw-sim .mv-button small { margin-inline-start:auto; color:var(--mv-fg-subtle); font-size:.6875rem; font-weight:500 }
    #cw-demo .cw-report { display:grid; gap:.5rem; margin:0; padding:0; list-style:none }
    #cw-demo .cw-report li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.125rem .5rem; align-items:center; font-size:.75rem }
    #cw-demo .cw-report b { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    #cw-demo .cw-report .cw-bar { grid-column:1 / -1; height:4px; border-radius:2px; background:var(--mv-bg-muted); overflow:hidden }
    #cw-demo .cw-report .cw-bar i { display:block; height:100%; width:calc(var(--v) * 100%); border-radius:inherit; background:var(--mv-fg-muted) }
    #cw-demo .cw-report .cw-num { color:var(--mv-fg-muted); font-variant-numeric:tabular-nums }
    #cw-demo .cw-log { display:grid; gap:.25rem; margin:0; padding:0; list-style:none; font:.6875rem/1.45 var(--mv-font-mono); color:var(--mv-fg-muted) }
    #cw-demo .cw-log li { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    #cw-demo .cw-log li:first-child { color:var(--mv-fg) }
    #cw-demo .mv-choice { font-size:.8125rem }
    @media (max-width:56rem) { #cw-demo .cw-layout { grid-template-columns:minmax(0,1fr) } }
  </style>

  <div class="cw-layout">
    <div class="cw-console">
      <!-- Operations console: sources learn their credibility from what the on-call engineer does -->
      <mv-cry-wolf id="cw-main" label="Operations alerts" rate-limit="2/30m" dedupe="1h"></mv-cry-wolf>
    </div>

    <aside class="cw-side" aria-label="Demo controls">
      <div class="cw-card">
        <h4>Simulate incoming alerts</h4>
        <div class="cw-sim">
          <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="cw-noise">Disk warning <small>noisy source</small></button>
          <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="cw-pay">Payments incident <small>trusted</small></button>
          <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="cw-wolf">Critical disk alert <small>noisy + critical</small></button>
          <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="cw-burst">Same build failure ×6 <small>folded</small></button>
          <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="cw-sec">Admin sign-in <small>Always show</small></button>
        </div>
        <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="cw-persist"> Remember per user (this browser)</label>
        <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="cw-reset">Reset demo</button>
      </div>

      <div class="cw-card">
        <h4>Noise report <span class="mv-badge" data-variant="secondary" data-size="sm">sources</span></h4>
        <p>From the <code>sources</code> property: fix the alerts nobody acts on.</p>
        <ul class="cw-report" id="cw-report"></ul>
      </div>

      <div class="cw-card">
        <h4>Events</h4>
        <ul class="cw-log" id="cw-log" aria-live="off"><li>Waiting for alerts…</li></ul>
      </div>
    </aside>
  </div>

  <script type="module">
    await customElements.whenDefined("mv-cry-wolf");
    const cw = document.getElementById("cw-main");
    const $ = (id) => document.getElementById(id);
    const min = (n) => Date.now() - n * 60_000;

    const SOURCES = [
      { id: "payments", label: "Payments API" },
      { id: "disk", label: "Disk monitor" },
      { id: "ci", label: "Build pipeline" },
      { id: "security", label: "Security scanner", trust: "always" },
      { id: "campaigns", label: "Campaign bot", trust: "digest" },
    ];
    // Last week's reactions, as a server report would give them.
    const HISTORY = {
      version: 1,
      sources: {
        payments: { received: 16, acted: 11, dismissed: 3, notUseful: 0, record: "aadaaadaaada" },
        disk: { received: 41, acted: 2, dismissed: 15, notUseful: 6, merged: 14, record: "ddndddnddadn" },
        ci: { received: 22, acted: 6, dismissed: 5, notUseful: 1, record: "adaddaanddaa" },
        security: { received: 8, acted: 3, dismissed: 4, notUseful: 1, record: "dadndad" },
        campaigns: { received: 12, acted: 0, dismissed: 7, notUseful: 2, record: "ddnddddnd" },
      },
    };

    const seed = () => {
      cw.clear();
      cw.sources = SOURCES;
      if (!$("cw-persist").checked) cw.snapshot = HISTORY;
      const backlog = [
        { source: "disk", title: "Disk usage 81% on web-03", severity: "warning", time: min(52) },
        ...[40, 31, 22, 12, 6].map((m) => ({ source: "disk", title: "Disk usage 81% on web-03", severity: "warning", time: min(m) })),
        { source: "ci", title: "Build #1287 failed on main", text: "3 tests failed in checkout-service after commit a41f9c2 by Priya Raman.", severity: "danger", time: min(28), actions: [{ label: "View logs", value: "logs" }] },
        { source: "campaigns", title: "Newsletter “Fall launch” reached a 38% open rate", severity: "success", time: min(35) },
        { source: "disk", title: "Inode usage 74% on cache-01", severity: "warning", time: min(30) },
        { source: "ci", title: "Build #1287 failed on main", severity: "danger", time: min(20) },
        { source: "campaigns", title: "A/B test “Hero copy” reached significance", severity: "info", time: min(20) },
        { source: "disk", title: "Swap above 60% on worker-07", severity: "warning", time: min(18) },
        { source: "ci", title: "Build #1287 failed on main", severity: "danger", time: min(11) },
        { source: "ci", title: "Flaky test quarantined: checkout.spec.ts", text: "Failed 4 of the last 20 runs. Owners: Payments team.", severity: "warning", time: min(12), actions: [{ label: "Open test", value: "test" }] },
        { source: "disk", title: "Log partition growing 4%/h on api-02", severity: "info", time: min(9) },
        { source: "ci", title: "Coverage dropped below 82% on main", severity: "info", time: min(8) },
        { source: "campaigns", title: "Unsubscribe rate +0.4% this week (within normal range)", severity: "info", time: min(6) },
        { source: "ci", title: "Dependency audit: 3 moderate advisories", severity: "warning", time: min(5) },
        { source: "payments", title: "Payout batch #4812 failed for 3 merchants", text: "The bank rejected the transfer file (code R03). $18,240.00 is on hold until the batch is retried.", severity: "warning", time: min(4), actions: [{ label: "Retry batch", value: "retry" }, { label: "View batch", value: "view" }] },
        { source: "ci", title: "Build #1287 failed on main", severity: "danger", time: min(3) },
        { source: "disk", title: "Database volume 97% full on db-primary-02", text: "Writes will start failing in about 20 minutes at the current rate.", severity: "danger", critical: true, time: min(1), actions: [{ label: "Expand volume", value: "expand" }, { label: "Open runbook", value: "runbook" }] },
      ];
      cw.push(backlog, { silent: true });
      report();
    };

    // Noise report built from the public stats.
    const report = () => {
      const list = $("cw-report");
      list.replaceChildren(...cw.sources.map((s) => {
        const li = document.createElement("li");
        const name = document.createElement("b");
        name.textContent = s.label;
        const badge = document.createElement("span");
        badge.className = "mv-badge";
        badge.dataset.size = "sm";
        const routed = s.trust === "always" ? ["Always", "info"] : s.trust === "digest" ? ["Digest only", "secondary"] : s.routing === "digest" ? ["Held", "warning"] : ["Shown", "success"];
        badge.textContent = routed[0];
        badge.dataset.variant = routed[1];
        const bar = document.createElement("span");
        bar.className = "cw-bar";
        const fill = document.createElement("i");
        fill.style.setProperty("--v", s.credibility);
        bar.append(fill);
        const num = document.createElement("span");
        num.className = "cw-num";
        num.textContent = `${Math.round(s.credibility * 100)}% · acted on ${s.actionRate == null ? "-" : `${Math.round(s.actionRate * 100)}%`}`;
        li.append(name, badge, bar, num);
        return li;
      }));
    };

    const log = (text, key) => {
      const li = document.createElement("li");
      if (key) li.dataset.key = key;
      li.textContent = `${new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", second: "2-digit" })} ${text}`;
      const el = $("cw-log");
      const first = el.firstElementChild;
      if (first?.textContent === "Waiting for alerts…") el.replaceChildren();
      // Repeats of the same alert update one line instead of flooding the log.
      if (first && li.dataset.key && first.dataset.key === li.dataset.key) first.replaceWith(li);
      else el.prepend(li);
      while (el.children.length > 5) el.lastElementChild.remove();
    };

    const reasons = { credibility: "low credibility", rate: "rate limited", trust: "digest only" };
    cw.addEventListener("mv-alert", (e) => {
      const { alert, verdict, reason } = e.detail;
      if (alert.last < Date.now() - 50_000) return; // backlog
      log(verdict === "merged" ? `folded ×${alert.count} · ${alert.title}` : verdict === "digest" ? `held (${reasons[reason]}) · ${e.detail.source.label}` : `shown${alert.critical ? " (critical)" : ""} · ${alert.title}`, verdict === "merged" ? alert.id : null);
      report();
    });
    cw.addEventListener("mv-feedback", (e) => {
      const { kind, source, credibility, previous, value } = e.detail;
      const delta = typeof previous === "number" ? ` ${Math.round(previous * 100)}% → ${Math.round(credibility * 100)}%` : "";
      log(`${kind}${kind === "trust" ? ` = ${value}` : ""} · ${source.label}${delta}`);
      report();
    });

    let n = 0;
    $("cw-noise").addEventListener("click", () => {
      const hosts = ["web-05", "web-07", "cache-02", "worker-03"];
      cw.push({ source: "disk", title: `Disk usage ${82 + (n % 6)}% on ${hosts[n++ % hosts.length]}`, severity: "warning" });
    });
    $("cw-pay").addEventListener("click", () => {
      cw.push({ source: "payments", title: "Card authorizations failing in EU-West", text: "Decline rate 14% over the last 5 minutes (usual: 2%). Acquirer: Adyen EU.", severity: "danger", actions: [{ label: "Open incident", value: "incident" }] });
    });
    $("cw-wolf").addEventListener("click", () => {
      cw.push({ source: "disk", title: "Disk full on queue-01", text: "The message broker stopped accepting new jobs at 100% usage.", critical: true, actions: [{ label: "Free space", value: "free" }] });
    });
    $("cw-burst").addEventListener("click", () => {
      let i = 0;
      const t = setInterval(() => {
        cw.push({ source: "ci", title: "Build #1287 failed on main", text: "Retry failed: the same 3 tests in checkout-service.", severity: "danger" });
        if (++i >= 6) clearInterval(t);
      }, 220);
    });
    $("cw-sec").addEventListener("click", () => {
      cw.push({ source: "security", title: "New admin sign-in from São Paulo, Brazil", text: "Account: [email protected] · Chrome on macOS · MFA passed.", severity: "info", actions: [{ label: "Review session", value: "review" }] });
    });
    $("cw-persist").addEventListener("change", (e) => {
      if (e.target.checked) cw.storageKey = "mv-demo-cry-wolf";
      else { try { localStorage.removeItem("mv-demo-cry-wolf"); } catch {} cw.storageKey = null; }
    });
    $("cw-reset").addEventListener("click", () => { cw.resetLearning(); seed(); log("demo reset"); });

    seed();
  </script>
</div>