From 1bb388db4be42c672edb537e6a4413123fa97c98 Mon Sep 17 00:00:00 2001
From: Algis Dumbris <a.dumbris@gmail.com>
Date: Mon, 19 Jan 2026 08:49:41 +0200
Subject: [PATCH] fix: use consistent server count across UI components

The top header and NavBar were using systemStore.upstreamStats which
counts raw connection status, while the Servers page uses
serversStore.serverCount which counts health.level === 'healthy'.

This inconsistency caused the top header to show different connected
server counts than the server page (e.g., 8/23 vs 14/23).

Changed TopHeader.vue and NavBar.vue to use serversStore.serverCount
as the single source of truth, ensuring consistent counts across
all UI components.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/components/NavBar.vue    | 4 +++-
 frontend/src/components/TopHeader.vue | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
index 5331060f..ba8df482 100644
--- a/frontend/src/components/NavBar.vue
+++ b/frontend/src/components/NavBar.vue
@@ -71,7 +71,7 @@
 
         <!-- Server stats -->
         <div class="flex items-center space-x-1 text-sm">
-          <span class="hidden md:inline">{{ systemStore.upstreamStats.connected_servers }}/{{ systemStore.upstreamStats.total_servers }}</span>
+          <span class="hidden md:inline">{{ serversStore.serverCount.connected }}/{{ serversStore.serverCount.total }}</span>
           <span class="text-xs opacity-60 hidden md:inline">servers</span>
         </div>
       </div>
@@ -106,6 +106,7 @@
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { useSystemStore } from '@/stores/system'
+import { useServersStore } from '@/stores/servers'
 
 // Icons (we'll use SVG icons directly for simplicity)
 const DashboardIcon = 'svg'
@@ -117,6 +118,7 @@ const SettingsIcon = 'svg'
 
 const route = useRoute()
 const systemStore = useSystemStore()
+const serversStore = useServersStore()
 
 const menuItems = [
   { name: 'Dashboard', path: '/', icon: DashboardIcon },
diff --git a/frontend/src/components/TopHeader.vue b/frontend/src/components/TopHeader.vue
index ca4eab8b..3258a1d9 100644
--- a/frontend/src/components/TopHeader.vue
+++ b/frontend/src/components/TopHeader.vue
@@ -52,9 +52,9 @@
               systemStore.isRunning ? 'bg-success animate-pulse' : 'bg-error'
             ]"
           />
-          <span class="font-bold">{{ systemStore.upstreamStats.connected_servers }}</span>
+          <span class="font-bold">{{ serversStore.serverCount.connected }}</span>
           <span class="opacity-60">/</span>
-          <span>{{ systemStore.upstreamStats.total_servers }}</span>
+          <span>{{ serversStore.serverCount.total }}</span>
           <span class="text-xs opacity-60">Servers</span>
         </div>