feat(frontend): add source type and label helpers for MCP installations

Author: Lasim

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

@@ -105,6 +105,29 @@ const formatDate = (dateString: string) => {
   })
 }
 
+// Helper to determine server source type
+const getServerSourceType = (installation: McpInstallation): 'github' | 'remote' | 'catalog' => {
+  if (installation.server?.source === 'github') return 'github'
+  if (installation.server?.runtime === 'http' || installation.server?.runtime === 'sse') return 'remote'
+  return 'catalog'
+}
+
+// Helper to get source label
+const getSourceLabel = (installation: McpInstallation): string => {
+  const type = getServerSourceType(installation)
+  if (type === 'github') return t('mcpCatalog.source.github')
+  if (type === 'remote') return t('mcpCatalog.source.remote')
+  return t('mcpCatalog.source.catalog')
+}
+
+// Helper to extract GitHub repo name from URL
+const getGitHubRepoName = (repositoryUrl: string | null | undefined): string | null => {
+  if (!repositoryUrl) return null
+  // Extract "owner/repo" from "https://github.com/owner/repo.git"
+  const match = repositoryUrl.match(/github\.com\/([^\/]+\/[^\/\.]+)/)
+  return match?.[1] ?? null
+}
+
 const handleViewInstallation = (installationId: string) => {
   router.push(`/mcp-server/installation/${installationId}`)
 }
@@ -246,14 +269,19 @@ onUnmounted(() => {
                 class="shrink-0 hidden sm:flex"
               />
 
-              <dl class="flex-1 grid grid-cols-2 gap-x-8 gap-y-1 text-xs/5 text-gray-500 sm:grid-cols-3">
-                <div>
-                  <dt class="font-medium text-gray-700">Satellite</dt>
-                  <dd>{{ installation.installation_type }}</dd>
+              <dl class="flex-1 grid grid-cols-2 gap-x-8 gap-y-1 text-xs/5 text-gray-500 sm:grid-cols-3 items-start">
+                <div class="flex flex-col">
+                  <dt class="font-medium text-gray-700 leading-5">{{ t('mcpCatalog.source.label') }}</dt>
+                  <dd class="leading-5">{{ getSourceLabel(installation) }}</dd>
                 </div>
-                <div>
-                  <dt class="font-medium text-gray-700">{{ t('mcpInstallations.table.columns.category') }}</dt>
-                  <dd>
+                <div class="flex flex-col">
+                  <dt class="font-medium text-gray-700 leading-5">
+                    {{ getServerSourceType(installation) === 'github' ? t('mcpCatalog.repository.label') : t('mcpInstallations.table.columns.category') }}
+                  </dt>
+                  <dd v-if="getServerSourceType(installation) === 'github'" class="leading-5">
+                    {{ getGitHubRepoName(installation.server?.repository_url) || 'N/A' }}
+                  </dd>
+                  <dd v-else class="leading-5">
                     <CategoryDisplay
                       :category-id="installation.server?.category_id"
                       :show-not-provided="true"
@@ -262,9 +290,9 @@ onUnmounted(() => {
                     />
                   </dd>
                 </div>
-                <div>
-                  <dt class="font-medium text-gray-700">{{ t('mcpInstallations.table.columns.runtime') }}</dt>
-                  <dd>{{ installation.server?.runtime }}</dd>
+                <div class="flex flex-col">
+                  <dt class="font-medium text-gray-700 leading-5">{{ t('mcpInstallations.table.columns.runtime') }}</dt>
+                  <dd class="leading-5">{{ installation.server?.runtime }}</dd>
                 </div>
               </dl>
             </div>
@@ -273,7 +301,7 @@ onUnmounted(() => {
           <div
             class="flex shrink-0 items-center gap-x-4"
           >
-            <div class="hidden sm:flex sm:flex-col sm:items-end">
+            <div class="hidden sm:flex sm:flex-col sm:items-end sm:min-w-[140px]">
               <InstallationStatusBadge
                 :status-data="installation.status ? {
                   installation_id: installation.id,

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Badge } from '@/components/ui/badge'
+import { Package, Github, Cloud } from 'lucide-vue-next'
+
+interface Props {
+  source?: 'official_registry' | 'manual' | 'github' | null
+  runtime?: string | null
+}
+
+const props = defineProps<Props>()
+const { t } = useI18n()
+
+const sourceType = computed(() => {
+  if (props.source === 'github') return 'github'
+  if (props.runtime === 'http' || props.runtime === 'sse') return 'remote'
+  return 'catalog'
+})
+
+const sourceLabel = computed(() => {
+  if (sourceType.value === 'github') return t('mcpCatalog.source.github')
+  if (sourceType.value === 'remote') return t('mcpCatalog.source.remote')
+  return t('mcpCatalog.source.catalog')
+})
+
+const badgeVariant = computed(() => {
+  if (sourceType.value === 'github') return 'default'
+  if (sourceType.value === 'remote') return 'secondary'
+  return 'outline'
+})
+</script>
+
+<template>
+  <Badge :variant="badgeVariant" class="flex items-center gap-1">
+    <Github v-if="sourceType === 'github'" class="h-3 w-3" />
+    <Cloud v-else-if="sourceType === 'remote'" class="h-3 w-3" />
+    <Package v-else class="h-3 w-3" />
+    <span>{{ sourceLabel }}</span>
+  </Badge>
+</template>

services/frontend/src/i18n/locales/en/mcp-catalog.ts

@@ -870,6 +870,17 @@ export default {
     rowsSelected: '{selected} of {total} row(s) selected.'
   },
 
+  source: {
+    catalog: 'Catalog',
+    github: 'GitHub',
+    remote: 'Remote',
+    label: 'Source'
+  },
+
+  repository: {
+    label: 'Repository'
+  },
+
   filters: {
     button: 'Filters',
     clear: 'Clear Filters',