feat(frontend): integrate team selection for client activity fetching

Author: Lasim

services/frontend/src/components/mcp-server/McpClientConnectionsCard.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useEventBus } from '@/composables/useEventBus'
 import Card from '@/components/ui/card/Card.vue'
 import { Item } from '@/components/ui/item'
 import { McpClientActivityService } from '@/services/mcpClientActivityService'
 import type { McpClientActivity } from '@/services/mcpClientActivityService'
 
 const { t } = useI18n()
+const eventBus = useEventBus()
 
 const activities = ref<McpClientActivity[]>([])
 const isLoading = ref(false)
@@ -33,11 +35,20 @@ function getRelativeTime(isoString: string): string {
 }
 
 async function fetchClientActivity() {
+  // Get teamId from storage (selected team)
+  const teamId = eventBus.getState<string>('selected_team_id')
+  
+  if (!teamId) {
+    error.value = 'No team selected'
+    console.warn('No team selected - please select a team first')
+    return
+  }
+  
   try {
     isLoading.value = true
     error.value = null
     
-    const response = await McpClientActivityService.getMyClientActivity({
+    const response = await McpClientActivityService.getMyClientActivity(teamId, {
       limit: 20,
       active_within_minutes: 30
     })
@@ -67,6 +78,11 @@ function stopPolling() {
 onMounted(async () => {
   await fetchClientActivity()
   startPolling()
+  
+  // Listen for team selection changes and refresh activity
+  eventBus.on('team-selected', async () => {
+    await fetchClientActivity()
+  })
 })
 
 onUnmounted(() => {

services/frontend/src/services/mcpClientActivityService.ts

@@ -37,20 +37,35 @@ export class McpClientActivityService {
   private static baseUrl = getEnv('VITE_DEPLOYSTACK_BACKEND_URL')
 
   /**
-   * Get current user's active MCP client connections
+   * Get current user's active MCP client connections for a specific team
+   * 
+   * @param teamId - Team ID to filter activity by (must be a string)
+   * @param params - Optional query parameters
+   * @returns MCP client activity response
    */
   static async getMyClientActivity(
+    teamId: string,
     params: GetClientActivityParams = {}
   ): Promise<McpClientActivityResponse> {
+    // Runtime validation to catch common mistake of passing team object instead of team ID
+    if (typeof teamId !== 'string' || !teamId) {
+      throw new Error(
+        'teamId must be a non-empty string. Did you pass the team object instead of team.id?'
+      )
+    }
+
     const queryParams = new URLSearchParams()
 
+    // Required parameter
+    queryParams.append('team_id', teamId)
+    
     if (params.limit) queryParams.append('limit', params.limit.toString())
     if (params.offset) queryParams.append('offset', params.offset.toString())
     if (params.active_within_minutes) {
       queryParams.append('active_within_minutes', params.active_within_minutes.toString())
     }
 
-    const url = `${this.baseUrl}/api/users/me/mcp/client-activity${queryParams.toString() ? `?${queryParams.toString()}` : ''}`
+    const url = `${this.baseUrl}/api/users/me/mcp/client-activity?${queryParams.toString()}`
 
     const response = await fetch(url, {
       method: 'GET',