fix(050): sidebar count badges + clickable Tools stat cards + server-link affordance

- Add Servers/Secrets count badges to sidebar WORKSPACE section for
  visual parity with the existing Tools badge. Server count is reactive
  via the status SSE; secret count fetched on mount.
- Secret badge uses total_secrets from /secrets/config (same source as
  the Secrets page) instead of /secrets/refs, which over-counts every
  config reference including ${env:...} placeholders.
- Tools summary cards (Total/Enabled/Disabled/Pending) are now clickable
  filter toggles with ring highlight, mirroring the Servers page.
- Tools table server name uses link-primary (always visible as a link)
  instead of link-hover, matching the modal's affordance.

Author: Algis Dumbris

frontend/src/components/SidebarNav.vue

@@ -211,6 +211,10 @@
               >
                 <IconServers class="w-5 h-5 shrink-0" />
                 <span v-show="!collapsed">Servers</span>
+                <span
+                  v-if="!collapsed && serverCount > 0"
+                  class="badge badge-sm badge-ghost ml-auto tabular-nums"
+                >{{ serverCount }}</span>
               </router-link>
             </li>
             <li>
@@ -237,6 +241,10 @@
               >
                 <IconSecrets class="w-5 h-5 shrink-0" />
                 <span v-show="!collapsed">Secrets</span>
+                <span
+                  v-if="!collapsed && secretCount > 0"
+                  class="badge badge-sm badge-ghost ml-auto tabular-nums"
+                >{{ secretCount }}</span>
               </router-link>
             </li>
             <!-- Sub-item: Agent Tokens nested under Secrets.
@@ -451,6 +459,7 @@ onMounted(() => {
   if (!authStore.isTeamsEdition) {
     void onboardingStore.fetchState()
     void fetchToolCount()
+    void fetchSecretCount()
   }
 })
 
@@ -562,6 +571,28 @@ async function fetchToolCount() {
   }
 }
 
+// Sidebar badge parity with Tools: show total server + secret counts so the
+// WORKSPACE section reads consistently. Server count is already reactive via
+// the status SSE; secrets need a one-shot fetch on mount.
+const serverCount = computed(() => systemStore.upstreamStats.total_servers ?? 0)
+const secretCount = ref(0)
+
+async function fetchSecretCount() {
+  try {
+    // Use the same source as the Secrets page (total_secrets from
+    // /secrets/config) so the badge matches what the user sees there.
+    // /secrets/refs is NOT equivalent — it counts every config reference
+    // including ${env:...} placeholders (TERM_SESSION_ID etc.), not stored
+    // keyring secrets.
+    const resp = await api.getConfigSecrets()
+    if (resp.success && resp.data) {
+      secretCount.value = resp.data.total_secrets ?? 0
+    }
+  } catch {
+    // Silently ignore — badge is non-critical
+  }
+}
+
 // Server edition menus (unchanged behavior)
 const teamsUserMenu = [
   { name: 'My Servers', path: '/my/servers' },

frontend/src/views/Tools.vue

@@ -20,24 +20,44 @@
 
     <!-- Summary Stat Cards -->
     <div v-if="stats" class="stats shadow bg-base-100 w-full">
-      <div class="stat" data-test="stat-total">
+      <button
+        type="button"
+        :class="['stat text-left transition-colors cursor-pointer hover:bg-base-200/60', activeStatCard === 'total' ? 'bg-base-200 ring-2 ring-inset ring-primary/40' : '']"
+        data-test="stat-total"
+        @click="selectStatCard('total')"
+      >
         <div class="stat-title">Total</div>
         <div class="stat-value text-2xl">{{ stats.total }}</div>
-      </div>
-      <div class="stat" data-test="stat-enabled">
+      </button>
+      <button
+        type="button"
+        :class="['stat text-left transition-colors cursor-pointer hover:bg-base-200/60', activeStatCard === 'enabled' ? 'bg-base-200 ring-2 ring-inset ring-primary/40' : '']"
+        data-test="stat-enabled"
+        @click="selectStatCard('enabled')"
+      >
         <div class="stat-title">Enabled</div>
         <div class="stat-value text-2xl text-success">{{ stats.enabled }}</div>
-      </div>
-      <div class="stat" data-test="stat-disabled">
+      </button>
+      <button
+        type="button"
+        :class="['stat text-left transition-colors cursor-pointer hover:bg-base-200/60', activeStatCard === 'disabled' ? 'bg-base-200 ring-2 ring-inset ring-primary/40' : '']"
+        data-test="stat-disabled"
+        @click="selectStatCard('disabled')"
+      >
         <div class="stat-title">Disabled</div>
         <div class="stat-value text-2xl text-warning">{{ stats.disabled }}</div>
-      </div>
-      <div class="stat" data-test="stat-pending">
+      </button>
+      <button
+        type="button"
+        :class="['stat text-left transition-colors cursor-pointer hover:bg-base-200/60', activeStatCard === 'pending' ? 'bg-base-200 ring-2 ring-inset ring-primary/40' : '']"
+        data-test="stat-pending"
+        @click="selectStatCard('pending')"
+      >
         <div class="stat-title">Pending Approval</div>
         <div class="stat-value text-2xl" :class="stats.pending_approval > 0 ? 'text-error' : ''">
           {{ stats.pending_approval }}
         </div>
-      </div>
+      </button>
     </div>
 
     <!-- Partial-error banner -->
@@ -280,7 +300,7 @@
                 <td>
                   <router-link
                     :to="`/servers/${tool.server_name}`"
-                    class="link link-hover text-sm font-medium"
+                    class="link link-primary text-sm font-medium"
                     @click.stop
                   >
                     {{ tool.server_name }}
@@ -557,6 +577,34 @@ const hasActiveFilters = computed(() =>
   !!searchQuery.value || !!filterServer.value || !!filterStatus.value || !!filterRisk.value || !!filterApproval.value
 )
 
+// Clickable stat cards (parity with Servers page): each card drives the
+// status/approval filter and toggles off when its active card is clicked again.
+type StatCard = 'total' | 'enabled' | 'disabled' | 'pending'
+
+const activeStatCard = computed<StatCard>(() => {
+  if (filterApproval.value === 'pending') return 'pending'
+  if (filterStatus.value === 'enabled') return 'enabled'
+  if (filterStatus.value === 'disabled') return 'disabled'
+  if (!filterStatus.value && !filterApproval.value) return 'total'
+  return 'total'
+})
+
+function selectStatCard(card: StatCard) {
+  // Toggle: re-clicking the active card resets to the unfiltered "total" view.
+  if (card === 'total' || activeStatCard.value === card) {
+    filterStatus.value = ''
+    filterApproval.value = ''
+    return
+  }
+  if (card === 'pending') {
+    filterStatus.value = ''
+    filterApproval.value = 'pending'
+  } else {
+    filterApproval.value = ''
+    filterStatus.value = card // 'enabled' | 'disabled'
+  }
+}
+
 // ---- Computed: risk derivation ----
 function getRisk(tool: GlobalTool): 'read' | 'write' | 'destructive' {
   if (tool.annotations?.destructiveHint) return 'destructive'