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