From 7d144780df3dd1fd2713127d87e7c192ce239641 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Fri, 19 Jun 2026 23:01:56 -0400
Subject: [PATCH] fix(host_agent): TB/PB byte scaling + rebalance the
 full-metrics layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two issues on the host full-metrics view:
- fmt_bytes capped at GB, so large filesystems read "25369.0 GB" instead of
  "24.8 TB". Add TB and PB tiers.
- Interfaces/Disks/Temperatures shared one 3-column grid, so all three cards
  stretched to the Temperatures height — a 40-core CPU made one very tall column
  and left Interfaces/Disks with large empty space. Split them: Interfaces +
  Disks sit side-by-side at natural height (align-items:start); Temperatures
  becomes a full-width card whose readings flow into a compact multi-column grid
  (wide-and-short instead of one tall column).

UI-only.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016Jg27rgypiW2efULXJDtMC
---
 plugins/host_agent/templates/host_detail.html | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/plugins/host_agent/templates/host_detail.html b/plugins/host_agent/templates/host_detail.html
index 9b18f86..14c63f3 100644
--- a/plugins/host_agent/templates/host_detail.html
+++ b/plugins/host_agent/templates/host_detail.html
@@ -12,6 +12,8 @@
 {% endmacro %}
 {% macro fmt_bytes(v) %}
 {%- if v is none -%}—
+{%- elif v >= 1125899906842624 -%}{{ "%.1f"|format(v / 1125899906842624) }} PB
+{%- elif v >= 1099511627776 -%}{{ "%.1f"|format(v / 1099511627776) }} TB
 {%- elif v >= 1073741824 -%}{{ "%.1f"|format(v / 1073741824) }} GB
 {%- elif v >= 1048576 -%}{{ "%.0f"|format(v / 1048576) }} MB
 {%- else -%}{{ "%.0f"|format(v / 1024) }} KB
@@ -148,16 +150,16 @@
 </div>
 {% endif %}
 
-{# ── Interfaces / disks / sensors current detail ──────────────────────────── #}
-{% if nets or disks_io or temps %}
-<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;">
+{# ── Interfaces / disks (short panels, side by side at natural height) ─────── #}
+{% if nets or disks_io %}
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;align-items:start;">
   {% if nets %}
   <div class="card" style="margin-bottom:0;">
     <div class="section-title" style="margin-bottom:0.5rem;">Interfaces</div>
     {% for iface, m in nets.items() %}
-    <div style="display:flex;justify-content:space-between;font-size:0.8rem;padding:0.15rem 0;">
+    <div style="display:flex;justify-content:space-between;gap:0.75rem;font-size:0.8rem;padding:0.15rem 0;">
       <span style="font-family:ui-monospace,monospace;">{{ iface }}</span>
-      <span style="color:var(--text-muted);font-variant-numeric:tabular-nums;">↓ {{ fmt_bps(m.get('net_rx_bps')) }} · ↑ {{ fmt_bps(m.get('net_tx_bps')) }}</span>
+      <span style="color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;">↓ {{ fmt_bps(m.get('net_rx_bps')) }} · ↑ {{ fmt_bps(m.get('net_tx_bps')) }}</span>
     </div>
     {% endfor %}
   </div>
@@ -166,24 +168,29 @@
   <div class="card" style="margin-bottom:0;">
     <div class="section-title" style="margin-bottom:0.5rem;">Disks</div>
     {% for dev, m in disks_io.items() %}
-    <div style="display:flex;justify-content:space-between;font-size:0.8rem;padding:0.15rem 0;">
+    <div style="display:flex;justify-content:space-between;gap:0.75rem;font-size:0.8rem;padding:0.15rem 0;">
       <span style="font-family:ui-monospace,monospace;">{{ dev }}</span>
-      <span style="color:var(--text-muted);font-variant-numeric:tabular-nums;">rd {{ fmt_bps(m.get('disk_read_bps')) }} · wr {{ fmt_bps(m.get('disk_write_bps')) }}</span>
+      <span style="color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;">rd {{ fmt_bps(m.get('disk_read_bps')) }} · wr {{ fmt_bps(m.get('disk_write_bps')) }}</span>
     </div>
     {% endfor %}
   </div>
   {% endif %}
-  {% if temps %}
-  <div class="card" style="margin-bottom:0;">
-    <div class="section-title" style="margin-bottom:0.5rem;">Temperatures</div>
+</div>
+{% endif %}
+
+{# ── Temperatures (full width; cores flow into a compact multi-column grid so a
+     many-core CPU reads wide-and-short instead of one very tall column) ─────── #}
+{% if temps %}
+<div class="card" style="margin-top:1rem;margin-bottom:0;">
+  <div class="section-title" style="margin-bottom:0.5rem;">Temperatures</div>
+  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:0.1rem 1.25rem;">
     {% for label, c in temps.items() %}
-    <div style="display:flex;justify-content:space-between;font-size:0.8rem;padding:0.15rem 0;">
-      <span>{{ label }}</span>
+    <div style="display:flex;justify-content:space-between;gap:0.5rem;font-size:0.8rem;padding:0.15rem 0;">
+      <span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ label }}</span>
       <span style="color:{% if c is none %}var(--text-dim){% elif c < 70 %}var(--green){% elif c < 85 %}var(--yellow){% else %}var(--red){% endif %};font-variant-numeric:tabular-nums;">{% if c is not none %}{{ "%.0f"|format(c) }}°C{% else %}—{% endif %}</span>
     </div>
     {% endfor %}
   </div>
-  {% endif %}
 </div>
 {% endif %}