feat(frontend): enhance MCP server installation views and add stats component

Author: Lasim

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

@@ -76,12 +76,14 @@ const handleRemoveInstallation = (installationId: string) => {
   </div>
 
   <!-- Installations List -->
-  <McpInstallationsList
-    v-else
-    :installations="installations"
-    :show-walkthrough="showWalkthrough"
-    @view-installation="handleViewInstallation"
-    @manage-installation="handleManageInstallation"
-    @remove-installation="handleRemoveInstallation"
-  />
+   <div v-else class="mt-18">
+      <McpInstallationsList
+        :installations="installations"
+        :show-walkthrough="showWalkthrough"
+        @view-installation="handleViewInstallation"
+        @manage-installation="handleManageInstallation"
+        @remove-installation="handleRemoveInstallation"
+      />
+   </div>
+
 </template>

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

@@ -209,8 +209,8 @@ onUnmounted(() => {
     class="fixed inset-0 bg-black/40 backdrop-blur-[2px] z-[9998]"
   />
 
-  <div class="min-h-screen bg-gray-50">
-    <div class="mx-auto max-w-4xl space-y-8 py-16">
+  <div class="min-h-screen">
+    <div>
       <!-- Installations List -->
       <div v-if="sortedInstallations.length > 0" class="relative">
         <ul

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { LineChart } from '@/components/ui/chart'
+
+const isLoading = ref(true)
+const requestData = ref<number[]>([])
+const timeLabels = ref<string[]>([])
+
+const totalRequests = computed(() => 
+  requestData.value.reduce((sum, val) => sum + val, 0)
+)
+
+const averageRequests = computed(() => 
+  requestData.value.length > 0 
+    ? Math.round(totalRequests.value / requestData.value.length) 
+    : 0
+)
+
+const peakRequests = computed(() => 
+  requestData.value.length > 0 
+    ? Math.max(...requestData.value) 
+    : 0
+)
+
+const generateDummyData = () => {
+  const now = new Date()
+  const data: number[] = []
+  const labels: string[] = []
+
+  for (let i = 11; i >= 0; i--) {
+    const time = new Date(now.getTime() - i * 5 * 60 * 1000)
+    const hour = time.getHours().toString().padStart(2, '0')
+    const minute = time.getMinutes().toString().padStart(2, '0')
+    labels.push(`${hour}:${minute}`)
+    
+    const baseValue = 20 + Math.random() * 30
+    const variation = Math.sin(i / 2) * 15
+    data.push(Math.max(0, Math.round(baseValue + variation)))
+  }
+
+  return { data, labels }
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    const { data, labels } = generateDummyData()
+    requestData.value = data
+    timeLabels.value = labels
+    isLoading.value = false
+  }, 500)
+})
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div>
+      <h3 class="text-lg font-semibold">MCP Server Usage</h3>
+    </div>
+
+    <div class="grid grid-cols-1 gap-4 lg:grid-cols-[75%_1fr]">
+      <LineChart
+        :data="requestData"
+        :labels="timeLabels"
+        name="MCP Requests"
+        size="sm"
+        :loading="isLoading"
+        color="#0f766e"
+        area-color="rgba(15, 118, 110, 0.3)"
+      />
+
+      <div class="flex flex-col justify-between h-[200px]">
+        <div class="space-y-1">
+          <p class="text-sm text-muted-foreground">Total Requests</p>
+          <p class="text-xl font-semibold">{{ totalRequests }}</p>
+        </div>
+        <div class="space-y-1">
+          <p class="text-sm text-muted-foreground">Average per Interval</p>
+          <p class="text-xl font-semibold">{{ averageRequests }}</p>
+        </div>
+        <div class="space-y-1">
+          <p class="text-sm text-muted-foreground">Peak Requests</p>
+          <p class="text-xl font-semibold">{{ peakRequests }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -8,6 +8,7 @@ import { Plus } from 'lucide-vue-next'
 import { toast } from 'vue-sonner'
 import { useEventBus } from '@/composables/useEventBus'
 import McpInstallationsCard from '@/components/mcp-server/McpInstallationsCard.vue'
+import McpStats from '@/components/mcp-server/McpStats.vue'
 import ClientConfigurationModal from '@/components/gateway-config/ClientConfigurationModal.vue'
 import UserWalkthroughPopover from '@/components/walkthrough/UserWalkthroughPopover.vue'
 import type { McpInstallation } from '@/types/mcp-installations'
@@ -99,24 +100,24 @@ const checkWalkthroughSetting = async (): Promise<boolean> => {
   try {
     // Step 1: Check if walkthrough is globally enabled
     const globalWalkthroughEnabled = await GlobalSettingsService.shouldShowUserWalkthrough()
-    
+
     if (!globalWalkthroughEnabled) {
       return false
     }
 
     // Step 2: Check user's personal walkthrough completion status via API
     const userPreferences = await UserPreferencesService.getUserPreferences()
     const isWalkthroughCompleted = userPreferences.walkthrough_completed || false
-    
+
     if (isWalkthroughCompleted) {
       // Also sync to local storage for consistency
       eventBus.setState('walkthrough_completed', true)
       return false
     }
-    
+
     // Step 3: Return true if walkthrough should be shown
     return true
-    
+
   } catch (error) {
     console.error('Error checking walkthrough setting:', error)
     return false
@@ -132,10 +133,10 @@ const fetchInstallations = async (): Promise<void> => {
     error.value = null
 
     installations.value = await McpInstallationService.getTeamInstallations(selectedTeam.value.id)
-    
+
     // UPDATED: Check and show walkthrough after installations are loaded
     await checkAndShowWalkthrough()
-    
+
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'An unknown error occurred'
     installations.value = []
@@ -155,15 +156,15 @@ const checkAndShowWalkthrough = async (): Promise<void> => {
 
     // Check if walkthrough should be shown
     const shouldShowWalkthrough = await checkWalkthroughSetting()
-    
+
     if (!shouldShowWalkthrough) {
       showUserWalkthrough.value = false
       return
     }
 
     // Wait for DOM to update with the installations list
     await nextTick()
-    
+
     // Add a small delay to ensure the list is fully rendered
     setTimeout(() => {
       // Verify the target element exists before showing walkthrough
@@ -177,7 +178,7 @@ const checkAndShowWalkthrough = async (): Promise<void> => {
         showUserWalkthrough.value = false
       }
     }, 100)
-    
+
   } catch (error) {
     console.error('Error checking and showing walkthrough:', error)
     showUserWalkthrough.value = false
@@ -274,37 +275,37 @@ const handleWalkthroughFinish = async () => {
   try {
     // Step 1: Use generic preference endpoint (avoids Content-Type header issue)
     await UserPreferencesService.setUserPreference('walkthrough_completed', true)
-    
+
     // Step 2: Update local storage for consistency
     eventBus.setState('walkthrough_completed', true)
-    
+
     // Step 3: Hide all walkthrough UI elements
     showUserWalkthrough.value = false
     showWalkthroughStep2.value = false
     showStep2ButtonHighZIndex.value = false
     walkthroughStep.value = 1
-    
+
     // Step 4: Emit completion event for any listening components
     eventBus.emit('walkthrough-completed')
-    
+
     // Optional: Show success toast
     toast.success('Welcome tour completed!')
-    
+
   } catch (error) {
     console.error('Error updating walkthrough completion status:', error)
-    
+
     // Still update local storage as fallback
     eventBus.setState('walkthrough_completed', true)
-    
+
     // Hide walkthrough UI
     showUserWalkthrough.value = false
     showWalkthroughStep2.value = false
     showStep2ButtonHighZIndex.value = false
     walkthroughStep.value = 1
-    
+
     // Emit completion event
     eventBus.emit('walkthrough-completed')
-    
+
     // Show error toast
     toast.error('Walkthrough completed, but failed to save preference')
   }
@@ -408,7 +409,6 @@ onUnmounted(() => {
       <!-- Header -->
       <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div class="flex-1">
-          <p class="text-muted-foreground">{{ t('mcpInstallations.description') }}</p>
         </div>
         <div v-if="selectedTeam" class="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
           <Button
@@ -450,7 +450,9 @@ onUnmounted(() => {
       </div>
 
       <!-- Main Content -->
-      <div v-else>
+      <div v-else class="space-y-6">
+        <McpStats />
+
         <McpInstallationsCard
           :installations="installations"
           :has-installations="hasInstallations"