Graph the metric behind each alert on the incident page

Each alert carries a generatorURL pointing at the Prometheus rule that fired
it. The server now parses that link, queries the same Prometheus for the
rule's expression and draws it under the alert, with the current value
beside it. The browser never talks to Prometheus, so the CSP stays at
connect-src 'self'.

The URL comes out of a webhook payload, so whoever holds an integration key
chooses it. Querying it is therefore opt-in and bounded by an allowlist,
TERDUT_PROMETHEUS_ALLOWED_HOSTS (names, "*" as one label, a leading "**" as
several, IPs, CIDRs). The check runs on the address the dialer is about to
use, a name that resolves to loopback or link-local is refused even when it
matches, and redirects and proxy variables are ignored.

A worker takes a snapshot when an incident opens and another when it
closes, so the graph outlives Prometheus' retention. It finds its work in
the database rather than being triggered from the webhook, so ingestion is
untouched and a restart loses nothing. While an incident is open the
metrics endpoint also queries live, cached for 15 seconds.

The rule expression keeps its threshold, so Prometheus returns data only
while the alert condition holds; "no data" for the current value means the
condition cleared. Stripping the threshold needs a PromQL parser and is left
out.

Claude-Session: https://claude.ai/code/session_016mBLURvJoMuUEr9cB2RpUN

internal/web/static/app.css

@@ -600,6 +600,33 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh
 .alert-item-summary { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
 .alert-item-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--faint); }
 .alert-item-foot a { color: var(--accent); font-weight: 600; }
+
+/* Metrics under an alert */
+.metrics { display: grid; gap: 6px; }
+.metrics-note { color: var(--faint); font-size: 13px; }
+.metrics-now { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
+.metrics-now strong { font-size: 18px; font-variant-numeric: tabular-nums; }
+.metrics-now.none { color: var(--muted); }
+.metrics-now-label { color: var(--faint); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
+.metric-chart { width: 100%; height: auto; display: block; }
+.mc-grid { stroke: var(--border); stroke-width: 1; }
+.mc-label { fill: var(--faint); font-size: 10px; }
+.mc-marker { stroke-width: 1; stroke-dasharray: 3 3; }
+.mc-marker.start { stroke: var(--crit); }
+.mc-marker.end { stroke: var(--ok); }
+.mc-line { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
+.mc-line.s0, .mc-swatch.s0 { stroke: var(--accent); background: var(--accent); }
+.mc-line.s1, .mc-swatch.s1 { stroke: var(--warn); background: var(--warn); }
+.mc-line.s2, .mc-swatch.s2 { stroke: var(--ok); background: var(--ok); }
+.mc-line.s3, .mc-swatch.s3 { stroke: var(--crit); background: var(--crit); }
+.mc-line.s4, .mc-swatch.s4 { stroke: var(--muted); background: var(--muted); }
+.mc-dot.s0 { fill: var(--accent); } .mc-dot.s1 { fill: var(--warn); } .mc-dot.s2 { fill: var(--ok); }
+.mc-dot.s3 { fill: var(--crit); } .mc-dot.s4 { fill: var(--muted); }
+.mc-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
+.metrics-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; color: var(--muted); }
+.metrics-legend li { display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
+.metrics-expr { font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
+
 /* A disclosure is a button: a chevron that turns, and a 44px target on a
    touch screen (the bare triangle it replaces was a few pixels wide). */
 details > summary {