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/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 %}