From 10808c1c5de5cd51799b5773cb6d98d18c360395 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 17 Jun 2026 16:44:31 -0400
Subject: [PATCH] fix(dashboard): inline cpu sparkline, history graph host
 label + stable y-axis
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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                  |  8 +++++++
 .../host_agent/templates/widget_history.html  | 23 ++++++++++++++-----
 steward/templates/hosts/overview_widget.html  |  3 +--
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/plugins/host_agent/routes.py b/plugins/host_agent/routes.py
index 848c05a..644dbee 100644
--- a/plugins/host_agent/routes.py
+++ b/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,
     )
 
 
diff --git a/plugins/host_agent/templates/widget_history.html b/plugins/host_agent/templates/widget_history.html
index 1414ad5..1bd73a8 100644
--- a/plugins/host_agent/templates/widget_history.html
+++ b/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 } } },
diff --git a/steward/templates/hosts/overview_widget.html b/steward/templates/hosts/overview_widget.html
index 16776e9..2a4868a 100644
--- a/steward/templates/hosts/overview_widget.html
+++ b/steward/templates/hosts/overview_widget.html
@@ -22,7 +22,6 @@
       {% else %}
       <span style="font-weight:600;font-size:0.85rem;overflow-wrap:anywhere;">{{ host.name }}</span>
       {% endif %}
-      {% if spark %}<span title="CPU — last hour" style="margin-left:auto;line-height:0;opacity:0.85;flex-shrink:0;">{{ spark | safe }}</span>{% endif %}
     </div>
     {# Line 2 — monitors + agent metrics; wraps instead of truncating #}
     <div style="display:flex;flex-wrap:wrap;gap:0.25rem 0.9rem;margin-top:0.25rem;padding-left:1.1rem;
@@ -34,7 +33,7 @@
       <span title="Uptime 24h"><span style="color:var(--text-dim);">24h</span> {{ "%.1f"|format(ut['24h']) }}%</span>
       {% endif %}
       {% if a %}
-      {% if a.get('cpu_pct') is not none %}<span title="CPU" style="{{ metric_style(a.cpu_pct) }}"><span style="color:var(--text-dim);">cpu</span> {{ "%.0f"|format(a.cpu_pct) }}%</span>{% endif %}
+      {% if a.get('cpu_pct') is not none %}<span title="CPU — value + last-hour trend" style="display:inline-flex;align-items:center;gap:0.3rem;{{ metric_style(a.cpu_pct) }}"><span style="color:var(--text-dim);">cpu</span> {{ "%.0f"|format(a.cpu_pct) }}%{% if spark %}<span style="line-height:0;opacity:0.85;">{{ spark | safe }}</span>{% endif %}</span>{% endif %}
       {% if a.get('mem_used_pct') is not none %}<span title="Memory" style="{{ metric_style(a.mem_used_pct) }}"><span style="color:var(--text-dim);">mem</span> {{ "%.0f"|format(a.mem_used_pct) }}%</span>{% endif %}
       {% if a.get('disk_root') is not none %}<span title="Root filesystem (/)" style="{{ metric_style(a.disk_root) }}"><span style="color:var(--text-dim);">disk /</span> {{ "%.0f"|format(a.disk_root) }}%</span>{% endif %}
       {% if not a.fresh %}<span title="Agent data is stale" style="color:var(--yellow);">stale</span>{% endif %}