From 13356adfbd496ef9af961e8f8d3edee741865277 Mon Sep 17 00:00:00 2001
From: William Valentin <william.valentin.info@gmail.com>
Date: Sat, 14 Mar 2026 12:16:30 -0700
Subject: [PATCH] feat: openclaw card dividers, running pulse, issue label
 section

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 cmd/web-ui/static/app.js    | 19 +++++++++++-------
 cmd/web-ui/static/style.css | 39 ++++++++++++++++++++++++++++++++-----
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/cmd/web-ui/static/app.js b/cmd/web-ui/static/app.js
index 1b57e22..22cd1c3 100644
--- a/cmd/web-ui/static/app.js
+++ b/cmd/web-ui/static/app.js
@@ -561,17 +561,22 @@
                 <tr><td>Memory</td><td>${escapeHTML(formatBytes(host.memory_kib ? host.memory_kib * 1024 : 0) || '-')}</td></tr>
                 <tr><td>Disk</td><td>${escapeHTML(formatBytes(host.disk_actual_bytes) || '-')}</td></tr>
                 <tr><td>Autostart</td><td>${host.autostart ? 'Yes' : 'No'}</td></tr>
-                ${guest ? `
-                  <tr><td>Gateway</td><td class="${guest.service_active ? 'status-success' : 'status-error'}">${guest.service_active ? 'Active' : 'Inactive'}</td></tr>
-                  <tr><td>HTTP</td><td class="${guest.http_status === 200 ? 'status-success' : 'status-error'}">${guest.http_status || 'N/A'}</td></tr>
+              </table>
+              ${guest ? `
+                <div class="vm-card-divider"></div>
+                <table class="vm-stats">
+                  <tr><td>Gateway</td><td style="${guest.service_active ? 'color:var(--success)' : 'color:var(--error)'}">${guest.service_active ? 'Active' : 'Inactive'}</td></tr>
+                  <tr><td>HTTP</td><td style="${guest.http_status === 200 ? 'color:var(--success)' : 'color:var(--error)'}">${guest.http_status || 'N/A'}</td></tr>
                   <tr><td>Version</td><td>${escapeHTML(guest.version || '-')}</td></tr>
-                  <tr><td>Guest Memory</td><td>${guest.memory_percent !== undefined ? guest.memory_percent.toFixed(1) : '-'}%</td></tr>
+                  <tr><td>Guest Mem</td><td>${guest.memory_percent !== undefined ? guest.memory_percent.toFixed(1) : '-'}%</td></tr>
                   <tr><td>Guest Disk</td><td>${guest.disk_percent !== undefined ? guest.disk_percent.toFixed(1) : '-'}%</td></tr>
                   <tr><td>Load</td><td>${guest.load_average !== undefined ? guest.load_average.toFixed(2) : '-'}</td></tr>
                   <tr><td>Uptime</td><td>${escapeHTML(guest.service_uptime || '-')}</td></tr>
-                ` : ''}
-              </table>
-              ${issues ? `
+                </table>
+              ` : ''}
+              ${issues && Object.values(issues).some(Boolean) ? `
+                <div class="vm-card-divider"></div>
+                <div class="vm-issues-label">Issues</div>
                 <div class="vm-issues">
                   ${Object.entries(issues).filter(([, value]) => value).map(([key]) => `
                     <span class="issue ${escapeHTML(key)}">${escapeHTML(key.replace(/_/g, ' '))}</span>
diff --git a/cmd/web-ui/static/style.css b/cmd/web-ui/static/style.css
index fde4d06..e98c1bf 100644
--- a/cmd/web-ui/static/style.css
+++ b/cmd/web-ui/static/style.css
@@ -566,6 +566,19 @@ tr.expandable:hover .expand-icon::before {
   background: rgba(52, 211, 153, 0.1);
   color: var(--success);
   border: 1px solid rgba(52, 211, 153, 0.2);
+  gap: 0.4rem;
+}
+
+.vm-status.running::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
+  animation: livePulse 2s ease-in-out infinite;
+  flex-shrink: 0;
 }
 
 .vm-status.stopped {
@@ -615,16 +628,16 @@ tr.expandable:hover .expand-icon::before {
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem;
-  margin-top: 0.875rem;
+  margin-top: 0;
 }
 
 .issue {
-  font-size: 0.68rem;
-  padding: 0.22rem 0.6rem;
+  font-size: 0.7rem;
+  padding: 0.28rem 0.7rem;
   border-radius: 4px;
-  font-weight: 700;
+  font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.05em;
 }
 
 .issue.gateway_down {
@@ -1321,3 +1334,19 @@ tr.expandable:hover .expand-icon::before {
   color: var(--text-bright);
   font-family: var(--font-mono);
 }
+
+/* ── VM card divider ──────────────────────────────────────── */
+.vm-card-divider {
+  height: 1px;
+  background: var(--border-soft);
+  margin: 0.75rem 0;
+}
+
+.vm-issues-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 0.5rem;
+}