Deploy outliar

README.md

@@ -1,10 +1,32 @@
 ---
-title: Outliar
-emoji: 📊
-colorFrom: green
-colorTo: blue
+title: outliar
+emoji: 🎲
+colorFrom: blue
+colorTo: gray
 sdk: static
 pinned: false
+license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# outliar
+
+An anomaly-detection benchmark on the Numenta Anomaly Benchmark, and an audit of
+the metric the field reports.
+
+Pick a detector — including `random`, which is uniform noise and never looks at
+the data — and drag the threshold. Point-adjusted F1, the number reported almost
+universally in time-series anomaly detection, will tell you the noise is
+excellent. The composite score will not.
+
+Everything runs in your browser: the detectors and the four scoring protocols are
+a JavaScript port of the NumPy implementation, pinned to it to 1e-9 by a
+Python↔Node parity test. NAB itself is fetched from the upstream GitHub raw
+endpoint, not redistributed here.
+
+`iforest` is missing from this demo because it needs scikit-learn's fitted trees,
+and `random` uses a JavaScript PRNG rather than NumPy's PCG64 — it is still
+uniform noise, so the argument is unaffected, but the digits will differ slightly
+from the repo's benchmark.
+
+Code, the full 47-series benchmark and the write-up:
+**https://github.com/UsmarHaider/outliar**

findings.json

@@ -0,0 +1,158 @@
+{
+  "noise_rank": {
+    "point": {
+      "noise_f1": 0.18629884319662968,
+      "noise_rank": 7,
+      "n_detectors": 8,
+      "real_detectors_beaten": 0,
+      "n_real_detectors": 5,
+      "best_real": "window_pca",
+      "best_real_f1": 0.31077404415860577,
+      "headroom": 0.12447520096197609,
+      "spread": 0.12737293454850926
+    },
+    "pa": {
+      "noise_f1": 0.9246043832991432,
+      "noise_rank": 4,
+      "n_detectors": 8,
+      "real_detectors_beaten": 3,
+      "n_real_detectors": 5,
+      "best_real": "ewma",
+      "best_real_f1": 0.9384605994911948,
+      "headroom": 0.013856216192051574,
+      "spread": 0.7558962756709838
+    },
+    "pa20": {
+      "noise_f1": 0.49753952257809236,
+      "noise_rank": 6,
+      "n_detectors": 8,
+      "real_detectors_beaten": 0,
+      "n_real_detectors": 5,
+      "best_real": "window_pca",
+      "best_real_f1": 0.6693155263887254,
+      "headroom": 0.17177600381063302,
+      "spread": 0.4859144167786289
+    },
+    "pa50": {
+      "noise_f1": 0.302802062489317,
+      "noise_rank": 5,
+      "n_detectors": 8,
+      "real_detectors_beaten": 1,
+      "n_real_detectors": 5,
+      "best_real": "window_pca",
+      "best_real_f1": 0.417929135071724,
+      "headroom": 0.11512707258240701,
+      "spread": 0.23452802546162752
+    },
+    "composite": {
+      "noise_f1": 0.26385262146624205,
+      "noise_rank": 7,
+      "n_detectors": 8,
+      "real_detectors_beaten": 0,
+      "n_real_detectors": 5,
+      "best_real": "window_pca",
+      "best_real_f1": 0.7125169793475976,
+      "headroom": 0.44866435788135556,
+      "spread": 0.5291158697375011
+    }
+  },
+  "win_rate_vs_noise": {
+    "point": {
+      "ewma": 0.14893617021276595,
+      "rolling_mad": 0.2765957446808511,
+      "seasonal": 0.3829787234042553,
+      "window_pca": 0.10638297872340426,
+      "iforest": 0.19148936170212766
+    },
+    "pa": {
+      "ewma": 0.23404255319148937,
+      "rolling_mad": 0.3404255319148936,
+      "seasonal": 0.2765957446808511,
+      "window_pca": 0.5531914893617021,
+      "iforest": 0.7021276595744681
+    },
+    "pa20": {
+      "ewma": 0.19148936170212766,
+      "rolling_mad": 0.3617021276595745,
+      "seasonal": 0.46808510638297873,
+      "window_pca": 0.19148936170212766,
+      "iforest": 0.3617021276595745
+    },
+    "pa50": {
+      "ewma": 0.2978723404255319,
+      "rolling_mad": 0.574468085106383,
+      "seasonal": 0.48936170212765956,
+      "window_pca": 0.3404255319148936,
+      "iforest": 0.425531914893617
+    },
+    "composite": {
+      "ewma": 0.06382978723404255,
+      "rolling_mad": 0.0851063829787234,
+      "seasonal": 0.06382978723404255,
+      "window_pca": 0.1276595744680851,
+      "iforest": 0.19148936170212766
+    }
+  },
+  "ranking_agreement_with_composite": {
+    "point": 0.7857142857142857,
+    "pa": 0.21428571428571427,
+    "pa20": 0.6666666666666666,
+    "pa50": 0.6904761904761905,
+    "composite": 1.0
+  },
+  "pa_inflation": {
+    "random": 138.5303219727133,
+    "constant": 1.0,
+    "lastvalue": 120.8234167872443,
+    "ewma": 79.51259413689223,
+    "rolling_mad": 110.6269531250534,
+    "seasonal": 72.16495727072648,
+    "window_pca": 68.14590138566369,
+    "iforest": 56.96334661834212
+  },
+  "oracle_cost": {
+    "point": {
+      "oracle_mean": 0.2591419755042485,
+      "calibrated_mean": 0.13502704664722287,
+      "retained": 0.5210543231542555
+    },
+    "pa": {
+      "oracle_mean": 0.8907523304190674,
+      "calibrated_mean": 0.5613190141132536,
+      "retained": 0.6301628353295162
+    },
+    "pa20": {
+      "oracle_mean": 0.5909787003477435,
+      "calibrated_mean": 0.21711963779403853,
+      "retained": 0.36738995443707373
+    },
+    "pa50": {
+      "oracle_mean": 0.35877155580561493,
+      "calibrated_mean": 0.14993999080354997,
+      "retained": 0.4179260824255214
+    },
+    "composite": {
+      "oracle_mean": 0.6290775850355814,
+      "calibrated_mean": 0.35201329852216534,
+      "retained": 0.5595705631480337
+    }
+  },
+  "protocol_descriptions": {
+    "point": "Per-point F1, unadjusted",
+    "pa": "Point-adjusted F1 (the literature standard)",
+    "pa20": "PA applied only when >20% of the window was flagged",
+    "pa50": "PA applied only when >50% of the window was flagged",
+    "composite": "Point-wise precision + event-wise recall (Garg et al.)"
+  },
+  "detector_order": [
+    "random",
+    "constant",
+    "lastvalue",
+    "ewma",
+    "rolling_mad",
+    "seasonal",
+    "window_pca",
+    "iforest"
+  ],
+  "n_series": 47
+}

index.html

@@ -1,19 +1,386 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>outliar — the metric is the bug</title>
+<style>
+  :root {
+    --blue: #2a78d6;
+    --orange: #eb6834;
+    --ink: #14202c;
+    --muted: #66748a;
+    --bg: #f6f8fb;
+    --card: #ffffff;
+    --line: #e2e8f1;
+    --shadow: 0 1px 2px rgba(20, 32, 44, .06), 0 8px 24px rgba(20, 32, 44, .06);
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --ink: #e8edf4;
+      --muted: #93a1b5;
+      --bg: #0f151d;
+      --card: #171f2a;
+      --line: #26313f;
+      --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
+    }
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0; padding: 28px 20px 48px; background: var(--bg); color: var(--ink);
+    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+  .wrap { max-width: 1080px; margin: 0 auto; }
+  header { margin-bottom: 20px; }
+  h1 { font-size: 25px; margin: 0 0 4px; letter-spacing: -.02em; }
+  h1 span { color: var(--orange); }
+  .tag { color: var(--muted); font-size: 14.5px; margin: 0; max-width: 66ch; }
+  .card {
+    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
+    box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px;
+  }
+  .controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
+  .field { display: flex; flex-direction: column; gap: 5px; min-width: 190px; flex: 1 1 200px; }
+  label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
+  select, button {
+    font: inherit; color: var(--ink); background: var(--bg);
+    border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
+  }
+  select { width: 100%; }
+  button {
+    background: var(--blue); color: #fff; border-color: transparent; cursor: pointer;
+    font-weight: 600; padding: 9px 16px; white-space: nowrap; transition: filter .15s;
+  }
+  button:hover { filter: brightness(1.08); }
+  button:disabled { opacity: .55; cursor: default; }
+
+  .verdict {
+    display: flex; gap: 12px; align-items: flex-start;
+    border-left: 3px solid var(--blue); padding: 10px 0 10px 14px; margin-top: 16px;
+    font-size: 14px;
+  }
+  .verdict.control { border-left-color: var(--orange); }
+  .verdict b { display: block; margin-bottom: 2px; }
+  .verdict .why { color: var(--muted); }
+
+  canvas { width: 100%; display: block; }
+  .slider-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
+  .slider-row input[type=range] { flex: 1; accent-color: var(--orange); }
+  .thr { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); min-width: 128px; }
+  .presets { display: flex; gap: 8px; }
+  .presets button { background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 500; font-size: 12.5px; padding: 6px 10px; }
+  .presets button:hover { color: var(--ink); filter: none; border-color: var(--muted); }
+
+  .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
+  .metric { border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; background: var(--bg); }
+  .metric.hero { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, var(--card)); }
+  .metric.good { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--card)); }
+  .metric .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
+  .metric .v { font-size: 27px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 3px 0 1px; }
+  .metric .s { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
+
+  .ledger { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
+  .ledger b { color: var(--ink); font-variant-numeric: tabular-nums; }
+  .legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
+  .swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
+  footer { color: var(--muted); font-size: 12.5px; text-align: center; margin-top: 22px; }
+  footer a { color: var(--blue); }
+  .err { color: var(--orange); font-size: 13.5px; }
+</style>
+
+<div class="wrap">
+  <header>
+    <h1>outl<span>iar</span></h1>
+    <p class="tag">
+      Anomaly detection on the Numenta benchmark, scored four ways. Pick a detector — including
+      one that is literally uniform noise — drag the threshold, and watch the metrics disagree
+      about whether it works.
+    </p>
+  </header>
+
+  <div class="card">
+    <div class="controls">
+      <div class="field">
+        <label for="series">Series</label>
+        <select id="series"></select>
+      </div>
+      <div class="field">
+        <label for="detector">Detector</label>
+        <select id="detector"></select>
+      </div>
+      <button id="sample">Try a sample</button>
+    </div>
+    <div class="verdict" id="verdict">
+      <div><b id="verdict-title">Loading…</b><span class="why" id="verdict-why"></span></div>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="legend">
+      <span><i class="swatch" style="background:#2a78d6;opacity:.35"></i>ground-truth anomaly window</span>
+      <span><i class="swatch" style="background:#eb6834"></i>alarm raised</span>
+      <span><i class="swatch" style="background:#66748a"></i>signal &amp; anomaly score</span>
+    </div>
+    <canvas id="chart" height="360"></canvas>
+    <div class="slider-row">
+      <input type="range" id="threshold" min="0" max="1000" value="500">
+      <span class="thr" id="thr-label">threshold —</span>
+      <div class="presets">
+        <button id="opt-pa" title="The threshold that maximises point-adjusted F1">PA optimum</button>
+        <button id="opt-comp" title="The threshold that maximises composite F1">Composite optimum</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="card">
+    <div class="metrics" id="metrics"></div>
+    <div class="ledger" id="ledger"></div>
+  </div>
+
+  <footer id="footer"></footer>
+</div>
+
+<script src="outliar.js"></script>
+<script src="shim.js"></script>
+<script>
+const BLUE = "#2a78d6", ORANGE = "#eb6834";
+const $ = (id) => document.getElementById(id);
+const params = new URLSearchParams(location.search);
+
+let state = { data: null, catalog: null, sampleIndex: 0, busy: false };
+
+function ink() {
+  return getComputedStyle(document.body).getPropertyValue("--ink").trim();
+}
+function muted() {
+  return getComputedStyle(document.body).getPropertyValue("--muted").trim();
+}
+function lineColor() {
+  return getComputedStyle(document.body).getPropertyValue("--line").trim();
+}
+
+async function getJSON(url) {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`${response.status} ${await response.text()}`);
+  return response.json();
+}
+
+// ---------------------------------------------------------------- chart
+function draw() {
+  const d = state.data;
+  const canvas = $("chart");
+  const ratio = window.devicePixelRatio || 1;
+  const width = canvas.clientWidth, height = 360;
+  canvas.width = width * ratio;
+  canvas.height = height * ratio;
+  canvas.style.height = height + "px";
+  const ctx = canvas.getContext("2d");
+  ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+  ctx.clearRect(0, 0, width, height);
+  if (!d) return;
+
+  const padL = 8, padR = 8;
+  const topH = 210, gap = 26, botH = 96;
+  const plotW = width - padL - padR;
+  const n = d.values.length;
+  const x = (i) => padL + (i / Math.max(1, n - 1)) * plotW;
+
+  // Ground-truth windows, drawn first so everything else sits on top. Window
+  // bounds are full-resolution indices; the drawn series is decimated.
+  const scale = n / d.n;
+  ctx.fillStyle = BLUE;
+  ctx.globalAlpha = 0.3;
+  for (const [s, e] of d.windows) {
+    const x0 = x(s * scale), x1 = x(e * scale);
+    ctx.fillRect(x0, 0, Math.max(1.5, x1 - x0), topH + gap + botH);
+  }
+  ctx.globalAlpha = 1;
+
+  // Probation shading — nothing there is scored.
+  const probX = x(d.probation * scale);
+  ctx.fillStyle = muted();
+  ctx.globalAlpha = 0.09;
+  ctx.fillRect(padL, 0, probX - padL, topH + gap + botH);
+  ctx.globalAlpha = 1;
+
+  const drawSeries = (arr, y0, h, color, lw) => {
+    let lo = Infinity, hi = -Infinity;
+    for (const v of arr) { if (v < lo) lo = v; if (v > hi) hi = v; }
+    if (!(hi > lo)) { hi = lo + 1; }
+    const y = (v) => y0 + h - ((v - lo) / (hi - lo)) * h;
+    ctx.beginPath();
+    for (let i = 0; i < arr.length; i++) {
+      const px = x(i), py = y(arr[i]);
+      i ? ctx.lineTo(px, py) : ctx.moveTo(px, py);
+    }
+    ctx.strokeStyle = color; ctx.lineWidth = lw; ctx.stroke();
+    return { y, lo, hi };
+  };
+
+  // Panel 1 — the signal, with an alarm tick under every flagged point.
+  const sig = drawSeries(d.values, 0, topH, muted(), 0.8);
+  ctx.fillStyle = ORANGE;
+  for (let i = 0; i < n; i++) {
+    if (d.scores[i] >= d.threshold && i * scale >= d.probation) {
+      ctx.fillRect(x(i) - 0.6, topH - 8, 1.6, 8);
+    }
+  }
+
+  // Panel 2 — the anomaly score and where the threshold cuts it.
+  const y0 = topH + gap;
+  const sc = drawSeries(d.scores, y0, botH, muted(), 0.8);
+  const ty = Math.min(y0 + botH, Math.max(y0, sc.y(d.threshold)));
+  ctx.beginPath();
+  ctx.setLineDash([5, 4]);
+  ctx.moveTo(padL, ty); ctx.lineTo(width - padR, ty);
+  ctx.strokeStyle = ORANGE; ctx.lineWidth = 1.4; ctx.stroke();
+  ctx.setLineDash([]);
+
+  ctx.fillStyle = muted();
+  ctx.font = "11px -apple-system, system-ui, sans-serif";
+  ctx.textAlign = "left";
+  ctx.fillText("signal", padL + 2, 12);
+  // Drop the caption to the floor of the panel when the threshold line is
+  // sitting where the caption would go — which is exactly what happens at the
+  // point-adjusted optimum, i.e. in every interesting screenshot.
+  const capY = ty < y0 + 22 ? y0 + botH - 4 : y0 + 12;
+  ctx.fillText("anomaly score", padL + 2, capY);
+  ctx.textAlign = "right";
+  const labY = Math.min(y0 + botH - 4, Math.max(y0 + 10, ty - 5));
+  ctx.fillText("threshold", width - padR - 4, labY);
+  ctx.textAlign = "left";
+}
+
+// ---------------------------------------------------------------- render
+function metricCard(key, label, value, sub, cls) {
+  return `<div class="metric ${cls}">
+    <div class="k">${label}</div>
+    <div class="v">${value.toFixed(3)}</div>
+    <div class="s">${sub}</div>
+  </div>`;
+}
+
+function render() {
+  const d = state.data;
+  if (!d) return;
+
+  $("verdict").className = "verdict" + (d.is_control ? " control" : "");
+  $("verdict-title").textContent =
+    `${d.detector} — ${d.description}` + (d.is_control ? "  ·  not a detector" : "");
+  $("verdict-why").textContent = d.note ||
+    (d.is_control
+      ? "This is a control. Any score it earns is a property of the metric, not of the method."
+      : "A genuine detector: it fits on the warm-up period only and never sees a label.");
+
+  const m = d.metrics;
+  $("metrics").innerHTML = [
+    metricCard("point", "Point-wise F1", m.point.f1,
+      `P ${m.point.precision.toFixed(2)} · R ${m.point.recall.toFixed(2)}`, ""),
+    metricCard("pa", "Point-adjusted F1", m.pa.f1,
+      "the number papers report", "hero"),
+    metricCard("pa20", "PA%K, K=20", m.pa20.f1,
+      "needs >20% of the window", ""),
+    metricCard("composite", "Composite F1", m.composite.f1,
+      `precision ${m.composite.precision.toFixed(2)} · events ${d.windows_caught}/${d.windows_total}`, "good"),
+  ].join("");
+
+  const ratio = d.alarms_inside > 0 ? (d.pa_credited / d.alarms_inside) : 0;
+  $("ledger").innerHTML =
+    `<b>${d.alarms.toLocaleString()}</b> alarms raised · ` +
+    `<b>${d.alarms_inside.toLocaleString()}</b> landed inside a real anomaly window · ` +
+    `point adjustment credits <b>${d.pa_credited.toLocaleString()}</b> of them as true positives` +
+    (ratio > 1.5 ? ` — a <b>${ratio.toFixed(0)}×</b> markup` : "") +
+    ` · <b>${d.false_alarms_per_day.toFixed(1)}</b> false alarms per day.`;
+
+  const range = d.score_range;
+  const pos = Math.round(1000 * (d.threshold - range[0]) / Math.max(1e-9, range[1] - range[0]));
+  $("threshold").value = Math.max(0, Math.min(1000, pos));
+  $("thr-label").textContent = `threshold ${d.threshold.toFixed(3)}`;
+  draw();
+}
+
+// ---------------------------------------------------------------- data
+async function load(threshold) {
+  if (state.busy) return;
+  state.busy = true;
+  $("sample").disabled = true;
+  try {
+    const series = $("series").value, detector = $("detector").value;
+    let url = `/api/evaluate?series=${encodeURIComponent(series)}&detector=${detector}`;
+    if (threshold !== undefined && threshold !== null) url += `&threshold=${threshold}`;
+    state.data = await getJSON(url);
+    render();
+  } catch (err) {
+    $("verdict-title").textContent = "Could not evaluate";
+    $("verdict-why").innerHTML = `<span class="err">${err.message}</span>`;
+  } finally {
+    state.busy = false;
+    $("sample").disabled = false;
+  }
+}
+
+async function loadSample() {
+  $("sample").disabled = true;
+  try {
+    state.data = await getJSON(`/sample?index=${state.sampleIndex++}`);
+    $("series").value = state.data.series;
+    $("detector").value = state.data.detector;
+    render();
+  } catch (err) {
+    $("verdict-title").textContent = "No sample available";
+    $("verdict-why").innerHTML = `<span class="err">${err.message}</span>`;
+  } finally {
+    $("sample").disabled = false;
+  }
+}
+
+async function boot() {
+  state.catalog = await getJSON("/api/catalog");
+  $("series").innerHTML = state.catalog.series
+    .map((s) => `<option value="${s.key}">${s.name} — ${s.corpus} (${s.windows} windows)</option>`)
+    .join("");
+  $("detector").innerHTML = state.catalog.detectors
+    .map((d) => `<option value="${d.name}">${d.name}${d.is_control ? " (control)" : ""}</option>`)
+    .join("");
+
+  $("series").onchange = () => load();
+  $("detector").onchange = () => load();
+  $("sample").onclick = loadSample;
+  $("opt-pa").onclick = () => load(state.data && state.data.pa_optimal_threshold);
+  $("opt-comp").onclick = () => load(state.data && state.data.composite_optimal_threshold);
+
+  $("threshold").oninput = (e) => {
+    if (!state.data) return;
+    const [lo, hi] = state.data.score_range;
+    state.data.threshold = lo + (e.target.value / 1000) * (hi - lo);
+    $("thr-label").textContent = `threshold ${state.data.threshold.toFixed(3)}`;
+    draw();
+  };
+  $("threshold").onchange = (e) => {
+    if (!state.data) return;
+    const [lo, hi] = state.data.score_range;
+    load(lo + (e.target.value / 1000) * (hi - lo));
+  };
+  window.addEventListener("resize", draw);
+  matchMedia("(prefers-color-scheme: dark)").addEventListener("change", draw);
+
+  try {
+    const f = await getJSON("/api/findings");
+    const pa = f.noise_rank.pa, comp = f.noise_rank.composite;
+    $("footer").innerHTML =
+      `Across all ${f.n_series} real NAB series: uniform noise scores ` +
+      `<b>${pa.noise_f1.toFixed(3)}</b> point-adjusted F1 (rank ${pa.noise_rank}/${pa.n_detectors}) ` +
+      `and <b>${comp.noise_f1.toFixed(3)}</b> composite F1 (rank ${comp.noise_rank}/${comp.n_detectors}).`;
+  } catch {
+    $("footer").textContent = "Run `make benchmark` to populate the benchmark-wide summary.";
+  }
+
+  await loadSample();
+  if (params.get("demo") === "1") {
+    // Headless screenshots land on a populated, argument-making state.
+    const n = parseInt(params.get("sample") || "0", 10);
+    state.sampleIndex = n;
+    await loadSample();
+  }
+}
+
+boot();
+</script>

outliar.js

@@ -0,0 +1,471 @@
+/* A JavaScript port of outliar's detectors and metrics.
+ *
+ * The deployed demo is a *static* page: there is no server, so the same
+ * benchmark has to run in the browser. Every function here mirrors the NumPy
+ * implementation in src/outliar/{detectors,metrics}.py, and tests/test_parity.py
+ * pins them together to 1e-9 by running this file under Node against the Python
+ * results on a shared fixture.
+ *
+ * Isolation Forest is the one detector not ported — it needs scikit-learn's
+ * fitted trees. The static demo omits it and says so.
+ */
+(function (root) {
+  "use strict";
+
+  const EPS = 1e-9;
+
+  // ---------------------------------------------------------------- helpers
+  function median(values) {
+    if (!values.length) return 0;
+    const sorted = Float64Array.from(values).sort();
+    const mid = sorted.length >> 1;
+    return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
+  }
+
+  function quantile(values, q) {
+    if (!values.length) return 0;
+    const sorted = Float64Array.from(values).sort();
+    // Linear interpolation between order statistics — numpy's default.
+    const pos = (sorted.length - 1) * q;
+    const lo = Math.floor(pos), hi = Math.ceil(pos);
+    return lo === hi ? sorted[lo] : sorted[lo] + (sorted[hi] - sorted[lo]) * (pos - lo);
+  }
+
+  function std(values) {
+    if (!values.length) return 0;
+    const mean = values.reduce((a, b) => a + b, 0) / values.length;
+    let acc = 0;
+    for (const v of values) acc += (v - mean) * (v - mean);
+    return Math.sqrt(acc / values.length);
+  }
+
+  function robustScale(values) {
+    const med = median(values);
+    const scale = 1.4826 * median(Array.from(values, (v) => Math.abs(v - med)));
+    if (scale >= EPS) return scale;
+    const sd = std(values);
+    return sd > EPS ? sd : 1.0;
+  }
+
+  /** Right-aligned rolling windows, front-padded by repeating the first value. */
+  function rollingWindows(values, window) {
+    const w = Math.max(2, Math.min(window, values.length));
+    const padded = new Float64Array(values.length + w - 1);
+    padded.fill(values[0], 0, w - 1);
+    padded.set(values, w - 1);
+    const out = [];
+    for (let i = 0; i < values.length; i++) out.push(padded.subarray(i, i + w));
+    return out;
+  }
+
+  function normalise(scores, probation) {
+    const warm = Array.from(scores.slice(0, probation)).filter(Number.isFinite);
+    const scale = warm.length ? robustScale(warm) : 1.0;
+    return Float64Array.from(scores, (s) => {
+      const v = s / (scale + EPS);
+      return Number.isFinite(v) ? v : 0;
+    });
+  }
+
+  const PROBATION_FRACTION = 0.15, PROBATION_MAX = 150;
+  function probationLength(n) {
+    return Math.min(PROBATION_MAX, Math.floor(PROBATION_FRACTION * n));
+  }
+
+  /** mulberry32 — a small seeded PRNG so the noise control is reproducible. */
+  function seededRandom(seed) {
+    let a = seed >>> 0;
+    return function () {
+      a = (a + 0x6d2b79f5) >>> 0;
+      let t = Math.imul(a ^ (a >>> 15), 1 | a);
+      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+  }
+
+  // ---------------------------------------------------------------- detectors
+  function randomScore(series, seed) {
+    const rand = seededRandom((seed || 0) + series.values.length);
+    return Float64Array.from({ length: series.values.length }, rand);
+  }
+
+  function constantScore(series) {
+    return new Float64Array(series.values.length).fill(0.5);
+  }
+
+  function lastvalueScore(series) {
+    const x = series.values, n = x.length;
+    const diff = new Float64Array(n);
+    for (let i = 1; i < n; i++) diff[i] = Math.abs(x[i] - x[i - 1]);
+    return normalise(diff, probationLength(n));
+  }
+
+  function ewmaScore(series, seed, alpha) {
+    alpha = alpha === undefined ? 0.05 : alpha;
+    const x = series.values, n = x.length;
+    const level = new Float64Array(n);
+    level[0] = x[0];
+    for (let t = 1; t < n; t++) level[t] = alpha * x[t - 1] + (1 - alpha) * level[t - 1];
+    const residual = Float64Array.from(x, (v, i) => Math.abs(v - level[i]));
+    return normalise(residual, probationLength(n));
+  }
+
+  function rollingMadScore(series, seed, window) {
+    window = window || 96;
+    const x = series.values, n = x.length;
+    const probation = probationLength(n);
+    const views = rollingWindows(x, window);
+    const fallback = robustScale(Array.from(x.slice(0, probation)));
+    const out = new Float64Array(n);
+    for (let i = 0; i < n; i++) {
+      const med = median(views[i]);
+      let scale = 1.4826 * median(Array.from(views[i], (v) => Math.abs(v - med)));
+      if (scale < EPS) scale = fallback;
+      out[i] = Math.abs(x[i] - med) / (scale + EPS);
+    }
+    return normalise(out, probation);
+  }
+
+  function seasonalScore(series) {
+    const x = series.values, n = x.length;
+    const probation = probationLength(n);
+    const buckets = 7 * 24;
+    const key = new Int32Array(n);
+    for (let i = 0; i < n; i++) {
+      const d = new Date(series.timestamps[i]);
+      key[i] = d.getUTCDay() === 0 ? 6 * 24 + d.getUTCHours()
+        : (d.getUTCDay() - 1) * 24 + d.getUTCHours();
+    }
+    const fallback = median(Array.from(x.slice(0, probation || n)));
+    const profile = new Float64Array(buckets).fill(fallback);
+    const groups = new Map();
+    for (let i = 0; i < probation; i++) {
+      if (!groups.has(key[i])) groups.set(key[i], []);
+      groups.get(key[i]).push(x[i]);
+    }
+    for (const [b, vals] of groups) profile[b] = median(vals);
+    const residual = Float64Array.from(x, (v, i) => Math.abs(v - profile[key[i]]));
+    return normalise(residual, probation);
+  }
+
+  /* Cyclic Jacobi eigendecomposition of a symmetric matrix.
+   *
+   * Power iteration was tried first and could not separate eigenvalues that
+   * sit within a percent of each other — which is exactly what the tail of a
+   * sliding-window covariance looks like once the signal has been explained.
+   * Jacobi is exact to machine precision and needs no starting guess, and at
+   * width 32 the O(width^3) cost is irrelevant.
+   *
+   * Returns eigenvectors as rows, sorted by descending eigenvalue.
+   */
+  function symmetricEigen(matrix, width, sweeps) {
+    sweeps = sweeps || 60;
+    const a = matrix.map((row) => Float64Array.from(row));
+    const v = [];
+    for (let i = 0; i < width; i++) {
+      v.push(new Float64Array(width));
+      v[i][i] = 1;
+    }
+
+    for (let sweep = 0; sweep < sweeps; sweep++) {
+      let off = 0;
+      for (let p = 0; p < width; p++)
+        for (let q = p + 1; q < width; q++) off += a[p][q] * a[p][q];
+      if (off < 1e-24) break;
+
+      for (let p = 0; p < width - 1; p++) {
+        for (let q = p + 1; q < width; q++) {
+          if (Math.abs(a[p][q]) < 1e-300) continue;
+          const theta = (a[q][q] - a[p][p]) / (2 * a[p][q]);
+          const t = Math.sign(theta || 1) / (Math.abs(theta) + Math.sqrt(theta * theta + 1));
+          const c = 1 / Math.sqrt(t * t + 1);
+          const s = t * c;
+          for (let i = 0; i < width; i++) {
+            const aip = a[i][p], aiq = a[i][q];
+            a[i][p] = c * aip - s * aiq;
+            a[i][q] = s * aip + c * aiq;
+          }
+          for (let i = 0; i < width; i++) {
+            const api = a[p][i], aqi = a[q][i];
+            a[p][i] = c * api - s * aqi;
+            a[q][i] = s * api + c * aqi;
+          }
+          for (let i = 0; i < width; i++) {
+            const vip = v[i][p], viq = v[i][q];
+            v[i][p] = c * vip - s * viq;
+            v[i][q] = s * vip + c * viq;
+          }
+        }
+      }
+    }
+
+    const order = Array.from({ length: width }, (_, i) => i).sort((x, y) => a[y][y] - a[x][x]);
+    return order.map((idx) => {
+      const vec = new Float64Array(width);
+      for (let i = 0; i < width; i++) vec[i] = v[i][idx];
+      // Fix the sign convention so the basis is reproducible run to run.
+      let lead = 0;
+      for (let i = 0; i < width; i++) {
+        if (Math.abs(vec[i]) > Math.abs(vec[lead])) lead = i;
+      }
+      if (vec[lead] < 0) for (let i = 0; i < width; i++) vec[i] = -vec[i];
+      return vec;
+    });
+  }
+
+  /** Top-k right singular vectors of `rows`, via the eigenvectors of X'X. */
+  function topSubspace(rows, width, k) {
+    const cov = [];
+    for (let i = 0; i < width; i++) cov.push(new Float64Array(width));
+    for (const row of rows) {
+      for (let a = 0; a < width; a++) {
+        const va = row[a];
+        if (!va) continue;
+        for (let b = a; b < width; b++) cov[a][b] += va * row[b];
+      }
+    }
+    for (let a = 0; a < width; a++) for (let b = 0; b < a; b++) cov[a][b] = cov[b][a];
+    return symmetricEigen(cov, width).slice(0, k);
+  }
+
+  function windowPcaScore(series, seed, window, rank) {
+    window = window || 32;
+    rank = rank || 3;
+    const x = series.values, n = x.length;
+    const probation = Math.max(window + 1, probationLength(n));
+    const views = rollingWindows(x, window);
+    const width = views[0].length;
+
+    const centre = new Float64Array(width);
+    for (let i = 0; i < probation; i++)
+      for (let j = 0; j < width; j++) centre[j] += views[i][j] / probation;
+
+    const warmFlat = [];
+    for (let i = 0; i < probation; i++)
+      for (let j = 0; j < width; j++) warmFlat.push(views[i][j] - centre[j]);
+    const scale = robustScale(warmFlat);
+
+    const warmRows = [];
+    for (let i = 0; i < probation; i++) {
+      const row = new Float64Array(width);
+      for (let j = 0; j < width; j++) row[j] = (views[i][j] - centre[j]) / scale;
+      warmRows.push(row);
+    }
+    const k = Math.min(rank, Math.min(warmRows.length, width) - 1, width);
+    if (k < 1) return new Float64Array(n);
+    const basis = topSubspace(warmRows, width, k);
+
+    const out = new Float64Array(n);
+    const centred = new Float64Array(width);
+    for (let i = 0; i < n; i++) {
+      for (let j = 0; j < width; j++) centred[j] = (views[i][j] - centre[j]) / scale;
+      const recon = new Float64Array(width);
+      for (const vec of basis) {
+        let dot = 0;
+        for (let j = 0; j < width; j++) dot += centred[j] * vec[j];
+        for (let j = 0; j < width; j++) recon[j] += dot * vec[j];
+      }
+      let acc = 0;
+      for (let j = 0; j < width; j++) {
+        const d = centred[j] - recon[j];
+        acc += d * d;
+      }
+      out[i] = Math.sqrt(acc);
+    }
+    return normalise(out, probationLength(n));
+  }
+
+  const DETECTORS = {
+    random: randomScore,
+    constant: constantScore,
+    lastvalue: lastvalueScore,
+    ewma: ewmaScore,
+    rolling_mad: rollingMadScore,
+    seasonal: seasonalScore,
+    window_pca: windowPcaScore,
+  };
+
+  const CONTROLS = new Set(["random", "constant", "lastvalue"]);
+
+  const DESCRIPTIONS = {
+    random: "Uniform noise — never looks at the data",
+    constant: "Untrained: one flat score everywhere",
+    lastvalue: "|x_t − x_{t−1}|, no fitting",
+    ewma: "EWMA one-step residual",
+    rolling_mad: "Trailing median/MAD robust z-score",
+    seasonal: "Time-of-day × day-of-week profile residual",
+    window_pca: "Low-rank subspace reconstruction error",
+  };
+
+  // ---------------------------------------------------------------- metrics
+  function contiguousRuns(mask) {
+    const runs = [];
+    let start = -1;
+    for (let i = 0; i < mask.length; i++) {
+      if (mask[i] && start < 0) start = i;
+      else if (!mask[i] && start >= 0) { runs.push([start, i - 1]); start = -1; }
+    }
+    if (start >= 0) runs.push([start, mask.length - 1]);
+    return runs;
+  }
+
+  function prf(tp, fp, fn) {
+    const precision = tp + fp > 0 ? tp / (tp + fp) : 0;
+    const recall = tp + fn > 0 ? tp / (tp + fn) : 0;
+    const f1 = precision + recall > 1e-12
+      ? (2 * precision * recall) / (precision + recall) : 0;
+    return { precision, recall, f1, tp, fp, fn };
+  }
+
+  function pointF1(yTrue, yPred) {
+    let tp = 0, fp = 0, fn = 0;
+    for (let i = 0; i < yTrue.length; i++) {
+      if (yTrue[i] && yPred[i]) tp++;
+      else if (!yTrue[i] && yPred[i]) fp++;
+      else if (yTrue[i] && !yPred[i]) fn++;
+    }
+    return prf(tp, fp, fn);
+  }
+
+  function adjustPredictions(yTrue, yPred, k) {
+    k = k || 0;
+    const adjusted = Array.from(yPred, Boolean);
+    for (const [s, e] of contiguousRuns(yTrue)) {
+      let hits = 0;
+      for (let i = s; i <= e; i++) if (adjusted[i]) hits++;
+      const length = e - s + 1;
+      if (hits > 0 && hits / length > k) for (let i = s; i <= e; i++) adjusted[i] = true;
+    }
+    return adjusted;
+  }
+
+  function paF1(yTrue, yPred, k) {
+    return pointF1(yTrue, adjustPredictions(yTrue, yPred, k));
+  }
+
+  function eventRecall(yTrue, yPred) {
+    const windows = contiguousRuns(yTrue);
+    let caught = 0;
+    for (const [s, e] of windows) {
+      for (let i = s; i <= e; i++) if (yPred[i]) { caught++; break; }
+    }
+    return [caught, windows.length - caught];
+  }
+
+  function compositeF1(yTrue, yPred) {
+    let tpT = 0, fpT = 0;
+    for (let i = 0; i < yTrue.length; i++) {
+      if (yPred[i]) (yTrue[i] ? tpT++ : fpT++);
+    }
+    const precision = tpT + fpT > 0 ? tpT / (tpT + fpT) : 0;
+    const [tpE, fnE] = eventRecall(yTrue, yPred);
+    const recall = tpE + fnE > 0 ? tpE / (tpE + fnE) : 0;
+    const f1 = precision + recall > 1e-12
+      ? (2 * precision * recall) / (precision + recall) : 0;
+    return { precision, recall, f1, tp: tpE, fp: fpT, fn: fnE };
+  }
+
+  function allProtocols(yTrue, yPred) {
+    return {
+      point: pointF1(yTrue, yPred),
+      pa: paF1(yTrue, yPred, 0),
+      pa20: paF1(yTrue, yPred, 0.2),
+      pa50: paF1(yTrue, yPred, 0.5),
+      composite: compositeF1(yTrue, yPred),
+    };
+  }
+
+  function candidateThresholds(scores, n) {
+    n = n || 200;
+    const finite = Array.from(scores).filter(Number.isFinite);
+    if (!finite.length) return [0];
+    const grid = [];
+    for (let i = 0; i < n; i++) grid.push(quantile(finite, i / (n - 1)));
+    const unique = Array.from(new Set(grid)).sort((a, b) => a - b);
+    unique.push(Math.max(...finite) + 1e-9);
+    return unique;
+  }
+
+  function sweep(yTrue, scores, nGrid) {
+    const best = {};
+    for (const name of ["point", "pa", "pa20", "pa50", "composite"]) {
+      best[name] = [Infinity, { f1: 0 }];
+    }
+    for (const threshold of candidateThresholds(scores, nGrid)) {
+      const yPred = Array.from(scores, (s) => s >= threshold);
+      const results = allProtocols(yTrue, yPred);
+      for (const name in results) {
+        if (results[name].f1 > best[name][1].f1) best[name] = [threshold, results[name]];
+      }
+    }
+    return best;
+  }
+
+  function falseAlarmsPerDay(yTrue, yPred, samplingMinutes) {
+    let runs = 0;
+    for (const [s, e] of contiguousRuns(yPred)) {
+      let overlaps = false;
+      for (let i = s; i <= e; i++) if (yTrue[i]) { overlaps = true; break; }
+      if (!overlaps) runs++;
+    }
+    const days = (yTrue.length * samplingMinutes) / (60 * 24);
+    return days > 0 ? runs / days : 0;
+  }
+
+  // ---------------------------------------------------------------- NAB
+  function parseCsv(text) {
+    const lines = text.trim().split("\n");
+    const timestamps = [], values = [];
+    for (let i = 1; i < lines.length; i++) {
+      const comma = lines[i].indexOf(",");
+      if (comma < 0) continue;
+      timestamps.push(lines[i].slice(0, comma).trim());
+      values.push(parseFloat(lines[i].slice(comma + 1)));
+    }
+    return { timestamps, values: Float64Array.from(values) };
+  }
+
+  /** NAB window bounds are timestamps; map them onto index positions. */
+  function windowsToIndices(timestamps, windows) {
+    const ms = timestamps.map((t) => Date.parse(t.replace(" ", "T") + "Z"));
+    const out = [];
+    for (const [startS, endS] of windows) {
+      const start = Date.parse(startS.replace(" ", "T").split(".")[0] + "Z");
+      const end = Date.parse(endS.replace(" ", "T").split(".")[0] + "Z");
+      let first = -1, last = -1;
+      for (let i = 0; i < ms.length; i++) {
+        if (ms[i] >= start && ms[i] <= end) { if (first < 0) first = i; last = i; }
+      }
+      if (first >= 0) out.push([first, last]);
+    }
+    return out;
+  }
+
+  function pointLabels(n, windows) {
+    const y = new Array(n).fill(false);
+    for (const [s, e] of windows) for (let i = s; i <= e; i++) y[i] = true;
+    return y;
+  }
+
+  function samplingMinutes(timestamps) {
+    if (timestamps.length < 2) return 5;
+    const deltas = [];
+    for (let i = 1; i < Math.min(timestamps.length, 200); i++) {
+      deltas.push(
+        (Date.parse(timestamps[i].replace(" ", "T") + "Z") -
+          Date.parse(timestamps[i - 1].replace(" ", "T") + "Z")) / 60000
+      );
+    }
+    return median(deltas);
+  }
+
+  root.outliar = {
+    median, quantile, robustScale, rollingWindows, normalise, probationLength,
+    DETECTORS, CONTROLS, DESCRIPTIONS,
+    contiguousRuns, pointF1, adjustPredictions, paF1, compositeF1, eventRecall,
+    allProtocols, candidateThresholds, sweep, falseAlarmsPerDay,
+    parseCsv, windowsToIndices, pointLabels, samplingMinutes,
+  };
+})(typeof globalThis !== "undefined" ? globalThis : this);
+
+if (typeof module !== "undefined" && module.exports) module.exports = globalThis.outliar;

shim.js

@@ -0,0 +1,208 @@
+/* Static-deployment shim.
+ *
+ * Hugging Face static Spaces serve files, not Python, so the page has no
+ * backend. This intercepts the app's own API routes and answers them in the
+ * browser: NAB is fetched straight from the upstream GitHub raw endpoint
+ * (which sends `access-control-allow-origin: *`) and every detector and metric
+ * is recomputed locally by web/outliar.js — the same code the Python↔Node
+ * parity test pins to the NumPy implementation.
+ *
+ * Two detectors do not survive the trip and the page says so rather than
+ * quietly serving different numbers: `iforest` needs scikit-learn's fitted
+ * trees, and `random` uses NumPy's PCG64, which a JS PRNG cannot reproduce
+ * bit-for-bit (it is still uniform noise, which is the entire point of it).
+ */
+(function () {
+  "use strict";
+
+  const NAB = "https://raw.githubusercontent.com/numenta/NAB/master";
+  const REAL_CORPORA = new Set([
+    "realAWSCloudwatch", "realAdExchange", "realKnownCause", "realTraffic", "realTweets",
+  ]);
+  const N_GRID = 120;
+
+  const cache = { labels: null, series: new Map(), scores: new Map(), sweeps: new Map() };
+
+  const SAMPLES = [
+    {
+      series: "realKnownCause/nyc_taxi.csv",
+      detector: "random",
+      note: "Uniform noise on NYC taxi demand, at its own point-adjusted optimum.",
+    },
+    {
+      series: "realKnownCause/machine_temperature_system_failure.csv",
+      detector: "window_pca",
+      note: "A real detector on a real machine failure — the honest case.",
+    },
+    {
+      series: "realAWSCloudwatch/ec2_cpu_utilization_5f5533.csv",
+      detector: "random",
+      note: "Noise again, on EC2 CPU utilisation.",
+    },
+    {
+      series: "realTraffic/speed_7578.csv",
+      detector: "seasonal",
+      note: "A seasonal-profile detector on highway speeds.",
+    },
+  ];
+
+  async function labels() {
+    if (!cache.labels) {
+      const response = await fetch(`${NAB}/labels/combined_windows.json`);
+      if (!response.ok) throw new Error(`could not reach NAB (${response.status})`);
+      cache.labels = await response.json();
+    }
+    return cache.labels;
+  }
+
+  async function series(key) {
+    if (cache.series.has(key)) return cache.series.get(key);
+    const [all, response] = await Promise.all([
+      labels(), fetch(`${NAB}/data/${key}`),
+    ]);
+    if (!response.ok) throw new Error(`could not load ${key} (${response.status})`);
+    const parsed = outliar.parseCsv(await response.text());
+    const windows = outliar.windowsToIndices(parsed.timestamps, all[key] || []);
+    const value = {
+      key,
+      name: key.split("/")[1].replace(/\.csv$/, ""),
+      corpus: key.split("/")[0],
+      timestamps: parsed.timestamps,
+      values: parsed.values,
+      windows,
+      n: parsed.values.length,
+      samplingMinutes: outliar.samplingMinutes(parsed.timestamps),
+    };
+    cache.series.set(key, value);
+    return value;
+  }
+
+  function scores(s, detector) {
+    const id = `${s.key}::${detector}`;
+    if (!cache.scores.has(id)) {
+      cache.scores.set(id, outliar.DETECTORS[detector](s, 7));
+    }
+    return cache.scores.get(id);
+  }
+
+  async function evaluate(key, detector, threshold) {
+    const s = await series(key);
+    const raw = scores(s, detector);
+    const probation = outliar.probationLength(s.n);
+
+    const scored = Array.from(raw.slice(probation));
+    const yTrue = outliar.pointLabels(s.n, s.windows).slice(probation);
+
+    const sweepId = `${key}::${detector}`;
+    if (!cache.sweeps.has(sweepId)) {
+      cache.sweeps.set(sweepId, outliar.sweep(yTrue, scored, N_GRID));
+    }
+    const best = cache.sweeps.get(sweepId);
+    const paOptimal = best.pa[0];
+    if (threshold === null || threshold === undefined) threshold = paOptimal;
+
+    const yPred = scored.map((v) => v >= threshold);
+    const protocols = outliar.allProtocols(yTrue, yPred);
+    const [caught, missed] = outliar.eventRecall(yTrue, yPred);
+
+    let alarms = 0, inside = 0;
+    for (let i = 0; i < yPred.length; i++) {
+      if (yPred[i]) { alarms++; if (yTrue[i]) inside++; }
+    }
+    const credited = outliar.adjustPredictions(yTrue, yPred).reduce((a, b) => a + (b ? 1 : 0), 0);
+
+    const step = Math.max(1, Math.floor(s.n / 2400));
+    const timestamps = [], values = [], drawn = [];
+    for (let i = 0; i < s.n; i += step) {
+      timestamps.push(s.timestamps[i]);
+      values.push(s.values[i]);
+      drawn.push(raw[i]);
+    }
+
+    const finite = scored.filter(Number.isFinite);
+    return {
+      series: key,
+      name: s.name,
+      detector,
+      is_control: outliar.CONTROLS.has(detector),
+      description: outliar.DESCRIPTIONS[detector],
+      threshold,
+      pa_optimal_threshold: paOptimal,
+      composite_optimal_threshold: best.composite[0],
+      score_range: [Math.min(...finite), outliar.quantile(finite, 0.999)],
+      probation,
+      n: s.n,
+      timestamps,
+      values,
+      scores: drawn,
+      windows: s.windows,
+      metrics: protocols,
+      alarms,
+      alarms_inside: inside,
+      pa_credited: credited,
+      windows_caught: caught,
+      windows_total: caught + missed,
+      false_alarms_per_day: outliar.falseAlarmsPerDay(yTrue, yPred, s.samplingMinutes),
+    };
+  }
+
+  async function catalog() {
+    const all = await labels();
+    const keys = Object.keys(all).filter((k) => REAL_CORPORA.has(k.split("/")[0])).sort();
+    return {
+      series: keys.map((k) => ({
+        key: k,
+        name: k.split("/")[1].replace(/\.csv$/, ""),
+        corpus: k.split("/")[0],
+        windows: all[k].length,
+      })),
+      detectors: Object.keys(outliar.DETECTORS).map((name) => ({
+        name,
+        description: outliar.DESCRIPTIONS[name],
+        is_control: outliar.CONTROLS.has(name),
+      })),
+      n_samples: SAMPLES.length,
+    };
+  }
+
+  function json(payload) {
+    return new Response(JSON.stringify(payload), {
+      status: 200, headers: { "content-type": "application/json" },
+    });
+  }
+
+  const original = window.fetch.bind(window);
+
+  window.fetch = async function (input, init) {
+    const url = typeof input === "string" ? input : input.url;
+    // Only the app's own routes are intercepted; NAB requests pass through.
+    if (!/^\/(api\/|sample|healthz)/.test(url)) return original(input, init);
+
+    const parsed = new URL(url, location.origin);
+    const path = parsed.pathname;
+    const query = parsed.searchParams;
+
+    try {
+      if (path === "/api/catalog") return json(await catalog());
+      if (path === "/healthz") return json({ status: "ok", static: true });
+      if (path === "/api/findings") {
+        const response = await original("findings.json");
+        if (!response.ok) throw new Error("findings.json missing");
+        return json(await response.json());
+      }
+      if (path === "/api/evaluate") {
+        const threshold = query.has("threshold") ? parseFloat(query.get("threshold")) : null;
+        return json(await evaluate(query.get("series"), query.get("detector"), threshold));
+      }
+      if (path === "/sample") {
+        const choice = SAMPLES[(parseInt(query.get("index") || "0", 10) || 0) % SAMPLES.length];
+        const payload = await evaluate(choice.series, choice.detector, null);
+        payload.note = choice.note;
+        return json(payload);
+      }
+    } catch (err) {
+      return new Response(String(err && err.message ? err.message : err), { status: 502 });
+    }
+    return new Response("not found", { status: 404 });
+  };
+})();