@lobehub/lobehub 2.0.0-next.367 → 2.0.0-next.369

package/src/app/[variants]/(main)/agent/profile/features/Header/AgentStatusTag.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { Tag } from '@lobehub/ui';
+import { memo, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { marketApiService } from '@/services/marketApi';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import type { AgentStatus } from '@/types/discover';
+
+/**
+ * Agent Status Tag Component
+ * Displays the market status of the agent (published/unpublished/archived/deprecated)
+ */
+const AgentStatusTag = memo(() => {
+  const { t } = useTranslation('setting');
+  const [status, setStatus] = useState<AgentStatus | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const meta = useAgentStore(agentSelectors.currentAgentMeta);
+  const marketIdentifier = meta?.marketIdentifier;
+
+  useEffect(() => {
+    if (!marketIdentifier) {
+      setStatus(null);
+      return;
+    }
+
+    const fetchAgentStatus = async () => {
+      try {
+        setLoading(true);
+        const agentDetail = await marketApiService.getAgentDetail(marketIdentifier);
+        setStatus(agentDetail.status as AgentStatus | null);
+      } catch (error) {
+        console.error('Failed to fetch agent status:', error);
+        setStatus(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchAgentStatus();
+  }, [marketIdentifier]);
+
+  const statusConfig = useMemo(() => {
+    if (!status) return null;
+
+    const configs = {
+      archived: {
+        color: 'orange',
+        label: t('marketPublish.status.archived', { defaultValue: 'Archived' }),
+      },
+      deprecated: {
+        color: 'red',
+        label: t('marketPublish.status.deprecated', { defaultValue: 'Deprecated' }),
+      },
+      published: {
+        color: 'green',
+        label: t('marketPublish.status.published', { defaultValue: 'Published' }),
+      },
+      unpublished: {
+        color: 'default',
+        label: t('marketPublish.status.unpublished', { defaultValue: 'Unpublished' }),
+      },
+    };
+
+    return configs[status];
+  }, [status, t]);
+
+  if (loading || !statusConfig) return null;
+
+  return (
+    <Tag bordered={false} color={statusConfig.color} style={{ marginRight: 8 }}>
+      {statusConfig.label}
+    </Tag>
+  );
+});
+
+AgentStatusTag.displayName = 'AgentStatusTag';
+
+export default AgentStatusTag;

package/src/app/[variants]/(main)/agent/profile/features/ProfileEditor/AgentHeader.tsx

@@ -17,6 +17,9 @@ import { useFileStore } from '@/store/file';
 import { useGlobalStore } from '@/store/global';
 import { globalGeneralSelectors } from '@/store/global/selectors';
 
+import AgentForkTag from '../Header/AgentForkTag';
+import AgentStatusTag from '../Header/AgentStatusTag';
+
 const MAX_AVATAR_SIZE = 1024 * 1024; // 1MB limit for server actions
 
 const AgentHeader = memo(() => {
@@ -88,6 +91,7 @@ const AgentHeader = memo(() => {
   return (
     <Flexbox
       gap={16}
+      horizontal
       onClick={(e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -97,6 +101,7 @@ const AgentHeader = memo(() => {
         cursor: 'default',
       }}
     >
+      {/* Avatar Section */}
       <EmojiPicker
         allowDelete={!!meta.avatar}
         allowUpload
@@ -147,21 +152,28 @@ const AgentHeader = memo(() => {
         size={72}
         value={meta.avatar}
       />
-      <Input
-        onChange={(e) => {
-          setLocalTitle(e.target.value);
-          debouncedSaveTitle(e.target.value);
-        }}
-        placeholder={t('settingAgent.name.placeholder', { ns: 'setting' })}
-        style={{
-          fontSize: 36,
-          fontWeight: 600,
-          padding: 0,
-          width: '100%',
-        }}
-        value={localTitle}
-        variant={'borderless'}
-      />
+      {/* Title and Tags Section */}
+      <Flexbox flex={1} gap={8} style={{ minWidth: 0 }}>
+        <Input
+          onChange={(e) => {
+            setLocalTitle(e.target.value);
+            debouncedSaveTitle(e.target.value);
+          }}
+          placeholder={t('settingAgent.name.placeholder', { ns: 'setting' })}
+          style={{
+            fontSize: 36,
+            fontWeight: 600,
+            padding: 0,
+            width: '100%',
+          }}
+          value={localTitle}
+          variant={'borderless'}
+        />
+        <Flexbox gap={8} horizontal>
+          <AgentStatusTag />
+          <AgentForkTag />
+        </Flexbox>
+      </Flexbox>
     </Flexbox>
   );
 });

package/src/app/[variants]/(main)/community/(detail)/group_agent/features/Sidebar/ActionButton/ForkGroupAndChat.tsx

@@ -132,6 +132,7 @@ const ForkGroupAndChat = memo<{ mobile?: boolean }>(() => {
         // Group content is the supervisor's systemRole (for backward compatibility)
         content: config.systemRole || supervisorConfig?.systemRole,
         ...meta,
+        marketIdentifier: forkResult.group.identifier, // Store the new market identifier
       };
 
       // Step 5: Prepare member agents from market data

package/src/app/[variants]/(main)/group/profile/features/GroupProfile/GroupForkTag.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { Icon, Tag } from '@lobehub/ui';
+import { GitFork } from 'lucide-react';
+import { memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+import { marketApiService } from '@/services/marketApi';
+import { useAgentGroupStore } from '@/store/agentGroup';
+import { agentGroupSelectors } from '@/store/agentGroup/selectors';
+import type { AgentGroupForkSourceResponse } from '@/types/discover';
+
+/**
+ * Group Fork Tag Component
+ * Displays fork source information if the group is forked from another group
+ */
+const GroupForkTag = memo(() => {
+  const { t } = useTranslation('setting');
+  const navigate = useNavigate();
+  const [forkSource, setForkSource] = useState<AgentGroupForkSourceResponse['source']>(null);
+  const [loading, setLoading] = useState(false);
+
+  const groupMeta = useAgentGroupStore(agentGroupSelectors.currentGroupMeta);
+  const marketIdentifier = groupMeta?.marketIdentifier;
+
+  useEffect(() => {
+    if (!marketIdentifier) {
+      setForkSource(null);
+      return;
+    }
+
+    const fetchGroupForkInfo = async () => {
+      try {
+        setLoading(true);
+
+        // Get fork source info from market using the marketIdentifier
+        const forkSourceResponse =
+          await marketApiService.getAgentGroupForkSource(marketIdentifier);
+
+        setForkSource(forkSourceResponse.source);
+      } catch (error) {
+        console.error('Failed to fetch group fork info:', error);
+        setForkSource(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchGroupForkInfo();
+  }, [marketIdentifier]);
+
+  if (loading || !forkSource) return null;
+
+  const handleClick = () => {
+    if (forkSource?.identifier) {
+      navigate(`/community/group_agent/${forkSource.identifier}`);
+    }
+  };
+
+  return (
+    <Tag
+      bordered={false}
+      color="default"
+      icon={<Icon icon={GitFork} />}
+      onClick={handleClick}
+      style={{ cursor: 'pointer' }}
+      title={t('marketPublish.forkFrom.tooltip', {
+        agent: forkSource.name,
+        defaultValue: `Forked from ${forkSource.name}`,
+      })}
+    >
+      {t('marketPublish.forkFrom.label', { defaultValue: 'Forked from' })} {forkSource.name}
+    </Tag>
+  );
+});
+
+GroupForkTag.displayName = 'GroupForkTag';
+
+export default GroupForkTag;

package/src/app/[variants]/(main)/group/profile/features/GroupProfile/GroupHeader.tsx

@@ -18,6 +18,9 @@ import { useFileStore } from '@/store/file';
 import { useGlobalStore } from '@/store/global';
 import { globalGeneralSelectors } from '@/store/global/selectors';
 
+import GroupForkTag from './GroupForkTag';
+import GroupStatusTag from './GroupStatusTag';
+
 const MAX_AVATAR_SIZE = 1024 * 1024; // 1MB limit for server actions
 
 const GroupHeader = memo(() => {
@@ -89,6 +92,7 @@ const GroupHeader = memo(() => {
   return (
     <Flexbox
       gap={16}
+      horizontal
       onClick={(e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -98,6 +102,7 @@ const GroupHeader = memo(() => {
         cursor: 'default',
       }}
     >
+      {/* Avatar Section */}
       <EmojiPicker
         allowDelete={!!groupMeta.avatar}
         allowUpload
@@ -159,21 +164,28 @@ const GroupHeader = memo(() => {
         size={72}
         value={groupMeta.avatar}
       />
-      <Input
-        onChange={(e) => {
-          setLocalTitle(e.target.value);
-          debouncedSaveTitle(e.target.value);
-        }}
-        placeholder={t('name.placeholder')}
-        style={{
-          fontSize: 36,
-          fontWeight: 600,
-          padding: 0,
-          width: '100%',
-        }}
-        value={localTitle}
-        variant={'borderless'}
-      />
+      {/* Title and Tags Section */}
+      <Flexbox flex={1} gap={8} style={{ minWidth: 0 }}>
+        <Input
+          onChange={(e) => {
+            setLocalTitle(e.target.value);
+            debouncedSaveTitle(e.target.value);
+          }}
+          placeholder={t('name.placeholder')}
+          style={{
+            fontSize: 36,
+            fontWeight: 600,
+            padding: 0,
+            width: '100%',
+          }}
+          value={localTitle}
+          variant={'borderless'}
+        />
+        <Flexbox gap={8} horizontal>
+          <GroupStatusTag />
+          <GroupForkTag />
+        </Flexbox>
+      </Flexbox>
     </Flexbox>
   );
 });

package/src/app/[variants]/(main)/group/profile/features/GroupProfile/GroupStatusTag.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { Tag } from '@lobehub/ui';
+import { memo, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAgentGroupStore } from '@/store/agentGroup';
+import { agentGroupSelectors } from '@/store/agentGroup/selectors';
+import type { AgentStatus } from '@/types/discover';
+
+/**
+ * Group Status Tag Component
+ * Displays the market status of the agent group
+ */
+const GroupStatusTag = memo(() => {
+  const { t } = useTranslation('setting');
+  const [status, setStatus] = useState<AgentStatus | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const meta = useAgentGroupStore(agentGroupSelectors.currentGroupMeta);
+  const marketIdentifier = meta?.marketIdentifier;
+
+  useEffect(() => {
+    if (!marketIdentifier) {
+      setStatus(null);
+      return;
+    }
+
+    const fetchGroupStatus = async () => {
+      try {
+        setLoading(true);
+        // TODO: Use getAgentGroupDetail when available
+        // For now, groups might not have a separate detail endpoint
+        // This is a placeholder - adjust based on actual API
+        setStatus('published'); // Temporary: assume published if has identifier
+      } catch (error) {
+        console.error('Failed to fetch group status:', error);
+        setStatus(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchGroupStatus();
+  }, [marketIdentifier]);
+
+  const statusConfig = useMemo(() => {
+    if (!status) return null;
+
+    const configs = {
+      archived: {
+        color: 'orange',
+        label: t('marketPublish.status.archived', { defaultValue: 'Archived' }),
+      },
+      deprecated: {
+        color: 'red',
+        label: t('marketPublish.status.deprecated', { defaultValue: 'Deprecated' }),
+      },
+      published: {
+        color: 'green',
+        label: t('marketPublish.status.published', { defaultValue: 'Published' }),
+      },
+      unpublished: {
+        color: 'default',
+        label: t('marketPublish.status.unpublished', { defaultValue: 'Unpublished' }),
+      },
+    };
+
+    return configs[status];
+  }, [status, t]);
+
+  if (loading || !statusConfig) return null;
+
+  return (
+    <Tag bordered={false} color={statusConfig.color}>
+      {statusConfig.label}
+    </Tag>
+  );
+});
+
+GroupStatusTag.displayName = 'GroupStatusTag';
+
+export default GroupStatusTag;

package/src/app/[variants]/(main)/settings/skill/features/Actions.tsx

@@ -47,9 +47,6 @@ const Actions = memo<ActionsProps>(({ identifier, type, isMCP }) => {
   const [showModal, setModal] = useState(false);
   const [mcpSettingsOpen, setMcpSettingsOpen] = useState(false);
 
-  // 自定义插件（包括自定义 MCP）使用 EditCustomPlugin
-  // 社区 MCP 使用 McpSettingsModal
-  // 传统插件使用 PluginDetailModal
   const isCommunityMCP = !isCustomPlugin && isMCP;
   const showConfigureButton = isCustomPlugin || isMCP || hasSettings;
 

package/src/app/[variants]/(main)/settings/skill/features/McpSkillItem.tsx

@@ -1,13 +1,14 @@
 'use client';
 
-import { Block, Flexbox, Modal } from '@lobehub/ui';
+import { Flexbox, Modal, Block } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
-import { memo, useState } from 'react';
+import { Suspense, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import PluginAvatar from '@/components/Plugins/PluginAvatar';
 import PluginTag from '@/components/Plugins/PluginTag';
 import McpDetail from '@/features/MCP/MCPDetail';
+import McpDetailLoading from '@/features/MCP/MCPDetail/Loading';
 import PluginDetailModal from '@/features/PluginDetailModal';
 import { useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
@@ -28,6 +29,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     width: 40px;
     height: 40px;
+    border-radius: 12px;
+
+    background: ${cssVar.colorFillTertiary};
   `,
   title: css`
     cursor: pointer;
@@ -91,7 +95,9 @@ const McpSkillItem = memo<McpSkillItemProps>(
             title={t('dev.title.skillDetails')}
             width={800}
           >
-            <McpDetail identifier={identifier} noSettings />
+            <Suspense fallback={<McpDetailLoading />}>
+              <McpDetail identifier={identifier} noSettings />
+            </Suspense>
           </Modal>
         )}
         {isCustomPlugin && (

package/src/app/[variants]/(main)/settings/skill/features/SkillList.tsx

@@ -29,9 +29,9 @@ import { KlavisServerStatus } from '@/store/tool/slices/klavisStore';
 import { LobehubSkillStatus } from '@/store/tool/slices/lobehubSkillStore/types';
 import { type LobeToolType } from '@/types/tool/tool';
 
-import McpSkillItem from './McpSkillItem';
 import KlavisSkillItem from './KlavisSkillItem';
 import LobehubSkillItem from './LobehubSkillItem';
+import McpSkillItem from './McpSkillItem';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
   container: css`
@@ -89,6 +89,9 @@ const SkillList = memo(() => {
 
     // If RECOMMENDED_SKILLS is configured, use it to build the list
     if (RECOMMENDED_SKILLS.length > 0) {
+      const addedLobehubIds = new Set<string>();
+      const addedKlavisIds = new Set<string>();
+
       for (const skill of RECOMMENDED_SKILLS) {
         if (skill.type === RecommendedSkillType.Lobehub && isLobehubSkillEnabled) {
           const provider = getLobehubSkillProviderById(skill.id);
@@ -99,6 +102,37 @@ const SkillList = memo(() => {
           const serverType = getKlavisServerByServerIdentifier(skill.id);
           if (serverType) {
             integrationItems.push({ serverType, type: 'klavis' });
+            addedKlavisIds.add(skill.id);
+          }
+        }
+      }
+
+      // Also add connected Lobehub skills that are not in RECOMMENDED_SKILLS
+      if (isLobehubSkillEnabled) {
+        for (const server of allLobehubSkillServers) {
+          if (
+            server.status === LobehubSkillStatus.CONNECTED &&
+            !addedLobehubIds.has(server.identifier)
+          ) {
+            const provider = getLobehubSkillProviderById(server.identifier);
+            if (provider) {
+              integrationItems.push({ provider, type: 'lobehub' });
+            }
+          }
+        }
+      }
+
+      // Also add connected Klavis skills that are not in RECOMMENDED_SKILLS
+      if (isKlavisEnabled) {
+        for (const server of allKlavisServers) {
+          if (
+            server.status === KlavisServerStatus.CONNECTED &&
+            !addedKlavisIds.has(server.identifier)
+          ) {
+            const serverType = getKlavisServerByServerIdentifier(server.identifier);
+            if (serverType) {
+              integrationItems.push({ serverType, type: 'klavis' });
+            }
           }
         }
       }

package/src/components/Plugins/PluginTag.tsx

@@ -3,6 +3,8 @@ import { BadgeCheck, CircleUser, Package } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import MCPTag from './MCPTag';
+
 interface PluginTagProps {
   author?: string;
   isMCP?: boolean;
@@ -11,28 +13,39 @@ interface PluginTagProps {
   type: 'builtin' | 'customPlugin' | 'plugin';
 }
 
-const PluginTag = memo<PluginTagProps>(({ showIcon = true, author, type, showText = true }) => {
-  const { t } = useTranslation('plugin');
-  const isCustom = type === 'customPlugin';
-  const isOfficial = author === 'LobeHub';
-
-  const customTag = (
-    <Tag color={'warning'} icon={showIcon && <Icon icon={Package} />} size={'small'}>
-      {t('store.customPlugin')}
-    </Tag>
-  );
-
-  if (isCustom) return customTag;
-
-  return (
-    <Tag
-      color={isOfficial ? 'success' : undefined}
-      icon={showIcon && <Icon icon={isOfficial ? BadgeCheck : CircleUser} />}
-      size={'small'}
-    >
-      {showText && (author || t('store.communityPlugin'))}
-    </Tag>
-  );
-});
+const PluginTag = memo<PluginTagProps>(
+  ({ showIcon = true, author, type, showText = true, isMCP }) => {
+    const { t } = useTranslation('plugin');
+    const isCustom = type === 'customPlugin';
+    const isOfficial = author === 'LobeHub';
+
+    const customTag = (
+      <Tag color={'warning'} icon={showIcon && <Icon icon={Package} />} size={'small'}>
+        {t('store.customPlugin')}
+      </Tag>
+    );
+
+    if (isMCP) {
+      return (
+        <>
+          <MCPTag showIcon={showIcon} showText={false} />
+          {isCustom && customTag}
+        </>
+      );
+    }
+
+    if (isCustom) return customTag;
+
+    return (
+      <Tag
+        color={isOfficial ? 'success' : undefined}
+        icon={showIcon && <Icon icon={isOfficial ? BadgeCheck : CircleUser} />}
+        size={'small'}
+      >
+        {showText && (author || t('store.communityPlugin'))}
+      </Tag>
+    );
+  },
+);
 
 export default PluginTag;

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

@@ -1,6 +1,6 @@
 import { Flexbox, Icon, type ItemType, usePopoverContext } from '@lobehub/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
-import { ChevronRight, Settings, Store } from 'lucide-react';
+import { ChevronRight, ExternalLink, Settings, Store } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -53,7 +53,7 @@ const PopoverContent = memo<PopoverContentProps>(({ items, enableKlavis, onOpenS
           <div className={toolsListStyles.itemIcon}>
             <Icon icon={Store} size={20} />
           </div>
-          <div className={toolsListStyles.itemContent}>{t('tools.plugins.store')}</div>
+          <div className={toolsListStyles.itemContent}>{t('skillStore.title')}</div>
           <Icon className={styles.trailingIcon} icon={ChevronRight} size={16} />
         </div>
         <div
@@ -69,7 +69,7 @@ const PopoverContent = memo<PopoverContentProps>(({ items, enableKlavis, onOpenS
             <Icon icon={Settings} size={20} />
           </div>
           <div className={toolsListStyles.itemContent}>{t('tools.plugins.management')}</div>
-          <Icon className={styles.trailingIcon} icon={ChevronRight} size={16} />
+          <Icon className={styles.trailingIcon} icon={ExternalLink} size={16} />
         </div>
       </div>
     </Flexbox>