feat(host_agent): Netdata-style fleet overview + per-host detail view

Surfaces the metrics the agent now collects (task #868). Adds a viewer-facing
fleet page (/plugins/host_agent/) with per-host cards (CPU/mem/disk/load/temp,
stale flag) and a per-host detail page (/plugins/host_agent/<id>/) — the link
the fleet widget already pointed at but had no route for.

Detail page shows current gauges (CPU, memory incl. swap/cache, load, network
rx/tx, disk I/O, temp max, memory/cpu/io PSI), per-core CPU bars, per-mount
filesystem bars, and per-interface/disk/sensor breakdowns, plus history charts
(utilization %, throughput B/s, load & pressure) over a selectable range.
Charts use a linear epoch-ms x-axis so no Chart.js date adapter is needed.
Stale state uses the plugin's stale_after_seconds threshold. Repoints the
host_resources widget detail link from admin settings to the new fleet page.

Completes milestone #68 (task #867).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

plugins/host_agent/routes.py

@@ -11,10 +11,11 @@ import secrets
 from quart import Blueprint, current_app, jsonify, request, Response, render_template, redirect, url_for
 from steward.auth.middleware import require_role
 from steward.models.users import UserRole
-from sqlalchemy import select, func
+from sqlalchemy import select, func, or_
 from datetime import timedelta
 
 from steward.core.settings import public_base_url
+from steward.core.time_range import parse_range, RANGE_OPTIONS
 from steward.models.hosts import Host
 from steward.models.metrics import PluginMetric
 from .models import HostAgentRegistration
@@ -299,35 +300,45 @@ async def agent_source():
     return Response(body, mimetype="text/x-python")
 
 
-@host_agent_bp.get("/widget")
-async def widget_table():
-    """Fleet-glance table: one row per monitored host, latest metrics."""
-    async with current_app.db_sessionmaker() as session:
-        regs = (await session.execute(select(HostAgentRegistration))).scalars().all()
-        host_ids = [r.host_id for r in regs]
-        hosts = {
-            h.id: h for h in (await session.execute(
-                select(Host).where(Host.id.in_(host_ids))
-            )).scalars().all()
-        } if host_ids else {}
+def _stale_after_seconds() -> int:
+    return int(
+        current_app.config.get("PLUGINS", {})
+        .get(SOURCE_MODULE, {})
+        .get("stale_after_seconds", 180)
+    )
 
-        subq = (
-            select(
-                PluginMetric.resource_name,
-                PluginMetric.metric_name,
-                func.max(PluginMetric.recorded_at).label("max_ts"),
-            )
-            .where(PluginMetric.source_module == SOURCE_MODULE)
-            .group_by(PluginMetric.resource_name, PluginMetric.metric_name)
-        ).subquery()
-        latest_rows = (await session.execute(
-            select(PluginMetric).join(
-                subq,
-                (PluginMetric.resource_name == subq.c.resource_name) &
-                (PluginMetric.metric_name == subq.c.metric_name) &
-                (PluginMetric.recorded_at == subq.c.max_ts),
-            ).where(PluginMetric.source_module == SOURCE_MODULE)
+
+async def _fleet_rows(session) -> list[dict]:
+    """One row per registered host with its latest host-level metrics + stale flag.
+
+    Only bare host-level resources are used here (sub-resources carry a ':' and
+    are skipped) so the fleet glance stays one line per host.
+    """
+    regs = (await session.execute(select(HostAgentRegistration))).scalars().all()
+    host_ids = [r.host_id for r in regs]
+    hosts = {
+        h.id: h for h in (await session.execute(
+            select(Host).where(Host.id.in_(host_ids))
         )).scalars().all()
+    } if host_ids else {}
+
+    subq = (
+        select(
+            PluginMetric.resource_name,
+            PluginMetric.metric_name,
+            func.max(PluginMetric.recorded_at).label("max_ts"),
+        )
+        .where(PluginMetric.source_module == SOURCE_MODULE)
+        .group_by(PluginMetric.resource_name, PluginMetric.metric_name)
+    ).subquery()
+    latest_rows = (await session.execute(
+        select(PluginMetric).join(
+            subq,
+            (PluginMetric.resource_name == subq.c.resource_name) &
+            (PluginMetric.metric_name == subq.c.metric_name) &
+            (PluginMetric.recorded_at == subq.c.max_ts),
+        ).where(PluginMetric.source_module == SOURCE_MODULE)
+    )).scalars().all()
 
     latest: dict[str, dict[str, float]] = {}
     for row in latest_rows:
@@ -335,21 +346,46 @@ async def widget_table():
             continue
         latest.setdefault(row.resource_name, {})[row.metric_name] = row.value
 
+    stale_after = _stale_after_seconds()
+    now = datetime.now(timezone.utc)
     rows = []
     for reg in regs:
         host = hosts.get(reg.host_id)
         if host is None:
             continue
         m = latest.get(host.name, {})
+        ls = reg.last_seen_at
+        stale = ls is None or (now - ls).total_seconds() > stale_after
         rows.append({
             "host": host,
             "reg": reg,
+            "stale": stale,
             "cpu_pct": m.get("cpu_pct"),
             "mem_used_pct": m.get("mem_used_pct"),
             "disk_worst": m.get("disk_used_pct_worst"),
             "load_1m": m.get("load_1m"),
+            "temp_max": m.get("temp_c_max"),
+            "net_rx_bps": m.get("net_rx_bps"),
+            "net_tx_bps": m.get("net_tx_bps"),
         })
+    rows.sort(key=lambda r: r["host"].name.lower())
+    return rows
 
+
+@host_agent_bp.get("/")
+@require_role(UserRole.viewer)
+async def index():
+    """Fleet overview page — cards per host linking to the detail view."""
+    async with current_app.db_sessionmaker() as session:
+        rows = await _fleet_rows(session)
+    return await render_template("host_list.html", rows=rows)
+
+
+@host_agent_bp.get("/widget")
+async def widget_table():
+    """Fleet-glance dashboard widget: one row per monitored host, latest metrics."""
+    async with current_app.db_sessionmaker() as session:
+        rows = await _fleet_rows(session)
     return await render_template("widget_table.html", rows=rows)
 
 
@@ -381,6 +417,116 @@ async def widget_history():
     return await render_template("widget_history.html", host=host, series=series, hours=hours)
 
 
+# Host-level metrics charted on the detail page (sub-resources are shown as
+# current-value lists, not time series, to keep the page readable).
+HISTORY_METRICS = (
+    "cpu_pct", "mem_used_pct", "disk_used_pct_worst", "load_1m",
+    "net_rx_bps", "net_tx_bps", "disk_read_bps", "disk_write_bps",
+    "temp_c_max", "psi_mem_some_avg10",
+)
+
+
+async def _latest_metrics_for_host(session, host_name: str) -> dict[str, dict[str, float]]:
+    """{resource_name: {metric: value}} of the latest sample for a host + sub-resources."""
+    subq = (
+        select(
+            PluginMetric.resource_name,
+            PluginMetric.metric_name,
+            func.max(PluginMetric.recorded_at).label("max_ts"),
+        )
+        .where(PluginMetric.source_module == SOURCE_MODULE)
+        .where(or_(
+            PluginMetric.resource_name == host_name,
+            PluginMetric.resource_name.like(host_name + ":%"),
+        ))
+        .group_by(PluginMetric.resource_name, PluginMetric.metric_name)
+    ).subquery()
+    rows = (await session.execute(
+        select(PluginMetric).join(
+            subq,
+            (PluginMetric.resource_name == subq.c.resource_name) &
+            (PluginMetric.metric_name == subq.c.metric_name) &
+            (PluginMetric.recorded_at == subq.c.max_ts),
+        ).where(PluginMetric.source_module == SOURCE_MODULE)
+    )).scalars().all()
+    out: dict[str, dict[str, float]] = {}
+    for r in rows:
+        out.setdefault(r.resource_name, {})[r.metric_name] = r.value
+    return out
+
+
+async def _history_for_host(session, host_name: str, since) -> dict[str, list]:
+    """{metric: [[epoch_ms, value], …]} host-level series since `since`.
+
+    Epoch-ms x values let the charts use a linear axis (no Chart.js date adapter).
+    """
+    rows = (await session.execute(
+        select(PluginMetric).where(
+            PluginMetric.source_module == SOURCE_MODULE,
+            PluginMetric.resource_name == host_name,
+            PluginMetric.metric_name.in_(HISTORY_METRICS),
+            PluginMetric.recorded_at >= since,
+        ).order_by(PluginMetric.recorded_at)
+    )).scalars().all()
+    series: dict[str, list] = {m: [] for m in HISTORY_METRICS}
+    for p in rows:
+        series[p.metric_name].append([int(p.recorded_at.timestamp() * 1000), round(p.value, 2)])
+    return series
+
+
+@host_agent_bp.get("/<host_id>/")
+@require_role(UserRole.viewer)
+async def host_detail(host_id: str):
+    """Netdata-style per-host detail: current gauges + history charts."""
+    since, range_key = parse_range(request.args.get("range"))
+    async with current_app.db_sessionmaker() as session:
+        host = (await session.execute(
+            select(Host).where(Host.id == host_id))).scalar_one_or_none()
+        if host is None:
+            return _error(404, "not_found")
+        reg = (await session.execute(select(HostAgentRegistration).where(
+            HostAgentRegistration.host_id == host_id))).scalar_one_or_none()
+        latest = await _latest_metrics_for_host(session, host.name)
+        series = await _history_for_host(session, host.name, since)
+
+    hostlvl = latest.get(host.name, {})
+    cores: list = []
+    nets: dict = {}
+    disks_io: dict = {}
+    temps: dict = {}
+    mounts: dict = {}
+    plen = len(host.name) + 1
+    for res, metrics in latest.items():
+        if res == host.name:
+            continue
+        suffix = res[plen:]
+        if suffix.startswith("core"):
+            try:
+                idx = int(suffix[4:])
+            except ValueError:
+                idx = 0
+            cores.append((idx, metrics.get("cpu_pct")))
+        elif suffix.startswith("net:"):
+            nets[suffix[len("net:"):]] = metrics
+        elif suffix.startswith("diskio:"):
+            disks_io[suffix[len("diskio:"):]] = metrics
+        elif suffix.startswith("temp:"):
+            temps[suffix[len("temp:"):]] = metrics.get("temp_c")
+        else:
+            mounts[suffix] = metrics
+    cores.sort(key=lambda c: c[0])
+
+    ls = reg.last_seen_at if reg else None
+    stale = ls is None or (datetime.now(timezone.utc) - ls).total_seconds() > _stale_after_seconds()
+
+    return await render_template(
+        "host_detail.html",
+        host=host, reg=reg, stale=stale, hostlvl=hostlvl,
+        cores=cores, nets=nets, disks_io=disks_io, temps=temps, mounts=mounts,
+        series=series, range_key=range_key, range_options=RANGE_OPTIONS,
+    )
+
+
 def _new_token_pair() -> tuple[str, str]:
     raw = secrets.token_urlsafe(32)
     return raw, _hash_token(raw)

plugins/host_agent/templates/host_detail.html

@@ -0,0 +1,251 @@
+{% extends "base.html" %}
+{% block title %}{{ host.name }} — Host Agent — Steward{% endblock %}
+
+{% macro fmt_bps(v) %}
+{%- if v is none -%}—
+{%- elif v >= 1048576 -%}{{ "%.1f"|format(v / 1048576) }} MB/s
+{%- elif v >= 1024 -%}{{ "%.1f"|format(v / 1024) }} KB/s
+{%- else -%}{{ "%.0f"|format(v) }} B/s
+{%- endif -%}
+{% endmacro %}
+{% macro fmt_bytes(v) %}
+{%- if v is none -%}—
+{%- elif v >= 1073741824 -%}{{ "%.1f"|format(v / 1073741824) }} GB
+{%- elif v >= 1048576 -%}{{ "%.0f"|format(v / 1048576) }} MB
+{%- else -%}{{ "%.0f"|format(v / 1024) }} KB
+{%- endif -%}
+{% endmacro %}
+{% macro bar(pct) %}
+{%- set p = pct if pct is not none else 0 -%}
+<div style="height:8px;background:var(--bg-elevated);border-radius:4px;overflow:hidden;border:1px solid var(--border);">
+  <div style="height:100%;width:{{ p|round(1) }}%;background:{% if pct is none %}var(--text-dim){% elif pct < 70 %}var(--green){% elif pct < 90 %}var(--yellow){% else %}var(--red){% endif %};"></div>
+</div>
+{% endmacro %}
+
+{% block content %}
+<div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:0.75rem;">
+  <div style="display:flex;align-items:center;gap:0.6rem;">
+    <a href="/plugins/host_agent/" class="btn btn-ghost btn-sm">← Fleet</a>
+    <h1 class="page-title" style="margin-bottom:0;">{{ host.name }}</h1>
+    {% if stale %}<span class="badge badge-red">stale</span>{% else %}<span class="badge badge-green">live</span>{% endif %}
+  </div>
+  <div style="display:flex;gap:0.3rem;">
+    {% for r in range_options %}
+    <a class="range-btn {% if r == range_key %}active{% endif %}" href="?range={{ r }}">{{ r }}</a>
+    {% endfor %}
+  </div>
+</div>
+
+{# ── Identity / metadata ─────────────────────────────────────────────────── #}
+<div class="card" style="display:flex;flex-wrap:wrap;gap:0.5rem 1.25rem;align-items:center;font-size:0.82rem;color:var(--text-muted);">
+  <span><span style="color:var(--text-dim);">Address</span> {{ host.address or "—" }}</span>
+  {% if reg %}
+  {% if reg.distro %}<span><span style="color:var(--text-dim);">OS</span> {{ reg.distro }}</span>{% endif %}
+  {% if reg.kernel %}<span><span style="color:var(--text-dim);">Kernel</span> {{ reg.kernel }}</span>{% endif %}
+  {% if reg.arch %}<span><span style="color:var(--text-dim);">Arch</span> {{ reg.arch }}</span>{% endif %}
+  {% if reg.agent_version %}<span><span style="color:var(--text-dim);">Agent</span> v{{ reg.agent_version }}</span>{% endif %}
+  {% set up = hostlvl.get('uptime_secs') %}
+  {% if up %}<span><span style="color:var(--text-dim);">Uptime</span> {{ (up // 86400)|int }}d {{ ((up % 86400) // 3600)|int }}h</span>{% endif %}
+  <span><span style="color:var(--text-dim);">Last seen</span> {{ reg.last_seen_at.strftime("%Y-%m-%d %H:%M:%S") ~ " UTC" if reg.last_seen_at else "never" }}</span>
+  {% else %}
+  <span>No agent registration found for this host.</span>
+  {% endif %}
+</div>
+
+{% if not hostlvl %}
+<div class="card empty">No metrics reported yet. Once the agent checks in, CPU, memory, network, disk I/O, temperatures, and pressure will appear here.</div>
+{% else %}
+
+{# ── Current headline gauges ─────────────────────────────────────────────── #}
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.75rem;margin-bottom:1rem;">
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.35rem;">CPU</div>
+    {% set c = hostlvl.get('cpu_pct') %}
+    <span class="stat-val" style="font-size:1.6rem;color:{% if c is none %}var(--text-dim){% elif c < 70 %}var(--green){% elif c < 90 %}var(--yellow){% else %}var(--red){% endif %};">{% if c is not none %}{{ "%.0f"|format(c) }}%{% else %}—{% endif %}</span>
+    <div style="margin-top:0.5rem;">{{ bar(c) }}</div>
+  </div>
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.35rem;">Memory</div>
+    {% set mp = hostlvl.get('mem_used_pct') %}
+    <span class="stat-val" style="font-size:1.6rem;color:{% if mp is none %}var(--text-dim){% elif mp < 70 %}var(--green){% elif mp < 90 %}var(--yellow){% else %}var(--red){% endif %};">{% if mp is not none %}{{ "%.0f"|format(mp) }}%{% else %}—{% endif %}</span>
+    <div style="margin-top:0.5rem;">{{ bar(mp) }}</div>
+    <div style="margin-top:0.45rem;font-size:0.72rem;color:var(--text-dim);">
+      avail {{ fmt_bytes(hostlvl.get('mem_available_bytes')) }} · cache {{ fmt_bytes(hostlvl.get('mem_cached_bytes')) }} · swap {{ fmt_bytes(hostlvl.get('swap_used_bytes')) }}
+    </div>
+  </div>
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.35rem;">Load</div>
+    <span class="stat-val" style="font-size:1.6rem;">{% if hostlvl.get('load_1m') is not none %}{{ "%.2f"|format(hostlvl.get('load_1m')) }}{% else %}—{% endif %}</span>
+    <div style="margin-top:0.45rem;font-size:0.72rem;color:var(--text-dim);">
+      5m {% if hostlvl.get('load_5m') is not none %}{{ "%.2f"|format(hostlvl.get('load_5m')) }}{% else %}—{% endif %} ·
+      15m {% if hostlvl.get('load_15m') is not none %}{{ "%.2f"|format(hostlvl.get('load_15m')) }}{% else %}—{% endif %}
+    </div>
+  </div>
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.35rem;">Network</div>
+    <div style="font-size:0.95rem;font-variant-numeric:tabular-nums;">
+      <div><span style="color:var(--green);">↓</span> {{ fmt_bps(hostlvl.get('net_rx_bps')) }}</div>
+      <div><span style="color:var(--red);">↑</span> {{ fmt_bps(hostlvl.get('net_tx_bps')) }}</div>
+    </div>
+  </div>
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.35rem;">Disk I/O</div>
+    <div style="font-size:0.95rem;font-variant-numeric:tabular-nums;">
+      <div><span style="color:var(--text-dim);">rd</span> {{ fmt_bps(hostlvl.get('disk_read_bps')) }}</div>
+      <div><span style="color:var(--text-dim);">wr</span> {{ fmt_bps(hostlvl.get('disk_write_bps')) }}</div>
+    </div>
+  </div>
+  {% if hostlvl.get('temp_c_max') is not none %}
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.35rem;">Temp (max)</div>
+    {% set t = hostlvl.get('temp_c_max') %}
+    <span class="stat-val" style="font-size:1.6rem;color:{% if t < 70 %}var(--green){% elif t < 85 %}var(--yellow){% else %}var(--red){% endif %};">{{ "%.0f"|format(t) }}°C</span>
+  </div>
+  {% endif %}
+  {% if hostlvl.get('psi_mem_some_avg10') is not none %}
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.35rem;" title="Pressure stall — % of time stalled, 10s avg">Pressure (10s)</div>
+    <div style="font-size:0.78rem;font-variant-numeric:tabular-nums;color:var(--text-muted);">
+      <div>mem {{ "%.1f"|format(hostlvl.get('psi_mem_some_avg10')) }}%</div>
+      {% if hostlvl.get('psi_cpu_some_avg10') is not none %}<div>cpu {{ "%.1f"|format(hostlvl.get('psi_cpu_some_avg10')) }}%</div>{% endif %}
+      {% if hostlvl.get('psi_io_some_avg10') is not none %}<div>io {{ "%.1f"|format(hostlvl.get('psi_io_some_avg10')) }}%</div>{% endif %}
+    </div>
+  </div>
+  {% endif %}
+</div>
+
+{# ── Per-core CPU ─────────────────────────────────────────────────────────── #}
+{% if cores %}
+<div class="card">
+  <div class="section-title" style="margin-bottom:0.6rem;">Per-core CPU</div>
+  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem 0.9rem;">
+    {% for idx, pct in cores %}
+    <div>
+      <div style="display:flex;justify-content:space-between;font-size:0.72rem;color:var(--text-dim);margin-bottom:0.2rem;">
+        <span>core {{ idx }}</span><span>{% if pct is not none %}{{ "%.0f"|format(pct) }}%{% else %}—{% endif %}</span>
+      </div>
+      {{ bar(pct) }}
+    </div>
+    {% endfor %}
+  </div>
+</div>
+{% endif %}
+
+{# ── Filesystems ──────────────────────────────────────────────────────────── #}
+{% if mounts %}
+<div class="card">
+  <div class="section-title" style="margin-bottom:0.6rem;">Filesystems</div>
+  {% for mount, m in mounts.items() %}
+  <div style="margin-bottom:0.6rem;">
+    <div style="display:flex;justify-content:space-between;font-size:0.8rem;margin-bottom:0.2rem;">
+      <span style="font-family:ui-monospace,monospace;">{{ mount }}</span>
+      <span style="color:var(--text-muted);">{{ fmt_bytes(m.get('disk_used_bytes')) }} / {{ fmt_bytes(m.get('disk_total_bytes')) }}{% if m.get('disk_used_pct') is not none %} · {{ "%.0f"|format(m.get('disk_used_pct')) }}%{% endif %}</span>
+    </div>
+    {{ bar(m.get('disk_used_pct')) }}
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+{# ── Interfaces / disks / sensors current detail ──────────────────────────── #}
+{% if nets or disks_io or temps %}
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;">
+  {% if nets %}
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.5rem;">Interfaces</div>
+    {% for iface, m in nets.items() %}
+    <div style="display:flex;justify-content:space-between;font-size:0.8rem;padding:0.15rem 0;">
+      <span style="font-family:ui-monospace,monospace;">{{ iface }}</span>
+      <span style="color:var(--text-muted);font-variant-numeric:tabular-nums;">↓ {{ fmt_bps(m.get('net_rx_bps')) }} · ↑ {{ fmt_bps(m.get('net_tx_bps')) }}</span>
+    </div>
+    {% endfor %}
+  </div>
+  {% endif %}
+  {% if disks_io %}
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.5rem;">Disks</div>
+    {% for dev, m in disks_io.items() %}
+    <div style="display:flex;justify-content:space-between;font-size:0.8rem;padding:0.15rem 0;">
+      <span style="font-family:ui-monospace,monospace;">{{ dev }}</span>
+      <span style="color:var(--text-muted);font-variant-numeric:tabular-nums;">rd {{ fmt_bps(m.get('disk_read_bps')) }} · wr {{ fmt_bps(m.get('disk_write_bps')) }}</span>
+    </div>
+    {% endfor %}
+  </div>
+  {% endif %}
+  {% if temps %}
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.5rem;">Temperatures</div>
+    {% for label, c in temps.items() %}
+    <div style="display:flex;justify-content:space-between;font-size:0.8rem;padding:0.15rem 0;">
+      <span>{{ label }}</span>
+      <span style="color:{% if c is none %}var(--text-dim){% elif c < 70 %}var(--green){% elif c < 85 %}var(--yellow){% else %}var(--red){% endif %};font-variant-numeric:tabular-nums;">{% if c is not none %}{{ "%.0f"|format(c) }}°C{% else %}—{% endif %}</span>
+    </div>
+    {% endfor %}
+  </div>
+  {% endif %}
+</div>
+{% endif %}
+
+{# ── History charts ───────────────────────────────────────────────────────── #}
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:1rem;margin-top:1rem;">
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.5rem;">Utilization % — last {{ range_key }}</div>
+    <div style="height:220px;"><canvas id="chart-util"></canvas></div>
+  </div>
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.5rem;">Throughput (B/s) — last {{ range_key }}</div>
+    <div style="height:220px;"><canvas id="chart-net"></canvas></div>
+  </div>
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.5rem;">Load &amp; pressure — last {{ range_key }}</div>
+    <div style="height:220px;"><canvas id="chart-pressure"></canvas></div>
+  </div>
+</div>
+
+<script>
+(function () {
+  const series = {{ series|tojson }};
+  const fmtTime = (v) => { const d = new Date(v); return ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2); };
+  const baseOpts = (ymax) => ({
+    responsive: true, maintainAspectRatio: false,
+    interaction: { mode: "index", intersect: false },
+    elements: { point: { radius: 0 } },
+    scales: {
+      x: { type: "linear", ticks: { callback: (v) => fmtTime(v), maxTicksLimit: 8, color: "#8a8a92", font: { size: 10 } }, grid: { color: "#30303a" } },
+      y: { beginAtZero: true, max: ymax, ticks: { color: "#8a8a92", font: { size: 10 } }, grid: { color: "#30303a" } },
+    },
+    plugins: { legend: { labels: { color: "#b8b8b0", boxWidth: 10, font: { size: 11 } } } },
+  });
+  const mk = (id, datasets, ymax) => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    new Chart(el.getContext("2d"), {
+      type: "line",
+      data: { datasets: datasets.map((d) => ({
+        label: d.label,
+        data: (series[d.key] || []).map((p) => ({ x: p[0], y: p[1] })),
+        borderColor: d.color, backgroundColor: d.color, borderWidth: 1.5, tension: 0.25,
+      })) },
+      options: baseOpts(ymax),
+    });
+  };
+  mk("chart-util", [
+    { key: "cpu_pct", label: "CPU %", color: "#c8a840" },
+    { key: "mem_used_pct", label: "Mem %", color: "#4aa86a" },
+    { key: "disk_used_pct_worst", label: "Disk % (worst)", color: "#c87840" },
+  ], 100);
+  mk("chart-net", [
+    { key: "net_rx_bps", label: "Net RX", color: "#4aa86a" },
+    { key: "net_tx_bps", label: "Net TX", color: "#c84048" },
+    { key: "disk_read_bps", label: "Disk read", color: "#6aa0d0" },
+    { key: "disk_write_bps", label: "Disk write", color: "#c8a840" },
+  ], undefined);
+  mk("chart-pressure", [
+    { key: "load_1m", label: "Load 1m", color: "#c8a840" },
+    { key: "psi_mem_some_avg10", label: "Mem PSI %", color: "#c84048" },
+    { key: "temp_c_max", label: "Temp °C", color: "#c87840" },
+  ], undefined);
+})();
+</script>
+{% endif %}
+{% endblock %}

plugins/host_agent/templates/host_list.html

@@ -0,0 +1,43 @@
+{% extends "base.html" %}
+{% block title %}Host Agents — Steward{% endblock %}
+{% block content %}
+<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;gap:1rem;flex-wrap:wrap;">
+  <h1 class="page-title" style="margin-bottom:0;">Host Agents</h1>
+  {% if session.user_role == 'admin' %}
+  <a class="btn btn-ghost" href="/plugins/host_agent/settings/">Manage agents →</a>
+  {% endif %}
+</div>
+
+{% if not rows %}
+<div class="card empty">
+  No hosts are reporting agent metrics yet.
+  {% if session.user_role == 'admin' %}
+  Add one from <a href="/plugins/host_agent/settings/">Host Agent settings</a> and run the install command on the target.
+  {% else %}
+  Ask an admin to install the agent on a host.
+  {% endif %}
+</div>
+{% else %}
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;">
+{% for r in rows %}
+  <a href="/plugins/host_agent/{{ r.host.id }}/" class="card" style="display:block;margin-bottom:0;color:inherit;">
+    <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.7rem;">
+      <span class="dot {% if r.stale %}dot-dim{% elif (r.cpu_pct or 0) >= 90 or (r.mem_used_pct or 0) >= 90 or (r.disk_worst or 0) >= 90 %}dot-warn{% else %}dot-up{% endif %}"></span>
+      <span style="font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ r.host.name }}</span>
+      {% if r.stale %}<span class="badge badge-dim">stale</span>{% endif %}
+    </div>
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.45rem 0.9rem;font-size:0.84rem;font-variant-numeric:tabular-nums;">
+      <span><span style="color:var(--text-dim);">CPU</span> {% if r.cpu_pct is not none %}{{ "%.0f"|format(r.cpu_pct) }}%{% else %}—{% endif %}</span>
+      <span><span style="color:var(--text-dim);">Mem</span> {% if r.mem_used_pct is not none %}{{ "%.0f"|format(r.mem_used_pct) }}%{% else %}—{% endif %}</span>
+      <span><span style="color:var(--text-dim);">Disk</span> {% if r.disk_worst is not none %}{{ "%.0f"|format(r.disk_worst) }}%{% else %}—{% endif %}</span>
+      <span><span style="color:var(--text-dim);">Load</span> {% if r.load_1m is not none %}{{ "%.2f"|format(r.load_1m) }}{% else %}—{% endif %}</span>
+      {% if r.temp_max is not none %}<span><span style="color:var(--text-dim);">Temp</span> {{ "%.0f"|format(r.temp_max) }}°C</span>{% endif %}
+    </div>
+    <div style="margin-top:0.6rem;font-size:0.72rem;color:var(--text-dim);">
+      last seen {{ r.reg.last_seen_at.strftime("%Y-%m-%d %H:%M:%S") ~ " UTC" if r.reg.last_seen_at else "never" }}
+    </div>
+  </a>
+{% endfor %}
+</div>
+{% endif %}
+{% endblock %}

plugins/host_agent/templates/widget_table.html

@@ -2,7 +2,7 @@
 {% if rows %}
 <div style="display:grid;gap:0.1rem;">
   {% for r in rows %}
-  {% set stale = not r.reg.last_seen_at %}
+  {% set stale = r.stale %}
   <div style="display:flex;align-items:center;gap:0.6rem;font-size:0.82rem;padding:0.3rem 0;border-bottom:1px solid var(--border);">
     <span class="dot {% if stale %}dot-dim{% elif (r.cpu_pct or 0) >= 90 or (r.mem_used_pct or 0) >= 90 or (r.disk_worst or 0) >= 90 %}dot-warn{% else %}dot-up{% endif %}"></span>
     <a href="/plugins/host_agent/{{ r.host.id }}/"

steward/core/widgets.py

@@ -262,7 +262,7 @@ WIDGET_REGISTRY: dict[str, dict] = {
         "label": "Host Agent — Resources",
         "description": "Fleet view: CPU, memory, disk, and load per monitored host",
         "hx_url": "/plugins/host_agent/widget",
-        "detail_url": "/plugins/host_agent/settings/",
+        "detail_url": "/plugins/host_agent/",
         "plugin": "host_agent",
         "poll": True,
         "params": [],