feat(frontend): add team usage indicator component and integration

Author: Lasim

services/frontend/src/components/teams/TeamUsageIndicator.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { TeamService, type TeamUsageData } from '@/services/teamService'
+
+const { t } = useI18n()
+
+interface Props {
+  teamId: string
+}
+
+const props = defineProps<Props>()
+
+// State
+const usageData = ref<TeamUsageData | null>(null)
+const isLoading = ref(true)
+
+// Load usage data
+const loadUsageData = async () => {
+  try {
+    isLoading.value = true
+    usageData.value = await TeamService.getTeamUsage(props.teamId)
+  } catch (err) {
+    // Fail silently - hide the indicator on error
+    usageData.value = null
+    console.error('Error loading team usage indicator:', err)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Watch for team changes and reload data
+watch(() => props.teamId, () => {
+  loadUsageData()
+}, { immediate: false })
+
+onMounted(() => {
+  loadUsageData()
+})
+</script>
+
+<template>
+  <div
+    v-if="usageData && !isLoading"
+    class="flex items-center gap-2 text-sm text-muted-foreground"
+  >
+    <span>
+      {{ t('teams.usageIndicator.totalMcpServers') }}
+      <span class="font-medium text-foreground">
+        {{ usageData.total_installed_mcp_servers }}/{{ usageData.limits.mcp_server_limit }}
+      </span>
+    </span>
+    <span class="text-gray-300">|</span>
+    <span>
+      {{ t('teams.usageIndicator.stdioMcpServers') }}
+      <span class="font-medium text-foreground">
+        {{ usageData.non_http_mcp_servers }}/{{ usageData.limits.non_http_mcp_limit }}
+      </span>
+    </span>
+  </div>
+</template>

services/frontend/src/i18n/locales/en/teams.ts

@@ -286,6 +286,10 @@ export default {
         backToTeams: 'Back to Teams',
         loading: 'Loading...'
       }
+    },
+    usageIndicator: {
+      totalMcpServers: 'Total MCP Servers',
+      stdioMcpServers: 'stdio MCP Servers'
     }
   }
 }

services/frontend/src/views/dashboard/index.vue

@@ -14,6 +14,7 @@ import McpClientConnectionsCard from '@/components/mcp-server/McpClientConnectio
 import McpStats from '@/components/mcp-server/McpStats.vue'
 import ClientConfigurationModal from '@/components/gateway-config/ClientConfigurationModal.vue'
 import UserWalkthroughPopover from '@/components/walkthrough/UserWalkthroughPopover.vue'
+import TeamUsageIndicator from '@/components/teams/TeamUsageIndicator.vue'
 import type { McpInstallation } from '@/types/mcp-installations'
 import { McpInstallationService } from '@/services/mcpInstallationService'
 import { TeamService, type Team } from '@/services/teamService'
@@ -416,6 +417,7 @@ onUnmounted(() => {
       <!-- Header -->
       <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div class="flex-1">
+          <TeamUsageIndicator v-if="selectedTeam" :team-id="selectedTeam.id" />
         </div>
         <div v-if="selectedTeam" class="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
           <Button

services/frontend/src/views/mcp-server/index.vue

@@ -13,6 +13,7 @@ import McpInstallationsEmptyState from '@/components/mcp-server/McpInstallations
 import type { McpInstallation } from '@/types/mcp-installations'
 import { McpInstallationService } from '@/services/mcpInstallationService'
 import { TeamService, type Team } from '@/services/teamService'
+import TeamUsageIndicator from '@/components/teams/TeamUsageIndicator.vue'
 
 const { t } = useI18n()
 const router = useRouter()
@@ -254,6 +255,7 @@ onUnmounted(() => {
       <!-- Header -->
       <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div class="flex-1">
+          <TeamUsageIndicator v-if="selectedTeam" :team-id="selectedTeam.id" />
         </div>
         <div v-if="selectedTeam" class="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
           <Button