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

feat: meta tiles, back link button, css chevron, span-details bg fix

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
William Valentin
2026-03-14 12:11:55 -07:00
parent eb12319f19
commit 5dbfd68fb5
2 changed files with 91 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cmd/web-ui/static/app.js
+29 -11
View File
@@ -332,11 +332,23 @@
<a href="/sessions" class="back-link">&larr; Back to Sessions</a>
<div class="page-header">
<h2>Session <span style="font-family:var(--font-mono);font-size:1.1rem;color:var(--accent)">${escapeHTML(sessionID.substring(0, 16))}...</span></h2>
<div class="meta">
<span class="meta-item"><span class="meta-label">Started</span> ${escapeHTML(new Date(s.started_at).toLocaleString())}</span>
<span class="meta-item"><span class="meta-label">Framework</span> ${escapeHTML(s.framework || '-')}</span>
<span class="meta-item"><span class="meta-label">Host</span> ${escapeHTML(s.host || '-')}</span>
<span class="meta-item"><span class="meta-label">Duration</span> ${escapeHTML(duration)}</span>
<div class="meta-tiles">
<div class="meta-tile">
<div class="meta-tile-label">Started</div>
<div class="meta-tile-value">${escapeHTML(new Date(s.started_at).toLocaleString())}</div>
</div>
<div class="meta-tile">
<div class="meta-tile-label">Framework</div>
<div class="meta-tile-value">${escapeHTML(s.framework || '-')}</div>
</div>
<div class="meta-tile">
<div class="meta-tile-label">Host</div>
<div class="meta-tile-value">${escapeHTML(s.host || '-')}</div>
</div>
<div class="meta-tile">
<div class="meta-tile-label">Duration</div>
<div class="meta-tile-value">${escapeHTML(duration)}</div>
</div>
</div>
</div>
<div class="section-title">Runs <span class="count">${runs.length}</span></div>
@@ -393,9 +405,15 @@
<a href="/sessions/${escapeHTML(r.session_id)}" class="back-link">&larr; Back to Session</a>
<div class="page-header">
<h2>Run <span style="font-family:var(--font-mono);font-size:1.1rem;color:var(--accent)">${escapeHTML(runID.substring(0, 16))}...</span> ${statusIcon(r.status)}</h2>
<div class="meta">
<span class="meta-item"><span class="meta-label">Started</span> ${escapeHTML(new Date(r.started_at).toLocaleString())}</span>
<span class="meta-item"><span class="meta-label">Duration</span> ${escapeHTML(duration)}</span>
<div class="meta-tiles">
<div class="meta-tile">
<div class="meta-tile-label">Started</div>
<div class="meta-tile-value">${escapeHTML(new Date(r.started_at).toLocaleString())}</div>
</div>
<div class="meta-tile">
<div class="meta-tile-label">Duration</div>
<div class="meta-tile-value">${escapeHTML(duration)}</div>
</div>
</div>
</div>
<div class="section-title">Spans <span class="count">${spans.length}</span></div>
@@ -412,7 +430,7 @@
<tbody id="spans-body">
${spans.map((sp, i) => `
<tr class="expandable" data-index="${i}">
<td><span class="expand-icon">&#9654;</span>${escapeHTML(sp.name)}</td>
<td><span class="expand-icon"></span>${escapeHTML(sp.name)}</td>
<td>${escapeHTML(sp.kind)}</td>
<td>${statusIcon(sp.status)}</td>
<td>${escapeHTML(formatDuration(sp.duration_ms))}</td>
@@ -435,10 +453,10 @@
const icon = row.querySelector('.expand-icon');
if (detailRow.style.display === 'none') {
detailRow.style.display = 'table-row';
icon.innerHTML = '&#9660;';
icon.style.transform = 'rotate(45deg)';
} else {
detailRow.style.display = 'none';
icon.innerHTML = '&#9654;';
icon.style.transform = '';
}
});
});
cmd/web-ui/static/style.css
+62 -7
View File
@@ -172,13 +172,21 @@ main > * {
margin-bottom: 1.75rem;
color: var(--text-dim);
text-decoration: none;
font-size: 0.8rem;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.03em;
transition: color 0.15s;
letter-spacing: 0.02em;
padding: 0.35rem 0.75rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.back-link:hover { color: var(--accent); }
.back-link:hover {
color: var(--text-bright);
border-color: rgba(34, 211, 238, 0.25);
background: var(--surface-2);
}
/* ── Page header ───────────────────────────────────────────── */
.page-header {
@@ -422,12 +430,29 @@ tr.clickable:hover td:first-child {
height: 16px;
margin-right: 0.5rem;
color: var(--text-dim);
font-size: 0.6rem;
font-size: 0;
transition: transform 0.18s ease;
flex-shrink: 0;
vertical-align: middle;
}
.expand-icon::before {
content: '';
display: block;
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
margin-top: -2px;
}
tr.expandable:hover .expand-icon::before {
color: var(--accent);
}
.span-details {
background: #020508;
background: var(--bg);
padding: 1.25rem;
font-family: var(--font-mono);
font-size: 0.78rem;
@@ -807,7 +832,7 @@ tr.clickable:hover td:first-child {
.timeline-detail {
margin-top: 0.5rem;
padding: 0.75rem;
background: #020508;
background: var(--bg);
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: 0.75rem;
@@ -1264,3 +1289,33 @@ tr.clickable:hover td:first-child {
.fw-dot.claude-code { background: var(--success); }
.fw-dot.opencode { background: var(--purple); }
.fw-dot.unknown { background: var(--text-dim); }
/* ── Meta tiles ───────────────────────────────────────────── */
.meta-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.75rem;
margin-top: 1rem;
}
.meta-tile {
background: var(--surface-2);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 0.625rem 0.875rem;
}
.meta-tile-label {
font-size: 0.65rem;
font-weight: 700;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.25rem;
}
.meta-tile-value {
font-size: 0.85rem;
color: var(--text-bright);
font-family: var(--font-mono);
}