From 6d08db0d899748bdf5a3a86b5c9b8e0c1b05fce0 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Fri, 19 Jun 2026 23:12:13 -0400
Subject: [PATCH] feat(hosts): rework host summary layout to use horizontal
 space
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The host detail page stacked three full-width cards (Monitors, Agent, Ansible)
left-aligned, using only ~40% of the width with lots of vertical whitespace.

Rework toward the operator-chosen "vitals on top + 2-column" layout:
- The agent panel (CPU/MEM/DISK/LOAD vitals + sparklines + lifecycle) moves to
  the top, full width, so a host's vitals lead the page.
- Monitors and Ansible sit side by side in a responsive 2-column grid
  (auto-fit, stacks under ~420px), filling the width.
- The Docker per-host fragment moves below, full width.

Note: the vitals live in the host_agent fragment (loaded across the plugin
boundary) and uptime in the host-detail context, so a single literal top "strip"
mixing both isn't clean — the agent card on top is the faithful, contained
realization. UI-only.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016Jg27rgypiW2efULXJDtMC
---
 steward/templates/hosts/detail.html | 33 ++++++++++++++++-------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/steward/templates/hosts/detail.html b/steward/templates/hosts/detail.html
index 81fb23e..fee31ea 100644
--- a/steward/templates/hosts/detail.html
+++ b/steward/templates/hosts/detail.html
@@ -26,8 +26,16 @@
 {% set inp = "width:100%;padding:0.4rem 0.65rem;background:var(--bg);border:1px solid var(--border-mid);border-radius:4px;color:var(--text);font-size:0.88rem;" %}
 {% set lbl = "font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:0.2rem;" %}
 
+{# ── Agent vitals + lifecycle (host_agent fragment) — primary, full width on top ── #}
+<div hx-get="/plugins/host_agent/panel/{{ host.id }}" hx-trigger="load" hx-swap="innerHTML">
+  <div class="card"><span style="color:var(--text-muted);font-size:0.85rem;">Loading agent…</span></div>
+</div>
+
+{# ── Monitors + Ansible, side by side on wide screens, stacked when narrow ──── #}
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:1rem;align-items:start;margin-bottom:1rem;">
+
 {# ── Monitors ─────────────────────────────────────────────────────────────── #}
-<div class="card">
+<div class="card" style="margin-bottom:0;">
   <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:0.5rem;">
     <h3 class="section-title" style="margin-bottom:0;">Monitors</h3>
     {% if uptime %}
@@ -114,21 +122,10 @@
     </form>
   </details>
   {% endif %}
-</div>
-
-{# ── Agent (host_agent plugin fragment, embedded across the plugin boundary) ── #}
-<div hx-get="/plugins/host_agent/panel/{{ host.id }}" hx-trigger="load"
-     hx-swap="innerHTML">
-  <div class="card"><span style="color:var(--text-muted);font-size:0.85rem;">Loading agent…</span></div>
-</div>
-
-{# ── Docker (docker plugin fragment; renders nothing if the host has none) ──── #}
-{% if "docker" in enabled_plugins %}
-<div hx-get="/plugins/docker/host/{{ host.id }}" hx-trigger="load" hx-swap="innerHTML"></div>
-{% endif %}
+</div>{# Monitors card #}
 
 {# ── Ansible ──────────────────────────────────────────────────────────────── #}
-<div class="card">
+<div class="card" style="margin-bottom:0;">
   <h3 class="section-title">Ansible</h3>
   {% if linked_target %}
   <div style="display:flex;align-items:center;gap:1rem;padding:0.6rem 0.75rem;background:var(--bg-elevated);border-radius:4px;margin-bottom:1rem;flex-wrap:wrap;">
@@ -213,7 +210,13 @@
     </form>
   </div>
   {% endif %}
-</div>
+</div>{# Ansible card #}
+</div>{# Monitors + Ansible grid #}
+
+{# ── Docker (docker plugin fragment; renders nothing if the host has none) ──── #}
+{% if "docker" in enabled_plugins %}
+<div hx-get="/plugins/docker/host/{{ host.id }}" hx-trigger="load" hx-swap="innerHTML"></div>
+{% endif %}
 
 {{ toggle_script() }}
 <script>var _mt=document.getElementById('mtype'); if(_mt) mtoggle(_mt.value);</script>