feat(frontend): add install action to MCP server catalog and details

feat(satellite): enhance header logging for MCP server configuration

Author: Lasim

services/backend/src/routes/satellites/config.ts

@@ -347,10 +347,10 @@ export default async function satelliteConfigRoute(server: FastifyInstance) {
 
       // Fetch MCP server installations for this satellite
       const mcpServerConfigs: Record<string, McpServerConfig> = {};
-      
+
       // Get ALL MCP server installations with server details (adapted from gateway logic)
       // Global satellites get all teams, team satellites get only their team
-      const whereClause = satelliteData.satellite_type === 'global' 
+      const whereClause = satelliteData.satellite_type === 'global'
         ? eq(mcpServers.status, 'active')
         : and(
             eq(mcpServers.status, 'active'),
@@ -371,7 +371,15 @@ export default async function satelliteConfigRoute(server: FastifyInstance) {
 
       // Process each installation using proven gateway logic
       for (const { installation, server, team_slug, created_by_user_id } of installations) {
-        if (!server || !team_slug) continue;
+        if (!server || !team_slug) {
+          request.log.warn({
+            operation: 'config_installation_skipped_missing_data',
+            installation_id: installation.id,
+            has_server: !!server,
+            has_team_slug: !!team_slug
+          }, 'Skipping installation - missing server or team_slug');
+          continue;
+        }
 
         try {
           // Create unique process identifier: {server_slug}-{team_slug}-{installation_id}
@@ -391,8 +399,11 @@ export default async function satelliteConfigRoute(server: FastifyInstance) {
 
             if (!packages || packages.length === 0) {
               request.log.warn({
+                operation: 'config_installation_skipped_no_packages',
+                installation_id: installation.id,
                 serverId: server.id,
-                serverName: server.name
+                serverName: server.name,
+                transport_type: server.transport_type
               }, 'No packages configuration found for stdio transport');
               continue;
             }
@@ -538,6 +549,8 @@ export default async function satelliteConfigRoute(server: FastifyInstance) {
 
             if (!remotes || remotes.length === 0) {
               request.log.warn({
+                operation: 'config_installation_skipped_no_remotes',
+                installation_id: installation.id,
                 serverId: server.id,
                 serverName: server.name,
                 transportType: server.transport_type
@@ -548,6 +561,8 @@ export default async function satelliteConfigRoute(server: FastifyInstance) {
             const remoteConfig = remotes[0];
             if (!remoteConfig || !remoteConfig.url) {
               request.log.warn({
+                operation: 'config_installation_skipped_no_url',
+                installation_id: installation.id,
                 serverId: server.id,
                 serverName: server.name,
                 hasRemoteConfig: !!remoteConfig

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

@@ -225,14 +225,13 @@ onUnmounted(() => {
           v-for="(installation, index) in sortedInstallations"
           :key="installation.id"
           :id="index === sortedInstallations.length - 1 ? 'last-server-item' : undefined"
-          class="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-gray-50 sm:px-6"
+          class="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-gray-50 sm:px-6 cursor-pointer"
+          @click="handleViewInstallation(installation.id)"
         >
           <div class="flex min-w-0 gap-x-4 flex-col flex-1">
             <!-- MCP Server Name -->
             <p class="text-sm/6 font-semibold text-gray-900 mb-2">
-              <a @click="handleViewInstallation(installation.id)" class="cursor-pointer hover:text-blue-600 transition-colors">
-                {{ installation.installation_name }}
-              </a>
+              {{ installation.installation_name }}
             </p>
 
             <!-- Icon + Details Grid -->
@@ -275,8 +274,7 @@ onUnmounted(() => {
           </div>
 
           <div
-            class="flex shrink-0 items-center gap-x-4 cursor-pointer hover:text-blue-600 transition-colors"
-            @click="handleViewInstallation(installation.id)"
+            class="flex shrink-0 items-center gap-x-4"
           >
             <div class="hidden sm:flex sm:flex-col sm:items-end">
               <p v-if="installation.last_used_at" class="mt-1 text-xs/5 text-gray-500">

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

@@ -33,6 +33,7 @@ export default {
       edit: 'Edit',
       delete: 'Delete',
       view: 'View Details',
+      install: 'Install',
       manage: 'Manage',
       feature: 'Feature',
       unfeature: 'Unfeature',

services/frontend/src/views/admin/mcp-server-catalog/McpServerTableColumns.vue

@@ -290,6 +290,11 @@ const handleEditServer = (serverId: string) => {
   router.push(`/admin/mcp-server-catalog/edit/${serverId}`)
 }
 
+// Navigate to install page
+const handleInstallServer = (serverId: string) => {
+  router.push(`/mcp-server/install/${serverId}`)
+}
+
 // Get repository icon based on platform
 const getRepositoryIcon = (platform?: string) => {
   switch (platform) {
@@ -638,6 +643,9 @@ const getRepositoryLabel = (platform?: string) => {
                 <DropdownMenuItem @click="handleEditServer(server.id)">
                   {{ t('mcpCatalog.table.actions.edit') }}
                 </DropdownMenuItem>
+                <DropdownMenuItem @click="handleInstallServer(server.id)">
+                  {{ t('mcpCatalog.table.actions.install') }}
+                </DropdownMenuItem>
                 <DropdownMenuItem @click="handleStatusClick(server)">
                   {{ server.status === 'disabled' ? t('mcpCatalog.table.actions.enable') : t('mcpCatalog.table.actions.disable') }}
                 </DropdownMenuItem>

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

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n'
 import { useBreadcrumbs } from '@/composables/useBreadcrumbs'
 import { toast } from 'vue-sonner'
 import { Button } from '@/components/ui/button'
+import { ButtonGroup } from '@/components/ui/button-group'
 import { Badge } from '@/components/ui/badge'
 import CategoryDisplay from '@/components/mcp-server/CategoryDisplay.vue'
 import ContentWrapper from '@/components/ContentWrapper.vue'
@@ -352,6 +353,11 @@ const handleEditServer = () => {
   router.push(`/admin/mcp-server-catalog/edit/${serverId}`)
 }
 
+// Navigate to install page
+const handleInstallServer = () => {
+  router.push(`/mcp-server/install/${serverId}`)
+}
+
 // Get repository icon based on platform
 const getRepositoryIcon = (platform: string | undefined) => {
   switch (platform) {
@@ -402,9 +408,14 @@ const getRepositoryLabel = (platform: string | undefined) => {
 
       <template #actions>
         <div v-if="server" class="flex items-center gap-2">
-          <Button variant="outline" @click="handleEditServer">
-            Edit
-          </Button>
+          <ButtonGroup>
+            <Button variant="outline" @click="handleInstallServer">
+              Install
+            </Button>
+            <Button variant="outline" @click="handleEditServer">
+              Edit
+            </Button>
+          </ButtonGroup>
           <span class="text-neutral-300">|</span>
           <Button variant="outline" :disabled="isDeleting" @click="showDeleteDialog = true" class="text-red-600 hover:text-red-600">
             Delete

services/satellite/src/core/mcp-server-wrapper.ts

@@ -708,6 +708,16 @@ export class McpServerWrapper {
     // Phase 10: OAuth token injection for HTTP/SSE MCP servers
     let headers: Record<string, string> = {};
 
+    // Add regular headers from config (API keys, custom headers, etc.)
+    if (config.headers) {
+      Object.assign(headers, config.headers);
+      this.logger.debug({
+        operation: 'config_headers_added',
+        server_name: serverName,
+        header_keys: Object.keys(config.headers)
+      }, `Added ${Object.keys(config.headers).length} headers from config`);
+    }
+
     if (config.requires_oauth && this.oauthTokenService) {
       if (!config.installation_id || !config.user_id || !config.team_id) {
         throw new Error(
@@ -834,10 +844,10 @@ export class McpServerWrapper {
       };
 
       this.logger.debug({
-        operation: 'oauth_headers_patched_global_fetch',
+        operation: 'headers_patched_global_fetch',
         server_name: serverName,
         headers_to_inject: Object.keys(headers)
-      }, 'Patched global fetch to inject OAuth headers for tool execution');
+      }, `Patched global fetch to inject ${Object.keys(headers).length} headers for tool execution`);
     }
 
     try {

services/satellite/src/services/command-processor.ts

@@ -412,7 +412,7 @@ export class CommandProcessor {
     if (command.payload.transport_type === 'stdio') {
       return await this.handleSpawnStdioProcess(command);
     }
-    
+
     // Otherwise handle as HTTP proxy
     this.logger.debug({
       operation: 'command_spawn',
@@ -483,9 +483,9 @@ export class CommandProcessor {
     }
 
     const payload = command.payload;
-    
+
     // Validate required fields
-    if (!payload.installation_id || !payload.installation_name || !payload.team_id || 
+    if (!payload.installation_id || !payload.installation_name || !payload.team_id ||
         !payload.command || !payload.args) {
       throw new Error('Missing required fields in spawn command payload');
     }

services/satellite/src/services/remote-tool-discovery-manager.ts

@@ -373,6 +373,16 @@ export class RemoteToolDiscoveryManager {
     // Phase 10: OAuth token injection for tool discovery
     let headers: Record<string, string> = {};
 
+    // Add regular headers from config (API keys, custom headers, etc.)
+    if (config.headers) {
+      Object.assign(headers, config.headers);
+      this.logger.debug({
+        operation: 'config_headers_added_tool_discovery',
+        server_name: serverName,
+        header_keys: Object.keys(config.headers)
+      }, `Added ${Object.keys(config.headers).length} headers from config for tool discovery`);
+    }
+
     if (config.requires_oauth && this.oauthTokenService) {
       if (!config.installation_id || !config.user_id || !config.team_id) {
         throw new Error(
@@ -491,10 +501,10 @@ export class RemoteToolDiscoveryManager {
       };
 
       this.logger.debug({
-        operation: 'oauth_headers_patched_global_fetch',
+        operation: 'headers_patched_global_fetch_tool_discovery',
         server_name: serverName,
         headers_to_inject: Object.keys(headers)
-      }, 'Patched global fetch to inject OAuth headers for tool discovery');
+      }, `Patched global fetch to inject ${Object.keys(headers).length} headers for tool discovery`);
     }
 
     try {