feat(ui): host page leads with its alerts; old readings say how old (#5210)

#5210 "Problems first, with since-time, across every list" (milestone 477),
second batch.

- Host page: an "Alerts on this host" strip first (rules on its agent
  series, its containers or its monitors: alert_svc.watches_host); its
  monitors problems first with "Down 12m · reason"; Docker above Ansible.
- Uptime page and widget: worst 24h uptime first, then 7d and 30d; hosts
  with no uptime yet last.
- Agent panel and fleet widget: last seen as "3m ago", not a clock time.
- SNMP: a device is "Reachable" only while it answered within the last 3
  polls; older readings say "No answer" with their age, and every device
  says when it was last read (was: reachable whenever any reading existed).
- Traefik: a router missing from 3 scrapes in a row is listed apart as no
  longer reported, by when it was last seen, instead of keeping its last
  state (a removed router stayed Failing).

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

steward/templates/hosts/detail.html

@@ -24,6 +24,27 @@
 </div>
 
 
+{# ── Alerts on this host: what is breaching, before anything else ─────────── #}
+{% if alerts %}
+<section class="card problem-card" aria-labelledby="host-alerts" style="margin-bottom:1rem;">
+  <h2 id="host-alerts" class="section-title" style="margin-bottom:0.6rem;">Alerts on this host</h2>
+  <ul class="problem-list">
+    {% for row in alerts %}
+    <li>
+      {{ status_badge(row.label) }}
+      <span class="problem-detail">
+        {{- row.says.lead -}}
+        {%- if row.url %}<a href="{{ row.url }}">{{ row.says.resource }}</a>{% else %}<strong>{{ row.says.resource }}</strong>{% endif -%}
+        {{- row.says.tail -}}
+        {%- if row.label == 'acknowledged' and row.acked_by %} · acknowledged by {{ row.acked_by }}{% endif -%}
+      </span>
+      <a href="/alerts/history?rule={{ row.rule.id }}" class="field-hint" style="margin-left:0.4rem;">{{ row.rule.name }}</a>
+    </li>
+    {% endfor %}
+  </ul>
+</section>
+{% endif %}
+
 {# ── Live vitals strip (host_agent fragment) — full width on top, polled ────── #}
 <div id="hv-strip"
      hx-get="/plugins/host_agent/vitals/{{ host.id }}"
@@ -52,10 +73,15 @@
   <div class="ping-row{% if not m.enabled %} ping-row-paused{% endif %}">
     <div class="ping-meta" style="min-width:150px;max-width:230px;">
       <div style="display:flex;align-items:baseline;gap:0.4rem;">
-        {{ status_dot('paused' if not m.enabled else ('pending' if latest is none else ('up' if latest.is_up else 'down'))) }}
+        {{ status_dot(d.state) }}
         <a class="ping-name" href="/monitors/{{ m.id }}">{{ m.name }}</a>
       </div>
       <span class="ping-addr" title="{{ m.target }}">{{ m.type|monitor_type }} · {{ m.target }}</span>
+      {% if d.state == 'down' %}
+      <span class="tone-crit" style="font-size:0.75rem;overflow-wrap:anywhere;">
+        Down{% if d.down_since %} {{ d.down_since|ago|replace(' ago', '') }}{% endif %}{% if d.down_reason %} · {{ d.down_reason }}{% endif %}
+      </span>
+      {% endif %}
     </div>
     <div class="ping-pills">
       {% for _ in range([30 - d.heartbeat|length, 0]|max) %}<span class="pill pill-empty" title="No data"></span>{% endfor %}
@@ -124,6 +150,12 @@
 </div>
 </div>{# Monitors + Agent grid #}
 
+{# ── Docker (docker plugin fragment; renders nothing if the host has none);
+   above Ansible: containers are state to read, Ansible is something to do ──── #}
+{% if "docker" in enabled_plugins %}
+<div hx-get="/plugins/docker/host/{{ host.id }}" hx-trigger="load" hx-swap="innerHTML"></div>
+{% endif %}
+
 {# ── Ansible (full width) ─────────────────────────────────────────────────── #}
 <div class="card">
   <h3 class="section-title">Ansible</h3>
@@ -211,11 +243,6 @@
   {% endif %}
 </div>{# Ansible card #}
 
-{# ── Docker (docker plugin fragment; renders nothing if the host has none) ──── #}
-{% if "docker" in enabled_plugins %}
-<div hx-get="/plugins/docker/host/{{ host.id }}" hx-trigger="load" hx-swap="innerHTML"></div>
-{% endif %}
-
 {# ── SNMP (renders nothing unless a configured SNMP device maps to this host) ── #}
 {% if "snmp" in enabled_plugins %}
 <div hx-get="/plugins/snmp/host/{{ host.id }}" hx-trigger="load" hx-swap="innerHTML"></div>