From 5dbfd68fb59ecb9701a890a35ec9a28faa2e1a8a Mon Sep 17 00:00:00 2001
From: William Valentin <william.valentin.info@gmail.com>
Date: Sat, 14 Mar 2026 12:11:55 -0700
Subject: [PATCH] feat: meta tiles, back link button, css chevron, span-details
 bg fix

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 cmd/web-ui/static/app.js    | 40 +++++++++++++++------
 cmd/web-ui/static/style.css | 69 +++++++++++++++++++++++++++++++++----
 2 files changed, 91 insertions(+), 18 deletions(-)

diff --git a/cmd/web-ui/static/app.js b/cmd/web-ui/static/app.js
index 6106a3e..0f1ab6b 100644
--- a/cmd/web-ui/static/app.js
+++ b/cmd/web-ui/static/app.js
@@ -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 = '';
         }
       });
     });
diff --git a/cmd/web-ui/static/style.css b/cmd/web-ui/static/style.css
index 51558b2..5d6f0a4 100644
--- a/cmd/web-ui/static/style.css
+++ b/cmd/web-ui/static/style.css
@@ -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);
+}