From 1c6255d688e0bd62f47a583c938dfb3d95785238 Mon Sep 17 00:00:00 2001
From: William Valentin <william.valentin.info@gmail.com>
Date: Sat, 14 Mar 2026 12:02:49 -0700
Subject: [PATCH] feat: chart legend, fw bar height, feed fade, top tools mini
 bars

---
 cmd/web-ui/static/app.js    | 21 ++++++++++++-------
 cmd/web-ui/static/style.css | 42 ++++++++++++++++++++++++++++++++++---
 2 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/cmd/web-ui/static/app.js b/cmd/web-ui/static/app.js
index 44beb07..d0886b4 100644
--- a/cmd/web-ui/static/app.js
+++ b/cmd/web-ui/static/app.js
@@ -979,11 +979,18 @@
         <div class="chart-panel">
           <div class="chart-header">
             <span class="chart-title">Event Rate</span>
-            <div class="window-selector">
-              <button class="window-btn active" data-w="1h">1h</button>
-              <button class="window-btn" data-w="6h">6h</button>
-              <button class="window-btn" data-w="24h">24h</button>
-              <button class="window-btn" data-w="7d">7d</button>
+            <div style="display:flex;align-items:center;gap:1.25rem">
+              <div class="chart-legend">
+                <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#34d399"></span>runs</span>
+                <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#22d3ee"></span>tools</span>
+                <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#f87171"></span>errors</span>
+              </div>
+              <div class="window-selector">
+                <button class="window-btn active" data-w="1h">1h</button>
+                <button class="window-btn" data-w="6h">6h</button>
+                <button class="window-btn" data-w="24h">24h</button>
+                <button class="window-btn" data-w="7d">7d</button>
+              </div>
             </div>
           </div>
           <div class="chart-container" id="dash-chart"></div>
@@ -1386,9 +1393,9 @@
       return;
     }
 
-    const maxCount = topTools[0][1];
+    const maxCount = topTools[0]?.[1] || 1;
     list.innerHTML = topTools.map(([name, count]) => {
-      const pct = maxCount > 0 ? (count / maxCount * 100) : 0;
+      const pct = (count / maxCount * 100).toFixed(1);
       return `
         <li>
           <div class="stat-list-header">
diff --git a/cmd/web-ui/static/style.css b/cmd/web-ui/static/style.css
index 4dada97..f1eaa61 100644
--- a/cmd/web-ui/static/style.css
+++ b/cmd/web-ui/static/style.css
@@ -1152,15 +1152,15 @@ tr.clickable:hover td:first-child {
 }
 
 .fw-bar-track {
-  height: 6px;
+  height: 8px;
   background: var(--surface-2);
-  border-radius: 3px;
+  border-radius: 4px;
   overflow: hidden;
 }
 
 .fw-bar-fill {
   height: 100%;
-  border-radius: 3px;
+  border-radius: 4px;
   transition: width 0.4s ease;
 }
 
@@ -1188,6 +1188,19 @@ tr.clickable:hover td:first-child {
   padding: 1.25rem;
   max-height: 480px;
   overflow-y: auto;
+  position: relative;
+}
+
+.feed-panel::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 48px;
+  background: linear-gradient(to bottom, transparent, var(--surface));
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  pointer-events: none;
 }
 
 .feed-panel .timeline-event {
@@ -1206,3 +1219,26 @@ tr.clickable:hover td:first-child {
 }
 
 .uplot .u-legend { display: none; }
+
+/* ── Chart legend ─────────────────────────────────────────── */
+.chart-legend {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.chart-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.7rem;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+}
+
+.chart-legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}