fix(hub): improve monitor host status bar layout and document psutil setup

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

manual_trading_hub/static/app.css

@@ -652,11 +652,10 @@ button:disabled {
 
 .host-status-bar {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 10px 16px;
-  margin: 0 0 10px;
-  padding: 10px 12px;
+  flex-direction: column;
+  gap: 12px;
+  margin: 0 0 12px;
+  padding: 12px 14px;
   border-radius: var(--radius);
   border: 1px solid var(--border-soft);
   background: var(--panel);
@@ -667,12 +666,20 @@ button:disabled {
   display: none !important;
 }
 
+.host-status-top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 16px;
+}
+
 .host-status-head {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: 8px;
   min-width: 0;
-  flex: 0 0 auto;
+  flex: 1 1 220px;
 }
 
 .host-status-dot {
@@ -701,36 +708,54 @@ button:disabled {
 .host-status-name {
   font-weight: 600;
   color: var(--text);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.host-status-uptime {
+.host-status-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px 14px;
   color: var(--muted);
   font-size: 11px;
+  flex: 0 1 auto;
+}
+
+.host-status-uptime,
+.host-status-updated {
   white-space: nowrap;
 }
 
 .host-status-metrics {
-  display: flex;
-  flex: 1 1 520px;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 14px;
-  min-width: 0;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
 }
 
-.host-metric {
-  display: grid;
-  grid-template-columns: 42px minmax(72px, 1fr) auto;
-  align-items: center;
+.host-metric-card {
+  display: flex;
+  flex-direction: column;
   gap: 8px;
   min-width: 0;
-  flex: 1 1 180px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--border-soft);
+  background: rgba(0, 0, 0, 0.14);
 }
 
-.host-metric-net {
-  grid-template-columns: 42px auto;
-  flex: 1 1 220px;
+html[data-theme="light"] .host-metric-card {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.host-metric-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
 }
 
 .host-metric-label {
@@ -740,7 +765,7 @@ button:disabled {
 }
 
 .host-metric-bar {
-  height: 6px;
+  height: 7px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.06);
   overflow: hidden;
@@ -771,7 +796,36 @@ html[data-theme="light"] .host-metric-bar {
   color: var(--text);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.host-metric-val-net {
   font-size: 11px;
+  font-weight: 500;
+  color: var(--muted);
+}
+
+.host-metric-sub,
+.host-net-line {
+  color: var(--muted);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.host-net-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+@media (max-width: 1080px) {
+  .host-status-metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 .grid-monitor.grid-monitor-tiles {
@@ -2738,22 +2792,22 @@ body.login-page {
   }
 
   .host-status-bar {
+    gap: 10px;
+    padding: 10px 12px;
+  }
+
+  .host-status-top {
     flex-direction: column;
     align-items: stretch;
-    gap: 8px;
-    padding: 8px 10px;
+  }
+
+  .host-status-meta {
+    justify-content: flex-start;
   }
 
   .host-status-metrics {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 6px;
-  }
-
-  .host-metric,
-  .host-metric-net {
-    flex: 1 1 auto;
-    width: 100%;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 8px;
   }
 
   .card-head {