feat(ui): alerts, monitors, hosts, schedules and maintenance lists put problems first, with since-times (#5210)

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

- Alerts: the Active list reads firing, no data, acknowledged, pending, the
  longest-running first, and re-polls itself. An acknowledged alert says how
  long it has been breaching (from the alert's events; acknowledging moves
  last_transition_at) and, apart from that, who acknowledged it and when.
  Rules show what each is doing now; disabled rules sort last. The current
  value reads the latest-value table (#5208) instead of plugin_metrics.
- Monitors: a down monitor says "Down 12m · connection refused" in the list.
- Hosts: sorted down, agent gone quiet, pending, healthy. The agent column
  shows "—" for a missing reading (was 0%) and a Stale badge with its age.
  agent_metrics_by_host is gone; the list reads agent_overview_by_host.
- Schedules: failing first (failed or interrupted run, or a firing that could
  not start one), then running, then the rest, paused last; status badge
  from the shared states.
- Maintenance windows: active (ending soonest), then upcoming (starting
  soonest), with expired folded away; each says when it ends/starts/ended.

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

steward/templates/alerts/list.html

@@ -9,48 +9,11 @@
     {% if can_edit %}<a class="btn" href="/alerts/rules/new">New rule</a>{% endif %}
 {% endcall %}
 
-{% if active %}
-<h2 class="section-title" style="margin-bottom:1rem;">Active</h2>
-<div class="card-flush" style="margin-bottom:2rem;">
-    <table class="table">
-        <thead>
-            <tr>
-                <th>State</th>
-                <th>What is wrong</th>
-                <th>Rule</th>
-                <th></th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for row in active %}
-            <tr>
-                <td>
-                    {{ status_badge(row.label, title=("No sample since " ~ (row.state.last_sample_at.strftime('%Y-%m-%d %H:%M UTC') if row.state.last_sample_at else 'the rule started watching')) if row.label == 'no_data' else none) }}
-                    {% if row.state.no_data_since and row.label != 'no_data' %}
-                    {{ status_badge('no_data', title="Silent since " ~ row.state.no_data_since.strftime('%Y-%m-%d %H:%M UTC')) }}
-                    {% endif %}
-                </td>
-                <td>
-                    {{- row.says.lead -}}
-                    {%- if row.url %}<a href="{{ row.url }}">{{ row.says.resource }}</a>{% else %}<strong>{{ row.says.resource }}</strong>{% endif -%}
-                    {{- row.says.tail -}}
-                </td>
-                <td style="color:var(--text-muted);"><a href="/alerts/history?rule={{ row.rule.id }}">{{ row.rule.name }}</a></td>
-                <td class="td-actions">
-                    {% if can_edit and row.state.state.value == 'firing' %}
-                    <form method="post" action="/alerts/{{ row.rule.id }}/acknowledge" style="display:inline;">{{ csrf_field() }}
-                        <button type="submit" class="btn btn-sm btn-warn">Acknowledge</button>
-                    </form>
-                    {% endif %}
-                </td>
-            </tr>
-            {% endfor %}
-        </tbody>
-    </table>
+{# The Active section re-reads itself, so an alert that clears or starts shows
+   without a reload. #}
+<div id="alerts-active" hx-get="/alerts/active" hx-trigger="every {{ poll_interval or 60 }}s" hx-swap="innerHTML">
+{% include "alerts/_active.html" %}
 </div>
-{% else %}
-<div class="card" style="margin-bottom:2rem;">{{ empty_state("No active alerts. Every rule is quiet.") }}</div>
-{% endif %}
 
 <h2 class="section-title" style="margin-bottom:1rem;">Rules</h2>
 {% if rules %}
@@ -59,6 +22,7 @@
         <thead>
             <tr>
                 <th>Name</th>
+                <th>Now</th>
                 <th>Condition</th>
                 <th style="text-align:center;" title="Checks in a row to fire / to clear">Fire / clear</th>
                 <th></th>
@@ -73,6 +37,12 @@
                   <span style="font-size:0.72rem;color:var(--text-dim);margin-left:0.35rem;">disabled</span>
                   {% endif %}
                 </td>
+                <td>
+                  {%- set now_label = (rule_state or {}).get(rule.id) %}
+                  {%- if not rule.enabled %}<span class="tone-dim" style="font-size:0.8rem;">off</span>
+                  {%- elif now_label and now_label not in ('inactive', 'resolved') %}{{ status_badge(now_label) }}
+                  {%- else %}<span class="tone-ok" style="font-size:0.8rem;" title="Within its threshold">quiet</span>{% endif -%}
+                </td>
                 <td style="color:var(--text-muted);font-size:0.85rem;">
                   <span style="color:var(--text-dim);">{{ rule.source_module }}/</span>{{ rule.resource_name }}
                   <span style="font-family:ui-monospace,monospace;font-size:0.8rem;">