feat(dashboard): phase C richer panels — host time-series graph + cpu sparklines

Milestone 72 phase C — bring the host-view graphs onto the dashboard:
- host_resource_history widget reworked into a real host-view chart: epoch-ms
  linear axis (no Chart.js date adapter), themed like the host-detail charts,
  maintainAspectRatio:false so it fills the resized panel, unique canvas per
  widget instance (wid), and empty states ("pick a host" / "no metrics yet").
  Was previously unusable — it had a broken time axis and no way to choose a host.
- Add a "host" param type: the edit form renders a live dropdown of hosts
  (dashboard routes now pass the host list to the editor); the chosen host_id is
  stored in config and fed to the widget.
- Hosts-overview widget gains a per-row CPU sparkline (last hour) via the shared
  sparkline_svg helper — the host-view at-a-glance trend, on the main widget.

Charts/sparklines render only in the browser, so CI can't exercise them — needs
an operator visual check.

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

plugins/host_agent/routes.py

@@ -387,34 +387,44 @@ async def widget_table():
 @host_agent_bp.get("/widget/history")
 async def widget_history():
     host_id = request.args.get("host_id", "")
-    hours = int(request.args.get("hours", "6"))
+    try:
+        hours = max(1, min(168, int(request.args.get("hours", "6"))))
+    except ValueError:
+        hours = 6
+    # wid (the dashboard widget row id) keeps the <canvas> id unique when several
+    # history widgets share a page; fall back to the host id.
+    wid = request.args.get("wid", "") or host_id
     cutoff = datetime.now(timezone.utc) - timedelta(hours=hours)
 
-    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")
-        points = (await session.execute(
-            select(PluginMetric).where(
-                PluginMetric.source_module == SOURCE_MODULE,
-                PluginMetric.recorded_at >= cutoff,
-                or_(
-                    and_(PluginMetric.resource_name == host.name,
-                         PluginMetric.metric_name.in_(("cpu_pct", "mem_used_pct"))),
-                    and_(PluginMetric.resource_name == host.name + ":/",
-                         PluginMetric.metric_name == "disk_used_pct"),
-                ),
-            ).order_by(PluginMetric.recorded_at)
-        )).scalars().all()
+    series: dict[str, list[list]] = {"cpu_pct": [], "mem_used_pct": [], "disk_root": []}
+    host = None
+    if host_id:
+        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 not None:
+                points = (await session.execute(
+                    select(PluginMetric).where(
+                        PluginMetric.source_module == SOURCE_MODULE,
+                        PluginMetric.recorded_at >= cutoff,
+                        or_(
+                            and_(PluginMetric.resource_name == host.name,
+                                 PluginMetric.metric_name.in_(("cpu_pct", "mem_used_pct"))),
+                            and_(PluginMetric.resource_name == host.name + ":/",
+                                 PluginMetric.metric_name == "disk_used_pct"),
+                        ),
+                    ).order_by(PluginMetric.recorded_at)
+                )).scalars().all()
+                # Disk = root (/), consistent with the host panel — not "worst".
+                # Epoch-ms x values let the chart use a plain linear axis (no
+                # Chart.js date adapter needed), matching the host-detail charts.
+                for p in points:
+                    key = "disk_root" if p.resource_name != host.name else p.metric_name
+                    series[key].append([int(p.recorded_at.timestamp() * 1000), round(p.value, 2)])
 
-    # Disk = root (/), consistent with the host panel — not the opaque "worst".
-    series: dict[str, list[dict]] = {"cpu_pct": [], "mem_used_pct": [], "disk_root": []}
-    for p in points:
-        key = "disk_root" if p.resource_name != host.name else p.metric_name
-        series[key].append({"t": p.recorded_at.isoformat(), "v": p.value})
-
-    return await render_template("widget_history.html", host=host, series=series, hours=hours)
+    return await render_template(
+        "widget_history.html", host=host, series=series, hours=hours, wid=wid,
+    )
 
 
 # Host-level metrics charted on the detail page (sub-resources are shown as

plugins/host_agent/templates/widget_history.html

@@ -1,24 +1,53 @@
-<div class="widget-history">
-  <h3>{{ host.name }} — last {{ hours }}h</h3>
-  <canvas id="host-agent-chart-{{ host.id }}" width="600" height="200"></canvas>
-  <script>
-  (function() {
-    const ctx = document.getElementById("host-agent-chart-{{ host.id }}").getContext("2d");
-    const series = {{ series|tojson }};
-    new Chart(ctx, {
-      type: "line",
-      data: {
-        datasets: [
-          { label: "CPU %",  data: series.cpu_pct.map(p => ({x: p.t, y: p.v})) },
-          { label: "Mem %",  data: series.mem_used_pct.map(p => ({x: p.t, y: p.v})) },
-          { label: "Disk / %", data: series.disk_root.map(p => ({x: p.t, y: p.v})) },
-        ],
-      },
-      options: {
-        responsive: true,
-        scales: { x: { type: "time" }, y: { min: 0, max: 100 } },
-      },
-    });
-  })();
-  </script>
+{# host_agent history-graph widget — the host-view utilization chart, embedded
+   on a dashboard. Fills the (resizable) panel; epoch-ms linear axis so no
+   Chart.js date adapter is needed. #}
+{% set has_data = host and (series.cpu_pct or series.mem_used_pct or series.disk_root) %}
+{% if not host %}
+<div style="color:var(--text-muted);font-size:0.85rem;padding:0.75rem 0;">
+  No host selected. <strong>Edit</strong> this dashboard and pick a host for this graph.
 </div>
+{% elif not has_data %}
+<div style="color:var(--text-muted);font-size:0.85rem;padding:0.75rem 0;">
+  No agent metrics for <strong>{{ host.name }}</strong> in the last {{ hours }}h yet.
+</div>
+{% else %}
+<div style="height:100%;min-height:180px;position:relative;">
+  <canvas id="host-hist-{{ wid }}"></canvas>
+</div>
+<script>
+(function () {
+  var el = document.getElementById("host-hist-{{ wid }}");
+  if (!el) return;
+  var series = {{ series|tojson }};
+  var fmtTime = function (v) {
+    var d = new Date(v);
+    return ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2);
+  };
+  var ds = [
+    { key: "cpu_pct",      label: "CPU %",    color: "#c8a840" },
+    { key: "mem_used_pct", label: "Mem %",    color: "#4aa86a" },
+    { key: "disk_root",    label: "Disk / %", color: "#c87840" },
+  ];
+  new Chart(el.getContext("2d"), {
+    type: "line",
+    data: { datasets: ds.map(function (d) {
+      return {
+        label: d.label,
+        data: (series[d.key] || []).map(function (p) { return { x: p[0], y: p[1] }; }),
+        borderColor: d.color, backgroundColor: d.color, borderWidth: 1.5, tension: 0.25,
+      };
+    }) },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      interaction: { mode: "index", intersect: false },
+      elements: { point: { radius: 0 } },
+      scales: {
+        x: { type: "linear", ticks: { callback: function (v) { return fmtTime(v); }, maxTicksLimit: 6, color: "#8a8a92", font: { size: 10 } }, grid: { color: "#30303a" } },
+        y: { beginAtZero: true, max: 100, ticks: { color: "#8a8a92", font: { size: 10 } }, grid: { color: "#30303a" } },
+      },
+      plugins: { legend: { labels: { color: "#b8b8b0", boxWidth: 10, font: { size: 11 } } } },
+    },
+  });
+})();
+</script>
+{% endif %}