feat(ansible): runs named by what ran where, with ago, duration and one status badge (#5125)

Runs read "update.yml on web-1" (run_title over the scope label, beside
describe_scope) on the runs list, the run page's title and breadcrumb, and
the run-started panel. The list shows started |ago (full time on hover),
|duration (counting "so far" while a run is going) and a dry-run tag.

Run statuses join STATES, so the list and the run page use status_badge:
queued dim, running info (blue, so work in progress doesn't read as a
problem), success ok "Succeeded", failed crit, interrupted warn, cancelled
dim. run_started.html leaves its hard-coded colours for tokens; the run
page's facts move to the .kv list and its failures to var(--red). Template
hex colours: 54 -> 47.

Also fixes #5124's sidebar count, which CI run 8389 failed on: the stylesheet
guard allows no weight above 500, and .nav-count asked for 600.

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

steward/templates/ansible/index.html

@@ -1,43 +1,37 @@
 {% extends "base.html" %}
+{% from "_macros.html" import page_header, status_badge, empty_state %}
 {% block title %}Ansible Runs — Steward{% endblock %}
 {% block content %}
-<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
-    <h1 class="page-title" style="margin-bottom:0;">Ansible Runs</h1>
-    <div style="display:flex;gap:0.5rem;">
-      <a href="/ansible/inventory/targets" class="btn btn-ghost">Inventory</a>
-      <a href="/ansible/schedules" class="btn btn-ghost">Schedules</a>
-      <a href="/ansible/browse" class="btn">Browse Playbooks</a>
-    </div>
-</div>
+{% call page_header("Ansible Runs", "Each run by what it ran where, newest first.") %}
+    <a href="/ansible/inventory/targets" class="btn btn-ghost">Inventory</a>
+    <a href="/ansible/schedules" class="btn btn-ghost">Schedules</a>
+    <a href="/ansible/browse" class="btn">Browse Playbooks</a>
+{% endcall %}
 {% if not runs %}
-<div class="card">
-    <p style="color:var(--text-muted);">No runs yet. <a href="/ansible/browse">Browse playbooks</a> to begin.</p>
-</div>
+<div class="card">{{ empty_state("No runs yet.", "Browse playbooks", "/ansible/browse") }}</div>
 {% else %}
 <div class="card-flush">
 <table class="table">
     <thead>
         <tr>
-            <th>Playbook</th>
-            <th>Source</th>
+            <th>Run</th>
             <th>Status</th>
             <th>Started</th>
-            <th></th>
+            <th>Duration</th>
         </tr>
     </thead>
     <tbody>
-    {% for run in runs %}
-    {% set status_color = {"queued": "var(--text-dim)", "running": "var(--yellow)", "success": "var(--green)", "failed": "var(--red)", "interrupted": "var(--orange)", "cancelled": "var(--orange)"}.get(run.status.value, "var(--text-muted)") %}
+    {% for row in runs %}
+    {% set run = row.run %}
     <tr>
-        <td style="font-size:0.9rem;">{{ run.playbook_path }}</td>
-        <td style="color:var(--text-muted);font-size:0.9rem;">{{ run.source_name }}</td>
         <td>
-            <span style="color:{{ status_color }};font-size:0.85rem;font-weight:bold;">{{ run.status.value.upper() }}</span>
-        </td>
-        <td style="color:var(--text-muted);font-size:0.85rem;">{{ run.started_at.strftime("%Y-%m-%d %H:%M") }}</td>
-        <td class="td-actions">
-            <a href="/ansible/runs/{{ run.id }}" class="btn btn-sm btn-ghost">View</a>
+            <a href="/ansible/runs/{{ run.id }}" title="{{ run.inventory_scope }}">{{ row.title }}</a>
+            {% if row.check %}<span class="badge badge-dim" title="Ansible check mode: nothing was changed">dry run</span>{% endif %}
+            <div class="field-hint">{{ run.source_name }}</div>
         </td>
+        <td>{{ status_badge(run.status) }}</td>
+        <td title="{{ run.started_at.strftime('%Y-%m-%d %H:%M:%S UTC') }}">{{ run.started_at|ago }}</td>
+        <td>{{ row.duration_s|duration }}{% if not run.finished_at and run.status.value in ('running', 'queued') %} so far{% endif %}</td>
     </tr>
     {% endfor %}
     </tbody>