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

@@ -1,48 +1,33 @@
 {% extends "base.html" %}
-{% from "_macros.html" import crumbs %}
-{% block title %}Run {{ run.id[:8] }} — Steward{% endblock %}
-{% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), ("Run " ~ run.id[:8], "")]) }}{% endblock %}
+{% from "_macros.html" import crumbs, page_header, status_badge %}
+{% block title %}{{ row.title }} — Steward{% endblock %}
+{% block breadcrumb %}{{ crumbs([("Ansible", "/ansible/"), (row.title, "")]) }}{% endblock %}
 {% block content %}
-<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;">
-    <h1 class="page-title" style="margin-bottom:0;">Run Detail</h1>
-    <div style="margin-left:auto;display:flex;gap:0.5rem;">
-        {% if run.status.value in ("running", "queued") and session.user_role in ("operator", "admin") %}
-        <form method="post" action="/ansible/runs/{{ run.id }}/cancel" data-confirm="Cancel this run?">{{ csrf_field() }}
-            <button type="submit" class="btn btn-sm btn-danger">Cancel run</button>
-        </form>
-        {% endif %}
-        <a href="/ansible/runs/{{ run.id }}/log" class="btn btn-sm btn-ghost">Download log</a>
-    </div>
-</div>
+{% call page_header(row.title, "Run " ~ run.id[:8] ~ " from " ~ run.source_name) %}
+    {% if run.status.value in ("running", "queued") and session.user_role in ("operator", "admin") %}
+    <form method="post" action="/ansible/runs/{{ run.id }}/cancel" data-confirm="Cancel this run?">{{ csrf_field() }}
+        <button type="submit" class="btn btn-sm btn-danger">Cancel run</button>
+    </form>
+    {% endif %}
+    <a href="/ansible/runs/{{ run.id }}/log" class="btn btn-sm btn-ghost">Download log</a>
+{% endcall %}
 
-{% 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)") %}
 <div class="card">
-    <div style="display:grid;grid-template-columns:auto 1fr;gap:0.4rem 1rem;font-size:0.9rem;margin-bottom:1rem;">
-        <span style="color:var(--text-muted);">ID</span><span style="color:var(--text-dim);font-family:monospace;">{{ run.id }}</span>
-        <span style="color:var(--text-muted);">Playbook</span><span>{{ run.playbook_path }}</span>
-        <span style="color:var(--text-muted);">Scope</span><span title="{{ run.inventory_scope }}">{{ scope_label or run.inventory_scope }}</span>
-        <span style="color:var(--text-muted);">Source</span><span>{{ run.source_name }}</span>
-        <span style="color:var(--text-muted);">Triggered by</span><span>{{ triggered_label }}</span>
-        <span style="color:var(--text-muted);">Status</span><span style="color:{{ status_color }};font-weight:bold;">{{ run.status.value.upper() }}</span>
-        <span style="color:var(--text-muted);">Started</span><span style="color:var(--text-dim);">{{ run.started_at.strftime("%Y-%m-%d %H:%M:%S UTC") }}</span>
-        {% if run.finished_at %}
-        <span style="color:var(--text-muted);">Finished</span><span style="color:var(--text-dim);">{{ run.finished_at.strftime("%Y-%m-%d %H:%M:%S UTC") }}</span>
-        {% endif %}
+    <dl class="kv">
+        <dt>Status</dt><dd>{{ status_badge(run.status) }}{% if row.check %} <span class="badge badge-dim" title="Ansible check mode: nothing was changed">dry run</span>{% endif %}</dd>
+        <dt>Started</dt><dd title="{{ run.started_at.strftime('%Y-%m-%d %H:%M:%S UTC') }}">{{ run.started_at|ago }}</dd>
+        <dt>Duration</dt><dd>{{ row.duration_s|duration }}{% if not run.finished_at %} so far{% endif %}</dd>
+        <dt>Playbook</dt><dd>{{ run.playbook_path }}</dd>
+        <dt>Scope</dt><dd title="{{ run.inventory_scope }}">{{ row.scope_label }}</dd>
+        <dt>Source</dt><dd>{{ run.source_name }}</dd>
+        <dt>Triggered by</dt><dd>{{ triggered_label }}</dd>
         {% if run.params %}
-        {% if run.params.limit %}
-        <span style="color:var(--text-muted);">Limit</span><span style="font-family:ui-monospace,monospace;">{{ run.params.limit }}</span>
+        {% if run.params.limit %}<dt>Limit</dt><dd class="mono">{{ run.params.limit }}</dd>{% endif %}
+        {% if run.params.tags %}<dt>Tags</dt><dd class="mono">{{ run.params.tags }}</dd>{% endif %}
+        {% if run.params.extra_vars %}<dt>Extra vars</dt><dd class="mono">{{ run.params.extra_vars | join(", ") }}</dd>{% endif %}
         {% endif %}
-        {% if run.params.tags %}
-        <span style="color:var(--text-muted);">Tags</span><span style="font-family:ui-monospace,monospace;">{{ run.params.tags }}</span>
-        {% endif %}
-        {% if run.params.check %}
-        <span style="color:var(--text-muted);">Mode</span><span style="color:var(--orange);">dry-run (--check --diff)</span>
-        {% endif %}
-        {% if run.params.extra_vars %}
-        <span style="color:var(--text-muted);">Extra vars</span><span style="font-family:ui-monospace,monospace;">{{ run.params.extra_vars | join(", ") }}</span>
-        {% endif %}
-        {% endif %}
-    </div>
+        <dt>ID</dt><dd class="mono field-hint">{{ run.id }}</dd>
+    </dl>
 </div>
 
 {% if run.results and run.results.hosts %}
@@ -70,7 +55,7 @@
     </table>
     {% if run.results.failures %}
     <div class="section-title" style="margin:1rem 0 0.4rem;">Failures</div>
-    <pre style="margin:0;padding:0.75rem;background:var(--bg);border-radius:4px;font-size:0.75rem;color:#ff9090;max-height:240px;overflow:auto;white-space:pre-wrap;">{{ run.results.failures | join("\n") }}</pre>
+    <pre style="margin:0;padding:0.75rem;background:var(--bg);border-radius:4px;font-size:0.75rem;color:var(--red);max-height:240px;overflow:auto;white-space:pre-wrap;">{{ run.results.failures | join("\n") }}</pre>
     {% endif %}
 </div>
 {% endif %}