fix(dashboard): inline cpu sparkline, history graph host label + stable y-axis

- Hosts-Overview: move the CPU sparkline inline next to the cpu % value it
  represents (was floated far right on the name line, reading as unrelated).
- Host Agent history widget: caption the chart with the host it represents
  (the panel title is generic) — links to the host hub.
- History widget: snap the y-axis to a stable 0..next-10%-band ceiling instead
  of auto-scaling to the exact peak, so the 'zoom' no longer jumps each poll.

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

plugins/host_agent/routes.py

@@ -465,8 +465,16 @@ async def widget_history():
     # hundreds–thousands of points — a noisy, unreadable line. Bucket-average to a
     # readable point count, keeping the shape.
     series = {k: _downsample(v) for k, v in series.items()}
+
+    # Stable y-axis ceiling. All three series are percentages, so snap the top up
+    # to the next 10% band (floor 20, cap 100). Auto-scaling to the exact peak made
+    # the chart "zoom" jump on every poll as the peak drifted a few %; snapping to
+    # a band keeps the axis steady across refreshes while still filling the panel.
+    peak = max((p[1] for s in series.values() for p in s), default=0.0)
+    y_max = min(100, max(20, ((int(peak) // 10) + 1) * 10))
     return await render_template(
         "widget_history.html", host=host, series=series, hours=hours, wid=wid,
+        y_max=y_max,
     )
 
 

plugins/host_agent/templates/widget_history.html

@@ -11,8 +11,19 @@
   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 style="display:flex;flex-direction:column;height:100%;min-height:200px;">
+  {# Name the host the graph represents — the panel title is generic. #}
+  <div style="flex:0 0 auto;font-size:0.75rem;color:var(--text-muted);margin-bottom:0.3rem;">
+    {% if session.user_id %}
+    <a href="/hosts/{{ host.id }}" style="font-weight:600;">{{ host.name }}</a>
+    {% else %}
+    <strong style="color:var(--text);">{{ host.name }}</strong>
+    {% endif %}
+    <span style="color:var(--text-dim);">· last {{ hours }}h</span>
+  </div>
+  <div style="flex:1 1 auto;min-height:150px;position:relative;">
+    <canvas id="host-hist-{{ wid }}"></canvas>
+  </div>
 </div>
 <script>
 (function () {
@@ -43,10 +54,10 @@
       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" } },
-        // Auto-scale to the data (with a little headroom) so the lines fill the
-        // panel instead of hugging the bottom of a fixed 0–100 axis. Axis labels
-        // still show the real %, so the values stay honest.
-        y: { beginAtZero: true, grace: "8%", ticks: { color: "#8a8a92", font: { size: 10 } }, grid: { color: "#30303a" } },
+        // Fixed 0–{{ y_max }} ceiling (server snaps the data peak up to the next
+        // 10% band). Steady across refreshes — auto-scaling made the zoom jump on
+        // every poll — while a banded ceiling still keeps the lines filling the panel.
+        y: { min: 0, max: {{ y_max }}, ticks: { color: "#8a8a92", font: { size: 10 } }, grid: { color: "#30303a" } },
       },
       plugins: {
         legend: { labels: { color: "#b8b8b0", boxWidth: 10, font: { size: 11 } } },