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/maintenance.html

@@ -7,8 +7,8 @@
     <a class="btn" href="/alerts/maintenance/new">New window</a>
 {% endcall %}
 
-{% if windows %}
-<div class="card-flush">
+{% macro window_table(rows, kind) %}
+<div class="card-flush"{% if kind != 'expired' %} style="margin-bottom:1.5rem;"{% endif %}>
   <table class="table">
     <thead>
       <tr>
@@ -21,9 +21,7 @@
       </tr>
     </thead>
     <tbody>
-      {% for w in windows %}
-      {% set is_active = w.start_at <= now and w.end_at >= now %}
-      {% set is_upcoming = w.start_at > now %}
+      {% for w in rows %}
       <tr>
         <td style="font-weight:500;">{{ w.name }}</td>
         <td style="font-size:0.85rem;color:var(--text-muted);">
@@ -41,10 +39,10 @@
         <td style="font-size:0.85rem;font-family:ui-monospace,monospace;">
           {{ w.end_at.strftime("%Y-%m-%d %H:%M") }} UTC
         </td>
-        <td style="text-align:center;">
-          {% if is_active %}{{ status_badge('warn', 'Active') }}
-          {% elif is_upcoming %}{{ status_badge('pending', 'Upcoming') }}
-          {% else %}{{ status_badge('inactive', 'Expired') }}{% endif %}
+        <td style="text-align:center;font-size:0.8rem;">
+          {% if kind == 'active' %}{{ status_badge('warn', 'Active') }}<div class="field-hint">ends {{ w.end_at|ago }}</div>
+          {% elif kind == 'upcoming' %}{{ status_badge('pending', 'Upcoming') }}<div class="field-hint">starts {{ w.start_at|ago }}</div>
+          {% else %}{{ status_badge('inactive', 'Expired') }}<div class="field-hint">ended {{ w.end_at|ago }}</div>{% endif %}
         </td>
         <td class="td-actions">
           <form method="post" action="/alerts/maintenance/{{ w.id }}/delete" style="display:inline;">{{ csrf_field() }}
@@ -57,6 +55,26 @@
     </tbody>
   </table>
 </div>
+{% endmacro %}
+
+{% if windows %}
+{% if active %}
+<h2 class="section-title" style="margin-bottom:0.75rem;">Active now</h2>
+{{ window_table(active, 'active') }}
+{% endif %}
+{% if upcoming %}
+<h2 class="section-title" style="margin-bottom:0.75rem;">Upcoming</h2>
+{{ window_table(upcoming, 'upcoming') }}
+{% endif %}
+{% if not active and not upcoming %}
+<div class="card" style="margin-bottom:1.5rem;">{{ empty_state("No window is active or scheduled. Every alert notifies as usual.") }}</div>
+{% endif %}
+{% if expired %}
+<details>
+  <summary class="section-title" style="cursor:pointer;margin-bottom:0.75rem;">Expired ({{ expired|length }})</summary>
+  {{ window_table(expired, 'expired') }}
+</details>
+{% endif %}
 {% else %}
 <div class="card">{{ empty_state("No maintenance windows yet.", "New window", "/alerts/maintenance/new") }}</div>
 {% endif %}