diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index 59ac466da8..b5e67df509 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -315,20 +315,12 @@
       "count": 4
     }
   },
-  "web/app/components/app/configuration/config-var/config-modal/type-select.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/app/configuration/config-var/index.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
   "web/app/components/app/configuration/config-var/select-var-type.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -363,9 +355,6 @@
     }
   },
   "web/app/components/app/configuration/config/assistant-type-picker/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
     "ts/no-explicit-any": {
       "count": 1
     }
@@ -401,11 +390,6 @@
       "count": 1
     }
   },
-  "web/app/components/app/configuration/config/automatic/version-selector.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -774,11 +758,6 @@
       "count": 1
     }
   },
-  "web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/base/chat/chat/answer/agent-content.tsx": {
     "style/multiline-ternary": {
       "count": 2
@@ -800,11 +779,6 @@
       "count": 1
     }
   },
-  "web/app/components/base/chat/chat/answer/operation.tsx": {
-    "no-restricted-imports": {
-      "count": 2
-    }
-  },
   "web/app/components/base/chat/chat/answer/workflow-process.tsx": {
     "react/set-state-in-effect": {
       "count": 1
@@ -1055,14 +1029,6 @@
       "count": 3
     }
   },
-  "web/app/components/base/form/components/base/base-field.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    },
-    "ts/no-explicit-any": {
-      "count": 3
-    }
-  },
   "web/app/components/base/form/components/base/base-form.tsx": {
     "ts/no-explicit-any": {
       "count": 6
@@ -1589,14 +1555,6 @@
       "count": 1
     }
   },
-  "web/app/components/base/modal/modal.stories.tsx": {
-    "no-console": {
-      "count": 4
-    },
-    "react/set-state-in-effect": {
-      "count": 1
-    }
-  },
   "web/app/components/base/new-audio-button/index.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -2116,11 +2074,6 @@
       "count": 1
     }
   },
-  "web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/index.tsx": {
     "ts/no-explicit-any": {
       "count": 1
@@ -2389,11 +2342,6 @@
       "count": 1
     }
   },
-  "web/app/components/datasets/settings/index-method/index.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/develop/code.tsx": {
     "ts/no-empty-object-type": {
       "count": 1
@@ -2609,11 +2557,6 @@
       "count": 1
     }
   },
-  "web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/header/account-setting/model-provider-page/model-auth/hooks/index.ts": {
     "no-barrel-files/no-barrel-files": {
       "count": 6
@@ -2909,44 +2852,11 @@
       "count": 1
     }
   },
-  "web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-oauth-client-state.ts": {
-    "erasable-syntax-only/enums": {
-      "count": 2
-    }
-  },
-  "web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx": {
-    "no-barrel-files/no-barrel-files": {
-      "count": 3
-    }
-  },
-  "web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/plugin-detail-panel/subscription-list/create/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
     }
   },
-  "web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx": {
-    "erasable-syntax-only/enums": {
-      "count": 1
-    },
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/plugin-detail-panel/subscription-list/index.tsx": {
     "no-barrel-files/no-barrel-files": {
       "count": 2
@@ -2975,11 +2885,6 @@
       "count": 7
     }
   },
-  "web/app/components/plugins/plugin-detail-panel/tool-selector/components/schema-modal.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/plugin-detail-panel/tool-selector/components/tool-item.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -2995,11 +2900,6 @@
       "count": 5
     }
   },
-  "web/app/components/plugins/plugin-item/action.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/plugins/plugin-item/index.tsx": {
     "no-restricted-imports": {
       "count": 1
@@ -3678,11 +3578,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/_base/components/error-handle/types.ts": {
     "erasable-syntax-only/enums": {
       "count": 1
@@ -3779,11 +3674,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/_base/components/variable/variable-label/hooks.ts": {
     "react/no-unnecessary-use-prefix": {
       "count": 2
@@ -4103,16 +3993,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/if-else/default.ts": {
     "ts/no-explicit-any": {
       "count": 1
@@ -4148,11 +4028,6 @@
       "count": 6
     }
   },
-  "web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/hooks.tsx": {
     "ts/no-explicit-any": {
       "count": 4
@@ -4196,11 +4071,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/knowledge-retrieval/default.ts": {
     "ts/no-explicit-any": {
       "count": 1
@@ -4282,11 +4152,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/hooks.ts": {
     "ts/no-explicit-any": {
       "count": 1
@@ -4338,16 +4203,6 @@
       "count": 1
     }
   },
-  "web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
-  "web/app/components/workflow/nodes/loop/components/condition-number-input.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/components/workflow/nodes/loop/components/loop-variables/form-item.tsx": {
     "ts/no-explicit-any": {
       "count": 3
diff --git a/eslint.config.mjs b/eslint.config.mjs
index ae9fdaff01..1380ed67d2 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -4,6 +4,17 @@ import antfu, { GLOB_MARKDOWN } from '@antfu/eslint-config'
 import md from 'eslint-markdown'
 import markdownPreferences from 'eslint-plugin-markdown-preferences'
 
+const GENERATED_IGNORES = [
+  '**/storybook-static/',
+  '**/.next/',
+  'web/next/',
+  'web/next-env.d.ts',
+  '**/dist/',
+  '**/coverage/',
+  'e2e/.auth/',
+  'e2e/cucumber-report/',
+]
+
 export default antfu(
   {
     ignores: original => [
@@ -15,6 +26,7 @@ export default antfu(
       '!package.json',
       '!pnpm-workspace.yaml',
       '!vite.config.ts',
+      ...GENERATED_IGNORES,
       ...original,
     ],
     typescript: {
diff --git a/packages/dify-ui/README.md b/packages/dify-ui/README.md
index 41e99d0952..bdeeec33cb 100644
--- a/packages/dify-ui/README.md
+++ b/packages/dify-ui/README.md
@@ -88,9 +88,9 @@ Every overlay primitive uses a single, shared z-index. Do **not** override it at
 | Overlays (Dialog, AlertDialog, Autocomplete, Combobox, Popover, DropdownMenu, ContextMenu, Select, Tooltip) | `z-1002` | Positioner / Backdrop                                                      |
 | Toast viewport                                                                                              | `z-1003` | One layer above overlays so notifications are never hidden under a dialog. |
 
-Rationale: during Dify's migration from legacy `portal-to-follow-elem` / `base/modal` / `base/dialog` overlays to this package, new and old overlays coexist in the DOM. `z-1002` sits above any common legacy layer, eliminating per-call-site z-index hacks. Among themselves, new primitives share the same z-index and **rely on DOM order** for stacking — the portal mounted later wins.
+Rationale: during Dify's migration from legacy `base/modal` / `base/dialog` overlays to this package, new and old overlays coexist in the DOM. `z-1002` sits above any common legacy layer, eliminating per-call-site z-index hacks. Among themselves, new primitives share the same z-index and **rely on DOM order** for stacking — the portal mounted later wins.
 
-See `[web/docs/overlay-migration.md](../../web/docs/overlay-migration.md)` for the Dify-web migration history and the remaining legacy allowlist. Once the legacy overlays are gone, the values in this table can drop back to `z-50` / `z-51`.
+See `[web/docs/overlay-migration.md](../../web/docs/overlay-migration.md)` for the Dify-web migration history. Once the legacy overlays are gone, the values in this table can drop back to `z-50` / `z-51`.
 
 ### Rules
 
diff --git a/web/AGENTS.md b/web/AGENTS.md
index 5e9f7ed11c..dc72a293d1 100644
--- a/web/AGENTS.md
+++ b/web/AGENTS.md
@@ -5,9 +5,9 @@
 ## Overlay Components (Mandatory)
 
 - `../packages/dify-ui/README.md` is the permanent contract for overlay primitives, portals, root `isolation: isolate`, and the `z-1002` / `z-1003` layering.
-- `./docs/overlay-migration.md` is the source of truth for the ongoing migration (deprecated import paths, allowlist, coexistence rules).
+- `./docs/overlay-migration.md` is the source of truth for the ongoing migration (deprecated import paths and coexistence rules).
 - In new or modified code, use only overlay primitives from `@langgenius/dify-ui/*`.
-- Do not introduce deprecated overlay imports from `@/app/components/base/*`; when touching legacy callers, prefer migrating them and keep the allowlist shrinking (never expanding).
+- Do not introduce deprecated overlay imports from `@/app/components/base/*`; when touching legacy callers, prefer migrating them.
 
 ## Query & Mutation (Mandatory)
 
diff --git a/web/__mocks__/base-ui-dropdown-menu.tsx b/web/__mocks__/base-ui-dropdown-menu.tsx
new file mode 100644
index 0000000000..9e2bfa2d41
--- /dev/null
+++ b/web/__mocks__/base-ui-dropdown-menu.tsx
@@ -0,0 +1,172 @@
+import type { ReactNode } from 'react'
+import * as React from 'react'
+
+const DropdownMenuContext = React.createContext({
+  open: false,
+  onOpenChange: (_open: boolean) => {},
+})
+
+type DropdownMenuProps = {
+  children?: ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+type DropdownMenuTriggerProps = React.HTMLAttributes<HTMLElement> & {
+  children?: ReactNode
+  nativeButton?: boolean
+  render?: React.ReactElement
+}
+
+type DropdownMenuContentProps = React.HTMLAttributes<HTMLDivElement> & {
+  children?: ReactNode
+  placement?: string
+  sideOffset?: number
+  alignOffset?: number
+  popupClassName?: string
+}
+
+export const DropdownMenu = ({
+  children,
+  open,
+  onOpenChange,
+}: DropdownMenuProps) => {
+  const [localOpen, setLocalOpen] = React.useState(false)
+  const resolvedOpen = open ?? localOpen
+  const handleOpenChange = React.useCallback((nextOpen: boolean) => {
+    setLocalOpen(nextOpen)
+    onOpenChange?.(nextOpen)
+  }, [onOpenChange])
+
+  return (
+    <DropdownMenuContext.Provider value={{ open: resolvedOpen, onOpenChange: handleOpenChange }}>
+      <div data-testid="dropdown-menu" data-open={String(resolvedOpen)}>
+        {children}
+      </div>
+    </DropdownMenuContext.Provider>
+  )
+}
+
+export const DropdownMenuTrigger = ({
+  children,
+  render,
+  nativeButton: _nativeButton,
+  onClick,
+  ...props
+}: DropdownMenuTriggerProps) => {
+  const { open, onOpenChange } = React.useContext(DropdownMenuContext)
+  const node = render ?? children
+  const isNativeButton = React.isValidElement(node) && node.type === 'button'
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    onClick?.(event)
+    if (!event.defaultPrevented)
+      onOpenChange(!open)
+  }
+
+  if (React.isValidElement(node)) {
+    const triggerElement = node as React.ReactElement<Record<string, unknown>>
+    const childProps = (triggerElement.props ?? {}) as React.HTMLAttributes<HTMLElement> & { 'data-testid'?: string }
+    const triggerProps = props as React.HTMLAttributes<HTMLElement> & { 'data-testid'?: string }
+    const role = childProps.role ?? triggerProps.role ?? (!isNativeButton && (childProps['aria-label'] || triggerProps['aria-label']) ? 'button' : undefined)
+    return React.cloneElement(triggerElement, {
+      ...props,
+      ...childProps,
+      'data-testid': childProps['data-testid'] ?? triggerProps['data-testid'] ?? 'dropdown-menu-trigger',
+      role,
+      'tabIndex': childProps.tabIndex ?? triggerProps.tabIndex ?? (role === 'button' ? 0 : undefined),
+      'onClick': (event: React.MouseEvent<HTMLElement>) => {
+        childProps.onClick?.(event)
+        handleClick(event)
+      },
+    }, render ? (children ?? childProps.children) : childProps.children)
+  }
+
+  return (
+    <div data-testid="dropdown-menu-trigger" role="button" tabIndex={0} onClick={handleClick} {...props}>
+      {node}
+    </div>
+  )
+}
+
+export const DropdownMenuContent = ({
+  children,
+  className,
+  popupClassName,
+  placement,
+  sideOffset,
+  alignOffset,
+  ...props
+}: DropdownMenuContentProps) => {
+  const { open } = React.useContext(DropdownMenuContext)
+  if (!open)
+    return null
+
+  return (
+    <div
+      data-testid="dropdown-menu-content"
+      data-placement={placement}
+      data-side-offset={sideOffset}
+      data-align-offset={alignOffset}
+      className={className || popupClassName}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const DropdownMenuItem = ({
+  children,
+  onClick,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { children?: ReactNode }) => (
+  <div role="menuitem" onClick={onClick} {...props}>
+    {children}
+  </div>
+)
+
+export const DropdownMenuRadioGroup = ({
+  children,
+  onValueChange,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { children?: ReactNode, value?: unknown, onValueChange?: (value: unknown) => void }) => (
+  <div
+    role="radiogroup"
+    {...props}
+    data-on-value-change={onValueChange ? 'true' : undefined}
+  >
+    {React.Children.map(children, (child) => {
+      if (!React.isValidElement(child))
+        return child
+      return React.cloneElement(child as React.ReactElement<{ __onValueChange?: (value: unknown) => void }>, { __onValueChange: onValueChange })
+    })}
+  </div>
+)
+
+export const DropdownMenuRadioItem = ({
+  children,
+  value,
+  onClick,
+  __onValueChange,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { children?: ReactNode, value?: unknown, __onValueChange?: (value: unknown) => void }) => (
+  <div
+    role="radio"
+    onClick={(event) => {
+      onClick?.(event)
+      __onValueChange?.(value)
+    }}
+    {...props}
+  >
+    {children}
+  </div>
+)
+
+export const DropdownMenuRadioItemIndicator = ({ children }: { children?: ReactNode }) => <>{children}</>
+export const DropdownMenuCheckboxItem = DropdownMenuItem
+export const DropdownMenuCheckboxItemIndicator = ({ children }: { children?: ReactNode }) => <>{children}</>
+export const DropdownMenuLabel = ({ children }: { children?: ReactNode }) => <>{children}</>
+export const DropdownMenuSeparator = (props: React.HTMLAttributes<HTMLDivElement>) => <div role="separator" {...props} />
+export const DropdownMenuSub = ({ children }: { children?: ReactNode }) => <>{children}</>
+export const DropdownMenuSubTrigger = DropdownMenuItem
+export const DropdownMenuSubContent = ({ children }: { children?: ReactNode }) => <>{children}</>
diff --git a/web/__mocks__/base-ui-popover.tsx b/web/__mocks__/base-ui-popover.tsx
index 8818f60f4e..c4d7a23827 100644
--- a/web/__mocks__/base-ui-popover.tsx
+++ b/web/__mocks__/base-ui-popover.tsx
@@ -23,17 +23,25 @@ type PopoverContentProps = React.HTMLAttributes<HTMLDivElement> & {
   placement?: string
   sideOffset?: number
   alignOffset?: number
+  popupClassName?: string
   positionerProps?: React.HTMLAttributes<HTMLDivElement>
   popupProps?: React.HTMLAttributes<HTMLDivElement>
 }
 
 export const Popover = ({
   children,
-  open = false,
+  open,
   onOpenChange,
 }: PopoverProps) => {
+  const [localOpen, setLocalOpen] = React.useState(false)
+  const resolvedOpen = open ?? localOpen
+  const handleOpenChange = React.useCallback((nextOpen: boolean) => {
+    setLocalOpen(nextOpen)
+    onOpenChange?.(nextOpen)
+  }, [onOpenChange])
+
   React.useEffect(() => {
-    if (!open)
+    if (!resolvedOpen)
       return
 
     const handleMouseDown = (event: MouseEvent) => {
@@ -41,12 +49,12 @@ export const Popover = ({
       if (target?.closest?.('[data-popover-trigger="true"], [data-popover-content="true"]'))
         return
 
-      onOpenChange?.(false)
+      handleOpenChange(false)
     }
 
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Escape')
-        onOpenChange?.(false)
+        handleOpenChange(false)
     }
 
     document.addEventListener('mousedown', handleMouseDown)
@@ -56,15 +64,15 @@ export const Popover = ({
       document.removeEventListener('mousedown', handleMouseDown)
       document.removeEventListener('keydown', handleKeyDown)
     }
-  }, [open, onOpenChange])
+  }, [resolvedOpen, handleOpenChange])
 
   return (
     <PopoverContext.Provider value={{
-      open,
-      onOpenChange: onOpenChange ?? (() => {}),
+      open: resolvedOpen,
+      onOpenChange: handleOpenChange,
     }}
     >
-      <div data-testid="popover" data-open={String(open)}>
+      <div data-testid="popover" data-open={String(resolvedOpen)}>
         {children}
       </div>
     </PopoverContext.Provider>
@@ -84,11 +92,12 @@ export const PopoverTrigger = ({
   if (React.isValidElement(node)) {
     const triggerElement = node as React.ReactElement<Record<string, unknown>>
     const childProps = (triggerElement.props ?? {}) as React.HTMLAttributes<HTMLElement> & { 'data-testid'?: string }
+    const triggerProps = props as React.HTMLAttributes<HTMLElement> & { 'data-testid'?: string }
 
     return React.cloneElement(triggerElement, {
       ...props,
       ...childProps,
-      'data-testid': childProps['data-testid'] ?? 'popover-trigger',
+      'data-testid': childProps['data-testid'] ?? triggerProps['data-testid'] ?? 'popover-trigger',
       'data-popover-trigger': 'true',
       'onClick': (event: React.MouseEvent<HTMLElement>) => {
         childProps.onClick?.(event)
@@ -97,7 +106,7 @@ export const PopoverTrigger = ({
           return
         onOpenChange(!open)
       },
-    })
+    }, render ? (children ?? childProps.children) : childProps.children)
   }
 
   return (
@@ -123,6 +132,7 @@ export const PopoverContent = ({
   placement,
   sideOffset,
   alignOffset,
+  popupClassName,
   positionerProps,
   popupProps,
   ...props
@@ -139,7 +149,7 @@ export const PopoverContent = ({
       data-placement={placement}
       data-side-offset={sideOffset}
       data-align-offset={alignOffset}
-      className={className}
+      className={className || popupClassName}
       {...positionerProps}
       {...popupProps}
       {...props}
diff --git a/web/__mocks__/base-ui-select.tsx b/web/__mocks__/base-ui-select.tsx
new file mode 100644
index 0000000000..7655164419
--- /dev/null
+++ b/web/__mocks__/base-ui-select.tsx
@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react'
+import * as React from 'react'
+
+const SelectContext = React.createContext({
+  value: undefined as unknown,
+  onValueChange: (_value: unknown) => {},
+})
+
+type SelectProps = {
+  children?: ReactNode
+  value?: unknown
+  onValueChange?: (value: unknown) => void
+}
+
+export const Select = ({
+  children,
+  value,
+  onValueChange,
+}: SelectProps) => (
+  <SelectContext.Provider value={{ value, onValueChange: onValueChange ?? (() => {}) }}>
+    <div data-testid="select-root">{children}</div>
+  </SelectContext.Provider>
+)
+
+export const SelectTrigger = ({
+  children,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & { children?: ReactNode }) => (
+  <button type="button" {...props}>
+    {children}
+  </button>
+)
+
+export const SelectValue = ({ placeholder }: { placeholder?: ReactNode }) => <>{placeholder}</>
+
+export const SelectContent = ({ children }: { children?: ReactNode }) => (
+  <div data-testid="select-content">{children}</div>
+)
+
+export const SelectItem = ({
+  children,
+  value,
+  onClick,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { children?: ReactNode, value?: unknown }) => {
+  const select = React.useContext(SelectContext)
+  return (
+    <div
+      role="option"
+      onClick={(event) => {
+        onClick?.(event)
+        select.onValueChange(value)
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const SelectItemText = ({ children }: { children?: ReactNode }) => <>{children}</>
+export const SelectItemIndicator = ({ children }: { children?: ReactNode }) => <>{children}</>
+export const SelectGroup = ({ children }: { children?: ReactNode }) => <>{children}</>
+export const SelectLabel = ({ children }: { children?: ReactNode }) => <>{children}</>
+export const SelectSeparator = (props: React.HTMLAttributes<HTMLDivElement>) => <div role="separator" {...props} />
diff --git a/web/__mocks__/base-ui-tooltip.tsx b/web/__mocks__/base-ui-tooltip.tsx
new file mode 100644
index 0000000000..23e05f0864
--- /dev/null
+++ b/web/__mocks__/base-ui-tooltip.tsx
@@ -0,0 +1,95 @@
+import type { ReactNode } from 'react'
+import * as React from 'react'
+
+const TooltipContext = React.createContext({
+  open: false,
+  onOpenChange: (_open: boolean) => {},
+})
+
+type TooltipProps = {
+  children?: ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export const Tooltip = ({ children, open, onOpenChange }: TooltipProps) => {
+  const [localOpen, setLocalOpen] = React.useState(false)
+  const resolvedOpen = open ?? localOpen
+  const handleOpenChange = React.useCallback((nextOpen: boolean) => {
+    setLocalOpen(nextOpen)
+    onOpenChange?.(nextOpen)
+  }, [onOpenChange])
+
+  return (
+    <TooltipContext.Provider value={{ open: resolvedOpen, onOpenChange: handleOpenChange }}>
+      {children}
+    </TooltipContext.Provider>
+  )
+}
+
+export const TooltipTrigger = ({
+  children,
+  render,
+  nativeButton: _nativeButton,
+  ...props
+}: React.HTMLAttributes<HTMLElement> & { children?: ReactNode, render?: React.ReactElement, nativeButton?: boolean }) => {
+  const { open, onOpenChange } = React.useContext(TooltipContext)
+  const node = render ?? children
+
+  if (React.isValidElement(node)) {
+    const triggerElement = node as React.ReactElement<Record<string, unknown>>
+    const childProps = (triggerElement.props ?? {}) as React.HTMLAttributes<HTMLElement>
+
+    return React.cloneElement(triggerElement, {
+      ...props,
+      ...childProps,
+      onMouseEnter: (event: React.MouseEvent<HTMLElement>) => {
+        childProps.onMouseEnter?.(event)
+        props.onMouseEnter?.(event)
+        onOpenChange(true)
+      },
+      onMouseLeave: (event: React.MouseEvent<HTMLElement>) => {
+        childProps.onMouseLeave?.(event)
+        props.onMouseLeave?.(event)
+        onOpenChange(false)
+      },
+      onClick: (event: React.MouseEvent<HTMLElement>) => {
+        childProps.onClick?.(event)
+        props.onClick?.(event)
+        onOpenChange(!open)
+      },
+    })
+  }
+
+  return (
+    <span
+      {...props}
+      onMouseEnter={(event) => {
+        props.onMouseEnter?.(event)
+        onOpenChange(true)
+      }}
+      onMouseLeave={(event) => {
+        props.onMouseLeave?.(event)
+        onOpenChange(false)
+      }}
+      onClick={(event) => {
+        props.onClick?.(event)
+        onOpenChange(!open)
+      }}
+    >
+      {node}
+    </span>
+  )
+}
+
+export const TooltipContent = ({
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { children?: ReactNode }) => {
+  const { open } = React.useContext(TooltipContext)
+  if (!open)
+    return null
+  return <div {...props}>{children}</div>
+}
+
+export const TooltipProvider = ({ children }: { children?: ReactNode }) => <>{children}</>
diff --git a/web/__tests__/app-sidebar/sidebar-shell-flow.test.tsx b/web/__tests__/app-sidebar/sidebar-shell-flow.test.tsx
index a7c660105d..ef765c06f2 100644
--- a/web/__tests__/app-sidebar/sidebar-shell-flow.test.tsx
+++ b/web/__tests__/app-sidebar/sidebar-shell-flow.test.tsx
@@ -95,37 +95,8 @@ vi.mock('@/app/components/workflow/utils', () => ({
   getKeyboardKeyNameBySystem: (key: string) => key,
 }))
 
-vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
-  const React = await vi.importActual<typeof import('react')>('react')
-  const OpenContext = React.createContext(false)
-
-  return {
-    PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => (
-      <OpenContext.Provider value={open}>
-        <div>{children}</div>
-      </OpenContext.Provider>
-    ),
-    PortalToFollowElemTrigger: ({
-      children,
-      onClick,
-    }: {
-      children: React.ReactNode
-      onClick?: () => void
-    }) => (
-      <button type="button" data-testid="portal-trigger" onClick={onClick}>
-        {children}
-      </button>
-    ),
-    PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => {
-      const open = React.useContext(OpenContext)
-      return open ? <div>{children}</div> : null
-    },
-  }
-})
-
-vi.mock('@/app/components/base/tooltip', () => ({
-  default: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
-}))
+vi.mock('@langgenius/dify-ui/dropdown-menu', () => import('@/__mocks__/base-ui-dropdown-menu'))
+vi.mock('@langgenius/dify-ui/tooltip', () => import('@/__mocks__/base-ui-tooltip'))
 
 vi.mock('@/app/components/app-sidebar/app-info', () => ({
   default: ({
diff --git a/web/__tests__/app/app-publisher-flow.test.tsx b/web/__tests__/app/app-publisher-flow.test.tsx
index d4bf56e7e4..ff2e3f6f44 100644
--- a/web/__tests__/app/app-publisher-flow.test.tsx
+++ b/web/__tests__/app/app-publisher-flow.test.tsx
@@ -122,33 +122,7 @@ vi.mock('@/app/components/app/app-access-control', () => ({
   default: () => <div data-testid="app-access-control" />,
 }))
 
-vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
-  const React = await vi.importActual<typeof import('react')>('react')
-  const OpenContext = React.createContext(false)
-
-  return {
-    PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => (
-      <OpenContext.Provider value={open}>
-        <div>{children}</div>
-      </OpenContext.Provider>
-    ),
-    PortalToFollowElemTrigger: ({
-      children,
-      onClick,
-    }: {
-      children: React.ReactNode
-      onClick?: () => void
-    }) => (
-      <div onClick={onClick}>
-        {children}
-      </div>
-    ),
-    PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => {
-      const open = React.useContext(OpenContext)
-      return open ? <div>{children}</div> : null
-    },
-  }
-})
+vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
 
 vi.mock('@/app/components/workflow/utils', () => ({
   getKeyboardKeyCodeBySystem: () => 'ctrl',
diff --git a/web/app/components/app/app-publisher/__tests__/index.spec.tsx b/web/app/components/app/app-publisher/__tests__/index.spec.tsx
index 5df331767b..cbfd679ace 100644
--- a/web/app/components/app/app-publisher/__tests__/index.spec.tsx
+++ b/web/app/components/app/app-publisher/__tests__/index.spec.tsx
@@ -121,25 +121,7 @@ vi.mock('../../app-access-control', () => ({
   ),
 }))
 
-vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
-  const ReactModule = await vi.importActual<typeof import('react')>('react')
-  const OpenContext = ReactModule.createContext(false)
-
-  return {
-    PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => (
-      <OpenContext.Provider value={open}>
-        <div>{children}</div>
-      </OpenContext.Provider>
-    ),
-    PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
-      <div onClick={onClick}>{children}</div>
-    ),
-    PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => {
-      const open = ReactModule.useContext(OpenContext)
-      return open ? <div>{children}</div> : null
-    },
-  }
-})
+vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
 
 vi.mock('../sections', () => ({
   PublisherSummarySection: (props: Record<string, any>) => {
diff --git a/web/app/components/app/configuration/config-var/__tests__/select-var-type.spec.tsx b/web/app/components/app/configuration/config-var/__tests__/select-var-type.spec.tsx
index 611aaa1c8a..42d0de5ed7 100644
--- a/web/app/components/app/configuration/config-var/__tests__/select-var-type.spec.tsx
+++ b/web/app/components/app/configuration/config-var/__tests__/select-var-type.spec.tsx
@@ -1,8 +1,8 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import SelectVarType from '../select-var-type'
 
 describe('SelectVarType', () => {
-  it('should open the menu and return the selected variable type', () => {
+  it('should open the menu and return the selected variable type', async () => {
     const onChange = vi.fn()
 
     render(<SelectVarType onChange={onChange} />)
@@ -11,6 +11,8 @@ describe('SelectVarType', () => {
     fireEvent.click(screen.getByText('appDebug.variableConfig.checkbox'))
 
     expect(onChange).toHaveBeenCalledWith('checkbox')
-    expect(screen.queryByText('appDebug.variableConfig.checkbox')).not.toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.queryByText('appDebug.variableConfig.checkbox')).not.toBeInTheDocument()
+    })
   })
 })
diff --git a/web/app/components/app/configuration/config-var/config-modal/__tests__/type-select.spec.tsx b/web/app/components/app/configuration/config-var/config-modal/__tests__/type-select.spec.tsx
index 2512aa93e8..f1356c9b61 100644
--- a/web/app/components/app/configuration/config-var/config-modal/__tests__/type-select.spec.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/__tests__/type-select.spec.tsx
@@ -2,13 +2,7 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import TypeSelector from '../type-select'
 
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick?: () => void }) => (
-    <button type="button" onClick={onClick}>{children}</button>
-  ),
-  PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-}))
+vi.mock('@langgenius/dify-ui/select', () => import('@/__mocks__/base-ui-select'))
 
 vi.mock('@/app/components/workflow/nodes/_base/components/input-var-type-icon', () => ({
   default: ({ type }: { type: string }) => <span>{type}</span>,
diff --git a/web/app/components/app/configuration/config-var/config-modal/type-select.tsx b/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
index 5fd7c88b82..acd3253f6b 100644
--- a/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
@@ -1,16 +1,17 @@
 'use client'
 import type { FC } from 'react'
 import type { InputVarType } from '@/app/components/workflow/types'
-import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useState } from 'react'
-import Badge from '@/app/components/base/badge'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectTrigger,
+} from '@langgenius/dify-ui/select'
+import * as React from 'react'
+import Badge from '@/app/components/base/badge'
 import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
 import { inputVarTypeToVarType } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 
@@ -35,21 +36,26 @@ const TypeSelector: FC<Props> = ({
   popupInnerClassName,
   readonly,
 }) => {
-  const [open, setOpen] = useState(false)
   const selectedItem = value ? items.find(item => item.value === value) : undefined
 
   return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement="bottom-start"
-      offset={4}
+    <Select
+      value={selectedItem?.value}
+      readOnly={readonly}
+      onValueChange={(nextValue) => {
+        const selected = items.find(item => item.value === nextValue)
+        if (selected)
+          onSelect(selected)
+      }}
     >
-      <PortalToFollowElemTrigger onClick={() => !readonly && setOpen(v => !v)} className="w-full">
-        <div
-          className={cn(`group flex h-9 items-center justify-between rounded-lg border-0 bg-components-input-bg-normal px-2 text-sm hover:bg-state-base-hover-alt ${readonly ? 'cursor-not-allowed' : 'cursor-pointer'}`)}
-          title={selectedItem?.name}
-        >
+      <SelectTrigger
+        className={cn(
+          'h-9 rounded-lg px-2 text-sm',
+          readonly ? 'cursor-not-allowed' : 'cursor-pointer',
+        )}
+        title={selectedItem?.name}
+      >
+        <div className="flex min-w-0 items-center justify-between">
           <div className="flex items-center">
             <InputVarTypeIcon type={selectedItem?.value as InputVarType} className="size-4 shrink-0 text-text-secondary" />
             <span
@@ -60,37 +66,35 @@ const TypeSelector: FC<Props> = ({
               {selectedItem?.name}
             </span>
           </div>
-          <div className="flex items-center space-x-1">
+          <div className="ml-2 flex shrink-0 items-center space-x-1">
             <Badge uppercase={false}>{inputVarTypeToVarType(selectedItem?.value as InputVarType)}</Badge>
-            <ChevronDownIcon className={cn('h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
           </div>
         </div>
-
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-61">
-        <div
-          className={cn('w-[432px] rounded-md 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 text-text-secondary hover:bg-state-base-hover"
-              title={item.name}
-              onClick={() => {
-                onSelect(item)
-                setOpen(false)
-              }}
+      </SelectTrigger>
+      <SelectContent
+        sideOffset={4}
+        popupClassName={cn('w-[432px] rounded-md px-1 py-1 text-base sm:text-sm', popupInnerClassName)}
+        listClassName="max-h-80 p-0"
+      >
+        {items.map((item: Item) => (
+          <SelectItem
+            key={item.value}
+            value={item.value}
+            className="h-9 justify-between px-2 text-text-secondary"
+            title={item.name}
+          >
+            <SelectItemText
+              className="flex items-center space-x-2 px-0"
             >
-              <div className="flex items-center space-x-2">
-                <InputVarTypeIcon type={item.value} className="size-4 shrink-0 text-text-secondary" />
-                <span title={item.name}>{item.name}</span>
-              </div>
-              <Badge uppercase={false}>{inputVarTypeToVarType(item.value)}</Badge>
-            </div>
-          ))}
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+              <InputVarTypeIcon type={item.value} className="size-4 shrink-0 text-text-secondary" />
+              <span title={item.name}>{item.name}</span>
+            </SelectItemText>
+            <Badge uppercase={false}>{inputVarTypeToVarType(item.value)}</Badge>
+            <SelectItemIndicator />
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
   )
 }
 
diff --git a/web/app/components/app/configuration/config-var/select-var-type.tsx b/web/app/components/app/configuration/config-var/select-var-type.tsx
index fc59bcd54b..4d3a96775c 100644
--- a/web/app/components/app/configuration/config-var/select-var-type.tsx
+++ b/web/app/components/app/configuration/config-var/select-var-type.tsx
@@ -1,15 +1,16 @@
 'use client'
 import type { FC } from 'react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import * as React from 'react'
-import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
 import { ApiConnection } from '@/app/components/base/icons/src/vender/solid/development'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
 import { InputVarType } from '@/app/components/workflow/types'
 
@@ -27,13 +28,14 @@ type ItemProps = {
 
 const SelectItem: FC<ItemProps> = ({ text, type, value, Icon, onClick }) => {
   return (
-    <div
-      className="flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover"
+    <DropdownMenuItem
+      closeOnClick
+      className="h-8 rounded-lg px-3 text-text-primary"
       onClick={() => onClick(value)}
     >
       {Icon ? <Icon className="h-4 w-4 text-text-secondary" /> : <InputVarTypeIcon type={type!} className="h-4 w-4 text-text-secondary" />}
       <div className="ml-2 truncate text-xs text-text-primary">{text}</div>
-    </div>
+    </DropdownMenuItem>
   )
 }
 
@@ -41,40 +43,36 @@ const SelectVarType: FC<Props> = ({
   onChange,
 }) => {
   const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
   const handleChange = (value: string) => {
     onChange(value)
-    setOpen(false)
   }
   return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={{
-        mainAxis: 8,
-        crossAxis: -2,
-      }}
-    >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        nativeButton={false}
+        render={<div className="block" />}
+      >
         <OperationBtn type="add" />
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent style={{ zIndex: 1000 }}>
-        <div className="min-w-[192px] rounded-lg border border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs">
-          <div className="p-1">
-            <SelectItem type={InputVarType.textInput} value="string" text={t('variableConfig.string', { ns: 'appDebug' })} onClick={handleChange}></SelectItem>
-            <SelectItem type={InputVarType.paragraph} value="paragraph" text={t('variableConfig.paragraph', { ns: 'appDebug' })} onClick={handleChange}></SelectItem>
-            <SelectItem type={InputVarType.select} value="select" text={t('variableConfig.select', { ns: 'appDebug' })} onClick={handleChange}></SelectItem>
-            <SelectItem type={InputVarType.number} value="number" text={t('variableConfig.number', { ns: 'appDebug' })} onClick={handleChange}></SelectItem>
-            <SelectItem type={InputVarType.checkbox} value="checkbox" text={t('variableConfig.checkbox', { ns: 'appDebug' })} onClick={handleChange}></SelectItem>
-          </div>
-          <div className="h-px border-t border-components-panel-border"></div>
-          <div className="p-1">
-            <SelectItem Icon={ApiConnection} value="api" text={t('variableConfig.apiBasedVar', { ns: 'appDebug' })} onClick={handleChange}></SelectItem>
-          </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={8}
+        alignOffset={-2}
+        popupClassName="min-w-[192px] rounded-lg border bg-components-panel-bg-blur p-0 backdrop-blur-xs"
+      >
+        <div className="p-1">
+          <SelectItem type={InputVarType.textInput} value="string" text={t('variableConfig.string', { ns: 'appDebug' })} onClick={handleChange}></SelectItem>
+          <SelectItem type={InputVarType.paragraph} value="paragraph" text={t('variableConfig.paragraph', { ns: 'appDebug' })} onClick={handleChange}></SelectItem>
+          <SelectItem type={InputVarType.select} value="select" text={t('variableConfig.select', { ns: 'appDebug' })} onClick={handleChange}></SelectItem>
+          <SelectItem type={InputVarType.number} value="number" text={t('variableConfig.number', { ns: 'appDebug' })} onClick={handleChange}></SelectItem>
+          <SelectItem type={InputVarType.checkbox} value="checkbox" text={t('variableConfig.checkbox', { ns: 'appDebug' })} onClick={handleChange}></SelectItem>
         </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+        <DropdownMenuSeparator className="my-0" />
+        <div className="p-1">
+          <SelectItem Icon={ApiConnection} value="api" text={t('variableConfig.apiBasedVar', { ns: 'appDebug' })} onClick={handleChange}></SelectItem>
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 export default React.memo(SelectVarType)
diff --git a/web/app/components/app/configuration/config/assistant-type-picker/__tests__/index.spec.tsx b/web/app/components/app/configuration/config/assistant-type-picker/__tests__/index.spec.tsx
index b32f14d089..7b2d3414f6 100644
--- a/web/app/components/app/configuration/config/assistant-type-picker/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/config/assistant-type-picker/__tests__/index.spec.tsx
@@ -841,11 +841,11 @@ describe('AssistantTypePicker', () => {
     it('should have proper ARIA state for dropdown', async () => {
       // Arrange
       const user = userEvent.setup()
-      const { container } = renderComponent()
+      renderComponent()
 
       // Act - Check initial state
-      const portalContainer = container.querySelector('[data-state]')
-      expect(portalContainer)!.toHaveAttribute('data-state', 'closed')
+      const triggerButton = screen.getByRole('button', { name: /chatAssistant\.name/i })
+      expect(triggerButton).toHaveAttribute('aria-expanded', 'false')
 
       // Open dropdown
       const trigger = screen.getByText(/chatAssistant.name/i)
@@ -853,23 +853,22 @@ describe('AssistantTypePicker', () => {
 
       // Assert - State should change to open
       await waitFor(() => {
-        const openPortal = container.querySelector('[data-state="open"]')
-        expect(openPortal)!.toBeInTheDocument()
+        expect(triggerButton).toHaveAttribute('aria-expanded', 'true')
       })
     })
 
     it('should have proper data-state attribute', () => {
       // Arrange & Act
-      const { container } = renderComponent()
+      renderComponent()
 
-      // Assert - Portal should have data-state for accessibility
-      const portalContainer = container.querySelector('[data-state]')
-      expect(portalContainer)!.toBeInTheDocument()
-      expect(portalContainer)!.toHaveAttribute('data-state')
+      // Assert - Trigger should expose expanded state for accessibility
+      const triggerButton = screen.getByRole('button', { name: /chatAssistant\.name/i })
+      expect(triggerButton).toBeInTheDocument()
+      expect(triggerButton).toHaveAttribute('aria-expanded')
 
       // Should start in closed state
       // Should start in closed state
-      expect(portalContainer)!.toHaveAttribute('data-state', 'closed')
+      expect(triggerButton).toHaveAttribute('aria-expanded', 'false')
     })
 
     it('should maintain accessible structure for screen readers', () => {
diff --git a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx b/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
index df0baa2f36..801645940f 100644
--- a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
+++ b/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
@@ -2,6 +2,11 @@
 import type { FC } from 'react'
 import type { AgentConfig } from '@/models/debug'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
 import { RiArrowDownSLine } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
@@ -10,11 +15,6 @@ import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows
 import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
 import { CuteRobot } from '@/app/components/base/icons/src/vender/solid/communication'
 import { BubbleText } from '@/app/components/base/icons/src/vender/solid/education'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import Radio from '@/app/components/base/radio/ui'
 import AgentSetting from '../agent/agent-setting'
 
@@ -107,47 +107,48 @@ const AssistantTypePicker: FC<Props> = ({
   )
   return (
     <>
-      <PortalToFollowElem
+      <Popover
         open={open}
         onOpenChange={setOpen}
-        placement="bottom-end"
-        offset={{
-          mainAxis: 8,
-          crossAxis: -2,
-        }}
       >
-        <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-          <div className={cn(open && 'bg-gray-50', 'flex h-8 cursor-pointer items-center space-x-1 rounded-lg border border-black/5 px-3 text-indigo-600 select-none')}>
-            {isAgent ? <BubbleText className="h-3 w-3" /> : <CuteRobot className="h-3 w-3" />}
-            <div className="text-xs font-medium">{t(`assistantType.${isAgent ? 'agentAssistant' : 'chatAssistant'}.name`, { ns: 'appDebug' })}</div>
-            <RiArrowDownSLine className="h-3 w-3" />
-          </div>
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent style={{ zIndex: 1000 }}>
-          <div className="relative left-0.5 w-[480px] rounded-xl border border-black/8 bg-white p-6 shadow-lg">
-            <div className="mb-2 text-sm leading-5 font-semibold text-gray-900">{t('assistantType.name', { ns: 'appDebug' })}</div>
-            <SelectItem
-              Icon={BubbleText}
-              value="chat"
-              disabled={disabled}
-              text={t('assistantType.chatAssistant.name', { ns: 'appDebug' })}
-              description={t('assistantType.chatAssistant.description', { ns: 'appDebug' })}
-              isChecked={!isAgent}
-              onClick={handleChange}
-            />
-            <SelectItem
-              Icon={CuteRobot}
-              value="agent"
-              disabled={disabled}
-              text={t('assistantType.agentAssistant.name', { ns: 'appDebug' })}
-              description={t('assistantType.agentAssistant.description', { ns: 'appDebug' })}
-              isChecked={isAgent}
-              onClick={handleChange}
-            />
-            {!disabled && agentConfigUI}
-          </div>
-        </PortalToFollowElemContent>
-      </PortalToFollowElem>
+        <PopoverTrigger
+          nativeButton={false}
+          render={(
+            <div className={cn(open && 'bg-gray-50', 'flex h-8 cursor-pointer items-center space-x-1 rounded-lg border border-black/5 px-3 text-indigo-600 select-none')} />
+          )}
+        >
+          {isAgent ? <BubbleText className="h-3 w-3" /> : <CuteRobot className="h-3 w-3" />}
+          <div className="text-xs font-medium">{t(`assistantType.${isAgent ? 'agentAssistant' : 'chatAssistant'}.name`, { ns: 'appDebug' })}</div>
+          <RiArrowDownSLine className="h-3 w-3" />
+        </PopoverTrigger>
+        <PopoverContent
+          placement="bottom-end"
+          sideOffset={8}
+          alignOffset={-2}
+          popupClassName="relative left-0.5 w-[480px] rounded-xl border border-black/8 bg-white p-6 shadow-lg"
+        >
+          <div className="mb-2 text-sm leading-5 font-semibold text-gray-900">{t('assistantType.name', { ns: 'appDebug' })}</div>
+          <SelectItem
+            Icon={BubbleText}
+            value="chat"
+            disabled={disabled}
+            text={t('assistantType.chatAssistant.name', { ns: 'appDebug' })}
+            description={t('assistantType.chatAssistant.description', { ns: 'appDebug' })}
+            isChecked={!isAgent}
+            onClick={handleChange}
+          />
+          <SelectItem
+            Icon={CuteRobot}
+            value="agent"
+            disabled={disabled}
+            text={t('assistantType.agentAssistant.name', { ns: 'appDebug' })}
+            description={t('assistantType.agentAssistant.description', { ns: 'appDebug' })}
+            isChecked={isAgent}
+            onClick={handleChange}
+          />
+          {!disabled && agentConfigUI}
+        </PopoverContent>
+      </Popover>
       {isShowAgentSetting && (
         <AgentSetting
           isFunctionCall={isFunctionCall}
diff --git a/web/app/components/app/configuration/config/automatic/__tests__/version-selector.spec.tsx b/web/app/components/app/configuration/config/automatic/__tests__/version-selector.spec.tsx
index 0f792a7491..3c56ef3c21 100644
--- a/web/app/components/app/configuration/config/automatic/__tests__/version-selector.spec.tsx
+++ b/web/app/components/app/configuration/config/automatic/__tests__/version-selector.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import VersionSelector from '../version-selector'
 
 vi.mock('react-i18next', () => ({
@@ -25,7 +25,7 @@ describe('VersionSelector', () => {
     expect(onChange).not.toHaveBeenCalled()
   })
 
-  it('should open the selector and switch versions when multiple versions exist', () => {
+  it('should open the selector and switch versions when multiple versions exist', async () => {
     const onChange = vi.fn()
 
     render(
@@ -44,6 +44,8 @@ describe('VersionSelector', () => {
     fireEvent.click(screen.getByText('generate.version 1'))
 
     expect(onChange).toHaveBeenCalledWith(0)
-    expect(screen.queryByText('generate.versions')).not.toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.queryByText('generate.versions')).not.toBeInTheDocument()
+    })
   })
 })
diff --git a/web/app/components/app/configuration/config/automatic/version-selector.tsx b/web/app/components/app/configuration/config/automatic/version-selector.tsx
index 25846e9b54..13b99dafde 100644
--- a/web/app/components/app/configuration/config/automatic/version-selector.tsx
+++ b/web/app/components/app/configuration/config/automatic/version-selector.tsx
@@ -1,10 +1,16 @@
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 
 type VersionSelectorProps = {
   versionLen: number
@@ -16,19 +22,14 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, on
   const { t } = useTranslation()
   const [isOpen, {
     setFalse: handleOpenFalse,
-    toggle: handleOpenToggle,
     set: handleOpenSet,
   }] = useBoolean(false)
 
   const moreThanOneVersion = versionLen > 1
-  const handleOpen = useCallback((value: boolean) => {
+  const handleOpen = useCallback((nextOpen: boolean) => {
     if (moreThanOneVersion)
-      handleOpenSet(value)
-  }, [moreThanOneVersion, handleOpenToggle])
-  const handleToggle = useCallback(() => {
-    if (moreThanOneVersion)
-      handleOpenToggle()
-  }, [moreThanOneVersion, handleOpenToggle])
+      handleOpenSet(nextOpen)
+  }, [moreThanOneVersion, handleOpenSet])
 
   const versions = Array.from({ length: versionLen }, (_, index) => ({
     label: `${t('generate.version', { ns: 'appDebug' })} ${index + 1}${index === versionLen - 1 ? ` · ${t('generate.latest', { ns: 'appDebug' })}` : ''}`,
@@ -38,67 +39,59 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ versionLen, value, on
   const isLatest = value === versionLen - 1
 
   return (
-    <PortalToFollowElem
-      placement="bottom-start"
-      offset={{
-        mainAxis: 4,
-        crossAxis: -12,
-      }}
+    <DropdownMenu
       open={isOpen}
       onOpenChange={handleOpen}
     >
-      <PortalToFollowElemTrigger
-        onClick={handleToggle}
-        asChild
+      <DropdownMenuTrigger
+        nativeButton={false}
+        render={(
+          <div className={cn('flex items-center system-xs-medium text-text-tertiary', isOpen && 'text-text-secondary', moreThanOneVersion && 'cursor-pointer')} />
+        )}
       >
-
-        <div className={cn('flex items-center system-xs-medium text-text-tertiary', isOpen && 'text-text-secondary', moreThanOneVersion && 'cursor-pointer')}>
-          <div>
-            {t('generate.version', { ns: 'appDebug' })}
-            {' '}
-            {value + 1}
-            {isLatest && ` · ${t('generate.latest', { ns: 'appDebug' })}`}
-          </div>
-          {moreThanOneVersion && <RiArrowDownSLine className="size-3" />}
+        <div>
+          {t('generate.version', { ns: 'appDebug' })}
+          {' '}
+          {value + 1}
+          {isLatest && ` · ${t('generate.latest', { ns: 'appDebug' })}`}
         </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className={cn(
-        'z-99',
-      )}
+        {moreThanOneVersion && <RiArrowDownSLine className="size-3" />}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-start"
+        sideOffset={4}
+        alignOffset={-12}
+        popupClassName="w-[208px] rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
       >
-        <div
-          className={cn(
-            'w-[208px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg',
-          )}
+        <div className={cn('flex h-[22px] items-center px-3 pl-3 system-xs-medium-uppercase text-text-tertiary')}>
+          {t('generate.versions', { ns: 'appDebug' })}
+        </div>
+        <DropdownMenuRadioGroup
+          value={value}
+          onValueChange={(nextValue) => {
+            onChange(nextValue)
+            handleOpenFalse()
+          }}
         >
-          <div className={cn('flex h-[22px] items-center px-3 pl-3 system-xs-medium-uppercase text-text-tertiary')}>
-            {t('generate.versions', { ns: 'appDebug' })}
-          </div>
-          {
-            versions.map(option => (
-              <div
-                key={option.value}
-                className={cn(
-                  'flex h-7 cursor-pointer items-center rounded-lg px-2 system-sm-medium text-text-secondary hover:bg-state-base-hover',
-                )}
-                title={option.label}
-                onClick={() => {
-                  onChange(option.value)
-                  handleOpenFalse()
-                }}
-              >
-                <div className="mr-1 grow truncate px-1 pl-1">
-                  {option.label}
-                </div>
-                {
-                  value === option.value && <RiCheckLine className="h-4 w-4 shrink-0 text-text-accent" />
-                }
+          {versions.map(option => (
+            <DropdownMenuRadioItem
+              key={option.value}
+              value={option.value}
+              closeOnClick
+              className="h-7 rounded-lg px-2 system-sm-medium text-text-secondary"
+              title={option.label}
+            >
+              <div className="mr-1 grow truncate px-1 pl-1">
+                {option.label}
               </div>
-            ))
-          }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+              {
+                value === option.value && <RiCheckLine className="h-4 w-4 shrink-0 text-text-accent" />
+              }
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/app/configuration/dataset-config/context-var/__tests__/index.spec.tsx b/web/app/components/app/configuration/dataset-config/context-var/__tests__/index.spec.tsx
index e8b1583171..f8017c3585 100644
--- a/web/app/components/app/configuration/dataset-config/context-var/__tests__/index.spec.tsx
+++ b/web/app/components/app/configuration/dataset-config/context-var/__tests__/index.spec.tsx
@@ -1,7 +1,7 @@
+import type * as React from 'react'
 import type { Props } from '../var-picker'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import * as React from 'react'
 import ContextVar from '../index'
 
 // Mock external dependencies only
@@ -76,57 +76,6 @@ vi.mock('@langgenius/dify-ui/popover', async () => {
   }
 })
 
-type PortalToFollowElemProps = {
-  children: React.ReactNode
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-}
-type PortalToFollowElemTriggerProps = React.HTMLAttributes<HTMLElement> & { children?: React.ReactNode, asChild?: boolean }
-type PortalToFollowElemContentProps = React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }
-
-vi.mock('@/app/components/base/portal-to-follow-elem', () => {
-  const PortalContext = React.createContext({ open: false })
-
-  const PortalToFollowElem = ({ children, open }: PortalToFollowElemProps) => {
-    return (
-      <PortalContext.Provider value={{ open: !!open }}>
-        <div data-testid="portal">{children}</div>
-      </PortalContext.Provider>
-    )
-  }
-
-  const PortalToFollowElemContent = ({ children, ...props }: PortalToFollowElemContentProps) => {
-    const { open } = React.useContext(PortalContext)
-    if (!open)
-      return null
-    return (
-      <div data-testid="portal-content" {...props}>
-        {children}
-      </div>
-    )
-  }
-
-  const PortalToFollowElemTrigger = ({ children, asChild, ...props }: PortalToFollowElemTriggerProps) => {
-    if (asChild && React.isValidElement(children)) {
-      return React.cloneElement(children, {
-        ...props,
-        'data-testid': 'portal-trigger',
-      } as React.HTMLAttributes<HTMLElement>)
-    }
-    return (
-      <div data-testid="portal-trigger" {...props}>
-        {children}
-      </div>
-    )
-  }
-
-  return {
-    PortalToFollowElem,
-    PortalToFollowElemContent,
-    PortalToFollowElemTrigger,
-  }
-})
-
 describe('ContextVar', () => {
   const mockOptions: Props['options'] = [
     { name: 'Variable 1', value: 'var1', type: 'string' },
diff --git a/web/app/components/app/configuration/dataset-config/context-var/__tests__/var-picker.spec.tsx b/web/app/components/app/configuration/dataset-config/context-var/__tests__/var-picker.spec.tsx
index 7890343720..5b77134468 100644
--- a/web/app/components/app/configuration/dataset-config/context-var/__tests__/var-picker.spec.tsx
+++ b/web/app/components/app/configuration/dataset-config/context-var/__tests__/var-picker.spec.tsx
@@ -10,41 +10,41 @@ vi.mock('@/next/navigation', () => ({
   usePathname: () => '/test',
 }))
 
-type PortalToFollowElemProps = {
+type PopoverProps = {
   children: React.ReactNode
   open?: boolean
   onOpenChange?: (open: boolean) => void
 }
-type PortalToFollowElemTriggerProps = React.HTMLAttributes<HTMLElement> & { children?: React.ReactNode, asChild?: boolean }
-type PortalToFollowElemContentProps = React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }
+type PopoverTriggerProps = React.HTMLAttributes<HTMLElement> & { children?: React.ReactNode, asChild?: boolean }
+type PopoverContentProps = React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }
 
 vi.mock('@langgenius/dify-ui/popover', () => {
-  const PortalContext = React.createContext({
+  const PopoverContext = React.createContext({
     open: false,
     onOpenChange: undefined as ((open: boolean) => void) | undefined,
   })
 
-  const Popover = ({ children, open, onOpenChange }: PortalToFollowElemProps) => {
+  const Popover = ({ children, open, onOpenChange }: PopoverProps) => {
     return (
-      <PortalContext.Provider value={{ open: !!open, onOpenChange }}>
-        <div data-testid="portal">{children}</div>
-      </PortalContext.Provider>
+      <PopoverContext.Provider value={{ open: !!open, onOpenChange }}>
+        <div data-testid="popover">{children}</div>
+      </PopoverContext.Provider>
     )
   }
 
-  const PopoverContent = ({ children, ...props }: PortalToFollowElemContentProps) => {
-    const { open } = React.useContext(PortalContext)
+  const PopoverContent = ({ children, ...props }: PopoverContentProps) => {
+    const { open } = React.useContext(PopoverContext)
     if (!open)
       return null
     return (
-      <div data-testid="portal-content" {...props}>
+      <div data-testid="popover-content" {...props}>
         {children}
       </div>
     )
   }
 
-  const PopoverTrigger = ({ children, asChild, render, ...props }: PortalToFollowElemTriggerProps & { render?: React.ReactNode }) => {
-    const { open, onOpenChange } = React.useContext(PortalContext)
+  const PopoverTrigger = ({ children, asChild, render, ...props }: PopoverTriggerProps & { render?: React.ReactNode }) => {
+    const { open, onOpenChange } = React.useContext(PopoverContext)
     const content = render ?? children
     const handleClick = (e: React.MouseEvent<HTMLElement>) => {
       props.onClick?.(e)
@@ -56,7 +56,7 @@ vi.mock('@langgenius/dify-ui/popover', () => {
       return React.cloneElement(content, {
         ...props,
         'onClick': handleClick,
-        'data-testid': 'portal-trigger',
+        'data-testid': 'popover-trigger',
       } as React.HTMLAttributes<HTMLElement>)
     }
 
@@ -64,11 +64,11 @@ vi.mock('@langgenius/dify-ui/popover', () => {
       return React.cloneElement(children, {
         ...props,
         'onClick': handleClick,
-        'data-testid': 'portal-trigger',
+        'data-testid': 'popover-trigger',
       } as React.HTMLAttributes<HTMLElement>)
     }
     return (
-      <div data-testid="portal-trigger" {...props} onClick={handleClick}>
+      <div data-testid="popover-trigger" {...props} onClick={handleClick}>
         {content}
       </div>
     )
@@ -109,7 +109,7 @@ describe('VarPicker', () => {
 
       // Assert
       // Assert
-      expect(screen.getByTestId('portal-trigger'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-trigger'))!.toBeInTheDocument()
       expect(screen.getByText('var1'))!.toBeInTheDocument()
     })
 
@@ -201,7 +201,7 @@ describe('VarPicker', () => {
 
       // Assert - Trigger should be present
       // Assert - Trigger should be present
-      expect(screen.getByTestId('portal-trigger'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-trigger'))!.toBeInTheDocument()
     })
   })
 
@@ -234,7 +234,7 @@ describe('VarPicker', () => {
 
       // Assert
       // Assert
-      expect(screen.getByTestId('portal-trigger'))!.toHaveClass('custom-trigger-class')
+      expect(screen.getByTestId('popover-trigger'))!.toHaveClass('custom-trigger-class')
     })
 
     it('should display selected value with proper formatting', () => {
@@ -268,11 +268,11 @@ describe('VarPicker', () => {
 
       // Act
       render(<VarPicker {...props} />)
-      await user.click(screen.getByTestId('portal-trigger'))
+      await user.click(screen.getByTestId('popover-trigger'))
 
       // Assert
       // Assert
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
     })
 
     it('should call onChange and close dropdown when selecting an option', async () => {
@@ -285,8 +285,8 @@ describe('VarPicker', () => {
       render(<VarPicker {...props} />)
 
       // Open dropdown
-      await user.click(screen.getByTestId('portal-trigger'))
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      await user.click(screen.getByTestId('popover-trigger'))
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
 
       // Select a different option
       const options = screen.getAllByText('var2')
@@ -295,7 +295,7 @@ describe('VarPicker', () => {
 
       // Assert
       expect(onChange).toHaveBeenCalledWith('var2')
-      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
     })
 
     it('should toggle dropdown when clicking trigger button multiple times', async () => {
@@ -306,15 +306,15 @@ describe('VarPicker', () => {
       // Act
       render(<VarPicker {...props} />)
 
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
 
       // Open dropdown
       await user.click(trigger)
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
 
       // Close dropdown
       await user.click(trigger)
-      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
     })
   })
 
@@ -359,7 +359,7 @@ describe('VarPicker', () => {
       // Assert
       // Assert
       // Assert
-      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
     })
 
     it('should toggle dropdown state on trigger click', async () => {
@@ -370,16 +370,16 @@ describe('VarPicker', () => {
       // Act
       render(<VarPicker {...props} />)
 
-      const trigger = screen.getByTestId('portal-trigger')
-      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+      const trigger = screen.getByTestId('popover-trigger')
+      expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
 
       // Open dropdown
       await user.click(trigger)
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
 
       // Close dropdown
       await user.click(trigger)
-      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
     })
 
     it('should preserve selected value when dropdown is closed without selection', async () => {
@@ -391,7 +391,7 @@ describe('VarPicker', () => {
       render(<VarPicker {...props} />)
 
       // Open and close dropdown without selecting anything
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       await user.click(trigger)
       await user.click(trigger)
 
@@ -416,7 +416,7 @@ describe('VarPicker', () => {
       // Assert
       // Assert
       expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder'))!.toBeInTheDocument()
-      expect(screen.getByTestId('portal-trigger'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-trigger'))!.toBeInTheDocument()
     })
 
     it('should handle empty options array', () => {
@@ -432,7 +432,7 @@ describe('VarPicker', () => {
 
       // Assert
       // Assert
-      expect(screen.getByTestId('portal-trigger'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-trigger'))!.toBeInTheDocument()
       expect(screen.getByText('appDebug.feature.dataSet.queryVariable.choosePlaceholder'))!.toBeInTheDocument()
     })
 
@@ -485,7 +485,7 @@ describe('VarPicker', () => {
       // Assert
       // Assert
       expect(screen.getByText('longVar'))!.toBeInTheDocument()
-      expect(screen.getByTestId('portal-trigger'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-trigger'))!.toBeInTheDocument()
     })
   })
 })
diff --git a/web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx b/web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx
index 4cbe4ce8d1..a54533b194 100644
--- a/web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/__tests__/header-in-mobile.spec.tsx
@@ -40,43 +40,24 @@ vi.mock('../../embedded-chatbot/theme/theme-context', () => ({
   })),
 }))
 
-// Mock PortalToFollowElem using React Context
-vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
-  const React = await import('react')
-  const MockContext = React.createContext(false)
+vi.mock('@langgenius/dify-ui/dropdown-menu', () => import('@/__mocks__/base-ui-dropdown-menu'))
+vi.mock('@langgenius/dify-ui/tooltip', () => import('@/__mocks__/base-ui-tooltip'))
 
-  return {
-    PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => {
-      return (
-        <MockContext.Provider value={open}>
-          <div data-open={open}>{children}</div>
-        </MockContext.Provider>
-      )
-    },
-    PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => {
-      const open = React.useContext(MockContext)
-      if (!open)
-        return null
-      return <div>{children}</div>
-    },
-    PortalToFollowElemTrigger: ({ children, onClick, ...props }: { children: React.ReactNode, onClick: () => void } & React.HTMLAttributes<HTMLDivElement>) => (
-      <div onClick={onClick} {...props}>{children}</div>
-    ),
-  }
-})
-
-// Mock Modal to avoid Headless UI issues in tests
-vi.mock('@/app/components/base/modal', () => ({
-  default: ({ children, isShow, title }: { children: React.ReactNode, isShow: boolean, title: React.ReactNode }) => {
-    if (!isShow)
+// Mock Dialog to avoid Base UI focus/portal behavior in tests
+vi.mock('@langgenius/dify-ui/dialog', () => ({
+  Dialog: ({ children, open }: { children: React.ReactNode, open?: boolean }) => {
+    if (!open)
       return null
     return (
-      <div role="dialog" data-testid="modal">
-        {!!title && <div>{title}</div>}
+      <div data-testid="modal">
         {children}
       </div>
     )
   },
+  DialogContent: ({ children }: { children: React.ReactNode }) => (
+    <div role="dialog" data-testid="modal-content">{children}</div>
+  ),
+  DialogTitle: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }))
 
 // Sidebar mock removed to use real component
diff --git a/web/app/components/base/chat/chat-with-history/header/__tests__/index.spec.tsx b/web/app/components/base/chat/chat-with-history/header/__tests__/index.spec.tsx
index b1c23a129b..b3f2f6fcb4 100644
--- a/web/app/components/base/chat/chat-with-history/header/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/__tests__/index.spec.tsx
@@ -16,43 +16,24 @@ vi.mock('@/app/components/base/chat/chat-with-history/inputs-form/content', () =
   default: () => <div data-testid="inputs-form-content">InputsFormContent</div>,
 }))
 
-// Mock PortalToFollowElem using React Context
-vi.mock('@/app/components/base/portal-to-follow-elem', async () => {
-  const React = await import('react')
-  const MockContext = React.createContext(false)
+vi.mock('@langgenius/dify-ui/dropdown-menu', () => import('@/__mocks__/base-ui-dropdown-menu'))
+vi.mock('@langgenius/dify-ui/tooltip', () => import('@/__mocks__/base-ui-tooltip'))
 
-  return {
-    PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => {
-      return (
-        <MockContext.Provider value={open}>
-          <div data-open={open}>{children}</div>
-        </MockContext.Provider>
-      )
-    },
-    PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => {
-      const open = React.useContext(MockContext)
-      if (!open)
-        return null
-      return <div>{children}</div>
-    },
-    PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick: () => void }) => (
-      <div onClick={onClick}>{children}</div>
-    ),
-  }
-})
-
-// Mock Modal to avoid Headless UI issues in tests
-vi.mock('@/app/components/base/modal', () => ({
-  default: ({ children, isShow, title }: { children: React.ReactNode, isShow: boolean, title: React.ReactNode }) => {
-    if (!isShow)
+// Mock Dialog to avoid Base UI focus/portal behavior in tests
+vi.mock('@langgenius/dify-ui/dialog', () => ({
+  Dialog: ({ children, open }: { children: React.ReactNode, open?: boolean }) => {
+    if (!open)
       return null
     return (
       <div data-testid="modal">
-        {!!title && <div>{title}</div>}
         {children}
       </div>
     )
   },
+  DialogContent: ({ children }: { children: React.ReactNode }) => (
+    <div role="dialog" data-testid="modal-content">{children}</div>
+  ),
+  DialogTitle: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }))
 
 const mockAppData: AppData = {
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx
index 170f6d7fb5..33e25dbe01 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/__tests__/index.spec.tsx
@@ -490,7 +490,7 @@ describe('Sidebar Index', () => {
       render(<Sidebar />)
 
       await user.click(screen.getByTestId('rename-1'))
-      expect(screen.getByTestId('modal')).toBeInTheDocument()
+      expect(screen.getByText('common.chat.renameConversation')).toBeInTheDocument()
     })
 
     it('should pass correct props to rename modal', async () => {
@@ -499,7 +499,9 @@ describe('Sidebar Index', () => {
 
       await user.click(screen.getByTestId('rename-1'))
       // The modal should have title and save/cancel
-      expect(screen.getByTestId('modal')).toBeInTheDocument()
+      expect(screen.getByText('common.chat.renameConversation')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.save' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'common.operation.cancel' })).toBeInTheDocument()
     })
 
     it('should call handleRenameConversation with new name', async () => {
@@ -531,13 +533,13 @@ describe('Sidebar Index', () => {
       render(<Sidebar />)
 
       await user.click(screen.getByTestId('rename-1'))
-      expect(screen.getByTestId('modal')).toBeInTheDocument()
+      expect(screen.getByText('common.chat.renameConversation')).toBeInTheDocument()
 
       const cancelButton = screen.getByText('common.operation.cancel')
       await user.click(cancelButton)
 
       await waitFor(() => {
-        expect(screen.queryByTestId('modal')).not.toBeInTheDocument()
+        expect(screen.queryByText('common.chat.renameConversation')).not.toBeInTheDocument()
       })
     })
 
@@ -882,8 +884,7 @@ describe('RenameModal', () => {
       />,
     )
 
-    expect(screen.getByTestId('modal')).toBeInTheDocument()
-    expect(screen.getByTestId('modal-title')).toHaveTextContent('common.chat.renameConversation')
+    expect(screen.getByText('common.chat.renameConversation')).toBeInTheDocument()
   })
 
   it('should handle empty placeholder translation fallback', () => {
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx b/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
index 5cf981363c..54822659f2 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/rename-modal.tsx
@@ -1,11 +1,15 @@
 'use client'
 import type { FC } from 'react'
 import { Button } from '@langgenius/dify-ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@langgenius/dify-ui/dialog'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '@/app/components/base/input'
-import Modal from '@/app/components/base/modal'
 
 type IRenameModalProps = {
   isShow: boolean
@@ -27,24 +31,28 @@ const RenameModal: FC<IRenameModalProps> = ({
   const conversationNamePlaceholder = t('chat.conversationNamePlaceholder', { ns: 'common' }) || ''
 
   return (
-    <Modal
-      title={t('chat.renameConversation', { ns: 'common' })}
-      isShow={isShow}
-      onClose={onClose}
+    <Dialog
+      open={isShow}
+      onOpenChange={open => !open && onClose()}
     >
-      <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('chat.conversationName', { ns: 'common' })}</div>
-      <Input
-        className="mt-2 h-10 w-full"
-        value={tempName}
-        onChange={e => setTempName(e.target.value)}
-        placeholder={conversationNamePlaceholder}
-      />
+      <DialogContent>
+        <DialogTitle className="title-2xl-semi-bold text-text-primary">
+          {t('chat.renameConversation', { ns: 'common' })}
+        </DialogTitle>
+        <div className="mt-6 text-sm leading-[21px] font-medium text-text-primary">{t('chat.conversationName', { ns: 'common' })}</div>
+        <Input
+          className="mt-2 h-10 w-full"
+          value={tempName}
+          onChange={e => setTempName(e.target.value)}
+          placeholder={conversationNamePlaceholder}
+        />
 
-      <div className="mt-10 flex justify-end">
-        <Button className="mr-2 shrink-0" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
-        <Button variant="primary" className="shrink-0" onClick={() => onSave(tempName)} loading={saveLoading}>{t('operation.save', { ns: 'common' })}</Button>
-      </div>
-    </Modal>
+        <div className="mt-10 flex justify-end">
+          <Button className="mr-2 shrink-0" onClick={onClose}>{t('operation.cancel', { ns: 'common' })}</Button>
+          <Button variant="primary" className="shrink-0" onClick={() => onSave(tempName)} loading={saveLoading}>{t('operation.save', { ns: 'common' })}</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
 export default React.memo(RenameModal)
diff --git a/web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx b/web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx
index 9eaf5fe374..094c5c987b 100644
--- a/web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx
+++ b/web/app/components/base/chat/chat/answer/__tests__/operation.spec.tsx
@@ -441,9 +441,8 @@ describe('Operation', () => {
       renderOperation()
       const thumbDown = screen.getByTestId('operation-bar').querySelector('.i-ri-thumb-down-line')!.closest('button')!
       await user.click(thumbDown)
-      // Check if modal title/labels fallback works
-      // Check if modal title/labels fallback works
-      expect(screen.getByRole('tooltip'))!.toBeInTheDocument()
+      expect(screen.getByRole('dialog', { name: 'Provide Feedback' }))!.toBeInTheDocument()
+      expect(screen.getByLabelText('Feedback Content'))!.toBeInTheDocument()
       mockT.mockImplementation(key => key)
     })
   })
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index e7d1c17a3e..6804271d64 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -1,13 +1,17 @@
-import type { FC } from 'react'
+import type { ReactElement, ReactNode } from 'react'
 import type {
   ChatItem,
   Feedback,
 } from '../../types'
+import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import { Dialog, DialogCloseButton, DialogContent, DialogDescription, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import copy from 'copy-to-clipboard'
 import {
   memo,
+  useId,
   useMemo,
   useState,
 } from 'react'
@@ -16,10 +20,8 @@ import EditReplyModal from '@/app/components/app/annotation/edit-annotation-moda
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import Log from '@/app/components/base/chat/chat/log'
 import AnnotationCtrlButton from '@/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button'
-import Modal from '@/app/components/base/modal/modal'
 import NewAudioButton from '@/app/components/base/new-audio-button'
 import Textarea from '@/app/components/base/textarea'
-import Tooltip from '@/app/components/base/tooltip'
 import { useChatContext } from '../context'
 
 type OperationProps = {
@@ -33,7 +35,25 @@ type OperationProps = {
   noChatInput?: boolean
 }
 
-const Operation: FC<OperationProps> = ({
+type FeedbackTooltipProps = {
+  content: ReactNode
+  children: ReactElement
+}
+
+const feedbackTooltipClassName = 'max-w-[260px]'
+
+const FeedbackTooltip = ({ content, children }: FeedbackTooltipProps) => {
+  return (
+    <Tooltip>
+      <TooltipTrigger render={children} />
+      <TooltipContent className={feedbackTooltipClassName}>
+        {content}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+function Operation({
   item,
   question,
   index,
@@ -42,7 +62,7 @@ const Operation: FC<OperationProps> = ({
   contentWidth,
   hasWorkflowProcess,
   noChatInput,
-}) => {
+}: OperationProps) {
   const { t } = useTranslation()
   const {
     config,
@@ -68,8 +88,8 @@ const Operation: FC<OperationProps> = ({
   const [userLocalFeedback, setUserLocalFeedback] = useState(feedback)
   const [adminLocalFeedback, setAdminLocalFeedback] = useState(adminFeedback)
   const [feedbackTarget, setFeedbackTarget] = useState<'user' | 'admin'>('user')
+  const feedbackTextareaId = useId()
 
-  // Separate feedback types for display
   const userFeedback = feedback
 
   const content = useMemo(() => {
@@ -89,7 +109,11 @@ const Operation: FC<OperationProps> = ({
 
   const userFeedbackLabel = t('table.header.userRate', { ns: 'appLog' }) || 'User feedback'
   const adminFeedbackLabel = t('table.header.adminRate', { ns: 'appLog' }) || 'Admin feedback'
-  const feedbackTooltipClassName = 'max-w-[260px]'
+  const likeLabel = t('detail.operation.like', { ns: 'appLog' }) || 'Like'
+  const dislikeLabel = t('detail.operation.dislike', { ns: 'appLog' }) || 'Dislike'
+  const removeFeedbackLabel = t('operation.remove', { ns: 'common' }) || 'Remove'
+  const copyLabel = t('operation.copy', { ns: 'common' }) || 'Copy'
+  const regenerateLabel = t('operation.regenerate', { ns: 'common' }) || 'Regenerate'
 
   const buildFeedbackTooltip = (feedbackData?: Feedback | null, label = userFeedbackLabel) => {
     if (!feedbackData?.rating)
@@ -180,33 +204,35 @@ const Operation: FC<OperationProps> = ({
           >
             {hasUserFeedback
               ? (
-                  <Tooltip
-                    popupContent={buildFeedbackTooltip(displayUserFeedback, userFeedbackLabel)}
-                    popupClassName={feedbackTooltipClassName}
+                  <FeedbackTooltip
+                    content={buildFeedbackTooltip(displayUserFeedback, userFeedbackLabel)}
                   >
                     <ActionButton
+                      aria-label={`${userFeedbackLabel}: ${removeFeedbackLabel}`}
                       state={displayUserFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Destructive}
                       onClick={() => handleFeedback(null, undefined, 'user')}
                     >
                       {displayUserFeedback?.rating === 'like'
-                        ? <div className="i-ri-thumb-up-line h-4 w-4" />
-                        : <div className="i-ri-thumb-down-line h-4 w-4" />}
+                        ? <span aria-hidden="true" className="i-ri-thumb-up-line h-4 w-4" />
+                        : <span aria-hidden="true" className="i-ri-thumb-down-line h-4 w-4" />}
                     </ActionButton>
-                  </Tooltip>
+                  </FeedbackTooltip>
                 )
               : (
                   <>
                     <ActionButton
+                      aria-label={`${userFeedbackLabel}: ${likeLabel}`}
                       state={displayUserFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Default}
                       onClick={() => handleLikeClick('user')}
                     >
-                      <div className="i-ri-thumb-up-line h-4 w-4" />
+                      <span aria-hidden="true" className="i-ri-thumb-up-line h-4 w-4" />
                     </ActionButton>
                     <ActionButton
+                      aria-label={`${userFeedbackLabel}: ${dislikeLabel}`}
                       state={displayUserFeedback?.rating === 'dislike' ? ActionButtonState.Destructive : ActionButtonState.Default}
                       onClick={() => handleDislikeClick('user')}
                     >
-                      <div className="i-ri-thumb-down-line h-4 w-4" />
+                      <span aria-hidden="true" className="i-ri-thumb-down-line h-4 w-4" />
                     </ActionButton>
                   </>
                 )}
@@ -218,68 +244,65 @@ const Operation: FC<OperationProps> = ({
             (hasAdminFeedback || hasUserFeedback) ? 'flex' : 'hidden group-hover:flex',
           )}
           >
-            {/* User Feedback Display */}
             {displayUserFeedback?.rating && (
-              <Tooltip
-                popupContent={buildFeedbackTooltip(displayUserFeedback, userFeedbackLabel)}
-                popupClassName={feedbackTooltipClassName}
+              <FeedbackTooltip
+                content={buildFeedbackTooltip(displayUserFeedback, userFeedbackLabel)}
               >
                 {displayUserFeedback.rating === 'like'
                   ? (
-                      <ActionButton state={ActionButtonState.Active}>
-                        <div className="i-ri-thumb-up-line h-4 w-4" />
+                      <ActionButton aria-label={`${userFeedbackLabel}: ${likeLabel}`} state={ActionButtonState.Active}>
+                        <span aria-hidden="true" className="i-ri-thumb-up-line h-4 w-4" />
                       </ActionButton>
                     )
                   : (
-                      <ActionButton state={ActionButtonState.Destructive}>
-                        <div className="i-ri-thumb-down-line h-4 w-4" />
+                      <ActionButton aria-label={`${userFeedbackLabel}: ${dislikeLabel}`} state={ActionButtonState.Destructive}>
+                        <span aria-hidden="true" className="i-ri-thumb-down-line h-4 w-4" />
                       </ActionButton>
                     )}
-              </Tooltip>
+              </FeedbackTooltip>
             )}
 
-            {/* Admin Feedback Controls */}
             {displayUserFeedback?.rating && <div className="mx-1 h-3 w-[0.5px] bg-components-actionbar-border" />}
             {hasAdminFeedback
               ? (
-                  <Tooltip
-                    popupContent={buildFeedbackTooltip(adminLocalFeedback, adminFeedbackLabel)}
-                    popupClassName={feedbackTooltipClassName}
+                  <FeedbackTooltip
+                    content={buildFeedbackTooltip(adminLocalFeedback, adminFeedbackLabel)}
                   >
                     <ActionButton
+                      aria-label={`${adminFeedbackLabel}: ${removeFeedbackLabel}`}
                       state={adminLocalFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Destructive}
                       onClick={() => handleFeedback(null, undefined, 'admin')}
                     >
                       {adminLocalFeedback?.rating === 'like'
-                        ? <div className="i-ri-thumb-up-line h-4 w-4" />
-                        : <div className="i-ri-thumb-down-line h-4 w-4" />}
+                        ? <span aria-hidden="true" className="i-ri-thumb-up-line h-4 w-4" />
+                        : <span aria-hidden="true" className="i-ri-thumb-down-line h-4 w-4" />}
                     </ActionButton>
-                  </Tooltip>
+                  </FeedbackTooltip>
                 )
               : (
                   <>
-                    <Tooltip
-                      popupContent={buildFeedbackTooltip(adminLocalFeedback, adminFeedbackLabel)}
-                      popupClassName={feedbackTooltipClassName}
+                    <FeedbackTooltip
+                      content={buildFeedbackTooltip(adminLocalFeedback, adminFeedbackLabel)}
                     >
                       <ActionButton
+                        aria-label={`${adminFeedbackLabel}: ${likeLabel}`}
                         state={adminLocalFeedback?.rating === 'like' ? ActionButtonState.Active : ActionButtonState.Default}
                         onClick={() => handleLikeClick('admin')}
                       >
-                        <div className="i-ri-thumb-up-line h-4 w-4" />
+                        <span aria-hidden="true" className="i-ri-thumb-up-line h-4 w-4" />
                       </ActionButton>
-                    </Tooltip>
-                    <Tooltip
-                      popupContent={buildFeedbackTooltip(adminLocalFeedback, adminFeedbackLabel)}
-                      popupClassName={feedbackTooltipClassName}
+                    </FeedbackTooltip>
+                    <FeedbackTooltip
+                      content={buildFeedbackTooltip(adminLocalFeedback, adminFeedbackLabel)}
                     >
                       <ActionButton
+                        aria-label={`${adminFeedbackLabel}: ${dislikeLabel}`}
                         state={adminLocalFeedback?.rating === 'dislike' ? ActionButtonState.Destructive : ActionButtonState.Default}
                         onClick={() => handleDislikeClick('admin')}
                       >
-                        <div className="i-ri-thumb-down-line h-4 w-4" />
+                        <span aria-hidden="true" className="i-ri-thumb-down-line h-4 w-4" />
                       </ActionButton>
-                    </Tooltip>
+                    </FeedbackTooltip>
                   </>
                 )}
           </div>
@@ -300,18 +323,19 @@ const Operation: FC<OperationProps> = ({
             )}
             {!humanInputFormDataList?.length && (
               <ActionButton
+                aria-label={copyLabel}
                 onClick={() => {
                   copy(content)
                   toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
                 }}
                 data-testid="copy-btn"
               >
-                <div className="i-ri-clipboard-line h-4 w-4" />
+                <span aria-hidden="true" className="i-ri-clipboard-line h-4 w-4" />
               </ActionButton>
             )}
             {!noChatInput && (
-              <ActionButton onClick={() => onRegenerate?.(item)} data-testid="regenerate-btn">
-                <div className="i-ri-reset-left-line h-4 w-4" />
+              <ActionButton aria-label={regenerateLabel} onClick={() => onRegenerate?.(item)} data-testid="regenerate-btn">
+                <span aria-hidden="true" className="i-ri-reset-left-line h-4 w-4" />
               </ActionButton>
             )}
             {config?.supportAnnotation && config.annotation_reply?.enabled && !humanInputFormDataList?.length && (
@@ -342,30 +366,56 @@ const Operation: FC<OperationProps> = ({
         onRemove={() => onAnnotationRemoved?.(index)}
       />
       {isShowFeedbackModal && (
-        <Modal
-          title={t('feedback.title', { ns: 'common' }) || 'Provide Feedback'}
-          subTitle={t('feedback.subtitle', { ns: 'common' }) || 'Please tell us what went wrong with this response'}
-          onClose={handleFeedbackCancel}
-          onConfirm={handleFeedbackSubmit}
-          onCancel={handleFeedbackCancel}
-          confirmButtonText={t('operation.submit', { ns: 'common' }) || 'Submit'}
-          cancelButtonText={t('operation.cancel', { ns: 'common' }) || 'Cancel'}
+        <Dialog
+          open
+          onOpenChange={(open) => {
+            if (!open)
+              handleFeedbackCancel()
+          }}
         >
-          <div className="space-y-3">
-            <div>
-              <label className="mb-2 block system-sm-semibold text-text-secondary">
-                {t('feedback.content', { ns: 'common' }) || 'Feedback Content'}
-              </label>
-              <Textarea
-                value={feedbackContent}
-                onChange={e => setFeedbackContent(e.target.value)}
-                placeholder={t('feedback.placeholder', { ns: 'common' }) || 'Please describe what went wrong or how we can improve...'}
-                rows={4}
-                className="w-full"
-              />
+          <DialogContent
+            backdropProps={{ forceRender: true }}
+            className="p-0"
+          >
+            <div className="flex max-h-[80dvh] flex-col">
+              <div className="relative shrink-0 p-6 pr-14 pb-3">
+                <DialogTitle className="title-2xl-semi-bold text-text-primary">
+                  {t('feedback.title', { ns: 'common' }) || 'Provide Feedback'}
+                </DialogTitle>
+                <DialogDescription className="mt-1 system-xs-regular text-text-tertiary">
+                  {t('feedback.subtitle', { ns: 'common' }) || 'Please tell us what went wrong with this response'}
+                </DialogDescription>
+                <DialogCloseButton className="top-5 right-5 h-8 w-8 rounded-lg" />
+              </div>
+              <div className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
+                <label htmlFor={feedbackTextareaId} className="mb-2 block system-sm-semibold text-text-secondary">
+                  {t('feedback.content', { ns: 'common' }) || 'Feedback Content'}
+                </label>
+                <Textarea
+                  id={feedbackTextareaId}
+                  name="feedback-content"
+                  value={feedbackContent}
+                  onChange={e => setFeedbackContent(e.target.value)}
+                  placeholder={t('feedback.placeholder', { ns: 'common' }) || 'Please describe what went wrong or how we can improve…'}
+                  rows={4}
+                  className="w-full"
+                />
+              </div>
+              <div className="flex shrink-0 justify-end p-6 pt-5">
+                <Button onClick={handleFeedbackCancel}>
+                  {t('operation.cancel', { ns: 'common' }) || 'Cancel'}
+                </Button>
+                <Button
+                  className="ml-2"
+                  variant="primary"
+                  onClick={handleFeedbackSubmit}
+                >
+                  {t('operation.submit', { ns: 'common' }) || 'Submit'}
+                </Button>
+              </div>
             </div>
-          </div>
-        </Modal>
+          </DialogContent>
+        </Dialog>
       )}
     </>
   )
diff --git a/web/app/components/base/chat/chat/citation/progress-tooltip.tsx b/web/app/components/base/chat/chat/citation/progress-tooltip.tsx
index fd75c2f3b0..75211b706e 100644
--- a/web/app/components/base/chat/chat/citation/progress-tooltip.tsx
+++ b/web/app/components/base/chat/chat/citation/progress-tooltip.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@langgenius/dify-ui/tooltip'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 
 type ProgressTooltipProps = {
   data: number
@@ -18,35 +18,41 @@ const ProgressTooltip: FC<ProgressTooltipProps> = ({
   const [open, setOpen] = useState(false)
 
   return (
-    <PortalToFollowElem
+    <Tooltip
       open={open}
       onOpenChange={setOpen}
-      placement="top-start"
     >
-      <PortalToFollowElemTrigger
-        onMouseEnter={() => setOpen(true)}
-        onMouseLeave={() => setOpen(false)}
+      <TooltipTrigger
+        render={(
+          <div
+            data-testid="progress-trigger-content"
+            className="flex grow items-center"
+            onMouseEnter={() => setOpen(true)}
+            onMouseLeave={() => setOpen(false)}
+          />
+        )}
       >
-        <div data-testid="progress-trigger-content" className="flex grow items-center">
-          <div className="mr-1 h-1.5 w-16 overflow-hidden rounded-[3px] border border-components-progress-gray-border">
-            <div
-              data-testid="progress-bar-fill"
-              className="h-full bg-components-progress-gray-progress"
-              style={{ width: `${data * 100}%` }}
-            >
-            </div>
+        <div className="mr-1 h-1.5 w-16 overflow-hidden rounded-[3px] border border-components-progress-gray-border">
+          <div
+            data-testid="progress-bar-fill"
+            className="h-full bg-components-progress-gray-progress"
+            style={{ width: `${data * 100}%` }}
+          >
           </div>
-          {data}
         </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent style={{ zIndex: 1001 }}>
-        <div data-testid="progress-tooltip-popup" className="rounded-lg bg-components-tooltip-bg p-3 system-xs-medium text-text-quaternary shadow-lg">
-          {t('chat.citation.hitScore', { ns: 'common' })}
-          {' '}
-          {data}
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+        {data}
+      </TooltipTrigger>
+      <TooltipContent
+        data-testid="progress-tooltip-popup"
+        placement="top-start"
+        sideOffset={0}
+        className="rounded-lg bg-components-tooltip-bg p-3 system-xs-medium text-text-quaternary shadow-lg"
+      >
+        {t('chat.citation.hitScore', { ns: 'common' })}
+        {' '}
+        {data}
+      </TooltipContent>
+    </Tooltip>
   )
 }
 
diff --git a/web/app/components/base/chat/chat/citation/tooltip.tsx b/web/app/components/base/chat/chat/citation/tooltip.tsx
index 16e122bc04..e1d76a9383 100644
--- a/web/app/components/base/chat/chat/citation/tooltip.tsx
+++ b/web/app/components/base/chat/chat/citation/tooltip.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react'
+import {
+  Tooltip as DifyTooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@langgenius/dify-ui/tooltip'
 import * as React from 'react'
 import { useState } from 'react'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 
 type TooltipProps = {
   data: number | string
@@ -21,28 +21,34 @@ const Tooltip: FC<TooltipProps> = ({
   const [open, setOpen] = useState(false)
 
   return (
-    <PortalToFollowElem
+    <DifyTooltip
       open={open}
       onOpenChange={setOpen}
-      placement="top-start"
     >
-      <PortalToFollowElemTrigger
-        onMouseEnter={() => setOpen(true)}
-        onMouseLeave={() => setOpen(false)}
+      <TooltipTrigger
+        render={(
+          <div
+            data-testid="tooltip-trigger-content"
+            className="mr-6 flex items-center"
+            onMouseEnter={() => setOpen(true)}
+            onMouseLeave={() => setOpen(false)}
+          />
+        )}
       >
-        <div data-testid="tooltip-trigger-content" className="mr-6 flex items-center">
-          {icon}
-          {data}
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent style={{ zIndex: 1001 }}>
-        <div data-testid="tooltip-popup" className="rounded-lg bg-components-tooltip-bg p-3 system-xs-medium text-text-quaternary shadow-lg">
-          {text}
-          {' '}
-          {data}
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+        {icon}
+        {data}
+      </TooltipTrigger>
+      <TooltipContent
+        data-testid="tooltip-popup"
+        placement="top-start"
+        sideOffset={0}
+        className="rounded-lg bg-components-tooltip-bg p-3 system-xs-medium text-text-quaternary shadow-lg"
+      >
+        {text}
+        {' '}
+        {data}
+      </TooltipContent>
+    </DifyTooltip>
   )
 }
 
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/view-form-dropdown.spec.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/view-form-dropdown.spec.tsx
index 8e0ddedbe7..4368228070 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/view-form-dropdown.spec.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/__tests__/view-form-dropdown.spec.tsx
@@ -7,7 +7,7 @@ vi.mock('../content', () => ({
   default: () => <div data-testid="mock-inputs-form-content" />,
 }))
 
-// Note: PortalToFollowElem is mocked globally in vitest.setup.ts
+// Note: Popover is mocked globally in vitest.setup.ts
 // to render children in the normal DOM flow when open is true.
 
 describe('ViewFormDropdown', () => {
diff --git a/web/app/components/base/chip/__tests__/index.spec.tsx b/web/app/components/base/chip/__tests__/index.spec.tsx
index ac3a68292c..40ecbb7a33 100644
--- a/web/app/components/base/chip/__tests__/index.spec.tsx
+++ b/web/app/components/base/chip/__tests__/index.spec.tsx
@@ -40,7 +40,7 @@ describe('Chip', () => {
 
   // Helper function to get the trigger element
   const getTrigger = (container: HTMLElement) => {
-    return container.querySelector('[data-state]')
+    return container.querySelector('[role="button"][aria-haspopup="menu"]') as HTMLElement | null
   }
 
   // Helper function to open dropdown panel
@@ -102,7 +102,7 @@ describe('Chip', () => {
 
       // When showLeftIcon is false, there should be no filter icon before the text
       const textElement = screen.getByText('All Items')
-      const parent = textElement.closest('div[data-state]')
+      const parent = textElement.closest('[role="button"]')
       const icons = parent?.querySelectorAll('svg')
 
       // Should only have the arrow icon, not the filter icon
@@ -142,20 +142,20 @@ describe('Chip', () => {
     it('should toggle dropdown panel on trigger click', () => {
       const { container } = renderChip()
 
-      // Initially closed - check data-state attribute
+      // Initially closed - check aria-expanded attribute
       const trigger = getTrigger(container)
-      expect(trigger)!.toHaveAttribute('data-state', 'closed')
+      expect(trigger)!.toHaveAttribute('aria-expanded', 'false')
 
       // Open panel
       openPanel(container)
-      expect(trigger)!.toHaveAttribute('data-state', 'open')
+      expect(trigger)!.toHaveAttribute('aria-expanded', 'true')
       // Panel items should be visible
       expect(screen.getAllByText('All Items').length).toBeGreaterThan(1)
 
       // Close panel
       if (trigger)
         fireEvent.click(trigger)
-      expect(trigger)!.toHaveAttribute('data-state', 'closed')
+      expect(trigger)!.toHaveAttribute('aria-expanded', 'false')
     })
 
     it('should close panel after selecting an item', () => {
@@ -163,14 +163,14 @@ describe('Chip', () => {
 
       openPanel(container)
       const trigger = getTrigger(container)
-      expect(trigger)!.toHaveAttribute('data-state', 'open')
+      expect(trigger)!.toHaveAttribute('aria-expanded', 'true')
 
       // Click on an item in the dropdown panel
       const activeItems = screen.getAllByText('Active')
       // The second one should be in the dropdown
       fireEvent.click(activeItems[activeItems.length - 1]!)
 
-      expect(trigger)!.toHaveAttribute('data-state', 'closed')
+      expect(trigger)!.toHaveAttribute('aria-expanded', 'false')
     })
   })
 
@@ -208,7 +208,7 @@ describe('Chip', () => {
       const { container } = renderChip({ value: 'active' })
 
       const trigger = getTrigger(container)
-      expect(trigger)!.toHaveAttribute('data-state', 'closed')
+      expect(trigger)!.toHaveAttribute('aria-expanded', 'false')
 
       // Find the close icon (last SVG) and click its parent
       const svgs = trigger?.querySelectorAll('svg')
@@ -220,7 +220,7 @@ describe('Chip', () => {
 
       // Panel should remain closed
       // Panel should remain closed
-      expect(trigger)!.toHaveAttribute('data-state', 'closed')
+      expect(trigger)!.toHaveAttribute('aria-expanded', 'false')
       expect(onClear).toHaveBeenCalledTimes(1)
     })
 
@@ -232,17 +232,17 @@ describe('Chip', () => {
       // Click 1: open
       if (trigger)
         fireEvent.click(trigger)
-      expect(trigger)!.toHaveAttribute('data-state', 'open')
+      expect(trigger)!.toHaveAttribute('aria-expanded', 'true')
 
       // Click 2: close
       if (trigger)
         fireEvent.click(trigger)
-      expect(trigger)!.toHaveAttribute('data-state', 'closed')
+      expect(trigger)!.toHaveAttribute('aria-expanded', 'false')
 
       // Click 3: open again
       if (trigger)
         fireEvent.click(trigger)
-      expect(trigger)!.toHaveAttribute('data-state', 'open')
+      expect(trigger)!.toHaveAttribute('aria-expanded', 'true')
     })
   })
 
@@ -285,10 +285,10 @@ describe('Chip', () => {
 
       // Closed by default
       // Closed by default
-      expect(trigger)!.toHaveAttribute('data-state', 'closed')
+      expect(trigger)!.toHaveAttribute('aria-expanded', 'false')
 
       openPanel(container)
-      expect(trigger)!.toHaveAttribute('data-state', 'open')
+      expect(trigger)!.toHaveAttribute('aria-expanded', 'true')
       // Items should be duplicated (once in trigger, once in panel)
       expect(screen.getAllByText('All Items').length).toBeGreaterThan(1)
     })
@@ -327,7 +327,7 @@ describe('Chip', () => {
       const { container } = renderChip({ items: [], value: '' })
 
       // Trigger should still render
-      const trigger = container.querySelector('[data-state]')
+      const trigger = getTrigger(container)
       expect(trigger)!.toBeInTheDocument()
     })
 
diff --git a/web/app/components/base/chip/index.tsx b/web/app/components/base/chip/index.tsx
index 50f4744b07..35ad48039b 100644
--- a/web/app/components/base/chip/index.tsx
+++ b/web/app/components/base/chip/index.tsx
@@ -1,12 +1,14 @@
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import { RiArrowDownSLine, RiCheckLine, RiCloseCircleFill, RiFilter3Line } from '@remixicon/react'
 import { useMemo, useState } from 'react'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 
 export type Item = {
   value: number | string
@@ -40,16 +42,14 @@ const Chip: FC<Props> = ({
   }, [items, value])
 
   return (
-    <PortalToFollowElem
+    <DropdownMenu
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-start"
-      offset={4}
     >
       <div className="relative">
-        <PortalToFollowElemTrigger
-          onClick={() => setOpen(v => !v)}
-          className="block"
+        <DropdownMenuTrigger
+          nativeButton={false}
+          render={<div className="block" />}
         >
           <div className={cn(
             'flex min-h-8 cursor-pointer items-center rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt',
@@ -84,28 +84,36 @@ const Chip: FC<Props> = ({
               </div>
             )}
           </div>
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className="z-1002">
-          <div className={cn('relative w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg', panelClassName)}>
-            <div className="max-h-72 overflow-auto p-1">
-              {items.map(item => (
-                <div
-                  key={item.value}
-                  className="flex cursor-pointer items-center gap-2 rounded-lg px-2 py-[6px] pl-3 hover:bg-state-base-hover"
-                  onClick={() => {
-                    onSelect(item)
-                    setOpen(false)
-                  }}
-                >
-                  <div title={item.name} className="grow truncate system-sm-medium text-text-secondary">{item.name}</div>
-                  {value === item.value && <RiCheckLine className="h-4 w-4 shrink-0 text-util-colors-blue-light-blue-light-600" />}
-                </div>
-              ))}
-            </div>
-          </div>
-        </PortalToFollowElemContent>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement="bottom-start"
+          sideOffset={4}
+          popupClassName={cn('relative w-[240px] rounded-xl border-[0.5px] bg-components-panel-bg-blur p-0', panelClassName)}
+        >
+          <DropdownMenuRadioGroup
+            value={value}
+            onValueChange={(nextValue) => {
+              const selected = items.find(item => item.value === nextValue)
+              if (selected)
+                onSelect(selected)
+            }}
+            className="max-h-72 overflow-auto p-1"
+          >
+            {items.map(item => (
+              <DropdownMenuRadioItem
+                key={item.value}
+                value={item.value}
+                closeOnClick
+                className="gap-2 rounded-lg px-2 py-[6px] pl-3"
+              >
+                <div title={item.name} className="grow truncate system-sm-medium text-text-secondary">{item.name}</div>
+                {value === item.value && <RiCheckLine className="h-4 w-4 shrink-0 text-util-colors-blue-light-blue-light-600" />}
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
       </div>
-    </PortalToFollowElem>
+    </DropdownMenu>
 
   )
 }
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 a4d1323e6a..8801fb62da 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
@@ -353,7 +353,9 @@ describe('BaseField', () => {
     expect(screen.getByText('This is a warning')).toBeInTheDocument()
   })
 
-  it('should render tooltip when provided', async () => {
+  it('should render infotip when tooltip content is provided', async () => {
+    const user = userEvent.setup()
+
     renderBaseField({
       formSchema: {
         type: FormTypeEnum.textInput,
@@ -366,8 +368,7 @@ describe('BaseField', () => {
 
     expect(screen.getByText('Info')).toBeInTheDocument()
 
-    const tooltipTrigger = screen.getByTestId('base-field-tooltip-trigger')
-    fireEvent.mouseEnter(tooltipTrigger)
+    await user.click(screen.getByRole('button', { name: 'Extra info' }))
 
     expect(screen.getByText('Extra info')).toBeInTheDocument()
   })
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 c425eee574..da76e1f96f 100644
--- a/web/app/components/base/form/components/base/base-field.tsx
+++ b/web/app/components/base/form/components/base/base-field.tsx
@@ -20,10 +20,10 @@ import {
 import { useTranslation } from 'react-i18next'
 import CheckboxList from '@/app/components/base/checkbox-list'
 import { FormItemValidateStatusEnum, FormTypeEnum } from '@/app/components/base/form/types'
+import { Infotip } from '@/app/components/base/infotip'
 import Input from '@/app/components/base/input'
 import Radio from '@/app/components/base/radio'
 import RadioE from '@/app/components/base/radio/ui'
-import Tooltip from '@/app/components/base/tooltip'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { useTriggerPluginDynamicOptions } from '@/service/use-triggers'
 
@@ -95,7 +95,7 @@ export type BaseFieldProps = {
   formSchema: FormSchema
   field: AnyFieldApi
   disabled?: boolean
-  onChange?: (field: string, value: any) => void
+  onChange?: (field: string, value: unknown) => void
   fieldState?: FieldState
 }
 
@@ -156,7 +156,7 @@ const BaseField = ({
   }, [options])
 
   const watchedValues = useStore(field.form.store, (s) => {
-    const result: Record<string, any> = {}
+    const result: Record<string, unknown> = {}
     for (const variable of watchedVariables)
       result[variable] = s.values[variable]
 
@@ -201,7 +201,7 @@ const BaseField = ({
     }))
   }, [dynamicOptionsData, renderI18nObject])
 
-  const handleChange = useCallback((value: any) => {
+  const handleChange = useCallback((value: unknown) => {
     field.handleChange(value)
     onChange?.(field.name, value)
   }, [field, onChange])
@@ -223,12 +223,10 @@ const BaseField = ({
               <span className="ml-1 text-text-destructive-secondary">*</span>
             )
           }
-          {tooltip && (
-            <Tooltip
-              triggerTestId="base-field-tooltip-trigger"
-              popupContent={<div className="w-[200px]">{translatedTooltip}</div>}
-              triggerClassName="ml-0.5 w-4 h-4"
-            />
+          {translatedTooltip && (
+            <Infotip aria-label={translatedTooltip} className="ml-0.5" popupClassName="w-[200px]">
+              {translatedTooltip}
+            </Infotip>
           )}
         </div>
         <div className={cn(inputContainerClassName)}>
diff --git a/web/app/components/base/modal/__tests__/modal.spec.tsx b/web/app/components/base/modal/__tests__/modal.spec.tsx
deleted file mode 100644
index 47a679c843..0000000000
--- a/web/app/components/base/modal/__tests__/modal.spec.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import Modal from '../modal'
-
-describe('Modal Component', () => {
-  const defaultProps = {
-    title: 'Test Modal',
-    onClose: vi.fn(),
-    onConfirm: vi.fn(),
-    onCancel: vi.fn(),
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  describe('Render', () => {
-    it('renders correctly with title and children', () => {
-      render(
-        <Modal {...defaultProps}>
-          <div data-testid="modal-child">Child Content</div>
-        </Modal>,
-      )
-
-      expect(screen.getByText('Test Modal')).toBeInTheDocument()
-      expect(screen.getByTestId('modal-child')).toBeInTheDocument()
-      expect(screen.getByText(/cancel/i)).toBeInTheDocument()
-      expect(screen.getByText(/save/i)).toBeInTheDocument()
-    })
-
-    it('renders subTitle when provided', () => {
-      render(<Modal {...defaultProps} subTitle="Test Subtitle" />)
-      expect(screen.getByText('Test Subtitle')).toBeInTheDocument()
-    })
-
-    it('renders and handles extra button', () => {
-      const onExtraClick = vi.fn()
-      render(
-        <Modal
-          {...defaultProps}
-          showExtraButton={true}
-          extraButtonText="Extra Action"
-          onExtraButtonClick={onExtraClick}
-        />,
-      )
-
-      const extraBtn = screen.getByText('Extra Action')
-      expect(extraBtn).toBeInTheDocument()
-      fireEvent.click(extraBtn)
-      expect(onExtraClick).toHaveBeenCalledTimes(1)
-    })
-
-    it('renders md size class and default extra button label', () => {
-      const { container } = render(
-        <Modal
-          {...defaultProps}
-          size="md"
-          showExtraButton={true}
-          onExtraButtonClick={vi.fn()}
-        />,
-      )
-
-      expect(screen.getByText(/remove/i)).toBeInTheDocument()
-      expect(container.querySelector('.w-\\[640px\\]')).toBeInTheDocument()
-    })
-
-    it('renders footerSlot and bottomSlot', () => {
-      render(
-        <Modal
-          {...defaultProps}
-          footerSlot={<div data-testid="footer-slot">Footer</div>}
-          bottomSlot={<div data-testid="bottom-slot">Bottom</div>}
-        />,
-      )
-
-      expect(screen.getByTestId('footer-slot')).toBeInTheDocument()
-      expect(screen.getByTestId('bottom-slot')).toBeInTheDocument()
-    })
-  })
-
-  describe('Interactions', () => {
-    it('calls onClose when close icon is clicked', () => {
-      render(<Modal {...defaultProps} />)
-      const closeIcon = screen.getByTestId('close-icon').parentElement
-      fireEvent.click(closeIcon!)
-      expect(defaultProps.onClose).toHaveBeenCalledTimes(1)
-    })
-
-    it('calls onConfirm when confirm button is clicked', () => {
-      render(<Modal {...defaultProps} confirmButtonText="Confirm Me" />)
-      fireEvent.click(screen.getByText(/confirm/i))
-      expect(defaultProps.onConfirm).toHaveBeenCalledTimes(1)
-    })
-
-    it('calls onCancel when cancel button is clicked', () => {
-      render(<Modal {...defaultProps} cancelButtonText="Cancel Me" />)
-      fireEvent.click(screen.getByText('Cancel Me'))
-      expect(defaultProps.onCancel).toHaveBeenCalledTimes(1)
-    })
-
-    it('handles clickOutsideNotClose logic', () => {
-      const onClose = vi.fn()
-      const { rerender } = render(<Modal {...defaultProps} onClose={onClose} clickOutsideNotClose={false} />)
-
-      fireEvent.click(screen.getByRole('tooltip'))
-      expect(onClose).toHaveBeenCalledTimes(1)
-
-      onClose.mockClear()
-      rerender(<Modal {...defaultProps} onClose={onClose} clickOutsideNotClose={true} />)
-      fireEvent.click(screen.getByRole('tooltip'))
-      expect(onClose).not.toHaveBeenCalled()
-    })
-
-    it('prevents propagation on internal container click', () => {
-      const onClose = vi.fn()
-      render(<Modal {...defaultProps} onClose={onClose} clickOutsideNotClose={false} />)
-      fireEvent.click(screen.getByText('Test Modal'))
-      expect(onClose).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('Props', () => {
-    it('disables buttons when disabled prop is true', () => {
-      render(<Modal {...defaultProps} disabled={true} />)
-      expect(screen.getByText(/cancel/i).closest('button')).toBeDisabled()
-      expect(screen.getByText(/save/i).closest('button')).toBeDisabled()
-    })
-  })
-})
diff --git a/web/app/components/base/modal/modal.stories.tsx b/web/app/components/base/modal/modal.stories.tsx
deleted file mode 100644
index 7093e82f2d..0000000000
--- a/web/app/components/base/modal/modal.stories.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { useEffect, useState } from 'react'
-import Modal from './modal'
-
-const meta = {
-  title: 'Base/Feedback/RichModal',
-  component: Modal,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Full-featured modal with header, subtitle, customizable footer buttons, and optional extra action.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      control: 'radio',
-      options: ['sm', 'md'],
-      description: 'Defines the panel width.',
-    },
-    title: {
-      control: 'text',
-      description: 'Primary heading text.',
-    },
-    subTitle: {
-      control: 'text',
-      description: 'Secondary text below the title.',
-    },
-    confirmButtonText: {
-      control: 'text',
-      description: 'Label for the confirm button.',
-    },
-    cancelButtonText: {
-      control: 'text',
-      description: 'Label for the cancel button.',
-    },
-    showExtraButton: {
-      control: 'boolean',
-      description: 'Whether to render the extra button.',
-    },
-    extraButtonText: {
-      control: 'text',
-      description: 'Label for the extra button.',
-    },
-    extraButtonVariant: {
-      control: 'select',
-      options: ['primary', 'secondary', 'secondary-accent', 'ghost', 'ghost-accent', 'tertiary'],
-      description: 'Visual style for the extra button.',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disables footer actions when true.',
-    },
-    footerSlot: {
-      control: false,
-    },
-    bottomSlot: {
-      control: false,
-    },
-    onClose: {
-      control: false,
-      description: 'Handler fired when the close icon or backdrop is clicked.',
-    },
-    onConfirm: {
-      control: false,
-      description: 'Handler fired when confirm is pressed.',
-    },
-    onCancel: {
-      control: false,
-      description: 'Handler fired when cancel is pressed.',
-    },
-    onExtraButtonClick: {
-      control: false,
-      description: 'Handler fired when the extra button is pressed.',
-    },
-    children: {
-      control: false,
-    },
-  },
-  args: {
-    size: 'sm',
-    title: 'Delete integration',
-    subTitle: 'Disabling this integration will revoke access tokens and webhooks.',
-    confirmButtonText: 'Delete integration',
-    cancelButtonText: 'Cancel',
-    showExtraButton: false,
-    extraButtonText: 'Disable temporarily',
-    extraButtonVariant: 'primary',
-    disabled: false,
-    onClose: () => console.log('Modal closed'),
-    onConfirm: () => console.log('Confirm pressed'),
-    onCancel: () => console.log('Cancel pressed'),
-    onExtraButtonClick: () => console.log('Extra button pressed'),
-  },
-} satisfies Meta<typeof Modal>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-type ModalProps = React.ComponentProps<typeof Modal>
-
-const ModalDemo = (props: ModalProps) => {
-  const [open, setOpen] = useState(false)
-
-  useEffect(() => {
-    if (props.disabled && open)
-      setOpen(false)
-  }, [props.disabled, open])
-
-  const {
-    onClose,
-    onConfirm,
-    onCancel,
-    onExtraButtonClick,
-    children,
-    ...rest
-  } = props
-
-  const handleClose = () => {
-    onClose?.()
-    setOpen(false)
-  }
-
-  const handleConfirm = () => {
-    onConfirm?.()
-    setOpen(false)
-  }
-
-  const handleCancel = () => {
-    onCancel?.()
-    setOpen(false)
-  }
-
-  const handleExtra = () => {
-    onExtraButtonClick?.()
-  }
-
-  return (
-    <div className="relative flex h-[480px] items-center justify-center bg-gray-100">
-      <button
-        className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
-        onClick={() => setOpen(true)}
-      >
-        Show rich modal
-      </button>
-
-      {open && (
-        <Modal
-          {...rest}
-          onClose={handleClose}
-          onConfirm={handleConfirm}
-          onCancel={handleCancel}
-          onExtraButtonClick={handleExtra}
-          children={children ?? (
-            <div className="space-y-4 text-sm text-gray-600">
-              <p>
-                Removing integrations immediately stops workflow automations related to this connection.
-                Make sure no scheduled jobs depend on this integration before proceeding.
-              </p>
-              <ul className="list-disc space-y-1 pl-4 text-xs text-gray-500">
-                <li>All API credentials issued by this integration will be revoked.</li>
-                <li>Historical logs remain accessible for auditing.</li>
-                <li>You can re-enable the integration later with fresh credentials.</li>
-              </ul>
-            </div>
-          )}
-        />
-      )}
-    </div>
-  )
-}
-
-export const Default: Story = {
-  render: args => <ModalDemo {...args} />,
-}
-
-export const WithExtraAction: Story = {
-  render: args => <ModalDemo {...args} />,
-  args: {
-    showExtraButton: true,
-    extraButtonVariant: 'secondary',
-    extraButtonText: 'Disable only',
-    footerSlot: (
-      <span className="text-xs text-gray-400">Last synced 5 minutes ago</span>
-    ),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Illustrates the optional extra button and footer slot for advanced workflows.',
-      },
-    },
-  },
-}
-
-export const MediumSized: Story = {
-  render: args => <ModalDemo {...args} />,
-  args: {
-    size: 'md',
-    subTitle: 'Use the larger width to surface forms with more fields or supporting descriptions.',
-    bottomSlot: (
-      <div className="border-t border-divider-subtle bg-components-panel-bg px-6 py-4 text-xs text-gray-500">
-        Need finer control? Configure automation rules in the integration settings page.
-      </div>
-    ),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Shows the medium sized panel and a populated `bottomSlot` for supplemental messaging.',
-      },
-    },
-  },
-}
diff --git a/web/app/components/base/modal/modal.tsx b/web/app/components/base/modal/modal.tsx
deleted file mode 100644
index 10164e5f33..0000000000
--- a/web/app/components/base/modal/modal.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * @deprecated Use `@langgenius/dify-ui/dialog` instead.
- * This component will be removed after migration is complete.
- * See: https://github.com/langgenius/dify/issues/32767
- */
-import type { ButtonProps } from '@langgenius/dify-ui/button'
-import { Button } from '@langgenius/dify-ui/button'
-import { cn } from '@langgenius/dify-ui/cn'
-import { noop } from 'es-toolkit/function'
-import { memo } from 'react'
-import { useTranslation } from 'react-i18next'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-} from '@/app/components/base/portal-to-follow-elem'
-
-type ModalProps = {
-  onClose?: () => void
-  size?: 'sm' | 'md'
-  title: string
-  subTitle?: string
-  children?: React.ReactNode
-  confirmButtonText?: string
-  onConfirm?: () => void
-  cancelButtonText?: string
-  onCancel?: () => void
-  showExtraButton?: boolean
-  extraButtonText?: string
-  extraButtonVariant?: ButtonProps['variant']
-  onExtraButtonClick?: () => void
-  footerSlot?: React.ReactNode
-  bottomSlot?: React.ReactNode
-  disabled?: boolean
-  containerClassName?: string
-  wrapperClassName?: string
-  clickOutsideNotClose?: boolean
-}
-const Modal = ({
-  onClose,
-  size = 'sm',
-  title,
-  subTitle,
-  children,
-  confirmButtonText,
-  onConfirm,
-  cancelButtonText,
-  onCancel,
-  showExtraButton,
-  extraButtonVariant = 'primary',
-  extraButtonText,
-  onExtraButtonClick,
-  footerSlot,
-  bottomSlot,
-  disabled,
-  containerClassName,
-  wrapperClassName,
-  clickOutsideNotClose = false,
-}: ModalProps) => {
-  const { t } = useTranslation()
-
-  return (
-    <PortalToFollowElem open>
-      <PortalToFollowElemContent
-        className={cn('z-9998 flex h-full w-full items-center justify-center bg-background-overlay', wrapperClassName)}
-        onClick={clickOutsideNotClose ? noop : onClose}
-      >
-        <div
-          className={cn(
-            'flex max-h-[80%] flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs',
-            size === 'sm' && 'w-[480px]',
-            size === 'md' && 'w-[640px]',
-            containerClassName,
-          )}
-          onClick={e => e.stopPropagation()}
-        >
-          <div className="relative shrink-0 p-6 pr-14 pb-3 title-2xl-semi-bold text-text-primary">
-            {title}
-            {
-              subTitle && (
-                <div className="mt-1 system-xs-regular text-text-tertiary">
-                  {subTitle}
-                </div>
-              )
-            }
-            <div
-              className="absolute top-5 right-5 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg"
-              onClick={onClose}
-            >
-              <span className="i-ri-close-line h-5 w-5 text-text-tertiary" data-testid="close-icon" />
-            </div>
-          </div>
-          {
-            !!children && (
-              <div className="min-h-0 flex-1 overflow-y-auto px-6 py-3">{children}</div>
-            )
-          }
-          <div className="flex shrink-0 justify-between p-6 pt-5">
-            <div>
-              {footerSlot}
-            </div>
-            <div className="flex items-center">
-              {
-                showExtraButton && (
-                  <>
-                    <Button
-                      variant={extraButtonVariant}
-                      onClick={onExtraButtonClick}
-                      disabled={disabled}
-                    >
-                      {extraButtonText || t('operation.remove', { ns: 'common' })}
-                    </Button>
-                    <div className="mx-3 h-4 w-px bg-divider-regular"></div>
-                  </>
-                )
-              }
-              <Button
-                onClick={onCancel}
-                disabled={disabled}
-              >
-                {cancelButtonText || t('operation.cancel', { ns: 'common' })}
-              </Button>
-              <Button
-                className="ml-2"
-                variant="primary"
-                onClick={onConfirm}
-                disabled={disabled}
-              >
-                {confirmButtonText || t('operation.save', { ns: 'common' })}
-              </Button>
-            </div>
-          </div>
-          {!!bottomSlot && (
-            <div className="shrink-0">
-              {bottomSlot}
-            </div>
-          )}
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
-  )
-}
-
-export default memo(Modal)
diff --git a/web/app/components/base/portal-to-follow-elem/__tests__/index.spec.tsx b/web/app/components/base/portal-to-follow-elem/__tests__/index.spec.tsx
deleted file mode 100644
index 3c1b09d947..0000000000
--- a/web/app/components/base/portal-to-follow-elem/__tests__/index.spec.tsx
+++ /dev/null
@@ -1,230 +0,0 @@
-import { cleanup, fireEvent, render } from '@testing-library/react'
-import * as React from 'react'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '..'
-
-type MockFloatingData = {
-  middlewareData?: {
-    hide?: {
-      referenceHidden?: boolean
-    }
-  }
-}
-
-let mockFloatingData: MockFloatingData = {}
-const useFloatingMock = vi.fn()
-
-vi.mock('@floating-ui/react', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@floating-ui/react')>()
-  return {
-    ...actual,
-    useFloating: (options: unknown) => {
-      useFloatingMock(options)
-      const data = actual.useFloating(options as Parameters<typeof actual.useFloating>[0])
-      return {
-        ...data,
-        ...mockFloatingData,
-        middlewareData: {
-          ...data.middlewareData,
-          ...mockFloatingData.middlewareData,
-        },
-      }
-    },
-  }
-})
-
-afterEach(cleanup)
-
-describe('PortalToFollowElem', () => {
-  describe('Context and Provider', () => {
-    it('should throw error when using context outside provider', () => {
-      // Suppress console.error for this test
-      const originalError = console.error
-      console.error = vi.fn()
-
-      expect(() => {
-        render(
-          <PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>,
-        )
-      }).toThrow('PortalToFollowElem components must be wrapped in <PortalToFollowElem />')
-
-      console.error = originalError
-    })
-
-    it('should not throw when used within provider', () => {
-      expect(() => {
-        render(
-          <PortalToFollowElem>
-            <PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>
-          </PortalToFollowElem>,
-        )
-      }).not.toThrow()
-    })
-  })
-
-  describe('PortalToFollowElemTrigger', () => {
-    it('should render children correctly', () => {
-      const { getByText } = render(
-        <PortalToFollowElem>
-          <PortalToFollowElemTrigger>Trigger Text</PortalToFollowElemTrigger>
-        </PortalToFollowElem>,
-      )
-      expect(getByText('Trigger Text'))!.toBeInTheDocument()
-    })
-
-    it('should handle asChild prop correctly', () => {
-      const { getByRole } = render(
-        <PortalToFollowElem>
-          <PortalToFollowElemTrigger asChild>
-            <button>Button Trigger</button>
-          </PortalToFollowElemTrigger>
-        </PortalToFollowElem>,
-      )
-
-      expect(getByRole('button'))!.toHaveTextContent('Button Trigger')
-    })
-  })
-
-  describe('PortalToFollowElemContent', () => {
-    it('should not render content when closed', () => {
-      const { queryByText } = render(
-        <PortalToFollowElem open={false}>
-          <PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>
-          <PortalToFollowElemContent>Popup Content</PortalToFollowElemContent>
-        </PortalToFollowElem>,
-      )
-
-      expect(queryByText('Popup Content')).not.toBeInTheDocument()
-    })
-
-    it('should render content when open', () => {
-      const { getByText } = render(
-        <PortalToFollowElem open={true}>
-          <PortalToFollowElemTrigger>Trigger </PortalToFollowElemTrigger>
-          <PortalToFollowElemContent>Popup Content</PortalToFollowElemContent>
-        </PortalToFollowElem>,
-      )
-
-      expect(getByText('Popup Content'))!.toBeInTheDocument()
-    })
-  })
-
-  describe('Controlled behavior', () => {
-    it('should call onOpenChange when interaction happens', () => {
-      const handleOpenChange = vi.fn()
-
-      const { getByText } = render(
-        <PortalToFollowElem onOpenChange={handleOpenChange}>
-          <PortalToFollowElemTrigger>Hover Me</PortalToFollowElemTrigger>
-          <PortalToFollowElemContent>Content</PortalToFollowElemContent>
-        </PortalToFollowElem>,
-      )
-
-      fireEvent.mouseEnter(getByText('Hover Me'))
-      expect(handleOpenChange).toHaveBeenCalled()
-
-      fireEvent.mouseLeave(getByText('Hover Me'))
-      expect(handleOpenChange).toHaveBeenCalled()
-    })
-  })
-
-  describe('Configuration options', () => {
-    it('should accept placement prop', () => {
-      render(
-        <PortalToFollowElem placement="top-start">
-          <PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>
-        </PortalToFollowElem>,
-      )
-
-      expect(useFloatingMock).toHaveBeenCalledWith(
-        expect.objectContaining({
-          placement: 'top-start',
-        }),
-      )
-    })
-
-    it('should handle triggerPopupSameWidth prop', () => {
-      render(
-        <PortalToFollowElem triggerPopupSameWidth>
-          <PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>
-          <PortalToFollowElemContent>Content</PortalToFollowElemContent>
-        </PortalToFollowElem>,
-      )
-
-      type SizeMiddleware = {
-        name: 'size'
-        options: [{
-          apply: (args: {
-            elements: { floating: { style: Record<string, string> } }
-            rects: { reference: { width: number } }
-            availableHeight: number
-          }) => void
-        }]
-      }
-
-      const sizeMiddleware = useFloatingMock.mock.calls[0]![0].middleware.find(
-        (m: { name: string }) => m.name === 'size',
-      ) as SizeMiddleware
-      expect(sizeMiddleware).toBeDefined()
-
-      // Manually trigger the apply function to cover line 81-82
-      const mockElements = {
-        floating: { style: {} as Record<string, string> },
-      }
-      const mockRects = {
-        reference: { width: 100 },
-      }
-      sizeMiddleware.options[0].apply({
-        elements: mockElements,
-        rects: mockRects,
-        availableHeight: 500,
-      })
-
-      expect(mockElements.floating.style.width).toBe('100px')
-      expect(mockElements.floating.style.maxHeight).toBe('500px')
-    })
-  })
-
-  describe('PortalToFollowElemTrigger asChild', () => {
-    it('should render correct data-state when open', () => {
-      const { getByRole } = render(
-        <PortalToFollowElem open={true}>
-          <PortalToFollowElemTrigger asChild>
-            <button>Trigger</button>
-          </PortalToFollowElemTrigger>
-        </PortalToFollowElem>,
-      )
-      expect(getByRole('button'))!.toHaveAttribute('data-state', 'open')
-    })
-
-    it('should handle missing ref on child', () => {
-      const { getByRole } = render(
-        <PortalToFollowElem>
-          <PortalToFollowElemTrigger asChild>
-            <button>Trigger</button>
-          </PortalToFollowElemTrigger>
-        </PortalToFollowElem>,
-      )
-      expect(getByRole('button'))!.toBeInTheDocument()
-    })
-  })
-
-  describe('Visibility', () => {
-    it('should hide content when reference is hidden', () => {
-      mockFloatingData = {
-        middlewareData: {
-          hide: { referenceHidden: true },
-        },
-      }
-
-      const { getByTestId } = render(
-        <PortalToFollowElem open={true}>
-          <PortalToFollowElemTrigger>Trigger</PortalToFollowElemTrigger>
-          <PortalToFollowElemContent data-testid="content">Hidden Content</PortalToFollowElemContent>
-        </PortalToFollowElem>,
-      )
-
-      expect(getByTestId('content'))!.toHaveStyle('visibility: hidden')
-      mockFloatingData = {}
-    })
-  })
-})
diff --git a/web/app/components/base/portal-to-follow-elem/index.stories.tsx b/web/app/components/base/portal-to-follow-elem/index.stories.tsx
deleted file mode 100644
index 8f0fc48921..0000000000
--- a/web/app/components/base/portal-to-follow-elem/index.stories.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { useState } from 'react'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '.'
-
-const TooltipCard = ({ title, description }: { title: string, description: string }) => (
-  <div className="w-[220px] rounded-lg border border-divider-subtle bg-components-panel-bg px-3 py-2 text-sm text-text-secondary shadow-lg">
-    <div className="mb-1 text-xs font-semibold tracking-[0.14em] text-text-tertiary uppercase">
-      {title}
-    </div>
-    <p className="leading-5">{description}</p>
-  </div>
-)
-
-const PortalDemo = ({
-  placement = 'bottom',
-  triggerPopupSameWidth = false,
-}: {
-  placement?: Parameters<typeof PortalToFollowElem>[0]['placement']
-  triggerPopupSameWidth?: boolean
-}) => {
-  const [controlledOpen, setControlledOpen] = useState(false)
-
-  return (
-    <div className="flex w-full max-w-3xl flex-col gap-6 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
-      <div className="flex flex-wrap items-center gap-4">
-        <PortalToFollowElem placement={placement} triggerPopupSameWidth={triggerPopupSameWidth}>
-          <PortalToFollowElemTrigger className="rounded-md border border-divider-subtle bg-background-default px-3 py-2 text-sm text-text-secondary">
-            Hover me
-          </PortalToFollowElemTrigger>
-          <PortalToFollowElemContent className="z-40">
-            <TooltipCard
-              title="Auto follow"
-              description="The floating element repositions itself when the trigger moves, using Floating UI under the hood."
-            />
-          </PortalToFollowElemContent>
-        </PortalToFollowElem>
-
-        <PortalToFollowElem
-          placement="bottom-start"
-          triggerPopupSameWidth
-          open={controlledOpen}
-          onOpenChange={setControlledOpen}
-        >
-          <PortalToFollowElemTrigger asChild>
-            <button
-              type="button"
-              className="rounded-md border border-divider-subtle bg-background-default-subtle px-3 py-2 text-sm font-medium text-text-secondary hover:bg-state-base-hover"
-              onClick={() => setControlledOpen(prev => !prev)}
-            >
-              Controlled toggle
-            </button>
-          </PortalToFollowElemTrigger>
-          <PortalToFollowElemContent className="z-40">
-            <TooltipCard
-              title="Controlled"
-              description="This panel uses the controlled API via onOpenChange/open props, and matches the trigger width."
-            />
-          </PortalToFollowElemContent>
-        </PortalToFollowElem>
-      </div>
-    </div>
-  )
-}
-
-const meta = {
-  title: 'Base/Feedback/PortalToFollowElem',
-  component: PortalDemo,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'Floating UI based portal that tracks trigger positioning. Demonstrates both hover-driven and controlled usage.',
-      },
-    },
-  },
-  argTypes: {
-    placement: {
-      control: 'select',
-      options: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'],
-    },
-    triggerPopupSameWidth: { control: 'boolean' },
-  },
-  args: {
-    placement: 'bottom',
-    triggerPopupSameWidth: false,
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof PortalDemo>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = {}
-
-export const SameWidthPanel: Story = {
-  args: {
-    triggerPopupSameWidth: true,
-  },
-}
diff --git a/web/app/components/base/portal-to-follow-elem/index.tsx b/web/app/components/base/portal-to-follow-elem/index.tsx
deleted file mode 100644
index 866f22bcc5..0000000000
--- a/web/app/components/base/portal-to-follow-elem/index.tsx
+++ /dev/null
@@ -1,218 +0,0 @@
-'use client'
-/**
- * @deprecated Use semantic overlay primitives from `@langgenius/dify-ui/*` instead.
- * This component will be removed after migration is complete.
- * See: https://github.com/langgenius/dify/issues/32767
- *
- * Migration guide:
- * - Tooltip → `@langgenius/dify-ui/tooltip`
- * - Menu/Dropdown → `@langgenius/dify-ui/dropdown-menu`
- * - Popover → `@langgenius/dify-ui/popover`
- * - Dialog/Modal → `@langgenius/dify-ui/dialog`
- * - Select → `@langgenius/dify-ui/select`
- */
-import type { OffsetOptions, Placement } from '@floating-ui/react'
-import {
-  autoUpdate,
-  flip,
-  FloatingPortal,
-  offset,
-  shift,
-  size,
-  useDismiss,
-  useFloating,
-  useFocus,
-  useHover,
-  useInteractions,
-  useMergeRefs,
-  useRole,
-} from '@floating-ui/react'
-
-import { cn } from '@langgenius/dify-ui/cn'
-import * as React from 'react'
-import { useCallback, useState } from 'react'
-
-type PortalToFollowElemOptions = {
-  /*
-  * top, bottom, left, right
-  * start, end. Default is middle
-  * combine: top-start, top-end
-  */
-  placement?: Placement
-  open?: boolean
-  offset?: number | OffsetOptions
-  onOpenChange?: (open: boolean) => void
-  triggerPopupSameWidth?: boolean
-}
-
-/** @deprecated Use semantic overlay primitives instead. See #32767. */
-function usePortalToFollowElem({
-  placement = 'bottom',
-  open: controlledOpen,
-  offset: offsetValue = 0,
-  onOpenChange: setControlledOpen,
-  triggerPopupSameWidth,
-}: PortalToFollowElemOptions = {}) {
-  const [localOpen, setLocalOpen] = useState(false)
-  const open = controlledOpen ?? localOpen
-  const handleOpenChange = useCallback((newOpen: boolean) => {
-    setLocalOpen(newOpen)
-    setControlledOpen?.(newOpen)
-  }, [setControlledOpen, setLocalOpen])
-
-  const data = useFloating({
-    placement,
-    open,
-    onOpenChange: handleOpenChange,
-    whileElementsMounted: autoUpdate,
-    middleware: [
-      offset(offsetValue),
-      flip({
-        crossAxis: placement.includes('-'),
-        fallbackAxisSideDirection: 'start',
-        padding: 5,
-      }),
-      shift({ padding: 5 }),
-      size({
-        apply({ rects, elements, availableHeight }) {
-          Object.assign(elements.floating.style, {
-            maxHeight: `${Math.max(0, availableHeight)}px`,
-            overflowY: 'auto',
-            ...(triggerPopupSameWidth && { width: `${rects.reference.width}px` }),
-          })
-        },
-      }),
-    ],
-  })
-
-  const context = data.context
-
-  const hover = useHover(context, {
-    move: false,
-    enabled: controlledOpen === undefined,
-  })
-  const focus = useFocus(context, {
-    enabled: controlledOpen === undefined,
-  })
-  const dismiss = useDismiss(context)
-  const role = useRole(context, { role: 'tooltip' })
-
-  const interactions = useInteractions([hover, focus, dismiss, role])
-
-  return React.useMemo(
-    () => ({
-      open,
-      setOpen: handleOpenChange,
-      ...interactions,
-      ...data,
-    }),
-    [open, handleOpenChange, interactions, data],
-  )
-}
-
-type ContextType = ReturnType<typeof usePortalToFollowElem> | null
-
-const PortalToFollowElemContext = React.createContext<ContextType>(null)
-
-function usePortalToFollowElemContext() {
-  const context = React.useContext(PortalToFollowElemContext)
-
-  if (context == null)
-    throw new Error('PortalToFollowElem components must be wrapped in <PortalToFollowElem />')
-
-  return context
-}
-
-/** @deprecated Use semantic overlay primitives instead. See #32767. */
-export function PortalToFollowElem({
-  children,
-  ...options
-}: { children: React.ReactNode } & PortalToFollowElemOptions) {
-  // This can accept any props as options, e.g. `placement`,
-  // or other positioning options.
-  const tooltip = usePortalToFollowElem(options)
-  return (
-    <PortalToFollowElemContext.Provider value={tooltip}>
-      {children}
-    </PortalToFollowElemContext.Provider>
-  )
-}
-
-/** @deprecated Use semantic overlay primitives instead. See #32767. */
-export const PortalToFollowElemTrigger = (
-  {
-    ref: propRef,
-    children,
-    asChild = false,
-    ...props
-  }: React.HTMLProps<HTMLElement> & { ref?: React.RefObject<HTMLElement | null>, asChild?: boolean },
-) => {
-  const context = usePortalToFollowElemContext()
-  const childElement = React.isValidElement<{ ref?: React.Ref<HTMLElement | null> }>(children)
-    ? children
-    : null
-  const childrenRef = childElement?.props.ref
-  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef])
-
-  // `asChild` allows the user to pass any element as the anchor
-  if (asChild && childElement) {
-    const childProps = (childElement.props ?? {}) as Record<string, unknown>
-    return React.cloneElement(
-      childElement,
-      context.getReferenceProps({
-        ref,
-        ...props,
-        ...childProps,
-        'data-state': context.open ? 'open' : 'closed',
-      } as React.HTMLProps<HTMLElement>),
-    )
-  }
-
-  return (
-    <div
-      ref={ref}
-      className={cn('inline-block', props.className)}
-      // The user can style the trigger based on the state
-      data-state={context.open ? 'open' : 'closed'}
-      {...context.getReferenceProps(props)}
-    >
-      {children}
-    </div>
-  )
-}
-PortalToFollowElemTrigger.displayName = 'PortalToFollowElemTrigger'
-
-/** @deprecated Use semantic overlay primitives instead. See #32767. */
-export const PortalToFollowElemContent = (
-  {
-    ref: propRef,
-    style,
-    ...props
-  }: React.HTMLProps<HTMLDivElement> & {
-    ref?: React.RefObject<HTMLDivElement | null>
-  },
-) => {
-  const context = usePortalToFollowElemContext()
-  const ref = useMergeRefs([context.refs.setFloating, propRef])
-
-  if (!context.open)
-    return null
-
-  const body = document.body
-
-  return (
-    <FloatingPortal root={body}>
-      <div
-        ref={ref}
-        style={{
-          ...context.floatingStyles,
-          ...style,
-          visibility: context.middlewareData.hide?.referenceHidden ? 'hidden' : 'visible',
-        }}
-        {...context.getFloatingProps(props)}
-      />
-    </FloatingPortal>
-  )
-}
-
-PortalToFollowElemContent.displayName = 'PortalToFollowElemContent'
diff --git a/web/app/components/base/sort/__tests__/index.spec.tsx b/web/app/components/base/sort/__tests__/index.spec.tsx
index e51ec23805..18dfd242ce 100644
--- a/web/app/components/base/sort/__tests__/index.spec.tsx
+++ b/web/app/components/base/sort/__tests__/index.spec.tsx
@@ -20,9 +20,7 @@ describe('Sort component — real portal integration', () => {
 
     // helper: returns a non-null HTMLElement or throws with a clear message
     const getTriggerWrapper = (): HTMLElement => {
-      const labelNode = screen.getByText('appLog.filter.sortBy')
-      // try to find a reasonable wrapper element; prefer '.block' but fallback to any ancestor div
-      const wrapper = labelNode.closest('.block') ?? labelNode.closest('div')
+      const wrapper = screen.getByRole('button', { name: /appLog\.filter\.sortBy/i })
       if (!wrapper)
         throw new Error('Trigger wrapper element not found for "Sort by" label')
       return wrapper as HTMLElement
@@ -49,32 +47,30 @@ describe('Sort component — real portal integration', () => {
     expect(sortButton.querySelector('svg')).toBeInTheDocument()
   })
 
-  it('opens and closes the tooltip (portal mounts to document.body)', async () => {
+  it('opens and closes the menu', async () => {
     const { user, getTriggerWrapper } = setup()
 
     await user.click(getTriggerWrapper())
-    const tooltip = await screen.findByRole('tooltip')
-    expect(tooltip).toBeInTheDocument()
-    expect(document.body.contains(tooltip)).toBe(true)
+    expect(await screen.findByText('Name')).toBeInTheDocument()
 
     // clicking the trigger again should close it
     await user.click(getTriggerWrapper())
-    await waitFor(() => expect(screen.queryByRole('tooltip')).not.toBeInTheDocument())
+    await waitFor(() => expect(screen.queryByText('Name')).not.toBeInTheDocument())
   })
 
   it('renders options and calls onSelect with descending prefix when order is "-"', async () => {
     const { user, onSelect, getTriggerWrapper } = setup({ order: '-' })
 
     await user.click(getTriggerWrapper())
-    const tooltip = await screen.findByRole('tooltip')
+    await screen.findByText('Name')
 
     mockItems.forEach((item) => {
-      expect(within(tooltip).getByText(item.name)).toBeInTheDocument()
+      expect(within(document.body).getAllByText(item.name).length).toBeGreaterThan(0)
     })
 
-    await user.click(within(tooltip).getByText('Name'))
+    await user.click(screen.getByText('Name'))
     expect(onSelect).toHaveBeenCalledWith('-name')
-    await waitFor(() => expect(screen.queryByRole('tooltip')).not.toBeInTheDocument())
+    await waitFor(() => expect(screen.queryByText('Name')).not.toBeInTheDocument())
   })
 
   it('toggles sorting order: ascending -> descending via right-side button', async () => {
@@ -93,10 +89,10 @@ describe('Sort component — real portal integration', () => {
     const { user, getTriggerWrapper } = setup({ value: 'status' })
 
     await user.click(getTriggerWrapper())
-    const tooltip = await screen.findByRole('tooltip')
+    await screen.findByText('Name')
 
-    const statusRow = within(tooltip).getByText('Status').closest('.flex')
-    const nameRow = within(tooltip).getByText('Name').closest('.flex')
+    const statusRow = screen.getAllByText('Status').at(-1)?.closest('.flex')
+    const nameRow = screen.getByText('Name').closest('.flex')
 
     if (!statusRow)
       throw new Error('Status option row not found in menu')
@@ -120,9 +116,9 @@ describe('Sort component — real portal integration', () => {
     const { user, onSelect, getTriggerWrapper } = setup({ order: undefined })
 
     await user.click(getTriggerWrapper())
-    const tooltip = await screen.findByRole('tooltip')
+    await screen.findByText('Name')
 
-    await user.click(within(tooltip).getByText('Name'))
+    await user.click(screen.getByText('Name'))
 
     expect(onSelect).toHaveBeenCalled()
     expect(onSelect).toHaveBeenCalledWith(expect.stringMatching(/name$/))
@@ -131,11 +127,10 @@ describe('Sort component — real portal integration', () => {
   it('clicking outside the open menu closes the portal', async () => {
     const { user, getTriggerWrapper } = setup()
     await user.click(getTriggerWrapper())
-    const tooltip = await screen.findByRole('tooltip')
-    expect(tooltip).toBeInTheDocument()
+    expect(await screen.findByText('Name')).toBeInTheDocument()
 
     // click outside: body click should close the tooltip
     await user.click(document.body)
-    await waitFor(() => expect(screen.queryByRole('tooltip')).not.toBeInTheDocument())
+    await waitFor(() => expect(screen.queryByText('Name')).not.toBeInTheDocument())
   })
 })
diff --git a/web/app/components/base/sort/index.tsx b/web/app/components/base/sort/index.tsx
index ef9aebb0d7..69cf4dd220 100644
--- a/web/app/components/base/sort/index.tsx
+++ b/web/app/components/base/sort/index.tsx
@@ -1,13 +1,15 @@
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import { RiArrowDownSLine, RiCheckLine, RiSortAsc, RiSortDesc } from '@remixicon/react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 
 type Item = {
   value: number | string
@@ -35,16 +37,14 @@ const Sort: FC<Props> = ({
 
   return (
     <div className="inline-flex items-center">
-      <PortalToFollowElem
+      <DropdownMenu
         open={open}
         onOpenChange={setOpen}
-        placement="bottom-start"
-        offset={4}
       >
         <div className="relative">
-          <PortalToFollowElemTrigger
-            onClick={() => setOpen(v => !v)}
-            className="block"
+          <DropdownMenuTrigger
+            nativeButton={false}
+            render={<div className="block" />}
           >
             <div className={cn(
               'flex min-h-8 cursor-pointer items-center rounded-l-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt',
@@ -59,28 +59,32 @@ const Sort: FC<Props> = ({
               </div>
               <RiArrowDownSLine className="h-4 w-4 text-text-tertiary" />
             </div>
-          </PortalToFollowElemTrigger>
-          <PortalToFollowElemContent className="z-1002">
-            <div className="relative w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg">
-              <div className="max-h-72 overflow-auto p-1">
-                {items.map(item => (
-                  <div
-                    key={item.value}
-                    className="flex cursor-pointer items-center gap-2 rounded-lg px-2 py-[6px] pl-3 hover:bg-state-base-hover"
-                    onClick={() => {
-                      onSelect(`${order}${item.value}`)
-                      setOpen(false)
-                    }}
-                  >
-                    <div title={item.name} className="grow truncate system-sm-medium text-text-secondary">{item.name}</div>
-                    {value === item.value && <RiCheckLine className="h-4 w-4 shrink-0 text-util-colors-blue-light-blue-light-600" />}
-                  </div>
-                ))}
-              </div>
-            </div>
-          </PortalToFollowElemContent>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            placement="bottom-start"
+            sideOffset={4}
+            popupClassName="relative w-[240px] rounded-xl border-[0.5px] bg-components-panel-bg-blur p-0"
+          >
+            <DropdownMenuRadioGroup
+              value={value}
+              onValueChange={nextValue => onSelect(`${order}${nextValue}`)}
+              className="max-h-72 overflow-auto p-1"
+            >
+              {items.map(item => (
+                <DropdownMenuRadioItem
+                  key={item.value}
+                  value={item.value}
+                  closeOnClick
+                  className="gap-2 rounded-lg px-2 py-[6px] pl-3"
+                >
+                  <div title={item.name} className="grow truncate system-sm-medium text-text-secondary">{item.name}</div>
+                  {value === item.value && <RiCheckLine className="h-4 w-4 shrink-0 text-util-colors-blue-light-blue-light-600" />}
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
         </div>
-      </PortalToFollowElem>
+      </DropdownMenu>
       <div className="ml-px cursor-pointer rounded-r-lg bg-components-button-tertiary-bg p-2 hover:bg-components-button-tertiary-bg-hover" onClick={() => onSelect(`${order ? '' : '-'}${value}`)}>
         {!order && <RiSortAsc className="h-4 w-4 text-components-button-tertiary-text" />}
         {order && <RiSortDesc className="h-4 w-4 text-components-button-tertiary-text" />}
diff --git a/web/app/components/base/tooltip/index.tsx b/web/app/components/base/tooltip/index.tsx
index 0bf7659635..85c63cdeaf 100644
--- a/web/app/components/base/tooltip/index.tsx
+++ b/web/app/components/base/tooltip/index.tsx
@@ -1,19 +1,28 @@
 'use client'
+import type { Placement } from '@langgenius/dify-ui/popover'
 /**
  * @deprecated Use `@langgenius/dify-ui/tooltip` instead.
  * This component will be removed after migration is complete.
  * See: https://github.com/langgenius/dify/issues/32767
  */
-import type { OffsetOptions, Placement } from '@floating-ui/react'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
 import { RiQuestionLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import { tooltipManager } from './TooltipManager'
 
+type TooltipOffset = number | {
+  mainAxis?: number
+  crossAxis?: number
+}
+
 type TooltipProps = {
   position?: Placement
   triggerMethod?: 'hover' | 'click'
@@ -25,7 +34,7 @@ type TooltipProps = {
   popupClassName?: string
   portalContentClassName?: string
   noDecoration?: boolean
-  offset?: OffsetOptions
+  offset?: TooltipOffset
   needsDelay?: boolean
   asChild?: boolean
 }
@@ -46,6 +55,9 @@ const Tooltip: FC<TooltipProps> = ({
   needsDelay = true,
 }) => {
   const [open, setOpen] = useState(false)
+  const resolvedOffset = offset ?? 8
+  const sideOffset = typeof resolvedOffset === 'number' ? resolvedOffset : (resolvedOffset.mainAxis ?? 0)
+  const alignOffset = typeof resolvedOffset === 'number' ? 0 : (resolvedOffset.crossAxis ?? 0)
   const [isHoverPopup, {
     setTrue: setHoverPopup,
     setFalse: setNotHoverPopup,
@@ -81,6 +93,16 @@ const Tooltip: FC<TooltipProps> = ({
   }, [clearCloseTimeout])
 
   const close = () => setOpen(false)
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (disabled) {
+      setOpen(false)
+      return
+    }
+    if (triggerMethod === 'click')
+      setOpen(nextOpen)
+    else if (!nextOpen)
+      setOpen(false)
+  }
 
   const handleLeave = (isTrigger: boolean) => {
     if (isTrigger)
@@ -105,52 +127,104 @@ const Tooltip: FC<TooltipProps> = ({
       tooltipManager.clear(close)
     }
   }
+  const handleTriggerMouseEnter = () => {
+    if (triggerMethod === 'hover') {
+      clearCloseTimeout()
+      setHoverTrigger()
+      tooltipManager.register(close)
+      setOpen(true)
+    }
+  }
+  const handleTriggerMouseLeave = () => {
+    if (triggerMethod === 'hover')
+      handleLeave(true)
+  }
+  const handlePopupMouseEnter = () => {
+    if (triggerMethod === 'hover') {
+      clearCloseTimeout()
+      setHoverPopup()
+    }
+  }
+  const handlePopupMouseLeave = () => {
+    if (triggerMethod === 'hover')
+      handleLeave(false)
+  }
+
+  const fallbackTrigger = (
+    <div data-testid={triggerTestId} className={triggerClassName || 'h-3.5 w-3.5 shrink-0 p-px'}>
+      <RiQuestionLine className="h-full w-full text-text-quaternary hover:text-text-tertiary" />
+    </div>
+  )
+  const triggerContent = children || fallbackTrigger
+  const childElement = React.isValidElement<React.HTMLAttributes<HTMLElement>>(triggerContent)
+    ? triggerContent
+    : fallbackTrigger
+  const nativeButton = typeof childElement.type !== 'string' || childElement.type === 'button'
+
+  const renderAsChildTrigger = () => {
+    const childProps = childElement.props
+    return React.cloneElement(childElement, {
+      onMouseEnter: (event: React.MouseEvent<HTMLElement>) => {
+        childProps.onMouseEnter?.(event)
+        handleTriggerMouseEnter()
+      },
+      onMouseLeave: (event: React.MouseEvent<HTMLElement>) => {
+        childProps.onMouseLeave?.(event)
+        handleTriggerMouseLeave()
+      },
+    })
+  }
+  const effectiveOpen = !disabled && open
 
   return (
-    <PortalToFollowElem
-      open={disabled ? false : open}
-      onOpenChange={setOpen}
-      placement={position}
-      offset={offset ?? 8}
+    <Popover
+      open={effectiveOpen}
+      onOpenChange={handleOpenChange}
     >
-      <PortalToFollowElemTrigger
-        onClick={() => triggerMethod === 'click' && setOpen(v => !v)}
-        onMouseEnter={() => {
-          if (triggerMethod === 'hover') {
-            clearCloseTimeout()
-            setHoverTrigger()
-            tooltipManager.register(close)
-            setOpen(true)
-          }
-        }}
-        onMouseLeave={() => triggerMethod === 'hover' && handleLeave(true)}
-        asChild={asChild}
-        className={!asChild ? triggerClassName : ''}
-      >
-        {children || <div data-testid={triggerTestId} className={triggerClassName || 'h-3.5 w-3.5 shrink-0 p-px'}><RiQuestionLine className="h-full w-full text-text-quaternary hover:text-text-tertiary" /></div>}
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent
-        className={cn('z-9999', portalContentClassName || '')}
-      >
-        {!!popupContent && (
-          <div
-            className={cn(
-              !noDecoration && 'relative max-w-[300px] rounded-md bg-components-panel-bg px-3 py-2 text-left system-xs-regular wrap-break-word text-text-tertiary shadow-lg',
-              popupClassName,
-            )}
-            onMouseEnter={() => {
-              if (triggerMethod === 'hover') {
-                clearCloseTimeout()
-                setHoverPopup()
-              }
-            }}
-            onMouseLeave={() => triggerMethod === 'hover' && handleLeave(false)}
-          >
-            {popupContent}
-          </div>
-        )}
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      {asChild
+        ? (
+            <PopoverTrigger
+              nativeButton={nativeButton}
+              disabled={disabled}
+              render={renderAsChildTrigger()}
+            />
+          )
+        : (
+            <PopoverTrigger
+              nativeButton={false}
+              disabled={disabled}
+              render={(
+                <div
+                  className={triggerClassName}
+                  onMouseEnter={handleTriggerMouseEnter}
+                  onMouseLeave={handleTriggerMouseLeave}
+                />
+              )}
+            >
+              {triggerContent}
+            </PopoverTrigger>
+          )}
+      {effectiveOpen && !!popupContent && (
+        <PopoverContent
+          placement={position}
+          sideOffset={sideOffset}
+          alignOffset={alignOffset}
+          className={portalContentClassName}
+          popupClassName={cn(
+            noDecoration
+              ? 'border-0 bg-transparent p-0 shadow-none'
+              : 'relative max-w-[300px] rounded-md border-0 bg-components-panel-bg px-3 py-2 text-left system-xs-regular wrap-break-word text-text-tertiary shadow-lg',
+            popupClassName,
+          )}
+          popupProps={{
+            onMouseEnter: handlePopupMouseEnter,
+            onMouseLeave: handlePopupMouseLeave,
+          }}
+        >
+          {popupContent}
+        </PopoverContent>
+      )}
+    </Popover>
   )
 }
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/__tests__/index.spec.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/__tests__/index.spec.tsx
index 49b0cb0789..0db8f54df4 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/__tests__/index.spec.tsx
@@ -18,43 +18,7 @@ vi.mock('@/app/components/plugins/plugin-auth', () => ({
   },
 }))
 
-// Mock portal-to-follow-elem - use React state to properly handle open/close
-vi.mock('@/app/components/base/portal-to-follow-elem', () => {
-  const MockPortalToFollowElem = ({ children, open }: { children: React.ReactNode, open: boolean }) => {
-    return (
-      <div data-testid="portal-root" data-open={open}>
-        {React.Children.map(children, (child) => {
-          if (!React.isValidElement(child))
-            return null
-          return React.cloneElement(child as React.ReactElement<{ __portalOpen?: boolean }>, { __portalOpen: open })
-        })}
-      </div>
-    )
-  }
-
-  const MockPortalToFollowElemTrigger = ({ children, onClick, className, __portalOpen }: { children: React.ReactNode, onClick?: React.MouseEventHandler, className?: string, __portalOpen?: boolean }) => (
-    <div data-testid="portal-trigger" onClick={onClick} className={className} data-open={__portalOpen}>
-      {children}
-    </div>
-  )
-
-  const MockPortalToFollowElemContent = ({ children, className, __portalOpen }: { children: React.ReactNode, className?: string, __portalOpen?: boolean }) => {
-    // Match actual behavior: returns null when not open
-    if (!__portalOpen)
-      return null
-    return (
-      <div data-testid="portal-content" className={className}>
-        {children}
-      </div>
-    )
-  }
-
-  return {
-    PortalToFollowElem: MockPortalToFollowElem,
-    PortalToFollowElemTrigger: MockPortalToFollowElemTrigger,
-    PortalToFollowElemContent: MockPortalToFollowElemContent,
-  }
-})
+vi.mock('@langgenius/dify-ui/popover', () => import('@/__mocks__/base-ui-popover'))
 
 // CredentialIcon - imported directly (not mocked)
 // This is a simple UI component with no external dependencies
@@ -97,8 +61,8 @@ describe('CredentialSelector', () => {
 
       render(<CredentialSelector {...props} />)
 
-      expect(screen.getByTestId('portal-root'))!.toBeInTheDocument()
-      expect(screen.getByTestId('portal-trigger'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-trigger'))!.toBeInTheDocument()
     })
 
     it('should render current credential name in trigger', () => {
@@ -134,7 +98,7 @@ describe('CredentialSelector', () => {
 
       render(<CredentialSelector {...props} />)
 
-      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
     })
 
     it('should render all credentials in dropdown when opened', () => {
@@ -142,12 +106,12 @@ describe('CredentialSelector', () => {
       render(<CredentialSelector {...props} />)
 
       // Act - Click trigger to open dropdown
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
       // Assert - All credentials should be visible (current credential appears in both trigger and list)
       // Assert - All credentials should be visible (current credential appears in both trigger and list)
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
       // 3 in dropdown list + 1 in trigger (current) = 4 total
       expect(screen.getAllByText(/Credential \d/)).toHaveLength(4)
     })
@@ -212,7 +176,7 @@ describe('CredentialSelector', () => {
         })
         render(<CredentialSelector {...props} />)
 
-        const trigger = screen.getByTestId('portal-trigger')
+        const trigger = screen.getByTestId('popover-trigger')
         fireEvent.click(trigger)
 
         // Assert - 5 in dropdown + 1 in trigger (current credential appears twice)
@@ -238,7 +202,7 @@ describe('CredentialSelector', () => {
         render(<CredentialSelector {...props} />)
 
         // Act - Open dropdown
-        const trigger = screen.getByTestId('portal-trigger')
+        const trigger = screen.getByTestId('popover-trigger')
         fireEvent.click(trigger)
 
         const credential2 = screen.getByText('Credential 2')
@@ -256,11 +220,11 @@ describe('CredentialSelector', () => {
         render(<CredentialSelector {...props} />)
 
         // Act - Open dropdown and select credential
-        const trigger = screen.getByTestId('portal-trigger')
+        const trigger = screen.getByTestId('popover-trigger')
         fireEvent.click(trigger)
 
         // Get the dropdown item using within() to scope query to portal content
-        const portalContent = screen.getByTestId('portal-content')
+        const portalContent = screen.getByTestId('popover-content')
         const credentialOption = within(portalContent).getByText(credentialName)
         fireEvent.click(credentialOption)
 
@@ -277,7 +241,7 @@ describe('CredentialSelector', () => {
         render(<CredentialSelector {...props} />)
 
         // Act - Open dropdown and select Credential 1
-        const trigger = screen.getByTestId('portal-trigger')
+        const trigger = screen.getByTestId('popover-trigger')
         fireEvent.click(trigger)
 
         const credential1 = screen.getByText('Credential 1')
@@ -326,15 +290,15 @@ describe('CredentialSelector', () => {
       // Assert - Initially closed
       // Assert - Initially closed
       // Assert - Initially closed
-      expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
 
       // Act - Click trigger
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
       // Assert - Now open
       // Assert - Now open
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
     })
 
     it('should call onCredentialChange when clicking a credential item', () => {
@@ -342,7 +306,7 @@ describe('CredentialSelector', () => {
       const props = createDefaultProps({ onCredentialChange: mockOnChange })
       render(<CredentialSelector {...props} />)
 
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
       const credential2 = screen.getByText('Credential 2')
       fireEvent.click(credential2)
@@ -357,10 +321,10 @@ describe('CredentialSelector', () => {
       render(<CredentialSelector {...props} />)
 
       // Act - Open and select
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
 
       const credential2 = screen.getByText('Credential 2')
       fireEvent.click(credential2)
@@ -374,7 +338,7 @@ describe('CredentialSelector', () => {
       render(<CredentialSelector {...props} />)
 
       // Act - Rapid clicks
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
       fireEvent.click(trigger)
       fireEvent.click(trigger)
@@ -395,7 +359,7 @@ describe('CredentialSelector', () => {
       render(<CredentialSelector {...props} />)
 
       // Act & Assert - Select Credential 1 (different from current)
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
       const credential1 = screen.getByText('Credential 1')
@@ -499,7 +463,7 @@ describe('CredentialSelector', () => {
       render(<CredentialSelector {...props} />)
 
       // Act - Open dropdown and select
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
       const credential = screen.getByText('Credential 2')
       fireEvent.click(credential)
@@ -519,7 +483,7 @@ describe('CredentialSelector', () => {
       rerender(<CredentialSelector {...props} onCredentialChange={mockOnChange2} />)
 
       // Open and select
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
       const credential = screen.getByText('Credential 2')
       fireEvent.click(credential)
@@ -651,7 +615,7 @@ describe('CredentialSelector', () => {
       rerender(<CredentialSelector {...props} onCredentialChange={mockOnChange2} />)
 
       // Open and select
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
       const credential = screen.getByText('Credential 2')
       fireEvent.click(credential)
@@ -672,7 +636,7 @@ describe('CredentialSelector', () => {
 
       // Assert - Should render without crashing
       // Assert - Should render without crashing
-      expect(screen.getByTestId('portal-root'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should handle undefined avatar_url in credential', () => {
@@ -713,7 +677,7 @@ describe('CredentialSelector', () => {
 
       // Assert - Should render without crashing
       // Assert - Should render without crashing
-      expect(screen.getByTestId('portal-trigger'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-trigger'))!.toBeInTheDocument()
     })
 
     it('should handle very long credential name', () => {
@@ -788,7 +752,7 @@ describe('CredentialSelector', () => {
       })
 
       render(<CredentialSelector {...props} />)
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
       // Get all "Same Name" elements
@@ -807,7 +771,7 @@ describe('CredentialSelector', () => {
       const props = createDefaultProps({ onCredentialChange: mockOnChange })
       const { unmount } = render(<CredentialSelector {...props} />)
 
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
       unmount()
@@ -832,7 +796,7 @@ describe('CredentialSelector', () => {
 
       // Assert - Should render without crashing
       // Assert - Should render without crashing
-      expect(screen.getByTestId('portal-trigger'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-trigger'))!.toBeInTheDocument()
     })
   })
 
@@ -843,7 +807,7 @@ describe('CredentialSelector', () => {
 
       render(<CredentialSelector {...props} />)
 
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       expect(trigger)!.toHaveClass('overflow-hidden')
     })
 
@@ -852,19 +816,21 @@ describe('CredentialSelector', () => {
 
       render(<CredentialSelector {...props} />)
 
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       expect(trigger)!.toHaveClass('grow')
     })
 
-    it('should apply z-10 class to dropdown content', () => {
+    it('should configure dropdown placement through popover props', () => {
       const props = createDefaultProps()
       render(<CredentialSelector {...props} />)
 
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
-      const content = screen.getByTestId('portal-content')
-      expect(content)!.toHaveClass('z-10')
+      const content = screen.getByTestId('popover-content')
+      expect(content)!.toHaveAttribute('data-placement', 'bottom-start')
+      expect(content)!.toHaveAttribute('data-side-offset', '4')
+      expect(content)!.not.toHaveClass('z-10')
     })
   })
 
@@ -885,11 +851,11 @@ describe('CredentialSelector', () => {
       render(<CredentialSelector {...props} />)
 
       // Assert - Initially closed
-      const portalRoot = screen.getByTestId('portal-root')
+      const portalRoot = screen.getByTestId('popover')
       expect(portalRoot)!.toHaveAttribute('data-open', 'false')
 
       // Act - Open
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
       // Assert - Now open
@@ -901,7 +867,7 @@ describe('CredentialSelector', () => {
       const props = createDefaultProps()
       render(<CredentialSelector {...props} />)
 
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
       // Assert - All credentials should be rendered in list
@@ -914,7 +880,7 @@ describe('CredentialSelector', () => {
       const props = createDefaultProps({ currentCredentialId: 'cred-2' })
       render(<CredentialSelector {...props} />)
 
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
       // Assert - Current credential (Credential 2) appears twice:
@@ -928,7 +894,7 @@ describe('CredentialSelector', () => {
       const props = createDefaultProps({ onCredentialChange: mockOnChange })
       render(<CredentialSelector {...props} />)
 
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
       const credential3 = screen.getByText('Credential 3')
       fireEvent.click(credential3)
@@ -938,23 +904,23 @@ describe('CredentialSelector', () => {
     })
   })
 
-  // Portal Configuration
-  describe('Portal Configuration', () => {
-    it('should configure PortalToFollowElem with placement bottom-start', () => {
+  // Popover Configuration
+  describe('Popover Configuration', () => {
+    it('should configure Popover with placement bottom-start', () => {
       // This test verifies the portal is configured correctly
       // The actual placement is handled by the mock, but we verify the component renders
       const props = createDefaultProps()
       render(<CredentialSelector {...props} />)
 
-      expect(screen.getByTestId('portal-root'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
-    it('should configure PortalToFollowElem with offset mainAxis 4', () => {
+    it('should configure Popover with offset mainAxis 4', () => {
       // This test verifies the offset configuration doesn't break rendering
       const props = createDefaultProps()
       render(<CredentialSelector {...props} />)
 
-      expect(screen.getByTestId('portal-root'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
   })
 })
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.tsx
index 116b762277..b00564f9b4 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/index.tsx
@@ -1,12 +1,12 @@
 import type { DataSourceCredential } from '@/types/pipeline'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo } from 'react'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import List from './list'
 import Trigger from './trigger'
 
@@ -21,7 +21,7 @@ const CredentialSelector = ({
   onCredentialChange,
   credentials,
 }: CredentialSelectorProps) => {
-  const [open, { toggle }] = useBoolean(false)
+  const [open, { set, setFalse }] = useBoolean(false)
 
   const currentCredential = useMemo(() => {
     return credentials.find(cred => cred.id === currentCredentialId)
@@ -34,32 +34,35 @@ const CredentialSelector = ({
 
   const handleCredentialChange = useCallback((credentialId: string) => {
     onCredentialChange(credentialId)
-    toggle()
-  }, [onCredentialChange, toggle])
+    setFalse()
+  }, [onCredentialChange, setFalse])
 
   return (
-    <PortalToFollowElem
+    <Popover
       open={open}
-      onOpenChange={toggle}
-      placement="bottom-start"
-      offset={{
-        mainAxis: 4,
-      }}
+      onOpenChange={set}
     >
-      <PortalToFollowElemTrigger onClick={toggle} className="grow overflow-hidden">
+      <PopoverTrigger
+        nativeButton={false}
+        render={<div className="grow overflow-hidden" />}
+      >
         <Trigger
           currentCredential={currentCredential}
           isOpen={open}
         />
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-10">
+      </PopoverTrigger>
+      <PopoverContent
+        placement="bottom-start"
+        sideOffset={4}
+        popupClassName="border-none bg-transparent shadow-none"
+      >
         <List
           currentCredentialId={currentCredentialId}
           credentials={credentials}
           onCredentialChange={handleCredentialChange}
         />
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      </PopoverContent>
+    </Popover>
   )
 }
 
diff --git a/web/app/components/datasets/settings/index-method/__tests__/index.spec.tsx b/web/app/components/datasets/settings/index-method/__tests__/index.spec.tsx
index 5e81611fc4..7aa11b4d7a 100644
--- a/web/app/components/datasets/settings/index-method/__tests__/index.spec.tsx
+++ b/web/app/components/datasets/settings/index-method/__tests__/index.spec.tsx
@@ -134,6 +134,16 @@ describe('IndexMethod', () => {
       expect(input)!.toHaveValue('25')
     })
 
+    it('should keep keyword number input visible next to steppers', () => {
+      render(<IndexMethod {...defaultProps} value={IndexingType.ECONOMICAL} keywordNumber={25} />)
+
+      const input = screen.getByRole('textbox')
+
+      expect(input)!.toHaveClass('w-12')
+      expect(input)!.toHaveClass('flex-none')
+      expect(input)!.toHaveClass('text-center')
+    })
+
     it('should call onKeywordNumberChange when KeywordNumber changes', () => {
       const handleKeywordChange = vi.fn()
       render(<IndexMethod {...defaultProps} onKeywordNumberChange={handleKeywordChange} />)
@@ -147,7 +157,7 @@ describe('IndexMethod', () => {
 
   describe('Tooltip', () => {
     it('should show tooltip when hovering over disabled Economy option', () => {
-      // The tooltip is shown via PortalToFollowElem when hovering
+      // The tooltip is shown via Popover when hovering
       // This is controlled by useHover hook
       render(<IndexMethod {...defaultProps} currentValue={IndexingType.QUALIFIED} />)
       // The tooltip content should exist in DOM but may not be visible
diff --git a/web/app/components/datasets/settings/index-method/index.tsx b/web/app/components/datasets/settings/index-method/index.tsx
index 7e925b869c..9e9b0e1759 100644
--- a/web/app/components/datasets/settings/index-method/index.tsx
+++ b/web/app/components/datasets/settings/index-method/index.tsx
@@ -1,14 +1,12 @@
 'use client'
 import { cn } from '@langgenius/dify-ui/cn'
-import { useHover } from 'ahooks'
-import { useRef } from 'react'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
 import { useTranslation } from 'react-i18next'
 import { Economic, HighQuality } from '@/app/components/base/icons/src/vender/knowledge'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import { IndexingType } from '../../create/step-two'
 import { EffectColor } from '../chunk-structure/types'
 import OptionCard from '../option-card'
@@ -32,8 +30,6 @@ const IndexMethod = ({
   onKeywordNumberChange,
 }: IndexMethodProps) => {
   const { t } = useTranslation()
-  const economyDomRef = useRef<HTMLDivElement>(null)
-  const isHoveringEconomy = useHover(economyDomRef)
   const isEconomyDisabled = currentValue === IndexingType.QUALIFIED
 
   return (
@@ -54,14 +50,13 @@ const IndexMethod = ({
         className="gap-x-2"
       />
       {/* Economy */}
-      <PortalToFollowElem
-        open={isHoveringEconomy}
-        offset={4}
-        placement="right"
-      >
-        <PortalToFollowElemTrigger>
+      <Popover>
+        <PopoverTrigger
+          nativeButton={false}
+          openOnHover={isEconomyDisabled}
+          render={<div />}
+        >
           <OptionCard
-            ref={economyDomRef}
             id={IndexingType.ECONOMICAL}
             isActive={value === IndexingType.ECONOMICAL}
             onClick={onChange}
@@ -80,13 +75,17 @@ const IndexMethod = ({
               onKeywordNumberChange={onKeywordNumberChange}
             />
           </OptionCard>
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent style={{ zIndex: 60 }}>
-          <div className="rounded-lg border-components-panel-border bg-components-tooltip-bg p-3 text-xs font-medium text-text-secondary shadow-lg">
+        </PopoverTrigger>
+        {isEconomyDisabled && (
+          <PopoverContent
+            placement="right"
+            sideOffset={4}
+            popupClassName="rounded-lg border-0 bg-components-tooltip-bg p-3 text-xs font-medium text-text-secondary shadow-lg"
+          >
             {t('form.indexMethodChangeToEconomyDisabledTip', { ns: 'datasetSettings' })}
-          </div>
-        </PortalToFollowElemContent>
-      </PortalToFollowElem>
+          </PopoverContent>
+        )}
+      </Popover>
     </div>
   )
 }
diff --git a/web/app/components/datasets/settings/index-method/keyword-number.tsx b/web/app/components/datasets/settings/index-method/keyword-number.tsx
index 3cbc18393f..a31ab07160 100644
--- a/web/app/components/datasets/settings/index-method/keyword-number.tsx
+++ b/web/app/components/datasets/settings/index-method/keyword-number.tsx
@@ -56,14 +56,14 @@ const KeyWordNumber = ({
         aria-label={t('form.numberOfKeywords', { ns: 'datasetSettings' })}
       />
       <NumberField
-        className="w-12 shrink-0"
+        className="w-[74px] shrink-0"
         min={MIN_KEYWORD_NUMBER}
         max={MAX_KEYWORD_NUMBER}
         value={keywordNumber}
         onValueChange={handleInputChange}
       >
         <NumberFieldGroup>
-          <NumberFieldInput />
+          <NumberFieldInput className="w-12 flex-none px-2 text-center" />
           <NumberFieldControls>
             <NumberFieldIncrement />
             <NumberFieldDecrement />
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/switch-credential-in-load-balancing.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/switch-credential-in-load-balancing.spec.tsx
index 0232adcf4a..f9c923e6a1 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/switch-credential-in-load-balancing.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/__tests__/switch-credential-in-load-balancing.spec.tsx
@@ -20,6 +20,7 @@ vi.mock('@/app/components/header/indicator', () => ({
 
 vi.mock('@remixicon/react', () => ({
   RiArrowDownSLine: () => <div data-testid="arrow-icon" />,
+  RiQuestionLine: () => <div data-testid="question-icon" />,
 }))
 
 describe('SwitchCredentialInLoadBalancing', () => {
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx
index be3e9edb93..8eaf18440f 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/credential-selector.tsx
@@ -1,4 +1,9 @@
 import type { Credential } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
 import {
   RiAddLine,
   RiArrowDownSLine,
@@ -10,11 +15,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import Badge from '@/app/components/base/badge'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import Indicator from '@/app/components/header/indicator'
 import CredentialItem from './authorized/credential-item'
 
@@ -47,68 +47,71 @@ const CredentialSelector = ({
   }, [handleSelect, t])
 
   return (
-    <PortalToFollowElem
+    <Popover
       open={open}
       onOpenChange={setOpen}
-      triggerPopupSameWidth
     >
-      <PortalToFollowElemTrigger asChild onClick={() => !disabled && setOpen(v => !v)}>
-        <div className="flex h-8 w-full items-center justify-between rounded-lg bg-components-input-bg-normal px-2 system-sm-regular">
+      <PopoverTrigger
+        nativeButton={false}
+        disabled={disabled}
+        render={<div className="flex h-8 w-full items-center justify-between rounded-lg bg-components-input-bg-normal px-2 system-sm-regular" />}
+      >
+        {
+          selectedCredential && (
+            <div className="flex items-center">
+              {
+                !selectedCredential.addNewCredential && <Indicator className="mr-2 ml-1 shrink-0" />
+              }
+              <div className="truncate system-sm-regular text-components-input-text-filled" title={selectedCredential.credential_name}>{selectedCredential.credential_name}</div>
+              {
+                selectedCredential.from_enterprise && (
+                  <Badge className="shrink-0">Enterprise</Badge>
+                )
+              }
+            </div>
+          )
+        }
+        {
+          !selectedCredential && (
+            <div className="grow truncate system-sm-regular text-components-input-text-placeholder">{t('modelProvider.auth.selectModelCredential', { ns: 'common' })}</div>
+          )
+        }
+        <RiArrowDownSLine className="h-4 w-4 text-text-quaternary" />
+      </PopoverTrigger>
+      <PopoverContent
+        sideOffset={0}
+        popupClassName="border-ccomponents-panel-border rounded-xl border-[0.5px] bg-components-panel-bg-blur p-0"
+        popupProps={{ style: { width: 'var(--anchor-width, auto)' } }}
+      >
+        <div className="max-h-[320px] overflow-y-auto p-1">
           {
-            selectedCredential && (
-              <div className="flex items-center">
-                {
-                  !selectedCredential.addNewCredential && <Indicator className="mr-2 ml-1 shrink-0" />
-                }
-                <div className="truncate system-sm-regular text-components-input-text-filled" title={selectedCredential.credential_name}>{selectedCredential.credential_name}</div>
-                {
-                  selectedCredential.from_enterprise && (
-                    <Badge className="shrink-0">Enterprise</Badge>
-                  )
-                }
-              </div>
-            )
-          }
-          {
-            !selectedCredential && (
-              <div className="grow truncate system-sm-regular text-components-input-text-placeholder">{t('modelProvider.auth.selectModelCredential', { ns: 'common' })}</div>
-            )
-          }
-          <RiArrowDownSLine className="h-4 w-4 text-text-quaternary" />
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-1002">
-        <div className="border-ccomponents-panel-border rounded-xl border-[0.5px] bg-components-panel-bg-blur shadow-lg">
-          <div className="max-h-[320px] overflow-y-auto p-1">
-            {
-              credentials.map(credential => (
-                <CredentialItem
-                  key={credential.credential_id}
-                  credential={credential}
-                  disableDelete
-                  disableEdit
-                  disableRename
-                  onItemClick={handleSelect}
-                  showSelectedIcon
-                  selectedCredentialId={selectedCredential?.credential_id}
-                />
-              ))
-            }
-          </div>
-          {
-            !notAllowAddNewCredential && (
-              <div
-                className="flex h-10 cursor-pointer items-center border-t border-t-divider-subtle px-7 system-xs-medium text-text-accent-light-mode-only"
-                onClick={handleAddNewCredential}
-              >
-                <RiAddLine className="mr-1 h-4 w-4" />
-                {t('modelProvider.auth.addNewModelCredential', { ns: 'common' })}
-              </div>
-            )
+            credentials.map(credential => (
+              <CredentialItem
+                key={credential.credential_id}
+                credential={credential}
+                disableDelete
+                disableEdit
+                disableRename
+                onItemClick={handleSelect}
+                showSelectedIcon
+                selectedCredentialId={selectedCredential?.credential_id}
+              />
+            ))
           }
         </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+        {
+          !notAllowAddNewCredential && (
+            <div
+              className="flex h-10 cursor-pointer items-center border-t border-t-divider-subtle px-7 system-xs-medium text-text-accent-light-mode-only"
+              onClick={handleAddNewCredential}
+            >
+              <RiAddLine className="mr-1 h-4 w-4" />
+              {t('modelProvider.auth.addNewModelCredential', { ns: 'common' })}
+            </div>
+          )
+        }
+      </PopoverContent>
+    </Popover>
   )
 }
 
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/status-indicators.spec.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/status-indicators.spec.tsx
index 9e28c9e204..dc7c512f78 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/status-indicators.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/status-indicators.spec.tsx
@@ -21,6 +21,12 @@ describe('StatusIndicators', () => {
     installedPlugins = [{ name: 'demo-plugin', plugin_unique_identifier: 'demo@1.0.0' }]
   })
 
+  const getTooltipTrigger = (container: HTMLElement) => {
+    const trigger = container.querySelector('[role="button"][aria-haspopup="dialog"]')
+    expect(trigger).toBeInTheDocument()
+    return trigger as HTMLElement
+  }
+
   it('should render nothing when model is available and enabled', () => {
     const { container } = render(
       <StatusIndicators
@@ -48,9 +54,7 @@ describe('StatusIndicators', () => {
       />,
     )
 
-    const trigger = container.querySelector('[data-state]')
-    expect(trigger).toBeInTheDocument()
-    await user.hover(trigger as HTMLElement)
+    await user.hover(getTooltipTrigger(container))
 
     expect(await screen.findByText('nodes.agent.modelSelectorTooltips.deprecated')).toBeInTheDocument()
   })
@@ -68,9 +72,7 @@ describe('StatusIndicators', () => {
       />,
     )
 
-    const trigger = container.querySelector('[data-state]')
-    expect(trigger).toBeInTheDocument()
-    await user.hover(trigger as HTMLElement)
+    await user.hover(getTooltipTrigger(container))
 
     expect(await screen.findByText('nodes.agent.modelNotSupport.title')).toBeInTheDocument()
   })
@@ -134,9 +136,7 @@ describe('StatusIndicators', () => {
       />,
     )
 
-    const trigger = container.querySelector('[data-state]')
-    expect(trigger).toBeInTheDocument()
-    await user.hover(trigger as HTMLElement)
+    await user.hover(getTooltipTrigger(container))
 
     expect(await screen.findByText('nodes.agent.modelNotInMarketplace.title')).toBeInTheDocument()
   })
diff --git a/web/app/components/plugins/plugin-auth/authorize/__tests__/oauth-client-settings.spec.tsx b/web/app/components/plugins/plugin-auth/authorize/__tests__/oauth-client-settings.spec.tsx
index d99e3514db..58bbd441ce 100644
--- a/web/app/components/plugins/plugin-auth/authorize/__tests__/oauth-client-settings.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/__tests__/oauth-client-settings.spec.tsx
@@ -225,7 +225,7 @@ describe('OAuthClientSettings', () => {
     expect(mockOnClose).toHaveBeenCalled()
   })
 
-  it('should close when backdrop is clicked', async () => {
+  it('should stay open when backdrop is clicked', () => {
     const mockOnClose = vi.fn()
     render(<ControlledSettingsHarness OAuthClientSettings={OAuthClientSettings} onClose={mockOnClose} />)
 
@@ -234,10 +234,8 @@ describe('OAuthClientSettings', () => {
 
     fireEvent.click(backdrop!)
 
-    await waitFor(() => {
-      expect(screen.getByTestId('modal-open-state')).toHaveTextContent('false')
-    })
-    expect(mockOnClose).toHaveBeenCalled()
+    expect(screen.getByTestId('modal-open-state')).toHaveTextContent('true')
+    expect(mockOnClose).not.toHaveBeenCalled()
   })
 
   it('should save settings on save only button click', async () => {
diff --git a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
index d06ecf1d60..50718d50db 100644
--- a/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/oauth-client-settings.tsx
@@ -138,6 +138,7 @@ const OAuthClientSettings = ({
   return (
     <Dialog
       open={open}
+      disablePointerDismissal
       onOpenChange={handleOpenChange}
     >
       <DialogContent
diff --git a/web/app/components/plugins/plugin-auth/authorized/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-auth/authorized/__tests__/index.spec.tsx
index 271252464a..9eb1ce3d26 100644
--- a/web/app/components/plugins/plugin-auth/authorized/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/__tests__/index.spec.tsx
@@ -1427,7 +1427,7 @@ describe('Authorized Component', () => {
       expect(document.querySelector('.custom-popup-class'))!.toBeInTheDocument()
     })
 
-    it('should pass placement to PortalToFollowElem', () => {
+    it('should pass placement to Popover', () => {
       const pluginPayload = createPluginPayload()
       const credentials = [createCredential()]
 
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/index.spec.tsx
index 38b5324fa7..bdaa79a1a2 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/__tests__/index.spec.tsx
@@ -77,7 +77,7 @@ afterAll(() => {
 })
 
 // Mock portal components for controlled positioning in tests
-// Use React context to properly scope open state per portal instance (for nested portals)
+// Use React context to properly scope open state per popover instance (for nested popovers)
 vi.mock('@langgenius/dify-ui/popover', () => {
   // Context reference shared across mock components
   let sharedContext: React.Context<boolean> | null = null
@@ -85,8 +85,8 @@ vi.mock('@langgenius/dify-ui/popover', () => {
   // Lazily get or create the context
   const getContext = (): React.Context<boolean> => {
     if (!sharedContext) {
-      const PortalOpenContext = React.createContext(false)
-      sharedContext = PortalOpenContext
+      const PopoverOpenContext = React.createContext(false)
+      sharedContext = PopoverOpenContext
     }
     return sharedContext
   }
@@ -103,7 +103,7 @@ vi.mock('@langgenius/dify-ui/popover', () => {
       return React.createElement(
         Context.Provider,
         { value: open || false },
-        React.createElement('div', { 'data-testid': 'portal-to-follow-elem', 'data-open': open }, children),
+        React.createElement('div', { 'data-testid': 'popover', 'data-open': open }, children),
       )
     },
     PopoverTrigger: ({
@@ -117,7 +117,7 @@ vi.mock('@langgenius/dify-ui/popover', () => {
       onClick?: () => void
       className?: string
     }) => (
-      <div data-testid="portal-trigger" onClick={onClick} className={className}>
+      <div data-testid="popover-trigger" onClick={onClick} className={className}>
         {render ?? children}
       </div>
     ),
@@ -127,7 +127,7 @@ vi.mock('@langgenius/dify-ui/popover', () => {
       if (!isOpen)
         return null
       return (
-        <div data-testid="portal-content" className={className}>{children}</div>
+        <div data-testid="popover-content" className={className}>{children}</div>
       )
     },
   }
@@ -562,7 +562,7 @@ describe('AppPicker', () => {
       const onShowChange = vi.fn()
       render(<AppPicker {...defaultProps} disabled={true} onShowChange={onShowChange} />)
 
-      fireEvent.click(screen.getByTestId('portal-trigger'))
+      fireEvent.click(screen.getByTestId('popover-trigger'))
       expect(onShowChange).not.toHaveBeenCalled()
     })
 
@@ -570,7 +570,7 @@ describe('AppPicker', () => {
       const onShowChange = vi.fn()
       render(<AppPicker {...defaultProps} disabled={false} onShowChange={onShowChange} />)
 
-      fireEvent.click(screen.getByTestId('portal-trigger'))
+      fireEvent.click(screen.getByTestId('popover-trigger'))
       expect(onShowChange).toHaveBeenCalledWith(true)
     })
   })
@@ -683,7 +683,7 @@ describe('AppPicker', () => {
 
       // The component should render without errors
       // The component should render without errors
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should handle isShow toggle correctly', () => {
@@ -697,7 +697,7 @@ describe('AppPicker', () => {
 
       // Should not crash
       // Should not crash
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should setup intersection observer when isShow is true', () => {
@@ -718,7 +718,7 @@ describe('AppPicker', () => {
 
       // Component should render without errors
       // Component should render without errors
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should cleanup observer on component unmount', () => {
@@ -736,7 +736,7 @@ describe('AppPicker', () => {
 
       // Component should still work correctly
       // Component should still work correctly
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should not setup IntersectionObserver when observerTarget is null', () => {
@@ -745,7 +745,7 @@ describe('AppPicker', () => {
 
       // The guard at line 84 should prevent setup
       // The guard at line 84 should prevent setup
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should debounce onLoadMore calls using loadingRef', () => {
@@ -1555,7 +1555,7 @@ describe('AppSelector', () => {
   describe('Rendering', () => {
     it('should render without crashing', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should render trigger component', () => {
@@ -1588,33 +1588,33 @@ describe('AppSelector', () => {
       )
       // Should show the app trigger with app info
       // Should show the app trigger with app info
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
   })
 
   describe('Props', () => {
     it('should handle different placement values', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} placement="top" />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should handle different offset values', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} offset={10} />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should handle disabled state', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} disabled={true} />)
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
       // Portal should remain closed when disabled
       // Portal should remain closed when disabled
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toHaveAttribute('data-open', 'false')
+      expect(screen.getByTestId('popover'))!.toHaveAttribute('data-open', 'false')
     })
 
     it('should handle scope prop', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} scope="workflow" />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should handle value with inputs', () => {
@@ -1624,7 +1624,7 @@ describe('AppSelector', () => {
           value={{ app_id: 'app-1', inputs: { name: 'test' }, files: [] }}
         />,
       )
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should handle value with files', () => {
@@ -1634,7 +1634,7 @@ describe('AppSelector', () => {
           value={{ app_id: 'app-1', inputs: {}, files: [{ id: 'file-1' }] }}
         />,
       )
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
   })
 
@@ -1642,32 +1642,32 @@ describe('AppSelector', () => {
     it('should toggle isShow state when trigger is clicked', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
 
-      const trigger = screen.getAllByTestId('portal-trigger')[0]
+      const trigger = screen.getAllByTestId('popover-trigger')[0]
       fireEvent.click(trigger!)
 
       // The portal state should update synchronously - get the first one (outer portal)
       // The portal state should update synchronously - get the first one (outer portal)
-      expect(screen.getAllByTestId('portal-to-follow-elem')[0])!.toHaveAttribute('data-open', 'true')
+      expect(screen.getAllByTestId('popover')[0])!.toHaveAttribute('data-open', 'true')
     })
 
     it('should not toggle isShow when disabled', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} disabled={true} />)
 
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toHaveAttribute('data-open', 'false')
+      expect(screen.getByTestId('popover'))!.toHaveAttribute('data-open', 'false')
     })
 
     it('should manage search text state', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
 
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
       // Portal content should be visible after click
       // Portal content should be visible after click
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
     })
 
     it('should render correctly during load more setup', () => {
@@ -1678,7 +1678,7 @@ describe('AppSelector', () => {
 
       // Trigger should be rendered
       // Trigger should be rendered
-      expect(screen.getByTestId('portal-trigger'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-trigger'))!.toBeInTheDocument()
     })
   })
 
@@ -1689,9 +1689,9 @@ describe('AppSelector', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} onSelect={onSelect} />)
 
       // Open the portal
-      fireEvent.click(screen.getByTestId('portal-trigger'))
+      fireEvent.click(screen.getByTestId('popover-trigger'))
 
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
     })
 
     it('should call onSelect with correct value structure', () => {
@@ -1706,7 +1706,7 @@ describe('AppSelector', () => {
 
       // The component should maintain the correct value structure
       // The component should maintain the correct value structure
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should clear inputs when selecting different app', () => {
@@ -1721,7 +1721,7 @@ describe('AppSelector', () => {
 
       // Component renders with existing value
       // Component renders with existing value
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should preserve inputs when selecting same app', () => {
@@ -1734,7 +1734,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
   })
 
@@ -1748,7 +1748,7 @@ describe('AppSelector', () => {
       }
 
       renderWithQueryClient(<AppSelector {...defaultProps} />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should memoize currentAppInfo correctly', () => {
@@ -1763,7 +1763,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should memoize formattedValue correctly', () => {
@@ -1774,7 +1774,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should be wrapped with React.memo', () => {
@@ -1791,7 +1791,7 @@ describe('AppSelector', () => {
         </QueryClientProvider>,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
   })
 
@@ -1799,7 +1799,7 @@ describe('AppSelector', () => {
     it('should handle load more when hasMore is true', async () => {
       mockHasNextPage = true
       renderWithQueryClient(<AppSelector {...defaultProps} />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should not trigger load more when already loading', async () => {
@@ -1825,7 +1825,7 @@ describe('AppSelector', () => {
         vi.advanceTimersByTime(500)
       })
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should render load more area when hasMore is true', () => {
@@ -1836,11 +1836,11 @@ describe('AppSelector', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
 
       // Open the portal
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
       // Should render without errors
       // Should render without errors
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
     })
 
     it('should handle fetchNextPage rejection gracefully in handleLoadMore', async () => {
@@ -1851,7 +1851,7 @@ describe('AppSelector', () => {
 
       // Should not crash even if fetchNextPage rejects
       // Should not crash even if fetchNextPage rejects
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should call fetchNextPage when intersection observer triggers handleLoadMore', async () => {
@@ -1862,10 +1862,10 @@ describe('AppSelector', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
 
       // Open the main portal
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
       // Open the inner app picker portal
-      const triggers = screen.getAllByTestId('portal-trigger')
+      const triggers = screen.getAllByTestId('popover-trigger')
       fireEvent.click(triggers[1]!)
 
       // Simulate intersection to trigger handleLoadMore
@@ -1883,8 +1883,8 @@ describe('AppSelector', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
 
       // Open portals
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
-      const triggers = screen.getAllByTestId('portal-trigger')
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
+      const triggers = screen.getAllByTestId('popover-trigger')
       fireEvent.click(triggers[1]!)
 
       // Trigger first intersection
@@ -1898,7 +1898,7 @@ describe('AppSelector', () => {
       // Still only one call due to the picker-level debounce
       expect(mockFetchNextPage).toHaveBeenCalledTimes(1)
 
-      expect(screen.getAllByTestId('portal-content').length).toBeGreaterThan(0)
+      expect(screen.getAllByTestId('popover-content').length).toBeGreaterThan(0)
     })
 
     it('should skip handleLoadMore when isFetchingNextPage is true', async () => {
@@ -1909,8 +1909,8 @@ describe('AppSelector', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
 
       // Open portals
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
-      const triggers = screen.getAllByTestId('portal-trigger')
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
+      const triggers = screen.getAllByTestId('popover-trigger')
       fireEvent.click(triggers[1]!)
 
       // Trigger intersection
@@ -1928,8 +1928,8 @@ describe('AppSelector', () => {
       renderWithQueryClient(<AppSelector {...defaultProps} />)
 
       // Open portals
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
-      const triggers = screen.getAllByTestId('portal-trigger')
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
+      const triggers = screen.getAllByTestId('popover-trigger')
       fireEvent.click(triggers[1]!)
 
       // Trigger intersection
@@ -1950,7 +1950,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should handle form change without image file', () => {
@@ -1963,7 +1963,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should extract #image# from inputs and add to files array', () => {
@@ -1977,7 +1977,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should preserve existing files when no #image# in inputs', () => {
@@ -1990,7 +1990,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
   })
 
@@ -2010,9 +2010,9 @@ describe('AppSelector', () => {
       )
 
       // Open the main portal
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
     })
 
     it('should preserve inputs when selecting the same app', () => {
@@ -2029,7 +2029,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should handle app selection with empty value', () => {
@@ -2047,9 +2047,9 @@ describe('AppSelector', () => {
       )
 
       // Open the main portal
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
     })
   })
 
@@ -2062,19 +2062,19 @@ describe('AppSelector', () => {
     it('should handle empty pages array', () => {
       mockAppListData = { pages: [] }
       renderWithQueryClient(<AppSelector {...defaultProps} />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should handle undefined data', () => {
       mockAppListData = undefined
       renderWithQueryClient(<AppSelector {...defaultProps} />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should handle loading state', () => {
       mockIsLoading = true
       renderWithQueryClient(<AppSelector {...defaultProps} />)
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should handle app not found in displayedApps', () => {
@@ -2089,7 +2089,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should handle value with empty inputs and files', () => {
@@ -2100,7 +2100,7 @@ describe('AppSelector', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
   })
 
@@ -2113,7 +2113,7 @@ describe('AppSelector', () => {
 
       // Should not crash
       // Should not crash
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
   })
 })
@@ -2147,11 +2147,11 @@ describe('AppSelector Integration', () => {
       renderWithQueryClient(<AppSelector onSelect={onSelect} />)
 
       // 1. Click trigger to open picker - get first trigger (outer portal)
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
       // Get the first portal element (outer portal)
       // Get the first portal element (outer portal)
-      expect(screen.getAllByTestId('portal-to-follow-elem')[0])!.toHaveAttribute('data-open', 'true')
+      expect(screen.getAllByTestId('popover')[0])!.toHaveAttribute('data-open', 'true')
     })
 
     it('should handle app change with input preservation logic', () => {
@@ -2163,7 +2163,7 @@ describe('AppSelector Integration', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
   })
 
@@ -2179,9 +2179,9 @@ describe('AppSelector Integration', () => {
     it('should pass correct props to AppPicker', () => {
       renderWithQueryClient(<AppSelector onSelect={vi.fn()} />)
 
-      fireEvent.click(screen.getByTestId('portal-trigger'))
+      fireEvent.click(screen.getByTestId('popover-trigger'))
 
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
     })
   })
 
@@ -2194,15 +2194,15 @@ describe('AppSelector Integration', () => {
         />,
       )
 
-      expect(screen.getByTestId('portal-to-follow-elem'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover'))!.toBeInTheDocument()
     })
 
     it('should handle search filtering through app list', () => {
       renderWithQueryClient(<AppSelector onSelect={vi.fn()} />)
 
-      fireEvent.click(screen.getByTestId('portal-trigger'))
+      fireEvent.click(screen.getByTestId('popover-trigger'))
 
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
     })
   })
 
@@ -2221,11 +2221,11 @@ describe('AppSelector Integration', () => {
       )
 
       // Open the main portal
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
       // The inner AppPicker portal is closed by default (isShowChooseApp = false)
       // We need to click on the inner trigger to open it
-      const innerTriggers = screen.getAllByTestId('portal-trigger')
+      const innerTriggers = screen.getAllByTestId('popover-trigger')
       // The second trigger is the inner AppPicker trigger
       fireEvent.click(innerTriggers[1]!)
 
@@ -2256,10 +2256,10 @@ describe('AppSelector Integration', () => {
       )
 
       // Open the main portal
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
       // Click on the inner trigger to open app picker
-      const innerTriggers = screen.getAllByTestId('portal-trigger')
+      const innerTriggers = screen.getAllByTestId('popover-trigger')
       fireEvent.click(innerTriggers[1]!)
 
       // Click on the same app - need to get the one in the app list, not the trigger
@@ -2289,10 +2289,10 @@ describe('AppSelector Integration', () => {
       )
 
       // Open the main portal
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
       // Click on inner trigger to open app picker
-      const innerTriggers = screen.getAllByTestId('portal-trigger')
+      const innerTriggers = screen.getAllByTestId('popover-trigger')
       fireEvent.click(innerTriggers[1]!)
 
       // Click on an app from the dropdown
@@ -2317,9 +2317,9 @@ describe('AppSelector Integration', () => {
       renderWithQueryClient(<AppSelector onSelect={vi.fn()} />)
 
       // Open the portal to render the app picker
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
     })
 
     it('should stay stable after fetchNextPage completes', async () => {
@@ -2329,9 +2329,9 @@ describe('AppSelector Integration', () => {
 
       renderWithQueryClient(<AppSelector onSelect={vi.fn()} />)
 
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
-      expect(screen.getByTestId('portal-content'))!.toBeInTheDocument()
+      expect(screen.getByTestId('popover-content'))!.toBeInTheDocument()
     })
 
     it('should not call fetchNextPage when conditions prevent it', () => {
@@ -2340,7 +2340,7 @@ describe('AppSelector Integration', () => {
 
       renderWithQueryClient(<AppSelector onSelect={vi.fn()} />)
 
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
       // fetchNextPage should not be called
       expect(mockFetchNextPage).not.toHaveBeenCalled()
@@ -2362,10 +2362,10 @@ describe('AppSelector Integration', () => {
       )
 
       // Open portal
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
       // formattedValue should include #image# from files
-      expect(screen.getAllByTestId('portal-content').length).toBeGreaterThan(0)
+      expect(screen.getAllByTestId('popover-content').length).toBeGreaterThan(0)
     })
 
     it('should handle value with no files', () => {
@@ -2381,9 +2381,9 @@ describe('AppSelector Integration', () => {
         />,
       )
 
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
-      expect(screen.getAllByTestId('portal-content').length).toBeGreaterThan(0)
+      expect(screen.getAllByTestId('popover-content').length).toBeGreaterThan(0)
     })
 
     it('should handle undefined value.files', () => {
@@ -2399,9 +2399,9 @@ describe('AppSelector Integration', () => {
         />,
       )
 
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
-      expect(screen.getAllByTestId('portal-content').length).toBeGreaterThan(0)
+      expect(screen.getAllByTestId('popover-content').length).toBeGreaterThan(0)
     })
 
     it('should call onSelect with transformed inputs when form input changes', () => {
@@ -2430,7 +2430,7 @@ describe('AppSelector Integration', () => {
       )
 
       // Open portal to render AppInputsPanel
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
       // Find and interact with the form input (may not exist if schema is empty)
       const formInputs = screen.queryAllByPlaceholderText('FormInputField')
@@ -2446,7 +2446,7 @@ describe('AppSelector Integration', () => {
       }
       else {
         // If form inputs aren't rendered, at least verify component rendered
-        expect(screen.getAllByTestId('portal-content').length).toBeGreaterThan(0)
+        expect(screen.getAllByTestId('popover-content').length).toBeGreaterThan(0)
       }
     })
 
@@ -2482,7 +2482,7 @@ describe('AppSelector Integration', () => {
         />,
       )
 
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
       // Find file uploader and trigger upload - the #image# field will be extracted
       const uploadBtns = screen.queryAllByTestId('upload-file-btn')
@@ -2493,7 +2493,7 @@ describe('AppSelector Integration', () => {
       }
       else {
         // Verify component rendered
-        expect(screen.getAllByTestId('portal-content').length).toBeGreaterThan(0)
+        expect(screen.getAllByTestId('popover-content').length).toBeGreaterThan(0)
       }
     })
 
@@ -2520,7 +2520,7 @@ describe('AppSelector Integration', () => {
         />,
       )
 
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
       // Find form input (may not exist if schema is empty)
       const inputs = screen.queryAllByPlaceholderText('PreserveField')
@@ -2536,7 +2536,7 @@ describe('AppSelector Integration', () => {
       }
       else {
         // If form inputs aren't rendered, at least verify component rendered
-        expect(screen.getAllByTestId('portal-content').length).toBeGreaterThan(0)
+        expect(screen.getAllByTestId('popover-content').length).toBeGreaterThan(0)
       }
     })
 
@@ -2571,7 +2571,7 @@ describe('AppSelector Integration', () => {
         />,
       )
 
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
       // Try to find and click the upload button which triggers #image# form change
       const uploadBtn = screen.queryByTestId('upload-file-btn')
@@ -2605,7 +2605,7 @@ describe('AppSelector Integration', () => {
         />,
       )
 
-      fireEvent.click(screen.getAllByTestId('portal-trigger')[0]!)
+      fireEvent.click(screen.getAllByTestId('popover-trigger')[0]!)
 
       const inputs = screen.queryAllByPlaceholderText('SimpleInput')
       if (inputs.length > 0) {
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/index.spec.tsx
index 34325109eb..7ceb8607c5 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/index.spec.tsx
@@ -5,34 +5,8 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { SupportedCreationMethods } from '@/app/components/plugins/types'
 import { TriggerCredentialTypeEnum } from '@/app/components/workflow/block-selector/types'
-import { CreateButtonType, CreateSubscriptionButton, DEFAULT_METHOD } from '../index'
-
-let mockPortalOpenState = false
-
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children, open }: { children: React.ReactNode, open: boolean }) => {
-    mockPortalOpenState = open || false
-    return (
-      <div data-testid="portal-elem" data-open={open}>
-        {children}
-      </div>
-    )
-  },
-  PortalToFollowElemTrigger: ({ children, onClick, className }: { children: React.ReactNode, onClick?: () => void, className?: string }) => (
-    <div data-testid="portal-trigger" onClick={onClick} className={className}>
-      {children}
-    </div>
-  ),
-  PortalToFollowElemContent: ({ children, className }: { children: React.ReactNode, className?: string }) => {
-    if (!mockPortalOpenState)
-      return null
-    return (
-      <div data-testid="portal-content" className={className}>
-        {children}
-      </div>
-    )
-  },
-}))
+import { CreateSubscriptionButton } from '../index'
+import { CreateButtonType, DEFAULT_METHOD } from '../types'
 
 vi.mock('@langgenius/dify-ui/toast', () => ({
   toast: Object.assign(vi.fn(), {
@@ -107,40 +81,47 @@ vi.mock('../common-modal', () => ({
 }))
 
 vi.mock('../oauth-client', () => ({
-  OAuthClientSettingsModal: ({ oauthConfig, onClose, showOAuthCreateModal }: {
+  OAuthClientSettingsModal: ({ open, oauthConfig, onOpenChange, showOAuthCreateModal }: {
+    open: boolean
     oauthConfig?: TriggerOAuthConfig
-    onClose: () => void
+    onOpenChange: (open: boolean) => void
     showOAuthCreateModal: (builder: TriggerSubscriptionBuilder) => void
-  }) => (
-    <div
-      data-testid="oauth-client-modal"
-      data-has-config={!!oauthConfig}
-    >
-      <button data-testid="close-oauth-modal" onClick={onClose}>Close</button>
-      <button
-        data-testid="show-create-modal"
-        onClick={() => showOAuthCreateModal({
-          id: 'test-builder',
-          name: 'test',
-          provider: 'test-provider',
-          credential_type: TriggerCredentialTypeEnum.Oauth2,
-          credentials: {},
-          endpoint: 'https://test.com',
-          parameters: {},
-          properties: {},
-          workflows_in_use: 0,
-        })}
+  }) => {
+    if (!open)
+      return null
+
+    return (
+      <div
+        data-testid="oauth-client-modal"
+        data-has-config={!!oauthConfig}
       >
-        Show Create Modal
-      </button>
-    </div>
-  ),
+        <button data-testid="close-oauth-modal" onClick={() => onOpenChange(false)}>Close</button>
+        <button
+          data-testid="show-create-modal"
+          onClick={() => showOAuthCreateModal({
+            id: 'test-builder',
+            name: 'test',
+            provider: 'test-provider',
+            credential_type: TriggerCredentialTypeEnum.Oauth2,
+            credentials: {},
+            endpoint: 'https://test.com',
+            parameters: {},
+            properties: {},
+            workflows_in_use: 0,
+          })}
+        >
+          Show Create Modal
+        </button>
+      </div>
+    )
+  },
 }))
 
 vi.mock('@langgenius/dify-ui/select', async () => {
   const React = await import('react')
 
   const SelectContext = React.createContext<{
+    onOpenChange?: (open: boolean) => void
     onValueChange?: (value: string) => void
   }>({})
 
@@ -160,11 +141,13 @@ vi.mock('@langgenius/dify-ui/select', async () => {
       children,
       value,
       open,
+      onOpenChange,
       onValueChange,
     }: {
       children: React.ReactNode
       value: string | null
       open?: boolean
+      onOpenChange?: (open: boolean) => void
       onValueChange?: (value: string) => void
     }) => {
       const currentValue = value ?? DEFAULT_METHOD
@@ -175,10 +158,11 @@ vi.mock('@langgenius/dify-ui/select', async () => {
           : String(open ?? false)
 
       return (
-        <SelectContext.Provider value={{ onValueChange }}>
+        <SelectContext.Provider value={{ onOpenChange, onValueChange }}>
           <div
             data-testid="custom-select"
             data-value={currentValue}
+            data-open={String(open ?? false)}
             data-options-count={optionsCount}
             data-container-open={containerOpen}
           >
@@ -188,7 +172,16 @@ vi.mock('@langgenius/dify-ui/select', async () => {
       )
     },
     SelectTrigger: ({ children, className }: { children: React.ReactNode, render?: React.ReactNode, className?: string }) => {
-      return <div data-testid="custom-trigger" className={className}>{children}</div>
+      const context = React.useContext(SelectContext)
+      return (
+        <div
+          data-testid="custom-trigger"
+          className={className}
+          onClick={() => context.onOpenChange?.(true)}
+        >
+          {children}
+        </div>
+      )
     },
     SelectContent: ({ children }: { children: React.ReactNode }) => (
       <div data-testid="options-container">{children}</div>
@@ -281,7 +274,6 @@ const setupMocks = (config: {
 describe('CreateSubscriptionButton', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockPortalOpenState = false
     setupMocks()
   })
 
@@ -494,6 +486,38 @@ describe('CreateSubscriptionButton', () => {
       })
     })
 
+    it('should close dropdown when oauth settings is clicked from option extra action', async () => {
+      // Arrange
+      setupMocks({
+        storeDetail: createStoreDetail(),
+        providerInfo: createProviderInfo({
+          supported_creation_methods: [
+            SupportedCreationMethods.OAUTH,
+            SupportedCreationMethods.APIKEY,
+            SupportedCreationMethods.MANUAL,
+          ],
+        }),
+        oauthConfig: createOAuthConfig({ configured: false }),
+      })
+      const props = createDefaultProps()
+
+      // Act
+      render(<CreateSubscriptionButton {...props} />)
+
+      fireEvent.click(screen.getByTestId('custom-trigger'))
+      expect(screen.getByTestId('custom-select'))!.toHaveAttribute('data-open', 'true')
+
+      fireEvent.click(screen.getByRole('button', {
+        name: 'pluginTrigger.subscription.addType.options.oauth.clientSettings',
+      }))
+
+      // Assert
+      await waitFor(() => {
+        expect(screen.getByTestId('oauth-client-modal'))!.toBeInTheDocument()
+        expect(screen.getByTestId('custom-select'))!.toHaveAttribute('data-open', 'false')
+      })
+    })
+
     it('should close OAuthClientSettingsModal and refetch config when closed', async () => {
       // Arrange
       const mockRefetchOAuth = vi.fn()
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/oauth-client.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/oauth-client.spec.tsx
index 46b9499027..21c76ecdca 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/oauth-client.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/__tests__/oauth-client.spec.tsx
@@ -110,48 +110,6 @@ Object.defineProperty(navigator, 'clipboard', {
   writable: true,
 })
 
-vi.mock('@/app/components/base/modal/modal', () => ({
-  default: ({
-    children,
-    onClose,
-    onConfirm,
-    onCancel,
-    title,
-    confirmButtonText,
-    cancelButtonText,
-    footerSlot,
-    onExtraButtonClick,
-    extraButtonText,
-  }: {
-    children: React.ReactNode
-    onClose: () => void
-    onConfirm: () => void
-    onCancel: () => void
-    title: string
-    confirmButtonText: string
-    cancelButtonText?: string
-    footerSlot?: React.ReactNode
-    onExtraButtonClick?: () => void
-    extraButtonText?: string
-  }) => (
-    <div data-testid="modal">
-      <div data-testid="modal-title">{title}</div>
-      <div data-testid="modal-content">{children}</div>
-      <div data-testid="modal-footer">
-        {footerSlot}
-        {extraButtonText && (
-          <button data-testid="modal-extra" onClick={onExtraButtonClick}>{extraButtonText}</button>
-        )}
-        {cancelButtonText && (
-          <button data-testid="modal-cancel" onClick={onCancel}>{cancelButtonText}</button>
-        )}
-        <button data-testid="modal-confirm" onClick={onConfirm}>{confirmButtonText}</button>
-        <button data-testid="modal-close" onClick={onClose}>Close</button>
-      </div>
-    </div>
-  ),
-}))
-
 let mockFormValues: { values: Record<string, string>, isCheckValidated: boolean } = {
   values: { client_id: 'test-client-id', client_secret: 'test-client-secret' },
   isCheckValidated: true,
@@ -161,10 +119,13 @@ const setMockFormValues = (values: typeof mockFormValues) => {
 }
 
 vi.mock('@/app/components/base/form/components/base', () => ({
-  BaseForm: React.forwardRef((
-    { formSchemas }: { formSchemas: Array<{ name: string, default?: string }> },
-    ref: React.ForwardedRef<{ getFormValues: () => { values: Record<string, string>, isCheckValidated: boolean } }>,
-  ) => {
+  BaseForm: ({
+    formSchemas,
+    ref,
+  }: {
+    formSchemas: Array<{ name: string, default?: string }>
+    ref?: React.Ref<{ getFormValues: () => { values: Record<string, string>, isCheckValidated: boolean } }>
+  }) => {
     React.useImperativeHandle(ref, () => ({
       getFormValues: () => mockFormValues,
     }))
@@ -180,15 +141,24 @@ vi.mock('@/app/components/base/form/components/base', () => ({
         ))}
       </div>
     )
-  }),
+  },
 }))
 
 describe('OAuthClientSettingsModal', () => {
   const defaultProps = {
+    open: true,
     oauthConfig: createMockOAuthConfig(),
-    onClose: vi.fn(),
+    onOpenChange: vi.fn(),
     showOAuthCreateModal: vi.fn(),
   }
+  const title = 'pluginTrigger.modal.oauth.title'
+  const getDialog = () => screen.getByRole('dialog', { name: title })
+  const getCloseButton = () => screen.getByRole('button', { name: 'Close' })
+  const getCancelButton = () => screen.getByRole('button', { name: 'common.operation.cancel' })
+  const getSaveOnlyButton = () => screen.getByRole('button', { name: 'plugin.auth.saveOnly' })
+  const getConfirmButton = () => screen.getByRole('button', {
+    name: /plugin\.auth\.saveAndAuth|pluginTrigger\.modal\.common\.authorizing|pluginTrigger\.modal\.oauth\.authorization\.waitingJump/,
+  })
 
   beforeEach(() => {
     vi.clearAllMocks()
@@ -215,7 +185,7 @@ describe('OAuthClientSettingsModal', () => {
     it('should render modal with correct title', () => {
       render(<OAuthClientSettingsModal {...defaultProps} />)
 
-      expect(screen.getByTestId('modal-title')).toHaveTextContent('pluginTrigger.modal.oauth.title')
+      expect(screen.getByRole('heading', { name: title })).toBeInTheDocument()
     })
 
     it('should render client type selector when system_configured is true', () => {
@@ -332,7 +302,7 @@ describe('OAuthClientSettingsModal', () => {
 
       render(<OAuthClientSettingsModal {...defaultProps} />)
 
-      fireEvent.click(screen.getByTestId('modal-confirm'))
+      fireEvent.click(getConfirmButton())
 
       expect(mockConfigureOAuth).toHaveBeenCalled()
     })
@@ -350,7 +320,7 @@ describe('OAuthClientSettingsModal', () => {
 
       render(<OAuthClientSettingsModal {...defaultProps} />)
 
-      fireEvent.click(screen.getByTestId('modal-confirm'))
+      fireEvent.click(getConfirmButton())
 
       expect(mockOpenOAuthPopup).toHaveBeenCalledWith(
         'https://oauth.example.com/authorize',
@@ -359,7 +329,7 @@ describe('OAuthClientSettingsModal', () => {
     })
 
     it('should show success toast and close modal when OAuth callback succeeds', () => {
-      const mockOnClose = vi.fn()
+      const mockOnOpenChange = vi.fn()
       const mockShowOAuthCreateModal = vi.fn()
 
       mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
@@ -379,18 +349,18 @@ describe('OAuthClientSettingsModal', () => {
       render(
         <OAuthClientSettingsModal
           {...defaultProps}
-          onClose={mockOnClose}
+          onOpenChange={mockOnOpenChange}
           showOAuthCreateModal={mockShowOAuthCreateModal}
         />,
       )
 
-      fireEvent.click(screen.getByTestId('modal-confirm'))
+      fireEvent.click(getConfirmButton())
 
       expect(mockToastNotify).toHaveBeenCalledWith({
         type: 'success',
         message: 'pluginTrigger.modal.oauth.authorization.authSuccess',
       })
-      expect(mockOnClose).toHaveBeenCalled()
+      expect(mockOnOpenChange).toHaveBeenCalledWith(false)
     })
 
     it('should show error toast when OAuth initiation fails', () => {
@@ -403,7 +373,7 @@ describe('OAuthClientSettingsModal', () => {
 
       render(<OAuthClientSettingsModal {...defaultProps} />)
 
-      fireEvent.click(screen.getByTestId('modal-confirm'))
+      fireEvent.click(getConfirmButton())
 
       expect(mockToastNotify).toHaveBeenCalledWith({
         type: 'error',
@@ -420,7 +390,7 @@ describe('OAuthClientSettingsModal', () => {
 
       render(<OAuthClientSettingsModal {...defaultProps} />)
 
-      fireEvent.click(screen.getByTestId('modal-cancel'))
+      fireEvent.click(getSaveOnlyButton())
 
       expect(mockConfigureOAuth).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -432,20 +402,20 @@ describe('OAuthClientSettingsModal', () => {
     })
 
     it('should show success toast when save only succeeds', () => {
-      const mockOnClose = vi.fn()
+      const mockOnOpenChange = vi.fn()
       mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
         onSuccess()
       })
 
-      render(<OAuthClientSettingsModal {...defaultProps} onClose={mockOnClose} />)
+      render(<OAuthClientSettingsModal {...defaultProps} onOpenChange={mockOnOpenChange} />)
 
-      fireEvent.click(screen.getByTestId('modal-cancel'))
+      fireEvent.click(getSaveOnlyButton())
 
       expect(mockToastNotify).toHaveBeenCalledWith({
         type: 'success',
         message: 'pluginTrigger.modal.oauth.save.success',
       })
-      expect(mockOnClose).toHaveBeenCalled()
+      expect(mockOnOpenChange).toHaveBeenCalledWith(false)
     })
   })
 
@@ -469,7 +439,7 @@ describe('OAuthClientSettingsModal', () => {
     })
 
     it('should show success toast when remove succeeds', () => {
-      const mockOnClose = vi.fn()
+      const mockOnOpenChange = vi.fn()
       const configWithCustomEnabled = createMockOAuthConfig({
         system_configured: false,
         custom_enabled: true,
@@ -484,7 +454,7 @@ describe('OAuthClientSettingsModal', () => {
         <OAuthClientSettingsModal
           {...defaultProps}
           oauthConfig={configWithCustomEnabled}
-          onClose={mockOnClose}
+          onOpenChange={mockOnOpenChange}
         />,
       )
 
@@ -495,7 +465,7 @@ describe('OAuthClientSettingsModal', () => {
         type: 'success',
         message: 'pluginTrigger.modal.oauth.remove.success',
       })
-      expect(mockOnClose).toHaveBeenCalled()
+      expect(mockOnOpenChange).toHaveBeenCalledWith(false)
     })
 
     it('should show error toast when remove fails', () => {
@@ -522,22 +492,22 @@ describe('OAuthClientSettingsModal', () => {
   })
 
   describe('Modal Actions', () => {
-    it('should call onClose when close button is clicked', () => {
-      const mockOnClose = vi.fn()
-      render(<OAuthClientSettingsModal {...defaultProps} onClose={mockOnClose} />)
+    it('should call onOpenChange when close button is clicked', () => {
+      const mockOnOpenChange = vi.fn()
+      render(<OAuthClientSettingsModal {...defaultProps} onOpenChange={mockOnOpenChange} />)
 
-      fireEvent.click(screen.getByTestId('modal-close'))
+      fireEvent.click(getCloseButton())
 
-      expect(mockOnClose).toHaveBeenCalled()
+      expect(mockOnOpenChange.mock.calls[0]?.[0]).toBe(false)
     })
 
-    it('should call onClose when extra button (cancel) is clicked', () => {
-      const mockOnClose = vi.fn()
-      render(<OAuthClientSettingsModal {...defaultProps} onClose={mockOnClose} />)
+    it('should call onOpenChange when cancel button is clicked', () => {
+      const mockOnOpenChange = vi.fn()
+      render(<OAuthClientSettingsModal {...defaultProps} onOpenChange={mockOnOpenChange} />)
 
-      fireEvent.click(screen.getByTestId('modal-extra'))
+      fireEvent.click(getCancelButton())
 
-      expect(mockOnClose).toHaveBeenCalled()
+      expect(mockOnOpenChange).toHaveBeenCalledWith(false)
     })
   })
 
@@ -545,13 +515,13 @@ describe('OAuthClientSettingsModal', () => {
     it('should show default button text initially', () => {
       render(<OAuthClientSettingsModal {...defaultProps} />)
 
-      expect(screen.getByTestId('modal-confirm')).toHaveTextContent('plugin.auth.saveAndAuth')
+      expect(getConfirmButton()).toHaveTextContent('plugin.auth.saveAndAuth')
     })
 
     it('should show save only button text', () => {
       render(<OAuthClientSettingsModal {...defaultProps} />)
 
-      expect(screen.getByTestId('modal-cancel')).toHaveTextContent('plugin.auth.saveOnly')
+      expect(getSaveOnlyButton()).toHaveTextContent('plugin.auth.saveOnly')
     })
   })
 
@@ -591,7 +561,7 @@ describe('OAuthClientSettingsModal', () => {
     it('should handle undefined oauthConfig', () => {
       render(<OAuthClientSettingsModal {...defaultProps} oauthConfig={undefined} />)
 
-      expect(screen.getByTestId('modal')).toBeInTheDocument()
+      expect(getDialog()).toBeInTheDocument()
     })
 
     it('should handle missing provider', () => {
@@ -600,7 +570,7 @@ describe('OAuthClientSettingsModal', () => {
 
       render(<OAuthClientSettingsModal {...defaultProps} />)
 
-      expect(screen.getByTestId('modal')).toBeInTheDocument()
+      expect(getDialog()).toBeInTheDocument()
     })
   })
 
@@ -618,7 +588,7 @@ describe('OAuthClientSettingsModal', () => {
 
       render(<OAuthClientSettingsModal {...defaultProps} />)
 
-      fireEvent.click(screen.getByTestId('modal-confirm'))
+      fireEvent.click(getConfirmButton())
 
       // Verify OAuth flow was initiated
       expect(mockInitiateOAuth).toHaveBeenCalledWith(
@@ -644,13 +614,13 @@ describe('OAuthClientSettingsModal', () => {
 
       render(<OAuthClientSettingsModal {...defaultProps} />)
 
-      fireEvent.click(screen.getByTestId('modal-confirm'))
+      fireEvent.click(getConfirmButton())
 
       vi.advanceTimersByTime(3000)
       expect(mockVerifyBuilder).toHaveBeenCalled()
 
       // Should still be in pending state (polling continues)
-      expect(screen.getByTestId('modal-confirm')).toHaveTextContent('pluginTrigger.modal.common.authorizing')
+      expect(getConfirmButton()).toHaveTextContent('pluginTrigger.modal.common.authorizing')
 
       vi.useRealTimers()
     })
@@ -765,7 +735,7 @@ describe('OAuthClientSettingsModal', () => {
 
   describe('OAuth callback edge cases', () => {
     it('should not show success toast when OAuth callback returns falsy data', () => {
-      const mockOnClose = vi.fn()
+      const mockOnOpenChange = vi.fn()
       const mockShowOAuthCreateModal = vi.fn()
 
       mockConfigureOAuth.mockImplementation((params, { onSuccess }) => {
@@ -784,12 +754,12 @@ describe('OAuthClientSettingsModal', () => {
       render(
         <OAuthClientSettingsModal
           {...defaultProps}
-          onClose={mockOnClose}
+          onOpenChange={mockOnOpenChange}
           showOAuthCreateModal={mockShowOAuthCreateModal}
         />,
       )
 
-      fireEvent.click(screen.getByTestId('modal-confirm'))
+      fireEvent.click(getConfirmButton())
 
       // Should not show success toast or call callbacks
       expect(mockToastNotify).not.toHaveBeenCalledWith(
@@ -811,7 +781,7 @@ describe('OAuthClientSettingsModal', () => {
       const customCard = screen.getByText('pluginTrigger.subscription.addType.options.oauth.custom').closest('div')
       fireEvent.click(customCard!)
 
-      fireEvent.click(screen.getByTestId('modal-cancel'))
+      fireEvent.click(getSaveOnlyButton())
 
       expect(mockConfigureOAuth).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -829,7 +799,7 @@ describe('OAuthClientSettingsModal', () => {
       render(<OAuthClientSettingsModal {...defaultProps} />)
 
       // Default is already selected
-      fireEvent.click(screen.getByTestId('modal-cancel'))
+      fireEvent.click(getSaveOnlyButton())
 
       expect(mockConfigureOAuth).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -901,7 +871,7 @@ describe('OAuthClientSettingsModal', () => {
     it('should show saveAndAuth text by default', () => {
       render(<OAuthClientSettingsModal {...defaultProps} />)
 
-      expect(screen.getByTestId('modal-confirm')).toHaveTextContent('plugin.auth.saveAndAuth')
+      expect(getConfirmButton()).toHaveTextContent('plugin.auth.saveAndAuth')
     })
 
     it('should show authorizing text when authorization is pending', () => {
@@ -914,9 +884,9 @@ describe('OAuthClientSettingsModal', () => {
 
       render(<OAuthClientSettingsModal {...defaultProps} />)
 
-      fireEvent.click(screen.getByTestId('modal-confirm'))
+      fireEvent.click(getConfirmButton())
 
-      expect(screen.getByTestId('modal-confirm')).toHaveTextContent('pluginTrigger.modal.common.authorizing')
+      expect(getConfirmButton()).toHaveTextContent('pluginTrigger.modal.common.authorizing')
     })
   })
 
@@ -931,10 +901,10 @@ describe('OAuthClientSettingsModal', () => {
 
       render(<OAuthClientSettingsModal {...defaultProps} />)
 
-      fireEvent.click(screen.getByTestId('modal-confirm'))
+      fireEvent.click(getConfirmButton())
 
       // After failure, button text should return to default
-      expect(screen.getByTestId('modal-confirm')).toHaveTextContent('plugin.auth.saveAndAuth')
+      expect(getConfirmButton()).toHaveTextContent('plugin.auth.saveAndAuth')
     })
   })
 
@@ -1013,7 +983,7 @@ describe('OAuthClientSettingsModal', () => {
       const customCard = screen.getByText('pluginTrigger.subscription.addType.options.oauth.custom').closest('div')!
       fireEvent.click(customCard)
 
-      fireEvent.click(screen.getByTestId('modal-cancel'))
+      fireEvent.click(getSaveOnlyButton())
 
       // Should not call configureOAuth because form validation failed
       expect(mockConfigureOAuth).not.toHaveBeenCalled()
@@ -1035,7 +1005,7 @@ describe('OAuthClientSettingsModal', () => {
       // Switch to custom type
       fireEvent.click(screen.getByText('pluginTrigger.subscription.addType.options.oauth.custom').closest('div')!)
 
-      fireEvent.click(screen.getByTestId('modal-cancel'))
+      fireEvent.click(getSaveOnlyButton())
 
       expect(mockConfigureOAuth).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -1062,7 +1032,7 @@ describe('OAuthClientSettingsModal', () => {
       // Switch to custom type
       fireEvent.click(screen.getByText('pluginTrigger.subscription.addType.options.oauth.custom').closest('div')!)
 
-      fireEvent.click(screen.getByTestId('modal-cancel'))
+      fireEvent.click(getSaveOnlyButton())
 
       expect(mockConfigureOAuth).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -1089,7 +1059,7 @@ describe('OAuthClientSettingsModal', () => {
       // Switch to custom type
       fireEvent.click(screen.getByText('pluginTrigger.subscription.addType.options.oauth.custom').closest('div')!)
 
-      fireEvent.click(screen.getByTestId('modal-cancel'))
+      fireEvent.click(getSaveOnlyButton())
 
       expect(mockConfigureOAuth).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -1116,7 +1086,7 @@ describe('OAuthClientSettingsModal', () => {
       // Switch to custom type
       fireEvent.click(screen.getByText('pluginTrigger.subscription.addType.options.oauth.custom').closest('div')!)
 
-      fireEvent.click(screen.getByTestId('modal-cancel'))
+      fireEvent.click(getSaveOnlyButton())
 
       expect(mockConfigureOAuth).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -1148,7 +1118,7 @@ describe('OAuthClientSettingsModal', () => {
 
       render(<OAuthClientSettingsModal {...defaultProps} />)
 
-      fireEvent.click(screen.getByTestId('modal-confirm'))
+      fireEvent.click(getConfirmButton())
 
       // Advance timer to trigger polling
       await vi.advanceTimersByTimeAsync(3000)
@@ -1157,7 +1127,7 @@ describe('OAuthClientSettingsModal', () => {
 
       // Button text should show waitingJump after verified
       await waitFor(() => {
-        expect(screen.getByTestId('modal-confirm')).toHaveTextContent('pluginTrigger.modal.oauth.authorization.waitingJump')
+        expect(getConfirmButton()).toHaveTextContent('pluginTrigger.modal.oauth.authorization.waitingJump')
       })
 
       vi.useRealTimers()
@@ -1180,7 +1150,7 @@ describe('OAuthClientSettingsModal', () => {
 
       render(<OAuthClientSettingsModal {...defaultProps} />)
 
-      fireEvent.click(screen.getByTestId('modal-confirm'))
+      fireEvent.click(getConfirmButton())
 
       // First poll
       await vi.advanceTimersByTimeAsync(3000)
@@ -1191,7 +1161,7 @@ describe('OAuthClientSettingsModal', () => {
       expect(mockVerifyBuilder).toHaveBeenCalledTimes(2)
 
       // Should still be in authorizing state
-      expect(screen.getByTestId('modal-confirm')).toHaveTextContent('pluginTrigger.modal.common.authorizing')
+      expect(getConfirmButton()).toHaveTextContent('pluginTrigger.modal.common.authorizing')
 
       vi.useRealTimers()
     })
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/__tests__/use-oauth-client-state.spec.ts b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/__tests__/use-oauth-client-state.spec.ts
index 82eddf501d..4c88b1207c 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/__tests__/use-oauth-client-state.spec.ts
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/__tests__/use-oauth-client-state.spec.ts
@@ -137,7 +137,7 @@ describe('useOAuthClientState', () => {
   const defaultParams = {
     oauthConfig: createMockOAuthConfig(),
     providerName: 'test-provider',
-    onClose: vi.fn(),
+    onOpenChange: vi.fn(),
     showOAuthCreateModal: vi.fn(),
   }
 
@@ -310,20 +310,20 @@ describe('useOAuthClientState', () => {
       )
     })
 
-    it('should call onClose and show success toast on success', () => {
+    it('should call onOpenChange and show success toast on success', () => {
       mockDeleteOAuth.mockImplementation((provider, { onSuccess }) => onSuccess())
 
-      const onClose = vi.fn()
+      const onOpenChange = vi.fn()
       const { result } = renderHook(() => useOAuthClientState({
         ...defaultParams,
-        onClose,
+        onOpenChange,
       }))
 
       act(() => {
         result.current.handleRemove()
       })
 
-      expect(onClose).toHaveBeenCalled()
+      expect(onOpenChange).toHaveBeenCalledWith(false)
       expect(mockToastNotify).toHaveBeenCalledWith({
         type: 'success',
         message: 'pluginTrigger.modal.oauth.remove.success',
@@ -398,20 +398,20 @@ describe('useOAuthClientState', () => {
       )
     })
 
-    it('should show success toast and call onClose when needAuth is false', () => {
+    it('should show success toast and call onOpenChange when needAuth is false', () => {
       mockConfigureOAuth.mockImplementation((params, { onSuccess }) => onSuccess())
-      const onClose = vi.fn()
+      const onOpenChange = vi.fn()
 
       const { result } = renderHook(() => useOAuthClientState({
         ...defaultParams,
-        onClose,
+        onOpenChange,
       }))
 
       act(() => {
         result.current.handleSave(false)
       })
 
-      expect(onClose).toHaveBeenCalled()
+      expect(onOpenChange).toHaveBeenCalledWith(false)
       expect(mockToastNotify).toHaveBeenCalledWith({
         type: 'success',
         message: 'pluginTrigger.modal.oauth.save.success',
@@ -495,8 +495,8 @@ describe('useOAuthClientState', () => {
       })
     })
 
-    it('should call onClose and showOAuthCreateModal on callback success', () => {
-      const onClose = vi.fn()
+    it('should call onOpenChange and showOAuthCreateModal on callback success', () => {
+      const onOpenChange = vi.fn()
       const showOAuthCreateModal = vi.fn()
       const builder = createMockSubscriptionBuilder()
 
@@ -513,7 +513,7 @@ describe('useOAuthClientState', () => {
 
       const { result } = renderHook(() => useOAuthClientState({
         ...defaultParams,
-        onClose,
+        onOpenChange,
         showOAuthCreateModal,
       }))
 
@@ -521,7 +521,7 @@ describe('useOAuthClientState', () => {
         result.current.handleSave(true)
       })
 
-      expect(onClose).toHaveBeenCalled()
+      expect(onOpenChange).toHaveBeenCalledWith(false)
       expect(showOAuthCreateModal).toHaveBeenCalledWith(builder)
       expect(mockToastNotify).toHaveBeenCalledWith({
         type: 'success',
@@ -530,7 +530,7 @@ describe('useOAuthClientState', () => {
     })
 
     it('should not call callbacks when OAuth callback returns falsy', () => {
-      const onClose = vi.fn()
+      const onOpenChange = vi.fn()
       const showOAuthCreateModal = vi.fn()
 
       mockConfigureOAuth.mockImplementation((params, { onSuccess }) => onSuccess())
@@ -546,7 +546,7 @@ describe('useOAuthClientState', () => {
 
       const { result } = renderHook(() => useOAuthClientState({
         ...defaultParams,
-        onClose,
+        onOpenChange,
         showOAuthCreateModal,
       }))
 
@@ -554,7 +554,7 @@ describe('useOAuthClientState', () => {
         result.current.handleSave(true)
       })
 
-      expect(onClose).not.toHaveBeenCalled()
+      expect(onOpenChange).not.toHaveBeenCalled()
       expect(showOAuthCreateModal).not.toHaveBeenCalled()
     })
   })
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-oauth-client-state.ts b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-oauth-client-state.ts
index 25058e529c..e2bd284d15 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-oauth-client-state.ts
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/hooks/use-oauth-client-state.ts
@@ -13,16 +13,20 @@ import {
   useVerifyAndUpdateTriggerSubscriptionBuilder,
 } from '@/service/use-triggers'
 
-export enum AuthorizationStatusEnum {
-  Pending = 'pending',
-  Success = 'success',
-  Failed = 'failed',
-}
+export const AuthorizationStatusEnum = {
+  Pending: 'pending',
+  Success: 'success',
+  Failed: 'failed',
+} as const
 
-export enum ClientTypeEnum {
-  Default = 'default',
-  Custom = 'custom',
-}
+export type AuthorizationStatusEnum = typeof AuthorizationStatusEnum[keyof typeof AuthorizationStatusEnum]
+
+export const ClientTypeEnum = {
+  Default: 'default',
+  Custom: 'custom',
+} as const
+
+export type ClientTypeEnum = typeof ClientTypeEnum[keyof typeof ClientTypeEnum]
 
 const POLL_INTERVAL_MS = 3000
 
@@ -41,7 +45,7 @@ export const getErrorMessage = (error: unknown, fallback: string): string => {
 type UseOAuthClientStateParams = {
   oauthConfig?: TriggerOAuthConfig
   providerName: string
-  onClose: () => void
+  onOpenChange: (open: boolean) => void
   showOAuthCreateModal: (builder: TriggerSubscriptionBuilder) => void
 }
 
@@ -67,7 +71,7 @@ type UseOAuthClientStateReturn = {
 export const useOAuthClientState = ({
   oauthConfig,
   providerName,
-  onClose,
+  onOpenChange,
   showOAuthCreateModal,
 }: UseOAuthClientStateParams): UseOAuthClientStateReturn => {
   const { t } = useTranslation()
@@ -119,7 +123,7 @@ export const useOAuthClientState = ({
           if (!callbackData)
             return
           toast.success(t('modal.oauth.authorization.authSuccess', { ns: 'pluginTrigger' }))
-          onClose()
+          onOpenChange(false)
           showOAuthCreateModal(response.subscription_builder)
         })
       },
@@ -128,20 +132,20 @@ export const useOAuthClientState = ({
         toast.error(t('modal.oauth.authorization.authFailed', { ns: 'pluginTrigger' }))
       },
     })
-  }, [providerName, initiateOAuth, onClose, showOAuthCreateModal, t])
+  }, [providerName, initiateOAuth, onOpenChange, showOAuthCreateModal, t])
 
   // Remove handler
   const handleRemove = useCallback(() => {
     deleteOAuth(providerName, {
       onSuccess: () => {
-        onClose()
+        onOpenChange(false)
         toast.success(t('modal.oauth.remove.success', { ns: 'pluginTrigger' }))
       },
       onError: (error: unknown) => {
         toast.error(getErrorMessage(error, t('modal.oauth.remove.failed', { ns: 'pluginTrigger' })))
       },
     })
-  }, [providerName, deleteOAuth, onClose, t])
+  }, [providerName, deleteOAuth, onOpenChange, t])
 
   // Save handler
   const handleSave = useCallback((needAuth: boolean) => {
@@ -174,11 +178,11 @@ export const useOAuthClientState = ({
           handleAuthorization()
           return
         }
-        onClose()
+        onOpenChange(false)
         toast.success(t('modal.oauth.save.success', { ns: 'pluginTrigger' }))
       },
     })
-  }, [clientType, providerName, oauthClientSchema, oauthConfig?.params, configureOAuth, handleAuthorization, onClose, t])
+  }, [clientType, providerName, oauthClientSchema, oauthConfig?.params, configureOAuth, handleAuthorization, onOpenChange, t])
 
   // Polling effect for authorization verification
   useEffect(() => {
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
index ca1194e6ed..9091cd337c 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
@@ -68,9 +68,20 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
   const onClickClientSettings = useCallback((e: React.MouseEvent<HTMLDivElement | HTMLButtonElement>) => {
     e.stopPropagation()
     e.preventDefault()
+    setIsMenuOpen(false)
     showClientSettingsModal()
   }, [showClientSettingsModal])
 
+  const handleClientSettingsOpenChange = useCallback((open: boolean) => {
+    if (open) {
+      showClientSettingsModal()
+      return
+    }
+
+    hideClientSettingsModal()
+    refetchOAuthConfig()
+  }, [hideClientSettingsModal, refetchOAuthConfig, showClientSettingsModal])
+
   const allOptions = useMemo<CreateTypeOption[]>(() => {
     const showCustomBadge = oauthConfig?.custom_enabled && oauthConfig?.custom_configured
 
@@ -299,11 +310,9 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
       {isShowClientSettingsModal
         ? (
             <OAuthClientSettingsModal
+              open={isShowClientSettingsModal}
               oauthConfig={oauthConfig}
-              onClose={() => {
-                hideClientSettingsModal()
-                refetchOAuthConfig()
-              }}
+              onOpenChange={handleClientSettingsOpenChange}
               showOAuthCreateModal={(builder) => {
                 showCreateModal({
                   type: SupportedCreationMethods.OAUTH,
@@ -316,5 +325,3 @@ export const CreateSubscriptionButton = ({ buttonType = CreateButtonType.FULL_BU
     </>
   )
 }
-
-export { CreateButtonType, DEFAULT_METHOD } from './types'
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
index 450324ae40..3c8b8c6aa7 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/oauth-client.tsx
@@ -1,31 +1,36 @@
 'use client'
 import type { TriggerOAuthConfig, TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
 import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
-import {
-  RiClipboardLine,
-  RiInformation2Fill,
-} from '@remixicon/react'
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BaseForm } from '@/app/components/base/form/components/base'
-import Modal from '@/app/components/base/modal/modal'
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import { usePluginStore } from '../../store'
-import { ClientTypeEnum, useOAuthClientState } from './hooks/use-oauth-client-state'
+import { ClientTypeEnum, useOAuthClientState as useOAuthClientSettings } from './hooks/use-oauth-client-state'
 
 type Props = {
+  open: boolean
   oauthConfig?: TriggerOAuthConfig
-  onClose: () => void
+  onOpenChange: (open: boolean) => void
   showOAuthCreateModal: (builder: TriggerSubscriptionBuilder) => void
 }
 
 const CLIENT_TYPE_OPTIONS = [ClientTypeEnum.Default, ClientTypeEnum.Custom] as const
 
-export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreateModal }: Props) => {
+export const OAuthClientSettingsModal = ({ open, oauthConfig, onOpenChange, showOAuthCreateModal }: Props) => {
   const { t } = useTranslation()
   const detail = usePluginStore(state => state.detail)
   const providerName = detail?.provider || ''
+  const closeModal = useCallback(() => onOpenChange(false), [onOpenChange])
 
+  const oauthClientSettings = useOAuthClientSettings({
+    oauthConfig,
+    providerName,
+    onOpenChange,
+    showOAuthCreateModal,
+  })
   const {
     clientType,
     setClientType,
@@ -34,12 +39,7 @@ export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreate
     confirmButtonText,
     handleRemove,
     handleSave,
-  } = useOAuthClientState({
-    oauthConfig,
-    providerName,
-    onClose,
-    showOAuthCreateModal,
-  })
+  } = oauthClientSettings
 
   const isCustomClient = clientType === ClientTypeEnum.Custom
   const showRemoveButton = oauthConfig?.custom_enabled && oauthConfig?.params && isCustomClient
@@ -51,81 +51,116 @@ export const OAuthClientSettingsModal = ({ oauthConfig, onClose, showOAuthCreate
     toast.success(t('actionMsg.copySuccessfully', { ns: 'common' }))
   }
 
+  const title = t('modal.oauth.title', { ns: 'pluginTrigger' })
+
   return (
-    <Modal
-      title={t('modal.oauth.title', { ns: 'pluginTrigger' })}
-      confirmButtonText={confirmButtonText}
-      cancelButtonText={t('auth.saveOnly', { ns: 'plugin' })}
-      extraButtonText={t('operation.cancel', { ns: 'common' })}
-      showExtraButton
-      clickOutsideNotClose
-      extraButtonVariant="secondary"
-      onExtraButtonClick={onClose}
-      onClose={onClose}
-      onCancel={() => handleSave(false)}
-      onConfirm={() => handleSave(true)}
-      footerSlot={showRemoveButton && (
-        <div className="grow">
-          <Button
-            variant="secondary"
-            className="text-components-button-destructive-secondary-text"
-            onClick={handleRemove}
-          >
-            {t('operation.remove', { ns: 'common' })}
-          </Button>
-        </div>
-      )}
+    <Dialog
+      open={open}
+      disablePointerDismissal
+      onOpenChange={onOpenChange}
     >
-      <div className="mb-2 system-sm-medium text-text-secondary">
-        {t('subscription.addType.options.oauth.clientTitle', { ns: 'pluginTrigger' })}
-      </div>
-
-      {oauthConfig?.system_configured && (
-        <div className="mb-4 flex w-full items-start justify-between gap-2">
-          {CLIENT_TYPE_OPTIONS.map(option => (
-            <OptionCard
-              key={option}
-              title={t(`subscription.addType.options.oauth.${option}`, { ns: 'pluginTrigger' })}
-              onSelect={() => setClientType(option)}
-              selected={clientType === option}
-              className="flex-1"
-            />
-          ))}
-        </div>
-      )}
-
-      {showRedirectInfo && (
-        <div className="mb-4 flex items-start gap-3 rounded-xl bg-background-section-burn p-4">
-          <div className="rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg p-2 shadow-xs shadow-shadow-shadow-3">
-            <RiInformation2Fill className="h-5 w-5 shrink-0 text-text-accent" />
+      <DialogContent
+        backdropProps={{ forceRender: true }}
+        className="p-0"
+      >
+        <div data-testid="modal" className="flex max-h-[80dvh] flex-col">
+          <div className="relative shrink-0 p-6 pr-14 pb-3">
+            <DialogTitle data-testid="modal-title" className="title-2xl-semi-bold text-text-primary">
+              {title}
+            </DialogTitle>
+            <DialogCloseButton data-testid="modal-close" className="top-5 right-5 h-8 w-8 rounded-lg" />
           </div>
-          <div className="flex-1 text-text-secondary">
-            <div className="system-sm-regular leading-4 whitespace-pre-wrap">
-              {t('modal.oauthRedirectInfo', { ns: 'pluginTrigger' })}
+          <div data-testid="modal-content" className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
+            <div className="mb-2 system-sm-medium text-text-secondary">
+              {t('subscription.addType.options.oauth.clientTitle', { ns: 'pluginTrigger' })}
             </div>
-            <div className="my-1.5 system-sm-medium leading-4 break-all">
-              {oauthConfig?.redirect_uri}
+
+            {oauthConfig?.system_configured && (
+              <div className="mb-4 flex w-full items-start justify-between gap-2">
+                {CLIENT_TYPE_OPTIONS.map(option => (
+                  <OptionCard
+                    key={option}
+                    title={t(`subscription.addType.options.oauth.${option}`, { ns: 'pluginTrigger' })}
+                    onSelect={() => setClientType(option)}
+                    selected={clientType === option}
+                    className="flex-1"
+                  />
+                ))}
+              </div>
+            )}
+
+            {showRedirectInfo && (
+              <div className="mb-4 flex items-start gap-3 rounded-xl bg-background-section-burn p-4">
+                <div className="rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg p-2 shadow-xs shadow-shadow-shadow-3">
+                  <span aria-hidden="true" className="i-ri-information-2-fill h-5 w-5 shrink-0 text-text-accent" />
+                </div>
+                <div className="min-w-0 flex-1 text-text-secondary">
+                  <div className="system-sm-regular leading-4 whitespace-pre-wrap">
+                    {t('modal.oauthRedirectInfo', { ns: 'pluginTrigger' })}
+                  </div>
+                  <div className="my-1.5 system-sm-medium leading-4 break-all">
+                    {oauthConfig?.redirect_uri}
+                  </div>
+                  <Button
+                    variant="secondary"
+                    size="small"
+                    onClick={handleCopyRedirectUri}
+                  >
+                    <span aria-hidden="true" className="mr-1 i-ri-clipboard-line h-[14px] w-[14px]" />
+                    {t('operation.copy', { ns: 'common' })}
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            {showClientForm && (
+              <BaseForm
+                formSchemas={oauthClientSchema}
+                ref={clientFormRef}
+                labelClassName="system-sm-medium mb-2 block text-text-secondary"
+                formClassName="space-y-4"
+              />
+            )}
+          </div>
+          <div data-testid="modal-footer" className="flex shrink-0 justify-between p-6 pt-5">
+            <div>
+              {showRemoveButton && (
+                <Button
+                  variant="secondary"
+                  className="text-components-button-destructive-secondary-text"
+                  onClick={handleRemove}
+                >
+                  {t('operation.remove', { ns: 'common' })}
+                </Button>
+              )}
+            </div>
+            <div className="flex items-center">
+              <Button
+                data-testid="modal-extra"
+                variant="secondary"
+                onClick={closeModal}
+              >
+                {t('operation.cancel', { ns: 'common' })}
+              </Button>
+              <div className="mx-3 h-4 w-px bg-divider-regular"></div>
+              <Button
+                data-testid="modal-cancel"
+                onClick={() => handleSave(false)}
+              >
+                {t('auth.saveOnly', { ns: 'plugin' })}
+              </Button>
+              <Button
+                data-testid="modal-confirm"
+                className="ml-2"
+                variant="primary"
+                onClick={() => handleSave(true)}
+              >
+                {confirmButtonText}
+              </Button>
             </div>
-            <Button
-              variant="secondary"
-              size="small"
-              onClick={handleCopyRedirectUri}
-            >
-              <RiClipboardLine className="mr-1 h-[14px] w-[14px]" />
-              {t('operation.copy', { ns: 'common' })}
-            </Button>
           </div>
         </div>
-      )}
-
-      {showClientForm && (
-        <BaseForm
-          formSchemas={oauthClientSchema}
-          ref={clientFormRef}
-          labelClassName="system-sm-medium mb-2 block text-text-secondary"
-          formClassName="space-y-4"
-        />
-      )}
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/index.spec.tsx
index 6cf58b8972..e1544f6649 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/__tests__/index.spec.tsx
@@ -166,49 +166,6 @@ vi.mock('@/app/components/base/form/components/base', () => ({
   }),
 }))
 
-vi.mock('@/app/components/base/modal/modal', () => ({
-  default: ({
-    title,
-    confirmButtonText,
-    onClose,
-    onCancel,
-    onConfirm,
-    disabled,
-    children,
-    showExtraButton,
-    extraButtonText,
-    onExtraButtonClick,
-    bottomSlot,
-  }: {
-    title: string
-    confirmButtonText: string
-    onClose: () => void
-    onCancel: () => void
-    onConfirm: () => void
-    disabled?: boolean
-    children: React.ReactNode
-    showExtraButton?: boolean
-    extraButtonText?: string
-    onExtraButtonClick?: () => void
-    bottomSlot?: React.ReactNode
-  }) => (
-    <div data-testid="modal" data-title={title} data-disabled={disabled}>
-      <div data-testid="modal-content">{children}</div>
-      <button data-testid="modal-confirm-button" onClick={onConfirm} disabled={disabled}>
-        {confirmButtonText}
-      </button>
-      <button data-testid="modal-cancel-button" onClick={onCancel}>Cancel</button>
-      <button data-testid="modal-close-button" onClick={onClose}>Close</button>
-      {showExtraButton && (
-        <button data-testid="modal-extra-button" onClick={onExtraButtonClick}>
-          {extraButtonText}
-        </button>
-      )}
-      {!!bottomSlot && <div data-testid="modal-bottom-slot">{bottomSlot}</div>}
-    </div>
-  ),
-}))
-
 // ==================== Test Utilities ====================
 
 const createSubscription = (overrides: Partial<TriggerSubscription> = {}): TriggerSubscription => ({
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx
index f191ad41a8..f44a7db921 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/apikey-edit-modal.tsx
@@ -2,6 +2,8 @@
 import type { FormRefObject, FormSchema } from '@/app/components/base/form/types'
 import type { ParametersSchema, PluginDetail } from '@/app/components/plugins/types'
 import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
+import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import { isEqual } from 'es-toolkit/predicate'
 import { useMemo, useRef, useState } from 'react'
@@ -9,7 +11,6 @@ import { useTranslation } from 'react-i18next'
 import { EncryptedBottom } from '@/app/components/base/encrypted-bottom'
 import { BaseForm } from '@/app/components/base/form/components/base'
 import { FormTypeEnum } from '@/app/components/base/form/types'
-import Modal from '@/app/components/base/modal/modal'
 import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
 import { useUpdateTriggerSubscription, useVerifyTriggerSubscription } from '@/service/use-triggers'
 import { parsePluginErrorMessage } from '@/utils/error-parser'
@@ -23,10 +24,12 @@ type Props = {
   pluginDetail?: PluginDetail
 }
 
-enum EditStep {
-  EditCredentials = 'edit_credentials',
-  EditConfiguration = 'edit_configuration',
-}
+const EditStep = {
+  EditCredentials: 'edit_credentials',
+  EditConfiguration: 'edit_configuration',
+} as const
+
+type EditStep = typeof EditStep[keyof typeof EditStep]
 
 const normalizeFormType = (type: string): FormTypeEnum => {
   switch (type) {
@@ -52,7 +55,6 @@ const normalizeFormType = (type: string): FormTypeEnum => {
 
 const HIDDEN_SECRET_VALUE = '[__HIDDEN__]'
 
-// Check if all credential values are hidden (meaning nothing was changed)
 const areAllCredentialsHidden = (credentials: Record<string, unknown>): boolean => {
   return Object.values(credentials).every(value => value === HIDDEN_SECRET_VALUE)
 }
@@ -63,17 +65,36 @@ const StatusStep = ({ isActive, text, onClick, clickable }: {
   onClick?: () => void
   clickable?: boolean
 }) => {
-  return (
-    <div
-      className={`flex items-center gap-1 system-2xs-semibold-uppercase ${isActive
-        ? 'text-state-accent-solid'
-        : 'text-text-tertiary'} ${clickable ? 'cursor-pointer hover:text-text-secondary' : ''}`}
-      onClick={clickable ? onClick : undefined}
-    >
-      {isActive && (
-        <div className="h-1 w-1 rounded-full bg-state-accent-solid"></div>
-      )}
+  const className = `flex items-center gap-1 system-2xs-semibold-uppercase ${isActive
+    ? 'text-state-accent-solid'
+    : 'text-text-tertiary'} ${clickable ? 'cursor-pointer rounded bg-transparent p-0 text-left hover:text-text-secondary focus-visible:text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden' : ''}`
+
+  const content = (
+    <>
+      {isActive
+        ? (
+            <div className="h-1 w-1 rounded-full bg-state-accent-solid"></div>
+          )
+        : null}
       {text}
+    </>
+  )
+
+  if (clickable) {
+    return (
+      <button
+        type="button"
+        className={className}
+        onClick={onClick}
+      >
+        {content}
+      </button>
+    )
+  }
+
+  return (
+    <div className={className}>
+      {content}
     </div>
   )
 }
@@ -260,78 +281,123 @@ export const ApiKeyEditModal = ({ onClose, subscription, pluginDetail }: Props)
     })
   }, [parametersSchema, subscription.parameters, subscription.id, detail?.plugin_id, detail?.provider, verifiedCredentials])
 
-  const getConfirmButtonText = () => {
+  const confirmButtonText = (() => {
     if (currentStep === EditStep.EditCredentials)
       return isVerifying ? t('modal.common.verifying', { ns: 'pluginTrigger' }) : t('modal.common.verify', { ns: 'pluginTrigger' })
 
     return isUpdating ? t('operation.saving', { ns: 'common' }) : t('operation.save', { ns: 'common' })
-  }
+  })()
 
   const handleBack = () => {
     setCurrentStep(EditStep.EditCredentials)
     setVerifiedCredentials(null)
   }
 
+  const isDisabled = isUpdating || isVerifying
+  const title = t('subscription.list.item.actions.edit.title', { ns: 'pluginTrigger' })
+
   return (
-    <Modal
-      title={t('subscription.list.item.actions.edit.title', { ns: 'pluginTrigger' })}
-      confirmButtonText={getConfirmButtonText()}
-      onClose={onClose}
-      onCancel={onClose}
-      onConfirm={handleConfirm}
-      disabled={isUpdating || isVerifying}
-      showExtraButton={currentStep === EditStep.EditConfiguration}
-      extraButtonText={t('modal.common.back', { ns: 'pluginTrigger' })}
-      extraButtonVariant="secondary"
-      onExtraButtonClick={handleBack}
-      clickOutsideNotClose
-      wrapperClassName="z-101!"
-      bottomSlot={currentStep === EditStep.EditCredentials ? <EncryptedBottom /> : null}
+    <Dialog
+      open
+      disablePointerDismissal
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
     >
-      {pluginDetail && (
-        <ReadmeEntrance pluginDetail={pluginDetail} showType={ReadmeShowType.modal} />
-      )}
+      <DialogContent
+        backdropProps={{ forceRender: true }}
+        className="p-0"
+      >
+        <div data-testid="modal" data-title={title} data-disabled={isDisabled} className="flex max-h-[80dvh] flex-col">
+          <div className="relative shrink-0 p-6 pr-14 pb-3">
+            <DialogTitle data-testid="modal-title" className="title-2xl-semi-bold text-text-primary">
+              {title}
+            </DialogTitle>
+            <DialogCloseButton data-testid="modal-close-button" className="top-5 right-5 h-8 w-8 rounded-lg" />
+          </div>
+          <div data-testid="modal-content" className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
+            {pluginDetail && (
+              <ReadmeEntrance pluginDetail={pluginDetail} showType={ReadmeShowType.modal} />
+            )}
 
-      {/* Multi-step indicator */}
-      <MultiSteps currentStep={currentStep} onStepClick={handleBack} />
+            <MultiSteps currentStep={currentStep} onStepClick={handleBack} />
 
-      {/* Step 1: Edit Credentials */}
-      {currentStep === EditStep.EditCredentials && (
-        <div className="mb-4">
-          {credentialsFormSchemas.length > 0 && (
-            <BaseForm
-              formSchemas={credentialsFormSchemas}
-              ref={credentialsFormRef}
-              labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
-              formClassName="space-y-4"
-              preventDefaultSubmit={true}
-            />
+            {currentStep === EditStep.EditCredentials
+              ? (
+                  <div className="mb-4">
+                    {credentialsFormSchemas.length > 0 && (
+                      <BaseForm
+                        formSchemas={credentialsFormSchemas}
+                        ref={credentialsFormRef}
+                        labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
+                        formClassName="space-y-4"
+                        preventDefaultSubmit={true}
+                      />
+                    )}
+                  </div>
+                )
+              : (
+                  <div className="max-h-[70vh]">
+                    <BaseForm
+                      formSchemas={basicFormSchemas}
+                      ref={basicFormRef}
+                      labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
+                      formClassName="space-y-4 mb-4"
+                    />
+
+                    {parametersFormSchemas.length > 0 && (
+                      <BaseForm
+                        formSchemas={parametersFormSchemas}
+                        ref={parametersFormRef}
+                        labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
+                        formClassName="space-y-4"
+                      />
+                    )}
+                  </div>
+                )}
+          </div>
+          <div className="flex shrink-0 justify-between p-6 pt-5">
+            <div />
+            <div className="flex items-center">
+              {currentStep === EditStep.EditConfiguration && (
+                <>
+                  <Button
+                    data-testid="modal-extra-button"
+                    variant="secondary"
+                    onClick={handleBack}
+                    disabled={isDisabled}
+                  >
+                    {t('modal.common.back', { ns: 'pluginTrigger' })}
+                  </Button>
+                  <div className="mx-3 h-4 w-px bg-divider-regular"></div>
+                </>
+              )}
+              <Button
+                data-testid="modal-cancel-button"
+                onClick={onClose}
+                disabled={isDisabled}
+              >
+                {t('operation.cancel', { ns: 'common' })}
+              </Button>
+              <Button
+                data-testid="modal-confirm-button"
+                className="ml-2"
+                variant="primary"
+                onClick={handleConfirm}
+                disabled={isDisabled}
+              >
+                {confirmButtonText}
+              </Button>
+            </div>
+          </div>
+          {currentStep === EditStep.EditCredentials && (
+            <div data-testid="modal-bottom-slot" className="shrink-0">
+              <EncryptedBottom />
+            </div>
           )}
         </div>
-      )}
-
-      {/* Step 2: Edit Configuration */}
-      {currentStep === EditStep.EditConfiguration && (
-        <div className="max-h-[70vh]">
-          {/* Basic form: subscription name and callback URL */}
-          <BaseForm
-            formSchemas={basicFormSchemas}
-            ref={basicFormRef}
-            labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
-            formClassName="space-y-4 mb-4"
-          />
-
-          {/* Parameters */}
-          {parametersFormSchemas.length > 0 && (
-            <BaseForm
-              formSchemas={parametersFormSchemas}
-              ref={parametersFormRef}
-              labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
-              formClassName="space-y-4"
-            />
-          )}
-        </div>
-      )}
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx
index 3b3fa1082f..774eaa9fe9 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/manual-edit-modal.tsx
@@ -2,13 +2,14 @@
 import type { FormRefObject, FormSchema } from '@/app/components/base/form/types'
 import type { ParametersSchema, PluginDetail } from '@/app/components/plugins/types'
 import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
+import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import { isEqual } from 'es-toolkit/predicate'
 import { useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BaseForm } from '@/app/components/base/form/components/base'
 import { FormTypeEnum } from '@/app/components/base/form/types'
-import Modal from '@/app/components/base/modal/modal'
 import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
 import { useUpdateTriggerSubscription } from '@/service/use-triggers'
 import { ReadmeShowType } from '../../../readme-panel/store'
@@ -133,26 +134,63 @@ export const ManualEditModal = ({ onClose, subscription, pluginDetail }: Props)
     })),
   ], [t, subscription.name, subscription.endpoint, subscription.properties, propertiesSchema])
 
+  const title = t('subscription.list.item.actions.edit.title', { ns: 'pluginTrigger' })
+  const confirmButtonText = isUpdating ? t('operation.saving', { ns: 'common' }) : t('operation.save', { ns: 'common' })
+
   return (
-    <Modal
-      title={t('subscription.list.item.actions.edit.title', { ns: 'pluginTrigger' })}
-      confirmButtonText={isUpdating ? t('operation.saving', { ns: 'common' }) : t('operation.save', { ns: 'common' })}
-      onClose={onClose}
-      onCancel={onClose}
-      onConfirm={handleConfirm}
-      disabled={isUpdating}
-      clickOutsideNotClose
-      wrapperClassName="z-101!"
+    <Dialog
+      open
+      disablePointerDismissal
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
     >
-      {pluginDetail && (
-        <ReadmeEntrance pluginDetail={pluginDetail} showType={ReadmeShowType.modal} />
-      )}
-      <BaseForm
-        formSchemas={formSchemas}
-        ref={formRef}
-        labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
-        formClassName="space-y-4"
-      />
-    </Modal>
+      <DialogContent
+        backdropProps={{ forceRender: true }}
+        className="p-0"
+      >
+        <div data-testid="modal" data-title={title} data-disabled={isUpdating} className="flex max-h-[80dvh] flex-col">
+          <div className="relative shrink-0 p-6 pr-14 pb-3">
+            <DialogTitle data-testid="modal-title" className="title-2xl-semi-bold text-text-primary">
+              {title}
+            </DialogTitle>
+            <DialogCloseButton data-testid="modal-close-button" className="top-5 right-5 h-8 w-8 rounded-lg" />
+          </div>
+          <div data-testid="modal-content" className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
+            {pluginDetail && (
+              <ReadmeEntrance pluginDetail={pluginDetail} showType={ReadmeShowType.modal} />
+            )}
+            <BaseForm
+              formSchemas={formSchemas}
+              ref={formRef}
+              labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
+              formClassName="space-y-4"
+            />
+          </div>
+          <div className="flex shrink-0 justify-between p-6 pt-5">
+            <div />
+            <div className="flex items-center">
+              <Button
+                data-testid="modal-cancel-button"
+                onClick={onClose}
+                disabled={isUpdating}
+              >
+                {t('operation.cancel', { ns: 'common' })}
+              </Button>
+              <Button
+                data-testid="modal-confirm-button"
+                className="ml-2"
+                variant="primary"
+                onClick={handleConfirm}
+                disabled={isUpdating}
+              >
+                {confirmButtonText}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx
index 355a132bd2..f78933a9ff 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/edit/oauth-edit-modal.tsx
@@ -2,13 +2,14 @@
 import type { FormRefObject, FormSchema } from '@/app/components/base/form/types'
 import type { ParametersSchema, PluginDetail } from '@/app/components/plugins/types'
 import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
+import { Button } from '@langgenius/dify-ui/button'
+import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { toast } from '@langgenius/dify-ui/toast'
 import { isEqual } from 'es-toolkit/predicate'
 import { useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { BaseForm } from '@/app/components/base/form/components/base'
 import { FormTypeEnum } from '@/app/components/base/form/types'
-import Modal from '@/app/components/base/modal/modal'
 import { ReadmeEntrance } from '@/app/components/plugins/readme-panel/entrance'
 import { useUpdateTriggerSubscription } from '@/service/use-triggers'
 import { ReadmeShowType } from '../../../readme-panel/store'
@@ -147,26 +148,63 @@ export const OAuthEditModal = ({ onClose, subscription, pluginDetail }: Props) =
     }),
   ], [t, subscription.name, subscription.endpoint, subscription.parameters, subscription.id, parametersSchema, detail?.plugin_id, detail?.provider])
 
+  const title = t('subscription.list.item.actions.edit.title', { ns: 'pluginTrigger' })
+  const confirmButtonText = isUpdating ? t('operation.saving', { ns: 'common' }) : t('operation.save', { ns: 'common' })
+
   return (
-    <Modal
-      title={t('subscription.list.item.actions.edit.title', { ns: 'pluginTrigger' })}
-      confirmButtonText={isUpdating ? t('operation.saving', { ns: 'common' }) : t('operation.save', { ns: 'common' })}
-      onClose={onClose}
-      onCancel={onClose}
-      onConfirm={handleConfirm}
-      disabled={isUpdating}
-      clickOutsideNotClose
-      wrapperClassName="z-101!"
+    <Dialog
+      open
+      disablePointerDismissal
+      onOpenChange={(open) => {
+        if (!open)
+          onClose()
+      }}
     >
-      {pluginDetail && (
-        <ReadmeEntrance pluginDetail={pluginDetail} showType={ReadmeShowType.modal} />
-      )}
-      <BaseForm
-        formSchemas={formSchemas}
-        ref={formRef}
-        labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
-        formClassName="space-y-4"
-      />
-    </Modal>
+      <DialogContent
+        backdropProps={{ forceRender: true }}
+        className="p-0"
+      >
+        <div data-testid="modal" data-title={title} data-disabled={isUpdating} className="flex max-h-[80dvh] flex-col">
+          <div className="relative shrink-0 p-6 pr-14 pb-3">
+            <DialogTitle data-testid="modal-title" className="title-2xl-semi-bold text-text-primary">
+              {title}
+            </DialogTitle>
+            <DialogCloseButton data-testid="modal-close-button" className="top-5 right-5 h-8 w-8 rounded-lg" />
+          </div>
+          <div data-testid="modal-content" className="min-h-0 flex-1 overflow-y-auto px-6 py-3">
+            {pluginDetail && (
+              <ReadmeEntrance pluginDetail={pluginDetail} showType={ReadmeShowType.modal} />
+            )}
+            <BaseForm
+              formSchemas={formSchemas}
+              ref={formRef}
+              labelClassName="system-sm-medium mb-2 flex items-center gap-1 text-text-primary"
+              formClassName="space-y-4"
+            />
+          </div>
+          <div className="flex shrink-0 justify-between p-6 pt-5">
+            <div />
+            <div className="flex items-center">
+              <Button
+                data-testid="modal-cancel-button"
+                onClick={onClose}
+                disabled={isUpdating}
+              >
+                {t('operation.cancel', { ns: 'common' })}
+              </Button>
+              <Button
+                data-testid="modal-confirm-button"
+                className="ml-2"
+                variant="primary"
+                onClick={handleConfirm}
+                disabled={isUpdating}
+              >
+                {confirmButtonText}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
   )
 }
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
index 45d4c486b7..66dfabb4db 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
@@ -4,7 +4,8 @@ import { cn } from '@langgenius/dify-ui/cn'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { CreateButtonType, CreateSubscriptionButton } from './create'
+import { CreateSubscriptionButton } from './create'
+import { CreateButtonType } from './create/types'
 import SubscriptionCard from './subscription-card'
 import { useSubscriptionList } from './use-subscription-list'
 
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
index 993c9f36cb..06b0724247 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
@@ -7,7 +7,8 @@ import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
-import { CreateButtonType, CreateSubscriptionButton } from './create'
+import { CreateSubscriptionButton } from './create'
+import { CreateButtonType } from './create/types'
 import { DeleteConfirm } from './delete-confirm'
 import { useSubscriptionList } from './use-subscription-list'
 
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/__tests__/index.spec.tsx
index 67ade347e8..6c58405f4a 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/__tests__/index.spec.tsx
@@ -152,20 +152,20 @@ vi.mock('@/app/components/plugins/plugin-auth', () => ({
   ),
 }))
 
-// Portal components need mocking for controlled positioning in tests
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({
+// Popover positioning is mocked for deterministic panel tests.
+vi.mock('@langgenius/dify-ui/popover', () => ({
+  Popover: ({
     children,
     open,
   }: {
     children: ReactNode
     open?: boolean
   }) => (
-    <div data-testid="portal-to-follow-elem" data-open={open}>
+    <div data-testid="popover" data-open={open}>
       {children}
     </div>
   ),
-  PortalToFollowElemTrigger: ({
+  PopoverTrigger: ({
     children,
     render,
     onClick,
@@ -174,12 +174,19 @@ vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
     render?: ReactNode
     onClick?: () => void
   }) => (
-    <div data-testid="portal-trigger" onClick={onClick}>
-      {render ?? children}
+    <div data-testid="popover-trigger" onClick={onClick}>
+      {render
+        ? (
+            <>
+              {render}
+              {children}
+            </>
+          )
+        : children}
     </div>
   ),
-  PortalToFollowElemContent: ({ children }: { children: ReactNode }) => (
-    <div data-testid="portal-content">{children}</div>
+  PopoverContent: ({ children }: { children: ReactNode }) => (
+    <div data-testid="popover-content">{children}</div>
   ),
 }))
 
@@ -254,11 +261,15 @@ vi.mock('@/app/components/workflow/block-icon', () => ({
   default: () => <div data-testid="block-icon" />,
 }))
 
-// Mock Modal - headlessui Dialog has complex behavior
-vi.mock('@/app/components/base/modal', () => ({
-  default: ({ children, isShow }: { children: ReactNode, isShow: boolean }) => (
-    isShow ? <div data-testid="modal">{children}</div> : null
+// Mock Dialog to avoid Base UI focus/portal behavior in tests
+vi.mock('@langgenius/dify-ui/dialog', () => ({
+  Dialog: ({ children, open }: { children: ReactNode, open?: boolean }) => (
+    open ? <div>{children}</div> : null
   ),
+  DialogContent: ({ children }: { children: ReactNode }) => (
+    <div data-testid="modal">{children}</div>
+  ),
+  DialogTitle: ({ children }: { children: ReactNode }) => <div>{children}</div>,
 }))
 
 // Mock VisualEditor - complex component with many dependencies
@@ -1372,7 +1383,7 @@ describe('ToolSelector Component', () => {
   describe('Rendering', () => {
     it('should render without crashing', () => {
       render(<ToolSelector {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
+      expect(screen.getByTestId('popover')).toBeInTheDocument()
     })
 
     it('should render ToolTrigger when no value and no trigger', () => {
@@ -1394,7 +1405,7 @@ describe('ToolSelector Component', () => {
 
     it('should render panel content', () => {
       render(<ToolSelector {...defaultProps} />, { wrapper: createWrapper() })
-      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+      expect(screen.getByTestId('popover-content')).toBeInTheDocument()
     })
 
     it('should render tool base form in panel', () => {
@@ -1426,7 +1437,7 @@ describe('ToolSelector Component', () => {
         { wrapper: createWrapper() },
       )
       // The component should receive and use the nodeId
-      expect(screen.getByTestId('portal-content')).toBeInTheDocument()
+      expect(screen.getByTestId('popover-content')).toBeInTheDocument()
     })
   })
 
@@ -1442,7 +1453,7 @@ describe('ToolSelector Component', () => {
         />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByTestId('portal-to-follow-elem')).toHaveAttribute('data-open', 'true')
+      expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'true')
     })
 
     it('should use internal state when no trigger', () => {
@@ -1450,7 +1461,7 @@ describe('ToolSelector Component', () => {
         <ToolSelector {...defaultProps} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByTestId('portal-to-follow-elem')).toHaveAttribute('data-open', 'false')
+      expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
     })
   })
 
@@ -1503,9 +1514,9 @@ describe('ToolSelector Component', () => {
       )
 
       // Click on portal trigger
-      fireEvent.click(screen.getByTestId('portal-trigger'))
+      fireEvent.click(screen.getByTestId('popover-trigger'))
       // State should not change when disabled
-      expect(screen.getByTestId('portal-to-follow-elem')).toHaveAttribute('data-open', 'false')
+      expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
     })
   })
 
@@ -1523,7 +1534,7 @@ describe('ToolSelector Component', () => {
       rerender(<ToolSelector {...defaultProps} onSelect={onSelect} />)
 
       // Component should not trigger unnecessary re-renders
-      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
+      expect(screen.getByTestId('popover')).toBeInTheDocument()
     })
   })
 })
@@ -1541,7 +1552,7 @@ describe('Edge Cases', () => {
         <ToolSelector {...defaultProps} value={undefined} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
+      expect(screen.getByTestId('popover')).toBeInTheDocument()
     })
 
     it('should handle undefined selectedTools', () => {
@@ -1549,7 +1560,7 @@ describe('Edge Cases', () => {
         <ToolSelector {...defaultProps} selectedTools={undefined} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
+      expect(screen.getByTestId('popover')).toBeInTheDocument()
     })
 
     it('should handle empty nodeOutputVars', () => {
@@ -1557,7 +1568,7 @@ describe('Edge Cases', () => {
         <ToolSelector {...defaultProps} nodeOutputVars={[]} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
+      expect(screen.getByTestId('popover')).toBeInTheDocument()
     })
 
     it('should handle empty availableNodes', () => {
@@ -1565,7 +1576,7 @@ describe('Edge Cases', () => {
         <ToolSelector {...defaultProps} availableNodes={[]} />,
         { wrapper: createWrapper() },
       )
-      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
+      expect(screen.getByTestId('popover')).toBeInTheDocument()
     })
   })
 
@@ -2515,11 +2526,11 @@ describe('Additional Coverage Tests', () => {
       )
 
       // Click on the trigger
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
       // Should still be closed because disabled
-      expect(screen.getByTestId('portal-to-follow-elem')).toHaveAttribute('data-open', 'false')
+      expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
     })
 
     it('should handle trigger click when provider and tool exist', () => {
@@ -2530,10 +2541,10 @@ describe('Additional Coverage Tests', () => {
       )
 
       // Without provider/tool, clicking should not open
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
-      expect(screen.getByTestId('portal-to-follow-elem')).toHaveAttribute('data-open', 'false')
+      expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
     })
 
     it('should early return from handleTriggerClick when disabled', () => {
@@ -2546,11 +2557,11 @@ describe('Additional Coverage Tests', () => {
       // Rerender with disabled=true
       rerender(<ToolSelector {...defaultProps} disabled={true} />)
 
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
       // Verify it stays closed
-      expect(screen.getByTestId('portal-to-follow-elem')).toHaveAttribute('data-open', 'false')
+      expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
     })
 
     it('should set isShow when clicked with valid provider and tool', () => {
@@ -2584,12 +2595,12 @@ describe('Additional Coverage Tests', () => {
       )
 
       // Click on the trigger - this should call handleTriggerClick
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
       // Now that we have provider and tool, the click should work
       // This tests lines 106-108 and 148
-      expect(screen.getByTestId('portal-to-follow-elem')).toBeInTheDocument()
+      expect(screen.getByTestId('popover')).toBeInTheDocument()
     })
 
     it('should not open when disabled is true even with valid provider', () => {
@@ -2622,11 +2633,11 @@ describe('Additional Coverage Tests', () => {
       )
 
       // Click should not open because disabled=true
-      const trigger = screen.getByTestId('portal-trigger')
+      const trigger = screen.getByTestId('popover-trigger')
       fireEvent.click(trigger)
 
       // Verify it stays closed due to disabled
-      expect(screen.getByTestId('portal-to-follow-elem')).toHaveAttribute('data-open', 'false')
+      expect(screen.getByTestId('popover')).toHaveAttribute('data-open', 'false')
     })
   })
 
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/schema-modal.spec.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/schema-modal.spec.tsx
index 86158ab950..e8a2ee8318 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/schema-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/__tests__/schema-modal.spec.tsx
@@ -53,8 +53,7 @@ describe('SchemaModal', () => {
     expect(screen.getByText('workflow.nodes.agent.parameterSchema')).toBeInTheDocument()
     expect(screen.getByTestId('visual-editor')).toHaveTextContent('response')
 
-    const closeButton = document.body.querySelector('div.absolute.right-5.top-5')
-    fireEvent.click(closeButton!)
+    fireEvent.click(screen.getByRole('button', { name: 'common.operation.close' }))
 
     expect(onClose).toHaveBeenCalled()
   })
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/schema-modal.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/schema-modal.tsx
index c01848ea59..6ea17dc565 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/components/schema-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/components/schema-modal.tsx
@@ -1,10 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import type { SchemaRoot } from '@/app/components/workflow/nodes/llm/types'
-import { RiCloseLine } from '@remixicon/react'
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@langgenius/dify-ui/dialog'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import Modal from '@/app/components/base/modal'
 import VisualEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor'
 import { MittProvider, VisualEditorContextProvider } from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/context'
 
@@ -23,38 +26,43 @@ const SchemaModal: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <Modal
-      isShow={isShow}
-      onClose={onClose}
-      className="max-w-[960px] p-0"
-      wrapperClassName="z-9999"
+    <Dialog
+      open={isShow}
+      onOpenChange={open => !open && onClose()}
     >
-      <div className="pb-6">
-        {/* Header */}
-        <div className="relative flex p-6 pr-14 pb-3">
-          <div className="grow truncate title-2xl-semi-bold text-text-primary">
-            {t('nodes.agent.parameterSchema', { ns: 'workflow' })}
+      <DialogContent className="w-full max-w-[960px] p-0">
+        <div className="pb-6">
+          {/* Header */}
+          <div className="relative flex p-6 pr-14 pb-3">
+            <DialogTitle className="grow truncate title-2xl-semi-bold text-text-primary">
+              {t('nodes.agent.parameterSchema', { ns: 'workflow' })}
+            </DialogTitle>
+            <button
+              type="button"
+              aria-label={t('operation.close', { ns: 'common' })}
+              className="absolute top-5 right-5 flex h-8 w-8 items-center justify-center p-1.5"
+              onClick={onClose}
+            >
+              <span className="i-ri-close-line h-[18px] w-[18px] text-text-tertiary" />
+            </button>
           </div>
-          <div className="absolute top-5 right-5 flex h-8 w-8 items-center justify-center p-1.5" onClick={onClose}>
-            <RiCloseLine className="h-[18px] w-[18px] text-text-tertiary" />
+          {/* Content */}
+          <div className="flex max-h-[700px] overflow-y-auto px-6 py-2">
+            <MittProvider>
+              <VisualEditorContextProvider>
+                <VisualEditor
+                  className="w-full"
+                  schema={schema}
+                  rootName={rootName}
+                  readOnly
+                >
+                </VisualEditor>
+              </VisualEditorContextProvider>
+            </MittProvider>
           </div>
         </div>
-        {/* Content */}
-        <div className="flex max-h-[700px] overflow-y-auto px-6 py-2">
-          <MittProvider>
-            <VisualEditorContextProvider>
-              <VisualEditor
-                className="w-full"
-                schema={schema}
-                rootName={rootName}
-                readOnly
-              >
-              </VisualEditor>
-            </VisualEditorContextProvider>
-          </MittProvider>
-        </div>
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
 export default React.memo(SchemaModal)
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index 0ea14ecdfc..40166ff9ec 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -1,21 +1,18 @@
 'use client'
-import type {
-  OffsetOptions,
-  Placement,
-} from '@floating-ui/react'
+import type { OffsetOptions } from '@floating-ui/react'
+import type { Placement } from '@langgenius/dify-ui/popover'
 import type { FC } from 'react'
 import type { Node } from 'reactflow'
 import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-// eslint-disable-next-line no-restricted-imports -- legacy overlay migration is handled separately from this change
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import { CollectionType } from '@/app/components/tools/types'
 import Link from '@/next/link'
 import {
@@ -72,6 +69,8 @@ const ToolSelector: FC<Props> = ({
   nodeId = '',
 }) => {
   const { t } = useTranslation()
+  const sideOffset = typeof offset === 'number' ? offset : (typeof offset === 'function' ? 0 : (offset?.mainAxis ?? 0))
+  const alignOffset = typeof offset === 'number' ? 0 : (typeof offset === 'function' ? 0 : (offset?.crossAxis ?? 0))
 
   // Use custom hook for state management
   const state = useToolSelectorState({ value, onSelect, onSelectMultiple })
@@ -103,15 +102,14 @@ const ToolSelector: FC<Props> = ({
     getSettingsValue,
   } = state
 
-  const handleTriggerClick = () => {
-    if (disabled)
-      return
-    setIsShow(true)
-  }
-
   // Determine portal open state based on controlled vs uncontrolled mode
   const portalOpen = trigger ? controlledState : isShow
   const onPortalOpenChange = trigger ? onControlledStateChange : setIsShow
+  const handlePortalOpenChange = (nextOpen: boolean) => {
+    if (nextOpen && (disabled || !currentProvider || !currentTool))
+      return
+    onPortalOpenChange?.(nextOpen)
+  }
 
   // Build error tooltip content
   const renderErrorTip = () => (
@@ -135,19 +133,13 @@ const ToolSelector: FC<Props> = ({
   )
 
   return (
-    <PortalToFollowElem
-      placement={placement}
-      offset={offset}
+    <Popover
       open={portalOpen}
-      onOpenChange={onPortalOpenChange}
+      onOpenChange={handlePortalOpenChange}
     >
-      <PortalToFollowElemTrigger
-        className="w-full"
-        onClick={() => {
-          if (!currentProvider || !currentTool)
-            return
-          handleTriggerClick()
-        }}
+      <PopoverTrigger
+        nativeButton={false}
+        render={<div className="w-full" />}
       >
         {trigger}
 
@@ -183,9 +175,14 @@ const ToolSelector: FC<Props> = ({
             errorTip={renderErrorTip()}
           />
         )}
-      </PortalToFollowElemTrigger>
+      </PopoverTrigger>
 
-      <PortalToFollowElemContent className="z-10">
+      <PopoverContent
+        placement={placement}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        popupClassName="border-none bg-transparent shadow-none"
+      >
         <div className={cn(
           'relative max-h-[642px] min-h-20 w-[361px] rounded-xl',
           'border-[0.5px] border-components-panel-border bg-components-panel-bg-blur',
@@ -240,8 +237,8 @@ const ToolSelector: FC<Props> = ({
             onParamsFormChange={handleParamsFormChange}
           />
         </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      </PopoverContent>
+    </Popover>
   )
 }
 
diff --git a/web/app/components/plugins/plugin-item/__tests__/action.spec.tsx b/web/app/components/plugins/plugin-item/__tests__/action.spec.tsx
index b0ecc839b3..32e2e8065c 100644
--- a/web/app/components/plugins/plugin-item/__tests__/action.spec.tsx
+++ b/web/app/components/plugins/plugin-item/__tests__/action.spec.tsx
@@ -82,15 +82,7 @@ vi.mock('../../plugin-page/plugin-info', () => ({
   ),
 }))
 
-// Mock Tooltip - uses PortalToFollowElem which requires complex floating UI setup
-// Simplified mock that just renders children with tooltip content accessible
-vi.mock('../../../base/tooltip', () => ({
-  default: ({ children, popupContent }: { children: React.ReactNode, popupContent: string }) => (
-    <div data-testid="tooltip" data-popup-content={popupContent}>
-      {children}
-    </div>
-  ),
-}))
+vi.mock('@langgenius/dify-ui/tooltip', () => import('@/__mocks__/base-ui-tooltip'))
 
 // ==================== Test Utilities ====================
 
@@ -236,8 +228,17 @@ describe('Action Component', () => {
       render(<Action {...props} />)
 
       // Assert
-      const tooltips = screen.getAllByTestId('tooltip')
-      expect(tooltips).toHaveLength(3)
+      const buttons = getActionButtons()
+      fireEvent.mouseEnter(buttons[0]!)
+      expect(screen.getByText('plugin.action.checkForUpdates'))!.toBeInTheDocument()
+      fireEvent.mouseLeave(buttons[0]!)
+
+      fireEvent.mouseEnter(buttons[1]!)
+      expect(screen.getByText('plugin.action.pluginInfo'))!.toBeInTheDocument()
+      fireEvent.mouseLeave(buttons[1]!)
+
+      fireEvent.mouseEnter(buttons[2]!)
+      expect(screen.getByText('plugin.action.delete'))!.toBeInTheDocument()
     })
   })
 
@@ -256,8 +257,7 @@ describe('Action Component', () => {
       fireEvent.click(getActionButtons()[0]!)
 
       // Assert
-      // Assert
-      expect(screen.getByText('plugin.action.delete'))!.toBeInTheDocument()
+      expect(screen.getByRole('heading', { name: 'plugin.action.delete' }))!.toBeInTheDocument()
     })
 
     it('should display plugin name in delete confirm content', () => {
@@ -289,13 +289,13 @@ describe('Action Component', () => {
       // Act
       render(<Action {...props} />)
       fireEvent.click(getActionButtons()[0]!)
-      expect(screen.getByText('plugin.action.delete'))!.toBeInTheDocument()
+      expect(screen.getByRole('heading', { name: 'plugin.action.delete' }))!.toBeInTheDocument()
 
       fireEvent.click(getDeleteCancelButton())
 
       // Assert
       return waitFor(() => {
-        expect(screen.queryByText('plugin.action.delete')).not.toBeInTheDocument()
+        expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
       })
     })
 
@@ -414,7 +414,7 @@ describe('Action Component', () => {
       // Resolve and check modal closes
       resolveUninstall!({ success: true })
       await waitFor(() => {
-        expect(screen.queryByText('plugin.action.delete')).not.toBeInTheDocument()
+        expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
       })
     })
   })
@@ -871,7 +871,7 @@ describe('Action Component', () => {
       resolveFirst!({ success: true })
 
       await waitFor(() => {
-        expect(screen.queryByText('plugin.action.delete')).not.toBeInTheDocument()
+        expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
       })
     })
 
diff --git a/web/app/components/plugins/plugin-item/action.tsx b/web/app/components/plugins/plugin-item/action.tsx
index fe0ba932fc..b04bc85779 100644
--- a/web/app/components/plugins/plugin-item/action.tsx
+++ b/web/app/components/plugins/plugin-item/action.tsx
@@ -11,7 +11,7 @@ import {
   AlertDialogTitle,
 } from '@langgenius/dify-ui/alert-dialog'
 import { toast } from '@langgenius/dify-ui/toast'
-import { RiDeleteBinLine, RiInformation2Line, RiLoopLeftLine } from '@remixicon/react'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback } from 'react'
@@ -20,7 +20,6 @@ import { useModalContext } from '@/context/modal-context'
 import { uninstallPlugin } from '@/service/plugins'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import ActionButton from '../../base/action-button'
-import Tooltip from '../../base/tooltip'
 import { checkForUpdates, fetchReleases } from '../install-plugin/hooks'
 import PluginInfo from '../plugin-page/plugin-info'
 import { PluginSource } from '../types'
@@ -114,38 +113,59 @@ const Action: FC<Props> = ({
     finally {
       hideDeleting()
     }
-  }, [installationId, onDelete])
+  }, [hideDeleteConfirm, hideDeleting, installationId, onDelete, showDeleting])
   return (
     <div className="flex space-x-1">
       {/* Only plugin installed from GitHub need to check if it's the new version  */}
       {isShowFetchNewVersion
         && (
-          <Tooltip popupContent={t(`${i18nPrefix}.checkForUpdates`, { ns: 'plugin' })}>
-            <ActionButton onClick={handleFetchNewVersion}>
-              <RiLoopLeftLine className="h-4 w-4 text-text-tertiary" />
-            </ActionButton>
+          <Tooltip>
+            <TooltipTrigger
+              render={(
+                <ActionButton onClick={handleFetchNewVersion}>
+                  <span className="i-ri-loop-left-line h-4 w-4 text-text-tertiary" />
+                </ActionButton>
+              )}
+            />
+            <TooltipContent>
+              {t(`${i18nPrefix}.checkForUpdates`, { ns: 'plugin' })}
+            </TooltipContent>
           </Tooltip>
         )}
       {
         isShowInfo
         && (
-          <Tooltip popupContent={t(`${i18nPrefix}.pluginInfo`, { ns: 'plugin' })}>
-            <ActionButton onClick={showPluginInfo}>
-              <RiInformation2Line className="h-4 w-4 text-text-tertiary" />
-            </ActionButton>
+          <Tooltip>
+            <TooltipTrigger
+              render={(
+                <ActionButton onClick={showPluginInfo}>
+                  <span className="i-ri-information-2-line h-4 w-4 text-text-tertiary" />
+                </ActionButton>
+              )}
+            />
+            <TooltipContent>
+              {t(`${i18nPrefix}.pluginInfo`, { ns: 'plugin' })}
+            </TooltipContent>
           </Tooltip>
         )
       }
       {
         isShowDelete
         && (
-          <Tooltip popupContent={t(`${i18nPrefix}.delete`, { ns: 'plugin' })}>
-            <ActionButton
-              className="text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
-              onClick={showDeleteConfirm}
-            >
-              <RiDeleteBinLine className="h-4 w-4" />
-            </ActionButton>
+          <Tooltip>
+            <TooltipTrigger
+              render={(
+                <ActionButton
+                  className="text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive"
+                  onClick={showDeleteConfirm}
+                >
+                  <span className="i-ri-delete-bin-line h-4 w-4" />
+                </ActionButton>
+              )}
+            />
+            <TooltipContent>
+              {t(`${i18nPrefix}.delete`, { ns: 'plugin' })}
+            </TooltipContent>
           </Tooltip>
         )
       }
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/index.spec.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/index.spec.tsx
index 0ee9efc416..c39147e83f 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/__tests__/index.spec.tsx
@@ -63,19 +63,19 @@ vi.mock('@/service/use-plugins', () => ({
 }))
 
 // Mock popover component for ToolPicker and StrategyPicker
-let mockPortalOpen = false
-let forcePortalContentVisible = false // Allow tests to force content visibility
-let mockPortalOnOpenChange: ((open: boolean) => void) | undefined
+let mockPopoverOpen = false
+let forcePopoverContentVisible = false // Allow tests to force content visibility
+let mockPopoverOnOpenChange: ((open: boolean) => void) | undefined
 vi.mock('@langgenius/dify-ui/popover', () => ({
   Popover: ({ children, open = false, onOpenChange }: {
     children: React.ReactNode
     open?: boolean
     onOpenChange?: (open: boolean) => void
   }) => {
-    mockPortalOpen = open
-    mockPortalOnOpenChange = onOpenChange
+    mockPopoverOpen = open
+    mockPopoverOnOpenChange = onOpenChange
     return (
-      <div data-testid="portal-elem" data-open={open}>{children}</div>
+      <div data-testid="popover" data-open={open}>{children}</div>
     )
   },
   PopoverTrigger: ({ children, render, onClick, className }: {
@@ -85,11 +85,11 @@ vi.mock('@langgenius/dify-ui/popover', () => ({
     className?: string
   }) => (
     <div
-      data-testid="portal-trigger"
+      data-testid="popover-trigger"
       onClick={(e) => {
         onClick?.(e)
         if (!onClick)
-          mockPortalOnOpenChange?.(!mockPortalOpen)
+          mockPopoverOnOpenChange?.(!mockPopoverOpen)
       }}
       className={className}
     >
@@ -101,39 +101,9 @@ vi.mock('@langgenius/dify-ui/popover', () => ({
     className?: string
     popupClassName?: string
   }) => {
-    if (!mockPortalOpen && !forcePortalContentVisible)
+    if (!mockPopoverOpen && !forcePopoverContentVisible)
       return null
-    return <div data-testid="portal-content" className={[className, popupClassName].filter(Boolean).join(' ')}>{children}</div>
-  },
-}))
-
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children, open = false, onOpenChange }: {
-    children: React.ReactNode
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-  }) => {
-    mockPortalOpen = open
-    mockPortalOnOpenChange = onOpenChange
-    return <div data-testid="portal-elem" data-open={open}>{children}</div>
-  },
-  PortalToFollowElemTrigger: ({ children, onClick, className }: {
-    children?: React.ReactNode
-    onClick?: (e: React.MouseEvent) => void
-    className?: string
-  }) => (
-    <div data-testid="portal-trigger" onClick={onClick} className={className}>
-      {children}
-    </div>
-  ),
-  PortalToFollowElemContent: ({ children, className, popupClassName }: {
-    children: React.ReactNode
-    className?: string
-    popupClassName?: string
-  }) => {
-    if (!mockPortalOpen && !forcePortalContentVisible)
-      return null
-    return <div data-testid="portal-content" className={[className, popupClassName].filter(Boolean).join(' ')}>{children}</div>
+    return <div data-testid="popover-content" className={[className, popupClassName].filter(Boolean).join(' ')}>{children}</div>
   },
 }))
 
@@ -362,9 +332,9 @@ const renderWithQueryClient = (ui: React.ReactElement) => {
 describe('auto-update-setting', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockPortalOpen = false
-    mockPortalOnOpenChange = undefined
-    forcePortalContentVisible = false
+    mockPopoverOpen = false
+    mockPopoverOnOpenChange = undefined
+    forcePopoverContentVisible = false
     mockPluginsData.plugins = []
   })
 
@@ -928,12 +898,12 @@ describe('auto-update-setting', () => {
         render(<ToolPicker {...defaultProps} isShow={false} />)
 
         // Assert
-        expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument()
+        expect(screen.queryByTestId('popover-content')).not.toBeInTheDocument()
       })
 
       it('should render search box and tabs when isShow is true', () => {
         // Arrange
-        mockPortalOpen = true
+        mockPopoverOpen = true
 
         // Act
         render(<ToolPicker {...defaultProps} isShow={true} />)
@@ -944,7 +914,7 @@ describe('auto-update-setting', () => {
 
       it('should show NoDataPlaceholder when no plugins and no search query', () => {
         // Arrange
-        mockPortalOpen = true
+        mockPopoverOpen = true
         mockPluginsData.plugins = []
 
         // Act
@@ -986,7 +956,7 @@ describe('auto-update-setting', () => {
 
       it('should filter out non-marketplace plugins', () => {
         // Arrange
-        mockPortalOpen = true
+        mockPopoverOpen = true
 
         // Act
         renderWithQueryClient(<ToolPicker {...defaultProps} isShow={true} />)
@@ -997,7 +967,7 @@ describe('auto-update-setting', () => {
 
       it('should filter by search query', () => {
         // Arrange
-        mockPortalOpen = true
+        mockPopoverOpen = true
 
         // Act
         renderWithQueryClient(<ToolPicker {...defaultProps} isShow={true} />)
@@ -1018,7 +988,7 @@ describe('auto-update-setting', () => {
 
         // Act
         render(<ToolPicker {...defaultProps} onShowChange={onShowChange} />)
-        fireEvent.click(screen.getByTestId('portal-trigger'))
+        fireEvent.click(screen.getByTestId('popover-trigger'))
 
         // Assert
         expect(onShowChange).toHaveBeenCalledWith(true)
@@ -1026,7 +996,7 @@ describe('auto-update-setting', () => {
 
       it('should call onChange when plugin is selected', () => {
         // Arrange
-        mockPortalOpen = true
+        mockPopoverOpen = true
         mockPluginsData.plugins = [
           createMockPluginDetail({
             plugin_id: 'test-plugin',
@@ -1046,7 +1016,7 @@ describe('auto-update-setting', () => {
 
       it('should unselect plugin when already selected', () => {
         // Arrange
-        mockPortalOpen = true
+        mockPopoverOpen = true
         mockPluginsData.plugins = [
           createMockPluginDetail({
             plugin_id: 'test-plugin',
@@ -1070,7 +1040,7 @@ describe('auto-update-setting', () => {
       it('handleCheckChange should be memoized with correct dependencies', () => {
         // Arrange
         const onChange = vi.fn()
-        mockPortalOpen = true
+        mockPopoverOpen = true
         mockPluginsData.plugins = [
           createMockPluginDetail({
             plugin_id: 'plugin-1',
diff --git a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
index a76fd085ba..458947da6b 100644
--- a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
+++ b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
@@ -45,7 +45,7 @@ const PluginVersionPicker: FC<Props> = ({
   trigger,
   placement = 'bottom-start',
   sideOffset = 4,
-  alignOffset = -16,
+  alignOffset = 0,
   onSelect,
 }) => {
   const { t } = useTranslation()
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/__tests__/index.spec.tsx b/web/app/components/rag-pipeline/components/panel/input-field/__tests__/index.spec.tsx
index 3146695cae..d362b31057 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/__tests__/index.spec.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/__tests__/index.spec.tsx
@@ -219,7 +219,7 @@ describe('InputFieldPanel', () => {
     it('should render close button', () => {
       render(<InputFieldPanel />)
 
-      const closeButton = screen.getByRole('button', { name: '' })
+      const closeButton = screen.getByRole('button', { name: 'common.operation.close' })
       expect(closeButton)!.toBeInTheDocument()
     })
 
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
index 12eed4ece4..95a76d5e86 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
@@ -121,6 +121,7 @@ const InputFieldPanel = () => {
         <Divider type="vertical" className="mx-1 h-3" />
         <button
           type="button"
+          aria-label={t('operation.close', { ns: 'common' })}
           className="flex size-6 shrink-0 items-center justify-center p-0.5"
           onClick={closePanel}
         >
diff --git a/web/app/components/tools/workflow-tool/__tests__/configure-button.spec.tsx b/web/app/components/tools/workflow-tool/__tests__/configure-button.spec.tsx
index 7060e29f95..fc417a9528 100644
--- a/web/app/components/tools/workflow-tool/__tests__/configure-button.spec.tsx
+++ b/web/app/components/tools/workflow-tool/__tests__/configure-button.spec.tsx
@@ -113,29 +113,6 @@ vi.mock('@/app/components/tools/labels/selector', () => ({
   ),
 }))
 
-// Mock PortalToFollowElem for dropdown tests
-let mockPortalOpenState = false
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children, open, onOpenChange }: { children: React.ReactNode, open: boolean, onOpenChange: (open: boolean) => void }) => {
-    mockPortalOpenState = open
-    return (
-      <div data-testid="portal-elem" data-open={open} onClick={() => onOpenChange(!open)}>
-        {children}
-      </div>
-    )
-  },
-  PortalToFollowElemTrigger: ({ children, onClick, className }: { children: React.ReactNode, onClick: () => void, className?: string }) => (
-    <div data-testid="portal-trigger" onClick={onClick} className={className}>
-      {children}
-    </div>
-  ),
-  PortalToFollowElemContent: ({ children, className }: { children: React.ReactNode, className?: string }) => {
-    if (!mockPortalOpenState)
-      return null
-    return <div data-testid="portal-content" className={className}>{children}</div>
-  },
-}))
-
 // Test data factories
 const createMockEmoji = (overrides = {}) => ({
   content: '🔧',
@@ -246,7 +223,6 @@ const createDefaultModalPayload = (overrides: Partial<WorkflowToolModalPayload>
 describe('WorkflowToolConfigureButton', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockPortalOpenState = false
     mockIsCurrentWorkspaceManager.mockReturnValue(true)
     mockUseWorkflowToolDetailByAppID.mockImplementation((_appId: string, enabled: boolean) => ({
       data: enabled ? createMockWorkflowToolDetail() : undefined,
@@ -624,7 +600,6 @@ describe('WorkflowToolConfigureButton', () => {
 describe('WorkflowToolAsModal', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockPortalOpenState = false
   })
 
   // Rendering Tests (REQUIRED)
@@ -1486,7 +1461,6 @@ describe('WorkflowToolAsModal', () => {
 describe('MethodSelector', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockPortalOpenState = false
   })
 
   // Rendering Tests (REQUIRED)
@@ -1709,7 +1683,6 @@ describe('MethodSelector', () => {
 describe('Integration Tests', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockPortalOpenState = false
     mockIsCurrentWorkspaceManager.mockReturnValue(true)
     mockUseWorkflowToolDetailByAppID.mockImplementation((_appId: string, enabled: boolean) => ({
       data: enabled ? createMockWorkflowToolDetail() : undefined,
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/index.spec.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/index.spec.tsx
index af38ca113f..c61882146b 100644
--- a/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/index.spec.tsx
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/__tests__/index.spec.tsx
@@ -91,18 +91,12 @@ describe('WorkflowOnboardingModal', () => {
       expect(getTriggerHeading()).toBeInTheDocument()
     })
 
-    it('should render ESC tip when shown', () => {
+    it('should not render ESC tip', () => {
       renderComponent({ isShow: true })
 
-      expect(screen.getByText('workflow.onboarding.escTip.press')).toBeInTheDocument()
-      expect(screen.getByText('workflow.onboarding.escTip.key')).toBeInTheDocument()
-      expect(screen.getByText('workflow.onboarding.escTip.toDismiss')).toBeInTheDocument()
-    })
-
-    it('should not render ESC tip when hidden', () => {
-      renderComponent({ isShow: false })
-
       expect(screen.queryByText('workflow.onboarding.escTip.press')).not.toBeInTheDocument()
+      expect(screen.queryByText('workflow.onboarding.escTip.key')).not.toBeInTheDocument()
+      expect(screen.queryByText('workflow.onboarding.escTip.toDismiss')).not.toBeInTheDocument()
     })
 
     it('should have correct styling for title', () => {
@@ -386,20 +380,6 @@ describe('WorkflowOnboardingModal', () => {
       expect(mockOnClose).toHaveBeenCalledTimes(1)
     })
 
-    it('should have visible ESC key hint', () => {
-      renderComponent({ isShow: true })
-
-      const escKey = screen.getByText('workflow.onboarding.escTip.key')
-      expect(escKey.closest('.system-kbd')).toBeInTheDocument()
-    })
-
-    it('should have descriptive text for ESC functionality', () => {
-      renderComponent({ isShow: true })
-
-      expect(screen.getByText('workflow.onboarding.escTip.press')).toBeInTheDocument()
-      expect(screen.getByText('workflow.onboarding.escTip.toDismiss')).toBeInTheDocument()
-    })
-
     it('should have proper text color classes', () => {
       renderComponent()
 
@@ -443,8 +423,6 @@ describe('WorkflowOnboardingModal', () => {
       expect(dialog).toBeInTheDocument()
       expect(screen.getByText('workflow.onboarding.title')).toBeInTheDocument()
       expect(getUserInputHeading()).toBeInTheDocument()
-      expect(screen.getByText('workflow.onboarding.escTip.key')).toBeInTheDocument()
-      expect(dialog).not.toContainElement(screen.getByText('workflow.onboarding.escTip.key'))
     })
 
     it('should coordinate between keyboard and click interactions', async () => {
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx
index c72a515925..8f25cd00d0 100644
--- a/web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/index.tsx
@@ -1,9 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import type { PluginDefaultValue } from '@/app/components/workflow/block-selector/types'
-import { Dialog, DialogCloseButton, DialogContent, DialogDescription, DialogPortal, DialogTitle } from '@langgenius/dify-ui/dialog'
+import { Dialog, DialogCloseButton, DialogContent, DialogDescription, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { useTranslation } from 'react-i18next'
-import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import { BlockEnum } from '@/app/components/workflow/types'
 import StartNodeSelectionPanel from './start-node-selection-panel'
 
@@ -44,15 +43,6 @@ const WorkflowOnboardingModal: FC<WorkflowOnboardingModalProps> = ({
           />
         </div>
       </DialogContent>
-
-      {/* TODO: reduce z-1002 to match @langgenius/dify-ui primitives after legacy overlay migration completes */}
-      <DialogPortal>
-        <div className="pointer-events-none fixed top-1/2 left-1/2 z-1002 flex -translate-x-1/2 translate-y-[165px] items-center gap-1 body-xs-regular text-text-quaternary">
-          <span>{t('onboarding.escTip.press', { ns: 'workflow' })}</span>
-          <ShortcutsName keys={[t('onboarding.escTip.key', { ns: 'workflow' })]} textColor="secondary" />
-          <span>{t('onboarding.escTip.toDismiss', { ns: 'workflow' })}</span>
-        </div>
-      </DialogPortal>
     </Dialog>
   )
 }
diff --git a/web/app/components/workflow/block-selector/__tests__/tool-picker.spec.tsx b/web/app/components/workflow/block-selector/__tests__/tool-picker.spec.tsx
index 1ec4ed241f..943c3649ae 100644
--- a/web/app/components/workflow/block-selector/__tests__/tool-picker.spec.tsx
+++ b/web/app/components/workflow/block-selector/__tests__/tool-picker.spec.tsx
@@ -376,15 +376,15 @@ describe('ToolPicker', () => {
 
     renderToolPicker({ onShowChange })
 
-    await user.click(screen.getByRole('button', { name: 'open-picker' }))
-    expect(onShowChange).toHaveBeenCalledWith(true)
+    await user.click(screen.getByText('open-picker').closest('[role="button"]')!)
+    expect(onShowChange.mock.calls[0]?.[0]).toBe(true)
 
     renderToolPicker({
       disabled: true,
       onShowChange: disabledOnShowChange,
     })
 
-    await user.click(screen.getAllByRole('button', { name: 'open-picker' })[1]!)
+    await user.click(screen.getAllByText('open-picker')[1]!.closest('[role="button"]')!)
     expect(disabledOnShowChange).not.toHaveBeenCalled()
   })
 
diff --git a/web/app/components/workflow/block-selector/tool-picker.tsx b/web/app/components/workflow/block-selector/tool-picker.tsx
index dcd3392ec6..93ee1882db 100644
--- a/web/app/components/workflow/block-selector/tool-picker.tsx
+++ b/web/app/components/workflow/block-selector/tool-picker.tsx
@@ -1,25 +1,22 @@
 'use client'
-import type {
-  OffsetOptions,
-  Placement,
-} from '@floating-ui/react'
+import type { OffsetOptions } from '@floating-ui/react'
+import type { Placement } from '@langgenius/dify-ui/popover'
 import type { FC } from 'react'
 import type { ToolDefaultValue, ToolValue } from './types'
 import type { CustomCollectionBackend } from '@/app/components/tools/types'
 import type { BlockEnum, OnSelectBlock } from '@/app/components/workflow/types'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
 import { toast } from '@langgenius/dify-ui/toast'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-// eslint-disable-next-line no-restricted-imports -- legacy overlay migration is handled separately from this change
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import SearchBox from '@/app/components/plugins/marketplace/search-box'
 import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
 import AllTools from '@/app/components/workflow/block-selector/all-tools'
@@ -71,6 +68,8 @@ const ToolPicker: FC<Props> = ({
   const { t } = useTranslation()
   const [searchText, setSearchText] = useState('')
   const [tags, setTags] = useState<string[]>([])
+  const sideOffset = typeof offset === 'number' ? offset : (typeof offset === 'function' ? 0 : (offset?.mainAxis ?? 0))
+  const alignOffset = typeof offset === 'number' ? 0 : (typeof offset === 'function' ? 0 : (offset?.crossAxis ?? 0))
 
   const { data: enable_marketplace } = useSuspenseQuery({
     ...systemFeaturesQueryOptions(),
@@ -121,10 +120,10 @@ const ToolPicker: FC<Props> = ({
 
   const handleAddedCustomTool = invalidateCustomTools
 
-  const handleTriggerClick = () => {
-    if (disabled)
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (nextOpen && disabled)
       return
-    onShowChange(true)
+    onShowChange(nextOpen)
   }
 
   const handleSelect = (_type: BlockEnum, tool?: ToolDefaultValue) => {
@@ -159,19 +158,23 @@ const ToolPicker: FC<Props> = ({
   }
 
   return (
-    <PortalToFollowElem
-      placement={placement}
-      offset={offset}
+    <Popover
       open={isShow}
-      onOpenChange={onShowChange}
+      onOpenChange={handleOpenChange}
     >
-      <PortalToFollowElemTrigger
-        onClick={handleTriggerClick}
+      <PopoverTrigger
+        nativeButton={false}
+        render={<div className="inline-block" />}
       >
         {trigger}
-      </PortalToFollowElemTrigger>
+      </PopoverTrigger>
 
-      <PortalToFollowElemContent className="z-1002">
+      <PopoverContent
+        placement={placement}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        popupClassName="border-none bg-transparent shadow-none"
+      >
         <div className={cn('relative min-h-20 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-xs', panelClassName)}>
           <div className="p-2 pb-1">
             <SearchBox
@@ -210,8 +213,8 @@ const ToolPicker: FC<Props> = ({
             }}
           />
         </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      </PopoverContent>
+    </Popover>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/__tests__/index.spec.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/__tests__/index.spec.tsx
index 9521f9b307..392f8e5a2a 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/__tests__/index.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/__tests__/index.spec.tsx
@@ -149,7 +149,7 @@ describe('error-handle path', () => {
       await user.click(screen.getByRole('button'))
       await user.click(screen.getByText('workflow.nodes.common.errorHandle.defaultValue.title'))
 
-      expect(onSelected).toHaveBeenCalledWith(ErrorHandleTypeEnum.defaultValue)
+      expect(onSelected.mock.calls[0]?.[0]).toBe(ErrorHandleTypeEnum.defaultValue)
     })
 
     it('should render the error tip only when a strategy exists', () => {
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx
index 07b6519e41..c83057a6c0 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-type-selector.tsx
@@ -1,15 +1,16 @@
 import { Button } from '@langgenius/dify-ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import {
   RiArrowDownSLine,
   RiCheckLine,
 } from '@remixicon/react'
-import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import { ErrorHandleTypeEnum } from './types'
 
 type ErrorHandleTypeSelectorProps = {
@@ -21,7 +22,6 @@ const ErrorHandleTypeSelector = ({
   onSelected,
 }: ErrorHandleTypeSelectorProps) => {
   const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
   const options = [
     {
       value: ErrorHandleTypeEnum.none,
@@ -42,37 +42,38 @@ const ErrorHandleTypeSelector = ({
   const selectedOption = options.find(option => option.value === value)
 
   return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={4}
-    >
-      <PortalToFollowElemTrigger onClick={(e) => {
-        e.stopPropagation()
-        e.nativeEvent.stopImmediatePropagation()
-        setOpen(v => !v)
-      }}
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={(
+          <Button
+            size="small"
+            onClick={(e) => {
+              e.stopPropagation()
+            }}
+          />
+        )}
       >
-        <Button
-          size="small"
+        {selectedOption?.label}
+        <RiArrowDownSLine className="h-3.5 w-3.5" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="w-[280px] rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
+      >
+        <DropdownMenuRadioGroup
+          value={value}
+          onValueChange={onSelected}
         >
-          {selectedOption?.label}
-          <RiArrowDownSLine className="h-3.5 w-3.5" />
-        </Button>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-11">
-        <div className="w-[280px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
           {
             options.map(option => (
-              <div
+              <DropdownMenuRadioItem
                 key={option.value}
-                className="flex cursor-pointer rounded-lg p-2 pr-3 hover:bg-state-base-hover"
+                value={option.value}
+                closeOnClick
+                className="h-auto items-start rounded-lg p-2 pr-3"
                 onClick={(e) => {
                   e.stopPropagation()
-                  e.nativeEvent.stopImmediatePropagation()
-                  onSelected(option.value)
-                  setOpen(false)
                 }}
               >
                 <div className="mr-1 w-4 shrink-0">
@@ -86,12 +87,12 @@ const ErrorHandleTypeSelector = ({
                   <div className="mb-0.5 system-sm-semibold text-text-secondary">{option.label}</div>
                   <div className="system-xs-regular text-text-tertiary">{option.description}</div>
                 </div>
-              </div>
+              </DropdownMenuRadioItem>
             ))
           }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
index 6d3cfe7cfb..14a88b4432 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
@@ -1,15 +1,15 @@
 'use client'
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiArrowDownSLine } from '@remixicon/react'
-import * as React from 'react'
-import { useCallback, useState } from 'react'
-import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectTrigger,
+} from '@langgenius/dify-ui/select'
+import * as React from 'react'
 import { VarType } from '@/app/components/workflow/types'
 
 type Props = {
@@ -26,47 +26,39 @@ const VarReferencePicker: FC<Props> = ({
   value,
   onChange,
 }) => {
-  const [open, setOpen] = useState(false)
-
-  const handleChange = useCallback((type: string) => {
-    return () => {
-      setOpen(false)
-      onChange(type)
-    }
-  }, [onChange])
-
   return (
     <div className={cn(className, !readonly && 'cursor-pointer select-none')}>
-      <PortalToFollowElem
-        open={open}
-        onOpenChange={setOpen}
-        placement="bottom-start"
-        offset={4}
-      >
-        <PortalToFollowElemTrigger onClick={() => setOpen(!open)} className="w-[120px] cursor-pointer">
-          <div className="flex h-8 items-center justify-between rounded-lg border-0 bg-components-input-bg-normal px-2.5 text-[13px] text-text-primary">
-            <div className="w-0 grow truncate capitalize" title={value}>{value}</div>
-            <RiArrowDownSLine className="h-3.5 w-3.5 shrink-0 text-text-secondary" />
-          </div>
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent style={{
-          zIndex: 100,
+      <Select
+        value={value}
+        readOnly={readonly}
+        onValueChange={(type) => {
+          if (type)
+            onChange(type)
         }}
+      >
+        <SelectTrigger
+          className="h-8 w-[120px] cursor-pointer rounded-lg px-2.5 text-[13px] text-text-primary"
+          title={value}
         >
-          <div className="w-[120px] rounded-lg bg-components-panel-bg p-1 shadow-sm">
-            {TYPES.map(type => (
-              <div
-                key={type}
-                className="flex h-[30px] cursor-pointer items-center justify-between rounded-lg pr-2 pl-3 text-[13px] text-text-primary hover:bg-state-base-hover"
-                onClick={handleChange(type)}
-              >
-                <div className="w-0 grow truncate capitalize">{type}</div>
-                {type === value && <Check className="h-4 w-4 shrink-0 text-text-accent" />}
-              </div>
-            ))}
-          </div>
-        </PortalToFollowElemContent>
-      </PortalToFollowElem>
+          <span className="capitalize">{value}</span>
+        </SelectTrigger>
+        <SelectContent
+          sideOffset={4}
+          popupClassName="w-[120px] rounded-lg border-0 p-1 shadow-sm"
+          listClassName="p-0"
+        >
+          {TYPES.map(type => (
+            <SelectItem
+              key={type}
+              value={type}
+              className="h-[30px] rounded-lg pr-2 pl-3 text-[13px] text-text-primary"
+            >
+              <SelectItemText className="px-0 capitalize">{type}</SelectItemText>
+              <SelectItemIndicator />
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx
index 317f4853ac..d85d215923 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx
@@ -1,7 +1,8 @@
 import type { FC } from 'react'
 import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
 import { cn } from '@langgenius/dify-ui/cn'
-import { CreateButtonType, CreateSubscriptionButton } from '@/app/components/plugins/plugin-detail-panel/subscription-list/create'
+import { CreateSubscriptionButton } from '@/app/components/plugins/plugin-detail-panel/subscription-list/create'
+import { CreateButtonType } from '@/app/components/plugins/plugin-detail-panel/subscription-list/create/types'
 import { SubscriptionSelectorEntry } from '@/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry'
 import { useSubscriptionList } from '@/app/components/plugins/plugin-detail-panel/subscription-list/use-subscription-list'
 
diff --git a/web/app/components/workflow/nodes/if-else/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/if-else/__tests__/integration.spec.tsx
index 0ed61eb641..af73cd8581 100644
--- a/web/app/components/workflow/nodes/if-else/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/if-else/__tests__/integration.spec.tsx
@@ -264,8 +264,8 @@ describe('if-else path', () => {
       await user.click(screen.getByText('Variable'))
       fireEvent.change(screen.getByDisplayValue('12'), { target: { value: '42' } })
 
-      expect(onSelect).toHaveBeenCalledWith(ComparisonOperator.is)
-      expect(onNumberVarTypeChange).toHaveBeenCalledWith(NumberVarType.variable)
+      expect(onSelect.mock.calls[0]?.[0]).toBe(ComparisonOperator.is)
+      expect(onNumberVarTypeChange.mock.calls[0]?.[0]).toBe(NumberVarType.variable)
       expect(onValueChange).toHaveBeenCalledWith('42')
     })
 
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
index 83dc97f088..d343b0c8e5 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
@@ -2,17 +2,18 @@ import type { ComparisonOperator } from '../../types'
 import type { VarType } from '@/app/components/workflow/types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import { RiArrowDownSLine } from '@remixicon/react'
 import {
   useMemo,
-  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import { getOperators, isComparisonOperatorNeedTranslate } from '../../utils'
 
 const i18nPrefix = 'nodes.ifElse'
@@ -34,7 +35,6 @@ const ConditionOperator = ({
   onSelect,
 }: ConditionOperatorProps) => {
   const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
 
   const options = useMemo(() => {
     return getOperators(varType, file).map((o) => {
@@ -46,49 +46,48 @@ const ConditionOperator = ({
   }, [t, varType, file])
   const selectedOption = options.find(o => Array.isArray(value) ? o.value === value[0] : o.value === value)
   return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={{
-        mainAxis: 4,
-        crossAxis: 0,
-      }}
-    >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        <Button
-          className={cn('shrink-0', !selectedOption && 'opacity-50', className)}
-          size="small"
-          variant="ghost"
-          disabled={disabled}
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={(
+          <Button
+            className={cn('shrink-0', !selectedOption && 'opacity-50', className)}
+            size="small"
+            variant="ghost"
+            disabled={disabled}
+          />
+        )}
+      >
+        {
+          selectedOption
+            ? selectedOption.label
+            : t(`${i18nPrefix}.select`, { ns: 'workflow' })
+        }
+        <RiArrowDownSLine className="ml-1 h-3.5 w-3.5" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
+      >
+        <DropdownMenuRadioGroup
+          value={selectedOption?.value}
+          onValueChange={onSelect}
         >
-          {
-            selectedOption
-              ? selectedOption.label
-              : t(`${i18nPrefix}.select`, { ns: 'workflow' })
-          }
-          <RiArrowDownSLine className="ml-1 h-3.5 w-3.5" />
-        </Button>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-11">
-        <div className="rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
           {
             options.map(option => (
-              <div
+              <DropdownMenuRadioItem
                 key={option.value}
-                className="flex h-7 cursor-pointer items-center rounded-lg px-3 py-1.5 text-[13px] font-medium text-text-secondary hover:bg-state-base-hover"
-                onClick={() => {
-                  onSelect(option.value)
-                  setOpen(false)
-                }}
+                value={option.value}
+                closeOnClick
+                className="h-7 rounded-lg px-3 py-1.5 text-[13px] font-medium text-text-secondary"
               >
                 {option.label}
-              </div>
+              </DropdownMenuRadioItem>
             ))
           }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
index 954f713a78..a17d7589f1 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
@@ -4,6 +4,18 @@ import type {
 } from '@/app/components/workflow/types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { capitalize } from 'es-toolkit/string'
@@ -14,11 +26,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import { VarType } from '@/app/components/workflow/types'
 import { variableTransformer } from '@/app/components/workflow/utils'
@@ -63,58 +70,61 @@ const ConditionNumberInput = ({
 
   return (
     <div className="flex cursor-pointer items-center">
-      <PortalToFollowElem
+      <DropdownMenu
         open={numberVarTypeVisible}
         onOpenChange={setNumberVarTypeVisible}
-        placement="bottom-start"
-        offset={{ mainAxis: 2, crossAxis: 0 }}
       >
-        <PortalToFollowElemTrigger onClick={() => setNumberVarTypeVisible(v => !v)}>
-          <Button
-            className="shrink-0"
-            variant="ghost"
-            size="small"
+        <DropdownMenuTrigger
+          render={(
+            <Button
+              className="shrink-0"
+              variant="ghost"
+              size="small"
+            />
+          )}
+        >
+          {capitalize(numberVarType)}
+          <RiArrowDownSLine className="ml-px h-3.5 w-3.5" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement="bottom-start"
+          sideOffset={2}
+          popupClassName="w-[112px] rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
+        >
+          <DropdownMenuRadioGroup
+            value={numberVarType}
+            onValueChange={onNumberVarTypeChange}
           >
-            {capitalize(numberVarType)}
-            <RiArrowDownSLine className="ml-px h-3.5 w-3.5" />
-          </Button>
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className="z-1000">
-          <div className="w-[112px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
             {
               options.map(option => (
-                <div
+                <DropdownMenuRadioItem
                   key={option}
+                  value={option}
+                  closeOnClick
                   className={cn(
-                    'flex h-7 cursor-pointer items-center rounded-md px-3 hover:bg-state-base-hover',
+                    'h-7 rounded-md px-3',
                     'text-[13px] font-medium text-text-secondary',
                     numberVarType === option && 'bg-state-base-hover',
                   )}
-                  onClick={() => {
-                    onNumberVarTypeChange(option)
-                    setNumberVarTypeVisible(false)
-                  }}
                 >
                   {capitalize(option)}
-                </div>
+                </DropdownMenuRadioItem>
               ))
             }
-          </div>
-        </PortalToFollowElemContent>
-      </PortalToFollowElem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
       <div className="mx-1 h-4 w-px bg-divider-regular"></div>
       <div className="ml-0.5 w-0 grow">
         {
           numberVarType === NumberVarType.variable && (
-            <PortalToFollowElem
+            <Popover
               open={variableSelectorVisible}
               onOpenChange={setVariableSelectorVisible}
-              placement="bottom-start"
-              offset={{ mainAxis: 2, crossAxis: 0 }}
             >
-              <PortalToFollowElemTrigger
-                className="w-full"
-                onClick={() => setVariableSelectorVisible(v => !v)}
+              <PopoverTrigger
+                nativeButton={false}
+                render={<div className="w-full" />}
               >
                 {
                   value && (
@@ -133,16 +143,20 @@ const ConditionNumberInput = ({
                     </div>
                   )
                 }
-              </PortalToFollowElemTrigger>
-              <PortalToFollowElemContent className="z-1000">
+              </PopoverTrigger>
+              <PopoverContent
+                placement="bottom-start"
+                sideOffset={2}
+                popupClassName="border-none bg-transparent shadow-none"
+              >
                 <div className={cn('w-[296px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pt-1 shadow-lg', isShort && 'w-[200px]')}>
                   <VarReferenceVars
                     vars={variables}
                     onChange={handleSelectVariable}
                   />
                 </div>
-              </PortalToFollowElemContent>
-            </PortalToFollowElem>
+              </PopoverContent>
+            </Popover>
           )
         }
         {
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/__tests__/selector.spec.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/__tests__/selector.spec.tsx
index 617944e4ee..bd2ec4cf53 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/__tests__/selector.spec.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/__tests__/selector.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { ChunkStructureEnum } from '../../../types'
 import Selector from '../selector'
 
@@ -20,7 +20,7 @@ const options = [
 ]
 
 describe('ChunkStructureSelector', () => {
-  it('should open the selector panel and close it after selecting an option', () => {
+  it('should open the selector panel and close it after selecting an option', async () => {
     const onChange = vi.fn()
 
     render(
@@ -38,7 +38,9 @@ describe('ChunkStructureSelector', () => {
     fireEvent.click(screen.getByText('Parent child'))
 
     expect(onChange).toHaveBeenCalledWith(ChunkStructureEnum.parent_child)
-    expect(screen.queryByText('workflow.nodes.knowledgeBase.changeChunkStructure')).not.toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.queryByText('workflow.nodes.knowledgeBase.changeChunkStructure')).not.toBeInTheDocument()
+    })
   })
 
   it('should not open the selector when readonly is enabled', () => {
@@ -51,7 +53,8 @@ describe('ChunkStructureSelector', () => {
       />,
     )
 
-    fireEvent.click(screen.getByRole('button', { name: 'custom-trigger' }))
+    const trigger = screen.getByText('custom-trigger').closest('[role="button"]')
+    fireEvent.click(trigger!)
 
     expect(screen.queryByText('workflow.nodes.knowledgeBase.changeChunkStructure')).not.toBeInTheDocument()
   })
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx
index 7ab8de508f..dc38729854 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx
@@ -2,13 +2,13 @@ import type { ReactNode } from 'react'
 import type { ChunkStructureEnum } from '../../types'
 import type { Option } from './type'
 import { Button } from '@langgenius/dify-ui/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import OptionCard from '../option-card'
 
 type SelectorProps = {
@@ -32,37 +32,46 @@ const Selector = ({
     onChange(optionId)
     setOpen(false)
   }, [onChange])
+  const handleOpenChange = useCallback((nextOpen: boolean) => {
+    if (readonly && nextOpen)
+      return
+    setOpen(nextOpen)
+  }, [readonly])
 
   return (
-    <PortalToFollowElem
-      placement="bottom-end"
-      offset={{
-        mainAxis: 0,
-        crossAxis: -8,
-      }}
+    <Popover
       open={open}
-      onOpenChange={setOpen}
+      onOpenChange={handleOpenChange}
     >
-      <PortalToFollowElemTrigger
-        asChild
-        onClick={() => {
-          if (readonly)
-            return
-          setOpen(!open)
-        }}
+      {
+        trigger
+          ? (
+              <PopoverTrigger
+                nativeButton={false}
+                render={<div />}
+              >
+                {trigger}
+              </PopoverTrigger>
+            )
+          : (
+              <PopoverTrigger
+                render={(
+                  <Button
+                    size="small"
+                    variant="ghost-accent"
+                  />
+                )}
+              >
+                {t('panel.change', { ns: 'workflow' })}
+              </PopoverTrigger>
+            )
+      }
+      <PopoverContent
+        placement="bottom-end"
+        sideOffset={0}
+        alignOffset={-8}
+        popupClassName="border-none bg-transparent shadow-none"
       >
-        {
-          trigger || (
-            <Button
-              size="small"
-              variant="ghost-accent"
-            >
-              {t('panel.change', { ns: 'workflow' })}
-            </Button>
-          )
-        }
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-10">
         <div className="w-[404px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl backdrop-blur-[5px]">
           <div className="px-3 pt-3.5 system-sm-semibold text-text-primary">
             {t('nodes.knowledgeBase.changeChunkStructure', { ns: 'workflow' })}
@@ -86,8 +95,8 @@ const Selector = ({
             }
           </div>
         </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      </PopoverContent>
+    </Popover>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/__tests__/integration.spec.tsx
index 81943ff86c..ea02cf5980 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/__tests__/integration.spec.tsx
@@ -427,7 +427,7 @@ describe('knowledge-retrieval path', () => {
       await user.click(screen.getByRole('button', { name: /workflow.nodes.knowledgeRetrieval.metadata.options.disabled.title/i }))
       await user.click(screen.getByText('workflow.nodes.knowledgeRetrieval.metadata.options.manual.title'))
 
-      expect(onSelect).toHaveBeenCalledWith(MetadataFilteringModeEnum.manual)
+      expect(onSelect.mock.calls[0]?.[0]).toBe(MetadataFilteringModeEnum.manual)
     })
 
     it('should remove stale metadata conditions and open the manual metadata panel', async () => {
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx
index 396fd069e7..0d2ee187e8 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-filter/metadata-filter-selector.tsx
@@ -1,15 +1,16 @@
 import { Button } from '@langgenius/dify-ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import {
   RiArrowDownSLine,
   RiCheckLine,
 } from '@remixicon/react'
-import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import { MetadataFilteringModeEnum } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 
 type MetadataFilterSelectorProps = {
@@ -21,7 +22,6 @@ const MetadataFilterSelector = ({
   onSelect,
 }: MetadataFilterSelectorProps) => {
   const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
   const options = [
     {
       key: MetadataFilteringModeEnum.disabled,
@@ -43,41 +43,35 @@ const MetadataFilterSelector = ({
   const selectedOption = options.find(option => option.key === value)!
 
   return (
-    <PortalToFollowElem
-      placement="bottom-end"
-      offset={{
-        mainAxis: 4,
-        crossAxis: 0,
-      }}
-      open={open}
-      onOpenChange={setOpen}
-    >
-      <PortalToFollowElemTrigger
-        onClick={(e) => {
-          e.stopPropagation()
-          setOpen(!open)
-        }}
-        asChild
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={(
+          <Button
+            variant="secondary"
+            size="small"
+            onClick={e => e.stopPropagation()}
+          />
+        )}
       >
-        <Button
-          variant="secondary"
-          size="small"
+        {selectedOption.value}
+        <RiArrowDownSLine className="h-3.5 w-3.5" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="w-[280px] rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
+      >
+        <DropdownMenuRadioGroup
+          value={value}
+          onValueChange={onSelect}
         >
-          {selectedOption.value}
-          <RiArrowDownSLine className="h-3.5 w-3.5" />
-        </Button>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-10">
-        <div className="w-[280px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
           {
             options.map(option => (
-              <div
+              <DropdownMenuRadioItem
                 key={option.key}
-                className="flex cursor-pointer rounded-lg p-2 pr-3 hover:bg-state-base-hover"
-                onClick={() => {
-                  onSelect(option.key)
-                  setOpen(false)
-                }}
+                value={option.key}
+                closeOnClick
+                className="h-auto items-start rounded-lg p-2 pr-3"
               >
                 <div className="w-4 shrink-0">
                   {
@@ -94,12 +88,12 @@ const MetadataFilterSelector = ({
                     {option.desc}
                   </div>
                 </div>
-              </div>
+              </DropdownMenuRadioItem>
             ))
           }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
index 5650c65641..986116f6a0 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
@@ -232,7 +232,6 @@ const EditCard: FC<EditCardProps> = ({
             currentValue={currentFields.type}
             items={maximumDepthReached ? MAXIMUM_DEPTH_TYPE_OPTIONS : TYPE_OPTIONS}
             onSelect={handleTypeChange}
-            popupClassName="z-1000"
           />
           {
             currentFields.required && (
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
index 213b6895d3..e3f637954d 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
@@ -1,9 +1,16 @@
 import type { FC } from 'react'
 import type { ArrayType, Type } from '../../../../types'
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectTrigger,
+} from '@langgenius/dify-ui/select'
+import { RiCheckLine } from '@remixicon/react'
 import { useState } from 'react'
-import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 
 export type TypeItem = {
   value: Type | ArrayType
@@ -26,45 +33,46 @@ const TypeSelector: FC<TypeSelectorProps> = ({
   const [open, setOpen] = useState(false)
 
   return (
-    <PortalToFollowElem
+    <Select<Type | ArrayType>
       open={open}
       onOpenChange={setOpen}
-      placement="bottom-start"
-      offset={{
-        mainAxis: 4,
+      value={currentValue}
+      onValueChange={(nextValue) => {
+        const selected = items.find(item => item.value === nextValue)
+        if (selected)
+          onSelect(selected)
       }}
     >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        <div className={cn(
-          'flex items-center rounded-[5px] p-0.5 pl-1 hover:bg-state-base-hover',
+      <SelectTrigger
+        className={cn(
+          'h-auto w-auto rounded-[5px] bg-transparent p-0.5 pl-1 hover:bg-state-base-hover',
           open && 'bg-state-base-hover',
         )}
-        >
-          <span className="system-xs-medium text-text-tertiary">{currentValue}</span>
-          <RiArrowDownSLine className="h-4 w-4 text-text-tertiary" />
-        </div>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className={popupClassName}>
-        <div className="w-40 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-1 shadow-lg shadow-shadow-shadow-5">
-          {items.map((item) => {
-            const isSelected = item.value === currentValue
-            return (
-              <div
-                key={item.value}
-                className="flex items-center gap-x-1 rounded-lg px-2 py-1 hover:bg-state-base-hover"
-                onClick={() => {
-                  onSelect(item)
-                  setOpen(false)
-                }}
-              >
-                <span className="px-1 system-sm-medium text-text-secondary">{item.text}</span>
-                {isSelected && <RiCheckLine className="h-4 w-4 text-text-accent" />}
-              </div>
-            )
-          })}
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+      >
+        <span className="system-xs-medium text-text-tertiary">{currentValue}</span>
+      </SelectTrigger>
+      <SelectContent
+        sideOffset={4}
+        className={popupClassName}
+        popupClassName="w-40 rounded-xl border-[0.5px] p-1 shadow-lg shadow-shadow-shadow-5"
+        listClassName="p-0"
+      >
+        {items.map((item) => {
+          const isSelected = item.value === currentValue
+          return (
+            <SelectItem
+              key={item.value}
+              value={item.value}
+              className="gap-x-1 rounded-lg px-2 py-1"
+            >
+              <SelectItemText className="px-1 system-sm-medium text-text-secondary">{item.text}</SelectItemText>
+              {isSelected && <RiCheckLine className="h-4 w-4 text-text-accent" />}
+              <SelectItemIndicator className="hidden" />
+            </SelectItem>
+          )
+        })}
+      </SelectContent>
+    </Select>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/loop/__tests__/integration.spec.tsx b/web/app/components/workflow/nodes/loop/__tests__/integration.spec.tsx
index a4a00fee67..99c0f9c81d 100644
--- a/web/app/components/workflow/nodes/loop/__tests__/integration.spec.tsx
+++ b/web/app/components/workflow/nodes/loop/__tests__/integration.spec.tsx
@@ -353,8 +353,8 @@ describe('loop path', () => {
       await user.click(screen.getByText('Variable'))
       fireEvent.change(screen.getByDisplayValue('12'), { target: { value: '42' } })
 
-      expect(onSelect).toHaveBeenCalledWith(ComparisonOperator.is)
-      expect(onNumberVarTypeChange).toHaveBeenCalledWith(NumberVarType.variable)
+      expect(onSelect.mock.calls[0]?.[0]).toBe(ComparisonOperator.is)
+      expect(onNumberVarTypeChange.mock.calls[0]?.[0]).toBe(NumberVarType.variable)
       expect(onValueChange).toHaveBeenCalledWith('42')
     })
 
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
index 916326c416..d343b0c8e5 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
@@ -2,17 +2,18 @@ import type { ComparisonOperator } from '../../types'
 import type { VarType } from '@/app/components/workflow/types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
 import { RiArrowDownSLine } from '@remixicon/react'
 import {
   useMemo,
-  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import { getOperators, isComparisonOperatorNeedTranslate } from '../../utils'
 
 const i18nPrefix = 'nodes.ifElse'
@@ -34,7 +35,6 @@ const ConditionOperator = ({
   onSelect,
 }: ConditionOperatorProps) => {
   const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
 
   const options = useMemo(() => {
     return getOperators(varType, file).map((o) => {
@@ -46,49 +46,48 @@ const ConditionOperator = ({
   }, [t, varType, file])
   const selectedOption = options.find(o => Array.isArray(value) ? o.value === value[0] : o.value === value)
   return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement="bottom-end"
-      offset={{
-        mainAxis: 4,
-        crossAxis: 0,
-      }}
-    >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
-        <Button
-          className={cn('shrink-0', !selectedOption && 'opacity-50', className)}
-          size="small"
-          variant="ghost"
-          disabled={disabled}
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={(
+          <Button
+            className={cn('shrink-0', !selectedOption && 'opacity-50', className)}
+            size="small"
+            variant="ghost"
+            disabled={disabled}
+          />
+        )}
+      >
+        {
+          selectedOption
+            ? selectedOption.label
+            : t(`${i18nPrefix}.select`, { ns: 'workflow' })
+        }
+        <RiArrowDownSLine className="ml-1 h-3.5 w-3.5" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        placement="bottom-end"
+        sideOffset={4}
+        popupClassName="rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
+      >
+        <DropdownMenuRadioGroup
+          value={selectedOption?.value}
+          onValueChange={onSelect}
         >
-          {
-            selectedOption
-              ? selectedOption.label
-              : t(`${i18nPrefix}.select`, { ns: 'workflow' })
-          }
-          <RiArrowDownSLine className="ml-1 h-3.5 w-3.5" />
-        </Button>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className="z-10">
-        <div className="rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
           {
             options.map(option => (
-              <div
+              <DropdownMenuRadioItem
                 key={option.value}
-                className="flex h-7 cursor-pointer items-center rounded-lg px-3 py-1.5 text-[13px] font-medium text-text-secondary hover:bg-state-base-hover"
-                onClick={() => {
-                  onSelect(option.value)
-                  setOpen(false)
-                }}
+                value={option.value}
+                closeOnClick
+                className="h-7 rounded-lg px-3 py-1.5 text-[13px] font-medium text-text-secondary"
               >
                 {option.label}
-              </div>
+              </DropdownMenuRadioItem>
             ))
           }
-        </div>
-      </PortalToFollowElemContent>
-    </PortalToFollowElem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx b/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
index 954f713a78..a17d7589f1 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
@@ -4,6 +4,18 @@ import type {
 } from '@/app/components/workflow/types'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { capitalize } from 'es-toolkit/string'
@@ -14,11 +26,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import {
-  PortalToFollowElem,
-  PortalToFollowElemContent,
-  PortalToFollowElemTrigger,
-} from '@/app/components/base/portal-to-follow-elem'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import { VarType } from '@/app/components/workflow/types'
 import { variableTransformer } from '@/app/components/workflow/utils'
@@ -63,58 +70,61 @@ const ConditionNumberInput = ({
 
   return (
     <div className="flex cursor-pointer items-center">
-      <PortalToFollowElem
+      <DropdownMenu
         open={numberVarTypeVisible}
         onOpenChange={setNumberVarTypeVisible}
-        placement="bottom-start"
-        offset={{ mainAxis: 2, crossAxis: 0 }}
       >
-        <PortalToFollowElemTrigger onClick={() => setNumberVarTypeVisible(v => !v)}>
-          <Button
-            className="shrink-0"
-            variant="ghost"
-            size="small"
+        <DropdownMenuTrigger
+          render={(
+            <Button
+              className="shrink-0"
+              variant="ghost"
+              size="small"
+            />
+          )}
+        >
+          {capitalize(numberVarType)}
+          <RiArrowDownSLine className="ml-px h-3.5 w-3.5" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          placement="bottom-start"
+          sideOffset={2}
+          popupClassName="w-[112px] rounded-xl border-[0.5px] bg-components-panel-bg-blur p-1"
+        >
+          <DropdownMenuRadioGroup
+            value={numberVarType}
+            onValueChange={onNumberVarTypeChange}
           >
-            {capitalize(numberVarType)}
-            <RiArrowDownSLine className="ml-px h-3.5 w-3.5" />
-          </Button>
-        </PortalToFollowElemTrigger>
-        <PortalToFollowElemContent className="z-1000">
-          <div className="w-[112px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg">
             {
               options.map(option => (
-                <div
+                <DropdownMenuRadioItem
                   key={option}
+                  value={option}
+                  closeOnClick
                   className={cn(
-                    'flex h-7 cursor-pointer items-center rounded-md px-3 hover:bg-state-base-hover',
+                    'h-7 rounded-md px-3',
                     'text-[13px] font-medium text-text-secondary',
                     numberVarType === option && 'bg-state-base-hover',
                   )}
-                  onClick={() => {
-                    onNumberVarTypeChange(option)
-                    setNumberVarTypeVisible(false)
-                  }}
                 >
                   {capitalize(option)}
-                </div>
+                </DropdownMenuRadioItem>
               ))
             }
-          </div>
-        </PortalToFollowElemContent>
-      </PortalToFollowElem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
       <div className="mx-1 h-4 w-px bg-divider-regular"></div>
       <div className="ml-0.5 w-0 grow">
         {
           numberVarType === NumberVarType.variable && (
-            <PortalToFollowElem
+            <Popover
               open={variableSelectorVisible}
               onOpenChange={setVariableSelectorVisible}
-              placement="bottom-start"
-              offset={{ mainAxis: 2, crossAxis: 0 }}
             >
-              <PortalToFollowElemTrigger
-                className="w-full"
-                onClick={() => setVariableSelectorVisible(v => !v)}
+              <PopoverTrigger
+                nativeButton={false}
+                render={<div className="w-full" />}
               >
                 {
                   value && (
@@ -133,16 +143,20 @@ const ConditionNumberInput = ({
                     </div>
                   )
                 }
-              </PortalToFollowElemTrigger>
-              <PortalToFollowElemContent className="z-1000">
+              </PopoverTrigger>
+              <PopoverContent
+                placement="bottom-start"
+                sideOffset={2}
+                popupClassName="border-none bg-transparent shadow-none"
+              >
                 <div className={cn('w-[296px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pt-1 shadow-lg', isShort && 'w-[200px]')}>
                   <VarReferenceVars
                     vars={variables}
                     onChange={handleSelectVariable}
                   />
                 </div>
-              </PortalToFollowElemContent>
-            </PortalToFollowElem>
+              </PopoverContent>
+            </Popover>
           )
         }
         {
diff --git a/web/app/components/workflow/variable-inspect/left.tsx b/web/app/components/workflow/variable-inspect/left.tsx
index 6d590eb281..4cbd6b5f63 100644
--- a/web/app/components/workflow/variable-inspect/left.tsx
+++ b/web/app/components/workflow/variable-inspect/left.tsx
@@ -9,8 +9,6 @@ import { VarInInspectType } from '@/types/workflow'
 import useCurrentVars from '../hooks/use-inspect-vars-crud'
 import { useNodesInteractions } from '../hooks/use-nodes-interactions'
 import { useStore } from '../store'
-// import ActionButton from '@/app/components/base/action-button'
-// import Tooltip from '@/app/components/base/tooltip'
 import Group from './group'
 
 type Props = {
diff --git a/web/docs/overlay-migration.md b/web/docs/overlay-migration.md
index 7a6436ed87..4457d9cddf 100644
--- a/web/docs/overlay-migration.md
+++ b/web/docs/overlay-migration.md
@@ -2,12 +2,11 @@
 
 This document tracks the Dify-web migration away from legacy overlay APIs.
 
-> **See also:** [`packages/dify-ui/README.md`] for the permanent overlay / portal / z-index contract of the replacement primitives. This document covers the one-off migration mechanics (allowlist, deprecated import paths, coexistence z-index strategy) and is expected to shrink and eventually be removed once the legacy overlays are gone.
+> **See also:** [`packages/dify-ui/README.md`] for the permanent overlay / portal / z-index contract of the replacement primitives. This document covers the one-off migration mechanics (deprecated import paths and coexistence z-index strategy) and is expected to shrink and eventually be removed once the legacy overlays are gone.
 
 ## Scope
 
 - Deprecated imports:
-  - `@/app/components/base/portal-to-follow-elem`
   - `@/app/components/base/tooltip`
   - `@/app/components/base/modal`
   - `@/app/components/base/dialog`
@@ -28,26 +27,18 @@ This document tracks the Dify-web migration away from legacy overlay APIs.
 
 - `no-restricted-imports` blocks all deprecated imports listed above.
 - The rule is enabled for normal source files (`.ts` / `.tsx`) and test files are excluded.
-- Legacy `app/components/base/*` callers are temporarily allowlisted in `OVERLAY_MIGRATION_LEGACY_BASE_FILES` (`web/eslint.constants.mjs`).
-- New files must not be added to the allowlist without migration owner approval.
 
 ## Migration phases
 
 1. Business/UI features outside `app/components/base/**`
    - Migrate old calls to semantic primitives from `@langgenius/dify-ui/*`.
    - Keep deprecated imports out of newly touched files.
-1. Legacy base components in allowlist
-   - Migrate allowlisted base callers gradually.
-   - Remove migrated files from `OVERLAY_MIGRATION_LEGACY_BASE_FILES` immediately.
+1. Legacy base components
+   - Migrate legacy base callers gradually.
+   - Keep deprecated imports out of newly touched files.
 1. Cleanup
-   - Remove remaining allowlist entries.
    - Remove legacy overlay implementations when import count reaches zero.
 
-## Allowlist maintenance
-
-- If a migrated file was in the allowlist, remove it from `web/eslint.constants.mjs` in the same PR.
-- Never increase allowlist scope to bypass new code.
-
 ## z-index strategy
 
 All new overlay primitives in `@langgenius/dify-ui/*` share a single z-index value:
@@ -58,13 +49,12 @@ All new overlay primitives in `@langgenius/dify-ui/*` share a single z-index val
 During the migration period, legacy and new overlays coexist. Legacy overlays
 portal to `document.body` with explicit z-index values:
 
-| Layer                             | z-index        | Components                                                                       |
-| --------------------------------- | -------------- | -------------------------------------------------------------------------------- |
-| Legacy Drawer                     | `z-30`         | `base/drawer`                                                                    |
-| Legacy Modal                      | `z-60`         | `base/modal` (default)                                                           |
-| Legacy PortalToFollowElem callers | up to `z-1001` | various business components                                                      |
-| **New UI primitives**             | **`z-1002`**   | `@langgenius/dify-ui/*` (Popover, Dialog, Autocomplete, Combobox, Tooltip, etc.) |
-| Toast                             | `z-1003`       | `@langgenius/dify-ui/toast`                                                      |
+| Layer                 | z-index      | Components                                                                       |
+| --------------------- | ------------ | -------------------------------------------------------------------------------- |
+| Legacy Drawer         | `z-30`       | `base/drawer`                                                                    |
+| Legacy Modal          | `z-60`       | `base/modal` (default)                                                           |
+| **New UI primitives** | **`z-1002`** | `@langgenius/dify-ui/*` (Popover, Dialog, Autocomplete, Combobox, Tooltip, etc.) |
+| Toast                 | `z-1003`     | `@langgenius/dify-ui/toast`                                                      |
 
 `z-1002` sits above all common legacy overlays, so new primitives always
 render on top without needing per-call-site z-index hacks. Among themselves,
@@ -82,8 +72,6 @@ back to `z-9999`.
   parent legacy overlay should be migrated instead.
 - When migrating a legacy overlay that has a high z-index, remove the z-index
   entirely — the new primitive's default `z-1002` handles it.
-- `portalToFollowElemContentClassName` with z-index values (e.g. `z-1000`)
-  should be deleted when the surrounding legacy container is migrated.
 
 ### Post-migration cleanup
 
diff --git a/web/docs/test.md b/web/docs/test.md
index 836ab7ad56..b7c6a5f5a3 100644
--- a/web/docs/test.md
+++ b/web/docs/test.md
@@ -88,7 +88,7 @@ Use `pnpm analyze-component <path>` to analyze component complexity and adopt di
 **Rules**:
 
 1. **Match actual conditional rendering**: If the real component returns `null` or doesn't render under certain conditions, the mock must do the same. Always check the actual component implementation before creating mocks.
-1. **Use shared state variables when needed**: When mocking components that depend on shared context or state (e.g., `PortalToFollowElem` with `PortalToFollowElemContent`), use module-level variables to track state and reset them in `beforeEach`.
+1. **Use shared state variables when needed**: When mocking components that depend on shared context or state (for example, a parent overlay mock with a separate content component), use module-level variables to track state and reset them in `beforeEach`.
 1. **Always reset shared mock state in beforeEach**: Module-level variables used in mocks must be reset in `beforeEach` to ensure test isolation, even if you set default values elsewhere.
 1. **Use fake timers only when needed**: Only use `vi.useFakeTimers()` if:
    - Testing components that use real `setTimeout`/`setInterval` (not mocked)
@@ -377,16 +377,16 @@ describe('ComponentName', () => {
 
 ```tsx
 // ✅ CORRECT: Matches actual component behavior
-let mockPortalOpenState = false
+let mockOverlayOpenState = false
 
-vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
-  PortalToFollowElem: ({ children, open, ...props }) => {
-    mockPortalOpenState = open || false // Update shared state
+vi.mock('external-overlay-library', () => ({
+  OverlayRoot: ({ children, open, ...props }) => {
+    mockOverlayOpenState = open || false // Update shared state
     return <div data-open={open}>{children}</div>
   },
-  PortalToFollowElemContent: ({ children }) => {
+  OverlayContent: ({ children }) => {
     // ✅ Matches actual: returns null when open is false
-    if (!mockPortalOpenState)
+    if (!mockOverlayOpenState)
       return null
     return <div>{children}</div>
   },
@@ -395,7 +395,7 @@ vi.mock('@/app/components/base/portal-to-follow-elem', () => ({
 describe('Component', () => {
   beforeEach(() => {
     vi.clearAllMocks() // ✅ Reset mock call history
-    mockPortalOpenState = false // ✅ Reset shared state
+    mockOverlayOpenState = false // ✅ Reset shared state
   })
 })
 ```
diff --git a/web/eslint.config.mjs b/web/eslint.config.mjs
index 2a043ac73d..864b3fa960 100644
--- a/web/eslint.config.mjs
+++ b/web/eslint.config.mjs
@@ -11,9 +11,9 @@ import noBarrelFiles from 'eslint-plugin-no-barrel-files'
 import sonar from 'eslint-plugin-sonarjs'
 import storybook from 'eslint-plugin-storybook'
 import {
+  GENERATED_IGNORES,
   HYOBAN_PREFER_TAILWIND_ICONS_OPTIONS,
   NEXT_PLATFORM_RESTRICTED_IMPORT_PATHS,
-  OVERLAY_MIGRATION_LEGACY_BASE_FILES,
   OVERLAY_RESTRICTED_IMPORT_PATTERNS,
   WEB_RESTRICTED_IMPORT_PATTERNS,
 } from './eslint.constants.mjs'
@@ -27,7 +27,7 @@ export default antfu(
         'react/no-unnecessary-use-prefix': 'error',
       },
     },
-    ignores: ['public', 'types/doc-paths.ts', 'eslint-suppressions.json'],
+    ignores: ['public', 'types/doc-paths.ts', 'eslint-suppressions.json', ...GENERATED_IGNORES],
     typescript: {
       overrides: {
         'ts/consistent-type-definitions': ['error', 'type'],
@@ -177,7 +177,6 @@ export default antfu(
     ignores: [
       'next/**',
       ...GLOB_TESTS,
-      ...OVERLAY_MIGRATION_LEGACY_BASE_FILES,
     ],
     rules: {
       'no-restricted-imports': ['error', {
diff --git a/web/eslint.constants.mjs b/web/eslint.constants.mjs
index 240d3ab06c..a55213ab49 100644
--- a/web/eslint.constants.mjs
+++ b/web/eslint.constants.mjs
@@ -1,3 +1,12 @@
+export const GENERATED_IGNORES = [
+  'storybook-static/',
+  '.next/',
+  'next/',
+  'next-env.d.ts',
+  'dist/',
+  'coverage/',
+]
+
 export const NEXT_PLATFORM_RESTRICTED_IMPORT_PATHS = [
   {
     name: 'next',
@@ -36,13 +45,6 @@ export const WEB_RESTRICTED_IMPORT_PATTERNS = [
 ]
 
 export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
-  {
-    group: [
-      '**/portal-to-follow-elem',
-      '**/portal-to-follow-elem/index',
-    ],
-    message: 'Deprecated: use semantic overlay primitives from @langgenius/dify-ui (popover / dropdown-menu / tooltip / context-menu) instead. See issue #32767.',
-  },
   {
     group: [
       '**/base/tooltip',
@@ -54,7 +56,6 @@ export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
     group: [
       '**/base/modal',
       '**/base/modal/index',
-      '**/base/modal/modal',
     ],
     message: 'Deprecated: use @langgenius/dify-ui/dialog instead. See issue #32767.',
   },
@@ -67,15 +68,6 @@ export const OVERLAY_RESTRICTED_IMPORT_PATTERNS = [
   },
 ]
 
-export const OVERLAY_MIGRATION_LEGACY_BASE_FILES = [
-  'app/components/base/chat/chat/citation/progress-tooltip.tsx',
-  'app/components/base/chat/chat/citation/tooltip.tsx',
-  'app/components/base/chip/index.tsx',
-  'app/components/base/modal/modal.tsx',
-  'app/components/base/sort/index.tsx',
-  'app/components/base/tooltip/index.tsx',
-]
-
 export const HYOBAN_PREFER_TAILWIND_ICONS_OPTIONS = {
   prefix: 'i-',
   propMappings: {
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 3107a8fc60..a4d3df3c18 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -88,6 +88,7 @@ export default defineConfig(({ mode }) => {
       coverage: {
         provider: 'v8',
         reporter: isCI ? ['json', 'json-summary'] : ['text', 'json', 'json-summary'],
+        exclude: ['**/__mocks__/**'],
       },
     },
   }