Implement S23 runtime health slice

static/cortex-os/runtime-health/runtime_health.css

@@ -0,0 +1,72 @@
+.cortex-os-runtime-health {
+  border: 1px solid rgba(19, 82, 121, 0.22);
+  border-radius: 8px;
+  margin: 16px;
+  max-width: 520px;
+  padding: 14px 16px;
+  background: #f7fbff;
+  color: #18212b;
+  font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.cortex-os-runtime-health h2 {
+  margin: 0 0 8px;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.cortex-os-runtime-health__badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: #dde8f0;
+  color: #18212b;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.cortex-os-runtime-health[data-state="healthy"] .cortex-os-runtime-health__badge {
+  background: #d8f1df;
+  color: #0d5b27;
+}
+
+.cortex-os-runtime-health[data-state="degraded"] .cortex-os-runtime-health__badge,
+.cortex-os-runtime-health[data-state="unknown"] .cortex-os-runtime-health__badge,
+.cortex-os-runtime-health[data-state="loading"] .cortex-os-runtime-health__badge {
+  background: #fff0c9;
+  color: #6a4a00;
+}
+
+.cortex-os-runtime-health[data-state="unavailable"] .cortex-os-runtime-health__badge,
+.cortex-os-runtime-health[data-state="error"] .cortex-os-runtime-health__badge,
+.cortex-os-runtime-health[data-state="redacted"] .cortex-os-runtime-health__badge {
+  background: #ffe0dd;
+  color: #7a1e17;
+}
+
+.cortex-os-runtime-health__summary {
+  margin: 10px 0;
+}
+
+.cortex-os-runtime-health__signals {
+  display: grid;
+  grid-template-columns: minmax(120px, 1fr) minmax(92px, auto);
+  gap: 6px 12px;
+  margin: 0;
+}
+
+.cortex-os-runtime-health__signals dt,
+.cortex-os-runtime-health__signals dd {
+  margin: 0;
+}
+
+.cortex-os-runtime-health__signals dt {
+  color: #44515f;
+}
+
+.cortex-os-runtime-health__signals dd {
+  font-weight: 700;
+}

static/cortex-os/runtime-health/runtime_health.js

@@ -0,0 +1,107 @@
+(function () {
+  "use strict";
+
+  var endpoint = "/api/cortex-os/runtime-health";
+  var states = ["healthy", "degraded", "unavailable", "unknown", "loading", "error", "redacted"];
+
+  if (window.__cortexOsRuntimeHealthLoaded) {
+    return;
+  }
+  window.__cortexOsRuntimeHealthLoaded = true;
+
+  function ensurePanel() {
+    var panel = document.querySelector("[data-cortex-os-runtime-health]");
+    if (panel) {
+      return panel;
+    }
+
+    panel = document.createElement("section");
+    panel.className = "cortex-os-runtime-health";
+    panel.setAttribute("data-cortex-os-runtime-health", "true");
+    panel.setAttribute("data-state", "loading");
+
+    var title = document.createElement("h2");
+    title.textContent = "Cortex OS Runtime Health";
+
+    var badge = document.createElement("span");
+    badge.className = "cortex-os-runtime-health__badge";
+    badge.setAttribute("data-role", "status");
+    badge.textContent = "loading";
+
+    var summary = document.createElement("p");
+    summary.className = "cortex-os-runtime-health__summary";
+    summary.setAttribute("data-role", "summary");
+    summary.textContent = "Checking Runtime Health.";
+
+    var list = document.createElement("dl");
+    list.className = "cortex-os-runtime-health__signals";
+    list.setAttribute("data-role", "signals");
+
+    panel.appendChild(title);
+    panel.appendChild(badge);
+    panel.appendChild(summary);
+    panel.appendChild(list);
+
+    var target = document.querySelector("main") || document.body;
+    target.appendChild(panel);
+    return panel;
+  }
+
+  function setState(panel, state, summary, signals) {
+    var nextState = states.indexOf(state) >= 0 ? state : "unknown";
+    panel.setAttribute("data-state", nextState);
+    panel.querySelector("[data-role='status']").textContent = nextState;
+    panel.querySelector("[data-role='summary']").textContent = summary || "redacted";
+    renderSignals(panel.querySelector("[data-role='signals']"), signals || []);
+  }
+
+  function renderSignals(list, signals) {
+    list.textContent = "";
+    signals.slice(0, 3).forEach(function (signal) {
+      var name = document.createElement("dt");
+      var value = document.createElement("dd");
+      name.textContent = signal.name || "redacted";
+      value.textContent = signal.status || "unknown";
+      list.appendChild(name);
+      list.appendChild(value);
+    });
+  }
+
+  function renderPayload(panel, payload) {
+    if (!payload || payload.ok !== true || !payload.result) {
+      setState(panel, "error", "Runtime Health is unavailable.", []);
+      return;
+    }
+    setState(panel, payload.result.status, payload.result.summary, payload.result.signals);
+  }
+
+  function loadRuntimeHealth() {
+    var panel = ensurePanel();
+    setState(panel, "loading", "Checking Runtime Health.", []);
+
+    fetch(endpoint, {
+      method: "GET",
+      headers: { Accept: "application/json" },
+      credentials: "same-origin",
+      cache: "no-store"
+    })
+      .then(function (response) {
+        if (!response.ok) {
+          throw new Error("runtime-health-unavailable");
+        }
+        return response.json();
+      })
+      .then(function (payload) {
+        renderPayload(panel, payload);
+      })
+      .catch(function () {
+        setState(panel, "error", "Runtime Health is unavailable.", []);
+      });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", loadRuntimeHealth, { once: true });
+  } else {
+    loadRuntimeHealth();
+  }
+})();