@yancyyu/openhermit 1.6.29 → 1.6.30

package/src/renderer/components/extensions/env/ProjectEnvPanel.tsx

@@ -0,0 +1,239 @@
+/**
+ * ProjectEnvPanel — manage project-level environment variables for Skills/MCP.
+ * Scans required env vars from enabled MCP servers + Skills, shows fill status,
+ * allows editing and encrypted saving.
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+
+import { api } from '@renderer/api';
+import { Button } from '@renderer/components/ui/button';
+import { Input } from '@renderer/components/ui/input';
+import { Label } from '@renderer/components/ui/label';
+import { Eye, EyeOff, Save, Shield } from 'lucide-react';
+
+interface EnvVarEntry {
+  name: string;
+  isRequired: boolean;
+  description?: string;
+  source: string;
+  value?: string;
+}
+
+interface ProjectEnvPanelProps {
+  projectPath: string | null;
+}
+
+export const ProjectEnvPanel = ({ projectPath }: ProjectEnvPanelProps): React.JSX.Element => {
+  const [entries, setEntries] = useState<EnvVarEntry[]>([]);
+  const [editValues, setEditValues] = useState<Record<string, string>>({});
+  const [revealed, setRevealed] = useState<Set<string>>(new Set());
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [successMsg, setSuccessMsg] = useState<string | null>(null);
+
+  const scanEnv = useCallback(async () => {
+    if (!projectPath || !api.credentials) return;
+    setLoading(true);
+    setError(null);
+    try {
+      // Installed MCP entries do not carry env-var requirements (InstalledMcpEntry
+      // only exposes name/scope/transport), so MCP env scanning is not available here.
+      // Required env vars are sourced from skill declarations below.
+      const mcpServers: {
+        name: string;
+        envVars?: { name: string; isRequired: boolean; description?: string };
+      }[] = [];
+
+      // Gather skills with required-env from catalog
+      const skillReqs: {
+        name: string;
+        envVars: { name: string; isRequired?: boolean; description?: string }[];
+      }[] = [];
+      if (api.skills) {
+        try {
+          const skills = await api.skills.list(projectPath);
+          for (const skill of skills) {
+            const reqEnv = skill.requiredEnv ?? [];
+            if (reqEnv.length > 0) {
+              skillReqs.push({
+                name: skill.name,
+                envVars: reqEnv.map((v) => ({
+                  name: v.name,
+                  isRequired: v.isRequired ?? true,
+                  description: v.description,
+                })),
+              });
+            }
+          }
+        } catch {
+          /* non-critical */
+        }
+      }
+
+      const result = await api.credentials
+        .scanRequired(projectPath, mcpServers, skillReqs)
+        .catch(() => null);
+      const required = (result as any)?.required ?? [];
+      setEntries(required);
+
+      const saved = await api.credentials
+        .getProjectEnv(projectPath)
+        .catch(() => ({}) as Record<string, string>);
+      const initialValues: Record<string, string> = {};
+      for (const entry of required) {
+        initialValues[entry.name] = (saved as any)?.[entry.name] ?? entry.value ?? '';
+      }
+      setEditValues(initialValues);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '扫描环境变量失败');
+    } finally {
+      setLoading(false);
+    }
+  }, [projectPath]);
+
+  useEffect(() => {
+    void scanEnv();
+  }, [scanEnv]);
+
+  const handleSave = async () => {
+    if (!projectPath || !api.credentials) return;
+    setSaving(true);
+    setError(null);
+    setSuccessMsg(null);
+    try {
+      await api.credentials.saveProjectEnv(projectPath, editValues);
+      setSuccessMsg('环境变量已加密保存');
+      setTimeout(() => setSuccessMsg(null), 3000);
+      await scanEnv();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '保存失败');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const toggleReveal = (name: string) => {
+    setRevealed((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  };
+
+  if (!projectPath) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-text-muted">
+        <Shield className="mb-3 size-10 opacity-40" />
+        <p className="text-sm">请先选择一个项目以管理环境变量。</p>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12 text-text-muted">
+        <p className="text-sm">正在扫描项目所需的环境变量...</p>
+      </div>
+    );
+  }
+
+  const missingRequired = entries.filter((e) => e.isRequired && !editValues[e.name]?.trim());
+
+  return (
+    <div className="space-y-4 px-1">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-sm font-medium text-text">项目环境变量</h3>
+          <p className="text-xs text-text-muted">
+            管理当前项目所需的环境变量，供 Skills 和 CLI 工具使用。值已加密存储。
+          </p>
+        </div>
+        <Button size="sm" variant="outline" onClick={() => void scanEnv()} disabled={loading}>
+          刷新
+        </Button>
+      </div>
+
+      {error && (
+        <div className="rounded-md border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-400">
+          {error}
+        </div>
+      )}
+
+      {successMsg && (
+        <div className="rounded-md border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-xs text-emerald-400">
+          {successMsg}
+        </div>
+      )}
+
+      {missingRequired.length > 0 && (
+        <div className="rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-400">
+          缺少必填变量：{missingRequired.map((e) => e.name).join(', ')}
+        </div>
+      )}
+
+      {entries.length === 0 && !loading && (
+        <div className="py-8 text-center text-xs text-text-muted">
+          未检测到所需的环境变量。启用 MCP 服务器或 Skills 后会自动扫描。
+        </div>
+      )}
+
+      {entries.length > 0 && (
+        <div className="space-y-3">
+          {entries.map((entry) => (
+            <div key={entry.name} className="space-y-1.5">
+              <div className="flex items-center gap-2">
+                <Label className="font-mono text-xs text-text">{entry.name}</Label>
+                <span
+                  className={`rounded px-1.5 py-0.5 text-[10px] font-medium ${
+                    entry.isRequired
+                      ? 'bg-red-500/10 text-red-400'
+                      : 'bg-surface-raised text-text-muted'
+                  }`}
+                >
+                  {entry.isRequired ? '必填' : '可选'}
+                </span>
+                <span className="text-[10px] text-text-muted">来自 {entry.source}</span>
+              </div>
+              {entry.description && (
+                <p className="text-[11px] text-text-muted">{entry.description}</p>
+              )}
+              <div className="flex gap-2">
+                <Input
+                  type={revealed.has(entry.name) ? 'text' : 'password'}
+                  value={editValues[entry.name] ?? ''}
+                  onChange={(e) =>
+                    setEditValues((prev) => ({ ...prev, [entry.name]: e.target.value }))
+                  }
+                  placeholder={entry.isRequired ? '必填' : '可选'}
+                  className="h-7 flex-1 font-mono text-xs"
+                />
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="size-7 shrink-0"
+                  onClick={() => toggleReveal(entry.name)}
+                >
+                  {revealed.has(entry.name) ? (
+                    <EyeOff className="size-3.5" />
+                  ) : (
+                    <Eye className="size-3.5" />
+                  )}
+                </Button>
+              </div>
+            </div>
+          ))}
+
+          <div className="pt-2">
+            <Button size="sm" onClick={() => void handleSave()} disabled={saving}>
+              <Save className="mr-1.5 size-3.5" />
+              {saving ? '保存中...' : '加密保存'}
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/renderer/components/extensions/mcp/CustomMcpServerDialog.tsx

@@ -5,7 +5,6 @@
 
 import { useEffect, useRef, useState } from 'react';
 
-import { api } from '@renderer/api';
 import { Button } from '@renderer/components/ui/button';
 import {
   Dialog,
@@ -24,16 +23,11 @@ import {
   SelectValue,
 } from '@renderer/components/ui/select';
 import { useStore } from '@renderer/store';
-import { getExtensionActionDisableReason } from '@shared/utils/extensionNormalizers';
-import {
-  getDefaultMcpSharedScope,
-  getMcpScopeLabel,
-  isProjectScopedMcpScope,
-  isSharedMcpScope,
-} from '@shared/utils/mcpScopes';
+import { getDefaultMcpSharedScope } from '@shared/utils/mcpScopes';
 import { Plus, Server, Trash2 } from 'lucide-react';
 
-import type { CliInstallationStatus } from '@shared/types';
+import { HarnessSelector } from '../common/HarnessSelector';
+
 import type {
   McpCustomInstallRequest,
   McpHeaderDef,
@@ -45,17 +39,10 @@ const SERVER_NAME_RE = /^[\w.-]{1,100}$/;
 interface CustomMcpServerDialogProps {
   open: boolean;
   onClose: () => void;
-  projectPath: string | null;
-  cliStatus?: Pick<
-    CliInstallationStatus,
-    'installed' | 'authLoggedIn' | 'binaryPath' | 'launchError' | 'flavor' | 'providers'
-  > | null;
-  cliStatusLoading?: boolean;
 }
 
 type TransportMode = 'stdio' | 'http';
 type HttpTransport = 'streamable-http' | 'sse' | 'http';
-type Scope = 'local' | 'user' | 'project' | 'global';
 
 const HTTP_TRANSPORT_OPTIONS: { value: HttpTransport; label: string }[] = [
   { value: 'streamable-http', label: 'Streamable HTTP' },
@@ -63,34 +50,19 @@ const HTTP_TRANSPORT_OPTIONS: { value: HttpTransport; label: string }[] = [
   { value: 'http', label: 'HTTP' },
 ];
 
-interface EnvEntry {
-  key: string;
-  value: string;
-}
-
 export const CustomMcpServerDialog = ({
   open,
   onClose,
-  projectPath,
-  cliStatus: cliStatusOverride,
-  cliStatusLoading: cliStatusLoadingOverride,
 }: CustomMcpServerDialogProps): React.JSX.Element => {
   const installCustomMcpServer = useStore((s) => s.installCustomMcpServer);
   const storedCliStatus = useStore((s) => s.cliStatus);
-  const storedCliStatusLoading = useStore((s) => s.cliStatusLoading);
-  const cliStatus = cliStatusOverride ?? storedCliStatus;
-  const cliStatusLoading = cliStatusLoadingOverride ?? storedCliStatusLoading;
-  const defaultSharedScope = getDefaultMcpSharedScope(cliStatus?.flavor);
-  const scopeOptions: { value: Scope; label: string }[] = [
-    { value: defaultSharedScope, label: getMcpScopeLabel(defaultSharedScope, cliStatus?.flavor) },
-    { value: 'project', label: 'Project' },
-    { value: 'local', label: 'Local' },
-  ];
+  const defaultSharedScope = getDefaultMcpSharedScope(storedCliStatus?.flavor);
+  const installScope = defaultSharedScope === 'global' ? 'user' : defaultSharedScope;
 
   // Form state
   const [serverName, setServerName] = useState('');
   const [transportMode, setTransportMode] = useState<TransportMode>('stdio');
-  const [scope, setScope] = useState<Scope>(defaultSharedScope);
+  const [harnessType, setHarnessType] = useState('claudecode');
 
   // Stdio fields
   const [npmPackage, setNpmPackage] = useState('');
@@ -102,26 +74,9 @@ export const CustomMcpServerDialog = ({
   const [headers, setHeaders] = useState<McpHeaderDef[]>([]);
 
   // Shared
-  const [envVars, setEnvVars] = useState<EnvEntry[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [installing, setInstalling] = useState(false);
-  const autoFilledValuesRef = useRef<Record<string, string>>({});
   const wasOpenRef = useRef(false);
-  const previousDefaultSharedScopeRef = useRef<Scope>(defaultSharedScope);
-  const envVarLookupNames = envVars
-    .map((entry) => entry.key.trim())
-    .filter(Boolean)
-    .sort()
-    .join('\0');
-  const apiKeyLookupProjectPath = isProjectScopedMcpScope(scope)
-    ? (projectPath ?? undefined)
-    : undefined;
-  const mutationDisableReason = getExtensionActionDisableReason({
-    isInstalled: false,
-    cliStatus,
-    cliStatusLoading,
-    section: 'mcp',
-  });
 
   // Reset on open
   useEffect(() => {
@@ -129,107 +84,20 @@ export const CustomMcpServerDialog = ({
     if (justOpened) {
       setServerName('');
       setTransportMode('stdio');
-      setScope(defaultSharedScope);
       setNpmPackage('');
       setNpmVersion('');
       setHttpUrl('');
       setHttpTransport('streamable-http');
       setHeaders([]);
-      setEnvVars([]);
       setError(null);
       setInstalling(false);
-      autoFilledValuesRef.current = {};
     }
     wasOpenRef.current = open;
-    if (!open) {
-      previousDefaultSharedScopeRef.current = defaultSharedScope;
-    }
-  }, [defaultSharedScope, open]);
-
-  useEffect(() => {
-    if (!open) {
-      previousDefaultSharedScopeRef.current = defaultSharedScope;
-      return;
-    }
-
-    const previousDefaultSharedScope = previousDefaultSharedScopeRef.current;
-    if (
-      previousDefaultSharedScope !== defaultSharedScope &&
-      scope === previousDefaultSharedScope &&
-      isSharedMcpScope(scope)
-    ) {
-      setScope(defaultSharedScope);
-    }
-
-    previousDefaultSharedScopeRef.current = defaultSharedScope;
-  }, [defaultSharedScope, open, scope]);
-
-  useEffect(() => {
-    if (open && isProjectScopedMcpScope(scope) && !projectPath) {
-      setScope(defaultSharedScope);
-    }
-  }, [defaultSharedScope, open, projectPath, scope]);
-
-  // Auto-fill env vars from saved API keys
-  useEffect(() => {
-    if (!open || envVars.length === 0 || !api.apiKeys) return;
-
-    const envVarNames = envVars.map((e) => e.key.trim()).filter(Boolean);
-    if (envVarNames.length === 0) return;
-
-    void api.apiKeys.lookup(envVarNames, apiKeyLookupProjectPath).then(
-      (results) => {
-        const previousAutoFilledValues = autoFilledValuesRef.current;
-        const nextAutoFilledValues = Object.fromEntries(
-          results.map((result) => [result.envVarName, result.value])
-        );
-        setEnvVars((prev) => {
-          let changed = false;
-          const next = prev.map((entry) => {
-            const envVarName = entry.key.trim();
-            if (!envVarName) {
-              return entry;
-            }
-
-            const previousValue = previousAutoFilledValues[envVarName];
-            const nextValue = nextAutoFilledValues[envVarName];
-
-            if (!nextValue) {
-              if (previousValue && entry.value === previousValue) {
-                changed = true;
-                return { ...entry, value: '' };
-              }
-              return entry;
-            }
-
-            if (!entry.value || entry.value === previousValue) {
-              if (entry.value !== nextValue) {
-                changed = true;
-                return { ...entry, value: nextValue };
-              }
-            }
-
-            return entry;
-          });
-
-          return changed ? next : prev;
-        });
-        autoFilledValuesRef.current = nextAutoFilledValues;
-      },
-      () => {
-        // Silently fail
-      }
-    );
-  }, [apiKeyLookupProjectPath, envVarLookupNames, open]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [open]);
 
   const handleInstall = async () => {
     setError(null);
 
-    if (mutationDisableReason) {
-      setError(mutationDisableReason);
-      return;
-    }
-
     if (!serverName.trim()) {
       setError('Server name is required');
       return;
@@ -263,20 +131,13 @@ export const CustomMcpServerDialog = ({
       };
     }
 
-    const envValues: Record<string, string> = {};
-    for (const entry of envVars) {
-      if (entry.key.trim() && entry.value) {
-        envValues[entry.key.trim()] = entry.value;
-      }
-    }
-
     const request: McpCustomInstallRequest = {
       serverName,
-      scope,
-      projectPath: isProjectScopedMcpScope(scope) ? (projectPath ?? undefined) : undefined,
+      scope: installScope,
       installSpec,
-      envValues,
+      envValues: {},
       headers: headers.filter((h) => h.key.trim() && h.value.trim()),
+      harnessType,
     };
 
     setInstalling(true);
@@ -290,11 +151,6 @@ export const CustomMcpServerDialog = ({
     }
   };
 
-  const addEnvVar = () => setEnvVars((prev) => [...prev, { key: '', value: '' }]);
-  const removeEnvVar = (i: number) => setEnvVars((prev) => prev.filter((_, idx) => idx !== i));
-  const updateEnvVar = (i: number, field: 'key' | 'value', val: string) =>
-    setEnvVars((prev) => prev.map((e, idx) => (idx === i ? { ...e, [field]: val } : e)));
-
   const addHeader = () => setHeaders((prev) => [...prev, { key: '', value: '' }]);
   const removeHeader = (i: number) => setHeaders((prev) => prev.filter((_, idx) => idx !== i));
   const updateHeader = (i: number, field: 'key' | 'value', val: string) =>
@@ -303,13 +159,11 @@ export const CustomMcpServerDialog = ({
   const canSubmit =
     serverName.trim() &&
     (transportMode === 'stdio' ? npmPackage.trim() : httpUrl.trim()) &&
-    !(isProjectScopedMcpScope(scope) && !projectPath) &&
-    !mutationDisableReason &&
     !installing;
 
   return (
     <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
-      <DialogContent className="max-h-[85vh] max-w-lg overflow-y-auto">
+      <DialogContent className="max-h-[85vh] w-full max-w-lg overflow-y-auto">
         <DialogHeader>
           <div className="flex items-center gap-2">
             <div className="flex size-8 items-center justify-center rounded-lg border border-border bg-surface-raised">
@@ -440,7 +294,7 @@ export const CustomMcpServerDialog = ({
                   </Button>
                 </div>
                 {headers.length > 0 && (
-                  <div className="space-y-2">
+                  <div className="max-h-32 space-y-2 overflow-y-auto">
                     {headers.map((header, i) => (
                       <div key={i} className="flex items-center gap-2">
                         <Input
@@ -471,73 +325,10 @@ export const CustomMcpServerDialog = ({
             </div>
           )}
 
-          {/* Scope */}
-          <div className="space-y-1.5">
-            <Label className="text-xs">作用域</Label>
-            <Select value={scope} onValueChange={(v) => setScope(v as Scope)}>
-              <SelectTrigger className="h-8 text-sm">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                {scopeOptions.map((opt) => (
-                  <SelectItem
-                    key={opt.value}
-                    value={opt.value}
-                    disabled={isProjectScopedMcpScope(opt.value) && !projectPath}
-                  >
-                    {opt.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          {/* Environment variables */}
-          <div className="space-y-1.5">
-            <div className="flex items-center justify-between">
-              <Label className="text-xs">环境变量</Label>
-              <Button variant="ghost" size="sm" onClick={addEnvVar} className="h-6 px-1.5 text-xs">
-                <Plus className="mr-1 size-3" />
-                添加
-              </Button>
-            </div>
-            {envVars.length > 0 && (
-              <div className="space-y-2">
-                {envVars.map((entry, i) => (
-                  <div key={i} className="flex items-center gap-2">
-                    <Input
-                      value={entry.key}
-                      onChange={(e) => updateEnvVar(i, 'key', e.target.value)}
-                      className="h-7 w-40 font-mono text-xs"
-                      placeholder="ENV_VAR_NAME"
-                    />
-                    <Input
-                      type="password"
-                      value={entry.value}
-                      onChange={(e) => updateEnvVar(i, 'value', e.target.value)}
-                      className="h-7 flex-1 text-xs"
-                      placeholder="value"
-                    />
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="size-7 text-red-400 hover:bg-red-500/10"
-                      onClick={() => removeEnvVar(i)}
-                    >
-                      <Trash2 className="size-3" />
-                    </Button>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
+          {/* Harness selector */}
+          <HarnessSelector capability="mcp" value={harnessType} onChange={setHarnessType} />
 
           {/* Error */}
-          {mutationDisableReason && (
-            <div className="rounded-md border border-amber-500/30 bg-amber-500/5 px-3 py-2 text-xs text-amber-300">
-              {mutationDisableReason}
-            </div>
-          )}
           {error && (
             <div className="rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2 text-xs text-red-400">
               {error}

package/src/renderer/components/extensions/mcp/McpServerDetailDialog.tsx

@@ -40,6 +40,7 @@ import {
 import { ExternalLink, Lock, Plus, Star, Trash2, Wrench } from 'lucide-react';
 
 import { InstallButton } from '../common/InstallButton';
+import { HarnessSelector } from '../common/HarnessSelector';
 import { SourceBadge } from '../common/SourceBadge';
 
 import type { CliInstallationStatus } from '@shared/types';
@@ -98,6 +99,7 @@ export const McpServerDetailDialog = ({
   );
 
   const [serverName, setServerName] = useState('');
+  const [harnessType, setHarnessType] = useState('claudecode');
   const [envValues, setEnvValues] = useState<Record<string, string>>({});
   const [headers, setHeaders] = useState<McpHeaderDef[]>([]);
   const [imgError, setImgError] = useState(false);
@@ -271,6 +273,7 @@ export const McpServerDetailDialog = ({
       projectPath: isProjectScopedMcpScope(scope) ? (projectPath ?? undefined) : undefined,
       envValues,
       headers,
+      harnessType,
     });
   };
 
@@ -493,6 +496,14 @@ export const McpServerDetailDialog = ({
               </Select>
             </div>
 
+            {/* Harness selector */}
+            <HarnessSelector
+              capability="mcp"
+              value={harnessType}
+              onChange={setHarnessType}
+              disabled={isInstalledForScope}
+            />
+
             {/* Environment variables */}
             {server.envVars.length > 0 && (
               <div className="space-y-1.5">

package/src/renderer/components/extensions/mcp/McpServersPanel.tsx

@@ -256,7 +256,7 @@ export const McpServersPanel = ({
     }
   };
 
-  // Sort displayed servers
+  // Sort displayed catalog servers
   const displayServers = useMemo(() => sortMcpServers(rawServers, mcpSort), [rawServers, mcpSort]);
   const runtimeLabel = getRuntimeDisplayName(cliStatus, true);
 
@@ -472,6 +472,56 @@ export const McpServersPanel = ({
           </div>
         ))}
 
+      {/* Installed servers (catalog-style cards for custom installs) */}
+      {installedServers.length > 0 && (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between gap-3">
+            <p className="text-sm font-medium text-text">已安装</p>
+            <Badge variant="secondary" className="font-normal">
+              {installedServers.length}
+            </Badge>
+          </div>
+          <div className="mcp-servers-grid grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
+            {installedServers.map((entry) => {
+              // Find matching catalog item
+              const catalogMatch = browseCatalog.find(
+                (c) => sanitizeMcpServerName(c.name) === entry.name.toLowerCase()
+              );
+              const fakeItem: McpCatalogItem = catalogMatch ?? {
+                id: `custom:${entry.name}`,
+                name: entry.name,
+                description: entry.transport === 'http' ? 'HTTP/SSE 服务器' : 'Stdio 服务器',
+                source: 'official',
+                installSpec: null,
+                envVars: [],
+                requiresAuth: false,
+                tools: [],
+              };
+              const diagnostic =
+                mcpDiagnostics[getMcpDiagnosticKey(entry.name, entry.scope)] ??
+                mcpDiagnostics[getMcpDiagnosticKey(entry.name)] ??
+                mcpDiagnostics[entry.name] ??
+                null;
+
+              return (
+                <McpServerCard
+                  key={`${entry.name}-${entry.scope}`}
+                  server={fakeItem}
+                  isInstalled={true}
+                  installedEntry={entry}
+                  installedEntries={[entry]}
+                  diagnostic={diagnostic}
+                  diagnosticsLoading={mcpDiagnosticsLoading}
+                  onClick={setSelectedMcpServerId}
+                  cliStatus={cliStatus}
+                  cliStatusLoading={cliStatusLoading}
+                />
+              );
+            })}
+          </div>
+        </div>
+      )}
+
       {/* Empty state */}
       {!isLoading && displayServers.length === 0 && (
         <div className="flex flex-col items-center gap-3 rounded-sm border border-dashed border-border px-8 py-16">