feat(frontend): show quarantine tool count on servers list page

Add QuarantineStats interface and quarantine field to Server type so
the ServerCard displays how many tools are pending approval without
requiring users to click into each server's detail page. The badge
appears in the Tools stat area with a warning icon when pending_count
or changed_count is non-zero. Also updates v-memo keys in Servers.vue
so cards re-render when quarantine stats change.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: claude

frontend/src/components/ServerCard.vue

@@ -29,7 +29,13 @@
         <div class="stat bg-base-200 rounded-lg p-3">
           <div class="stat-title text-xs">Tools</div>
           <div class="stat-value text-lg">{{ server.tool_count }}</div>
-          <div v-if="server.tool_list_token_size" class="stat-desc text-xs">
+          <div v-if="quarantineToolCount > 0" class="stat-desc text-xs text-warning flex items-center gap-1">
+            <svg class="w-3 h-3 inline-block flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+            {{ quarantineToolCount }} pending approval
+          </div>
+          <div v-else-if="server.tool_list_token_size" class="stat-desc text-xs">
             {{ server.tool_list_token_size.toLocaleString() }} tokens
           </div>
         </div>
@@ -269,6 +275,13 @@ const healthAction = computed(() => {
   return props.server.health?.action || ''
 })
 
+// Tool-level quarantine count (pending + changed)
+const quarantineToolCount = computed(() => {
+  const q = props.server.quarantine
+  if (!q) return 0
+  return (q.pending_count ?? 0) + (q.changed_count ?? 0)
+})
+
 // Determine if error message should be shown (FR-018, FR-019)
 // Suppress verbose last_error when health.action already conveys the issue
 const shouldShowError = computed(() => {
@@ -484,4 +497,4 @@ async function confirmDelete() {
     loading.value = false
   }
 }
-</script>
+</script>

frontend/src/types/api.ts

@@ -20,6 +20,12 @@ export {
 // Import HealthStatus for use in this file
 import type { HealthStatus } from './contracts'
 
+// Quarantine stats for tool-level quarantine (Spec 032)
+export interface QuarantineStats {
+  pending_count: number
+  changed_count: number
+}
+
 // Server types
 export interface Server {
   name: string
@@ -43,6 +49,7 @@ export interface Server {
   token_expires_at?: string
   user_logged_out?: boolean // True if user explicitly logged out (prevents auto-reconnection)
   health?: HealthStatus // Unified health status calculated by the backend
+  quarantine?: QuarantineStats // Tool-level quarantine stats (Spec 032)
 }
 
 // Tool Annotation types

frontend/src/views/Servers.vue

@@ -139,7 +139,9 @@
           server.quarantined,
           server.tool_count,
           server.last_error,
-          server.authenticated
+          server.authenticated,
+          server.quarantine?.pending_count,
+          server.quarantine?.changed_count
         ]"
       />
     </TransitionGroup>
@@ -273,4 +275,4 @@ const serversHints = computed<Hint[]>(() => {
     }
   ]
 })
-</script>
+</script>