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

feat: semantic accent colors on summary cards, infrastructure label

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
William Valentin
2026-03-14 11:59:38 -07:00
parent a6902e8d6c
commit 2c4b212ae6
2 changed files with 36 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cmd/web-ui/static/app.js
+21 -18
View File
@@ -952,25 +952,29 @@
<h2>Dashboard <span class="live-indicator"><span class="live-dot"></span>Live</span></h2> <h2>Dashboard <span class="live-indicator"><span class="live-dot"></span>Live</span></h2>
</div> </div>
<div class="dashboard-summary"> <div class="dashboard-summary">
<div class="summary-card"> <div class="summary-card" style="--card-accent:var(--accent)">
<div class="summary-card-label">Active Sessions</div> <div class="summary-card-label"><span class="summary-card-icon">◉</span>Active Sessions</div>
<div class="summary-card-value" id="dash-active">-</div> <div class="summary-card-value" id="dash-active">-</div>
<div class="summary-card-sub" id="dash-active-sub"></div> <div class="summary-card-sub" id="dash-active-sub">&nbsp;</div>
</div> </div>
<div class="summary-card"> <div class="summary-card" style="--card-accent:var(--success)">
<div class="summary-card-label">Runs Today</div> <div class="summary-card-label"><span class="summary-card-icon">▶</span>Runs Today</div>
<div class="summary-card-value" id="dash-runs">-</div> <div class="summary-card-value" id="dash-runs">-</div>
<div class="summary-card-sub" id="dash-runs-sub">&nbsp;</div>
</div> </div>
<div class="summary-card"> <div class="summary-card" style="--card-accent:var(--purple)">
<div class="summary-card-label">Tool Calls</div> <div class="summary-card-label"><span class="summary-card-icon">⚡</span>Tool Calls</div>
<div class="summary-card-value" id="dash-tools">-</div> <div class="summary-card-value" id="dash-tools">-</div>
<div class="summary-card-sub" id="dash-tools-sub">&nbsp;</div>
</div> </div>
<div class="summary-card"> <div class="summary-card" style="--card-accent:var(--error)">
<div class="summary-card-label">Errors</div> <div class="summary-card-label"><span class="summary-card-icon">⚠</span>Errors</div>
<div class="summary-card-value" id="dash-errors">-</div> <div class="summary-card-value" id="dash-errors">-</div>
<div class="summary-card-sub" id="dash-errors-sub">&nbsp;</div>
</div> </div>
</div> </div>
<div class="vm-strip" id="dash-vm-strip"></div> <div class="section-title" style="margin-bottom:0.75rem">Infrastructure</div>
<div class="vm-strip" id="dash-vm-strip" style="margin-bottom:1.5rem"></div>
<div class="charts-row"> <div class="charts-row">
<div class="chart-panel"> <div class="chart-panel">
<div class="chart-header"> <div class="chart-header">
@@ -1142,18 +1146,17 @@
el('dash-tools', s.tool_calls_today); el('dash-tools', s.tool_calls_today);
el('dash-errors', s.errors_today); el('dash-errors', s.errors_today);
// Sub-line: framework breakdown for active sessions
const fws = Object.keys(s.by_framework || {});
if (fws.length > 0) {
const sub = document.getElementById('dash-active-sub');
if (sub) sub.textContent = fws.map(f => `${f} ${(s.by_framework[f].runs || 0)}`).join(' · ');
}
const errEl = document.getElementById('dash-errors'); const errEl = document.getElementById('dash-errors');
if (errEl) { if (errEl) {
errEl.classList.toggle('has-errors', s.errors_today > 0); errEl.classList.toggle('has-errors', s.errors_today > 0);
} }
const subEl = document.getElementById('dash-active-sub');
if (subEl && s.by_framework) {
const parts = Object.entries(s.by_framework)
.filter(([, v]) => v.runs > 0)
.map(([name, v]) => escapeHTML(name) + ' ' + v.runs);
subEl.textContent = parts.length > 0 ? parts.join(' / ') : '';
}
} }
async function loadTimeseries() { async function loadTimeseries() {
cmd/web-ui/static/style.css
+15 -5
View File
@@ -995,24 +995,34 @@ tr.clickable:hover td:first-child {
.summary-card { .summary-card {
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-left: 3px solid var(--card-accent, var(--border));
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 1.125rem 1.25rem; padding: 1.125rem 1.25rem;
transition: border-color 0.2s; transition: border-color 0.2s, border-left-color 0.2s;
} }
.summary-card:hover { .summary-card:hover {
border-color: rgba(34, 211, 238, 0.18); border-color: var(--card-accent, var(--border));
border-left-color: var(--card-accent, var(--border));
} }
.summary-card-label { .summary-card-label {
font-size: 0.68rem; display: flex;
font-weight: 700; align-items: center;
gap: 0.5rem;
font-size: 0.7rem;
font-weight: 600;
color: var(--text-dim); color: var(--text-dim);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.08em;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.summary-card-icon {
font-size: 0.85rem;
opacity: 0.7;
}
.summary-card-value { .summary-card-value {
font-family: var(--font-display); font-family: var(--font-display);
font-size: 2rem; font-size: 2rem;