feat: move integrations outside user scope

Author: syntaxsdev

components/frontend/src/app/integrations/IntegrationsClient.tsx

@@ -8,7 +8,6 @@ import { JiraConnectionCard } from '@/components/jira-connection-card'
 import { MCPCredentialCard } from '@/components/mcp-credential-card'
 import { PageHeader } from '@/components/page-header'
 import { useIntegrationsStatus } from '@/services/queries/use-integrations'
-import { Card } from '@/components/ui/card'
 import { Loader2 } from 'lucide-react'
 
 type FieldDefinition = {
@@ -19,53 +18,21 @@ type FieldDefinition = {
   helpText?: string
 }
 
-type MCPServerEntry = {
+type MCPCredentialServer = {
   displayName: string
   description: string
-  iconBg: string
-  icon: ReactNode
-} & (
-  | { kind: 'enabled' }
-  | { kind: 'credentials'; fields: FieldDefinition[] }
-)
-
-/* eslint-disable @next/next/no-img-element */
+  iconBg?: string
+  icon?: ReactNode
+  fields: FieldDefinition[]
+}
 
 /**
- * All MCP servers configured in the platform (.mcp.json).
- * - "enabled" servers require no credentials and are always active.
- * - "credentials" servers need user-provided fields to function.
+ * MCP servers that require user-provided credentials.
+ * Platform-wide no-auth servers (context7, deepwiki, webfetch) are not shown
+ * here — they belong at the project scope, not user-scoped integrations.
  */
-const MCP_SERVERS: Record<string, MCPServerEntry> = {
-  context7: {
-    kind: 'enabled',
-    displayName: 'Context7',
-    description: 'Up-to-date documentation and code examples for libraries and frameworks',
-    iconBg: '',
-    icon: <img src="/logos/context7.svg" alt="Context7" className="w-16 h-16 rounded-lg" />,
-  },
-  deepwiki: {
-    kind: 'enabled',
-    displayName: 'DeepWiki',
-    description: 'AI-powered knowledge base for open-source repositories',
-    iconBg: 'bg-white',
-    icon: <img src="/logos/deepwiki.png" alt="DeepWiki" className="w-10 h-10" />,
-  },
-  webfetch: {
-    kind: 'enabled',
-    displayName: 'Web Fetch',
-    description: 'Fetch and extract content from web pages',
-    iconBg: 'bg-emerald-600',
-    icon: (
-      <svg className="w-8 h-8 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-        <circle cx="12" cy="12" r="10" />
-        <path d="M2 12h20" />
-        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
-      </svg>
-    ),
-  },
+const MCP_CREDENTIAL_SERVERS: Record<string, MCPCredentialServer> = {
   'mcp-atlassian': {
-    kind: 'credentials',
     displayName: 'Jira (MCP)',
     description:
       'Provide Jira credentials for the MCP Atlassian server used in agentic sessions',
@@ -99,56 +66,13 @@ const MCP_SERVERS: Record<string, MCPServerEntry> = {
   },
 }
 
-function MCPEnabledCard({
-  displayName,
-  description,
-  iconBg,
-  icon,
-}: {
-  displayName: string
-  description: string
-  iconBg: string
-  icon: ReactNode
-}) {
-  return (
-    <Card className="bg-card border border-border/60 shadow-sm shadow-black/[0.03] dark:shadow-black/[0.15] flex flex-col h-full">
-      <div className="p-6 flex flex-col flex-1">
-        <div className="flex items-start gap-4 mb-6">
-          {iconBg ? (
-            <div className={`flex-shrink-0 w-16 h-16 ${iconBg} rounded-lg flex items-center justify-center`}>
-              {icon}
-            </div>
-          ) : (
-            <div className="flex-shrink-0 w-16 h-16">
-              {icon}
-            </div>
-          )}
-          <div className="flex-1">
-            <h3 className="text-xl font-semibold text-foreground mb-1">{displayName}</h3>
-            <p className="text-muted-foreground">{description}</p>
-          </div>
-        </div>
-        <div className="flex items-center gap-2 mt-auto">
-          <span className="w-2 h-2 rounded-full bg-green-500" />
-          <span className="text-sm font-medium text-foreground/80">
-            Enabled
-          </span>
-          <span className="text-xs text-muted-foreground ml-1">
-            No configuration required
-          </span>
-        </div>
-      </div>
-    </Card>
-  )
-}
-
 type Props = { appSlug?: string }
 
 export default function IntegrationsClient({ appSlug }: Props) {
   const { data: integrations, isLoading, refetch } = useIntegrationsStatus()
 
-  // Merge known servers with any additional servers that have stored credentials
-  const mcpServerNames = new Set<string>(Object.keys(MCP_SERVERS))
+  // Merge known credential servers with any additional servers that have stored credentials
+  const mcpServerNames = new Set<string>(Object.keys(MCP_CREDENTIAL_SERVERS))
   if (integrations?.mcpServers) {
     for (const name of Object.keys(integrations.mcpServers)) {
       mcpServerNames.add(name)
@@ -198,61 +122,46 @@ export default function IntegrationsClient({ appSlug }: Props) {
                 />
               </div>
 
-              {/* MCP Servers section */}
-              <div className="mt-8">
-                <h2 className="text-lg font-semibold text-foreground mb-4">MCP Servers</h2>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                  {[...mcpServerNames].map((name) => {
-                    const entry = MCP_SERVERS[name]
-                    const serverStatus = integrations?.mcpServers?.[name]
-
-                    if (entry?.kind === 'enabled') {
+              {/* MCP Servers section — only credential-based servers (user-scoped) */}
+              {mcpServerNames.size > 0 && (
+                <div className="mt-8">
+                  <h2 className="text-lg font-semibold text-foreground mb-4">MCP Servers</h2>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {[...mcpServerNames].map((name) => {
+                      const entry = MCP_CREDENTIAL_SERVERS[name]
+                      const serverStatus = integrations?.mcpServers?.[name]
                       return (
-                        <MCPEnabledCard
+                        <MCPCredentialCard
                           key={name}
-                          displayName={entry.displayName}
-                          description={entry.description}
-                          iconBg={entry.iconBg}
-                          icon={entry.icon}
+                          serverName={name}
+                          displayName={entry?.displayName ?? name}
+                          icon={entry?.icon}
+                          iconBg={entry?.iconBg}
+                          description={
+                            entry?.description ?? `Credentials for the ${name} MCP server`
+                          }
+                          fields={
+                            entry?.fields ?? [
+                              {
+                                name: 'api_key',
+                                label: 'API Key',
+                                type: 'password' as const,
+                                placeholder: 'Enter API key',
+                              },
+                            ]
+                          }
+                          status={
+                            serverStatus
+                              ? { connected: serverStatus.connected, serverName: name }
+                              : { connected: false, serverName: name }
+                          }
+                          onRefresh={refetch}
                         />
                       )
-                    }
-
-                    return (
-                      <MCPCredentialCard
-                        key={name}
-                        serverName={name}
-                        displayName={entry?.displayName ?? name}
-                        icon={entry?.icon}
-                        iconBg={entry?.iconBg}
-                        description={
-                          entry?.kind === 'credentials'
-                            ? entry.description
-                            : `Credentials for the ${name} MCP server`
-                        }
-                        fields={
-                          entry?.kind === 'credentials'
-                            ? entry.fields
-                            : [
-                                {
-                                  name: 'api_key',
-                                  label: 'API Key',
-                                  type: 'password' as const,
-                                  placeholder: 'Enter API key',
-                                },
-                              ]
-                        }
-                        status={
-                          serverStatus
-                            ? { connected: serverStatus.connected, serverName: name }
-                            : { connected: false, serverName: name }
-                        }
-                        onRefresh={refetch}
-                      />
-                    )
-                  })}
+                    })}
+                  </div>
                 </div>
-              </div>
+              )}
             </>
           )}
         </div>

components/frontend/src/components/navigation.tsx

@@ -134,15 +134,20 @@ export function Navigation({ feedbackUrl }: NavigationProps) {
               </a>
             )}
             <ThemeToggle />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => router.push('/integrations')}
+              className="text-muted-foreground hover:text-foreground"
+            >
+              <Plug className="w-4 h-4 mr-1" />
+              Integrations
+            </Button>
             <DropdownMenu>
               <DropdownMenuTrigger className="outline-none">
                 <UserBubble />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
-                <DropdownMenuItem onSelect={() => router.push('/integrations')}>
-                  <Plug className="w-4 h-4 mr-2" />
-                  Integrations
-                </DropdownMenuItem>
                 <DropdownMenuItem onSelect={handleLogout}>
                   <LogOut className="w-4 h-4 mr-2" />
                   Logout