Merge remote-tracking branch 'origin/main' into feat/model-plugins-implementing

- Implemented tests to verify the display of the compatible-only helper text based on the presence of scope features.
- Updated the Popup component to conditionally render a banner when scope features are applied.
- Added localization for the new helper text in English, Japanese, and Simplified Chinese.

.github/workflows/web-tests.yml

@@ -17,8 +17,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4]
-        shardTotal: [4]
+        shardIndex: [1, 2, 3, 4, 5, 6]
+        shardTotal: [6]
     defaults:
       run:
         shell: bash

web/.env.example

@@ -12,9 +12,6 @@ NEXT_PUBLIC_API_PREFIX=http://localhost:5001/console/api
 # console or api domain.
 # example: http://udify.app/api
 NEXT_PUBLIC_PUBLIC_API_PREFIX=http://localhost:5001/api
-# Dev-only Vite proxy targets. Use these when routing same-origin requests through the local dev server.
-VITE_CONSOLE_API_PROXY_TARGET=https://cloud.dify.ai
-VITE_PUBLIC_API_PROXY_TARGET=https://cloud.dify.ai
 # When the frontend and backend run on different subdomains, set NEXT_PUBLIC_COOKIE_DOMAIN=1.
 NEXT_PUBLIC_COOKIE_DOMAIN=
 

web/__tests__/billing/pricing-modal-flow.test.tsx

@@ -295,24 +295,7 @@ describe('Pricing Modal Flow', () => {
     })
   })
 
-  // ─── 6. Close Handling ───────────────────────────────────────────────────
-  describe('Close handling', () => {
-    it('should call onCancel when pressing ESC key', () => {
-      render(<Pricing onCancel={onCancel} />)
-
-      // ahooks useKeyPress listens on document for keydown events
-      document.dispatchEvent(new KeyboardEvent('keydown', {
-        key: 'Escape',
-        code: 'Escape',
-        keyCode: 27,
-        bubbles: true,
-      }))
-
-      expect(onCancel).toHaveBeenCalledTimes(1)
-    })
-  })
-
-  // ─── 7. Pricing URL ─────────────────────────────────────────────────────
+  // ─── 6. Pricing URL ─────────────────────────────────────────────────────
   describe('Pricing page URL', () => {
     it('should render pricing link with correct URL', () => {
       render(<Pricing onCancel={onCancel} />)

web/__tests__/plugins/plugin-card-rendering.test.tsx

@@ -8,6 +8,8 @@
 import { cleanup, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
+let mockTheme = 'light'
+
 vi.mock('#i18n', () => ({
   useTranslation: () => ({
     t: (key: string) => key,
@@ -19,16 +21,16 @@ vi.mock('@/context/i18n', () => ({
 }))
 
 vi.mock('@/hooks/use-theme', () => ({
-  default: () => ({ theme: 'light' }),
+  default: () => ({ theme: mockTheme }),
 }))
 
 vi.mock('@/i18n-config', () => ({
   renderI18nObject: (obj: Record<string, string>, locale: string) => obj[locale] || obj.en_US || '',
 }))
 
-vi.mock('@/types/app', () => ({
-  Theme: { dark: 'dark', light: 'light' },
-}))
+vi.mock('@/types/app', async () => {
+  return vi.importActual<typeof import('@/types/app')>('@/types/app')
+})
 
 vi.mock('@/utils/classnames', () => ({
   cn: (...args: unknown[]) => args.filter(a => typeof a === 'string' && a).join(' '),
@@ -100,6 +102,7 @@ type CardPayload = Parameters<typeof Card>[0]['payload']
 describe('Plugin Card Rendering Integration', () => {
   beforeEach(() => {
     cleanup()
+    mockTheme = 'light'
   })
 
   const makePayload = (overrides = {}) => ({
@@ -194,9 +197,7 @@ describe('Plugin Card Rendering Integration', () => {
   })
 
   it('uses dark icon when theme is dark and icon_dark is provided', () => {
-    vi.doMock('@/hooks/use-theme', () => ({
-      default: () => ({ theme: 'dark' }),
-    }))
+    mockTheme = 'dark'
 
     const payload = makePayload({
       icon: 'https://example.com/icon-light.png',
@@ -204,7 +205,7 @@ describe('Plugin Card Rendering Integration', () => {
     })
 
     render(<Card payload={payload} />)
-    expect(screen.getByTestId('card-icon')).toBeInTheDocument()
+    expect(screen.getByTestId('card-icon')).toHaveTextContent('https://example.com/icon-dark.png')
   })
 
   it('shows loading placeholder when isLoading is true', () => {

web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx

@@ -160,7 +160,7 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
         isShow={isShowDeleteConfirm}
         onClose={() => setIsShowDeleteConfirm(false)}
       >
-        <div className="title-2xl-semi-bold mb-3 text-text-primary">{t('avatar.deleteTitle', { ns: 'common' })}</div>
+        <div className="mb-3 text-text-primary title-2xl-semi-bold">{t('avatar.deleteTitle', { ns: 'common' })}</div>
         <p className="mb-8 text-text-secondary">{t('avatar.deleteDescription', { ns: 'common' })}</p>
 
         <div className="flex w-full items-center justify-center gap-2">

web/app/account/(commonLayout)/account-page/email-change-modal.tsx

@@ -209,14 +209,14 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
       </div>
       {step === STEP.start && (
         <>
-          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.title', { ns: 'common' })}</div>
+          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.title', { ns: 'common' })}</div>
           <div className="space-y-0.5 pb-2 pt-1">
-            <div className="body-md-medium text-text-warning">{t('account.changeEmail.authTip', { ns: 'common' })}</div>
-            <div className="body-md-regular text-text-secondary">
+            <div className="text-text-warning body-md-medium">{t('account.changeEmail.authTip', { ns: 'common' })}</div>
+            <div className="text-text-secondary body-md-regular">
               <Trans
                 i18nKey="account.changeEmail.content1"
                 ns="common"
-                components={{ email: <span className="body-md-medium text-text-primary"></span> }}
+                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
                 values={{ email }}
               />
             </div>
@@ -241,19 +241,19 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
       )}
       {step === STEP.verifyOrigin && (
         <>
-          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.verifyEmail', { ns: 'common' })}</div>
+          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.verifyEmail', { ns: 'common' })}</div>
           <div className="space-y-0.5 pb-2 pt-1">
-            <div className="body-md-regular text-text-secondary">
+            <div className="text-text-secondary body-md-regular">
               <Trans
                 i18nKey="account.changeEmail.content2"
                 ns="common"
-                components={{ email: <span className="body-md-medium text-text-primary"></span> }}
+                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
                 values={{ email }}
               />
             </div>
           </div>
           <div className="pt-3">
-            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
+            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
             <Input
               className="!w-full"
               placeholder={t('account.changeEmail.codePlaceholder', { ns: 'common' })}
@@ -278,25 +278,25 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
               {t('operation.cancel', { ns: 'common' })}
             </Button>
           </div>
-          <div className="system-xs-regular mt-3 flex items-center gap-1 text-text-tertiary">
+          <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
             <span>{t('account.changeEmail.resendTip', { ns: 'common' })}</span>
             {time > 0 && (
               <span>{t('account.changeEmail.resendCount', { ns: 'common', count: time })}</span>
             )}
             {!time && (
-              <span onClick={sendCodeToOriginEmail} className="system-xs-medium cursor-pointer text-text-accent-secondary">{t('account.changeEmail.resend', { ns: 'common' })}</span>
+              <span onClick={sendCodeToOriginEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
             )}
           </div>
         </>
       )}
       {step === STEP.newEmail && (
         <>
-          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.newEmail', { ns: 'common' })}</div>
+          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.newEmail', { ns: 'common' })}</div>
           <div className="space-y-0.5 pb-2 pt-1">
-            <div className="body-md-regular text-text-secondary">{t('account.changeEmail.content3', { ns: 'common' })}</div>
+            <div className="text-text-secondary body-md-regular">{t('account.changeEmail.content3', { ns: 'common' })}</div>
           </div>
           <div className="pt-3">
-            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">{t('account.changeEmail.emailLabel', { ns: 'common' })}</div>
+            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.emailLabel', { ns: 'common' })}</div>
             <Input
               className="!w-full"
               placeholder={t('account.changeEmail.emailPlaceholder', { ns: 'common' })}
@@ -305,10 +305,10 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
               destructive={newEmailExited || unAvailableEmail}
             />
             {newEmailExited && (
-              <div className="body-xs-regular mt-1 py-0.5 text-text-destructive">{t('account.changeEmail.existingEmail', { ns: 'common' })}</div>
+              <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.existingEmail', { ns: 'common' })}</div>
             )}
             {unAvailableEmail && (
-              <div className="body-xs-regular mt-1 py-0.5 text-text-destructive">{t('account.changeEmail.unAvailableEmail', { ns: 'common' })}</div>
+              <div className="mt-1 py-0.5 text-text-destructive body-xs-regular">{t('account.changeEmail.unAvailableEmail', { ns: 'common' })}</div>
             )}
           </div>
           <div className="mt-3 space-y-2">
@@ -331,19 +331,19 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
       )}
       {step === STEP.verifyNew && (
         <>
-          <div className="title-2xl-semi-bold pb-3 text-text-primary">{t('account.changeEmail.verifyNew', { ns: 'common' })}</div>
+          <div className="pb-3 text-text-primary title-2xl-semi-bold">{t('account.changeEmail.verifyNew', { ns: 'common' })}</div>
           <div className="space-y-0.5 pb-2 pt-1">
-            <div className="body-md-regular text-text-secondary">
+            <div className="text-text-secondary body-md-regular">
               <Trans
                 i18nKey="account.changeEmail.content4"
                 ns="common"
-                components={{ email: <span className="body-md-medium text-text-primary"></span> }}
+                components={{ email: <span className="text-text-primary body-md-medium"></span> }}
                 values={{ email: mail }}
               />
             </div>
           </div>
           <div className="pt-3">
-            <div className="system-sm-medium mb-1 flex h-6 items-center text-text-secondary">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
+            <div className="mb-1 flex h-6 items-center text-text-secondary system-sm-medium">{t('account.changeEmail.codeLabel', { ns: 'common' })}</div>
             <Input
               className="!w-full"
               placeholder={t('account.changeEmail.codePlaceholder', { ns: 'common' })}
@@ -368,13 +368,13 @@ const EmailChangeModal = ({ onClose, email, show }: Props) => {
               {t('operation.cancel', { ns: 'common' })}
             </Button>
           </div>
-          <div className="system-xs-regular mt-3 flex items-center gap-1 text-text-tertiary">
+          <div className="mt-3 flex items-center gap-1 text-text-tertiary system-xs-regular">
             <span>{t('account.changeEmail.resendTip', { ns: 'common' })}</span>
             {time > 0 && (
               <span>{t('account.changeEmail.resendCount', { ns: 'common', count: time })}</span>
             )}
             {!time && (
-              <span onClick={sendCodeToNewEmail} className="system-xs-medium cursor-pointer text-text-accent-secondary">{t('account.changeEmail.resend', { ns: 'common' })}</span>
+              <span onClick={sendCodeToNewEmail} className="cursor-pointer text-text-accent-secondary system-xs-medium">{t('account.changeEmail.resend', { ns: 'common' })}</span>
             )}
           </div>
         </>

web/app/account/(commonLayout)/account-page/index.tsx

@@ -145,7 +145,7 @@ export default function AccountPage() {
             imageUrl={icon_url}
           />
         </div>
-        <div className="system-sm-medium mt-[3px] text-text-secondary">{item.name}</div>
+        <div className="mt-[3px] text-text-secondary system-sm-medium">{item.name}</div>
       </div>
     )
   }
@@ -153,12 +153,12 @@ export default function AccountPage() {
   return (
     <>
       <div className="pb-3 pt-2">
-        <h4 className="title-2xl-semi-bold text-text-primary">{t('account.myAccount', { ns: 'common' })}</h4>
+        <h4 className="text-text-primary title-2xl-semi-bold">{t('account.myAccount', { ns: 'common' })}</h4>
       </div>
       <div className="mb-8 flex items-center rounded-xl bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6">
         <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={mutateUserProfile} size="3xl" />
         <div className="ml-4">
-          <p className="system-xl-semibold text-text-primary">
+          <p className="text-text-primary system-xl-semibold">
             {userProfile.name}
             {isEducationAccount && (
               <PremiumBadge size="s" color="blue" className="ml-1 !px-2">
@@ -167,16 +167,16 @@ export default function AccountPage() {
               </PremiumBadge>
             )}
           </p>
-          <p className="system-xs-regular text-text-tertiary">{userProfile.email}</p>
+          <p className="text-text-tertiary system-xs-regular">{userProfile.email}</p>
         </div>
       </div>
       <div className="mb-8">
         <div className={titleClassName}>{t('account.name', { ns: 'common' })}</div>
         <div className="mt-2 flex w-full items-center justify-between gap-2">
-          <div className="system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled ">
+          <div className="flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled system-sm-regular">
             <span className="pl-1">{userProfile.name}</span>
           </div>
-          <div className="system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text" onClick={handleEditName}>
+          <div className="cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text system-sm-medium" onClick={handleEditName}>
             {t('operation.edit', { ns: 'common' })}
           </div>
         </div>
@@ -184,11 +184,11 @@ export default function AccountPage() {
       <div className="mb-8">
         <div className={titleClassName}>{t('account.email', { ns: 'common' })}</div>
         <div className="mt-2 flex w-full items-center justify-between gap-2">
-          <div className="system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled ">
+          <div className="flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled system-sm-regular">
             <span className="pl-1">{userProfile.email}</span>
           </div>
           {systemFeatures.enable_change_email && (
-            <div className="system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text" onClick={() => setShowUpdateEmail(true)}>
+            <div className="cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text system-sm-medium" onClick={() => setShowUpdateEmail(true)}>
               {t('operation.change', { ns: 'common' })}
             </div>
           )}
@@ -198,8 +198,8 @@ export default function AccountPage() {
         systemFeatures.enable_email_password_login && (
           <div className="mb-8 flex justify-between gap-2">
             <div>
-              <div className="system-sm-semibold mb-1 text-text-secondary">{t('account.password', { ns: 'common' })}</div>
-              <div className="body-xs-regular mb-2 text-text-tertiary">{t('account.passwordTip', { ns: 'common' })}</div>
+              <div className="mb-1 text-text-secondary system-sm-semibold">{t('account.password', { ns: 'common' })}</div>
+              <div className="mb-2 text-text-tertiary body-xs-regular">{t('account.passwordTip', { ns: 'common' })}</div>
             </div>
             <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</Button>
           </div>
@@ -226,7 +226,7 @@ export default function AccountPage() {
             onClose={() => setEditNameModalVisible(false)}
             className="!w-[420px] !p-6"
           >
-            <div className="title-2xl-semi-bold mb-6 text-text-primary">{t('account.editName', { ns: 'common' })}</div>
+            <div className="mb-6 text-text-primary title-2xl-semi-bold">{t('account.editName', { ns: 'common' })}</div>
             <div className={titleClassName}>{t('account.name', { ns: 'common' })}</div>
             <Input
               className="mt-2"
@@ -256,7 +256,7 @@ export default function AccountPage() {
             }}
             className="!w-[420px] !p-6"
           >
-            <div className="title-2xl-semi-bold mb-6 text-text-primary">{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</div>
+            <div className="mb-6 text-text-primary title-2xl-semi-bold">{userProfile.is_password_set ? t('account.resetPassword', { ns: 'common' }) : t('account.setPassword', { ns: 'common' })}</div>
             {userProfile.is_password_set && (
               <>
                 <div className={titleClassName}>{t('account.currentPassword', { ns: 'common' })}</div>
@@ -279,7 +279,7 @@ export default function AccountPage() {
                 </div>
               </>
             )}
-            <div className="system-sm-semibold mt-8 text-text-secondary">
+            <div className="mt-8 text-text-secondary system-sm-semibold">
               {userProfile.is_password_set ? t('account.newPassword', { ns: 'common' }) : t('account.password', { ns: 'common' })}
             </div>
             <div className="relative mt-2">
@@ -298,7 +298,7 @@ export default function AccountPage() {
                 </Button>
               </div>
             </div>
-            <div className="system-sm-semibold mt-8 text-text-secondary">{t('account.confirmPassword', { ns: 'common' })}</div>
+            <div className="mt-8 text-text-secondary system-sm-semibold">{t('account.confirmPassword', { ns: 'common' })}</div>
             <div className="relative mt-2">
               <Input
                 type={showConfirmPassword ? 'text' : 'password'}

web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx

@@ -94,7 +94,7 @@ const CSVUploader: FC<Props> = ({
       />
       <div ref={dropRef}>
         {!file && (
-          <div className={cn('system-sm-regular flex h-20 items-center rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg', dragging && 'border border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
+          <div className={cn('flex h-20 items-center rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg system-sm-regular', dragging && 'border border-components-dropzone-border-accent bg-components-dropzone-bg-accent')}>
             <div className="flex w-full items-center justify-center space-x-2">
               <CSVIcon className="shrink-0" />
               <div className="text-text-tertiary">

web/app/components/app/configuration/base/warning-mask/has-not-set-api.spec.tsx

@@ -2,25 +2,19 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
 import HasNotSetAPI from './has-not-set-api'
 
-describe('HasNotSetAPI WarningMask', () => {
-  it('should show default title when trial not finished', () => {
-    render(<HasNotSetAPI isTrailFinished={false} onSetting={vi.fn()} />)
+describe('HasNotSetAPI', () => {
+  it('should render the empty state copy', () => {
+    render(<HasNotSetAPI onSetting={vi.fn()} />)
 
-    expect(screen.getByText('appDebug.notSetAPIKey.title')).toBeInTheDocument()
-    expect(screen.getByText('appDebug.notSetAPIKey.description')).toBeInTheDocument()
+    expect(screen.getByText('appDebug.noModelProviderConfigured')).toBeInTheDocument()
+    expect(screen.getByText('appDebug.noModelProviderConfiguredTip')).toBeInTheDocument()
   })
 
-  it('should show trail finished title when flag is true', () => {
-    render(<HasNotSetAPI isTrailFinished onSetting={vi.fn()} />)
-
-    expect(screen.getByText('appDebug.notSetAPIKey.trailFinished')).toBeInTheDocument()
-  })
-
-  it('should call onSetting when primary button clicked', () => {
+  it('should call onSetting when manage models button is clicked', () => {
     const onSetting = vi.fn()
-    render(<HasNotSetAPI isTrailFinished={false} onSetting={onSetting} />)
+    render(<HasNotSetAPI onSetting={onSetting} />)
 
-    fireEvent.click(screen.getByRole('button', { name: 'appDebug.notSetAPIKey.settingBtn' }))
+    fireEvent.click(screen.getByRole('button', { name: 'appDebug.manageModels' }))
     expect(onSetting).toHaveBeenCalledTimes(1)
   })
 })

web/app/components/app/configuration/base/warning-mask/has-not-set-api.tsx

@@ -2,38 +2,38 @@
 import type { FC } from 'react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Button from '@/app/components/base/button'
-import WarningMask from '.'
 
 export type IHasNotSetAPIProps = {
-  isTrailFinished: boolean
   onSetting: () => void
 }
 
-const icon = (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M14 6.00001L14 2.00001M14 2.00001H9.99999M14 2.00001L8 8M6.66667 2H5.2C4.0799 2 3.51984 2 3.09202 2.21799C2.71569 2.40973 2.40973 2.71569 2.21799 3.09202C2 3.51984 2 4.07989 2 5.2V10.8C2 11.9201 2 12.4802 2.21799 12.908C2.40973 13.2843 2.71569 13.5903 3.09202 13.782C3.51984 14 4.07989 14 5.2 14H10.8C11.9201 14 12.4802 14 12.908 13.782C13.2843 13.5903 13.5903 13.2843 13.782 12.908C14 12.4802 14 11.9201 14 10.8V9.33333" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-
-)
-
 const HasNotSetAPI: FC<IHasNotSetAPIProps> = ({
-  isTrailFinished,
   onSetting,
 }) => {
   const { t } = useTranslation()
 
   return (
-    <WarningMask
-      title={isTrailFinished ? t('notSetAPIKey.trailFinished', { ns: 'appDebug' }) : t('notSetAPIKey.title', { ns: 'appDebug' })}
-      description={t('notSetAPIKey.description', { ns: 'appDebug' })}
-      footer={(
-        <Button variant="primary" className="flex space-x-2" onClick={onSetting}>
-          <span>{t('notSetAPIKey.settingBtn', { ns: 'appDebug' })}</span>
-          {icon}
-        </Button>
-      )}
-    />
+    <div className="flex grow flex-col items-center justify-center pb-[120px]">
+      <div className="flex w-full max-w-[400px] flex-col gap-2 px-4 py-4">
+        <div className="flex h-10 w-10 items-center justify-center rounded-[10px]">
+          <div className="flex h-full w-full items-center justify-center overflow-hidden rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg backdrop-blur-[5px]">
+            <span className="i-ri-brain-2-line h-5 w-5 text-text-tertiary" />
+          </div>
+        </div>
+        <div className="flex flex-col gap-1">
+          <div className="text-text-secondary system-md-semibold">{t('noModelProviderConfigured', { ns: 'appDebug' })}</div>
+          <div className="text-text-tertiary system-xs-regular">{t('noModelProviderConfiguredTip', { ns: 'appDebug' })}</div>
+        </div>
+        <button
+          type="button"
+          className="flex w-fit items-center gap-1 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 py-2 shadow-xs backdrop-blur-[5px]"
+          onClick={onSetting}
+        >
+          <span className="text-components-button-secondary-accent-text system-sm-medium">{t('manageModels', { ns: 'appDebug' })}</span>
+          <span className="i-ri-arrow-right-line h-4 w-4 text-components-button-secondary-accent-text" />
+        </button>
+      </div>
+    </div>
   )
 }
 export default React.memo(HasNotSetAPI)

web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx

@@ -178,7 +178,7 @@ const Prompt: FC<ISimplePromptInput> = ({
         {!noTitle && (
           <div className="flex h-11 items-center justify-between pl-3 pr-2.5">
             <div className="flex items-center space-x-1">
-              <div className="h2 system-sm-semibold-uppercase text-text-secondary">{mode !== AppModeEnum.COMPLETION ? t('chatSubTitle', { ns: 'appDebug' }) : t('completionSubTitle', { ns: 'appDebug' })}</div>
+              <div className="h2 text-text-secondary system-sm-semibold-uppercase">{mode !== AppModeEnum.COMPLETION ? t('chatSubTitle', { ns: 'appDebug' }) : t('completionSubTitle', { ns: 'appDebug' })}</div>
               {!readonly && (
                 <Tooltip
                   popupContent={(

web/app/components/app/configuration/config/agent/prompt-editor.tsx

@@ -96,7 +96,7 @@ const Editor: FC<Props> = ({
                 )}
           </div>
         </div>
-        <div className={cn(editorHeight, ' min-h-[102px] overflow-y-auto px-4 text-sm text-gray-700')}>
+        <div className={cn(editorHeight, 'min-h-[102px] overflow-y-auto px-4 text-sm text-gray-700')}>
           <PromptEditor
             className={editorHeight}
             value={value}

web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx

@@ -3,8 +3,10 @@ import type { FormValue } from '@/app/components/header/account-setting/model-pr
 import type { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import type { GenRes } from '@/service/debug'
 import type { AppModeEnum, CompletionParams, Model, ModelModeType } from '@/types/app'
-import { useSessionStorageState } from 'ahooks'
-import useBoolean from 'ahooks/lib/useBoolean'
+import {
+  useBoolean,
+  useSessionStorageState,
+} from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -224,7 +226,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
           </div>
           <div>
             <div className="text-[0px]">
-              <div className="system-sm-semibold-uppercase mb-1.5 text-text-secondary">{t('codegen.instruction', { ns: 'appDebug' })}</div>
+              <div className="mb-1.5 text-text-secondary system-sm-semibold-uppercase">{t('codegen.instruction', { ns: 'appDebug' })}</div>
               <InstructionEditor
                 editorKey={editorKey}
                 value={instruction}
@@ -248,7 +250,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
                 disabled={isLoading}
               >
                 <Generator className="h-4 w-4" />
-                <span className="text-xs font-semibold ">{t('codegen.generate', { ns: 'appDebug' })}</span>
+                <span className="text-xs font-semibold">{t('codegen.generate', { ns: 'appDebug' })}</span>
               </Button>
             </div>
           </div>

web/app/components/app/configuration/dataset-config/settings-modal/index.tsx

@@ -210,7 +210,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
       <div className="overflow-y-auto border-b border-divider-regular p-6 pb-[68px] pt-5">
         <div className={cn(rowClass, 'items-center')}>
           <div className={labelClass}>
-            <div className="system-sm-semibold text-text-secondary">{t('form.name', { ns: 'datasetSettings' })}</div>
+            <div className="text-text-secondary system-sm-semibold">{t('form.name', { ns: 'datasetSettings' })}</div>
           </div>
           <Input
             value={localeCurrentDataset.name}
@@ -221,7 +221,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         </div>
         <div className={cn(rowClass)}>
           <div className={labelClass}>
-            <div className="system-sm-semibold text-text-secondary">{t('form.desc', { ns: 'datasetSettings' })}</div>
+            <div className="text-text-secondary system-sm-semibold">{t('form.desc', { ns: 'datasetSettings' })}</div>
           </div>
           <div className="w-full">
             <Textarea
@@ -234,7 +234,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         </div>
         <div className={rowClass}>
           <div className={labelClass}>
-            <div className="system-sm-semibold text-text-secondary">{t('form.permissions', { ns: 'datasetSettings' })}</div>
+            <div className="text-text-secondary system-sm-semibold">{t('form.permissions', { ns: 'datasetSettings' })}</div>
           </div>
           <div className="w-full">
             <PermissionSelector
@@ -250,7 +250,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         {!!(currentDataset && currentDataset.indexing_technique) && (
           <div className={cn(rowClass)}>
             <div className={labelClass}>
-              <div className="system-sm-semibold text-text-secondary">{t('form.indexMethod', { ns: 'datasetSettings' })}</div>
+              <div className="text-text-secondary system-sm-semibold">{t('form.indexMethod', { ns: 'datasetSettings' })}</div>
             </div>
             <div className="grow">
               <IndexMethod
@@ -267,7 +267,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
         {indexMethod === IndexingType.QUALIFIED && (
           <div className={cn(rowClass)}>
             <div className={labelClass}>
-              <div className="system-sm-semibold text-text-secondary">{t('form.embeddingModel', { ns: 'datasetSettings' })}</div>
+              <div className="text-text-secondary system-sm-semibold">{t('form.embeddingModel', { ns: 'datasetSettings' })}</div>
             </div>
             <div className="w-full">
               <div className="h-8 w-full rounded-lg bg-components-input-bg-normal opacity-60">

web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.spec.tsx

@@ -1,13 +1,25 @@
 import type { ReactNode } from 'react'
 import type { ModelAndParameter } from '../types'
-import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type {
+  FormValue,
+  ModelProvider,
+} from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { render, screen } from '@testing-library/react'
-import { ModelStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { createMockProviderContextValue } from '@/__mocks__/provider-context'
+import {
+  ConfigurationMethodEnum,
+  CurrentSystemQuotaTypeEnum,
+  CustomConfigurationStatusEnum,
+  ModelStatusEnum,
+  ModelTypeEnum,
+  PreferredProviderTypeEnum,
+} from '@/app/components/header/account-setting/model-provider-page/declarations'
 import ModelParameterTrigger from './model-parameter-trigger'
 
 const mockUseDebugConfigurationContext = vi.fn()
 const mockUseDebugWithMultipleModelContext = vi.fn()
-const mockUseLanguage = vi.fn()
+const mockUseProviderContext = vi.fn()
+const mockUseCredentialPanelState = vi.fn()
 
 type RenderTriggerProps = {
   open: boolean
@@ -35,8 +47,12 @@ vi.mock('./context', () => ({
   useDebugWithMultipleModelContext: () => mockUseDebugWithMultipleModelContext(),
 }))
 
-vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
-  useLanguage: () => mockUseLanguage(),
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: () => mockUseProviderContext(),
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/provider-added-card/use-credential-panel-state', () => ({
+  useCredentialPanelState: () => mockUseCredentialPanelState(),
 }))
 
 vi.mock('@/app/components/header/account-setting/model-provider-page/model-parameter-modal', () => ({
@@ -84,6 +100,41 @@ const createModelAndParameter = (overrides: Partial<ModelAndParameter> = {}): Mo
   ...overrides,
 })
 
+const createModelProvider = (overrides: Partial<ModelProvider> = {}): ModelProvider => ({
+  provider: 'openai',
+  label: { en_US: 'OpenAI', zh_Hans: 'OpenAI' },
+  help: {
+    title: { en_US: 'Help', zh_Hans: 'Help' },
+    url: { en_US: 'https://example.com', zh_Hans: 'https://example.com' },
+  },
+  icon_small: { en_US: '', zh_Hans: '' },
+  supported_model_types: [ModelTypeEnum.textGeneration],
+  configurate_methods: [ConfigurationMethodEnum.predefinedModel],
+  provider_credential_schema: {
+    credential_form_schemas: [],
+  },
+  model_credential_schema: {
+    model: {
+      label: { en_US: 'Model', zh_Hans: 'Model' },
+      placeholder: { en_US: 'Select model', zh_Hans: 'Select model' },
+    },
+    credential_form_schemas: [],
+  },
+  preferred_provider_type: PreferredProviderTypeEnum.custom,
+  custom_configuration: {
+    status: CustomConfigurationStatusEnum.active,
+    current_credential_id: 'cred-1',
+    current_credential_name: 'Primary Key',
+    available_credentials: [{ credential_id: 'cred-1', credential_name: 'Primary Key' }],
+  },
+  system_configuration: {
+    enabled: true,
+    current_quota_type: CurrentSystemQuotaTypeEnum.trial,
+    quota_configurations: [],
+  },
+  ...overrides,
+})
+
 const renderComponent = (props: Partial<{ modelAndParameter: ModelAndParameter }> = {}) => {
   const defaultProps = {
     modelAndParameter: createModelAndParameter(),
@@ -106,8 +157,19 @@ describe('ModelParameterTrigger', () => {
       onMultipleModelConfigsChange: vi.fn(),
       onDebugWithMultipleModelChange: vi.fn(),
     })
-
-    mockUseLanguage.mockReturnValue('en_US')
+    mockUseProviderContext.mockReturnValue(createMockProviderContextValue({
+      modelProviders: [createModelProvider()],
+    }))
+    mockUseCredentialPanelState.mockReturnValue({
+      variant: 'api-active',
+      priority: 'apiKey',
+      supportsCredits: true,
+      showPrioritySwitcher: true,
+      hasCredentials: true,
+      isCreditsExhausted: false,
+      credentialName: 'Primary Key',
+      credits: 10,
+    })
   })
 
   describe('rendering', () => {
@@ -311,23 +373,51 @@ describe('ModelParameterTrigger', () => {
       expect(screen.getByTestId('model-parameter-modal')).toBeInTheDocument()
     })
 
-    it('should render "Select Model" text when no provider/model', () => {
-      renderComponent()
+    it('should render "Select Model" text when no provider or model is configured', () => {
+      renderComponent({
+        modelAndParameter: createModelAndParameter({
+          provider: '',
+          model: '',
+        }),
+      })
 
       // When currentProvider and currentModel are null, shows "Select Model"
       expect(screen.getByText('common.modelProvider.selectModel')).toBeInTheDocument()
     })
-  })
-
-  describe('language context', () => {
-    it('should use language from useLanguage hook', () => {
-      mockUseLanguage.mockReturnValue('zh_Hans')
 
+    it('should render configured model id and incompatible tooltip when model is missing from the provider list', () => {
       renderComponent()
 
-      // The language is used for MODEL_STATUS_TEXT tooltip
-      // We verify the hook is called
-      expect(mockUseLanguage).toHaveBeenCalled()
+      expect(screen.getByText('gpt-3.5-turbo')).toBeInTheDocument()
+      expect(screen.getByTestId('tooltip')).toHaveAttribute('data-content', 'common.modelProvider.selector.incompatibleTip')
+    })
+
+    it('should render configure required tooltip for no-configure status', () => {
+      const { unmount } = renderComponent()
+      const triggerContent = capturedModalProps?.renderTrigger({
+        open: false,
+        currentProvider: { provider: 'openai' },
+        currentModel: { model: 'gpt-3.5-turbo', status: ModelStatusEnum.noConfigure },
+      })
+
+      unmount()
+      render(<>{triggerContent}</>)
+
+      expect(screen.getByTestId('tooltip')).toHaveAttribute('data-content', 'common.modelProvider.selector.configureRequired')
+    })
+
+    it('should render disabled tooltip for disabled status', () => {
+      const { unmount } = renderComponent()
+      const triggerContent = capturedModalProps?.renderTrigger({
+        open: false,
+        currentProvider: { provider: 'openai' },
+        currentModel: { model: 'gpt-3.5-turbo', status: ModelStatusEnum.disabled },
+      })
+
+      unmount()
+      render(<>{triggerContent}</>)
+
+      expect(screen.getByTestId('tooltip')).toHaveAttribute('data-content', 'common.modelProvider.selector.disabled')
     })
   })
 

web/app/components/app/configuration/debug/debug-with-multiple-model/model-parameter-trigger.tsx

@@ -1,22 +1,20 @@
 import type { FC } from 'react'
 import type { ModelAndParameter } from '../types'
 import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import { RiArrowDownSLine } from '@remixicon/react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
-import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
 import Tooltip from '@/app/components/base/tooltip'
 import {
-
-  MODEL_STATUS_TEXT,
-  ModelStatusEnum,
-} from '@/app/components/header/account-setting/model-provider-page/declarations'
-import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+  DERIVED_MODEL_STATUS_BADGE_I18N,
+  DERIVED_MODEL_STATUS_TOOLTIP_I18N,
+  deriveModelStatus,
+} from '@/app/components/header/account-setting/model-provider-page/derive-model-status'
 import ModelIcon from '@/app/components/header/account-setting/model-provider-page/model-icon'
 import ModelName from '@/app/components/header/account-setting/model-provider-page/model-name'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
+import { useCredentialPanelState } from '@/app/components/header/account-setting/model-provider-page/provider-added-card/use-credential-panel-state'
 import { useDebugConfigurationContext } from '@/context/debug-configuration'
+import { useProviderContext } from '@/context/provider-context'
 import { useDebugWithMultipleModelContext } from './context'
 
 type ModelParameterTriggerProps = {
@@ -34,8 +32,10 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
     onMultipleModelConfigsChange,
     onDebugWithMultipleModelChange,
   } = useDebugWithMultipleModelContext()
-  const language = useLanguage()
+  const { modelProviders } = useProviderContext()
   const index = multipleModelConfigs.findIndex(v => v.id === modelAndParameter.id)
+  const providerMeta = modelProviders.find(provider => provider.provider === modelAndParameter.provider)
+  const credentialState = useCredentialPanelState(providerMeta)
 
   const handleSelectModel = ({ modelId, provider }: { modelId: string, provider: string }) => {
     const newModelConfigs = [...multipleModelConfigs]
@@ -69,55 +69,77 @@ const ModelParameterTrigger: FC<ModelParameterTriggerProps> = ({
         open,
         currentProvider,
         currentModel,
-      }) => (
-        <div
-          className={`
-            flex h-8 max-w-[200px] cursor-pointer items-center rounded-lg px-2
-            ${open && 'bg-state-base-hover'}
-            ${currentModel && currentModel.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]'}
-          `}
-        >
-          {
-            currentProvider && (
-              <ModelIcon
-                className="mr-1 !h-4 !w-4"
-                provider={currentProvider}
-                modelName={currentModel?.model}
-              />
-            )
-          }
-          {
-            !currentProvider && (
-              <div className="mr-1 flex h-4 w-4 items-center justify-center rounded">
-                <CubeOutline className="h-4 w-4 text-text-accent" />
-              </div>
-            )
-          }
-          {
-            currentModel && (
-              <ModelName
-                className="mr-0.5 text-text-secondary"
-                modelItem={currentModel}
-              />
-            )
-          }
-          {
-            !currentModel && (
-              <div className="mr-0.5 truncate text-[13px] font-medium text-text-accent">
-                {t('modelProvider.selectModel', { ns: 'common' })}
-              </div>
-            )
-          }
-          <RiArrowDownSLine className={`h-3 w-3 ${(currentModel && currentProvider) ? 'text-text-tertiary' : 'text-text-accent'}`} />
-          {
-            currentModel && currentModel.status !== ModelStatusEnum.active && (
-              <Tooltip popupContent={MODEL_STATUS_TEXT[currentModel.status][language]}>
-                <AlertTriangle className="h-4 w-4 text-[#F79009]" />
-              </Tooltip>
-            )
-          }
-        </div>
-      )}
+      }) => {
+        const status = deriveModelStatus(
+          modelAndParameter.model,
+          modelAndParameter.provider,
+          providerMeta,
+          currentModel ?? undefined,
+          credentialState,
+        )
+        const iconProvider = currentProvider || providerMeta
+        const statusLabelKey = DERIVED_MODEL_STATUS_BADGE_I18N[status]
+        const statusTooltipKey = DERIVED_MODEL_STATUS_TOOLTIP_I18N[status]
+        const isEmpty = status === 'empty'
+        const isActive = status === 'active'
+
+        return (
+          <div
+            className={`
+              flex h-8 max-w-[200px] cursor-pointer items-center rounded-lg px-2
+              ${open && 'bg-state-base-hover'}
+              ${!isEmpty && !isActive && '!bg-[#FFFAEB]'}
+            `}
+          >
+            {
+              iconProvider && !isEmpty && (
+                <ModelIcon
+                  className="mr-1 !h-4 !w-4"
+                  provider={iconProvider}
+                  modelName={currentModel?.model || modelAndParameter.model}
+                />
+              )
+            }
+            {
+              (!iconProvider || isEmpty) && (
+                <div className="mr-1 flex h-4 w-4 items-center justify-center rounded">
+                  <span className="i-custom-vender-line-shapes-cube-outline h-4 w-4 text-text-accent" />
+                </div>
+              )
+            }
+            {
+              currentModel && (
+                <ModelName
+                  className="mr-0.5 text-text-secondary"
+                  modelItem={currentModel}
+                />
+              )
+            }
+            {
+              !currentModel && !isEmpty && (
+                <div className="mr-0.5 truncate text-[13px] font-medium text-text-secondary">
+                  {modelAndParameter.model}
+                </div>
+              )
+            }
+            {
+              isEmpty && (
+                <div className="mr-0.5 truncate text-[13px] font-medium text-text-accent">
+                  {t('modelProvider.selectModel', { ns: 'common' })}
+                </div>
+              )
+            }
+            <span className={`i-ri-arrow-down-s-line h-3 w-3 ${isEmpty ? 'text-text-accent' : 'text-text-tertiary'}`} />
+            {
+              !isEmpty && !isActive && statusLabelKey && (
+                <Tooltip popupContent={t((statusTooltipKey || statusLabelKey) as 'modelProvider.selector.incompatible', { ns: 'common' })}>
+                  <span className="i-custom-vender-line-alertsAndFeedback-alert-triangle h-4 w-4 text-[#F79009]" />
+                </Tooltip>
+              )
+            }
+          </div>
+        )
+      }}
     />
   )
 }

web/app/components/app/configuration/debug/index.tsx

@@ -33,7 +33,7 @@ import { ToastContext } from '@/app/components/base/toast/context'
 import TooltipPlus from '@/app/components/base/tooltip'
 import { ModelFeatureEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import { DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG, IS_CE_EDITION } from '@/config'
+import { DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config'
 import ConfigContext from '@/context/debug-configuration'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useProviderContext } from '@/context/provider-context'
@@ -394,7 +394,7 @@ const Debug: FC<IDebug> = ({
     <>
       <div className="shrink-0">
         <div className="flex items-center justify-between px-4 pb-2 pt-3">
-          <div className="system-xl-semibold text-text-primary">{t('inputs.title', { ns: 'appDebug' })}</div>
+          <div className="text-text-primary system-xl-semibold">{t('inputs.title', { ns: 'appDebug' })}</div>
           <div className="flex items-center">
             {
               debugWithMultipleModel
@@ -505,6 +505,26 @@ const Debug: FC<IDebug> = ({
       {
         !debugWithMultipleModel && (
           <div className="flex grow flex-col" ref={ref}>
+            {/* No model provider configured */}
+            {(!modelConfig.provider || !isAPIKeySet) && (
+              <HasNotSetAPIKEY onSetting={onSetting} />
+            )}
+            {/* No model selected */}
+            {modelConfig.provider && isAPIKeySet && !modelConfig.model_id && (
+              <div className="flex grow flex-col items-center justify-center pb-[120px]">
+                <div className="flex w-full max-w-[400px] flex-col gap-2 px-4 py-4">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-[10px]">
+                    <div className="flex h-full w-full items-center justify-center overflow-hidden rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg p-1 shadow-lg backdrop-blur-[5px]">
+                      <span className="i-ri-brain-2-line h-5 w-5 text-text-tertiary" />
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <div className="text-text-secondary system-md-semibold">{t('noModelSelected', { ns: 'appDebug' })}</div>
+                    <div className="text-text-tertiary system-xs-regular">{t('noModelSelectedTip', { ns: 'appDebug' })}</div>
+                  </div>
+                </div>
+              </div>
+            )}
             {/* Chat */}
             {mode !== AppModeEnum.COMPLETION && (
               <div className="h-0 grow overflow-hidden">
@@ -539,7 +559,7 @@ const Debug: FC<IDebug> = ({
                 {!completionRes && !isResponding && (
                   <div className="flex grow flex-col items-center justify-center gap-2">
                     <RiSparklingFill className="h-12 w-12 text-text-empty-state-icon" />
-                    <div className="system-sm-regular text-text-quaternary">{t('noResult', { ns: 'appDebug' })}</div>
+                    <div className="text-text-quaternary system-sm-regular">{t('noResult', { ns: 'appDebug' })}</div>
                   </div>
                 )}
               </>
@@ -570,7 +590,6 @@ const Debug: FC<IDebug> = ({
           />
         )
       }
-      {!isAPIKeySet && !readonly && (<HasNotSetAPIKEY isTrailFinished={!IS_CE_EDITION} onSetting={onSetting} />)}
     </>
   )
 }

web/app/components/app/configuration/index.tsx

@@ -966,10 +966,10 @@ const Configuration: FC = () => {
               <div className="bg-default-subtle absolute left-0 top-0 h-14 w-full">
                 <div className="flex h-14 items-center justify-between px-6">
                   <div className="flex items-center">
-                    <div className="system-xl-semibold text-text-primary">{t('orchestrate', { ns: 'appDebug' })}</div>
+                    <div className="text-text-primary system-xl-semibold">{t('orchestrate', { ns: 'appDebug' })}</div>
                     <div className="flex h-[14px] items-center space-x-1 text-xs">
                       {isAdvancedMode && (
-                        <div className="system-xs-medium-uppercase ml-1 flex h-5 items-center rounded-md border border-components-button-secondary-border px-1.5 uppercase text-text-tertiary">{t('promptMode.advanced', { ns: 'appDebug' })}</div>
+                        <div className="ml-1 flex h-5 items-center rounded-md border border-components-button-secondary-border px-1.5 uppercase text-text-tertiary system-xs-medium-uppercase">{t('promptMode.advanced', { ns: 'appDebug' })}</div>
                       )}
                     </div>
                   </div>
@@ -1030,8 +1030,8 @@ const Configuration: FC = () => {
                 <Config />
               </div>
               {!isMobile && (
-                <div className="relative flex h-full w-1/2 grow flex-col overflow-y-auto " style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
-                  <div className="flex grow flex-col rounded-tl-2xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-chatbot-bg ">
+                <div className="relative flex h-full w-1/2 grow flex-col overflow-y-auto" style={{ borderColor: 'rgba(0, 0, 0, 0.02)' }}>
+                  <div className="flex grow flex-col rounded-tl-2xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-chatbot-bg">
                     <Debug
                       isAPIKeySet={isAPIKeySet}
                       onSetting={() => setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.PROVIDER })}

web/app/components/app/configuration/tools/external-data-tool-modal.tsx

@@ -217,7 +217,7 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
           <AppIcon
             size="large"
             onClick={() => { setShowEmojiPicker(true) }}
-            className="!h-9 !w-9 cursor-pointer rounded-lg border-[0.5px] border-components-panel-border "
+            className="!h-9 !w-9 cursor-pointer rounded-lg border-[0.5px] border-components-panel-border"
             icon={localeData.icon}
             background={localeData.icon_background}
           />

web/app/components/app/create-app-modal/index.tsx

@@ -117,10 +117,10 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
           <div className="px-10">
             <div className="h-6 w-full 2xl:h-[139px]" />
             <div className="pb-6 pt-1">
-              <span className="title-2xl-semi-bold text-text-primary">{t('newApp.startFromBlank', { ns: 'app' })}</span>
+              <span className="text-text-primary title-2xl-semi-bold">{t('newApp.startFromBlank', { ns: 'app' })}</span>
             </div>
             <div className="mb-2 leading-6">
-              <span className="system-sm-semibold text-text-secondary">{t('newApp.chooseAppType', { ns: 'app' })}</span>
+              <span className="text-text-secondary system-sm-semibold">{t('newApp.chooseAppType', { ns: 'app' })}</span>
             </div>
             <div className="flex w-[660px] flex-col gap-4">
               <div>
@@ -160,7 +160,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
                     className="flex cursor-pointer items-center border-0 bg-transparent p-0"
                     onClick={() => setIsAppTypeExpanded(!isAppTypeExpanded)}
                   >
-                    <span className="system-2xs-medium-uppercase text-text-tertiary">{t('newApp.forBeginners', { ns: 'app' })}</span>
+                    <span className="text-text-tertiary system-2xs-medium-uppercase">{t('newApp.forBeginners', { ns: 'app' })}</span>
                     <RiArrowRightSLine className={`ml-1 h-4 w-4 text-text-tertiary transition-transform ${isAppTypeExpanded ? 'rotate-90' : ''}`} />
                   </button>
                 </div>
@@ -212,7 +212,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               <div className="flex items-center space-x-3">
                 <div className="flex-1">
                   <div className="mb-1 flex h-6 items-center">
-                    <label className="system-sm-semibold text-text-secondary">{t('newApp.captionName', { ns: 'app' })}</label>
+                    <label className="text-text-secondary system-sm-semibold">{t('newApp.captionName', { ns: 'app' })}</label>
                   </div>
                   <Input
                     value={name}
@@ -243,8 +243,8 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
               </div>
               <div>
                 <div className="mb-1 flex h-6 items-center">
-                  <label className="system-sm-semibold text-text-secondary">{t('newApp.captionDescription', { ns: 'app' })}</label>
-                  <span className="system-xs-regular ml-1 text-text-tertiary">
+                  <label className="text-text-secondary system-sm-semibold">{t('newApp.captionDescription', { ns: 'app' })}</label>
+                  <span className="ml-1 text-text-tertiary system-xs-regular">
                     (
                     {t('newApp.optional', { ns: 'app' })}
                     )
@@ -260,7 +260,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }:
             </div>
             {isAppsFull && <AppsFull className="mt-4" loc="app-create" />}
             <div className="flex items-center justify-between pb-10 pt-5">
-              <div className="system-xs-regular flex cursor-pointer items-center gap-1 text-text-tertiary" onClick={onCreateFromTemplate}>
+              <div className="flex cursor-pointer items-center gap-1 text-text-tertiary system-xs-regular" onClick={onCreateFromTemplate}>
                 <span>{t('newApp.noIdeaTip', { ns: 'app' })}</span>
                 <div className="p-[1px]">
                   <RiArrowRightLine className="h-3.5 w-3.5" />
@@ -334,8 +334,8 @@ function AppTypeCard({ icon, title, description, active, onClick }: AppTypeCardP
       onClick={onClick}
     >
       {icon}
-      <div className="system-sm-semibold mb-0.5 mt-2 text-text-secondary">{title}</div>
-      <div className="system-xs-regular line-clamp-2 text-text-tertiary" title={description}>{description}</div>
+      <div className="mb-0.5 mt-2 text-text-secondary system-sm-semibold">{title}</div>
+      <div className="line-clamp-2 text-text-tertiary system-xs-regular" title={description}>{description}</div>
     </div>
   )
 }
@@ -367,8 +367,8 @@ function AppPreview({ mode }: { mode: AppModeEnum }) {
   const previewInfo = modeToPreviewInfoMap[mode]
   return (
     <div className="px-8 py-4">
-      <h4 className="system-sm-semibold-uppercase text-text-secondary">{previewInfo.title}</h4>
-      <div className="system-xs-regular mt-1 min-h-8 max-w-96 text-text-tertiary">
+      <h4 className="text-text-secondary system-sm-semibold-uppercase">{previewInfo.title}</h4>
+      <div className="mt-1 min-h-8 max-w-96 text-text-tertiary system-xs-regular">
         <span>{previewInfo.description}</span>
       </div>
     </div>

web/app/components/app/create-from-dsl-modal/index.tsx

@@ -232,7 +232,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         isShow={show}
         onClose={noop}
       >
-        <div className="title-2xl-semi-bold flex items-center justify-between pb-3 pl-6 pr-5 pt-6 text-text-primary">
+        <div className="flex items-center justify-between pb-3 pl-6 pr-5 pt-6 text-text-primary title-2xl-semi-bold">
           {t('importFromDSL', { ns: 'app' })}
           <div
             className="flex h-8 w-8 cursor-pointer items-center"
@@ -241,7 +241,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
             <RiCloseLine className="h-5 w-5 text-text-tertiary" />
           </div>
         </div>
-        <div className="system-md-semibold flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary">
+        <div className="flex h-9 items-center space-x-6 border-b border-divider-subtle px-6 text-text-tertiary system-md-semibold">
           {
             tabs.map(tab => (
               <div
@@ -275,7 +275,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
           {
             currentTab === CreateFromDSLModalTab.FROM_URL && (
               <div>
-                <div className="system-md-semibold mb-1 text-text-secondary">DSL URL</div>
+                <div className="mb-1 text-text-secondary system-md-semibold">DSL URL</div>
                 <Input
                   placeholder={t('importFromDSLUrlPlaceholder', { ns: 'app' }) || ''}
                   value={dslUrlValue}
@@ -309,8 +309,8 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
         className="w-[480px]"
       >
         <div className="flex flex-col items-start gap-2 self-stretch pb-4">
-          <div className="title-2xl-semi-bold text-text-primary">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
-          <div className="system-md-regular flex grow flex-col text-text-secondary">
+          <div className="text-text-primary title-2xl-semi-bold">{t('newApp.appCreateDSLErrorTitle', { ns: 'app' })}</div>
+          <div className="flex grow flex-col text-text-secondary system-md-regular">
             <div>{t('newApp.appCreateDSLErrorPart1', { ns: 'app' })}</div>
             <div>{t('newApp.appCreateDSLErrorPart2', { ns: 'app' })}</div>
             <br />

web/app/components/app/create-from-dsl-modal/uploader.tsx

@@ -121,7 +121,7 @@ const Uploader: FC<Props> = ({
           </div>
         )}
         {file && (
-          <div className={cn('group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs', ' hover:bg-components-panel-on-panel-item-bg-hover')}>
+          <div className={cn('group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs', 'hover:bg-components-panel-on-panel-item-bg-hover')}>
             <div className="flex items-center justify-center p-3">
               <YamlIcon className="h-6 w-6 shrink-0" />
             </div>

web/app/components/app/log/list.tsx

@@ -96,7 +96,7 @@ const statusTdRender = (statusCount: StatusCount) => {
 
   if (statusCount.paused > 0) {
     return (
-      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
         <Indicator color="yellow" />
         <span className="text-util-colors-warning-warning-600">Pending</span>
       </div>
@@ -104,7 +104,7 @@ const statusTdRender = (statusCount: StatusCount) => {
   }
   else if (statusCount.partial_success + statusCount.failed === 0) {
     return (
-      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
         <Indicator color="green" />
         <span className="text-util-colors-green-green-600">Success</span>
       </div>
@@ -112,7 +112,7 @@ const statusTdRender = (statusCount: StatusCount) => {
   }
   else if (statusCount.failed === 0) {
     return (
-      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
         <Indicator color="green" />
         <span className="text-util-colors-green-green-600">Partial Success</span>
       </div>
@@ -120,7 +120,7 @@ const statusTdRender = (statusCount: StatusCount) => {
   }
   else {
     return (
-      <div className="system-xs-semibold-uppercase inline-flex items-center gap-1">
+      <div className="inline-flex items-center gap-1 system-xs-semibold-uppercase">
         <Indicator color="red" />
         <span className="text-util-colors-red-red-600">
           {statusCount.failed}
@@ -562,9 +562,9 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
       {/* Panel Header */}
       <div className="flex shrink-0 items-center gap-2 rounded-t-xl bg-components-panel-bg pb-2 pl-4 pr-3 pt-3">
         <div className="shrink-0">
-          <div className="system-xs-semibold-uppercase mb-0.5 text-text-primary">{isChatMode ? t('detail.conversationId', { ns: 'appLog' }) : t('detail.time', { ns: 'appLog' })}</div>
+          <div className="mb-0.5 text-text-primary system-xs-semibold-uppercase">{isChatMode ? t('detail.conversationId', { ns: 'appLog' }) : t('detail.time', { ns: 'appLog' })}</div>
           {isChatMode && (
-            <div className="system-2xs-regular-uppercase flex items-center text-text-secondary">
+            <div className="flex items-center text-text-secondary system-2xs-regular-uppercase">
               <Tooltip
                 popupContent={detail.id}
               >
@@ -574,7 +574,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
             </div>
           )}
           {!isChatMode && (
-            <div className="system-2xs-regular-uppercase text-text-secondary">{formatTime(detail.created_at, t('dateTimeFormat', { ns: 'appLog' }) as string)}</div>
+            <div className="text-text-secondary system-2xs-regular-uppercase">{formatTime(detail.created_at, t('dateTimeFormat', { ns: 'appLog' }) as string)}</div>
           )}
         </div>
         <div className="flex grow flex-wrap items-center justify-end gap-y-1">
@@ -600,7 +600,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
           ? (
               <div className="px-6 py-4">
                 <div className="flex h-[18px] items-center space-x-3">
-                  <div className="system-xs-semibold-uppercase text-text-tertiary">{t('table.header.output', { ns: 'appLog' })}</div>
+                  <div className="text-text-tertiary system-xs-semibold-uppercase">{t('table.header.output', { ns: 'appLog' })}</div>
                   <div
                     className="h-px grow"
                     style={{
@@ -692,7 +692,7 @@ function DetailPanel({ detail, onFeedback }: IDetailPanel) {
               </div>
               {hasMore && (
                 <div className="py-3 text-center">
-                  <div className="system-xs-regular text-text-tertiary">
+                  <div className="text-text-tertiary system-xs-regular">
                     {t('detail.loading', { ns: 'appLog' })}
                     ...
                   </div>
@@ -950,7 +950,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
         )}
         popupClassName={(isHighlight && !isChatMode) ? '' : '!hidden'}
       >
-        <div className={cn(isEmptyStyle ? 'text-text-quaternary' : 'text-text-secondary', !isHighlight ? '' : 'bg-orange-100', 'system-sm-regular overflow-hidden text-ellipsis whitespace-nowrap')}>
+        <div className={cn(isEmptyStyle ? 'text-text-quaternary' : 'text-text-secondary', !isHighlight ? '' : 'bg-orange-100', 'overflow-hidden text-ellipsis whitespace-nowrap system-sm-regular')}>
           {value || '-'}
         </div>
       </Tooltip>
@@ -963,7 +963,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
   return (
     <div className="relative mt-2 grow overflow-x-auto">
       <table className={cn('w-full min-w-[440px] border-collapse border-0')}>
-        <thead className="system-xs-medium-uppercase text-text-tertiary">
+        <thead className="text-text-tertiary system-xs-medium-uppercase">
           <tr>
             <td className="w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1"></td>
             <td className="whitespace-nowrap bg-background-section-burn py-1.5 pl-3">{isChatMode ? t('table.header.summary', { ns: 'appLog' }) : t('table.header.input', { ns: 'appLog' })}</td>
@@ -976,7 +976,7 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
             <td className="whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3">{t('table.header.time', { ns: 'appLog' })}</td>
           </tr>
         </thead>
-        <tbody className="system-sm-regular text-text-secondary">
+        <tbody className="text-text-secondary system-sm-regular">
           {logs.data.map((log: any) => {
             const endUser = log.from_end_user_session_id || log.from_account_name
             const leftValue = get(log, isChatMode ? 'name' : 'message.inputs.query') || (!isChatMode ? (get(log, 'message.query') || get(log, 'message.inputs.default_input')) : '') || ''

web/app/components/app/overview/settings/index.tsx

@@ -231,12 +231,12 @@ const SettingsModal: FC<ISettingsModalProps> = ({
         {/* header */}
         <div className="pb-3 pl-6 pr-5 pt-5">
           <div className="flex items-center gap-1">
-            <div className="title-2xl-semi-bold grow text-text-primary">{t(`${prefixSettings}.title`, { ns: 'appOverview' })}</div>
+            <div className="grow text-text-primary title-2xl-semi-bold">{t(`${prefixSettings}.title`, { ns: 'appOverview' })}</div>
             <ActionButton className="shrink-0" onClick={onHide}>
               <RiCloseLine className="h-4 w-4" />
             </ActionButton>
           </div>
-          <div className="system-xs-regular mt-0.5 text-text-tertiary">
+          <div className="mt-0.5 text-text-tertiary system-xs-regular">
             <span>{t(`${prefixSettings}.modalTip`, { ns: 'appOverview' })}</span>
           </div>
         </div>
@@ -245,7 +245,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           {/* name & icon */}
           <div className="flex gap-4">
             <div className="grow">
-              <div className={cn('system-sm-semibold mb-1 py-1 text-text-secondary')}>{t(`${prefixSettings}.webName`, { ns: 'appOverview' })}</div>
+              <div className={cn('mb-1 py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.webName`, { ns: 'appOverview' })}</div>
               <Input
                 className="w-full"
                 value={inputInfo.title}
@@ -265,32 +265,32 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           </div>
           {/* description */}
           <div className="relative">
-            <div className={cn('system-sm-semibold py-1 text-text-secondary')}>{t(`${prefixSettings}.webDesc`, { ns: 'appOverview' })}</div>
+            <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.webDesc`, { ns: 'appOverview' })}</div>
             <Textarea
               className="mt-1"
               value={inputInfo.desc}
               onChange={e => onDesChange(e.target.value)}
               placeholder={t(`${prefixSettings}.webDescPlaceholder`, { ns: 'appOverview' }) as string}
             />
-            <p className={cn('body-xs-regular pb-0.5 text-text-tertiary')}>{t(`${prefixSettings}.webDescTip`, { ns: 'appOverview' })}</p>
+            <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>{t(`${prefixSettings}.webDescTip`, { ns: 'appOverview' })}</p>
           </div>
           <Divider className="my-0 h-px" />
           {/* answer icon */}
           {isChat && (
             <div className="w-full">
               <div className="flex items-center justify-between">
-                <div className={cn('system-sm-semibold py-1 text-text-secondary')}>{t('answerIcon.title', { ns: 'app' })}</div>
+                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t('answerIcon.title', { ns: 'app' })}</div>
                 <Switch
                   value={inputInfo.use_icon_as_answer_icon}
                   onChange={v => setInputInfo({ ...inputInfo, use_icon_as_answer_icon: v })}
                 />
               </div>
-              <p className="body-xs-regular pb-0.5 text-text-tertiary">{t('answerIcon.description', { ns: 'app' })}</p>
+              <p className="pb-0.5 text-text-tertiary body-xs-regular">{t('answerIcon.description', { ns: 'app' })}</p>
             </div>
           )}
           {/* language */}
           <div className="flex items-center">
-            <div className={cn('system-sm-semibold grow py-1 text-text-secondary')}>{t(`${prefixSettings}.language`, { ns: 'appOverview' })}</div>
+            <div className={cn('grow py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.language`, { ns: 'appOverview' })}</div>
             <SimpleSelect
               wrapperClassName="w-[200px]"
               items={languages.filter(item => item.supported)}
@@ -303,8 +303,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           {isChat && (
             <div className="flex items-center">
               <div className="grow">
-                <div className={cn('system-sm-semibold py-1 text-text-secondary')}>{t(`${prefixSettings}.chatColorTheme`, { ns: 'appOverview' })}</div>
-                <div className="body-xs-regular pb-0.5 text-text-tertiary">{t(`${prefixSettings}.chatColorThemeDesc`, { ns: 'appOverview' })}</div>
+                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.chatColorTheme`, { ns: 'appOverview' })}</div>
+                <div className="pb-0.5 text-text-tertiary body-xs-regular">{t(`${prefixSettings}.chatColorThemeDesc`, { ns: 'appOverview' })}</div>
               </div>
               <div className="shrink-0">
                 <Input
@@ -314,7 +314,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                   placeholder="E.g #A020F0"
                 />
                 <div className="flex items-center justify-between">
-                  <p className={cn('body-xs-regular text-text-tertiary')}>{t(`${prefixSettings}.chatColorThemeInverted`, { ns: 'appOverview' })}</p>
+                  <p className={cn('text-text-tertiary body-xs-regular')}>{t(`${prefixSettings}.chatColorThemeInverted`, { ns: 'appOverview' })}</p>
                   <Switch value={inputInfo.chatColorThemeInverted} onChange={v => setInputInfo({ ...inputInfo, chatColorThemeInverted: v })}></Switch>
                 </div>
               </div>
@@ -323,22 +323,22 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           {/* workflow detail */}
           <div className="w-full">
             <div className="flex items-center justify-between">
-              <div className={cn('system-sm-semibold py-1 text-text-secondary')}>{t(`${prefixSettings}.workflow.subTitle`, { ns: 'appOverview' })}</div>
+              <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.workflow.subTitle`, { ns: 'appOverview' })}</div>
               <Switch
                 disabled={!(appInfo.mode === AppModeEnum.WORKFLOW || appInfo.mode === AppModeEnum.ADVANCED_CHAT)}
                 value={inputInfo.show_workflow_steps}
                 onChange={v => setInputInfo({ ...inputInfo, show_workflow_steps: v })}
               />
             </div>
-            <p className="body-xs-regular pb-0.5 text-text-tertiary">{t(`${prefixSettings}.workflow.showDesc`, { ns: 'appOverview' })}</p>
+            <p className="pb-0.5 text-text-tertiary body-xs-regular">{t(`${prefixSettings}.workflow.showDesc`, { ns: 'appOverview' })}</p>
           </div>
           {/* more settings switch */}
           <Divider className="my-0 h-px" />
           {!isShowMore && (
             <div className="flex cursor-pointer items-center" onClick={() => setIsShowMore(true)}>
               <div className="grow">
-                <div className={cn('system-sm-semibold py-1 text-text-secondary')}>{t(`${prefixSettings}.more.entry`, { ns: 'appOverview' })}</div>
-                <p className={cn('body-xs-regular pb-0.5 text-text-tertiary')}>
+                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.entry`, { ns: 'appOverview' })}</div>
+                <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>
                   {t(`${prefixSettings}.more.copyRightPlaceholder`, { ns: 'appOverview' })}
                   {' '}
                   &
@@ -356,7 +356,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               <div className="w-full">
                 <div className="flex items-center">
                   <div className="flex grow items-center">
-                    <div className={cn('system-sm-semibold mr-1 py-1 text-text-secondary')}>{t(`${prefixSettings}.more.copyright`, { ns: 'appOverview' })}</div>
+                    <div className={cn('mr-1 py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.copyright`, { ns: 'appOverview' })}</div>
                     {/* upgrade button */}
                     {enableBilling && isFreePlan && (
                       <div className="h-[18px] select-none">
@@ -385,7 +385,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
                     />
                   </Tooltip>
                 </div>
-                <p className="body-xs-regular pb-0.5 text-text-tertiary">{t(`${prefixSettings}.more.copyrightTip`, { ns: 'appOverview' })}</p>
+                <p className="pb-0.5 text-text-tertiary body-xs-regular">{t(`${prefixSettings}.more.copyrightTip`, { ns: 'appOverview' })}</p>
                 {inputInfo.copyrightSwitchValue && (
                   <Input
                     className="mt-2 h-10"
@@ -397,8 +397,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               </div>
               {/* privacy policy */}
               <div className="w-full">
-                <div className={cn('system-sm-semibold py-1 text-text-secondary')}>{t(`${prefixSettings}.more.privacyPolicy`, { ns: 'appOverview' })}</div>
-                <p className={cn('body-xs-regular pb-0.5 text-text-tertiary')}>
+                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.privacyPolicy`, { ns: 'appOverview' })}</div>
+                <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>
                   <Trans
                     i18nKey={`${prefixSettings}.more.privacyPolicyTip`}
                     ns="appOverview"
@@ -414,8 +414,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
               </div>
               {/* custom disclaimer */}
               <div className="w-full">
-                <div className={cn('system-sm-semibold py-1 text-text-secondary')}>{t(`${prefixSettings}.more.customDisclaimer`, { ns: 'appOverview' })}</div>
-                <p className={cn('body-xs-regular pb-0.5 text-text-tertiary')}>{t(`${prefixSettings}.more.customDisclaimerTip`, { ns: 'appOverview' })}</p>
+                <div className={cn('py-1 text-text-secondary system-sm-semibold')}>{t(`${prefixSettings}.more.customDisclaimer`, { ns: 'appOverview' })}</div>
+                <p className={cn('pb-0.5 text-text-tertiary body-xs-regular')}>{t(`${prefixSettings}.more.customDisclaimerTip`, { ns: 'appOverview' })}</p>
                 <Textarea
                   className="mt-1"
                   value={inputInfo.customDisclaimer}

web/app/components/base/icons/assets/vender/line/financeAndECommerce/credits-coin.svg

@@ -0,0 +1,4 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 5C2 3.44487 2.58482 1.98537 3.54004 1.04932C2.17681 1.34034 1 2.90001 1 5C1 7.09996 2.17685 8.65912 3.54004 8.9502C2.58496 8.01413 2 6.55501 2 5ZM3 5C3 7.33338 4.4528 9 6 9C7.5472 9 9 7.33338 9 5C9 2.66664 7.5472 1 6 1C4.4528 1 3 2.66664 3 5ZM10 5C10 7.63722 8.3188 10 6 10H4C1.6812 10 0 7.63722 0 5C0 2.3628 1.6812 0 4 0H6C8.3188 0 10 2.3628 10 5Z" fill="#676F83"/>
+<path d="M6.71519 4.09259L6.45385 3.18667C6.42141 3.07421 6.34037 3 6.25 3C6.15963 3 6.07859 3.07421 6.04615 3.18667L5.78481 4.09259C5.74675 4.22464 5.66849 4.32899 5.56945 4.37978L4.88999 4.7282C4.80565 4.77146 4.75 4.87951 4.75 5C4.75 5.12049 4.80565 5.22854 4.88999 5.2718L5.56945 5.62022C5.66849 5.67101 5.74675 5.77536 5.78481 5.90741L6.04615 6.81333C6.07859 6.92579 6.15963 7 6.25 7C6.34037 7 6.42141 6.92579 6.45385 6.81333L6.71519 5.90741C6.75325 5.77536 6.83151 5.67101 6.93055 5.62022L7.61001 5.2718C7.69435 5.22854 7.75 5.12049 7.75 5C7.75 4.87951 7.69435 4.77146 7.61001 4.7282L6.93055 4.37978C6.83151 4.32899 6.75325 4.22464 6.71519 4.09259Z" fill="#676F83"/>
+</svg>

web/app/components/base/icons/assets/vender/solid/general/arrow-down-round-fill.svg

@@ -1,5 +1,5 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="arrow-down-round-fill">
-<path id="Vector" d="M6.02913 6.23572C5.08582 6.23572 4.56482 7.33027 5.15967 8.06239L7.13093 10.4885C7.57922 11.0403 8.42149 11.0403 8.86986 10.4885L10.8411 8.06239C11.4359 7.33027 10.9149 6.23572 9.97158 6.23572H6.02913Z" fill="#101828"/>
+<path id="Vector" d="M6.02913 6.23572C5.08582 6.23572 4.56482 7.33027 5.15967 8.06239L7.13093 10.4885C7.57922 11.0403 8.42149 11.0403 8.86986 10.4885L10.8411 8.06239C11.4359 7.33027 10.9149 6.23572 9.97158 6.23572H6.02913Z" fill="currentColor"/>
 </g>
 </svg>

web/app/components/base/icons/assets/vender/solid/general/x-circle.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path id="Solid" fill-rule="evenodd" clip-rule="evenodd" d="M8.00008 0.666016C3.94999 0.666016 0.666748 3.94926 0.666748 7.99935C0.666748 12.0494 3.94999 15.3327 8.00008 15.3327C12.0502 15.3327 15.3334 12.0494 15.3334 7.99935C15.3334 3.94926 12.0502 0.666016 8.00008 0.666016ZM10.4715 5.52794C10.7318 5.78829 10.7318 6.2104 10.4715 6.47075L8.94289 7.99935L10.4715 9.52794C10.7318 9.78829 10.7318 10.2104 10.4715 10.4708C10.2111 10.7311 9.78903 10.7311 9.52868 10.4708L8.00008 8.94216L6.47149 10.4708C6.21114 10.7311 5.78903 10.7311 5.52868 10.4708C5.26833 10.2104 5.26833 9.78829 5.52868 9.52794L7.05727 7.99935L5.52868 6.47075C5.26833 6.2104 5.26833 5.78829 5.52868 5.52794C5.78903 5.26759 6.21114 5.26759 6.47149 5.52794L8.00008 7.05654L9.52868 5.52794C9.78903 5.26759 10.2111 5.26759 10.4715 5.52794Z" fill="#98A2B3"/>
+<path id="Solid" fill-rule="evenodd" clip-rule="evenodd" d="M8.00008 0.666016C3.94999 0.666016 0.666748 3.94926 0.666748 7.99935C0.666748 12.0494 3.94999 15.3327 8.00008 15.3327C12.0502 15.3327 15.3334 12.0494 15.3334 7.99935C15.3334 3.94926 12.0502 0.666016 8.00008 0.666016ZM10.4715 5.52794C10.7318 5.78829 10.7318 6.2104 10.4715 6.47075L8.94289 7.99935L10.4715 9.52794C10.7318 9.78829 10.7318 10.2104 10.4715 10.4708C10.2111 10.7311 9.78903 10.7311 9.52868 10.4708L8.00008 8.94216L6.47149 10.4708C6.21114 10.7311 5.78903 10.7311 5.52868 10.4708C5.26833 10.2104 5.26833 9.78829 5.52868 9.52794L7.05727 7.99935L5.52868 6.47075C5.26833 6.2104 5.26833 5.78829 5.52868 5.52794C5.78903 5.26759 6.21114 5.26759 6.47149 5.52794L8.00008 7.05654L9.52868 5.52794C9.78903 5.26759 10.2111 5.26759 10.4715 5.52794Z" fill="currentColor"/>
 </svg>

web/app/components/base/icons/src/vender/line/financeAndECommerce/CreditsCoin.json

@@ -0,0 +1,35 @@
+{
+  "icon": {
+    "type": "element",
+    "isRootNode": true,
+    "name": "svg",
+    "attributes": {
+      "width": "10",
+      "height": "10",
+      "viewBox": "0 0 10 10",
+      "fill": "none",
+      "xmlns": "http://www.w3.org/2000/svg"
+    },
+    "children": [
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "d": "M2 5C2 3.44487 2.58482 1.98537 3.54004 1.04932C2.17681 1.34034 1 2.90001 1 5C1 7.09996 2.17685 8.65912 3.54004 8.9502C2.58496 8.01413 2 6.55501 2 5ZM3 5C3 7.33338 4.4528 9 6 9C7.5472 9 9 7.33338 9 5C9 2.66664 7.5472 1 6 1C4.4528 1 3 2.66664 3 5ZM10 5C10 7.63722 8.3188 10 6 10H4C1.6812 10 0 7.63722 0 5C0 2.3628 1.6812 0 4 0H6C8.3188 0 10 2.3628 10 5Z",
+          "fill": "currentColor"
+        },
+        "children": []
+      },
+      {
+        "type": "element",
+        "name": "path",
+        "attributes": {
+          "d": "M6.71519 4.09259L6.45385 3.18667C6.42141 3.07421 6.34037 3 6.25 3C6.15963 3 6.07859 3.07421 6.04615 3.18667L5.78481 4.09259C5.74675 4.22464 5.66849 4.32899 5.56945 4.37978L4.88999 4.7282C4.80565 4.77146 4.75 4.87951 4.75 5C4.75 5.12049 4.80565 5.22854 4.88999 5.2718L5.56945 5.62022C5.66849 5.67101 5.74675 5.77536 5.78481 5.90741L6.04615 6.81333C6.07859 6.92579 6.15963 7 6.25 7C6.34037 7 6.42141 6.92579 6.45385 6.81333L6.71519 5.90741C6.75325 5.77536 6.83151 5.67101 6.93055 5.62022L7.61001 5.2718C7.69435 5.22854 7.75 5.12049 7.75 5C7.75 4.87951 7.69435 4.77146 7.61001 4.7282L6.93055 4.37978C6.83151 4.32899 6.75325 4.22464 6.71519 4.09259Z",
+          "fill": "currentColor"
+        },
+        "children": []
+      }
+    ]
+  },
+  "name": "CreditsCoin"
+}

web/app/components/base/icons/src/vender/line/financeAndECommerce/CreditsCoin.tsx

@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import type { IconData } from '@/app/components/base/icons/IconBase'
+import * as React from 'react'
+import IconBase from '@/app/components/base/icons/IconBase'
+import data from './CreditsCoin.json'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'CreditsCoin'
+
+export default Icon

web/app/components/base/icons/src/vender/line/financeAndECommerce/index.ts

@@ -1,5 +1,6 @@
 export { default as Balance } from './Balance'
 export { default as CoinsStacked01 } from './CoinsStacked01'
+export { default as CreditsCoin } from './CreditsCoin'
 export { default as GoldCoin } from './GoldCoin'
 export { default as ReceiptList } from './ReceiptList'
 export { default as Tag01 } from './Tag01'

web/app/components/base/prompt-editor/plugins/hitl-input-block/__tests__/variable-block.spec.tsx

@@ -53,7 +53,7 @@ const createSelectorWithTransientPrefix = (prefix: string, suffix: string): stri
 }
 
 const hasErrorIcon = (container: HTMLElement) => {
-  return container.querySelector('svg.text-text-destructive') !== null
+  return container.querySelector('svg.text-text-warning') !== null
 }
 
 const renderVariableBlock = (props: {

web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx

@@ -14,7 +14,7 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useReactFlow, useStoreApi } from 'reactflow'
-import Tooltip from '@/app/components/base/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { isConversationVar, isENV, isGlobalVar, isRagVariableVar, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import VarFullPathPanel from '@/app/components/workflow/nodes/_base/components/variable/var-full-path-panel'
 import {
@@ -28,6 +28,7 @@ import {
   UPDATE_WORKFLOW_NODES_MAP,
 } from './index'
 import { WorkflowVariableBlockNode } from './node'
+import { useLlmModelPluginInstalled } from './use-llm-model-plugin-installed'
 
 type WorkflowVariableBlockComponentProps = {
   nodeKey: string
@@ -68,6 +69,8 @@ const WorkflowVariableBlockComponent = ({
   const node = localWorkflowNodesMap![variables[isRagVar ? 1 : 0]]
 
   const isException = isExceptionVariable(varName, node?.type)
+  const sourceNodeId = variables[isRagVar ? 1 : 0]
+  const isLlmModelInstalled = useLlmModelPluginInstalled(sourceNodeId, localWorkflowNodesMap)
   const variableValid = useMemo(() => {
     let variableValid = true
     const isEnv = isENV(variables)
@@ -144,7 +147,13 @@ const WorkflowVariableBlockComponent = ({
         handleVariableJump()
       }}
       isExceptionVariable={isException}
-      errorMsg={!variableValid ? t('errorMsg.invalidVariable', { ns: 'workflow' }) : undefined}
+      errorMsg={
+        !variableValid
+          ? t('errorMsg.invalidVariable', { ns: 'workflow' })
+          : !isLlmModelInstalled
+              ? t('errorMsg.modelPluginNotInstalled', { ns: 'workflow' })
+              : undefined
+      }
       isSelected={isSelected}
       ref={ref}
       notShowFullPath={isShowAPart}
@@ -155,9 +164,9 @@ const WorkflowVariableBlockComponent = ({
     return Item
 
   return (
-    <Tooltip
-      noDecoration
-      popupContent={(
+    <Tooltip>
+      <TooltipTrigger disabled={!isShowAPart} render={<div>{Item}</div>} />
+      <TooltipContent variant="plain">
         <VarFullPathPanel
           nodeName={node.title}
           path={variables.slice(1)}
@@ -169,10 +178,7 @@ const WorkflowVariableBlockComponent = ({
             : Type.string}
           nodeType={node?.type}
         />
-      )}
-      disabled={!isShowAPart}
-    >
-      <div>{Item}</div>
+      </TooltipContent>
     </Tooltip>
   )
 }

web/app/components/base/prompt-editor/plugins/workflow-variable-block/use-llm-model-plugin-installed.ts

@@ -0,0 +1,23 @@
+import type { WorkflowNodesMap } from '@/app/components/base/prompt-editor/types'
+import { BlockEnum } from '@/app/components/workflow/types'
+import { extractPluginId } from '@/app/components/workflow/utils/plugin'
+import { useProviderContextSelector } from '@/context/provider-context'
+
+export function useLlmModelPluginInstalled(
+  nodeId: string,
+  workflowNodesMap: WorkflowNodesMap | undefined,
+): boolean {
+  const node = workflowNodesMap?.[nodeId]
+  const modelProvider = node?.type === BlockEnum.LLM
+    ? node.modelProvider
+    : undefined
+  const modelPluginId = modelProvider ? extractPluginId(modelProvider) : undefined
+
+  return useProviderContextSelector((state) => {
+    if (!modelPluginId)
+      return true
+    return state.modelProviders.some(p =>
+      extractPluginId(p.provider) === modelPluginId,
+    )
+  })
+}

web/app/components/base/prompt-editor/types.ts

@@ -73,7 +73,7 @@ export type GetVarType = (payload: {
 export type WorkflowVariableBlockType = {
   show?: boolean
   variables?: NodeOutPutVar[]
-  workflowNodesMap?: Record<string, Pick<Node['data'], 'title' | 'type' | 'height' | 'width' | 'position'>>
+  workflowNodesMap?: WorkflowNodesMap
   onInsert?: () => void
   onDelete?: () => void
   getVarType?: GetVarType
@@ -81,12 +81,14 @@ export type WorkflowVariableBlockType = {
   onManageInputField?: () => void
 }
 
+export type WorkflowNodesMap = Record<string, Pick<Node['data'], 'title' | 'type' | 'height' | 'width' | 'position'> & { modelProvider?: string }>
+
 export type HITLInputBlockType = {
   show?: boolean
   nodeId: string
   formInputs?: FormInputItem[]
   variables?: NodeOutPutVar[]
-  workflowNodesMap?: Record<string, Pick<Node['data'], 'title' | 'type' | 'height' | 'width' | 'position'>>
+  workflowNodesMap?: WorkflowNodesMap
   getVarType?: GetVarType
   onFormInputsChange?: (inputs: FormInputItem[]) => void
   onFormInputItemRemove: (varName: string) => void

web/app/components/base/segmented-control/index.tsx

@@ -4,6 +4,7 @@ import { cva } from 'class-variance-authority'
 import * as React from 'react'
 import { cn } from '@/utils/classnames'
 import Divider from '../divider'
+import './index.css'
 
 type SegmentedControlOption<T> = {
   value: T
@@ -130,7 +131,7 @@ export const SegmentedControl = <T extends string | number | symbol>({
               <div className={cn('inline-flex items-center gap-x-1', ItemTextWrapperVariants({ size }))}>
                 <span>{text}</span>
                 {!!(count && size === 'large') && (
-                  <div className="inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] text-text-tertiary system-2xs-medium-uppercase">
+                  <div className="system-2xs-medium-uppercase inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] text-text-tertiary">
                     {count}
                   </div>
                 )}

web/app/components/base/tag-input/index.tsx

@@ -1,10 +1,14 @@
 import type { ChangeEvent, FC, KeyboardEvent } from 'react'
 import { useCallback, useState } from 'react'
-import AutosizeInput from 'react-18-input-autosize'
+import _AutosizeInput from 'react-18-input-autosize'
 import { useTranslation } from 'react-i18next'
 import { useToastContext } from '@/app/components/base/toast/context'
 import { cn } from '@/utils/classnames'
 
+// CJS/ESM interop: Turbopack may resolve the module namespace object instead of the default export
+// eslint-disable-next-line ts/no-explicit-any
+const AutosizeInput = ('default' in (_AutosizeInput as any) ? (_AutosizeInput as any).default : _AutosizeInput) as typeof _AutosizeInput
+
 type TagInputProps = {
   items: string[]
   onChange: (items: string[]) => void

web/app/components/base/ui/dialog/index.tsx

@@ -46,20 +46,24 @@ type DialogContentProps = {
   children: React.ReactNode
   className?: string
   overlayClassName?: string
+  backdropProps?: React.ComponentPropsWithoutRef<typeof BaseDialog.Backdrop>
 }
 
 export function DialogContent({
   children,
   className,
   overlayClassName,
+  backdropProps,
 }: DialogContentProps) {
   return (
     <DialogPortal>
       <BaseDialog.Backdrop
+        {...backdropProps}
         className={cn(
           'fixed inset-0 z-[1002] bg-background-overlay',
           'transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 motion-reduce:transition-none',
           overlayClassName,
+          backdropProps?.className,
         )}
       />
       <BaseDialog.Popup

web/app/components/billing/pricing/__tests__/footer.spec.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { CategoryEnum } from '..'
 import Footer from '../footer'
+import { CategoryEnum } from '../types'
 
 vi.mock('next/link', () => ({
   default: ({ children, href, className, target }: { children: React.ReactNode, href: string, className?: string, target?: string }) => (

web/app/components/billing/pricing/__tests__/header.spec.tsx

@@ -1,7 +1,16 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
+import { Dialog } from '@/app/components/base/ui/dialog'
 import Header from '../header'
 
+function renderHeader(onClose: () => void) {
+  return render(
+    <Dialog open>
+      <Header onClose={onClose} />
+    </Dialog>,
+  )
+}
+
 describe('Header', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -11,7 +20,7 @@ describe('Header', () => {
     it('should render title and description translations', () => {
       const handleClose = vi.fn()
 
-      render(<Header onClose={handleClose} />)
+      renderHeader(handleClose)
 
       expect(screen.getByText('billing.plansCommon.title.plans')).toBeInTheDocument()
       expect(screen.getByText('billing.plansCommon.title.description')).toBeInTheDocument()
@@ -22,7 +31,7 @@ describe('Header', () => {
   describe('Props', () => {
     it('should invoke onClose when close button is clicked', () => {
       const handleClose = vi.fn()
-      render(<Header onClose={handleClose} />)
+      renderHeader(handleClose)
 
       fireEvent.click(screen.getByRole('button'))
 
@@ -32,7 +41,7 @@ describe('Header', () => {
 
   describe('Edge Cases', () => {
     it('should render structural elements with translation keys', () => {
-      const { container } = render(<Header onClose={vi.fn()} />)
+      const { container } = renderHeader(vi.fn())
 
       expect(container.querySelector('span')).toBeInTheDocument()
       expect(container.querySelector('p')).toBeInTheDocument()

web/app/components/billing/pricing/__tests__/index.spec.tsx

@@ -74,15 +74,11 @@ describe('Pricing', () => {
   })
 
   describe('Props', () => {
-    it('should allow switching categories and handle esc key', () => {
-      const handleCancel = vi.fn()
-      render(<Pricing onCancel={handleCancel} />)
+    it('should allow switching categories', () => {
+      render(<Pricing onCancel={vi.fn()} />)
 
       fireEvent.click(screen.getByText('billing.plansCommon.self'))
       expect(screen.queryByRole('switch')).not.toBeInTheDocument()
-
-      fireEvent.keyDown(window, { key: 'Escape', keyCode: 27 })
-      expect(handleCancel).toHaveBeenCalled()
     })
   })
 

web/app/components/billing/pricing/footer.tsx

@@ -1,10 +1,9 @@
-import type { Category } from '.'
-import { RiArrowRightUpLine } from '@remixicon/react'
+import type { Category } from './types'
 import Link from 'next/link'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/utils/classnames'
-import { CategoryEnum } from '.'
+import { CategoryEnum } from './types'
 
 type FooterProps = {
   pricingPageURL: string
@@ -34,7 +33,7 @@ const Footer = ({
           >
             {t('plansCommon.comparePlanAndFeatures', { ns: 'billing' })}
           </Link>
-          <RiArrowRightUpLine className="size-4" />
+          <span aria-hidden="true" className="i-ri-arrow-right-up-line size-4" />
         </span>
       </div>
     </div>

web/app/components/billing/pricing/header.tsx

@@ -1,6 +1,6 @@
-import { RiCloseLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
+import { DialogDescription, DialogTitle } from '@/app/components/base/ui/dialog'
 import Button from '../../base/button'
 import DifyLogo from '../../base/logo/dify-logo'
 
@@ -20,19 +20,19 @@ const Header = ({
           <div className="py-[5px]">
             <DifyLogo className="h-[27px] w-[60px]" />
           </div>
-          <span className="bg-billing-plan-title-bg bg-clip-text px-1.5 font-instrument text-[37px] italic leading-[1.2] text-transparent">
+          <DialogTitle className="m-0 bg-billing-plan-title-bg bg-clip-text px-1.5 font-instrument text-[37px] italic leading-[1.2] text-transparent">
             {t('plansCommon.title.plans', { ns: 'billing' })}
-          </span>
+          </DialogTitle>
         </div>
-        <p className="system-sm-regular text-text-tertiary">
+        <DialogDescription className="m-0 text-text-tertiary system-sm-regular">
           {t('plansCommon.title.description', { ns: 'billing' })}
-        </p>
+        </DialogDescription>
         <Button
           variant="secondary"
           className="absolute bottom-[40.5px] right-[-18px] z-10 size-9 rounded-full p-2"
           onClick={onClose}
         >
-          <RiCloseLine className="size-5" />
+          <span aria-hidden="true" className="i-ri-close-line size-5" />
         </Button>
       </div>
     </div>

web/app/components/billing/pricing/index.tsx

@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
-import { useKeyPress } from 'ahooks'
+import type { Category } from './types'
 import * as React from 'react'
 import { useState } from 'react'
-import { createPortal } from 'react-dom'
+import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 import { useAppContext } from '@/context/app-context'
 import { useGetPricingPageLanguage } from '@/context/i18n'
 import { useProviderContext } from '@/context/provider-context'
@@ -13,13 +13,7 @@ import Header from './header'
 import PlanSwitcher from './plan-switcher'
 import { PlanRange } from './plan-switcher/plan-range-switcher'
 import Plans from './plans'
-
-export enum CategoryEnum {
-  CLOUD = 'cloud',
-  SELF = 'self',
-}
-
-export type Category = CategoryEnum.CLOUD | CategoryEnum.SELF
+import { CategoryEnum } from './types'
 
 type PricingProps = {
   onCancel: () => void
@@ -33,42 +27,47 @@ const Pricing: FC<PricingProps> = ({
   const [planRange, setPlanRange] = React.useState<PlanRange>(PlanRange.monthly)
   const [currentCategory, setCurrentCategory] = useState<Category>(CategoryEnum.CLOUD)
   const canPay = isCurrentWorkspaceManager
-  useKeyPress(['esc'], onCancel)
 
   const pricingPageLanguage = useGetPricingPageLanguage()
   const pricingPageURL = pricingPageLanguage
     ? `https://dify.ai/${pricingPageLanguage}/pricing#plans-and-features`
     : 'https://dify.ai/pricing#plans-and-features'
 
-  return createPortal(
-    <div
-      className="fixed inset-0 bottom-0 left-0 right-0 top-0 z-[1000] overflow-auto bg-saas-background"
-      onClick={e => e.stopPropagation()}
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
     >
-      <div className="relative grid min-h-full min-w-[1200px] grid-rows-[1fr_auto_auto_1fr] overflow-hidden">
-        <div className="absolute -top-12 left-0 right-0 -z-10">
-          <NoiseTop />
+      <DialogContent
+        className="inset-0 h-full max-h-none w-full max-w-none translate-x-0 translate-y-0 overflow-auto rounded-none border-none bg-saas-background p-0 shadow-none"
+      >
+        <div className="relative grid min-h-full min-w-[1200px] grid-rows-[1fr_auto_auto_1fr] overflow-hidden">
+          <div className="absolute -top-12 left-0 right-0 -z-10">
+            <NoiseTop />
+          </div>
+          <Header onClose={onCancel} />
+          <PlanSwitcher
+            currentCategory={currentCategory}
+            onChangeCategory={setCurrentCategory}
+            currentPlanRange={planRange}
+            onChangePlanRange={setPlanRange}
+          />
+          <Plans
+            plan={plan}
+            currentPlan={currentCategory}
+            planRange={planRange}
+            canPay={canPay}
+          />
+          <Footer pricingPageURL={pricingPageURL} currentCategory={currentCategory} />
+          <div className="absolute -bottom-12 left-0 right-0 -z-10">
+            <NoiseBottom />
+          </div>
         </div>
-        <Header onClose={onCancel} />
-        <PlanSwitcher
-          currentCategory={currentCategory}
-          onChangeCategory={setCurrentCategory}
-          currentPlanRange={planRange}
-          onChangePlanRange={setPlanRange}
-        />
-        <Plans
-          plan={plan}
-          currentPlan={currentCategory}
-          planRange={planRange}
-          canPay={canPay}
-        />
-        <Footer pricingPageURL={pricingPageURL} currentCategory={currentCategory} />
-        <div className="absolute -bottom-12 left-0 right-0 -z-10">
-          <NoiseBottom />
-        </div>
-      </div>
-    </div>,
-    document.body,
+      </DialogContent>
+    </Dialog>
   )
 }
 export default React.memo(Pricing)

web/app/components/billing/pricing/plan-switcher/__tests__/index.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import * as React from 'react'
-import { CategoryEnum } from '../../index'
+import { CategoryEnum } from '../../types'
 import PlanSwitcher from '../index'
 import { PlanRange } from '../plan-range-switcher'
 

web/app/components/billing/pricing/plan-switcher/index.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import type { Category } from '../index'
+import type { Category } from '../types'
 import type { PlanRange } from './plan-range-switcher'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'

web/app/components/billing/pricing/types.ts

@@ -0,0 +1,6 @@
+export enum CategoryEnum {
+  CLOUD = 'cloud',
+  SELF = 'self',
+}
+
+export type Category = CategoryEnum.CLOUD | CategoryEnum.SELF

web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx

@@ -204,7 +204,7 @@ const CSVUploader: FC<Props> = ({
       />
       <div ref={dropRef}>
         {!file && (
-          <div className={cn('flex h-20 items-center rounded-xl border border-dashed border-components-panel-border bg-components-panel-bg-blur text-sm font-normal', dragging && 'border border-divider-subtle  bg-components-panel-on-panel-item-bg-hover')}>
+          <div className={cn('flex h-20 items-center rounded-xl border border-dashed border-components-panel-border bg-components-panel-bg-blur text-sm font-normal', dragging && 'border border-divider-subtle bg-components-panel-on-panel-item-bg-hover')}>
             <div className="flex w-full items-center justify-center space-x-2">
               <CSVIcon className="shrink-0" />
               <div className="text-text-secondary">

web/app/components/datasets/documents/detail/completed/new-child-segment.tsx

@@ -58,7 +58,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
       <Divider type="vertical" className="mx-1 h-3 bg-divider-regular" />
       <button
         type="button"
-        className="system-xs-semibold text-text-accent"
+        className="text-text-accent system-xs-semibold"
         onClick={() => {
           clearTimeout(refreshTimer.current)
           viewNewlyAddedChildChunk?.()
@@ -120,11 +120,11 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
     <div className="flex h-full flex-col">
       <div className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
         <div className="flex flex-col">
-          <div className="system-xl-semibold text-text-primary">{t('segment.addChildChunk', { ns: 'datasetDocuments' })}</div>
+          <div className="text-text-primary system-xl-semibold">{t('segment.addChildChunk', { ns: 'datasetDocuments' })}</div>
           <div className="flex items-center gap-x-2">
             <SegmentIndexTag label={t('segment.newChildChunk', { ns: 'datasetDocuments' }) as string} />
             <Dot />
-            <span className="system-xs-medium text-text-tertiary">{wordCountText}</span>
+            <span className="text-text-tertiary system-xs-medium">{wordCountText}</span>
           </div>
         </div>
         <div className="flex items-center">

web/app/components/datasets/documents/detail/new-segment.tsx

@@ -61,7 +61,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
       <Divider type="vertical" className="mx-1 h-3 bg-divider-regular" />
       <button
         type="button"
-        className="system-xs-semibold text-text-accent"
+        className="text-text-accent system-xs-semibold"
         onClick={() => {
           clearTimeout(refreshTimer.current)
           viewNewlyAddedChunk()
@@ -158,13 +158,13 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
         className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}
       >
         <div className="flex flex-col">
-          <div className="system-xl-semibold text-text-primary">
+          <div className="text-text-primary system-xl-semibold">
             {t('segment.addChunk', { ns: 'datasetDocuments' })}
           </div>
           <div className="flex items-center gap-x-2">
             <SegmentIndexTag label={t('segment.newChunk', { ns: 'datasetDocuments' })!} />
             <Dot />
-            <span className="system-xs-medium text-text-tertiary">{wordCountText}</span>
+            <span className="text-text-tertiary system-xs-medium">{wordCountText}</span>
           </div>
         </div>
         <div className="flex items-center">

web/app/components/datasets/documents/detail/settings/__tests__/document-settings.spec.tsx

@@ -100,10 +100,10 @@ vi.mock('@/app/components/datasets/create/step-two', () => ({
 }))
 
 vi.mock('@/app/components/header/account-setting', () => ({
-  default: ({ activeTab, onCancel }: { activeTab?: string, onCancel?: () => void }) => (
+  default: ({ activeTab, onCancelAction }: { activeTab?: string, onCancelAction?: () => void }) => (
     <div data-testid="account-setting">
       <span data-testid="active-tab">{activeTab}</span>
-      <button onClick={onCancel} data-testid="close-setting">Close</button>
+      <button onClick={onCancelAction} data-testid="close-setting">Close</button>
     </div>
   ),
 }))

web/app/components/datasets/documents/detail/settings/document-settings.tsx

@@ -1,3 +1,4 @@
+import type { AccountSettingTab } from '@/app/components/header/account-setting/constants'
 import type { DataSourceProvider, NotionPage } from '@/models/common'
 import type {
   CrawlOptions,
@@ -19,6 +20,7 @@ import AppUnavailable from '@/app/components/base/app-unavailable'
 import Loading from '@/app/components/base/loading'
 import StepTwo from '@/app/components/datasets/create/step-two'
 import AccountSetting from '@/app/components/header/account-setting'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import DatasetDetailContext from '@/context/dataset-detail'
@@ -33,8 +35,13 @@ const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
   const { t } = useTranslation()
   const router = useRouter()
   const [isShowSetAPIKey, { setTrue: showSetAPIKey, setFalse: hideSetAPIkey }] = useBoolean()
+  const [accountSettingTab, setAccountSettingTab] = React.useState<AccountSettingTab>(ACCOUNT_SETTING_TAB.PROVIDER)
   const { indexingTechnique, dataset } = useContext(DatasetDetailContext)
   const { data: embeddingsDefaultModel } = useDefaultModel(ModelTypeEnum.textEmbedding)
+  const handleOpenAccountSetting = React.useCallback(() => {
+    setAccountSettingTab(ACCOUNT_SETTING_TAB.PROVIDER)
+    showSetAPIKey()
+  }, [showSetAPIKey])
 
   const invalidDocumentList = useInvalidDocumentList(datasetId)
   const invalidDocumentDetail = useInvalidDocumentDetail()
@@ -135,7 +142,7 @@ const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
         {dataset && documentDetail && (
           <StepTwo
             isAPIKeySet={!!embeddingsDefaultModel}
-            onSetting={showSetAPIKey}
+            onSetting={handleOpenAccountSetting}
             datasetId={datasetId}
             dataSourceType={documentDetail.data_source_type as DataSourceType}
             notionPages={currentPage ? [currentPage as unknown as NotionPage] : []}
@@ -155,8 +162,9 @@ const DocumentSettings = ({ datasetId, documentId }: DocumentSettingsProps) => {
       </div>
       {isShowSetAPIKey && (
         <AccountSetting
-          activeTab="provider"
-          onCancel={async () => {
+          activeTab={accountSettingTab}
+          onTabChangeAction={setAccountSettingTab}
+          onCancelAction={async () => {
             hideSetAPIkey()
           }}
         />

web/app/components/datasets/external-api/external-api-modal/index.tsx

@@ -125,13 +125,13 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
         <div className="fixed inset-0 flex items-center justify-center bg-black/[.25]">
           <div className="shadows-shadow-xl relative flex w-[480px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg">
             <div className="flex flex-col items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6">
-              <div className="title-2xl-semi-bold grow self-stretch text-text-primary">
+              <div className="grow self-stretch text-text-primary title-2xl-semi-bold">
                 {
                   isEditMode ? t('editExternalAPIFormTitle', { ns: 'dataset' }) : t('createExternalAPI', { ns: 'dataset' })
                 }
               </div>
               {isEditMode && (datasetBindings?.length ?? 0) > 0 && (
-                <div className="system-xs-regular flex items-center text-text-tertiary">
+                <div className="flex items-center text-text-tertiary system-xs-regular">
                   {t('editExternalAPIFormWarning.front', { ns: 'dataset' })}
                   <span className="flex cursor-pointer items-center text-text-accent">
                     &nbsp;
@@ -144,12 +144,12 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
                       popupContent={(
                         <div className="p-1">
                           <div className="flex items-start self-stretch pb-0.5 pl-2 pr-3 pt-1">
-                            <div className="system-xs-medium-uppercase text-text-tertiary">{`${datasetBindings?.length} ${t('editExternalAPITooltipTitle', { ns: 'dataset' })}`}</div>
+                            <div className="text-text-tertiary system-xs-medium-uppercase">{`${datasetBindings?.length} ${t('editExternalAPITooltipTitle', { ns: 'dataset' })}`}</div>
                           </div>
                           {datasetBindings?.map(binding => (
                             <div key={binding.id} className="flex items-center gap-1 self-stretch px-2 py-1">
                               <RiBook2Line className="h-4 w-4 text-text-secondary" />
-                              <div className="system-sm-medium text-text-secondary">{binding.name}</div>
+                              <div className="text-text-secondary system-sm-medium">{binding.name}</div>
                             </div>
                           ))}
                         </div>
@@ -193,8 +193,8 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
                 {t('externalAPIForm.save', { ns: 'dataset' })}
               </Button>
             </div>
-            <div className="system-xs-regular flex items-center justify-center gap-1 self-stretch rounded-b-2xl border-t-[0.5px]
-              border-divider-subtle bg-background-soft px-2 py-3 text-text-tertiary"
+            <div className="flex items-center justify-center gap-1 self-stretch rounded-b-2xl border-t-[0.5px] border-divider-subtle
+              bg-background-soft px-2 py-3 text-text-tertiary system-xs-regular"
             >
               <RiLock2Fill className="h-3 w-3 text-text-quaternary" />
               {t('externalAPIForm.encrypted.front', { ns: 'dataset' })}

web/app/components/datasets/settings/form/__tests__/index.spec.tsx

@@ -127,6 +127,14 @@ vi.mock('@/service/use-common', () => ({
       ],
     },
   }),
+  useCurrentWorkspace: () => ({
+    data: {
+      trial_credits: 1000,
+      trial_credits_used: 100,
+      next_credit_reset_date: undefined,
+    },
+    isPending: false,
+  }),
 }))
 
 vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
@@ -191,6 +199,42 @@ vi.mock('@/context/i18n', () => ({
   useDocLink: () => (path: string) => `https://docs.dify.ai${path}`,
 }))
 
+vi.mock('../components/indexing-section', () => ({
+  default: ({
+    currentDataset,
+    indexMethod,
+  }: {
+    currentDataset?: DataSet
+    indexMethod?: IndexingType
+  }) => (
+    <div data-testid="indexing-section">
+      {!!currentDataset?.doc_form && (
+        <>
+          <div>form.chunkStructure.title</div>
+          <a href="https://docs.dify.ai/use-dify/knowledge/create-knowledge/chunking-and-cleaning-text">
+            form.chunkStructure.learnMore
+          </a>
+        </>
+      )}
+      {!!(currentDataset
+        && currentDataset.doc_form !== ChunkingMode.parentChild
+        && currentDataset.indexing_technique
+        && indexMethod) && (
+        <div>form.indexMethod</div>
+      )}
+      {indexMethod === IndexingType.QUALIFIED && <div>form.embeddingModel</div>}
+      {currentDataset?.provider !== 'external' && indexMethod && (
+        <>
+          <div>form.retrievalSetting.title</div>
+          <a href="https://docs.dify.ai/use-dify/knowledge/create-knowledge/setting-indexing-methods">
+            form.retrievalSetting.learnMore
+          </a>
+        </>
+      )}
+    </div>
+  ),
+}))
+
 describe('Form', () => {
   beforeEach(() => {
     vi.clearAllMocks()

web/app/components/datasets/settings/form/components/__tests__/indexing-section.spec.tsx

@@ -8,75 +8,149 @@ import { RETRIEVE_METHOD } from '@/types/app'
 import { IndexingType } from '../../../../create/step-two'
 import IndexingSection from '../indexing-section'
 
-// Mock i18n doc link
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
 vi.mock('@/context/i18n', () => ({
   useDocLink: () => (path: string) => `https://docs.dify.ai${path}`,
 }))
 
-// Mock app-context for child components
-vi.mock('@/context/app-context', () => ({
-  useSelector: (selector: (state: unknown) => unknown) => {
-    const state = {
-      isCurrentWorkspaceDatasetOperator: false,
-      userProfile: {
-        id: 'user-1',
-        name: 'Current User',
-        email: 'current@example.com',
-        avatar_url: '',
-        role: 'owner',
-      },
-    }
-    return selector(state)
-  },
+vi.mock('@/app/components/base/divider', () => ({
+  default: ({ className }: { className?: string }) => (
+    <div data-testid="divider" className={className} />
+  ),
 }))
 
-// Mock model-provider-page hooks
-vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', () => ({
-  useModelList: () => ({ data: [], mutate: vi.fn(), isLoading: false }),
-  useCurrentProviderAndModel: () => ({ currentProvider: undefined, currentModel: undefined }),
-  useDefaultModel: () => ({ data: undefined, mutate: vi.fn(), isLoading: false }),
-  useModelListAndDefaultModel: () => ({ modelList: [], defaultModel: undefined }),
-  useModelListAndDefaultModelAndCurrentProviderAndModel: () => ({
-    modelList: [],
-    defaultModel: undefined,
-    currentProvider: undefined,
-    currentModel: undefined,
-  }),
-  useUpdateModelList: () => vi.fn(),
-  useUpdateModelProviders: () => vi.fn(),
-  useLanguage: () => 'en_US',
-  useSystemDefaultModelAndModelList: () => [undefined, vi.fn()],
-  useProviderCredentialsAndLoadBalancing: () => ({
-    credentials: undefined,
-    loadBalancing: undefined,
-    mutate: vi.fn(),
-    isLoading: false,
-  }),
-  useAnthropicBuyQuota: () => vi.fn(),
-  useMarketplaceAllPlugins: () => ({ plugins: [], isLoading: false }),
-  useRefreshModel: () => ({ handleRefreshModel: vi.fn() }),
-  useModelModalHandler: () => vi.fn(),
+vi.mock('@/app/components/datasets/settings/chunk-structure', () => ({
+  default: ({ chunkStructure }: { chunkStructure: string }) => (
+    <div data-testid="chunk-structure" data-mode={chunkStructure}>
+      {chunkStructure}
+    </div>
+  ),
 }))
 
-// Mock provider-context
-vi.mock('@/context/provider-context', () => ({
-  useProviderContext: () => ({
-    textGenerationModelList: [],
-    embeddingsModelList: [],
-    rerankModelList: [],
-    agentThoughtModelList: [],
-    modelProviders: [],
-    textEmbeddingModelList: [],
-    speech2textModelList: [],
-    ttsModelList: [],
-    moderationModelList: [],
-    hasSettedApiKey: true,
-    plan: { type: 'free' },
-    enableBilling: false,
-    onPlanInfoChanged: vi.fn(),
-    isCurrentWorkspaceDatasetOperator: false,
-    supportRetrievalMethods: ['semantic_search', 'full_text_search', 'hybrid_search'],
-  }),
+vi.mock('@/app/components/datasets/settings/index-method', () => ({
+  default: ({
+    value,
+    disabled,
+    keywordNumber,
+    onChange,
+    onKeywordNumberChange,
+  }: {
+    value: string
+    disabled?: boolean
+    keywordNumber: number
+    onChange: (value: IndexingType) => void
+    onKeywordNumberChange: (value: number) => void
+  }) => (
+    <div
+      data-testid="index-method"
+      data-disabled={disabled ? 'true' : 'false'}
+      data-keyword-number={String(keywordNumber)}
+      data-value={value}
+    >
+      <button type="button" onClick={() => onChange(IndexingType.QUALIFIED)}>
+        stepTwo.qualified
+      </button>
+      <button type="button" onClick={() => onChange(IndexingType.ECONOMICAL)}>
+        form.indexMethodEconomy
+      </button>
+      <button type="button" onClick={() => onKeywordNumberChange(keywordNumber + 1)}>
+        keyword-number-increment
+      </button>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/header/account-setting/model-provider-page/model-selector', () => ({
+  default: ({
+    defaultModel,
+    onSelect,
+  }: {
+    defaultModel?: DefaultModel
+    onSelect?: (value: DefaultModel) => void
+  }) => (
+    <div
+      data-testid="model-selector"
+      data-model={defaultModel?.model ?? ''}
+      data-provider={defaultModel?.provider ?? ''}
+    >
+      <button
+        type="button"
+        onClick={() => onSelect?.({ provider: 'cohere', model: 'embed-english-v3.0' })}
+      >
+        select-model
+      </button>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/datasets/settings/summary-index-setting', () => ({
+  default: ({
+    summaryIndexSetting,
+    onSummaryIndexSettingChange,
+  }: {
+    summaryIndexSetting?: SummaryIndexSetting
+    onSummaryIndexSettingChange?: (payload: SummaryIndexSetting) => void
+  }) => (
+    <div data-testid="summary-index-setting" data-enabled={summaryIndexSetting?.enable ? 'true' : 'false'}>
+      <button type="button" onClick={() => onSummaryIndexSettingChange?.({ enable: true })}>
+        summary-enable
+      </button>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/datasets/common/retrieval-method-config', () => ({
+  default: ({
+    showMultiModalTip,
+    onChange,
+    value,
+  }: {
+    showMultiModalTip?: boolean
+    onChange: (value: RetrievalConfig) => void
+    value: RetrievalConfig
+  }) => (
+    <div data-testid="retrieval-method-config">
+      {showMultiModalTip && <span>show-multimodal-tip</span>}
+      <button
+        type="button"
+        onClick={() =>
+          onChange({
+            ...value,
+            top_k: 6,
+          })}
+      >
+        update-retrieval
+      </button>
+    </div>
+  ),
+}))
+
+vi.mock('@/app/components/datasets/common/economical-retrieval-method-config', () => ({
+  default: ({
+    onChange,
+    value,
+  }: {
+    onChange: (value: RetrievalConfig) => void
+    value: RetrievalConfig
+  }) => (
+    <div data-testid="economical-retrieval-method-config">
+      <button
+        type="button"
+        onClick={() =>
+          onChange({
+            ...value,
+            search_method: RETRIEVE_METHOD.keywordSearch,
+          })}
+      >
+        update-economy-retrieval
+      </button>
+    </div>
+  ),
 }))
 
 describe('IndexingSection', () => {
@@ -187,315 +261,281 @@ describe('IndexingSection', () => {
     showMultiModalTip: false,
   }
 
+  const renderComponent = (props: Partial<typeof defaultProps> = {}) => {
+    return render(<IndexingSection {...defaultProps} {...props} />)
+  }
+
   beforeEach(() => {
     vi.clearAllMocks()
   })
 
   describe('Rendering', () => {
-    it('should render without crashing', () => {
-      render(<IndexingSection {...defaultProps} />)
-      expect(screen.getByText(/form\.chunkStructure\.title/i)).toBeInTheDocument()
+    it('should render the chunk structure, index method, and retrieval sections for a standard dataset', () => {
+      renderComponent()
+
+      expect(screen.getByText('form.chunkStructure.title')).toBeInTheDocument()
+      expect(screen.getByTestId('chunk-structure')).toHaveAttribute('data-mode', ChunkingMode.text)
+      expect(screen.getByText('form.indexMethod')).toBeInTheDocument()
+      expect(screen.getByTestId('index-method')).toBeInTheDocument()
+      expect(screen.getByText('form.retrievalSetting.title')).toBeInTheDocument()
     })
 
-    it('should render chunk structure section when doc_form is set', () => {
-      render(<IndexingSection {...defaultProps} />)
-      expect(screen.getByText(/form\.chunkStructure\.title/i)).toBeInTheDocument()
-    })
+    it('should render the embedding model selector when the index method is high quality', () => {
+      renderComponent()
 
-    it('should render index method section when conditions are met', () => {
-      render(<IndexingSection {...defaultProps} />)
-      // May match multiple elements (label and descriptions)
-      expect(screen.getAllByText(/form\.indexMethod/i).length).toBeGreaterThan(0)
-    })
-
-    it('should render embedding model section when indexMethod is high_quality', () => {
-      render(<IndexingSection {...defaultProps} indexMethod={IndexingType.QUALIFIED} />)
-      expect(screen.getByText(/form\.embeddingModel/i)).toBeInTheDocument()
-    })
-
-    it('should render retrieval settings section', () => {
-      render(<IndexingSection {...defaultProps} />)
-      expect(screen.getByText(/form\.retrievalSetting\.title/i)).toBeInTheDocument()
+      expect(screen.getByText('form.embeddingModel')).toBeInTheDocument()
+      expect(screen.getByTestId('model-selector')).toHaveAttribute('data-model', 'text-embedding-ada-002')
     })
   })
 
   describe('Chunk Structure Section', () => {
-    it('should not render chunk structure when doc_form is not set', () => {
-      const datasetWithoutDocForm = { ...mockDataset, doc_form: undefined as unknown as ChunkingMode }
-      render(<IndexingSection {...defaultProps} currentDataset={datasetWithoutDocForm} />)
+    it('should hide the chunk structure section when the dataset has no doc form', () => {
+      renderComponent({
+        currentDataset: {
+          ...mockDataset,
+          doc_form: undefined as unknown as ChunkingMode,
+        },
+      })
 
-      expect(screen.queryByText(/form\.chunkStructure\.title/i)).not.toBeInTheDocument()
+      expect(screen.queryByText('form.chunkStructure.title')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('chunk-structure')).not.toBeInTheDocument()
     })
 
-    it('should render learn more link for chunk structure', () => {
-      render(<IndexingSection {...defaultProps} />)
+    it('should render the chunk structure learn more link and description', () => {
+      renderComponent()
 
-      const learnMoreLink = screen.getByText(/form\.chunkStructure\.learnMore/i)
-      expect(learnMoreLink).toBeInTheDocument()
+      const learnMoreLink = screen.getByRole('link', { name: 'form.chunkStructure.learnMore' })
       expect(learnMoreLink).toHaveAttribute('href', expect.stringContaining('chunking-and-cleaning-text'))
-    })
-
-    it('should render chunk structure description', () => {
-      render(<IndexingSection {...defaultProps} />)
-
-      expect(screen.getByText(/form\.chunkStructure\.description/i)).toBeInTheDocument()
+      expect(screen.getByText('form.chunkStructure.description')).toBeInTheDocument()
     })
   })
 
   describe('Index Method Section', () => {
-    it('should not render index method for parentChild chunking mode', () => {
-      const parentChildDataset = { ...mockDataset, doc_form: ChunkingMode.parentChild }
-      render(<IndexingSection {...defaultProps} currentDataset={parentChildDataset} />)
+    it('should hide the index method section for parent-child chunking', () => {
+      renderComponent({
+        currentDataset: {
+          ...mockDataset,
+          doc_form: ChunkingMode.parentChild,
+        },
+      })
 
-      expect(screen.queryByText(/form\.indexMethod/i)).not.toBeInTheDocument()
+      expect(screen.queryByText('form.indexMethod')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('index-method')).not.toBeInTheDocument()
     })
 
-    it('should render high quality option', () => {
-      render(<IndexingSection {...defaultProps} />)
+    it('should render both index method options', () => {
+      renderComponent()
 
-      expect(screen.getByText(/stepTwo\.qualified/i)).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'stepTwo.qualified' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'form.indexMethodEconomy' })).toBeInTheDocument()
     })
 
-    it('should render economy option', () => {
-      render(<IndexingSection {...defaultProps} />)
-
-      // May match multiple elements (title and tip)
-      expect(screen.getAllByText(/form\.indexMethodEconomy/i).length).toBeGreaterThan(0)
-    })
-
-    it('should call setIndexMethod when index method changes', () => {
+    it('should call setIndexMethod when the user selects a new index method', () => {
       const setIndexMethod = vi.fn()
-      const { container } = render(<IndexingSection {...defaultProps} setIndexMethod={setIndexMethod} />)
+      renderComponent({ setIndexMethod })
 
-      // Find the economy option card by looking for clickable elements containing the economy text
-      const economyOptions = screen.getAllByText(/form\.indexMethodEconomy/i)
-      if (economyOptions.length > 0) {
-        const economyCard = economyOptions[0].closest('[class*="cursor-pointer"]')
-        if (economyCard) {
-          fireEvent.click(economyCard)
-        }
-      }
+      fireEvent.click(screen.getByRole('button', { name: 'form.indexMethodEconomy' }))
 
-      // The handler should be properly passed - verify component renders without crashing
-      expect(container).toBeInTheDocument()
+      expect(setIndexMethod).toHaveBeenCalledWith(IndexingType.ECONOMICAL)
     })
 
-    it('should show upgrade warning when switching from economy to high quality', () => {
-      const economyDataset = { ...mockDataset, indexing_technique: IndexingType.ECONOMICAL }
-      render(
-        <IndexingSection
-          {...defaultProps}
-          currentDataset={economyDataset}
-          indexMethod={IndexingType.QUALIFIED}
-        />,
-      )
+    it('should show an upgrade warning when moving from economy to high quality', () => {
+      renderComponent({
+        currentDataset: {
+          ...mockDataset,
+          indexing_technique: IndexingType.ECONOMICAL,
+        },
+      })
 
-      expect(screen.getByText(/form\.upgradeHighQualityTip/i)).toBeInTheDocument()
+      expect(screen.getByText('form.upgradeHighQualityTip')).toBeInTheDocument()
     })
 
-    it('should not show upgrade warning when already on high quality', () => {
-      render(
-        <IndexingSection
-          {...defaultProps}
-          indexMethod={IndexingType.QUALIFIED}
-        />,
-      )
+    it('should pass disabled state to the index method when embeddings are unavailable', () => {
+      renderComponent({
+        currentDataset: {
+          ...mockDataset,
+          embedding_available: false,
+        },
+      })
 
-      expect(screen.queryByText(/form\.upgradeHighQualityTip/i)).not.toBeInTheDocument()
+      expect(screen.getByTestId('index-method')).toHaveAttribute('data-disabled', 'true')
     })
 
-    it('should disable index method when embedding is not available', () => {
-      const datasetWithoutEmbedding = { ...mockDataset, embedding_available: false }
-      render(<IndexingSection {...defaultProps} currentDataset={datasetWithoutEmbedding} />)
+    it('should pass the keyword number and update handler through the index method mock', () => {
+      const setKeywordNumber = vi.fn()
+      renderComponent({
+        keywordNumber: 15,
+        setKeywordNumber,
+      })
 
-      // Index method options should be disabled
-      // The exact implementation depends on the IndexMethod component
+      expect(screen.getByTestId('index-method')).toHaveAttribute('data-keyword-number', '15')
+
+      fireEvent.click(screen.getByRole('button', { name: 'keyword-number-increment' }))
+
+      expect(setKeywordNumber).toHaveBeenCalledWith(16)
     })
   })
 
   describe('Embedding Model Section', () => {
-    it('should render embedding model when indexMethod is high_quality', () => {
-      render(<IndexingSection {...defaultProps} indexMethod={IndexingType.QUALIFIED} />)
+    it('should hide the embedding model selector for economy indexing', () => {
+      renderComponent({ indexMethod: IndexingType.ECONOMICAL })
 
-      expect(screen.getByText(/form\.embeddingModel/i)).toBeInTheDocument()
+      expect(screen.queryByText('form.embeddingModel')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('model-selector')).not.toBeInTheDocument()
     })
 
-    it('should not render embedding model when indexMethod is economy', () => {
-      render(<IndexingSection {...defaultProps} indexMethod={IndexingType.ECONOMICAL} />)
-
-      expect(screen.queryByText(/form\.embeddingModel/i)).not.toBeInTheDocument()
-    })
-
-    it('should call setEmbeddingModel when model changes', () => {
+    it('should call setEmbeddingModel when the user selects a model', () => {
       const setEmbeddingModel = vi.fn()
-      render(
-        <IndexingSection
-          {...defaultProps}
-          setEmbeddingModel={setEmbeddingModel}
-          indexMethod={IndexingType.QUALIFIED}
-        />,
-      )
+      renderComponent({ setEmbeddingModel })
 
-      // The embedding model selector should be rendered
-      expect(screen.getByText(/form\.embeddingModel/i)).toBeInTheDocument()
+      fireEvent.click(screen.getByRole('button', { name: 'select-model' }))
+
+      expect(setEmbeddingModel).toHaveBeenCalledWith({
+        provider: 'cohere',
+        model: 'embed-english-v3.0',
+      })
     })
   })
 
   describe('Summary Index Setting Section', () => {
-    it('should render summary index setting for high quality with text chunking', () => {
-      render(
-        <IndexingSection
-          {...defaultProps}
-          indexMethod={IndexingType.QUALIFIED}
-        />,
-      )
+    it('should render the summary index setting only for high quality text chunking', () => {
+      renderComponent()
+      expect(screen.getByTestId('summary-index-setting')).toBeInTheDocument()
 
-      // Summary index setting should be rendered based on conditions
-      // The exact rendering depends on the SummaryIndexSetting component
+      renderComponent({
+        indexMethod: IndexingType.ECONOMICAL,
+      })
+      expect(screen.getAllByTestId('summary-index-setting')).toHaveLength(1)
     })
 
-    it('should not render summary index setting for economy indexing', () => {
-      render(
-        <IndexingSection
-          {...defaultProps}
-          indexMethod={IndexingType.ECONOMICAL}
-        />,
-      )
-
-      // Summary index setting should not be rendered for economy
-    })
-
-    it('should call handleSummaryIndexSettingChange when setting changes', () => {
+    it('should call handleSummaryIndexSettingChange when the summary setting changes', () => {
       const handleSummaryIndexSettingChange = vi.fn()
-      render(
-        <IndexingSection
-          {...defaultProps}
-          handleSummaryIndexSettingChange={handleSummaryIndexSettingChange}
-          indexMethod={IndexingType.QUALIFIED}
-        />,
-      )
+      renderComponent({ handleSummaryIndexSettingChange })
 
-      // The handler should be properly passed
+      fireEvent.click(screen.getByRole('button', { name: 'summary-enable' }))
+
+      expect(handleSummaryIndexSettingChange).toHaveBeenCalledWith({ enable: true })
     })
   })
 
   describe('Retrieval Settings Section', () => {
-    it('should render retrieval settings', () => {
-      render(<IndexingSection {...defaultProps} />)
+    it('should render the retrieval learn more link', () => {
+      renderComponent()
 
-      expect(screen.getByText(/form\.retrievalSetting\.title/i)).toBeInTheDocument()
+      const learnMoreLink = screen.getByRole('link', { name: 'form.retrievalSetting.learnMore' })
+      expect(learnMoreLink).toHaveAttribute('href', expect.stringContaining('setting-indexing-methods'))
+      expect(screen.getByText('form.retrievalSetting.description')).toBeInTheDocument()
     })
 
-    it('should render learn more link for retrieval settings', () => {
-      render(<IndexingSection {...defaultProps} />)
-
-      const learnMoreLinks = screen.getAllByText(/learnMore/i)
-      const retrievalLearnMore = learnMoreLinks.find(link =>
-        link.closest('a')?.href?.includes('setting-indexing-methods'),
-      )
-      expect(retrievalLearnMore).toBeInTheDocument()
-    })
-
-    it('should render RetrievalMethodConfig for high quality indexing', () => {
-      render(<IndexingSection {...defaultProps} indexMethod={IndexingType.QUALIFIED} />)
-
-      // RetrievalMethodConfig should be rendered
-      expect(screen.getByText(/form\.retrievalSetting\.title/i)).toBeInTheDocument()
-    })
-
-    it('should render EconomicalRetrievalMethodConfig for economy indexing', () => {
-      render(<IndexingSection {...defaultProps} indexMethod={IndexingType.ECONOMICAL} />)
-
-      // EconomicalRetrievalMethodConfig should be rendered
-      expect(screen.getByText(/form\.retrievalSetting\.title/i)).toBeInTheDocument()
-    })
-
-    it('should call setRetrievalConfig when config changes', () => {
+    it('should render the high-quality retrieval config and propagate changes', () => {
       const setRetrievalConfig = vi.fn()
-      render(<IndexingSection {...defaultProps} setRetrievalConfig={setRetrievalConfig} />)
+      renderComponent({ setRetrievalConfig })
 
-      // The handler should be properly passed
+      expect(screen.getByTestId('retrieval-method-config')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByRole('button', { name: 'update-retrieval' }))
+
+      expect(setRetrievalConfig).toHaveBeenCalledWith({
+        ...mockRetrievalConfig,
+        top_k: 6,
+      })
     })
 
-    it('should pass showMultiModalTip to RetrievalMethodConfig', () => {
-      render(<IndexingSection {...defaultProps} showMultiModalTip={true} />)
+    it('should render the economical retrieval config for economy indexing', () => {
+      const setRetrievalConfig = vi.fn()
+      renderComponent({
+        indexMethod: IndexingType.ECONOMICAL,
+        setRetrievalConfig,
+      })
 
-      // The tip should be passed to the config component
+      expect(screen.getByTestId('economical-retrieval-method-config')).toBeInTheDocument()
+
+      fireEvent.click(screen.getByRole('button', { name: 'update-economy-retrieval' }))
+
+      expect(setRetrievalConfig).toHaveBeenCalledWith({
+        ...mockRetrievalConfig,
+        search_method: RETRIEVE_METHOD.keywordSearch,
+      })
     })
-  })
 
-  describe('External Provider', () => {
-    it('should not render retrieval config for external provider', () => {
-      const externalDataset = { ...mockDataset, provider: 'external' }
-      render(<IndexingSection {...defaultProps} currentDataset={externalDataset} />)
+    it('should pass the multimodal tip flag to the retrieval config', () => {
+      renderComponent({ showMultiModalTip: true })
 
-      // Retrieval config should not be rendered for external provider
-      // This is handled by the parent component, but we verify the condition
+      expect(screen.getByText('show-multimodal-tip')).toBeInTheDocument()
+    })
+
+    it('should hide retrieval configuration for external datasets', () => {
+      renderComponent({
+        currentDataset: {
+          ...mockDataset,
+          provider: 'external',
+        },
+      })
+
+      expect(screen.queryByText('form.retrievalSetting.title')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('retrieval-method-config')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('economical-retrieval-method-config')).not.toBeInTheDocument()
     })
   })
 
   describe('Conditional Rendering', () => {
-    it('should show divider between sections', () => {
-      const { container } = render(<IndexingSection {...defaultProps} />)
+    it('should render dividers between visible sections', () => {
+      renderComponent()
 
-      // Dividers should be present
-      const dividers = container.querySelectorAll('.bg-divider-subtle')
-      expect(dividers.length).toBeGreaterThan(0)
+      expect(screen.getAllByTestId('divider').length).toBeGreaterThan(0)
     })
 
-    it('should not render index method when indexing_technique is not set', () => {
-      const datasetWithoutTechnique = { ...mockDataset, indexing_technique: undefined as unknown as IndexingType }
-      render(<IndexingSection {...defaultProps} currentDataset={datasetWithoutTechnique} indexMethod={undefined} />)
+    it('should hide the index method section when the dataset lacks an indexing technique', () => {
+      renderComponent({
+        currentDataset: {
+          ...mockDataset,
+          indexing_technique: undefined as unknown as IndexingType,
+        },
+        indexMethod: undefined,
+      })
 
-      expect(screen.queryByText(/form\.indexMethod/i)).not.toBeInTheDocument()
-    })
-  })
-
-  describe('Keyword Number', () => {
-    it('should pass keywordNumber to IndexMethod', () => {
-      render(<IndexingSection {...defaultProps} keywordNumber={15} />)
-
-      // The keyword number should be displayed in the economy option description
-      // The exact rendering depends on the IndexMethod component
-    })
-
-    it('should call setKeywordNumber when keyword number changes', () => {
-      const setKeywordNumber = vi.fn()
-      render(<IndexingSection {...defaultProps} setKeywordNumber={setKeywordNumber} />)
-
-      // The handler should be properly passed
+      expect(screen.queryByText('form.indexMethod')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('index-method')).not.toBeInTheDocument()
     })
   })
 
   describe('Props Updates', () => {
-    it('should update when indexMethod changes', () => {
-      const { rerender } = render(<IndexingSection {...defaultProps} indexMethod={IndexingType.QUALIFIED} />)
+    it('should update the embedding model section when indexMethod changes', () => {
+      const { rerender } = renderComponent()
 
-      expect(screen.getByText(/form\.embeddingModel/i)).toBeInTheDocument()
+      expect(screen.getByTestId('model-selector')).toBeInTheDocument()
 
       rerender(<IndexingSection {...defaultProps} indexMethod={IndexingType.ECONOMICAL} />)
 
-      expect(screen.queryByText(/form\.embeddingModel/i)).not.toBeInTheDocument()
+      expect(screen.queryByTestId('model-selector')).not.toBeInTheDocument()
     })
 
-    it('should update when currentDataset changes', () => {
-      const { rerender } = render(<IndexingSection {...defaultProps} />)
+    it('should update the chunk structure section when currentDataset changes', () => {
+      const { rerender } = renderComponent()
 
-      expect(screen.getByText(/form\.chunkStructure\.title/i)).toBeInTheDocument()
+      expect(screen.getByTestId('chunk-structure')).toBeInTheDocument()
 
-      const datasetWithoutDocForm = { ...mockDataset, doc_form: undefined as unknown as ChunkingMode }
-      rerender(<IndexingSection {...defaultProps} currentDataset={datasetWithoutDocForm} />)
+      rerender(
+        <IndexingSection
+          {...defaultProps}
+          currentDataset={{
+            ...mockDataset,
+            doc_form: undefined as unknown as ChunkingMode,
+          }}
+        />,
+      )
 
-      expect(screen.queryByText(/form\.chunkStructure\.title/i)).not.toBeInTheDocument()
+      expect(screen.queryByTestId('chunk-structure')).not.toBeInTheDocument()
     })
   })
 
   describe('Undefined Dataset', () => {
-    it('should handle undefined currentDataset gracefully', () => {
-      render(<IndexingSection {...defaultProps} currentDataset={undefined} />)
+    it('should render safely when currentDataset is undefined', () => {
+      renderComponent({ currentDataset: undefined })
 
-      // Should not crash and should handle undefined gracefully
-      // Most sections should not render without a dataset
+      expect(screen.queryByTestId('chunk-structure')).not.toBeInTheDocument()
+      expect(screen.getByTestId('model-selector')).toBeInTheDocument()
+      expect(screen.getByTestId('retrieval-method-config')).toBeInTheDocument()
     })
   })
 })

web/app/components/datasets/settings/summary-index-setting.tsx

@@ -63,7 +63,7 @@ const SummaryIndexSetting = ({
     return (
       <div>
         <div className="flex h-6 items-center justify-between">
-          <div className="system-sm-semibold-uppercase flex items-center text-text-secondary">
+          <div className="flex items-center text-text-secondary system-sm-semibold-uppercase">
             {t('form.summaryAutoGen', { ns: 'datasetSettings' })}
             <Tooltip
               triggerClassName="ml-1 h-4 w-4 shrink-0"
@@ -80,7 +80,7 @@ const SummaryIndexSetting = ({
         {
           summaryIndexSetting?.enable && (
             <div>
-              <div className="system-xs-medium-uppercase mb-1.5 mt-2 flex h-6 items-center text-text-tertiary">
+              <div className="mb-1.5 mt-2 flex h-6 items-center text-text-tertiary system-xs-medium-uppercase">
                 {t('form.summaryModel', { ns: 'datasetSettings' })}
               </div>
               <ModelSelector
@@ -90,7 +90,7 @@ const SummaryIndexSetting = ({
                 readonly={readonly}
                 showDeprecatedWarnIcon
               />
-              <div className="system-xs-medium-uppercase mt-3 flex h-6 items-center text-text-tertiary">
+              <div className="mt-3 flex h-6 items-center text-text-tertiary system-xs-medium-uppercase">
                 {t('form.summaryInstructions', { ns: 'datasetSettings' })}
               </div>
               <Textarea
@@ -111,12 +111,12 @@ const SummaryIndexSetting = ({
       <div className="space-y-4">
         <div className="flex gap-x-1">
           <div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
-            <div className="system-sm-semibold text-text-secondary">
+            <div className="text-text-secondary system-sm-semibold">
               {t('form.summaryAutoGen', { ns: 'datasetSettings' })}
             </div>
           </div>
           <div className="py-1.5">
-            <div className="system-sm-semibold flex items-center text-text-secondary">
+            <div className="flex items-center text-text-secondary system-sm-semibold">
               <Switch
                 className="mr-2"
                 value={summaryIndexSetting?.enable ?? false}
@@ -127,7 +127,7 @@ const SummaryIndexSetting = ({
                 summaryIndexSetting?.enable ? t('list.status.enabled', { ns: 'datasetDocuments' }) : t('list.status.disabled', { ns: 'datasetDocuments' })
               }
             </div>
-            <div className="system-sm-regular mt-2 text-text-tertiary">
+            <div className="mt-2 text-text-tertiary system-sm-regular">
               {
                 summaryIndexSetting?.enable && t('form.summaryAutoGenTip', { ns: 'datasetSettings' })
               }
@@ -142,7 +142,7 @@ const SummaryIndexSetting = ({
             <>
               <div className="flex gap-x-1">
                 <div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
-                  <div className="system-sm-medium text-text-tertiary">
+                  <div className="text-text-tertiary system-sm-medium">
                     {t('form.summaryModel', { ns: 'datasetSettings' })}
                   </div>
                 </div>
@@ -159,7 +159,7 @@ const SummaryIndexSetting = ({
               </div>
               <div className="flex">
                 <div className="flex h-7 w-[180px] shrink-0 items-center pt-1">
-                  <div className="system-sm-medium text-text-tertiary">
+                  <div className="text-text-tertiary system-sm-medium">
                     {t('form.summaryInstructions', { ns: 'datasetSettings' })}
                   </div>
                 </div>
@@ -188,7 +188,7 @@ const SummaryIndexSetting = ({
           onChange={handleSummaryIndexEnableChange}
           size="md"
         />
-        <div className="system-sm-semibold text-text-secondary">
+        <div className="text-text-secondary system-sm-semibold">
           {t('form.summaryAutoGen', { ns: 'datasetSettings' })}
         </div>
       </div>
@@ -196,7 +196,7 @@ const SummaryIndexSetting = ({
         summaryIndexSetting?.enable && (
           <>
             <div>
-              <div className="system-sm-medium mb-1.5 flex h-6 items-center text-text-secondary">
+              <div className="mb-1.5 flex h-6 items-center text-text-secondary system-sm-medium">
                 {t('form.summaryModel', { ns: 'datasetSettings' })}
               </div>
               <ModelSelector
@@ -209,7 +209,7 @@ const SummaryIndexSetting = ({
               />
             </div>
             <div>
-              <div className="system-sm-medium mb-1.5 flex h-6 items-center text-text-secondary">
+              <div className="mb-1.5 flex h-6 items-center text-text-secondary system-sm-medium">
                 {t('form.summaryInstructions', { ns: 'datasetSettings' })}
               </div>
               <Textarea

web/app/components/header/account-dropdown/workplace-selector/index.tsx

@@ -46,7 +46,7 @@ const WorkplaceSelector = () => {
                 <span className="h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90">{currentWorkspace?.name[0]?.toLocaleUpperCase()}</span>
               </div>
               <div className="flex min-w-0 items-center">
-                <div className="system-sm-medium min-w-0  max-w-[149px] truncate text-text-secondary max-[800px]:hidden">{currentWorkspace?.name}</div>
+                <div className="min-w-0 max-w-[149px] truncate text-text-secondary system-sm-medium max-[800px]:hidden">{currentWorkspace?.name}</div>
                 <RiArrowDownSLine className="h-4 w-4 shrink-0 text-text-secondary" />
               </div>
             </MenuButton>
@@ -68,9 +68,9 @@ const WorkplaceSelector = () => {
                   `,
                 )}
               >
-                <div className="flex w-full flex-col items-start self-stretch rounded-xl border-[0.5px] border-components-panel-border p-1 pb-2 shadow-lg ">
+                <div className="flex w-full flex-col items-start self-stretch rounded-xl border-[0.5px] border-components-panel-border p-1 pb-2 shadow-lg">
                   <div className="flex items-start self-stretch px-3 pb-0.5 pt-1">
-                    <span className="system-xs-medium-uppercase flex-1 text-text-tertiary">{t('userProfile.workspace', { ns: 'common' })}</span>
+                    <span className="flex-1 text-text-tertiary system-xs-medium-uppercase">{t('userProfile.workspace', { ns: 'common' })}</span>
                   </div>
                   {
                     workspaces.map(workspace => (
@@ -78,7 +78,7 @@ const WorkplaceSelector = () => {
                         <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-[13px]">
                           <span className="h-6 bg-gradient-to-r from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text align-middle font-semibold uppercase leading-6 text-shadow-shadow-1 opacity-90">{workspace?.name[0]?.toLocaleUpperCase()}</span>
                         </div>
-                        <div className="system-md-regular line-clamp-1 grow cursor-pointer overflow-hidden text-ellipsis text-text-secondary">{workspace.name}</div>
+                        <div className="line-clamp-1 grow cursor-pointer overflow-hidden text-ellipsis text-text-secondary system-md-regular">{workspace.name}</div>
                         <PlanBadge plan={workspace.plan as Plan} />
                       </div>
                     ))

web/app/components/header/account-setting/index.spec.tsx

@@ -1,12 +1,16 @@
+import type { AccountSettingTab } from './constants'
 import type { AppContextValue } from '@/context/app-context'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen } from '@testing-library/react'
+import { useState } from 'react'
 import { useAppContext } from '@/context/app-context'
 import { baseProviderContextValue, useProviderContext } from '@/context/provider-context'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { ACCOUNT_SETTING_TAB } from './constants'
 import AccountSetting from './index'
 
+const mockResetModelProviderListExpanded = vi.fn()
+
 vi.mock('@/context/provider-context', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@/context/provider-context')>()
   return {
@@ -47,10 +51,15 @@ vi.mock('@/app/components/header/account-setting/model-provider-page/hooks', ()
   useDefaultModel: vi.fn(() => ({ data: null, isLoading: false })),
   useUpdateDefaultModel: vi.fn(() => ({ trigger: vi.fn() })),
   useUpdateModelList: vi.fn(() => vi.fn()),
+  useInvalidateDefaultModel: vi.fn(() => vi.fn()),
   useModelList: vi.fn(() => ({ data: [], isLoading: false })),
   useSystemDefaultModelAndModelList: vi.fn(() => [null, vi.fn()]),
 }))
 
+vi.mock('@/app/components/header/account-setting/model-provider-page/atoms', () => ({
+  useResetModelProviderListExpanded: () => mockResetModelProviderListExpanded,
+}))
+
 vi.mock('@/service/use-datasource', () => ({
   useGetDataSourceListAuth: vi.fn(() => ({ data: { result: [] } })),
 }))
@@ -105,6 +114,38 @@ const baseAppContextValue: AppContextValue = {
 describe('AccountSetting', () => {
   const mockOnCancel = vi.fn()
   const mockOnTabChange = vi.fn()
+  const renderAccountSetting = (props?: {
+    initialTab?: AccountSettingTab
+    onCancel?: () => void
+    onTabChange?: (tab: AccountSettingTab) => void
+  }) => {
+    const {
+      initialTab = ACCOUNT_SETTING_TAB.MEMBERS,
+      onCancel = mockOnCancel,
+      onTabChange = mockOnTabChange,
+    } = props ?? {}
+
+    const StatefulAccountSetting = () => {
+      const [activeTab, setActiveTab] = useState<AccountSettingTab>(initialTab)
+
+      return (
+        <AccountSetting
+          onCancelAction={onCancel}
+          activeTab={activeTab}
+          onTabChangeAction={(tab) => {
+            setActiveTab(tab)
+            onTabChange(tab)
+          }}
+        />
+      )
+    }
+
+    return render(
+      <QueryClientProvider client={new QueryClient()}>
+        <StatefulAccountSetting />
+      </QueryClientProvider>,
+    )
+  }
 
   beforeEach(() => {
     vi.clearAllMocks()
@@ -120,11 +161,7 @@ describe('AccountSetting', () => {
   describe('Rendering', () => {
     it('should render the sidebar with correct menu items', () => {
       // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting()
 
       // Assert
       expect(screen.getByText('common.userProfile.settings')).toBeInTheDocument()
@@ -137,13 +174,9 @@ describe('AccountSetting', () => {
       expect(screen.getAllByText('common.settings.language').length).toBeGreaterThan(0)
     })
 
-    it('should respect the activeTab prop', () => {
+    it('should respect the initial tab', () => {
       // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} activeTab={ACCOUNT_SETTING_TAB.DATA_SOURCE} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting({ initialTab: ACCOUNT_SETTING_TAB.DATA_SOURCE })
 
       // Assert
       // Check that the active item title is Data Source
@@ -157,11 +190,7 @@ describe('AccountSetting', () => {
       vi.mocked(useBreakpoints).mockReturnValue(MediaType.mobile)
 
       // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting()
 
       // Assert
       // On mobile, the labels should not be rendered as per the implementation
@@ -176,11 +205,7 @@ describe('AccountSetting', () => {
       })
 
       // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting()
 
       // Assert
       expect(screen.queryByText('common.settings.provider')).not.toBeInTheDocument()
@@ -197,11 +222,7 @@ describe('AccountSetting', () => {
       })
 
       // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting()
 
       // Assert
       expect(screen.queryByText('common.settings.billing')).not.toBeInTheDocument()
@@ -212,11 +233,7 @@ describe('AccountSetting', () => {
   describe('Tab Navigation', () => {
     it('should change active tab when clicking on menu item', () => {
       // Arrange
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} onTabChange={mockOnTabChange} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting({ onTabChange: mockOnTabChange })
 
       // Act
       fireEvent.click(screen.getByText('common.settings.provider'))
@@ -229,11 +246,7 @@ describe('AccountSetting', () => {
 
     it('should navigate through various tabs and show correct details', () => {
       // Act & Assert
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting()
 
       // Billing
       fireEvent.click(screen.getByText('common.settings.billing'))
@@ -267,13 +280,11 @@ describe('AccountSetting', () => {
   describe('Interactions', () => {
     it('should call onCancel when clicking close button', () => {
       // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
-      const buttons = screen.getAllByRole('button')
-      fireEvent.click(buttons[0])
+      renderAccountSetting()
+      const closeIcon = document.querySelector('.i-ri-close-line')
+      const closeButton = closeIcon?.closest('button')
+      expect(closeButton).not.toBeNull()
+      fireEvent.click(closeButton!)
 
       // Assert
       expect(mockOnCancel).toHaveBeenCalled()
@@ -281,11 +292,7 @@ describe('AccountSetting', () => {
 
     it('should call onCancel when pressing Escape key', () => {
       // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting()
       fireEvent.keyDown(document, { key: 'Escape' })
 
       // Assert
@@ -294,12 +301,7 @@ describe('AccountSetting', () => {
 
     it('should update search value in provider tab', () => {
       // Arrange
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
-      fireEvent.click(screen.getByText('common.settings.provider'))
+      renderAccountSetting({ initialTab: ACCOUNT_SETTING_TAB.PROVIDER })
 
       // Act
       const input = screen.getByRole('textbox')
@@ -312,11 +314,7 @@ describe('AccountSetting', () => {
 
     it('should handle scroll event in panel', () => {
       // Act
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <AccountSetting onCancel={mockOnCancel} />
-        </QueryClientProvider>,
-      )
+      renderAccountSetting()
       const scrollContainer = screen.getByRole('dialog').querySelector('.overflow-y-auto')
 
       // Assert

web/app/components/header/account-setting/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { AccountSettingTab } from '@/app/components/header/account-setting/constants'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import SearchInput from '@/app/components/base/search-input'
 import BillingPage from '@/app/components/billing/billing-page'
@@ -20,15 +20,16 @@ import DataSourcePage from './data-source-page-new'
 import LanguagePage from './language-page'
 import MembersPage from './members-page'
 import ModelProviderPage from './model-provider-page'
+import { useResetModelProviderListExpanded } from './model-provider-page/atoms'
 
 const iconClassName = `
   w-5 h-5 mr-2
 `
 
 type IAccountSettingProps = {
-  onCancel: () => void
-  activeTab?: AccountSettingTab
-  onTabChange?: (tab: AccountSettingTab) => void
+  onCancelAction: () => void
+  activeTab: AccountSettingTab
+  onTabChangeAction: (tab: AccountSettingTab) => void
 }
 
 type GroupItem = {
@@ -40,14 +41,12 @@ type GroupItem = {
 }
 
 export default function AccountSetting({
-  onCancel,
-  activeTab = ACCOUNT_SETTING_TAB.MEMBERS,
-  onTabChange,
+  onCancelAction,
+  activeTab,
+  onTabChangeAction,
 }: IAccountSettingProps) {
-  const [activeMenu, setActiveMenu] = useState<AccountSettingTab>(activeTab)
-  useEffect(() => {
-    setActiveMenu(activeTab)
-  }, [activeTab])
+  const resetModelProviderListExpanded = useResetModelProviderListExpanded()
+  const activeMenu = activeTab
   const { t } = useTranslation()
   const { enableBilling, enableReplaceWebAppLogo } = useProviderContext()
   const { isCurrentWorkspaceDatasetOperator } = useAppContext()
@@ -148,10 +147,22 @@ export default function AccountSetting({
 
   const [searchValue, setSearchValue] = useState<string>('')
 
+  const handleTabChange = useCallback((tab: AccountSettingTab) => {
+    if (tab === ACCOUNT_SETTING_TAB.PROVIDER)
+      resetModelProviderListExpanded()
+
+    onTabChangeAction(tab)
+  }, [onTabChangeAction, resetModelProviderListExpanded])
+
+  const handleClose = useCallback(() => {
+    resetModelProviderListExpanded()
+    onCancelAction()
+  }, [onCancelAction, resetModelProviderListExpanded])
+
   return (
     <MenuDialog
       show
-      onClose={onCancel}
+      onClose={handleClose}
     >
       <div className="mx-auto flex h-[100vh] max-w-[1048px]">
         <div className="flex w-[44px] flex-col border-r border-divider-burn pl-4 pr-6 sm:w-[224px]">
@@ -166,21 +177,22 @@ export default function AccountSetting({
                   <div>
                     {
                       menuItem.items.map(item => (
-                        <div
+                        <button
+                          type="button"
                           key={item.key}
                           className={cn(
-                            'mb-0.5 flex h-[37px] cursor-pointer items-center rounded-lg p-1 pl-3 text-sm',
+                            'mb-0.5 flex h-[37px] w-full items-center rounded-lg p-1 pl-3 text-left text-sm',
                             activeMenu === item.key ? 'bg-state-base-active text-components-menu-item-text-active system-sm-semibold' : 'text-components-menu-item-text system-sm-medium',
                           )}
+                          aria-label={item.name}
                           title={item.name}
                           onClick={() => {
-                            setActiveMenu(item.key)
-                            onTabChange?.(item.key)
+                            handleTabChange(item.key)
                           }}
                         >
                           {activeMenu === item.key ? item.activeIcon : item.icon}
                           {!isMobile && <div className="truncate">{item.name}</div>}
-                        </div>
+                        </button>
                       ))
                     }
                   </div>
@@ -195,7 +207,8 @@ export default function AccountSetting({
               variant="tertiary"
               size="large"
               className="px-2"
-              onClick={onCancel}
+              aria-label={t('operation.close', { ns: 'common' })}
+              onClick={handleClose}
             >
               <span className="i-ri-close-line h-5 w-5" />
             </Button>

web/app/components/header/account-setting/members-page/edit-workspace-modal/index.spec.tsx

@@ -1,6 +1,6 @@
 import type { AppContextValue } from '@/context/app-context'
 import type { ICurrentWorkspace } from '@/models/common'
-import { render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
 import { ToastContext } from '@/app/components/base/toast/context'
@@ -40,35 +40,24 @@ describe('EditWorkspaceModal', () => {
     expect(await screen.findByDisplayValue('Test Workspace')).toBeInTheDocument()
   })
 
+  it('should render on the base/ui overlay layer', async () => {
+    renderModal()
+
+    expect(await screen.findByRole('dialog')).toHaveClass('z-[1002]')
+  })
+
   it('should let user edit workspace name', async () => {
     const user = userEvent.setup()
 
     renderModal()
 
-    const input = screen.getByPlaceholderText(/account\.workspaceNamePlaceholder/i)
+    const input = screen.getByLabelText(/account\.workspaceName/i)
     await user.clear(input)
     await user.type(input, 'New Workspace Name')
 
     expect(input).toHaveValue('New Workspace Name')
   })
 
-  it('should reset name to current workspace name when cleared', async () => {
-    const user = userEvent.setup()
-
-    renderModal()
-
-    const input = screen.getByPlaceholderText(/account\.workspaceNamePlaceholder/i)
-    await user.clear(input)
-    await user.type(input, 'New Workspace Name')
-    expect(input).toHaveValue('New Workspace Name')
-
-    // Click the clear button (Input component clear button)
-    const clearBtn = screen.getByTestId('input-clear')
-    await user.click(clearBtn)
-
-    expect(input).toHaveValue('Test Workspace')
-  })
-
   it('should submit update when confirming as owner', async () => {
     const user = userEvent.setup()
     const mockAssign = vi.fn()
@@ -77,10 +66,10 @@ describe('EditWorkspaceModal', () => {
 
     renderModal()
 
-    const input = screen.getByPlaceholderText(/account\.workspaceNamePlaceholder/i)
+    const input = screen.getByLabelText(/account\.workspaceName/i)
     await user.clear(input)
     await user.type(input, 'Renamed Workspace')
-    await user.click(screen.getByTestId('edit-workspace-confirm'))
+    await user.click(screen.getByTestId('edit-workspace-save'))
 
     await waitFor(() => {
       expect(updateWorkspaceInfo).toHaveBeenCalledWith({
@@ -89,6 +78,8 @@ describe('EditWorkspaceModal', () => {
       })
       expect(mockAssign).toHaveBeenCalledWith('http://localhost')
     })
+
+    expect(mockOnCancel).not.toHaveBeenCalled()
   })
 
   it('should show error toast when update fails', async () => {
@@ -98,7 +89,10 @@ describe('EditWorkspaceModal', () => {
 
     renderModal()
 
-    await user.click(screen.getByTestId('edit-workspace-confirm'))
+    const input = screen.getByLabelText(/account\.workspaceName/i)
+    await user.clear(input)
+    await user.type(input, 'Broken Workspace')
+    await user.click(screen.getByTestId('edit-workspace-save'))
 
     await waitFor(() => {
       expect(mockNotify).toHaveBeenCalledWith(expect.objectContaining({
@@ -107,6 +101,25 @@ describe('EditWorkspaceModal', () => {
     })
   })
 
+  it('should disable save button when there are no changes', async () => {
+    renderModal()
+
+    expect(screen.getByTestId('edit-workspace-save')).toBeDisabled()
+  })
+
+  it('should disable save button and show error when the name is empty', async () => {
+    const user = userEvent.setup()
+
+    renderModal()
+
+    const input = screen.getByLabelText(/account\.workspaceName/i)
+    await user.clear(input)
+
+    expect(screen.getByTestId('edit-workspace-save')).toBeDisabled()
+    expect(input).toHaveAttribute('aria-invalid', 'true')
+    expect(screen.getByTestId('edit-workspace-error')).toBeInTheDocument()
+  })
+
   it('should disable confirm button for non-owners', async () => {
     vi.mocked(useAppContext).mockReturnValue({
       currentWorkspace: { name: 'Test Workspace' } as ICurrentWorkspace,
@@ -115,7 +128,7 @@ describe('EditWorkspaceModal', () => {
 
     renderModal()
 
-    expect(screen.getByTestId('edit-workspace-confirm')).toBeDisabled()
+    expect(screen.getByTestId('edit-workspace-save')).toBeDisabled()
   })
 
   it('should call onCancel when close icon is clicked', async () => {
@@ -133,4 +146,14 @@ describe('EditWorkspaceModal', () => {
     await user.click(screen.getByTestId('edit-workspace-cancel'))
     expect(mockOnCancel).toHaveBeenCalled()
   })
+
+  it('should call onCancel when Escape key is pressed', async () => {
+    renderModal()
+
+    fireEvent.keyDown(document, { key: 'Escape' })
+
+    await waitFor(() => {
+      expect(mockOnCancel).toHaveBeenCalled()
+    })
+  })
 })

web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx

@@ -1,20 +1,19 @@
 'use client'
-import { noop } from 'es-toolkit/function'
-import { useState } from 'react'
+import { useId, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
-import Modal from '@/app/components/base/modal'
 import { ToastContext } from '@/app/components/base/toast/context'
+import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@/app/components/base/ui/dialog'
 import { useAppContext } from '@/context/app-context'
 import { updateWorkspaceInfo } from '@/service/common'
 import { cn } from '@/utils/classnames'
-import s from './index.module.css'
 
 type IEditWorkspaceModalProps = {
   onCancel: () => void
 }
+
 const EditWorkspaceModal = ({
   onCancel,
 }: IEditWorkspaceModalProps) => {
@@ -22,13 +21,33 @@ const EditWorkspaceModal = ({
   const { notify } = useContext(ToastContext)
   const { currentWorkspace, isCurrentWorkspaceOwner } = useAppContext()
   const [name, setName] = useState<string>(currentWorkspace.name)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const inputId = useId()
+  const errorId = useId()
+  const normalizedName = name.trim()
+  const hasChanges = normalizedName !== currentWorkspace.name
+  const hasError = normalizedName.length === 0
+  const isSaveDisabled = !isCurrentWorkspaceOwner || !hasChanges || hasError || isSubmitting
+  const nameErrorMessage = useMemo(() => {
+    if (!hasError)
+      return ''
 
-  const changeWorkspaceInfo = async (name: string) => {
+    return t('errorMsg.fieldRequired', {
+      ns: 'common',
+      field: t('account.workspaceName', { ns: 'common' }),
+    })
+  }, [hasError, t])
+
+  const changeWorkspaceInfo = async () => {
+    if (isSaveDisabled)
+      return
+
+    setIsSubmitting(true)
     try {
       await updateWorkspaceInfo({
         url: '/workspaces/info',
         body: {
-          name,
+          name: normalizedName,
         },
       })
       notify({ type: 'success', message: t('actionMsg.modifiedSuccessfully', { ns: 'common' }) })
@@ -37,33 +56,74 @@ const EditWorkspaceModal = ({
     catch {
       notify({ type: 'error', message: t('actionMsg.modifiedUnsuccessfully', { ns: 'common' }) })
     }
+    finally {
+      setIsSubmitting(false)
+    }
   }
 
   return (
-    <div className={cn(s.wrap)}>
-      <Modal overflowVisible isShow onClose={noop} className={cn(s.modal)}>
-        <div className="mb-2 flex justify-between">
-          <div className="text-xl font-semibold text-text-primary" data-testid="edit-workspace-title">{t('account.editWorkspaceInfo', { ns: 'common' })}</div>
-          <div className="i-ri-close-line h-4 w-4 cursor-pointer text-text-tertiary" data-testid="edit-workspace-close" onClick={onCancel} />
-        </div>
-        <div>
-          <div className="mb-2 text-sm font-medium text-text-primary">{t('account.workspaceName', { ns: 'common' })}</div>
-          <Input
-            className="mb-2"
-            value={name}
-            placeholder={t('account.workspaceNamePlaceholder', { ns: 'common' })}
-            onChange={(e) => {
-              setName(e.target.value)
-            }}
-            onClear={() => {
-              setName(currentWorkspace.name)
-            }}
-            showClearIcon
-          />
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open)
+          onCancel()
+      }}
+    >
+      <DialogContent
+        backdropProps={{ forceRender: true }}
+        className="overflow-visible"
+      >
+        <DialogCloseButton data-testid="edit-workspace-close" />
+
+        <form
+          className="flex flex-col"
+          onSubmit={(e) => {
+            e.preventDefault()
+            void changeWorkspaceInfo()
+          }}
+        >
+          <div className="mb-4 pr-8">
+            <DialogTitle className="text-xl font-semibold text-text-primary" data-testid="edit-workspace-title">
+              {t('account.editWorkspaceInfo', { ns: 'common' })}
+            </DialogTitle>
+          </div>
+
+          <div className="space-y-2">
+            <label htmlFor={inputId} className="block text-sm font-medium text-text-primary">
+              {t('account.workspaceName', { ns: 'common' })}
+            </label>
+            <Input
+              id={inputId}
+              autoFocus
+              value={name}
+              placeholder={t('account.workspaceNamePlaceholder', { ns: 'common' })}
+              onChange={(e) => {
+                setName(e.target.value)
+              }}
+              aria-invalid={hasError}
+              aria-describedby={hasError ? errorId : undefined}
+              className={cn(
+                hasError && 'border-components-input-border-destructive bg-components-input-bg-destructive hover:border-components-input-border-destructive hover:bg-components-input-bg-destructive focus:border-components-input-border-destructive focus:bg-components-input-bg-destructive',
+              )}
+            />
+            <div className="min-h-6">
+              {hasError && (
+                <p
+                  id={errorId}
+                  data-testid="edit-workspace-error"
+                  className="text-text-destructive system-xs-regular"
+                  role="alert"
+                >
+                  {nameErrorMessage}
+                </p>
+              )}
+            </div>
+          </div>
 
           <div className="sticky bottom-0 -mx-2 mt-2 flex flex-wrap items-center justify-end gap-x-2 bg-components-panel-bg px-2 pt-4">
             <Button
               size="large"
+              type="button"
               data-testid="edit-workspace-cancel"
               onClick={onCancel}
             >
@@ -71,21 +131,22 @@ const EditWorkspaceModal = ({
             </Button>
             <Button
               size="large"
+              type="submit"
               variant="primary"
-              data-testid="edit-workspace-confirm"
-              onClick={() => {
-                changeWorkspaceInfo(name)
-                onCancel()
-              }}
-              disabled={!isCurrentWorkspaceOwner}
+              data-testid="edit-workspace-save"
+              disabled={isSaveDisabled}
+              loading={isSubmitting}
             >
-              {t('operation.confirm', { ns: 'common' })}
+              {t(
+                isSubmitting ? 'operation.saving' : 'operation.save',
+                { ns: 'common' },
+              )}
             </Button>
           </div>
-
-        </div>
-      </Modal>
-    </div>
+        </form>
+      </DialogContent>
+    </Dialog>
   )
 }
+
 export default EditWorkspaceModal

web/app/components/header/account-setting/members-page/index.tsx

@@ -3,7 +3,7 @@ import type { InvitationResult } from '@/models/common'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Avatar } from '@/app/components/base/avatar'
-import Tooltip from '@/app/components/base/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { NUM_INFINITE } from '@/app/components/billing/config'
 import { Plan } from '@/app/components/billing/type'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
@@ -59,20 +59,25 @@ const MembersPage = () => {
               <span>{currentWorkspace?.name}</span>
               {isCurrentWorkspaceOwner && (
                 <span>
-                  <Tooltip
-                    popupContent={t('account.editWorkspaceInfo', { ns: 'common' })}
-                  >
-                    <div
-                      className="cursor-pointer rounded-md p-1 hover:bg-black/5"
-                      onClick={() => {
-                        setEditWorkspaceModalVisible(true)
-                      }}
-                    >
-                      <div
-                        data-testid="edit-workspace-pencil"
-                        className="i-ri-pencil-line h-4 w-4 text-text-tertiary"
-                      />
-                    </div>
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={(
+                        <div
+                          className="cursor-pointer rounded-md p-1 hover:bg-black/5"
+                          onClick={() => {
+                            setEditWorkspaceModalVisible(true)
+                          }}
+                        >
+                          <div
+                            data-testid="edit-workspace-pencil"
+                            className="i-ri-pencil-line h-4 w-4 text-text-tertiary"
+                          />
+                        </div>
+                      )}
+                    />
+                    <TooltipContent>
+                      {t('account.editWorkspaceInfo', { ns: 'common' })}
+                    </TooltipContent>
                   </Tooltip>
                 </span>
               )}

web/app/components/header/account-setting/members-page/operation/index.tsx

@@ -97,7 +97,7 @@ const Operation = ({
       offset={{ mainAxis: 4 }}
     >
       <PortalToFollowElemTrigger asChild onClick={() => setOpen(prev => !prev)}>
-        <div className={cn('system-sm-regular group flex h-full w-full cursor-pointer items-center justify-between px-3 text-text-secondary hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
+        <div className={cn('group flex h-full w-full cursor-pointer items-center justify-between px-3 text-text-secondary system-sm-regular hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
           {RoleMap[member.role] || RoleMap.normal}
           <ChevronDownIcon className={cn('h-4 w-4 shrink-0 group-hover:block', open ? 'block' : 'hidden')} />
         </div>
@@ -114,8 +114,8 @@ const Operation = ({
                       : <div className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
                   }
                   <div>
-                    <div className="system-sm-semibold whitespace-nowrap text-text-secondary">{t(roleI18nKeyMap[role].label, { ns: 'common' })}</div>
-                    <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t(roleI18nKeyMap[role].tip, { ns: 'common' })}</div>
+                    <div className="whitespace-nowrap text-text-secondary system-sm-semibold">{t(roleI18nKeyMap[role].label, { ns: 'common' })}</div>
+                    <div className="whitespace-nowrap text-text-tertiary system-xs-regular">{t(roleI18nKeyMap[role].tip, { ns: 'common' })}</div>
                   </div>
                 </div>
               ))
@@ -125,8 +125,8 @@ const Operation = ({
             <div className="flex cursor-pointer rounded-lg px-3 py-2 hover:bg-state-base-hover" onClick={handleDeleteMemberOrCancelInvitation}>
               <div className="mr-1 mt-[2px] h-4 w-4 text-text-accent" />
               <div>
-                <div className="system-sm-semibold whitespace-nowrap text-text-secondary">{t('members.removeFromTeam', { ns: 'common' })}</div>
-                <div className="system-xs-regular whitespace-nowrap text-text-tertiary">{t('members.removeFromTeamTip', { ns: 'common' })}</div>
+                <div className="whitespace-nowrap text-text-secondary system-sm-semibold">{t('members.removeFromTeam', { ns: 'common' })}</div>
+                <div className="whitespace-nowrap text-text-tertiary system-xs-regular">{t('members.removeFromTeamTip', { ns: 'common' })}</div>
               </div>
             </div>
           </div>

web/app/components/header/account-setting/menu-dialog.spec.tsx

@@ -40,8 +40,7 @@ describe('MenuDialog', () => {
       )
 
       // Assert
-      const panel = screen.getByRole('dialog').querySelector('.custom-class')
-      expect(panel).toBeInTheDocument()
+      expect(screen.getByRole('dialog')).toHaveClass('custom-class')
     })
   })
 

web/app/components/header/account-setting/menu-dialog.tsx

@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react'
-import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
-import { noop } from 'es-toolkit/function'
-import { Fragment, useCallback, useEffect } from 'react'
+import { useCallback } from 'react'
+import { Dialog, DialogContent } from '@/app/components/base/ui/dialog'
 import { cn } from '@/utils/classnames'
 
 type DialogProps = {
@@ -19,42 +18,25 @@ const MenuDialog = ({
 }: DialogProps) => {
   const close = useCallback(() => onClose?.(), [onClose])
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.preventDefault()
-        close()
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [close])
-
   return (
-    <Transition appear show={show} as={Fragment}>
-      <Dialog as="div" className="relative z-[60]" onClose={noop}>
-        <div className="fixed inset-0">
-          <div className="flex min-h-full flex-col items-center justify-center">
-            <TransitionChild>
-              <DialogPanel className={cn(
-                'relative h-full w-full grow overflow-hidden bg-background-sidenav-bg p-0 text-left align-middle backdrop-blur-md transition-all',
-                'duration-300 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
-                'data-[enter]:scale-100 data-[enter]:opacity-100',
-                'data-[enter]:scale-95 data-[leave]:opacity-0',
-                className,
-              )}
-              >
-                <div className="absolute right-0 top-0 h-full w-1/2 bg-components-panel-bg" />
-                {children}
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
+    <Dialog
+      open={show}
+      onOpenChange={(open) => {
+        if (!open)
+          close()
+      }}
+    >
+      <DialogContent
+        overlayClassName="bg-transparent"
+        className={cn(
+          'left-0 top-0 h-full max-h-none w-full max-w-none translate-x-0 translate-y-0 overflow-hidden rounded-none border-none bg-background-sidenav-bg p-0 shadow-none backdrop-blur-md',
+          className,
+        )}
+      >
+        <div className="absolute right-0 top-0 h-full w-1/2 bg-components-panel-bg" />
+        {children}
+      </DialogContent>
+    </Dialog>
   )
 }
 

web/app/components/header/account-setting/model-provider-page/atoms.spec.tsx

@@ -0,0 +1,399 @@
+import type { ReactNode } from 'react'
+import { act, renderHook } from '@testing-library/react'
+import { Provider } from 'jotai'
+import { beforeEach, describe, expect, it } from 'vitest'
+import {
+  useExpandModelProviderList,
+  useModelProviderListExpanded,
+  useResetModelProviderListExpanded,
+  useSetModelProviderListExpanded,
+} from './atoms'
+
+const createWrapper = () => {
+  return ({ children }: { children: ReactNode }) => (
+    <Provider>{children}</Provider>
+  )
+}
+
+describe('atoms', () => {
+  let wrapper: ReturnType<typeof createWrapper>
+
+  beforeEach(() => {
+    wrapper = createWrapper()
+  })
+
+  // Read hook: returns whether a specific provider is expanded
+  describe('useModelProviderListExpanded', () => {
+    it('should return false when provider has not been expanded', () => {
+      const { result } = renderHook(
+        () => useModelProviderListExpanded('openai'),
+        { wrapper },
+      )
+
+      expect(result.current).toBe(false)
+    })
+
+    it('should return false for any unknown provider name', () => {
+      const { result } = renderHook(
+        () => useModelProviderListExpanded('nonexistent-provider'),
+        { wrapper },
+      )
+
+      expect(result.current).toBe(false)
+    })
+
+    it('should return true when provider has been expanded via setter', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          setExpanded: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setExpanded(true)
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+  })
+
+  // Setter hook: toggles expanded state for a specific provider
+  describe('useSetModelProviderListExpanded', () => {
+    it('should expand a provider when called with true', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('anthropic'),
+          setExpanded: useSetModelProviderListExpanded('anthropic'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setExpanded(true)
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+
+    it('should collapse a provider when called with false', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('anthropic'),
+          setExpanded: useSetModelProviderListExpanded('anthropic'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setExpanded(true)
+      })
+      act(() => {
+        result.current.setExpanded(false)
+      })
+
+      expect(result.current.expanded).toBe(false)
+    })
+
+    it('should not affect other providers when setting one', () => {
+      const { result } = renderHook(
+        () => ({
+          openaiExpanded: useModelProviderListExpanded('openai'),
+          anthropicExpanded: useModelProviderListExpanded('anthropic'),
+          setOpenai: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setOpenai(true)
+      })
+
+      expect(result.current.openaiExpanded).toBe(true)
+      expect(result.current.anthropicExpanded).toBe(false)
+    })
+  })
+
+  // Expand hook: expands any provider by name
+  describe('useExpandModelProviderList', () => {
+    it('should expand the specified provider', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('google'),
+          expand: useExpandModelProviderList(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('google')
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+
+    it('should expand multiple providers independently', () => {
+      const { result } = renderHook(
+        () => ({
+          openaiExpanded: useModelProviderListExpanded('openai'),
+          anthropicExpanded: useModelProviderListExpanded('anthropic'),
+          expand: useExpandModelProviderList(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('openai')
+      })
+      act(() => {
+        result.current.expand('anthropic')
+      })
+
+      expect(result.current.openaiExpanded).toBe(true)
+      expect(result.current.anthropicExpanded).toBe(true)
+    })
+
+    it('should not collapse already expanded providers when expanding another', () => {
+      const { result } = renderHook(
+        () => ({
+          openaiExpanded: useModelProviderListExpanded('openai'),
+          anthropicExpanded: useModelProviderListExpanded('anthropic'),
+          expand: useExpandModelProviderList(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('openai')
+      })
+      act(() => {
+        result.current.expand('anthropic')
+      })
+
+      expect(result.current.openaiExpanded).toBe(true)
+    })
+  })
+
+  // Reset hook: clears all expanded state back to empty
+  describe('useResetModelProviderListExpanded', () => {
+    it('should reset all expanded providers to false', () => {
+      const { result } = renderHook(
+        () => ({
+          openaiExpanded: useModelProviderListExpanded('openai'),
+          anthropicExpanded: useModelProviderListExpanded('anthropic'),
+          expand: useExpandModelProviderList(),
+          reset: useResetModelProviderListExpanded(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('openai')
+      })
+      act(() => {
+        result.current.expand('anthropic')
+      })
+      act(() => {
+        result.current.reset()
+      })
+
+      expect(result.current.openaiExpanded).toBe(false)
+      expect(result.current.anthropicExpanded).toBe(false)
+    })
+
+    it('should be safe to call when no providers are expanded', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          reset: useResetModelProviderListExpanded(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.reset()
+      })
+
+      expect(result.current.expanded).toBe(false)
+    })
+
+    it('should allow re-expanding providers after reset', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          expand: useExpandModelProviderList(),
+          reset: useResetModelProviderListExpanded(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('openai')
+      })
+      act(() => {
+        result.current.reset()
+      })
+      act(() => {
+        result.current.expand('openai')
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+  })
+
+  // Cross-hook interaction: verify hooks cooperate through the shared atom
+  describe('Cross-hook interaction', () => {
+    it('should reflect state set by useSetModelProviderListExpanded in useModelProviderListExpanded', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          setExpanded: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setExpanded(true)
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+
+    it('should reflect state set by useExpandModelProviderList in useModelProviderListExpanded', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('anthropic'),
+          expand: useExpandModelProviderList(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('anthropic')
+      })
+
+      expect(result.current.expanded).toBe(true)
+    })
+
+    it('should allow useSetModelProviderListExpanded to collapse a provider expanded by useExpandModelProviderList', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          expand: useExpandModelProviderList(),
+          setExpanded: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.expand('openai')
+      })
+      expect(result.current.expanded).toBe(true)
+
+      act(() => {
+        result.current.setExpanded(false)
+      })
+      expect(result.current.expanded).toBe(false)
+    })
+
+    it('should reset state set by useSetModelProviderListExpanded via useResetModelProviderListExpanded', () => {
+      const { result } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          setExpanded: useSetModelProviderListExpanded('openai'),
+          reset: useResetModelProviderListExpanded(),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setExpanded(true)
+      })
+      act(() => {
+        result.current.reset()
+      })
+
+      expect(result.current.expanded).toBe(false)
+    })
+  })
+
+  // selectAtom granularity: changing one provider should not affect unrelated reads
+  describe('selectAtom granularity', () => {
+    it('should not cause unrelated provider reads to change when one provider is toggled', () => {
+      const { result } = renderHook(
+        () => ({
+          openai: useModelProviderListExpanded('openai'),
+          anthropic: useModelProviderListExpanded('anthropic'),
+          google: useModelProviderListExpanded('google'),
+          setOpenai: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper },
+      )
+
+      const anthropicBefore = result.current.anthropic
+      const googleBefore = result.current.google
+
+      act(() => {
+        result.current.setOpenai(true)
+      })
+
+      expect(result.current.openai).toBe(true)
+      expect(result.current.anthropic).toBe(anthropicBefore)
+      expect(result.current.google).toBe(googleBefore)
+    })
+
+    it('should keep individual provider states independent across multiple expansions and collapses', () => {
+      const { result } = renderHook(
+        () => ({
+          openai: useModelProviderListExpanded('openai'),
+          anthropic: useModelProviderListExpanded('anthropic'),
+          setOpenai: useSetModelProviderListExpanded('openai'),
+          setAnthropic: useSetModelProviderListExpanded('anthropic'),
+        }),
+        { wrapper },
+      )
+
+      act(() => {
+        result.current.setOpenai(true)
+      })
+      act(() => {
+        result.current.setAnthropic(true)
+      })
+      act(() => {
+        result.current.setOpenai(false)
+      })
+
+      expect(result.current.openai).toBe(false)
+      expect(result.current.anthropic).toBe(true)
+    })
+  })
+
+  // Isolation: separate Provider instances have independent state
+  describe('Provider isolation', () => {
+    it('should have independent state across different Provider instances', () => {
+      const wrapper1 = createWrapper()
+      const wrapper2 = createWrapper()
+
+      const { result: result1 } = renderHook(
+        () => ({
+          expanded: useModelProviderListExpanded('openai'),
+          setExpanded: useSetModelProviderListExpanded('openai'),
+        }),
+        { wrapper: wrapper1 },
+      )
+
+      const { result: result2 } = renderHook(
+        () => useModelProviderListExpanded('openai'),
+        { wrapper: wrapper2 },
+      )
+
+      act(() => {
+        result1.current.setExpanded(true)
+      })
+
+      expect(result1.current.expanded).toBe(true)
+      expect(result2.current).toBe(false)
+    })
+  })
+})

web/app/components/header/account-setting/model-provider-page/atoms.ts

@@ -0,0 +1,35 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai'
+import { selectAtom } from 'jotai/utils'
+import { useCallback, useMemo } from 'react'
+
+const expandedAtom = atom<Record<string, boolean>>({})
+
+export function useModelProviderListExpanded(providerName: string) {
+  return useAtomValue(
+    useMemo(
+      () => selectAtom(expandedAtom, s => !!s[providerName]),
+      [providerName],
+    ),
+  )
+}
+
+export function useSetModelProviderListExpanded(providerName: string) {
+  const set = useSetAtom(expandedAtom)
+  return useCallback(
+    (expanded: boolean) => set(prev => ({ ...prev, [providerName]: expanded })),
+    [providerName, set],
+  )
+}
+
+export function useExpandModelProviderList() {
+  const set = useSetAtom(expandedAtom)
+  return useCallback(
+    (providerName: string) => set(prev => ({ ...prev, [providerName]: true })),
+    [set],
+  )
+}
+
+export function useResetModelProviderListExpanded() {
+  const set = useSetAtom(expandedAtom)
+  return useCallback(() => set({}), [set])
+}

web/app/components/header/account-setting/model-provider-page/derive-model-status.spec.ts

@@ -0,0 +1,108 @@
+import type { Model, ModelItem, ModelProvider } from './declarations'
+import type { CredentialPanelState } from './provider-added-card/use-credential-panel-state'
+import {
+  ConfigurationMethodEnum,
+  ModelStatusEnum,
+  ModelTypeEnum,
+} from './declarations'
+import { deriveModelStatus } from './derive-model-status'
+
+const createCredentialState = (overrides: Partial<CredentialPanelState> = {}): CredentialPanelState => ({
+  variant: 'credits-active',
+  priority: 'credits',
+  supportsCredits: true,
+  showPrioritySwitcher: true,
+  hasCredentials: false,
+  isCreditsExhausted: false,
+  credentialName: undefined,
+  credits: 100,
+  ...overrides,
+})
+
+const createModelItem = (overrides: Partial<ModelItem> = {}): ModelItem => ({
+  model: 'text-embedding-3-large',
+  label: { en_US: 'Text Embedding 3 Large', zh_Hans: 'Text Embedding 3 Large' },
+  model_type: ModelTypeEnum.textEmbedding,
+  fetch_from: ConfigurationMethodEnum.predefinedModel,
+  status: ModelStatusEnum.active,
+  model_properties: {},
+  load_balancing_enabled: false,
+  ...overrides,
+})
+
+const createModelProvider = (): ModelProvider =>
+  ({ provider: 'openai' } as ModelProvider)
+
+const createModel = (overrides: Partial<Model> = {}): Model => ({
+  provider: 'openai',
+  icon_small: { en_US: '', zh_Hans: '' },
+  label: { en_US: 'OpenAI', zh_Hans: 'OpenAI' },
+  models: [createModelItem()],
+  status: ModelStatusEnum.active,
+  ...overrides,
+})
+
+describe('deriveModelStatus', () => {
+  it('should return empty when model id or provider name is missing', () => {
+    expect(
+      deriveModelStatus('', 'openai', createModelProvider(), createModelItem(), createCredentialState()),
+    ).toBe('empty')
+    expect(
+      deriveModelStatus('text-embedding-3-large', '', createModelProvider(), createModelItem(), createCredentialState()),
+    ).toBe('empty')
+  })
+
+  it('should return incompatible when provider plugin is missing', () => {
+    expect(
+      deriveModelStatus('text-embedding-3-large', 'openai', undefined, createModelItem(), createCredentialState()),
+    ).toBe('incompatible')
+  })
+
+  it('should return incompatible when model is missing from the provider list', () => {
+    expect(
+      deriveModelStatus('text-embedding-3-large', 'openai', createModel(), undefined, createCredentialState()),
+    ).toBe('incompatible')
+  })
+
+  it('should return configure-required when the model status is no-configure', () => {
+    expect(
+      deriveModelStatus('text-embedding-3-large', 'openai', createModelProvider(), createModelItem({ status: ModelStatusEnum.noConfigure }), createCredentialState()),
+    ).toBe('configure-required')
+  })
+
+  it('should return disabled when the model status is disabled', () => {
+    expect(
+      deriveModelStatus('text-embedding-3-large', 'openai', createModelProvider(), createModelItem({ status: ModelStatusEnum.disabled }), createCredentialState()),
+    ).toBe('disabled')
+  })
+
+  it('should return credits-exhausted when credential state takes priority', () => {
+    expect(
+      deriveModelStatus(
+        'text-embedding-3-large',
+        'openai',
+        createModelProvider(),
+        createModelItem(),
+        createCredentialState({ isCreditsExhausted: true }),
+      ),
+    ).toBe('credits-exhausted')
+  })
+
+  it('should return api-key-unavailable when credential state is api-unavailable', () => {
+    expect(
+      deriveModelStatus(
+        'text-embedding-3-large',
+        'openai',
+        createModelProvider(),
+        createModelItem(),
+        createCredentialState({ variant: 'api-unavailable', priority: 'apiKey' }),
+      ),
+    ).toBe('api-key-unavailable')
+  })
+
+  it('should return active when model and credential state are available', () => {
+    expect(
+      deriveModelStatus('text-embedding-3-large', 'openai', createModelProvider(), createModelItem(), createCredentialState()),
+    ).toBe('active')
+  })
+})

web/app/components/header/account-setting/model-provider-page/derive-model-status.ts

@@ -0,0 +1,65 @@
+import type { Model, ModelItem, ModelProvider } from './declarations'
+import type { CredentialPanelState } from './provider-added-card/use-credential-panel-state'
+import { ModelStatusEnum } from './declarations'
+
+export type DerivedModelStatus
+  = | 'empty'
+    | 'active'
+    | 'configure-required'
+    | 'credits-exhausted'
+    | 'api-key-unavailable'
+    | 'disabled'
+    | 'incompatible'
+
+export const DERIVED_MODEL_STATUS_BADGE_I18N: Partial<Record<DerivedModelStatus, string>> = {
+  'configure-required': 'modelProvider.selector.configureRequired',
+  'credits-exhausted': 'modelProvider.selector.creditsExhausted',
+  'api-key-unavailable': 'modelProvider.selector.apiKeyUnavailable',
+  'disabled': 'modelProvider.selector.disabled',
+  'incompatible': 'modelProvider.selector.incompatible',
+}
+
+export const DERIVED_MODEL_STATUS_TOOLTIP_I18N: Partial<Record<DerivedModelStatus, string>> = {
+  'credits-exhausted': 'modelProvider.selector.creditsExhaustedTip',
+  'api-key-unavailable': 'modelProvider.selector.apiKeyUnavailableTip',
+  'incompatible': 'modelProvider.selector.incompatibleTip',
+}
+
+export const deriveModelStatus = (
+  modelId: string | undefined,
+  providerName: string | undefined,
+  currentModelProvider: ModelProvider | Model | undefined,
+  currentModel: ModelItem | undefined,
+  credentialState: CredentialPanelState,
+): DerivedModelStatus => {
+  if (!modelId || !providerName)
+    return 'empty'
+
+  if (!currentModelProvider || !currentModel)
+    return 'incompatible'
+
+  if (credentialState.priority === 'credits'
+    && credentialState.supportsCredits
+    && credentialState.isCreditsExhausted) {
+    return 'credits-exhausted'
+  }
+
+  if (credentialState.variant === 'api-unavailable')
+    return 'api-key-unavailable'
+
+  switch (currentModel.status) {
+    case ModelStatusEnum.active:
+      return 'active'
+    case ModelStatusEnum.noConfigure:
+      return 'configure-required'
+    case ModelStatusEnum.quotaExceeded:
+      return 'credits-exhausted'
+    case ModelStatusEnum.credentialRemoved:
+      return 'api-key-unavailable'
+    case ModelStatusEnum.disabled:
+      return 'disabled'
+    case ModelStatusEnum.noPermission:
+    default:
+      return 'incompatible'
+  }
+}

web/app/components/header/account-setting/model-provider-page/hooks.spec.ts

@@ -9,6 +9,7 @@ import type {
 } from './declarations'
 import { act, renderHook, waitFor } from '@testing-library/react'
 import { useLocale } from '@/context/i18n'
+import { consoleQuery } from '@/service/client'
 import { fetchDefaultModal, fetchModelList, fetchModelProviderCredentials } from '@/service/common'
 import {
   ConfigurationMethodEnum,
@@ -23,6 +24,7 @@ import {
   useAnthropicBuyQuota,
   useCurrentProviderAndModel,
   useDefaultModel,
+  useInvalidateDefaultModel,
   useLanguage,
   useMarketplaceAllPlugins,
   useModelList,
@@ -36,7 +38,6 @@ import {
   useUpdateModelList,
   useUpdateModelProviders,
 } from './hooks'
-import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
 
 // Mock dependencies
 vi.mock('@tanstack/react-query', () => ({
@@ -78,14 +79,6 @@ vi.mock('@/context/modal-context', () => ({
   }),
 }))
 
-vi.mock('@/context/event-emitter', () => ({
-  useEventEmitterContextContext: vi.fn(() => ({
-    eventEmitter: {
-      emit: vi.fn(),
-    },
-  })),
-}))
-
 vi.mock('@/app/components/plugins/marketplace/hooks', () => ({
   useMarketplacePlugins: vi.fn(() => ({
     plugins: [],
@@ -99,12 +92,16 @@ vi.mock('@/app/components/plugins/marketplace/hooks', () => ({
   })),
 }))
 
+vi.mock('./atoms', () => ({
+  useExpandModelProviderList: vi.fn(() => vi.fn()),
+}))
+
 const { useQuery, useQueryClient } = await import('@tanstack/react-query')
 const { getPayUrl } = await import('@/service/common')
 const { useProviderContext } = await import('@/context/provider-context')
 const { useModalContextSelector } = await import('@/context/modal-context')
-const { useEventEmitterContextContext } = await import('@/context/event-emitter')
 const { useMarketplacePlugins, useMarketplacePluginsByCollectionId } = await import('@/app/components/plugins/marketplace/hooks')
+const { useExpandModelProviderList } = await import('./atoms')
 
 describe('hooks', () => {
   beforeEach(() => {
@@ -913,6 +910,38 @@ describe('hooks', () => {
     })
   })
 
+  describe('useInvalidateDefaultModel', () => {
+    it('should invalidate default model queries', () => {
+      const invalidateQueries = vi.fn()
+        ; (useQueryClient as Mock).mockReturnValue({ invalidateQueries })
+
+      const { result } = renderHook(() => useInvalidateDefaultModel())
+
+      act(() => {
+        result.current(ModelTypeEnum.textGeneration)
+      })
+
+      expect(invalidateQueries).toHaveBeenCalledWith({
+        queryKey: ['default-model', ModelTypeEnum.textGeneration],
+      })
+    })
+
+    it('should handle multiple model types', () => {
+      const invalidateQueries = vi.fn()
+        ; (useQueryClient as Mock).mockReturnValue({ invalidateQueries })
+
+      const { result } = renderHook(() => useInvalidateDefaultModel())
+
+      act(() => {
+        result.current(ModelTypeEnum.textGeneration)
+        result.current(ModelTypeEnum.textEmbedding)
+        result.current(ModelTypeEnum.rerank)
+      })
+
+      expect(invalidateQueries).toHaveBeenCalledTimes(3)
+    })
+  })
+
   describe('useAnthropicBuyQuota', () => {
     beforeEach(() => {
       Object.defineProperty(window, 'location', {
@@ -1275,39 +1304,52 @@ describe('hooks', () => {
 
     it('should refresh providers and model lists', () => {
       const invalidateQueries = vi.fn()
-      const emit = vi.fn()
 
         ; (useQueryClient as Mock).mockReturnValue({ invalidateQueries })
-      ; (useEventEmitterContextContext as Mock).mockReturnValue({
-        eventEmitter: { emit },
-      })
 
       const provider = createMockProvider()
+      const modelProviderModelListQueryKey = consoleQuery.modelProviders.models.queryKey({
+        input: {
+          params: {
+            provider: provider.provider,
+          },
+        },
+      })
       const { result } = renderHook(() => useRefreshModel())
 
       act(() => {
         result.current.handleRefreshModel(provider)
       })
 
+      expect(invalidateQueries).toHaveBeenCalledWith({
+        queryKey: modelProviderModelListQueryKey,
+        exact: true,
+        refetchType: 'none',
+      })
       expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: ['model-providers'] })
       expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: ['model-list', ModelTypeEnum.textGeneration] })
       expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: ['model-list', ModelTypeEnum.textEmbedding] })
     })
 
-    it('should emit event when refreshModelList is true and custom config is active', () => {
+    it('should expand target provider list when refreshModelList is true and custom config is active', () => {
       const invalidateQueries = vi.fn()
-      const emit = vi.fn()
+      const expandModelProviderList = vi.fn()
 
         ; (useQueryClient as Mock).mockReturnValue({ invalidateQueries })
-      ; (useEventEmitterContextContext as Mock).mockReturnValue({
-        eventEmitter: { emit },
-      })
+      ; (useExpandModelProviderList as Mock).mockReturnValue(expandModelProviderList)
 
       const provider = createMockProvider()
       const customFields: CustomConfigurationModelFixedFields = {
         __model_name: 'gpt-4',
         __model_type: ModelTypeEnum.textGeneration,
       }
+      const modelProviderModelListQueryKey = consoleQuery.modelProviders.models.queryKey({
+        input: {
+          params: {
+            provider: provider.provider,
+          },
+        },
+      })
 
       const { result } = renderHook(() => useRefreshModel())
 
@@ -1315,23 +1357,30 @@ describe('hooks', () => {
         result.current.handleRefreshModel(provider, customFields, true)
       })
 
-      expect(emit).toHaveBeenCalledWith({
-        type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
-        payload: 'openai',
+      expect(expandModelProviderList).toHaveBeenCalledWith('openai')
+      expect(invalidateQueries).toHaveBeenCalledWith({
+        queryKey: modelProviderModelListQueryKey,
+        exact: true,
+        refetchType: 'active',
       })
       expect(invalidateQueries).toHaveBeenCalledWith({ queryKey: ['model-list', ModelTypeEnum.textGeneration] })
     })
 
-    it('should not emit event when custom config is not active', () => {
+    it('should not expand provider list when custom config is not active', () => {
       const invalidateQueries = vi.fn()
-      const emit = vi.fn()
+      const expandModelProviderList = vi.fn()
 
         ; (useQueryClient as Mock).mockReturnValue({ invalidateQueries })
-      ; (useEventEmitterContextContext as Mock).mockReturnValue({
-        eventEmitter: { emit },
-      })
+      ; (useExpandModelProviderList as Mock).mockReturnValue(expandModelProviderList)
 
       const provider = { ...createMockProvider(), custom_configuration: { status: CustomConfigurationStatusEnum.noConfigure } }
+      const modelProviderModelListQueryKey = consoleQuery.modelProviders.models.queryKey({
+        input: {
+          params: {
+            provider: provider.provider,
+          },
+        },
+      })
 
       const { result } = renderHook(() => useRefreshModel())
 
@@ -1339,17 +1388,43 @@ describe('hooks', () => {
         result.current.handleRefreshModel(provider, undefined, true)
       })
 
-      expect(emit).not.toHaveBeenCalled()
+      expect(expandModelProviderList).not.toHaveBeenCalled()
+      expect(invalidateQueries).not.toHaveBeenCalledWith({
+        queryKey: modelProviderModelListQueryKey,
+        exact: true,
+        refetchType: 'active',
+      })
     })
 
-    it('should emit event and invalidate all supported model types when __model_type is undefined', () => {
+    it('should refetch active model provider list when custom refresh callback is absent', () => {
+      const invalidateQueries = vi.fn()
+      ; (useQueryClient as Mock).mockReturnValue({ invalidateQueries })
+
+      const provider = createMockProvider()
+      const modelProviderModelListQueryKey = consoleQuery.modelProviders.models.queryKey({
+        input: {
+          params: {
+            provider: provider.provider,
+          },
+        },
+      })
+      const { result } = renderHook(() => useRefreshModel())
+
+      act(() => {
+        result.current.handleRefreshModel(provider, undefined, true)
+      })
+
+      expect(invalidateQueries).toHaveBeenCalledWith({
+        queryKey: modelProviderModelListQueryKey,
+        exact: true,
+        refetchType: 'active',
+      })
+    })
+
+    it('should invalidate all supported model types when __model_type is undefined', () => {
       const invalidateQueries = vi.fn()
-      const emit = vi.fn()
 
         ; (useQueryClient as Mock).mockReturnValue({ invalidateQueries })
-      ; (useEventEmitterContextContext as Mock).mockReturnValue({
-        eventEmitter: { emit },
-      })
 
       const provider = createMockProvider()
       const customFields = { __model_name: 'my-model', __model_type: undefined } as unknown as CustomConfigurationModelFixedFields
@@ -1360,11 +1435,7 @@ describe('hooks', () => {
         result.current.handleRefreshModel(provider, customFields, true)
       })
 
-      expect(emit).toHaveBeenCalledWith({
-        type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
-        payload: 'openai',
-      })
-      // When __model_type is undefined, all supported model types are invalidated
+      // When __model_type is undefined, all supported model types are invalidated.
       const modelListCalls = invalidateQueries.mock.calls.filter(
         call => call[0]?.queryKey?.[0] === 'model-list',
       )
@@ -1375,9 +1446,6 @@ describe('hooks', () => {
       const invalidateQueries = vi.fn()
 
         ; (useQueryClient as Mock).mockReturnValue({ invalidateQueries })
-      ; (useEventEmitterContextContext as Mock).mockReturnValue({
-        eventEmitter: { emit: vi.fn() },
-      })
 
       const provider = {
         ...createMockProvider(),

web/app/components/header/account-setting/model-provider-page/hooks.ts

@@ -21,10 +21,10 @@ import {
   useMarketplacePluginsByCollectionId,
 } from '@/app/components/plugins/marketplace/hooks'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
-import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useLocale } from '@/context/i18n'
 import { useModalContextSelector } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
+import { consoleQuery } from '@/service/client'
 import {
   fetchDefaultModal,
   fetchModelList,
@@ -32,12 +32,12 @@ import {
   getPayUrl,
 } from '@/service/common'
 import { commonQueryKeys } from '@/service/use-common'
+import { useExpandModelProviderList } from './atoms'
 import {
   ConfigurationMethodEnum,
   CustomConfigurationStatusEnum,
   ModelStatusEnum,
 } from './declarations'
-import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './provider-added-card'
 
 type UseDefaultModelAndModelList = (
   defaultModel: DefaultModelResponse | undefined,
@@ -57,15 +57,21 @@ export const useSystemDefaultModelAndModelList: UseDefaultModelAndModelList = (
 
     return currentDefaultModel
   }, [defaultModel, modelList])
+  const currentDefaultModelKey = currentDefaultModel
+    ? `${currentDefaultModel.provider}:${currentDefaultModel.model}`
+    : ''
   const [defaultModelState, setDefaultModelState] = useState<DefaultModel | undefined>(currentDefaultModel)
-  const handleDefaultModelChange = useCallback((model: DefaultModel) => {
-    setDefaultModelState(model)
-  }, [])
-  useEffect(() => {
-    setDefaultModelState(currentDefaultModel)
-  }, [currentDefaultModel])
+  const [defaultModelSourceKey, setDefaultModelSourceKey] = useState(currentDefaultModelKey)
+  const selectedDefaultModel = defaultModelSourceKey === currentDefaultModelKey
+    ? defaultModelState
+    : currentDefaultModel
 
-  return [defaultModelState, handleDefaultModelChange]
+  const handleDefaultModelChange = useCallback((model: DefaultModel) => {
+    setDefaultModelSourceKey(currentDefaultModelKey)
+    setDefaultModelState(model)
+  }, [currentDefaultModelKey])
+
+  return [selectedDefaultModel, handleDefaultModelChange]
 }
 
 export const useLanguage = () => {
@@ -116,7 +122,7 @@ export const useProviderCredentialsAndLoadBalancing = (
     predefinedFormSchemasValue?.credentials,
   ])
 
-  const mutate = useMemo(() => () => {
+  const mutate = useCallback(() => {
     if (predefinedEnabled)
       queryClient.invalidateQueries({ queryKey: ['model-providers', 'credentials', provider, credentialId] })
     if (customEnabled)
@@ -222,6 +228,14 @@ export const useUpdateModelList = () => {
   return updateModelList
 }
 
+export const useInvalidateDefaultModel = () => {
+  const queryClient = useQueryClient()
+
+  return useCallback((type: ModelTypeEnum) => {
+    queryClient.invalidateQueries({ queryKey: commonQueryKeys.defaultModel(type) })
+  }, [queryClient])
+}
+
 export const useAnthropicBuyQuota = () => {
   const [loading, setLoading] = useState(false)
 
@@ -314,7 +328,8 @@ export const useMarketplaceAllPlugins = (providers: ModelProvider[], searchText:
 }
 
 export const useRefreshModel = () => {
-  const { eventEmitter } = useEventEmitterContextContext()
+  const expandModelProviderList = useExpandModelProviderList()
+  const queryClient = useQueryClient()
   const updateModelProviders = useUpdateModelProviders()
   const updateModelList = useUpdateModelList()
   const handleRefreshModel = useCallback((
@@ -322,6 +337,19 @@ export const useRefreshModel = () => {
     CustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields,
     refreshModelList?: boolean,
   ) => {
+    const modelProviderModelListQueryKey = consoleQuery.modelProviders.models.queryKey({
+      input: {
+        params: {
+          provider: provider.provider,
+        },
+      },
+    })
+    queryClient.invalidateQueries({
+      queryKey: modelProviderModelListQueryKey,
+      exact: true,
+      refetchType: 'none',
+    })
+
     updateModelProviders()
 
     provider.supported_model_types.forEach((type) => {
@@ -329,15 +357,17 @@ export const useRefreshModel = () => {
     })
 
     if (refreshModelList && provider.custom_configuration.status === CustomConfigurationStatusEnum.active) {
-      eventEmitter?.emit({
-        type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
-        payload: provider.provider,
-      } as any)
+      expandModelProviderList(provider.provider)
+      queryClient.invalidateQueries({
+        queryKey: modelProviderModelListQueryKey,
+        exact: true,
+        refetchType: 'active',
+      })
 
       if (CustomConfigurationModelFixedFields?.__model_type)
         updateModelList(CustomConfigurationModelFixedFields.__model_type)
     }
-  }, [eventEmitter, updateModelList, updateModelProviders])
+  }, [expandModelProviderList, queryClient, updateModelList, updateModelProviders])
 
   return {
     handleRefreshModel,

web/app/components/header/account-setting/model-provider-page/index.spec.tsx

@@ -7,16 +7,7 @@ import {
 } from './declarations'
 import ModelProviderPage from './index'
 
-vi.mock('@/context/app-context', () => ({
-  useAppContext: () => ({
-    mutateCurrentWorkspace: vi.fn(),
-    isValidatingCurrentWorkspace: false,
-  }),
-}))
-
-const mockGlobalState = {
-  systemFeatures: { enable_marketplace: true },
-}
+let mockEnableMarketplace = true
 
 const mockQuotaConfig = {
   quota_type: CurrentSystemQuotaTypeEnum.free,
@@ -28,7 +19,11 @@ const mockQuotaConfig = {
 }
 
 vi.mock('@/context/global-public-context', () => ({
-  useGlobalPublicStore: (selector: (s: { systemFeatures: { enable_marketplace: boolean } }) => unknown) => selector(mockGlobalState),
+  useSystemFeaturesQuery: () => ({
+    data: {
+      enable_marketplace: mockEnableMarketplace,
+    },
+  }),
 }))
 
 const mockProviders = [
@@ -60,21 +55,16 @@ vi.mock('@/context/provider-context', () => ({
   }),
 }))
 
-type MockDefaultModelData = {
-  model: string
-  provider?: { provider: string }
-} | null
-
-const mockDefaultModelState: {
-  data: MockDefaultModelData
-  isLoading: boolean
-} = {
-  data: null,
-  isLoading: false,
+const mockDefaultModels: Record<string, { data: unknown, isLoading: boolean }> = {
+  'llm': { data: null, isLoading: false },
+  'text-embedding': { data: null, isLoading: false },
+  'rerank': { data: null, isLoading: false },
+  'speech2text': { data: null, isLoading: false },
+  'tts': { data: null, isLoading: false },
 }
 
 vi.mock('./hooks', () => ({
-  useDefaultModel: () => mockDefaultModelState,
+  useDefaultModel: (type: string) => mockDefaultModels[type] ?? { data: null, isLoading: false },
 }))
 
 vi.mock('./install-from-marketplace', () => ({
@@ -93,13 +83,31 @@ vi.mock('./system-model-selector', () => ({
   default: () => <div data-testid="system-model-selector" />,
 }))
 
+vi.mock('@tanstack/react-query', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@tanstack/react-query')>()
+  return {
+    ...actual,
+    useQuery: () => ({ data: undefined }),
+  }
+})
+
+vi.mock('@/service/client', () => ({
+  consoleQuery: {
+    plugins: {
+      checkInstalled: { queryOptions: () => ({}) },
+      latestVersions: { queryOptions: () => ({}) },
+    },
+  },
+}))
+
 describe('ModelProviderPage', () => {
   beforeEach(() => {
     vi.useFakeTimers()
     vi.clearAllMocks()
-    mockGlobalState.systemFeatures.enable_marketplace = true
-    mockDefaultModelState.data = null
-    mockDefaultModelState.isLoading = false
+    mockEnableMarketplace = true
+    Object.keys(mockDefaultModels).forEach((key) => {
+      mockDefaultModels[key] = { data: null, isLoading: false }
+    })
     mockProviders.splice(0, mockProviders.length, {
       provider: 'openai',
       label: { en_US: 'OpenAI' },
@@ -157,13 +165,76 @@ describe('ModelProviderPage', () => {
   })
 
   it('should hide marketplace section when marketplace feature is disabled', () => {
-    mockGlobalState.systemFeatures.enable_marketplace = false
+    mockEnableMarketplace = false
 
     render(<ModelProviderPage searchText="" />)
 
     expect(screen.queryByTestId('install-from-marketplace')).not.toBeInTheDocument()
   })
 
+  describe('system model config status', () => {
+    it('should not show top warning when no configured providers exist (empty state card handles it)', () => {
+      mockProviders.splice(0, mockProviders.length, {
+        provider: 'anthropic',
+        label: { en_US: 'Anthropic' },
+        custom_configuration: { status: CustomConfigurationStatusEnum.noConfigure },
+        system_configuration: {
+          enabled: false,
+          current_quota_type: CurrentSystemQuotaTypeEnum.free,
+          quota_configurations: [mockQuotaConfig],
+        },
+      })
+
+      render(<ModelProviderPage searchText="" />)
+      expect(screen.queryByText('common.modelProvider.noneConfigured')).not.toBeInTheDocument()
+      expect(screen.queryByText('common.modelProvider.notConfigured')).not.toBeInTheDocument()
+      expect(screen.getByText('common.modelProvider.emptyProviderTitle')).toBeInTheDocument()
+    })
+
+    it('should show none-configured warning when providers exist but no default models set', () => {
+      render(<ModelProviderPage searchText="" />)
+      expect(screen.getByText('common.modelProvider.noneConfigured')).toBeInTheDocument()
+    })
+
+    it('should show partially-configured warning when some default models are set', () => {
+      mockDefaultModels.llm = {
+        data: { model: 'gpt-4', model_type: 'llm', provider: { provider: 'openai', icon_small: { en_US: '' } } },
+        isLoading: false,
+      }
+
+      render(<ModelProviderPage searchText="" />)
+      expect(screen.getByText('common.modelProvider.notConfigured')).toBeInTheDocument()
+    })
+
+    it('should not show warning when all default models are configured', () => {
+      const makeModel = (model: string, type: string) => ({
+        data: { model, model_type: type, provider: { provider: 'openai', icon_small: { en_US: '' } } },
+        isLoading: false,
+      })
+      mockDefaultModels.llm = makeModel('gpt-4', 'llm')
+      mockDefaultModels['text-embedding'] = makeModel('text-embedding-3', 'text-embedding')
+      mockDefaultModels.rerank = makeModel('rerank-v3', 'rerank')
+      mockDefaultModels.speech2text = makeModel('whisper-1', 'speech2text')
+      mockDefaultModels.tts = makeModel('tts-1', 'tts')
+
+      render(<ModelProviderPage searchText="" />)
+      expect(screen.queryByText('common.modelProvider.noProviderInstalled')).not.toBeInTheDocument()
+      expect(screen.queryByText('common.modelProvider.noneConfigured')).not.toBeInTheDocument()
+      expect(screen.queryByText('common.modelProvider.notConfigured')).not.toBeInTheDocument()
+    })
+
+    it('should not show warning while loading', () => {
+      Object.keys(mockDefaultModels).forEach((key) => {
+        mockDefaultModels[key] = { data: null, isLoading: true }
+      })
+
+      render(<ModelProviderPage searchText="" />)
+      expect(screen.queryByText('common.modelProvider.noProviderInstalled')).not.toBeInTheDocument()
+      expect(screen.queryByText('common.modelProvider.noneConfigured')).not.toBeInTheDocument()
+      expect(screen.queryByText('common.modelProvider.notConfigured')).not.toBeInTheDocument()
+    })
+  })
+
   it('should prioritize fixed providers in visible order', () => {
     mockProviders.splice(0, mockProviders.length, {
       provider: 'zeta-provider',
@@ -204,129 +275,4 @@ describe('ModelProviderPage', () => {
     ])
     expect(screen.queryByText('common.modelProvider.toBeConfigured')).not.toBeInTheDocument()
   })
-
-  it('should show not configured alert when all default models are absent', () => {
-    mockDefaultModelState.data = null
-    mockDefaultModelState.isLoading = false
-
-    render(<ModelProviderPage searchText="" />)
-
-    expect(screen.getByText('common.modelProvider.notConfigured')).toBeInTheDocument()
-  })
-
-  it('should not show not configured alert when default model is loading', () => {
-    mockDefaultModelState.data = null
-    mockDefaultModelState.isLoading = true
-
-    render(<ModelProviderPage searchText="" />)
-
-    expect(screen.queryByText('common.modelProvider.notConfigured')).not.toBeInTheDocument()
-  })
-
-  it('should filter providers by label text', () => {
-    render(<ModelProviderPage searchText="OpenAI" />)
-    act(() => {
-      vi.advanceTimersByTime(600)
-    })
-    expect(screen.getByText('openai')).toBeInTheDocument()
-    expect(screen.queryByText('anthropic')).not.toBeInTheDocument()
-  })
-
-  it('should classify system-enabled providers with matching quota as configured', () => {
-    mockProviders.splice(0, mockProviders.length, {
-      provider: 'sys-provider',
-      label: { en_US: 'System Provider' },
-      custom_configuration: { status: CustomConfigurationStatusEnum.noConfigure },
-      system_configuration: {
-        enabled: true,
-        current_quota_type: CurrentSystemQuotaTypeEnum.free,
-        quota_configurations: [mockQuotaConfig],
-      },
-    })
-
-    render(<ModelProviderPage searchText="" />)
-
-    expect(screen.getByText('sys-provider')).toBeInTheDocument()
-    expect(screen.queryByText('common.modelProvider.toBeConfigured')).not.toBeInTheDocument()
-  })
-
-  it('should classify system-enabled provider with no matching quota as not configured', () => {
-    mockProviders.splice(0, mockProviders.length, {
-      provider: 'sys-no-quota',
-      label: { en_US: 'System No Quota' },
-      custom_configuration: { status: CustomConfigurationStatusEnum.noConfigure },
-      system_configuration: {
-        enabled: true,
-        current_quota_type: CurrentSystemQuotaTypeEnum.free,
-        quota_configurations: [],
-      },
-    })
-
-    render(<ModelProviderPage searchText="" />)
-
-    expect(screen.getByText('sys-no-quota')).toBeInTheDocument()
-    expect(screen.getByText('common.modelProvider.toBeConfigured')).toBeInTheDocument()
-  })
-
-  it('should preserve order of two non-fixed providers (sort returns 0)', () => {
-    mockProviders.splice(0, mockProviders.length, {
-      provider: 'alpha-provider',
-      label: { en_US: 'Alpha Provider' },
-      custom_configuration: { status: CustomConfigurationStatusEnum.active },
-      system_configuration: {
-        enabled: false,
-        current_quota_type: CurrentSystemQuotaTypeEnum.free,
-        quota_configurations: [mockQuotaConfig],
-      },
-    }, {
-      provider: 'beta-provider',
-      label: { en_US: 'Beta Provider' },
-      custom_configuration: { status: CustomConfigurationStatusEnum.active },
-      system_configuration: {
-        enabled: false,
-        current_quota_type: CurrentSystemQuotaTypeEnum.free,
-        quota_configurations: [mockQuotaConfig],
-      },
-    })
-
-    render(<ModelProviderPage searchText="" />)
-
-    const renderedProviders = screen.getAllByTestId('provider-card').map(item => item.textContent)
-    expect(renderedProviders).toEqual(['alpha-provider', 'beta-provider'])
-  })
-
-  it('should not show not configured alert when shared default model mock has data', () => {
-    mockDefaultModelState.data = { model: 'embed-model' }
-
-    render(<ModelProviderPage searchText="" />)
-
-    expect(screen.queryByText('common.modelProvider.notConfigured')).not.toBeInTheDocument()
-  })
-
-  it('should not show not configured alert when rerankDefaultModel has data', () => {
-    mockDefaultModelState.data = { model: 'rerank-model', provider: { provider: 'cohere' } }
-    mockDefaultModelState.isLoading = false
-
-    render(<ModelProviderPage searchText="" />)
-
-    expect(screen.queryByText('common.modelProvider.notConfigured')).not.toBeInTheDocument()
-  })
-
-  it('should not show not configured alert when ttsDefaultModel has data', () => {
-    mockDefaultModelState.data = { model: 'tts-model', provider: { provider: 'openai' } }
-    mockDefaultModelState.isLoading = false
-
-    render(<ModelProviderPage searchText="" />)
-
-    expect(screen.queryByText('common.modelProvider.notConfigured')).not.toBeInTheDocument()
-  })
-
-  it('should not show not configured alert when speech2textDefaultModel has data', () => {
-    mockDefaultModelState.data = { model: 'whisper', provider: { provider: 'openai' } }
-    mockDefaultModelState.isLoading = false
-
-    render(<ModelProviderPage searchText="" />)
-
-    expect(screen.queryByText('common.modelProvider.notConfigured')).not.toBeInTheDocument()
-  })
 })

web/app/components/header/account-setting/model-provider-page/index.tsx

@@ -1,17 +1,16 @@
 import type {
   ModelProvider,
 } from './declarations'
-import {
-  RiAlertFill,
-  RiBrainLine,
-} from '@remixicon/react'
+import type { PluginDetail } from '@/app/components/plugins/types'
+import { useQuery } from '@tanstack/react-query'
 import { useDebounce } from 'ahooks'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { usePluginsWithLatestVersion } from '@/app/components/plugins/hooks'
 import { IS_CLOUD_EDITION } from '@/config'
-import { useAppContext } from '@/context/app-context'
-import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useSystemFeaturesQuery } from '@/context/global-public-context'
 import { useProviderContext } from '@/context/provider-context'
+import { consoleQuery } from '@/service/client'
 import { cn } from '@/utils/classnames'
 import {
   CustomConfigurationStatusEnum,
@@ -24,6 +23,9 @@ import InstallFromMarketplace from './install-from-marketplace'
 import ProviderAddedCard from './provider-added-card'
 import QuotaPanel from './provider-added-card/quota-panel'
 import SystemModelSelector from './system-model-selector'
+import { providerToPluginId } from './utils'
+
+type SystemModelConfigStatus = 'no-provider' | 'none-configured' | 'partially-configured' | 'fully-configured'
 
 type Props = {
   searchText: string
@@ -34,20 +36,35 @@ const FixedModelProvider = ['langgenius/openai/openai', 'langgenius/anthropic/an
 const ModelProviderPage = ({ searchText }: Props) => {
   const debouncedSearchText = useDebounce(searchText, { wait: 500 })
   const { t } = useTranslation()
-  const { mutateCurrentWorkspace, isValidatingCurrentWorkspace } = useAppContext()
   const { data: textGenerationDefaultModel, isLoading: isTextGenerationDefaultModelLoading } = useDefaultModel(ModelTypeEnum.textGeneration)
   const { data: embeddingsDefaultModel, isLoading: isEmbeddingsDefaultModelLoading } = useDefaultModel(ModelTypeEnum.textEmbedding)
   const { data: rerankDefaultModel, isLoading: isRerankDefaultModelLoading } = useDefaultModel(ModelTypeEnum.rerank)
   const { data: speech2textDefaultModel, isLoading: isSpeech2textDefaultModelLoading } = useDefaultModel(ModelTypeEnum.speech2text)
   const { data: ttsDefaultModel, isLoading: isTTSDefaultModelLoading } = useDefaultModel(ModelTypeEnum.tts)
   const { modelProviders: providers } = useProviderContext()
-  const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
+  const { data: systemFeatures } = useSystemFeaturesQuery()
+
+  const allPluginIds = useMemo(() => {
+    return [...new Set(providers.map(p => providerToPluginId(p.provider)).filter(Boolean))]
+  }, [providers])
+  const { data: installedPlugins } = useQuery(consoleQuery.plugins.checkInstalled.queryOptions({
+    input: { body: { plugin_ids: allPluginIds } },
+    enabled: allPluginIds.length > 0,
+    staleTime: 0,
+  }))
+  const enrichedPlugins = usePluginsWithLatestVersion(installedPlugins?.plugins)
+  const pluginDetailMap = useMemo(() => {
+    const map = new Map<string, PluginDetail>()
+    for (const plugin of enrichedPlugins)
+      map.set(plugin.plugin_id, plugin)
+    return map
+  }, [enrichedPlugins])
+  const enableMarketplace = systemFeatures?.enable_marketplace ?? false
   const isDefaultModelLoading = isTextGenerationDefaultModelLoading
     || isEmbeddingsDefaultModelLoading
     || isRerankDefaultModelLoading
     || isSpeech2textDefaultModelLoading
     || isTTSDefaultModelLoading
-  const defaultModelNotConfigured = !isDefaultModelLoading && !textGenerationDefaultModel && !embeddingsDefaultModel && !speech2textDefaultModel && !rerankDefaultModel && !ttsDefaultModel
   const [configuredProviders, notConfiguredProviders] = useMemo(() => {
     const configuredProviders: ModelProvider[] = []
     const notConfiguredProviders: ModelProvider[] = []
@@ -57,7 +74,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
         provider.custom_configuration.status === CustomConfigurationStatusEnum.active
         || (
           provider.system_configuration.enabled === true
-          && provider.system_configuration.quota_configurations.find(item => item.quota_type === provider.system_configuration.current_quota_type)
+          && provider.system_configuration.quota_configurations.some(item => item.quota_type === provider.system_configuration.current_quota_type)
         )
       ) {
         configuredProviders.push(provider)
@@ -79,6 +96,26 @@ const ModelProviderPage = ({ searchText }: Props) => {
 
     return [configuredProviders, notConfiguredProviders]
   }, [providers])
+
+  const systemModelConfigStatus: SystemModelConfigStatus = useMemo(() => {
+    const defaultModels = [textGenerationDefaultModel, embeddingsDefaultModel, rerankDefaultModel, speech2textDefaultModel, ttsDefaultModel]
+    const configuredCount = defaultModels.filter(Boolean).length
+    if (configuredCount === 0 && configuredProviders.length === 0)
+      return 'no-provider'
+    if (configuredCount === 0)
+      return 'none-configured'
+    if (configuredCount < defaultModels.length)
+      return 'partially-configured'
+    return 'fully-configured'
+  }, [configuredProviders, textGenerationDefaultModel, embeddingsDefaultModel, rerankDefaultModel, speech2textDefaultModel, ttsDefaultModel])
+  const warningTextKey
+    = systemModelConfigStatus === 'none-configured'
+      ? 'modelProvider.noneConfigured'
+      : systemModelConfigStatus === 'partially-configured'
+        ? 'modelProvider.notConfigured'
+        : null
+  const showWarning = !isDefaultModelLoading && !!warningTextKey
+
   const [filteredConfiguredProviders, filteredNotConfiguredProviders] = useMemo(() => {
     const filteredConfiguredProviders = configuredProviders.filter(
       provider => provider.provider.toLowerCase().includes(debouncedSearchText.toLowerCase())
@@ -92,28 +129,24 @@ const ModelProviderPage = ({ searchText }: Props) => {
     return [filteredConfiguredProviders, filteredNotConfiguredProviders]
   }, [configuredProviders, debouncedSearchText, notConfiguredProviders])
 
-  useEffect(() => {
-    mutateCurrentWorkspace()
-  }, [mutateCurrentWorkspace])
-
   return (
     <div className="relative -mt-2 pt-1">
       <div className={cn('mb-2 flex items-center')}>
         <div className="grow text-text-primary system-md-semibold">{t('modelProvider.models', { ns: 'common' })}</div>
         <div className={cn(
           'relative flex shrink-0 items-center justify-end gap-2 rounded-lg border border-transparent p-px',
-          defaultModelNotConfigured && 'border-components-panel-border bg-components-panel-bg-blur pl-2 shadow-xs',
+          showWarning && 'border-components-panel-border bg-components-panel-bg-blur pl-2 shadow-xs',
         )}
         >
-          {defaultModelNotConfigured && <div className="absolute bottom-0 left-0 right-0 top-0 opacity-40" style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
-          {defaultModelNotConfigured && (
+          {showWarning && <div className="absolute bottom-0 left-0 right-0 top-0 opacity-40" style={{ background: 'linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%)' }} />}
+          {showWarning && (
             <div className="flex items-center gap-1 text-text-primary system-xs-medium">
-              <RiAlertFill className="h-4 w-4 text-text-warning-secondary" />
-              <span className="max-w-[460px] truncate" title={t('modelProvider.notConfigured', { ns: 'common' })}>{t('modelProvider.notConfigured', { ns: 'common' })}</span>
+              <span className="i-ri-alert-fill h-4 w-4 text-text-warning-secondary" />
+              <span className="max-w-[460px] truncate" title={t(warningTextKey, { ns: 'common' })}>{t(warningTextKey, { ns: 'common' })}</span>
             </div>
           )}
           <SystemModelSelector
-            notConfigured={defaultModelNotConfigured}
+            notConfigured={showWarning}
             textGenerationDefaultModel={textGenerationDefaultModel}
             embeddingsDefaultModel={embeddingsDefaultModel}
             rerankDefaultModel={rerankDefaultModel}
@@ -123,11 +156,11 @@ const ModelProviderPage = ({ searchText }: Props) => {
           />
         </div>
       </div>
-      {IS_CLOUD_EDITION && <QuotaPanel providers={providers} isLoading={isValidatingCurrentWorkspace} />}
+      {IS_CLOUD_EDITION && <QuotaPanel providers={providers} />}
       {!filteredConfiguredProviders?.length && (
         <div className="mb-2 rounded-[10px] bg-workflow-process-bg p-4">
           <div className="flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur">
-            <RiBrainLine className="h-5 w-5 text-text-primary" />
+            <span className="i-ri-brain-line h-5 w-5 text-text-primary" />
           </div>
           <div className="mt-2 text-text-secondary system-sm-medium">{t('modelProvider.emptyProviderTitle', { ns: 'common' })}</div>
           <div className="mt-1 text-text-tertiary system-xs-regular">{t('modelProvider.emptyProviderTip', { ns: 'common' })}</div>
@@ -139,6 +172,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
             <ProviderAddedCard
               key={provider.provider}
               provider={provider}
+              pluginDetail={pluginDetailMap.get(providerToPluginId(provider.provider))}
             />
           ))}
         </div>
@@ -152,13 +186,14 @@ const ModelProviderPage = ({ searchText }: Props) => {
                 notConfigured
                 key={provider.provider}
                 provider={provider}
+                pluginDetail={pluginDetailMap.get(providerToPluginId(provider.provider))}
               />
             ))}
           </div>
         </>
       )}
       {
-        enable_marketplace && (
+        enableMarketplace && (
           <InstallFromMarketplace
             providers={providers}
             searchText={searchText}

web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx

@@ -2,10 +2,6 @@ import type {
   ModelProvider,
 } from './declarations'
 import type { Plugin } from '@/app/components/plugins/types'
-import {
-  RiArrowDownSLine,
-  RiArrowRightUpLine,
-} from '@remixicon/react'
 import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useCallback, useState } from 'react'
@@ -47,15 +43,25 @@ const InstallFromMarketplace = ({
     <div className="mb-2">
       <Divider className="!mt-4 h-px" />
       <div className="flex items-center justify-between">
-        <div className="system-md-semibold flex cursor-pointer items-center gap-1 text-text-primary" onClick={() => setCollapse(!collapse)}>
-          <RiArrowDownSLine className={cn('h-4 w-4', collapse && '-rotate-90')} />
+        <button
+          type="button"
+          className="flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-left text-text-primary system-md-semibold"
+          onClick={() => setCollapse(prev => !prev)}
+          aria-expanded={!collapse}
+        >
+          <span className={cn('i-ri-arrow-down-s-line h-4 w-4', collapse && '-rotate-90')} />
           {t('modelProvider.installProvider', { ns: 'common' })}
-        </div>
+        </button>
         <div className="mb-2 flex items-center pt-2">
-          <span className="system-sm-regular pr-1 text-text-tertiary">{t('modelProvider.discoverMore', { ns: 'common' })}</span>
-          <Link target="_blank" href={getMarketplaceUrl('', { theme })} className="system-sm-medium inline-flex items-center text-text-accent">
+          <span className="pr-1 text-text-tertiary system-sm-regular">{t('modelProvider.discoverMore', { ns: 'common' })}</span>
+          <Link
+            target="_blank"
+            rel="noopener noreferrer"
+            href={getMarketplaceUrl('', { theme })}
+            className="inline-flex items-center text-text-accent system-sm-medium"
+          >
             {t('marketplace.difyMarketplace', { ns: 'plugin' })}
-            <RiArrowRightUpLine className="h-4 w-4" />
+            <span className="i-ri-arrow-right-up-line h-4 w-4" />
           </Link>
         </div>
       </div>

web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.spec.tsx

@@ -2,12 +2,6 @@ import type { Credential } from '../../declarations'
 import { fireEvent, render, screen } from '@testing-library/react'
 import CredentialItem from './credential-item'
 
-vi.mock('@remixicon/react', () => ({
-  RiCheckLine: () => <div data-testid="check-icon" />,
-  RiDeleteBinLine: () => <div data-testid="delete-icon" />,
-  RiEqualizer2Line: () => <div data-testid="edit-icon" />,
-}))
-
 vi.mock('@/app/components/header/indicator', () => ({
   default: () => <div data-testid="indicator" />,
 }))
@@ -61,8 +55,12 @@ describe('CredentialItem', () => {
 
     render(<CredentialItem credential={credential} onEdit={onEdit} onDelete={onDelete} />)
 
-    fireEvent.click(screen.getByTestId('edit-icon').closest('button') as HTMLButtonElement)
-    fireEvent.click(screen.getByTestId('delete-icon').closest('button') as HTMLButtonElement)
+    const buttons = screen.getAllByRole('button')
+    const editButton = buttons.find(b => b.querySelector('.i-ri-equalizer-2-line'))!
+    const deleteButton = buttons.find(b => b.querySelector('.i-ri-delete-bin-line'))!
+
+    fireEvent.click(editButton)
+    fireEvent.click(deleteButton)
 
     expect(onEdit).toHaveBeenCalledWith(credential)
     expect(onDelete).toHaveBeenCalledWith(credential)
@@ -81,7 +79,10 @@ describe('CredentialItem', () => {
       />,
     )
 
-    fireEvent.click(screen.getByTestId('delete-icon').closest('button') as HTMLButtonElement)
+    const deleteButton = screen.getAllByRole('button')
+      .find(b => b.querySelector('.i-ri-delete-bin-line'))!
+
+    fireEvent.click(deleteButton)
 
     expect(onDelete).not.toHaveBeenCalled()
   })
@@ -121,14 +122,16 @@ describe('CredentialItem', () => {
 
     render(<CredentialItem credential={credential} disabled onDelete={onDelete} />)
 
-    fireEvent.click(screen.getByTestId('delete-icon').closest('button') as HTMLButtonElement)
+    const deleteButton = screen.getAllByRole('button')
+      .find(b => b.querySelector('.i-ri-delete-bin-line'))!
+    fireEvent.click(deleteButton)
 
     expect(onDelete).not.toHaveBeenCalled()
   })
 
   // showSelectedIcon=true: check icon area is always rendered; check icon only appears when IDs match
   it('should render check icon area when showSelectedIcon=true and selectedCredentialId matches', () => {
-    render(
+    const { container } = render(
       <CredentialItem
         credential={credential}
         showSelectedIcon
@@ -136,7 +139,7 @@ describe('CredentialItem', () => {
       />,
     )
 
-    expect(screen.getByTestId('check-icon')).toBeInTheDocument()
+    expect(container.querySelector('.i-ri-check-line')).toBeInTheDocument()
   })
 
   it('should not render check icon when showSelectedIcon=true but selectedCredentialId does not match', () => {

web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx

@@ -1,9 +1,4 @@
 import type { Credential } from '../../declarations'
-import {
-  RiCheckLine,
-  RiDeleteBinLine,
-  RiEqualizer2Line,
-} from '@remixicon/react'
 import {
   memo,
   useMemo,
@@ -11,7 +6,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
-import Tooltip from '@/app/components/base/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import Indicator from '@/app/components/header/indicator'
 import { cn } from '@/utils/classnames'
 
@@ -56,7 +51,7 @@ const CredentialItem = ({
       key={credential.credential_id}
       className={cn(
         'group flex h-8 items-center rounded-lg p-1 hover:bg-state-base-hover',
-        (disabled || credential.not_allowed_to_use) && 'cursor-not-allowed opacity-50',
+        (disabled || credential.not_allowed_to_use) ? 'cursor-not-allowed opacity-50' : onItemClick && 'cursor-pointer',
       )}
       onClick={() => {
         if (disabled || credential.not_allowed_to_use)
@@ -70,7 +65,7 @@ const CredentialItem = ({
             <div className="h-4 w-4">
               {
                 selectedCredentialId === credential.credential_id && (
-                  <RiCheckLine className="h-4 w-4 text-text-accent" />
+                  <span className="i-ri-check-line h-4 w-4 text-text-accent" />
                 )
               }
             </div>
@@ -78,7 +73,7 @@ const CredentialItem = ({
         }
         <Indicator className="ml-2 mr-1.5 shrink-0" />
         <div
-          className="system-md-regular truncate text-text-secondary"
+          className="truncate text-text-secondary system-md-regular"
           title={credential.credential_name}
         >
           {credential.credential_name}
@@ -96,38 +91,50 @@ const CredentialItem = ({
           <div className="ml-2 hidden shrink-0 items-center group-hover:flex">
             {
               !disableEdit && !credential.not_allowed_to_use && (
-                <Tooltip popupContent={t('operation.edit', { ns: 'common' })}>
-                  <ActionButton
-                    disabled={disabled}
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      onEdit?.(credential)
-                    }}
-                  >
-                    <RiEqualizer2Line className="h-4 w-4 text-text-tertiary" />
-                  </ActionButton>
+                <Tooltip>
+                  <TooltipTrigger
+                    render={(
+                      <ActionButton
+                        disabled={disabled}
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          onEdit?.(credential)
+                        }}
+                      >
+                        <span className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+                      </ActionButton>
+                    )}
+                  />
+                  <TooltipContent>{t('operation.edit', { ns: 'common' })}</TooltipContent>
                 </Tooltip>
               )
             }
             {
               !disableDelete && (
-                <Tooltip popupContent={disableDeleteWhenSelected ? disableDeleteTip : t('operation.delete', { ns: 'common' })}>
-                  <ActionButton
-                    className="hover:bg-transparent"
-                    onClick={(e) => {
-                      if (disabled || disableDeleteWhenSelected)
-                        return
-                      e.stopPropagation()
-                      onDelete?.(credential)
-                    }}
-                  >
-                    <RiDeleteBinLine className={cn(
-                      'h-4 w-4 text-text-tertiary',
-                      !disableDeleteWhenSelected && 'hover:text-text-destructive',
-                      disableDeleteWhenSelected && 'opacity-50',
+                <Tooltip>
+                  <TooltipTrigger
+                    render={(
+                      <ActionButton
+                        className="hover:bg-transparent"
+                        onClick={(e) => {
+                          if (disabled || disableDeleteWhenSelected)
+                            return
+                          e.stopPropagation()
+                          onDelete?.(credential)
+                        }}
+                      >
+                        <span className={cn(
+                          'i-ri-delete-bin-line h-4 w-4 text-text-tertiary',
+                          !disableDeleteWhenSelected && 'hover:text-text-destructive',
+                          disableDeleteWhenSelected && 'opacity-50',
+                        )}
+                        />
+                      </ActionButton>
                     )}
-                    />
-                  </ActionButton>
+                  />
+                  <TooltipContent>
+                    {disableDeleteWhenSelected ? disableDeleteTip : t('operation.delete', { ns: 'common' })}
+                  </TooltipContent>
                 </Tooltip>
               )
             }
@@ -139,8 +146,9 @@ const CredentialItem = ({
 
   if (credential.not_allowed_to_use) {
     return (
-      <Tooltip popupContent={t('auth.customCredentialUnavailable', { ns: 'plugin' })}>
-        {Item}
+      <Tooltip>
+        <TooltipTrigger render={Item} />
+        <TooltipContent>{t('auth.customCredentialUnavailable', { ns: 'plugin' })}</TooltipContent>
       </Tooltip>
     )
   }

web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-credential-status.spec.tsx

@@ -53,4 +53,14 @@ describe('useCredentialStatus', () => {
     expect(result.current.hasCredential).toBe(false)
     expect(result.current.available_credentials).toBeUndefined()
   })
+
+  it('handles undefined provider gracefully', () => {
+    const { result } = renderHook(() => useCredentialStatus(undefined))
+    expect(result.current.hasCredential).toBe(false)
+    expect(result.current.authorized).toBeFalsy()
+    expect(result.current.authRemoved).toBe(false)
+    expect(result.current.available_credentials).toBeUndefined()
+    expect(result.current.current_credential_id).toBeUndefined()
+    expect(result.current.current_credential_name).toBeUndefined()
+  })
 })

web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-credential-status.ts

@@ -3,12 +3,12 @@ import type {
 } from '../../declarations'
 import { useMemo } from 'react'
 
-export const useCredentialStatus = (provider: ModelProvider) => {
+export const useCredentialStatus = (provider: ModelProvider | undefined) => {
   const {
     current_credential_id,
     current_credential_name,
     available_credentials,
-  } = provider.custom_configuration
+  } = provider?.custom_configuration ?? {}
   const hasCredential = !!available_credentials?.length
   const authorized = current_credential_id && current_credential_name
   const authRemoved = hasCredential && !current_credential_id && !current_credential_name

web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx

@@ -10,7 +10,7 @@ const ModelBadge: FC<ModelBadgeProps> = ({
   children,
 }) => {
   return (
-    <div className={cn('system-2xs-medium-uppercase flex h-[18px] cursor-default items-center rounded-[5px] border border-divider-deep px-1 text-text-tertiary', className)}>
+    <div className={cn('inline-flex h-[18px] shrink-0 items-center justify-center whitespace-nowrap rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] text-text-tertiary system-2xs-medium-uppercase', className)}>
       {children}
     </div>
   )

web/app/components/header/account-setting/model-provider-page/model-modal/index.spec.tsx

@@ -1,7 +1,5 @@
-import type { ComponentProps } from 'react'
-import type { Credential, CredentialFormSchema, CustomModel, ModelProvider } from '../declarations'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import * as React from 'react'
+import type { Credential, CredentialFormSchema, ModelProvider } from '../declarations'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import {
   ConfigurationMethodEnum,
   CurrentSystemQuotaTypeEnum,
@@ -45,6 +43,15 @@ const mockHandlers = vi.hoisted(() => ({
   handleActiveCredential: vi.fn(),
 }))
 
+type FormResponse = {
+  isCheckValidated: boolean
+  values: Record<string, unknown>
+}
+const mockFormState = vi.hoisted(() => ({
+  responses: [] as FormResponse[],
+  setFieldValue: vi.fn(),
+}))
+
 vi.mock('../model-auth/hooks', () => ({
   useCredentialData: () => ({
     isLoading: mockState.isLoading,
@@ -79,6 +86,36 @@ vi.mock('../hooks', () => ({
   useLanguage: () => 'en_US',
 }))
 
+vi.mock('@/app/components/base/form/form-scenarios/auth', async () => {
+  const React = await import('react')
+  const AuthForm = React.forwardRef(({
+    onChange,
+  }: {
+    onChange?: (field: string, value: string) => void
+  }, ref: React.ForwardedRef<{ getFormValues: () => FormResponse, getForm: () => { setFieldValue: (field: string, value: string) => void } }>) => {
+    React.useImperativeHandle(ref, () => ({
+      getFormValues: () => mockFormState.responses.shift() || { isCheckValidated: false, values: {} },
+      getForm: () => ({ setFieldValue: mockFormState.setFieldValue }),
+    }))
+    return (
+      <div>
+        <button type="button" onClick={() => onChange?.('__model_name', 'updated-model')}>Model Name Change</button>
+      </div>
+    )
+  })
+
+  return { default: AuthForm }
+})
+
+vi.mock('../model-auth', () => ({
+  CredentialSelector: ({ onSelect }: { onSelect: (credential: Credential & { addNewCredential?: boolean }) => void }) => (
+    <div>
+      <button type="button" onClick={() => onSelect({ credential_id: 'existing' })}>Choose Existing</button>
+      <button type="button" onClick={() => onSelect({ credential_id: 'new', addNewCredential: true })}>Add New</button>
+    </div>
+  ),
+}))
+
 const createI18n = (text: string) => ({ en_US: text, zh_Hans: text })
 
 const createProvider = (overrides?: Partial<ModelProvider>): ModelProvider => ({
@@ -121,7 +158,7 @@ const createProvider = (overrides?: Partial<ModelProvider>): ModelProvider => ({
   ...overrides,
 })
 
-const renderModal = (overrides?: Partial<ComponentProps<typeof ModelModal>>) => {
+const renderModal = (overrides?: Partial<React.ComponentProps<typeof ModelModal>>) => {
   const provider = createProvider()
   const props = {
     provider,
@@ -131,50 +168,13 @@ const renderModal = (overrides?: Partial<ComponentProps<typeof ModelModal>>) =>
     onRemove: vi.fn(),
     ...overrides,
   }
-  render(<ModelModal {...props} />)
-  return props
+  const view = render(<ModelModal {...props} />)
+  return {
+    ...props,
+    unmount: view.unmount,
+  }
 }
 
-const mockFormRef1 = {
-  getFormValues: vi.fn(),
-  getForm: vi.fn(() => ({ setFieldValue: vi.fn() })),
-}
-
-const mockFormRef2 = {
-  getFormValues: vi.fn(),
-  getForm: vi.fn(() => ({ setFieldValue: vi.fn() })),
-}
-
-vi.mock('@/app/components/base/form/form-scenarios/auth', () => ({
-  default: React.forwardRef((props: { formSchemas: Record<string, unknown>[], onChange?: (f: string, v: string) => void }, ref: React.ForwardedRef<unknown>) => {
-    React.useImperativeHandle(ref, () => {
-      // Return the mock depending on schemas passed (hacky but works for refs)
-      if (props.formSchemas.length > 0 && props.formSchemas[0].name === '__model_name')
-        return mockFormRef1
-      return mockFormRef2
-    })
-    return (
-      <div data-testid="auth-form" onClick={() => props.onChange?.('test-field', 'val')}>
-        AuthForm Mock (
-        {props.formSchemas.length}
-        {' '}
-        fields)
-      </div>
-    )
-  }),
-}))
-
-vi.mock('../model-auth', () => ({
-  CredentialSelector: ({ onSelect }: { onSelect: (val: unknown) => void }) => (
-    <button onClick={() => onSelect({ addNewCredential: true })} data-testid="credential-selector">
-      Select Credential
-    </button>
-  ),
-  useAuth: vi.fn(),
-  useCredentialData: vi.fn(),
-  useModelFormSchemas: vi.fn(),
-}))
-
 describe('ModelModal', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -187,131 +187,168 @@ describe('ModelModal', () => {
     mockState.formValues = {}
     mockState.modelNameAndTypeFormSchemas = []
     mockState.modelNameAndTypeFormValues = {}
-
-    // reset form refs
-    mockFormRef1.getFormValues.mockReturnValue({ isCheckValidated: true, values: { __model_name: 'test', __model_type: ModelTypeEnum.textGeneration } })
-    mockFormRef2.getFormValues.mockReturnValue({ isCheckValidated: true, values: { __authorization_name__: 'test_auth', api_key: 'sk-test' } })
+    mockFormState.responses = []
   })
 
-  it('should render title and loading state for predefined credential modal', () => {
+  it('should show title, description, and loading state for predefined models', () => {
     mockState.isLoading = true
-    renderModal()
+
+    const predefined = renderModal()
+
     expect(screen.getByText('common.modelProvider.auth.apiKeyModal.title')).toBeInTheDocument()
     expect(screen.getByText('common.modelProvider.auth.apiKeyModal.desc')).toBeInTheDocument()
-  })
+    expect(screen.getByRole('status')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeDisabled()
 
-  it('should render model credential title when mode is configModelCredential', () => {
-    renderModal({
-      mode: ModelModalModeEnum.configModelCredential,
-      model: { model: 'gpt-4', model_type: ModelTypeEnum.textGeneration },
-    })
+    predefined.unmount()
+    const customizable = renderModal({ configurateMethod: ConfigurationMethodEnum.customizableModel })
+    expect(screen.queryByText('common.modelProvider.auth.apiKeyModal.desc')).not.toBeInTheDocument()
+    customizable.unmount()
+
+    mockState.credentialData = { credentials: {}, available_credentials: [] }
+    renderModal({ mode: ModelModalModeEnum.configModelCredential, model: { model: 'gpt-4', model_type: ModelTypeEnum.textGeneration } })
     expect(screen.getByText('common.modelProvider.auth.addModelCredential')).toBeInTheDocument()
   })
 
-  it('should render edit credential title when credential exists', () => {
-    renderModal({
-      mode: ModelModalModeEnum.configModelCredential,
-      credential: { credential_id: '1' } as unknown as Credential,
-    })
-    expect(screen.getByText('common.modelProvider.auth.editModelCredential')).toBeInTheDocument()
+  it('should reveal the credential label when adding a new credential', () => {
+    renderModal({ mode: ModelModalModeEnum.addCustomModelToModelList })
+
+    expect(screen.queryByText('common.modelProvider.auth.modelCredential')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('Add New'))
+
+    expect(screen.getByText('common.modelProvider.auth.modelCredential')).toBeInTheDocument()
   })
 
-  it('should change title to Add Model when mode is configCustomModel', () => {
-    mockState.modelNameAndTypeFormSchemas = [{ variable: '__model_name', type: 'text' } as unknown as CredentialFormSchema]
-    renderModal({ mode: ModelModalModeEnum.configCustomModel })
-    expect(screen.getByText('common.modelProvider.auth.addModel')).toBeInTheDocument()
+  it('should call onCancel when the cancel button is clicked', () => {
+    const { onCancel } = renderModal()
+
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
   })
 
-  it('should validate and fail save if form is invalid in configCustomModel mode', async () => {
-    mockState.modelNameAndTypeFormSchemas = [{ variable: '__model_name', type: 'text' } as unknown as CredentialFormSchema]
-    mockFormRef1.getFormValues.mockReturnValue({ isCheckValidated: false, values: {} })
-    renderModal({ mode: ModelModalModeEnum.configCustomModel })
-    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
-    expect(mockHandlers.handleSaveCredential).not.toHaveBeenCalled()
-  })
+  it('should call onCancel when the escape key is pressed', () => {
+    const { onCancel } = renderModal()
 
-  it('should validate and save new credential and model in configCustomModel mode', async () => {
-    mockState.modelNameAndTypeFormSchemas = [{ variable: '__model_name', type: 'text' } as unknown as CredentialFormSchema]
-    const props = renderModal({ mode: ModelModalModeEnum.configCustomModel })
-    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
-
-    await waitFor(() => {
-      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
-        credential_id: undefined,
-        credentials: { api_key: 'sk-test' },
-        name: 'test_auth',
-        model: 'test',
-        model_type: ModelTypeEnum.textGeneration,
-      })
-      expect(props.onSave).toHaveBeenCalled()
-    })
-  })
-
-  it('should save credential only in standard configProviderCredential mode', async () => {
-    const { onSave } = renderModal({ mode: ModelModalModeEnum.configProviderCredential })
-    fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
-
-    await waitFor(() => {
-      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
-        credential_id: undefined,
-        credentials: { api_key: 'sk-test' },
-        name: 'test_auth',
-      })
-      expect(onSave).toHaveBeenCalled()
-    })
-  })
-
-  it('should save active credential and cancel when picking existing credential in addCustomModelToModelList mode', async () => {
-    renderModal({ mode: ModelModalModeEnum.addCustomModelToModelList, model: { model: 'm1', model_type: ModelTypeEnum.textGeneration } as unknown as CustomModel })
-    // By default selected is undefined so button clicks form
-    // Let's not click credential selector, so it evaluates without it. If selectedCredential is undefined, form validation is checked.
-    mockFormRef2.getFormValues.mockReturnValue({ isCheckValidated: false, values: {} })
-    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
-    expect(mockHandlers.handleSaveCredential).not.toHaveBeenCalled()
-  })
-
-  it('should save active credential when picking existing credential in addCustomModelToModelList mode', async () => {
-    renderModal({ mode: ModelModalModeEnum.addCustomModelToModelList, model: { model: 'm2', model_type: ModelTypeEnum.textGeneration } as unknown as CustomModel })
-
-    // Select existing credential (addNewCredential: true simulates new but we can simulate false if we just hack the mocked state in the component, but it's internal.
-    // The credential selector sets selectedCredential.
-    fireEvent.click(screen.getByTestId('credential-selector')) // Sets addNewCredential = true internally, so it proceeds to form save
-
-    mockFormRef2.getFormValues.mockReturnValue({ isCheckValidated: true, values: { __authorization_name__: 'auth', api: 'key' } })
-    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
-
-    await waitFor(() => {
-      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
-        credential_id: undefined,
-        credentials: { api: 'key' },
-        name: 'auth',
-        model: 'm2',
-        model_type: ModelTypeEnum.textGeneration,
-      })
-    })
-  })
-
-  it('should open and confirm deletion of credential', () => {
-    mockState.credentialData = { credentials: { api_key: '123' }, available_credentials: [] }
-    mockState.formValues = { api_key: '123' } // To trigger isEditMode = true
-    const credential = { credential_id: 'c1' } as unknown as Credential
-    renderModal({ credential })
-
-    // Open Delete Confirm
-    fireEvent.click(screen.getByRole('button', { name: 'common.operation.remove' }))
-    expect(mockHandlers.openConfirmDelete).toHaveBeenCalledWith(credential, undefined)
-
-    // Simulate the dialog appearing and confirming
-    mockState.deleteCredentialId = 'c1'
-    renderModal({ credential }) // Re-render logic mock
-    fireEvent.click(screen.getAllByRole('button', { name: 'common.operation.confirm' })[0])
-
-    expect(mockHandlers.handleConfirmDelete).toHaveBeenCalled()
-  })
-
-  it('should bind escape key to cancel', () => {
-    const props = renderModal()
     fireEvent.keyDown(document, { key: 'Escape' })
-    expect(props.onCancel).toHaveBeenCalled()
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('should confirm deletion when a delete dialog is shown', () => {
+    mockState.credentialData = { credentials: { api_key: 'secret' }, available_credentials: [] }
+    mockState.deleteCredentialId = 'delete-id'
+
+    const credential: Credential = { credential_id: 'cred-1' }
+    const { onCancel } = renderModal({ credential })
+
+    const alertDialog = screen.getByRole('alertdialog', { hidden: true })
+    expect(alertDialog).toHaveTextContent('common.modelProvider.confirmDelete')
+
+    fireEvent.click(within(alertDialog).getByRole('button', { hidden: true, name: 'common.operation.confirm' }))
+
+    expect(mockHandlers.handleConfirmDelete).toHaveBeenCalledTimes(1)
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('should handle save flows for different modal modes', async () => {
+    mockState.modelNameAndTypeFormSchemas = [{ variable: '__model_name', type: 'text-input' } as unknown as CredentialFormSchema]
+    mockState.formSchemas = [{ variable: 'api_key', type: 'secret-input' } as unknown as CredentialFormSchema]
+    mockFormState.responses = [
+      { isCheckValidated: true, values: { __model_name: 'custom-model', __model_type: ModelTypeEnum.textGeneration } },
+      { isCheckValidated: true, values: { __authorization_name__: 'Auth Name', api_key: 'secret' } },
+    ]
+    const configCustomModel = renderModal({ mode: ModelModalModeEnum.configCustomModel })
+    fireEvent.click(screen.getAllByText('Model Name Change')[0])
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
+
+    expect(mockFormState.setFieldValue).toHaveBeenCalledWith('__model_name', 'updated-model')
+    await waitFor(() => {
+      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
+        credential_id: undefined,
+        credentials: { api_key: 'secret' },
+        name: 'Auth Name',
+        model: 'custom-model',
+        model_type: ModelTypeEnum.textGeneration,
+      })
+    })
+    expect(configCustomModel.onSave).toHaveBeenCalledWith({ __authorization_name__: 'Auth Name', api_key: 'secret' })
+    configCustomModel.unmount()
+
+    mockFormState.responses = [{ isCheckValidated: true, values: { __authorization_name__: 'Model Auth', api_key: 'abc' } }]
+    const model = { model: 'gpt-4', model_type: ModelTypeEnum.textGeneration }
+    const configModelCredential = renderModal({
+      mode: ModelModalModeEnum.configModelCredential,
+      model,
+      credential: { credential_id: 'cred-123' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+    await waitFor(() => {
+      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
+        credential_id: 'cred-123',
+        credentials: { api_key: 'abc' },
+        name: 'Model Auth',
+        model: 'gpt-4',
+        model_type: ModelTypeEnum.textGeneration,
+      })
+    })
+    expect(configModelCredential.onSave).toHaveBeenCalledWith({ __authorization_name__: 'Model Auth', api_key: 'abc' })
+    configModelCredential.unmount()
+
+    mockFormState.responses = [{ isCheckValidated: true, values: { __authorization_name__: 'Provider Auth', api_key: 'provider-key' } }]
+    const configProviderCredential = renderModal({ mode: ModelModalModeEnum.configProviderCredential })
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+    await waitFor(() => {
+      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
+        credential_id: undefined,
+        credentials: { api_key: 'provider-key' },
+        name: 'Provider Auth',
+      })
+    })
+    configProviderCredential.unmount()
+
+    const addToModelList = renderModal({
+      mode: ModelModalModeEnum.addCustomModelToModelList,
+      model,
+    })
+    fireEvent.click(screen.getByText('Choose Existing'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
+    expect(mockHandlers.handleActiveCredential).toHaveBeenCalledWith({ credential_id: 'existing' }, model)
+    expect(addToModelList.onCancel).toHaveBeenCalled()
+    addToModelList.unmount()
+
+    mockFormState.responses = [{ isCheckValidated: true, values: { __authorization_name__: 'New Auth', api_key: 'new-key' } }]
+    const addToModelListWithNew = renderModal({
+      mode: ModelModalModeEnum.addCustomModelToModelList,
+      model,
+    })
+    fireEvent.click(screen.getByText('Add New'))
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.add' }))
+    await waitFor(() => {
+      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledWith({
+        credential_id: undefined,
+        credentials: { api_key: 'new-key' },
+        name: 'New Auth',
+        model: 'gpt-4',
+        model_type: ModelTypeEnum.textGeneration,
+      })
+    })
+    addToModelListWithNew.unmount()
+
+    mockFormState.responses = [{ isCheckValidated: false, values: {} }]
+    const invalidSave = renderModal({ mode: ModelModalModeEnum.configProviderCredential })
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.save' }))
+    await waitFor(() => {
+      expect(mockHandlers.handleSaveCredential).toHaveBeenCalledTimes(4)
+    })
+    invalidSave.unmount()
+
+    mockState.credentialData = { credentials: { api_key: 'value' }, available_credentials: [] }
+    mockState.formValues = { api_key: 'value' }
+    const removable = renderModal({ credential: { credential_id: 'remove-1' } })
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.remove' }))
+    expect(mockHandlers.openConfirmDelete).toHaveBeenCalledWith({ credential_id: 'remove-1' }, undefined)
+    removable.unmount()
   })
 })

web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx

@@ -9,11 +9,9 @@ import type {
   FormRefObject,
   FormSchema,
 } from '@/app/components/base/form/types'
-import { RiCloseLine } from '@remixicon/react'
 import {
   memo,
   useCallback,
-  useEffect,
   useMemo,
   useRef,
   useState,
@@ -21,15 +19,23 @@ import {
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 import Button from '@/app/components/base/button'
-import Confirm from '@/app/components/base/confirm'
 import AuthForm from '@/app/components/base/form/form-scenarios/auth'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
 import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
 import Loading from '@/app/components/base/loading'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-} from '@/app/components/base/portal-to-follow-elem'
+  AlertDialog,
+  AlertDialogActions,
+  AlertDialogCancelButton,
+  AlertDialogConfirmButton,
+  AlertDialogContent,
+  AlertDialogTitle,
+} from '@/app/components/base/ui/alert-dialog'
+import {
+  Dialog,
+  DialogCloseButton,
+  DialogContent,
+} from '@/app/components/base/ui/dialog'
 import {
   useAuth,
   useCredentialData,
@@ -197,7 +203,7 @@ const ModelModal: FC<ModelModalProps> = ({
     }
 
     return (
-      <div className="title-2xl-semi-bold text-text-primary">
+      <div className="text-text-primary title-2xl-semi-bold">
         {label}
       </div>
     )
@@ -206,7 +212,7 @@ const ModelModal: FC<ModelModalProps> = ({
   const modalDesc = useMemo(() => {
     if (providerFormSchemaPredefined) {
       return (
-        <div className="system-xs-regular mt-1 text-text-tertiary">
+        <div className="mt-1 text-text-tertiary system-xs-regular">
           {t('modelProvider.auth.apiKeyModal.desc', { ns: 'common' })}
         </div>
       )
@@ -223,7 +229,7 @@ const ModelModal: FC<ModelModalProps> = ({
             className="mr-2 h-4 w-4 shrink-0"
             provider={provider}
           />
-          <div className="system-md-regular mr-1 text-text-secondary">{renderI18nObject(provider.label)}</div>
+          <div className="mr-1 text-text-secondary system-md-regular">{renderI18nObject(provider.label)}</div>
         </div>
       )
     }
@@ -235,7 +241,7 @@ const ModelModal: FC<ModelModalProps> = ({
             provider={provider}
             modelName={model.model}
           />
-          <div className="system-md-regular mr-1 text-text-secondary">{model.model}</div>
+          <div className="mr-1 text-text-secondary system-md-regular">{model.model}</div>
           <Badge>{model.model_type}</Badge>
         </div>
       )
@@ -275,174 +281,171 @@ const ModelModal: FC<ModelModalProps> = ({
   }, [])
   const notAllowCustomCredential = provider.allow_custom_token === false
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.stopPropagation()
-        onCancel()
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown, true)
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown, true)
-    }
+  const handleOpenChange = useCallback((open: boolean) => {
+    if (!open)
+      onCancel()
   }, [onCancel])
 
+  const handleConfirmOpenChange = useCallback((open: boolean) => {
+    if (!open)
+      closeConfirmDelete()
+  }, [closeConfirmDelete])
+
   return (
-    <PortalToFollowElem open>
-      <PortalToFollowElemContent className="z-[60] h-full w-full">
-        <div className="fixed inset-0 flex items-center justify-center bg-black/[.25]">
-          <div className="relative w-[640px] rounded-2xl bg-components-panel-bg shadow-xl">
-            <div
-              className="absolute right-5 top-5 flex h-8 w-8 cursor-pointer items-center justify-center"
-              onClick={onCancel}
-            >
-              <RiCloseLine className="h-4 w-4 text-text-tertiary" />
-            </div>
-            <div className="p-6 pb-3">
-              {modalTitle}
-              {modalDesc}
-              {modalModel}
-            </div>
-            <div className="max-h-[calc(100vh-320px)] overflow-y-auto px-6 py-3">
-              {
-                mode === ModelModalModeEnum.configCustomModel && (
-                  <AuthForm
-                    formSchemas={modelNameAndTypeFormSchemas.map((formSchema) => {
-                      return {
-                        ...formSchema,
-                        name: formSchema.variable,
-                      }
-                    }) as FormSchema[]}
-                    defaultValues={modelNameAndTypeFormValues}
-                    inputClassName="justify-start"
-                    ref={formRef1}
-                    onChange={handleModelNameAndTypeChange}
-                  />
-                )
-              }
-              {
-                mode === ModelModalModeEnum.addCustomModelToModelList && (
-                  <CredentialSelector
-                    credentials={available_credentials || []}
-                    onSelect={setSelectedCredential}
-                    selectedCredential={selectedCredential}
-                    disabled={isLoading}
-                    notAllowAddNewCredential={notAllowCustomCredential}
-                  />
-                )
-              }
-              {
-                showCredentialLabel && (
-                  <div className="system-xs-medium-uppercase mb-3 mt-6 flex items-center text-text-tertiary">
-                    {t('modelProvider.auth.modelCredential', { ns: 'common' })}
-                    <div className="ml-2 h-px grow bg-gradient-to-r from-divider-regular to-background-gradient-mask-transparent" />
-                  </div>
-                )
-              }
-              {
-                isLoading && (
-                  <div className="mt-3 flex items-center justify-center">
-                    <Loading />
-                  </div>
-                )
-              }
-              {
-                !isLoading
-                && showCredentialForm
-                && (
-                  <AuthForm
-                    formSchemas={formSchemas.map((formSchema) => {
-                      return {
-                        ...formSchema,
-                        name: formSchema.variable,
-                        showRadioUI: formSchema.type === FormTypeEnum.radio,
-                      }
-                    }) as FormSchema[]}
-                    defaultValues={formValues}
-                    inputClassName="justify-start"
-                    ref={formRef2}
-                  />
-                )
-              }
-            </div>
-            <div className="flex justify-between p-6 pt-5">
-              {
-                (provider.help && (provider.help.title || provider.help.url))
-                  ? (
-                      <a
-                        href={provider.help?.url[language] || provider.help?.url.en_US}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="system-xs-regular mt-2 inline-block  align-middle text-text-accent"
-                        onClick={e => !provider.help.url && e.preventDefault()}
-                      >
-                        {provider.help.title?.[language] || provider.help.url[language] || provider.help.title?.en_US || provider.help.url.en_US}
-                        <LinkExternal02 className="ml-1 mt-[-2px] inline-block h-3 w-3" />
-                      </a>
-                    )
-                  : <div />
-              }
-              <div className="ml-2 flex items-center justify-end space-x-2">
-                {
-                  isEditMode && (
-                    <Button
-                      variant="warning"
-                      onClick={() => openConfirmDelete(credential, model)}
-                    >
-                      {t('operation.remove', { ns: 'common' })}
-                    </Button>
-                  )
-                }
-                <Button
-                  onClick={onCancel}
-                >
-                  {t('operation.cancel', { ns: 'common' })}
-                </Button>
-                <Button
-                  variant="primary"
-                  onClick={handleSave}
-                  disabled={isLoading || doingAction}
-                >
-                  {saveButtonText}
-                </Button>
-              </div>
-            </div>
-            {
-              (mode === ModelModalModeEnum.configCustomModel || mode === ModelModalModeEnum.configProviderCredential) && (
-                <div className="border-t-[0.5px] border-t-divider-regular">
-                  <div className="flex items-center justify-center rounded-b-2xl bg-background-section-burn py-3 text-xs text-text-tertiary">
-                    <Lock01 className="mr-1 h-3 w-3 text-text-tertiary" />
-                    {t('modelProvider.encrypted.front', { ns: 'common' })}
-                    <a
-                      className="mx-1 text-text-accent"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      href="https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html"
-                    >
-                      PKCS1_OAEP
-                    </a>
-                    {t('modelProvider.encrypted.back', { ns: 'common' })}
-                  </div>
-                </div>
-              )
-            }
-          </div>
+    <Dialog open onOpenChange={handleOpenChange}>
+      <DialogContent
+        backdropProps={{ forceRender: true }}
+        className="w-[640px] max-w-[640px] overflow-hidden p-0"
+      >
+        <DialogCloseButton className="right-5 top-5 h-8 w-8" />
+        <div className="p-6 pb-3">
+          {modalTitle}
+          {modalDesc}
+          {modalModel}
+        </div>
+        <div className="max-h-[calc(100vh-320px)] overflow-y-auto px-6 py-3">
           {
-            deleteCredentialId && (
-              <Confirm
-                isShow
-                title={t('modelProvider.confirmDelete', { ns: 'common' })}
-                isDisabled={doingAction}
-                onCancel={closeConfirmDelete}
-                onConfirm={handleDeleteCredential}
+            mode === ModelModalModeEnum.configCustomModel && (
+              <AuthForm
+                formSchemas={modelNameAndTypeFormSchemas.map((formSchema) => {
+                  return {
+                    ...formSchema,
+                    name: formSchema.variable,
+                  }
+                }) as FormSchema[]}
+                defaultValues={modelNameAndTypeFormValues}
+                inputClassName="justify-start"
+                ref={formRef1}
+                onChange={handleModelNameAndTypeChange}
+              />
+            )
+          }
+          {
+            mode === ModelModalModeEnum.addCustomModelToModelList && (
+              <CredentialSelector
+                credentials={available_credentials || []}
+                onSelect={setSelectedCredential}
+                selectedCredential={selectedCredential}
+                disabled={isLoading}
+                notAllowAddNewCredential={notAllowCustomCredential}
+              />
+            )
+          }
+          {
+            showCredentialLabel && (
+              <div className="mb-3 mt-6 flex items-center text-text-tertiary system-xs-medium-uppercase">
+                {t('modelProvider.auth.modelCredential', { ns: 'common' })}
+                <div className="ml-2 h-px grow bg-gradient-to-r from-divider-regular to-background-gradient-mask-transparent" />
+              </div>
+            )
+          }
+          {
+            isLoading && (
+              <div className="mt-3 flex items-center justify-center">
+                <Loading />
+              </div>
+            )
+          }
+          {
+            !isLoading
+            && showCredentialForm
+            && (
+              <AuthForm
+                formSchemas={formSchemas.map((formSchema) => {
+                  return {
+                    ...formSchema,
+                    name: formSchema.variable,
+                    showRadioUI: formSchema.type === FormTypeEnum.radio,
+                  }
+                }) as FormSchema[]}
+                defaultValues={formValues}
+                inputClassName="justify-start"
+                ref={formRef2}
               />
             )
           }
         </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+        <div className="flex justify-between p-6 pt-5">
+          {
+            (provider.help && (provider.help.title || provider.help.url))
+              ? (
+                  <a
+                    href={provider.help?.url[language] || provider.help?.url.en_US}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="mt-2 inline-block align-middle text-text-accent system-xs-regular"
+                    onClick={e => !provider.help.url && e.preventDefault()}
+                  >
+                    {provider.help.title?.[language] || provider.help.url[language] || provider.help.title?.en_US || provider.help.url.en_US}
+                    <LinkExternal02 className="ml-1 mt-[-2px] inline-block h-3 w-3" />
+                  </a>
+                )
+              : <div />
+          }
+          <div className="ml-2 flex items-center justify-end space-x-2">
+            {
+              isEditMode && (
+                <Button
+                  variant="warning"
+                  onClick={() => openConfirmDelete(credential, model)}
+                >
+                  {t('operation.remove', { ns: 'common' })}
+                </Button>
+              )
+            }
+            <Button
+              onClick={onCancel}
+            >
+              {t('operation.cancel', { ns: 'common' })}
+            </Button>
+            <Button
+              variant="primary"
+              onClick={handleSave}
+              disabled={isLoading || doingAction}
+            >
+              {saveButtonText}
+            </Button>
+          </div>
+        </div>
+        {
+          (mode === ModelModalModeEnum.configCustomModel || mode === ModelModalModeEnum.configProviderCredential) && (
+            <div className="border-t-[0.5px] border-t-divider-regular">
+              <div className="flex items-center justify-center rounded-b-2xl bg-background-section-burn py-3 text-xs text-text-tertiary">
+                <Lock01 className="mr-1 h-3 w-3 text-text-tertiary" />
+                {t('modelProvider.encrypted.front', { ns: 'common' })}
+                <a
+                  className="mx-1 text-text-accent"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href="https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html"
+                >
+                  PKCS1_OAEP
+                </a>
+                {t('modelProvider.encrypted.back', { ns: 'common' })}
+              </div>
+            </div>
+          )
+        }
+      </DialogContent>
+      <AlertDialog open={!!deleteCredentialId} onOpenChange={handleConfirmOpenChange}>
+        <AlertDialogContent backdropProps={{ forceRender: true }}>
+          <div className="flex flex-col gap-2 p-6 pb-4">
+            <AlertDialogTitle className="text-text-primary title-2xl-semi-bold">
+              {t('modelProvider.confirmDelete', { ns: 'common' })}
+            </AlertDialogTitle>
+          </div>
+          <AlertDialogActions>
+            <AlertDialogCancelButton>{t('operation.cancel', { ns: 'common' })}</AlertDialogCancelButton>
+            <AlertDialogConfirmButton
+              disabled={doingAction}
+              onClick={handleDeleteCredential}
+            >
+              {t('operation.confirm', { ns: 'common' })}
+            </AlertDialogConfirmButton>
+          </AlertDialogActions>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Dialog>
   )
 }
 

web/app/components/header/account-setting/model-provider-page/model-name/index.tsx

@@ -39,7 +39,7 @@ const ModelName: FC<ModelNameProps> = ({
   if (!modelItem)
     return null
   return (
-    <div className={cn('system-sm-regular flex items-center gap-0.5 overflow-hidden truncate text-ellipsis text-components-input-text-filled', className)}>
+    <div className={cn('flex items-center gap-0.5 overflow-hidden truncate text-ellipsis text-components-input-text-filled system-sm-regular', className)}>
       <div
         className="truncate"
         title={modelItem.label[language] || modelItem.label.en_US}

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/derive-trigger-status.spec.ts

@@ -0,0 +1,101 @@
+import type { ModelItem, ModelProvider } from '../declarations'
+import type { CredentialPanelState } from '../provider-added-card/use-credential-panel-state'
+import { ModelStatusEnum } from '../declarations'
+import { deriveTriggerStatus } from './derive-trigger-status'
+
+const baseCredentialState: CredentialPanelState = {
+  variant: 'api-active',
+  priority: 'apiKey',
+  supportsCredits: true,
+  showPrioritySwitcher: true,
+  hasCredentials: true,
+  isCreditsExhausted: false,
+  credentialName: 'Primary Key',
+  credits: 10,
+}
+
+const mockProvider = { provider: 'openai' } as ModelProvider
+const mockModel = { model: 'gpt-4', status: ModelStatusEnum.active } as ModelItem
+
+describe('deriveTriggerStatus', () => {
+  it('returns empty when modelId is missing', () => {
+    expect(deriveTriggerStatus(undefined, 'openai', mockProvider, mockModel, baseCredentialState)).toBe('empty')
+  })
+
+  it('returns empty when providerName is missing', () => {
+    expect(deriveTriggerStatus('gpt-4', undefined, mockProvider, mockModel, baseCredentialState)).toBe('empty')
+  })
+
+  it('returns incompatible when provider plugin is not installed', () => {
+    expect(deriveTriggerStatus('gpt-4', 'openai', undefined, mockModel, baseCredentialState)).toBe('incompatible')
+  })
+
+  it('returns credits-exhausted when credits priority and exhausted', () => {
+    const state: CredentialPanelState = {
+      ...baseCredentialState,
+      priority: 'credits',
+      isCreditsExhausted: true,
+    }
+    expect(deriveTriggerStatus('gpt-4', 'openai', mockProvider, mockModel, state)).toBe('credits-exhausted')
+  })
+
+  it('returns active when credits priority but not exhausted', () => {
+    const state: CredentialPanelState = {
+      ...baseCredentialState,
+      priority: 'credits',
+      isCreditsExhausted: false,
+    }
+    expect(deriveTriggerStatus('gpt-4', 'openai', mockProvider, mockModel, state)).toBe('active')
+  })
+
+  it('returns api-key-unavailable when variant is api-unavailable', () => {
+    const state: CredentialPanelState = {
+      ...baseCredentialState,
+      variant: 'api-unavailable',
+    }
+    expect(deriveTriggerStatus('gpt-4', 'openai', mockProvider, mockModel, state)).toBe('api-key-unavailable')
+  })
+
+  it('returns incompatible when currentModel is missing (deprecated)', () => {
+    expect(deriveTriggerStatus('gpt-4', 'openai', mockProvider, undefined, baseCredentialState)).toBe('incompatible')
+  })
+
+  it('returns configure-required when model status is no-configure', () => {
+    const model = { ...mockModel, status: ModelStatusEnum.noConfigure } as ModelItem
+    expect(deriveTriggerStatus('gpt-4', 'openai', mockProvider, model, baseCredentialState)).toBe('configure-required')
+  })
+
+  it('returns incompatible when model status is noPermission', () => {
+    const model = { ...mockModel, status: ModelStatusEnum.noPermission } as ModelItem
+    expect(deriveTriggerStatus('gpt-4', 'openai', mockProvider, model, baseCredentialState)).toBe('incompatible')
+  })
+
+  it('returns disabled when model status is disabled', () => {
+    const model = { ...mockModel, status: ModelStatusEnum.disabled } as ModelItem
+    expect(deriveTriggerStatus('gpt-4', 'openai', mockProvider, model, baseCredentialState)).toBe('disabled')
+  })
+
+  it('returns active when all conditions are satisfied', () => {
+    expect(deriveTriggerStatus('gpt-4', 'openai', mockProvider, mockModel, baseCredentialState)).toBe('active')
+  })
+
+  it('prioritises credits-exhausted over api-unavailable', () => {
+    const state: CredentialPanelState = {
+      ...baseCredentialState,
+      priority: 'credits',
+      isCreditsExhausted: true,
+      variant: 'api-unavailable',
+    }
+    expect(deriveTriggerStatus('gpt-4', 'openai', mockProvider, mockModel, state)).toBe('credits-exhausted')
+  })
+
+  it('does not return credits-exhausted when supportsCredits is false', () => {
+    const state: CredentialPanelState = {
+      ...baseCredentialState,
+      priority: 'credits',
+      isCreditsExhausted: true,
+      supportsCredits: false,
+    }
+    expect(deriveTriggerStatus('gpt-4', 'openai', mockProvider, mockModel, state)).toBe('active')
+  })
+})

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/derive-trigger-status.ts

@@ -0,0 +1,12 @@
+import type { DerivedModelStatus } from '../derive-model-status'
+import {
+  DERIVED_MODEL_STATUS_BADGE_I18N,
+  DERIVED_MODEL_STATUS_TOOLTIP_I18N,
+  deriveModelStatus,
+} from '../derive-model-status'
+
+export type TriggerStatus = DerivedModelStatus
+
+export const deriveTriggerStatus = deriveModelStatus
+export const TRIGGER_STATUS_BADGE_I18N = DERIVED_MODEL_STATUS_BADGE_I18N
+export const TRIGGER_STATUS_TOOLTIP_I18N = DERIVED_MODEL_STATUS_TOOLTIP_I18N

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.spec.tsx

@@ -49,7 +49,7 @@ vi.mock('@/service/use-common', () => ({
     data: {
       data: parameterRules,
     },
-    isPending: isRulesLoading,
+    isLoading: isRulesLoading,
   }),
 }))
 
@@ -91,7 +91,7 @@ vi.mock('./presets-parameter', () => ({
 }))
 
 vi.mock('./trigger', () => ({
-  default: () => <button>Open Settings</button>,
+  default: () => <div data-testid="trigger-mock">Open Settings</div>,
 }))
 
 vi.mock('@/config', async (importOriginal) => {

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx

@@ -9,20 +9,19 @@ import type {
 } from '../declarations'
 import type { ParameterValue } from './parameter-item'
 import type { TriggerProps } from './trigger'
-import { useMemo, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
 import Loading from '@/app/components/base/loading'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
 import { PROVIDER_WITH_PRESET_TONE, STOP_PARAMETER_RULE, TONE_LIST } from '@/config'
-import { useProviderContext } from '@/context/provider-context'
 import { useModelParameterRules } from '@/service/use-common'
 import { cn } from '@/utils/classnames'
-import { ModelStatusEnum } from '../declarations'
 import {
   useTextGenerationCurrentProviderAndModelAndModelList,
 } from '../hooks'
@@ -66,9 +65,9 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
   isInWorkflow,
 }) => {
   const { t } = useTranslation()
-  const { isAPIKeySet } = useProviderContext()
   const [open, setOpen] = useState(false)
-  const { data: parameterRulesData, isPending: isLoading } = useModelParameterRules(provider, modelId)
+  const settingsIconRef = useRef<HTMLDivElement>(null)
+  const { data: parameterRulesData, isLoading } = useModelParameterRules(provider, modelId)
   const {
     currentProvider,
     currentModel,
@@ -77,10 +76,6 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
     { provider, model: modelId },
   )
 
-  const hasDeprecated = !currentProvider || !currentModel
-  const modelDisabled = currentModel?.status !== ModelStatusEnum.active
-  const disabled = !isAPIKeySet || hasDeprecated || modelDisabled
-
   const parameterRules: ModelParameterRule[] = useMemo(() => {
     return parameterRulesData?.data || []
   }, [parameterRulesData])
@@ -129,117 +124,118 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
   }
 
   return (
-    <PortalToFollowElem
+    <Popover
       open={open}
-      onOpenChange={setOpen}
-      placement={isInWorkflow ? 'left' : 'bottom-end'}
-      offset={4}
+      onOpenChange={(newOpen) => {
+        if (readonly)
+          return
+        setOpen(newOpen)
+      }}
     >
-      <div className="relative">
-        <PortalToFollowElemTrigger
-          onClick={() => {
-            if (readonly)
-              return
-            setOpen(v => !v)
-          }}
-          className="block"
-        >
-          {
-            renderTrigger
-              ? renderTrigger({
-                  open,
-                  disabled,
-                  modelDisabled,
-                  hasDeprecated,
-                  currentProvider,
-                  currentModel,
-                  providerName: provider,
-                  modelId,
-                })
-              : (
-                  <Trigger
-                    disabled={disabled}
-                    isInWorkflow={isInWorkflow}
-                    modelDisabled={modelDisabled}
-                    hasDeprecated={hasDeprecated}
-                    currentProvider={currentProvider}
-                    currentModel={currentModel}
-                    providerName={provider}
-                    modelId={modelId}
-                  />
-                )
-          }
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className={cn('z-[60]', portalToFollowElemContentClassName)}>
-          <div className={cn(popupClassName, 'w-[389px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg')}>
-            <div className={cn('max-h-[420px] overflow-y-auto p-4 pt-3')}>
-              <div className="relative">
-                <div className={cn('system-sm-semibold mb-1 flex h-6 items-center text-text-secondary')}>
-                  {t('modelProvider.model', { ns: 'common' }).toLocaleUpperCase()}
-                </div>
-                <ModelSelector
-                  defaultModel={(provider || modelId) ? { provider, model: modelId } : undefined}
-                  modelList={activeTextGenerationModelList}
-                  onSelect={handleChangeModel}
-                />
-              </div>
-              {
-                !!parameterRules.length && (
-                  <div className="my-3 h-px bg-divider-subtle" />
-                )
-              }
-              {
-                isLoading && (
-                  <div className="mt-5"><Loading /></div>
-                )
-              }
-              {
-                !isLoading && !!parameterRules.length && (
-                  <div className="mb-2 flex items-center justify-between">
-                    <div className={cn('system-sm-semibold flex h-6 items-center text-text-secondary')}>{t('modelProvider.parameters', { ns: 'common' })}</div>
-                    {
-                      PROVIDER_WITH_PRESET_TONE.includes(provider) && (
-                        <PresetsParameter onSelect={handleSelectPresetParameter} />
-                      )
-                    }
-                  </div>
-                )
-              }
-              {
-                !isLoading && !!parameterRules.length && (
-                  [
-                    ...parameterRules,
-                    ...(isAdvancedMode ? [STOP_PARAMETER_RULE] : []),
-                  ].map(parameter => (
-                    <ParameterItem
-                      key={`${modelId}-${parameter.name}`}
-                      parameterRule={parameter}
-                      value={completionParams?.[parameter.name]}
-                      onChange={v => handleParamChange(parameter.name, v)}
-                      onSwitch={(checked, assignValue) => handleSwitch(parameter.name, checked, assignValue)}
+      <PopoverTrigger
+        render={(
+          <button type="button" className="block w-full border-none bg-transparent p-0 text-left [color:inherit] [font:inherit]">
+            {
+              renderTrigger
+                ? renderTrigger({
+                    open,
+                    currentProvider,
+                    currentModel,
+                    providerName: provider,
+                    modelId,
+                  })
+                : (
+                    <Trigger
                       isInWorkflow={isInWorkflow}
+                      currentProvider={currentProvider}
+                      currentModel={currentModel}
+                      providerName={provider}
+                      modelId={modelId}
+                      settingsRef={settingsIconRef}
                     />
-                  ))
-                )
-              }
-            </div>
-            {!hideDebugWithMultipleModel && (
-              <div
-                className="bg-components-section-burn system-sm-regular flex h-[50px] cursor-pointer items-center justify-between rounded-b-xl border-t border-t-divider-subtle px-4 text-text-accent"
-                onClick={() => onDebugWithMultipleModelChange?.()}
-              >
-                {
-                  debugWithMultipleModel
-                    ? t('debugAsSingleModel', { ns: 'appDebug' })
-                    : t('debugAsMultipleModel', { ns: 'appDebug' })
-                }
-                <ArrowNarrowLeft className="h-3 w-3 rotate-180" />
-              </div>
-            )}
+                  )
+            }
+          </button>
+        )}
+      />
+      <PopoverContent
+        placement={isInWorkflow ? 'left' : (renderTrigger ? 'bottom-end' : 'left-start')}
+        sideOffset={4}
+        className={portalToFollowElemContentClassName}
+        popupClassName={cn(popupClassName, 'w-[400px] rounded-2xl')}
+        positionerProps={!renderTrigger ? { anchor: settingsIconRef } : undefined}
+      >
+        <div className="relative px-3 pb-1 pt-3.5">
+          <div className="pl-1 pr-8 text-text-primary system-xl-semibold">
+            {t('modelProvider.modelSettings', { ns: 'common' })}
           </div>
-        </PortalToFollowElemContent>
-      </div>
-    </PortalToFollowElem>
+          <PopoverClose className="absolute right-2.5 top-2.5 flex items-center justify-center rounded-lg p-1.5 hover:bg-state-base-hover">
+            <span className="i-ri-close-line h-4 w-4 text-text-tertiary" />
+          </PopoverClose>
+        </div>
+        <div className="max-h-[420px] overflow-y-auto">
+          <div className="px-4 pb-4 pt-2">
+            <ModelSelector
+              defaultModel={(provider || modelId) ? { provider, model: modelId } : undefined}
+              modelList={activeTextGenerationModelList}
+              onSelect={handleChangeModel}
+              onHide={() => setOpen(false)}
+            />
+          </div>
+          {
+            !!parameterRules.length && (
+              <div className="flex flex-col gap-2 border-t border-divider-subtle px-4 pb-4 pt-3">
+                <div className="flex items-center gap-1">
+                  <div className="flex flex-1 items-center text-text-secondary system-sm-semibold-uppercase">{t('modelProvider.parameters', { ns: 'common' })}</div>
+                  {
+                    PROVIDER_WITH_PRESET_TONE.includes(provider) && (
+                      <PresetsParameter onSelect={handleSelectPresetParameter} />
+                    )
+                  }
+                </div>
+                {
+                  isLoading
+                    ? <div className="py-5"><Loading /></div>
+                    : (
+                        [
+                          ...parameterRules,
+                          ...(isAdvancedMode ? [STOP_PARAMETER_RULE] : []),
+                        ].map(parameter => (
+                          <ParameterItem
+                            key={`${modelId}-${parameter.name}`}
+                            parameterRule={parameter}
+                            value={completionParams?.[parameter.name]}
+                            onChange={v => handleParamChange(parameter.name, v)}
+                            onSwitch={(checked, assignValue) => handleSwitch(parameter.name, checked, assignValue)}
+                            isInWorkflow={isInWorkflow}
+                          />
+                        ))
+                      )
+                }
+              </div>
+            )
+          }
+          {
+            !parameterRules.length && isLoading && (
+              <div className="px-4 py-5"><Loading /></div>
+            )
+          }
+        </div>
+        {!hideDebugWithMultipleModel && (
+          <div
+            className="flex h-[50px] cursor-pointer items-center justify-between rounded-b-xl border-t border-t-divider-subtle px-4 text-text-accent system-sm-regular"
+            onClick={() => onDebugWithMultipleModelChange?.()}
+          >
+            {
+              debugWithMultipleModel
+                ? t('debugAsSingleModel', { ns: 'appDebug' })
+                : t('debugAsMultipleModel', { ns: 'appDebug' })
+            }
+            <ArrowNarrowLeft className="h-3 w-3 rotate-180" />
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
   )
 }
 

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.spec.tsx

@@ -109,7 +109,7 @@ describe('ParameterItem', () => {
 
   it('should render select for string with options', () => {
     render(<ParameterItem parameterRule={createRule({ type: 'string', options: ['a', 'b'] })} value="a" />)
-    // SimpleSelect renders an element with text 'a'
+    // Select renders the selected value in the trigger
     expect(screen.getByText('a')).toBeInTheDocument()
   })
 

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx

@@ -1,12 +1,11 @@
-import type { FC } from 'react'
 import type { ModelParameterRule } from '../declarations'
 import { useEffect, useRef, useState } from 'react'
 import Radio from '@/app/components/base/radio'
-import { SimpleSelect } from '@/app/components/base/select'
 import Slider from '@/app/components/base/slider'
 import Switch from '@/app/components/base/switch'
 import TagInput from '@/app/components/base/tag-input'
-import Tooltip from '@/app/components/base/tooltip'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/app/components/base/ui/select'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { cn } from '@/utils/classnames'
 import { useLanguage } from '../hooks'
 import { isNullOrUndefined } from '../utils'
@@ -20,13 +19,13 @@ type ParameterItemProps = {
   onSwitch?: (checked: boolean, assignValue: ParameterValue) => void
   isInWorkflow?: boolean
 }
-const ParameterItem: FC<ParameterItemProps> = ({
+function ParameterItem({
   parameterRule,
   value,
   onChange,
   onSwitch,
   isInWorkflow,
-}) => {
+}: ParameterItemProps) {
   const language = useLanguage()
   const [localValue, setLocalValue] = useState(value)
   const numberInputRef = useRef<HTMLInputElement>(null)
@@ -99,10 +98,6 @@ const ParameterItem: FC<ParameterItemProps> = ({
     handleInputChange(e.target.value)
   }
 
-  const handleSelect = (option: { value: string | number, name: string }) => {
-    handleInputChange(option.value)
-  }
-
   const handleTagChange = (newSequences: string[]) => {
     handleInputChange(newSequences)
   }
@@ -222,13 +217,19 @@ const ParameterItem: FC<ParameterItemProps> = ({
 
     if (parameterRule.type === 'string' && !!parameterRule?.options?.length) {
       return (
-        <SimpleSelect
-          className="!py-0"
-          wrapperClassName={cn('!h-8 w-full')}
-          defaultValue={renderValue as string}
-          onSelect={handleSelect}
-          items={parameterRule.options.map(option => ({ value: option, name: option }))}
-        />
+        <Select
+          value={renderValue as string}
+          onValueChange={v => handleInputChange(v ?? undefined)}
+        >
+          <SelectTrigger className="w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {parameterRule.options!.map(option => (
+              <SelectItem key={option} value={option}>{option}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       )
     }
 
@@ -272,13 +273,18 @@ const ParameterItem: FC<ParameterItemProps> = ({
           </div>
           {
             parameterRule.help && (
-              <Tooltip
-                popupContent={(
+              <Tooltip>
+                <TooltipTrigger
+                  render={(
+                    <span className="mr-1 flex h-4 w-4 shrink-0 items-center justify-center">
+                      <span aria-hidden className="i-ri-question-line h-3.5 w-3.5 text-text-quaternary" />
+                    </span>
+                  )}
+                />
+                <TooltipContent popupClassName="mr-1">
                   <div className="w-[150px] whitespace-pre-wrap">{parameterRule.help[language] || parameterRule.help.en_US}</div>
-                )}
-                popupClassName="mr-1"
-                triggerClassName="mr-1 w-4 h-4 shrink-0"
-              />
+                </TooltipContent>
+              </Tooltip>
             )
           }
         </div>

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.spec.tsx

@@ -18,13 +18,12 @@ describe('PresetsParameter', () => {
     expect(onSelect).toHaveBeenCalledWith(1)
   })
 
-  // open=true: trigger has bg-state-base-hover class
-  it('should apply hover background class when open is true', () => {
+  it('should mark trigger as open when dropdown is expanded', () => {
     render(<PresetsParameter onSelect={vi.fn()} />)
     fireEvent.click(screen.getByRole('button', { name: /common\.modelProvider\.loadPresets/i }))
 
     const button = screen.getByRole('button', { name: /common\.modelProvider\.loadPresets/i })
-    expect(button).toHaveClass('bg-state-base-hover')
+    expect(button).toHaveAttribute('data-popup-open')
   })
 
   // Tone map branch 2: Balanced → Scales02 icon

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx

@@ -1,14 +1,16 @@
-import type { FC } from 'react'
-import { RiArrowDownSLine } from '@remixicon/react'
-import { useCallback } from 'react'
+import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import Dropdown from '@/app/components/base/dropdown'
 import { Brush01 } from '@/app/components/base/icons/src/vender/solid/editor'
 import { Scales02 } from '@/app/components/base/icons/src/vender/solid/FinanceAndECommerce'
 import { Target04 } from '@/app/components/base/icons/src/vender/solid/general'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/app/components/base/ui/dropdown-menu'
 import { TONE_LIST } from '@/config'
-import { cn } from '@/utils/classnames'
 
 const toneI18nKeyMap = {
   Creative: 'model.tone.Creative',
@@ -17,53 +19,42 @@ const toneI18nKeyMap = {
   Custom: 'model.tone.Custom',
 } as const
 
+const TONE_ICONS: Record<number, ReactNode> = {
+  1: <Brush01 className="mr-2 h-[14px] w-[14px] text-[#6938EF]" />,
+  2: <Scales02 className="mr-2 h-[14px] w-[14px] text-indigo-600" />,
+  3: <Target04 className="mr-2 h-[14px] w-[14px] text-[#107569]" />,
+}
+
 type PresetsParameterProps = {
   onSelect: (toneId: number) => void
 }
-const PresetsParameter: FC<PresetsParameterProps> = ({
-  onSelect,
-}) => {
+
+function PresetsParameter({ onSelect }: PresetsParameterProps) {
   const { t } = useTranslation()
-  const renderTrigger = useCallback((open: boolean) => {
-    return (
-      <Button
-        size="small"
-        variant="secondary"
-        className={cn(open && 'bg-state-base-hover')}
-      >
-        {t('modelProvider.loadPresets', { ns: 'common' })}
-        <RiArrowDownSLine className="ml-0.5 h-3.5 w-3.5" />
-      </Button>
-    )
-  }, [t])
-  const getToneIcon = (toneId: number) => {
-    const className = 'mr-2 w-[14px] h-[14px]'
-    const res = ({
-      1: <Brush01 className={`${className} text-[#6938EF]`} />,
-      2: <Scales02 className={`${className} text-indigo-600`} />,
-      3: <Target04 className={`${className} text-[#107569]`} />,
-    })[toneId]
-    return res
-  }
-  const options = TONE_LIST.slice(0, 3).map((tone) => {
-    return {
-      value: tone.id,
-      text: (
-        <div className="flex h-full items-center">
-          {getToneIcon(tone.id)}
-          {t(toneI18nKeyMap[tone.name], { ns: 'common' })}
-        </div>
-      ),
-    }
-  })
 
   return (
-    <Dropdown
-      renderTrigger={renderTrigger}
-      items={options}
-      onSelect={item => onSelect(item.value as number)}
-      popupClassName="z-[1003]"
-    />
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={(
+          <Button
+            size="small"
+            variant="secondary"
+            className="data-[popup-open]:bg-state-base-hover"
+          />
+        )}
+      >
+        {t('modelProvider.loadPresets', { ns: 'common' })}
+        <span className="i-ri-arrow-down-s-line ml-0.5 h-3.5 w-3.5" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        {TONE_LIST.slice(0, 3).map(tone => (
+          <DropdownMenuItem key={tone.id} onClick={() => onSelect(tone.id)}>
+            {TONE_ICONS[tone.id]}
+            {t(toneI18nKeyMap[tone.name], { ns: 'common' })}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.spec.tsx

@@ -1,140 +1,301 @@
 import type { ComponentProps } from 'react'
 import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
 import Trigger from './trigger'
 
+const mockUseCredentialPanelState = vi.fn()
+
 vi.mock('../hooks', () => ({
   useLanguage: () => 'en_US',
 }))
 
 vi.mock('@/context/provider-context', () => ({
   useProviderContext: () => ({
-    modelProviders: [{ provider: 'openai', label: { en_US: 'OpenAI' } }],
+    modelProviders: [{
+      provider: 'openai',
+      label: { en_US: 'OpenAI', zh_Hans: 'OpenAI' },
+    }],
   }),
 }))
 
+vi.mock('../provider-added-card/use-credential-panel-state', () => ({
+  useCredentialPanelState: () => mockUseCredentialPanelState(),
+}))
+
 vi.mock('../model-icon', () => ({
   default: () => <div data-testid="model-icon">Icon</div>,
 }))
 
 vi.mock('../model-name', () => ({
-  default: ({ modelItem }: { modelItem: { model: string } }) => <div>{modelItem.model}</div>,
+  default: ({
+    modelItem,
+    showMode,
+    showFeatures,
+  }: {
+    modelItem: { model: string }
+    showMode?: boolean
+    showFeatures?: boolean
+  }) => (
+    <div>
+      <span>{modelItem.model}</span>
+      {showMode && <span data-testid="model-name-mode">mode</span>}
+      {showFeatures && <span data-testid="model-name-features">features</span>}
+    </div>
+  ),
 }))
 
+const activeCredentialState = {
+  variant: 'api-active' as const,
+  supportsCredits: true,
+  isCreditsExhausted: false,
+  priority: 'apiKey' as const,
+  showPrioritySwitcher: true,
+  hasCredentials: true,
+  credentialName: 'Primary Key',
+  credits: 10,
+}
+
 describe('Trigger', () => {
-  const currentProvider = { provider: 'openai', label: { en_US: 'OpenAI' } } as unknown as ComponentProps<typeof Trigger>['currentProvider']
-  const currentModel = { model: 'gpt-4' } as unknown as ComponentProps<typeof Trigger>['currentModel']
+  const currentProvider = {
+    provider: 'openai',
+    label: { en_US: 'OpenAI', zh_Hans: 'OpenAI' },
+  } as unknown as ComponentProps<typeof Trigger>['currentProvider']
+
+  const currentModel = {
+    model: 'gpt-4',
+    status: 'active',
+  } as unknown as ComponentProps<typeof Trigger>['currentModel']
 
   beforeEach(() => {
     vi.clearAllMocks()
+    mockUseCredentialPanelState.mockReturnValue(activeCredentialState)
   })
 
-  it('should render initialized state', () => {
-    render(
-      <Trigger
-        currentProvider={currentProvider}
-        currentModel={currentModel}
-      />,
-    )
-    expect(screen.getByText('gpt-4')).toBeInTheDocument()
-    expect(screen.getByTestId('model-icon')).toBeInTheDocument()
+  describe('Rendering', () => {
+    it('should render active state with model features in non-workflow mode', () => {
+      render(
+        <Trigger
+          currentProvider={currentProvider}
+          currentModel={currentModel}
+          providerName="openai"
+          modelId="gpt-4"
+        />,
+      )
+
+      expect(screen.getByText('gpt-4')).toBeInTheDocument()
+      expect(screen.getByTestId('model-icon')).toBeInTheDocument()
+      expect(screen.getByTestId('model-name-mode')).toBeInTheDocument()
+      expect(screen.getByTestId('model-name-features')).toBeInTheDocument()
+    })
+
+    it('should render fallback model id when current model is missing', () => {
+      render(
+        <Trigger
+          modelId="gpt-4"
+          providerName="openai"
+        />,
+      )
+
+      expect(screen.getByText('gpt-4')).toBeInTheDocument()
+    })
+
+    it('should render split layout with workflow styles when workflow mode is enabled', () => {
+      const { container } = render(
+        <Trigger
+          currentProvider={currentProvider}
+          currentModel={currentModel}
+          isInWorkflow
+          providerName="openai"
+          modelId="gpt-4"
+        />,
+      )
+
+      const leftPanel = container.querySelector('.rounded-l-lg')
+      expect(leftPanel).toBeInTheDocument()
+      expect(leftPanel).toHaveClass('border-workflow-block-parma-bg')
+      const rightPanel = container.querySelector('.rounded-r-lg')
+      expect(rightPanel).toBeInTheDocument()
+      expect(rightPanel).toHaveClass('border-workflow-block-parma-bg')
+    })
+
+    it('should render empty state when no provider or model is selected', () => {
+      render(<Trigger isInWorkflow />)
+
+      expect(screen.getByText('workflow:errorMsg.configureModel')).toBeInTheDocument()
+    })
+
+    it('should render non-workflow empty state with warning border', () => {
+      const { container } = render(<Trigger />)
+
+      expect(screen.getByText('workflow:errorMsg.configureModel')).toBeInTheDocument()
+      expect(container.firstChild).toHaveClass('border-text-warning')
+    })
   })
 
-  it('should render fallback model id when current model is missing', () => {
-    render(
-      <Trigger
-        modelId="gpt-4"
-        providerName="openai"
-      />,
-    )
-    expect(screen.getByText('gpt-4')).toBeInTheDocument()
+  describe('Status badges', () => {
+    it('should render credits exhausted badge in non-workflow mode', () => {
+      mockUseCredentialPanelState.mockReturnValue({
+        ...activeCredentialState,
+        variant: 'credits-exhausted',
+        isCreditsExhausted: true,
+        priority: 'credits',
+      })
+
+      render(
+        <Trigger
+          currentProvider={currentProvider}
+          currentModel={currentModel}
+          providerName="openai"
+          modelId="gpt-4"
+        />,
+      )
+
+      expect(screen.getByText('common.modelProvider.selector.creditsExhausted')).toBeInTheDocument()
+      expect(screen.queryByTestId('model-name-mode')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('model-name-features')).not.toBeInTheDocument()
+    })
+
+    it('should render api unavailable badge in non-workflow mode', () => {
+      mockUseCredentialPanelState.mockReturnValue({
+        ...activeCredentialState,
+        variant: 'api-unavailable',
+      })
+
+      render(
+        <Trigger
+          currentProvider={currentProvider}
+          currentModel={currentModel}
+          providerName="openai"
+          modelId="gpt-4"
+        />,
+      )
+
+      expect(screen.getByText('common.modelProvider.selector.apiKeyUnavailable')).toBeInTheDocument()
+    })
+
+    it('should render credits exhausted badge in workflow mode', () => {
+      mockUseCredentialPanelState.mockReturnValue({
+        ...activeCredentialState,
+        variant: 'credits-exhausted',
+        isCreditsExhausted: true,
+        priority: 'credits',
+      })
+
+      render(
+        <Trigger
+          currentProvider={currentProvider}
+          currentModel={currentModel}
+          providerName="openai"
+          modelId="gpt-4"
+          isInWorkflow
+        />,
+      )
+
+      expect(screen.getByText('common.modelProvider.selector.creditsExhausted')).toBeInTheDocument()
+    })
+
+    it('should render api unavailable badge in workflow mode', () => {
+      mockUseCredentialPanelState.mockReturnValue({
+        ...activeCredentialState,
+        variant: 'api-unavailable',
+      })
+
+      render(
+        <Trigger
+          currentProvider={currentProvider}
+          currentModel={currentModel}
+          providerName="openai"
+          modelId="gpt-4"
+          isInWorkflow
+        />,
+      )
+
+      expect(screen.getByText('common.modelProvider.selector.apiKeyUnavailable')).toBeInTheDocument()
+    })
+
+    it('should render incompatible badge when model is deprecated (currentModel missing)', () => {
+      render(
+        <Trigger
+          currentProvider={currentProvider}
+          providerName="openai"
+          modelId="gpt-4"
+        />,
+      )
+
+      expect(screen.getByText('common.modelProvider.selector.incompatible')).toBeInTheDocument()
+    })
+
+    it('should render configure required badge when model status is no-configure', () => {
+      render(
+        <Trigger
+          currentProvider={currentProvider}
+          currentModel={{ ...currentModel, status: 'no-configure' } as typeof currentModel}
+          providerName="openai"
+          modelId="gpt-4"
+        />,
+      )
+
+      expect(screen.getByText('common.modelProvider.selector.configureRequired')).toBeInTheDocument()
+    })
+
+    it('should render disabled badge when model status is disabled', () => {
+      render(
+        <Trigger
+          currentProvider={currentProvider}
+          currentModel={{ ...currentModel, status: 'disabled' } as typeof currentModel}
+          providerName="openai"
+          modelId="gpt-4"
+        />,
+      )
+
+      expect(screen.getByText('common.modelProvider.selector.disabled')).toBeInTheDocument()
+    })
+
+    it('should render incompatible badge when provider plugin is not installed', () => {
+      render(
+        <Trigger
+          modelId="gpt-4"
+          providerName="unknown-provider"
+        />,
+      )
+
+      expect(screen.getByText('common.modelProvider.selector.incompatible')).toBeInTheDocument()
+    })
   })
 
-  // isInWorkflow=true: workflow border class + RiArrowDownSLine arrow
-  it('should render workflow styles when isInWorkflow is true', () => {
-    // Act
-    const { container } = render(
-      <Trigger
-        currentProvider={currentProvider}
-        currentModel={currentModel}
-        isInWorkflow
-      />,
-    )
+  describe('Split layout', () => {
+    it('should use split layout with settings button in non-workflow mode', () => {
+      const { container } = render(
+        <Trigger
+          currentProvider={currentProvider}
+          currentModel={currentModel}
+          providerName="openai"
+          modelId="gpt-4"
+        />,
+      )
 
-    // Assert
-    expect(container.firstChild).toHaveClass('border-workflow-block-parma-bg')
-    expect(container.firstChild).toHaveClass('bg-workflow-block-parma-bg')
-    expect(container.querySelectorAll('svg').length).toBe(2)
-  })
+      const splitContainer = container.querySelector('.rounded-l-lg')
+      expect(splitContainer).toBeInTheDocument()
+      const settingsButton = container.querySelector('.rounded-r-lg')
+      expect(settingsButton).toBeInTheDocument()
+    })
 
-  // disabled=true + hasDeprecated=true: AlertTriangle + deprecated tooltip
-  it('should show deprecated warning when disabled with hasDeprecated', () => {
-    // Act
-    render(
-      <Trigger
-        currentProvider={currentProvider}
-        currentModel={currentModel}
-        disabled
-        hasDeprecated
-      />,
-    )
+    it('should use split layout for error states in non-workflow mode', () => {
+      mockUseCredentialPanelState.mockReturnValue({
+        ...activeCredentialState,
+        variant: 'api-unavailable',
+      })
 
-    // Assert - AlertTriangle renders with warning color
-    const warningIcon = document.querySelector('.text-\\[\\#F79009\\]')
-    expect(warningIcon).toBeInTheDocument()
-  })
+      const { container } = render(
+        <Trigger
+          currentProvider={currentProvider}
+          currentModel={currentModel}
+          providerName="openai"
+          modelId="gpt-4"
+        />,
+      )
 
-  // disabled=true + modelDisabled=true: status text tooltip
-  it('should show model status tooltip when disabled with modelDisabled', () => {
-    // Act
-    render(
-      <Trigger
-        currentProvider={currentProvider}
-        currentModel={{ ...currentModel, status: 'no-configure' } as unknown as typeof currentModel}
-        disabled
-        modelDisabled
-      />,
-    )
-
-    // Assert - AlertTriangle warning icon should be present
-    const warningIcon = document.querySelector('.text-\\[\\#F79009\\]')
-    expect(warningIcon).toBeInTheDocument()
-  })
-
-  it('should render empty tooltip content when disabled without deprecated or modelDisabled', async () => {
-    const user = userEvent.setup()
-    const { container } = render(
-      <Trigger
-        currentProvider={currentProvider}
-        currentModel={currentModel}
-        disabled
-        hasDeprecated={false}
-        modelDisabled={false}
-      />,
-    )
-    const warningIcon = document.querySelector('.text-\\[\\#F79009\\]')
-    expect(warningIcon).toBeInTheDocument()
-    const trigger = container.querySelector('[data-state]')
-    expect(trigger).toBeInTheDocument()
-    await user.hover(trigger as HTMLElement)
-    const tooltip = screen.queryByRole('tooltip')
-    if (tooltip)
-      expect(tooltip).toBeEmptyDOMElement()
-    expect(screen.queryByText('modelProvider.deprecated')).not.toBeInTheDocument()
-    expect(screen.queryByText('No Configure')).not.toBeInTheDocument()
-  })
-
-  // providerName not matching any provider: find() returns undefined
-  it('should render without crashing when providerName does not match any provider', () => {
-    // Act
-    render(
-      <Trigger
-        modelId="gpt-4"
-        providerName="unknown-provider"
-      />,
-    )
-
-    // Assert
-    expect(screen.getByText('gpt-4')).toBeInTheDocument()
+      const splitContainer = container.querySelector('.rounded-l-lg')
+      expect(splitContainer).toBeInTheDocument()
+    })
   })
 })

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx

@@ -1,110 +1,134 @@
-import type { FC } from 'react'
+import type { FC, Ref } from 'react'
 import type {
   Model,
   ModelItem,
   ModelProvider,
 } from '../declarations'
-import { RiArrowDownSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
-import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
-import Tooltip from '@/app/components/base/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/app/components/base/ui/tooltip'
 import { useProviderContext } from '@/context/provider-context'
 import { cn } from '@/utils/classnames'
-import { MODEL_STATUS_TEXT } from '../declarations'
-import { useLanguage } from '../hooks'
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
+import { useCredentialPanelState } from '../provider-added-card/use-credential-panel-state'
+import {
+  deriveTriggerStatus,
+  TRIGGER_STATUS_BADGE_I18N,
+  TRIGGER_STATUS_TOOLTIP_I18N,
+} from './derive-trigger-status'
 
 export type TriggerProps = {
   open?: boolean
-  disabled?: boolean
   currentProvider?: ModelProvider | Model
   currentModel?: ModelItem
   providerName?: string
   modelId?: string
-  hasDeprecated?: boolean
-  modelDisabled?: boolean
   isInWorkflow?: boolean
+  settingsRef?: Ref<HTMLDivElement>
 }
+
 const Trigger: FC<TriggerProps> = ({
-  disabled,
   currentProvider,
   currentModel,
   providerName,
   modelId,
-  hasDeprecated,
-  modelDisabled,
   isInWorkflow,
+  settingsRef,
 }) => {
   const { t } = useTranslation()
-  const language = useLanguage()
   const { modelProviders } = useProviderContext()
+  const currentModelProvider = modelProviders.find(p => p.provider === providerName)
+  const credentialState = useCredentialPanelState(currentModelProvider)
+  const status = deriveTriggerStatus(modelId, providerName, currentModelProvider, currentModel, credentialState)
+  const badgeKey = TRIGGER_STATUS_BADGE_I18N[status]
+  const tooltipKey = TRIGGER_STATUS_TOOLTIP_I18N[status]
+  const isActive = status === 'active'
+  const iconProvider = currentProvider || modelProviders.find(item => item.provider === providerName)
+
+  if (status === 'empty') {
+    return (
+      <div
+        className={cn(
+          'relative flex h-8 min-w-[296px] cursor-pointer items-center rounded-lg px-2',
+          isInWorkflow
+            ? 'border border-text-warning bg-state-warning-hover pr-[30px]'
+            : 'border border-text-warning bg-state-warning-hover ring-inset ring-text-warning hover:ring-[0.5px]',
+        )}
+      >
+        <div className="mr-2 flex h-6 w-6 shrink-0 items-center justify-center">
+          <div className="flex h-5 w-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle">
+            <span className="i-ri-brain-2-line h-3.5 w-3.5 text-text-quaternary" />
+          </div>
+        </div>
+        <div className="mr-1 flex-1 truncate text-[13px] font-normal text-text-secondary">
+          {t('workflow:errorMsg.configureModel')}
+        </div>
+        <span className={cn('i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-tertiary', isInWorkflow && 'absolute right-2 top-[9px] h-3.5 w-3.5')} />
+      </div>
+    )
+  }
 
   return (
-    <div
-      className={cn(
-        'relative flex h-8 cursor-pointer items-center rounded-lg  px-2',
-        !isInWorkflow && 'border ring-inset hover:ring-[0.5px]',
-        !isInWorkflow && (disabled ? 'border-text-warning bg-state-warning-hover ring-text-warning' : 'border-util-colors-indigo-indigo-600 bg-state-accent-hover ring-util-colors-indigo-indigo-600'),
-        isInWorkflow && 'border border-workflow-block-parma-bg bg-workflow-block-parma-bg pr-[30px]  hover:border-components-input-border-active',
-      )}
-    >
-      {
-        currentProvider && (
-          <ModelIcon
-            className="mr-1.5 !h-5 !w-5"
-            provider={currentProvider}
-            modelName={currentModel?.model}
-          />
-        )
-      }
-      {
-        !currentProvider && (
-          <ModelIcon
-            className="mr-1.5 !h-5 !w-5"
-            provider={modelProviders.find(item => item.provider === providerName)}
-            modelName={modelId}
-          />
-        )
-      }
-      {
-        currentModel && (
-          <ModelName
-            className="mr-1.5 text-text-primary"
-            modelItem={currentModel}
-            showMode
-            showFeatures
-          />
-        )
-      }
-      {
-        !currentModel && (
-          <div className="mr-1 truncate text-[13px] font-medium text-text-primary">
-            {modelId}
+    <div className="flex h-8 min-w-[296px] cursor-pointer items-center gap-px overflow-hidden rounded-lg">
+      <div className={cn('flex flex-1 items-center gap-0.5 rounded-l-lg p-1', isInWorkflow ? 'border border-workflow-block-parma-bg bg-workflow-block-parma-bg' : 'bg-components-input-bg-normal')}>
+        <ModelIcon
+          className="p-0.5"
+          provider={iconProvider}
+          modelName={currentModel?.model || modelId}
+        />
+        <div className="flex flex-1 items-center truncate px-1 py-[3px]">
+          {currentModel
+            ? (
+                <ModelName
+                  className="grow"
+                  modelItem={currentModel}
+                  showMode={isActive}
+                  showFeatures={isActive}
+                />
+              )
+            : <div className="truncate text-[13px] font-normal text-components-input-text-filled">{modelId}</div>}
+        </div>
+        {badgeKey && (
+          tooltipKey
+            ? (
+                <Tooltip>
+                  <TooltipTrigger
+                    render={(
+                      <div className="flex shrink-0 items-center pr-0.5">
+                        <div className="flex min-w-[20px] shrink-0 items-center justify-center gap-[3px] rounded-md border border-text-warning bg-components-badge-bg-dimm px-[5px] py-0.5">
+                          <span className="i-ri-alert-fill h-3 w-3 text-text-warning" />
+                          <span className="whitespace-nowrap text-text-warning system-xs-medium">
+                            {t(badgeKey as 'modelProvider.selector.incompatible', { ns: 'common' })}
+                          </span>
+                        </div>
+                      </div>
+                    )}
+                  />
+                  <TooltipContent placement="top">
+                    {t(tooltipKey as 'modelProvider.selector.incompatibleTip', { ns: 'common' })}
+                  </TooltipContent>
+                </Tooltip>
+              )
+            : (
+                <div className="flex shrink-0 items-center pr-0.5">
+                  <div className="flex min-w-[20px] shrink-0 items-center justify-center gap-[3px] rounded-md border border-text-warning bg-components-badge-bg-dimm px-[5px] py-0.5">
+                    <span className="i-ri-alert-fill h-3 w-3 text-text-warning" />
+                    <span className="whitespace-nowrap text-text-warning system-xs-medium">
+                      {t(badgeKey as 'modelProvider.selector.incompatible', { ns: 'common' })}
+                    </span>
+                  </div>
+                </div>
+              )
+        )}
+        {!badgeKey && (
+          <div className="flex shrink-0 items-center pr-1">
+            <span className="i-ri-arrow-down-s-line h-4 w-4 text-text-tertiary" />
           </div>
-        )
-      }
-      {
-        disabled
-          ? (
-              <Tooltip
-                popupContent={
-                  hasDeprecated
-                    ? t('modelProvider.deprecated', { ns: 'common' })
-                    : (modelDisabled && currentModel)
-                        ? MODEL_STATUS_TEXT[currentModel.status as string][language]
-                        : ''
-                }
-              >
-                <AlertTriangle className="h-4 w-4 text-[#F79009]" />
-              </Tooltip>
-            )
-          : (
-              <SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-text-tertiary', 'h-4 w-4 shrink-0')} />
-            )
-      }
-      {isInWorkflow && (<RiArrowDownSLine className="absolute right-2 top-[9px] h-3.5 w-3.5 text-text-tertiary" />)}
+        )}
+      </div>
+      <div ref={settingsRef} className={cn('flex shrink-0 items-center justify-center rounded-r-lg p-2', isInWorkflow ? 'border border-workflow-block-parma-bg bg-workflow-block-parma-bg' : 'bg-components-button-tertiary-bg')}>
+        <span className="i-ri-equalizer-2-line h-4 w-4 text-text-tertiary" />
+      </div>
     </div>
   )
 }

web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.spec.tsx

@@ -1,61 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import DeprecatedModelTrigger from './deprecated-model-trigger'
-
-vi.mock('../model-icon', () => ({
-  default: ({ modelName }: { modelName: string }) => <span>{modelName}</span>,
-}))
-
-const mockUseProviderContext = vi.hoisted(() => vi.fn())
-vi.mock('@/context/provider-context', () => ({
-  useProviderContext: mockUseProviderContext,
-}))
-
-describe('DeprecatedModelTrigger', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockUseProviderContext.mockReturnValue({
-      modelProviders: [{ provider: 'someone-else' }, { provider: 'openai' }],
-    })
-  })
-
-  it('should render model name', () => {
-    render(<DeprecatedModelTrigger modelName="gpt-deprecated" providerName="openai" />)
-    expect(screen.getAllByText('gpt-deprecated').length).toBeGreaterThan(0)
-  })
-
-  it('should show deprecated tooltip when warn icon is hovered', async () => {
-    const { container } = render(
-      <DeprecatedModelTrigger
-        modelName="gpt-deprecated"
-        providerName="openai"
-        showWarnIcon
-      />,
-    )
-
-    const tooltipTrigger = container.querySelector('[data-state]') as HTMLElement
-    fireEvent.mouseEnter(tooltipTrigger)
-
-    expect(await screen.findByText('common.modelProvider.deprecated')).toBeInTheDocument()
-  })
-
-  it('should render when provider is not found', () => {
-    mockUseProviderContext.mockReturnValue({
-      modelProviders: [{ provider: 'someone-else' }],
-    })
-
-    render(<DeprecatedModelTrigger modelName="gpt-deprecated" providerName="openai" />)
-    expect(screen.getAllByText('gpt-deprecated').length).toBeGreaterThan(0)
-  })
-
-  it('should not show deprecated tooltip when warn icon is disabled', async () => {
-    render(
-      <DeprecatedModelTrigger
-        modelName="gpt-deprecated"
-        providerName="openai"
-        showWarnIcon={false}
-      />,
-    )
-
-    expect(screen.queryByText('common.modelProvider.deprecated')).not.toBeInTheDocument()
-  })
-})

web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx

@@ -1,54 +0,0 @@
-import type { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
-import Tooltip from '@/app/components/base/tooltip'
-import { useProviderContext } from '@/context/provider-context'
-import { cn } from '@/utils/classnames'
-import ModelIcon from '../model-icon'
-
-type ModelTriggerProps = {
-  modelName: string
-  providerName: string
-  className?: string
-  showWarnIcon?: boolean
-  contentClassName?: string
-}
-const ModelTrigger: FC<ModelTriggerProps> = ({
-  modelName,
-  providerName,
-  className,
-  showWarnIcon,
-  contentClassName,
-}) => {
-  const { t } = useTranslation()
-  const { modelProviders } = useProviderContext()
-  const currentProvider = modelProviders.find(provider => provider.provider === providerName)
-
-  return (
-    <div
-      className={cn('group box-content flex h-8 grow cursor-pointer items-center gap-1 rounded-lg bg-components-input-bg-disabled p-[3px] pl-1', className)}
-    >
-      <div className={cn('flex w-full items-center', contentClassName)}>
-        <div className="flex min-w-0 flex-1 items-center gap-1 py-[1px]">
-          <ModelIcon
-            className="h-4 w-4"
-            provider={currentProvider}
-            modelName={modelName}
-          />
-          <div className="system-sm-regular truncate text-components-input-text-filled">
-            {modelName}
-          </div>
-        </div>
-        <div className="flex shrink-0 items-center justify-center">
-          {showWarnIcon && (
-            <Tooltip popupContent={t('modelProvider.deprecated', { ns: 'common' })}>
-              <AlertTriangle className="h-4 w-4 text-text-warning-secondary" />
-            </Tooltip>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default ModelTrigger

web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.spec.tsx

@@ -1,31 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import EmptyTrigger from './empty-trigger'
-
-describe('EmptyTrigger', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should render configure model text', () => {
-    render(<EmptyTrigger open={false} />)
-    expect(screen.getByText('plugin.detailPanel.configureModel')).toBeInTheDocument()
-  })
-
-  // open=true: hover bg class present
-  it('should apply hover background class when open is true', () => {
-    // Act
-    const { container } = render(<EmptyTrigger open={true} />)
-
-    // Assert
-    expect(container.firstChild).toHaveClass('bg-components-input-bg-hover')
-  })
-
-  // className prop truthy: custom className appears on root
-  it('should apply custom className when provided', () => {
-    // Act
-    const { container } = render(<EmptyTrigger open={false} className="custom-class" />)
-
-    // Assert
-    expect(container.firstChild).toHaveClass('custom-class')
-  })
-})

web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx

@@ -1,42 +0,0 @@
-import type { FC } from 'react'
-import { RiEqualizer2Line } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
-import { cn } from '@/utils/classnames'
-
-type ModelTriggerProps = {
-  open: boolean
-  className?: string
-}
-const ModelTrigger: FC<ModelTriggerProps> = ({
-  open,
-  className,
-}) => {
-  const { t } = useTranslation()
-  return (
-    <div
-      className={cn(
-        'flex cursor-pointer items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 hover:bg-components-input-bg-hover',
-        open && 'bg-components-input-bg-hover',
-        className,
-      )}
-    >
-      <div className="flex grow items-center">
-        <div className="mr-1.5 flex h-4 w-4 items-center justify-center rounded-[5px] border border-dashed border-divider-regular">
-          <CubeOutline className="h-3 w-3 text-text-quaternary" />
-        </div>
-        <div
-          className="truncate text-[13px] text-text-tertiary"
-          title="Configure model"
-        >
-          {t('detailPanel.configureModel', { ns: 'plugin' })}
-        </div>
-      </div>
-      <div className="flex h-4 w-4 shrink-0 items-center justify-center">
-        <RiEqualizer2Line className="h-3.5 w-3.5 text-text-tertiary" />
-      </div>
-    </div>
-  )
-}
-
-export default ModelTrigger

web/app/components/header/account-setting/model-provider-page/model-selector/index.spec.tsx

@@ -1,4 +1,6 @@
-import type { Model, ModelItem } from '../declarations'
+import type { ReactNode } from 'react'
+import type { DefaultModel, Model, ModelItem } from '../declarations'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { fireEvent, render, screen } from '@testing-library/react'
 import {
   ConfigurationMethodEnum,
@@ -7,16 +9,20 @@ import {
 } from '../declarations'
 import ModelSelector from './index'
 
-vi.mock('./model-trigger', () => ({
-  default: () => <div>model-trigger</div>,
-}))
+vi.mock('./model-selector-trigger', () => ({
+  default: ({
+    currentProvider,
+    currentModel,
+    defaultModel,
+  }: { currentProvider?: Model, currentModel?: ModelItem, defaultModel?: DefaultModel }) => {
+    if (currentProvider && currentModel)
+      return <div>model-trigger</div>
 
-vi.mock('./deprecated-model-trigger', () => ({
-  default: ({ modelName }: { modelName: string }) => <div>{`deprecated:${modelName}`}</div>,
-}))
+    if (defaultModel)
+      return <div>{`deprecated:${defaultModel.model}`}</div>
 
-vi.mock('./empty-trigger', () => ({
-  default: () => <div>empty-trigger</div>,
+    return <div>empty-trigger</div>
+  },
 }))
 
 vi.mock('./popup', () => ({
@@ -52,24 +58,43 @@ const makeModel = (overrides: Partial<Model> = {}): Model => ({
   ...overrides,
 })
 
+const createTestQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: { retry: false },
+    mutations: { retry: false },
+  },
+})
+
+const renderWithQueryClient = (node: ReactNode) => {
+  const queryClient = createTestQueryClient()
+  return render(
+    <QueryClientProvider client={queryClient}>
+      {node}
+    </QueryClientProvider>,
+  )
+}
+
 describe('ModelSelector', () => {
   beforeEach(() => {
     vi.clearAllMocks()
   })
 
   it('should toggle popup and close it after selecting a model', () => {
-    render(<ModelSelector modelList={[makeModel()]} />)
+    renderWithQueryClient(<ModelSelector modelList={[makeModel()]} />)
 
-    fireEvent.click(screen.getByText('empty-trigger'))
+    const triggerButton = screen.getByRole('button', { name: 'empty-trigger' })
+
+    fireEvent.click(triggerButton)
+    expect(triggerButton).toHaveAttribute('aria-expanded', 'true')
     expect(screen.getByText('select')).toBeInTheDocument()
 
     fireEvent.click(screen.getByText('select'))
-    expect(screen.queryByText('select')).not.toBeInTheDocument()
+    expect(triggerButton).toHaveAttribute('aria-expanded', 'false')
   })
 
   it('should call onSelect when provided', () => {
     const onSelect = vi.fn()
-    render(<ModelSelector modelList={[makeModel()]} onSelect={onSelect} />)
+    renderWithQueryClient(<ModelSelector modelList={[makeModel()]} onSelect={onSelect} />)
 
     fireEvent.click(screen.getByText('empty-trigger'))
     fireEvent.click(screen.getByText('select'))
@@ -78,24 +103,26 @@ describe('ModelSelector', () => {
   })
 
   it('should close popup when popup requests hide', () => {
-    render(<ModelSelector modelList={[makeModel()]} />)
+    renderWithQueryClient(<ModelSelector modelList={[makeModel()]} />)
 
-    fireEvent.click(screen.getByText('empty-trigger'))
+    const triggerButton = screen.getByRole('button', { name: 'empty-trigger' })
+    fireEvent.click(triggerButton)
+    expect(triggerButton).toHaveAttribute('aria-expanded', 'true')
     expect(screen.getByText('hide')).toBeInTheDocument()
 
     fireEvent.click(screen.getByText('hide'))
-    expect(screen.queryByText('hide')).not.toBeInTheDocument()
+    expect(triggerButton).toHaveAttribute('aria-expanded', 'false')
   })
 
   it('should not open popup when readonly', () => {
-    render(<ModelSelector modelList={[makeModel()]} readonly />)
+    renderWithQueryClient(<ModelSelector modelList={[makeModel()]} readonly />)
 
     fireEvent.click(screen.getByText('empty-trigger'))
     expect(screen.queryByText('select')).not.toBeInTheDocument()
   })
 
   it('should render deprecated trigger when defaultModel is not in list', () => {
-    const { rerender } = render(
+    const { unmount } = renderWithQueryClient(
       <ModelSelector
         defaultModel={{ provider: 'openai', model: 'missing-model' }}
         modelList={[makeModel()]}
@@ -104,7 +131,8 @@ describe('ModelSelector', () => {
 
     expect(screen.getByText('deprecated:missing-model')).toBeInTheDocument()
 
-    rerender(
+    unmount()
+    renderWithQueryClient(
       <ModelSelector
         defaultModel={{ provider: '', model: '' }}
         modelList={[makeModel()]}
@@ -114,7 +142,7 @@ describe('ModelSelector', () => {
   })
 
   it('should render model trigger when defaultModel matches', () => {
-    render(
+    renderWithQueryClient(
       <ModelSelector
         defaultModel={{ provider: 'openai', model: 'gpt-4' }}
         modelList={[makeModel()]}

web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx

@@ -7,15 +7,12 @@ import type {
 } from '../declarations'
 import { useState } from 'react'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@/utils/classnames'
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/app/components/base/ui/popover'
 import { useCurrentProviderAndModel } from '../hooks'
-import DeprecatedModelTrigger from './deprecated-model-trigger'
-import EmptyTrigger from './empty-trigger'
-import ModelTrigger from './model-trigger'
+import ModelSelectorTrigger from './model-selector-trigger'
 import Popup from './popup'
 
 type ModelSelectorProps = {
@@ -24,6 +21,7 @@ type ModelSelectorProps = {
   triggerClassName?: string
   popupClassName?: string
   onSelect?: (model: DefaultModel) => void
+  onHide?: () => void
   readonly?: boolean
   scopeFeatures?: ModelFeatureEnum[]
   deprecatedClassName?: string
@@ -35,10 +33,11 @@ const ModelSelector: FC<ModelSelectorProps> = ({
   triggerClassName,
   popupClassName,
   onSelect,
+  onHide,
   readonly,
   scopeFeatures = [],
   deprecatedClassName,
-  showDeprecatedWarnIcon = false,
+  showDeprecatedWarnIcon = true,
 }) => {
   const [open, setOpen] = useState(false)
   const {
@@ -56,67 +55,54 @@ const ModelSelector: FC<ModelSelectorProps> = ({
       onSelect({ provider, model: model.model })
   }
 
-  const handleToggle = () => {
-    if (readonly)
-      return
-
-    setOpen(v => !v)
-  }
-
   return (
-    <PortalToFollowElem
+    <Popover
       open={open}
-      onOpenChange={setOpen}
-      placement="bottom-start"
-      offset={4}
+      onOpenChange={(newOpen) => {
+        if (readonly)
+          return
+        setOpen(newOpen)
+      }}
     >
-      <div className={cn('relative')}>
-        <PortalToFollowElemTrigger
-          onClick={handleToggle}
-          className="block"
-        >
-          {
-            currentModel && currentProvider && (
-              <ModelTrigger
-                open={open}
-                provider={currentProvider}
-                model={currentModel}
-                className={triggerClassName}
-                readonly={readonly}
-              />
-            )
-          }
-          {
-            !currentModel && defaultModel && (
-              <DeprecatedModelTrigger
-                modelName={defaultModel?.model || ''}
-                providerName={defaultModel?.provider || ''}
-                className={triggerClassName}
-                showWarnIcon={showDeprecatedWarnIcon}
-                contentClassName={deprecatedClassName}
-              />
-            )
-          }
-          {
-            !defaultModel && (
-              <EmptyTrigger
-                open={open}
-                className={triggerClassName}
-              />
-            )
-          }
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className={`z-[1002] ${popupClassName}`}>
-          <Popup
-            defaultModel={defaultModel}
-            modelList={modelList}
-            onSelect={handleSelect}
-            scopeFeatures={scopeFeatures}
-            onHide={() => setOpen(false)}
-          />
-        </PortalToFollowElemContent>
-      </div>
-    </PortalToFollowElem>
+      <PopoverTrigger
+        render={(
+          <button
+            type="button"
+            className="block w-full border-0 bg-transparent p-0 text-left"
+            disabled={readonly}
+          >
+            <ModelSelectorTrigger
+              currentProvider={currentProvider}
+              currentModel={currentModel}
+              defaultModel={defaultModel}
+              open={open}
+              readonly={readonly}
+              className={triggerClassName}
+              deprecatedClassName={deprecatedClassName}
+              showDeprecatedWarnIcon={showDeprecatedWarnIcon}
+            />
+          </button>
+        )}
+      />
+      <PopoverContent
+        placement="bottom-start"
+        sideOffset={4}
+        className={popupClassName}
+        popupClassName="overflow-hidden rounded-lg"
+        popupProps={{ style: { minWidth: '320px', width: 'var(--anchor-width, auto)' } }}
+      >
+        <Popup
+          defaultModel={defaultModel}
+          modelList={modelList}
+          onSelect={handleSelect}
+          scopeFeatures={scopeFeatures}
+          onHide={() => {
+            setOpen(false)
+            onHide?.()
+          }}
+        />
+      </PopoverContent>
+    </Popover>
   )
 }
 

web/app/components/header/account-setting/model-provider-page/model-selector/model-selector-trigger.spec.tsx

@@ -0,0 +1,264 @@
+import type { Model, ModelItem } from '../declarations'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {
+  ConfigurationMethodEnum,
+  ModelFeatureEnum,
+  ModelStatusEnum,
+  ModelTypeEnum,
+} from '../declarations'
+import ModelSelectorTrigger from './model-selector-trigger'
+
+const mockUseProviderContext = vi.hoisted(() => vi.fn())
+const mockUseCredentialPanelState = vi.hoisted(() => vi.fn())
+vi.mock('@/context/provider-context', () => ({
+  useProviderContext: mockUseProviderContext,
+}))
+vi.mock('../provider-added-card/use-credential-panel-state', () => ({
+  useCredentialPanelState: mockUseCredentialPanelState,
+}))
+
+const createModelItem = (overrides: Partial<ModelItem> = {}): ModelItem => ({
+  model: 'gpt-4',
+  label: { en_US: 'GPT-4', zh_Hans: 'GPT-4' },
+  model_type: ModelTypeEnum.textGeneration,
+  features: [ModelFeatureEnum.vision],
+  fetch_from: ConfigurationMethodEnum.predefinedModel,
+  status: ModelStatusEnum.active,
+  model_properties: { mode: 'chat', context_size: 4096 },
+  load_balancing_enabled: false,
+  ...overrides,
+})
+
+const createModel = (overrides: Partial<Model> = {}): Model => ({
+  provider: 'openai',
+  icon_small: {
+    en_US: 'https://example.com/openai-light.png',
+    zh_Hans: 'https://example.com/openai-light.png',
+  },
+  icon_small_dark: {
+    en_US: 'https://example.com/openai-dark.png',
+    zh_Hans: 'https://example.com/openai-dark.png',
+  },
+  label: { en_US: 'OpenAI', zh_Hans: 'OpenAI' },
+  models: [createModelItem()],
+  status: ModelStatusEnum.active,
+  ...overrides,
+})
+
+describe('ModelSelectorTrigger', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseProviderContext.mockReturnValue({
+      modelProviders: [createModel()],
+    })
+    mockUseCredentialPanelState.mockReturnValue({
+      variant: 'credits-active',
+      priority: 'credits',
+      supportsCredits: true,
+      showPrioritySwitcher: true,
+      hasCredentials: false,
+      isCreditsExhausted: false,
+      credentialName: undefined,
+      credits: 100,
+    })
+  })
+
+  describe('Rendering', () => {
+    it('should render empty state when no model is selected', () => {
+      const { container } = render(<ModelSelectorTrigger />)
+
+      expect(screen.getByText('plugin.detailPanel.configureModel')).toBeInTheDocument()
+      expect(container.querySelector('.i-ri-arrow-down-s-line')).toBeInTheDocument()
+      expect(container.firstElementChild).toHaveClass('bg-components-input-bg-normal')
+    })
+
+    it('should render selected model details when model is active', () => {
+      const currentProvider = createModel()
+      const currentModel = createModelItem()
+      const { container } = render(
+        <ModelSelectorTrigger
+          currentProvider={currentProvider}
+          currentModel={currentModel}
+        />,
+      )
+
+      expect(screen.getByText('GPT-4')).toBeInTheDocument()
+      expect(screen.getByText('CHAT')).toBeInTheDocument()
+      expect(container.querySelector('.i-ri-arrow-down-s-line')).toBeInTheDocument()
+      expect(container.firstElementChild).toHaveClass('bg-components-input-bg-normal')
+    })
+
+    it('should render deprecated default model and disabled style when selection is missing', () => {
+      const { container } = render(
+        <ModelSelectorTrigger
+          defaultModel={{ provider: 'openai', model: 'legacy-model' }}
+        />,
+      )
+
+      expect(screen.getByText('legacy-model')).toBeInTheDocument()
+      expect(container.firstElementChild).toHaveClass('bg-components-input-bg-disabled')
+      expect(container.querySelector('.i-ri-arrow-down-s-line')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Props', () => {
+    it('should apply custom className to root element', () => {
+      const { container } = render(<ModelSelectorTrigger className="custom-trigger" />)
+
+      expect(container.firstElementChild).toHaveClass('custom-trigger')
+    })
+
+    it('should apply open background style when open is true and model is active', () => {
+      const { container } = render(
+        <ModelSelectorTrigger
+          currentProvider={createModel()}
+          currentModel={createModelItem()}
+          open
+        />,
+      )
+
+      expect(container.firstElementChild).toHaveClass('bg-components-input-bg-hover')
+    })
+
+    it('should hide the expand arrow when readonly is true', () => {
+      const { container } = render(
+        <ModelSelectorTrigger
+          currentProvider={createModel()}
+          currentModel={createModelItem()}
+          readonly
+        />,
+      )
+
+      expect(container.querySelector('.i-ri-arrow-down-s-line')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Status Handling', () => {
+    it('should show status badge when selected model is not active and not readonly', () => {
+      render(
+        <ModelSelectorTrigger
+          currentProvider={createModel()}
+          currentModel={createModelItem({ status: ModelStatusEnum.noConfigure })}
+        />,
+      )
+
+      expect(screen.getByText('common.modelProvider.selector.configureRequired')).toBeInTheDocument()
+    })
+
+    it('should apply credits exhausted badge style when model quota is exceeded', () => {
+      mockUseCredentialPanelState.mockReturnValue({
+        variant: 'credits-exhausted',
+        priority: 'credits',
+        supportsCredits: true,
+        showPrioritySwitcher: true,
+        hasCredentials: false,
+        isCreditsExhausted: true,
+        credentialName: undefined,
+        credits: 0,
+      })
+
+      render(
+        <ModelSelectorTrigger
+          currentProvider={createModel()}
+          currentModel={createModelItem()}
+        />,
+      )
+
+      expect(screen.getByText('common.modelProvider.selector.creditsExhausted').parentElement).toHaveClass('bg-components-badge-bg-dimm')
+      expect(screen.queryByText('CHAT')).not.toBeInTheDocument()
+    })
+
+    it('should hide model meta when api key is unavailable', () => {
+      mockUseCredentialPanelState.mockReturnValue({
+        variant: 'api-unavailable',
+        priority: 'apiKey',
+        supportsCredits: true,
+        showPrioritySwitcher: true,
+        hasCredentials: true,
+        isCreditsExhausted: false,
+        credentialName: 'Primary Key',
+        credits: 0,
+      })
+
+      render(
+        <ModelSelectorTrigger
+          currentProvider={createModel()}
+          currentModel={createModelItem()}
+        />,
+      )
+
+      expect(screen.getByText('common.modelProvider.selector.apiKeyUnavailable')).toBeInTheDocument()
+      expect(screen.queryByText('CHAT')).not.toBeInTheDocument()
+    })
+
+    it('should show disabled badge when selected model is disabled', () => {
+      render(
+        <ModelSelectorTrigger
+          currentProvider={createModel()}
+          currentModel={createModelItem({ status: ModelStatusEnum.disabled })}
+        />,
+      )
+
+      expect(screen.getByText('common.modelProvider.selector.disabled')).toBeInTheDocument()
+      expect(screen.queryByText('CHAT')).not.toBeInTheDocument()
+    })
+
+    it('should not show status badge when selected model is readonly', () => {
+      render(
+        <ModelSelectorTrigger
+          currentProvider={createModel()}
+          currentModel={createModelItem({ status: ModelStatusEnum.noConfigure })}
+          readonly
+        />,
+      )
+
+      expect(screen.queryByText('common.modelProvider.selector.configureRequired')).not.toBeInTheDocument()
+    })
+
+    it('should show incompatible tooltip when hovering no-permission status badge', async () => {
+      const user = userEvent.setup()
+      render(
+        <ModelSelectorTrigger
+          currentProvider={createModel()}
+          currentModel={createModelItem({ status: ModelStatusEnum.noPermission })}
+        />,
+      )
+
+      expect(screen.queryByText('CHAT')).not.toBeInTheDocument()
+      await user.hover(screen.getByText('common.modelProvider.selector.incompatible'))
+
+      expect(await screen.findByText('common.modelProvider.selector.incompatibleTip')).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('should show incompatible badge for deprecated selection', async () => {
+      const user = userEvent.setup()
+      render(
+        <ModelSelectorTrigger
+          defaultModel={{ provider: 'openai', model: 'legacy-model' }}
+        />,
+      )
+
+      expect(screen.getByText('common.modelProvider.selector.incompatible')).toBeInTheDocument()
+      await user.hover(screen.getByText('common.modelProvider.selector.incompatible'))
+
+      expect(await screen.findByText('common.modelProvider.selector.incompatibleTip')).toBeInTheDocument()
+    })
+
+    it('should render fallback icon when deprecated provider is not found', () => {
+      mockUseProviderContext.mockReturnValue({
+        modelProviders: [],
+      })
+      const { container } = render(
+        <ModelSelectorTrigger
+          defaultModel={{ provider: 'unknown-provider', model: 'legacy-model' }}
+        />,
+      )
+
+      expect(container.querySelector('img[alt="model-icon"]')).not.toBeInTheDocument()
+      expect(container.querySelector('svg')).toBeInTheDocument()
+    })
+  })
+})