feat(monitors): a monitor's page reads as a page — response time over 24h, labelled actions, how long, not "ago"; the add form says what each type checks (#5214)

Monitor page: a response-time chart for the last day with failed checks
marked; Edit / Pause / Delete as labelled buttons; the state tile says
"for 29m" instead of "for at least 29m 25s ago"; the check strip fills
its card; no failures is one line, not an empty box; Settings names the
type, target and the actual global interval, with readable field names.

Add monitor: a line under the fields says what the selected type checks
and when it counts as up; Name says it defaults to the target.

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

tests/core/test_monitors_page.py

@@ -101,13 +101,18 @@ async def test_the_monitor_page_says_since_when_and_why(app):
             "monitors/detail.html", monitor=m, host=None, latest=down, failures=[down], state="down",
             since=datetime.now(timezone.utc) - timedelta(minutes=12), since_at_least=False, tls_days=None,
             uptime={"24h": 93.0, "7d": None, "30d": 99.5},
-            heartbeat=[{"state": "up", "title": "a"}, {"state": "down", "title": "b"}])
+            heartbeat=[{"state": "up", "title": "a"}, {"state": "down", "title": "b"}],
+            history=[{"at": 1, "ms": 20.0, "down": 0}, {"at": 2, "ms": 30.0, "down": 0},
+                     {"at": 3, "ms": None, "down": 3}], poll_interval=60)
     assert '<a href="/monitors/">Monitors</a>' in page and "shop &lt;api&gt;" in page
-    assert "since <time" in page and ">12m ago</time>" in page
+    assert ">for 12m<" in page                                     # how long, not "… ago"
+    assert "Response time · last 24h" in page and '"down": 3' in page
+    assert "Expected status" in page and "1m <span" in page          # the global interval, named
     assert "503 Service Unavailable" in page
     assert 'class="stat-tile stat-crit"' in page and "93.00%" in page
     assert "Authorization" in page and "s3cr3t-token" not in page   # header names, never their values
-    assert 'aria-label="Delete shop &lt;api&gt;"' in page
+    assert 'data-confirm="Delete monitor shop &lt;api&gt;? Its check history goes with it."' in page
+    assert ">Edit</a>" in page and ">Pause</button>" in page
     assert not hex_colours(page), hex_colours(page)
 
 
@@ -119,6 +124,8 @@ async def test_adding_is_its_own_page_and_keeps_what_was_typed(app):
             values={"name": "db", "target": "10.0.0.9", "host_id": "", "check_interval_seconds": "30"},
             error="port must be between 1 and 65535, got 0.")
     assert '<a href="/monitors/">Monitors</a>' in page and 'action="/monitors/add"' in page
+    for kind in ("Ping", "TCP", "HTTP", "DNS"):                # each type says what it checks
+        assert f"<strong>{kind}</strong>" in page
     assert '<p class="field-error" role="alert">port must be between 1 and 65535, got 0.</p>' in page
     assert 'value="db"' in page and 'value="10.0.0.9"' in page and 'value="30"' in page