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

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
+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 = '';
}
});
});