From eefa38cc757e1e680d15fd2bdd36f237652749ca Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 17 Jun 2026 20:44:56 -0400
Subject: [PATCH] feat(host_agent): in-widget 1h/6h/24h time-range toggle on
 history graph

Add a live range switch to the history widget that re-requests the fragment
without entering edit mode. It rewrites the parent cell's hx-get so the choice
survives polling (htmx re-reads the attribute each poll), then fetches at once.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../host_agent/templates/widget_history.html  | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/plugins/host_agent/templates/widget_history.html b/plugins/host_agent/templates/widget_history.html
index 1bd73a8..1c13783 100644
--- a/plugins/host_agent/templates/widget_history.html
+++ b/plugins/host_agent/templates/widget_history.html
@@ -12,20 +12,38 @@
 </div>
 {% else %}
 <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;">
+  {# Name the host the graph represents (panel title is generic) + a live range
+     toggle that re-requests this widget without entering edit mode. #}
+  <div style="flex:0 0 auto;display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;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>
+    <span class="hist-range" style="margin-left:auto;display:inline-flex;border:1px solid var(--border-mid);border-radius:5px;overflow:hidden;">
+      {% for opt in [1, 6, 24] %}
+      <button type="button" onclick="histRange({{ wid }}, '{{ host.id }}', {{ opt }})"
+        style="border:0;cursor:pointer;padding:0.1rem 0.45rem;font-size:0.72rem;
+               background:{% if opt == hours %}var(--accent){% else %}transparent{% endif %};
+               color:{% if opt == hours %}#fff{% else %}var(--text-muted){% endif %};">{{ opt }}h</button>
+      {% endfor %}
+    </span>
   </div>
   <div style="flex:1 1 auto;min-height:150px;position:relative;">
     <canvas id="host-hist-{{ wid }}"></canvas>
   </div>
 </div>
 <script>
+// Live time-range switch. Rewrites the parent cell's hx-get so the choice sticks
+// across polls (htmx re-reads the attribute each poll), then fetches immediately.
+window.histRange = function (wid, hostId, hours) {
+  var cell = document.getElementById("widget-" + wid);
+  if (!cell) return;
+  var base = (cell.getAttribute("hx-get") || "").split("?")[0];
+  var url = base + "?host_id=" + encodeURIComponent(hostId) + "&hours=" + hours + "&wid=" + wid;
+  cell.setAttribute("hx-get", url);
+  if (window.htmx) window.htmx.ajax("GET", url, { target: cell, swap: "innerHTML" });
+};
 (function () {
   var el = document.getElementById("host-hist-{{ wid }}");
   if (!el) return;