feat(frontend): add GitHub avatar support for MCP servers

Author: Lasim

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

@@ -99,6 +99,11 @@ const getServerDescription = (server: McpServer) => {
   return server.description || 'No description available'
 }
 
+const getGitHubAvatarUrl = (server: McpServer) => {
+  if (!server.github_account_id) return null
+  return `https://avatars.githubusercontent.com/u/${server.github_account_id}?v=4&s=64`
+}
+
 // Lifecycle
 onMounted(() => {
   fetchFeaturedServers()
@@ -151,10 +156,17 @@ onMounted(() => {
           <dl class="flex flex-wrap">
             <div class="flex-auto pt-6 pl-6">
               <dt 
-                class="text-sm/6 font-semibold text-gray-900 cursor-pointer hover:text-teal-700 transition-colors"
+                class="text-sm/6 font-semibold text-gray-900 cursor-pointer hover:text-teal-700 transition-colors flex items-center gap-2"
                 @click="handleServerClick(server)"
                 :title="`View ${server.name} details`"
               >
+                <img 
+                  v-if="getGitHubAvatarUrl(server)"
+                  :src="getGitHubAvatarUrl(server)!"
+                  :alt="`${server.name} GitHub avatar`"
+                  class="h-8 w-8 rounded-md flex-shrink-0"
+                  @error="($event.target as HTMLImageElement).style.display = 'none'"
+                />
                 {{ server.name }}
               </dt>
             </div>

services/frontend/src/views/admin/mcp-server-catalog/types.ts

@@ -7,6 +7,7 @@ export interface McpServer {
   description: string
   long_description?: string
   github_url?: string
+  github_account_id?: string
   git_branch?: string
   homepage_url?: string
   language: string
@@ -172,6 +173,7 @@ export interface CreateMcpServerRequest {
   description: string
   long_description?: string
   github_url?: string
+  github_account_id?: string
   git_branch?: string
   homepage_url?: string
   language?: string
@@ -211,6 +213,7 @@ export interface UpdateMcpServerRequest {
   description?: string
   long_description?: string
   github_url?: string
+  github_account_id?: string
   git_branch?: string
   homepage_url?: string
   language?: string

services/frontend/src/views/admin/mcp-server-catalog/view/[id].vue

@@ -251,6 +251,11 @@ const handleEditServer = () => {
 const goBack = () => {
   router.push('/admin/mcp-server-catalog')
 }
+
+const getGitHubAvatarUrl = (server: McpServer) => {
+  if (!server.github_account_id) return null
+  return `https://avatars.githubusercontent.com/u/${server.github_account_id}?v=4&s=128`
+}
 </script>
 
 <template>
@@ -301,9 +306,18 @@ const goBack = () => {
       <!-- Server Details -->
       <ContentWrapper v-if="server">
         <!-- Basic Information Section -->
-        <div class="px-4 sm:px-0">
-          <h3 class="text-base/7 font-semibold text-gray-900">{{ t('mcpCatalog.edit.serverInformation') }}</h3>
-          <p class="mt-1 max-w-2xl text-sm/6 text-gray-500">{{ t('mcpCatalog.edit.serverDetails') }}</p>
+        <div class="px-4 sm:px-0 flex items-center gap-4">
+          <img 
+            v-if="getGitHubAvatarUrl(server)"
+            :src="getGitHubAvatarUrl(server)!"
+            :alt="`${server.name} GitHub avatar`"
+            class="h-12 w-12 rounded-lg flex-shrink-0"
+            @error="($event.target as HTMLImageElement).style.display = 'none'"
+          />
+          <div>
+            <h3 class="text-base/7 font-semibold text-gray-900">{{ t('mcpCatalog.edit.serverInformation') }}</h3>
+            <p class="mt-1 max-w-2xl text-sm/6 text-gray-500">{{ t('mcpCatalog.edit.serverDetails') }}</p>
+          </div>
         </div>
         <div class="mt-6 border-t border-gray-100">
           <dl class="divide-y divide-gray-100">

services/frontend/src/views/mcp-server/view/[id].vue

@@ -194,6 +194,11 @@ const installServer = () => {
     }
   })
 }
+
+const getGitHubAvatarUrl = (server: McpServer) => {
+  if (!server.github_account_id) return null
+  return `https://avatars.githubusercontent.com/u/${server.github_account_id}?v=4&s=128`
+}
 </script>
 
 <template>
@@ -231,9 +236,18 @@ const installServer = () => {
 
       <!-- Server Details -->
       <ContentWrapper v-if="server">
-        <div class="px-4 sm:px-0">
-          <h3 class="text-base/7 font-semibold text-gray-900">{{ t('mcpInstallations.view.serverInformation') }}</h3>
-          <p class="mt-1 max-w-2xl text-sm/6 text-gray-500">{{ t('mcpInstallations.view.serverDetails') }}</p>
+        <div class="px-4 sm:px-0 flex items-center gap-4">
+          <img 
+            v-if="getGitHubAvatarUrl(server)"
+            :src="getGitHubAvatarUrl(server)!"
+            :alt="`${server.name} GitHub avatar`"
+            class="h-12 w-12 rounded-lg flex-shrink-0"
+            @error="($event.target as HTMLImageElement).style.display = 'none'"
+          />
+          <div>
+            <h3 class="text-base/7 font-semibold text-gray-900">{{ t('mcpInstallations.view.serverInformation') }}</h3>
+            <p class="mt-1 max-w-2xl text-sm/6 text-gray-500">{{ t('mcpInstallations.view.serverDetails') }}</p>
+          </div>
         </div>
         <div class="mt-6 border-t border-gray-100">
           <dl class="divide-y divide-gray-100">