feat(hub): show server CPU memory disk and network status on monitor page

Co-authored-by: Cursor <cursoragent@cursor.com>

manual_trading_hub/static/app.css

@@ -650,6 +650,130 @@ button:disabled {
   color: var(--muted);
 }
 
+.host-status-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px 16px;
+  margin: 0 0 10px;
+  padding: 10px 12px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border-soft);
+  background: var(--panel);
+  font-size: 12px;
+}
+
+.host-status-bar.hidden {
+  display: none !important;
+}
+
+.host-status-head {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 0 0 auto;
+}
+
+.host-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: var(--muted);
+}
+
+.host-status-dot.ok {
+  background: var(--green);
+  box-shadow: 0 0 8px var(--green);
+}
+
+.host-status-dot.warn {
+  background: #ffb020;
+  box-shadow: 0 0 8px rgba(255, 176, 32, 0.45);
+}
+
+.host-status-dot.bad {
+  background: var(--red);
+  box-shadow: 0 0 8px var(--red);
+}
+
+.host-status-name {
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+}
+
+.host-status-uptime {
+  color: var(--muted);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.host-status-metrics {
+  display: flex;
+  flex: 1 1 520px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 14px;
+  min-width: 0;
+}
+
+.host-metric {
+  display: grid;
+  grid-template-columns: 42px minmax(72px, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1 1 180px;
+}
+
+.host-metric-net {
+  grid-template-columns: 42px auto;
+  flex: 1 1 220px;
+}
+
+.host-metric-label {
+  color: var(--muted);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.host-metric-bar {
+  height: 6px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  overflow: hidden;
+}
+
+html[data-theme="light"] .host-metric-bar {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.host-metric-fill {
+  display: block;
+  height: 100%;
+  width: 0%;
+  border-radius: inherit;
+  background: #3b82f6;
+  transition: width 0.35s ease;
+}
+
+.host-metric-fill.warn {
+  background: #ffb020;
+}
+
+.host-metric-fill.bad {
+  background: var(--red);
+}
+
+.host-metric-val {
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  font-size: 11px;
+}
+
 .grid-monitor.grid-monitor-tiles {
   grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   gap: 10px;
@@ -2613,6 +2737,25 @@ body.login-page {
     margin-bottom: 8px;
   }
 
+  .host-status-bar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    padding: 8px 10px;
+  }
+
+  .host-status-metrics {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+  }
+
+  .host-metric,
+  .host-metric-net {
+    flex: 1 1 auto;
+    width: 100%;
+  }
+
   .card-head {
     flex-direction: column;
     align-items: stretch;