🐛 fix: fixed in community pluings tab the lobehub skills not display (#12141)

* fix: fixed in community pluings tab the lobehub skills not display

* fix: add the builtin tools show & jump to mcp indentier

src/app/[variants]/(main)/community/(detail)/agent/features/Details/Capabilities/PluginItem.tsx

@@ -1,4 +1,9 @@
-import { KLAVIS_SERVER_TYPES, type KlavisServerType } from '@lobechat/const';
+import {
+  KLAVIS_SERVER_TYPES,
+  getLobehubSkillProviderById,
+  type KlavisServerType,
+  type LobehubSkillProviderType,
+} from '@lobechat/const';
 import { type DiscoverPluginDetail, type PluginSource } from '@lobechat/types';
 import { Avatar, Block, Flexbox, Icon, Image, Skeleton, Tag, Text } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
@@ -8,13 +13,16 @@ import { Link } from 'react-router-dom';
 import urlJoin from 'url-join';
 
 import { useDiscoverStore } from '@/store/discover';
+import { builtinTools } from '@/tools';
 
 /**
- * Klavis icon component
+ * Icon component for built-in tools (Klavis & LobehubSkill)
  * For string type icon, use Image component to render
  * For IconType type icon, use Icon component to render with theme fill color
  */
-const KlavisIcon = memo<Pick<KlavisServerType, 'icon' | 'label'>>(({ icon, label }) => {
+const BuiltinToolIcon = memo<
+  Pick<KlavisServerType | LobehubSkillProviderType, 'icon' | 'label'>
+>(({ icon, label }) => {
   if (typeof icon === 'string') {
     return <Image alt={label} height={40} src={icon} style={{ flex: 'none' }} width={40} />;
   }
@@ -23,7 +31,7 @@ const KlavisIcon = memo<Pick<KlavisServerType, 'icon' | 'label'>>(({ icon, label
   return <Icon fill={cssVar.colorText} icon={icon} size={40} />;
 });
 
-KlavisIcon.displayName = 'KlavisIcon';
+BuiltinToolIcon.displayName = 'BuiltinToolIcon';
 
 const styles = createStaticStyles(({ css, cssVar }) => {
   return {
@@ -75,27 +83,79 @@ const PluginItem = memo<PluginItemProps>(({ identifier }) => {
     return KLAVIS_SERVER_TYPES.find((tool) => tool.identifier === identifier);
   }, [identifier]);
 
-  // Convert Klavis tool to plugin detail format
+  // Try to get LobehubSkill info if API returns no data
+  const lobehubSkill = useMemo(() => {
+    return getLobehubSkillProviderById(identifier);
+  }, [identifier]);
+
+  // Try to get builtin tool info if API returns no data
+  const builtinTool = useMemo(() => {
+    return builtinTools.find((tool) => tool.identifier === identifier);
+  }, [identifier]);
+
+  // Convert built-in tools to plugin detail format
   const data: DiscoverPluginDetail | undefined = useMemo(() => {
     if (apiData) return apiData;
-    if (!klavisTool) return undefined;
 
-    return {
-      author: 'Klavis',
-      avatar: '', // Avatar will be rendered by KlavisIcon component
-      category: undefined,
-      createdAt: '',
-      description: `LobeHub Mcp Server: ${klavisTool.label}`,
-      homepage: 'https://klavis.ai',
-      identifier: klavisTool.identifier,
-      manifest: undefined,
-      related: [],
-      schemaVersion: 1,
-      source: 'builtin' as const,
-      tags: ['klavis', 'mcp'],
-      title: klavisTool.label,
-    };
-  }, [apiData, klavisTool]);
+    // Check Klavis tools
+    if (klavisTool) {
+      return {
+        author: 'Klavis',
+        avatar: '', // Avatar will be rendered by BuiltinToolIcon component
+        category: undefined,
+        createdAt: '',
+        description: `LobeHub Mcp Server: ${klavisTool.label}`,
+        homepage: 'https://klavis.ai',
+        identifier: klavisTool.identifier,
+        manifest: undefined,
+        related: [],
+        schemaVersion: 1,
+        source: 'builtin' as const,
+        tags: ['klavis', 'mcp'],
+        title: klavisTool.label,
+      };
+    }
+
+    // Check LobehubSkill providers
+    if (lobehubSkill) {
+      return {
+        author: lobehubSkill.author,
+        avatar: '', // Avatar will be rendered by BuiltinToolIcon component
+        category: undefined,
+        createdAt: '',
+        description: lobehubSkill.description,
+        homepage: lobehubSkill.authorUrl || 'https://lobehub.com',
+        identifier: lobehubSkill.id,
+        manifest: undefined,
+        related: [],
+        schemaVersion: 1,
+        source: 'builtin' as const,
+        tags: ['lobehub-skill'],
+        title: lobehubSkill.label,
+      };
+    }
+
+    // Check builtin tools (like lobe-cloud-sandbox, lobe-memory, etc.)
+    if (builtinTool) {
+      return {
+        author: 'LobeHub',
+        avatar: builtinTool.manifest.meta.avatar || '',
+        category: undefined,
+        createdAt: '',
+        description: builtinTool.manifest.meta.description || '',
+        homepage: 'https://lobehub.com',
+        identifier: builtinTool.identifier,
+        manifest: undefined,
+        related: [],
+        schemaVersion: 1,
+        source: 'builtin' as const,
+        tags: builtinTool.manifest.meta.tags || ['builtin-tool'],
+        title: builtinTool.manifest.meta.title,
+      };
+    }
+
+    return undefined;
+  }, [apiData, klavisTool, lobehubSkill, builtinTool]);
 
   const sourceConfig = useMemo(() => {
     const source: PluginSource = data?.source || 'market';
@@ -124,7 +184,7 @@ const PluginItem = memo<PluginItemProps>(({ identifier }) => {
       default: {
         return {
           clickable: true,
-          href: urlJoin('/community/plugin', identifier),
+          href: urlJoin('/community/mcp', identifier),
           isExternal: false,
           tagColor: undefined,
           tagText: undefined,
@@ -143,10 +203,13 @@ const PluginItem = memo<PluginItemProps>(({ identifier }) => {
   // If loading is complete but no data found, don't render anything
   if (!data) return null;
 
-  // Render avatar - use KlavisIcon for Klavis tools, Avatar for others
+  // Render avatar - use BuiltinToolIcon for built-in tools, Avatar for others
   const renderAvatar = () => {
     if (klavisTool) {
-      return <KlavisIcon icon={klavisTool.icon} label={klavisTool.label} />;
+      return <BuiltinToolIcon icon={klavisTool.icon} label={klavisTool.label} />;
+    }
+    if (lobehubSkill) {
+      return <BuiltinToolIcon icon={lobehubSkill.icon} label={lobehubSkill.label} />;
     }
     return <Avatar avatar={data.avatar} shape={'square'} size={40} style={{ flex: 'none' }} />;
   };