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

feat(web-ui): better stats and ergonomics

Browse Source 
Usage page: add 7-day trend chart (activity/tokens/cost tabs),
framework breakdown panel with per-framework run/tool/error counts
and proportional bars, and 7d aggregate pills above the chart.

Dashboard: add avg cost/run metric pill to the metrics strip.

Run detail: extract and display prompt preview from the first agent
span's payload above the spans table.

Bug fixes: stat-list bars now render correctly (flex-direction:column),
right-panel-tab active background uses correct accent color, missing
framework colors added for hermes/codex/gemini/copilot. Dead code
renderSessionRow removed from sessions.js. Hardcoded font-family
replaced with CSS variable in metric-pill-value and token-stat-value.
Usage page cleanup() wired into router teardown.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
William Valentin
2026-05-21 16:49:05 -07:00
parent 1b01f0b0cd
commit 8753c0c9d5
6 changed files with 455 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cmd/web-ui/static/style.css
+186 -8
View File
@@ -1422,8 +1422,7 @@ tr.expandable:hover .expand-icon::before {
.stat-list li {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
padding: 0.35rem 0;
border-bottom: 1px solid var(--border-soft);
font-size: 0.8rem;
@@ -1914,10 +1913,14 @@ tr.expandable:hover .expand-icon::before {
transition: width 0.4s ease;
}
.fw-bar-fill.openclaw { background: var(--accent); }
.fw-bar-fill.openclaw { background: var(--accent); }
.fw-bar-fill.claude-code { background: var(--success); }
.fw-bar-fill.opencode { background: var(--purple); }
.fw-bar-fill.unknown { background: var(--text-dim); }
.fw-bar-fill.opencode { background: var(--purple); }
.fw-bar-fill.hermes { background: var(--warning); }
.fw-bar-fill.codex { background: #60a5fa; }
.fw-bar-fill.gemini { background: #f97316; }
.fw-bar-fill.copilot { background: #2dd4bf; }
.fw-bar-fill.unknown { background: var(--text-dim); }
.bottom-panels {
display: grid;
@@ -2034,6 +2037,10 @@ tr.expandable:hover .expand-icon::before {
.fw-dot.openclaw { background: var(--accent); --fw-glow: var(--accent); }
.fw-dot.claude-code { background: var(--success); --fw-glow: var(--success); }
.fw-dot.opencode { background: var(--purple); --fw-glow: var(--purple); }
.fw-dot.hermes { background: var(--warning); --fw-glow: var(--warning); }
.fw-dot.codex { background: #60a5fa; --fw-glow: #60a5fa; }
.fw-dot.gemini { background: #f97316; --fw-glow: #f97316; }
.fw-dot.copilot { background: #2dd4bf; --fw-glow: #2dd4bf; }
.fw-dot.unknown { background: var(--text-dim); --fw-glow: var(--text-dim); }
.fw-dot.ended { opacity: 0.3; }
.fw-dot.active { box-shadow: 0 0 6px var(--fw-glow); animation: fwPulse 2s ease-in-out infinite; }
@@ -3145,7 +3152,7 @@ tr.clickable.active-session td:first-child {
.metric-pill-value {
font-size: 1.05rem;
font-weight: 600;
font-family: 'Fira Code', monospace;
font-family: var(--font-mono);
color: var(--text);
}
@@ -3179,7 +3186,7 @@ tr.clickable.active-session td:first-child {
.right-panel-tab.active {
color: var(--accent);
border-color: var(--accent);
background: rgba(var(--accent-rgb, 99, 102, 241), 0.08);
background: var(--accent-dim);
}
.right-panel-body {
@@ -3211,7 +3218,7 @@ tr.clickable.active-session td:first-child {
.token-stat-value {
font-size: 2rem;
font-weight: 700;
font-family: 'Fira Code', monospace;
font-family: var(--font-mono);
color: var(--text);
line-height: 1.1;
}
@@ -3932,3 +3939,174 @@ tr.clickable:focus-visible {
outline-offset: 2px;
border-radius: var(--radius);
}
/* ── Usage Page: Chart Panel ─────────────────────────────── */
.usage-chart-panel { flex: 2 1 400px; }
.usage-fw-panel { flex: 1 1 240px; }
.usage-chart-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.usage-chart-tabs {
display: flex;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.usage-chart-tab {
background: transparent;
border: none;
border-right: 1px solid var(--border);
color: var(--text-dim);
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 500;
padding: 0.3rem 0.7rem;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.usage-chart-tab:last-child { border-right: none; }
.usage-chart-tab:hover { color: var(--text-bright); background: var(--surface-2); }
.usage-chart-tab.active { color: var(--accent); background: var(--accent-dim); }
.usage-chart-totals {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.75rem;
}
.usage-chart-total-pill {
display: inline-flex;
align-items: baseline;
gap: 0.3rem;
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 0.22rem 0.55rem;
font-family: var(--font-mono);
font-size: 0.8rem;
}
.usage-chart-total-label {
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-dim);
}
.usage-chart-total-pill strong { color: var(--text-bright); }
.usage-total-errors { color: var(--error); }
/* ── Usage Page: Framework Breakdown ─────────────────────── */
.usage-fw-row {
display: flex;
flex-direction: column;
gap: 0.28rem;
padding: 0.65rem 0;
border-bottom: 1px solid var(--border-soft);
}
.usage-fw-row:last-child { border-bottom: none; }
.usage-fw-name {
display: flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--text);
}
.usage-fw-active-badge {
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--success);
background: rgba(52, 211, 153, 0.1);
border: 1px solid rgba(52, 211, 153, 0.2);
border-radius: 999px;
padding: 0.1rem 0.45rem;
}
.usage-fw-stats {
display: flex;
gap: 0.75rem;
font-family: var(--font-mono);
font-size: 0.72rem;
}
.usage-fw-stat {
display: flex;
gap: 0.28rem;
align-items: baseline;
color: var(--text);
}
.usage-fw-stat.error { color: var(--error); }
.usage-fw-stat-label {
font-size: 0.58rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-dim);
}
.usage-fw-bar-track {
height: 4px;
background: var(--surface-2);
border-radius: 2px;
overflow: hidden;
}
.usage-fw-bar-fill {
height: 100%;
border-radius: 2px;
transition: width 0.4s ease;
background: var(--text-dim);
}
.usage-fw-bar-fill.openclaw { background: var(--accent); }
.usage-fw-bar-fill.claude-code { background: var(--success); }
.usage-fw-bar-fill.opencode { background: var(--purple); }
.usage-fw-bar-fill.hermes { background: var(--warning); }
.usage-fw-bar-fill.codex { background: #60a5fa; }
.usage-fw-bar-fill.gemini { background: #f97316; }
.usage-fw-bar-fill.copilot { background: #2dd4bf; }
/* ── Run Detail: Prompt Preview ──────────────────────────── */
.prompt-preview-section {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--purple);
border-radius: var(--radius-lg);
padding: 0.875rem 1.125rem;
margin-bottom: 1.5rem;
}
.prompt-preview-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-dim);
margin-bottom: 0.5rem;
}
.prompt-preview-text {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--code-text);
white-space: pre-wrap;
word-break: break-word;
line-height: 1.65;
margin: 0;
max-height: 180px;
overflow-y: auto;
}
/* ── meta-tile: sub-line ─────────────────────────────────── */
.meta-tile-value.has-errors { color: var(--error); }