feat(monitors): unify ping/dns/http into one Monitor entity + custom targets

Collapse the three former check types into a single core `Monitor` entity
with one management surface (/monitors), one result table (monitor_results),
and a single scheduled task. Every type can now watch a free-standing custom
destination (optional host_id) — not just a registered Host.

- models: Monitor + MonitorResult replace PingResult/DnsResult; Host loses its
  ping/dns facet columns (now Monitor rows linked by host_id).
- checks: monitors/{ping,dns,http}.py pure probes + runner.run_monitor
  dispatcher; one monitor_check scheduler with a per-monitor due-filter.
- status: single monitor_status_source replaces the three sources.
- UI: /monitors blueprint (type-aware add/edit/list/widget); host hub shows a
  host's linked monitors + "add monitor for this host"; nav + widget registry
  + alert metric catalog rewired. http plugin folded into core and removed.
- migration 0022 merges the http branch, data-migrates host facets +
  http_monitors + all three result histories, drops the old tables/columns.

Resolves the per-host ping/dns auto-attach issue (#275): monitors are now
explicit, never auto-added to every host.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016Jg27rgypiW2efULXJDtMC

steward/templates/monitors/_fields.html

@@ -0,0 +1,64 @@
+{# Shared type-specific monitor form fields. Every field is rendered; a tiny
+   script (mtoggle) shows only the ones relevant to the selected type. #}
+{% macro type_fields(config={}) %}
+{% set inp = "width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;" %}
+{% set lbl = "font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;" %}
+
+{# tcp #}
+<div class="mfield" data-types="tcp">
+  <label style="{{ lbl }}">Port</label>
+  <input type="number" name="port" value="{{ config.get('port', 80) }}" min="1" max="65535" style="{{ inp }}">
+</div>
+
+{# dns #}
+<div class="mfield" data-types="dns">
+  <label style="{{ lbl }}">Expected IP <span style="color:var(--text-dim);">(optional)</span></label>
+  <input type="text" name="expected_ip" value="{{ config.get('expected_ip') or '' }}"
+         placeholder="e.g. 192.0.2.10" autocomplete="off" style="{{ inp }}">
+</div>
+
+{# http #}
+<div class="mfield" data-types="http">
+  <label style="{{ lbl }}">Method</label>
+  <select name="method" style="{{ inp }}">
+    {% for opt in ["GET", "HEAD", "POST"] %}
+    <option value="{{ opt }}" {% if config.get('method', 'GET') == opt %}selected{% endif %}>{{ opt }}</option>
+    {% endfor %}
+  </select>
+</div>
+<div class="mfield" data-types="http">
+  <label style="{{ lbl }}">Expected status</label>
+  <input type="number" name="expected_status" value="{{ config.get('expected_status', 200) }}"
+         min="100" max="599" style="{{ inp }}">
+</div>
+<div class="mfield" data-types="http">
+  <label style="{{ lbl }}">Timeout (s)</label>
+  <input type="number" name="timeout_seconds" value="{{ config.get('timeout_seconds', 10) }}"
+         min="1" max="60" style="{{ inp }}">
+</div>
+<div class="mfield" data-types="http">
+  <label style="{{ lbl }}">Content match <span style="color:var(--text-dim);">(substring)</span></label>
+  <input type="text" name="content_match" value="{{ config.get('content_match', '') }}"
+         placeholder="optional" autocomplete="off" style="{{ inp }}">
+</div>
+<div class="mfield" data-types="http" style="display:flex;flex-direction:column;gap:0.3rem;justify-content:flex-end;">
+  <label style="display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;cursor:pointer;">
+    <input type="checkbox" name="follow_redirects" {% if config.get('follow_redirects', True) %}checked{% endif %}> Follow redirects
+  </label>
+  <label style="display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;cursor:pointer;">
+    <input type="checkbox" name="verify_ssl" {% if config.get('verify_ssl', True) %}checked{% endif %}> Verify SSL
+  </label>
+</div>
+{% endmacro %}
+
+{# Show only the fields whose data-types matches the active monitor type. #}
+{% macro toggle_script() %}
+<script>
+function mtoggle(t) {
+  document.querySelectorAll('.mfield').forEach(function (el) {
+    var types = (el.getAttribute('data-types') || '').split(',');
+    el.style.display = types.indexOf(t) !== -1 ? '' : 'none';
+  });
+}
+</script>
+{% endmacro %}

steward/templates/monitors/edit.html

@@ -0,0 +1,48 @@
+{% extends "base.html" %}
+{% from "monitors/_fields.html" import type_fields, toggle_script %}
+{% block title %}Edit Monitor — Steward{% endblock %}
+{% block content %}
+<div style="margin-bottom:1.25rem;">
+  <a href="/monitors/" style="color:var(--text-muted);font-size:0.85rem;">← Monitors</a>
+  <h1 class="page-title" style="margin:0.4rem 0 0;">Edit Monitor</h1>
+</div>
+
+{% set inp = "width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;" %}
+{% set lbl = "font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;" %}
+
+<div class="card" style="max-width:760px;">
+  <form method="post" action="/monitors/{{ monitor.id }}/edit" style="display:grid;gap:0.6rem;">
+    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0.6rem;align-items:end;">
+      <div>
+        <label style="{{ lbl }}">Type</label>
+        <input type="text" value="{{ monitor.type | upper }}" disabled style="{{ inp }}opacity:0.7;">
+      </div>
+      <div>
+        <label style="{{ lbl }}">Name</label>
+        <input type="text" name="name" value="{{ monitor.name }}" autocomplete="off" style="{{ inp }}">
+      </div>
+      <div>
+        <label style="{{ lbl }}">Target <span style="color:var(--red);">*</span></label>
+        <input type="text" name="target" value="{{ monitor.target }}" autocomplete="off" required style="{{ inp }}">
+      </div>
+      <div>
+        <label style="{{ lbl }}">Interval (s, 0=global)</label>
+        <input type="number" name="check_interval_seconds" value="{{ monitor.check_interval_seconds }}" min="0" style="{{ inp }}">
+      </div>
+      {{ type_fields(config) }}
+    </div>
+    {% if monitor.host_id %}
+    <p style="font-size:0.78rem;color:var(--text-dim);margin:0;">
+      Linked to <a href="/hosts/{{ monitor.host_id }}" style="color:var(--accent);">its host</a>.
+    </p>
+    {% endif %}
+    <div style="display:flex;gap:0.5rem;">
+      <button type="submit" class="btn btn-sm">Save</button>
+      <a href="/monitors/" class="btn btn-sm" style="background:transparent;border:1px solid var(--border-mid);">Cancel</a>
+    </div>
+  </form>
+</div>
+
+{{ toggle_script() }}
+<script>mtoggle({{ monitor.type | tojson }});</script>
+{% endblock %}

steward/templates/monitors/index.html

@@ -0,0 +1,60 @@
+{% extends "base.html" %}
+{% from "monitors/_fields.html" import type_fields, toggle_script %}
+{% block title %}Monitors — Steward{% endblock %}
+{% block content %}
+<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap;">
+  <div style="display:flex;align-items:baseline;gap:1rem;">
+    <h1 class="page-title" style="margin-bottom:0;">Monitors</h1>
+    <span style="color:var(--text-muted);font-size:0.85rem;">polling every {{ poll_interval }}s</span>
+  </div>
+  {% include "_time_range.html" %}
+</div>
+
+{% set inp = "width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;" %}
+{% set lbl = "font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;" %}
+
+{# ── Add monitor ──────────────────────────────────────────────────────────── #}
+<div class="card" style="margin-bottom:1.25rem;">
+  <div class="section-title" style="margin-bottom:0.75rem;">Add Monitor</div>
+  <form method="post" action="/monitors/add" style="display:grid;gap:0.6rem;">
+    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0.6rem;align-items:end;">
+      <div>
+        <label style="{{ lbl }}">Type</label>
+        <select name="type" id="mtype" onchange="mtoggle(this.value)" style="{{ inp }}">
+          {% for t in types %}
+          <option value="{{ t.value }}" {% if t.value == 'icmp' %}selected{% endif %}>{{ t.value | upper }}</option>
+          {% endfor %}
+        </select>
+      </div>
+      <div>
+        <label style="{{ lbl }}">Name</label>
+        <input type="text" name="name" placeholder="optional" autocomplete="off" style="{{ inp }}">
+      </div>
+      <div>
+        <label style="{{ lbl }}">Target <span style="color:var(--red);">*</span></label>
+        <input type="text" name="target" placeholder="host, IP, or URL" autocomplete="off" required style="{{ inp }}">
+      </div>
+      <div>
+        <label style="{{ lbl }}">Interval (s, 0=global)</label>
+        <input type="number" name="check_interval_seconds" value="0" min="0" style="{{ inp }}">
+      </div>
+      {{ type_fields() }}
+    </div>
+    <div><button type="submit" class="btn btn-sm">Add Monitor</button></div>
+  </form>
+</div>
+
+{# ── Live monitor rows ────────────────────────────────────────────────────── #}
+<div class="card ping-card">
+  <div id="monitor-rows"
+       hx-get="/monitors/rows"
+       hx-trigger="load, every {{ poll_interval }}s, rangeChange from:body"
+       hx-include="#time-range"
+       hx-swap="innerHTML">
+    <div style="color:var(--text-muted);font-size:0.9rem;padding:2rem;">Loading…</div>
+  </div>
+</div>
+
+{{ toggle_script() }}
+<script>mtoggle(document.getElementById('mtype').value);</script>
+{% endblock %}

steward/templates/monitors/rows.html

@@ -0,0 +1,74 @@
+{# HTMX fragment — monitor rows (list page). #}
+{% if monitor_data %}
+{% for d in monitor_data %}
+{% set m = d.monitor %}
+{% set latest = d.latest %}
+<div class="ping-row" {% if not m.enabled %}style="opacity:0.5;"{% endif %}>
+  <div class="ping-meta" style="min-width:160px;max-width:240px;">
+    <span class="badge" style="font-size:0.62rem;vertical-align:middle;">{{ m.type | upper }}</span>
+    {% if m.host_id %}
+    <a class="ping-name" href="/hosts/{{ m.host_id }}" title="{{ m.name }}"
+       style="color:inherit;text-decoration:none;">{{ m.name }}</a>
+    {% else %}
+    <span class="ping-name" title="{{ m.name }}">{{ m.name }}</span>
+    {% endif %}
+    <span class="ping-addr" title="{{ m.target }}">{{ m.target }}</span>
+  </div>
+
+  <div class="ping-pills">
+    {% for _ in range([30 - d.heartbeat|length, 0]|max) %}
+    <span class="pill pill-empty" title="No data"></span>
+    {% endfor %}
+    {% for h in d.heartbeat %}
+    <span class="pill" title="{{ h.title }}"
+          style="background:{{ '#1a6632' if h.state == 'up' else '#6a1515' }};"></span>
+    {% endfor %}
+  </div>
+
+  <div class="ping-cur">
+    {% if latest is none %}
+      <span class="ping-cur-nd">—</span>
+    {% elif not latest.is_up %}
+      <span class="ping-cur-down">DOWN</span>
+    {% elif latest.response_ms is not none %}
+      <span style="{{ threshold_style(latest.response_ms, 'latency') or 'color:var(--green);' }}">
+        {{ "%.0f"|format(latest.response_ms) }} ms</span>
+    {% elif m.type == 'dns' and latest.resolved_ip %}
+      <span class="ping-cur-good" style="font-size:0.72rem;">{{ latest.resolved_ip }}</span>
+    {% else %}
+      <span class="ping-cur-good">UP</span>
+    {% endif %}
+  </div>
+
+  <div style="min-width:4.5rem;text-align:right;font-size:0.78rem;font-variant-numeric:tabular-nums;{{ threshold_style(d.uptime_pct, 'uptime') if d.uptime_pct is not none else 'color:var(--text-dim);' }}">
+    {% if d.uptime_pct is not none %}{{ "%.1f"|format(d.uptime_pct) }}%{% else %}—{% endif %}
+    <span style="color:var(--text-dim);font-size:0.7rem;margin-left:0.15rem;">{{ range_key }}</span>
+  </div>
+
+  {% if d.tls_days is not none %}
+  <div title="TLS certificate expiry" style="min-width:4rem;text-align:right;font-size:0.72rem;{{ 'color:var(--red);' if d.tls_days < 14 else ('color:var(--yellow);' if d.tls_days < 30 else 'color:var(--text-dim);') }}">
+    cert {{ d.tls_days|round|int }}d
+  </div>
+  {% endif %}
+
+  {% if session.user_role in ['operator', 'admin'] %}
+  <div style="display:flex;gap:0.35rem;flex-shrink:0;">
+    <a href="/monitors/{{ m.id }}/edit" class="btn btn-sm" style="padding:0.2rem 0.5rem;font-size:0.72rem;">Edit</a>
+    <form method="post" action="/monitors/{{ m.id }}/toggle" style="display:inline;">
+      <button type="submit" class="btn btn-sm" style="padding:0.2rem 0.5rem;font-size:0.72rem;">
+        {{ "Pause" if m.enabled else "Resume" }}</button>
+    </form>
+    <form method="post" action="/monitors/{{ m.id }}/delete" style="display:inline;"
+          onsubmit="return confirm('Delete monitor {{ m.name }}?');">
+      <button type="submit" class="btn btn-sm" style="padding:0.2rem 0.5rem;font-size:0.72rem;color:var(--red);">✕</button>
+    </form>
+  </div>
+  {% endif %}
+</div>
+{% endfor %}
+{% else %}
+<p style="color:var(--text-muted);font-size:0.9rem;padding:1rem 0;">
+  No monitors yet. Add one above, or attach checks to a host from the
+  <a href="/hosts/" style="color:var(--accent);">Hosts</a> page.
+</p>
+{% endif %}

steward/templates/monitors/widget.html

@@ -0,0 +1,44 @@
+{# monitors/widget.html — dashboard widget: unified monitor summary #}
+{% if not monitor_data and up == 0 and down == 0 and pending == 0 %}
+<div style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem 0;">
+  No monitors configured. <a href="/monitors/">Add monitors →</a>
+</div>
+{% else %}
+
+<div style="display:flex;gap:1rem;margin-bottom:0.65rem;flex-wrap:wrap;">
+  {% if up %}
+  <div><span style="font-size:1.4rem;font-weight:700;line-height:1;color:var(--green);">{{ up }}</span>
+    <span style="font-size:0.78rem;color:var(--text-muted);margin-left:0.25rem;">up</span></div>
+  {% endif %}
+  {% if down %}
+  <div><span style="font-size:1.4rem;font-weight:700;line-height:1;color:var(--red);">{{ down }}</span>
+    <span style="font-size:0.78rem;color:var(--text-muted);margin-left:0.25rem;">down</span></div>
+  {% endif %}
+  {% if pending %}
+  <div><span style="font-size:1.4rem;font-weight:700;line-height:1;color:var(--text-dim);">{{ pending }}</span>
+    <span style="font-size:0.78rem;color:var(--text-muted);margin-left:0.25rem;">pending</span></div>
+  {% endif %}
+</div>
+
+<div style="display:grid;gap:3px;">
+  {% for d in monitor_data %}
+  {% set latest = d.latest %}
+  <div style="display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;padding:0.15rem 0;">
+    {% if not latest %}<span class="dot dot-dim"></span>
+    {% elif latest.is_up %}<span class="dot dot-up"></span>
+    {% else %}<span class="dot dot-down"></span>{% endif %}
+    {% if d.monitor.host_id %}
+    <a href="/hosts/{{ d.monitor.host_id }}" style="flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;text-decoration:none;">{{ d.monitor.name }}</a>
+    {% else %}
+    <span style="flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ d.monitor.name }}</span>
+    {% endif %}
+    {% if latest and latest.response_ms is not none %}
+    <span style="font-size:0.72rem;font-family:ui-monospace,monospace;color:var(--text-muted);flex-shrink:0;">{{ "%.0f"|format(latest.response_ms) }}ms</span>
+    {% elif latest and not latest.is_up %}
+    <span style="font-size:0.72rem;color:var(--red);flex-shrink:0;">{{ latest.status_code or "down" }}</span>
+    {% endif %}
+  </div>
+  {% endfor %}
+</div>
+
+{% endif %}