feat: chart legend, fw bar height, feed fade, top tools mini bars

cmd/web-ui/static/app.js

@@ -979,6 +979,12 @@
         <div class="chart-panel">
           <div class="chart-header">
             <span class="chart-title">Event Rate</span>
+            <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>
@@ -986,6 +992,7 @@
                 <button class="window-btn" data-w="7d">7d</button>
               </div>
             </div>
+          </div>
           <div class="chart-container" id="dash-chart"></div>
         </div>
         <div class="chart-panel">
@@ -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">

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