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

feat: chart legend, fw bar height, feed fade, top tools mini bars

Browse Source
This commit is contained in:
William Valentin
2026-03-14 12:02:49 -07:00
parent 2c4b212ae6
commit 1c6255d688
2 changed files with 53 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cmd/web-ui/static/app.js
+14 -7
View File
@@ -979,11 +979,18 @@
<div class="chart-panel"> <div class="chart-panel">
<div class="chart-header"> <div class="chart-header">
<span class="chart-title">Event Rate</span> <span class="chart-title">Event Rate</span>
<div class="window-selector"> <div style="display:flex;align-items:center;gap:1.25rem">
<button class="window-btn active" data-w="1h">1h</button> <div class="chart-legend">
<button class="window-btn" data-w="6h">6h</button> <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#34d399"></span>runs</span>
<button class="window-btn" data-w="24h">24h</button> <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#22d3ee"></span>tools</span>
<button class="window-btn" data-w="7d">7d</button> <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#f87171"></span>errors</span>
</div>
<div class="window-selector">
<button class="window-btn active" data-w="1h">1h</button>
<button class="window-btn" data-w="6h">6h</button>
<button class="window-btn" data-w="24h">24h</button>
<button class="window-btn" data-w="7d">7d</button>
</div>
</div> </div>
</div> </div>
<div class="chart-container" id="dash-chart"></div> <div class="chart-container" id="dash-chart"></div>
@@ -1386,9 +1393,9 @@
return; return;
} }
const maxCount = topTools[0][1]; const maxCount = topTools[0]?.[1] || 1;
list.innerHTML = topTools.map(([name, count]) => { list.innerHTML = topTools.map(([name, count]) => {
const pct = maxCount > 0 ? (count / maxCount * 100) : 0; const pct = (count / maxCount * 100).toFixed(1);
return ` return `
<li> <li>
<div class="stat-list-header"> <div class="stat-list-header">
cmd/web-ui/static/style.css
+39 -3
View File
@@ -1152,15 +1152,15 @@ tr.clickable:hover td:first-child {
} }
.fw-bar-track { .fw-bar-track {
height: 6px; height: 8px;
background: var(--surface-2); background: var(--surface-2);
border-radius: 3px; border-radius: 4px;
overflow: hidden; overflow: hidden;
} }
.fw-bar-fill { .fw-bar-fill {
height: 100%; height: 100%;
border-radius: 3px; border-radius: 4px;
transition: width 0.4s ease; transition: width 0.4s ease;
} }
@@ -1188,6 +1188,19 @@ tr.clickable:hover td:first-child {
padding: 1.25rem; padding: 1.25rem;
max-height: 480px; max-height: 480px;
overflow-y: auto; overflow-y: auto;
position: relative;
}
.feed-panel::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 48px;
background: linear-gradient(to bottom, transparent, var(--surface));
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
pointer-events: none;
} }
.feed-panel .timeline-event { .feed-panel .timeline-event {
@@ -1206,3 +1219,26 @@ tr.clickable:hover td:first-child {
} }
.uplot .u-legend { display: none; } .uplot .u-legend { display: none; }
/* ── Chart legend ─────────────────────────────────────────── */
.chart-legend {
display: flex;
gap: 1rem;
align-items: center;
}
.chart-legend-item {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.7rem;
color: var(--text-dim);
font-family: var(--font-mono);
}
.chart-legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}