From c95ca6ac354b4252d38931f657892253e91ebb8c Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Sat, 13 Jun 2026 14:26:26 +0800
Subject: [PATCH] fix(hub): color host status summary metrics green/red and
 bust css cache

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 manual_trading_hub/static/app.css    | 22 +++++++++-
 manual_trading_hub/static/app.js     | 60 +++++++++++++++++++++++-----
 manual_trading_hub/static/index.html |  4 +-
 3 files changed, 72 insertions(+), 14 deletions(-)

diff --git a/manual_trading_hub/static/app.css b/manual_trading_hub/static/app.css
index 9b89807..a95e23c 100644
--- a/manual_trading_hub/static/app.css
+++ b/manual_trading_hub/static/app.css
@@ -695,7 +695,6 @@ button:disabled {
 }
 
 .host-status-summary-text {
-  color: var(--muted);
   font-size: 11px;
   min-width: 0;
   overflow: hidden;
@@ -704,6 +703,27 @@ button:disabled {
   flex: 1 1 auto;
 }
 
+.host-status-summary-text.bad {
+  color: var(--red);
+}
+
+.host-summary-host,
+.host-summary-sep {
+  color: var(--muted);
+}
+
+.host-metric-tone.ok,
+.host-metric-val.ok {
+  color: var(--green);
+  font-weight: 600;
+}
+
+.host-metric-tone.bad,
+.host-metric-val.bad {
+  color: var(--red);
+  font-weight: 600;
+}
+
 .host-status-bar {
   display: flex;
   flex-direction: column;
diff --git a/manual_trading_hub/static/app.js b/manual_trading_hub/static/app.js
index b7ae024..db773f8 100644
--- a/manual_trading_hub/static/app.js
+++ b/manual_trading_hub/static/app.js
@@ -161,18 +161,56 @@
     }
   }
 
-  function hostStatusSummaryText(data) {
-    if (!data || !data.ok) return (data && data.msg) || "状态不可用";
+  function hostMetricSummaryHtml(label, percent) {
+    const p = Number(percent);
+    if (!Number.isFinite(p)) {
+      return esc(label) + " —";
+    }
+    const tone = hostMetricLevel(p);
+    return (
+      esc(label) +
+      ' <span class="host-metric-tone ' +
+      tone +
+      '">' +
+      p +
+      "%</span>"
+    );
+  }
+
+  function renderHostStatusSummary(data, el) {
+    if (!el) return;
+    if (!data || !data.ok) {
+      el.className = "host-status-summary-text bad";
+      el.textContent = (data && data.msg) || "状态不可用";
+      return;
+    }
     const cpu = data.cpu || {};
     const mem = data.memory || {};
     const disk = data.disk || {};
     const parts = [];
     const host = String(data.hostname || "").trim();
-    if (host) parts.push(host);
-    if (cpu.percent != null) parts.push("CPU " + cpu.percent + "%");
-    if (mem.percent != null) parts.push("内存 " + mem.percent + "%");
-    if (disk.percent != null) parts.push("硬盘 " + disk.percent + "%");
-    return parts.join(" · ") || "—";
+    if (host) {
+      parts.push('<span class="host-summary-host">' + esc(host) + "</span>");
+    }
+    if (cpu.percent != null) parts.push(hostMetricSummaryHtml("CPU", cpu.percent));
+    if (mem.percent != null) parts.push(hostMetricSummaryHtml("内存", mem.percent));
+    if (disk.percent != null) parts.push(hostMetricSummaryHtml("硬盘", disk.percent));
+    el.className = "host-status-summary-text";
+    el.innerHTML = parts.length
+      ? parts.join(' <span class="host-summary-sep">·</span> ')
+      : "—";
+  }
+
+  function setHostMetricVal(el, percent) {
+    if (!el) return;
+    const p = Number(percent);
+    el.classList.remove("ok", "bad");
+    if (!Number.isFinite(p)) {
+      el.textContent = "—";
+      return;
+    }
+    el.textContent = p + "%";
+    el.classList.add(hostMetricLevel(p));
   }
 
   let hostStatusPanelInited = false;
@@ -208,7 +246,7 @@
     const netUp = document.getElementById("host-net-up");
     const netDown = document.getElementById("host-net-down");
     panel.classList.remove("hidden");
-    if (summaryText) summaryText.textContent = hostStatusSummaryText(data);
+    renderHostStatusSummary(data, summaryText);
     if (!data || !data.ok) {
       if (dot) dot.className = "host-status-dot bad";
       if (name) {
@@ -244,14 +282,14 @@
     setHostMetricBar(document.getElementById("host-cpu-fill"), cpu.percent);
     setHostMetricBar(document.getElementById("host-mem-fill"), mem.percent);
     setHostMetricBar(document.getElementById("host-disk-fill"), disk.percent);
-    if (cpuVal) cpuVal.textContent = cpu.percent != null ? cpu.percent + "%" : "—";
+    setHostMetricVal(cpuVal, cpu.percent);
+    setHostMetricVal(memVal, mem.percent);
+    setHostMetricVal(diskVal, disk.percent);
     if (cpuSub) cpuSub.textContent = cpu.count ? cpu.count + " 核" : "";
-    if (memVal) memVal.textContent = mem.percent != null ? mem.percent + "%" : "—";
     if (memSub) {
       memSub.textContent =
         fmtHostBytes(mem.used_bytes) + " / " + fmtHostBytes(mem.total_bytes);
     }
-    if (diskVal) diskVal.textContent = disk.percent != null ? disk.percent + "%" : "—";
     if (diskSub) {
       diskSub.textContent =
         fmtHostBytes(disk.used_bytes) + " / " + fmtHostBytes(disk.total_bytes);
diff --git a/manual_trading_hub/static/index.html b/manual_trading_hub/static/index.html
index 19cfbe6..3c46877 100644
--- a/manual_trading_hub/static/index.html
+++ b/manual_trading_hub/static/index.html
@@ -15,7 +15,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
   <noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
-  <link rel="stylesheet" href="/assets/app.css?v=20260612-archive-ai-chat" />
+  <link rel="stylesheet" href="/assets/app.css?v=20260613-host-status-tone" />
   <link rel="stylesheet" href="/assets/dashboard.css?v=20260612-dash-monitor-count" />
 </head>
 <body>
@@ -653,6 +653,6 @@
   <script src="/assets/dashboard.js?v=20260612-dash-monitor-count"></script>
   <script src="/assets/ai_review_render.js?v=3"></script>
   <script src="/assets/time_close_ui.js?v=2"></script>
-  <script src="/assets/app.js?v=20260613-host-status-threshold"></script>
+  <script src="/assets/app.js?v=20260613-host-status-tone"></script>
 </body>
 </html>