From c5ebbe5a76eadac8a148275e79a9925d08bb3f87 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 18 Apr 2026 15:08:11 -0400
Subject: [PATCH] feat(ui): add legend and per-bar tooltip to Platform Health

The dual meaning of the progress bar (red = failing share, green = all
healthy) was not self-explanatory. Added a small legend beside the
section header and a hover tooltip on each bar that states "N of M
<platform> sources failing".

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/views/Dashboard.vue | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index 8f8d1ed..7813088 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -270,7 +270,16 @@
           <v-card-text>
             <!-- Platform Health bars -->
             <div class="mb-4">
-              <div class="text-caption text-medium-emphasis mb-2">Platform Health</div>
+              <div class="d-flex align-center mb-2">
+                <div class="text-caption text-medium-emphasis">Platform Health</div>
+                <v-spacer />
+                <div class="d-flex align-center text-caption text-medium-emphasis">
+                  <span class="legend-swatch legend-swatch--ok mr-1" />
+                  <span class="mr-3">healthy</span>
+                  <span class="legend-swatch legend-swatch--bad mr-1" />
+                  <span>failing</span>
+                </div>
+              </div>
               <div
                 v-for="row in platformHealth"
                 :key="row.platform"
@@ -286,7 +295,11 @@
                   height="12"
                   rounded
                   class="mx-3 flex-grow-1"
-                />
+                >
+                  <v-tooltip activator="parent" location="top">
+                    {{ row.failing }} of {{ row.total }} {{ row.platform }} source{{ row.total !== 1 ? 's' : '' }} failing
+                  </v-tooltip>
+                </v-progress-linear>
                 <div class="text-caption text-medium-emphasis count-label">
                   {{ row.failing }}/{{ row.total }}
                 </div>
@@ -717,4 +730,13 @@ async function retrySource(source) {
   min-width: 50px;
   text-align: right;
 }
+
+.legend-swatch {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+}
+.legend-swatch--ok  { background-color: rgb(var(--v-theme-success)); }
+.legend-swatch--bad { background-color: rgb(var(--v-theme-error)); }
 </style>