From b68a631948feb085673d57aa04c9a8cfaef33301 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 30 Apr 2026 12:09:41 +0800
Subject: [PATCH 01/15] refactor: migrate form selects to dify-ui

---
 .../src/select/__tests__/index.spec.tsx       |   6 +
 packages/dify-ui/src/select/index.tsx         |   2 +-
 .../base/__tests__/base-field.spec.tsx        |  41 +-
 .../base/form/components/base/base-field.tsx  | 168 ++-
 .../field/__tests__/custom-select.spec.tsx    |  49 -
 .../field/__tests__/select.spec.tsx           |  12 +-
 .../form/components/field/custom-select.tsx   |  41 -
 .../__tests__/index.spec.tsx                  |  10 +-
 .../__tests__/trigger.spec.tsx                |   3 +-
 .../field/input-type-select/index.tsx         |  61 +-
 .../field/input-type-select/trigger.tsx       |  35 +-
 .../base/form/components/field/select.tsx     |  74 +-
 .../base/form/form-scenarios/base/types.ts    |   2 +-
 web/app/components/base/form/index.tsx        |   2 -
 .../base/select/__tests__/custom.spec.tsx     | 124 ---
 .../base/select/__tests__/index.spec.tsx      | 957 ------------------
 .../base/select/__tests__/locale.spec.tsx     | 115 ---
 .../base/select/__tests__/pure.spec.tsx       | 197 ----
 web/app/components/base/select/custom.tsx     | 171 ----
 .../components/base/select/index.stories.tsx  | 572 -----------
 web/app/components/base/select/index.tsx      | 441 --------
 web/app/components/base/select/locale.tsx     |  64 --
 web/app/components/base/select/pure.tsx       | 207 ----
 .../components/parameter-table.tsx            |   2 +-
 web/docs/overlay-migration.md                 |   1 -
 web/eslint.constants.mjs                      |  12 -
 26 files changed, 299 insertions(+), 3070 deletions(-)
 delete mode 100644 web/app/components/base/form/components/field/__tests__/custom-select.spec.tsx
 delete mode 100644 web/app/components/base/form/components/field/custom-select.tsx
 delete mode 100644 web/app/components/base/select/__tests__/custom.spec.tsx
 delete mode 100644 web/app/components/base/select/__tests__/index.spec.tsx
 delete mode 100644 web/app/components/base/select/__tests__/locale.spec.tsx
 delete mode 100644 web/app/components/base/select/__tests__/pure.spec.tsx
 delete mode 100644 web/app/components/base/select/custom.tsx
 delete mode 100644 web/app/components/base/select/index.stories.tsx
 delete mode 100644 web/app/components/base/select/index.tsx
 delete mode 100644 web/app/components/base/select/locale.tsx
 delete mode 100644 web/app/components/base/select/pure.tsx

diff --git a/packages/dify-ui/src/select/__tests__/index.spec.tsx b/packages/dify-ui/src/select/__tests__/index.spec.tsx
index f2f3221eda..ac8be5917e 100644
--- a/packages/dify-ui/src/select/__tests__/index.spec.tsx
+++ b/packages/dify-ui/src/select/__tests__/index.spec.tsx
@@ -170,6 +170,12 @@ describe('Select wrappers', () => {
 
       expect(screen.getByRole('combobox', { name: 'city select' }).element().querySelector('.i-ri-arrow-down-s-line')).toBeInTheDocument()
     })
+
+    it('should include open state feedback classes', async () => {
+      const screen = await renderOpenSelect()
+
+      expect(screen.getByRole('combobox', { name: 'city select' }).element().className).toContain('data-open:bg-state-base-hover-alt')
+    })
   })
 
   describe('SelectContent', () => {
diff --git a/packages/dify-ui/src/select/index.tsx b/packages/dify-ui/src/select/index.tsx
index 017093c584..2f2f91d9c6 100644
--- a/packages/dify-ui/src/select/index.tsx
+++ b/packages/dify-ui/src/select/index.tsx
@@ -21,7 +21,7 @@ export const SelectGroup = BaseSelect.Group
 const selectTriggerVariants = cva(
   [
     'group flex w-full items-center border-0 bg-components-input-bg-normal text-left text-components-input-text-filled outline-hidden',
-    'hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt',
+    'hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt data-open:bg-state-base-hover-alt',
     'data-placeholder:text-components-input-text-placeholder',
     'data-readonly:cursor-default data-readonly:bg-transparent data-readonly:hover:bg-transparent',
     'data-disabled:cursor-not-allowed data-disabled:bg-components-input-bg-disabled data-disabled:text-components-input-text-filled-disabled data-disabled:hover:bg-components-input-bg-disabled',
diff --git a/web/app/components/base/form/components/base/__tests__/base-field.spec.tsx b/web/app/components/base/form/components/base/__tests__/base-field.spec.tsx
index 54d7accad4..a5a84b8738 100644
--- a/web/app/components/base/form/components/base/__tests__/base-field.spec.tsx
+++ b/web/app/components/base/form/components/base/__tests__/base-field.spec.tsx
@@ -2,6 +2,7 @@ import type { AnyFieldApi } from '@tanstack/react-form'
 import type { FormSchema } from '@/app/components/base/form/types'
 import { useForm } from '@tanstack/react-form'
 import { act, fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { FormItemValidateStatusEnum, FormTypeEnum } from '@/app/components/base/form/types'
 import BaseField from '../base-field'
 
@@ -238,6 +239,7 @@ describe('BaseField', () => {
   })
 
   it('should render dynamic options and allow selecting one', async () => {
+    const user = userEvent.setup()
     mockDynamicOptions.mockReturnValue({
       data: {
         options: [
@@ -258,13 +260,42 @@ describe('BaseField', () => {
       defaultValues: { plugin_option: '' },
     })
 
-    await act(async () => {
-      fireEvent.click(screen.getByText('common.placeholder.input'))
+    await user.click(screen.getByRole('combobox', { name: 'Plugin option' }))
+    await user.click(screen.getByRole('option', { name: 'Option A' }))
+    expect(screen.getByRole('combobox', { name: 'Plugin option' })).toHaveTextContent('Option A')
+  })
+
+  it('should preserve multiple dynamic select values', async () => {
+    const user = userEvent.setup()
+    mockDynamicOptions.mockReturnValue({
+      data: {
+        options: [
+          { label: { en_US: 'Option A', zh_Hans: '选项A' }, value: 'a' },
+          { label: { en_US: 'Option B', zh_Hans: '选项B' }, value: 'b' },
+        ],
+      },
+      isLoading: false,
+      error: null,
     })
-    await act(async () => {
-      fireEvent.click(screen.getByText('Option A'))
+
+    renderBaseField({
+      formSchema: {
+        type: FormTypeEnum.dynamicSelect,
+        name: 'plugin_options',
+        label: 'Plugin options',
+        required: false,
+        multiple: true,
+      },
+      defaultValues: { plugin_options: ['a'] },
+      showCurrentValue: true,
     })
-    expect(screen.getByText('Option A')).toBeInTheDocument()
+
+    expect(screen.getByRole('combobox', { name: 'Plugin options' })).toHaveTextContent('common.dynamicSelect.selected')
+
+    await user.click(screen.getByRole('combobox', { name: 'Plugin options' }))
+    await user.click(screen.getByRole('option', { name: 'Option B' }))
+
+    expect(screen.getByTestId('field-value')).toHaveTextContent('a,b')
   })
 
   it('should update boolean field when users choose false', async () => {
diff --git a/web/app/components/base/form/components/base/base-field.tsx b/web/app/components/base/form/components/base/base-field.tsx
index b1e17bdefc..a4159cbc6f 100644
--- a/web/app/components/base/form/components/base/base-field.tsx
+++ b/web/app/components/base/form/components/base/base-field.tsx
@@ -1,6 +1,15 @@
 import type { AnyFieldApi } from '@tanstack/react-form'
 import type { FieldState, FormSchema, TypeWithI18N } from '@/app/components/base/form/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectTrigger,
+  SelectValue,
+} from '@langgenius/dify-ui/select'
 import { useStore } from '@tanstack/react-form'
 import {
   isValidElement,
@@ -14,7 +23,6 @@ import { FormItemValidateStatusEnum, FormTypeEnum } from '@/app/components/base/
 import Input from '@/app/components/base/input'
 import Radio from '@/app/components/base/radio'
 import RadioE from '@/app/components/base/radio/ui'
-import PureSelect from '@/app/components/base/select/pure'
 import Tooltip from '@/app/components/base/tooltip'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { useTriggerPluginDynamicOptions } from '@/service/use-triggers'
@@ -121,7 +129,7 @@ const BaseField = ({
     if (!results[1])
       results[1] = t('placeholder.input', { ns: 'common' })
     return results
-  }, [label, placeholder, tooltip, description, help, renderI18nObject])
+  }, [label, placeholder, tooltip, description, help, renderI18nObject, t])
 
   const watchedVariables = useMemo(() => {
     const variables = new Set<string>()
@@ -184,6 +192,13 @@ const BaseField = ({
     field.handleChange(value)
     onChange?.(field.name, value)
   }, [field, onChange])
+  const dynamicPlaceholder = isDynamicOptionsLoading
+    ? t('dynamicSelect.loading', { ns: 'common' })
+    : translatedPlaceholder
+  const dynamicNoticeTitle = dynamicOptionsError
+    ? t('dynamicSelect.error', { ns: 'common' })
+    : (!dynamicOptions.length ? t('dynamicSelect.noData', { ns: 'common' }) : null)
+  const dynamicNoticeClassName = dynamicOptionsError ? 'text-text-destructive-secondary' : undefined
 
   return (
     <>
@@ -223,19 +238,56 @@ const BaseField = ({
             )
           }
           {
-            formItemType === FormTypeEnum.select && !multiple && (
-              <PureSelect
-                value={value}
-                onChange={v => handleChange(v)}
-                disabled={disabled}
-                placeholder={translatedPlaceholder}
-                options={memorizedOptions}
-                triggerPopupSameWidth
-                popupProps={{
-                  className: 'max-h-[320px] overflow-y-auto',
-                }}
-              />
-            )
+            formItemType === FormTypeEnum.select && (multiple
+              ? (
+                  <Select
+                    multiple
+                    items={memorizedOptions}
+                    value={Array.isArray(value) ? value : []}
+                    disabled={disabled}
+                    onValueChange={handleChange}
+                  >
+                    <SelectTrigger id={field.name} aria-label={translatedLabel || field.name} className="px-2">
+                      <SelectValue placeholder={translatedPlaceholder}>
+                        {(selectedValue: string[]) => selectedValue.length
+                          ? t('dynamicSelect.selected', { ns: 'common', count: selectedValue.length })
+                          : translatedPlaceholder}
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent popupClassName="max-h-[320px] w-(--anchor-width) bg-components-panel-bg-blur">
+                      {memorizedOptions.map(option => (
+                        <SelectItem key={option.value} value={option.value}>
+                          <SelectItemText>{option.label}</SelectItemText>
+                          <SelectItemIndicator />
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )
+              : (
+                  <Select
+                    items={memorizedOptions}
+                    value={value || null}
+                    disabled={disabled}
+                    onValueChange={(next) => {
+                      if (next == null)
+                        return
+                      handleChange(next)
+                    }}
+                  >
+                    <SelectTrigger id={field.name} aria-label={translatedLabel || field.name} className="px-2">
+                      <SelectValue placeholder={translatedPlaceholder} />
+                    </SelectTrigger>
+                    <SelectContent popupClassName="max-h-[320px] w-(--anchor-width) bg-components-panel-bg-blur">
+                      {memorizedOptions.map(option => (
+                        <SelectItem key={option.value} value={option.value}>
+                          <SelectItemText>{option.label}</SelectItemText>
+                          <SelectItemIndicator />
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                ))
           }
           {
             formItemType === FormTypeEnum.checkbox /* && multiple */ && (
@@ -249,24 +301,74 @@ const BaseField = ({
             )
           }
           {
-            formItemType === FormTypeEnum.dynamicSelect && (
-              <PureSelect
-                options={dynamicOptions}
-                value={value}
-                onChange={field.handleChange}
-                disabled={disabled || isDynamicOptionsLoading}
-                placeholder={
-                  isDynamicOptionsLoading
-                    ? t('dynamicSelect.loading', { ns: 'common' })
-                    : translatedPlaceholder
-                }
-                {...(dynamicOptionsError
-                  ? { popupProps: { title: t('dynamicSelect.error', { ns: 'common' }), titleClassName: 'text-text-destructive-secondary' } }
-                  : (!dynamicOptions.length ? { popupProps: { title: t('dynamicSelect.noData', { ns: 'common' }) } } : {}))}
-                triggerPopupSameWidth
-                multiple={multiple}
-              />
-            )
+            formItemType === FormTypeEnum.dynamicSelect && (multiple
+              ? (
+                  <Select
+                    multiple
+                    items={dynamicOptions}
+                    value={Array.isArray(value) ? value : []}
+                    disabled={disabled || isDynamicOptionsLoading}
+                    onValueChange={field.handleChange}
+                  >
+                    <SelectTrigger id={field.name} aria-label={translatedLabel || field.name} className="px-2">
+                      <SelectValue placeholder={dynamicPlaceholder}>
+                        {(selectedValue: string[]) => selectedValue.length
+                          ? t('dynamicSelect.selected', { ns: 'common', count: selectedValue.length })
+                          : dynamicPlaceholder}
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent popupClassName="w-(--anchor-width) bg-components-panel-bg-blur">
+                      {dynamicNoticeTitle && (
+                        <div className={cn(
+                          'flex h-[22px] items-center px-3 system-xs-medium-uppercase text-text-tertiary',
+                          dynamicNoticeClassName,
+                        )}
+                        >
+                          {dynamicNoticeTitle}
+                        </div>
+                      )}
+                      {dynamicOptions.map(option => (
+                        <SelectItem key={option.value} value={option.value}>
+                          <SelectItemText>{option.label}</SelectItemText>
+                          <SelectItemIndicator />
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )
+              : (
+                  <Select
+                    items={dynamicOptions}
+                    value={value || null}
+                    disabled={disabled || isDynamicOptionsLoading}
+                    onValueChange={(next) => {
+                      if (next == null)
+                        return
+                      field.handleChange(next)
+                    }}
+                  >
+                    <SelectTrigger id={field.name} aria-label={translatedLabel || field.name} className="px-2">
+                      <SelectValue placeholder={dynamicPlaceholder} />
+                    </SelectTrigger>
+                    <SelectContent popupClassName="w-(--anchor-width) bg-components-panel-bg-blur">
+                      {dynamicNoticeTitle && (
+                        <div className={cn(
+                          'flex h-[22px] items-center px-3 system-xs-medium-uppercase text-text-tertiary',
+                          dynamicNoticeClassName,
+                        )}
+                        >
+                          {dynamicNoticeTitle}
+                        </div>
+                      )}
+                      {dynamicOptions.map(option => (
+                        <SelectItem key={option.value} value={option.value}>
+                          <SelectItemText>{option.label}</SelectItemText>
+                          <SelectItemIndicator />
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                ))
           }
           {
             formItemType === FormTypeEnum.radio && (
diff --git a/web/app/components/base/form/components/field/__tests__/custom-select.spec.tsx b/web/app/components/base/form/components/field/__tests__/custom-select.spec.tsx
deleted file mode 100644
index 5470df58a3..0000000000
--- a/web/app/components/base/form/components/field/__tests__/custom-select.spec.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import CustomSelectField from '../custom-select'
-
-const mockField = {
-  name: 'custom-select-field',
-  state: {
-    value: 'small',
-  },
-  handleChange: vi.fn(),
-}
-
-vi.mock('../../..', () => ({
-  useFieldContext: () => mockField,
-}))
-
-describe('CustomSelectField', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockField.state.value = 'small'
-  })
-
-  it('should render select placeholder or selected value', () => {
-    render(
-      <CustomSelectField
-        label="Size"
-        options={[
-          { label: 'Small', value: 'small' },
-          { label: 'Large', value: 'large' },
-        ]}
-      />,
-    )
-    expect(screen.getByText('Small')).toBeInTheDocument()
-  })
-
-  it('should update value when users select another option', () => {
-    render(
-      <CustomSelectField
-        label="Size"
-        options={[
-          { label: 'Small', value: 'small' },
-          { label: 'Large', value: 'large' },
-        ]}
-      />,
-    )
-    fireEvent.click(screen.getByText('Small'))
-    fireEvent.click(screen.getByText('Large'))
-    expect(mockField.handleChange).toHaveBeenCalledWith('large')
-  })
-})
diff --git a/web/app/components/base/form/components/field/__tests__/select.spec.tsx b/web/app/components/base/form/components/field/__tests__/select.spec.tsx
index 0bf6b4e022..aec6c6fd56 100644
--- a/web/app/components/base/form/components/field/__tests__/select.spec.tsx
+++ b/web/app/components/base/form/components/field/__tests__/select.spec.tsx
@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import SelectField from '../select'
 
 const mockField = {
@@ -29,10 +30,11 @@ describe('SelectField', () => {
         ]}
       />,
     )
-    expect(screen.getByText('Alpha')).toBeInTheDocument()
+    expect(screen.getByRole('combobox', { name: 'Mode' })).toHaveTextContent('Alpha')
   })
 
-  it('should update value when users select another option', () => {
+  it('should update value when users select another option', async () => {
+    const user = userEvent.setup()
     render(
       <SelectField
         label="Mode"
@@ -42,8 +44,8 @@ describe('SelectField', () => {
         ]}
       />,
     )
-    fireEvent.click(screen.getByText('Alpha'))
-    fireEvent.click(screen.getByText('Beta'))
+    await user.click(screen.getByRole('combobox', { name: 'Mode' }))
+    await user.click(screen.getByRole('option', { name: 'Beta' }))
     expect(mockField.handleChange).toHaveBeenCalledWith('beta')
   })
 })
diff --git a/web/app/components/base/form/components/field/custom-select.tsx b/web/app/components/base/form/components/field/custom-select.tsx
deleted file mode 100644
index 5808d4004d..0000000000
--- a/web/app/components/base/form/components/field/custom-select.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { CustomSelectProps, Option } from '../../../select/custom'
-import type { LabelProps } from '../label'
-import { cn } from '@langgenius/dify-ui/cn'
-import { useFieldContext } from '../..'
-import CustomSelect from '../../../select/custom'
-import Label from '../label'
-
-type CustomSelectFieldProps<T extends Option> = {
-  label: string
-  labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
-  options: T[]
-  className?: string
-} & Omit<CustomSelectProps<T>, 'options' | 'value' | 'onChange'>
-
-const CustomSelectField = <T extends Option>({
-  label,
-  labelOptions,
-  options,
-  className,
-  ...selectProps
-}: CustomSelectFieldProps<T>) => {
-  const field = useFieldContext<string>()
-
-  return (
-    <div className={cn('flex flex-col gap-y-0.5', className)}>
-      <Label
-        htmlFor={field.name}
-        label={label}
-        {...(labelOptions ?? {})}
-      />
-      <CustomSelect<T>
-        value={field.state.value}
-        options={options}
-        onChange={value => field.handleChange(value)}
-        {...selectProps}
-      />
-    </div>
-  )
-}
-
-export default CustomSelectField
diff --git a/web/app/components/base/form/components/field/input-type-select/__tests__/index.spec.tsx b/web/app/components/base/form/components/field/input-type-select/__tests__/index.spec.tsx
index bb7ae80a34..e5e4e9dc9a 100644
--- a/web/app/components/base/form/components/field/input-type-select/__tests__/index.spec.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/__tests__/index.spec.tsx
@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import InputTypeSelectField from '../index'
 
 const mockField = {
@@ -26,11 +27,12 @@ describe('InputTypeSelectField', () => {
     expect(screen.getByText('appDebug.variableConfig.text-input')).toBeInTheDocument()
   })
 
-  it('should update value when users choose another input type', () => {
+  it('should update value when users choose another input type', async () => {
+    const user = userEvent.setup()
     render(<InputTypeSelectField label="Input type" supportFile={true} />)
 
-    fireEvent.click(screen.getByText('appDebug.variableConfig.text-input'))
-    fireEvent.click(screen.getByText('appDebug.variableConfig.number'))
+    await user.click(screen.getByRole('combobox', { name: 'Input type' }))
+    await user.click(screen.getByRole('option', { name: /appDebug.variableConfig.number/ }))
 
     expect(mockField.handleChange).toHaveBeenCalledWith('number')
   })
diff --git a/web/app/components/base/form/components/field/input-type-select/__tests__/trigger.spec.tsx b/web/app/components/base/form/components/field/input-type-select/__tests__/trigger.spec.tsx
index 0957ac41c1..24c22e1f1b 100644
--- a/web/app/components/base/form/components/field/input-type-select/__tests__/trigger.spec.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/__tests__/trigger.spec.tsx
@@ -5,7 +5,7 @@ const MockIcon = () => <svg aria-label="mock icon" />
 
 describe('InputTypeSelect Trigger', () => {
   it('should show placeholder text when no option is selected', () => {
-    render(<Trigger option={undefined} open={false} />)
+    render(<Trigger option={undefined} />)
     expect(screen.getByText('common.placeholder.select')).toBeInTheDocument()
   })
 
@@ -18,7 +18,6 @@ describe('InputTypeSelect Trigger', () => {
           Icon: MockIcon,
           type: 'string',
         }}
-        open={false}
       />,
     )
 
diff --git a/web/app/components/base/form/components/field/input-type-select/index.tsx b/web/app/components/base/form/components/field/input-type-select/index.tsx
index 5e150240f6..37f9a510d4 100644
--- a/web/app/components/base/form/components/field/input-type-select/index.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/index.tsx
@@ -1,10 +1,13 @@
-import type { CustomSelectProps } from '../../../../select/custom'
 import type { LabelProps } from '../../label'
 import type { FileTypeSelectOption, InputType } from './types'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useCallback } from 'react'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from '@langgenius/dify-ui/select'
 import { useFieldContext } from '../../..'
-import CustomSelect from '../../../../select/custom'
 import Label from '../../label'
 import { useInputTypeOptions } from './hooks'
 import Option from './option'
@@ -15,24 +18,19 @@ type InputTypeSelectFieldProps = {
   labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
   supportFile: boolean
   className?: string
-} & Omit<CustomSelectProps<FileTypeSelectOption>, 'options' | 'value' | 'onChange' | 'CustomTrigger' | 'CustomOption'>
+  disabled?: boolean
+}
 
 const InputTypeSelectField = ({
   label,
   labelOptions,
   supportFile,
   className,
-  ...customSelectProps
+  disabled,
 }: InputTypeSelectFieldProps) => {
   const field = useFieldContext<InputType>()
   const inputTypeOptions = useInputTypeOptions(supportFile)
-
-  const renderTrigger = useCallback((option: FileTypeSelectOption | undefined, open: boolean) => {
-    return <Trigger option={option} open={open} />
-  }, [])
-  const renderOption = useCallback((option: FileTypeSelectOption) => {
-    return <Option option={option} />
-  }, [])
+  const selected = inputTypeOptions.find(option => option.value === field.state.value)
 
   return (
     <div className={cn('flex flex-col gap-y-0.5', className)}>
@@ -41,22 +39,31 @@ const InputTypeSelectField = ({
         label={label}
         {...(labelOptions ?? {})}
       />
-      <CustomSelect<FileTypeSelectOption>
-        value={field.state.value}
-        options={inputTypeOptions}
-        onChange={value => field.handleChange(value as InputType)}
-        triggerProps={{
-          className: 'gap-x-0.5',
+      <Select
+        items={inputTypeOptions}
+        value={field.state.value ?? null}
+        disabled={disabled}
+        onValueChange={(next) => {
+          if (next == null)
+            return
+          field.handleChange(next as InputType)
         }}
-        popupProps={{
-          className: 'w-[368px]',
-          wrapperClassName: 'z-9999999',
-          itemClassName: 'gap-x-1',
-        }}
-        CustomTrigger={renderTrigger}
-        CustomOption={renderOption}
-        {...customSelectProps}
-      />
+      >
+        <SelectTrigger id={field.name} className="gap-x-0.5 px-2">
+          <Trigger option={selected} />
+        </SelectTrigger>
+        <SelectContent popupClassName="w-[368px] bg-components-panel-bg-blur shadow-shadow-shadow-5">
+          {inputTypeOptions.map((option: FileTypeSelectOption) => (
+            <SelectItem
+              key={option.value}
+              value={option.value}
+              className="gap-x-1"
+            >
+              <Option option={option} />
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </div>
   )
 }
diff --git a/web/app/components/base/form/components/field/input-type-select/trigger.tsx b/web/app/components/base/form/components/field/input-type-select/trigger.tsx
index c2b61ca547..bf67a3d775 100644
--- a/web/app/components/base/form/components/field/input-type-select/trigger.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/trigger.tsx
@@ -1,43 +1,28 @@
 import type { FileTypeSelectOption } from './types'
-import { cn } from '@langgenius/dify-ui/cn'
-import { RiArrowDownSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
 
 type TriggerProps = {
   option: FileTypeSelectOption | undefined
-  open: boolean
 }
 
 const Trigger = ({
   option,
-  open,
 }: TriggerProps) => {
   const { t } = useTranslation()
 
+  if (!option)
+    return <span className="grow p-1">{t('placeholder.select', { ns: 'common' })}</span>
+
   return (
-    <>
-      {option
-        ? (
-            <>
-              <option.Icon className="h-4 w-4 shrink-0 text-text-tertiary" />
-              <span className="grow p-1">{option.label}</span>
-              <div className="pr-0.5">
-                <Badge text={option.type} uppercase={false} />
-              </div>
-            </>
-          )
-        : (
-            <span className="grow p-1">{t('placeholder.select', { ns: 'common' })}</span>
-          )}
-      <RiArrowDownSLine
-        className={cn(
-          'h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary',
-          open && 'text-text-secondary',
-        )}
-      />
-    </>
+    <div className="flex min-w-0 items-center gap-x-0.5">
+      <option.Icon className="h-4 w-4 shrink-0 text-text-tertiary" />
+      <span className="min-w-0 grow truncate p-1">{option.label}</span>
+      <div className="pr-0.5">
+        <Badge text={option.type} uppercase={false} />
+      </div>
+    </div>
   )
 }
 
diff --git a/web/app/components/base/form/components/field/select.tsx b/web/app/components/base/form/components/field/select.tsx
index 77405fdca6..b1809d9bba 100644
--- a/web/app/components/base/form/components/field/select.tsx
+++ b/web/app/components/base/form/components/field/select.tsx
@@ -1,18 +1,38 @@
-import type { Option, PureSelectProps } from '../../../select/pure'
 import type { LabelProps } from '../label'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectTrigger,
+  SelectValue,
+} from '@langgenius/dify-ui/select'
+import { useTranslation } from 'react-i18next'
 import { useFieldContext } from '../..'
-import PureSelect from '../../../select/pure'
 import Label from '../label'
 
+export type Option = {
+  label: string
+  value: string
+}
+
+export type SelectFieldPopupProps = {
+  className?: string
+  title?: string
+  titleClassName?: string
+}
+
 type SelectFieldProps = {
   label: string
   labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
   options: Option[]
   onChange?: (value: string) => void
   className?: string
-} & Omit<PureSelectProps, 'options' | 'value' | 'onChange' | 'multiple'> & {
-  multiple?: false
+  placeholder?: string
+  disabled?: boolean
+  popupProps?: SelectFieldPopupProps
 }
 
 const SelectField = ({
@@ -21,9 +41,13 @@ const SelectField = ({
   options,
   onChange,
   className,
-  ...selectProps
+  placeholder,
+  disabled,
+  popupProps,
 }: SelectFieldProps) => {
+  const { t } = useTranslation()
   const field = useFieldContext<string>()
+  const placeholderText = placeholder || t('placeholder.select', { ns: 'common' })
 
   return (
     <div className={cn('flex flex-col gap-y-0.5', className)}>
@@ -32,15 +56,39 @@ const SelectField = ({
         label={label}
         {...(labelOptions ?? {})}
       />
-      <PureSelect
-        value={field.state.value}
-        options={options}
-        onChange={(value) => {
-          field.handleChange(value)
-          onChange?.(value)
+      <Select
+        items={options}
+        value={field.state.value ?? null}
+        disabled={disabled}
+        onValueChange={(next) => {
+          if (next == null)
+            return
+          field.handleChange(next)
+          onChange?.(next)
         }}
-        {...selectProps}
-      />
+      >
+        <SelectTrigger id={field.name} className="px-2">
+          <SelectValue placeholder={placeholderText} />
+        </SelectTrigger>
+        <SelectContent popupClassName={cn('w-(--anchor-width) bg-components-panel-bg-blur', popupProps?.className)}>
+          {popupProps?.title && (
+            <div
+              className={cn(
+                'flex h-[22px] items-center px-3 system-xs-medium-uppercase text-text-tertiary',
+                popupProps.titleClassName,
+              )}
+            >
+              {popupProps.title}
+            </div>
+          )}
+          {options.map(option => (
+            <SelectItem key={option.value} value={option.value}>
+              <SelectItemText>{option.label}</SelectItemText>
+              <SelectItemIndicator />
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </div>
   )
 }
diff --git a/web/app/components/base/form/form-scenarios/base/types.ts b/web/app/components/base/form/form-scenarios/base/types.ts
index 5c778054b5..b9c3dd1b31 100644
--- a/web/app/components/base/form/form-scenarios/base/types.ts
+++ b/web/app/components/base/form/form-scenarios/base/types.ts
@@ -1,4 +1,4 @@
-import type { Option } from '../../../select/pure'
+import type { Option } from '../../components/field/select'
 import type { CustomActionsProps } from '../../components/form/actions'
 import type { TransferMethod } from '@/types/app'
 
diff --git a/web/app/components/base/form/index.tsx b/web/app/components/base/form/index.tsx
index 663b7f1fe8..46dbf06b7c 100644
--- a/web/app/components/base/form/index.tsx
+++ b/web/app/components/base/form/index.tsx
@@ -1,6 +1,5 @@
 import { createFormHook, createFormHookContexts } from '@tanstack/react-form'
 import CheckboxField from './components/field/checkbox'
-import CustomSelectField from './components/field/custom-select'
 import FileTypesField from './components/field/file-types'
 import FileUploaderField from './components/field/file-uploader'
 import InputTypeSelectField from './components/field/input-type-select'
@@ -26,7 +25,6 @@ export const { useAppForm, withForm } = createFormHook({
     NumberInputField,
     CheckboxField,
     SelectField,
-    CustomSelectField,
     OptionsField,
     InputTypeSelectField,
     FileTypesField,
diff --git a/web/app/components/base/select/__tests__/custom.spec.tsx b/web/app/components/base/select/__tests__/custom.spec.tsx
deleted file mode 100644
index 8868d70fc4..0000000000
--- a/web/app/components/base/select/__tests__/custom.spec.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import type { Option } from '../custom'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import CustomSelect from '../custom'
-
-const options: Option[] = [
-  { label: 'First option', value: 'first' },
-  { label: 'Second option', value: 'second' },
-]
-
-describe('CustomSelect', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  // Rendering behavior and value fallback.
-  describe('Rendering', () => {
-    it('should show the placeholder when value is undefined or not found', () => {
-      const { rerender } = render(
-        <CustomSelect options={options} />,
-      )
-
-      expect(screen.getByTitle(/select/i)).toBeInTheDocument()
-
-      rerender(
-        <CustomSelect options={options} value="missing" />,
-      )
-
-      expect(screen.getByTitle(/select/i)).toBeInTheDocument()
-    })
-  })
-
-  // User interactions for opening and selecting options.
-  describe('User Interactions', () => {
-    it('should call onChange and close the popup when an option is selected', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-
-      render(
-        <CustomSelect options={options} onChange={onChange} />,
-      )
-
-      await user.click(screen.getByTitle(/select/i))
-      expect(screen.getByTitle('Second option')).toBeInTheDocument()
-
-      await user.click(screen.getByTitle('Second option'))
-      expect(onChange).toHaveBeenCalledWith('second')
-      expect(screen.queryByTitle('Second option')).not.toBeInTheDocument()
-    })
-  })
-
-  // Controlled container props behavior.
-  describe('Container Props', () => {
-    it('should delegate open-state changes through containerProps.onOpenChange', async () => {
-      const user = userEvent.setup()
-      const onOpenChange = vi.fn()
-
-      render(
-        <CustomSelect
-          options={options}
-          containerProps={{ open: true, onOpenChange }}
-        />,
-      )
-
-      expect(screen.getByTitle('First option')).toBeInTheDocument()
-
-      await user.click(screen.getByTitle(/select/i))
-      expect(onOpenChange).toHaveBeenCalledWith(false)
-    })
-  })
-
-  // Custom rendering hooks for trigger and options.
-  describe('Custom Renderers', () => {
-    it('should render CustomTrigger and CustomOption with selected state', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <CustomSelect
-          options={options}
-          value="first"
-          CustomTrigger={(option, open) => <div>{`${option?.label ?? 'none'}-${open ? 'open' : 'closed'}`}</div>}
-          CustomOption={(option, selected) => <div>{`${option.label}-${selected ? 'selected' : 'idle'}`}</div>}
-        />,
-      )
-
-      expect(screen.getByText('First option-closed')).toBeInTheDocument()
-
-      await user.click(screen.getByText('First option-closed'))
-
-      expect(screen.getByText('First option-open')).toBeInTheDocument()
-      expect(screen.getByText('First option-selected')).toBeInTheDocument()
-      expect(screen.getByText('Second option-idle')).toBeInTheDocument()
-    })
-  })
-
-  // Class-based customization props.
-  describe('Style Props', () => {
-    it('should apply trigger and popup class names from props', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <CustomSelect
-          options={options}
-          triggerProps={{ className: 'trigger-class' }}
-          popupProps={{
-            wrapperClassName: 'wrapper-class',
-            className: 'popup-class',
-            itemClassName: 'item-class',
-          }}
-        />,
-      )
-
-      const triggerLabel = screen.getByTitle(/select/i)
-      const trigger = triggerLabel.parentElement
-      expect(trigger).toHaveClass('trigger-class')
-
-      await user.click(triggerLabel)
-
-      expect(document.querySelector('.wrapper-class')).toBeInTheDocument()
-      expect(document.querySelector('.popup-class')).toBeInTheDocument()
-      expect(document.querySelectorAll('.item-class')).toHaveLength(options.length)
-    })
-  })
-})
diff --git a/web/app/components/base/select/__tests__/index.spec.tsx b/web/app/components/base/select/__tests__/index.spec.tsx
deleted file mode 100644
index 6ddc51c177..0000000000
--- a/web/app/components/base/select/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,957 +0,0 @@
-import type { Item } from '../index'
-import { fireEvent, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import Select, { PortalSelect, SimpleSelect } from '../index'
-
-const items: Item[] = [
-  { value: 'apple', name: 'Apple' },
-  { value: 'banana', name: 'Banana' },
-  { value: 'citrus', name: 'Citrus' },
-]
-
-describe('Select', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should show the default selected item when defaultValue matches an item', () => {
-      render(
-        <Select
-          items={items}
-          defaultValue="banana"
-          allowSearch={false}
-          onSelect={vi.fn()}
-        />,
-      )
-
-      expect(screen.getByTitle('Banana'))!.toBeInTheDocument()
-    })
-
-    it('should render null selectedItem when defaultValue does not match any item', () => {
-      render(
-        <Select
-          items={items}
-          defaultValue="missing"
-          allowSearch={false}
-          onSelect={vi.fn()}
-        />,
-      )
-
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      // No item title should appear for a non-matching default
-      expect(screen.queryByTitle('Apple')).not.toBeInTheDocument()
-      expect(screen.queryByTitle('Banana')).not.toBeInTheDocument()
-    })
-
-    it('should render with allowSearch=true (input mode)', () => {
-      render(
-        <Select
-          items={items}
-          defaultValue="apple"
-          allowSearch={true}
-          onSelect={vi.fn()}
-        />,
-      )
-
-      expect(screen.getByRole('combobox'))!.toBeInTheDocument()
-    })
-
-    it('should apply custom bgClassName', () => {
-      render(
-        <Select
-          items={items}
-          defaultValue="apple"
-          allowSearch={false}
-          onSelect={vi.fn()}
-          bgClassName="bg-custom-color"
-        />,
-      )
-
-      expect(screen.getByTitle('Apple'))!.toBeInTheDocument()
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call onSelect when choosing an option from default select', async () => {
-      const user = userEvent.setup()
-      const onSelect = vi.fn()
-
-      render(
-        <Select
-          items={items}
-          defaultValue="banana"
-          allowSearch={false}
-          onSelect={onSelect}
-        />,
-      )
-
-      await user.click(screen.getByTitle('Banana'))
-      await user.click(screen.getByText('Citrus'))
-
-      expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({
-        value: 'citrus',
-        name: 'Citrus',
-      }))
-    })
-
-    it('should not open or select when default select is disabled', async () => {
-      const user = userEvent.setup()
-      const onSelect = vi.fn()
-
-      render(
-        <Select
-          items={items}
-          defaultValue="banana"
-          allowSearch={false}
-          disabled={true}
-          onSelect={onSelect}
-        />,
-      )
-
-      await user.click(screen.getByTitle('Banana'))
-
-      expect(screen.queryByText('Citrus')).not.toBeInTheDocument()
-      expect(onSelect).not.toHaveBeenCalled()
-    })
-
-    it('should filter items when searching with allowSearch=true', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <Select
-          items={items}
-          defaultValue="apple"
-          allowSearch={true}
-          onSelect={vi.fn()}
-        />,
-      )
-
-      // First, click the chevron button to open the dropdown
-      const buttons = screen.getAllByRole('button')
-      await user.click(buttons[0]!)
-
-      // Now type in the search input to filter
-      const input = screen.getByRole('combobox')
-      await user.clear(input)
-      await user.type(input, 'ban')
-
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      // Citrus should be filtered away
-      expect(screen.queryByText('Citrus')).not.toBeInTheDocument()
-    })
-
-    it('should not filter or update query when disabled and allowSearch=true', async () => {
-      render(
-        <Select
-          items={items}
-          defaultValue="apple"
-          allowSearch={true}
-          disabled={true}
-          onSelect={vi.fn()}
-        />,
-      )
-
-      const input = screen.getByRole('combobox') as HTMLInputElement
-
-      // we must use fireEvent because userEvent throws on disabled inputs
-      fireEvent.change(input, { target: { value: 'ban' } })
-
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      // We just want to ensure it doesn't throw and covers the !disabled branch in onChange.
-      // Since it's disabled, no search dropdown should appear.
-      expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
-    })
-
-    it('should not call onSelect when a disabled Combobox value changes externally', () => {
-      // In Headless UI, disabled elements do not fire events via React.
-      // To cover the defensive `if (!disabled)` branches inside the callbacks,
-      // we temporarily remove the disabled attribute from the DOM to force the event through.
-      const onSelect = vi.fn()
-
-      render(
-        <Select
-          items={items}
-          defaultValue="apple"
-          allowSearch={false}
-          disabled={true}
-          onSelect={onSelect}
-        />,
-      )
-
-      const button = screen.getAllByRole('button')[0] as HTMLButtonElement
-      button.removeAttribute('disabled')
-      button.removeAttribute('aria-disabled')
-      fireEvent.click(button)
-
-      expect(onSelect).not.toHaveBeenCalled()
-    })
-
-    it('should not open dropdown when clicking ComboboxButton while disabled and allowSearch=false', () => {
-      // Covers line 128-141 where disabled check prevents open state toggle
-      render(
-        <Select
-          items={items}
-          defaultValue="apple"
-          allowSearch={false}
-          disabled={true}
-          onSelect={vi.fn()}
-        />,
-      )
-
-      // The main trigger button should be disabled
-      const button = screen.getAllByRole('button')[0] as HTMLButtonElement
-      button.removeAttribute('disabled')
-
-      const chevron = screen.getAllByRole('button')[1] as HTMLButtonElement
-      chevron.removeAttribute('disabled')
-
-      fireEvent.click(button)
-      fireEvent.click(chevron)
-
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      // Dropdown options should not appear because the internal `if (!disabled)` guards it
-      expect(screen.queryByText('Banana')).not.toBeInTheDocument()
-    })
-
-    it('should handle missing item nicely in renderTrigger', () => {
-      render(
-        <SimpleSelect
-          items={items}
-          defaultValue="non-existent"
-          onSelect={vi.fn()}
-          renderTrigger={(selected) => {
-            return (
-              <span>
-                {/* eslint-disable-next-line style/jsx-one-expression-per-line */}
-                Custom: {selected?.name ?? 'Fallback'}
-              </span>
-            )
-          }}
-        />,
-      )
-      expect(screen.getByText('Custom: Fallback'))!.toBeInTheDocument()
-    })
-
-    it('should render with custom renderOption', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <Select
-          items={items}
-          defaultValue="apple"
-          allowSearch={false}
-          onSelect={vi.fn()}
-          renderOption={({ item, selected }) => (
-            <span data-testid={`custom-opt-${item.value}`}>
-              {item.name}
-              {selected ? ' ✓' : ''}
-            </span>
-          )}
-        />,
-      )
-
-      await user.click(screen.getByTitle('Apple'))
-
-      expect(screen.getByTestId('custom-opt-apple'))!.toBeInTheDocument()
-      expect(screen.getByTestId('custom-opt-banana'))!.toBeInTheDocument()
-    })
-
-    it('should show ChevronUpIcon when open and ChevronDownIcon when closed', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <Select
-          items={items}
-          defaultValue="apple"
-          allowSearch={false}
-          onSelect={vi.fn()}
-        />,
-      )
-
-      // Initially closed — should have a chevron button
-      await user.click(screen.getByTitle('Apple'))
-      // Dropdown is now open
-      // Dropdown is now open
-      expect(screen.getByText('Banana'))!.toBeInTheDocument()
-    })
-  })
-})
-
-// ──────────────────────────────────────────────────────────────
-//  SimpleSelect (Listbox-based)
-// ──────────────────────────────────────────────────────────────
-describe('SimpleSelect', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should render i18n placeholder when no selection exists', () => {
-      render(
-        <SimpleSelect
-          items={items}
-          defaultValue="missing"
-          onSelect={vi.fn()}
-        />,
-      )
-
-      expect(screen.getByText(/select/i))!.toBeInTheDocument()
-    })
-
-    it('should render custom placeholder when provided', () => {
-      render(
-        <SimpleSelect
-          items={items}
-          defaultValue="missing"
-          placeholder="Pick one"
-          onSelect={vi.fn()}
-        />,
-      )
-
-      expect(screen.getByText('Pick one'))!.toBeInTheDocument()
-    })
-
-    it('should render selected item name when defaultValue matches', () => {
-      render(
-        <SimpleSelect
-          items={items}
-          defaultValue="banana"
-          onSelect={vi.fn()}
-        />,
-      )
-
-      expect(screen.getByText('Banana'))!.toBeInTheDocument()
-    })
-
-    it('should render with isLoading=true showing spinner', () => {
-      render(
-        <SimpleSelect
-          items={items}
-          defaultValue="apple"
-          onSelect={vi.fn()}
-          isLoading={true}
-        />,
-      )
-
-      // Loader icon should be rendered (RiLoader4Line has aria hidden)
-      // Loader icon should be rendered (RiLoader4Line has aria hidden)
-      expect(screen.getByText('Apple'))!.toBeInTheDocument()
-    })
-
-    it('should render group items as non-selectable headers', async () => {
-      const user = userEvent.setup()
-      const groupItems: Item[] = [
-        { value: 'fruits-group', name: 'Fruits', isGroup: true },
-        { value: 'apple', name: 'Apple' },
-        { value: 'banana', name: 'Banana' },
-      ]
-
-      render(
-        <SimpleSelect
-          items={groupItems}
-          defaultValue="apple"
-          onSelect={vi.fn()}
-        />,
-      )
-
-      await user.click(screen.getByRole('button'))
-      expect(screen.getByText('Fruits'))!.toBeInTheDocument()
-    })
-
-    it('should not render ListboxOptions when disabled', () => {
-      render(
-        <SimpleSelect
-          items={items}
-          defaultValue="apple"
-          disabled={true}
-          onSelect={vi.fn()}
-        />,
-      )
-
-      expect(screen.getByText('Apple'))!.toBeInTheDocument()
-    })
-
-    it('should not open SimpleSelect when disabled', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <SimpleSelect
-          items={items}
-          defaultValue="apple"
-          disabled={true}
-          onSelect={vi.fn()}
-        />,
-      )
-
-      const button = screen.getByRole('button')
-      await user.click(button)
-
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      // Banana should not be visible as it won't open
-      expect(screen.queryByText('Banana')).not.toBeInTheDocument()
-    })
-
-    it('should not trigger onSelect via onChange when Listbox is disabled', () => {
-      // Covers line 228 (!disabled check) inside Listbox onChange
-      const onSelect = vi.fn()
-      render(
-        <SimpleSelect
-          items={items}
-          defaultValue="apple"
-          disabled={true}
-          onSelect={onSelect}
-        />,
-      )
-
-      const button = screen.getByRole('button') as HTMLButtonElement
-      button.removeAttribute('disabled')
-      button.removeAttribute('aria-disabled')
-      fireEvent.click(button)
-
-      expect(onSelect).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call onSelect and update display when an option is chosen', async () => {
-      const user = userEvent.setup()
-      const onSelect = vi.fn()
-
-      render(
-        <SimpleSelect
-          items={items}
-          defaultValue="missing"
-          onSelect={onSelect}
-        />,
-      )
-
-      await user.click(screen.getByRole('button'))
-      await user.click(screen.getByText('Apple'))
-
-      expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({
-        value: 'apple',
-        name: 'Apple',
-      }))
-      expect(screen.getByText('Apple'))!.toBeInTheDocument()
-    })
-
-    it('should pass open state into renderTrigger', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <SimpleSelect
-          items={items}
-          defaultValue="missing"
-          onSelect={vi.fn()}
-          renderTrigger={(selected, open) => (
-            <span>{`${selected?.name ?? 'none'}-${open ? 'open' : 'closed'}`}</span>
-          )}
-        />,
-      )
-
-      expect(screen.getByText('none-closed'))!.toBeInTheDocument()
-      await user.click(screen.getByText('none-closed'))
-      expect(screen.getByText('none-open'))!.toBeInTheDocument()
-    })
-
-    it('should clear selection when XMark is clicked (notClearable=false)', async () => {
-      const user = userEvent.setup()
-      const onSelect = vi.fn()
-
-      render(
-        <SimpleSelect
-          items={items}
-          defaultValue="apple"
-          onSelect={onSelect}
-          notClearable={false}
-        />,
-      )
-
-      // The clear button (XMarkIcon) should be visible when an item is selected
-      const clearBtn = screen.getByRole('button').querySelector('[aria-hidden="false"]')
-      expect(clearBtn)!.toBeInTheDocument()
-
-      await user.click(clearBtn!)
-
-      expect(onSelect).toHaveBeenCalledWith({ name: '', value: '' })
-    })
-
-    it('should not show clear button when notClearable is true', () => {
-      render(
-        <SimpleSelect
-          items={items}
-          defaultValue="apple"
-          onSelect={vi.fn()}
-          notClearable={true}
-        />,
-      )
-
-      const clearBtn = screen.getByRole('button').querySelector('[aria-hidden="false"]')
-      expect(clearBtn).not.toBeInTheDocument()
-    })
-
-    it('should hide check marks when hideChecked is true', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <SimpleSelect
-          items={items}
-          defaultValue="apple"
-          onSelect={vi.fn()}
-          hideChecked={true}
-        />,
-      )
-
-      await user.click(screen.getByRole('button'))
-      // The selected item should be visible but without a check icon
-      expect(screen.getAllByText('Apple').length).toBeGreaterThanOrEqual(1)
-    })
-
-    it('should render with custom renderOption in SimpleSelect', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <SimpleSelect
-          items={items}
-          defaultValue="apple"
-          onSelect={vi.fn()}
-          renderOption={({ item, selected }) => (
-            <span data-testid={`simple-opt-${item.value}`}>
-              {item.name}
-              {selected ? ' (selected)' : ''}
-            </span>
-          )}
-        />,
-      )
-
-      await user.click(screen.getByRole('button'))
-      expect(screen.getByTestId('simple-opt-apple'))!.toBeInTheDocument()
-      expect(screen.getByTestId('simple-opt-banana'))!.toBeInTheDocument()
-      // Verify the custom render shows selected state
-      // Verify the custom render shows selected state
-      expect(screen.getByTestId('simple-opt-apple'))!.toHaveTextContent('Apple (selected)')
-    })
-
-    it('should call onOpenChange when the button is clicked', async () => {
-      const user = userEvent.setup()
-      const onOpenChange = vi.fn()
-
-      render(
-        <SimpleSelect
-          items={items}
-          defaultValue="apple"
-          onSelect={vi.fn()}
-          onOpenChange={onOpenChange}
-        />,
-      )
-
-      await user.click(screen.getByRole('button'))
-      expect(onOpenChange).toHaveBeenCalled()
-    })
-
-    it('should handle disabled items that cannot be selected', async () => {
-      const user = userEvent.setup()
-      const onSelect = vi.fn()
-      const disabledItems: Item[] = [
-        { value: 'apple', name: 'Apple' },
-        { value: 'banana', name: 'Banana', disabled: true },
-        { value: 'citrus', name: 'Citrus' },
-      ]
-
-      render(
-        <SimpleSelect
-          items={disabledItems}
-          defaultValue="apple"
-          onSelect={onSelect}
-        />,
-      )
-
-      await user.click(screen.getByRole('button'))
-      // Banana should be rendered but not selectable
-      // Banana should be rendered but not selectable
-      expect(screen.getByText('Banana'))!.toBeInTheDocument()
-    })
-  })
-})
-
-// ──────────────────────────────────────────────────────────────
-//  PortalSelect
-// ──────────────────────────────────────────────────────────────
-describe('PortalSelect', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Rendering', () => {
-    it('should show placeholder when value is empty', () => {
-      render(
-        <PortalSelect
-          value=""
-          items={items}
-          onSelect={vi.fn()}
-        />,
-      )
-
-      expect(screen.getByText(/select/i))!.toBeInTheDocument()
-    })
-
-    it('should show selected item name when value matches', () => {
-      render(
-        <PortalSelect
-          value="banana"
-          items={items}
-          onSelect={vi.fn()}
-        />,
-      )
-
-      expect(screen.getByTitle('Banana'))!.toBeInTheDocument()
-    })
-
-    it('should render with custom placeholder', () => {
-      render(
-        <PortalSelect
-          value=""
-          items={items}
-          onSelect={vi.fn()}
-          placeholder="Choose fruit"
-        />,
-      )
-
-      expect(screen.getByText('Choose fruit'))!.toBeInTheDocument()
-    })
-
-    it('should render with renderTrigger', () => {
-      render(
-        <PortalSelect
-          value="apple"
-          items={items}
-          onSelect={vi.fn()}
-          renderTrigger={item => (
-            <span data-testid="custom-trigger">{item?.name ?? 'None'}</span>
-          )}
-        />,
-      )
-
-      expect(screen.getByTestId('custom-trigger'))!.toHaveTextContent('Apple')
-    })
-
-    it('should show INSTALLED badge when installedValue differs from selected value', () => {
-      render(
-        <PortalSelect
-          value="banana"
-          items={items}
-          onSelect={vi.fn()}
-          installedValue="apple"
-        />,
-      )
-
-      expect(screen.getByTitle('Banana'))!.toBeInTheDocument()
-    })
-
-    it('should apply triggerClassNameFn', () => {
-      const triggerClassNameFn = vi.fn((open: boolean) => open ? 'trigger-open' : 'trigger-closed')
-
-      render(
-        <PortalSelect
-          value="apple"
-          items={items}
-          onSelect={vi.fn()}
-          triggerClassNameFn={triggerClassNameFn}
-        />,
-      )
-
-      expect(triggerClassNameFn).toHaveBeenCalledWith(false)
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call onSelect when choosing an option from portal dropdown', async () => {
-      const user = userEvent.setup()
-      const onSelect = vi.fn()
-
-      render(
-        <PortalSelect
-          value=""
-          items={items}
-          onSelect={onSelect}
-        />,
-      )
-
-      await user.click(screen.getByText(/select/i))
-      await user.click(screen.getByText('Citrus'))
-
-      expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({
-        value: 'citrus',
-        name: 'Citrus',
-      }))
-    })
-
-    it('should not open the portal dropdown when readonly is true', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <PortalSelect
-          value=""
-          items={items}
-          readonly={true}
-          onSelect={vi.fn()}
-        />,
-      )
-
-      await user.click(screen.getByText(/select/i))
-      expect(screen.queryByTitle('Citrus')).not.toBeInTheDocument()
-    })
-
-    it('should show check mark for selected item when hideChecked is false', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <PortalSelect
-          value="banana"
-          items={items}
-          onSelect={vi.fn()}
-        />,
-      )
-
-      await user.click(screen.getByTitle('Banana'))
-      // Banana option in the dropdown should be displayed
-      const allBananas = screen.getAllByText('Banana')
-      expect(allBananas.length).toBeGreaterThanOrEqual(1)
-    })
-
-    it('should hide check marks when hideChecked is true', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <PortalSelect
-          value="banana"
-          items={items}
-          onSelect={vi.fn()}
-          hideChecked={true}
-        />,
-      )
-
-      await user.click(screen.getByTitle('Banana'))
-      expect(screen.getAllByText('Banana').length).toBeGreaterThanOrEqual(1)
-    })
-
-    it('should display INSTALLED badge in dropdown for installed items', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <PortalSelect
-          value="banana"
-          items={items}
-          onSelect={vi.fn()}
-          installedValue="apple"
-        />,
-      )
-
-      await user.click(screen.getByTitle('Banana'))
-      // The installed badge should appear in the dropdown
-      // The installed badge should appear in the dropdown
-      expect(screen.getByText('INSTALLED'))!.toBeInTheDocument()
-    })
-
-    it('should render item.extra content in dropdown', async () => {
-      const user = userEvent.setup()
-      const extraItems: Item[] = [
-        { value: 'apple', name: 'Apple', extra: <span data-testid="extra-apple">Extra</span> },
-        { value: 'banana', name: 'Banana' },
-      ]
-
-      render(
-        <PortalSelect
-          value=""
-          items={extraItems}
-          onSelect={vi.fn()}
-        />,
-      )
-
-      await user.click(screen.getByText(/select/i))
-      expect(screen.getByTestId('extra-apple'))!.toBeInTheDocument()
-    })
-  })
-})
diff --git a/web/app/components/base/select/__tests__/locale.spec.tsx b/web/app/components/base/select/__tests__/locale.spec.tsx
deleted file mode 100644
index 2c1c83bf95..0000000000
--- a/web/app/components/base/select/__tests__/locale.spec.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import LocaleSelect from '../locale'
-
-const localeItems = [
-  { value: 'en-US', name: 'English (US)' },
-  { value: 'zh-Hans', name: '简体中文' },
-  { value: 'ja-JP', name: '日本語' },
-]
-
-describe('LocaleSelect', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  // Rendering behavior for selected value and fallback state.
-  describe('Rendering', () => {
-    it('should render selected locale name when value matches an item', () => {
-      render(
-        <LocaleSelect
-          items={localeItems}
-          value="en-US"
-          onChange={vi.fn()}
-        />,
-      )
-
-      expect(screen.getByRole('button', { name: /english \(us\)/i })).toBeInTheDocument()
-    })
-
-    it('should render trigger without selected label when value is not found', () => {
-      render(
-        <LocaleSelect
-          items={localeItems}
-          value="missing"
-          onChange={vi.fn()}
-        />,
-      )
-
-      const trigger = screen.getByRole('button')
-      expect(trigger).toBeInTheDocument()
-      expect(trigger).not.toHaveTextContent('English (US)')
-    })
-  })
-
-  // Menu interactions and callback behavior.
-  describe('User Interactions', () => {
-    it('should call onChange with selected locale value when clicking an option', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-
-      render(
-        <LocaleSelect
-          items={localeItems}
-          value="en-US"
-          onChange={onChange}
-        />,
-      )
-
-      await user.click(screen.getByRole('button', { name: /english \(us\)/i }))
-      await user.click(screen.getByRole('menuitem', { name: '日本語' }))
-
-      expect(onChange).toHaveBeenCalledWith('ja-JP')
-    })
-
-    it('should render all locale options when menu is opened', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <LocaleSelect
-          items={localeItems}
-          value="en-US"
-          onChange={vi.fn()}
-        />,
-      )
-
-      await user.click(screen.getByRole('button', { name: /english \(us\)/i }))
-
-      expect(screen.getByRole('menuitem', { name: 'English (US)' })).toBeInTheDocument()
-      expect(screen.getByRole('menuitem', { name: '简体中文' })).toBeInTheDocument()
-      expect(screen.getByRole('menuitem', { name: '日本語' })).toBeInTheDocument()
-    })
-  })
-
-  // Edge behavior for missing callback and empty data.
-  describe('Edge Cases', () => {
-    it('should not throw when onChange is undefined and option is selected', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <LocaleSelect
-          items={localeItems}
-          value="en-US"
-        />,
-      )
-
-      await user.click(screen.getByRole('button', { name: /english \(us\)/i }))
-      await user.click(screen.getByRole('menuitem', { name: '简体中文' }))
-    })
-
-    it('should render no options when items are empty', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <LocaleSelect
-          items={[]}
-          value="en-US"
-          onChange={vi.fn()}
-        />,
-      )
-
-      await user.click(screen.getByRole('button'))
-      expect(screen.queryAllByRole('menuitem')).toHaveLength(0)
-    })
-  })
-})
diff --git a/web/app/components/base/select/__tests__/pure.spec.tsx b/web/app/components/base/select/__tests__/pure.spec.tsx
deleted file mode 100644
index 7b62754ec4..0000000000
--- a/web/app/components/base/select/__tests__/pure.spec.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import type { Option } from '../pure'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import PureSelect from '../pure'
-
-const options: Option[] = [
-  { label: 'Apple', value: 'apple' },
-  { label: 'Banana', value: 'banana' },
-  { label: 'Citrus', value: 'citrus' },
-]
-
-describe('PureSelect', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  // Rendering and placeholder behavior in single/multiple modes.
-  describe('Rendering', () => {
-    it('should render i18n placeholder when single value is empty', () => {
-      render(<PureSelect options={options} />)
-      expect(screen.getByTitle(/select/i))!.toBeInTheDocument()
-    })
-
-    it('should render custom placeholder when provided', () => {
-      render(<PureSelect options={options} placeholder="Choose value" />)
-      expect(screen.getByTitle('Choose value'))!.toBeInTheDocument()
-    })
-
-    it('should render selected option label in single mode', () => {
-      render(<PureSelect options={options} value="banana" />)
-      expect(screen.getByTitle('Banana'))!.toBeInTheDocument()
-    })
-
-    it('should render selected count text in multiple mode', () => {
-      render(<PureSelect options={options} multiple={true} value={['apple', 'banana']} />)
-      expect(screen.getByText(/selected/i))!.toBeInTheDocument()
-    })
-
-    it('should render placeholder in multiple mode when selected values are empty', () => {
-      render(<PureSelect options={options} multiple={true} value={[]} placeholder="Pick fruits" />)
-      expect(screen.getByTitle('Pick fruits'))!.toBeInTheDocument()
-    })
-  })
-
-  // Interaction behavior in single and multiple selection modes.
-  describe('User Interactions', () => {
-    it('should call onChange and close popup when selecting an option in single mode', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-
-      render(<PureSelect options={options} onChange={onChange} />)
-
-      await user.click(screen.getByTitle(/select/i))
-      expect(screen.getByTitle('Banana'))!.toBeInTheDocument()
-
-      await user.click(screen.getByTitle('Banana'))
-
-      expect(onChange).toHaveBeenCalledWith('banana')
-      expect(screen.queryByTitle('Citrus')).not.toBeInTheDocument()
-    })
-
-    it('should append a new value in multiple mode when clicking an unselected option', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-
-      render(
-        <PureSelect
-          options={options}
-          multiple={true}
-          value={['apple']}
-          onChange={onChange}
-        />,
-      )
-
-      await user.click(screen.getByText(/common\.dynamicSelect\.selected/i))
-      await user.click(screen.getAllByTitle('Banana')[0]!)
-
-      expect(onChange).toHaveBeenCalledWith(['apple', 'banana'])
-    })
-
-    it('should remove an existing value in multiple mode when clicking a selected option', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-
-      render(
-        <PureSelect
-          options={options}
-          multiple={true}
-          value={['apple', 'banana']}
-          onChange={onChange}
-        />,
-      )
-
-      await user.click(screen.getByText(/common\.dynamicSelect\.selected/i))
-      await user.click(screen.getAllByTitle('Apple')[0]!)
-
-      expect(onChange).toHaveBeenCalledWith(['banana'])
-    })
-
-    it('should start with empty array when multiple value is undefined', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-
-      render(
-        <PureSelect
-          options={options}
-          multiple={true}
-          onChange={onChange}
-          containerProps={{ open: true }}
-        />,
-      )
-
-      await user.click(screen.getAllByTitle('Apple')[0]!)
-      expect(onChange).toHaveBeenCalledWith(['apple'])
-    })
-  })
-
-  // Controlled open state and disabled behavior.
-  describe('Container And Disabled Props', () => {
-    it('should call containerProps.onOpenChange when trigger is clicked in controlled mode', async () => {
-      const user = userEvent.setup()
-      const onOpenChange = vi.fn()
-
-      render(
-        <PureSelect
-          options={options}
-          containerProps={{ open: true, onOpenChange }}
-        />,
-      )
-
-      expect(screen.getByTitle('Apple'))!.toBeInTheDocument()
-      await user.click(screen.getByTitle(/select/i))
-
-      expect(onOpenChange).toHaveBeenCalledWith(false)
-    })
-
-    it('should not open popup when disabled', async () => {
-      const user = userEvent.setup()
-
-      render(
-        <PureSelect
-          options={options}
-          disabled={true}
-        />,
-      )
-
-      await user.click(screen.getByTitle(/select/i))
-      expect(screen.queryByTitle('Apple')).not.toBeInTheDocument()
-    })
-
-    it('should ignore option clicks when disabled even if popup is open', async () => {
-      const user = userEvent.setup()
-      const onChange = vi.fn()
-
-      render(
-        <PureSelect
-          options={options}
-          disabled={true}
-          onChange={onChange}
-          containerProps={{ open: true }}
-        />,
-      )
-
-      await user.click(screen.getAllByTitle('Apple')[0]!)
-      expect(onChange).not.toHaveBeenCalled()
-    })
-  })
-
-  // Style and popup customization props.
-  describe('Style Props', () => {
-    it('should apply trigger and popup class names and render popup title', () => {
-      render(
-        <PureSelect
-          options={options}
-          triggerProps={{ className: 'trigger-class' }}
-          popupProps={{
-            wrapperClassName: 'wrapper-class',
-            className: 'popup-class',
-            itemClassName: 'item-class',
-            title: 'Available options',
-            titleClassName: 'title-class',
-          }}
-          containerProps={{ open: true }}
-        />,
-      )
-
-      const triggerLabel = screen.getByTitle(/select/i)
-      const trigger = triggerLabel.parentElement
-
-      expect(trigger)!.toHaveClass('trigger-class')
-      expect(document.querySelector('.wrapper-class'))!.toBeInTheDocument()
-      expect(document.querySelector('.popup-class'))!.toBeInTheDocument()
-      expect(document.querySelectorAll('.item-class')).toHaveLength(options.length)
-      expect(screen.getByText('Available options'))!.toHaveClass('title-class')
-    })
-  })
-})
diff --git a/web/app/components/base/select/custom.tsx b/web/app/components/base/select/custom.tsx
deleted file mode 100644
index dbf4995c22..0000000000
--- a/web/app/components/base/select/custom.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import type {
-  PortalToFollowElemOptions,
-} from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@langgenius/dify-ui/cn'
-import {
-  RiArrowDownSLine,
-  RiCheckLine,
-} from '@remixicon/react'
-import {
-  useCallback,
-  useState,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
-
-export type Option = {
-  label: string
-  value: string
-}
-
-export type CustomSelectProps<T extends Option> = {
-  options: T[]
-  value?: string
-  onChange?: (value: string) => void
-  containerProps?: PortalToFollowElemOptions & {
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-  }
-  triggerProps?: {
-    className?: string
-  }
-  popupProps?: {
-    wrapperClassName?: string
-    className?: string
-    itemClassName?: string
-    title?: string
-  }
-  CustomTrigger?: (option: T | undefined, open: boolean) => React.JSX.Element
-  CustomOption?: (option: T, selected: boolean) => React.JSX.Element
-}
-const CustomSelect = <T extends Option>({
-  options,
-  value,
-  onChange,
-  containerProps,
-  triggerProps,
-  popupProps,
-  CustomTrigger,
-  CustomOption,
-}: CustomSelectProps<T>) => {
-  const { t } = useTranslation()
-  const {
-    open,
-    onOpenChange,
-    placement,
-    offset,
-    triggerPopupSameWidth = true,
-  } = containerProps || {}
-  const {
-    className: triggerClassName,
-  } = triggerProps || {}
-  const {
-    wrapperClassName: popupWrapperClassName,
-    className: popupClassName,
-    itemClassName: popupItemClassName,
-  } = popupProps || {}
-
-  const [localOpen, setLocalOpen] = useState(false)
-  const mergedOpen = open ?? localOpen
-
-  const handleOpenChange = useCallback((openValue: boolean) => {
-    onOpenChange?.(openValue)
-    setLocalOpen(openValue)
-  }, [onOpenChange])
-
-  const selectedOption = options.find(option => option.value === value)
-  const triggerText = selectedOption?.label || t('placeholder.select', { ns: 'common' })
-
-  return (
-    <PortalToFollowElem
-      placement={placement || 'bottom-start'}
-      offset={offset || 4}
-      open={mergedOpen}
-      onOpenChange={handleOpenChange}
-      triggerPopupSameWidth={triggerPopupSameWidth}
-    >
-      <PortalToFollowElemTrigger
-        onClick={() => handleOpenChange(!mergedOpen)}
-        asChild
-      >
-        <div
-          className={cn(
-            'group flex h-8 cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-2 system-sm-regular text-components-input-text-filled hover:bg-state-base-hover-alt',
-            mergedOpen && 'bg-state-base-hover-alt',
-            triggerClassName,
-          )}
-        >
-          {CustomTrigger
-            ? CustomTrigger(selectedOption, mergedOpen)
-            : (
-                <>
-                  <div
-                    className="grow"
-                    title={triggerText}
-                  >
-                    {triggerText}
-                  </div>
-                  <RiArrowDownSLine
-                    className={cn(
-                      'h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary',
-                      mergedOpen && 'text-text-secondary',
-                    )}
-                  />
-                </>
-              )}
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className={cn(
-        'z-10',
-        popupWrapperClassName,
-      )}
-      >
-        <div
-          className={cn(
-            'rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg shadow-shadow-shadow-5',
-            popupClassName,
-          )}
-        >
-          {
-            options.map((option) => {
-              const selected = value === option.value
-              return (
-                <div
-                  key={option.value}
-                  className={cn(
-                    'flex h-8 cursor-pointer items-center rounded-lg px-2 system-sm-medium text-text-secondary hover:bg-state-base-hover',
-                    popupItemClassName,
-                  )}
-                  title={option.label}
-                  onClick={() => {
-                    onChange?.(option.value)
-                    handleOpenChange(false)
-                  }}
-                >
-                  {CustomOption
-                    ? CustomOption(option, selected)
-                    : (
-                        <>
-                          <div className="mr-1 grow truncate px-1">
-                            {option.label}
-                          </div>
-                          {
-                            selected && <RiCheckLine className="h-4 w-4 shrink-0 text-text-accent" />
-                          }
-                        </>
-                      )}
-                </div>
-              )
-            })
-          }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
-  )
-}
-
-export default CustomSelect
diff --git a/web/app/components/base/select/index.stories.tsx b/web/app/components/base/select/index.stories.tsx
deleted file mode 100644
index 629fd7f64d..0000000000
--- a/web/app/components/base/select/index.stories.tsx
+++ /dev/null
@@ -1,572 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import type { Item } from '.'
-import { useState } from 'react'
-import Select, { PortalSelect, SimpleSelect } from '.'
-
-const meta = {
-  title: 'Base/Data Entry/Select',
-  component: SimpleSelect,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Select component with three variants: Select (with search), SimpleSelect (basic dropdown), and PortalSelect (portal-based positioning). Built on Headless UI.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    placeholder: {
-      control: 'text',
-      description: 'Placeholder text',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disabled state',
-    },
-    notClearable: {
-      control: 'boolean',
-      description: 'Hide clear button',
-    },
-    hideChecked: {
-      control: 'boolean',
-      description: 'Hide check icon on selected item',
-    },
-  },
-  args: {
-    onSelect: (item) => {
-      console.log('Selected:', item)
-    },
-  },
-} satisfies Meta<typeof SimpleSelect>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-const fruits: Item[] = [
-  { value: 'apple', name: 'Apple' },
-  { value: 'banana', name: 'Banana' },
-  { value: 'cherry', name: 'Cherry' },
-  { value: 'date', name: 'Date' },
-  { value: 'elderberry', name: 'Elderberry' },
-]
-
-const countries: Item[] = [
-  { value: 'us', name: 'United States' },
-  { value: 'uk', name: 'United Kingdom' },
-  { value: 'ca', name: 'Canada' },
-  { value: 'au', name: 'Australia' },
-  { value: 'de', name: 'Germany' },
-  { value: 'fr', name: 'France' },
-  { value: 'jp', name: 'Japan' },
-  { value: 'cn', name: 'China' },
-]
-
-// SimpleSelect Demo
-const SimpleSelectDemo = (args: any) => {
-  const [selected, setSelected] = useState(args.defaultValue || '')
-
-  return (
-    <div style={{ width: '300px' }}>
-      <SimpleSelect
-        {...args}
-        items={fruits}
-        defaultValue={selected}
-        onSelect={(item) => {
-          setSelected(item.value)
-          console.log('Selected:', item)
-        }}
-      />
-      {selected && (
-        <div className="mt-3 text-sm text-gray-600">
-          Selected:
-          {' '}
-          <span className="font-semibold">{selected}</span>
-        </div>
-      )}
-    </div>
-  )
-}
-
-// Default SimpleSelect
-export const Default: Story = {
-  render: args => <SimpleSelectDemo {...args} />,
-  args: {
-    placeholder: 'Select a fruit...',
-    defaultValue: 'apple',
-    items: [],
-  },
-}
-
-// With placeholder (no selection)
-export const WithPlaceholder: Story = {
-  render: args => <SimpleSelectDemo {...args} />,
-  args: {
-    placeholder: 'Choose an option...',
-    defaultValue: '',
-    items: [],
-  },
-}
-
-// Disabled state
-export const Disabled: Story = {
-  render: args => <SimpleSelectDemo {...args} />,
-  args: {
-    placeholder: 'Select a fruit...',
-    defaultValue: 'banana',
-    disabled: true,
-    items: [],
-  },
-}
-
-// Not clearable
-export const NotClearable: Story = {
-  render: args => <SimpleSelectDemo {...args} />,
-  args: {
-    placeholder: 'Select a fruit...',
-    defaultValue: 'cherry',
-    notClearable: true,
-    items: [],
-  },
-}
-
-// Hide checked icon
-export const HideChecked: Story = {
-  render: args => <SimpleSelectDemo {...args} />,
-  args: {
-    placeholder: 'Select a fruit...',
-    defaultValue: 'apple',
-    hideChecked: true,
-    items: [],
-  },
-}
-
-// Select with search
-const WithSearchDemo = () => {
-  const [selected, setSelected] = useState('us')
-
-  return (
-    <div style={{ width: '300px' }}>
-      <Select
-        items={countries}
-        defaultValue={selected}
-        onSelect={(item) => {
-          setSelected(item.value as string)
-          console.log('Selected:', item)
-        }}
-        allowSearch={true}
-      />
-      <div className="mt-3 text-sm text-gray-600">
-        Selected:
-        {' '}
-        <span className="font-semibold">{selected}</span>
-      </div>
-    </div>
-  )
-}
-
-export const WithSearch: Story = {
-  render: () => <WithSearchDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// PortalSelect
-const PortalSelectVariantDemo = () => {
-  const [selected, setSelected] = useState('apple')
-
-  return (
-    <div style={{ width: '300px' }}>
-      <PortalSelect
-        value={selected}
-        items={fruits}
-        onSelect={(item) => {
-          setSelected(item.value as string)
-          console.log('Selected:', item)
-        }}
-        placeholder="Select a fruit..."
-      />
-      <div className="mt-3 text-sm text-gray-600">
-        Selected:
-        {' '}
-        <span className="font-semibold">{selected}</span>
-      </div>
-    </div>
-  )
-}
-
-export const PortalSelectVariant: Story = {
-  render: () => <PortalSelectVariantDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Custom render option
-const CustomRenderOptionDemo = () => {
-  const [selected, setSelected] = useState('us')
-
-  const countriesWithFlags = [
-    { value: 'us', name: 'United States', flag: '🇺🇸' },
-    { value: 'uk', name: 'United Kingdom', flag: '🇬🇧' },
-    { value: 'ca', name: 'Canada', flag: '🇨🇦' },
-    { value: 'au', name: 'Australia', flag: '🇦🇺' },
-    { value: 'de', name: 'Germany', flag: '🇩🇪' },
-  ]
-
-  return (
-    <div style={{ width: '300px' }}>
-      <SimpleSelect
-        items={countriesWithFlags}
-        defaultValue={selected}
-        onSelect={item => setSelected(item.value as string)}
-        renderOption={({ item, selected }) => (
-          <div className="flex w-full items-center justify-between">
-            <div className="flex items-center gap-2">
-              <span className="text-xl">{item.flag}</span>
-              <span>{item.name}</span>
-            </div>
-            {selected && <span className="text-blue-600">✓</span>}
-          </div>
-        )}
-      />
-    </div>
-  )
-}
-
-export const CustomRenderOption: Story = {
-  render: () => <CustomRenderOptionDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Loading state
-export const LoadingState: Story = {
-  render: () => {
-    return (
-      <div style={{ width: '300px' }}>
-        <SimpleSelect
-          items={[]}
-          defaultValue=""
-          onSelect={() => undefined}
-          placeholder="Loading options..."
-          isLoading={true}
-        />
-      </div>
-    )
-  },
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Real-world example - Form field
-const FormFieldDemo = () => {
-  const [formData, setFormData] = useState({
-    country: 'us',
-    language: 'en',
-    timezone: 'pst',
-  })
-
-  const languages = [
-    { value: 'en', name: 'English' },
-    { value: 'es', name: 'Spanish' },
-    { value: 'fr', name: 'French' },
-    { value: 'de', name: 'German' },
-    { value: 'zh', name: 'Chinese' },
-  ]
-
-  const timezones = [
-    { value: 'pst', name: 'Pacific Time (PST)' },
-    { value: 'mst', name: 'Mountain Time (MST)' },
-    { value: 'cst', name: 'Central Time (CST)' },
-    { value: 'est', name: 'Eastern Time (EST)' },
-  ]
-
-  return (
-    <div style={{ width: '400px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-      <h3 className="mb-4 text-lg font-semibold">User Preferences</h3>
-      <div className="space-y-4">
-        <div>
-          <label className="mb-2 block text-sm font-medium text-gray-700">Country</label>
-          <SimpleSelect
-            items={countries}
-            defaultValue={formData.country}
-            onSelect={item => setFormData({ ...formData, country: item.value as string })}
-          />
-        </div>
-        <div>
-          <label className="mb-2 block text-sm font-medium text-gray-700">Language</label>
-          <SimpleSelect
-            items={languages}
-            defaultValue={formData.language}
-            onSelect={item => setFormData({ ...formData, language: item.value as string })}
-          />
-        </div>
-        <div>
-          <label className="mb-2 block text-sm font-medium text-gray-700">Timezone</label>
-          <SimpleSelect
-            items={timezones}
-            defaultValue={formData.timezone}
-            onSelect={item => setFormData({ ...formData, timezone: item.value as string })}
-          />
-        </div>
-      </div>
-      <div className="mt-6 rounded-lg bg-gray-50 p-3 text-xs text-gray-700">
-        <div>
-          <strong>Country:</strong>
-          {' '}
-          {formData.country}
-        </div>
-        <div>
-          <strong>Language:</strong>
-          {' '}
-          {formData.language}
-        </div>
-        <div>
-          <strong>Timezone:</strong>
-          {' '}
-          {formData.timezone}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const FormField: Story = {
-  render: () => <FormFieldDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Real-world example - Filter selector
-const FilterSelectorDemo = () => {
-  const [status, setStatus] = useState('all')
-  const [priority, setPriority] = useState('all')
-
-  const statusOptions = [
-    { value: 'all', name: 'All Status' },
-    { value: 'active', name: 'Active' },
-    { value: 'pending', name: 'Pending' },
-    { value: 'completed', name: 'Completed' },
-    { value: 'cancelled', name: 'Cancelled' },
-  ]
-
-  const priorityOptions = [
-    { value: 'all', name: 'All Priorities' },
-    { value: 'high', name: 'High Priority' },
-    { value: 'medium', name: 'Medium Priority' },
-    { value: 'low', name: 'Low Priority' },
-  ]
-
-  return (
-    <div style={{ width: '600px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-      <h3 className="mb-4 text-lg font-semibold">Task Filters</h3>
-      <div className="mb-6 flex gap-4">
-        <div className="flex-1">
-          <label className="mb-2 block text-xs font-medium text-gray-600">Status</label>
-          <SimpleSelect
-            items={statusOptions}
-            defaultValue={status}
-            onSelect={item => setStatus(item.value as string)}
-            notClearable
-          />
-        </div>
-        <div className="flex-1">
-          <label className="mb-2 block text-xs font-medium text-gray-600">Priority</label>
-          <SimpleSelect
-            items={priorityOptions}
-            defaultValue={priority}
-            onSelect={item => setPriority(item.value as string)}
-            notClearable
-          />
-        </div>
-      </div>
-      <div className="rounded-lg bg-blue-50 p-4 text-sm">
-        <div className="mb-2 font-medium text-gray-700">Active Filters:</div>
-        <div className="flex gap-2">
-          <span className="rounded-sm bg-blue-200 px-2 py-1 text-xs text-blue-800">
-            Status:
-            {' '}
-            {status}
-          </span>
-          <span className="rounded-sm bg-blue-200 px-2 py-1 text-xs text-blue-800">
-            Priority:
-            {' '}
-            {priority}
-          </span>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const FilterSelector: Story = {
-  render: () => <FilterSelectorDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Real-world example - Version selector with badge
-const VersionSelectorDemo = () => {
-  const [selectedVersion, setSelectedVersion] = useState('2.1.0')
-
-  const versions = [
-    { value: '3.0.0', name: 'v3.0.0 (Beta)' },
-    { value: '2.1.0', name: 'v2.1.0 (Latest)' },
-    { value: '2.0.5', name: 'v2.0.5' },
-    { value: '2.0.4', name: 'v2.0.4' },
-    { value: '1.9.8', name: 'v1.9.8' },
-  ]
-
-  return (
-    <div style={{ width: '400px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-      <h3 className="mb-4 text-lg font-semibold">Select Version</h3>
-      <PortalSelect
-        value={selectedVersion}
-        items={versions}
-        onSelect={item => setSelectedVersion(item.value as string)}
-        installedValue="2.0.5"
-        placeholder="Choose version..."
-      />
-      <div className="mt-4 rounded-lg bg-gray-50 p-3 text-sm text-gray-700">
-        {selectedVersion !== '2.0.5' && (
-          <div className="mb-2 text-yellow-600">
-            ⚠️ Version change detected
-          </div>
-        )}
-        <div>
-          Current:
-          <strong>{selectedVersion}</strong>
-        </div>
-        <div className="mt-1 text-xs text-gray-500">Installed: 2.0.5</div>
-      </div>
-    </div>
-  )
-}
-
-export const VersionSelector: Story = {
-  render: () => <VersionSelectorDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Real-world example - Settings dropdown
-const SettingsDropdownDemo = () => {
-  const [theme, setTheme] = useState('light')
-  const [fontSize, setFontSize] = useState('medium')
-
-  const themeOptions = [
-    { value: 'light', name: '☀️ Light Mode' },
-    { value: 'dark', name: '🌙 Dark Mode' },
-    { value: 'auto', name: '🔄 Auto (System)' },
-  ]
-
-  const fontSizeOptions = [
-    { value: 'small', name: 'Small (12px)' },
-    { value: 'medium', name: 'Medium (14px)' },
-    { value: 'large', name: 'Large (16px)' },
-    { value: 'xlarge', name: 'Extra Large (18px)' },
-  ]
-
-  return (
-    <div style={{ width: '400px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-      <h3 className="mb-4 text-lg font-semibold">Display Settings</h3>
-      <div className="space-y-4">
-        <div>
-          <label className="mb-2 block text-sm font-medium text-gray-700">Theme</label>
-          <SimpleSelect
-            items={themeOptions}
-            defaultValue={theme}
-            onSelect={item => setTheme(item.value as string)}
-            notClearable
-          />
-        </div>
-        <div>
-          <label className="mb-2 block text-sm font-medium text-gray-700">Font Size</label>
-          <SimpleSelect
-            items={fontSizeOptions}
-            defaultValue={fontSize}
-            onSelect={item => setFontSize(item.value as string)}
-            notClearable
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const SettingsDropdown: Story = {
-  render: () => <SettingsDropdownDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Comparison of variants
-const VariantComparisonDemo = () => {
-  const [simple, setSimple] = useState('apple')
-  const [withSearch, setWithSearch] = useState('us')
-  const [portal, setPortal] = useState('banana')
-
-  return (
-    <div style={{ width: '700px' }} className="rounded-lg border border-gray-200 bg-white p-6">
-      <h3 className="mb-6 text-lg font-semibold">Select Variants Comparison</h3>
-      <div className="space-y-6">
-        <div>
-          <h4 className="mb-2 text-sm font-medium text-gray-700">SimpleSelect (Basic)</h4>
-          <div style={{ width: '300px' }}>
-            <SimpleSelect
-              items={fruits}
-              defaultValue={simple}
-              onSelect={item => setSimple(item.value as string)}
-              placeholder="Choose a fruit..."
-            />
-          </div>
-          <p className="mt-2 text-xs text-gray-500">Standard dropdown without search</p>
-        </div>
-
-        <div>
-          <h4 className="mb-2 text-sm font-medium text-gray-700">Select (With Search)</h4>
-          <div style={{ width: '300px' }}>
-            <Select
-              items={countries}
-              defaultValue={withSearch}
-              onSelect={item => setWithSearch(item.value as string)}
-              allowSearch={true}
-            />
-          </div>
-          <p className="mt-2 text-xs text-gray-500">Dropdown with search/filter capability</p>
-        </div>
-
-        <div>
-          <h4 className="mb-2 text-sm font-medium text-gray-700">PortalSelect (Portal-based)</h4>
-          <div style={{ width: '300px' }}>
-            <PortalSelect
-              value={portal}
-              items={fruits}
-              onSelect={item => setPortal(item.value as string)}
-              placeholder="Choose a fruit..."
-            />
-          </div>
-          <p className="mt-2 text-xs text-gray-500">Portal-based positioning for better overflow handling</p>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const VariantComparison: Story = {
-  render: () => <VariantComparisonDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
-
-// Interactive playground
-const PlaygroundDemo = () => {
-  const [selected, setSelected] = useState('apple')
-
-  return (
-    <div style={{ width: '350px' }}>
-      <SimpleSelect
-        items={fruits}
-        defaultValue={selected}
-        onSelect={item => setSelected(item.value as string)}
-        placeholder="Select an option..."
-      />
-    </div>
-  )
-}
-
-export const Playground: Story = {
-  render: () => <PlaygroundDemo />,
-  parameters: { controls: { disable: true } },
-} as unknown as Story
diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
deleted file mode 100644
index 5033f381c2..0000000000
--- a/web/app/components/base/select/index.tsx
+++ /dev/null
@@ -1,441 +0,0 @@
-'use client'
-/**
- * @deprecated Use `@langgenius/dify-ui/select` instead.
- * This component will be removed after migration is complete.
- * See: https://github.com/langgenius/dify/issues/32767
- */
-import type { FC } from 'react'
-import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions, Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
-import { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid'
-import { cn } from '@langgenius/dify-ui/cn'
-import { RiCheckLine, RiLoader4Line } from '@remixicon/react'
-import * as React from 'react'
-import { useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
-import Badge from '../badge/index'
-
-const defaultItems = [
-  { value: 1, name: 'option1' },
-  { value: 2, name: 'option2' },
-  { value: 3, name: 'option3' },
-  { value: 4, name: 'option4' },
-  { value: 5, name: 'option5' },
-  { value: 6, name: 'option6' },
-  { value: 7, name: 'option7' },
-]
-
-export type Item = {
-  value: number | string
-  name: string
-  isGroup?: boolean
-  disabled?: boolean
-  extra?: React.ReactNode
-} & Record<string, any>
-
-type ISelectProps = {
-  className?: string
-  wrapperClassName?: string
-  renderTrigger?: (value: Item | null, isOpen: boolean) => React.JSX.Element | null
-  items?: Item[]
-  defaultValue?: number | string
-  disabled?: boolean
-  onSelect: (value: Item) => void
-  allowSearch?: boolean
-  bgClassName?: string
-  placeholder?: string
-  overlayClassName?: string
-  optionWrapClassName?: string
-  optionClassName?: string
-  hideChecked?: boolean
-  notClearable?: boolean
-  renderOption?: ({
-    item,
-    selected,
-  }: {
-    item: Item
-    selected: boolean
-  }) => React.ReactNode
-  isLoading?: boolean
-  onOpenChange?: (open: boolean) => void
-}
-const Select: FC<ISelectProps> = ({
-  className,
-  items = defaultItems,
-  defaultValue = 1,
-  disabled = false,
-  onSelect,
-  allowSearch = true,
-  bgClassName = 'bg-components-input-bg-normal',
-  overlayClassName,
-  optionClassName,
-  renderOption,
-}) => {
-  const [query, setQuery] = useState('')
-  const [open, setOpen] = useState(false)
-
-  const [selectedItem, setSelectedItem] = useState<Item | null>(null)
-  // Ensure selectedItem is properly set when defaultValue or items change
-  useEffect(() => {
-    let defaultSelect = null
-    // Handle cases where defaultValue might be undefined, null, or empty string
-    defaultSelect = (defaultValue && items.find((item: Item) => item.value === defaultValue)) || null
-    setSelectedItem(defaultSelect)
-  }, [defaultValue, items])
-
-  const filteredItems: Item[]
-    = query === ''
-      ? items
-      : items.filter((item) => {
-          return item.name.toLowerCase().includes(query.toLowerCase())
-        })
-
-  return (
-    <Combobox
-      as="div"
-      disabled={disabled}
-      value={selectedItem}
-      className={className}
-      onChange={(value) => {
-        if (!disabled) {
-          setSelectedItem(value)
-          setOpen(false)
-          onSelect(value as Item)
-        }
-      }}
-    >
-      <div className={cn('relative')}>
-        <div className="group text-text-secondary">
-          {allowSearch
-            ? (
-                <ComboboxInput
-                  className={`w-full rounded-lg border-0 ${bgClassName} py-1.5 pr-10 pl-3 shadow-sm group-hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
-                  onChange={(event) => {
-                    if (!disabled)
-                      setQuery(event.target.value)
-                  }}
-                  displayValue={(item: Item) => item?.name}
-                />
-              )
-            : (
-                <ComboboxButton
-                  onClick={
-                    () => {
-                      if (!disabled)
-                        setOpen(!open)
-                    }
-                  }
-                  className={cn(`flex h-9 w-full items-center rounded-lg border-0 ${bgClassName} py-1.5 pr-10 pl-3 shadow-sm group-hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden sm:text-sm sm:leading-6`, optionClassName)}
-                >
-                  <div className="w-0 grow truncate text-left" title={selectedItem?.name}>{selectedItem?.name}</div>
-                </ComboboxButton>
-              )}
-          <ComboboxButton
-            className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-hidden"
-            onClick={
-              () => {
-                if (!disabled)
-                  setOpen(!open)
-              }
-            }
-          >
-            {open ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
-          </ComboboxButton>
-        </div>
-
-        {(filteredItems.length > 0 && open) && (
-          <ComboboxOptions className={`absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-1 py-1 text-base shadow-lg backdrop-blur-xs focus:outline-hidden sm:text-sm ${overlayClassName}`}>
-            {filteredItems.map((item: Item) => (
-              <ComboboxOption
-                key={item.value}
-                value={item}
-                className={({ active }: { active: boolean }) =>
-                  cn('relative cursor-default rounded-lg py-2 pr-9 pl-3 text-text-secondary select-none hover:bg-state-base-hover', active ? 'bg-state-base-hover' : '', optionClassName)}
-              >
-                {({ /* active, */ selected }) => (
-                  <>
-                    {renderOption
-                      ? renderOption({ item, selected })
-                      : (
-                          <>
-                            <span className={cn('block', selected && 'font-normal')}>{item.name}</span>
-                            {selected && (
-                              <span
-                                className={cn('absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary')}
-                              >
-                                <RiCheckLine className="h-4 w-4" aria-hidden="true" />
-                              </span>
-                            )}
-                          </>
-                        )}
-                  </>
-                )}
-              </ComboboxOption>
-            ))}
-          </ComboboxOptions>
-        )}
-      </div>
-    </Combobox>
-  )
-}
-
-const SimpleSelect: FC<ISelectProps> = ({
-  className,
-  wrapperClassName = '',
-  renderTrigger,
-  items = defaultItems,
-  defaultValue = 1,
-  disabled = false,
-  onSelect,
-  onOpenChange,
-  placeholder,
-  optionWrapClassName,
-  optionClassName,
-  hideChecked,
-  notClearable,
-  renderOption,
-  isLoading = false,
-}) => {
-  const { t } = useTranslation()
-  const localPlaceholder = placeholder || t('placeholder.select', { ns: 'common' })
-
-  const [selectedItem, setSelectedItem] = useState<Item | null>(null)
-
-  // Enhanced: Preserve user selection, only reset when necessary
-  useEffect(() => {
-    // Only reset if no current selection or current selection is invalid
-    const isCurrentSelectionValid = selectedItem && items.some(item => item.value === selectedItem.value)
-
-    if (!isCurrentSelectionValid) {
-      let defaultSelect = null
-      // Handle cases where defaultValue might be undefined, null, or empty string
-      defaultSelect = items.find((item: Item) => item.value === defaultValue) ?? null
-      setSelectedItem(defaultSelect)
-    }
-  }, [defaultValue, items, selectedItem])
-
-  const listboxRef = useRef<HTMLDivElement>(null)
-
-  return (
-    <Listbox
-      ref={listboxRef}
-      value={selectedItem}
-      onChange={(value) => {
-        if (!disabled) {
-          setSelectedItem(value)
-          onSelect(value as Item)
-        }
-      }}
-    >
-      {({ open }) => (
-        <div className={cn('group/simple-select relative h-9', wrapperClassName)}>
-          {renderTrigger && <ListboxButton className="w-full">{renderTrigger(selectedItem, open)}</ListboxButton>}
-          {!renderTrigger && (
-            <ListboxButton
-              onClick={() => {
-                onOpenChange?.(open)
-              }}
-              className={cn(`flex h-full w-full items-center rounded-lg border-0 bg-components-input-bg-normal pr-10 pl-3 group-hover/simple-select:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt focus-visible:outline-hidden sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}
-            >
-              <span className={cn('block truncate text-left system-sm-regular text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
-              <span className="absolute inset-y-0 right-0 flex items-center pr-2">
-                {isLoading
-                  ? <RiLoader4Line className="h-3.5 w-3.5 animate-spin text-text-secondary" />
-                  : (selectedItem && !notClearable)
-                      ? (
-                          <XMarkIcon
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              setSelectedItem(null)
-                              onSelect({ name: '', value: '' })
-                            }}
-                            className="h-4 w-4 cursor-pointer text-text-quaternary"
-                            aria-hidden="false"
-                          />
-                        )
-                      : (
-                          open
-                            ? (
-                                <ChevronUpIcon
-                                  className="h-4 w-4 text-text-quaternary group-hover/simple-select:text-text-secondary"
-                                  aria-hidden="true"
-                                />
-                              )
-                            : (
-                                <ChevronDownIcon
-                                  className="h-4 w-4 text-text-quaternary group-hover/simple-select:text-text-secondary"
-                                  aria-hidden="true"
-                                />
-                              )
-                        )}
-              </span>
-            </ListboxButton>
-          )}
-
-          {(!disabled) && (
-            <ListboxOptions className={cn('absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-1 py-1 text-base shadow-lg backdrop-blur-xs focus:outline-hidden sm:text-sm', optionWrapClassName)}>
-              {items.map((item: Item) =>
-                item.isGroup ? (
-                  <div
-                    key={item.value}
-                    className="px-3 py-1.5 text-xs font-medium tracking-wide text-text-tertiary uppercase select-none"
-                  >
-                    {item.name}
-                  </div>
-                ) : (
-                  <ListboxOption
-                    key={item.value}
-                    className={
-                      cn('relative cursor-pointer rounded-lg py-2 pr-9 pl-3 text-text-secondary select-none hover:bg-state-base-hover', optionClassName)
-                    }
-                    value={item}
-                    disabled={item.disabled || disabled}
-                  >
-                    {({ /* active, */ selected }) => (
-                      <>
-                        {renderOption
-                          ? renderOption({ item, selected })
-                          : (
-                              <>
-                                <span className={cn('block', selected && 'font-normal')}>{item.name}</span>
-                                {selected && !hideChecked && (
-                                  <span
-                                    className={cn('absolute inset-y-0 right-0 flex items-center pr-2 text-text-accent')}
-                                  >
-                                    <RiCheckLine className="h-4 w-4" aria-hidden="true" />
-                                  </span>
-                                )}
-                              </>
-                            )}
-                      </>
-                    )}
-                  </ListboxOption>
-                ),
-              )}
-            </ListboxOptions>
-          )}
-        </div>
-      )}
-    </Listbox>
-  )
-}
-
-type PortalSelectProps = {
-  value: string | number
-  onSelect: (value: Item) => void
-  items: Item[]
-  placeholder?: string
-  installedValue?: string | number
-  renderTrigger?: (value?: Item) => React.JSX.Element | null
-  triggerClassName?: string
-  triggerClassNameFn?: (open: boolean) => string
-  popupClassName?: string
-  popupInnerClassName?: string
-  readonly?: boolean
-  hideChecked?: boolean
-}
-const PortalSelect: FC<PortalSelectProps> = ({
-  value,
-  onSelect,
-  items,
-  placeholder,
-  installedValue,
-  renderTrigger,
-  triggerClassName,
-  triggerClassNameFn,
-  popupClassName,
-  popupInnerClassName,
-  readonly,
-  hideChecked,
-}) => {
-  const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
-  const localPlaceholder = placeholder || t('placeholder.select', { ns: 'common' })
-  const selectedItem = value ? items.find(item => item.value === value) : undefined
-
-  return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement="bottom-start"
-      offset={4}
-      triggerPopupSameWidth={true}
-    >
-      <PortalToFollowElemTrigger onClick={() => !readonly && setOpen(v => !v)} className="w-full">
-        {renderTrigger
-          ? renderTrigger(selectedItem)
-          : (
-              <div
-                className={cn(`
-                          group flex h-9 items-center justify-between rounded-lg border-0 bg-components-input-bg-normal px-2.5 text-sm hover:bg-state-base-hover-alt ${readonly ? 'cursor-not-allowed' : 'cursor-pointer'}
-                        `, triggerClassName, triggerClassNameFn?.(open))}
-                title={selectedItem?.name}
-              >
-                <span
-                  className={`
-              grow truncate text-text-secondary
-              ${!selectedItem?.name && 'text-components-input-text-placeholder'}
-            `}
-                >
-                  {selectedItem?.name ?? localPlaceholder}
-                </span>
-                <div className="mx-0.5">
-                  {!!(installedValue && selectedItem && selectedItem.value !== installedValue) && (
-                    <Badge>
-                      {installedValue}
-                      {' '}
-                      {'->'}
-                      {' '}
-                      {selectedItem.value}
-                      {' '}
-                    </Badge>
-                  )}
-                </div>
-                <ChevronDownIcon className="h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary" />
-              </div>
-            )}
-
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className={`z-20 ${popupClassName}`}>
-        <div
-          className={cn('max-h-60 overflow-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-hidden sm:text-sm', popupInnerClassName)}
-        >
-          {items.map((item: Item) => (
-            <div
-              key={item.value}
-              className={`
-                flex h-9 cursor-pointer items-center justify-between rounded-lg px-2.5 text-text-secondary hover:bg-state-base-hover
-                ${item.value === value && 'bg-state-base-hover'}
-              `}
-              title={item.name}
-              onClick={() => {
-                onSelect(item)
-                setOpen(false)
-              }}
-            >
-              <span
-                className="w-0 grow truncate"
-                title={item.name}
-              >
-                <span className="truncate">{item.name}</span>
-                {item.value === installedValue && (
-                  <Badge uppercase={true} className="ml-1 shrink-0">INSTALLED</Badge>
-                )}
-              </span>
-              {!hideChecked && item.value === value && (
-                <RiCheckLine className="h-4 w-4 shrink-0 text-text-accent" />
-              )}
-              {item.extra}
-            </div>
-          ))}
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
-  )
-}
-export { PortalSelect, SimpleSelect }
-export default React.memo(Select)
diff --git a/web/app/components/base/select/locale.tsx b/web/app/components/base/select/locale.tsx
deleted file mode 100644
index ec4331c11f..0000000000
--- a/web/app/components/base/select/locale.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-'use client'
-import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
-import { GlobeAltIcon } from '@heroicons/react/24/outline'
-import { Fragment } from 'react'
-
-type ISelectProps = {
-  items: Array<{ value: string, name: string }>
-  value?: string
-  className?: string
-  onChange?: (value: string) => void
-}
-
-export default function Select({
-  items,
-  value,
-  onChange,
-}: ISelectProps) {
-  const item = items.filter(item => item.value === value)[0]
-
-  return (
-    <div className="w-56 text-right">
-      <Menu as="div" className="relative inline-block text-left">
-        <div>
-          <MenuButton className="h-[44px]justify-center inline-flex w-full items-center rounded-lg border border-components-button-secondary-border px-[10px] py-[6px] text-[13px] font-medium text-text-primary hover:bg-state-base-hover">
-            <GlobeAltIcon className="mr-1 h-5 w-5" aria-hidden="true" />
-            {item?.name}
-          </MenuButton>
-        </div>
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <MenuItems className="absolute right-0 z-10 mt-2 w-[200px] origin-top-right divide-y divide-divider-regular rounded-md bg-components-panel-bg shadow-lg ring-1 ring-black/5 focus:outline-hidden">
-            <div className="px-1 py-1">
-              {items.map((item) => {
-                return (
-                  <MenuItem key={item.value}>
-                    <button
-                      type="button"
-                      className="group flex w-full items-center rounded-lg px-3 py-2 text-sm text-text-secondary data-active:bg-state-base-hover"
-                      onClick={(evt) => {
-                        evt.preventDefault()
-                        onChange?.(item.value)
-                      }}
-                    >
-                      {item.name}
-                    </button>
-                  </MenuItem>
-                )
-              })}
-
-            </div>
-
-          </MenuItems>
-        </Transition>
-      </Menu>
-    </div>
-  )
-}
diff --git a/web/app/components/base/select/pure.tsx b/web/app/components/base/select/pure.tsx
deleted file mode 100644
index aba2ae8da5..0000000000
--- a/web/app/components/base/select/pure.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-import type {
-  PortalToFollowElemOptions,
-} from '@/app/components/base/portal-to-follow-elem'
-import { cn } from '@langgenius/dify-ui/cn'
-import {
-  RiArrowDownSLine,
-  RiCheckLine,
-} from '@remixicon/react'
-import {
-  useCallback,
-  useMemo,
-  useState,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
-
-export type Option = {
-  label: string
-  value: string
-}
-
-type SharedPureSelectProps = {
-  options: Option[]
-  containerProps?: PortalToFollowElemOptions & {
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-  }
-  triggerProps?: {
-    className?: string
-  }
-  popupProps?: {
-    wrapperClassName?: string
-    className?: string
-    itemClassName?: string
-    title?: string
-    titleClassName?: string
-  }
-  placeholder?: string
-  disabled?: boolean
-  triggerPopupSameWidth?: boolean
-}
-
-type SingleSelectProps = {
-  multiple?: false
-  value?: string
-  onChange?: (value: string) => void
-}
-
-type MultiSelectProps = {
-  multiple: true
-  value?: string[]
-  onChange?: (value: string[]) => void
-}
-
-export type PureSelectProps = SharedPureSelectProps & (SingleSelectProps | MultiSelectProps)
-const PureSelect = (props: PureSelectProps) => {
-  const {
-    options,
-    containerProps,
-    triggerProps,
-    popupProps,
-    placeholder,
-    disabled,
-    triggerPopupSameWidth,
-    multiple,
-    value,
-    onChange,
-  } = props
-  const { t } = useTranslation()
-  const {
-    open,
-    onOpenChange,
-    placement,
-    offset,
-  } = containerProps || {}
-  const {
-    className: triggerClassName,
-  } = triggerProps || {}
-  const {
-    wrapperClassName: popupWrapperClassName,
-    className: popupClassName,
-    itemClassName: popupItemClassName,
-    title: popupTitle,
-    titleClassName: popupTitleClassName,
-  } = popupProps || {}
-
-  const [localOpen, setLocalOpen] = useState(false)
-  const mergedOpen = open ?? localOpen
-
-  const handleOpenChange = useCallback((openValue: boolean) => {
-    onOpenChange?.(openValue)
-    setLocalOpen(openValue)
-  }, [onOpenChange])
-
-  const triggerText = useMemo(() => {
-    const placeholderText = placeholder || t('placeholder.select', { ns: 'common' })
-    if (multiple)
-      return value?.length ? t('dynamicSelect.selected', { ns: 'common', count: value.length }) : placeholderText
-
-    return options.find(option => option.value === value)?.label || placeholderText
-  }, [multiple, value, options, placeholder])
-
-  return (
-    <PortalToFollowElem
-      placement={placement || 'bottom-start'}
-      offset={offset || 4}
-      open={mergedOpen}
-      onOpenChange={handleOpenChange}
-      triggerPopupSameWidth={triggerPopupSameWidth}
-    >
-      <PortalToFollowElemTrigger
-        onClick={() => !disabled && handleOpenChange(!mergedOpen)}
-        asChild
-      >
-        <div
-          className={cn(
-            'group flex h-8 items-center rounded-lg bg-components-input-bg-normal px-2 system-sm-regular text-components-input-text-filled',
-            !disabled && 'cursor-pointer hover:bg-state-base-hover-alt',
-            disabled && 'cursor-not-allowed opacity-50',
-            mergedOpen && !disabled && 'bg-state-base-hover-alt',
-            triggerClassName,
-          )}
-        >
-          <div
-            className="grow"
-            title={triggerText}
-          >
-            {triggerText}
-          </div>
-          <RiArrowDownSLine
-            className={cn(
-              'h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary',
-              mergedOpen && 'text-text-secondary',
-            )}
-          />
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className={cn(
-        'z-9999',
-        popupWrapperClassName,
-      )}
-      >
-        <div
-          className={cn(
-            'max-h-80 overflow-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg',
-            popupClassName,
-          )}
-        >
-          {
-            popupTitle && (
-              <div className={cn(
-                'flex h-[22px] items-center px-3 system-xs-medium-uppercase text-text-tertiary',
-                popupTitleClassName,
-              )}
-              >
-                {popupTitle}
-              </div>
-            )
-          }
-          {
-            options.map(option => (
-              <div
-                key={option.value}
-                className={cn(
-                  'flex h-8 cursor-pointer items-center rounded-lg px-2 system-sm-medium text-text-secondary hover:bg-state-base-hover',
-                  popupItemClassName,
-                )}
-                title={option.label}
-                onClick={() => {
-                  if (disabled)
-                    return
-                  if (multiple) {
-                    const currentValues = value ?? []
-                    const nextValues = currentValues.includes(option.value)
-                      ? currentValues.filter(valueItem => valueItem !== option.value)
-                      : [...currentValues, option.value]
-                    onChange?.(nextValues)
-                    return
-                  }
-                  onChange?.(option.value)
-                  handleOpenChange(false)
-                }}
-              >
-                <div className="mr-1 grow truncate px-1">
-                  {option.label}
-                </div>
-                {
-                  (
-                    multiple
-                      ? (value ?? []).includes(option.value)
-                      : value === option.value
-                  ) && <RiCheckLine className="h-4 w-4 shrink-0 text-text-accent" />
-                }
-              </div>
-            ))
-          }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
-  )
-}
-
-export default PureSelect
diff --git a/web/app/components/workflow/nodes/trigger-webhook/components/parameter-table.tsx b/web/app/components/workflow/nodes/trigger-webhook/components/parameter-table.tsx
index 11e9265a4b..64556fe461 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/components/parameter-table.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/components/parameter-table.tsx
@@ -28,7 +28,7 @@ const ParameterTable: FC<ParameterTableProps> = ({
 }) => {
   const { t } = useTranslation()
 
-  // Memoize typeOptions to prevent unnecessary re-renders that cause SimpleSelect state resets
+  // Memoize typeOptions to prevent unnecessary re-renders that cause Select state resets
   const typeOptions = useMemo(() =>
     createParameterTypeOptions(contentType), [contentType])
 
diff --git a/web/docs/overlay-migration.md b/web/docs/overlay-migration.md
index cb020f9ab6..1ab79511f2 100644
--- a/web/docs/overlay-migration.md
+++ b/web/docs/overlay-migration.md
@@ -10,7 +10,6 @@ This document tracks the Dify-web migration away from legacy overlay APIs.
   - `@/app/components/base/portal-to-follow-elem`
   - `@/app/components/base/tooltip`
   - `@/app/components/base/modal`
-  - `@/app/components/base/select` (including `custom` / `pure`)
   - `@/app/components/base/dialog`
 - Replacement primitives:
   - `@langgenius/dify-ui/tooltip`
diff --git a/web/eslint.constants.mjs b/web/eslint.constants.mjs
index 1039a300ec..fb9c67c454 100644
--- a/web/eslint.constants.mjs
+++ b/web/eslint.constants.mjs
@@ -58,15 +58,6 @@ export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
     ],
     message: 'Deprecated: use @langgenius/dify-ui/dialog instead. See issue #32767.',
   },
-  {
-    group: [
-      '**/base/select',
-      '**/base/select/index',
-      '**/base/select/custom',
-      '**/base/select/pure',
-    ],
-    message: 'Deprecated: use @langgenius/dify-ui/select instead. See issue #32767.',
-  },
   {
     group: [
       '**/base/dialog',
@@ -89,9 +80,6 @@ export const OVERLAY_MIGRATION_LEGACY_BASE_FILES = [
   'app/components/base/modal/modal.tsx',
   'app/components/base/prompt-editor/plugins/context-block/component.tsx',
   'app/components/base/prompt-editor/plugins/history-block/component.tsx',
-  'app/components/base/select/custom.tsx',
-  'app/components/base/select/index.tsx',
-  'app/components/base/select/pure.tsx',
   'app/components/base/sort/index.tsx',
   'app/components/base/theme-selector.tsx',
   'app/components/base/tooltip/index.tsx',

From 141ffa5d03bd45058cfa8140ebe2560117a79153 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Thu, 30 Apr 2026 04:12:22 +0000
Subject: [PATCH 02/15] [autofix.ci] apply automated fixes

---
 eslint-suppressions.json | 26 +-------------------------
 1 file changed, 1 insertion(+), 25 deletions(-)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index ced0d27afe..f12b7abb1e 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -1158,7 +1158,7 @@
   },
   "web/app/components/base/form/components/base/base-field.tsx": {
     "no-restricted-imports": {
-      "count": 2
+      "count": 1
     },
     "ts/no-explicit-any": {
       "count": 3
@@ -1909,25 +1909,6 @@
       "count": 1
     }
   },
-  "web/app/components/base/select/index.stories.tsx": {
-    "no-console": {
-      "count": 4
-    },
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
-  "web/app/components/base/select/index.tsx": {
-    "react/set-state-in-effect": {
-      "count": 2
-    },
-    "style/multiline-ternary": {
-      "count": 2
-    },
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "web/app/components/base/sort/index.tsx": {
     "ts/no-explicit-any": {
       "count": 2
@@ -5437,11 +5418,6 @@
       "count": 1
     }
   },
-  "web/app/signin/_header.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/signin/components/mail-and-password-auth.tsx": {
     "ts/no-explicit-any": {
       "count": 1

From 16f57b74f56bb7f96dc34ad88e0bb44cf1907cb0 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 30 Apr 2026 12:46:35 +0800
Subject: [PATCH 03/15] refactor(web): replace signin locale select with menu

---
 .../components/base/select/locale-signin.tsx  | 64 -------------------
 .../__tests__/_locale-menu.spec.tsx}          | 37 ++++++-----
 web/app/signin/_header.tsx                    |  4 +-
 web/app/signin/_locale-menu.tsx               | 64 +++++++++++++++++++
 4 files changed, 84 insertions(+), 85 deletions(-)
 delete mode 100644 web/app/components/base/select/locale-signin.tsx
 rename web/app/{components/base/select/__tests__/locale-signin.spec.tsx => signin/__tests__/_locale-menu.spec.tsx} (69%)
 create mode 100644 web/app/signin/_locale-menu.tsx

diff --git a/web/app/components/base/select/locale-signin.tsx b/web/app/components/base/select/locale-signin.tsx
deleted file mode 100644
index 046a76a5d4..0000000000
--- a/web/app/components/base/select/locale-signin.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-'use client'
-import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
-import { GlobeAltIcon } from '@heroicons/react/24/outline'
-import { Fragment } from 'react'
-
-type ISelectProps = {
-  items: Array<{ value: string, name: string }>
-  value?: string
-  className?: string
-  onChange?: (value: string) => void
-}
-
-export default function LocaleSigninSelect({
-  items,
-  value,
-  onChange,
-}: ISelectProps) {
-  const item = items.filter(item => item.value === value)[0]
-
-  return (
-    <div className="w-56 text-right">
-      <Menu as="div" className="relative inline-block text-left">
-        <div>
-          <MenuButton className="h-[44px]justify-center inline-flex w-full items-center rounded-lg border border-components-button-secondary-border px-[10px] py-[6px] text-[13px] font-medium text-text-primary hover:bg-state-base-hover">
-            <GlobeAltIcon className="mr-1 h-5 w-5" aria-hidden="true" />
-            {item?.name}
-          </MenuButton>
-        </div>
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <MenuItems className="absolute right-0 z-10 mt-2 w-[200px] origin-top-right divide-y divide-divider-regular rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg focus:outline-hidden">
-            <div className="max-h-96 overflow-y-auto mask-[linear-gradient(to_bottom,transparent_0px,black_8px,black_calc(100%-8px),transparent_100%)] px-1 py-1">
-              {items.map((item) => {
-                return (
-                  <MenuItem key={item.value}>
-                    <button
-                      type="button"
-                      className="group flex w-full items-center rounded-lg px-3 py-2 text-sm text-text-secondary data-active:bg-state-base-hover"
-                      onClick={(evt) => {
-                        evt.preventDefault()
-                        onChange?.(item.value)
-                      }}
-                    >
-                      {item.name}
-                    </button>
-                  </MenuItem>
-                )
-              })}
-
-            </div>
-
-          </MenuItems>
-        </Transition>
-      </Menu>
-    </div>
-  )
-}
diff --git a/web/app/components/base/select/__tests__/locale-signin.spec.tsx b/web/app/signin/__tests__/_locale-menu.spec.tsx
similarity index 69%
rename from web/app/components/base/select/__tests__/locale-signin.spec.tsx
rename to web/app/signin/__tests__/_locale-menu.spec.tsx
index 1eca2b1aed..e43587033f 100644
--- a/web/app/components/base/select/__tests__/locale-signin.spec.tsx
+++ b/web/app/signin/__tests__/_locale-menu.spec.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import LocaleSigninSelect from '../locale-signin'
+import LocaleMenu from '../_locale-menu'
 
 const localeItems = [
   { value: 'en-US', name: 'English (US)' },
@@ -8,16 +8,15 @@ const localeItems = [
   { value: 'ja-JP', name: '日本語' },
 ]
 
-describe('LocaleSigninSelect', () => {
+describe('LocaleMenu', () => {
   beforeEach(() => {
     vi.clearAllMocks()
   })
 
-  // Rendering behavior for selected value and fallback state.
   describe('Rendering', () => {
     it('should render selected locale name when value matches an item', () => {
       render(
-        <LocaleSigninSelect
+        <LocaleMenu
           items={localeItems}
           value="en-US"
           onChange={vi.fn()}
@@ -29,7 +28,7 @@ describe('LocaleSigninSelect', () => {
 
     it('should render trigger without selected label when value is not found', () => {
       render(
-        <LocaleSigninSelect
+        <LocaleMenu
           items={localeItems}
           value="missing"
           onChange={vi.fn()}
@@ -42,14 +41,13 @@ describe('LocaleSigninSelect', () => {
     })
   })
 
-  // Menu interactions and callback behavior.
   describe('User Interactions', () => {
     it('should call onChange with selected locale value when clicking an option', async () => {
       const user = userEvent.setup()
       const onChange = vi.fn()
 
       render(
-        <LocaleSigninSelect
+        <LocaleMenu
           items={localeItems}
           value="en-US"
           onChange={onChange}
@@ -57,16 +55,16 @@ describe('LocaleSigninSelect', () => {
       )
 
       await user.click(screen.getByRole('button', { name: /english \(us\)/i }))
-      await user.click(screen.getByRole('menuitem', { name: '日本語' }))
+      await user.click(screen.getByRole('menuitemradio', { name: '日本語' }))
 
-      expect(onChange).toHaveBeenCalledWith('ja-JP')
+      expect(onChange).toHaveBeenCalledWith('ja-JP', expect.anything())
     })
 
     it('should render all locale options when menu is opened', async () => {
       const user = userEvent.setup()
 
       render(
-        <LocaleSigninSelect
+        <LocaleMenu
           items={localeItems}
           value="en-US"
           onChange={vi.fn()}
@@ -75,34 +73,34 @@ describe('LocaleSigninSelect', () => {
 
       await user.click(screen.getByRole('button', { name: /english \(us\)/i }))
 
-      expect(screen.getByRole('menuitem', { name: 'English (US)' })).toBeInTheDocument()
-      expect(screen.getByRole('menuitem', { name: '简体中文' })).toBeInTheDocument()
-      expect(screen.getByRole('menuitem', { name: '日本語' })).toBeInTheDocument()
+      expect(screen.getByRole('menuitemradio', { name: 'English (US)' })).toBeInTheDocument()
+      expect(screen.getByRole('menuitemradio', { name: '简体中文' })).toBeInTheDocument()
+      expect(screen.getByRole('menuitemradio', { name: '日本語' })).toBeInTheDocument()
     })
   })
 
-  // Edge behavior for missing callback and empty data.
   describe('Edge Cases', () => {
     it('should not throw when onChange is undefined and option is selected', async () => {
       const user = userEvent.setup()
 
       render(
-        <LocaleSigninSelect
+        <LocaleMenu
           items={localeItems}
           value="en-US"
         />,
       )
 
       await user.click(screen.getByRole('button', { name: /english \(us\)/i }))
-      await user.click(screen.getByRole('menuitem', { name: '简体中文' }))
-      // No assertion needed — test verifies no exception is thrown during selection without onChange.
+      await user.click(screen.getByRole('menuitemradio', { name: '简体中文' }))
+
+      expect(screen.getByRole('menuitemradio', { name: '简体中文' })).toBeInTheDocument()
     })
 
     it('should render no options when items are empty', async () => {
       const user = userEvent.setup()
 
       render(
-        <LocaleSigninSelect
+        <LocaleMenu
           items={[]}
           value="en-US"
           onChange={vi.fn()}
@@ -110,7 +108,8 @@ describe('LocaleSigninSelect', () => {
       )
 
       await user.click(screen.getByRole('button'))
-      expect(screen.queryAllByRole('menuitem')).toHaveLength(0)
+
+      expect(screen.queryAllByRole('menuitemradio')).toHaveLength(0)
     })
   })
 })
diff --git a/web/app/signin/_header.tsx b/web/app/signin/_header.tsx
index 0b424d45c2..5b638b4208 100644
--- a/web/app/signin/_header.tsx
+++ b/web/app/signin/_header.tsx
@@ -2,12 +2,12 @@
 import type { Locale } from '@/i18n-config'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import Divider from '@/app/components/base/divider'
-import LocaleSigninSelect from '@/app/components/base/select/locale-signin'
 import { useLocale } from '@/context/i18n'
 import { setLocaleOnClient } from '@/i18n-config'
 import { languages } from '@/i18n-config/language'
 import dynamic from '@/next/dynamic'
 import { systemFeaturesQueryOptions } from '@/service/system-features'
+import LocaleMenu from './_locale-menu'
 
 // Avoid rendering the logo and theme selector on the server
 const DifyLogo = dynamic(() => import('@/app/components/base/logo/dify-logo'), {
@@ -35,7 +35,7 @@ const Header = () => {
           )
         : <DifyLogo size="large" />}
       <div className="flex items-center gap-1">
-        <LocaleSigninSelect
+        <LocaleMenu
           value={locale}
           items={languages.filter(item => item.supported)}
           onChange={(value) => {
diff --git a/web/app/signin/_locale-menu.tsx b/web/app/signin/_locale-menu.tsx
new file mode 100644
index 0000000000..be63286b37
--- /dev/null
+++ b/web/app/signin/_locale-menu.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuRadioItemIndicator,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
+
+type LocaleMenuProps = {
+  items: Array<{ value: string, name: string }>
+  value?: string
+  onChange?: (value: string) => void
+}
+
+export default function LocaleMenu({
+  items,
+  value,
+  onChange,
+}: LocaleMenuProps) {
+  const selectedItem = items.find(item => item.value === value)
+
+  return (
+    <div className="w-56 text-right">
+      <DropdownMenu>
+        <div className="relative inline-block text-left">
+          <div>
+            <DropdownMenuTrigger
+              render={(
+                <button
+                  type="button"
+                  className="inline-flex w-full items-center rounded-lg border border-components-button-secondary-border px-[10px] py-[6px] text-[13px] font-medium text-text-primary hover:bg-state-base-hover"
+                />
+              )}
+            >
+              <span className="mr-1 i-heroicons-globe-alt h-5 w-5" aria-hidden="true" />
+              {selectedItem?.name}
+            </DropdownMenuTrigger>
+          </div>
+        </div>
+        <DropdownMenuContent
+          placement="bottom-end"
+          sideOffset={8}
+          popupClassName="w-[200px]"
+        >
+          <DropdownMenuRadioGroup value={value} onValueChange={onChange}>
+            {items.map(item => (
+              <DropdownMenuRadioItem
+                key={item.value}
+                value={item.value}
+                className="px-3 py-2 text-sm text-text-secondary"
+              >
+                <span className="grow truncate">{item.name}</span>
+                <DropdownMenuRadioItemIndicator />
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

From f7a9279a14250189ba1151bdf5fae0d80cf6b253 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 30 Apr 2026 12:49:25 +0800
Subject: [PATCH 04/15] fix(web): avoid reload when switching signin locale

---
 web/app/signin/__tests__/_header.spec.tsx | 57 +++++++++++++++++++++++
 web/app/signin/_header.tsx                |  2 +-
 2 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 web/app/signin/__tests__/_header.spec.tsx

diff --git a/web/app/signin/__tests__/_header.spec.tsx b/web/app/signin/__tests__/_header.spec.tsx
new file mode 100644
index 0000000000..06a54e0b36
--- /dev/null
+++ b/web/app/signin/__tests__/_header.spec.tsx
@@ -0,0 +1,57 @@
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { setLocaleOnClient } from '@/i18n-config'
+import Header from '../_header'
+
+vi.mock('@tanstack/react-query', () => ({
+  useSuspenseQuery: vi.fn(),
+}))
+
+vi.mock('@/context/i18n', () => ({
+  useLocale: () => 'en-US',
+}))
+
+vi.mock('@/i18n-config', () => ({
+  setLocaleOnClient: vi.fn(),
+}))
+
+vi.mock('@/next/dynamic', () => ({
+  default: () => () => null,
+}))
+
+vi.mock('@/service/system-features', () => ({
+  systemFeaturesQueryOptions: () => ({}),
+}))
+
+vi.mock('../_locale-menu', () => ({
+  default: ({ onChange }: { onChange?: (value: string) => void }) => (
+    <button type="button" onClick={() => onChange?.('ja-JP')}>
+      Switch Language
+    </button>
+  ),
+}))
+
+const mockUseSuspenseQuery = vi.mocked(useSuspenseQuery)
+const mockSetLocaleOnClient = vi.mocked(setLocaleOnClient)
+
+describe('Signin Header', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUseSuspenseQuery.mockReturnValue({
+      data: {
+        branding: {
+          enabled: false,
+          login_page_logo: '',
+        },
+      },
+    } as ReturnType<typeof useSuspenseQuery>)
+  })
+
+  it('should switch locale without forcing a full page reload', () => {
+    render(<Header />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Switch Language' }))
+
+    expect(mockSetLocaleOnClient).toHaveBeenCalledWith('ja-JP', false)
+  })
+})
diff --git a/web/app/signin/_header.tsx b/web/app/signin/_header.tsx
index 5b638b4208..c589513d61 100644
--- a/web/app/signin/_header.tsx
+++ b/web/app/signin/_header.tsx
@@ -39,7 +39,7 @@ const Header = () => {
           value={locale}
           items={languages.filter(item => item.supported)}
           onChange={(value) => {
-            setLocaleOnClient(value as Locale)
+            setLocaleOnClient(value as Locale, false)
           }}
         />
         <Divider type="vertical" className="mx-0 ml-2 h-4" />

From 3c5f4433d774cc200a06a6473d8db4cfff7c914b Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 30 Apr 2026 12:52:38 +0800
Subject: [PATCH 05/15] fix(web): align signin locale menu behavior

---
 .../signin/__tests__/_locale-menu.spec.tsx    |  4 +--
 web/app/signin/_header.tsx                    |  3 +--
 web/app/signin/_locale-menu.tsx               | 27 ++++++++++++-------
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/web/app/signin/__tests__/_locale-menu.spec.tsx b/web/app/signin/__tests__/_locale-menu.spec.tsx
index e43587033f..86edd69cf8 100644
--- a/web/app/signin/__tests__/_locale-menu.spec.tsx
+++ b/web/app/signin/__tests__/_locale-menu.spec.tsx
@@ -57,7 +57,7 @@ describe('LocaleMenu', () => {
       await user.click(screen.getByRole('button', { name: /english \(us\)/i }))
       await user.click(screen.getByRole('menuitemradio', { name: '日本語' }))
 
-      expect(onChange).toHaveBeenCalledWith('ja-JP', expect.anything())
+      expect(onChange).toHaveBeenCalledWith('ja-JP')
     })
 
     it('should render all locale options when menu is opened', async () => {
@@ -93,7 +93,7 @@ describe('LocaleMenu', () => {
       await user.click(screen.getByRole('button', { name: /english \(us\)/i }))
       await user.click(screen.getByRole('menuitemradio', { name: '简体中文' }))
 
-      expect(screen.getByRole('menuitemradio', { name: '简体中文' })).toBeInTheDocument()
+      expect(screen.queryByRole('menuitemradio', { name: '简体中文' })).not.toBeInTheDocument()
     })
 
     it('should render no options when items are empty', async () => {
diff --git a/web/app/signin/_header.tsx b/web/app/signin/_header.tsx
index c589513d61..22a05c8d2d 100644
--- a/web/app/signin/_header.tsx
+++ b/web/app/signin/_header.tsx
@@ -1,5 +1,4 @@
 'use client'
-import type { Locale } from '@/i18n-config'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import Divider from '@/app/components/base/divider'
 import { useLocale } from '@/context/i18n'
@@ -39,7 +38,7 @@ const Header = () => {
           value={locale}
           items={languages.filter(item => item.supported)}
           onChange={(value) => {
-            setLocaleOnClient(value as Locale, false)
+            setLocaleOnClient(value, false)
           }}
         />
         <Divider type="vertical" className="mx-0 ml-2 h-4" />
diff --git a/web/app/signin/_locale-menu.tsx b/web/app/signin/_locale-menu.tsx
index be63286b37..5f72a51eb9 100644
--- a/web/app/signin/_locale-menu.tsx
+++ b/web/app/signin/_locale-menu.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -9,18 +7,28 @@ import {
   DropdownMenuTrigger,
 } from '@langgenius/dify-ui/dropdown-menu'
 
-type LocaleMenuProps = {
-  items: Array<{ value: string, name: string }>
-  value?: string
-  onChange?: (value: string) => void
+type LocaleMenuItem<T extends string> = {
+  value: T
+  name: string
 }
 
-export default function LocaleMenu({
+type LocaleMenuProps<T extends string> = {
+  items: Array<LocaleMenuItem<T>>
+  value?: T
+  onChange?: (value: T) => void
+}
+
+export default function LocaleMenu<T extends string>({
   items,
   value,
   onChange,
-}: LocaleMenuProps) {
+}: LocaleMenuProps<T>) {
   const selectedItem = items.find(item => item.value === value)
+  const handleValueChange = (nextValue: string) => {
+    const nextItem = items.find(item => item.value === nextValue)
+    if (nextItem)
+      onChange?.(nextItem.value)
+  }
 
   return (
     <div className="w-56 text-right">
@@ -45,11 +53,12 @@ export default function LocaleMenu({
           sideOffset={8}
           popupClassName="w-[200px]"
         >
-          <DropdownMenuRadioGroup value={value} onValueChange={onChange}>
+          <DropdownMenuRadioGroup value={value} onValueChange={handleValueChange}>
             {items.map(item => (
               <DropdownMenuRadioItem
                 key={item.value}
                 value={item.value}
+                closeOnClick
                 className="px-3 py-2 text-sm text-text-secondary"
               >
                 <span className="grow truncate">{item.name}</span>

From df76733ed2fb6f69debc0cff36645067c512a0b6 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 30 Apr 2026 12:56:49 +0800
Subject: [PATCH 06/15] refactor(web): remove unused type exports

---
 web/app/components/base/form/components/field/select.tsx | 2 +-
 web/app/components/base/portal-to-follow-elem/index.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/app/components/base/form/components/field/select.tsx b/web/app/components/base/form/components/field/select.tsx
index b1809d9bba..2ed52eefec 100644
--- a/web/app/components/base/form/components/field/select.tsx
+++ b/web/app/components/base/form/components/field/select.tsx
@@ -18,7 +18,7 @@ export type Option = {
   value: string
 }
 
-export type SelectFieldPopupProps = {
+type SelectFieldPopupProps = {
   className?: string
   title?: string
   titleClassName?: string
diff --git a/web/app/components/base/portal-to-follow-elem/index.tsx b/web/app/components/base/portal-to-follow-elem/index.tsx
index fbadeaf302..866f22bcc5 100644
--- a/web/app/components/base/portal-to-follow-elem/index.tsx
+++ b/web/app/components/base/portal-to-follow-elem/index.tsx
@@ -32,7 +32,7 @@ import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 
-export type PortalToFollowElemOptions = {
+type PortalToFollowElemOptions = {
   /*
   * top, bottom, left, right
   * start, end. Default is middle

From 3c99026328a6303657d2c4c3e91d31d1b8f00b79 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 30 Apr 2026 13:13:55 +0800
Subject: [PATCH 07/15] fix: preserve select migration behavior

---
 .../base/__tests__/base-field.spec.tsx        | 19 ++++++++++++++
 .../base/form/components/base/base-field.tsx  | 25 ++++++++++++++++---
 .../field/__tests__/select.spec.tsx           | 16 ++++++++++++
 .../__tests__/index.spec.tsx                  |  3 ++-
 .../field/input-type-select/trigger.tsx       | 11 ++++----
 .../base/form/components/field/select.tsx     | 14 +++++++++--
 6 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/web/app/components/base/form/components/base/__tests__/base-field.spec.tsx b/web/app/components/base/form/components/base/__tests__/base-field.spec.tsx
index a5a84b8738..a4d1323e6a 100644
--- a/web/app/components/base/form/components/base/__tests__/base-field.spec.tsx
+++ b/web/app/components/base/form/components/base/__tests__/base-field.spec.tsx
@@ -118,6 +118,25 @@ describe('BaseField', () => {
     expect(screen.queryByText('Beta')).not.toBeInTheDocument()
   })
 
+  it('should not render current select value when it is filtered out by show_on conditions', () => {
+    renderBaseField({
+      formSchema: {
+        type: FormTypeEnum.select,
+        name: 'mode',
+        label: 'Mode',
+        required: false,
+        options: [
+          { label: 'Alpha', value: 'alpha' },
+          { label: 'Beta', value: 'beta', show_on: [{ variable: 'enabled', value: 'yes' }] },
+        ],
+      },
+      defaultValues: { mode: 'beta', enabled: 'no' },
+    })
+
+    expect(screen.getByRole('combobox', { name: 'Mode' })).not.toHaveTextContent('beta')
+    expect(screen.getByRole('combobox', { name: 'Mode' })).toHaveTextContent('common.placeholder.input')
+  })
+
   it('should render dynamic select loading state', () => {
     mockDynamicOptions.mockReturnValue({
       data: undefined,
diff --git a/web/app/components/base/form/components/base/base-field.tsx b/web/app/components/base/form/components/base/base-field.tsx
index a4159cbc6f..a256bccd8b 100644
--- a/web/app/components/base/form/components/base/base-field.tsx
+++ b/web/app/components/base/form/components/base/base-field.tsx
@@ -51,6 +51,19 @@ const getTranslatedContent = ({ content, render }: {
   return ''
 }
 
+type SelectOption = {
+  label: string
+  value: string
+}
+
+const getSingleSelectValue = (value: unknown, options: SelectOption[]) => {
+  return options.find(option => option.value === value)?.value ?? null
+}
+
+const getSingleSelectLabel = (value: unknown, options: SelectOption[], placeholder: string | undefined) => {
+  return options.find(option => option.value === value)?.label ?? placeholder
+}
+
 const VALIDATE_STATUS_STYLE_MAP: Record<FormItemValidateStatusEnum, { componentClassName: string, textClassName: string, infoFieldName: string }> = {
   [FormItemValidateStatusEnum.Error]: {
     componentClassName: 'border-components-input-border-destructive focus:border-components-input-border-destructive',
@@ -267,7 +280,7 @@ const BaseField = ({
               : (
                   <Select
                     items={memorizedOptions}
-                    value={value || null}
+                    value={getSingleSelectValue(value, memorizedOptions)}
                     disabled={disabled}
                     onValueChange={(next) => {
                       if (next == null)
@@ -276,7 +289,9 @@ const BaseField = ({
                     }}
                   >
                     <SelectTrigger id={field.name} aria-label={translatedLabel || field.name} className="px-2">
-                      <SelectValue placeholder={translatedPlaceholder} />
+                      <SelectValue placeholder={translatedPlaceholder}>
+                        {nextValue => getSingleSelectLabel(nextValue, memorizedOptions, translatedPlaceholder)}
+                      </SelectValue>
                     </SelectTrigger>
                     <SelectContent popupClassName="max-h-[320px] w-(--anchor-width) bg-components-panel-bg-blur">
                       {memorizedOptions.map(option => (
@@ -339,7 +354,7 @@ const BaseField = ({
               : (
                   <Select
                     items={dynamicOptions}
-                    value={value || null}
+                    value={getSingleSelectValue(value, dynamicOptions)}
                     disabled={disabled || isDynamicOptionsLoading}
                     onValueChange={(next) => {
                       if (next == null)
@@ -348,7 +363,9 @@ const BaseField = ({
                     }}
                   >
                     <SelectTrigger id={field.name} aria-label={translatedLabel || field.name} className="px-2">
-                      <SelectValue placeholder={dynamicPlaceholder} />
+                      <SelectValue placeholder={dynamicPlaceholder}>
+                        {nextValue => getSingleSelectLabel(nextValue, dynamicOptions, dynamicPlaceholder)}
+                      </SelectValue>
                     </SelectTrigger>
                     <SelectContent popupClassName="w-(--anchor-width) bg-components-panel-bg-blur">
                       {dynamicNoticeTitle && (
diff --git a/web/app/components/base/form/components/field/__tests__/select.spec.tsx b/web/app/components/base/form/components/field/__tests__/select.spec.tsx
index aec6c6fd56..45cc87d157 100644
--- a/web/app/components/base/form/components/field/__tests__/select.spec.tsx
+++ b/web/app/components/base/form/components/field/__tests__/select.spec.tsx
@@ -33,6 +33,22 @@ describe('SelectField', () => {
     expect(screen.getByRole('combobox', { name: 'Mode' })).toHaveTextContent('Alpha')
   })
 
+  it('should render the option label when selected value is an empty string', () => {
+    mockField.state.value = ''
+
+    render(
+      <SelectField
+        label="Mode"
+        options={[
+          { label: 'No default selected', value: '' },
+          { label: 'Alpha', value: 'alpha' },
+        ]}
+      />,
+    )
+
+    expect(screen.getByRole('combobox', { name: 'Mode' })).toHaveTextContent('No default selected')
+  })
+
   it('should update value when users select another option', async () => {
     const user = userEvent.setup()
     render(
diff --git a/web/app/components/base/form/components/field/input-type-select/__tests__/index.spec.tsx b/web/app/components/base/form/components/field/input-type-select/__tests__/index.spec.tsx
index e5e4e9dc9a..4efe5e1257 100644
--- a/web/app/components/base/form/components/field/input-type-select/__tests__/index.spec.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/__tests__/index.spec.tsx
@@ -21,10 +21,11 @@ describe('InputTypeSelectField', () => {
   })
 
   it('should render label and selected option', () => {
-    render(<InputTypeSelectField label="Input type" supportFile={true} />)
+    const { container } = render(<InputTypeSelectField label="Input type" supportFile={true} />)
 
     expect(screen.getByText('Input type')).toBeInTheDocument()
     expect(screen.getByText('appDebug.variableConfig.text-input')).toBeInTheDocument()
+    expect(container.querySelector('[role="combobox"] span > div')).not.toBeInTheDocument()
   })
 
   it('should update value when users choose another input type', async () => {
diff --git a/web/app/components/base/form/components/field/input-type-select/trigger.tsx b/web/app/components/base/form/components/field/input-type-select/trigger.tsx
index bf67a3d775..e66bf8efda 100644
--- a/web/app/components/base/form/components/field/input-type-select/trigger.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/trigger.tsx
@@ -1,7 +1,6 @@
 import type { FileTypeSelectOption } from './types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Badge from '@/app/components/base/badge'
 
 type TriggerProps = {
   option: FileTypeSelectOption | undefined
@@ -16,13 +15,13 @@ const Trigger = ({
     return <span className="grow p-1">{t('placeholder.select', { ns: 'common' })}</span>
 
   return (
-    <div className="flex min-w-0 items-center gap-x-0.5">
+    <>
       <option.Icon className="h-4 w-4 shrink-0 text-text-tertiary" />
       <span className="min-w-0 grow truncate p-1">{option.label}</span>
-      <div className="pr-0.5">
-        <Badge text={option.type} uppercase={false} />
-      </div>
-    </div>
+      <span className="relative inline-flex h-5 shrink-0 items-center rounded-[5px] border border-divider-deep px-[5px] system-xs-medium leading-3 whitespace-nowrap text-text-tertiary">
+        {option.type}
+      </span>
+    </>
   )
 }
 
diff --git a/web/app/components/base/form/components/field/select.tsx b/web/app/components/base/form/components/field/select.tsx
index 2ed52eefec..a8b49a2691 100644
--- a/web/app/components/base/form/components/field/select.tsx
+++ b/web/app/components/base/form/components/field/select.tsx
@@ -18,6 +18,14 @@ export type Option = {
   value: string
 }
 
+const getSelectedValue = (value: string | undefined, options: Option[]) => {
+  return options.some(option => option.value === value) ? value : null
+}
+
+const getDisplayLabel = (value: string | null, options: Option[], placeholder: string) => {
+  return options.find(option => option.value === value)?.label ?? placeholder
+}
+
 type SelectFieldPopupProps = {
   className?: string
   title?: string
@@ -58,7 +66,7 @@ const SelectField = ({
       />
       <Select
         items={options}
-        value={field.state.value ?? null}
+        value={getSelectedValue(field.state.value, options)}
         disabled={disabled}
         onValueChange={(next) => {
           if (next == null)
@@ -68,7 +76,9 @@ const SelectField = ({
         }}
       >
         <SelectTrigger id={field.name} className="px-2">
-          <SelectValue placeholder={placeholderText} />
+          <SelectValue placeholder={placeholderText}>
+            {(nextValue: string | null) => getDisplayLabel(nextValue, options, placeholderText)}
+          </SelectValue>
         </SelectTrigger>
         <SelectContent popupClassName={cn('w-(--anchor-width) bg-components-panel-bg-blur', popupProps?.className)}>
           {popupProps?.title && (

From ea7b03f28a1431be90ef792e912f2cdb6859389d Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 30 Apr 2026 13:19:34 +0800
Subject: [PATCH 08/15] fix: preserve input type trigger layout

---
 .../input-type-select/__tests__/index.spec.tsx    |  1 +
 .../input-type-select/__tests__/trigger.spec.tsx  | 15 +++++++++++++++
 .../field/input-type-select/trigger.tsx           |  4 ++--
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/web/app/components/base/form/components/field/input-type-select/__tests__/index.spec.tsx b/web/app/components/base/form/components/field/input-type-select/__tests__/index.spec.tsx
index 4efe5e1257..f666315ddf 100644
--- a/web/app/components/base/form/components/field/input-type-select/__tests__/index.spec.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/__tests__/index.spec.tsx
@@ -26,6 +26,7 @@ describe('InputTypeSelectField', () => {
     expect(screen.getByText('Input type')).toBeInTheDocument()
     expect(screen.getByText('appDebug.variableConfig.text-input')).toBeInTheDocument()
     expect(container.querySelector('[role="combobox"] span > div')).not.toBeInTheDocument()
+    expect(container.querySelector('[role="combobox"] > span > span')).toHaveClass('flex', 'min-w-0', 'items-center', 'gap-x-0.5')
   })
 
   it('should update value when users choose another input type', async () => {
diff --git a/web/app/components/base/form/components/field/input-type-select/__tests__/trigger.spec.tsx b/web/app/components/base/form/components/field/input-type-select/__tests__/trigger.spec.tsx
index 24c22e1f1b..a7a1f2a294 100644
--- a/web/app/components/base/form/components/field/input-type-select/__tests__/trigger.spec.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/__tests__/trigger.spec.tsx
@@ -24,4 +24,19 @@ describe('InputTypeSelect Trigger', () => {
     expect(screen.getByText('Text Input')).toBeInTheDocument()
     expect(screen.getByText('string')).toBeInTheDocument()
   })
+
+  it('should keep selected option parts in one inline flex row', () => {
+    render(
+      <Trigger
+        option={{
+          value: 'text-input',
+          label: 'Text Input',
+          Icon: MockIcon,
+          type: 'string',
+        }}
+      />,
+    )
+
+    expect(screen.getByText('Text Input').parentElement).toHaveClass('flex', 'min-w-0', 'items-center', 'gap-x-0.5')
+  })
 })
diff --git a/web/app/components/base/form/components/field/input-type-select/trigger.tsx b/web/app/components/base/form/components/field/input-type-select/trigger.tsx
index e66bf8efda..fab37c81f7 100644
--- a/web/app/components/base/form/components/field/input-type-select/trigger.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/trigger.tsx
@@ -15,13 +15,13 @@ const Trigger = ({
     return <span className="grow p-1">{t('placeholder.select', { ns: 'common' })}</span>
 
   return (
-    <>
+    <span className="flex min-w-0 items-center gap-x-0.5">
       <option.Icon className="h-4 w-4 shrink-0 text-text-tertiary" />
       <span className="min-w-0 grow truncate p-1">{option.label}</span>
       <span className="relative inline-flex h-5 shrink-0 items-center rounded-[5px] border border-divider-deep px-[5px] system-xs-medium leading-3 whitespace-nowrap text-text-tertiary">
         {option.type}
       </span>
-    </>
+    </span>
   )
 }
 

From 4e94683fd430cd2ef40dab5191f2bef47322759a Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 30 Apr 2026 13:25:27 +0800
Subject: [PATCH 09/15] fix: native button

---
 .../app-sidebar/dataset-info/dropdown.tsx     | 23 ++++++++++-----
 web/app/components/base/infotip/index.tsx     | 11 ++++----
 .../workflow/block-selector/main.tsx          | 28 +++++++++++--------
 .../variable/var-reference-picker.trigger.tsx |  2 ++
 4 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/web/app/components/app-sidebar/dataset-info/dropdown.tsx b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
index 8f3a25738a..a8a7c51ae8 100644
--- a/web/app/components/app-sidebar/dataset-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
@@ -89,9 +89,13 @@ const DropDown = ({
       setConfirmMessage(isUsedByApp ? t('datasetUsedByApp', { ns: 'dataset' })! : t('deleteDatasetConfirmContent', { ns: 'dataset' })!)
       setShowConfirmDelete(true)
     }
-    catch (e: any) {
-      const res = await e.json()
-      toast(res?.message || 'Unknown error', { type: 'error' })
+    catch (e: unknown) {
+      let message = 'Unknown error'
+      if (e instanceof Response) {
+        const res = await e.json() as { message?: string }
+        message = res?.message || message
+      }
+      toast(message, { type: 'error' })
     }
   }, [dataset.id, t])
 
@@ -112,10 +116,15 @@ const DropDown = ({
       open={open}
       onOpenChange={setOpen}
     >
-      <DropdownMenuTrigger render={<div />}>
-        <ActionButton className={cn(expand ? 'size-8 rounded-lg' : 'size-6 rounded-md', open && 'bg-state-base-hover')}>
-          <span aria-hidden className="i-ri-more-fill size-4" />
-        </ActionButton>
+      <DropdownMenuTrigger
+        render={(
+          <ActionButton
+            aria-label={t('operation.more', { ns: 'common' })}
+            className={cn(expand ? 'size-8 rounded-lg' : 'size-6 rounded-md', open && 'bg-state-base-hover')}
+          />
+        )}
+      >
+        <span aria-hidden className="i-ri-more-fill size-4" />
       </DropdownMenuTrigger>
       <DropdownMenuContent
         placement={expand ? 'bottom-end' : 'right-start'}
diff --git a/web/app/components/base/infotip/index.tsx b/web/app/components/base/infotip/index.tsx
index ce818fe030..0927e6ac27 100644
--- a/web/app/components/base/infotip/index.tsx
+++ b/web/app/components/base/infotip/index.tsx
@@ -65,12 +65,13 @@ export function Infotip({
         delay={delay}
         closeDelay={closeDelay}
         aria-label={ariaLabel}
-        render={(
-          <span className={cn('inline-flex h-4 w-4 shrink-0 items-center justify-center', className)}>
-            <span aria-hidden className={cn('i-ri-question-line h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary', iconClassName)} />
-          </span>
+        className={cn(
+          'inline-flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent p-0 focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden',
+          className,
         )}
-      />
+      >
+        <span aria-hidden className={cn('i-ri-question-line h-3.5 w-3.5 text-text-quaternary hover:text-text-tertiary', iconClassName)} />
+      </PopoverTrigger>
       <PopoverContent
         placement={placement}
         popupClassName={cn('max-w-[300px] rounded-md px-3 py-2 system-xs-regular text-text-tertiary', popupClassName)}
diff --git a/web/app/components/workflow/block-selector/main.tsx b/web/app/components/workflow/block-selector/main.tsx
index b583170ae7..4131464fcf 100644
--- a/web/app/components/workflow/block-selector/main.tsx
+++ b/web/app/components/workflow/block-selector/main.tsx
@@ -13,6 +13,7 @@ import type {
   OnSelectBlock,
   ToolWithProvider,
 } from '../types'
+import { cn } from '@langgenius/dify-ui/cn'
 import {
   Popover,
   PopoverContent,
@@ -177,18 +178,19 @@ const NodeSelector: FC<NodeSelectorProps> = ({
   }, [activeTab, t])
 
   const defaultTriggerElement = (
-    <div
-      className={`
-        z-10 flex h-4
-        w-4 cursor-pointer items-center justify-center rounded-full bg-components-button-primary-bg text-text-primary-on-surface hover:bg-components-button-primary-bg-hover
-        ${triggerClassName?.(open)}
-      `}
+    <PopoverTrigger
+      aria-label={t('common.addBlock', { ns: 'workflow' })}
+      className={cn(
+        'z-10 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full border-0 bg-components-button-primary-bg p-0 text-text-primary-on-surface hover:bg-components-button-primary-bg-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden',
+        triggerClassName?.(open),
+      )}
       style={triggerStyle}
+      onClick={handleTrigger}
     >
-      <Plus02 className="h-2.5 w-2.5" />
-    </div>
+      <Plus02 aria-hidden className="h-2.5 w-2.5" />
+    </PopoverTrigger>
   )
-  const triggerElement = trigger ? trigger(open) : defaultTriggerElement
+  const triggerElement = trigger?.(open)
   const triggerElementProps = React.isValidElement(triggerElement)
     ? (triggerElement.props as {
         onClick?: MouseEventHandler<HTMLElement>
@@ -216,15 +218,17 @@ const NodeSelector: FC<NodeSelectorProps> = ({
   const sideOffset = typeof offset === 'number' ? offset : (resolvedOffset?.mainAxis ?? 0)
   const alignOffset = typeof offset === 'number' ? 0 : (resolvedOffset?.crossAxis ?? 0)
   const nativeButton = asChild
-    && React.isValidElement(triggerElement)
-    && (typeof triggerElement.type !== 'string' || triggerElement.type === 'button')
+    ? React.isValidElement(triggerElement) && (typeof triggerElement.type !== 'string' || triggerElement.type === 'button')
+    : false
 
   return (
     <Popover
       open={open}
       onOpenChange={handleOpenChange}
     >
-      <PopoverTrigger nativeButton={nativeButton} render={resolvedTriggerElement as React.ReactElement} />
+      {trigger
+        ? <PopoverTrigger nativeButton={nativeButton} render={resolvedTriggerElement as React.ReactElement} />
+        : defaultTriggerElement}
       <PopoverContent
         placement={placement}
         sideOffset={sideOffset}
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
index 7f77f37987..3c9c517e55 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx
@@ -230,6 +230,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
           ? variablePicker
           : (
               <PopoverTrigger
+                nativeButton={false}
                 render={variablePicker}
                 onClick={handleTriggerReadonlyClick}
               />
@@ -344,6 +345,7 @@ const VarReferencePickerTrigger: FC<Props> = ({
 
     return (
       <PopoverTrigger
+        nativeButton={false}
         render={triggerContent}
         onClick={handleTriggerReadonlyClick}
       />

From f8c876cc876889753141fc261f1fc02ddd15d207 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 30 Apr 2026 13:27:41 +0800
Subject: [PATCH 10/15] fix

---
 web/app/components/workflow/block-selector/main.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/app/components/workflow/block-selector/main.tsx b/web/app/components/workflow/block-selector/main.tsx
index 4131464fcf..a588fb660e 100644
--- a/web/app/components/workflow/block-selector/main.tsx
+++ b/web/app/components/workflow/block-selector/main.tsx
@@ -191,12 +191,14 @@ const NodeSelector: FC<NodeSelectorProps> = ({
     </PopoverTrigger>
   )
   const triggerElement = trigger?.(open)
+  const shouldRenderTriggerElementAsRoot = React.isValidElement(triggerElement)
+    && (asChild || triggerElement.type === 'button')
   const triggerElementProps = React.isValidElement(triggerElement)
     ? (triggerElement.props as {
         onClick?: MouseEventHandler<HTMLElement>
       })
     : null
-  const resolvedTriggerElement = asChild && React.isValidElement(triggerElement)
+  const resolvedTriggerElement = shouldRenderTriggerElementAsRoot
     ? React.cloneElement(
         triggerElement as React.ReactElement<{
           onClick?: MouseEventHandler<HTMLElement>
@@ -217,9 +219,8 @@ const NodeSelector: FC<NodeSelectorProps> = ({
   const resolvedOffset = typeof offset === 'number' || typeof offset === 'function' ? undefined : offset
   const sideOffset = typeof offset === 'number' ? offset : (resolvedOffset?.mainAxis ?? 0)
   const alignOffset = typeof offset === 'number' ? 0 : (resolvedOffset?.crossAxis ?? 0)
-  const nativeButton = asChild
-    ? React.isValidElement(triggerElement) && (typeof triggerElement.type !== 'string' || triggerElement.type === 'button')
-    : false
+  const nativeButton = shouldRenderTriggerElementAsRoot
+    && (typeof triggerElement.type !== 'string' || triggerElement.type === 'button')
 
   return (
     <Popover

From 871fc0256b4bdaa94e2c61bea7e742bc4a3b4c6f Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Thu, 30 Apr 2026 05:30:21 +0000
Subject: [PATCH 11/15] [autofix.ci] apply automated fixes

---
 eslint-suppressions.json | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index f12b7abb1e..2166583726 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -202,11 +202,6 @@
       "count": 1
     }
   },
-  "web/app/components/app-sidebar/dataset-info/dropdown.tsx": {
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "web/app/components/app-sidebar/index.tsx": {
     "ts/no-explicit-any": {
       "count": 1

From 195ff4711d08471f70e2162c49a76c57776c7d10 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Thu, 30 Apr 2026 13:33:37 +0800
Subject: [PATCH 12/15] refactor(web): migrate subscription create modal to
 dialog (#35721)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 eslint-suppressions.json                      |   5 -
 .../create/__tests__/common-modal.spec.tsx    |  32 +----
 .../subscription-list/create/common-modal.tsx | 130 +++++++++++++-----
 3 files changed, 93 insertions(+), 74 deletions(-)

diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index ced0d27afe..183560f81b 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -3167,11 +3167,6 @@
       "count": 2
     }
   },
-  "web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-common-modal-state.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx
index 459b657f3f..af52ec14f0 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/common-modal.spec.tsx
@@ -1,6 +1,6 @@
+import type * as React from 'react'
 import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import * as React from 'react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { SupportedCreationMethods } from '@/app/components/plugins/types'
 import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
@@ -134,36 +134,6 @@ vi.mock('@langgenius/dify-ui/toast', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/modal/modal', () => ({
-  default: ({
-    children,
-    onClose,
-    onConfirm,
-    title,
-    confirmButtonText,
-    bottomSlot,
-    size,
-    disabled,
-  }: {
-    children: React.ReactNode
-    onClose: () => void
-    onConfirm: () => void
-    title: string
-    confirmButtonText: string
-    bottomSlot?: React.ReactNode
-    size?: string
-    disabled?: boolean
-  }) => (
-    <div data-testid="modal" data-size={size} data-disabled={disabled}>
-      <div data-testid="modal-title">{title}</div>
-      <div data-testid="modal-content">{children}</div>
-      <div data-testid="modal-bottom-slot">{bottomSlot}</div>
-      <button data-testid="modal-confirm" onClick={onConfirm} disabled={disabled}>{confirmButtonText}</button>
-      <button data-testid="modal-close" onClick={onClose}>Close</button>
-    </div>
-  ),
-}))
-
 type MockFormValuesConfig = {
   values: Record<string, unknown>
   isCheckValidated: boolean
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
index 15d3417c9b..502cf73d54 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/common-modal.tsx
@@ -1,8 +1,15 @@
 'use client'
 import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
+import { Button } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Dialog,
+  DialogCloseButton,
+  DialogContent,
+  DialogTitle,
+} from '@langgenius/dify-ui/dialog'
 import { useTranslation } from 'react-i18next'
 import { EncryptedBottom } from '@/app/components/base/encrypted-bottom'
-import Modal from '@/app/components/base/modal/modal'
 import { SupportedCreationMethods } from '@/app/components/plugins/types'
 import {
   ConfigurationStepContent,
@@ -48,46 +55,93 @@ export const CommonCreateModal = ({ onClose, createType, builder }: Props) => {
   const isApiKeyType = createType === SupportedCreationMethods.APIKEY
   const isVerifyStep = currentStep === ApiKeyStep.Verify
   const isConfigurationStep = currentStep === ApiKeyStep.Configuration
+  const isDisabled = isVerifyingCredentials || isBuilding
+  const modalSize = createType === SupportedCreationMethods.MANUAL ? 'md' : 'sm'
 
   return (
-    <Modal
-      title={t(MODAL_TITLE_KEY_MAP[createType], { ns: 'pluginTrigger' })}
-      confirmButtonText={confirmButtonText}
-      onClose={onClose}
-      onCancel={onClose}
-      onConfirm={handleConfirm}
-      disabled={isVerifyingCredentials || isBuilding}
-      bottomSlot={isVerifyStep ? <EncryptedBottom /> : null}
-      size={createType === SupportedCreationMethods.MANUAL ? 'md' : 'sm'}
-      containerClassName="min-h-[360px]"
-      clickOutsideNotClose
-    >
-      {isApiKeyType && <MultiSteps currentStep={currentStep} />}
+    <Dialog open disablePointerDismissal>
+      <DialogContent
+        backdropProps={{ forceRender: true }}
+        className={cn(
+          'flex max-h-[80%] min-h-[360px] flex-col overflow-hidden p-0 shadow-xs',
+          modalSize === 'md'
+            ? 'w-[640px] max-w-[calc(100vw-2rem)]'
+            : 'w-[480px] max-w-[calc(100vw-2rem)]',
+        )}
+      >
+        <div
+          className="flex min-h-0 flex-1 flex-col"
+          data-testid="modal"
+          data-size={modalSize}
+          data-disabled={isDisabled}
+        >
+          <div className="relative shrink-0 p-6 pr-14 pb-3">
+            <DialogTitle className="title-2xl-semi-bold text-text-primary" data-testid="modal-title">
+              {t(MODAL_TITLE_KEY_MAP[createType], { ns: 'pluginTrigger' })}
+            </DialogTitle>
+            <DialogCloseButton
+              className="top-5 right-5 h-8 w-8 rounded-lg [&>span]:h-5 [&>span]:w-5"
+              data-testid="modal-close"
+              onClick={onClose}
+            />
+          </div>
 
-      {isVerifyStep && (
-        <VerifyStepContent
-          apiKeyCredentialsSchema={apiKeyCredentialsSchema}
-          apiKeyCredentialsFormRef={formRefs.apiKeyCredentialsFormRef}
-          onChange={handleApiKeyCredentialsChange}
-        />
-      )}
+          <div className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
+            {isApiKeyType && <MultiSteps currentStep={currentStep} />}
 
-      {isConfigurationStep && (
-        <ConfigurationStepContent
-          createType={createType}
-          subscriptionBuilder={subscriptionBuilder}
-          subscriptionFormRef={formRefs.subscriptionFormRef}
-          autoCommonParametersSchema={autoCommonParametersSchema}
-          autoCommonParametersFormRef={formRefs.autoCommonParametersFormRef}
-          manualPropertiesSchema={manualPropertiesSchema}
-          manualPropertiesFormRef={formRefs.manualPropertiesFormRef}
-          onManualPropertiesChange={handleManualPropertiesChange}
-          logs={logData?.logs || []}
-          pluginId={detail?.plugin_id || ''}
-          pluginName={detail?.name || ''}
-          provider={detail?.provider || ''}
-        />
-      )}
-    </Modal>
+            {isVerifyStep && (
+              <VerifyStepContent
+                apiKeyCredentialsSchema={apiKeyCredentialsSchema}
+                apiKeyCredentialsFormRef={formRefs.apiKeyCredentialsFormRef}
+                onChange={handleApiKeyCredentialsChange}
+              />
+            )}
+
+            {isConfigurationStep && (
+              <ConfigurationStepContent
+                createType={createType}
+                subscriptionBuilder={subscriptionBuilder}
+                subscriptionFormRef={formRefs.subscriptionFormRef}
+                autoCommonParametersSchema={autoCommonParametersSchema}
+                autoCommonParametersFormRef={formRefs.autoCommonParametersFormRef}
+                manualPropertiesSchema={manualPropertiesSchema}
+                manualPropertiesFormRef={formRefs.manualPropertiesFormRef}
+                onManualPropertiesChange={handleManualPropertiesChange}
+                logs={logData?.logs || []}
+                pluginId={detail?.plugin_id || ''}
+                pluginName={detail?.name || ''}
+                provider={detail?.provider || ''}
+              />
+            )}
+          </div>
+
+          <div className="flex shrink-0 justify-end p-6 pt-5">
+            <div className="flex items-center">
+              <Button
+                disabled={isDisabled}
+                onClick={onClose}
+              >
+                {t('operation.cancel', { ns: 'common' })}
+              </Button>
+              <Button
+                className="ml-2"
+                variant="primary"
+                disabled={isDisabled}
+                data-testid="modal-confirm"
+                onClick={handleConfirm}
+              >
+                {confirmButtonText}
+              </Button>
+            </div>
+          </div>
+
+          {isVerifyStep && (
+            <div className="shrink-0">
+              <EncryptedBottom />
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }

From 21d2671c340cb3049419e6eef7bfff32f8a50f85 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 30 Apr 2026 13:48:17 +0800
Subject: [PATCH 13/15] fix(web): preserve dropdown error messages

---
 web/app/components/app-sidebar/dataset-info/dropdown.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/web/app/components/app-sidebar/dataset-info/dropdown.tsx b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
index a8a7c51ae8..3676547cdf 100644
--- a/web/app/components/app-sidebar/dataset-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
@@ -91,10 +91,16 @@ const DropDown = ({
     }
     catch (e: unknown) {
       let message = 'Unknown error'
+      const errorWithJson = typeof e === 'object' && e !== null ? e as { json?: unknown } : null
       if (e instanceof Response) {
         const res = await e.json() as { message?: string }
         message = res?.message || message
       }
+      else if (typeof errorWithJson?.json === 'function') {
+        const parseErrorResponse = errorWithJson.json as () => Promise<{ message?: string }>
+        const res = await parseErrorResponse()
+        message = res?.message || message
+      }
       toast(message, { type: 'error' })
     }
   }, [dataset.id, t])

From d6641a370e875902c4229da95889e5769bcdb4b4 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 30 Apr 2026 13:54:06 +0800
Subject: [PATCH 14/15] refactor(web): use typed error toast

---
 .../__tests__/dropdown-callbacks.spec.tsx     |  8 +++--
 .../app-sidebar/dataset-info/dropdown.tsx     | 34 ++++++++++++-------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx b/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
index ceb8302ee6..05a06f2f77 100644
--- a/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
+++ b/web/app/components/app-sidebar/dataset-info/__tests__/dropdown-callbacks.spec.tsx
@@ -113,7 +113,9 @@ vi.mock('@/service/datasets', () => ({
 }))
 
 vi.mock('@langgenius/dify-ui/toast', () => ({
-  toast: (...args: unknown[]) => mockToast(...args),
+  toast: {
+    error: (...args: unknown[]) => mockToast(...args),
+  },
 }))
 
 vi.mock('@/app/components/datasets/rename-modal', () => ({
@@ -220,7 +222,7 @@ describe('Dropdown callback coverage', () => {
     await user.click(screen.getByText('datasetPipeline.operations.exportPipeline'))
 
     await waitFor(() => {
-      expect(mockToast).toHaveBeenCalledWith('app.exportFailed', { type: 'error' })
+      expect(mockToast).toHaveBeenCalledWith('app.exportFailed')
     })
   })
 
@@ -257,7 +259,7 @@ describe('Dropdown callback coverage', () => {
     await user.click(screen.getByText('common.operation.delete'))
 
     await waitFor(() => {
-      expect(mockToast).toHaveBeenCalledWith('check failed', { type: 'error' })
+      expect(mockToast).toHaveBeenCalledWith('check failed')
     })
     expect(screen.queryByText('dataset.deleteDatasetConfirmTitle')).not.toBeInTheDocument()
   })
diff --git a/web/app/components/app-sidebar/dataset-info/dropdown.tsx b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
index 3676547cdf..fa5a40f8a4 100644
--- a/web/app/components/app-sidebar/dataset-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
@@ -34,6 +34,25 @@ type DropDownProps = {
   expand: boolean
 }
 
+type JsonErrorResponse = {
+  json: () => Promise<{ message?: string }>
+}
+
+const isJsonErrorResponse = (error: unknown): error is JsonErrorResponse => {
+  return typeof error === 'object'
+    && error !== null
+    && 'json' in error
+    && typeof error.json === 'function'
+}
+
+const getErrorMessage = async (error: unknown) => {
+  if (!isJsonErrorResponse(error))
+    return 'Unknown error'
+
+  const res = await error.json()
+  return res?.message || 'Unknown error'
+}
+
 const DropDown = ({
   expand,
 }: DropDownProps) => {
@@ -78,7 +97,7 @@ const DropDown = ({
       downloadBlob({ data: file, fileName: `${name}.pipeline` })
     }
     catch {
-      toast(t('exportFailed', { ns: 'app' }), { type: 'error' })
+      toast.error(t('exportFailed', { ns: 'app' }))
     }
   }, [dataset, exportPipelineConfig, t])
 
@@ -90,18 +109,7 @@ const DropDown = ({
       setShowConfirmDelete(true)
     }
     catch (e: unknown) {
-      let message = 'Unknown error'
-      const errorWithJson = typeof e === 'object' && e !== null ? e as { json?: unknown } : null
-      if (e instanceof Response) {
-        const res = await e.json() as { message?: string }
-        message = res?.message || message
-      }
-      else if (typeof errorWithJson?.json === 'function') {
-        const parseErrorResponse = errorWithJson.json as () => Promise<{ message?: string }>
-        const res = await parseErrorResponse()
-        message = res?.message || message
-      }
-      toast(message, { type: 'error' })
+      toast.error(await getErrorMessage(e))
     }
   }, [dataset.id, t])
 

From 350fdd77fc75e531886e6227cf50c7fbe0c2c72f Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 30 Apr 2026 14:07:19 +0800
Subject: [PATCH 15/15] fix(web): stabilize usage priority tests

---
 .../__tests__/usage-priority-section.spec.tsx | 22 +++++------
 .../usage-priority-section.tsx                | 39 +++++++++++--------
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/usage-priority-section.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/usage-priority-section.spec.tsx
index c400d05f22..2df673726a 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/usage-priority-section.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/__tests__/usage-priority-section.spec.tsx
@@ -4,6 +4,8 @@ import UsagePrioritySection from '../usage-priority-section'
 
 describe('UsagePrioritySection', () => {
   const onSelect = vi.fn()
+  const getAiCreditsButton = () => screen.getByRole('button', { name: /aiCreditsOption/ })
+  const getApiKeyButton = () => screen.getByRole('button', { name: /apiKeyOption/ })
 
   beforeEach(() => {
     vi.clearAllMocks()
@@ -15,7 +17,8 @@ describe('UsagePrioritySection', () => {
       render(<UsagePrioritySection value="credits" onSelect={onSelect} />)
 
       expect(screen.getByText(/usagePriority/))!.toBeInTheDocument()
-      expect(screen.getAllByRole('button')).toHaveLength(2)
+      expect(getAiCreditsButton()).toBeInTheDocument()
+      expect(getApiKeyButton()).toBeInTheDocument()
     })
   })
 
@@ -24,24 +27,21 @@ describe('UsagePrioritySection', () => {
     it('should highlight AI credits option when value is credits', () => {
       render(<UsagePrioritySection value="credits" onSelect={onSelect} />)
 
-      const buttons = screen.getAllByRole('button')
-      expect(buttons[0]!.className).toContain('border-components-option-card-option-selected-border')
-      expect(buttons[1]!.className).not.toContain('border-components-option-card-option-selected-border')
+      expect(getAiCreditsButton()).toHaveAttribute('aria-pressed', 'true')
+      expect(getApiKeyButton()).toHaveAttribute('aria-pressed', 'false')
     })
 
     it('should highlight API key option when value is apiKey', () => {
       render(<UsagePrioritySection value="apiKey" onSelect={onSelect} />)
 
-      const buttons = screen.getAllByRole('button')
-      expect(buttons[0]!.className).not.toContain('border-components-option-card-option-selected-border')
-      expect(buttons[1]!.className).toContain('border-components-option-card-option-selected-border')
+      expect(getAiCreditsButton()).toHaveAttribute('aria-pressed', 'false')
+      expect(getApiKeyButton()).toHaveAttribute('aria-pressed', 'true')
     })
 
     it('should highlight API key option when value is apiKeyOnly', () => {
       render(<UsagePrioritySection value="apiKeyOnly" onSelect={onSelect} />)
 
-      const buttons = screen.getAllByRole('button')
-      expect(buttons[1]!.className).toContain('border-components-option-card-option-selected-border')
+      expect(getApiKeyButton()).toHaveAttribute('aria-pressed', 'true')
     })
   })
 
@@ -50,7 +50,7 @@ describe('UsagePrioritySection', () => {
     it('should call onSelect with system when clicking AI credits option', () => {
       render(<UsagePrioritySection value="apiKey" onSelect={onSelect} />)
 
-      fireEvent.click(screen.getAllByRole('button')[0]!)
+      fireEvent.click(getAiCreditsButton())
 
       expect(onSelect).toHaveBeenCalledWith(PreferredProviderTypeEnum.system)
     })
@@ -58,7 +58,7 @@ describe('UsagePrioritySection', () => {
     it('should call onSelect with custom when clicking API key option', () => {
       render(<UsagePrioritySection value="credits" onSelect={onSelect} />)
 
-      fireEvent.click(screen.getAllByRole('button')[1]!)
+      fireEvent.click(getApiKeyButton())
 
       expect(onSelect).toHaveBeenCalledWith(PreferredProviderTypeEnum.custom)
     })
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
index 19b2ba20a3..b491f07889 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/usage-priority-section.tsx
@@ -26,7 +26,7 @@ export default function UsagePrioritySection({ value, disabled, onSelect }: Usag
     <div className="p-1">
       <div className="flex items-center gap-1 rounded-lg p-1">
         <div className="shrink-0 px-0.5 py-1">
-          <span className="i-ri-arrow-up-double-line block h-4 w-4 text-text-tertiary" />
+          <span aria-hidden="true" className="i-ri-arrow-up-double-line block h-4 w-4 text-text-tertiary" />
         </div>
         <div className="flex min-w-0 flex-1 items-center gap-0.5 py-0.5">
           <span className="truncate system-sm-medium text-text-secondary">
@@ -37,22 +37,27 @@ export default function UsagePrioritySection({ value, disabled, onSelect }: Usag
           </Infotip>
         </div>
         <div className="flex shrink-0 items-center gap-1">
-          {options.map(option => (
-            <button
-              key={option.key}
-              type="button"
-              className={cn(
-                'shrink-0 rounded-md px-2 py-1 text-center whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-components-button-primary-border focus-visible:outline-hidden disabled:opacity-50',
-                selectedKey === option.key
-                  ? 'border-[1.5px] border-components-option-card-option-selected-border bg-components-panel-bg system-xs-medium text-text-primary shadow-xs'
-                  : 'border border-components-option-card-option-border bg-components-option-card-option-bg system-xs-regular text-text-secondary hover:bg-components-option-card-option-bg-hover',
-              )}
-              disabled={disabled}
-              onClick={() => onSelect(option.key)}
-            >
-              {t(option.labelKey, { ns: 'common' })}
-            </button>
-          ))}
+          {options.map((option) => {
+            const selected = selectedKey === option.key
+
+            return (
+              <button
+                key={option.key}
+                type="button"
+                aria-pressed={selected}
+                className={cn(
+                  'shrink-0 rounded-md px-2 py-1 text-center whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-components-button-primary-border focus-visible:outline-hidden disabled:opacity-50',
+                  selected
+                    ? 'border-[1.5px] border-components-option-card-option-selected-border bg-components-panel-bg system-xs-medium text-text-primary shadow-xs'
+                    : 'border border-components-option-card-option-border bg-components-option-card-option-bg system-xs-regular text-text-secondary hover:bg-components-option-card-option-bg-hover',
+                )}
+                disabled={disabled}
+                onClick={() => onSelect(option.key)}
+              >
+                {t(option.labelKey, { ns: 'common' })}
+              </button>
+            )
+          })}
         </div>
       </div>
     </div>