feat(frontend): add McpClientConnectionsCard component

Author: Lasim

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import Card from '@/components/ui/card/Card.vue'
+import { Item } from '@/components/ui/item'
+
+interface ClientConnection {
+  id: string
+  name: string
+  type: string
+  connectedAt: string
+  status: 'active' | 'inactive'
+}
+
+const dummyClients: ClientConnection[] = [
+  {
+    id: '1',
+    name: 'VS Code',
+    type: 'Desktop Client',
+    connectedAt: '2 hours ago',
+    status: 'active'
+  },
+  {
+    id: '2',
+    name: 'Cursor',
+    type: 'Desktop Client',
+    connectedAt: '5 minutes ago',
+    status: 'active'
+  }
+]
+</script>
+
+<template>
+  <Card variant="gray">
+    <div class="px-6">
+      <h3 class="text-lg font-semibold mb-4">Client Connections</h3>
+      <div class="space-y-3">
+        <Item
+          v-for="client in dummyClients"
+          :key="client.id"
+          variant="filled"
+          class="cursor-pointer"
+        >
+          <div class="flex items-center justify-between w-full">
+            <div class="flex flex-col">
+              <span class="font-medium">{{ client.name }}</span>
+              <span class="text-sm text-muted-foreground">{{ client.type }}</span>
+            </div>
+            <div class="flex flex-col items-end">
+              <span class="text-xs text-muted-foreground">{{ client.connectedAt }}</span>
+              <span
+                class="text-xs font-medium"
+                :class="{
+                  'text-green-600': client.status === 'active',
+                  'text-gray-400': client.status === 'inactive'
+                }"
+              >
+                {{ client.status }}
+              </span>
+            </div>
+          </div>
+        </Item>
+      </div>
+    </div>
+  </Card>
+</template>

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

@@ -76,7 +76,7 @@ const handleRemoveInstallation = (installationId: string) => {
   </div>
 
   <!-- Installations List -->
-   <div v-else class="mt-18">
+   <div v-else>
       <McpInstallationsList
         :installations="installations"
         :show-walkthrough="showWalkthrough"

services/frontend/src/components/ui/card/Card.vue

@@ -9,7 +9,7 @@ const cardVariants = cva(
     variants: {
       variant: {
         default: 'bg-card',
-        gray: 'bg-stone-200',
+        gray: 'bg-zinc-100',
       },
     },
     defaultVariants: {

services/frontend/src/components/ui/item/index.ts

@@ -20,6 +20,7 @@ export const itemVariants = cva(
         default: "bg-transparent",
         outline: "border-border",
         muted: "bg-muted/50",
+        filled: "bg-white border-border",
       },
       size: {
         default: "p-4 gap-4 ",

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 McpClientConnectionsCard from '@/components/mcp-server/McpClientConnectionsCard.vue'
 import McpStats from '@/components/mcp-server/McpStats.vue'
 import ClientConfigurationModal from '@/components/gateway-config/ClientConfigurationModal.vue'
 import UserWalkthroughPopover from '@/components/walkthrough/UserWalkthroughPopover.vue'
@@ -450,18 +451,25 @@ onUnmounted(() => {
       </div>
 
       <!-- Main Content -->
-      <div v-else class="space-y-6">
+      <div v-else>
         <McpStats />
 
-        <McpInstallationsCard
-          :installations="installations"
-          :has-installations="hasInstallations"
-          :show-walkthrough="showUserWalkthrough"
-          @install-server="handleInstallServer"
-          @view-installation="handleViewInstallation"
-          @manage-installation="handleManageInstallation"
-          @remove-installation="handleRemoveInstallation"
-        />
+        <div class="flex gap-6 mt-18">
+          <div class="flex-[0.7]">
+            <McpInstallationsCard
+              :installations="installations"
+              :has-installations="hasInstallations"
+              :show-walkthrough="showUserWalkthrough"
+              @install-server="handleInstallServer"
+              @view-installation="handleViewInstallation"
+              @manage-installation="handleManageInstallation"
+              @remove-installation="handleRemoveInstallation"
+            />
+          </div>
+          <div class="flex-[0.3]">
+            <McpClientConnectionsCard />
+          </div>
+        </div>
       </div>
 
     </div>