feat: add status to show integrations

Author: syntaxsdev

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

@@ -1,12 +1,14 @@
 'use client'
 
+import type { ReactNode } from 'react'
 import { GitHubConnectionCard } from '@/components/github-connection-card'
 import { GoogleDriveConnectionCard } from '@/components/google-drive-connection-card'
 import { GitLabConnectionCard } from '@/components/gitlab-connection-card'
 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 = {
@@ -17,22 +19,81 @@ type FieldDefinition = {
   helpText?: string
 }
 
-type MCPServerDefinition = {
+type MCPServerEntry = {
   displayName: string
   description: string
-  fields: FieldDefinition[]
-}
+  iconBg: string
+  icon: ReactNode
+} & (
+  | { kind: 'enabled' }
+  | { kind: 'credentials'; fields: FieldDefinition[] }
+)
+
+/* Context7 — stylized "C7" mark */
+const Context7Icon = (
+  <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <text x="3" y="19" fontSize="16" fontWeight="700" fontFamily="system-ui, sans-serif" fill="white">C7</text>
+  </svg>
+)
+
+/* DeepWiki — open book */
+const DeepWikiIcon = (
+  <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">
+    <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+    <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+  </svg>
+)
+
+/* Web Fetch — globe with arrow */
+const WebFetchIcon = (
+  <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>
+)
+
+/* Jira — the Jira logo (same SVG used in jira-connection-card) */
+const JiraMCPIcon = (
+  <svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+    <path d="M11.571 11.513H0a5.218 5.218 0 0 0 5.232 5.215h2.13v2.057A5.215 5.215 0 0 0 12.575 24V12.518a1.005 1.005 0 0 0-1.005-1.005zm5.723-5.756H5.736a5.215 5.215 0 0 0 5.215 5.214h2.129v2.058a5.218 5.218 0 0 0 5.215 5.214V6.758a1.001 1.001 0 0 0-1.001-1.001zM23.013 0H11.455a5.215 5.215 0 0 0 5.215 5.215h2.129v2.057A5.215 5.215 0 0 0 24 12.483V1.005A1.001 1.001 0 0 0 23.013 0z" />
+  </svg>
+)
 
 /**
- * Known MCP servers that require user-provided credentials.
- * Servers like webfetch, context7, and deepwiki are excluded because
- * they don't require authentication.
+ * 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.
  */
-const KNOWN_MCP_SERVERS: Record<string, MCPServerDefinition> = {
+const MCP_SERVERS: Record<string, MCPServerEntry> = {
+  context7: {
+    kind: 'enabled',
+    displayName: 'Context7',
+    description: 'Up-to-date documentation and code examples for libraries and frameworks',
+    iconBg: 'bg-violet-600',
+    icon: Context7Icon,
+  },
+  deepwiki: {
+    kind: 'enabled',
+    displayName: 'DeepWiki',
+    description: 'AI-powered knowledge base for open-source repositories',
+    iconBg: 'bg-sky-600',
+    icon: DeepWikiIcon,
+  },
+  webfetch: {
+    kind: 'enabled',
+    displayName: 'Web Fetch',
+    description: 'Fetch and extract content from web pages',
+    iconBg: 'bg-emerald-600',
+    icon: WebFetchIcon,
+  },
   'mcp-atlassian': {
+    kind: 'credentials',
     displayName: 'Jira (MCP)',
     description:
       'Provide Jira credentials for the MCP Atlassian server used in agentic sessions',
+    iconBg: 'bg-blue-600',
+    icon: JiraMCPIcon,
     fields: [
       {
         name: 'jira_url',
@@ -57,14 +118,50 @@ const KNOWN_MCP_SERVERS: Record<string, MCPServerDefinition> = {
   },
 }
 
+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">
+          <div className={`flex-shrink-0 w-16 h-16 ${iconBg} rounded-lg flex items-center justify-center`}>
+            {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) {
-  // Fetch all integration statuses in one call
   const { data: integrations, isLoading, refetch } = useIntegrationsStatus()
 
   // Merge known servers with any additional servers that have stored credentials
-  const mcpServerNames = new Set<string>(Object.keys(KNOWN_MCP_SERVERS))
+  const mcpServerNames = new Set<string>(Object.keys(MCP_SERVERS))
   if (integrations?.mcpServers) {
     for (const name of Object.keys(integrations.mcpServers)) {
       mcpServerNames.add(name)
@@ -114,44 +211,61 @@ export default function IntegrationsClient({ appSlug }: Props) {
                 />
               </div>
 
-              {/* MCP Servers section — always shown for known servers */}
-              {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 definition = KNOWN_MCP_SERVERS[name]
-                      const serverStatus = integrations?.mcpServers?.[name]
+              {/* 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') {
                       return (
-                        <MCPCredentialCard
+                        <MCPEnabledCard
                           key={name}
-                          serverName={name}
-                          displayName={definition?.displayName ?? name}
-                          description={
-                            definition?.description ?? `Credentials for the ${name} MCP server`
-                          }
-                          fields={
-                            definition?.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}
+                          displayName={entry.displayName}
+                          description={entry.description}
+                          iconBg={entry.iconBg}
+                          icon={entry.icon}
                         />
                       )
-                    })}
-                  </div>
+                    }
+
+                    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>

components/frontend/src/components/mcp-credential-card.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import React, { useState } from 'react'
+import type { ReactNode } from 'react'
+import { useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
@@ -34,6 +35,8 @@ type Props = {
   fields: FieldDefinition[]
   status?: MCPServerStatusData
   onRefresh?: () => void
+  icon?: ReactNode
+  iconBg?: string
 }
 
 export function MCPCredentialCard({
@@ -43,6 +46,8 @@ export function MCPCredentialCard({
   fields,
   status,
   onRefresh,
+  icon,
+  iconBg,
 }: Props) {
   const connectMutation = useConnectMCPServer(serverName)
   const disconnectMutation = useDisconnectMCPServer(serverName)
@@ -100,8 +105,8 @@ export function MCPCredentialCard({
       <div className="p-6 flex flex-col flex-1">
         {/* Header */}
         <div className="flex items-start gap-4 mb-6">
-          <div className="flex-shrink-0 w-16 h-16 bg-primary rounded-lg flex items-center justify-center">
-            <Plug className="w-8 h-8 text-white" />
+          <div className={`flex-shrink-0 w-16 h-16 ${iconBg ?? 'bg-primary'} rounded-lg flex items-center justify-center`}>
+            {icon ?? <Plug className="w-8 h-8 text-white" />}
           </div>
           <div className="flex-1">
             <h3 className="text-xl font-semibold text-foreground mb-1">{displayName}</h3>

specs/1-add-mcp-tools/checklists/requirements.md

@@ -0,0 +1,37 @@
+# Specification Quality Checklist: Add Context7/DeepWiki + Generic MCP Credential Framework
+
+**Purpose**: Validate specification completeness and quality before proceeding to planning
+**Created**: 2026-03-06
+**Feature**: [spec.md](../spec.md)
+
+## Content Quality
+
+- [x] No implementation details (languages, frameworks, APIs)
+- [x] Focused on user value and business needs
+- [x] Written for non-technical stakeholders
+- [x] All mandatory sections completed
+
+## Requirement Completeness
+
+- [x] No [NEEDS CLARIFICATION] markers remain
+- [x] Requirements are testable and unambiguous
+- [x] Success criteria are measurable
+- [x] Success criteria are technology-agnostic (no implementation details)
+- [x] All acceptance scenarios are defined
+- [x] Edge cases are identified (missing credentials graceful degradation)
+- [x] Scope is clearly bounded (no migration of existing integrations)
+- [x] Dependencies and assumptions identified
+
+## Feature Readiness
+
+- [x] All functional requirements have clear acceptance criteria
+- [x] User scenarios cover primary flows (5 scenarios covering both parts)
+- [x] Feature meets measurable outcomes defined in Success Criteria
+- [x] No implementation details leak into specification
+
+## Notes
+
+- All items pass. Spec covers both parts: immediate (Context7/DeepWiki) and foundational (credential framework).
+- Key design decisions documented in research.md (12 decisions).
+- MVP is shippable independently (T001–T002: just the `.mcp.json` change).
+- Ready for `/speckit.implement`.