feat(frontend): add specifications display and requests graph to installation general tab

Author: Lasim

services/frontend/src/components/mcp-server/installation/GeneralTab.vue

@@ -6,6 +6,7 @@ import { DsCard } from '@/components/ui/ds-card'
 import { Github, ExternalLink, Calendar, Tag } from 'lucide-vue-next'
 import InstallationStatusBadge from './InstallationStatusBadge.vue'
 import GeneralMetricsPanel from './GeneralMetricsPanel.vue'
+import McpServerInfoSpecifications from '@/components/mcp-server/view/McpServerInfoSpecifications.vue'
 import { useMcpToolsStore } from '@/stores/mcpToolsStore'
 import { getEnv } from '@/utils/env'
 import type { McpInstallation, InstallationStatusData } from '@/types/mcp-installations'
@@ -167,6 +168,19 @@ onMounted(async () => {
           </dd>
         </div>
 
+        <!-- MCP Specifications (Packages/Remotes) -->
+        <div v-if="(server.runtime !== 'http' && server.packages) || (server.runtime === 'http' && server.remotes)" class="py-4 sm:grid sm:grid-cols-3 sm:gap-4">
+          <dt class="text-sm/6 font-medium text-gray-900">Specifications</dt>
+          <dd class="mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0">
+            <McpServerInfoSpecifications
+              :runtime="server.runtime"
+              :packages="server.packages"
+              :remotes="server.remotes"
+              :show-heading="false"
+            />
+          </dd>
+        </div>
+
         <!-- Repository Links -->
         <div v-if="server.repository_url || server.website_url" class="py-4 sm:grid sm:grid-cols-3 sm:gap-4">
           <dt class="text-sm/6 font-medium text-gray-900">{{ t('mcpInstallations.details.installationDetails.fields.links') }}</dt>

services/frontend/src/components/mcp-server/view/McpServerInfoSpecifications.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Badge } from '@/components/ui/badge'
+import { CodeHighlight } from '@/components/ui/code-highlight'
 import { Shield, Package, Globe } from 'lucide-vue-next'
 
 interface Props {
@@ -9,14 +11,28 @@ interface Props {
   packages?: any | null
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   remotes?: any | null
+  showHeading?: boolean
 }
 
-defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  showHeading: true
+})
+
+// Format JSON for display
+const formattedPackages = computed(() => {
+  if (!props.packages) return ''
+  return JSON.stringify(props.packages, null, 2)
+})
+
+const formattedRemotes = computed(() => {
+  if (!props.remotes) return ''
+  return JSON.stringify(props.remotes, null, 2)
+})
 </script>
 
 <template>
   <div class="space-y-3">
-    <h3 class="text-sm font-semibold">Specifications</h3>
+    <h3 v-if="showHeading" class="text-sm font-semibold">Specifications</h3>
 
     <div class="space-y-3">
       <!-- Requires OAuth -->
@@ -39,7 +55,7 @@ defineProps<Props>()
           Packages
         </dt>
         <dd class="text-sm">
-          <pre class="bg-muted border rounded p-3 text-xs overflow-x-auto">{{ JSON.stringify(packages, null, 2) }}</pre>
+          <CodeHighlight :code="formattedPackages" language="json" />
         </dd>
       </div>
 
@@ -50,7 +66,7 @@ defineProps<Props>()
           Remotes
         </dt>
         <dd class="text-sm">
-          <pre class="bg-muted border rounded p-3 text-xs overflow-x-auto">{{ JSON.stringify(remotes, null, 2) }}</pre>
+          <CodeHighlight :code="formattedRemotes" language="json" />
         </dd>
       </div>
     </div>

services/frontend/src/types/mcp-installations.ts

@@ -18,6 +18,8 @@ export interface McpServer {
   category_id?: string
   transport_type: 'stdio' | 'http' | 'sse'
   installation_methods: any[]
+  packages?: any | null
+  remotes?: any | null
   // Three-tier configuration schema fields
   template_args?: any[] | null
   template_env?: Record<string, string> | null