feat(hosts): one health header, graded by one set of thresholds (#5122)

The host page's vitals strip becomes its health header: Live or Stale,
then one sentence — "Memory 93% is past its critical threshold", "Every
reading is within its thresholds", or, for a stale host, "No report since
20m ago; the readings below are from then" — and last seen as |ago. CPU,
memory, root disk and load per core follow as stat tiles graded by
Settings → Thresholds, with their sparklines.

The full-metrics page drew its bars and gauges at a hard-coded 70/90
(temperatures 70/85) while every other page used the configured cutoffs
(80/90 by default), so a 75 % CPU was amber here and fine everywhere else.
bar() now takes the metric kind and colours its .meter-fill through
status_class; gauges, temperatures and per-core bars do the same.

The host's monitor rows move onto the Monitors list's shapes: a status dot,
the name linking to the monitor's page, Ping/TCP/DNS/HTTP, pill-up/
pill-down, latency and uptime through status_class, labelled icon buttons.
HEX_CEILING drops to 54.

New formatting.worst_reading(readings, thresholds) picks the reading
furthest past its cutoff, the first of equals winning.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

plugins/host_agent/templates/_host_vitals.html

@@ -1,35 +1,33 @@
-{# Host vitals strip — compact CPU/MEM/DISK/LOAD + pressure, live-polled into the
-   host hub. Renders nothing until the agent reports (the Agent panel below then
-   shows provisioning). #}
+{# Host health header — live polled into the host hub: live or stale, the worst
+   reading against Settings → Thresholds, last seen, then CPU / memory / disk /
+   load tiles graded by the same cutoffs. Renders nothing until the agent
+   reports (the Agent panel below then shows provisioning). #}
+{% from "_macros.html" import status_badge, stat_tile %}
+{% macro pct(v) %}{{ '%.0f%%'|format(v) if v is not none else '—' }}{% endmacro %}
 {% if reporting %}
-{% set lbl = "font-size:0.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;" %}
-{% macro vital(label, value, text, kind, spark) %}
-<div style="min-width:88px;">
-  <div style="{{ lbl }}">{{ label }}</div>
-  <div style="font-size:1.5rem;font-weight:700;line-height:1.1;{{ threshold_style(value, kind) }}">{{ text }}</div>
-  <div style="margin-top:0.2rem;">{{ spark | safe }}</div>
-</div>
-{% endmacro %}
-<div class="card" style="display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem 2rem;margin-bottom:1rem;">
-  {{ vital("CPU", cpu, ('%.0f%%'|format(cpu) if cpu is not none else '—'), 'cpu', sparks.cpu) }}
-  {{ vital("Memory", mem, ('%.0f%%'|format(mem) if mem is not none else '—'), 'mem', sparks.mem) }}
-  {{ vital("Disk /", disk_root, ('%.0f%%'|format(disk_root) if disk_root is not none else '—'), 'disk', sparks.disk) }}
-  {{ vital("Load /core", load_per_core, ('%d%%'|format(load_per_core) if load_per_core is not none else '—'), 'load', sparks.load) }}
-
-  <div style="margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:0.3rem;font-size:0.75rem;color:var(--text-muted);text-align:right;">
-    <span>
-      {% if stale %}<span class="badge badge-red">stale</span>{% else %}<span class="badge badge-green">live</span>{% endif %}
-      {% if reg and reg.agent_version %}<span style="margin-left:0.3rem;">v{{ reg.agent_version }}</span>{% endif %}
+<section class="card host-health" aria-label="Host health">
+  <div class="host-health-head">
+    {{ status_badge('stale' if stale else 'up', 'Stale' if stale else 'Live') }}
+    <span class="host-health-summary">
+      {%- if stale %}No report since {{ reg.last_seen_at|ago }}; the readings below are from then.
+      {%- elif worst %}<span class="tone-{{ worst[2] }}">{{ worst[0] }} {{ pct(worst[1]) }}</span> is past its {{ "critical" if worst[2] == "crit" else "warning" }} threshold.
+      {%- else %}Every reading is within its thresholds.{% endif -%}
     </span>
-    {% if psi.cpu is not none or psi.mem is not none or psi.io is not none %}
-    <span title="Pressure stall — % of the last 10s tasks waited for the resource">
-      <span style="color:var(--text-dim);text-transform:uppercase;font-size:0.66rem;letter-spacing:0.04em;">Pressure 10s</span>
-      cpu {{ '%.0f%%'|format(psi.cpu) if psi.cpu is not none else '—' }}
-      · mem {{ '%.0f%%'|format(psi.mem) if psi.mem is not none else '—' }}
-      · io {{ '%.0f%%'|format(psi.io) if psi.io is not none else '—' }}
+    <span class="problem-detail">
+      {%- if not stale %}seen {{ reg.last_seen_at|ago }}{% endif %}
+      {%- if reg.agent_version %}{{ " · " if not stale }}agent v{{ reg.agent_version }}{% endif -%}
     </span>
-    {% endif %}
-    {% if reg and reg.last_seen_at %}<span>seen {{ reg.last_seen_at.strftime("%H:%M:%S") }} UTC</span>{% endif %}
   </div>
-</div>
+  <div class="stat-strip" style="margin-bottom:0;">
+    {{ stat_tile("CPU", pct(cpu), state=status_class(cpu, 'cpu'), hint=sparks.cpu|safe) }}
+    {{ stat_tile("Memory", pct(mem), state=status_class(mem, 'mem'), hint=sparks.mem|safe) }}
+    {{ stat_tile("Disk /", pct(disk_root), state=status_class(disk_root, 'disk'), hint=sparks.disk|safe) }}
+    {{ stat_tile("Load per core", pct(load_per_core), state=status_class(load_per_core, 'load'), hint=sparks.load|safe) }}
+  </div>
+  {% if psi.cpu is not none or psi.mem is not none or psi.io is not none %}
+  <p class="field-hint" style="margin-top:0.6rem;" title="Pressure stall: the share of the last 10 s that tasks waited for the resource">
+    Pressure (10 s): cpu {{ pct(psi.cpu) }} · mem {{ pct(psi.mem) }} · io {{ pct(psi.io) }}
+  </p>
+  {% endif %}
+</section>
 {% endif %}