@lobehub/lobehub 2.0.0-next.344 → 2.0.0-next.346

package/src/app/(backend)/middleware/auth/utils.test.ts

@@ -1,9 +1,7 @@
-import { type AuthObject } from '@clerk/backend';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { checkAuthMethod } from './utils';
 
-let enableClerkMock = false;
 let enableNextAuthMock = false;
 let enableBetterAuthMock = false;
 
@@ -12,9 +10,6 @@ vi.mock('@/envs/auth', async (importOriginal) => {
 
   return {
     ...(data as any),
-    get enableClerk() {
-      return enableClerkMock;
-    },
     get enableBetterAuth() {
       return enableBetterAuthMock;
     },
@@ -29,29 +24,6 @@ describe('checkAuthMethod', () => {
     vi.clearAllMocks();
   });
 
-  it('should pass with valid Clerk auth', () => {
-    enableClerkMock = true;
-    expect(() =>
-      checkAuthMethod({
-        clerkAuth: { userId: 'someUserId' } as AuthObject,
-      }),
-    ).not.toThrow();
-
-    enableClerkMock = false;
-  });
-
-  it('should throw error with invalid Clerk auth', () => {
-    enableClerkMock = true;
-    try {
-      checkAuthMethod({
-        clerkAuth: {} as any,
-      });
-    } catch (e) {
-      expect(e).toEqual({ errorType: 'InvalidClerkUser' });
-    }
-    enableClerkMock = false;
-  });
-
   it('should pass with valid Next auth', () => {
     enableNextAuthMock = true;
     expect(() =>

package/src/app/(backend)/middleware/auth/utils.ts

@@ -1,13 +1,8 @@
-import { type AuthObject } from '@clerk/backend';
-import { AgentRuntimeError } from '@lobechat/model-runtime';
-import { ChatErrorType } from '@lobechat/types';
-
-import { enableBetterAuth, enableClerk, enableNextAuth } from '@/envs/auth';
+import { enableBetterAuth, enableNextAuth } from '@/envs/auth';
 
 interface CheckAuthParams {
   apiKey?: string;
   betterAuthAuthorized?: boolean;
-  clerkAuth?: AuthObject;
   nextAuthAuthorized?: boolean;
 }
 /**
@@ -16,20 +11,10 @@ interface CheckAuthParams {
  * @param {CheckAuthParams} params - Authentication parameters extracted from headers.
  * @param {string} [params.apiKey] - The user API key.
  * @param {boolean} [params.betterAuthAuthorized] - Whether the Better Auth session exists.
- * @param {AuthObject} [params.clerkAuth] - Clerk authentication payload from middleware.
  * @param {boolean} [params.nextAuthAuthorized] - Whether the OAuth 2 header is provided.
- * @throws {AgentRuntimeError} If authentication fails.
  */
 export const checkAuthMethod = (params: CheckAuthParams) => {
-  const { apiKey, betterAuthAuthorized, nextAuthAuthorized, clerkAuth } = params;
-  // clerk auth handler
-  if (enableClerk) {
-    // if there is no userId, means the use is not login, just throw error
-    if (!(clerkAuth as any)?.userId)
-      throw AgentRuntimeError.createError(ChatErrorType.InvalidClerkUser);
-    // if the user is login, just return
-    else return;
-  }
+  const { apiKey, betterAuthAuthorized, nextAuthAuthorized } = params;
 
   // if better auth session exists
   if (enableBetterAuth && betterAuthAuthorized) return;

package/src/app/(backend)/webapi/chat/[provider]/route.test.ts

@@ -1,5 +1,4 @@
 // @vitest-environment node
-import { getAuth } from '@clerk/nextjs/server';
 import { LobeRuntimeAI, ModelRuntime } from '@lobechat/model-runtime';
 import { ChatErrorType } from '@lobechat/types';
 import { getXorPayload } from '@lobechat/utils/server';
@@ -11,10 +10,6 @@ import { initModelRuntimeFromDB } from '@/server/modules/ModelRuntime';
 
 import { POST } from './route';
 
-vi.mock('@clerk/nextjs/server', () => ({
-  getAuth: vi.fn(),
-}));
-
 vi.mock('@/app/(backend)/middleware/auth/utils', () => ({
   checkAuthMethod: vi.fn(),
 }));
@@ -28,17 +23,11 @@ vi.mock('@/server/modules/ModelRuntime', () => ({
   createTraceOptions: vi.fn().mockReturnValue({}),
 }));
 
-// Use vi.hoisted to ensure mockState is initialized before mocks are set up
-const mockState = vi.hoisted(() => ({ enableClerk: false }));
-
-// 模拟 @/const/auth 模块
 vi.mock('@/envs/auth', async (importOriginal) => {
-  const modules = await importOriginal();
+  const actual = await importOriginal<typeof import('@/envs/auth')>();
   return {
-    ...(modules as any),
-    get enableClerk() {
-      return mockState.enableClerk;
-    },
+    ...actual,
+    enableBetterAuth: false,
   };
 });
 
@@ -58,7 +47,6 @@ beforeEach(() => {
 afterEach(() => {
   // 清除模拟调用历史
   vi.clearAllMocks();
-  mockState.enableClerk = false;
 });
 
 describe('POST handler', () => {
@@ -108,42 +96,6 @@ describe('POST handler', () => {
       });
     });
 
-    it('should have pass clerk Auth when enable clerk', async () => {
-      mockState.enableClerk = true;
-
-      vi.mocked(getXorPayload).mockReturnValueOnce({
-        apiKey: 'test-api-key',
-        azureApiVersion: 'v1',
-      });
-
-      const mockParams = Promise.resolve({ provider: 'test-provider' });
-      vi.mocked(getAuth).mockReturnValue({} as any);
-      vi.mocked(checkAuthMethod).mockReset();
-
-      const mockRuntime: LobeRuntimeAI = { baseURL: 'abc', chat: vi.fn() };
-
-      // Mock initModelRuntimeFromDB
-      vi.mocked(initModelRuntimeFromDB).mockResolvedValue(new ModelRuntime(mockRuntime));
-
-      const request = new Request(new URL('https://test.com'), {
-        method: 'POST',
-        body: JSON.stringify({ model: 'test-model' }),
-        headers: {
-          [LOBE_CHAT_AUTH_HEADER]: 'some-valid-token',
-          [OAUTH_AUTHORIZED]: '1',
-        },
-      });
-
-      await POST(request, { params: mockParams });
-
-      expect(checkAuthMethod).toBeCalledWith({
-        apiKey: 'test-api-key',
-        betterAuthAuthorized: false,
-        clerkAuth: {},
-        nextAuthAuthorized: true,
-      });
-    });
-
     it('should return InternalServerError error when throw a unknown error', async () => {
       const mockParams = Promise.resolve({ provider: 'test-provider' });
       vi.mocked(getXorPayload).mockImplementationOnce(() => {

package/src/app/(backend)/webapi/models/[provider]/route.test.ts

@@ -9,10 +9,6 @@ import { initModelRuntimeFromDB } from '@/server/modules/ModelRuntime';
 
 import { GET } from './route';
 
-vi.mock('@clerk/nextjs/server', () => ({
-  getAuth: vi.fn(),
-}));
-
 vi.mock('@/app/(backend)/middleware/auth/utils', () => ({
   checkAuthMethod: vi.fn(),
 }));
@@ -21,6 +17,14 @@ vi.mock('@lobechat/utils/server', () => ({
   getXorPayload: vi.fn(),
 }));
 
+vi.mock('@/envs/auth', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/envs/auth')>();
+  return {
+    ...actual,
+    enableBetterAuth: false,
+  };
+});
+
 vi.mock('@/server/modules/ModelRuntime', () => ({
   initModelRuntimeFromDB: vi.fn(),
 }));

package/src/app/[variants]/(auth)/next-auth/signin/AuthSignInBox.tsx

@@ -68,7 +68,8 @@ const BtnListLoading = memo(() => {
  * ref: https://authjs.dev/guides/pages/signin
  */
 export default memo(() => {
-  const { t } = useTranslation('clerk');
+  const { t } = useTranslation('auth');
+  const { t: tCommon } = useTranslation('common');
   const router = useRouter();
   const [loadingProvider, setLoadingProvider] = useState<string | null>(null);
 
@@ -100,9 +101,9 @@ export default memo(() => {
   };
 
   const footerBtns = [
-    { href: DOCUMENTS_REFER_URL, id: 0, label: t('footerPageLink__help') },
-    { href: PRIVACY_URL, id: 1, label: t('footerPageLink__privacy') },
-    { href: TERMS_URL, id: 2, label: t('footerPageLink__terms') },
+    { href: DOCUMENTS_REFER_URL, id: 0, label: tCommon('document') },
+    { href: PRIVACY_URL, id: 1, label: t('footer.privacy') },
+    { href: TERMS_URL, id: 2, label: t('footer.terms') },
   ];
 
   return (
@@ -116,10 +117,10 @@ export default memo(() => {
               <div>
                 <LobeHub size={48} />
               </div>
-              {t('signIn.start.title', { applicationName: BRANDING_NAME })}
+              {t('signin.title')}
             </Text>
             <Text as={'p'} className={styles.description}>
-              {t('signIn.start.subtitle')}
+              {t('signin.subtitle', { appName: BRANDING_NAME })}
             </Text>
           </div>
           {/* Content */}

package/src/app/[variants]/(auth)/signup/[[...signup]]/page.tsx

@@ -1,6 +1,4 @@
-import { SignUp } from '@clerk/nextjs';
-
-import { enableBetterAuth, enableClerk } from '@/envs/auth';
+import { enableBetterAuth } from '@/envs/auth';
 import { notFound } from '@/libs/next/navigation';
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
@@ -12,15 +10,6 @@ import BetterAuthSignUpForm from './BetterAuthSignUpForm';
 export const generateMetadata = async (props: DynamicLayoutProps) => {
   const locale = await RouteVariants.getLocale(props);
 
-  if (enableClerk) {
-    const { t } = await translation('clerk', locale);
-    return metadataModule.generate({
-      description: t('signUp.start.subtitle'),
-      title: t('signUp.start.title'),
-      url: '/signup',
-    });
-  }
-
   if (enableBetterAuth) {
     const { t } = await translation('auth', locale);
     return metadataModule.generate({
@@ -37,10 +26,6 @@ export const generateMetadata = async (props: DynamicLayoutProps) => {
 };
 
 const Page = () => {
-  if (enableClerk) {
-    return <SignUp path="/signup" />;
-  }
-
   if (enableBetterAuth) {
     return <BetterAuthSignUpForm />;
   }

package/src/app/[variants]/(main)/home/_layout/Body/Agent/List/index.tsx

@@ -42,7 +42,7 @@ const AgentList = memo<{ onMoreClick?: () => void }>(({ onMoreClick }) => {
 
   return (
     <>
-      <InboxItem />
+      <InboxItem style={{ minHeight: 36 }} />
       {showPinned && <SessionList dataSource={pinnedList!} />}
       {showCustom && <Group dataSource={customList!} />}
       {showDefault && (

package/src/app/[variants]/(main)/home/features/InputArea/SkillInstallBanner.tsx

@@ -4,10 +4,10 @@ import { getKlavisServerByServerIdentifier, getLobehubSkillProviderById } from '
 import { Avatar, Flexbox, Icon } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
 import { Blocks } from 'lucide-react';
-import { type ReactNode, createElement, memo, useMemo, useState } from 'react';
+import { type ReactNode, createElement, memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import SkillStore from '@/features/SkillStore';
+import { createSkillStoreModal } from '@/features/SkillStore';
 import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useToolStore } from '@/store/tool';
 
@@ -61,7 +61,6 @@ const BANNER_SKILL_IDS = [
 
 const SkillInstallBanner = memo(() => {
   const { t } = useTranslation('plugin');
-  const [open, setOpen] = useState(false);
 
   const isLobehubSkillEnabled = useServerConfigStore(serverConfigSelectors.enableLobehubSkill);
   const isKlavisEnabled = useServerConfigStore(serverConfigSelectors.enableKlavis);
@@ -108,20 +107,21 @@ const SkillInstallBanner = memo(() => {
     return items;
   }, []);
 
+  const handleOpenStore = useCallback(() => {
+    createSkillStoreModal();
+  }, []);
+
   // Don't show banner if no skills are enabled
   if (!isLobehubSkillEnabled && !isKlavisEnabled) return null;
 
   return (
-    <>
-      <div className={styles.banner} onClick={() => setOpen(true)}>
-        <Flexbox align="center" gap={8} horizontal>
-          <Icon className={styles.icon} icon={Blocks} size={18} />
-          <span className={styles.text}>{t('skillInstallBanner.title')}</span>
-        </Flexbox>
-        {avatarItems.length > 0 && <Avatar.Group items={avatarItems} shape="circle" size={24} />}
-      </div>
-      <SkillStore open={open} setOpen={setOpen} />
-    </>
+    <div className={styles.banner} onClick={handleOpenStore}>
+      <Flexbox align="center" gap={8} horizontal>
+        <Icon className={styles.icon} icon={Blocks} size={18} />
+        <span className={styles.text}>{t('skillInstallBanner.title')}</span>
+      </Flexbox>
+      {avatarItems.length > 0 && <Avatar.Group items={avatarItems} shape="circle" size={24} />}
+    </div>
   );
 });
 

package/src/app/[variants]/(main)/home/features/RecentPage/Item.tsx

@@ -3,12 +3,12 @@
 import { Avatar, Block, Center, Flexbox, Icon, Text } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { FileTextIcon } from 'lucide-react';
-import markdownToTxt from 'markdown-to-txt';
 import { memo } from 'react';
 
 import Time from '@/app/[variants]/(main)/home/features/components/Time';
 import { RECENT_BLOCK_SIZE } from '@/app/[variants]/(main)/home/features/const';
 import { type FileListItem } from '@/types/files';
+import markdownToTxt from '@/utils/markdownToTxt';
 
 // Helper to extract title from markdown content
 const extractTitle = (content: string): string | null => {
@@ -24,7 +24,7 @@ const getPreviewText = (item: FileListItem): string => {
   if (!item.content) return '';
 
   // Convert markdown to plain text
-  let plainText = markdownToTxt(item.content);
+  let plainText = markdownToTxt(item.content.slice(0, 120));
 
   // Remove the title line if it exists
   const title = extractTitle(item.content);

package/src/app/[variants]/(main)/resource/features/store/action.ts

@@ -1,6 +1,6 @@
 import { type StateCreator } from 'zustand/vanilla';
 
-import { type ResouceManagerMode } from '@/features/ResourceManager';
+import { type ResourceManagerMode } from '@/features/ResourceManager';
 import { type FilesTabs, SortType } from '@/types/files';
 
 import { type State, type ViewMode, initialState } from './initialState';
@@ -67,7 +67,7 @@ export interface Action {
   /**
    * Set the view mode
    */
-  setMode: (mode: ResouceManagerMode) => void;
+  setMode: (mode: ResourceManagerMode) => void;
   /**
    * Set the pending rename item ID
    */

package/src/app/[variants]/(main)/resource/features/store/initialState.ts

@@ -1,4 +1,4 @@
-import { type ResouceManagerMode } from '@/features/ResourceManager';
+import { type ResourceManagerMode } from '@/features/ResourceManager';
 import { FilesTabs, SortType } from '@/types/files';
 
 export type ViewMode = 'list' | 'masonry';
@@ -39,7 +39,7 @@ export interface State {
   /**
    * View mode for displaying resources
    */
-  mode: ResouceManagerMode;
+  mode: ResourceManagerMode;
   /**
    * ID of item currently being renamed (for inline editing)
    */

package/src/app/[variants]/(main)/resource/store/action.ts

@@ -1,6 +1,6 @@
 import { type StateCreator } from 'zustand/vanilla';
 
-import { type ResouceManagerMode } from '@/features/ResourceManager';
+import { type ResourceManagerMode } from '@/features/ResourceManager';
 
 import { type State, initialState } from './initialState';
 
@@ -12,7 +12,7 @@ export interface Action {
   /**
    * Set the view mode
    */
-  setMode: (mode: ResouceManagerMode) => void;
+  setMode: (mode: ResourceManagerMode) => void;
   /**
    * Set selected file IDs
    */

package/src/app/[variants]/(main)/resource/store/initialState.ts

@@ -1,8 +1,8 @@
-import { type ResouceManagerMode } from '@/features/ResourceManager';
+import { type ResourceManagerMode } from '@/features/ResourceManager';
 
 export interface State {
   currentViewItemId?: string;
-  mode: ResouceManagerMode;
+  mode: ResourceManagerMode;
   selectedFileIds: string[];
 }
 

package/src/app/[variants]/(main)/settings/hooks/useCategory.tsx

@@ -20,7 +20,6 @@ import {
   Mic2,
   PaletteIcon,
   PieChart,
-  ShieldCheck,
   Sparkles,
   UserCircle,
 } from 'lucide-react';
@@ -32,7 +31,7 @@ import { electronSyncSelectors } from '@/store/electron/selectors';
 import { SettingsTabs } from '@/store/global/initialState';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useUserStore } from '@/store/user';
-import { authSelectors, userProfileSelectors } from '@/store/user/slices/auth/selectors';
+import { userProfileSelectors } from '@/store/user/slices/auth/selectors';
 
 export enum SettingsGroupKey {
   AIConfig = 'ai-config',
@@ -61,8 +60,7 @@ export const useCategory = () => {
   const mobile = useServerConfigStore((s) => s.isMobile);
   const { enableSTT, hideDocs, showAiImage, showApiKeyManage } =
     useServerConfigStore(featureFlagsSelectors);
-  const [isLoginWithClerk, avatar, username] = useUserStore((s) => [
-    authSelectors.isLoginWithClerk(s),
+  const [avatar, username] = useUserStore((s) => [
     userProfileSelectors.userAvatar(s),
     userProfileSelectors.nickName(s),
   ]);
@@ -87,11 +85,6 @@ export const useCategory = () => {
         key: SettingsTabs.Profile,
         label: username ? username : tAuth('tab.profile'),
       },
-      isLoginWithClerk && {
-        icon: ShieldCheck,
-        key: SettingsTabs.Security,
-        label: tAuth('tab.security'),
-      },
       {
         icon: ChartColumnBigIcon,
         key: SettingsTabs.Stats,
@@ -237,18 +230,7 @@ export const useCategory = () => {
     });
 
     return groups;
-  }, [
-    t,
-    tAuth,
-    enableSTT,
-    hideDocs,
-    mobile,
-    showAiImage,
-    showApiKeyManage,
-    isLoginWithClerk,
-    avatarUrl,
-    username,
-  ]);
+  }, [t, tAuth, enableSTT, hideDocs, mobile, showAiImage, showApiKeyManage, avatarUrl, username]);
 
   return categoryGroups;
 };

package/src/app/[variants]/(main)/settings/profile/features/AvatarRow.tsx

@@ -7,7 +7,6 @@ import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { fetchErrorNotification } from '@/components/Error/fetchErrorNotification';
-import { enableAuth } from '@/envs/auth';
 import UserAvatar from '@/features/User/UserAvatar';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
@@ -54,7 +53,7 @@ const AvatarRow = ({ mobile }: AvatarRowProps) => {
     [updateAvatar],
   );
 
-  const canUpload = !enableAuth || isLogin;
+  const canUpload = isLogin;
 
   const avatarContent = canUpload ? (
     <Spin indicator={<LoadingOutlined spin />} spinning={uploading}>

package/src/app/[variants]/(main)/settings/security/index.tsx

@@ -1,30 +1,9 @@
 'use client';
 
-import { Skeleton } from '@lobehub/ui';
-import { useTranslation } from 'react-i18next';
 import { Navigate } from 'react-router-dom';
 
-import SettingHeader from '@/app/[variants]/(main)/settings/features/SettingHeader';
-import { enableClerk } from '@/envs/auth';
-import dynamic from '@/libs/next/dynamic';
-
-const ClerkProfile = dynamic(() => import('./features/ClerkProfile'), {
-  loading: () => (
-    <div style={{ flex: 1 }}>
-      <Skeleton paragraph={{ rows: 8 }} title={false} />
-    </div>
-  ),
-});
-
 const Page = () => {
-  const { t } = useTranslation('setting');
-  if (!enableClerk) return <Navigate replace to="/settings" />;
-  return (
-    <>
-      <SettingHeader title={t('tab.security')} />
-      <ClerkProfile />
-    </>
-  );
+  return <Navigate replace to="/settings" />;
 };
 
 export default Page;

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

@@ -8,7 +8,7 @@ import { Loader2, MoreVerticalIcon, SquareArrowOutUpRight, Unplug } from 'lucide
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import IntegrationDetailModal from '@/features/IntegrationDetailModal';
+import { createIntegrationDetailModal } from '@/features/IntegrationDetailModal';
 import { useToolStore } from '@/store/tool';
 import { type KlavisServer, KlavisServerStatus } from '@/store/tool/slices/klavisStore';
 import { useUserStore } from '@/store/user';
@@ -72,7 +72,6 @@ const KlavisSkillItem = memo<KlavisSkillItemProps>(({ serverType, server }) => {
   const { modal } = App.useApp();
   const [isConnecting, setIsConnecting] = useState(false);
   const [isWaitingAuth, setIsWaitingAuth] = useState(false);
-  const [detailOpen, setDetailOpen] = useState(false);
 
   const oauthWindowRef = useRef<Window | null>(null);
   const windowCheckIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -313,8 +312,7 @@ const KlavisSkillItem = memo<KlavisSkillItemProps>(({ serverType, server }) => {
   const isConnected = server?.status === KlavisServerStatus.CONNECTED;
 
   return (
-    <>
-      <Flexbox
+    <Flexbox
         align="center"
         className={styles.container}
         gap={16}
@@ -324,7 +322,16 @@ const KlavisSkillItem = memo<KlavisSkillItemProps>(({ serverType, server }) => {
         <Flexbox align="center" gap={16} horizontal style={{ flex: 1, overflow: 'hidden' }}>
           <div className={styles.icon}>{renderIcon()}</div>
           <Flexbox gap={4} style={{ overflow: 'hidden' }}>
-            <span className={styles.title} onClick={() => setDetailOpen(true)}>
+            <span
+              className={styles.title}
+              onClick={() =>
+                createIntegrationDetailModal({
+                  identifier: serverType.identifier,
+                  serverName: serverType.serverName,
+                  type: 'klavis',
+                })
+              }
+            >
               {serverType.label}
             </span>
             {!isConnected && renderStatus()}
@@ -335,15 +342,6 @@ const KlavisSkillItem = memo<KlavisSkillItemProps>(({ serverType, server }) => {
           {renderAction()}
         </Flexbox>
       </Flexbox>
-      <IntegrationDetailModal
-        identifier={serverType.identifier}
-        isConnecting={isConnecting || isWaitingAuth}
-        onClose={() => setDetailOpen(false)}
-        onConnect={handleConnect}
-        open={detailOpen}
-        type="klavis"
-      />
-    </>
   );
 });
 

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

@@ -8,7 +8,7 @@ import { Loader2, MoreVerticalIcon, SquareArrowOutUpRight, Unplug } from 'lucide
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import IntegrationDetailModal from '@/features/IntegrationDetailModal';
+import { createIntegrationDetailModal } from '@/features/IntegrationDetailModal';
 import { useToolStore } from '@/store/tool';
 import {
   type LobehubSkillServer,
@@ -75,7 +75,6 @@ const LobehubSkillItem = memo<LobehubSkillItemProps>(({ provider, server }) => {
   const { modal } = App.useApp();
   const [isConnecting, setIsConnecting] = useState(false);
   const [isWaitingAuth, setIsWaitingAuth] = useState(false);
-  const [detailOpen, setDetailOpen] = useState(false);
 
   const oauthWindowRef = useRef<Window | null>(null);
   const windowCheckIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -299,8 +298,7 @@ const LobehubSkillItem = memo<LobehubSkillItemProps>(({ provider, server }) => {
   const isConnected = server?.status === LobehubSkillStatus.CONNECTED;
 
   return (
-    <>
-      <Flexbox
+    <Flexbox
         align="center"
         className={styles.container}
         gap={16}
@@ -314,7 +312,12 @@ const LobehubSkillItem = memo<LobehubSkillItemProps>(({ provider, server }) => {
           <Flexbox gap={4} style={{ overflow: 'hidden' }}>
             <span
               className={`${styles.title} ${!isConnected ? styles.disconnectedTitle : ''}`}
-              onClick={() => setDetailOpen(true)}
+              onClick={() =>
+                createIntegrationDetailModal({
+                  identifier: provider.id,
+                  type: 'lobehub',
+                })
+              }
             >
               {provider.label}
             </span>
@@ -326,15 +329,6 @@ const LobehubSkillItem = memo<LobehubSkillItemProps>(({ provider, server }) => {
           {renderAction()}
         </Flexbox>
       </Flexbox>
-      <IntegrationDetailModal
-        identifier={provider.id}
-        isConnecting={isConnecting || isWaitingAuth}
-        onClose={() => setDetailOpen(false)}
-        onConnect={handleConnect}
-        open={detailOpen}
-        type="lobehub"
-      />
-    </>
   );
 });