will/agentmon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: openclaw card dividers, running pulse, issue label section

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
William Valentin
2026-03-14 12:16:30 -07:00
parent acd89e95a9
commit 13356adfbd
2 changed files with 46 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cmd/web-ui/static/app.js
+12 -7
View File
@@ -561,17 +561,22 @@
<tr><td>Memory</td><td>${escapeHTML(formatBytes(host.memory_kib ? host.memory_kib * 1024 : 0) || '-')}</td></tr> <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>Disk</td><td>${escapeHTML(formatBytes(host.disk_actual_bytes) || '-')}</td></tr>
<tr><td>Autostart</td><td>${host.autostart ? 'Yes' : 'No'}</td></tr> <tr><td>Autostart</td><td>${host.autostart ? 'Yes' : 'No'}</td></tr>
${guest ? ` </table>
<tr><td>Gateway</td><td class="${guest.service_active ? 'status-success' : 'status-error'}">${guest.service_active ? 'Active' : 'Inactive'}</td></tr> ${guest ? `
<tr><td>HTTP</td><td class="${guest.http_status === 200 ? 'status-success' : 'status-error'}">${guest.http_status || 'N/A'}</td></tr> <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>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>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>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> <tr><td>Uptime</td><td>${escapeHTML(guest.service_uptime || '-')}</td></tr>
` : ''} </table>
</table> ` : ''}
${issues ? ` ${issues && Object.values(issues).some(Boolean) ? `
<div class="vm-card-divider"></div>
<div class="vm-issues-label">Issues</div>
<div class="vm-issues"> <div class="vm-issues">
${Object.entries(issues).filter(([, value]) => value).map(([key]) => ` ${Object.entries(issues).filter(([, value]) => value).map(([key]) => `
<span class="issue ${escapeHTML(key)}">${escapeHTML(key.replace(/_/g, ' '))}</span> <span class="issue ${escapeHTML(key)}">${escapeHTML(key.replace(/_/g, ' '))}</span>
cmd/web-ui/static/style.css
+34 -5
View File
@@ -566,6 +566,19 @@ tr.expandable:hover .expand-icon::before {
background: rgba(52, 211, 153, 0.1); background: rgba(52, 211, 153, 0.1);
color: var(--success); color: var(--success);
border: 1px solid rgba(52, 211, 153, 0.2); 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 { .vm-status.stopped {
@@ -615,16 +628,16 @@ tr.expandable:hover .expand-icon::before {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.4rem; gap: 0.4rem;
margin-top: 0.875rem; margin-top: 0;
} }
.issue { .issue {
font-size: 0.68rem; font-size: 0.7rem;
padding: 0.22rem 0.6rem; padding: 0.28rem 0.7rem;
border-radius: 4px; border-radius: 4px;
font-weight: 700; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.05em;
} }
.issue.gateway_down { .issue.gateway_down {
@@ -1321,3 +1334,19 @@ tr.expandable:hover .expand-icon::before {
color: var(--text-bright); color: var(--text-bright);
font-family: var(--font-mono); 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;
}