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>

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 %}

steward/templates/ansible/run_started.html

@@ -1,13 +1,13 @@
-<div style="background:#0f0f1e;border:1px solid #2a2a4a;border-radius:6px;padding:1rem;">
-    <div style="display:flex;align-items:center;gap:1rem;margin-bottom:0.75rem;">
-        <span style="color:#a0a000;font-weight:bold;">RUNNING</span>
-        <span style="color:#a0a0c0;font-size:0.9rem;">{{ run.playbook_path }}</span>
-        <a href="/ansible/runs/{{ run.id }}" style="color:#6060c0;font-size:0.82rem;margin-left:auto;">Full view →</a>
+{# The run form's answer: the run just started, streaming its output in place. #}
+{% from "_macros.html" import status_badge %}
+<div class="card run-started">
+    <div class="run-started-head">
+        {{ status_badge('running') }}
+        <span>{{ title }}</span>
+        <a href="/ansible/runs/{{ run.id }}" class="run-started-link">Full view →</a>
     </div>
-    <pre id="sse-output-{{ run.id }}"
-         style="background:#080810;padding:0.75rem;border-radius:4px;font-family:monospace;font-size:0.78rem;color:#a0c0a0;max-height:400px;overflow-y:auto;white-space:pre-wrap;margin:0 0 0.5rem 0;">
-    </pre>
-    <div id="sse-status-{{ run.id }}" style="font-size:0.85rem;color:var(--text-dim);">
+    <pre id="sse-output-{{ run.id }}" class="run-output"></pre>
+    <div id="sse-status-{{ run.id }}" class="field-hint">
         Streaming output…
     </div>
     <script>