From e98dd10556dd847e066a9ddb1af15c635c988484 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Fri, 9 Oct 2026 14:06:58 -0400
Subject: [PATCH] fix(ui): a reading's age no longer puts a <time> element
 inside a title attribute (#5467)

The `when` filter returns a <time> element, so title="{{ at|when }}" wrote raw
markup into the attribute. That broke the hover text, and in the rule form's
metric preview (#5475) it leaked a stray `">` into the page. `ago` already
carries the exact time as its own tooltip, so both places drop the title.
Also fixes #5467's page test, which needed the escaped apostrophe.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 steward/templates/alerts/_metric_preview.html | 2 +-
 steward/templates/settings/system.html        | 2 +-
 tests/core/test_steward_health.py             | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/steward/templates/alerts/_metric_preview.html b/steward/templates/alerts/_metric_preview.html
index 7be3c01..4319a42 100644
--- a/steward/templates/alerts/_metric_preview.html
+++ b/steward/templates/alerts/_metric_preview.html
@@ -5,7 +5,7 @@
 {% if preview %}
 <div class="metric-preview">
   <span>Now <strong>{{ metric_value(metric, preview.now) }}</strong>
-    <span class="tone-dim" title="{{ preview.at|when }}">{{ preview.at|ago }}</span></span>
+    <span class="tone-dim">{{ preview.at|ago }}</span></span>
   {% if preview.series|length > 1 %}
   <span class="metric-preview-day">
     <span class="tone-dim">last 24 h</span> {{ metric_value(metric, preview.low) }} – {{ metric_value(metric, preview.high) }}
diff --git a/steward/templates/settings/system.html b/steward/templates/settings/system.html
index 92e7221..c5f0543 100644
--- a/steward/templates/settings/system.html
+++ b/steward/templates/settings/system.html
@@ -24,7 +24,7 @@
         <td class="cell-name"><span title="{{ metric_label(r.metric) }}">{{ metric_label(r.metric) }}</span>
           <div class="cell-sub" title="{{ metric_about(r.metric) }}">{{ metric_about(r.metric) }}</div></td>
         <td class="nowrap">{{ metric_value(r.metric, r.now) }}
-          {%- if r.at %}<div class="cell-sub" title="{{ r.at|when }}">{{ r.at|ago }}</div>{% endif %}</td>
+          {%- if r.at %}<div class="cell-sub">{{ r.at|ago }}</div>{% endif %}</td>
         <td class="nowrap">
           {%- if r.low is not none %}{{ metric_value(r.metric, r.low) }} – {{ metric_value(r.metric, r.high) }}
           <span class="metric-preview-spark" aria-hidden="true">{{ r.spark|safe }}</span>
diff --git a/tests/core/test_steward_health.py b/tests/core/test_steward_health.py
index c93d10b..324d4d5 100644
--- a/tests/core/test_steward_health.py
+++ b/tests/core/test_steward_health.py
@@ -55,6 +55,7 @@ async def test_the_page_reads_as_a_verdict_then_each_measure(app, previews):
     async with app.test_request_context("/settings/system/"):
         session["user_role"] = "admin"
         page = " ".join((await render_template("settings/system.html", **got)).split())
-    assert '<span class="tone-warn">Steward wasn\'t watching for up to 7m' in page
+    assert '<span class="tone-warn">Steward wasn&#39;t watching for up to 7m' in page
+    assert 'title="<' not in page          # a <time> element never lands inside an attribute
     assert "Database round trip" in page and "4 ms" in page and "2 ms – 9 ms" in page
     assert page.index("page-verdict") < page.index("Agent posts per minute")