@lobehub/lobehub 2.0.0-next.338 → 2.0.0-next.339

package/src/features/ChatInput/ActionBar/Tools/useControls.tsx

@@ -3,6 +3,8 @@ import {
   type KlavisServerType,
   LOBEHUB_SKILL_PROVIDERS,
   type LobehubSkillProviderType,
+  RECOMMENDED_SKILLS,
+  RecommendedSkillType,
 } from '@lobechat/const';
 import { Avatar, Flexbox, Icon, Image, type ItemType } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
@@ -123,11 +125,44 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
     [builtinList, allKlavisTypeIdentifiers, isKlavisEnabledInEnv],
   );
 
-  // Klavis 服务器列表项
+  // 获取推荐的 Klavis skill IDs
+  const recommendedKlavisIds = useMemo(
+    () =>
+      new Set(
+        RECOMMENDED_SKILLS.filter((s) => s.type === RecommendedSkillType.Klavis).map((s) => s.id),
+      ),
+    [],
+  );
+
+  // 获取推荐的 Lobehub skill IDs
+  const recommendedLobehubIds = useMemo(
+    () =>
+      new Set(
+        RECOMMENDED_SKILLS.filter((s) => s.type === RecommendedSkillType.Lobehub).map((s) => s.id),
+      ),
+    [],
+  );
+
+  // 获取已安装的 Klavis server IDs
+  const installedKlavisIds = useMemo(
+    () => new Set(allKlavisServers.map((s) => s.identifier)),
+    [allKlavisServers],
+  );
+
+  // 获取已安装的 Lobehub skill IDs
+  const installedLobehubIds = useMemo(
+    () => new Set(allLobehubSkillServers.map((s) => s.identifier)),
+    [allLobehubSkillServers],
+  );
+
+  // Klavis 服务器列表项 - 只展示已安装或推荐的
   const klavisServerItems = useMemo(
     () =>
       isKlavisEnabledInEnv
-        ? KLAVIS_SERVER_TYPES.map((type) => ({
+        ? KLAVIS_SERVER_TYPES.filter(
+            (type) =>
+              installedKlavisIds.has(type.identifier) || recommendedKlavisIds.has(type.identifier),
+          ).map((type) => ({
             icon: <KlavisIcon icon={type.icon} label={type.label} />,
             key: type.identifier,
             label: (
@@ -140,27 +175,29 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
             ),
           }))
         : [],
-    [isKlavisEnabledInEnv, allKlavisServers],
+    [isKlavisEnabledInEnv, allKlavisServers, installedKlavisIds, recommendedKlavisIds],
   );
 
-  // LobeHub Skill Provider 列表项
+  // LobeHub Skill Provider 列表项 - 只展示已安装或推荐的
   const lobehubSkillItems = useMemo(
     () =>
       isLobehubSkillEnabled
-        ? LOBEHUB_SKILL_PROVIDERS.map((provider) => ({
+        ? LOBEHUB_SKILL_PROVIDERS.filter(
+            (provider) =>
+              installedLobehubIds.has(provider.id) || recommendedLobehubIds.has(provider.id),
+          ).map((provider) => ({
             icon: <LobehubSkillIcon icon={provider.icon} label={provider.label} />,
             key: provider.id, // 使用 provider.id 作为 key，与 pluginId 保持一致
             label: <LobehubSkillServerItem label={provider.label} provider={provider.id} />,
           }))
         : [],
-    [isLobehubSkillEnabled, allLobehubSkillServers],
+    [isLobehubSkillEnabled, allLobehubSkillServers, installedLobehubIds, recommendedLobehubIds],
   );
 
-  // 合并 builtin 工具、Klavis 服务器和 LobeHub Skill Provider
+  // Builtin 工具列表项（不包含 Klavis 和 LobeHub Skill）
   const builtinItems = useMemo(
-    () => [
-      // 原有的 builtin 工具
-      ...filteredBuiltinList.map((item) => ({
+    () =>
+      filteredBuiltinList.map((item) => ({
         icon: (
           <Avatar avatar={item.meta.avatar} shape={'square'} size={20} style={{ flex: 'none' }} />
         ),
@@ -178,14 +215,59 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
           />
         ),
       })),
-      // LobeHub Skill Providers
-      ...lobehubSkillItems,
-      // Klavis 服务器
-      ...klavisServerItems,
-    ],
-    [filteredBuiltinList, klavisServerItems, lobehubSkillItems, checked, togglePlugin, setUpdating],
+    [filteredBuiltinList, checked, togglePlugin, setUpdating],
   );
 
+  // Skills 列表项（包含 LobeHub Skill 和 Klavis）
+  const skillItems = useMemo(
+    () => [...lobehubSkillItems, ...klavisServerItems],
+    [lobehubSkillItems, klavisServerItems],
+  );
+
+  // 区分社区插件和自定义插件
+  const communityPlugins = list.filter((item) => item.type !== 'customPlugin');
+  const customPlugins = list.filter((item) => item.type === 'customPlugin');
+
+  // 生成插件列表项的函数
+  const mapPluginToItem = (item: (typeof list)[0]) => ({
+    icon: item?.avatar ? (
+      <PluginAvatar avatar={item.avatar} size={20} />
+    ) : (
+      <Icon icon={ToyBrick} size={20} />
+    ),
+    key: item.identifier,
+    label: (
+      <ToolItem
+        checked={checked.includes(item.identifier)}
+        id={item.identifier}
+        label={item.title}
+        onUpdate={async () => {
+          setUpdating(true);
+          await togglePlugin(item.identifier);
+          setUpdating(false);
+        }}
+      />
+    ),
+  });
+
+  // 构建 Skills 分组的 children
+  const skillGroupChildren: ItemType[] = [
+    // 1. LobeHub Skill 和 Klavis
+    ...skillItems,
+    // 2. divider (如果有 skillItems 且有社区插件)
+    ...(skillItems.length > 0 && communityPlugins.length > 0
+      ? [{ key: 'divider-skill-community', type: 'divider' as const }]
+      : []),
+    // 3. 社区插件
+    ...communityPlugins.map(mapPluginToItem),
+    // 4. divider (如果有自定义插件)
+    ...(customPlugins.length > 0
+      ? [{ key: 'divider-community-custom', type: 'divider' as const }]
+      : []),
+    // 5. 自定义插件
+    ...customPlugins.map(mapPluginToItem),
+  ];
+
   // 市场 tab 的 items
   const marketItems: ItemType[] = [
     {
@@ -195,26 +277,7 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
       type: 'group',
     },
     {
-      children: list.map((item) => ({
-        icon: item?.avatar ? (
-          <PluginAvatar avatar={item.avatar} size={20} />
-        ) : (
-          <Icon icon={ToyBrick} size={20} />
-        ),
-        key: item.identifier,
-        label: (
-          <ToolItem
-            checked={checked.includes(item.identifier)}
-            id={item.identifier}
-            label={item.title}
-            onUpdate={async () => {
-              setUpdating(true);
-              await togglePlugin(item.identifier);
-              setUpdating(false);
-            }}
-          />
-        ),
-      })),
+      children: skillGroupChildren,
       key: 'plugins',
       label: (
         <Flexbox align={'center'} gap={40} horizontal justify={'space-between'}>
@@ -256,7 +319,16 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
         ),
       }));
 
-    // 已连接的 Klavis 服务器（放在 builtin 里面）
+    if (enabledBuiltinItems.length > 0) {
+      installedItems.push({
+        children: enabledBuiltinItems,
+        key: 'installed-builtins',
+        label: t('tools.builtins.groupName'),
+        type: 'group',
+      });
+    }
+
+    // 已连接的 Klavis 服务器
     const connectedKlavisItems = klavisServerItems.filter((item) =>
       checked.includes(item.key as string),
     );
@@ -266,24 +338,35 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
       checked.includes(item.key as string),
     );
 
-    // 合并 builtin、Klavis 和 LobeHub Skill
-    const allBuiltinItems = [
-      ...enabledBuiltinItems,
-      ...connectedKlavisItems,
-      ...connectedLobehubSkillItems,
-    ];
+    // 合并已启用的 LobeHub Skill 和 Klavis
+    const enabledSkillItems = [...connectedLobehubSkillItems, ...connectedKlavisItems];
 
-    if (allBuiltinItems.length > 0) {
-      installedItems.push({
-        children: allBuiltinItems,
-        key: 'installed-builtins',
-        label: t('tools.builtins.groupName'),
-        type: 'group',
-      });
-    }
+    // 已启用的社区插件
+    const enabledCommunityPlugins = communityPlugins
+      .filter((item) => checked.includes(item.identifier))
+      .map((item) => ({
+        icon: item?.avatar ? (
+          <PluginAvatar avatar={item.avatar} size={20} />
+        ) : (
+          <Icon icon={ToyBrick} size={20} />
+        ),
+        key: item.identifier,
+        label: (
+          <ToolItem
+            checked={true}
+            id={item.identifier}
+            label={item.title}
+            onUpdate={async () => {
+              setUpdating(true);
+              await togglePlugin(item.identifier);
+              setUpdating(false);
+            }}
+          />
+        ),
+      }));
 
-    // 已安装的插件
-    const installedPlugins = list
+    // 已启用的自定义插件
+    const enabledCustomPlugins = customPlugins
       .filter((item) => checked.includes(item.identifier))
       .map((item) => ({
         icon: item?.avatar ? (
@@ -306,9 +389,27 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
         ),
       }));
 
-    if (installedPlugins.length > 0) {
+    // 构建 Skills 分组的 children（带 divider）
+    const allSkillItems: ItemType[] = [
+      // 1. LobeHub Skill 和 Klavis
+      ...enabledSkillItems,
+      // 2. divider (如果有 skillItems 且有社区插件)
+      ...(enabledSkillItems.length > 0 && enabledCommunityPlugins.length > 0
+        ? [{ key: 'installed-divider-skill-community', type: 'divider' as const }]
+        : []),
+      // 3. 社区插件
+      ...enabledCommunityPlugins,
+      // 4. divider (如果有自定义插件)
+      ...(enabledCustomPlugins.length > 0
+        ? [{ key: 'installed-divider-community-custom', type: 'divider' as const }]
+        : []),
+      // 5. 自定义插件
+      ...enabledCustomPlugins,
+    ];
+
+    if (allSkillItems.length > 0) {
       installedItems.push({
-        children: installedPlugins,
+        children: allSkillItems,
         key: 'installed-plugins',
         label: t('tools.plugins.groupName'),
         type: 'group',
@@ -318,7 +419,8 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
     return installedItems;
   }, [
     filteredBuiltinList,
-    list,
+    communityPlugins,
+    customPlugins,
     klavisServerItems,
     lobehubSkillItems,
     checked,

package/src/features/IntegrationDetailModal/index.tsx

@@ -0,0 +1,293 @@
+'use client';
+
+import {
+  type KlavisServerType,
+  type LobehubSkillProviderType,
+  getKlavisServerByServerIdentifier,
+  getLobehubSkillProviderById,
+} from '@lobechat/const';
+import { Flexbox, Icon, Image, Modal, Tag, Text, Typography } from '@lobehub/ui';
+import { Button, Divider } from 'antd';
+import { createStyles, cssVar } from 'antd-style';
+import { ExternalLink, Loader2, SquareArrowOutUpRight } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useToolStore } from '@/store/tool';
+import { klavisStoreSelectors, lobehubSkillStoreSelectors } from '@/store/tool/selectors';
+import { KlavisServerStatus } from '@/store/tool/slices/klavisStore';
+import { LobehubSkillStatus } from '@/store/tool/slices/lobehubSkillStore/types';
+
+const useStyles = createStyles(({ css, token }) => ({
+  authorLink: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+
+    color: ${token.colorPrimary};
+
+    &:hover {
+      text-decoration: underline;
+    }
+  `,
+  detailItem: css`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  `,
+  detailLabel: css`
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+  `,
+  header: css`
+    display: flex;
+    gap: 16px;
+    align-items: center;
+
+    padding: 16px;
+    border-radius: 12px;
+
+    background: ${token.colorFillTertiary};
+  `,
+  icon: css`
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    width: 56px;
+    height: 56px;
+    border-radius: 12px;
+
+    background: ${token.colorBgContainer};
+  `,
+  introduction: css`
+    font-size: 14px;
+    line-height: 1.8;
+    color: ${token.colorText};
+  `,
+  sectionTitle: css`
+    font-size: 14px;
+    font-weight: 600;
+    color: ${token.colorText};
+  `,
+  title: css`
+    font-size: 18px;
+    font-weight: 600;
+    color: ${token.colorText};
+  `,
+  toolTag: css`
+    font-family: ${token.fontFamilyCode};
+    font-size: 12px;
+  `,
+  toolsContainer: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  `,
+  trustWarning: css`
+    font-size: 12px;
+    line-height: 1.6;
+    color: ${token.colorTextTertiary};
+  `,
+}));
+
+export type IntegrationType = 'klavis' | 'lobehub';
+
+export interface IntegrationDetailModalProps {
+  identifier: string;
+  isConnecting?: boolean;
+  onClose: () => void;
+  onConnect?: () => void;
+  open: boolean;
+  type: IntegrationType;
+}
+
+const IntegrationDetailModal = memo<IntegrationDetailModalProps>(
+  ({ open, onClose, type, identifier, isConnecting, onConnect }) => {
+    const { styles } = useStyles();
+    const { t } = useTranslation(['plugin', 'setting']);
+
+    // Get static config based on type
+    const config = useMemo((): KlavisServerType | LobehubSkillProviderType | undefined => {
+      if (type === 'klavis') {
+        return getKlavisServerByServerIdentifier(identifier);
+      }
+      return getLobehubSkillProviderById(identifier);
+    }, [type, identifier]);
+
+    // Get dynamic state from store
+    const klavisServers = useToolStore(klavisStoreSelectors.getServers);
+    const lobehubSkillServers = useToolStore(lobehubSkillStoreSelectors.getServers);
+
+    const serverState = useMemo(() => {
+      if (type === 'klavis') {
+        return klavisServers.find((s) => s.identifier === identifier);
+      }
+      return lobehubSkillServers.find((s) => s.identifier === identifier);
+    }, [type, identifier, klavisServers, lobehubSkillServers]);
+
+    const isConnected = useMemo(() => {
+      if (!serverState) return false;
+      if (type === 'klavis') {
+        return serverState.status === KlavisServerStatus.CONNECTED;
+      }
+      return serverState.status === LobehubSkillStatus.CONNECTED;
+    }, [type, serverState]);
+
+    const tools = useMemo(() => {
+      return serverState?.tools?.map((tool) => tool.name) || [];
+    }, [serverState]);
+
+    if (!config) return null;
+
+    const { author, authorUrl, description, icon, introduction, label } = config;
+
+    // Get identifier for i18n keys
+    const i18nIdentifier =
+      type === 'klavis'
+        ? (config as KlavisServerType).identifier
+        : (config as LobehubSkillProviderType).id;
+    const i18nPrefix = type === 'klavis' ? 'tools.klavis.servers' : 'tools.lobehubSkill.providers';
+
+    const localizedDescription = t(`${i18nPrefix}.${i18nIdentifier}.description`, {
+      defaultValue: description,
+      ns: 'setting',
+    });
+    const localizedIntroduction = t(`${i18nPrefix}.${i18nIdentifier}.introduction`, {
+      defaultValue: introduction,
+      ns: 'setting',
+    });
+
+    const renderIcon = () => {
+      if (typeof icon === 'string') {
+        return <Image alt={label} height={36} src={icon} width={36} />;
+      }
+      return <Icon fill={cssVar.colorText} icon={icon} size={36} />;
+    };
+
+    const handleAuthorClick = () => {
+      if (authorUrl) {
+        window.open(authorUrl, '_blank', 'noopener,noreferrer');
+      }
+    };
+
+    const renderConnectButton = () => {
+      if (isConnected) return null;
+      if (!onConnect) return null;
+
+      if (isConnecting) {
+        return (
+          <Button disabled icon={<Icon icon={Loader2} spin />} type="default">
+            {t('tools.klavis.connect', { defaultValue: 'Connect', ns: 'setting' })}
+          </Button>
+        );
+      }
+
+      return (
+        <Button icon={<Icon icon={SquareArrowOutUpRight} />} onClick={onConnect} type="primary">
+          {t('tools.klavis.connect', { defaultValue: 'Connect', ns: 'setting' })}
+        </Button>
+      );
+    };
+
+    return (
+      <Modal
+        destroyOnHidden
+        footer={null}
+        onCancel={onClose}
+        open={open}
+        title={t('dev.title.skillDetails')}
+        width={800}
+      >
+        <Flexbox gap={20}>
+          {/* Header */}
+          <Flexbox
+            align="center"
+            className={styles.header}
+            horizontal
+            justify="space-between"
+            style={{ flexWrap: 'nowrap' }}
+          >
+            <Flexbox align="center" gap={16} horizontal>
+              <div className={styles.icon}>{renderIcon()}</div>
+              <Flexbox gap={4}>
+                <span className={styles.title}>{label}</span>
+                <Text style={{ fontSize: 14 }} type="secondary">
+                  {localizedDescription}
+                </Text>
+              </Flexbox>
+            </Flexbox>
+            {renderConnectButton()}
+          </Flexbox>
+
+          {/* Introduction */}
+          <Typography className={styles.introduction}>{localizedIntroduction}</Typography>
+
+          {/* Developed by */}
+          <Flexbox gap={8}>
+            <Flexbox align="center" gap={4} horizontal>
+              <span className={styles.sectionTitle}>{t('integrationDetail.developedBy')}</span>
+              <span
+                className={styles.authorLink}
+                onClick={handleAuthorClick}
+                style={{ cursor: authorUrl ? 'pointer' : 'default' }}
+              >
+                {author}
+                {authorUrl && <Icon icon={ExternalLink} size={12} />}
+              </span>
+            </Flexbox>
+            <Text className={styles.trustWarning} type="secondary">
+              {t('integrationDetail.trustWarning')}
+            </Text>
+          </Flexbox>
+
+          {/* Tools */}
+          {tools.length > 0 && (
+            <>
+              <Divider style={{ margin: 0 }} />
+              <Flexbox gap={12}>
+                <Flexbox align="center" gap={8} horizontal>
+                  <span className={styles.sectionTitle}>{t('integrationDetail.tools')}</span>
+                  <Tag>{tools.length}</Tag>
+                </Flexbox>
+                <div className={styles.toolsContainer}>
+                  {tools.map((tool) => (
+                    <Tag className={styles.toolTag} key={tool}>
+                      {tool}
+                    </Tag>
+                  ))}
+                </div>
+              </Flexbox>
+            </>
+          )}
+
+          {/* Details */}
+          <Divider style={{ margin: 0 }} />
+          <Flexbox gap={12}>
+            <span className={styles.sectionTitle}>{t('integrationDetail.details')}</span>
+            <Flexbox gap={16} horizontal>
+              <div className={styles.detailItem}>
+                <span className={styles.detailLabel}>{t('integrationDetail.author')}</span>
+                <span
+                  className={styles.authorLink}
+                  onClick={handleAuthorClick}
+                  style={{ cursor: authorUrl ? 'pointer' : 'default' }}
+                >
+                  {author}
+                  {authorUrl && <Icon icon={ExternalLink} size={12} />}
+                </span>
+              </div>
+            </Flexbox>
+          </Flexbox>
+        </Flexbox>
+      </Modal>
+    );
+  },
+);
+
+IntegrationDetailModal.displayName = 'IntegrationDetailModal';
+
+export default IntegrationDetailModal;

package/src/features/{PluginStore/McpList/Detail → MCP/MCPDetail}/index.tsx

@@ -11,18 +11,20 @@ import Nav from '@/features/MCPPluginDetail/Nav';
 import Overview from '@/features/MCPPluginDetail/Overview';
 import Schema from '@/features/MCPPluginDetail/Schema';
 import Score from '@/features/MCPPluginDetail/Score';
-import DetailLoading from '@/features/PluginStore/McpList/Detail/Loading';
 import { useDiscoverStore } from '@/store/discover';
 import { useToolStore } from '@/store/tool';
 import { McpNavKey } from '@/types/discover';
 
-import Settings from './Settings';
+import Settings from '../MCPSettings';
+import Loading from './Loading';
 
 interface DetailProps {
+  defaultTab?: McpNavKey;
   identifier?: string;
+  noSettings?: boolean;
 }
-const Detail = memo<DetailProps>(({ identifier: defaultIdentifier }) => {
-  const [activeTab, setActiveTab] = useState(McpNavKey.Overview);
+const Detail = memo<DetailProps>(({ identifier: defaultIdentifier, defaultTab, noSettings }) => {
+  const [activeTab, setActiveTab] = useState(defaultTab ?? McpNavKey.Overview);
   const { t } = useTranslation('plugin');
 
   const theme = useTheme(); // Keep for colorBgContainerSecondary (not in cssVar)
@@ -36,7 +38,9 @@ const Detail = memo<DetailProps>(({ identifier: defaultIdentifier }) => {
   const useMcpDetail = useDiscoverStore((s) => s.useFetchMcpDetail);
   const { data, isLoading } = useMcpDetail({ identifier });
 
-  if (!isMcpListInit || isLoading) return <DetailLoading />;
+  // 如果有明确传入的 identifier，跳过 isMcpListInit 检查
+  const shouldWaitForInit = !defaultIdentifier && !isMcpListInit;
+  if (shouldWaitForInit || isLoading) return <Loading />;
 
   if (!identifier)
     return (
@@ -60,7 +64,12 @@ const Detail = memo<DetailProps>(({ identifier: defaultIdentifier }) => {
     <DetailProvider config={data}>
       <Flexbox gap={16}>
         <Header inModal />
-        <Nav activeTab={activeTab as McpNavKey} inModal setActiveTab={setActiveTab} />
+        <Nav
+          activeTab={activeTab as McpNavKey}
+          inModal
+          noSettings={noSettings}
+          setActiveTab={setActiveTab}
+        />
         <Flexbox gap={24}>
           {activeTab === McpNavKey.Settings && <Settings identifier={identifier} />}
           {activeTab === McpNavKey.Overview && <Overview inModal />}

package/src/features/MCP/MCPSettings/McpSettingsModal.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { Button, Flexbox, Modal } from '@lobehub/ui';
+import { memo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Settings, { type SettingsRef } from './index';
+
+interface McpSettingsModalProps {
+  identifier: string;
+  onClose: () => void;
+  open: boolean;
+}
+
+const McpSettingsModal = memo<McpSettingsModalProps>(({ identifier, open, onClose }) => {
+  const { t } = useTranslation(['plugin', 'common']);
+  const settingsRef = useRef<SettingsRef>(null);
+
+  const footer = (
+    <Flexbox horizontal justify="space-between" style={{ width: '100%' }}>
+      <Button
+        onClick={() => {
+          settingsRef.current?.reset();
+        }}
+      >
+        {t('common:reset')}
+      </Button>
+      <Flexbox gap={8} horizontal>
+        <Button onClick={onClose}>{t('common:cancel')}</Button>
+        <Button
+          onClick={() => {
+            settingsRef.current?.save();
+          }}
+          type="primary"
+        >
+          {t('common:save')}
+        </Button>
+      </Flexbox>
+    </Flexbox>
+  );
+
+  return (
+    <Modal
+      destroyOnHidden
+      footer={footer}
+      onCancel={onClose}
+      open={open}
+      title={t('plugin:dev.title.skillSettings')}
+      width={600}
+    >
+      <Settings hideFooter identifier={identifier} ref={settingsRef} />
+    </Modal>
+  );
+});
+
+McpSettingsModal.displayName = 'McpSettingsModal';
+
+export default McpSettingsModal;